:root{--bg:#08080D;--surface:#0D0D14;--surface-2:#12121B;--text:#F5F5F7;--muted:#71717A;--border:#272733;--accent:#8B5CF6;--accent-2:#22D3EE;--good:#22C55E;--bad:#EF4444;--shadow:0 20px 50px rgba(0,0,0,.35);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body[data-theme="light"]{--bg:#f5f7fb;--surface:#fff;--surface-2:#edf2f8;--text:#172033;--muted:#667085;--border:rgba(23,32,51,.12);--accent:#356ff5;--accent-2:#7657e8;--good:#138a50;--bad:#d73d50;--shadow:0 18px 50px rgba(33,46,76,.12)}
body[data-theme="neon"]{--bg:#080b13;--surface:#101326;--surface-2:#171a33;--text:#f8f9ff;--muted:#a8add1;--border:rgba(142,112,255,.22);--accent:#7cf6ff;--accent-2:#b66cff;--good:#57f5a1;--bad:#ff668d;--shadow:0 18px 55px rgba(0,0,0,.35)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}body{overflow-x:hidden}.game-app{min-height:100dvh;background:radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 34%),var(--bg)}
button,a{font:inherit}.game-header{height:68px;display:grid;grid-template-columns:42px 1fr 42px;align-items:center;gap:10px;padding:10px max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left));border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(18px);position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:10px;min-width:0}.brand-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 8px 25px color-mix(in srgb,var(--accent) 25%,transparent)}.brand strong,.brand small{display:block}.brand strong{font-size:.84rem}.brand small{font-size:.62rem;color:var(--muted);margin-top:2px}.icon-button{width:40px;height:40px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);color:var(--text);display:grid;place-items:center;text-decoration:none;cursor:pointer}.icon-button:active{transform:scale(.94)}
.game-main{width:min(1080px,100%);min-height:calc(100dvh - 68px);margin:auto;padding:clamp(18px,4vw,40px) clamp(12px,4vw,28px) calc(28px + env(safe-area-inset-bottom))}.screen{min-height:calc(100dvh - 130px)}[hidden]{display:none!important}.screen-modes{display:flex;flex-direction:column;justify-content:center}.intro{max-width:760px;margin:0 auto 24px;text-align:center}.eyebrow{display:inline-block;font-size:.63rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:9px}.intro h1{margin:0;font-size:clamp(2rem,7vw,4.5rem);line-height:.96;letter-spacing:-.06em}.intro h1 span{color:var(--accent-2)}.intro p{margin:13px auto 0;max-width:650px;color:var(--muted);font-size:clamp(.84rem,2vw,1rem);line-height:1.55}.mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:min(900px,100%);margin:auto}.mode-card{appearance:none;text-align:left;border:1px solid var(--border);border-radius:20px;padding:18px;background:linear-gradient(145deg,var(--surface),var(--surface-2));color:var(--text);box-shadow:var(--shadow);cursor:pointer;transition:transform .18s ease,border-color .18s ease}.mode-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 55%,var(--border))}.mode-card:active{transform:scale(.98)}.mode-icon{font-size:1.55rem}.mode-card strong,.mode-card small,.mode-card em{display:block}.mode-card strong{font-size:1rem;margin-top:12px}.mode-card small{color:var(--accent);font-weight:800;margin-top:4px}.mode-card em{font-style:normal;color:var(--muted);font-size:.72rem;line-height:1.45;margin-top:8px}.mode-best{display:inline-block;margin-top:12px;padding:5px 8px;border-radius:999px;background:var(--surface-2);font-size:.62rem;color:var(--muted)}.mode-best b{color:var(--text)}.quick-note{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 18px;color:var(--muted);font-size:.65rem;margin-top:18px}
.screen-play{display:flex;flex-direction:column;max-width:780px;margin:auto}.hud{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px}.mode-mini{display:flex;align-items:center;gap:9px;min-width:0}.mode-mini>span{font-size:1.25rem}.mode-mini strong,.mode-mini small{display:block}.mode-mini strong{font-size:.78rem}.mode-mini small{font-size:.6rem;color:var(--muted);margin-top:2px}.timer,.score-box{min-width:78px;text-align:center;padding:8px 10px;border:1px solid var(--border);border-radius:13px;background:var(--surface)}.timer small,.score-box small{display:block;color:var(--muted);font-size:.53rem;letter-spacing:.1em;font-weight:800}.timer strong,.score-box strong{display:block;font-variant-numeric:tabular-nums;font-size:1rem;margin-top:2px}.timer.warning{border-color:color-mix(in srgb,#ffb347 65%,var(--border));animation:pulse 1s ease infinite}.timer.critical{border-color:var(--bad);color:var(--bad)}.time-track{height:5px;background:var(--surface-2);border-radius:99px;overflow:hidden;margin:12px 0 18px}.time-track span{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));transform-origin:left center}.challenge{position:relative;flex:1;min-height:480px;border:1px solid var(--border);border-radius:26px;background:linear-gradient(145deg,var(--surface),var(--surface-2));box-shadow:var(--shadow);padding:clamp(18px,4vw,34px);display:flex;flex-direction:column;justify-content:center;overflow:hidden}.question-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:18px}.question{text-align:center;font-size:clamp(1.65rem,7vw,3.4rem);line-height:1.25;font-weight:900;letter-spacing:-.035em;min-height:110px;display:grid;place-items:center}.question strong{color:var(--accent)}.shape-row{display:block;font-size:clamp(1.2rem,5vw,2rem);letter-spacing:.15em;margin-top:12px}.answer-area{width:min(500px,100%);margin:20px auto 0}.number-answer{display:flex;gap:8px}.number-input{width:100%;height:58px;border:2px solid var(--border);border-radius:15px;background:var(--bg);color:var(--text);text-align:center;font-size:1.55rem;font-weight:900;outline:none}.number-input:focus{border-color:var(--accent)}.submit-number{height:58px;padding:0 18px;border:0;border-radius:15px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-weight:900;cursor:pointer}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:9px}.key{height:52px;border:1px solid var(--border);border-radius:13px;background:var(--surface);color:var(--text);font-size:1rem;font-weight:850;cursor:pointer}.key:active,.choice:active{transform:scale(.96)}.key-wide{grid-column:span 2}.choices{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.choice{min-height:62px;border:1px solid var(--border);border-radius:15px;background:var(--bg);color:var(--text);font-weight:900;font-size:1rem;cursor:pointer}.choice:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--border))}.feedback{height:34px;text-align:center;font-size:1rem;font-weight:950;margin-top:12px}.feedback.correct{color:var(--good);animation:feedbackIn .18s ease}.feedback.incorrect{color:var(--bad);animation:feedbackIn .18s ease}.feedback.milestone{color:var(--accent);animation:milestone .35s ease}.challenge.answer-correct{animation:correctFlash .2s ease}.challenge.answer-incorrect{animation:wrongFlash .2s ease}.play-footer{display:flex;justify-content:space-between;color:var(--muted);font-size:.68rem;font-weight:850;padding:12px 3px}.play-footer #streak{color:var(--text)}
.screen-results{display:grid;place-items:center}.result-card{width:min(620px,100%);text-align:center;border:1px solid var(--border);border-radius:28px;padding:30px 18px;background:linear-gradient(145deg,var(--surface),var(--surface-2));box-shadow:var(--shadow)}.result-emoji{font-size:3rem;margin-bottom:8px}.result-card h2{font-size:clamp(1.6rem,5vw,2.4rem);margin:0 0 5px}.final-score{font-size:clamp(3.2rem,12vw,6rem);line-height:1;font-weight:950;letter-spacing:-.07em;margin:10px 0 24px}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.result-grid div{padding:14px 8px;border:1px solid var(--border);border-radius:15px;background:var(--bg)}.result-grid strong,.result-grid span{display:block}.result-grid strong{font-size:1.3rem}.result-grid span{font-size:.62rem;color:var(--muted);margin-top:3px}.best-banner{display:inline-block;margin:18px 0 0;padding:8px 13px;border-radius:999px;background:color-mix(in srgb,var(--good) 13%,transparent);color:var(--good);font-size:.72rem;font-weight:950}.result-actions{display:grid;gap:9px;margin-top:22px}.primary-button,.secondary-button{min-height:52px;border-radius:15px;display:grid;place-items:center;text-decoration:none;cursor:pointer;font-weight:900}.primary-button{border:0;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff}.secondary-button{border:1px solid var(--border);background:var(--surface);color:var(--text)}
.start-overlay{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px)}.start-card{text-align:center}.start-card span,.start-card strong,.start-card small,.start-card b{display:block}.start-card span{font-size:2.2rem}.start-card strong{font-size:1.1rem;margin-top:8px}.start-card small{color:var(--muted);font-size:.6rem;letter-spacing:.15em;margin-top:5px}.start-card b{font-size:clamp(5rem,25vw,9rem);line-height:.9;margin-top:10px;animation:countIn .42s ease}.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:120}.confetti i{position:absolute;top:-12px;width:7px;height:13px;border-radius:2px;background:var(--accent);animation:fall 1.8s ease-out forwards}.confetti i:nth-child(3n){background:var(--accent-2)}.confetti i:nth-child(4n){background:var(--good)}
@keyframes pulse{50%{transform:scale(1.03)}}@keyframes feedbackIn{from{opacity:0;transform:translateY(4px) scale(.96)}to{opacity:1;transform:none}}@keyframes milestone{50%{transform:scale(1.16)}}@keyframes correctFlash{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--good) 18%,transparent)}}@keyframes wrongFlash{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--bad) 16%,transparent)}}@keyframes countIn{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:none}}@keyframes fall{to{transform:translate3d(var(--x),110vh,0) rotate(600deg);opacity:0}}
@media (max-width:720px){.mode-grid{grid-template-columns:1fr}.mode-card{padding:15px}.screen-modes{justify-content:flex-start;padding-top:8px}.intro{margin-bottom:17px}.quick-note{font-size:.6rem}.screen-play{min-height:calc(100dvh - 110px)}.challenge{min-height:0;flex:1;padding:18px}.question{min-height:130px}.hud{grid-template-columns:1fr auto auto}.timer,.score-box{min-width:68px}.mode-mini strong{font-size:.7rem}.mode-mini small{font-size:.55rem}.number-answer{display:grid;grid-template-columns:1fr}.submit-number{height:50px}.number-input{height:50px}.key{height:48px}.choices{gap:8px}.choice{min-height:58px}.result-grid strong{font-size:1.15rem}}
@media (max-width:380px){.game-header{height:62px}.game-main{padding-top:12px}.brand small{display:none}.hud{gap:6px}.timer,.score-box{min-width:62px;padding:7px 6px}.challenge{border-radius:20px}.question{font-size:1.45rem}.key{height:45px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}




/* CSE report and code-question refinements */
code{font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;font-size:.82em;color:var(--accent-2);white-space:pre-line}
.question code{display:block;text-align:left;width:min(680px,100%);margin:auto;padding:14px 16px;border:1px solid var(--border);border-radius:14px;background:var(--bg);line-height:1.65;font-size:clamp(.72rem,2.2vw,.95rem);overflow:auto}
.result-card-wide{width:min(1120px,100%);text-align:left}
.result-card-wide .result-emoji,.result-card-wide>.eyebrow,.result-card-wide>h2,.result-card-wide>.final-score{text-align:center;display:block}
.report-head{display:flex;align-items:end;justify-content:space-between;gap:15px;margin:28px 0 10px;padding-top:18px;border-top:1px solid var(--border)}
.report-head strong,.report-head small{display:block}.report-head small{color:var(--muted);font-size:.72rem;margin-top:4px}.report-head>span{color:var(--muted);font-size:.68rem;font-weight:800;white-space:nowrap}
.report-wrap{overflow:auto;border:1px solid var(--border);border-radius:16px;background:var(--bg);max-height:52vh}
.report-table{width:100%;border-collapse:collapse;min-width:820px;font-size:.72rem}.report-table th,.report-table td{padding:11px 10px;border-bottom:1px solid var(--border);vertical-align:top;text-align:left}.report-table th{position:sticky;top:0;background:var(--surface-2);color:var(--muted);font-size:.6rem;text-transform:uppercase;letter-spacing:.06em;z-index:1}.report-table tr:last-child td{border-bottom:0}.report-question{min-width:270px;line-height:1.5}.report-question strong{color:var(--accent)}.result-pill{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:.62rem;font-weight:900;white-space:nowrap}.result-pill.ok{background:color-mix(in srgb,var(--good) 13%,transparent);color:var(--good)}.result-pill.bad{background:color-mix(in srgb,var(--bad) 13%,transparent);color:var(--bad)}
@media (max-width:720px){.result-card-wide{text-align:left}.report-head{align-items:flex-start;flex-direction:column;gap:5px}.report-wrap{max-height:48vh}.report-table{min-width:760px}.question code{padding:11px 12px}.challenge{overflow:hidden}}

/* Familiar custom keypad layout: sequential number rows plus answer controls. */
.keypad {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.key {
  min-width: 0;
  height: 52px;
  display: grid;
  place-items: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

.key-action {
  font-weight: 950;
}

.key-space {
  font-size: .86rem;
  letter-spacing: .01em;
}

@media (max-width: 720px) {
  .keypad { gap: 7px; }
  .key { height: 50px; }
}

@media (max-width: 380px) {
  .keypad { gap: 6px; }
  .key { height: 46px; }
  .key-space { font-size: .78rem; }
}

/* Student-friendly answer controls */
.choice-hint {
  text-align: center;
  color: var(--muted);
  font-size: .62rem;
  font-weight: 750;
  margin-top: 9px;
  letter-spacing: .01em;
}
.choice {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 12px;
  text-align: left;
  line-height: 1.25;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.choice-key {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--accent);
  font-size: .72rem;
  font-weight: 950;
}
.choice:hover .choice-key { background: color-mix(in srgb,var(--accent) 12%,var(--surface-2)); }
.number-input::placeholder { color: var(--muted); opacity: .7; font-size: .82rem; font-weight: 750; }
.number-input[readonly] { cursor: default; user-select: none; -webkit-user-select: none; }
.keypad.text-keypad .key-space { min-width: 0; }
@media (max-width:720px) {
  .choices { grid-template-columns: 1fr 1fr; }
  .choice { min-height: 56px; font-size: .92rem; }
  .choice-key { width: 26px; height: 26px; flex-basis: 26px; }
  .choice-hint { font-size: .58rem; }
}
@media (max-width:420px) {
  .choices { grid-template-columns: 1fr; }
  .choice { min-height: 52px; }
  .number-input::placeholder { font-size: .76rem; }
}


/* Responsive result page: keep the full report readable without viewport overflow. */
.screen-results{
  min-height:calc(100dvh - 68px);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:clamp(4px,2vw,16px) 0;
  overflow:visible;
}
.result-card-wide{
  width:100%;
  max-width:1120px;
  min-width:0;
  margin:0 auto;
  padding:clamp(20px,4vw,30px) clamp(12px,3vw,24px);
  overflow:hidden;
}
.result-card-wide *{min-width:0}
.final-score{overflow-wrap:anywhere}
.result-grid{width:100%}
.report-head{min-width:0}
.report-wrap{
  width:100%;
  max-width:100%;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.report-table{min-width:760px}
.result-actions{width:100%}

/* The keypad always keeps the same physical layout. Unneeded keys are disabled,
   not removed, so the Clear key never jumps to another position. */
.keypad.fixed-keypad{grid-template-columns:repeat(3,minmax(0,1fr));}
.key.is-disabled{
  opacity:.38;
  cursor:not-allowed;
}

@media (max-width:720px){
  .screen-results{
    min-height:0;
    padding:4px 0 14px;
  }
  .result-card-wide{
    border-radius:22px;
    padding:20px 12px 16px;
  }
  .result-card-wide .result-emoji{font-size:2.35rem}
  .result-card-wide h2{font-size:clamp(1.35rem,6vw,1.8rem);line-height:1.2}
  .final-score{
    font-size:clamp(2.8rem,18vw,5rem);
    margin:8px 0 18px;
  }
  .result-grid{gap:6px}
  .result-grid div{padding:11px 5px}
  .result-grid strong{font-size:1.05rem}
  .report-head{margin-top:20px;padding-top:14px}
  .report-wrap{max-height:none;overflow-x:auto}
  .report-table{min-width:720px;font-size:.68rem}
  .report-table th,.report-table td{padding:9px 8px}
  .result-actions{margin-top:16px;gap:8px}
  .primary-button,.secondary-button{min-height:48px}
}

@media (max-width:420px){
  .game-main{padding-left:8px;padding-right:8px}
  .result-card-wide{padding-left:10px;padding-right:10px}
  .result-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .result-grid span{font-size:.56rem}
  .report-table{min-width:680px}
}

@media (max-width:340px){
  .result-grid strong{font-size:.95rem}
  .result-grid div{padding:9px 3px}
  .result-card-wide{border-radius:18px}
}