/* Mango Type — styles. Tokens from docs/design-guidelines.md */
:root {
  --bg-cream:#FFF6E3; --bg-sky:#BFE9FF; --bg-sky-deep:#7FD1F5;
  --surface:#FFFFFF; --surface-sunk:#FDEBC7;
  --mango-yellow:#FFC532; --mango-orange:#FF8A2B; --mango-deep:#F26419; --mango-blush:#FF6F91;
  --leaf-green:#4FB477; --leaf-deep:#2E8B57; --sky-blue:#35A7FF;
  --correct-green:#34C759; --wrong-coral:#FF7A6B; --wrong-deep:#E8503A; --star-gold:#FFD84D;
  --ink:#3A2A18; --ink-soft:#7A6A55; --line:#E7D6B8; --outline:#2B1E12; --locked-grey:#C9BFAF; --white:#fff;
  --accent-boss:#FF5D5D; --accent-rain:#35A7FF; --accent-balloon:#B980FF;
  --shadow-soft:0 6px 0 rgba(43,30,18,.12); --shadow-pop:0 10px 24px rgba(242,100,25,.28);
  --ease-pop:cubic-bezier(.34,1.56,.64,1); --ease-out:cubic-bezier(.16,1,.3,1); --ease-soft:cubic-bezier(.4,0,.2,1);
  --font-display:"Baloo 2","Trebuchet MS",system-ui,sans-serif;
  --font-body:"Nunito",system-ui,-apple-system,sans-serif;
  --fs-hero:clamp(2.75rem,8vw,4.5rem); --fs-h1:clamp(2rem,5vw,3rem); --fs-h2:1.75rem;
  --fs-body:1.25rem; --fs-ui:1.125rem; --fs-hud-num:2rem;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font-body); color:var(--ink); background:var(--bg-cream);
  overflow:hidden; -webkit-font-smoothing:antialiased; user-select:none;
}
h1,h2,h3{font-family:var(--font-display);line-height:1.15}

/* Screens */
.screen{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;padding:16px}
.screen.active{display:flex;animation:screen-in .3s var(--ease-out)}
@keyframes screen-in{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}

/* Buttons */
.btn{
  font-family:var(--font-display);font-weight:800;font-size:var(--fs-ui);color:var(--ink);
  background:var(--surface);border:3px solid var(--outline);border-radius:18px;
  padding:14px 26px;min-height:64px;min-width:64px;cursor:pointer;
  box-shadow:var(--shadow-soft);transition:transform .12s var(--ease-pop),box-shadow .16s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.94) translateY(2px);box-shadow:0 2px 0 rgba(43,30,18,.12)}
.btn:focus-visible{outline:3px solid var(--sky-blue);outline-offset:4px}
.btn-primary{background:var(--mango-orange);color:var(--white);box-shadow:var(--shadow-pop)}
.btn-ghost{background:var(--surface)}
.btn-jumbo{font-size:clamp(1.4rem,4vw,2rem);padding:20px 44px;border-radius:24px}

/* Mute button (global) */
.mute-btn{
  position:fixed;top:14px;right:14px;z-index:50;width:64px;height:64px;font-size:1.8rem;
  border:3px solid var(--outline);border-radius:50%;background:var(--surface);cursor:pointer;
  box-shadow:var(--shadow-soft);transition:transform .12s var(--ease-pop)}
.mute-btn:hover{transform:scale(1.08)}
.mute-btn:active{transform:scale(.9)}
.mute-btn.is-muted{background:var(--line);filter:grayscale(1)}

/* Loading */
.loading-box{text-align:center}
.loading-mango{font-size:5rem;animation:bob 1s var(--ease-pop) infinite alternate}
.loading-text{font-family:var(--font-display);font-size:var(--fs-h2);margin-top:12px;color:var(--ink-soft)}
@keyframes bob{to{transform:translateY(-16px) rotate(-6deg)}}

/* Home */
.home-inner{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.hero-title{font-size:var(--fs-hero);font-weight:800;color:var(--mango-orange);text-shadow:0 4px 0 var(--mango-deep),0 6px 0 rgba(43,30,18,.15);letter-spacing:.02em}
.hero-title span{color:var(--leaf-green);text-shadow:0 4px 0 var(--leaf-deep)}
.hero-sub{font-size:var(--fs-body);color:var(--ink-soft);font-weight:700}
.home-mascot{width:clamp(180px,32vh,300px);height:auto;filter:drop-shadow(0 12px 12px rgba(43,30,18,.18));animation:idle-bob 2.4s ease-in-out infinite}
@keyframes idle-bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(2deg)}}
.hero-hint{font-size:var(--fs-ui);color:var(--ink-soft)}
.credit{position:fixed;bottom:12px;left:0;right:0;text-align:center;font-size:.95rem;color:var(--ink-soft);font-weight:700;padding:0 12px}
.credit a{color:var(--mango-deep);text-decoration:none;border-bottom:2px solid var(--mango-yellow)}
.credit a:hover{color:var(--mango-orange)}

