:root {
  --bg:#05090b;
  --panel:#0b1216;
  --panel2:#101a20;
  --line:#25333a;
  --text:#f7f9fa;
  --muted:#8f9ca4;
  --green:#7CFF67;
  --pink:#FF4F87;
  --red:#FF4568;
  --yellow:#FFD85A;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#020607;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{display:flex;justify-content:center;background:
radial-gradient(circle at 50% -10%,#16302d 0%,#071014 33%,#020607 75%);
overflow-x:hidden}
.phone{
  width:min(100vw,430px);
  min-height:100svh;
  position:relative;
  background:linear-gradient(180deg,rgba(9,17,21,.97),rgba(3,7,9,.995));
  overflow:hidden;
}
.phone:before{
  content:"";position:absolute;inset:-30% -30% auto;height:50%;
  background:radial-gradient(circle,rgba(124,255,103,.10),transparent 60%);
  pointer-events:none
}
.screen{display:none;min-height:100svh;padding:24px 20px 20px;position:relative;z-index:1}
.screen.active{display:flex;flex-direction:column}
.centered{justify-content:center}
.brand{
  text-align:center;font-size:62px;font-weight:1000;letter-spacing:-4px;line-height:.84;margin:0;
  text-shadow:0 0 32px rgba(124,255,103,.08)
}
.brand .green{color:var(--green)}
.tagline{font-size:20px;line-height:1.2;text-align:center;margin:24px 0 30px;color:#dce4e8;font-weight:750}
.pillrow{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.pill{padding:7px 11px;border-radius:999px;border:1px solid #314047;color:#b9c4ca;font-size:12px;font-weight:800;background:#091116}
.pill.green{color:var(--green);border-color:rgba(124,255,103,.35);background:rgba(124,255,103,.06)}
button{border:0;border-radius:18px;padding:17px 18px;font-size:16px;font-weight:950;cursor:pointer;letter-spacing:.15px}
.primary{width:100%;background:var(--green);color:#061006;box-shadow:0 8px 32px rgba(124,255,103,.18)}
.secondary{width:100%;margin-top:11px;background:#0b1418;color:#f5f7f8;border:1px solid #35454d}
.ghost{background:transparent;color:#829098;margin-top:8px}
.homeFoot{margin-top:28px;text-align:center;color:#627079;font-size:12px}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-top:max(2px,env(safe-area-inset-top));gap:12px}
.roundtag,.scoretag{font-weight:950;font-size:13px;letter-spacing:.8px}
.menuBtn{
  width:auto;
  padding:9px 12px;
  border-radius:12px;
  background:#0b1418;
  color:#dbe4e8;
  border:1px solid #34454d;
  font-size:11px;
  font-weight:950;
  letter-spacing:.8px;
}
.roundtag{color:#c6d0d5}
.scoretag b{color:var(--green);font-size:21px}
.category{margin-top:22px;text-align:center;color:#a7b2b8;font-size:12px;letter-spacing:1.5px;font-weight:950;text-transform:uppercase}
.category .categoryName{color:#a7b2b8}
.category .categoryDot{color:#839098}
.category .difficultyName{color:#f2f5f6;font-weight:1000;text-shadow:0 0 14px rgba(255,255,255,.08)}
.questionWrap{flex:1;display:flex;flex-direction:column;justify-content:center}
.question{
  text-align:center;text-transform:uppercase;font-size:40px;line-height:.98;font-weight:1000;letter-spacing:-1.8px;
  margin:10px 0 18px;min-height:152px;display:flex;flex-direction:column;justify-content:center
}
.question .lead{color:#f7f9fa}
.question .subject{color:var(--green);margin-top:5px}
.lock{
  align-self:center;padding:10px 13px;border-radius:999px;border:1px solid #405059;color:#c8d2d7;
  font-weight:900;font-size:12px;letter-spacing:.7px;background:#0a1216
}
.lock.locked{color:var(--green);border-color:rgba(124,255,103,.55);box-shadow:0 0 20px rgba(124,255,103,.09)}
.timer{font-size:72px;line-height:1;text-align:center;font-weight:1000;margin:24px 0 4px;font-variant-numeric:tabular-nums}
.micLabel{
  text-align:center;
  font-size:15px;
  font-weight:1000;
  color:#cbd4d9;
  letter-spacing:1.2px;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.micLabel.listening{
  color:var(--pink);
  font-size:17px;
  text-shadow:0 0 18px rgba(255,79,135,.28);
  animation:pulseListen 1.1s ease-in-out infinite;
}
@keyframes pulseListen{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.65;transform:scale(1.03)}
}
.answerFallback{margin-top:20px}
.answerFallback input{
  width:100%;background:#091116;color:white;border:1px solid #2d3d44;border-radius:15px;
  padding:14px 15px;font-size:16px;outline:none
}
.answerFallback button{width:100%;margin-top:8px;background:#1b2930;color:#fff;padding:13px}
.tiny{text-align:center;font-size:10px;color:#5f6d75;margin-top:8px}
.watermark{text-align:center;font-size:11px;font-weight:950;letter-spacing:2px;color:#425159;margin-top:auto;padding-top:12px}
.watermark span{color:#708088}
.revealHeader{text-align:center;margin-top:24px;color:#718089;font-size:12px;font-weight:950;letter-spacing:1.7px}
.revealQuestion{text-align:center;font-size:22px;font-weight:900;margin:8px 0 26px;color:#e6ecef}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.answerCard{min-height:146px;background:#0c1519;border:1px solid #34454d;border-radius:22px;padding:18px 14px;display:flex;flex-direction:column;justify-content:center;text-align:center}
.answerCard small{color:#74838b;font-weight:950;letter-spacing:1.4px;margin-bottom:11px}
.answerCard strong{font-size:23px;line-height:1.02;word-break:break-word}
.answerCard.hiddenAI strong{font-size:35px;color:#4c5b63}
.answerCard.revealed{border-color:var(--green);box-shadow:0 0 24px rgba(124,255,103,.08)}
.countdown{font-size:100px;font-weight:1000;text-align:center;line-height:1;margin:30px 0 12px;color:white;text-shadow:0 0 30px rgba(255,255,255,.12)}
.correctionBar{
  display:none;
  margin:14px 0 4px;
  padding:12px;
  border-radius:14px;
  border:1px solid #33444c;
  background:#091116;
  text-align:center;
}
.correctionBar .heard{
  color:#d7e0e4;
  font-size:13px;
  font-weight:900;
  margin-bottom:8px;
}
.correctionBar button{
  padding:10px 14px;
  border-radius:12px;
  background:#17252c;
  color:#fff;
  font-size:13px;
}
.correctionEditor{
  display:none;
  margin-top:10px;
}
.correctionEditor input{
  width:100%;
  background:#050b0e;
  color:white;
  border:1px solid #3a4a52;
  border-radius:12px;
  padding:12px;
  font-size:15px;
}
.correctionEditor .saveFix{
  width:100%;
  margin-top:8px;
  background:var(--green);
  color:#071014;
  font-weight:1000;
}
.resultBig{display:none;text-align:center;font-size:54px;line-height:.92;font-weight:1000;letter-spacing:-2px;margin:28px 0 16px}
.resultBig.safe{display:block;color:var(--green)}
.resultBig.match{display:block;color:var(--red)}
.resultBig.slow{display:block;color:var(--yellow)}
.resultSub{display:none;text-align:center;color:#cdd6da;font-size:14px;font-weight:800;margin-bottom:22px}
.nextBtn{display:none}
.selfMatchBtn{
  display:none;
  width:100%;
  margin:0 0 10px;
  padding:13px 16px;
  border-radius:15px;
  background:transparent;
  color:#b7c3c9;
  border:1px solid #3c4c54;
  font-size:12px;
  font-weight:950;
  letter-spacing:.5px;
}
.selfMatchBtn:hover{border-color:var(--red);color:#ff8fa5}

.pop{animation:pop .35s cubic-bezier(.2,1.6,.4,1)}
.shake{animation:shake .34s ease}
@keyframes pop{0%{transform:scale(.72);opacity:.2}100%{transform:scale(1);opacity:1}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-9px)}50%{transform:translateX(9px)}75%{transform:translateX(-5px)}}
.gameover{justify-content:center;text-align:center}
.skull{font-size:58px}
.gameover h2{font-size:42px;letter-spacing:-1.5px;margin:5px 0 4px}
.bigScore{font-size:102px;font-weight:1000;line-height:.9;color:white;letter-spacing:-4px;margin-top:12px}
.bigLabel{font-size:14px;font-weight:950;letter-spacing:1.2px;color:#bdc8cd;margin:6px 0}
.best{color:var(--green);font-weight:950;margin:14px 0 28px}
.shareCard{
  margin:16px 0 20px;padding:22px 18px;border-radius:24px;border:1px solid #2f4048;
  background:radial-gradient(circle at 50% 0%,rgba(124,255,103,.11),transparent 54%),#081014
}
.shareCard .challengeText{font-size:28px;line-height:1.02;font-weight:1000;margin:7px 0 12px}
.shareCard .challengeText span{color:var(--green)}
.shareCard .mini{font-size:12px;color:#85939a}
.card{background:#0a1216;border:1px solid #2d3b42;border-radius:24px;padding:22px}
.card h2{font-size:32px;text-align:center;margin:0 0 10px}
.card p{color:#aebac0;text-align:center;line-height:1.4}
.nameInput{width:100%;margin:12px 0;background:#071014;border:1px solid #314149;border-radius:15px;padding:14px;color:white;font-size:16px}
.sharebox{margin-top:12px;padding:12px;border-radius:12px;background:#061014;border:1px solid #293840;font-size:11px;color:#9eabb2;word-break:break-all}
.creatorNote{font-size:11px;color:#66747b;text-align:center;margin-top:10px}
@media(max-width:365px){
  .question{font-size:34px}
  .brand{font-size:55px}
  .bigScore{font-size:88px}
}


/* ---------- Desktop / large-screen layout ---------- */
@media (min-width: 768px) {
  body {
    min-height: 100vh;
    align-items: center;
    padding: 28px;
  }

  .phone {
    width: min(92vw, 820px);
    min-height: min(92vh, 900px);
    border: 1px solid #233038;
    border-radius: 34px;
    box-shadow:
      0 30px 90px rgba(0,0,0,.45),
      0 0 60px rgba(124,255,103,.04);
  }

  .screen {
    min-height: min(92vh, 900px);
    padding: 38px 54px 34px;
  }

  .brand {
    font-size: 82px;
    letter-spacing: -5px;
  }

  .tagline {
    font-size: 25px;
    margin: 28px 0 36px;
  }

  .pill {
    font-size: 13px;
    padding: 9px 14px;
  }

  button {
    font-size: 18px;
  }

  .primary,
  .secondary {
    max-width: 520px;
    align-self: center;
  }

  .homeFoot {
    font-size: 13px;
  }

  .topbar {
    margin-bottom: 10px;
  }

  .roundtag,
  .scoretag {
    font-size: 15px;
  }

  .scoretag b {
    font-size: 25px;
  }

  .category {
    font-size: 13px;
    margin-top: 28px;
  }

  .questionWrap {
    max-width: 700px;
    width: 100%;
    align-self: center;
  }

  .question {
    font-size: 58px;
    min-height: 210px;
    letter-spacing: -2.5px;
    margin: 18px 0 24px;
  }

  .lock {
    font-size: 14px;
    padding: 12px 16px;
  }

  .timer {
    font-size: 92px;
    margin: 30px 0 8px;
  }

  .micLabel {
    font-size: 17px;
  }

  .micLabel.listening {
    font-size: 20px;
  }

  .answerFallback {
    max-width: 620px;
    width: 100%;
    align-self: center;
  }

  .answerFallback input {
    font-size: 18px;
    padding: 17px 18px;
  }

  .answerFallback button {
    font-size: 16px;
  }

  .revealHeader,
  .revealQuestion,
  .cards,
  .correctionBar,
  .resultBig,
  .resultSub,
  .nextBtn,
  .selfMatchBtn {
    max-width: 700px;
    width: 100%;
    align-self: center;
  }

  .revealQuestion {
    font-size: 29px;
    margin-bottom: 32px;
  }

  .cards {
    gap: 18px;
  }

  .answerCard {
    min-height: 190px;
    border-radius: 26px;
    padding: 24px 18px;
  }

  .answerCard strong {
    font-size: 34px;
  }

  .resultBig {
    font-size: 72px;
    margin-top: 34px;
  }

  .resultSub {
    font-size: 16px;
  }

  .gameover {
    max-width: 700px;
    width: 100%;
    align-self: center;
  }

  .bigScore {
    font-size: 126px;
  }

  .shareCard {
    max-width: 600px;
    width: 100%;
    align-self: center;
  }

  .shareCard .challengeText {
    font-size: 34px;
  }

  .card {
    max-width: 650px;
    width: 100%;
    align-self: center;
    padding: 30px;
  }

  .card h2 {
    font-size: 40px;
  }

  .nameInput {
    font-size: 18px;
    padding: 16px;
  }
}

@media (min-width: 1200px) {
  .phone {
    width: min(76vw, 900px);
  }

  .question {
    font-size: 64px;
  }
}


.challengeBrand{
  margin-bottom:28px;
}
.challengeBrand .brand{
  font-size:48px;
  letter-spacing:-3px;
}
.challengeBrand .tagline{
  font-size:17px;
  margin:16px 0 0;
}
@media (min-width: 768px){
  .challengeBrand .brand{
    font-size:64px;
  }
  .challengeBrand .tagline{
    font-size:21px;
  }
}


/* HARD desktop scaling patch */
@media (min-width: 768px) {
  body {
    padding: 24px !important;
  }
  .phone {
    width: min(96vw, 1100px) !important;
    min-height: 92vh !important;
    border-radius: 28px !important;
  }
  .screen {
    min-height: 92vh !important;
    padding: 42px 64px 34px !important;
  }
  .questionWrap,
  .revealHeader,
  .revealQuestion,
  .cards,
  .correctionBar,
  .resultBig,
  .resultSub,
  .nextBtn,
  .selfMatchBtn {
    max-width: 860px !important;
    width: 100% !important;
  }
  .question {
    font-size: 72px !important;
    min-height: 250px !important;
  }
  .timer {
    font-size: 108px !important;
  }
  .answerFallback {
    max-width: 760px !important;
  }
  .answerCard {
    min-height: 220px !important;
  }
  .answerCard strong {
    font-size: 40px !important;
  }
  .brand {
    font-size: 94px !important;
  }
}


.challengeChoiceGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
  margin:14px 0 10px;
}
.challengeChoice{
  background:#091216;
  border:1px solid #32434b;
  color:#dce5e9;
  border-radius:15px;
  padding:13px 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  font-size:11px;
}
.challengeChoice strong{
  font-size:23px;
  line-height:1;
}
.challengeChoice span{
  font-size:10px;
  letter-spacing:.8px;
}
.challengeChoice.selected{
  color:#071014;
  background:var(--green);
  border-color:var(--green);
  box-shadow:0 0 20px rgba(124,255,103,.14);
}
.challengeChoice.wide{
  grid-column:1 / -1;
  flex-direction:row;
  justify-content:center;
  gap:10px;
}
.challengeChoice.wide strong{font-size:28px}
.challengeChoiceDescription{
  color:#839199;
  text-align:center;
  font-size:12px;
  line-height:1.35;
  min-height:34px;
  margin-bottom:15px;
}
@media(min-width:768px){
  .challengeChoice{padding:16px 10px}
  .challengeChoice strong{font-size:28px}
  .challengeChoice span{font-size:11px}
  .challengeChoiceDescription{font-size:13px}
}


.leaderboardPanel{
  margin:18px 0;
  padding:14px;
  background:#071014;
  border:1px solid #2d3d44;
  border-radius:16px;
}
.leaderboardTitle{
  font-size:11px;
  font-weight:1000;
  letter-spacing:1.3px;
  color:var(--green);
  margin-bottom:10px;
  text-align:center;
}
.leaderboardList{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.leaderboardRow{
  display:grid;
  grid-template-columns:30px 32px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  padding:9px 10px;
  border-radius:11px;
  background:#0b151a;
  border:1px solid #1f3037;
  font-size:13px;
}
.leaderboardRow.me{
  border-color:rgba(124,255,103,.48);
  background:rgba(124,255,103,.06);
}
.leaderboardRank{
  color:#7e8c93;
  font-weight:950;
}
.leaderboardName{
  font-weight:900;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.leaderboardScore{
  color:#fff;
  font-weight:1000;
}
.leaderboardEmpty{
  text-align:center;
  color:#728087;
  font-size:12px;
  padding:8px;
}



.partyAvatar{
  --partyAvatarHue:130;
  position:relative;
  width:28px;
  height:28px;
  flex:0 0 28px;
  display:inline-block;
  border-radius:50%;
  border:1px solid hsla(var(--partyAvatarHue),92%,66%,.72);
  background:hsla(var(--partyAvatarHue),82%,54%,.12);
  box-shadow:0 0 14px hsla(var(--partyAvatarHue),90%,55%,.14);
}
.partyAvatar::before{
  content:"";
  position:absolute;
  width:8px;
  height:8px;
  left:9px;
  top:5px;
  border-radius:50%;
  background:hsl(var(--partyAvatarHue),88%,70%);
}
.partyAvatar::after{
  content:"";
  position:absolute;
  width:16px;
  height:9px;
  left:5px;
  bottom:4px;
  border-radius:9px 9px 6px 6px;
  background:hsl(var(--partyAvatarHue),88%,70%);
}

.roomCodeInput{
  text-transform:uppercase;
  letter-spacing:5px;
  text-align:center;
  font-weight:1000;
  font-size:22px;
}
.partyShareCard{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  border:1px solid #2c3b42;
  background:#081116;
  border-radius:16px;
  padding:13px 14px;
  margin:14px 0;
}
.partyMiniLabel{
  color:#718088;
  font-size:10px;
  letter-spacing:1.4px;
  font-weight:1000;
  margin-bottom:5px;
}
.partyLink{
  color:#dbe4e8;
  font-size:12px;
  word-break:break-all;
}
.miniAction{
  background:#17252c;
  color:#fff;
  padding:10px 12px;
  border-radius:11px;
  font-size:11px;
}
.partyHostControls,
.partyLiveRound,
.partyRevealPanel{
  max-width:760px;
  width:100%;
  margin:8px auto 0;
}
.partyQuestionPreview{
  padding:20px 16px;
  border-radius:18px;
  border:1px solid #2c3c44;
  background:#0a1419;
  color:#fff;
  text-align:center;
  text-transform:uppercase;
  font-size:27px;
  line-height:1.06;
  font-weight:1000;
}
.compactBtn{
  padding:12px 14px;
  font-size:13px;
}
.partySubmissionCount{
  text-align:center;
  color:#7f8d94;
  font-size:13px;
  font-weight:850;
  margin-top:10px;
}
.partyRevealPanel{
  text-align:center;
}
.hostAnswerBig{
  font-size:52px;
  font-weight:1000;
  color:var(--green);
  text-transform:uppercase;
  margin:10px 0 24px;
  word-break:break-word;
}
.partyCenterPanel{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
  min-height:330px;
}
.partyCenterPanel h2{
  font-size:31px;
  margin:12px 0 4px;
}
.partyCenterPanel p{
  color:#8f9da4;
}
.partyWaitingIcon{
  font-size:54px;
}
.hidden{display:none !important}
@media(min-width:768px){
  .partyQuestionPreview{font-size:40px;padding:26px}
  .hostAnswerBig{font-size:70px}
  .partyShareCard{max-width:760px;width:100%;align-self:center}
}

.partyTimerLabel{
  margin-top:-2px;
  margin-bottom:12px;
  text-align:center;
  color:#6f7e85;
  font-size:10px;
  font-weight:1000;
  letter-spacing:2px;
}
.partyAnswersPanel{
  margin-top:16px;
  border:1px solid #27373f;
  border-radius:16px;
  background:#071015;
  padding:13px;
  text-align:left;
}
.partyAnswersList{
  display:grid;
  gap:8px;
}
.partyAnswerRow{
  display:grid;
  grid-template-columns:32px minmax(82px,.75fr) minmax(0,1.4fr) auto;
  gap:10px;
  align-items:center;
  border:1px solid #223139;
  border-radius:12px;
  background:#0b161b;
  padding:10px 11px;
}
.partyAnswerName{
  min-width:0;
  color:#93a1a8;
  font-size:12px;
  font-weight:900;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.partyAnswerText{
  min-width:0;
  color:#f0f5f7;
  font-size:15px;
  font-weight:1000;
  overflow-wrap:anywhere;
}
.partyAnswerState{
  border-radius:999px;
  padding:5px 8px;
  font-size:9px;
  font-weight:1000;
  letter-spacing:.7px;
  white-space:nowrap;
  color:#9eabb1;
  border:1px solid #34434a;
}
.partyAnswerState.safe{
  color:var(--green);
  border-color:rgba(56,255,150,.36);
}
.partyAnswerState.match{
  color:var(--pink);
  border-color:rgba(255,60,133,.38);
}
.partyAnswerEmpty{
  color:#697980;
  text-align:center;
  font-size:12px;
  padding:8px 4px;
}
@media(max-width:520px){
  .partyAnswerRow{
    grid-template-columns:28px minmax(68px,.7fr) minmax(0,1.25fr) auto;
    gap:7px;
    padding:9px;
  }
  .partyAnswerText{font-size:13px}
  .partyAnswerName{font-size:11px}
  .partyAnswerState{font-size:8px;padding:4px 6px}
}

.hostRoundsLabel{
  margin-top:14px;
}
.hostRoundsPicker{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin:6px 0 14px;
}
.hostRoundsBtn{
  min-height:46px;
  border-radius:12px;
  border:1px solid #2a3a42;
  background:#0a151a;
  color:#8e9ca3;
  font-size:16px;
  font-weight:1000;
}
.hostRoundsBtn.active{
  background:var(--green);
  border-color:var(--green);
  color:#06130c;
}

.partyAnswerActions{
  display:flex;
  gap:6px;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.partyOverrideBtn{
  min-height:30px;
  padding:5px 8px;
  border-radius:9px;
  border:1px solid #33444c;
  background:#101c22;
  color:#aebbc1;
  font-size:9px;
  font-weight:1000;
  letter-spacing:.4px;
  white-space:nowrap;
}
.partyOverrideBtn.activeSafe{
  color:var(--green);
  border-color:rgba(56,255,150,.5);
  background:rgba(56,255,150,.08);
}
.partyOverrideBtn.activeMatch{
  color:var(--pink);
  border-color:rgba(255,60,133,.5);
  background:rgba(255,60,133,.08);
}
.partyOverrideNote{
  color:#66757d;
  font-size:10px;
  line-height:1.35;
  margin-top:8px;
}
.partyAnswerRow.revealMode{
  grid-template-columns:32px minmax(82px,.7fr) minmax(0,1.15fr) auto;
}
@media(max-width:620px){
  .partyAnswerRow.revealMode{
    grid-template-columns:28px minmax(66px,.7fr) minmax(0,1fr);
    align-items:center;
  }
  .partyAnswerRow.revealMode .partyAnswerActions{
    grid-column:2 / -1;
    justify-content:flex-start;
  }
}

.hostRoundsPicker{
  grid-template-columns:repeat(5,1fr);
}
.customRoundsBtn{
  font-size:11px;
  letter-spacing:.4px;
}
.customRoundsWrap{
  margin:-4px 0 14px;
}
.customRoundsInput{
  margin-bottom:5px;
  text-align:center;
  font-weight:1000;
}
@media(max-width:520px){
  .hostRoundsPicker{
    grid-template-columns:repeat(3,1fr);
  }
  .customRoundsBtn{
    grid-column:span 2;
  }
}

.historyHomeBtn{
  margin-top:2px;
}
.historyHeader{
  max-width:760px;
  width:100%;
  margin:18px auto 8px;
  text-align:left;
}
.historyHeader h2{
  margin:0 0 6px;
  font-size:30px;
  line-height:1;
}
.historyHeader p{
  margin:0;
  color:#87969d;
  font-size:13px;
}
.historyModePill{
  display:inline-flex;
  align-items:center;
  min-height:27px;
  margin-bottom:10px;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid #314149;
  color:#91a0a6;
  font-size:9px;
  letter-spacing:1px;
  font-weight:1000;
}
.historyList,
.historyRounds{
  max-width:760px;
  width:100%;
  margin:8px auto 0;
  display:grid;
  gap:10px;
}
.historyEmpty{
  max-width:760px;
  width:100%;
  margin:24px auto;
  padding:24px 14px;
  border:1px dashed #2b3a41;
  border-radius:16px;
  color:#718087;
  text-align:center;
  font-size:13px;
}
.historyCard{
  border:1px solid #27373f;
  background:#091318;
  border-radius:16px;
  padding:14px;
}
.historyCardTop{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:start;
}
.historyCardTitle{
  color:#f0f5f7;
  font-size:15px;
  font-weight:1000;
  line-height:1.15;
}
.historyCardMeta{
  margin-top:4px;
  color:#708087;
  font-size:11px;
}
.historyCardScore{
  color:var(--green);
  font-size:22px;
  font-weight:1000;
  white-space:nowrap;
}
.historyCardStats{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:12px 0;
}
.historyStat{
  padding:5px 8px;
  border-radius:999px;
  border:1px solid #2b3b42;
  color:#8c9ba2;
  font-size:9px;
  font-weight:1000;
  letter-spacing:.4px;
}
.historyStat.bad{
  color:var(--pink);
  border-color:rgba(255,60,133,.35);
}
.historyViewBtn{
  width:100%;
  min-height:42px;
  border-radius:11px;
  border:1px solid #34454d;
  background:#101c22;
  color:#e9f0f2;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.5px;
}
.historyFilters{
  max-width:760px;
  width:100%;
  margin:12px auto 4px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.historyFilter{
  min-height:42px;
  border-radius:11px;
  border:1px solid #2d3d44;
  background:#091318;
  color:#7e8d94;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.6px;
}
.historyFilter.active{
  background:var(--green);
  color:#06130c;
  border-color:var(--green);
}
.historyRound{
  border:1px solid #27373f;
  background:#091318;
  border-radius:16px;
  padding:13px;
}
.historyRound.wrong{
  border-color:rgba(255,60,133,.34);
}
.historyRound.safe{
  border-color:rgba(56,255,150,.20);
}
.historyRoundHead{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:8px;
  align-items:center;
  margin-bottom:10px;
}
.historyRoundNo{
  color:#6f7f86;
  font-size:10px;
  font-weight:1000;
}
.historyRoundQuestion{
  min-width:0;
  color:#eff4f6;
  font-size:14px;
  font-weight:1000;
  line-height:1.15;
}
.historyRoundStatus{
  border-radius:999px;
  padding:5px 8px;
  font-size:9px;
  font-weight:1000;
  letter-spacing:.5px;
  white-space:nowrap;
}
.historyRoundStatus.safe{
  color:var(--green);
  border:1px solid rgba(56,255,150,.35);
}
.historyRoundStatus.match,
.historyRoundStatus.slow{
  color:var(--pink);
  border:1px solid rgba(255,60,133,.40);
}
.historyAnswers{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.historyAnswer{
  border-radius:11px;
  background:#0d191f;
  border:1px solid #23333b;
  padding:9px;
  min-width:0;
}
.historyAnswer small{
  display:block;
  margin-bottom:4px;
  color:#617078;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.8px;
}
.historyAnswer strong{
  display:block;
  color:#e9eff2;
  font-size:12px;
  overflow-wrap:anywhere;
}
@media(max-width:520px){
  .historyAnswers{
    grid-template-columns:1fr;
  }
  .historyCardScore{
    font-size:19px;
  }
  .historyHeader h2{
    font-size:26px;
  }
}


.languageDropdown{
  position:absolute;
  top:14px;
  right:14px;
  z-index:20;
}
.languageCurrentButton{
  min-height:36px;
  padding:6px 10px 6px 11px;
  border-radius:999px;
  border:1px solid #2b3b42;
  background:rgba(9,19,24,.96);
  color:#dbe5e9;
  display:flex;
  align-items:center;
  gap:7px;
  box-shadow:0 7px 22px rgba(0,0,0,.22);
}
.languageCurrentButton:hover{
  border-color:rgba(65,255,122,.58);
}
.languageLabel{
  font-size:8px;
  font-weight:900;
  letter-spacing:.75px;
  color:#ffffff;
}
.languageCurrentButton strong{
  color:var(--green);
  font-size:10px;
  font-weight:1000;
  letter-spacing:.7px;
}
.languageChevron{
  color:#91a1a8;
  font-size:13px;
  line-height:1;
  transform:translateY(-1px);
  transition:transform .16s ease;
}
.languageCurrentButton[aria-expanded="true"] .languageChevron{
  transform:translateY(1px) rotate(180deg);
}
.languageMenu{
  position:absolute;
  top:calc(100% + 7px);
  right:0;
  width:164px;
  padding:6px;
  border-radius:14px;
  border:1px solid #29383e;
  background:rgba(7,16,20,.985);
  box-shadow:0 16px 44px rgba(0,0,0,.42);
  backdrop-filter:blur(12px);
}
.languageMenu.hidden{
  display:none!important;
}
.languageOption{
  width:100%;
  min-height:38px;
  padding:8px 10px;
  border:0;
  border-radius:10px;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:#dbe5e9;
  font-size:11px;
  font-weight:850;
  letter-spacing:.1px;
  text-align:left;
}
.languageOption small{
  color:#73838a;
  font-size:9px;
  font-weight:1000;
  letter-spacing:.7px;
}
.languageOption:hover{
  background:#0d1d21;
}
.languageOption.active{
  background:rgba(65,255,122,.12);
  color:#fff;
}
.languageOption.active small{
  color:var(--green);
}

.playerSharedAnswersPanel{margin-top:18px}
.playerSharedAnswersPanel .partyAnswerRow{
  grid-template-columns:minmax(85px,.75fr) minmax(0,1.35fr) auto;
}
.suddenDeathTag{
  color:var(--pink)!important;
  border-color:rgba(255,60,133,.45)!important;
}
@media(max-width:520px){
  .playerSharedAnswersPanel .partyAnswerRow{
    grid-template-columns:minmax(70px,.7fr) minmax(0,1.2fr) auto;
  }
}

/* V22 — force Solo result to the exact center, mobile and desktop. */
.screen.active.soloGameOver{
  display:flex !important;
  flex-direction:column;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  width:100% !important;
  max-width:none !important;
  align-self:stretch !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.soloGameOver > *{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.soloGameOver .shareCard{
  align-self:center !important;
}

.partyTypingOnly{
  margin:12px 0 7px;
  color:var(--green);
  font-size:10px;
  font-weight:1000;
  letter-spacing:1px;
  text-align:center;
}

.connectionBanner{
  position:fixed;
  top:max(8px,env(safe-area-inset-top));
  left:50%;
  transform:translateX(-50%);
  z-index:9999;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,60,133,.48);
  background:rgba(15,20,24,.96);
  color:var(--pink);
  font-size:9px;
  font-weight:1000;
  letter-spacing:.8px;
  box-shadow:0 6px 22px rgba(0,0,0,.34);
  white-space:nowrap;
}
.connectionBanner.online{
  color:var(--green);
  border-color:rgba(56,255,150,.42);
}
.appToast{
  position:fixed;
  left:50%;
  bottom:max(18px,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:10000;
  width:min(calc(100vw - 28px),420px);
  padding:11px 13px;
  border-radius:13px;
  border:1px solid #314149;
  background:rgba(8,16,20,.97);
  color:#eef4f6;
  font-size:11px;
  font-weight:850;
  text-align:center;
  box-shadow:0 12px 32px rgba(0,0,0,.38);
}
.busyButton{
  opacity:.62 !important;
  pointer-events:none !important;
}

/* V27 — home screen layout polish */
.homeScreenBalanced{
  justify-content:center !important;
  padding-top:max(10px, env(safe-area-inset-top));
  padding-bottom:max(20px, env(safe-area-inset-bottom));
}
.homeScreenBalanced .hero,
.homeScreenBalanced .titleBlock,
.homeScreenBalanced .heroTitle,
.homeScreenBalanced .brandWrap{
  margin-top:0 !important;
}
.homeScreenBalanced .homeActionGroup,
.homeScreenBalanced .homeButtons,
.homeScreenBalanced .menuStack{
  margin-top:12px !important;
}
.homeScreenBalanced .homeFooterCopy{
  margin-top:18px !important;
  max-width:290px;
  margin-left:auto;
  margin-right:auto;
}
@media (min-height:760px){
  .homeScreenBalanced{justify-content:center !important;}
}

/* V28 — home content deliberately lower on screen */
#home.homeScreenBalanced{
  justify-content:center !important;
  padding-top:max(58px, calc(env(safe-area-inset-top) + 34px)) !important;
  padding-bottom:max(20px, env(safe-area-inset-bottom)) !important;
}
#home.homeScreenBalanced .homeFoot{
  margin-top:24px !important;
}
@media (max-height:700px){
  #home.homeScreenBalanced{
    padding-top:max(42px, calc(env(safe-area-inset-top) + 24px)) !important;
  }
}

/* V29 — true home layout: watermark no longer affects centering */
#home.homeScreenBalanced{
  position:relative;
  justify-content:flex-start !important;
  padding-top:max(8px,env(safe-area-inset-top)) !important;
  padding-bottom:max(8px,env(safe-area-inset-bottom)) !important;
}
#home.homeScreenBalanced .homeMain{
  width:100%;
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  transform:translateY(10px);
  padding-bottom:34px;
}
#home.homeScreenBalanced > .watermark{
  position:absolute;
  left:0;
  right:0;
  bottom:max(9px,env(safe-area-inset-bottom));
  margin:0 !important;
  padding:0 !important;
}
html.nativeApp #home.homeScreenBalanced .homeMain{
  transform:translateY(42px);
}
@media (max-height:720px){
  #home.homeScreenBalanced .homeMain{
    transform:translateY(4px);
    padding-bottom:26px;
  }
  html.nativeApp #home.homeScreenBalanced .homeMain{
    transform:translateY(22px);
  }
}


/* V31 — opt-in microphone + account foundation */
.accountHomeBtn{
  position:absolute;top:max(14px,env(safe-area-inset-top));left:16px;z-index:6;
  width:auto;max-width:150px;margin:0;padding:9px 11px;border-radius:999px;
  border:1px solid #2d3d44;background:#0a1216;color:#d7e0e4;font-size:11px;
  font-weight:950;letter-spacing:.7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.accountTopbar{width:100%}
.accountCard{width:100%;max-width:390px;margin:auto;text-align:center;padding:24px 2px}
.accountAvatar{width:76px;height:76px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;background:#101b20;border:1px solid #34454d;font-size:34px}
.accountCard h2{font-size:28px;margin:4px 0 10px}
.accountCard p{color:#91a0a8;line-height:1.45;margin:0 auto 18px;max-width:330px}
.accountDetails{min-height:24px;color:#d7e0e4;font-size:13px;font-weight:800;margin:0 0 16px;word-break:break-word}
.googleAccountBtn{width:100%;background:white;color:#182024;border:0;border-radius:16px;padding:14px 16px;font-weight:950;font-size:14px;letter-spacing:.3px}
.googleAccountBtn:disabled{opacity:.55}
.googleG{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-right:8px;border-radius:50%;border:1px solid #d3d8dc;font-weight:1000}

/* V42 — host reveal mode + Apple account option */
.hostRevealModeLabel{margin-top:18px}
.hostRevealModePicker{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 16px}
.hostRevealModeBtn{
  min-height:62px;border-radius:12px;border:1px solid #2a3a42;background:#0a151a;color:#8e9ca3;
  padding:10px 9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  text-align:center;cursor:pointer;
}
.hostRevealModeBtn strong{font-size:11px;letter-spacing:.45px;color:inherit}
.hostRevealModeBtn span{font-size:9px;line-height:1.25;color:#65757c;font-weight:800}
.hostRevealModeBtn.active{
  background:var(--pink);border-color:var(--pink);color:#1c0710;
  box-shadow:0 7px 22px rgba(255,79,135,.16)
}
.hostRevealModeBtn.active span{color:#4a1428}
@media(max-width:420px){
  .hostRevealModePicker{grid-template-columns:1fr}
  .hostRevealModeBtn{min-height:54px}
}
.appleAccountBtn{
  width:100%;margin-top:10px;background:#fff;color:#080808;border:1px solid #fff;border-radius:16px;
  padding:14px 16px;font-weight:950;font-size:14px;letter-spacing:.3px;
}
.appleAccountBtn:disabled{opacity:.55}
.appleLogo{display:inline-block;margin-right:8px;font-size:20px;line-height:16px;vertical-align:-1px}
.accountSignOutBtn{width:100%;margin-top:10px}
.accountStatus{min-height:38px;margin-top:14px;color:var(--green);font-size:12px;line-height:1.35;font-weight:800}
.accountStatus.error{color:var(--pink)}
.micToggleBtn{
  border:1px solid #405059;background:#0a1216;border-radius:999px;padding:11px 14px;
  width:auto;max-width:100%;margin:0 auto;cursor:pointer;
}
.micToggleBtn.enabled{border-color:rgba(255,79,135,.58);color:var(--pink)}
.micToggleBtn:disabled{opacity:.46;cursor:default}


/* V33 — unified Solo + Challenge history */
.historyTypePill{
  display:inline-flex;
  margin-bottom:6px;
  padding:4px 7px;
  border-radius:999px;
  border:1px solid rgba(255,60,133,.30);
  color:var(--pink);
  font-size:8px;
  font-weight:1000;
  letter-spacing:.7px;
}
.historyTypePill.solo{
  color:var(--green);
  border-color:rgba(56,255,150,.30);
}
.historySharedPanel{
  max-width:760px;
  width:100%;
  margin:22px auto 0;
  padding-top:18px;
  border-top:1px solid #223139;
}
.historySectionTitle{
  color:var(--green);
  font-size:11px;
  font-weight:1000;
  letter-spacing:1.3px;
  text-align:center;
  margin-bottom:7px;
}
.historyLiveHint{
  color:#65757c;
  font-size:10px;
  text-align:center;
  margin-bottom:10px;
}
.historyPlayersTitle{margin-top:22px}
.historySharedAnswers{
  display:grid;
  gap:12px;
}
.historyPlayerBlock{
  border:1px solid #27373f;
  background:#091318;
  border-radius:16px;
  padding:13px;
}
.historyPlayerHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:9px;
}
.historyPlayerHead strong{
  color:#eef4f6;
  font-size:14px;
}
.historyPlayerHead small{
  display:block;
  margin-top:3px;
  color:#718188;
  font-size:10px;
}
.historyYouTag{
  margin-left:5px;
  padding:3px 5px;
  border-radius:999px;
  border:1px solid rgba(56,255,150,.35);
  color:var(--green);
  font-size:7px;
  letter-spacing:.5px;
  vertical-align:middle;
}
.historyPlayerRounds{
  display:grid;
  gap:7px;
}
.historySharedRound{
  border:1px solid #23333b;
  border-radius:11px;
  background:#0c181e;
  padding:9px 10px;
}
.historySharedRound.wrong{border-color:rgba(255,60,133,.28)}
.historySharedRound.safe{border-color:rgba(56,255,150,.18)}
.historySharedQuestion{
  color:#dce5e8;
  font-size:11px;
  font-weight:900;
  line-height:1.25;
  margin-bottom:7px;
}
.historySharedQuestion span{
  color:#65757c;
  margin-right:5px;
}
.historySharedResponse{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.historySharedResponse strong{
  min-width:0;
  color:#fff;
  font-size:12px;
  overflow-wrap:anywhere;
}
.historyPlayerEmpty{
  color:#65757c;
  font-size:11px;
  text-align:center;
  padding:8px 4px;
}
.compactHistoryEmpty{
  margin:8px 0;
  padding:14px 10px;
}


/* V34 — Solo skips and local anti-nonsense validation */
.soloSkipBtn{
  width:100%;
  margin-top:8px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  background:#101b20;
  color:#dce5e8;
  font-size:12px;
  font-weight:1000;
  letter-spacing:.8px;
  cursor:pointer;
}
.soloSkipBtn:not(:disabled){
  border-color:#2b3b42;
  color:#aebac0;
  background:#0c1519;
}
#answerBtn:not(:disabled){
  border:1px solid rgba(124,255,103,.58);
  color:var(--green);
  box-shadow:0 0 18px rgba(124,255,103,.08);
}
.soloSkipBtn:disabled{
  opacity:.45;
  cursor:default;
}
.soloSkipBtn.empty{
  color:#65757c;
  border-color:#233139;
}
.historyStat.skip{
  color:#d5b95a;
}
.historyRound.skip{
  border-color:rgba(213,185,90,.22);
}
.historyRoundStatus.skip{
  color:#d5b95a;
}


/* V35 — mobile-only DON’T apostrophe spacing.
   Desktop (>=768px) is intentionally untouched. */
@media (max-width: 767px){
  #home .brand{
    letter-spacing:-1.5px;
  }
}


/* V37 — phone header alignment: language switch matches GUEST vertically. */
@media (max-width: 767px){
  #home .languageDropdown{
    top:max(14px,env(safe-area-inset-top));
  }
}

/* V38 — home hierarchy + How It Works */
:root{--cyan:#67E8F9}
.homeSoloBtn{margin-top:0}
.homeChallengeBtn{
  width:100%;margin-top:11px;
  background:linear-gradient(135deg,rgba(255,79,135,.18),rgba(255,79,135,.07));
  color:#fff;border:1px solid rgba(255,79,135,.55);
  box-shadow:0 8px 28px rgba(255,79,135,.08)
}
.homePartyGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:11px;width:100%}
.homePartyBtn{
  width:100%;min-width:0;padding:14px 9px 13px;border-radius:17px;
  background:linear-gradient(135deg,rgba(103,232,249,.13),rgba(103,232,249,.045));
  color:var(--cyan);border:1px solid rgba(103,232,249,.46);
  box-shadow:0 8px 28px rgba(103,232,249,.055);font-size:13px;line-height:1.05
}
.homeBtnMini{display:block;color:#79aab3;font-size:8px;letter-spacing:1.2px;margin-bottom:6px;font-weight:1000}
.homeHowBtn{
  width:100%;margin-top:11px;padding:13px 16px;border-radius:16px;
  background:rgba(116,137,148,.045);color:#91a2aa;
  border:1px solid rgba(116,137,148,.25);font-size:13px;letter-spacing:.7px
}
.howIcon{
  display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  border-radius:50%;border:1px solid rgba(145,162,170,.38);margin-right:5px;font-size:12px
}
.historyHomeBtn{font-size:11px;padding:10px 12px;margin-top:4px}

.howScreen{padding-top:max(18px,env(safe-area-inset-top));padding-bottom:max(18px,env(safe-area-inset-bottom))}
.howTopbar{width:100%;margin-bottom:18px}
.howContent{width:100%;max-width:390px;margin:auto;display:flex;flex-direction:column}
.howEyebrow{text-align:center;color:var(--cyan);font-size:10px;font-weight:1000;letter-spacing:1.9px;margin-top:4px}
.howContent h2{text-align:center;font-size:31px;line-height:.95;letter-spacing:-1.1px;margin:9px 0 12px}
.howIntro{text-align:center;color:#aab7bd;font-size:13px;line-height:1.45;margin:0 auto 17px;max-width:355px}
.howModes{display:grid;gap:8px}
.howModeCard{position:relative;border-radius:17px;padding:13px 14px;background:#0a1216;border:1px solid #2d3d44}
.howModeCard.solo{border-color:rgba(124,255,103,.30);background:linear-gradient(135deg,rgba(124,255,103,.07),#0a1216 58%)}
.howModeCard.challenge{border-color:rgba(255,79,135,.30);background:linear-gradient(135deg,rgba(255,79,135,.07),#0a1216 58%)}
.howModeCard.party{border-color:rgba(103,232,249,.30);background:linear-gradient(135deg,rgba(103,232,249,.07),#0a1216 58%)}
.howModeLabel{font-size:10px;font-weight:1000;letter-spacing:1.2px;color:#fff;margin-bottom:4px}
.howModeCard.solo .howModeLabel{color:var(--green)}
.howModeCard.challenge .howModeLabel{color:var(--pink)}
.howModeCard.party .howModeLabel{color:var(--cyan)}
.howModeText{font-size:12px;color:#b5c0c5;line-height:1.35;font-weight:760}
.howStepsTitle{text-align:center;color:#687880;font-size:9px;font-weight:1000;letter-spacing:1.5px;margin:20px 0 9px}
.howSteps{display:grid;gap:8px}
.howStep{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;padding:10px 12px;border:1px solid #283840;background:#081014;border-radius:15px}
.howStepNo{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:#132128;color:var(--green);font-weight:1000;font-size:14px}
.howStep strong{display:block;font-size:11px;letter-spacing:.55px;margin-bottom:2px}
.howStep span{display:block;color:#87969e;font-size:11px;line-height:1.25}
.howGotIt{margin-top:15px}

@media (min-width:768px){
  .homeChallengeBtn,.homeOnlineBtn,.homePartyGrid,.homeHowBtn{max-width:520px;align-self:center}
  .howContent{max-width:560px}
  .howModes{grid-template-columns:repeat(3,1fr)}
  .howModeCard{min-height:112px}
  .howStep{padding:13px 15px}
  .howContent h2{font-size:40px}
  .howIntro{font-size:15px;max-width:520px}
}

@media (max-height:760px) and (max-width:767px){
  #home.homeScreenBalanced .tagline{margin:18px 0 20px}
  #home.homeScreenBalanced .pillrow{margin-bottom:16px}
  #home.homeScreenBalanced .homeMain{padding-bottom:22px}
  .homePartyBtn{padding-top:12px;padding-bottom:11px}
  .homeHowBtn{padding-top:11px;padding-bottom:11px}
}


/* V41 — align native Android home content with the mobile web layout.
   GUEST and EN/NL keep their existing safe-area positions; desktop is untouched. */
@media (max-width: 767px){
  #home.homeScreenBalanced .homeMain,
  html.nativeApp #home.homeScreenBalanced .homeMain{
    transform:translateY(0px);
  }
}
@media (max-width: 767px) and (max-height:720px){
  #home.homeScreenBalanced .homeMain,
  html.nativeApp #home.homeScreenBalanced .homeMain{
    transform:translateY(-6px);
  }
}


/* V47 — compact soundtrack control shown only while menu/lobby music is active. */
.musicToggle{
  position:fixed;
  right:max(14px,env(safe-area-inset-right));
  bottom:max(14px,env(safe-area-inset-bottom));
  z-index:60;
  width:42px;
  height:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid rgba(124,255,103,.38);
  background:rgba(5,11,14,.88);
  color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  font-size:18px;
  line-height:1;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.musicToggle:active{transform:scale(.96)}
@media (min-width:768px){
  .musicToggle{right:22px;bottom:22px;width:46px;height:46px}
}


/* V47 — legal links + exact centered topbar labels. */
.exactCenterTopbar{
  display:grid !important;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  width:100%;
}
.exactCenterTopbar .menuBtn{justify-self:start}
.exactCenterTopbar > :last-child{justify-self:end}

.accountTopbar .roundtag{justify-self:center;text-align:center}

.accountLegalLinks{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  width:100%;
  margin-top:12px;
}
.accountLegalLinks a{
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 8px;
  border-radius:13px;
  border:1px solid #2d3d44;
  background:#091318;
  color:#9dabb2;
  text-decoration:none;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.65px;
}
.accountLegalLinks a:active{
  transform:scale(.98);
  border-color:rgba(124,255,103,.42);
  color:var(--green);
}


/* V48 — native phone home content sits slightly lower; GUEST and EN/NL stay fixed. */
@media (max-width:767px){
  html.nativeApp #home.homeScreenBalanced .homeMain{
    transform:translateY(8px);
  }
}
@media (max-width:767px) and (max-height:720px){
  html.nativeApp #home.homeScreenBalanced .homeMain{
    transform:translateY(3px);
  }
}




/* V48 — Share is discoverable on Home without competing with primary play actions. */
#home.homeScreenBalanced{
  position:relative;
}

.homeShareBtn{
  position:absolute;
  left:12px;
  bottom:max(14px, env(safe-area-inset-bottom));
  z-index:8;
  width:118px;
  min-height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  margin:0;
  border-radius:12px;
  border:1px solid rgba(124,255,103,.20);
  background:rgba(124,255,103,.09);
  color:#b9c8ce;
  font-size:10px;
  font-weight:950;
  letter-spacing:.45px;
  box-shadow:0 8px 22px rgba(0,0,0,.16);
  pointer-events:auto;
  touch-action:manipulation;
}
.homeShareBtn:active{
  color:var(--green);
  border-color:rgba(124,255,103,.42);
  background:rgba(124,255,103,.14);
  transform:scale(.98);
}
#home.homeScreenBalanced > .watermark{
  pointer-events:none;
}
@media (max-width:520px){
  .homeShareBtn{
    left:12px;
    bottom:max(12px, env(safe-area-inset-bottom));
    width:112px;
    min-height:34px;
  }
}

/* V48 — restrained rating prompt shown only after repeated completed games. */
.ratePrompt{
  position:fixed;
  inset:0;
  z-index:120;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:rgba(1,5,7,.76);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.ratePrompt.hidden{display:none}
.ratePromptCard{
  width:min(100%,360px);
  padding:24px 20px 18px;
  border-radius:24px;
  border:1px solid #2d3d44;
  background:linear-gradient(180deg,#0b1418,#05090b);
  box-shadow:0 22px 80px rgba(0,0,0,.5);
  text-align:center;
}
.ratePromptEyebrow{
  margin-bottom:7px;
  color:var(--green);
  font-size:9px;
  font-weight:1000;
  letter-spacing:1.7px;
}
.ratePromptCard h2{
  margin:0 0 8px;
  font-size:24px;
  line-height:1;
}
.ratePromptCard p{
  margin:0 auto 18px;
  max-width:290px;
  color:#9ba9af;
  font-size:12px;
  line-height:1.45;
}
.ratePromptActions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.ratePromptActions button{
  min-height:44px;
  margin:0;
  font-size:11px;
}


/* V48 — first Solo animated walkthrough. */
.soloTutorial{
  position:fixed;
  inset:0;
  z-index:150;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(1,5,7,.84);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.soloTutorial.hidden{display:none}

.soloTutorialCard{
  width:min(100%,390px);
  padding:22px 18px 17px;
  border-radius:24px;
  border:1px solid #2d3d44;
  background:linear-gradient(180deg,#0b1519,#05090b);
  box-shadow:0 24px 90px rgba(0,0,0,.58);
  text-align:center;
  overflow:hidden;
}
.soloTutorialEyebrow{
  color:var(--green);
  font-size:9px;
  font-weight:1000;
  letter-spacing:1.8px;
  margin-bottom:6px;
}
.soloTutorialCard h2{
  margin:0 0 15px;
  font-size:25px;
  line-height:1;
}

.soloTutorialDemo{
  position:relative;
  width:100%;
  height:218px;
  margin:0 auto 12px;
  border-radius:19px;
  border:1px solid #25343b;
  background:linear-gradient(180deg,#081116,#04090c);
  overflow:hidden;
  box-shadow:inset 0 0 28px rgba(0,0,0,.25);
}
.tutorialDemoTop{
  height:37px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 13px;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.tutorialLives{
  font-size:13px;
  transform-origin:left center;
  animation:tutorialLivesGlow 6.6s infinite;
}
.tutorialDemoLabel{
  color:#73838a;
  font-size:8px;
  font-weight:1000;
  letter-spacing:1.3px;
}
.tutorialDemoQuestion{
  max-width:235px;
  margin:17px auto 5px;
  font-size:17px;
  font-weight:1000;
  line-height:1.08;
}
.tutorialDemoLock{
  color:var(--green);
  font-size:7px;
  font-weight:1000;
  letter-spacing:.7px;
}
.tutorialTimer{
  position:absolute;
  top:73px;
  right:16px;
  width:39px;
  height:39px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #33434a;
  background:#091216;
  font-size:18px;
  font-weight:1000;
  animation:tutorialTimerGlow 6.6s infinite;
}
.tutorialInput{
  position:absolute;
  left:18px;
  right:18px;
  bottom:25px;
  height:42px;
  display:flex;
  align-items:center;
  padding:0 14px;
  border-radius:12px;
  border:1px solid #33434a;
  background:#091216;
  text-align:left;
  overflow:hidden;
  animation:tutorialInputGlow 6.6s infinite;
}
.tutorialInput span{
  display:inline-block;
  min-width:44px;
  white-space:nowrap;
  color:#f2f7f8;
  font-size:13px;
  font-weight:850;
  clip-path:inset(0 100% 0 0);
  animation:tutorialType 6.6s steps(3,end) infinite;
}

.tutorialFinger{
  position:absolute;
  z-index:5;
  left:50%;
  top:158px;
  font-size:28px;
  line-height:1;
  filter:drop-shadow(0 5px 8px rgba(0,0,0,.45));
  transform:translate(-50%,-50%);
  animation:tutorialFingerPath 6.6s cubic-bezier(.4,0,.2,1) infinite;
}
.tutorialFinger::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:26px;
  height:26px;
  border:2px solid rgba(124,255,103,.55);
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.25);
  opacity:0;
  animation:tutorialTapPulse 6.6s ease-out infinite;
}

.soloTutorialMessages{
  position:relative;
  min-height:42px;
  margin:0 4px 13px;
}
.soloTutorialMessage{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#a9b6bb;
  font-size:12px;
  line-height:1.4;
  opacity:0;
}
.tutorialMsg1{animation:tutorialMsg1 6.6s infinite}
.tutorialMsg2{animation:tutorialMsg2 6.6s infinite}
.tutorialMsg3{animation:tutorialMsg3 6.6s infinite}

.soloTutorialActions{
  display:block;
}
.soloTutorialActions button{
  width:100%;
  min-height:44px;
  margin:0;
  font-size:10px;
}

@keyframes tutorialFingerPath{
  0%,8%{left:72%;top:190px;transform:translate(-50%,-50%) scale(.92)}
  18%,28%{left:47%;top:186px;transform:translate(-50%,-50%) scale(.92)}
  32%,38%{left:47%;top:186px;transform:translate(-50%,-50%) scale(.78)}
  42%{left:47%;top:186px;transform:translate(-50%,-50%) scale(.92)}
  50%,60%{left:84%;top:116px;transform:translate(-50%,-50%) scale(.92)}
  64%,70%{left:84%;top:116px;transform:translate(-50%,-50%) scale(.78)}
  74%{left:84%;top:116px;transform:translate(-50%,-50%) scale(.92)}
  82%,92%{left:17%;top:54px;transform:translate(-50%,-50%) scale(.92)}
  96%,100%{left:17%;top:54px;transform:translate(-50%,-50%) scale(.78)}
}
@keyframes tutorialTapPulse{
  0%,28%,38%,60%,70%,92%,100%{opacity:0;transform:translate(-50%,-50%) scale(.25)}
  32%,64%,96%{opacity:.8;transform:translate(-50%,-50%) scale(1)}
  36%,68%,99%{opacity:0;transform:translate(-50%,-50%) scale(1.55)}
}
@keyframes tutorialType{
  0%,18%{clip-path:inset(0 100% 0 0)}
  25%,100%{clip-path:inset(0 0 0 0)}
}
@keyframes tutorialInputGlow{
  0%,8%,43%,100%{border-color:#33434a;box-shadow:none}
  18%,38%{border-color:rgba(124,255,103,.6);box-shadow:0 0 0 3px rgba(124,255,103,.06)}
}
@keyframes tutorialTimerGlow{
  0%,44%,75%,100%{border-color:#33434a;box-shadow:none;color:#fff}
  50%,70%{border-color:rgba(124,255,103,.62);box-shadow:0 0 18px rgba(124,255,103,.13);color:var(--green)}
}
@keyframes tutorialLivesGlow{
  0%,76%,100%{filter:none;transform:scale(1)}
  82%,96%{filter:drop-shadow(0 0 7px rgba(255,93,115,.45));transform:scale(1.08)}
}
@keyframes tutorialMsg1{
  0%,3%{opacity:0}
  7%,29%{opacity:1}
  33%,100%{opacity:0}
}
@keyframes tutorialMsg2{
  0%,32%{opacity:0}
  36%,62%{opacity:1}
  66%,100%{opacity:0}
}
@keyframes tutorialMsg3{
  0%,65%{opacity:0}
  69%,96%{opacity:1}
  100%{opacity:0}
}
@media (max-height:700px){
  .soloTutorialCard{padding-top:17px;padding-bottom:14px}
  .soloTutorialDemo{height:190px}
  .tutorialInput{bottom:18px}
  .soloTutorialCard h2{margin-bottom:10px}
}

/* V49 — polished secondary actions on Home. */
.homeShareBtn{
  position:static;
  left:auto;
  bottom:auto;
  z-index:auto;
  width:auto;
  min-width:146px;
  min-height:0;
  display:block;
  margin:8px auto 0;
  padding:8px 16px;
  border-radius:999px;
  background:rgba(116,137,148,.035);
  color:#f7f9fa;
  border:1px solid rgba(116,137,148,.24);
  box-shadow:none;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.72px;
}
.homeShareBtn:active{
  transform:scale(.97);
  border-color:rgba(145,162,170,.44);
  background:rgba(116,137,148,.065);
  color:#f7f9fa;
}
.homeHowBtn,
.homeHowBtn .howIcon{
  color:#f7f9fa !important;
}
.historyHomeBtn{
  display:block;
  margin:5px auto 0;
}


/* V49 — lower only the centered Home content; keep GUEST and EN/NL fixed. */
@media (max-width:767px){
  html.nativeApp #home.homeScreenBalanced .homeMain{
    transform:translateY(24px);
  }
}
@media (max-width:767px) and (max-height:720px){
  html.nativeApp #home.homeScreenBalanced .homeMain{
    transform:translateY(14px);
  }
}

.accountLegalLinks .accountDeleteLink{
  grid-column:1 / -1;
  color:#d9b2ba;
  border-color:rgba(255,113,133,.24);
  background:rgba(255,113,133,.045);
}


/* V51 — Host custom question controls. */
.hostQuestionActions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:8px;
}
.hostQuestionActions .compactBtn{
  width:100%;
  margin:0;
}
.hostCustomQuestionPanel{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  margin-top:9px;
}
.hostCustomQuestionPanel.hidden{display:none}
.hostCustomQuestionPanel .nameInput{
  min-width:0;
  margin:0;
}
.hostUseCustomQuestionBtn{
  min-height:44px;
  margin:0;
  white-space:nowrap;
}
@media(max-width:420px){
  .hostQuestionActions{
    grid-template-columns:1fr 1fr;
    gap:6px;
  }
  .hostQuestionActions .compactBtn{
    padding-left:8px;
    padding-right:8px;
    font-size:9px;
  }
  .hostCustomQuestionPanel{
    grid-template-columns:1fr;
  }
  .hostUseCustomQuestionBtn{
    width:100%;
  }
}


/* V54 TEST — Online Duel */
.homeOnlineBtn{
  width:100%;
  min-height:48px;
  margin:11px 0 0;
  border:1px solid rgba(124,255,103,.45);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(124,255,103,.13),rgba(124,255,103,.065));
  color:var(--green);
  font-weight:1000;
  letter-spacing:.8px;
  box-shadow:0 10px 26px rgba(35,255,92,.07);
}
.homeOnlineBtn span{
  display:inline-block;
  margin-left:7px;
  padding:3px 6px;
  border-radius:999px;
  background:var(--green);
  color:#07100a;
  font-size:8px;
  vertical-align:2px;
}

.onlineScreen{
  padding-bottom:58px;
  overflow-y:auto;
}
.onlineCard{
  width:min(100%,520px);
  margin:20px auto 0;
  padding:22px 18px;
  border:1px solid #24343b;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(12,20,24,.98),rgba(5,9,11,.98));
  box-shadow:0 22px 70px rgba(0,0,0,.34);
}
.onlineSetupCard{
  margin-top:58px;
  text-align:center;
}
.onlineEyebrow{
  color:var(--green);
  font-size:10px;
  font-weight:1000;
  letter-spacing:1.7px;
  text-align:center;
}
.onlineCard h2{
  margin:10px 0 12px;
  font-size:34px;
  line-height:.96;
  text-align:center;
}
.onlineCard h2 span{color:var(--green)}
.onlineCard p{
  max-width:390px;
  margin:0 auto 20px;
  color:#9eabb1;
  font-size:12px;
  line-height:1.5;
  text-align:center;
}
.onlineLabel{
  display:block;
  margin:18px 0 7px;
  color:#829098;
  font-size:9px;
  font-weight:1000;
  letter-spacing:1.3px;
  text-align:left;
}
.onlineRulesMini{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
  margin:10px 0 14px;
}
.onlineRulesMini span{
  padding:7px 5px;
  border:1px solid #25353c;
  border-radius:10px;
  color:#a8b5bb;
  font-size:9px;
  font-weight:900;
  letter-spacing:.45px;
}
.onlineTestNote{
  margin-top:12px;
  color:#66767d;
  font-size:9px;
  line-height:1.35;
}
.onlineTopbar{
  grid-template-columns:auto minmax(0,1fr) auto;
}
.onlineScoreWrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:8px;
  min-width:0;
}
.onlineScoreName{
  overflow:hidden;
  color:#89989f;
  font-size:8px;
  font-weight:900;
  letter-spacing:.5px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.onlineScoreName:first-child{text-align:right}
.onlineScoreName:last-child{text-align:left}
.onlineScore{
  display:flex;
  gap:7px;
  align-items:center;
  color:#fff;
  font-size:19px;
  font-weight:1000;
}
.onlineScore span:first-child{color:var(--green)}
.onlineScore b{color:#536169}
.onlineWaitingPanel{
  margin-top:110px;
  text-align:center;
}
.onlinePulse{
  width:58px;
  height:58px;
  margin:0 auto 18px;
  border:2px solid rgba(124,255,103,.24);
  border-top-color:var(--green);
  border-radius:50%;
  animation:onlineSpin .9s linear infinite;
  box-shadow:0 0 24px rgba(124,255,103,.13);
}
@keyframes onlineSpin{to{transform:rotate(360deg)}}
.onlineTimer{
  width:76px;
  height:76px;
  margin:11px auto 15px;
  display:grid;
  place-items:center;
  border:3px solid rgba(124,255,103,.62);
  border-radius:50%;
  color:#fff;
  font-size:34px;
  font-weight:1000;
  box-shadow:0 0 28px rgba(124,255,103,.12), inset 0 0 18px rgba(124,255,103,.05);
}
.onlineQuestion{
  min-height:76px;
  margin:0 auto 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:27px;
  font-weight:1000;
  line-height:1.03;
  text-align:center;
}
.onlineAnswerInput{
  width:100%;
  min-height:52px;
  margin:0 0 9px;
  padding:0 14px;
  border:1px solid #33454e;
  border-radius:13px;
  outline:none;
  background:#081014;
  color:#fff;
  font-size:16px;
  font-weight:800;
}
.onlineAnswerInput:focus{
  border-color:rgba(124,255,103,.65);
  box-shadow:0 0 0 3px rgba(124,255,103,.07);
}
.onlineAnswerInput:disabled{opacity:.5}
.onlineValidationMessage{
  margin-top:10px;
  padding:9px 10px;
  border:1px solid rgba(255,113,133,.3);
  border-radius:10px;
  background:rgba(255,113,133,.06);
  color:#ff899b;
  font-size:11px;
  font-weight:800;
  text-align:center;
}
.onlineSuggestion{
  margin-top:11px;
  padding:13px;
  border:1px solid rgba(124,255,103,.28);
  border-radius:13px;
  background:rgba(124,255,103,.055);
  text-align:center;
}
.onlineSuggestion>div:first-child{
  color:#829098;
  font-size:9px;
  font-weight:1000;
  letter-spacing:1.3px;
}
.onlineSuggestion strong{
  display:block;
  margin:5px 0 10px;
  color:var(--green);
  font-size:20px;
}
.onlineSuggestionActions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
}
.onlineSuggestionActions button{margin:0}
.onlineLockedIcon{
  margin-top:15px;
  font-size:38px;
  text-align:center;
}
#onlineLockedPanel{
  margin-top:90px;
  text-align:center;
}
#onlineLockedPanel h2{
  color:var(--green);
  overflow-wrap:anywhere;
}
.onlineMiniTimer{
  margin-top:18px;
  color:#65747b;
  font-size:10px;
  font-weight:900;
  letter-spacing:1px;
}
.onlineMiniTimer strong{
  margin-left:6px;
  color:var(--green);
  font-size:18px;
}
#onlineRevealPanel{
  margin-top:32px;
}
.onlineRevealQuestion{
  margin:8px 0 12px;
  color:#fff;
  font-size:19px;
  font-weight:1000;
  text-align:center;
}
.onlineAiAnswer{
  margin:0 auto 12px;
  padding:12px;
  border:1px solid rgba(124,255,103,.32);
  border-radius:14px;
  background:rgba(124,255,103,.05);
  text-align:center;
}
.onlineAiAnswer small{
  display:block;
  color:#7f8e95;
  font-size:8px;
  font-weight:1000;
  letter-spacing:1.2px;
}
.onlineAiAnswer strong{
  display:block;
  margin-top:3px;
  color:var(--green);
  font-size:23px;
}
.onlineVersusAnswers{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}
.onlineResultCard{
  min-width:0;
  padding:13px 10px;
  border:1px solid #293941;
  border-radius:14px;
  background:#071015;
  text-align:center;
}
.onlineResultCard small{
  display:block;
  overflow:hidden;
  color:#78878e;
  font-size:8px;
  font-weight:1000;
  letter-spacing:1px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.onlineResultCard strong{
  display:block;
  min-height:36px;
  margin:5px 0;
  overflow-wrap:anywhere;
  color:#fff;
  font-size:16px;
}
.onlineResultCard span{
  display:inline-block;
  padding:4px 7px;
  border-radius:999px;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.5px;
}
.onlineResultCard.safe{
  border-color:rgba(124,255,103,.36);
}
.onlineResultCard.safe span{
  background:rgba(124,255,103,.1);
  color:var(--green);
}
.onlineResultCard.bad{
  border-color:rgba(255,113,133,.32);
}
.onlineResultCard.bad span{
  background:rgba(255,113,133,.1);
  color:#ff7185;
}
.onlineRevealHint{
  margin-top:12px;
  color:#6f7d84;
  font-size:9px;
  text-align:center;
}
.onlineNextRoundText{
  margin-top:11px;
  color:#a8b5bb;
  font-size:10px;
  font-weight:900;
  letter-spacing:1px;
  text-align:center;
}
#onlineGameOverPanel{
  margin-top:75px;
  text-align:center;
}
.onlineFinalScore{
  margin:12px 0 18px;
  color:var(--green);
  font-size:44px;
  font-weight:1000;
  letter-spacing:4px;
}
@media(max-width:520px){
  .onlineCard{margin-left:auto;margin-right:auto;padding:19px 14px}
  .onlineSetupCard{margin-top:42px}
  .onlineQuestion{font-size:24px}
  .onlineTopbar{gap:6px}
  .onlineScoreName{font-size:7px}
  .onlineScore{font-size:16px}
  .onlineVersusAnswers{gap:6px}
  .onlineResultCard{padding:11px 7px}
  .onlineResultCard strong{font-size:14px}
}

/* V59 — Challenge a Friend setup sits slightly lower on phones. */
@media (max-width: 767px){
  #createChallenge.active > .card{
    margin-top:22px;
  }
}
@media (max-width: 767px) and (max-height:700px){
  #createChallenge.active > .card{
    margin-top:10px;
  }
}


/* V60 — experimental cosmic home background for testing. */
#home.homeScreenBalanced{
  isolation:isolate;
  background:
    radial-gradient(circle at 18% 14%, rgba(80,140,255,.16) 0%, rgba(80,140,255,0) 26%),
    radial-gradient(circle at 82% 12%, rgba(183,95,255,.14) 0%, rgba(183,95,255,0) 28%),
    radial-gradient(circle at 22% 84%, rgba(31,213,255,.10) 0%, rgba(31,213,255,0) 26%),
    radial-gradient(circle at 85% 76%, rgba(124,255,103,.10) 0%, rgba(124,255,103,0) 24%),
    linear-gradient(180deg,#030812 0%,#040910 44%,#020508 100%);
}
#home.homeScreenBalanced::before,
#home.homeScreenBalanced::after{
  content:"";
  position:absolute;
  inset:-18%;
  pointer-events:none;
  z-index:0;
  filter:blur(42px);
  opacity:.95;
  mix-blend-mode:screen;
}
#home.homeScreenBalanced::before{
  background:
    radial-gradient(circle at 20% 35%, rgba(76,111,255,.26) 0%, rgba(76,111,255,.10) 14%, rgba(76,111,255,0) 30%),
    radial-gradient(circle at 76% 24%, rgba(182,74,255,.22) 0%, rgba(182,74,255,.08) 15%, rgba(182,74,255,0) 32%),
    radial-gradient(circle at 56% 68%, rgba(0,229,255,.14) 0%, rgba(0,229,255,.05) 14%, rgba(0,229,255,0) 28%);
  animation:cosmicDriftA 16s ease-in-out infinite alternate;
}
#home.homeScreenBalanced::after{
  background:
    radial-gradient(circle at 70% 62%, rgba(124,255,103,.15) 0%, rgba(124,255,103,.06) 13%, rgba(124,255,103,0) 28%),
    radial-gradient(circle at 32% 72%, rgba(255,87,162,.13) 0%, rgba(255,87,162,.05) 13%, rgba(255,87,162,0) 28%),
    radial-gradient(circle at 50% 18%, rgba(0,182,255,.10) 0%, rgba(0,182,255,.03) 12%, rgba(0,182,255,0) 24%);
  animation:cosmicDriftB 19s ease-in-out infinite alternate;
}
#home.homeScreenBalanced .homeMain{
  position:relative;
  z-index:2;
}
#home.homeScreenBalanced > .watermark,
#home.homeScreenBalanced .accountHomeBtn,
#home.homeScreenBalanced .languageDropdown,
#home.homeScreenBalanced .homeShareBtn{
  z-index:2;
}
@keyframes cosmicDriftA{
  0%{transform:translate3d(-2%, -1%, 0) scale(1);}
  50%{transform:translate3d(2%, 1.5%, 0) scale(1.04);}
  100%{transform:translate3d(1%, -2%, 0) scale(1.07);}
}
@keyframes cosmicDriftB{
  0%{transform:translate3d(2%, 1%, 0) scale(1.02);}
  50%{transform:translate3d(-1.5%, -2%, 0) scale(1.06);}
  100%{transform:translate3d(-2%, 2%, 0) scale(1.03);}
}


/* V62 — mobile home header spacing + compact language control. */
@media (max-width:767px){
  #home.homeScreenBalanced{
    overflow-y:auto;
    overflow-x:hidden;
  }
  #home.homeScreenBalanced .accountHomeBtn{
    top:max(14px,env(safe-area-inset-top));
    left:16px;
    min-height:36px;
    padding:8px 10px;
  }
  #home.homeScreenBalanced .languageDropdown{
    position:absolute;
    top:max(14px,env(safe-area-inset-top));
    right:14px;
  }
  #home .languageCurrentButton{
    min-height:36px;
    padding:5px 8px 5px 9px;
    gap:5px;
  }
  #home .languageLabel{
    font-size:7px;
    letter-spacing:.55px;
    color:#ffffff;
  }
  #home .languageCurrentButton strong{
    font-size:9px;
    letter-spacing:.55px;
  }
  #home .languageChevron{
    font-size:11px;
  }
  #home.homeScreenBalanced .homeMain,
  html.nativeApp #home.homeScreenBalanced .homeMain{
    flex:0 0 auto;
    min-height:auto;
    justify-content:flex-start;
    transform:none !important;
    padding-top:max(86px,calc(env(safe-area-inset-top) + 72px));
    padding-bottom:max(64px,calc(env(safe-area-inset-bottom) + 54px));
  }
}
@media (max-width:380px){
  #home .languageLabel{display:none;}
  #home .languageCurrentButton{padding-left:10px;padding-right:9px;}
}


/* V64 — unified cosmic visual language across the app.
   Home stays vivid; setup/support screens are softer; active gameplay is deliberately subdued. */

/* Secondary/setup screens: same universe as Home, at lower intensity. */
#onlineSetup,
#howItWorks,
#account,
#challengeHistory,
#challengeHistoryDetail,
#hostSetup,
#joinParty,
#createChallenge,
#challengeIntro,
#gameover,
#challengeReady,
#challengeResult{
  isolation:isolate;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 14% 12%, rgba(72,127,255,.10) 0%, rgba(72,127,255,0) 27%),
    radial-gradient(circle at 86% 16%, rgba(176,75,255,.085) 0%, rgba(176,75,255,0) 29%),
    radial-gradient(circle at 18% 82%, rgba(0,205,245,.06) 0%, rgba(0,205,245,0) 25%),
    radial-gradient(circle at 84% 78%, rgba(124,255,103,.055) 0%, rgba(124,255,103,0) 24%),
    linear-gradient(180deg,#03080f 0%,#04090d 48%,#020507 100%);
}
#onlineSetup::before,
#howItWorks::before,
#account::before,
#challengeHistory::before,
#challengeHistoryDetail::before,
#hostSetup::before,
#joinParty::before,
#createChallenge::before,
#challengeIntro::before,
#gameover::before,
#challengeReady::before,
#challengeResult::before{
  content:"";
  position:absolute;
  inset:-16%;
  z-index:0;
  pointer-events:none;
  filter:blur(54px);
  opacity:.72;
  mix-blend-mode:screen;
  background:
    radial-gradient(circle at 24% 30%, rgba(76,111,255,.13) 0%, rgba(76,111,255,.045) 15%, rgba(76,111,255,0) 32%),
    radial-gradient(circle at 78% 34%, rgba(180,74,255,.105) 0%, rgba(180,74,255,.038) 15%, rgba(180,74,255,0) 32%),
    radial-gradient(circle at 52% 72%, rgba(0,222,255,.075) 0%, rgba(0,222,255,.025) 14%, rgba(0,222,255,0) 30%);
  animation:cosmicSecondaryDrift 22s ease-in-out infinite alternate;
}

/* Gameplay screens: keep the cosmic identity, but make the play area calm and high-contrast. */
#game,
#reveal,
#onlineDuel,
#hostParty,
#playerParty{
  isolation:isolate;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 10% 10%, rgba(76,111,255,.055) 0%, rgba(76,111,255,0) 29%),
    radial-gradient(circle at 90% 18%, rgba(180,74,255,.045) 0%, rgba(180,74,255,0) 30%),
    radial-gradient(circle at 78% 88%, rgba(124,255,103,.032) 0%, rgba(124,255,103,0) 27%),
    linear-gradient(180deg,#02070c 0%,#03070a 52%,#010405 100%);
}
#game::before,
#reveal::before,
#onlineDuel::before,
#hostParty::before,
#playerParty::before{
  content:"";
  position:absolute;
  inset:-18%;
  z-index:0;
  pointer-events:none;
  filter:blur(62px);
  opacity:.48;
  mix-blend-mode:screen;
  background:
    radial-gradient(circle at 24% 28%, rgba(80,119,255,.09) 0%, rgba(80,119,255,.025) 16%, rgba(80,119,255,0) 34%),
    radial-gradient(circle at 80% 40%, rgba(183,77,255,.07) 0%, rgba(183,77,255,.022) 15%, rgba(183,77,255,0) 33%),
    radial-gradient(circle at 52% 82%, rgba(0,210,246,.045) 0%, rgba(0,210,246,.015) 14%, rgba(0,210,246,0) 30%);
  animation:cosmicGameplayDrift 28s ease-in-out infinite alternate;
}

/* Keep actual UI above the decorative glow layers. */
#onlineSetup > *,
#howItWorks > *,
#account > *,
#challengeHistory > *,
#challengeHistoryDetail > *,
#hostSetup > *,
#joinParty > *,
#createChallenge > *,
#challengeIntro > *,
#gameover > *,
#challengeReady > *,
#challengeResult > *,
#game > *,
#reveal > *,
#onlineDuel > *,
#hostParty > *,
#playerParty > *{
  position:relative;
  z-index:1;
}

@keyframes cosmicSecondaryDrift{
  0%{transform:translate3d(-1.2%,-.6%,0) scale(1);}
  50%{transform:translate3d(1.4%,1.1%,0) scale(1.035);}
  100%{transform:translate3d(.6%,-1.2%,0) scale(1.055);}
}
@keyframes cosmicGameplayDrift{
  0%{transform:translate3d(-.7%,-.4%,0) scale(1);}
  50%{transform:translate3d(.8%,.6%,0) scale(1.025);}
  100%{transform:translate3d(.4%,-.8%,0) scale(1.035);}
}

@media (prefers-reduced-motion:reduce){
  #onlineSetup::before,
  #howItWorks::before,
  #account::before,
  #challengeHistory::before,
  #challengeHistoryDetail::before,
  #hostSetup::before,
  #joinParty::before,
  #createChallenge::before,
  #challengeIntro::before,
  #gameover::before,
  #challengeReady::before,
  #challengeResult::before,
  #game::before,
  #reveal::before,
  #onlineDuel::before,
  #hostParty::before,
  #playerParty::before{
    animation:none;
  }
}


/* V65 — fix mobile home header interaction + cleaner language menu. */
@media (max-width:767px){
  #home.homeScreenBalanced .accountHomeBtn{
    z-index:34;
    min-height:42px;
    padding:9px 14px;
    touch-action:manipulation;
  }
  #home.homeScreenBalanced .languageDropdown{
    z-index:35;
    pointer-events:auto;
    touch-action:manipulation;
  }
  #home .languageCurrentButton{
    min-height:42px;
    padding:6px 11px 6px 12px;
    gap:7px;
    touch-action:manipulation;
  }
  #home .languageMenu{
    top:calc(100% + 8px);
    width:154px;
    padding:7px;
    border-color:#314047;
    background:#081116;
    box-shadow:0 18px 38px rgba(0,0,0,.5);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  #home .languageOption{
    min-height:34px;
    padding:8px 11px;
  }
  #home .languageOption.active{
    background:rgba(65,255,122,.18);
  }
  #home.homeScreenBalanced .homeMain,
  html.nativeApp #home.homeScreenBalanced .homeMain{
    padding-top:max(80px,calc(env(safe-area-inset-top) + 66px));
    padding-bottom:max(60px,calc(env(safe-area-inset-bottom) + 50px));
  }
}


/* V70 — native full-pill language selector; no custom tap-handler stack. */
#home .languageDropdown{
  z-index:80 !important;
}
#home .languageCurrentButton{
  position:relative;
  width:118px;
  min-width:118px;
  min-height:42px;
  justify-content:space-between;
  pointer-events:auto !important;
}
#home .languageCurrentButton > .languageLabel,
#home .languageCurrentButton > #languageCode,
#home .languageCurrentButton > .languageChevron{
  pointer-events:none;
}
#home .languageNativeSelect{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  border:0;
  opacity:0;
  cursor:pointer;
  z-index:3;
  pointer-events:auto;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
@media (max-width:767px){
  #home .languageCurrentButton{
    width:120px;
    min-width:120px;
    min-height:44px;
    padding:6px 11px 6px 12px;
  }
}


/* V71 — preserve the original header appearance; make the full visible pills clickable. */
#home .languageDropdown{
  z-index:90 !important;
  pointer-events:auto !important;
}
#home .languageCurrentButton{
  width:auto !important;
  min-width:0 !important;
  min-height:42px !important;
  padding:6px 11px 6px 12px !important;
  gap:7px !important;
  justify-content:flex-start !important;
  box-sizing:border-box;
  pointer-events:auto !important;
  touch-action:manipulation;
}
#home .languageNativeSelect{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  opacity:0 !important;
  z-index:99 !important;
  pointer-events:auto !important;
  touch-action:manipulation;
}
#home.homeScreenBalanced #accountHomeBtn{
  z-index:91 !important;
  pointer-events:auto !important;
  touch-action:manipulation;
  position:absolute;
  isolation:isolate;
  cursor:pointer;
}
#home.homeScreenBalanced #accountHomeBtn::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  z-index:5;
  pointer-events:auto;
}