:root{
  --bg:#07050b;--pink:#ff20c8;--lime:#caff16;--purple:#9b4dff;
  --text:#fff;--muted:#c9bfd0;--panel:rgba(9,6,13,.84);--border:rgba(255,255,255,.12);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Arial,sans-serif}
body{overflow-x:hidden}
button,input{font:inherit}
button{cursor:pointer}
.app{min-height:100vh}
.topbar{position:fixed;z-index:50;top:0;left:0;right:0;height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:rgba(5,3,8,.9);border-bottom:1px solid var(--border);backdrop-filter:blur(14px)}
.brand,.top-actions{display:flex;align-items:center;gap:9px}.brand{font-size:12px;letter-spacing:.05em}.brand-dot{width:9px;height:9px;background:var(--lime);border-radius:50%;box-shadow:0 0 16px var(--lime)}.by-hyper{color:var(--pink);text-transform:none;margin-left:5px}.context-pill{font-size:9px;color:var(--lime);border:1px solid rgba(202,255,22,.26);padding:4px 7px;border-radius:999px}
.mini-btn{border:1px solid rgba(202,255,22,.25);background:rgba(202,255,22,.07);color:#fff;padding:8px 10px;border-radius:10px;font-weight:900;font-size:11px}.mini-btn.ghost{border-color:var(--border);background:rgba(255,255,255,.04)}
.screen{display:none;position:relative;min-height:100vh;padding:82px 24px 26px;overflow:hidden}.screen.active{display:block}
.bg-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(4,2,7,.85),rgba(4,2,7,.36)),linear-gradient(0deg,rgba(4,2,7,.78),transparent 55%)}.shade.strong{background:rgba(4,2,7,.72)}.quiz-shade{background:rgba(4,2,7,.55)}
.kicker{font-size:11px;letter-spacing:.16em;color:var(--lime);font-weight:1000}
.hero-content,.panel,.quiz-shell,.reveal-wrap,.scoreboard-wrap{position:relative;z-index:2}
.hero-content{max-width:760px;padding-top:6vh}.hero-content h1{font-size:clamp(62px,10vw,135px);line-height:.8;letter-spacing:-.055em;margin:12px 0 22px}.hero-content p{font-size:clamp(18px,2vw,27px);font-weight:800;max-width:650px}.microcopy{margin-top:12px;color:var(--muted)}
.cta{border:0;border-radius:14px;padding:14px 20px;background:linear-gradient(135deg,var(--lime),#8bea00);color:#07050b;font-weight:1000;font-size:16px;box-shadow:0 10px 30px rgba(202,255,22,.14)}.cta.alt{background:linear-gradient(135deg,var(--pink),#ff6bdc);color:#fff}
.panel{max-width:1150px;margin:auto;background:rgba(7,4,11,.68);border:1px solid var(--border);border-radius:22px;padding:20px;backdrop-filter:blur(10px)}
.section-head,.quiz-top{display:flex;justify-content:space-between;gap:20px;align-items:flex-end}.section-head h2,.quiz-top h2,.scoreboard-wrap h2{font-size:clamp(32px,4vw,54px);margin:5px 0 4px;letter-spacing:-.04em}.section-head p{margin:0;color:var(--muted)}.host-badge,.score-mini{background:rgba(0,0,0,.48);border:1px solid rgba(202,255,22,.28);padding:10px 14px;border-radius:13px;text-align:center;font-size:10px;color:var(--muted)}.host-badge b,.score-mini b{display:block;color:var(--lime);font-size:22px}
.join-row{display:flex;gap:10px;margin:18px 0}.join-row input{flex:1;min-width:0;background:#100b16;color:#fff;border:1px solid var(--border);padding:13px 14px;border-radius:12px;outline:none}.join-row input:focus{border-color:var(--pink)}
.player-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.player{background:rgba(0,0,0,.48);border:1px solid var(--border);border-radius:13px;padding:10px}.player strong{display:block}.player span{font-size:10px;color:var(--lime);font-weight:900}.lobby-actions{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:18px;color:var(--muted);font-size:12px}
.quiz-shell{max-width:1100px;margin:auto}.quiz-top{margin-bottom:12px}
.music-card{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:center;background:rgba(5,3,8,.86);border:1px solid var(--border);border-radius:20px;padding:16px;backdrop-filter:blur(8px)}
.vinyl{width:132px;height:132px;border-radius:50%;background:repeating-radial-gradient(circle at center,#161016 0 5px,#252027 6px 8px);border:7px solid #070507;position:relative;box-shadow:0 0 0 2px rgba(255,255,255,.08),0 0 30px rgba(255,32,200,.16)}.vinyl:before{content:"GF";position:absolute;inset:34%;display:grid;place-items:center;border-radius:50%;background:var(--pink);color:#07050b;font-weight:1000}.vinyl-hole{position:absolute;width:8px;height:8px;background:#050307;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2}.vinyl.playing{animation:spin 1.3s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.audio-state{font-weight:900;margin-bottom:10px}.progress{height:8px;border-radius:99px;background:#2b2130;overflow:hidden}.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--lime));transition:width .1s linear}.music-actions{display:flex;justify-content:space-between;align-items:center;margin-top:13px}.play-btn{border:1px solid rgba(202,255,22,.34);background:rgba(202,255,22,.09);color:#fff;border-radius:12px;padding:10px 15px;font-weight:1000}.timer{font-size:31px;color:var(--lime);font-weight:1000;min-width:48px;text-align:right}
.answers{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.answer{border:1px solid var(--border);background:rgba(7,4,11,.86);color:#fff;border-radius:14px;padding:15px;text-align:left;font-weight:900;min-height:58px}.answer:hover{border-color:rgba(202,255,22,.55)}.answer.selected{border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,32,200,.12)}.answer:disabled{opacity:.7;cursor:default}.answer.correct{border-color:var(--lime);background:rgba(202,255,22,.1)}.answer.wrong{border-color:#ff476f;background:rgba(255,71,111,.10)}
.feedback{margin-top:10px;background:rgba(0,0,0,.55);border-radius:999px;padding:9px 14px;text-align:center;font-weight:800;font-size:12px}
.reveal-screen.active,.scoreboard-screen.active{display:grid;place-items:center}.reveal-wrap,.scoreboard-wrap{max-width:900px;width:100%;text-align:center}.reveal-icon{font-size:70px}.reveal-wrap h2{font-size:clamp(42px,7vw,92px);line-height:.9;color:var(--lime);margin:9px 0}.reveal-wrap>p{font-size:24px;font-weight:900;margin:0 0 12px}.reveal-joke{font-size:17px;font-weight:800;max-width:700px;margin:0 auto 14px}.points-earned{display:inline-block;background:rgba(0,0,0,.55);border:1px solid rgba(202,255,22,.25);border-radius:13px;padding:10px 15px;margin-bottom:16px}.points-earned b{color:var(--lime);font-size:24px}
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-items:end;margin:20px 0}.podium-card{background:rgba(0,0,0,.56);border:1px solid var(--border);border-radius:15px;padding:14px}.podium-card.first{padding-top:28px;border-color:rgba(202,255,22,.5)}.podium-card .place{font-size:28px}.podium-card strong{display:block;font-size:18px}.podium-card b{color:var(--lime)}
.final-table{max-width:720px;margin:0 auto 18px}.rank-row{display:grid;grid-template-columns:50px 1fr auto;gap:10px;padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left;background:rgba(0,0,0,.35)}.rank-row:first-child{border-radius:12px 12px 0 0}.rank-row:last-child{border-radius:0 0 12px 12px;border-bottom:0}.rank-row b{color:var(--lime)}
@media(max-width:760px){.screen{padding:74px 12px 18px}.brand strong{font-size:10px}.context-pill{display:none}.player-grid{grid-template-columns:1fr 1fr}.section-head,.quiz-top{align-items:flex-start}.music-card{grid-template-columns:94px 1fr}.vinyl{width:84px;height:84px}.answers{grid-template-columns:1fr}.lobby-actions{align-items:stretch;flex-direction:column}.podium{grid-template-columns:1fr}.podium-card.first{order:-1}.top-actions .ghost{display:none}}


/* =========================================================
   v3 FIT DISCORD — quiz must fit WITHOUT mouse-wheel scroll
   Target: Discord desktop Activity, short landscape window.
   ========================================================= */
html, body, .app {
  width: 100%;
  height: 100%;
  min-height: 100%;
}
body {
  overflow: hidden !important;
}

/* Only gameplay screen is locked to the Activity viewport. */
.quiz-screen {
  height: 100vh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 62px 16px 8px !important;
}

.quiz-shell {
  width: min(1120px, 100%) !important;
  height: calc(100vh - 70px) !important;
  max-height: calc(100vh - 70px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-rows: auto auto auto auto !important;
  align-content: start !important;
  gap: 7px !important;
  overflow: hidden !important;
}

.quiz-top {
  margin: 0 !important;
  min-height: 0 !important;
}
.quiz-top h2 {
  margin: 1px 0 0 !important;
  line-height: 1 !important;
}

.music-card {
  min-height: 0 !important;
  padding: 9px 11px !important;
  grid-template-columns: 90px 1fr !important;
  gap: 12px !important;
  border-radius: 15px !important;
}

.vinyl {
  width: 80px !important;
  height: 80px !important;
  border-width: 4px !important;
}

.audio-state {
  margin-bottom: 5px !important;
  font-size: 13px !important;
}
.progress {
  height: 5px !important;
}
.music-actions {
  margin-top: 6px !important;
}
.play-btn {
  padding: 7px 11px !important;
  font-size: 12px !important;
}
.timer {
  font-size: 24px !important;
  line-height: 1 !important;
}

.answers {
  margin-top: 0 !important;
  gap: 6px !important;
}
.answer {
  min-height: 40px !important;
  padding: 9px 11px !important;
  border-radius: 11px !important;
  font-size: 12px !important;
  line-height: 1.12 !important;
}

.feedback {
  margin-top: 0 !important;
  padding: 5px 10px !important;
  font-size: 9px !important;
  line-height: 1.1 !important;
}

/* Discord desktop — screenshot-like height around 560–650 px */
@media (max-height: 700px) {
  .topbar {
    height: 42px !important;
    padding: 0 10px !important;
  }
  .brand {
    font-size: 10px !important;
  }
  .brand-dot {
    width: 8px !important;
    height: 8px !important;
  }
  .context-pill {
    padding: 3px 6px !important;
    font-size: 8px !important;
  }
  .mini-btn {
    padding: 6px 8px !important;
    font-size: 9px !important;
  }

  .quiz-screen {
    padding: 47px 9px 5px !important;
  }
  .quiz-shell {
    height: calc(100vh - 52px) !important;
    max-height: calc(100vh - 52px) !important;
    gap: 4px !important;
  }

  .kicker {
    font-size: 7px !important;
  }
  .quiz-top h2 {
    font-size: 24px !important;
  }
  .score-mini {
    padding: 4px 8px !important;
    border-radius: 9px !important;
  }
  .score-mini span {
    font-size: 7px !important;
  }
  .score-mini b {
    font-size: 17px !important;
  }

  .music-card {
    grid-template-columns: 66px 1fr !important;
    gap: 8px !important;
    padding: 6px 8px !important;
  }
  .vinyl {
    width: 58px !important;
    height: 58px !important;
    border-width: 3px !important;
  }
  .vinyl:before {
    font-size: 11px !important;
  }
  .audio-state {
    font-size: 11px !important;
    margin-bottom: 3px !important;
  }
  .progress {
    height: 4px !important;
  }
  .music-actions {
    margin-top: 3px !important;
  }
  .play-btn {
    padding: 5px 9px !important;
    font-size: 10px !important;
  }
  .timer {
    font-size: 19px !important;
  }

  .answers {
    gap: 4px !important;
  }
  .answer {
    min-height: 34px !important;
    padding: 7px 9px !important;
    font-size: 10.5px !important;
  }
  .feedback {
    padding: 4px 8px !important;
    font-size: 8px !important;
  }
}

/* Very short Activity windows */
@media (max-height: 590px) {
  .topbar {
    height: 36px !important;
  }
  .quiz-screen {
    padding: 40px 7px 3px !important;
  }
  .quiz-shell {
    height: calc(100vh - 43px) !important;
    max-height: calc(100vh - 43px) !important;
    gap: 3px !important;
  }
  .quiz-top h2 {
    font-size: 20px !important;
  }
  .music-card {
    grid-template-columns: 54px 1fr !important;
    padding: 5px 7px !important;
  }
  .vinyl {
    width: 48px !important;
    height: 48px !important;
  }
  .audio-state {
    font-size: 10px !important;
  }
  .answer {
    min-height: 31px !important;
    padding: 6px 8px !important;
    font-size: 10px !important;
  }
  .feedback {
    font-size: 7.5px !important;
  }
}

/* Other screens may scroll if needed; gameplay itself does not. */
.hero-screen,
.lobby-screen,
.reveal-screen,
.scoreboard-screen {
  overflow-y: auto !important;
}


/* v4 — automatic music round */
.auto-play-row{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:12px!important;
}
.auto-label{
  color:var(--lime);
  font-size:12px;
  font-weight:1000;
  letter-spacing:.02em;
}
@media(max-height:700px){
  .auto-label{font-size:10px!important}
}
@media(max-height:590px){
  .auto-label{font-size:9px!important}
}

/* V5 cache-bust diagnostics */
.build-badge{color:#ff20c8!important;border-color:rgba(255,32,200,.35)!important}
.build-badge.loaded{color:#caff16!important;border-color:rgba(202,255,22,.45)!important}