@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 200 1000; font-display: swap; src: url('../assets/fonts/nunito-latin.woff2') format('woff2'); }
:root {
  --s: 1;
  /* 60% neutral base (knit + cards), 30% warm wood, 10% saturated accents. UI accents capped at four. */
  --ink: #2f2a3a; --soft: #6b5d52; --card: #fff8e7; --wood: #b97a45;
  --red: #e4002b; --yellow: #ffd23f; --blue: #1f75fe; --green: #3cb44b;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; height: 100%; overflow: hidden; background: #e9dcc6 url('../assets/bg.jpg') center / cover; font-family: 'Nunito', system-ui, sans-serif; color: var(--ink); touch-action: manipulation; user-select: none; -webkit-user-select: none; }
#stage { position: fixed; inset: 0; }
canvas#game { position: absolute; display: block; }

.screen { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: calc(14px * var(--s)); padding: 24px; padding-top: calc(24px + env(safe-area-inset-top, 0px)); text-align: center; }
.screen.show { display: flex; }
#title { background: rgba(243, 231, 211, 0.55); }
#select, #over, #loading { background: rgba(60, 40, 30, 0.45); backdrop-filter: blur(3px); }
#logoImg { width: min(88vw, calc(600px * var(--s))); filter: drop-shadow(0 8px 16px rgba(0,0,0,0.25)); }

button { font: inherit; font-weight: 900; color: var(--ink); border: 0; cursor: pointer; border-radius: 999px; }
button.big { background: linear-gradient(#ff3b5c, var(--red)); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,0.25); font-size: calc(38px * var(--s)); padding: calc(14px * var(--s)) calc(70px * var(--s)); box-shadow: 0 6px 0 #a80020, 0 12px 20px rgba(0,0,0,0.2); }
button.big:active { transform: translateY(4px); box-shadow: 0 2px 0 #a80020; }
button.ghost { background: rgba(255,255,255,0.85); font-size: calc(24px * var(--s)); padding: calc(10px * var(--s)) calc(30px * var(--s)); box-shadow: 0 4px 0 rgba(0,0,0,0.12); }
button.mini { background: rgba(255,255,255,0.9); font-size: calc(24px * var(--s)); width: calc(64px * var(--s)); height: calc(52px * var(--s)); box-shadow: 0 3px 0 rgba(0,0,0,0.12); }
#btnSpeed { width: auto; padding: 0 calc(14px * var(--s)); }

.card { background: var(--card); border-radius: calc(28px * var(--s)); padding: calc(28px * var(--s)); max-width: min(92vw, calc(640px * var(--s))); box-shadow: 0 16px 40px rgba(0,0,0,0.25); }
.card h2 { margin: 0 0 8px; font-size: calc(40px * var(--s)); }
.card h3 { margin: 0 0 8px; font-size: calc(30px * var(--s)); }
.card p { margin: 0 0 12px; font-size: calc(24px * var(--s)); color: var(--soft); }
.card ul { text-align: left; padding-left: 1.2em; margin: 0 0 12px; font-size: calc(20px * var(--s)); line-height: 1.35; }
.card li { margin-bottom: 0.4em; }
.card .row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.card img { width: calc(300px * var(--s)); max-width: 60vw; }
.card img.pic { width: calc(150px * var(--s)); image-rendering: pixelated; border-radius: 10px; box-shadow: 0 3px 0 rgba(0,0,0,0.15); margin-top: -10px; }
.how { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 5; }
.how.show { display: block; }
.credit { color: var(--soft); font-size: calc(20px * var(--s)); }

#select h2 { color: var(--yellow); text-shadow: 0 3px 0 rgba(0,0,0,0.3); font-size: calc(44px * var(--s)); margin: 0; }
#select { justify-content: flex-start; padding-top: calc(40px * var(--s) + env(safe-area-inset-top, 0px)); }
#levelGrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(10px * var(--s)); width: min(94vw, calc(640px * var(--s))); max-height: 72vh; overflow-y: auto; padding: 6px; -webkit-overflow-scrolling: touch; }
#levelGrid .chapter { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; color: #fff; margin-top: calc(10px * var(--s)); padding: 0 6px; }
#levelGrid .chapter .chnum { font-size: calc(18px * var(--s)); opacity: 0.8; }
#levelGrid .chapter .chname { font-size: calc(28px * var(--s)); font-weight: 900; color: var(--yellow); text-shadow: 0 2px 0 rgba(0,0,0,0.3); }
#levelGrid .chapter .chdone { margin-left: auto; font-size: calc(18px * var(--s)); opacity: 0.85; }
.lvl.current { outline: calc(4px * var(--s)) solid var(--red); }
.lvl { display: flex; flex-direction: column; align-items: center; background: var(--card); border-bottom: calc(5px * var(--s)) solid var(--blue); border-radius: calc(16px * var(--s)); padding: calc(8px * var(--s)) calc(4px * var(--s)); box-shadow: 0 5px 0 rgba(0,0,0,0.15); }
.lvl .num { font-size: calc(32px * var(--s)); line-height: 1; }
.lvl .name { font-size: calc(13px * var(--s)); color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.lvl .stars { color: var(--yellow); text-shadow: 0 1px 0 rgba(0,0,0,0.25); font-size: calc(15px * var(--s)); letter-spacing: -1px; }
.lvl.locked { opacity: 0.45; filter: grayscale(0.7); cursor: default; border-bottom-color: #a9a9b3; }

#hud { display: none; position: absolute; top: 0; left: 0; right: 0; pointer-events: none; }
#hud.show { display: block; }
#hud .bar { pointer-events: auto; display: flex; align-items: center; justify-content: center; gap: calc(10px * var(--s)); padding: calc(18px * var(--s) + env(safe-area-inset-top, 0px)) 12px 0; }
#hudLevel { font-weight: 900; font-size: calc(22px * var(--s)); white-space: nowrap; background: var(--yellow); border-radius: 999px; padding: calc(8px * var(--s)) calc(22px * var(--s)); box-shadow: 0 3px 0 rgba(0,0,0,0.12); }
#hint { margin: calc(8px * var(--s)) auto 0; width: min(92vw, calc(640px * var(--s))); background: var(--blue); color: #fff; border-radius: 16px; padding: 10px 16px; font-size: calc(22px * var(--s)); font-weight: 700; opacity: 0; transition: opacity 0.3s; }
#hint.show { opacity: 1; }