/* =========================================================================
   QUEBIE – Neon Arcade Stylesheet
   Farben aus dem Logo: Pink/Magenta, Gelb, Cyan/Blau, Lila auf Dunkellila
   ========================================================================= */

:root {
  --pink:        #ff1a8c;
  --pink-deep:   #d40f72;
  --pink-soft:   #ff5bb0;
  --yellow:      #ffd200;
  --yellow-deep: #ffaa00;
  --cyan:        #00e0ff;
  --blue:        #1b6bff;
  --purple:      #8a2be2;
  --purple-2:    #b14bff;

  --bg:          #150826;
  --bg-2:        #220c40;
  --panel:       rgba(40, 16, 74, 0.72);
  --panel-line:  rgba(177, 75, 255, 0.35);
  --text:        #ffffff;
  --text-dim:    #c9b6e6;

  --glow-pink:   0 0 18px rgba(255, 26, 140, 0.65);
  --glow-cyan:   0 0 18px rgba(0, 224, 255, 0.6);
  --radius:      22px;

  --font-display: "Fredoka", system-ui, sans-serif;
  --font-body:    "Nunito", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }
html { background: var(--bg); }   /* nie weiss, auch nicht in Safe-Area-/Overscroll-Bereichen */

body {
  font-family: var(--font-body);
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(138, 43, 226, 0.55), transparent 60%),
    radial-gradient(900px 600px at 85% 20%, rgba(0, 224, 255, 0.18), transparent 55%),
    radial-gradient(900px 600px at 10% 80%, rgba(255, 26, 140, 0.22), transparent 55%),
    linear-gradient(160deg, var(--bg) 0%, var(--bg-2) 100%);
  min-height: 100%;
  overflow-x: hidden;
  position: relative;
}

/* Halftone-Punktraster wie im Logo-Hintergrund */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1.5px, transparent 1.6px);
  background-size: 22px 22px;
  pointer-events: none;
  z-index: 0;
}

.wrap {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 20px 60px;
}

/* -------------------------------------------------------------------------
   Wordmark / Logo-Text
   ------------------------------------------------------------------------- */
.brand {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 0.95;
  display: inline-block;
  text-shadow:
    0 2px 0 rgba(0,0,0,0.35),
    0 0 24px rgba(255, 26, 140, 0.45);
}
.brand .q { color: var(--pink); }
.brand .a { color: var(--yellow); }
.brand .b { color: var(--purple-2); }

.hero-logo {
  font-size: clamp(54px, 13vw, 132px);
  filter: drop-shadow(0 6px 0 rgba(0,0,0,0.25));
  -webkit-text-stroke: 3px rgba(10,0,25,0.55);
}
.tagline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(15px, 3.4vw, 24px);
  margin-top: 6px;
  background: rgba(20, 8, 40, 0.6);
  border: 2px solid var(--panel-line);
  border-radius: 999px;
  padding: 8px 22px;
  display: inline-flex;
  gap: 8px;
  box-shadow: var(--glow-cyan), inset 0 0 14px rgba(0,224,255,0.12);
}
.tagline .d { color: var(--cyan); }
.tagline .k { color: var(--yellow); }
.tagline .g { color: var(--pink); }

/* -------------------------------------------------------------------------
   Layout-Bausteine
   ------------------------------------------------------------------------- */
header.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}
header.topbar .brand { font-size: 30px; }
/* Auf Handy / schmalen Schirmen kompakter, damit Abmelden/Einstellungen nicht riesig wirken und nichts aus dem Bild läuft */
body.phone-mode header.topbar { margin-bottom: 16px; flex-wrap: wrap; gap: 8px; }
body.phone-mode header.topbar .brand { font-size: 22px; }
@media (max-width: 560px) {
  header.topbar { flex-wrap: wrap; gap: 8px; row-gap: 6px; }
  header.topbar .brand { font-size: 21px; }
  header.topbar .btn { padding: 7px 11px; font-size: 13px; }
}

.center { text-align: center; }
.stack  { display: flex; flex-direction: column; gap: 16px; }
.row    { display: flex; gap: 14px; flex-wrap: wrap; }
.spacer { height: 28px; }
.muted  { color: var(--text-dim); }

.hero {
  text-align: center;
  padding: 36px 0 18px;
}
.hero p.lead {
  max-width: 620px;
  margin: 22px auto 30px;
  font-size: clamp(16px, 2.5vw, 20px);
  color: var(--text-dim);
}

