:root {
  --navy:#143556;
  --cream:#fffef3;
  --yellow:#ffd54e;
  --orange:#ff9d21;
  --blue:#55c5ee;
  --shadow:0 12px 28px rgba(20,53,86,.18);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;color:var(--navy);background:linear-gradient(#8ee7f5 0%,#eff7c8 72%,#fff0ac 100%);overscroll-behavior:none}
body{min-height:100dvh}
button,input{font:inherit}
button{cursor:pointer}
#app{min-height:100dvh;padding:20px 14px calc(150px + env(safe-area-inset-bottom));position:relative;overflow:hidden}
.screen{display:none;max-width:760px;margin:0 auto}.screen.active{display:block}
.hero{text-align:center}.mascot{font-size:54px;line-height:1}.hero h1{font-size:clamp(48px,11vw,82px);margin:0;font-weight:900;letter-spacing:-4px}.hero p{margin:4px 0 14px;font-size:20px;font-weight:800}
.card{background:rgba(255,254,243,.96);border:4px solid var(--navy);border-radius:24px;padding:18px;box-shadow:var(--shadow);margin:14px auto}
.card-title-row{display:flex;justify-content:space-between;align-items:flex-start}.card h2{margin:0;font-size:24px}.card small{font-weight:700;color:#526b83}
.icon-btn{width:46px;height:46px;border-radius:50%;border:3px solid var(--navy);background:var(--yellow);font-size:25px;font-weight:900}
.leaderboard-list{list-style:none;margin:12px 0 0;padding:0;max-height:260px;overflow:auto}.leaderboard-list li{display:grid;grid-template-columns:38px 1fr auto auto;gap:8px;align-items:center;padding:9px 4px;border-bottom:1px solid #d9dee0;font-weight:800}.leaderboard-list .empty{display:block;text-align:center;padding:22px 5px}.rank{font-size:18px}.score{font-variant-numeric:tabular-nums}.lvl{font-size:12px;background:#e8f6ff;padding:5px 7px;border-radius:999px}
.setup-card label{display:block;font-size:18px;font-weight:900;margin-bottom:8px}.setup-card input[type=text],#nickname{width:100%;border:3px solid var(--navy);border-radius:15px;padding:14px 15px;font-size:20px;margin-bottom:7px}.setup-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}.selfie-btn,.secondary-btn{border:3px solid var(--navy);border-radius:14px;padding:12px 18px;font-weight:900;background:var(--blue);display:inline-flex;align-items:center;justify-content:center}.secondary-btn{background:#fff}.wide{width:100%}.selfie-preview-wrap{text-align:center;margin-top:12px}.selfie-preview-wrap img{width:92px;height:92px;border-radius:50%;object-fit:cover;border:4px solid var(--navy)}.hidden{display:none!important}.start-hint{text-align:center;font-size:20px;font-weight:900;margin:16px 0}
.jump-button{position:fixed;z-index:30;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);width:116px;height:116px;border-radius:50%;border:7px solid var(--navy);background:linear-gradient(var(--yellow),var(--orange));color:var(--navy);font-weight:1000;font-size:23px;box-shadow:0 11px 0 #b76500,0 15px 28px rgba(0,0,0,.25);touch-action:manipulation}.jump-button:active{transform:translate(-50%,7px);box-shadow:0 4px 0 #b76500}
#gameScreen{max-width:none;width:100%;height:calc(100dvh - 30px);position:relative}.hud{position:absolute;z-index:4;top:8px;left:50%;transform:translateX(-50%);display:flex;gap:8px}.hud div{min-width:84px;text-align:center;background:rgba(255,255,255,.9);border:3px solid var(--navy);border-radius:13px;padding:5px 8px}.hud span{display:block;font-size:11px;font-weight:800}.hud strong{font-size:22px}#gameCanvas{display:block;width:100%;height:100%;border:4px solid var(--navy);border-radius:22px;background:#bfeefe;box-shadow:var(--shadow)}
.level-banner,.countdown{position:absolute;z-index:8;left:50%;top:42%;transform:translate(-50%,-50%);font-size:clamp(45px,10vw,92px);font-weight:1000;color:white;text-shadow:0 5px 0 var(--navy),0 0 24px rgba(0,0,0,.25);pointer-events:none}.countdown{font-size:110px}
.game-over-screen{padding-top:28px}.game-over-card{text-align:center;max-width:520px}.game-over-card h2{font-size:45px}.result-line{font-size:22px;margin:7px}.save-status{font-weight:900}.mini-leaderboard{margin:14px 0;text-align:left}.mini-leaderboard div{display:flex;justify-content:space-between;border-bottom:1px solid #ddd;padding:7px;font-weight:800}
@media (orientation:landscape) and (max-height:600px){#app{padding-top:6px}.hero h1{font-size:48px}.hero .mascot{font-size:30px}.leaderboard-card{max-height:190px}.jump-button{width:88px;height:88px;font-size:18px}.setup-card{padding:10px}.card{margin:7px auto}.start-hint{margin:5px}.game-over-screen{padding-top:0}}