:root{color-scheme:dark;--bg:#0d0f14;--card:#151922;--card2:#1b202b;--text:#f5f7fb;--muted:#9098a8;--line:#2a3140;--accent:#e8ff66;--good:#62e6a7;--warn:#ffd166;--bad:#ff6b6b}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body{display:flex;justify-content:center;overflow-x:hidden;min-height:100dvh}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation}button:disabled{opacity:.55;cursor:not-allowed}.app{width:min(760px,100%);min-height:100dvh;display:flex;flex-direction:column;padding:22px max(18px,env(safe-area-inset-right)) calc(50px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.brand{font-weight:900;letter-spacing:-.04em;font-size:24px}.brand span{color:var(--accent)}.day{font-size:13px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:7px 10px}.progress{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-bottom:24px}.progress i{display:block;height:5px;border-radius:10px;background:var(--line)}.progress i.done{background:var(--accent)}.card{background:linear-gradient(180deg,var(--card),#12161e);border:1px solid var(--line);border-radius:24px;padding:clamp(22px,5vw,42px);box-shadow:0 22px 60px rgba(0,0,0,.25)}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:800;color:var(--muted);margin-bottom:16px}h1{font-size:clamp(32px,7vw,58px);line-height:1.02;letter-spacing:-.055em;margin:0 0 16px}.sub{color:var(--muted);font-size:16px;line-height:1.55;margin:0 0 34px}.visual{height:150px;border:1px solid var(--line);background:var(--card2);border-radius:20px;display:grid;place-items:center;margin:0 0 34px}.emoji{font-size:72px}.guessbox{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-bottom:22px}.guess{min-width:0;max-width:100%;font-size:clamp(44px,11vw,78px);font-weight:900;letter-spacing:-.06em;font-variant-numeric:tabular-nums}.unit{font-size:20px;color:var(--muted);font-weight:700}input[type=range]{width:100%;height:44px;accent-color:var(--accent);margin:0 0 4px;touch-action:pan-y}.rangeLabels{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;margin-bottom:26px}.primary{width:100%;min-height:52px;border:0;border-radius:15px;padding:16px 18px;background:var(--accent);color:#0b0d10;font-weight:900;font-size:16px}.result{display:none;margin-top:26px;border-top:1px solid var(--line);padding-top:26px}.result.show{display:block}.answerRow{display:grid;grid-template-columns:1fr 1fr;gap:12px}.metric{background:var(--card2);border-radius:16px;padding:16px}.metric small{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:7px}.metric strong{font-size:24px}.scoreline{display:flex;align-items:center;justify-content:space-between;margin:18px 0 8px}.bar{height:10px;background:var(--line);border-radius:999px;overflow:hidden}.bar span{display:block;height:100%;width:0;background:var(--good);border-radius:inherit;transition:width .55s}.fact{color:var(--muted);line-height:1.5;font-size:14px;margin:18px 0}.finish{text-align:center}.retention{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 auto 24px;max-width:420px}.retentionBox{background:var(--card2);border-radius:16px;padding:14px}.retentionBox small{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}.retentionBox strong{font-size:18px}.countdown{margin:0 0 22px;color:var(--muted);font-size:14px;line-height:1.5}.countdown strong{display:block;color:var(--text);font-size:20px;margin-top:3px}.bigScore{font-size:clamp(66px,17vw,112px);font-weight:950;letter-spacing:-.07em;color:var(--accent);line-height:1;margin:24px 0 2px}.outof{color:var(--muted);margin-bottom:30px}.tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:25px auto 30px;max-width:380px}.tile{aspect-ratio:1;border-radius:10px;display:grid;place-items:center;color:#101318;font-weight:900}.tile.good{background:var(--good)}.tile.warn{background:var(--warn)}.tile.bad{background:var(--bad)}.secondary{width:100%;min-height:52px;border:1px solid var(--line);border-radius:15px;padding:15px;background:transparent;color:var(--text);font-weight:800;margin-top:10px}.tiny{font-size:12px;color:var(--muted);text-align:center;margin-top:22px}.gameIntro{margin-top:22px;padding:22px 8px 4px;border-top:1px solid var(--line)}.gameIntro h2{margin:0 0 10px;font-size:20px;line-height:1.2;letter-spacing:-.02em}.gameIntro p{margin:0 0 10px;color:var(--muted);font-size:14px;line-height:1.6}.gameIntro strong{color:var(--text)}.siteFooter{margin-top:auto;padding-top:24px;padding:0 8px;text-align:center;color:var(--muted);font-size:12px;line-height:1.55}.siteFooter p{margin:0 0 8px}.siteFooter a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--line)}.siteFooter a:hover{border-color:var(--accent)}.hidden{display:none!important}@media(max-width:480px){.app{padding:15px max(12px,env(safe-area-inset-right)) calc(35px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}.card{border-radius:19px}.answerRow{grid-template-columns:1fr}.visual{height:125px}}@media(max-width:480px){.retention{grid-template-columns:1fr}}@media(max-width:360px){header{gap:10px;margin-bottom:22px}.brand{font-size:21px}.day{font-size:11px;padding:6px 8px}.card{padding:18px}.visual{height:110px;margin-bottom:24px}.emoji{font-size:60px}h1{font-size:30px}.sub{font-size:15px;margin-bottom:24px}.guess{font-size:42px}.unit{font-size:18px}.rangeLabels{font-size:11px}.siteFooter{font-size:11px}}

@media(min-width:900px){
  .app{width:min(840px,100%);padding-top:18px}
  #gameCard{min-height:640px}
  header{margin-bottom:20px}
  .progress{margin-bottom:18px}
  .card{padding:30px 36px}
  .sub{margin-bottom:24px}
  .visual{height:122px;margin-bottom:24px}
  .emoji{font-size:64px}
  .guessbox{margin-bottom:14px}
  .rangeLabels{margin-bottom:18px}
  .result{margin-top:18px;padding-top:18px}
  .metric{padding:14px}
  .scoreline{margin:14px 0 7px}
  .fact{margin:12px 0}
}
@media(min-width:900px) and (max-height:950px){
  .app{padding-top:12px;padding-bottom:28px}
  #gameCard{min-height:560px}
  header{margin-bottom:16px}
  .progress{margin-bottom:14px}
  .card{padding:24px 32px}
  h1{font-size:clamp(32px,5.2vw,52px);margin-bottom:12px}
  .sub{margin-bottom:18px}
  .visual{height:104px;margin-bottom:18px}
  .emoji{font-size:58px}
  .guess{font-size:clamp(44px,8vw,68px)}
  .guessbox{margin-bottom:10px}
  input[type=range]{height:38px}
  .rangeLabels{margin-bottom:14px}
  .result{margin-top:14px;padding-top:14px}
  .metric{padding:12px}
  .metric strong{font-size:22px}
  .scoreline{margin:10px 0 6px}
  .fact{margin:10px 0}
  .primary,.secondary{min-height:48px;padding:13px 16px}
}

@media(min-width:1600px) and (min-height:1100px){
  .app{width:min(960px,100%)}
  #gameCard{min-height:680px}
  .card{padding:38px 44px}
  h1{font-size:58px}
  .visual{height:140px}
  .emoji{font-size:70px}
  .guess{font-size:76px}
}

@media(min-width:481px){
  h1{min-height:2.1em}
  .sub{min-height:1.55em}
}
@media(max-width:480px){
  h1{min-height:3.05em}
  .sub{min-height:2.8em}
}


/* Mobile UX v1: intentional overrides. Desktop above remains the proven sprint design. */
@media(max-width:480px){
  .app{padding:12px max(12px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
  header{margin-bottom:16px}
  .progress{margin-bottom:14px}
  .card{border-radius:19px;padding:20px}
  .questionStage{min-height:150px;display:flex;flex-direction:column}
  .eyebrow{margin-bottom:10px}
  h1{font-size:clamp(29px,8.4vw,36px);line-height:1.04;margin-bottom:10px;min-height:0}
  .questionStage .sub{font-size:14px;line-height:1.45;margin:0;min-height:0}
  .visual{height:68px;margin:10px 0 14px;border-radius:15px}
  .emoji{font-size:42px}
  .guessbox{margin-bottom:10px}
  .guess{font-size:clamp(42px,12vw,56px)}
  .unit{font-size:17px}
  input[type=range]{height:42px}
  .rangeLabels{margin-bottom:14px;font-size:11px}
  .result{margin-top:18px;padding-top:18px}
  #gameCard.revealed .visual,
  #gameCard.revealed .guessbox,
  #gameCard.revealed #slider,
  #gameCard.revealed .rangeLabels{display:none}
  #gameCard.revealed .result{margin-top:8px;padding-top:14px}
  .answerRow{grid-template-columns:1fr 1fr;gap:8px}
  .metric{padding:12px;border-radius:13px;min-width:0}
  .metric strong{display:block;font-size:19px;overflow-wrap:anywhere}
  .scoreline{margin:12px 0 7px}
  .fact{font-size:13px;line-height:1.45;margin:12px 0 14px}
  .gameIntro{display:none}
  .siteFooter{margin-top:auto;padding:18px 4px 0;font-size:11px;line-height:1.4}
  .siteFooter p:first-child{display:none}
  .siteFooter p{margin:0}
  .retention{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px}
  .retentionBox{padding:11px}
  .retentionBox strong{font-size:15px}
  .bigScore{margin-top:14px}
  .outof{margin-bottom:20px}
  .tiles{margin:18px auto 20px}
  .finish .sub{min-height:0;margin-bottom:20px}
  .countdown{margin-bottom:18px}
  .tiny{margin-top:14px}
}
@media(max-width:340px){
  .answerRow,.retention{grid-template-columns:1fr}
}
@media(max-width:360px){
  header{gap:10px}
  .brand{font-size:21px}
  .day{font-size:11px;padding:6px 8px}
  .card{padding:17px}
  .questionStage{min-height:142px}
  h1{font-size:28px}
  .questionStage .sub{font-size:13px}
  .visual{height:62px;margin-top:8px}
  .emoji{font-size:38px}
  .guess{font-size:40px}
  .unit{font-size:16px}
}
@media(max-width:480px) and (max-height:720px){
  .app{padding-top:9px;padding-bottom:calc(18px + env(safe-area-inset-bottom))}
  header{margin-bottom:10px}
  .progress{margin-bottom:10px}
  .card{padding:15px}
  .questionStage{min-height:128px}
  .eyebrow{margin-bottom:7px}
  h1{font-size:26px;margin-bottom:7px}
  .questionStage .sub{font-size:12.5px;line-height:1.35}
  .visual{height:52px;margin:7px 0 10px}
  .emoji{font-size:32px}
  .guessbox{margin-bottom:6px}
  .guess{font-size:38px}
  input[type=range]{height:38px}
  .rangeLabels{margin-bottom:10px}
  .primary,.secondary{min-height:48px;padding:13px 15px}
  .result{margin-top:14px;padding-top:14px}
  .metric{padding:10px}
  .fact{margin:10px 0 12px}
}


/* Long localized questions: protect the mobile Question → Guess → Reveal flow. */
@media(max-width:390px){
  #gameCard.long-question .questionStage{min-height:0}
  #gameCard.long-question h1{font-size:25px;line-height:1.03}
  #gameCard.long-question .visual{display:none}
  #gameCard.revealed.long-question .questionStage .sub{display:none}
}
@media(max-width:360px){
  #gameCard.long-question h1{font-size:23px}
}