/* Sahreya · shared tokens + phone/welcome components (design handoff v2) */
:root{
  color-scheme:dark;
  --bg:#171b1a;--bg-deep:#0f1211;--panel:#1f2623;--line:#2b332e;--line-strong:#4a564e;--line-soft:#37413b;
  --ink:#f5f3e9;--ink-muted:#a8b4ac;--ink-dim:#7d8a80;
  --lime:#c2f779;--lime-deep:#80ac46;--lime-ink:#16210f;--lime-dim:#2a3a1e;
  --apricot:#ffae78;--apricot-ink:#2a180c;--apricot-dim:#2a1f17;--apricot-line:#6b4a34;--apricot-soft:#f0cfb5;
  --team-1:#7fd4ff;--team-1-ink:#0b1a22;--team-1-dim:#18272f;--team-1-shade:#3f93bd;
  --team-2:#ff8fa3;--team-2-ink:#2a0e14;--team-2-dim:#2c1a1f;--team-2-shade:#c4586d;
  --font-display:Manrope,Changa,sans-serif;--font-ar:Changa,sans-serif;--font-body:'DM Sans',Changa,sans-serif;
  --team:var(--ink-muted);--team-ink:var(--bg);--team-dim:var(--panel);--team-shade:var(--line-strong);
}
.tc-0{--team:var(--team-1);--team-ink:var(--team-1-ink);--team-dim:var(--team-1-dim);--team-shade:var(--team-1-shade)}
.tc-1{--team:var(--team-2);--team-ink:var(--team-2-ink);--team-dim:var(--team-2-dim);--team-shade:var(--team-2-shade)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--lime);text-underline-offset:4px}a:hover{color:#dcff9f}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--apricot);outline-offset:3px}
input::placeholder,textarea::placeholder{color:var(--ink-dim)}
[hidden]{display:none!important}
h1,h2,h3,p{margin:0}
[lang=ar]{font-family:var(--font-ar)}
.ar{font-family:var(--font-ar)}
.display{font-family:var(--font-display)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* keyframes */
@keyframes gh-spin{to{transform:rotate(360deg)}}
@keyframes gh-pulse{0%,100%{box-shadow:0 0 0 0 #c2f77900,0 10px 0 var(--team-shade)}50%{box-shadow:0 0 0 14px #c2f77955,0 10px 0 var(--team-shade)}}
@keyframes gh-pulse-hold{0%,100%{box-shadow:0 0 0 10px #ffae7822}50%{box-shadow:0 0 0 22px #ffae7833}}
@keyframes gh-eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
@keyframes gh-pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
@keyframes gh-flash{0%{opacity:1}100%{opacity:0}}
@keyframes gh-blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes gh-rise{0%{transform:translateY(12px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes gh-turn{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- primitives ---------- */
.eyebrow{font-family:var(--font-display);font-size:11px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:var(--lime)}
.eyebrow.dim{color:var(--ink-dim);font-size:12px;letter-spacing:1.5px;font-weight:700}
.pill{display:inline-flex;align-items:center;gap:8px;border-radius:30px;padding:5px 11px;font-family:var(--font-display);font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;background:var(--line);color:var(--ink-muted);white-space:nowrap}
.pill.lime{background:var(--lime-dim);color:var(--lime)}
.pill.apricot{background:var(--apricot-dim);color:var(--apricot)}
.pill.ivory{background:var(--line);color:var(--ink)}
.pill.outline{background:transparent;border:1px solid var(--line-soft);padding:6px 12px;font-size:11px;letter-spacing:2px;color:var(--lime)}
.pill.team{background:var(--team-dim);color:var(--team);font-family:var(--font-body);font-size:14px;letter-spacing:0;text-transform:none;font-weight:700;padding:8px 14px 8px 10px}
.pill.team .ar{font-size:16px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 auto}
.dot.lime{background:var(--lime)}.dot.apricot{background:var(--apricot)}.dot.dim{background:var(--line-strong)}.dot.team{background:var(--team)}
.spinner{display:inline-block;width:28px;height:28px;border-radius:50%;border:3px solid var(--line-strong);border-top-color:var(--ink);animation:gh-spin 1s linear infinite;flex:0 0 auto}
.spinner.team{width:36px;height:36px;border-width:4px;border-color:var(--line-soft);border-top-color:var(--team);animation-duration:.9s}
.spinner.small{width:14px;height:14px;border-width:2px;border-color:var(--apricot-line);border-top-color:var(--apricot)}
.wait-dots{display:inline-flex;gap:3px;vertical-align:middle;margin-left:4px}
.wait-dots i{width:5px;height:5px;border-radius:50%;background:var(--lime);animation:gh-blink 1.2s ease-in-out infinite}
.wait-dots i:nth-child(2){animation-delay:.2s}.wait-dots i:nth-child(3){animation-delay:.4s}
.eq{display:flex;gap:3px;align-items:flex-end;height:20px}
.eq i{width:4px;height:20px;border-radius:2px;background:var(--lime);transform-origin:bottom;animation:gh-eq .9s ease-in-out infinite}
.eq i:nth-child(2){animation-duration:1.03s;animation-delay:.1s}.eq i:nth-child(3){animation-duration:1.16s;animation-delay:.2s}.eq i:nth-child(4){animation-duration:1.29s;animation-delay:.3s}.eq i:nth-child(5){animation-duration:1.42s;animation-delay:.4s}.eq i:nth-child(6){animation-duration:1.55s;animation-delay:.5s}
.wave{display:flex;gap:5px;align-items:center;height:44px}
.wave i{width:5px;height:44px;border-radius:3px;background:var(--apricot);animation:gh-eq .6s ease-in-out infinite}
.wave i:nth-child(5n+2){animation-duration:.71s}.wave i:nth-child(5n+3){animation-duration:.82s}.wave i:nth-child(5n+4){animation-duration:.93s}.wave i:nth-child(5n){animation-duration:1.04s}
.wave i:nth-child(2n){animation-delay:.12s}.wave i:nth-child(3n){animation-delay:.24s}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:16px;min-height:60px;padding:15px 22px;font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:-.2px;background:var(--lime);color:var(--lime-ink);box-shadow:0 6px 0 var(--lime-deep);transition:transform .08s,box-shadow .08s;text-decoration:none;text-align:center;width:100%}
.btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 3px 0 var(--lime-deep)}
.btn.secondary{background:transparent;color:var(--ink);border:2px solid var(--line-strong);box-shadow:none;min-height:56px;font-size:16px;font-weight:700}
.btn.secondary:active:not(:disabled){transform:none}
.btn.danger{background:var(--apricot);color:var(--apricot-ink);box-shadow:none}
.btn.team{background:var(--team);color:var(--team-ink);box-shadow:0 6px 0 var(--team-shade)}
.btn.team:active:not(:disabled){box-shadow:0 3px 0 var(--team-shade)}
.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none}
.btn.small{width:auto;min-height:40px;padding:9px 14px;border-radius:12px;font-size:13px;font-weight:700;box-shadow:none}
.btn.small.secondary{border-width:1px}
.btn.small.danger-outline{background:var(--apricot-dim);color:var(--apricot);border:1px solid var(--apricot-line)}
.btn.text{background:transparent;color:var(--ink-muted);box-shadow:none;width:auto;min-height:40px;padding:8px 0;font-family:var(--font-body);font-weight:600;font-size:14px}
.btn.link{background:transparent;color:var(--lime);box-shadow:none;width:auto;min-height:40px;padding:8px 0;font-family:var(--font-body);font-weight:700;font-size:13px;text-decoration:underline;text-underline-offset:4px}
.btn-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* forms */
.field{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--ink-muted)}
.field input,.field select,.field textarea{width:100%;background:var(--bg);color:var(--ink);border:1px solid var(--line-strong);border-radius:10px;padding:12px;font-size:16px;font-family:var(--font-body)}
.field textarea{min-height:120px;resize:vertical;line-height:1.5}
.field input[type=file]{padding:9px 12px;font-size:14px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid .field:has(input[type=file]),.form-grid .field.wide{grid-column:1/-1}
.fine{font-size:12px;color:var(--ink-dim);line-height:1.5}
.note{font-size:13px;color:var(--ink-muted);line-height:1.5}
.banner{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:var(--apricot-dim);border:1px solid var(--apricot-line);color:var(--apricot-soft);font-size:13px;font-weight:600;line-height:1.5}
.banner strong{color:var(--apricot)}
.banner.button{width:100%;text-align:left;cursor:pointer}
.banner.lime{background:var(--lime-dim);border-color:#4b6a2c;color:var(--ink)}

/* drawers (phone lobby utilities) */
.drawer{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.drawer>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;font-family:var(--font-display);font-weight:800;font-size:14px;min-height:56px}
.drawer>summary::-webkit-details-marker{display:none}
.drawer>summary::after{content:'+';color:var(--ink-dim);font-size:20px;font-weight:600}
.drawer[open]>summary::after{content:'–'}
.drawer>summary small{font-family:var(--font-body);font-weight:500;font-size:12px;color:var(--ink-dim)}
.drawer .drawer-body{padding:0 16px 16px;display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line);padding-top:14px}
.catalog-row{background:var(--bg);border:1px solid var(--line);border-radius:12px}
.catalog-row>summary{list-style:none;cursor:pointer;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.catalog-row>summary::-webkit-details-marker{display:none}
.catalog-row>summary strong{font-family:var(--font-ar);font-size:20px;font-weight:700;line-height:1.2}
.catalog-row>summary span{font-size:12px;color:var(--ink-muted)}
.catalog-row form{padding:0 14px 14px;display:flex;flex-direction:column;gap:10px}
.transcript{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:12px;background:var(--bg);border:1px solid var(--line);text-align:left}
.transcript blockquote{margin:0;font-family:var(--font-ar);font-size:22px;line-height:1.3;font-weight:600}
.transcript .eyebrow{font-size:11px;letter-spacing:1.5px;color:var(--ink-dim)}
.speech-check{display:flex;flex-direction:column;gap:10px}
.speech-check audio{width:100%}

/* toast */
#toast{position:fixed;left:14px;right:14px;bottom:14px;z-index:40;padding:12px 14px;border-radius:14px;background:var(--apricot-dim);border:1px solid var(--apricot-line);color:var(--apricot-soft);font-size:13px;font-weight:600;line-height:1.5;box-shadow:0 12px 30px #0008}
@media(min-width:600px){#toast{left:auto;max-width:420px}}

/* ============ WELCOME ============ */
.welcome{position:relative;overflow:hidden;min-height:100vh;background:var(--bg)}
.vinyl{position:absolute;right:-18vw;top:-14vw;width:62vw;height:62vw;max-width:900px;max-height:900px;border-radius:50%;background:repeating-radial-gradient(circle,#1a201d 0 2px,#252d29 3px,#171b1a 5px);box-shadow:inset 0 0 0 1px #2c352f;display:grid;place-items:center;animation:gh-turn 60s linear infinite;pointer-events:none}
.vinyl span{width:22%;height:22%;border-radius:50%;background:var(--lime);display:grid;place-items:center;color:var(--lime-ink);font-family:var(--font-ar);font-weight:700;font-size:clamp(20px,2.6vw,42px)}
.welcome-inner{position:relative;max-width:1180px;margin:0 auto;padding:28px 40px 56px;display:flex;flex-direction:column;gap:56px}
.brand-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:baseline;gap:14px;color:var(--ink);text-decoration:none}
.brand b{font-family:var(--font-display);font-weight:800;font-size:26px;letter-spacing:-1.2px}
.brand span{font-family:var(--font-ar);font-weight:600;font-size:22px;color:var(--lime)}
.brand.small b{font-size:22px;letter-spacing:-1px}.brand.small span{font-size:18px}
.tag{border:1px solid var(--line-soft);border-radius:30px;padding:7px 12px;font-family:var(--font-display);font-size:10px;letter-spacing:1.5px;font-weight:700;color:var(--ink-muted);white-space:nowrap}
.hero{display:flex;flex-direction:column;gap:28px;max-width:760px}
.hero h1{display:flex;flex-direction:column;line-height:.95}
.hero h1 .ar{font-weight:800;font-size:clamp(88px,14vw,168px);color:var(--lime);line-height:1.35;margin:-.1em 0 -.05em;align-self:flex-start}
.hero h1 .latin{font-family:var(--font-display);font-weight:800;font-size:clamp(44px,6vw,80px);letter-spacing:-3px}
.hero .lead{font-size:19px;line-height:1.55;color:var(--ink-muted);max-width:560px;text-wrap:pretty}
.tiles{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px}
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:6px;border:0;border-radius:18px;background:var(--lime);color:var(--lime-ink);padding:20px 26px;min-width:260px;text-align:left;box-shadow:0 8px 0 var(--lime-deep);transition:transform .08s,box-shadow .08s;text-decoration:none;flex:1 1 260px}
.tile:hover{transform:translateY(-2px)}
.tile:active{transform:translateY(4px);box-shadow:0 3px 0 var(--lime-deep)}
.tile b{font-family:var(--font-display);font-weight:800;font-size:24px;letter-spacing:-.6px}
.tile span{font-size:13px;font-weight:600;opacity:.8}
.tile.outline{background:transparent;color:var(--ink);border:2px solid var(--line-strong);box-shadow:none}
.tile.outline:hover{border-color:var(--lime);transform:none}
.tile.outline:active{transform:none}
.tile.outline span{color:var(--ink-muted);opacity:1}
.tertiary{font-size:13px;color:var(--ink-dim)}
.tertiary button{background:none;border:0;padding:0;color:var(--lime);font-weight:700;text-decoration:underline;text-underline-offset:4px;font-size:13px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;border-top:1px solid var(--line);padding-top:36px}
.step{display:flex;flex-direction:column;gap:12px}
.step-head{display:flex;align-items:center;gap:12px;min-height:20px}
.step-num{font-family:var(--font-display);font-weight:800;font-size:13px;color:var(--lime);letter-spacing:1px}
.step-ar{font-family:var(--font-ar);font-weight:700;font-size:18px;color:var(--team-1);line-height:1}
.step-plus{border-radius:6px;background:var(--lime-dim);color:var(--lime);font-family:var(--font-display);font-weight:800;font-size:12px;padding:3px 8px}
.step h3{font-family:var(--font-display);font-size:22px;font-weight:800;letter-spacing:-.5px}
.step p{color:var(--ink-muted);line-height:1.55;font-size:15px}
.devices{display:flex;flex-wrap:wrap;align-items:center;gap:20px 40px;padding:24px 28px;border-radius:20px;background:var(--panel);border:1px solid var(--line)}
.device{display:flex;align-items:center;gap:14px}
.device b{display:block;font-weight:700}
.device span{font-size:13px;color:var(--ink-muted)}
.glyph-laptop{width:54px;height:34px;border-radius:5px 5px 2px 2px;border:3px solid var(--ink-muted);border-bottom-width:6px;flex:0 0 auto}
.glyph-phones{display:flex;gap:5px;flex:0 0 auto}
.glyph-phones i{display:block;width:16px;height:30px;border-radius:4px;border:2.5px solid var(--team-1)}
.glyph-phones i:last-child{border-color:var(--team-2)}
.welcome-foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--ink-dim);border-top:1px solid var(--line);padding-top:20px}
.welcome-foot .ar{font-size:14px}
@media(max-width:640px){.welcome-inner{padding:20px 20px 40px;gap:40px}.hero h1 .latin{letter-spacing:-2px}.tag{display:none}}

/* ============ PHONE SHELL ============ */
.phone{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;position:relative;max-width:520px;margin:0 auto;width:100%}
.statusbar{height:32px;flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;padding:0 24px;font-size:12px;font-weight:700;color:var(--lime)}
.statusbar.offline{color:var(--apricot)}
.statusbar span{display:inline-flex;align-items:center;gap:6px}
.statusbar .dot{width:6px;height:6px}
.screen{flex:1;display:flex;flex-direction:column;padding:26px 24px 30px;gap:18px;min-height:0}
.screen h1{font-family:var(--font-display);font-weight:800;font-size:36px;letter-spacing:-1.5px;line-height:1.05}
.screen h2{font-family:var(--font-display);font-weight:800;font-size:30px;letter-spacing:-1px;line-height:1.1}
.screen .intro{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.screen .intro p{font-size:15px;line-height:1.5;color:var(--ink-muted)}
.screen .top-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:40px}
.screen .foot{margin-top:auto;font-size:12px;line-height:1.5;color:var(--ink-dim);text-align:center}
.stack{display:flex;flex-direction:column;gap:10px}
.stack.push{margin-top:auto}
.code-label{display:flex;flex-direction:column;gap:8px;font-family:var(--font-display);font-size:12px;letter-spacing:1.5px;font-weight:700;color:var(--ink-dim)}
.code-input{width:100%;background:var(--panel);color:var(--ink);border:2px solid var(--line-strong);border-radius:16px;padding:16px;text-align:center;text-transform:uppercase;letter-spacing:12px;font-family:var(--font-display);font-weight:800;font-size:38px;min-height:84px;line-height:1}
.code-input.error{border-color:var(--apricot)}
.error-line{margin:-10px 0 0;min-height:22px;font-size:14px;color:var(--apricot);font-weight:600}
.hint-line{margin:auto 0 0;min-height:22px;font-size:13px;color:var(--ink-dim);text-align:center}
.hint-line.error{color:var(--apricot)}
.seat{display:flex;align-items:center;gap:14px;text-align:left;border:2px solid var(--line-strong);border-radius:20px;background:var(--panel);color:var(--ink);padding:20px 18px;min-height:96px;width:100%}
.seat .dot{width:14px;height:14px;background:var(--team)}
.seat .seat-name{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.seat .seat-name b{font-family:var(--font-ar);font-weight:700;font-size:28px;line-height:1.1;color:var(--team);text-align:left}
.seat .seat-name span{font-size:13px;color:var(--ink-muted)}
.seat .seat-state{font-family:var(--font-display);font-size:12px;font-weight:800;letter-spacing:1px;color:var(--lime)}
.seat.connecting{border-color:var(--team);background:var(--team-dim)}
.seat.connecting .seat-state{color:var(--team)}
.seat.taken{opacity:.55;cursor:not-allowed;border-color:var(--line)}
.seat:disabled:not(.taken):not(.connecting){opacity:.7;cursor:wait}
.seat.taken .seat-state{color:var(--apricot)}
.mic-ring-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;padding:26px 0}
.mic-ring{width:112px;height:112px;border-radius:50%;display:grid;place-items:center;background:var(--panel);border:3px solid var(--line-strong);color:var(--ink-muted);font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:1px}
.mic-ring-wrap .status{font-size:14px;font-weight:700;color:var(--line-strong);min-height:20px}
.mic-ring-wrap[data-mic=requesting] .status{color:var(--ink-muted)}
.mic-ring-wrap[data-mic=granted] .mic-ring{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
.mic-ring-wrap[data-mic=granted] .status{color:var(--lime)}
.mic-ring-wrap[data-mic=denied] .mic-ring{background:var(--apricot-dim);border-color:var(--apricot);color:var(--apricot)}
.mic-ring-wrap[data-mic=denied] .status{color:var(--apricot)}
.team-block{border-radius:24px;padding:28px 22px;background:var(--team);color:var(--team-ink);display:flex;flex-direction:column;gap:6px}
.team-block b{font-family:var(--font-ar);font-weight:800;font-size:56px;line-height:1.15;text-align:left}
.team-block span{font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:-.3px}
.name-input{width:100%;background:var(--panel);color:var(--ink);border:2px solid var(--line-strong);border-radius:16px;padding:16px;font-family:var(--font-ar);font-weight:700;font-size:28px;min-height:72px;line-height:1.3;letter-spacing:0;text-transform:none;text-align:start}
.team-block .team-link{color:var(--team-ink);opacity:.8;align-self:flex-start;font-size:13px;margin-top:2px}
.team-block.compact{padding:18px 20px}
.team-block.compact b{font-size:36px}
.status-row{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:var(--panel);border:1px solid var(--line);font-size:14px}
.status-row>span:last-child{flex:1;min-width:0}
.status-row .ar{font-size:16px;color:var(--team)}
.ready-count{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px;border-radius:24px;background:var(--lime-dim);border:1px solid var(--lime);text-align:center}
.ready-count .clock{min-width:auto;text-align:center;font-size:96px;line-height:1}
.ready-count .note{color:var(--ink)}
.room-card{display:flex;gap:14px;align-items:center;padding:14px;border-radius:16px;background:var(--panel);border:1px solid var(--line)}
.room-card img{width:112px;height:112px;border-radius:12px;background:#fff;padding:6px;flex:0 0 auto}
.room-card .room-code{font-family:var(--font-display);font-weight:800;font-size:34px;letter-spacing:8px;line-height:1;color:var(--ink)}
.room-card .room-url{font-size:12px;color:var(--ink-muted);overflow-wrap:anywhere;line-height:1.4}
.room-card>div{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}

/* ============ PHONE GAME ============ */
.game{flex:1;display:flex;flex-direction:column;padding:6px 18px 22px;gap:12px;min-height:0;position:relative}
.flash{position:absolute;inset:-40px -18px -22px;background:var(--team);z-index:5;animation:gh-flash .7s ease-out forwards;display:grid;place-items:center;color:var(--team-ink);font-family:var(--font-ar);font-weight:800;font-size:64px;pointer-events:none}
.team-row{display:flex;align-items:center;gap:10px;min-height:40px}
.team-row .dot{width:12px;height:12px;background:var(--team)}
.team-row b{font-family:var(--font-ar);font-weight:700;font-size:20px;line-height:1;color:var(--team)}
.team-row .latin{font-size:12px;color:var(--ink-muted);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.team-row .pill{border:1px solid var(--line-soft);background:transparent;color:var(--ink-muted);padding:5px 10px}
.scores{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.score-card{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}
.score-card.active{border-color:var(--team)}
.score-card>span{display:flex;flex-direction:column;gap:1px;min-width:0}
.score-card b{font-family:var(--font-ar);font-weight:700;font-size:16px;line-height:1.1;color:var(--team);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.score-card small{font-family:var(--font-display);font-size:10px;letter-spacing:1px;font-weight:700;color:var(--ink-dim)}
.score-card strong{font-family:var(--font-display);font-weight:800;font-size:30px;line-height:1;font-variant-numeric:tabular-nums}
.timer{display:flex;align-items:center;gap:12px;padding:6px 4px 0}
.timer>div{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.timer .round{font-family:var(--font-display);font-weight:800;font-size:12px;letter-spacing:2px;color:var(--lime)}
.timer .pill{align-self:flex-start;padding:4px 10px}
.timer .label{font-size:12px;color:var(--ink-dim);min-height:16px}
.clock{font-family:var(--font-display);font-weight:800;font-size:88px;line-height:.9;letter-spacing:-4px;font-variant-numeric:tabular-nums;min-width:2.1ch;text-align:right;color:var(--ink-muted)}
.clock[data-color=lime]{color:var(--lime)}.clock[data-color=apricot]{color:var(--apricot)}.clock[data-color=team]{color:var(--team)}
.bar{height:5px;border-radius:3px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;border-radius:3px;background:var(--ink-muted);width:0;transition:width .1s linear}
.bar[data-color=lime] i{background:var(--lime)}.bar[data-color=apricot] i{background:var(--apricot)}.bar[data-color=team] i{background:var(--team)}
.main-panel{flex:1;min-height:250px;border-radius:36px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px;text-align:center}
.buzzer{border:1px solid var(--line);background:var(--panel);color:var(--ink-muted);box-shadow:none;transition:transform .08s;width:100%;cursor:not-allowed}
.buzzer .ar{font-family:var(--font-ar);font-weight:800;font-size:44px;line-height:1.2}
.buzzer .en{font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:-.5px}
.buzzer .hint{font-size:13px;font-weight:600;opacity:.85;max-width:260px;line-height:1.4}
.buzzer .spinner{margin-bottom:6px}
.buzzer.claim{border:0;background:var(--team);color:var(--team-ink);box-shadow:0 10px 0 var(--team-shade);cursor:pointer}
.buzzer.claim .ar{font-size:64px}
.buzzer.claim:active{transform:translateY(6px);box-shadow:0 4px 0 var(--team-shade)}
.buzzer.steal-mine{animation:gh-pulse 1.4s ease-in-out infinite}
.buzzer.steal-waiting{color:var(--team);border:2px solid var(--team)}
.buzzer.locked{border:2px solid var(--team)}
.buzzer.locked-line{border:2px solid var(--line-strong)}
.buzzer.paused{border:2px dashed var(--apricot);color:var(--apricot)}
.buzzer:disabled{opacity:1}
.answer{border:2px solid var(--team);background:var(--team-dim);gap:14px;padding:22px}
.answer .eyebrow{color:var(--team);font-size:11px;letter-spacing:2px}
.answer h2{font-size:28px;text-wrap:pretty}
.answer p{font-size:14px;line-height:1.5;color:var(--ink-muted);max-width:290px;text-wrap:pretty;min-height:42px}
.answer .btn{margin-top:4px}
.answer .btn.secondary{min-height:52px;font-size:15px}
.answer .transcript{width:100%}
.answer form{width:100%;display:flex;flex-direction:column;gap:8px}
.answer form input{width:100%;background:var(--bg);color:var(--ink);border:1px solid var(--line-strong);border-radius:12px;padding:14px;font-size:16px;text-align:center}
.mic-disc{width:64px;height:64px;border-radius:50%;background:var(--team);display:grid;place-items:center;color:var(--team-ink);font-family:var(--font-display);font-weight:800;font-size:14px;letter-spacing:1px}
.hold{width:150px;height:150px;border-radius:50%;border:0;background:var(--team);color:var(--team-ink);box-shadow:0 8px 0 var(--team-shade);transition:transform .1s,box-shadow .1s,background .1s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.hold .cap{display:block;width:22px;height:36px;border-radius:11px;background:currentColor}
.hold .base{display:block;width:34px;height:3px;border-radius:2px;background:currentColor;margin-top:-4px}
.hold .lbl{font-family:var(--font-display);font-weight:800;font-size:12px;letter-spacing:1.5px;margin-top:4px}
.hold.recording{background:var(--apricot);color:#2a1508;transform:scale(1.08);box-shadow:0 0 0 18px #ffae7833;animation:gh-pulse-hold 1s ease-in-out infinite}
.reveal{background:var(--panel);color:var(--ink);gap:10px;padding:24px;position:relative;overflow:hidden}
.reveal.rise{animation:gh-rise .5s ease-out}
.reveal.rise .headline{animation:gh-pop .6s cubic-bezier(.2,.9,.3,1.3)}
.reveal.won{background:var(--team);color:var(--team-ink)}
.reveal .eyebrow{color:inherit;opacity:.75;font-size:11px;letter-spacing:2px}
.reveal .title{font-family:var(--font-ar);font-weight:800;font-size:48px;line-height:1.2;overflow-wrap:anywhere}
.reveal .artist{font-family:var(--font-display);font-weight:700;font-size:16px}
.reveal .artist.ar{font-family:var(--font-ar);font-weight:600;font-size:18px;opacity:.85}
.reveal .headline{margin-top:8px;font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:-.5px}
.reveal .next{font-size:13px;opacity:.85;min-height:18px}
.reveal .btn{margin-top:6px}
.reveal.won .btn.secondary{color:var(--team-ink);border-color:var(--team-ink)}
.game .hint-text{text-align:center;font-size:13px;line-height:1.45;color:var(--ink-muted);min-height:38px;text-wrap:pretty}
.creator-row{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.offline-banner{position:fixed;left:14px;right:14px;bottom:14px;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:var(--apricot-dim);border:1px solid var(--apricot-line);color:var(--apricot-soft);font-size:13px;font-weight:600;z-index:6}
@media(min-width:600px){.offline-banner{left:50%;right:auto;transform:translateX(-50%);width:min(420px,calc(100% - 28px))}}

/* ============ setup.html / misc pages ============ */
.shell{max-width:1180px;margin:0 auto;padding:28px 40px 56px;display:flex;flex-direction:column;gap:24px}
.shell h1{font-family:var(--font-display);font-weight:800;font-size:clamp(28px,4vw,40px);letter-spacing:-1.5px;line-height:1.1}
.shell h2{font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:-.5px;margin-bottom:10px}
.shell p,.shell li{color:var(--ink-muted);line-height:1.6}
.shell li{margin:8px 0}
.shell code{font-family:ui-monospace,monospace;font-size:13px;background:var(--panel);padding:2px 6px;border-radius:6px;color:var(--ink)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:24px 28px}
@media(max-width:640px){.shell{padding:20px}}