:root{color-scheme:dark;font-family:Inter,"Noto Sans JP",system-ui,sans-serif;background:#02040b;color:#eef6ff}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#02040b}#glCanvas{width:100%;height:100%;display:block;touch-action:none}
#vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle,transparent 47%,rgba(0,0,0,.42) 100%);mix-blend-mode:multiply}
#damageFlash{position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle,transparent 30%,rgba(255,20,20,.8));opacity:0;transition:opacity .2s}
.panel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(720px,calc(100% - 32px));padding:34px;border:1px solid rgba(120,190,255,.28);border-radius:24px;background:linear-gradient(145deg,rgba(8,15,30,.92),rgba(2,5,13,.86));box-shadow:0 30px 100px rgba(0,0,0,.7),inset 0 0 70px rgba(32,104,180,.08);backdrop-filter:blur(18px)}
.panel:before{content:"";position:absolute;inset:10px;border:1px solid rgba(99,170,255,.1);border-radius:16px;pointer-events:none}.eyebrow{font-size:12px;letter-spacing:.28em;color:#70d5ff;margin-bottom:12px}.panel h1{font-size:clamp(38px,7vw,76px);line-height:.88;margin:0;letter-spacing:-.05em}.panel h1 span{font-size:.48em;letter-spacing:.14em;color:#ffcf42}.lead{font-size:16px;color:#c6d8e8;margin:22px 0}.controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:18px 0 24px}.controls div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(255,255,255,.08);padding:8px 2px;font-size:12px}.controls b{color:#fff}.controls span{color:#7f9bb4;text-align:right}
button{width:100%;border:0;border-radius:12px;padding:15px 18px;font-size:16px;font-weight:800;letter-spacing:.06em;background:linear-gradient(90deg,#168cff,#56d6ff);color:#00111d;cursor:pointer;box-shadow:0 8px 35px rgba(18,139,255,.35)}button:disabled{opacity:.45;cursor:not-allowed}.secondary{margin-top:10px;background:rgba(255,255,255,.08);color:#dceeff;box-shadow:none;border:1px solid rgba(255,255,255,.12)}.status{font-size:12px;color:#6f8aa3;margin:14px 0 0;text-align:center}.hidden{display:none!important}
.hud{position:fixed;inset:0;pointer-events:none}.hudTop{position:absolute;left:24px;right:24px;top:20px;display:flex;justify-content:space-between}.hudTop div{min-width:120px;padding:10px 14px;border-left:2px solid #50c9ff;background:linear-gradient(90deg,rgba(4,18,37,.72),transparent)}.hudTop small{display:block;color:#6ebde2;letter-spacing:.2em;font-size:10px}.hudTop strong{display:block;font-size:24px;font-family:ui-monospace,monospace}.reticle{position:absolute;left:50%;top:50%;width:48px;height:48px;transform:translate(-50%,-50%)}.reticle i{position:absolute;background:#74e7ff;box-shadow:0 0 8px #36cfff}.reticle i:nth-child(1){width:13px;height:2px;left:0;top:23px}.reticle i:nth-child(2){width:13px;height:2px;right:0;top:23px}.reticle i:nth-child(3){width:2px;height:13px;left:23px;top:0}.reticle i:nth-child(4){width:2px;height:13px;left:23px;bottom:0}.message{position:absolute;left:50%;top:64%;transform:translateX(-50%);font-weight:900;letter-spacing:.18em;color:#fff;text-shadow:0 0 14px #2ecbff;opacity:0;transition:opacity .25s}.desktopHelp{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font-size:11px;color:#7290a8;white-space:nowrap}
@media(max-width:640px){.panel{padding:24px}.controls{grid-template-columns:1fr}.panel h1{font-size:42px}.desktopHelp{display:none}}