/* Bars (level-select header, HUD) */
.bar,.hud{width:100%;max-width:1280px;display:flex;align-items:center;gap:12px;padding:8px}
.bar-title,.bar-spacer,.hud-spacer{flex:1}
.bar-title{text-align:center;font-size:var(--fs-h2);color:var(--mango-orange)}

/* Level trail */
.trail{position:relative;width:100%;max-width:900px;flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-content:center;padding:20px;overflow:auto}
.node{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:none;cursor:pointer;font-family:var(--font-display)}
.node[disabled]{cursor:not-allowed;opacity:.85}
.node-mango{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;font-size:2.4rem;border:4px solid var(--outline);box-shadow:var(--shadow-soft);background:var(--mango-yellow);transition:transform .16s var(--ease-pop)}
.node:not([disabled]):hover .node-mango{transform:scale(1.1) rotate(-4deg)}
.node.done .node-mango{background:var(--mango-orange)}
.node.current .node-mango{background:var(--mango-yellow);animation:pulse 1.1s ease-in-out infinite}
.node.locked .node-mango{background:var(--locked-grey);box-shadow:none}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.node-num{font-weight:800;font-size:1.1rem}
.node-name{font-size:.95rem;font-weight:700;color:var(--ink-soft);text-align:center;max-width:130px}
.node-stars{font-size:1rem;letter-spacing:1px;min-height:1.2em}

/* HUD */
.hud-score,.hud-lives,.hud-boss{font-family:var(--font-display);font-weight:800;font-size:var(--fs-hud-num)}
.hud-lives{letter-spacing:2px;min-width:120px;text-align:center}
.hud-boss{display:flex;align-items:center;gap:10px;flex:1;max-width:420px}
.hud-boss[hidden]{display:none} /* author display:flex would otherwise beat the [hidden] attribute */
.hud-boss-label{font-size:var(--fs-ui);color:var(--accent-boss)}
.progress-wrap{width:100%;max-width:1280px;padding:0 12px 6px}
.bar-track{flex:1;height:20px;background:var(--surface-sunk);border:3px solid var(--outline);border-radius:999px;overflow:hidden}
.bar-fill{height:100%;width:0;border-radius:999px;transition:width .28s var(--ease-out)}
.bar-fill--leaf{background:var(--leaf-green)}
.bar-fill--boss{background:var(--accent-boss)}

/* Stage / canvas */
.stage-wrap{flex:1;width:100%;max-width:1280px;display:grid;place-items:center;min-height:0;overflow:hidden}
/* Display size is set by JS (fitCanvas) to the largest 16:9 box that fits the
   available space, so the bottom word row stays visible on short viewports. */
#stage{background:var(--bg-sky);border:4px solid var(--outline);border-radius:22px;box-shadow:var(--shadow-soft);touch-action:none}

/* Win */
#screen-win{background:radial-gradient(circle at 50% 30%,#FFF9EC,#FFEFC9)}
.win-inner{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;z-index:2}
.win-stars{font-size:3rem;letter-spacing:12px}
.win-stars span{display:inline-block;opacity:0;transform:scale(0)}
.win-stars span.show{animation:star-pop .5s var(--ease-pop) forwards}
@keyframes star-pop{to{opacity:1;transform:scale(1)}}
.win-title{font-size:var(--fs-h1);color:var(--mango-orange)}
.win-mascot{width:clamp(140px,22vh,220px);animation:jump 0.7s var(--ease-pop) infinite alternate}
@keyframes jump{to{transform:translateY(-22px) rotate(-4deg)}}
.win-score{font-size:var(--fs-body);font-weight:700}
.win-best{color:var(--mango-deep);font-weight:800}
.win-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px}

/* Confetti (CSS) */
.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.confetti i{position:absolute;top:-20px;width:12px;height:16px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}

/* Modal */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(43,30,18,.4)}
.modal[hidden]{display:none}
.modal-card{background:var(--surface);border:4px solid var(--outline);border-radius:26px;padding:30px;text-align:center;max-width:420px;box-shadow:var(--shadow-pop);animation:screen-in .3s var(--ease-pop)}
.modal-emoji{font-size:3.5rem}
.modal-card h3{font-size:var(--fs-h2);color:var(--mango-orange);margin:8px 0}
.modal-card p{font-size:var(--fs-body);color:var(--ink-soft);margin-bottom:18px}
.modal-actions{display:flex;gap:12px;justify-content:center}
.parent-q{font-family:var(--font-display);color:var(--ink)!important;font-weight:700}
.parent-input{font-family:var(--font-display);font-size:2rem;font-weight:800;text-align:center;width:180px;padding:10px;margin:6px auto 4px;border:3px solid var(--outline);border-radius:16px;color:var(--ink)}
.parent-input:focus-visible{outline:3px solid var(--sky-blue);outline-offset:3px}
.parent-feedback{min-height:1.4em;font-weight:700;color:var(--wrong-deep);margin-bottom:10px!important}
.modal-card.shake{animation:mp-shake .3s}
@keyframes mp-shake{0%,100%{transform:none}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.05ms!important}
}
@media (max-width:720px){
  .trail{grid-template-columns:repeat(2,1fr)}
  .hud-lives{min-width:80px}
}