@import url("https://fonts.googleapis.com/css2?family=Gaegu:wght@400;700&family=Patrick+Hand&display=swap");

:root { --ink:#254b5c; --paper:#fff8e8; --cream:#fffdf5; --butter:#fff0bf; --coral:#f6746a; --teal:#87d1cf; --gold:#f7bf3e; --purple:#776b9e; }
* { box-sizing:border-box; } html,body { min-height:100%; }
body { margin:0; color:var(--ink); background:repeating-linear-gradient(115deg,rgba(255,255,255,.12) 0 2px,transparent 2px 8px),#8bd1cf; font-family:"Patrick Hand","Comic Sans MS",cursive; }
button,input { font:inherit; } button { cursor:pointer; }
.game-shell { min-height:100vh; display:grid; place-items:center; padding:20px; }
.game-card { width:min(100%,1098px); overflow:hidden; border:5px solid var(--ink); border-radius:26px; background:var(--paper); box-shadow:0 9px 0 rgba(37,75,92,.25); }
.topbar { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:9px 28px; border-bottom:4px solid var(--ink); background:#fff0c4; }
.brand { display:flex; align-items:center; gap:10px; }.brand > span { color:var(--gold); font-family:Arial,sans-serif; font-size:42px; line-height:1; transform:rotate(-13deg); text-shadow:2px 2px 0 var(--ink); }.brand p { margin:0 0 -3px; color:var(--coral); font-family:"Gaegu",cursive; font-size:14px; font-weight:700; letter-spacing:.22em; }.brand h1 { margin:0; font-family:"Gaegu",cursive; font-size:31px; font-weight:700; letter-spacing:.16em; line-height:.9; }
.hud { display:flex; gap:18px; }.hud p { display:grid; gap:1px; margin:0; color:#5d8691; font-family:"Gaegu",cursive; font-size:12px; font-weight:700; letter-spacing:.12em; text-align:right; }.hud strong { color:var(--ink); font-family:"Patrick Hand",cursive; font-size:20px; letter-spacing:0; }.hud #powerValue { color:#dd6f91; }
.level-bar { min-height:51px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:8px 29px; border-bottom:3px dashed #a9a7bb; background:var(--cream); }.level-bar p { margin:0; font-size:17px; letter-spacing:.05em; }.level-bar p span { margin-right:7px; color:var(--coral); font-family:"Gaegu",cursive; font-size:12px; font-weight:700; letter-spacing:.16em; }.progress-wrap { display:flex; align-items:center; gap:9px; min-width:min(40vw,390px); font-family:"Gaegu",cursive; font-weight:700; }.progress-track { width:100%; height:15px; overflow:hidden; border:2px solid var(--ink); border-radius:99px; background:#e3f1df; }.progress-fill { width:0; height:100%; border-radius:inherit; background:var(--gold); transition:width .2s linear; }.progress-wrap > span { min-width:28px; font-size:13px; }
.game-stage { position:relative; min-height:585px; background:#7f739d; }.game-stage::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(to bottom,transparent 0 66px,rgba(255,255,255,.04) 67px 68px); pointer-events:none; } canvas { position:relative; display:block; width:100%; height:585px; touch-action:none; }
.screen-card { position:absolute; z-index:3; left:50%; top:50%; width:min(calc(100% - 32px),450px); padding:25px 34px 20px; transform:translate(-50%,-50%) rotate(-1deg); border:4px solid var(--ink); border-radius:22px 29px 24px 28px; background:rgba(255,253,245,.98); box-shadow:7px 8px 0 rgba(37,75,92,.23); text-align:center; }.hidden { display:none; }.eyebrow { margin:0 0 5px; color:var(--coral); font-family:"Gaegu",cursive; font-size:14px; font-weight:700; letter-spacing:.13em; }.screen-card h2 { margin:0 0 8px; font-family:"Gaegu",cursive; font-size:47px; font-weight:700; letter-spacing:.09em; line-height:.82; }.intro { max-width:365px; margin:0 auto 13px; color:#386274; font-size:19px; line-height:1.05; }
.level-choices { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:10px 0; }.level-choice { display:flex; align-items:center; gap:6px; min-height:45px; padding:5px 5px; border:3px solid var(--ink); border-radius:9px; color:var(--ink); background:#fff9e9; text-align:left; transition:transform .12s ease,background .12s ease; }.level-choice:hover { transform:translateY(-2px); }.level-choice b { color:var(--coral); font-family:"Gaegu",cursive; font-size:21px; }.level-choice span { font-family:"Gaegu",cursive; font-size:12px; font-weight:700; letter-spacing:.04em; line-height:.9; }.level-choice.selected { background:var(--level-tint,#d9f1dd); box-shadow:0 3px 0 var(--ink); transform:translateY(-2px); }
.character-choices { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:9px 0 13px; }.character-choice { min-height:66px; padding:4px 2px; border:2px solid #b6c8c5; border-radius:10px; color:var(--ink); background:var(--cream); font-family:"Gaegu",cursive; font-size:11px; font-weight:700; line-height:.85; }.choice-sprite { display:block; width:35px; height:39px; margin:0 auto 2px; background-repeat:no-repeat; background-position:left top; background-size:400% 100%; filter:drop-shadow(0 2px 0 rgba(37,75,92,.16)); }.character-choice.selected { border-color:var(--ink); background:#dcf2e8; box-shadow:0 2px 0 var(--ink); transform:translateY(-1px); }
.name-field { display:grid; gap:2px; margin:0 auto 2px; text-align:left; }.name-field span { color:var(--coral); font-family:"Gaegu",cursive; font-size:12px; font-weight:700; letter-spacing:.14em; }.name-field input { width:100%; padding:6px 10px; border:3px solid var(--ink); border-radius:9px; outline:0; background:#fffdf6; color:var(--ink); font-size:18px; }.name-field input:focus { box-shadow:0 0 0 3px rgba(135,209,207,.5); }.name-error { min-height:13px; margin:0; color:#c75353; font-size:12px; }
.primary-button,.secondary-button,.lane-button { border:3px solid var(--ink); color:var(--cream); font-family:"Gaegu",cursive; font-weight:700; letter-spacing:.08em; }.primary-button { margin-top:8px; padding:9px 23px; border-radius:11px; background:var(--coral); box-shadow:0 3px 0 var(--ink); font-size:20px; }.primary-button:hover { transform:translateY(-2px); box-shadow:0 5px 0 var(--ink); }.secondary-button { margin:8px 0 0 8px; padding:8px 16px; border-radius:10px; background:#7aaeba; font-size:16px; }
.leaderboard { margin:13px auto 0; overflow:hidden; border:3px solid var(--ink); border-radius:10px; background:#f4f8ce; text-align:left; }.leaderboard-heading { display:flex; justify-content:space-between; gap:9px; padding:6px 9px; border-bottom:2px dashed #75a498; }.leaderboard h3 { margin:0; font-family:"Gaegu",cursive; font-size:13px; letter-spacing:.09em; }.leaderboard-heading span { color:#59838b; font-family:"Gaegu",cursive; font-size:10px; font-weight:700; letter-spacing:.06em; }.leaderboard ol { min-height:34px; margin:0; padding:4px 11px 6px; list-style:none; }.leaderboard li { display:flex; justify-content:space-between; gap:15px; padding:2px 0; border-bottom:1px dashed #b4caa9; font-size:14px; }.leaderboard li:last-child { border:0; }.leaderboard li b { margin-right:6px; color:var(--coral); }.leaderboard time { color:var(--coral); font-weight:bold; font-variant-numeric:tabular-nums; }.empty-row { color:#668080; font-size:13px; }
.hint { margin:8px 0 0; color:#68848c; font-size:14px; }.score-receipt { margin:0 0 13px; color:var(--coral); font-family:"Gaegu",cursive; font-size:31px; font-weight:700; }.message-screen { width:min(calc(100% - 32px),430px); padding:36px 38px 28px; }.message-screen h2 { font-size:44px; line-height:.92; }.message-screen .intro { font-size:19px; }
.footer-bar { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:53px; padding:6px 28px; border-top:4px solid var(--ink); background:#fff0c4; }.footer-bar p { margin:0; color:#357285; font-family:"Gaegu",cursive; font-size:14px; font-weight:700; letter-spacing:.11em; text-align:center; }.footer-bar b { color:var(--coral); }.lane-button { display:grid; width:34px; height:32px; place-items:center; border-radius:8px; background:#fffaf0; color:var(--ink); font-family:Arial,sans-serif; font-size:20px; }.lane-button:hover { background:var(--gold); }
@media (max-width:640px) { .game-shell{padding:0}.game-card{min-height:100vh;border:0;border-radius:0;box-shadow:none}.topbar{min-height:63px;padding:8px 14px}.brand h1{font-size:27px}.brand > span{font-size:34px}.hud{gap:8px}.hud p{font-size:10px}.hud strong{font-size:16px}.level-bar{padding:7px 14px;gap:11px}.level-bar p{font-size:14px}.progress-wrap{min-width:130px}.game-stage,canvas{min-height:calc(100vh - 167px);height:calc(100vh - 167px)}.screen-card{padding:21px 16px 16px}.screen-card h2{font-size:40px}.intro{font-size:17px}.level-choice span{font-size:10px}.character-choice{font-size:9px}.footer-bar{padding:6px 13px}.footer-bar p{font-size:11px}.message-screen{padding:28px 22px}.secondary-button{display:block;margin:8px auto 0} }
@media (prefers-reduced-motion:reduce) { * { transition:none!important; } }