:root{color-scheme:dark;--yellow:#ffe03a;--blue:#365cff;--panel:#101329}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% -20%,#242961,#080916 56%,#03040a);color:#fff;font-family:Inter,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;touch-action:manipulation}
button{font:inherit}
.app-shell{width:min(100%,650px);margin:auto;padding:max(14px,env(safe-area-inset-top)) 10px max(28px,env(safe-area-inset-bottom))}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.eyebrow{margin:0;color:var(--yellow);font-size:10px;font-weight:900;letter-spacing:.2em}
h1{margin:1px 0 0;font-size:clamp(26px,7vw,40px);letter-spacing:-.05em}
.header-actions{display:flex;gap:6px}
.header-actions button{width:42px;height:42px;border:1px solid #ffffff2c;border-radius:11px;background:#ffffff0d;color:#fff;font-size:19px;cursor:pointer}
.header-actions button:active,.controls button:active{transform:translateY(2px)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:8px}
.stats div{padding:7px 5px;border:1px solid #ffffff1a;border-radius:9px;background:#0d1021;text-align:center}
.stats span{display:block;color:#7582aa;font-size:9px;font-weight:900;letter-spacing:.13em}
.stats strong{display:block;margin-top:2px;color:#fff;font-family:"SFMono-Regular",Consolas,monospace;font-size:clamp(13px,4vw,19px)}
#lives{color:var(--yellow);font-size:clamp(10px,3vw,16px);letter-spacing:.12em}
.game-stage{position:relative;width:min(100%,560px);margin:auto;border:2px solid #36427c;border-radius:14px;background:#02030a;box-shadow:0 20px 60px #000b,0 0 40px #2844ff24;overflow:hidden}
canvas{display:block;width:100%;height:auto;aspect-ratio:1/1;touch-action:none}
.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;background:#01020ac2;backdrop-filter:blur(3px);text-align:center}
.overlay p{max-width:280px;margin:0;color:#ced4f3;font-size:14px;line-height:1.45}
.overlay button{border:0;border-radius:999px;background:var(--yellow);color:#171300;padding:12px 25px;font-weight:900;box-shadow:0 0 25px #ffe03a66;cursor:pointer}
.message{min-height:22px;margin:8px 0 4px;color:#aeb8da;text-align:center;font-size:13px}
.controls{display:grid;grid-template-columns:repeat(3,58px);grid-template-areas:". up ." "left down right";justify-content:center;gap:7px;margin:5px auto 12px}
.controls button{width:58px;height:48px;border:1px solid #47568c;border-radius:12px;background:linear-gradient(#222a4c,#151a33);color:#dbe2ff;font-size:20px;box-shadow:0 5px 0 #080a15;cursor:pointer}
.controls [data-direction="up"]{grid-area:up}.controls [data-direction="left"]{grid-area:left}.controls [data-direction="down"]{grid-area:down}.controls [data-direction="right"]{grid-area:right}
details{max-width:560px;margin:10px auto;padding:11px 14px;border:1px solid #ffffff18;border-radius:12px;background:#0d1021;color:#aeb8d4;font-size:13px;line-height:1.5}
summary{color:#e6eaff;font-weight:800;cursor:pointer}
details p{margin:8px 0 2px}
[hidden]{display:none!important}
@media(min-width:760px) and (min-height:800px){.controls{grid-template-columns:repeat(3,64px)}.controls button{width:64px;height:52px}}