:root{color-scheme:dark;--cyan:#56d9ff;--blue:#167de8}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#01050b;color:#fff;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;touch-action:none;user-select:none}
body{display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,#102b46 0,#020812 48%,#000 100%)}
button,select{font:inherit}
#wrap{position:relative;height:100dvh;max-height:calc(100vw * 4 / 3);width:min(100vw,calc(100dvh * 3 / 4));overflow:hidden;background:#06121d;box-shadow:0 0 60px #000;border-inline:1px solid #153954}
canvas{display:block;width:100%;height:100%;outline:0}
#hud{position:absolute;z-index:5;inset:0 0 auto;display:flex;align-items:center;gap:12px;padding:max(10px,env(safe-area-inset-top)) 12px 20px;background:linear-gradient(#010712eb 20%,transparent);font-size:clamp(11px,2vw,15px);font-weight:800;letter-spacing:.04em;text-shadow:0 2px 4px #000}
#stage{color:#7ee5ff;margin-left:auto}
#life{color:#ff5268;letter-spacing:2px}
.icon-btn{width:34px;height:34px;border:1px solid #69d8ff88;border-radius:8px;background:#071b2ccc;color:white;font-weight:900;cursor:pointer}
#bossHud{position:absolute;z-index:5;top:58px;left:10%;right:10%;text-align:center;font-size:11px;font-weight:900;letter-spacing:.12em;text-shadow:0 1px 3px #000}
#bossHud i{display:block;height:9px;margin-top:5px;padding:2px;border:1px solid #ff6b5e;background:#160506;border-radius:9px}
#bossBar{display:block;height:100%;width:100%;border-radius:5px;background:linear-gradient(90deg,#ffb13b,#ff3b4e)}
#message{position:absolute;z-index:6;left:0;right:0;top:37%;text-align:center;font-size:clamp(24px,7vw,52px);font-weight:1000;letter-spacing:.06em;color:#fff;text-shadow:0 0 10px #159cff,0 3px 0 #073a72;pointer-events:none;opacity:0;transform:scale(.85);transition:.2s}
#message.show{opacity:1;transform:scale(1)}
.panel{position:absolute;z-index:10;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;background:radial-gradient(circle at 50% 36%,#123c60ee,#020914fa 67%);text-align:center}
#menu{background:linear-gradient(#0107148c,#020914d9 45%,#020914f5),url('../assets/cover-4k.webp?v=20260827i') center/cover}
.panel[hidden],#bossHud[hidden]{display:none}
.eyebrow{margin:0;color:#66d7ff;font-size:12px;font-weight:900;letter-spacing:.22em}
.panel h1{margin:3px 0 0;font-size:clamp(62px,18vw,118px);font-style:italic;line-height:.95;letter-spacing:-.08em;background:linear-gradient(#fff 5%,#9fe5ff 43%,#218de5 52%,#e9fbff 92%);background-clip:text;-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 5px 0 #163c78) drop-shadow(0 0 20px #148ae5)}
.tagline{margin:16px 0 24px;color:#bce9ff;letter-spacing:.08em}
.best{display:flex;gap:15px;align-items:center;margin-bottom:22px;padding:9px 18px;border-block:1px solid #286385;color:#8bbbd1;font-size:12px}
.best b{color:#fff;font-size:20px}
.panel label{font-size:11px;color:#83bcd8;margin-bottom:6px}
select{width:min(280px,82%);padding:10px 12px;border:1px solid #326b8c;border-radius:8px;background:#071a29;color:#fff;text-align:center}
.primary,.secondary{width:min(280px,82%);border-radius:10px;padding:14px 20px;font-weight:950;letter-spacing:.08em;cursor:pointer}
.primary{margin-top:12px;border:1px solid #74dcff;background:linear-gradient(#1ea8f3,#075db9);color:#fff;box-shadow:0 0 22px #168de766,inset 0 1px #ffffff77}
.secondary{margin-top:9px;border:1px solid #426579;background:#071725;color:#b8d8e8}
.keys{max-width:420px;margin-top:20px;color:#7692a3;font-size:11px;line-height:1.65}
.panel h2{font-size:clamp(38px,10vw,68px);margin:8px 0;color:#ffd253;text-shadow:0 0 18px #ff9d29}
.result-score{display:flex;gap:18px;align-items:center;margin:8px 0 14px;color:#8eb8cc}
.result-score b{font-size:30px;color:#fff}
#resultText{min-height:44px;color:#b7d8e8}
#touchControls{display:none;position:absolute;z-index:7;inset:auto 0 max(18px,env(safe-area-inset-bottom));pointer-events:none;padding:0 18px;align-items:end;justify-content:space-between}
#touchControls button,#stick{pointer-events:auto}
#stick{position:relative;width:112px;height:112px;border-radius:50%;border:1px solid #79dfff55;background:#07152377;box-shadow:inset 0 0 24px #4ed8ff22}
#stick i{position:absolute;width:48px;height:48px;left:32px;top:32px;border-radius:50%;background:#68dfff55;border:2px solid #9eeaff88}
#fireBtn,#bombBtn{border:1px solid #90eaff88;color:#fff;border-radius:50%;background:#0879cbbb;font-weight:950;box-shadow:0 0 18px #159cff55}
#fireBtn{width:84px;height:84px}
#bombBtn{width:62px;height:62px;margin-left:auto;margin-right:12px;background:#dc7020cc;font-size:10px}
#bombBtn span,#bombBtn b{display:block}
#bombBtn b{font-size:16px}
#rotate{display:none;position:absolute;z-index:20;inset:0;background:#020812;place-items:center;text-align:center;color:#9ce7ff;font-weight:800}
.paused canvas{filter:brightness(.38)}
.side-hud{display:none}
@media (min-width:1100px) and (pointer:fine){
body{background:radial-gradient(circle at 50% 25%,#123652 0,#020812 48%,#000 100%)}
#wrap{width:min(100vw,calc(100dvh * 16 / 9));max-height:100dvh;display:grid;grid-template-columns:1fr minmax(540px,75dvh) 1fr;background:#030914}
canvas{grid-column:2;width:100%;height:100dvh;border-inline:1px solid #28607d;box-shadow:0 0 42px #000}
#hud{left:calc((100% - min(540px,75dvh))/2);right:calc((100% - min(540px,75dvh))/2)}
#hud #score,#hud #life,#combatStatus{display:none}
#bossHud{left:calc((100% - min(540px,75dvh))/2 + 10%);right:calc((100% - min(540px,75dvh))/2 + 10%)}
.side-hud{display:block;position:absolute;z-index:6;top:0;bottom:0;width:calc((100% - min(540px,75dvh))/2);padding:9vh clamp(18px,2vw,38px);background:linear-gradient(90deg,#020813f2,#071827e8);border-right:1px solid #1e526d;color:#d6f2ff}
#leftHud{left:0}
#rightHud{right:0;background:linear-gradient(270deg,#020813f2,#071827e8);border-right:0;border-left:1px solid #1e526d}
.side-hud>p{margin:0 0 28px;color:#5fdcff;font-size:11px;font-weight:900;letter-spacing:.22em}
.side-hud dl{margin:0}.side-hud dl div{padding:16px 0;border-top:1px solid #24506b99}.side-hud dt{color:#6f9eb5;font-size:10px;letter-spacing:.16em}.side-hud dd{margin:6px 0 0;font-size:clamp(16px,1.55vw,25px);font-weight:900;letter-spacing:.04em}.side-hud dd.status-on{color:#63e8ff;text-shadow:0 0 12px #2ac9ff}
.side-boss{margin-top:30px}.side-boss span{font-size:10px;color:#ff8b78;letter-spacing:.14em}.side-boss i{display:block;height:10px;margin-top:9px;padding:2px;border:1px solid #ff6255;border-radius:9px}.side-boss b{display:block;width:100%;height:100%;border-radius:5px;background:linear-gradient(90deg,#ffb13b,#ff3b4e)}
#menu,#result{grid-column:1/4}
#menu h1{font-size:clamp(54px,9vw,104px);letter-spacing:-.06em}
}
@media(pointer:coarse),(max-width:700px){#touchControls.active{display:flex}
.keys{display:none}
}
@media(orientation:landscape) and (max-height:520px){#rotate{display:grid}
}