/* -------------------------------------------------------------------------
   Buttons – glossy Arcade-Style
   ------------------------------------------------------------------------- */
.btn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  border: none;
  border-radius: 16px;
  padding: 16px 30px;
  cursor: pointer;
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  transition: transform .08s ease, filter .2s ease, box-shadow .2s ease;
  text-shadow: 0 2px 2px rgba(0,0,0,0.3);
}
.btn:active { transform: translateY(3px); }

.btn-pink {
  background: linear-gradient(180deg, var(--pink-soft), var(--pink) 55%, var(--pink-deep));
  box-shadow: 0 6px 0 var(--pink-deep), var(--glow-pink);
}
.btn-pink:active { box-shadow: 0 3px 0 var(--pink-deep), var(--glow-pink); }

.btn-cyan {
  background: linear-gradient(180deg, #6ff0ff, var(--cyan) 55%, #0098cc);
  box-shadow: 0 6px 0 #0098cc, var(--glow-cyan);
  color: #06283b;
  text-shadow: none;
}
.btn-cyan:active { box-shadow: 0 3px 0 #0098cc, var(--glow-cyan); }

.btn-yellow {
  background: linear-gradient(180deg, #ffe04d, var(--yellow) 55%, var(--yellow-deep));
  box-shadow: 0 6px 0 var(--yellow-deep), 0 0 18px rgba(255,210,0,0.5);
  color: #4a2c00;
  text-shadow: none;
}
.btn-yellow:active { box-shadow: 0 3px 0 var(--yellow-deep); }

.btn-ghost {
  background: rgba(255,255,255,0.06);
  border: 2px solid var(--panel-line);
  box-shadow: none;
}
.btn-block { width: 100%; }
.btn-lg { font-size: 24px; padding: 20px 40px; }

/* -------------------------------------------------------------------------
   Karten / Panels
   ------------------------------------------------------------------------- */
.card {
  background: var(--panel);
  border: 2px solid var(--panel-line);
  border-radius: var(--radius);
  padding: 26px;
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.04);
}
.card h2 { font-family: var(--font-display); font-weight: 700; margin-bottom: 4px; }
.card .sub { color: var(--text-dim); margin-bottom: 18px; }

.auth-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 18px;
}
.auth-pick {
  cursor: pointer;
  text-align: center;
  transition: transform .15s ease, box-shadow .2s ease;
}
.auth-pick:hover { transform: translateY(-4px); }
.auth-pick .emoji { font-size: 46px; display: block; margin-bottom: 8px; }
.auth-pick h3 { font-family: var(--font-display); font-size: 26px; }

/* -------------------------------------------------------------------------
   Formulare
   ------------------------------------------------------------------------- */
label.field { display: block; margin-bottom: 16px; }
label.field > span {
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text);
}
.input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 17px;
  color: #fff;
  background: rgba(10, 4, 22, 0.6);
  border: 2px solid var(--panel-line);
  border-radius: 14px;
  padding: 14px 16px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder { color: rgba(201,182,230,0.55); }
.input:focus { border-color: var(--cyan); box-shadow: var(--glow-cyan); }

/* Interessen-Block mit Chips + Plus */
.interest {
  border: 2px dashed var(--panel-line);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 14px;
  background: rgba(255,255,255,0.03);
}
.interest .ihead {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  margin-bottom: 10px;
}
.interest .ihead .ic { font-size: 22px; }
.add-row { display: flex; gap: 8px; }
.add-row .input { flex: 1; }
.btn-plus {
  flex: 0 0 auto;
  width: 52px;
  font-size: 26px;
  padding: 0;
  border-radius: 14px;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, var(--purple-2), var(--purple));
  color: #fff;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 14px;
  box-shadow: 0 3px 0 rgba(0,0,0,0.25);
  animation: pop .18s ease;
}
.chip .x {
  cursor: pointer;
  font-weight: 900;
  opacity: 0.85;
  line-height: 1;
}
.chip .x:hover { opacity: 1; }

