/* ============================================================
     AQS CHALLENGE v2 — aqs-challenge.css
     ============================================================ */
  :root {
      --ch-primary:#6366f1; --ch-secondary:#8b5cf6; --ch-accent:#f59e0b;
      --ch-success:#10b981; --ch-danger:#ef4444; --ch-dark:#0f172a;
      --ch-card:rgba(255,255,255,0.05); --ch-border:rgba(255,255,255,0.09);
      --ch-text:#f1f5f9; --ch-muted:#94a3b8; --ch-radius:16px; --ch-radius-sm:10px;
  }

  /* ── Animated Background ──────────────────────────────────────────── */
  .aqs-ch-page {
      min-height:100vh; font-family:'Inter',system-ui,sans-serif; color:var(--ch-text);
      display:flex; flex-direction:column;
      background:#0a0a18;
      position:relative; overflow-x:hidden;
  }
  .aqs-ch-bg {
      position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  }
  /* Gradient orbs */
  .aqs-ch-bg-orb {
      position:absolute; border-radius:50%; filter:blur(80px); opacity:.35;
  }
  .aqs-ch-bg-orb-1 {
      width:600px; height:600px; top:-120px; left:-100px;
      background:radial-gradient(circle,#4f46e5 0%,transparent 70%);
      animation:orbFloat1 12s ease-in-out infinite;
  }
  .aqs-ch-bg-orb-2 {
      width:500px; height:500px; bottom:-100px; right:-80px;
      background:radial-gradient(circle,#7c3aed 0%,transparent 70%);
      animation:orbFloat2 15s ease-in-out infinite;
  }
  .aqs-ch-bg-orb-3 {
      width:400px; height:400px; top:40%; left:40%;
      background:radial-gradient(circle,#0ea5e9 0%,transparent 70%);
      animation:orbFloat3 18s ease-in-out infinite; opacity:.18;
  }
  @keyframes orbFloat1 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(60px,-40px) scale(1.1)} 66%{transform:translate(-30px,50px) scale(.95)} }
  @keyframes orbFloat2 { 0%,100%{transform:translate(0,0) scale(1)} 40%{transform:translate(-50px,40px) scale(1.08)} 70%{transform:translate(40px,-30px) scale(.97)} }
  @keyframes orbFloat3 { 0%,100%{transform:translate(-50%,-50%) scale(1)} 50%{transform:translate(-50%,-50%) scale(1.2)} }

  /* Stars */
  .aqs-ch-stars { position:absolute; inset:0; }
  .aqs-ch-star {
      position:absolute; border-radius:50%; background:white;
      animation:starTwinkle ease-in-out infinite;
  }
  @keyframes starTwinkle { 0%,100%{opacity:.7;transform:scale(1)} 50%{opacity:.15;transform:scale(.6)} }

  /* Floating particles */
  .aqs-ch-particles { position:absolute; inset:0; }
  .aqs-ch-particle {
      position:absolute; width:3px; height:3px; border-radius:50%;
      background:var(--ch-primary); opacity:.6;
      animation:particleRise linear infinite;
  }
  @keyframes particleRise { 0%{transform:translateY(100vh) translateX(0);opacity:0} 10%{opacity:.6} 90%{opacity:.2} 100%{transform:translateY(-20px) translateX(40px);opacity:0} }

  /* Grid overlay */
  .aqs-ch-grid {
      position:absolute; inset:0;
      background-image:
          linear-gradient(rgba(99,102,241,.04) 1px, transparent 1px),
          linear-gradient(90deg, rgba(99,102,241,.04) 1px, transparent 1px);
      background-size:60px 60px;
  }

  /* ── Page layout ──────────────────────────────────────────────────── */
  /* overflow:clip instead of overflow:hidden avoids the iOS implicit scroll
     container that can swallow touch events on child interactive elements */
  .aqs-ch-page { overflow-x:clip !important; }
  .aqs-ch-content { position:relative; z-index:1; display:flex; flex-direction:column; min-height:100vh; }
  .aqs-ch-topbar {
      display:flex; align-items:center; justify-content:space-between;
      padding:12px 24px; background:rgba(10,10,24,.6);
      border-bottom:1px solid var(--ch-border); backdrop-filter:blur(16px);
      position:sticky; top:0; z-index:50;
  }
  .aqs-ch-logo {
      font-size:1.05rem; font-weight:800; letter-spacing:-.02em;
      background:linear-gradient(135deg,#a78bfa,#60a5fa);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
      display:flex; align-items:center; gap:8px;
  }
  .aqs-ch-logo-icon { font-size:1.3rem; filter:drop-shadow(0 0 8px rgba(167,139,250,.5)); -webkit-text-fill-color:initial; }
  .aqs-ch-topbar-code {
      background:rgba(99,102,241,.2); border:1px solid rgba(99,102,241,.4);
      border-radius:8px; padding:4px 14px; font-size:.95rem; font-weight:700;
      letter-spacing:.12em; color:#c4b5fd;
  }
  .aqs-ch-topbar-right { display:flex; gap:10px; align-items:center; }
  .aqs-ch-round-badge-top {
      font-size:.78rem; font-weight:700; color:#94a3b8;
      background:rgba(255,255,255,.06); border:1px solid var(--ch-border);
      border-radius:20px; padding:3px 12px;
  }
  .aqs-ch-main { flex:1; display:flex; flex-direction:column; align-items:center; padding:28px 16px; }

  /* ── Screens ──────────────────────────────────────────────────────── */
  .aqs-ch-screen { display:none; width:100%; max-width:640px; }
  .aqs-ch-screen.active { display:block; animation:chFadeIn .35s ease; }
  @keyframes chFadeIn { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }

  /* ── Cards ────────────────────────────────────────────────────────── */
  .aqs-ch-card {
      background:rgba(255,255,255,.04); border:1px solid var(--ch-border);
      border-radius:var(--ch-radius); padding:26px;
      backdrop-filter:blur(12px); margin-bottom:16px;
      box-shadow:0 4px 24px rgba(0,0,0,.3);
  }
  .aqs-ch-card-title {
      font-size:1.25rem; font-weight:800; margin:0 0 6px;
      background:linear-gradient(135deg,#e2e8f0,#a78bfa);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  }
  .aqs-ch-card-sub { font-size:.84rem; color:var(--ch-muted); margin:0 0 20px; line-height:1.6; }

  /* ── Form ─────────────────────────────────────────────────────────── */
  .aqs-ch-form-group { margin-bottom:14px; }
  .aqs-ch-form-group label { display:block; font-size:.78rem; font-weight:600; color:var(--ch-muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; }
  .aqs-ch-input { width:100%; padding:10px 14px; background:rgba(255,255,255,.07); border:1px solid var(--ch-border); border-radius:var(--ch-radius-sm); color:var(--ch-text); font-family:inherit; font-size:.93rem; transition:border-color .2s,box-shadow .2s; box-sizing:border-box; }
  .aqs-ch-input:focus { outline:none; border-color:var(--ch-primary); box-shadow:0 0 0 3px rgba(99,102,241,.2); }
  .aqs-ch-input::placeholder { color:var(--ch-muted); }
  select.aqs-ch-input { cursor:pointer; } select.aqs-ch-input option { background:#1e293b; color:white; }
  .aqs-ch-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

  /* Rounds preview */
  .aqs-ch-rounds-preview {
      background:rgba(99,102,241,.1); border:1px solid rgba(99,102,241,.25);
      border-radius:9px; padding:10px 14px; font-size:.82rem; color:#c4b5fd;
      margin-bottom:14px; line-height:1.6;
  }

  /* ── Buttons ──────────────────────────────────────────────────────── */
  .aqs-ch-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 22px; border-radius:11px; border:none; cursor:pointer; font-family:inherit; font-size:.93rem; font-weight:700; transition:transform .13s,box-shadow .13s,opacity .13s; text-decoration:none; white-space:nowrap; touch-action:manipulation; -webkit-tap-highlight-color:transparent; -webkit-appearance:none; user-select:none; }
  .aqs-ch-btn:hover:not(:disabled) { transform:translateY(-1px); }
  .aqs-ch-btn:active:not(:disabled) { transform:scale(.97); }
  .aqs-ch-btn:disabled { opacity:.5; cursor:not-allowed; }
  .aqs-ch-btn-primary { background:linear-gradient(135deg,var(--ch-primary),var(--ch-secondary)); color:white; box-shadow:0 4px 18px rgba(99,102,241,.4); }
  .aqs-ch-btn-primary:hover:not(:disabled) { box-shadow:0 8px 28px rgba(99,102,241,.6); }
  .aqs-ch-btn-success { background:linear-gradient(135deg,#059669,#10b981); color:white; box-shadow:0 4px 16px rgba(16,185,129,.3); }
  .aqs-ch-btn-ghost { background:rgba(255,255,255,.07); color:var(--ch-text); border:1px solid var(--ch-border); }
  .aqs-ch-btn-full { width:100%; }
  .aqs-ch-btn-sm { padding:7px 14px; font-size:.8rem; border-radius:8px; }
  .aqs-ch-music-btn { padding:6px 13px; font-size:.78rem; border-radius:20px; background:rgba(99,102,241,.2); color:#c4b5fd; border:1px solid rgba(99,102,241,.35); cursor:pointer; font-weight:600; transition:background .2s; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
  .aqs-ch-music-btn:hover { background:rgba(99,102,241,.35); }

  /* ── Divider / Spinner / Progress ─────────────────────────────────── */
  .aqs-ch-divider { display:flex; align-items:center; gap:12px; color:var(--ch-muted); font-size:.8rem; margin:18px 0; }
  .aqs-ch-divider::before,.aqs-ch-divider::after { content:''; flex:1; height:1px; background:var(--ch-border); }
  .aqs-ch-spinner { width:32px; height:32px; border:3px solid rgba(255,255,255,.1); border-top-color:var(--ch-primary); border-radius:50%; animation:chSpin .7s linear infinite; margin:0 auto 14px; }
  @keyframes chSpin { to{transform:rotate(360deg)} }

  /* ── Lobby ────────────────────────────────────────────────────────── */
  .aqs-ch-lobby-header { text-align:center; margin-bottom:24px; }
  .aqs-ch-lobby-title { font-size:1.5rem; font-weight:800; margin:0 0 6px; }
  .aqs-ch-lobby-host { font-size:.86rem; color:var(--ch-muted); }
  .aqs-ch-code-display { text-align:center; background:linear-gradient(135deg,rgba(99,102,241,.12),rgba(139,92,246,.12)); border:1px solid rgba(99,102,241,.25); border-radius:var(--ch-radius); padding:18px; margin-bottom:16px; }
  .aqs-ch-code-label { font-size:.72rem; color:var(--ch-muted); text-transform:uppercase; letter-spacing:.1em; margin-bottom:7px; }
  .aqs-ch-code-value { font-size:2.2rem; font-weight:900; letter-spacing:.25em; background:linear-gradient(135deg,#a78bfa,#60a5fa); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; font-variant-numeric:tabular-nums; }
  .aqs-ch-copy-link { font-size:.76rem; color:var(--ch-muted); margin-top:8px; cursor:pointer; text-decoration:underline; }
  .aqs-ch-players-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; margin-bottom:16px; }
  .aqs-ch-player-slot { background:rgba(255,255,255,.03); border:2px dashed rgba(255,255,255,.1); border-radius:12px; padding:14px; text-align:center; transition:border-color .2s,background .2s; }
  .aqs-ch-player-slot.filled { border-style:solid; border-color:rgba(99,102,241,.45); background:rgba(99,102,241,.08); }
  .aqs-ch-player-slot.filled.is-host { border-color:rgba(245,158,11,.45); background:rgba(245,158,11,.07); }
  .aqs-ch-player-name { font-size:.82rem; font-weight:600; margin-top:8px; }
  .aqs-ch-player-badge { font-size:.7rem; color:var(--ch-muted); margin-top:2px; }
  .aqs-ch-waiting-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--ch-success); margin-right:6px; animation:chPulse 1.4s ease-in-out infinite; }
  @keyframes chPulse { 0%,100%{opacity:1} 50%{opacity:.35} }

  /* ── Game layout ──────────────────────────────────────────────────── */
  .aqs-ch-game-wrap { width:100%; max-width:820px; display:grid; grid-template-columns:1fr 250px; gap:14px; }
  @media(max-width:680px) { .aqs-ch-game-wrap { grid-template-columns:1fr; } }
  .aqs-ch-sidebar {}
  .aqs-ch-score-card { background:rgba(255,255,255,.04); border:1px solid var(--ch-border); border-radius:var(--ch-radius); padding:14px; margin-bottom:10px; }
  .aqs-ch-score-title { font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ch-muted); margin:0 0 10px; font-weight:600; }
  .aqs-ch-score-player { display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:8px; margin-bottom:5px; transition:background .2s; }
  .aqs-ch-score-player.active-turn { background:rgba(99,102,241,.18); }
  .aqs-ch-score-player.primary-turn { background:rgba(245,158,11,.1); }
  .aqs-ch-score-rank { width:22px; height:22px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:.74rem; font-weight:700; background:rgba(255,255,255,.1); color:var(--ch-muted); }
  .aqs-ch-score-rank.rank-1 { background:linear-gradient(135deg,#f59e0b,#d97706); color:white; }
  .aqs-ch-score-rank.rank-2 { background:linear-gradient(135deg,#94a3b8,#64748b); color:white; }
  .aqs-ch-score-rank.rank-3 { background:linear-gradient(135deg,#b45309,#92400e); color:white; }
  .aqs-ch-score-name { flex:1; font-size:.82rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .aqs-ch-score-pts  { font-size:.95rem; font-weight:800; color:var(--ch-accent); }

  /* Round dots */
  .aqs-ch-round-tracker { display:flex; gap:5px; flex-wrap:wrap; }
  .aqs-ch-round-dot { width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.12); transition:background .25s; flex-shrink:0; }
  .aqs-ch-round-dot.done { background:var(--ch-success); }
  .aqs-ch-round-dot.current { background:var(--ch-accent); animation:chPulse 1s ease-in-out infinite; }

  /* Chat */
  .aqs-ch-chat { background:rgba(255,255,255,.03); border:1px solid var(--ch-border); border-radius:var(--ch-radius); padding:11px; margin-top:10px; display:flex; flex-direction:column; height:190px; }
  .aqs-ch-chat-title { font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ch-muted); margin:0 0 7px; font-weight:600; }
  .aqs-ch-chat-msgs { flex:1; overflow-y:auto; font-size:.79rem; color:var(--ch-muted); padding-right:3px; }
  .aqs-ch-chat-msgs::-webkit-scrollbar { width:3px; }
  .aqs-ch-chat-msgs::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); border-radius:2px; }
  .aqs-ch-chat-msg { margin-bottom:5px; line-height:1.45; }
  .aqs-ch-chat-msg-name { font-weight:700; color:#a78bfa; }
  .aqs-ch-chat-input-row { display:flex; gap:6px; margin-top:7px; }
  .aqs-ch-chat-input { flex:1; padding:6px 9px; background:rgba(255,255,255,.07); border:1px solid var(--ch-border); border-radius:7px; color:var(--ch-text); font-family:inherit; font-size:.79rem; }
  .aqs-ch-chat-input:focus { outline:none; border-color:var(--ch-primary); }
  .aqs-ch-chat-send { padding:6px 11px; border-radius:7px; border:none; cursor:pointer; background:var(--ch-primary); color:white; font-size:.79rem; font-weight:600; }

  /* ── Question card ─────────────────────────────────────────────────── */
  .aqs-ch-q-card { position:relative; }
  .aqs-ch-q-header { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
  .aqs-ch-q-round-badge { background:linear-gradient(135deg,rgba(99,102,241,.28),rgba(139,92,246,.28)); border:1px solid rgba(99,102,241,.4); border-radius:8px; padding:4px 12px; font-size:.76rem; font-weight:700; color:#c4b5fd; white-space:nowrap; }
  .aqs-ch-q-whose { flex:1; font-size:.86rem; color:var(--ch-muted); min-width:100px; }
  .aqs-ch-q-whose strong { color:var(--ch-accent); }

  /* Server-synced timer */
  .aqs-ch-timer { display:flex; align-items:center; gap:4px; flex-shrink:0; }
  .aqs-ch-timer-ring { position:relative; width:44px; height:44px; }
  .aqs-ch-timer-ring svg { transform:rotate(-90deg); }
  .aqs-ch-timer-ring circle { fill:none; stroke-width:3; }
  .aqs-ch-timer-ring .track { stroke:rgba(255,255,255,.1); }
  .aqs-ch-timer-ring .fill  { stroke:var(--ch-accent); stroke-linecap:round; transition:stroke-dashoffset .85s linear; }
  .aqs-ch-timer-val { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:800; transition:color .3s; }

  .aqs-ch-question-text { font-size:1.05rem; font-weight:600; line-height:1.7; margin-bottom:20px; color:var(--ch-text); }

  .aqs-ch-options { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
  @media(max-width:500px) { .aqs-ch-options { grid-template-columns:1fr; } }
  .aqs-ch-option { display:flex; align-items:center; gap:11px; padding:12px 15px; border-radius:11px; border:2px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); cursor:pointer; transition:border-color .14s,background .14s,transform .11s; font-size:.88rem; color:var(--ch-text); text-align:left; font-family:inherit; position:relative; overflow:hidden; }
  .aqs-ch-option:not(:disabled):hover { border-color:rgba(99,102,241,.5); background:rgba(99,102,241,.1); transform:translateY(-1px); }
  .aqs-ch-option:disabled { cursor:not-allowed; }
  .aqs-ch-option-letter { width:27px; height:27px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:.76rem; font-weight:800; background:rgba(255,255,255,.1); color:var(--ch-muted); transition:background .14s,color .14s; }
  .aqs-ch-option:not(:disabled):hover .aqs-ch-option-letter { background:var(--ch-primary); color:white; }
  .aqs-ch-option.correct { border-color:var(--ch-success)!important; background:rgba(16,185,129,.14)!important; }
  .aqs-ch-option.correct .aqs-ch-option-letter { background:var(--ch-success); color:white; }
  .aqs-ch-option.wrong   { border-color:var(--ch-danger)!important; background:rgba(239,68,68,.1)!important; }
  .aqs-ch-option.wrong .aqs-ch-option-letter { background:var(--ch-danger); color:white; }
  .aqs-ch-option.selected { border-color:var(--ch-primary); background:rgba(99,102,241,.14); }
  .aqs-ch-option-ripple { position:absolute; inset:0; background:radial-gradient(circle at center,rgba(99,102,241,.28) 0%,transparent 70%); opacity:0; transition:opacity .28s; }
  .aqs-ch-option.selected .aqs-ch-option-ripple { opacity:1; }

  .aqs-ch-spectator-note { text-align:center; padding:9px; background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.25); border-radius:9px; margin-top:10px; font-size:.83rem; color:#fcd34d; }
  .aqs-ch-steal-note { text-align:center; padding:9px; background:rgba(99,102,241,.08); border:1px solid rgba(99,102,241,.25); border-radius:9px; margin-top:10px; font-size:.83rem; color:#c4b5fd; }

  /* ── Reveal overlay ─────────────────────────────────────────────────── */
  .aqs-ch-reveal { position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.72); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; padding:24px; }
  .aqs-ch-reveal-card { background:rgba(20,20,40,.96); border:1px solid var(--ch-border); border-radius:20px; padding:30px; max-width:460px; width:100%; text-align:center; animation:chRevealIn .3s cubic-bezier(.34,1.56,.64,1); box-shadow:0 8px 48px rgba(0,0,0,.6); }
  @keyframes chRevealIn { from{opacity:0;transform:scale(.85)} to{opacity:1;transform:scale(1)} }
  .aqs-ch-reveal-icon { font-size:3.2rem; margin-bottom:10px; line-height:1; animation:chBounce .5s cubic-bezier(.34,1.56,.64,1) .1s both; }
  @keyframes chBounce { from{transform:scale(0) rotate(-20deg)} to{transform:scale(1) rotate(0)} }
  .aqs-ch-reveal-title { font-size:1.35rem; font-weight:800; margin:0 0 5px; }
  .aqs-ch-reveal-winner { font-size:.95rem; color:var(--ch-accent); font-weight:700; margin-bottom:9px; }
  .aqs-ch-reveal-pts { display:inline-block; background:linear-gradient(135deg,var(--ch-accent),#d97706); color:white; border-radius:9px; padding:3px 13px; font-size:.95rem; font-weight:800; margin-bottom:7px; }
  .aqs-ch-reveal-explanation { font-size:.86rem; color:var(--ch-muted); line-height:1.6; background:rgba(255,255,255,.04); border-radius:9px; padding:11px; margin-top:11px; text-align:left; }

  /* ── Reveal overlay — per-question leaderboard ──────────────────────── */
  .aqs-ch-reveal-card { max-width:520px !important; }
  .aqs-ch-reveal-lb { margin-top:14px; border-top:1px solid rgba(255,255,255,.1); padding-top:12px; text-align:left; }
  .aqs-ch-reveal-lb-title { font-size:.68rem; text-transform:uppercase; letter-spacing:.09em; color:var(--ch-muted); font-weight:700; margin-bottom:8px; }
  .aqs-ch-reveal-lb-row {
      display:flex; align-items:center; gap:8px;
      padding:7px 10px; border-radius:9px; margin-bottom:4px;
      background:rgba(255,255,255,.03); border:1px solid transparent;
      transition:background .25s;
  }
  .aqs-ch-reveal-lb-row.lb-me {
      background:rgba(99,102,241,.18); border-color:rgba(99,102,241,.35);
  }
  .aqs-ch-reveal-lb-row.lb-gainer { animation:chLbGain .55s ease both; }
  @keyframes chLbGain { 0%{background:rgba(34,197,94,.22)} 100%{background:rgba(99,102,241,.18)} }
  .aqs-ch-reveal-lb-medal { font-size:1rem; width:22px; text-align:center; flex-shrink:0; }
  .aqs-ch-reveal-lb-name { flex:1; font-size:.83rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .aqs-ch-reveal-lb-score { font-size:.95rem; font-weight:800; color:var(--ch-accent); min-width:34px; text-align:right; }
  .aqs-ch-reveal-lb-delta { font-size:.74rem; font-weight:700; padding:1px 7px; border-radius:20px; flex-shrink:0; min-width:36px; text-align:center; }
  .aqs-ch-reveal-lb-delta.delta-pos { background:rgba(34,197,94,.18); color:#4ade80; }
  .aqs-ch-reveal-lb-delta.delta-zero { background:rgba(255,255,255,.07); color:var(--ch-muted); }
  .aqs-ch-reveal-lb-arrow { font-size:.72rem; width:16px; text-align:center; flex-shrink:0; }
  .aqs-ch-reveal-lb-arrow.arr-up   { color:#4ade80; }
  .aqs-ch-reveal-lb-arrow.arr-down { color:#f87171; }
  .aqs-ch-reveal-lb-arrow.arr-same { color:var(--ch-muted); }

  /* ── Winner Celebration ─────────────────────────────────────────────── */
  .aqs-ch-celebration { position:fixed; inset:0; z-index:200; overflow:hidden; }
  .aqs-ch-curtain-left,.aqs-ch-curtain-right { position:absolute; top:0; bottom:0; width:60%; background:linear-gradient(135deg,#2d0a6b,#1a0040); transition:transform 1.2s cubic-bezier(.77,0,.175,1); }
  .aqs-ch-curtain-left  { left:0;  transform-origin:left; }
  .aqs-ch-curtain-right { right:0; transform-origin:right; }
  .aqs-ch-curtain-left.open  { transform:translateX(-100%); }
  .aqs-ch-curtain-right.open { transform:translateX(100%); }
  .aqs-ch-curtain-fringe { position:absolute; top:0; height:100%; width:22px; background:repeating-linear-gradient(180deg,#7c3aed 0 11px,#6d28d9 11px 22px); }
  .aqs-ch-curtain-left  .aqs-ch-curtain-fringe { right:0; }
  .aqs-ch-curtain-right .aqs-ch-curtain-fringe { left:0; }
  .aqs-ch-winner-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:1; opacity:0; transition:opacity .6s .8s; padding:24px; }
  .aqs-ch-confetti { position:absolute; inset:0; pointer-events:none; z-index:0; }
  .aqs-ch-winner-trophy { font-size:5rem; margin-bottom:9px; animation:chTrophyBounce 1s cubic-bezier(.34,1.56,.64,1) 1.2s both; }
  @keyframes chTrophyBounce { from{transform:scale(0) rotate(-20deg);opacity:0} to{transform:scale(1) rotate(0);opacity:1} }
  .aqs-ch-winner-label { font-size:.88rem; color:#fcd34d; font-weight:600; text-transform:uppercase; letter-spacing:.12em; margin-bottom:5px; }
  .aqs-ch-winner-name  { font-size:2.1rem; font-weight:900; color:white; text-shadow:0 0 30px rgba(251,191,36,.5); margin-bottom:3px; }
  .aqs-ch-winner-score { font-size:1.05rem; color:#fcd34d; font-weight:700; margin-bottom:22px; }

  /* ── Results ──────────────────────────────────────────────────────── */
  .aqs-ch-results-screen { max-width:700px; }
  .aqs-ch-podium { display:flex; align-items:flex-end; justify-content:center; gap:12px; margin-bottom:28px; }
  .aqs-ch-podium-step { text-align:center; }
  .aqs-ch-podium-crown { font-size:1.2rem; margin-bottom:3px; }
  .aqs-ch-podium-name  { font-size:.8rem; font-weight:700; margin-bottom:2px; }
  .aqs-ch-podium-pts   { font-size:.95rem; font-weight:800; color:var(--ch-accent); }
  .aqs-ch-podium-block { border-radius:7px 7px 0 0; background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04)); border:1px solid var(--ch-border); border-bottom:none; }
  .aqs-ch-podium-step.rank-1 .aqs-ch-podium-block { background:linear-gradient(180deg,rgba(245,158,11,.22),rgba(245,158,11,.07)); border-color:rgba(245,158,11,.38); }

  .aqs-ch-scoreboard { width:100%; border-collapse:collapse; margin-bottom:18px; }
  .aqs-ch-scoreboard th { text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ch-muted); padding:7px 12px; border-bottom:1px solid var(--ch-border); font-weight:600; }
  .aqs-ch-scoreboard td { padding:11px 12px; border-bottom:1px solid rgba(255,255,255,.05); font-size:.88rem; }
  .aqs-ch-scoreboard tr:last-child td { border-bottom:none; }
  .aqs-ch-scoreboard tr:nth-child(1) td { color:var(--ch-accent); font-weight:700; }

  /* Certificate */
  .aqs-ch-cert { border:3px solid #d97706; border-radius:14px; padding:30px; text-align:center; background:linear-gradient(135deg,#fef3c7,#fffbeb 50%,#fef3c7); color:#1c1917; font-family:Georgia,serif; position:relative; overflow:hidden; }
  .aqs-ch-cert::before { content:''; position:absolute; inset:7px; border:1px solid #d97706; border-radius:9px; opacity:.4; pointer-events:none; }
  .aqs-ch-cert-header { font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:#92400e; margin-bottom:7px; }
  .aqs-ch-cert-title  { font-size:1.5rem; font-weight:700; color:#1c1917; margin:0 0 4px; }
  .aqs-ch-cert-sub    { font-size:.82rem; color:#78716c; margin-bottom:18px; }
  .aqs-ch-cert-name   { font-size:1.7rem; font-weight:700; color:#d97706; border-bottom:2px solid #d97706; display:inline-block; padding-bottom:3px; margin:7px 0 14px; }
  .aqs-ch-cert-body   { font-size:.88rem; color:#44403c; line-height:1.7; }
  .aqs-ch-cert-score  { font-size:1.1rem; font-weight:700; color:#1c1917; margin:7px 0; }
  .aqs-ch-cert-footer { font-size:.72rem; color:#a8a29e; margin-top:14px; border-top:1px solid #e7e5e4; padding-top:10px; }

  /* ── Alert ────────────────────────────────────────────────────────── */
  .aqs-ch-alert { padding:11px 15px; border-radius:9px; margin-bottom:12px; font-size:.86rem; font-weight:500; animation:chFadeIn .25s ease; }
  .aqs-ch-alert-error   { background:rgba(239,68,68,.14); border:1px solid rgba(239,68,68,.32); color:#fca5a5; }
  .aqs-ch-alert-success { background:rgba(16,185,129,.14); border:1px solid rgba(16,185,129,.32); color:#6ee7b7; }
  .aqs-ch-alert-info    { background:rgba(99,102,241,.14); border:1px solid rgba(99,102,241,.32); color:#c4b5fd; }

  /* ── Tab styles ───────────────────────────────────────────────────── */
  .aqs-ch-tab-btn { background:rgba(255,255,255,.06); color:#94a3b8; border:1px solid rgba(255,255,255,.08); }
  .aqs-ch-tab-btn.active { background:linear-gradient(135deg,rgba(99,102,241,.28),rgba(139,92,246,.28)); color:#c4b5fd; border-color:rgba(99,102,241,.4); }

  /* ── Confetti particle ────────────────────────────────────────────── */
  .aqs-conf-p { position:absolute; width:7px; height:7px; border-radius:2px; pointer-events:none; -webkit-animation:confettiFall linear both; animation:confettiFall linear both; }
  @keyframes confettiFall { 0%{transform:translateY(-20px) rotate(0);opacity:1} 100%{transform:translateY(100vh) rotate(720deg);opacity:0} }

  /* ── Print ────────────────────────────────────────────────────────── */
  @media print {
      .aqs-ch-topbar,.aqs-ch-sidebar,.aqs-ch-chat,.aqs-ch-btn,#aqs-ch-badge,.aqs-ch-celebration,.aqs-ch-bg { display:none!important; }
      .aqs-ch-cert { border-color:#d97706!important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
      .aqs-ch-page { background:white; }
  }

  /* ── Mic / Voice button ───────────────────────────────────────────── */
  .aqs-ch-mic-btn {
      padding:6px 13px; font-size:.78rem; border-radius:20px;
      background:rgba(16,185,129,.15); color:#6ee7b7;
      border:1px solid rgba(16,185,129,.35); cursor:pointer;
      font-weight:600; transition:background .2s,color .2s;
      font-family:inherit;
  }
  .aqs-ch-mic-btn:hover { background:rgba(16,185,129,.3); }
  .aqs-ch-mic-btn.active { background:rgba(239,68,68,.25); color:#fca5a5; border-color:rgba(239,68,68,.5); }

  /* ── Confirm answer button wrap ───────────────────────────────────── */
  #aqs-ch-confirm-wrap { margin-top:14px; text-align:center; }
  #aqs-ch-confirm-btn  { min-width:180px; font-size:.95rem; }
  .aqs-ch-confirm-hint { font-size:.73rem; color:#475569; margin-top:5px; }

  /* ── Mobile responsive ────────────────────────────────────────────── */
  @media(max-width:500px) {
      .aqs-ch-card { padding:18px; }
      .aqs-ch-row { grid-template-columns:1fr; }
      .aqs-ch-topbar { padding:10px 14px; }
      .aqs-ch-code-value { font-size:1.8rem; }
  }

  /* ── Mobile: full-width option buttons ───────────────────────────── */
  @media(max-width:600px) {
      .aqs-ch-options { grid-template-columns:1fr; gap:8px; }
      .aqs-ch-option  { padding:14px 16px; font-size:.9rem; }
      .aqs-ch-topbar-right { gap:6px; }
      .aqs-ch-music-btn,.aqs-ch-mic-btn { padding:5px 10px; font-size:.73rem; }
      .aqs-ch-game-wrap { gap:10px; }
      .aqs-ch-question-text { font-size:.97rem; }
      #aqs-ch-confirm-btn { min-width:140px; font-size:.88rem; padding:10px 18px; }
      .aqs-ch-q-card { padding:18px; }
  }
  
  /* ── Player status bar ──────────────────────────────────────────────── */
  .aqs-ch-status-bar {
      display: flex; flex-wrap: wrap; gap: 8px;
      margin-top: 18px; padding: 12px 14px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 12px;
  }
  .aqs-ch-status-pill {
      display: flex; align-items: center; gap: 5px;
      padding: 5px 11px; border-radius: 20px; font-size: .78rem;
      border: 1px solid rgba(255,255,255,.1);
      background: rgba(255,255,255,.05);
      transition: background .2s, border-color .2s;
  }
  .aqs-ch-status-pill .st-icon  { font-size: .85rem; }
  .aqs-ch-status-pill .st-name  { font-weight: 600; color: #e2e8f0; }
  .aqs-ch-status-pill .st-label { color: rgba(255,255,255,.5); font-size: .72rem; margin-left: 2px; }

  /* State colours */
  .st-waiting    { opacity: .5; }
  .st-answering  { border-color: rgba(99,102,241,.6); background: rgba(99,102,241,.12); animation: aqs-pulse-border 1.2s ease-in-out infinite; }
  .st-answering  .st-label { color: #a5b4fc; }
  .st-stealing   { border-color: rgba(245,158,11,.7); background: rgba(245,158,11,.12); animation: aqs-pulse-border 1s ease-in-out infinite; }
  .st-stealing   .st-label { color: #fcd34d; }
  .st-correct    { border-color: rgba(34,197,94,.6); background: rgba(34,197,94,.12); }
  .st-correct    .st-label { color: #86efac; }
  .st-wrong      { border-color: rgba(239,68,68,.5); background: rgba(239,68,68,.1); }
  .st-wrong      .st-label { color: #fca5a5; }
  .st-missed     { border-color: rgba(107,114,128,.5); background: rgba(107,114,128,.08); }
  .st-missed     .st-label { color: #9ca3af; }
  .st-steal-hit  { border-color: rgba(245,158,11,.7); background: rgba(245,158,11,.15); }
  .st-steal-hit  .st-label { color: #fcd34d; }
  .st-steal-miss { border-color: rgba(107,114,128,.4); background: rgba(107,114,128,.07); opacity: .7; }

  /* "You" highlight */
  .aqs-ch-status-pill.st-me { outline: 2px solid rgba(99,102,241,.5); outline-offset: 1px; }

  @keyframes aqs-pulse-border {
      0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,.35); }
      50%       { box-shadow: 0 0 0 5px rgba(99,102,241,.0); }
  }

  @media(max-width:500px) {
      .aqs-ch-status-bar { gap: 6px; padding: 10px 10px; }
      .aqs-ch-status-pill { padding: 4px 9px; font-size: .73rem; }
  }

  /* ════════════════════════════════════════════════════════════════════
     CHARACTER AVATAR SYSTEM
     ════════════════════════════════════════════════════════════════════ */

  /* ── Lobby character picker ─────────────────────────────────────────── */
  .aqs-ch-char-picker-wrap { margin: 14px 0; }
  .aqs-av-picker-title {
      font-size: .82rem; font-weight: 700; color: #94a3b8;
      text-transform: uppercase; letter-spacing: .1em; margin-bottom: 10px;
  }
  .aqs-av-picker-grid {
      display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
  }
  @media(max-width:600px){ .aqs-av-picker-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; } }
  @media(max-width:380px){ .aqs-av-picker-grid { grid-template-columns: repeat(3, 1fr); } }

  .aqs-av-card {
      background: rgba(255,255,255,.04); border: 2px solid rgba(255,255,255,.09);
      border-radius: 12px; padding: 8px 4px; cursor: pointer;
      text-align: center; transition: all .18s; position: relative;
      display: flex; flex-direction: column; align-items: center;
  }
  .aqs-av-card:hover { background: rgba(99,102,241,.12); border-color: rgba(99,102,241,.5); transform: translateY(-2px); }
  .aqs-av-card.av-selected { border-color: #6366f1; background: rgba(99,102,241,.18); box-shadow: 0 0 0 3px rgba(99,102,241,.3); }
  .aqs-av-card-char { width: 52px; height: 65px; overflow: hidden; }
  .aqs-av-card-char .aqs-av-svg { width: 52px; height: 65px; }
  .aqs-av-card-name { font-size: .68rem; font-weight: 700; color: #e2e8f0; margin-top: 4px; }
  .aqs-av-card-sub  { font-size: .58rem; color: #64748b; }
  .aqs-av-card-check {
      position: absolute; top: 4px; right: 5px;
      font-size: .7rem; color: #6366f1; font-weight: 900; opacity: 0;
      transition: opacity .15s;
  }
  .aqs-av-card.av-selected .aqs-av-card-check { opacity: 1; }

  /* ── In-game avatar wrapper (scoreboard + lobby slots) ──────────────── */
  .aqs-av-wrap { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
  .aqs-av-wrap .aqs-av-svg { width: 100%; height: 100%; }

  /* ── Dance keyframe animations ──────────────────────────────────────── */
  .av-dancing { transform-origin: bottom center; }

  @keyframes av-spin-kf {
    0%   { transform: rotate(0deg) scale(1); }
    25%  { transform: rotate(180deg) scale(1.15); }
    75%  { transform: rotate(360deg) scale(1.15); }
    100% { transform: rotate(360deg) scale(1); }
  }
  .av-spin { animation: av-spin-kf 0.9s cubic-bezier(.4,0,.2,1) 2 forwards; }

  @keyframes av-shake-kf {
    0%,100% { transform: translateX(0) rotate(0deg); }
    15%     { transform: translateX(-6px) rotate(-8deg); }
    30%     { transform: translateX(6px)  rotate(8deg); }
    45%     { transform: translateX(-6px) rotate(-8deg); }
    60%     { transform: translateX(6px)  rotate(8deg); }
    75%     { transform: translateX(-4px) rotate(-4deg); }
    90%     { transform: translateX(4px)  rotate(4deg); }
  }
  .av-shake { animation: av-shake-kf 1.6s ease-in-out 1 forwards; }

  @keyframes av-float-kf {
    0%,100% { transform: translateY(0) scale(1); }
    20%     { transform: translateY(-12px) scale(1.08); }
    50%     { transform: translateY(-16px) scale(1.1) rotate(5deg); }
    80%     { transform: translateY(-12px) scale(1.08) rotate(-5deg); }
  }
  .av-float { animation: av-float-kf 1.8s ease-in-out 1 forwards; }

  @keyframes av-wave-kf {
    0%,100% { transform: translateX(0) rotate(0); }
    20%     { transform: translateX(-8px) rotate(-6deg); }
    40%     { transform: translateX(10px) rotate(8deg) scaleY(1.05); }
    60%     { transform: translateX(-8px) rotate(-6deg) scaleY(.95); }
    80%     { transform: translateX(8px)  rotate(6deg); }
  }
  .av-wave { animation: av-wave-kf 1.6s ease-in-out 1 forwards; }

  @keyframes av-stomp-kf {
    0%,100% { transform: translateY(0) scale(1); }
    15%     { transform: translateY(-14px) scale(.95,1.1); }
    30%     { transform: translateY(4px)  scale(1.1,.92); }
    45%     { transform: translateY(-10px) scale(.97,1.06); }
    60%     { transform: translateY(3px)  scale(1.08,.94); }
    75%     { transform: translateY(-6px) scale(.98,1.04); }
    88%     { transform: translateY(2px)  scale(1.04,.97); }
  }
  .av-stomp { animation: av-stomp-kf 1.4s cubic-bezier(.4,0,.2,1) 1 forwards; }

  @keyframes av-bounce-kf {
    0%,100% { transform: translateY(0) scale(1); }
    15%     { transform: translateY(-16px) scale(.96,1.08); }
    30%     { transform: translateY(0)    scale(1.08,.94); }
    45%     { transform: translateY(-12px) scale(.97,1.06); }
    60%     { transform: translateY(0)    scale(1.06,.96); }
    75%     { transform: translateY(-8px) scale(.98,1.04); }
    88%     { transform: translateY(0)    scale(1.03,.98); }
  }
  .av-bounce { animation: av-bounce-kf 1.5s cubic-bezier(.4,0,.2,1) 1 forwards; }

  @keyframes av-flex-kf {
    0%   { transform: scale(1); }
    20%  { transform: scale(1.2,0.88); }
    40%  { transform: scale(0.9,1.15) translateY(-6px); }
    55%  { transform: scale(1.15,0.92) translateY(0); }
    70%  { transform: scale(0.95,1.1) translateY(-4px); }
    85%  { transform: scale(1.08,0.96); }
    100% { transform: scale(1); }
  }
  .av-flex { animation: av-flex-kf 1.5s cubic-bezier(.4,0,.2,1) 1 forwards; }

  /* ── Play Again button ──────────────────────────────────────────────── */
  #aqs-ch-play-again {
      margin: 28px auto 0 !important; display: block !important;
      min-width: 220px; font-size: 1.05rem; padding: 14px 30px;
      background: linear-gradient(135deg, #6366f1, #8b5cf6);
      animation: av-flex-kf .6s ease-out 1 forwards;
  }

  /* ════════════════════════════════════════════════════════════════════
     HYPE SCREEN (pre-game countdown with characters)
     ════════════════════════════════════════════════════════════════════ */

  .aqs-hype-overlay {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0; /* inset fallback for older WebViews */
      z-index: 99999;
      background: radial-gradient(ellipse at 50% 40%, #0d0d2b 0%, #06060f 100%);
      display: -webkit-flex; display: flex;
      -webkit-flex-direction: column; flex-direction: column;
      -webkit-align-items: center; align-items: center;
      -webkit-justify-content: center; justify-content: center;
      overflow: hidden;
      opacity: 1; /* visible by default — don't rely on animation start state */
      -webkit-animation: hype-fade-in .35s ease-out forwards;
              animation: hype-fade-in .35s ease-out forwards;
  }
  .aqs-hype-overlay.aqs-hype-go {
      animation: hype-go-flash .7s ease-out forwards;
  }
  @-webkit-keyframes hype-fade-in {
      from { opacity: 1; -webkit-transform: scale(1.04); transform: scale(1.04); }
      to   { opacity: 1; -webkit-transform: scale(1);    transform: scale(1); }
  }
  @keyframes hype-fade-in {
      from { opacity: 1; transform: scale(1.04); }
      to   { opacity: 1; transform: scale(1); }
  }
  @keyframes hype-go-flash {
      0%   { opacity: 1; background: radial-gradient(ellipse at 50% 40%, #0d0d2b 0%, #06060f 100%); }
      40%  { background: rgba(99,102,241,.35); }
      100% { opacity: 0; transform: scale(1.05); }
  }

  /* ── Wrap & layout ──────────────────────────────────────────────────── */
  .aqs-hype-wrap {
      display: flex; flex-direction: column; align-items: center;
      gap: 0; width: 100%; max-width: 960px; padding: 24px 16px;
  }
  .aqs-hype-title {
      font-size: 1.1rem; font-weight: 800; color: #a5b4fc;
      text-transform: uppercase; letter-spacing: .18em;
      margin-bottom: 28px;
      text-shadow: 0 0 24px rgba(99,102,241,.6);
      animation: hype-title-pulse 1.8s ease-in-out infinite;
  }
  @keyframes hype-title-pulse {
      0%,100% { opacity: .85; text-shadow: 0 0 20px rgba(99,102,241,.5); }
      50%     { opacity: 1;   text-shadow: 0 0 36px rgba(99,102,241,.9); }
  }

  /* ── Characters row ─────────────────────────────────────────────────── */
  .aqs-hype-chars {
      display: flex; flex-wrap: wrap; justify-content: center;
      gap: 18px; margin-bottom: 28px;
  }
  .aqs-hype-player {
      display: flex; flex-direction: column; align-items: center;
      gap: 6px; position: relative;
      animation: hype-player-in .5s cubic-bezier(.34,1.56,.64,1) both;
  }
  @keyframes hype-player-in {
      from { opacity: 0; transform: translateY(30px) scale(.8); }
      to   { opacity: 1; transform: translateY(0)   scale(1); }
  }

  /* ── Speech bubble ──────────────────────────────────────────────────── */
  .aqs-hype-bubble {
      background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
      border-radius: 12px; padding: 7px 12px; font-size: .72rem; color: #e2e8f0;
      max-width: 140px; text-align: center; line-height: 1.4;
      position: relative; font-style: italic;
      animation: hype-bubble-in .4s .6s cubic-bezier(.34,1.56,.64,1) both;
      box-shadow: 0 4px 16px rgba(0,0,0,.3);
  }
  .aqs-hype-bubble::after {
      content: ''; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%);
      border: 7px solid transparent; border-top-color: rgba(255,255,255,.15);
      border-bottom: none;
  }
  @keyframes hype-bubble-in {
      from { opacity: 0; transform: scale(.7) translateY(6px); }
      to   { opacity: 1; transform: scale(1)  translateY(0); }
  }

  /* ── Character SVG in hype screen ───────────────────────────────────── */
  .aqs-hype-char-wrap {
      width: 90px; height: 112px; flex-shrink: 0;
      filter: drop-shadow(0 8px 20px rgba(0,0,0,.55));
  }
  .aqs-hype-char-wrap .aqs-av-svg { width: 90px; height: 112px; }

  /* ── Idle bob animation (runs continuously during hype) ─────────────── */
  .av-idle {
      animation: av-idle-bob 1.6s ease-in-out infinite;
      transform-origin: bottom center;
  }
  @keyframes av-idle-bob {
      0%,100% { transform: translateY(0)    rotate(0deg); }
      25%     { transform: translateY(-5px) rotate(1.5deg); }
      75%     { transform: translateY(-3px) rotate(-1.5deg); }
  }
  /* Stagger via animation-delay on parent .aqs-hype-player */
  .aqs-hype-player:nth-child(2) .av-idle { animation-delay: -.5s; }
  .aqs-hype-player:nth-child(3) .av-idle { animation-delay: -.9s; }
  .aqs-hype-player:nth-child(4) .av-idle { animation-delay: -1.3s; }

  /* ── Player name & sub ──────────────────────────────────────────────── */
  .aqs-hype-name {
      font-size: .8rem; font-weight: 700; color: #e2e8f0;
      text-align: center; max-width: 110px;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .aqs-hype-me   { color: #a5b4fc; }
  .aqs-hype-you  { font-size: .65rem; opacity: .6; font-weight: 400; }
  .aqs-hype-sub  { font-size: .65rem; color: #475569; text-align: center; }

  /* ── Big countdown number ───────────────────────────────────────────── */
  .aqs-hype-num {
      font-size: 6.5rem; font-weight: 900; color: #a5b4fc; line-height: 1;
      text-shadow: 0 0 50px rgba(99,102,241,.7);
      min-width: 120px; text-align: center;
  }
  .aqs-hype-pulse {
      animation: hype-num-pulse .5s cubic-bezier(.34,1.56,.64,1) forwards;
  }
  @keyframes hype-num-pulse {
      0%   { transform: scale(1.5); opacity: .5; }
      100% { transform: scale(1);   opacity: 1; }
  }
  .aqs-hype-hint {
      font-size: .8rem; color: #475569; margin-top: 12px; font-style: italic;
  }

  /* ── Mobile adjustments ─────────────────────────────────────────────── */
  @media(max-width:540px){
      .aqs-hype-char-wrap, .aqs-hype-char-wrap .aqs-av-svg { width: 68px; height: 84px; }
      .aqs-hype-bubble { max-width: 100px; font-size: .65rem; padding: 5px 8px; }
      .aqs-hype-num { font-size: 4.5rem; }
      .aqs-hype-chars { gap: 10px; }
  }

  /* ════════════════════════════════════════════════════════════════════
     IN-GAME CHARACTER SPEECH BUBBLES (scoreboard)
     ════════════════════════════════════════════════════════════════════ */

  .aqs-ch-score-player { position: relative; overflow: visible; }

  .aqs-char-speech {
      position: absolute;
      bottom: 110%; left: 50%;
      transform: translateX(-50%) scale(.85);
      background: rgba(15, 15, 35, .97);
      border: 1px solid rgba(165,180,252,.3);
      border-radius: 10px;
      padding: 6px 11px;
      font-size: .72rem; color: #e2e8f0;
      white-space: nowrap; max-width: 220px;
      text-overflow: ellipsis; overflow: hidden;
      pointer-events: none; z-index: 9000;
      box-shadow: 0 4px 18px rgba(0,0,0,.5);
      animation: speech-pop-in .3s cubic-bezier(.34,1.56,.64,1) forwards;
  }
  /* Triangle pointing down to the character */
  .aqs-char-speech::after {
      content: '';
      position: absolute; top: 100%; left: 50%;
      transform: translateX(-50%);
      border: 6px solid transparent;
      border-top-color: rgba(165,180,252,.3);
  }
  @keyframes speech-pop-in {
      from { opacity: 0; transform: translateX(-50%) scale(.7) translateY(6px); }
      to   { opacity: 1; transform: translateX(-50%) scale(1)  translateY(0); }
  }
  .aqs-char-speech.aqs-speech-fade {
      animation: speech-fade-out .4s ease-out forwards;
  }
  @keyframes speech-fade-out {
      from { opacity: 1; transform: translateX(-50%) scale(1); }
      to   { opacity: 0; transform: translateX(-50%) scale(.8) translateY(-4px); }
  }

  /* ════════════════════════════════════════════════════════════════════
     POST-GAME CHARACTER REACTIONS (results screen)
     ════════════════════════════════════════════════════════════════════ */

  .aqs-results-chars {
      display: flex; flex-wrap: wrap; justify-content: center;
      gap: 24px; margin: 28px 0 8px; width: 100%;
  }
  .aqs-results-char {
      display: flex; flex-direction: column; align-items: center; gap: 8px;
      animation: res-char-in .55s cubic-bezier(.34,1.56,.64,1) both;
  }
  .aqs-results-char:nth-child(2) { animation-delay: .12s; }
  .aqs-results-char:nth-child(3) { animation-delay: .22s; }
  .aqs-results-char:nth-child(4) { animation-delay: .32s; }
  @keyframes res-char-in {
      from { opacity: 0; transform: translateY(28px) scale(.8); }
      to   { opacity: 1; transform: translateY(0)    scale(1); }
  }

  /* Winner gets big and glowing, losers are slightly smaller + muted */
  .aqs-results-char.results-winner .aqs-results-char-wrap {
      width: 100px; height: 124px;
      filter: drop-shadow(0 0 20px rgba(245,158,11,.55));
  }
  .aqs-results-char.results-winner .aqs-results-char-wrap .aqs-av-svg { width: 100px; height: 124px; }

  .aqs-results-char.results-loser  .aqs-results-char-wrap {
      width: 72px; height: 90px; opacity: .7;
      filter: grayscale(.35);
  }
  .aqs-results-char.results-loser  .aqs-results-char-wrap .aqs-av-svg { width: 72px; height: 90px; }

  /* Speech bubble above the character */
  .aqs-results-speech {
      background: rgba(15,15,35,.95);
      border: 1px solid rgba(165,180,252,.25);
      border-radius: 10px; padding: 7px 13px;
      font-size: .78rem; color: #e2e8f0;
      max-width: 180px; text-align: center; line-height: 1.4;
      font-style: italic; position: relative;
      animation: speech-pop-in .35s .5s cubic-bezier(.34,1.56,.64,1) both;
  }
  .aqs-results-speech::after {
      content: ''; position: absolute; top: 100%; left: 50%;
      transform: translateX(-50%);
      border: 6px solid transparent;
      border-top-color: rgba(165,180,252,.25);
  }
  .aqs-results-char.results-winner .aqs-results-speech {
      border-color: rgba(245,158,11,.45); color: #fef3c7; font-size: .82rem;
  }
  .aqs-results-char.results-winner .aqs-results-speech::after {
      border-top-color: rgba(245,158,11,.45);
  }

  .aqs-results-char-name {
      font-size: .8rem; font-weight: 700; color: #e2e8f0; text-align: center;
  }
  .aqs-results-char.results-winner .aqs-results-char-name { color: #fbbf24; font-size: .9rem; }
  .aqs-results-char.results-loser  .aqs-results-char-name { color: #64748b; }

  /* ── Sad slump animation (losers) ───────────────────────────────────── */
  .av-slump {
      animation: av-slump-kf .9s cubic-bezier(.25,.46,.45,.94) forwards;
      transform-origin: bottom center;
  }
  @keyframes av-slump-kf {
      0%   { transform: rotate(0deg)   translateY(0);    opacity: 1; }
      30%  { transform: rotate(-8deg)  translateY(4px);  opacity: .9; }
      60%  { transform: rotate(-13deg) translateY(8px);  opacity: .75; }
      100% { transform: rotate(-11deg) translateY(7px);  opacity: .7; }
  }

  /* Mobile */
  @media(max-width:540px){
      .aqs-results-char.results-winner .aqs-results-char-wrap { width: 76px; height: 94px; }
      .aqs-results-char.results-winner .aqs-results-char-wrap .aqs-av-svg { width: 76px; height: 94px; }
      .aqs-results-speech { font-size: .7rem; max-width: 140px; }
      .aqs-char-speech { font-size: .68rem; max-width: 160px; }
  }


/* ══════════════════════════════════════════════════════════════════════
   CHALLENGE PAGE — MOBILE FIXES
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* site header overlaps challenge bg — give it proper z-index */
    .aqs-site-header { z-index: 300 !important; }

    /* challenge topbar (below site header) */
    .aqs-ch-topbar {
        padding: 8px 12px !important;
        min-height: 0 !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
    }
    .aqs-ch-logo { font-size: 0.82rem !important; gap: 5px !important; }
    .aqs-ch-logo-icon { font-size: 1rem !important; }
    .aqs-ch-topbar-right { gap: 4px !important; flex-wrap: wrap !important; }
    .aqs-ch-music-btn { font-size: 0.72rem !important; padding: 4px 8px !important; }

    /* main area */
    .aqs-ch-main { padding: 12px 8px !important; }

    /* home screen cards — full width stacked */
    .aqs-ch-home-cards,
    .aqs-ch-join-host-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .aqs-ch-home-card { padding: 20px 16px !important; }

    /* setup card */
    .aqs-ch-setup-card,
    .aqs-ch-join-card {
        padding: 18px 14px !important;
        border-radius: 14px !important;
    }
    .aqs-ch-setup-title { font-size: 1.1rem !important; }

    /* tab bar */
    .aqs-ch-tab-bar {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 2px !important;
    }
    .aqs-ch-tab-bar::-webkit-scrollbar { display: none !important; }
    .aqs-ch-tab { font-size: 0.78rem !important; padding: 7px 12px !important; white-space: nowrap !important; }

    /* question area */
    .aqs-ch-q-area { padding: 14px 10px !important; }
    .aqs-ch-question-text { font-size: 0.97rem !important; line-height: 1.6 !important; margin-bottom: 16px !important; }
    .aqs-ch-options-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
    .aqs-ch-option { padding: 12px 14px !important; font-size: 0.88rem !important; }
    .aqs-ch-q-header { flex-wrap: wrap !important; gap: 8px !important; }
    .aqs-ch-timer { flex-direction: row !important; gap: 8px !important; align-items: center !important; }
    .aqs-ch-timer-ring { width: 52px !important; height: 52px !important; }
    .aqs-ch-timer-text { font-size: 1rem !important; }

    /* scoreboard */
    .aqs-ch-scoreboard-wrap { padding: 12px 8px !important; }
    .aqs-ch-player-row { padding: 9px 10px !important; font-size: 0.85rem !important; }
    .aqs-ch-player-avatar { width: 32px !important; height: 32px !important; font-size: 0.95rem !important; }
    .aqs-ch-score-val { font-size: 0.95rem !important; }

    /* quiz select grid */
    .aqs-ch-quiz-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
    .aqs-ch-quiz-card { padding: 14px 12px !important; }

    /* invite row */
    .aqs-ch-invite-row { flex-direction: column !important; gap: 6px !important; }
    .aqs-ch-invite-row input { width: 100% !important; font-size: 0.85rem !important; }

    /* round result */
    .aqs-ch-round-result { padding: 20px 14px !important; }
    .aqs-ch-round-result-emoji { font-size: 2.5rem !important; }
    .aqs-ch-round-result-title { font-size: 1rem !important; }

    /* final podium */
    .aqs-ch-podium { gap: 8px !important; flex-wrap: wrap !important; justify-content: center !important; }
    .aqs-ch-podium-slot { min-width: 90px !important; }
}

@media (max-width: 480px) {
    .aqs-ch-main { padding: 8px 6px !important; }
    .aqs-ch-home-card { padding: 16px 12px !important; }
    .aqs-ch-option { padding: 11px 12px !important; font-size: 0.85rem !important; }
    .aqs-ch-question-text { font-size: 0.92rem !important; }
}