/* ════════════════════════════════════════════
   FRIENDS TRIVIA — Central Perk Edition
   Mood: anni '90, legno, caffè, neon, velluto
════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Libre+Franklin:wght@400;500;600;700;800;900&display=swap');

:root{
  --bg:#140d06;
  --bg2:#1f1409;
  --surface:#2a1a0c;
  --surface-l:#3a2613;
  --card:#f3e8cf;
  --card-2:#e9dab8;
  --ink:#1a0f05;
  --ink-2:#4a3520;
  --cream:#f5ecd7;
  --muted:#a98c63;
  --orange:#e07a2b;
  --orange-d:#bd5d18;
  --orange-l:#f2a24d;
  --gold:#d4a02a;
  --purple:#6b4d8f;
  --teal:#3f7d6e;
  --red:#c0392b;
  --green:#3f8a4f;
  --neon:#ff6b35;
  --easy:#4a9e5c; --medium:#e07a2b; --hard:#c0392b; --expert:#7b5ea7; --maniac:#caa43a;
  --shadow:0 12px 40px rgba(0,0,0,.5);
  --r:16px;
}

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

html,body{height:100%}
body{
  font-family:'Libre Franklin',-apple-system,sans-serif;
  background:var(--bg);
  color:var(--cream);
  overflow:hidden;
  position:relative;
}

/* film grain + vignette over everything */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%);
  mix-blend-mode:multiply;
}
.grain{
  position:fixed;inset:-50%;pointer-events:none;z-index:9998;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-5%,3%)}
  40%{transform:translate(3%,-4%)}
  60%{transform:translate(-3%,2%)}
  80%{transform:translate(4%,-2%)}
}

/* ── SCREENS / TRANSITIONS ── */
.screen{
  position:fixed;inset:0;display:none;
  opacity:0;
}
.screen.active{display:flex;opacity:1}
.screen.tv-in{animation:tvIn .55s cubic-bezier(.2,.8,.2,1) forwards}
.screen.tv-out{animation:tvOut .35s ease forwards}

@keyframes tvIn{
  0%{opacity:0;transform:scale(1.04);filter:brightness(2) blur(6px)}
  40%{opacity:1;filter:brightness(1.2) blur(0)}
  100%{opacity:1;transform:scale(1);filter:none}
}
@keyframes tvOut{
  0%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(.97);filter:brightness(1.5) blur(4px)}
}

/* soft channel-change wipe between questions (warm, vintage TV) */
.flash{
  position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at center, rgba(224,122,43,.25), rgba(20,13,6,.92) 70%);
}
.flash.go{animation:chwipe .42s cubic-bezier(.4,0,.2,1)}
@keyframes chwipe{
  0%{opacity:0;backdrop-filter:blur(0)}
  35%{opacity:1;backdrop-filter:blur(3px)}
  100%{opacity:0;backdrop-filter:blur(0)}
}

/* ════════ HOME ════════ */
#home{
  flex-direction:column;align-items:center;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:
    linear-gradient(rgba(20,13,6,.86),rgba(20,13,6,.93)),
    url('img/bg/central-perk.webp') center/cover no-repeat fixed;
}
.home-inner{
  width:100%;max-width:720px;padding:28px;text-align:center;
  margin:auto 0;
}

