:root{--bg:#09111f;--panel:#121d30;--panel2:#1a2942;--accent:#ffbd38;--accent2:#50d5ff;--text:#f6f8fc;--muted:#9eb0c9;--danger:#ff6677;--ok:#57e38d}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:linear-gradient(180deg,#08101d,#101b2e);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}
body{min-height:100dvh}
button{font:inherit;color:inherit}
#app{width:min(100%,520px);min-height:100dvh;margin:auto;padding:env(safe-area-inset-top) 14px calc(14px + env(safe-area-inset-bottom))}
.topbar{height:82px;display:flex;align-items:center;justify-content:space-between}
.eyebrow{font-size:11px;letter-spacing:.18em;font-weight:900;color:var(--accent)}
h1,h2,p{margin:0} h1{font-size:25px;line-height:1.05;margin-top:4px} h2{font-size:30px}
.icon-btn{width:45px;height:45px;border:1px solid #2d3b53;background:#111b2d;border-radius:14px}
.screen{display:none}.screen.active{display:block}
.hero-card,.result-card{background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid #2d3b53;border-radius:26px;padding:24px;box-shadow:0 20px 60px #0007;overflow:hidden;position:relative}
.skyline{height:210px;display:flex;align-items:flex-end;justify-content:center;gap:7px;margin:-10px -8px 18px;background:radial-gradient(circle at 50% 20%,#294b78,#111b2c 55%)}
.skyline span{display:block;width:15%;background:linear-gradient(90deg,#18263b,#304968);border:1px solid #52739a;border-bottom:0;box-shadow:inset 0 0 0 2px #142236}
.skyline span:nth-child(1){height:38%}.skyline span:nth-child(2){height:70%}.skyline span:nth-child(3){height:94%}.skyline span:nth-child(4){height:57%}.skyline span:nth-child(5){height:82%}
.tagline{font-size:17px;color:#dce6f5;line-height:1.45;margin-bottom:20px}
.primary,.secondary{width:100%;min-height:56px;border-radius:16px;border:0;font-weight:900;letter-spacing:.04em}.primary{background:linear-gradient(135deg,#ffd166,#ffad2f);color:#162033;box-shadow:0 8px 24px #ffb52b33}.secondary{margin-top:10px;background:#1b2940;border:1px solid #344761}
.meta-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:20px}.meta-row div{background:#0d1626;border-radius:14px;text-align:center;padding:12px 5px}.meta-row strong{display:block;font-size:22px}.meta-row small{font-size:9px;color:var(--muted);letter-spacing:.1em}
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.mode-card{border:1px solid #2a3a55;background:#111d31;border-radius:16px;padding:15px;text-align:left}.mode-card b,.mode-card span{display:block}.mode-card span{font-size:12px;color:var(--muted);margin-top:4px}.locked{opacity:.55}
.hud{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:8px}.hud div{padding:9px 4px;text-align:center;background:#101b2d;border:1px solid #263650;border-radius:11px}.hud span,.hud b{display:block}.hud span{font-size:8px;color:var(--muted);letter-spacing:.12em}.hud b{font-size:16px;margin-top:2px}
.game-wrap{position:relative;border-radius:20px;overflow:hidden;border:1px solid #33445f;background:#07101c}canvas{width:100%;height:min(60dvh,560px);display:block;touch-action:none}.message{position:absolute;left:12px;right:12px;bottom:10px;background:#07101ddd;border:1px solid #31445f;border-radius:12px;padding:9px 12px;text-align:center;font-size:12px;color:#dbe7f7;backdrop-filter:blur(8px)}
.controls{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:9px}.controls button{height:62px;border:1px solid #33455e;border-radius:14px;background:#15233a;font-size:23px;font-weight:900;touch-action:none}.controls button span{display:block;font-size:7px;letter-spacing:.08em;color:var(--muted);margin-top:2px}.controls .release{background:linear-gradient(160deg,#ffcc55,#ff9f2b);color:#152034;border:0}.controls .release span{color:#39445a}
.result-card{text-align:center;margin-top:18px}.result-icon{font-size:64px;color:var(--accent);filter:drop-shadow(0 8px 18px #ffb72c66)}.result-card .eyebrow{margin-top:6px}.result-card h2{margin:8px 0}.result-card p{color:var(--muted);line-height:1.45}.score-ring{width:145px;height:145px;border-radius:50%;margin:24px auto 10px;border:9px solid var(--accent);display:grid;place-content:center;background:#0d1727;box-shadow:0 0 0 8px #ffbd3815}.score-ring strong{font-size:38px}.score-ring span{font-size:9px;color:var(--muted);letter-spacing:.14em}.stars{font-size:34px;letter-spacing:5px;color:var(--accent)}.reward{margin:10px 0 22px;color:var(--ok);font-weight:800}
@media(max-height:720px){.topbar{height:65px}.topbar h1{font-size:21px}.hud{margin-bottom:5px}.hud div{padding:6px 3px}canvas{height:54dvh}.controls button{height:55px}.hero-card{padding:18px}.skyline{height:170px}}