@keyframes pop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.alert {
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-weight: 700;
}
.alert-err { background: rgba(255,77,109,0.16); border: 2px solid #ff4d6d; color: #ffd0d8; }
.alert-ok  { background: rgba(0,224,255,0.14);  border: 2px solid var(--cyan); color: #cdf7ff; }

.formlink { text-align: center; margin-top: 14px; color: var(--text-dim); }
.formlink a { color: var(--cyan); font-weight: 700; text-decoration: none; }

/* -------------------------------------------------------------------------
   Lobby / Spielansicht
   ------------------------------------------------------------------------- */
.game-head {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.code-badge {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 7vw, 64px);
  letter-spacing: 8px;
  color: var(--yellow);
  text-shadow: 0 0 22px rgba(255,210,0,0.5);
}
.qr-box {
  background: #fff;
  border-radius: 18px;
  padding: 16px;
  display: inline-block;
  box-shadow: 0 0 0 4px var(--cyan), var(--glow-cyan);
}
.qr-box img, .qr-box canvas { display: block; border-radius: 6px; }

.stat-row { display: flex; gap: 14px; flex-wrap: wrap; }
.stat {
  flex: 1 1 140px;
  background: var(--panel);
  border: 2px solid var(--panel-line);
  border-radius: 16px;
  padding: 16px;
  text-align: center;
}
.stat .num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 40px;
  color: var(--cyan);
}
.stat .lbl { color: var(--text-dim); font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: 1px; }

.players {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.player {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.05);
  border: 2px solid var(--panel-line);
  border-radius: 16px;
  padding: 12px 14px;
  animation: slidein .25s ease;
}
@keyframes slidein { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.player .av {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: #1a0a33;
  background: linear-gradient(180deg, var(--yellow), var(--yellow-deep));
  flex: 0 0 auto;
}
.player.host .av { background: linear-gradient(180deg, var(--pink-soft), var(--pink)); color:#fff; }
.player .nm { font-weight: 800; flex: 1; }
.player .sc { font-family: var(--font-display); font-weight: 700; color: var(--cyan); }
.player .tag {
  font-size: 11px; font-weight: 800; letter-spacing: 1px;
  background: var(--pink); color: #fff; padding: 2px 8px; border-radius: 999px;
}

/* Buzzer */
.buzz-wrap { text-align: center; padding: 30px 0 10px; }
.buzzer {
  width: 200px; height: 200px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
  background:
    radial-gradient(circle at 38% 30%, #ff7bbf, var(--pink) 45%, var(--pink-deep) 100%);
  box-shadow:
    0 14px 0 var(--pink-deep),
    0 22px 40px rgba(255,26,140,0.5),
    inset 0 -8px 20px rgba(0,0,0,0.25),
    inset 0 10px 20px rgba(255,255,255,0.35);
  transition: transform .06s ease, box-shadow .06s ease;
}
.buzzer:active {
  transform: translateY(12px);
  box-shadow: 0 2px 0 var(--pink-deep), 0 6px 14px rgba(255,26,140,0.5), inset 0 -4px 14px rgba(0,0,0,0.3);
}
.buzzer.flash { animation: buzzflash .4s ease; }
@keyframes buzzflash {
  0%,100% { filter: none; }
  50% { filter: brightness(1.6) saturate(1.4); }
}

.pill-status {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(0,224,255,0.12);
  border: 2px solid var(--cyan);
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 800;
  color: var(--cyan);
}
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); box-shadow: var(--glow-cyan); animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

.note {
  font-size: 13px;
  color: var(--text-dim);
  background: rgba(255,255,255,0.04);
  border-left: 3px solid var(--purple-2);
  padding: 10px 14px;
  border-radius: 8px;
  margin-top: 18px;
}

@media (max-width: 600px) {
  .wrap { padding: 18px 14px 50px; }
  .card { padding: 20px; }
}

/* =========================================================================
   Video-Hintergrund (Spiel-Join)
   ========================================================================= */
.video-bg {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.video-bg-overlay {
  position: fixed; inset: 0;
  z-index: -1;
  background:
    radial-gradient(1000px 700px at 50% -10%, rgba(138,43,226,0.5), transparent 60%),
    radial-gradient(800px 600px at 85% 20%, rgba(0,224,255,0.18), transparent 55%),
    linear-gradient(160deg, rgba(21,8,38,0.82), rgba(34,12,64,0.86));
}
body.has-video { background: #0a0416; }
body.has-video::before { opacity: 0.4; }

/* =========================================================================
   Admin / Fragen-Backend
   ========================================================================= */
.admin-tabs { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.admin-tabs a {
  font-family: var(--font-display); font-weight: 700;
  text-decoration: none; color: var(--text-dim);
  background: rgba(255,255,255,0.05);
  border: 2px solid var(--panel-line);
  border-radius: 12px; padding: 10px 18px;
}
.admin-tabs a.active { color: #fff; border-color: var(--cyan); box-shadow: var(--glow-cyan); }

.tree { list-style: none; }
.tree ul { list-style: none; margin-left: 22px; border-left: 2px dashed var(--panel-line); padding-left: 14px; }
.tree li { margin: 6px 0; }
.tree .node {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.05);
  border: 2px solid var(--panel-line);
  border-radius: 12px; padding: 8px 12px;
}
.tree .node .nm { font-weight: 800; flex: 1; }
.tree .node img { width: 34px; height: 34px; object-fit: cover; border-radius: 8px; }
.tree .lvl { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--purple-2); }

.qtable { width: 100%; border-collapse: collapse; margin-top: 8px; }
.qtable th, .qtable td { text-align: left; padding: 10px; border-bottom: 1px solid var(--panel-line); vertical-align: middle; }
.qtable th { font-family: var(--font-display); color: var(--text-dim); font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }
.qtable img.thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; }
.qtable .path { color: var(--text-dim); font-size: 13px; }
.badge-correct { background: var(--cyan); color:#06283b; font-weight:800; padding:2px 8px; border-radius:999px; font-size:12px; }
.stars { color: var(--yellow); letter-spacing: 2px; }

.answer-grid { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; margin-bottom: 10px; }
.answer-grid .pick { display:flex; align-items:center; justify-content:center; }
.answer-grid input[type=radio] { width: 22px; height: 22px; accent-color: var(--pink); }

.btn-sm { font-size: 14px; padding: 8px 14px; border-radius: 10px; box-shadow: none; }
.btn-danger { background: linear-gradient(180deg,#ff6b81,#ff4d6d 60%,#d61f44); box-shadow: 0 4px 0 #d61f44; }
.inline-form { display: inline; }

select.input { appearance: none; cursor: pointer; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .two-col { grid-template-columns: 1fr; } }

/* =========================================================================
   GAMESHOW-ENGINE  ·  TV-Buehne + Handy-Controller (neu)
   ========================================================================= */

/* ---- Modus-Layouts ---- */
body.tv-mode{height:100vh;height:100dvh;overflow:hidden}
body.tv-mode .wrap{position:relative;z-index:3;max-width:none;width:100%;height:100vh;height:100dvh;overflow:hidden;padding:0;margin:0}
body.phone-mode{min-height:100dvh}
/* Vollbild-App (Home-Bildschirm): Inhalt aus Notch/Status-/Gestenleiste heraushalten, Hintergrund bleibt dunkel */
body.phone-mode .wrap{max-width:540px;width:100%;min-height:100dvh;display:flex;flex-direction:column;justify-content:flex-start;
  padding:max(env(safe-area-inset-top),14px) env(safe-area-inset-right) max(env(safe-area-inset-bottom),18px) env(safe-area-inset-left)}
/* Topbar bleibt oben (knapp unter Notch), Inhalt fliesst darunter; nichts wird abgeschnitten */
body.phone-mode .wrap > *{flex-shrink:0}

/* ---- Fullscreen-Video + Abdunklung (TV) ---- */
.gs-video{position:fixed;inset:0;width:100vw;height:100vh;object-fit:cover;z-index:1;opacity:0;
  transition:opacity .9s ease;background:#0d0418}
.gs-video.on{opacity:1}
.gs-overlay{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(130% 100% at 50% 0%, rgba(21,8,38,.30), rgba(21,8,38,.74) 72%),
    linear-gradient(180deg, rgba(21,8,38,.30) 0%, rgba(21,8,38,.55) 100%)}

/* ---- TV-Bühne (Frage/Reveal) – MUSS über Video(1)+Overlay(2) liegen ---- */
.gs-stage{position:relative;z-index:4;height:100vh;height:100dvh;align-items:center;justify-content:center;padding:4vh 4vw;overflow:hidden}
.gs-stage:not([hidden]){display:flex}

/* ---- TV-Lobby (Wartebereich) ---- */
.tv-lobby{position:relative;z-index:3;height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column;gap:3vh;padding:3.4vh 4vw}
.tv-lobby-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.tv-lobby-head .brand{font-size:clamp(26px,3vw,42px)}
.tv-join{display:grid;grid-template-columns:1fr auto;gap:4vw;align-items:center;
  background:var(--panel);border:1px solid var(--panel-line);border-radius:26px;
  padding:clamp(20px,3vw,40px);backdrop-filter:blur(10px);box-shadow:0 20px 60px rgba(0,0,0,.4)}
.code-badge.tv-code{font-family:var(--font-display);font-weight:700;letter-spacing:.14em;
  font-size:clamp(46px,9vw,120px);line-height:1;color:#fff;
  background:linear-gradient(120deg,var(--pink),var(--cyan));-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;filter:drop-shadow(0 6px 24px rgba(255,26,140,.35));padding:0}
.tv-join .qr-box{margin:0}
.tv-players{position:relative;z-index:3;background:var(--panel);border:1px solid var(--panel-line);
  border-radius:26px;padding:clamp(16px,2vw,28px);backdrop-filter:blur(10px);flex:1}
.tv-players-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.tv-players-head h2{font-family:var(--font-display);font-weight:700;font-size:clamp(20px,2.2vw,30px)}
.ready-count{font-family:var(--font-display);font-weight:700;color:var(--yellow);font-size:clamp(15px,1.6vw,22px);
  background:rgba(255,210,0,.12);border:1px solid rgba(255,210,0,.3);border-radius:999px;padding:.3em 1em}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.tile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 12px;border-radius:20px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);transition:transform .25s,border-color .25s,box-shadow .25s}
.tile.rdy{border-color:rgba(47,208,122,.55);box-shadow:0 0 0 2px rgba(47,208,122,.25);background:rgba(47,208,122,.08);transform:translateY(-2px)}
.tile.empty{grid-column:1/-1;color:var(--text-dim);font-weight:700;text-align:center;background:transparent;border-style:dashed}
.tile .av{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:24px;color:#fff;
  background:linear-gradient(135deg,var(--purple-2),var(--blue));border:2px solid rgba(255,255,255,.2)}
.tile.rdy .av{background:linear-gradient(135deg,#2fd07a,#16a34a)}
.tile .nm{font-weight:800;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile .rb{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)}
.tile.rdy .rb{color:#73e6a6}

/* ---- Handy-Controller ---- */
.ctrl-top{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;
  border-bottom:1px solid var(--panel-line)}
.ctrl-top .brand{font-size:26px}
.ctrl-code{font-family:var(--font-display);font-weight:700;letter-spacing:.18em;color:var(--text-dim);
  background:rgba(255,255,255,.07);border-radius:10px;padding:.25em .7em;font-size:15px}
.ctrl{flex:1;display:flex;flex-direction:column;padding:16px;min-height:0}

.ph-ready,.ph-wait{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;text-align:center;padding:10px}
.ph-ready h2,.ph-wait h2{font-family:var(--font-display);font-weight:700;font-size:26px}
.ph-big-btn{margin-top:6px;width:min(82vw,320px);aspect-ratio:1/1;border:0;border-radius:50%;cursor:pointer;
  font-family:var(--font-display);font-weight:700;font-size:clamp(34px,11vw,52px);letter-spacing:.04em;color:#fff;
  background:radial-gradient(circle at 32% 28%,var(--pink-soft),var(--pink) 55%,var(--pink-deep));
  box-shadow:0 0 0 8px rgba(255,26,140,.16),0 22px 50px rgba(255,26,140,.4);
  -webkit-tap-highlight-color:transparent;transition:transform .12s,box-shadow .2s;animation:phPulse 2.2s ease-in-out infinite}
.ph-big-btn:active{transform:scale(.95);box-shadow:0 0 0 6px rgba(255,26,140,.2),0 12px 30px rgba(255,26,140,.4)}
@keyframes phPulse{0%,100%{box-shadow:0 0 0 8px rgba(255,26,140,.16),0 22px 50px rgba(255,26,140,.4)}
  50%{box-shadow:0 0 0 16px rgba(255,26,140,.05),0 22px 50px rgba(255,26,140,.5)}}
.ph-check{width:118px;height:118px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:62px;color:#fff;background:linear-gradient(135deg,#2fd07a,#16a34a);
  box-shadow:0 16px 40px rgba(47,208,122,.4);animation:phPop .4s ease both}
@keyframes phPop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}