.logo-wrap{margin-bottom:8px}
.logo-cup{font-size:54px;line-height:1;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5))}
.logo-title{
  font-family:'Anton',sans-serif;font-size:clamp(48px,9vw,86px);
  letter-spacing:.04em;line-height:.9;
  color:var(--orange);
  text-shadow:0 0 18px rgba(224,122,43,.45),0 3px 0 rgba(0,0,0,.4);
  -webkit-text-stroke:1px rgba(0,0,0,.25);
}
.logo-dots{
  display:flex;align-items:center;justify-content:center;gap:14px;margin:6px 0 2px;
}
.logo-dots .dot{width:13px;height:13px;border-radius:50%}
.logo-dots .dot:nth-child(1){background:#e74c3c}
.logo-dots .dot:nth-child(2){background:#3498db}
.logo-dots .dot:nth-child(3){background:#f1c40f}
.logo-dots .dot:nth-child(4){background:#e74c3c}
.logo-sub{
  font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:.5em;
  color:var(--cream);opacity:.75;margin-left:.5em;
}
.logo-tag{font-size:13px;color:var(--muted);font-style:italic;margin-top:4px}

.quote-card{
  margin:22px auto 0;max-width:440px;padding:16px 22px;
  background:rgba(243,232,207,.06);border:1px solid rgba(224,122,43,.25);
  border-radius:12px;backdrop-filter:blur(4px);
}
.quote-card .q{font-size:16px;color:var(--orange-l);font-style:italic;font-weight:600}
.quote-card .by{font-size:11px;color:var(--muted);margin-top:4px}

.home-h2{font-size:22px;font-weight:800;margin:26px 0 4px;color:var(--cream)}
.home-p{font-size:13px;color:var(--muted);margin-bottom:18px}

.diff-grid{display:flex;flex-direction:column;gap:9px;max-width:520px;margin:0 auto}
.diff-card{
  display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:13px;cursor:pointer;
  background:rgba(243,232,207,.05);border:1.5px solid rgba(255,255,255,.07);
  transition:transform .15s,border-color .15s,background .15s;
  text-align:left;
}
.diff-card:hover{transform:translateX(3px);background:rgba(243,232,207,.09)}
.diff-card.sel{border-color:var(--dc);background:rgba(243,232,207,.12);box-shadow:inset 0 0 0 1px var(--dc)}
.diff-card .emoji{font-size:26px;width:38px;text-align:center;flex-shrink:0}
.diff-card .info{flex:1;min-width:0}
.diff-card .info h3{font-family:'Bebas Neue';font-size:18px;letter-spacing:.06em;color:var(--cream)}
.diff-card.sel .info h3{color:var(--dc)}
.diff-card .info p{font-size:11px;color:var(--muted)}
.diff-card .badge{font-size:11px;font-weight:800;font-family:ui-monospace,monospace;padding:3px 9px;border-radius:6px;background:rgba(255,255,255,.06);color:var(--muted);flex-shrink:0}
.diff-card.sel .badge{background:var(--dc);color:#1a0f05}
.diff-card .chk{font-size:17px;color:rgba(255,255,255,.18);flex-shrink:0}
.diff-card.sel .chk{color:var(--dc)}

.start-btn{
  margin:24px auto 0;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 30px;border:none;border-radius:11px;cursor:pointer;
  font-family:'Bebas Neue';font-size:22px;letter-spacing:.05em;color:#fff;
  background:var(--orange);max-width:520px;width:100%;
  box-shadow:0 6px 0 var(--orange-d),0 10px 24px rgba(0,0,0,.4);
  transition:transform .1s,box-shadow .1s;
}
.start-btn:hover{transform:translateY(-1px)}
.start-btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--orange-d)}
.start-meta{font-size:11px;color:var(--muted);margin-top:10px}

.home-footer{margin-top:22px;font-size:11px;color:var(--muted);opacity:.7;line-height:1.6}
.home-footer a{color:var(--orange-l);cursor:pointer;text-decoration:underline}
.home-footer .credit{display:inline-block;margin-top:6px;font-size:11px;letter-spacing:.02em}
.home-footer .credit a{font-weight:700;text-decoration:none;border-bottom:1px solid rgba(242,162,77,.5)}
.home-footer .credit a:hover{color:#fff;border-bottom-color:#fff}

/* ════════ GAME ════════ */
#game{flex-direction:column;background:linear-gradient(160deg,var(--bg),var(--bg2))}
.g-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;background:rgba(0,0,0,.32);flex-shrink:0;border-bottom:1px solid rgba(224,122,43,.12)
}
.icon-btn{background:none;border:none;cursor:pointer;font-size:13px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:5px}
.icon-btn:hover{color:var(--cream)}
.diff-pill{padding:5px 15px;border-radius:20px;font-family:'Bebas Neue';font-size:15px;letter-spacing:.12em;display:flex;align-items:center;gap:7px}
.g-score{font-family:ui-monospace,monospace;font-weight:700;font-size:15px;display:flex;align-items:center;gap:12px}
.streak{color:#ff8c2e;font-size:14px;display:flex;align-items:center;gap:3px}

.g-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;min-height:0;display:flex;flex-direction:column;gap:18px;padding:22px 28px;max-width:840px;width:100%;margin:0 auto}

.prog{display:flex;flex-direction:column;gap:8px}
.prog-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.prog-bar{height:6px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden}
.prog-fill{height:100%;border-radius:4px;transition:width .4s ease}
.timer{font-family:ui-monospace,monospace;font-weight:700}
.timer.warn{color:#ff4d4d;animation:pulse .5s infinite}
@keyframes pulse{50%{opacity:.5}}

.timer-bar{height:10px;background:rgba(255,255,255,.08);border-radius:5px;overflow:hidden;border:1px solid rgba(255,255,255,.1)}
.timer-fill{height:100%;border-radius:5px;width:100%;background:#4a9e5c;transition:width .1s linear,background-color .3s ease}
.timer-fill.warn{background:#ff4d4d;animation:timerPulse .5s infinite}
@keyframes timerPulse{50%{opacity:.55}}

.q-card{
  background:linear-gradient(150deg,var(--surface),var(--surface-l));
  border:1.5px solid rgba(224,122,43,.3);border-radius:var(--r);
  padding:26px 30px;text-align:center;box-shadow:var(--shadow);position:relative;
}
.q-orn{display:flex;align-items:center;gap:10px;color:rgba(224,122,43,.55);font-size:13px}
.q-orn::before,.q-orn::after{content:'';flex:1;height:1px;background:rgba(224,122,43,.35)}
.q-text{font-size:clamp(18px,2.4vw,22px);font-weight:700;color:var(--cream);line-height:1.45;margin:14px 0}

.answers{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ans{
  display:flex;align-items:center;gap:13px;padding:15px;border-radius:13px;cursor:pointer;
  background:var(--card);border:1.5px solid rgba(74,53,32,.22);text-align:left;
  min-height:70px;transition:transform .12s,background .15s,border-color .15s;
}
.ans:hover:not(.revealed){transform:translateY(-2px);background:#fbeed3;border-color:var(--orange)}
.ans.sel{background:#fbe2c4;border:2px solid var(--orange)}
.ans.correct{background:#d7eedd;border:2px solid var(--green);animation:pop .35s}
.ans.wrong{background:#f6d8d5;border:2px solid var(--red);animation:shake .4s}
.ans.dim{opacity:.55}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.03)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

.ans-letter{
  width:34px;height:34px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-family:ui-monospace,monospace;font-weight:800;font-size:14px;
  background:rgba(224,122,43,.14);color:var(--orange-d);transition:all .15s
}
.ans.sel .ans-letter{background:rgba(224,122,43,.28)}
.ans.correct .ans-letter{background:rgba(63,138,79,.22);color:#256b34}
.ans.wrong .ans-letter{background:rgba(192,57,43,.18);color:#8e2820}
.ans-text{flex:1;font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.35}
.ans-icon{font-size:19px;flex-shrink:0;opacity:0;transition:opacity .2s}
.ans.correct .ans-icon,.ans.wrong .ans-icon{opacity:1}

/* answer reveal: reaction + episode citation */
.reveal{
  display:none;gap:16px;align-items:center;
  background:linear-gradient(150deg,var(--surface),var(--surface-l));
  border:1.5px solid rgba(224,122,43,.25);border-radius:var(--r);padding:14px 16px;
  animation:slideUp .35s ease;
}
.reveal.show{display:flex}
@keyframes slideUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.reveal-img{width:120px;height:90px;object-fit:cover;border-radius:10px;flex-shrink:0;border:2px solid rgba(224,122,43,.3);background:#000}
.reveal-body{flex:1;min-width:0}
.reveal-verdict{font-family:'Bebas Neue';font-size:22px;letter-spacing:.04em;line-height:1}
.reveal-verdict.ok{color:#5cba6e}
.reveal-verdict.no{color:#e0594d}
.reveal-quip{font-size:13px;color:var(--cream);opacity:.85;margin:4px 0 8px;font-style:italic}
.reveal-ep{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.reveal-ep .tag{background:rgba(224,122,43,.16);color:var(--orange-l);padding:3px 8px;border-radius:6px;font-family:ui-monospace,monospace;font-weight:700}
.reveal-ep .title{font-weight:600;color:var(--cream);opacity:.8}

.g-foot{
  flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 28px;max-width:840px;width:100%;margin:0 auto;
  background:rgba(0,0,0,.28);border-top:1px solid rgba(224,122,43,.25);
}
.skip-btn{background:none;border:none;cursor:pointer;font-size:13px;color:var(--muted);font-weight:600}
.skip-btn:hover{color:var(--cream)}
.hint{font-size:12px;color:rgba(169,140,99,.5)}
#foot-right{margin-left:auto}
.next-btn{
  padding:16px 34px;border:none;border-radius:12px;cursor:pointer;color:#fff;
  font-family:'Bebas Neue';font-size:23px;letter-spacing:.05em;display:flex;align-items:center;gap:10px;
  box-shadow:0 4px 0 rgba(0,0,0,.3),0 0 0 3px rgba(255,255,255,.08);transition:transform .1s;
  animation:nextPulse 1.4s ease-in-out infinite;
}
.next-btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.3)}
@keyframes nextPulse{0%,100%{box-shadow:0 4px 0 rgba(0,0,0,.3),0 0 0 0 rgba(255,255,255,.25)}50%{box-shadow:0 4px 0 rgba(0,0,0,.3),0 0 0 8px rgba(255,255,255,0)}}

/* ════════ RESULTS ════════ */
#results{align-items:center;justify-content:center;background:linear-gradient(160deg,var(--bg),var(--bg2))}
.res-inner{width:100%;max-width:860px;height:100%;display:flex;align-items:center;gap:0;padding:24px}
.res-left{flex:0 0 320px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 24px;border-right:1px solid rgba(224,122,43,.18)}
.res-reaction{width:200px;height:150px;object-fit:cover;border-radius:14px;border:3px solid var(--orange);box-shadow:var(--shadow);margin-bottom:18px;background:#000}
.score-ring{position:relative;width:150px;height:150px;margin-bottom:14px}
.score-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:rgba(255,255,255,.07);stroke-width:11}
.ring-fill{fill:none;stroke-width:11;stroke-linecap:round;transition:stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1)}
.ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring-num{font-family:'Anton';font-size:46px;line-height:1}
.ring-total{font-size:15px;color:var(--muted)}
.res-pct{font-family:'Anton';font-size:30px}
.res-grade{font-size:14px;font-weight:700;color:var(--cream);margin-top:6px;padding:0 8px}
.res-stats{display:flex;width:100%;margin-top:20px;background:rgba(0,0,0,.22);border-radius:11px;overflow:hidden}
.res-stat{flex:1;padding:13px 6px}
.res-stat+.res-stat{border-left:1px solid rgba(255,255,255,.07)}
.res-stat .v{font-family:ui-monospace,monospace;font-weight:800;font-size:19px}
.res-stat .l{font-size:10px;color:var(--muted);margin-top:2px;font-weight:600}
.res-actions{margin-top:auto;width:100%;padding-top:20px}
.replay-btn{width:100%;padding:13px;border:none;border-radius:10px;cursor:pointer;color:#fff;font-family:'Bebas Neue';font-size:20px;letter-spacing:.05em;box-shadow:0 4px 0 rgba(0,0,0,.3);transition:transform .1s;margin-bottom:10px}
.replay-btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.3)}
.home-link{background:none;border:none;cursor:pointer;font-size:13px;color:var(--muted);font-weight:600}
.home-link:hover{color:var(--cream)}

.res-right{flex:1;display:flex;flex-direction:column;height:100%;padding:0 4px 0 28px;min-width:0}
.res-right-h{display:flex;align-items:center;justify-content:space-between;padding:8px 4px 14px;flex-shrink:0}
.res-right-h h3{font-family:'Bebas Neue';font-size:26px;letter-spacing:.04em}
.review-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding-right:6px}
.rev-card{background:rgba(243,232,207,.04);border:1px solid rgba(192,57,43,.2);border-radius:11px;overflow:hidden}
.rev-q{display:flex;gap:10px;padding:12px;cursor:pointer;align-items:flex-start}
.rev-idx{font-family:ui-monospace,monospace;font-weight:800;font-size:11px;color:var(--muted);min-width:18px;padding-top:2px}
.rev-text{flex:1;font-size:12.5px;font-weight:600;color:rgba(245,236,215,.85);line-height:1.4}
.rev-tog{font-size:10px;color:var(--muted);padding-top:3px}
.rev-detail{display:none;padding:0 12px 12px 40px}
.rev-detail.open{display:block}
.rev-correct{font-size:12px;font-weight:700;color:#5cba6e;display:flex;gap:6px;margin-bottom:3px}
.rev-chosen{font-size:12px;color:#e0594d;display:flex;gap:6px}
.rev-ep{font-size:11px;color:var(--muted);margin-top:6px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.rev-ep .tag{background:rgba(224,122,43,.14);color:var(--orange-l);padding:2px 7px;border-radius:5px;font-family:ui-monospace,monospace;font-weight:700}

.perfect{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center}
.perfect img{width:280px;max-width:90%;border-radius:14px;border:3px solid var(--gold);box-shadow:var(--shadow)}
.perfect h3{font-family:'Bebas Neue';font-size:28px;letter-spacing:.04em}
.perfect p{font-size:13px;color:var(--muted);font-style:italic}

/* ════════ AUDIO PLAYER ════════ */
.audio-ctl{
  position:fixed;bottom:18px;right:18px;z-index:9500;
  display:flex;align-items:center;gap:6px;
  background:rgba(20,13,6,.82);backdrop-filter:blur(8px);
  border:1px solid rgba(224,122,43,.3);border-radius:30px;padding:7px 10px;
  box-shadow:var(--shadow);
}
.audio-btn{
  width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;
  background:var(--orange);color:#fff;font-size:14px;display:flex;align-items:center;justify-content:center;
  transition:transform .1s,background .15s
}
.audio-btn:hover{transform:scale(1.08)}
.audio-btn.muted{background:var(--surface-l);color:var(--muted)}
.audio-label{font-size:10px;color:var(--muted);font-weight:600;max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .3s,padding .3s}
.audio-ctl:hover .audio-label{max-width:120px;padding-right:6px}
.vol{width:60px;accent-color:var(--orange);cursor:pointer}

/* ════════ QUESTION IMAGE (stills) + META ════════ */
.q-image{
  display:block;max-width:100%;max-height:300px;width:auto;margin:2px auto 12px;
  border-radius:12px;border:3px solid var(--gold);box-shadow:0 8px 24px rgba(0,0,0,.45);object-fit:contain;
}
.q-meta{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:-6px}
.q-id{
  font-family:ui-monospace,monospace;font-size:10.5px;font-weight:700;color:var(--muted);
  background:rgba(0,0,0,.25);padding:3px 9px;border-radius:20px;letter-spacing:.5px;
}
.report-btn{
  border:1px solid rgba(224,89,77,.35);background:rgba(224,89,77,.08);color:#e0917f;
  cursor:pointer;font-family:'Libre Franklin';font-weight:600;font-size:11px;
  padding:4px 11px;border-radius:20px;transition:background .15s;
}
.report-btn:hover{background:rgba(224,89,77,.2);color:#f0b5a8}

/* ════════ PROPOSE BUTTON + MODAL ════════ */
.propose-btn{
  width:100%;margin-top:12px;padding:11px;border-radius:10px;cursor:pointer;
  border:1.5px solid rgba(123,94,167,.45);background:rgba(123,94,167,.12);color:var(--cream);
  font-family:'Libre Franklin';font-weight:700;font-size:13px;transition:background .15s;
}
.propose-btn:hover{background:rgba(123,94,167,.26)}
.propose-box{max-width:480px;width:100%}
.pr-label{display:block;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-weight:700;margin:12px 0 5px}
.propose-box input[type=text],.propose-box select{
  width:100%;padding:10px 12px;border-radius:9px;border:1.5px solid rgba(224,122,43,.3);
  background:rgba(0,0,0,.3);color:var(--cream);font-family:'Libre Franklin';font-size:14px;
}
.propose-box input[type=text]:focus,.propose-box select:focus{outline:none;border-color:var(--orange)}
.pr-opt{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.pr-opt input[type=radio]{accent-color:var(--green);width:18px;height:18px;flex:0 0 18px;cursor:pointer}
.pr-opt input[type=text]{flex:1}
.pr-row2{display:flex;gap:12px;margin-top:4px}
.pr-row2>div{flex:1}
.pr-send{width:100%;margin-top:14px;padding:12px}

/* ════════ DISCLAIMER MODAL ════════ */
.modal-bg{position:fixed;inset:0;z-index:9700;background:rgba(0,0,0,.78);display:none;align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(3px)}
.modal-bg.show{display:flex}
.modal{max-width:520px;background:linear-gradient(160deg,var(--surface),var(--surface-l));border:1.5px solid rgba(224,122,43,.3);border-radius:18px;padding:28px;box-shadow:var(--shadow);max-height:88vh;overflow-y:auto}
.modal h3{font-family:'Bebas Neue';font-size:26px;letter-spacing:.04em;color:var(--orange-l);margin-bottom:14px}
.modal p{font-size:13px;line-height:1.65;color:var(--cream);opacity:.85;margin-bottom:10px}
.modal .close-btn{margin-top:12px;width:100%;padding:12px;border:none;border-radius:10px;background:var(--orange);color:#fff;font-family:'Bebas Neue';font-size:18px;letter-spacing:.05em;cursor:pointer}

.disclaimer-trigger{cursor:pointer;text-decoration:underline;color:var(--orange-l)}

@media(max-width:760px){
  .answers{grid-template-columns:1fr}
  .res-inner{flex-direction:column;overflow-y:auto;height:auto;min-height:100%}
  .res-left{flex:none;border-right:none;border-bottom:1px solid rgba(224,122,43,.18);padding-bottom:24px;margin-bottom:20px}
  .res-right{padding-left:0}
  .reveal-img{width:90px;height:68px}
  /* compact audio control so it never sits on top of the Next button */
  .audio-ctl{bottom:10px;right:10px;padding:5px 6px;gap:5px}
  .audio-ctl .vol{display:none}
  .audio-label{display:none}
  .audio-btn{width:40px;height:40px;font-size:15px}
  .q-image{max-height:210px}
  /* leave room on the right of the sticky footer so the floating audio control clears the Next button */
  .g-foot{padding-right:64px}
  .next-btn{font-size:19px;padding:14px 22px}
}

/* ════════ ENTER OVERLAY ════════ */
.enter-overlay{
  position:fixed;inset:0;z-index:9600;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:
    linear-gradient(rgba(20,13,6,.82),rgba(20,13,6,.92)),
    url('img/bg/central-perk.webp') center/cover no-repeat;
  transition:opacity .55s ease;
}
.enter-overlay.hide{opacity:0;pointer-events:none}
.enter-inner{text-align:center;animation:fadeUp .8s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.enter-cup{font-size:64px;line-height:1;filter:drop-shadow(0 4px 14px rgba(0,0,0,.6));animation:steam 3s ease-in-out infinite}
@keyframes steam{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.enter-title{font-family:'Anton',sans-serif;font-size:clamp(56px,12vw,110px);color:var(--orange);letter-spacing:.04em;text-shadow:0 0 26px rgba(224,122,43,.5),0 4px 0 rgba(0,0,0,.4);line-height:.9;margin-top:8px}
.enter-sub{font-family:'Bebas Neue';font-size:18px;letter-spacing:.42em;color:var(--cream);opacity:.75;margin-top:6px}
.enter-btn{
  margin-top:30px;padding:16px 40px;border:none;border-radius:50px;cursor:pointer;
  font-family:'Bebas Neue';font-size:24px;letter-spacing:.06em;color:#fff;background:var(--orange);
  box-shadow:0 6px 0 var(--orange-d),0 12px 30px rgba(0,0,0,.5);
  animation:pulse-btn 2.2s ease-in-out infinite;
}
@keyframes pulse-btn{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.enter-btn:active{transform:scale(.97)}
.enter-hint{margin-top:18px;font-size:12px;color:var(--muted);font-style:italic}

/* ════════ LANGUAGE PICKER ════════ */
.lang-q{font-family:'Bebas Neue';font-size:17px;letter-spacing:.08em;color:var(--cream);opacity:.8;margin:26px 0 16px}
.lang-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.lang-pick{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:20px 30px;border:1.5px solid rgba(224,122,43,.35);border-radius:16px;cursor:pointer;
  background:rgba(243,232,207,.06);color:var(--cream);font-size:38px;line-height:1;
  transition:transform .12s,background .15s,border-color .15s;backdrop-filter:blur(4px);min-width:130px;
}
.lang-pick span{font-family:'Bebas Neue';font-size:18px;letter-spacing:.06em;opacity:.9}
.lang-pick:hover{transform:translateY(-3px);background:rgba(243,232,207,.12);border-color:var(--orange)}
.lang-pick:active{transform:translateY(0)}

/* small flag toggle on home */
.lang-toggle{
  position:absolute;top:16px;right:18px;display:flex;gap:4px;z-index:20;
  background:rgba(0,0,0,.3);border-radius:30px;padding:4px;
}
.lang-btn{
  border:none;background:transparent;cursor:pointer;font-size:18px;
  width:34px;height:30px;border-radius:20px;opacity:.5;transition:opacity .15s,background .15s;
}
.lang-btn:hover{opacity:.85}
.lang-btn.active{opacity:1;background:rgba(224,122,43,.25)}
#home .home-inner{position:relative}

/* ════════ PLAYER BAR ════════ */
.player-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  max-width:520px;margin:0 auto 18px;padding:10px 14px;
  background:rgba(0,0,0,.28);border:1.5px solid rgba(224,122,43,.22);border-radius:14px;
}
.player-id{display:flex;align-items:center;gap:11px;min-width:0}
.player-av{
  width:38px;height:38px;border-radius:50%;flex:0 0 38px;display:flex;align-items:center;justify-content:center;
  font-size:19px;background:linear-gradient(150deg,var(--orange),var(--orange-d));box-shadow:0 3px 8px rgba(0,0,0,.4);
}
.player-meta{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.player-as{font-size:8.5px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-weight:700}
.player-name{font-family:'Bebas Neue';font-size:19px;letter-spacing:.03em;color:var(--cream);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
.player-name.guest{color:var(--muted)}
.player-actions{display:flex;gap:7px}
.pbar-btn{
  border:1.5px solid rgba(224,122,43,.35);background:rgba(224,122,43,.08);color:var(--cream);
  cursor:pointer;font-family:'Libre Franklin';font-weight:700;font-size:11px;letter-spacing:.02em;
  padding:8px 11px;border-radius:9px;transition:background .15s,transform .1s;white-space:nowrap;
}
.pbar-btn:hover{background:rgba(224,122,43,.22)}
.pbar-btn:active{transform:translateY(1px)}
.pbar-btn.lb{border-color:rgba(212,160,42,.5);background:rgba(212,160,42,.12)}
.pbar-btn.lb:hover{background:rgba(212,160,42,.26)}
@media(max-width:480px){.player-bar{flex-direction:column;align-items:stretch}.player-actions{justify-content:center}.player-name{max-width:none}}

/* ════════ GAME POINTS ════════ */
.g-points{
  font-family:ui-monospace,monospace;font-weight:800;color:var(--gold);
  background:rgba(212,160,42,.14);padding:3px 9px;border-radius:8px;font-size:14px;
}
.g-points small{font-size:9px;opacity:.7;font-weight:700}
.g-points.bump{animation:ptbump .4s ease}
@keyframes ptbump{0%{transform:scale(1)}40%{transform:scale(1.28);color:#fff}100%{transform:scale(1)}}

/* ════════ RESULTS POINTS ════════ */
.res-points{margin:6px auto 2px;text-align:center}
.res-points .rp-total{font-family:'Anton','Bebas Neue';font-size:40px;line-height:1;color:var(--gold);letter-spacing:.01em}
.res-points .rp-total small{font-size:15px;color:var(--muted);margin-left:4px;letter-spacing:1px}
.res-points .rp-label{font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:3px}
.res-points .rp-break{display:flex;flex-direction:column;gap:3px;margin-top:8px;font-size:11.5px}
.res-points .rp-row{display:flex;justify-content:space-between;gap:14px;color:rgba(245,236,215,.7)}
.res-points .rp-row.bonus{color:var(--green);font-weight:700}
.res-points .rp-row b{color:var(--cream);font-family:ui-monospace,monospace}
.res-points .rp-record{margin-top:8px;font-weight:800;color:var(--gold);font-size:12px;animation:ptbump .5s ease}

/* ════════ PLAYER MODAL ════════ */
.player-modal-box,.lb-box{max-width:440px;width:100%}
.pm-sub{font-size:12.5px;color:var(--muted)!important;margin-bottom:16px!important;opacity:1!important}
.pm-register{display:flex;gap:8px;margin-bottom:6px}
#pm-input{
  flex:1;min-width:0;padding:12px 14px;border-radius:10px;border:1.5px solid rgba(224,122,43,.35);
  background:rgba(0,0,0,.3);color:var(--cream);font-family:'Libre Franklin';font-size:15px;font-weight:600;
}
#pm-input:focus{outline:none;border-color:var(--orange)}
.pm-go{
  border:none;border-radius:10px;background:var(--orange);color:#fff;cursor:pointer;
  font-family:'Bebas Neue';font-size:17px;letter-spacing:.04em;padding:0 16px;white-space:nowrap;
}
.pm-go:hover{background:var(--orange-l)}
.pm-err{color:#e0594d;font-size:12px;font-weight:600;min-height:16px;margin-bottom:6px}
.pm-existing-wrap{margin:6px 0 14px;border-top:1px solid rgba(224,122,43,.18);padding-top:14px}
.pm-existing-wrap h4{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:10px}
.pm-list{display:flex;flex-direction:column;gap:7px;max-height:230px;overflow-y:auto}
.pm-player{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;cursor:pointer;
  background:rgba(0,0,0,.22);border:1.5px solid transparent;transition:border-color .15s,background .15s;
}
.pm-player:hover{background:rgba(224,122,43,.12);border-color:rgba(224,122,43,.4)}
.pm-player .ppi{width:30px;height:30px;border-radius:50%;flex:0 0 30px;display:flex;align-items:center;justify-content:center;font-size:14px;background:linear-gradient(150deg,var(--orange),var(--orange-d))}
.pm-player .ppn{flex:1;min-width:0}
.pm-player .ppn b{display:block;font-family:'Bebas Neue';font-size:17px;letter-spacing:.02em;color:var(--cream);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-player .ppn span{font-size:10px;color:var(--muted);font-family:ui-monospace,monospace}
.pm-player .ppdel{border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:15px;padding:4px;opacity:.6;border-radius:6px}
.pm-player .ppdel:hover{opacity:1;color:#e0594d;background:rgba(224,89,77,.12)}
.pm-guest{
  width:100%;margin-top:4px;padding:11px;border:1.5px solid rgba(169,140,99,.35);border-radius:10px;
  background:transparent;color:var(--muted);cursor:pointer;font-family:'Libre Franklin';font-weight:700;font-size:13px;
}
.pm-guest:hover{color:var(--cream);border-color:var(--muted)}

/* ════════ LEADERBOARD ════════ */
.lb-list{display:flex;flex-direction:column;gap:6px;max-height:54vh;overflow-y:auto;margin-bottom:6px}
.lb-empty{text-align:center;color:var(--muted);font-size:13px;padding:30px 10px;line-height:1.6}
.lb-row{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;
  background:rgba(0,0,0,.22);border:1.5px solid transparent;
}
.lb-row.me{border-color:rgba(224,122,43,.5);background:rgba(224,122,43,.1)}
.lb-rank{font-family:'Anton','Bebas Neue';font-size:20px;width:30px;text-align:center;color:var(--muted);flex:0 0 30px}
.lb-row.r1 .lb-rank{color:#d4a02a}.lb-row.r2 .lb-rank{color:#cfcfcf}.lb-row.r3 .lb-rank{color:#cd7f32}
.lb-info{flex:1;min-width:0}
.lb-info b{display:block;font-family:'Bebas Neue';font-size:18px;letter-spacing:.02em;color:var(--cream);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-info .lb-you-tag{font-size:9px;background:var(--orange);color:#fff;padding:1px 6px;border-radius:20px;margin-left:6px;letter-spacing:1px;vertical-align:middle}
.lb-info span{font-size:10.5px;color:var(--muted);font-family:ui-monospace,monospace}
.lb-pts{font-family:ui-monospace,monospace;font-weight:800;font-size:17px;color:var(--gold);text-align:right}
.lb-pts small{display:block;font-size:8.5px;color:var(--muted);letter-spacing:1.5px;font-weight:700}