:root { color-scheme: dark; --violet:#4e1ed6; --panel:#33148c; --lime:#93f041; --cyan:#0afbfc; --white:#fff7ff; --ink:#10072c; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html,body { margin:0; min-height:100%; }
body { background:var(--ink); color:var(--white); font-family:ui-monospace,"Cascadia Code",Consolas,monospace; }
button,a { font:inherit; }
button,.tools a { min-height:44px; padding:10px 14px; border:2px solid #b392ff; border-radius:0; color:var(--white); background:#20105e; text-decoration:none; font-weight:700; cursor:pointer; }
button:disabled { opacity:.5; cursor:not-allowed; }
a { color:var(--cyan); text-underline-offset:4px; }
a:focus-visible,button:focus-visible { outline:3px solid var(--lime); outline-offset:4px; }
.game-shell { width:100%; min-height:100dvh; height:100dvh; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.game-shell:fullscreen { width:100vw; height:100dvh; }
.hud { background:linear-gradient(#1a064d,#2b0e82); border-bottom:3px solid #9860ff; padding:6px 12px; display:grid; grid-template-columns:1fr auto 1fr; gap:4px 12px; align-items:center; }
.score { display:flex; flex-direction:column; gap:2px; font-size:12px; letter-spacing:2px; }
.score strong { font-size:clamp(20px,2vw,28px); font-variant-numeric:tabular-nums; text-shadow:0 0 10px #9461ff; }
.high { text-align:right; }
.brand { text-align:center; white-space:nowrap; }
h1 { margin:0 0 2px; font-size:clamp(16px,2vw,24px); font-weight:900; letter-spacing:2px; text-shadow:0 0 14px #ab84ff; }
.brand>span { font-size:11px; color:#cbbaff; }
.tools { grid-column:1/-1; display:flex; justify-content:center; gap:4px; }
.tools button,.tools a { min-width:44px; min-height:44px; padding:6px 8px; font-size:11px; display:inline-flex; align-items:center; justify-content:center; }
#fullscreen-button { width:44px; padding:4px; font-size:22px; }
.arena { position:relative; min-height:0; overflow:hidden; background:linear-gradient(155deg,#361390,#4e1ed6 75%); }
.arena::before { content:""; position:absolute; inset:0; opacity:.35; background:repeating-linear-gradient(90deg,transparent 0 24%,#261075 24% 26%,transparent 26% 49%),repeating-linear-gradient(0deg,transparent 0 29%,#28117c 29% 32%,transparent 32% 59%); pointer-events:none; }
canvas { width:100%; height:100%; display:block; touch-action:none; }
canvas:focus { outline:none; }
.skeleton-card { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:min(420px,calc(100% - 32px)); max-height:calc(100% - 16px); overflow-y:auto; text-align:center; padding:26px 20px; background:#17083adc; border:1px solid #b589ff; box-shadow:0 0 24px #6029df; }
.eyebrow { color:var(--lime); font-size:11px; letter-spacing:3px; }
h2 { font-size:clamp(28px,5vw,44px); margin:10px 0; letter-spacing:4px; }
.skeleton-card p { font-size:14px; line-height:1.7; color:#ded2ff; margin:12px 0; }
.skeleton-card #boot-status { color:var(--cyan); font-size:11px; }
.skeleton-card button { display:block; width:100%; margin:16px 0 12px; border-color:var(--lime); }
.skeleton-card a { display:inline-flex; align-items:center; min-height:44px; font-size:12px; }
#debug-panel { position:absolute; left:12px; top:12px; z-index:5; max-width:min(340px,calc(100% - 24px)); padding:12px; border:1px solid var(--cyan); background:#10072ce8; font:11px/1.5 ui-monospace,Consolas,monospace; white-space:pre-wrap; color:var(--mint,#c7ffcd); pointer-events:none; }
#energy-value { float:right; color:var(--cyan); }
.start-instructions { font-size:12px!important; color:#c7ffcd!important; }
.mobile-instructions { display:none; }
#boost-button { touch-action:none; user-select:none; }
.footer { border-top:3px solid #9860ff; background:linear-gradient(#2b0e82,#180640); padding:6px 12px; display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:4px 12px; align-items:center; }
.energy { max-width:420px; }
.energy label { display:block; font-size:10px; margin-bottom:4px; letter-spacing:1px; }
meter { width:100%; height:14px; display:block; border:1px solid var(--white); background:var(--cyan); }
meter::-webkit-meter-bar { background:#120434; border:0; }
meter::-webkit-meter-optimum-value { background:var(--cyan); }
meter::-moz-meter-bar { background:var(--cyan); }
.lives { display:flex; align-items:center; gap:6px; font-size:10px; }
.lives strong { color:var(--lime); font-size:20px; white-space:nowrap; }
.boost { border-color:var(--cyan); font-size:16px; min-width:92px; min-height:44px; padding:6px 10px; }
.keyboard-hint,.touch-hint { grid-column:1/-1; margin:0; text-align:center; color:#d5bfff; font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.keyboard-hint span,.touch-hint span { color:#a591c9; }
.touch-hint { display:none; }
@media (min-width:1000px) { .hud { grid-template-columns:1fr auto 1fr auto; } .tools { grid-column:4; grid-row:1; } }
@media (min-width:1000px) and (pointer:fine) { .footer { grid-template-columns:minmax(0,1fr) auto; } .boost { display:none; } }
@media (max-width:600px) { .hud { padding:4px 8px; gap:4px 6px; } .score { font-size:9px; letter-spacing:1px; } .score strong { font-size:20px; } h1 { font-size:16px; letter-spacing:1px; } .brand>span { font-size:9px; } .tools a,.tools button { font-size:10px; padding:6px; } #fullscreen-button { font-size:22px; } .footer { padding:6px 8px; gap:4px 8px; } .energy label { font-size:8px; letter-spacing:0; } .lives { flex-direction:column; gap:0; font-size:8px; } .lives strong { font-size:18px; } .boost { min-width:88px; font-size:14px; } .keyboard-hint { display:none; } .touch-hint { display:block; font-size:9px; } .skeleton-card { padding:14px; } }
@media (pointer:coarse) { .keyboard-hint { display:none; } .touch-hint { display:block; } }
@media (max-width:600px),(pointer:coarse) { .desktop-instructions { display:none; } .mobile-instructions { display:block; } }
@media (max-height:500px) and (min-width:601px) { .hud { padding:2px 8px; grid-template-columns:1fr auto 1fr auto; gap:4px 8px; } .tools { grid-column:4; grid-row:1; } .tools a,.tools button { font-size:10px; padding:6px; } #fullscreen-button { font-size:22px; } h1 { font-size:16px; } .score { font-size:9px; letter-spacing:1px; } .score strong { font-size:20px; } .footer { padding:4px 8px; } .footer p { display:none; } .skeleton-card { padding:8px 16px; } h2 { font-size:26px; margin:4px; } .skeleton-card p { margin:3px 0; font-size:12px; } .skeleton-card button { margin:8px 0 2px; } .skeleton-card .eyebrow,.skeleton-card .start-instructions,.skeleton-card #boot-status,.skeleton-card a { display:none; } }