/* Math Dash – Add & Run
   Mobile-first, no external assets. High contrast, responsive.
   Portrait: answers bottom 2x2. Landscape: scene left, panel right.
*/
:root{
  --bg:#0b0f1a;
  --panel:#0f1526;
  --surface:#141c33;
  --text:#e8efff;
  --muted:#9fb3ff;
  --accent:#4dd06c;
  --accent-2:#ffcc33;
  --danger:#ff6b6b;
  --warning:#ffb703;
  --shadow:rgba(0,0,0,.4);
  --btn-h:56px;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{height:100%}
html{color-scheme:dark}
body{
  margin:0;
  background:linear-gradient(180deg,#0b0f1a 0%, #0a1022 60%, #0b0f1a 100%);
  color:var(--text);
  font:500 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  -webkit-tap-highlight-color: transparent;
  overflow:hidden; /* avoid page scroll during play */
}

/* Use dynamic viewport to include mobile browser UI changes */
.app{min-height:100dvh; display:flex; align-items:stretch; justify-content:center}

/* Screens and overlays */
.screen, .overlay{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(5,8,16,.6); backdrop-filter:saturate(110%) blur(4px)}
.screen[hidden], .overlay[hidden]{display:none}
.screen__panel, .overlay__panel{
  background:var(--panel);
  padding:24px;
  border-radius:var(--radius);
  width:min(720px,92vw);
  box-shadow:0 10px 30px var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
}
.screen--active{display:flex}
.title{margin:0 0 8px 0; font-size:clamp(24px,4.5vw,40px)}
.subtitle{margin:.25rem 0 1rem 0; color:var(--muted)}
.howto{margin-top:.5rem}
.howto summary{cursor:pointer}

/* Buttons */
.btn, .icon-btn, .answer{
  appearance:none; border:0; cursor:pointer; color:var(--text);
  background:linear-gradient(180deg, #1b2547, #152040);
  border-radius:12px; box-shadow:0 6px 16px var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .08s ease, box-shadow .12s ease, background .2s ease;
}
.btn{padding:14px 18px; min-height:var(--btn-h); font-weight:700; text-decoration:none; display:inline-flex; align-items:center; gap:6px}
.btn--primary{background:linear-gradient(180deg,#2f7bfd,#2157d9)}
.icon-btn{width:44px; height:44px; display:inline-grid; place-items:center; font-size:20px; text-decoration:none}
.btn:active, .icon-btn:active, .answer:active{transform:translateY(1px); box-shadow:0 4px 12px var(--shadow)}
.start-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px}

/* Game Layout */
.game{display:grid; grid-template-rows:auto 1fr auto; gap:10px; padding:10px; width:100%; height:100dvh; overflow:hidden}
.hud{background:var(--surface); border-radius:var(--radius); padding:10px}
.hud__row{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.problem{font-size:clamp(22px,6vw,34px); font-weight:800; letter-spacing:.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hearts{font-size:clamp(18px,4.5vw,26px)}
.stats{display:flex; gap:8px; align-items:center; color:var(--muted); flex:1 1 auto; min-width:0; flex-wrap:wrap; overflow:hidden}
.stats > span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.badge{background:linear-gradient(180deg,#32d06a,#25a34f); color:#04290f; padding:3px 6px; border-radius:999px; font-weight:800; font-size:12px; white-space:nowrap}
.controls{display:flex; gap:6px; flex:0 0 auto}

.scene-wrap{background:linear-gradient(180deg,#0b1329,#0b1430); border-radius:var(--radius); overflow:hidden; position:relative}
.scene{width:100%; height:100%; display:block}

/* Answers panel */
.answers{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.answer{min-height:var(--btn-h); font-size:clamp(18px,5.2vw,28px); font-weight:800; letter-spacing:.5px}
.answer--correct{outline:2px solid var(--accent)}
.answer--wrong{outline:2px solid var(--danger)}

/* Landscape: scene left, panel right */
@media (orientation: landscape) and (min-width:740px){
  .game{grid-template-columns:1fr min(42vw,520px); grid-template-rows:auto 1fr; grid-template-areas:
    "scene hud"
    "scene answers"; column-gap:10px}
  .hud{grid-area:hud}
  .scene-wrap{grid-area:scene; min-height:min(62vh,580px)}
  .answers{grid-area:answers; grid-template-columns:1fr; align-content:start}
}

/* Portrait defaults */
@media (orientation: portrait){
  /* Fix grid row heights so HUD cannot grow and push content */
  .game{grid-template-rows: 104px 1fr auto}
  /* Lock HUD height in portrait */
  .hud{position:relative; height:104px; overflow:hidden}
  /* Reserve enough space for the answers (2x2) so they don't get pushed off-screen */
  .answers{min-height:calc(var(--btn-h) * 2 + 10px)}
  /* Allow scene to shrink a bit more when HUD grows (e.g., Turbo badge shows) */
  .scene-wrap{min-height:min(36vh,400px)}
}

/* Compact HUD for narrow screens to avoid overflow */
@media (max-width: 480px){
  :root{ --btn-h: 52px }
  .hud{position:relative; height:104px; overflow:hidden}
  .hud__row{row-gap:6px}
  .stats{gap:6px}
  .problem{font-size:clamp(20px,5.5vw,28px)}
  .stats > span{font-size:12px}
  .icon-btn{width:40px; height:40px}
  #turboBadge.badge{font-size:11px; padding:2px 6px; position:absolute; right:56px; top:8px}
  /* Move controls to next line and right-align */
  .hearts{order:1}
  .stats{order:2}
  .controls{order:3; width:100%; justify-content:flex-end}
}

/* Extra narrow phones */
@media (max-width: 360px){
  .hud{max-height:88px}
  .problem{font-size:clamp(18px,5vw,24px)}
  #turboBadge.badge{top:4px; right:52px}
  .scene-wrap{min-height:min(36vh,380px)}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important; animation: none !important; transition:none !important}
}

/* Feedback animations */
.flash{animation:flash .25s ease}
@keyframes flash{from{filter:brightness(1.3)} to{filter:brightness(1)}}
.shake{animation:shake .25s ease}
@keyframes shake{0%{transform:translateX(0)}25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}100%{transform:translateX(0)}}

/* Utilities */
[hidden]{display:none !important}
.visually-hidden{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px)}

/* Accessibility */
.answer:focus-visible, .btn:focus-visible, .icon-btn:focus-visible{outline:3px solid #99ccff; outline-offset:2px}