:root {
  --ink: #eef3f6;
  --dim: rgba(238, 243, 246, 0.55);
  --cyan: #5ff4ff;
  --red: #ff4b3e;
  --amber: #ffb347;
  --bg: #070b12;
  --font: 'Barlow Condensed', 'Arial Narrow', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font); overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: none; }
button { font: inherit; color: inherit; cursor: pointer; }
#view, #view canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.4s; }
body[data-phase='playing'] #hud, body[data-phase='dead'] #hud { opacity: 1; }
#hud b, #hud span, #hud small { text-shadow: 0 0 12px rgba(0, 0, 0, 0.6); }

#wave-box { position: absolute; top: max(18px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); text-align: center; width: 240px; }
.wave-line { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.wave-line span { font-weight: 600; font-size: 14px; letter-spacing: 0.3em; color: var(--dim); }
.wave-line b { font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: 0.04em; }
.threat { height: 3px; margin: 6px auto 4px; width: 200px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.threat i { display: block; height: 100%; width: 0; background: var(--red); box-shadow: 0 0 10px var(--red); transition: width 0.25s; }
#left { font-weight: 600; font-size: 13px; letter-spacing: 0.22em; color: var(--dim); }

#score-box { position: absolute; top: max(18px, env(safe-area-inset-top)); right: max(24px, env(safe-area-inset-right)); text-align: right; }
#score { display: block; font-weight: 800; font-size: 30px; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
#combo { font-weight: 700; font-size: 18px; color: var(--amber); opacity: 0.35; transition: opacity 0.2s, transform 0.15s; display: inline-block; }
#combo.hot { opacity: 1; }
#combo.pop { transform: scale(1.35); }
#combo-bar { display: block; height: 2px; margin-top: 4px; margin-left: auto; width: 0; background: var(--amber); box-shadow: 0 0 8px var(--amber); }

#crosshair { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transition: opacity 0.12s; }
#crosshair i { position: absolute; background: #fff; box-shadow: 0 0 2px rgba(0, 0, 0, 0.9); }
#crosshair .t, #crosshair .b { width: 2px; height: 9px; left: -1px; }
#crosshair .l, #crosshair .r { width: 9px; height: 2px; top: -1px; }
#crosshair .dot { width: 3px; height: 3px; left: -1.5px; top: -1.5px; border-radius: 50%; }
#crosshair.red i { background: var(--red); }

#hitmarker { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; }
#hitmarker i { position: absolute; width: 2px; height: 10px; background: #fff; left: -1px; top: -5px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.7); }
#hitmarker i:nth-child(1) { transform: rotate(45deg) translateY(-12px); }
#hitmarker i:nth-child(2) { transform: rotate(135deg) translateY(-12px); }
#hitmarker i:nth-child(3) { transform: rotate(225deg) translateY(-12px); }
#hitmarker i:nth-child(4) { transform: rotate(315deg) translateY(-12px); }
#hitmarker.crit i { background: var(--amber); }
#hitmarker.kill i { background: var(--red); height: 15px; width: 3px; }
#hitmarker.armor i { background: #9fb3c8; }

#dmg { position: absolute; left: 50%; top: 50%; }
#dmg .arc { position: absolute; left: -90px; top: -90px; width: 180px; height: 180px; border-radius: 50%; border: 5px solid transparent; border-top-color: rgba(255, 60, 40, 0.95); filter: drop-shadow(0 0 8px rgba(255, 40, 20, 0.9)); opacity: 0; -webkit-mask: linear-gradient(90deg, transparent 30%, #000 45%, #000 55%, transparent 70%); mask: linear-gradient(90deg, transparent 30%, #000 45%, #000 55%, transparent 70%); }

#threats { position: absolute; left: 50%; top: 50%; }
#threats i { position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; opacity: 0; }
#threats i::before { content: ''; position: absolute; left: 3px; top: 0; border: 10px solid transparent; border-bottom: 16px solid var(--red); border-top: 0; filter: drop-shadow(0 0 6px rgba(255, 60, 40, 0.9)); }
#threats i.arm::before { animation: blink 0.25s infinite; }
#dash { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; transform: rotate(-90deg); opacity: 0; transition: opacity 0.2s; }
#dash circle { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-dasharray: 107; stroke-dashoffset: 107; filter: drop-shadow(0 0 3px var(--cyan)); }

#popups { position: absolute; left: 50%; top: 50%; }
.pop { position: absolute; left: 34px; white-space: nowrap; font-weight: 800; font-size: 20px; letter-spacing: 0.05em; animation: pop 0.9s ease-out forwards; }
.pop.crit { color: var(--amber); }
.pop.big { font-size: 28px; color: var(--red); }
.pop.heal { color: #6fffd8; }
@keyframes pop { 0% { transform: translateY(0) scale(1.25); opacity: 0; } 12% { opacity: 1; transform: translateY(-6px) scale(1); } 100% { transform: translateY(-46px); opacity: 0; } }

#health { position: absolute; left: max(28px, env(safe-area-inset-left)); bottom: max(24px, env(safe-area-inset-bottom)); width: 260px; }
.hp-num { display: flex; align-items: baseline; gap: 8px; }
.hp-num b { font-weight: 800; font-size: 46px; line-height: 1; font-variant-numeric: tabular-nums; }
.hp-num span { font-weight: 600; font-size: 13px; letter-spacing: 0.3em; color: var(--dim); }
.hp-bar { position: relative; height: 8px; margin-top: 6px; background: rgba(255, 255, 255, 0.12); transform: skewX(-18deg); overflow: hidden; }
.hp-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: left; }
#hp-fill { background: var(--ink); box-shadow: 0 0 12px rgba(255, 255, 255, 0.5); }
#hp-ghost { background: var(--red); transition: transform 0.6s 0.25s; }
#health.low #hp-fill { background: var(--red); }
#health.low b { color: var(--red); }

#ammo { position: absolute; right: max(28px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); text-align: right; }
.mag b { font-weight: 800; font-size: 56px; line-height: 1; font-variant-numeric: tabular-nums; }
.mag span { font-weight: 600; font-size: 20px; color: var(--dim); }
#ammo.low .mag b { color: var(--red); }
#wname { font-weight: 700; font-size: 14px; letter-spacing: 0.25em; color: var(--dim); margin-top: 2px; }
#slots { display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px; }
#slots i { font-style: normal; font-weight: 700; font-size: 12px; width: 22px; height: 18px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.25); color: var(--dim); transform: skewX(-12deg); }
#slots i.on { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 8px rgba(95, 244, 255, 0.4); }
#reload-hint { position: absolute; left: 50%; top: calc(50% + 46px); transform: translateX(-50%); font-weight: 700; letter-spacing: 0.35em; font-size: 14px; color: var(--amber); opacity: 0; }
#reload-hint.show { opacity: 1; animation: blink 0.8s infinite; }
@keyframes blink { 50% { opacity: 0.35; } }

#banner { position: absolute; left: 0; right: 0; top: 24%; text-align: center; opacity: 0; transform: scale(1.06); transition: opacity 0.35s, transform 0.5s; }
#banner.show { opacity: 1; transform: none; }
#banner small { display: block; font-weight: 600; letter-spacing: 0.5em; font-size: 15px; color: var(--cyan); }
#banner h2 { margin: 4px 0 0; font-weight: 800; font-size: clamp(44px, 8vw, 92px); letter-spacing: 0.06em; line-height: 0.95; text-shadow: 0 0 30px rgba(95, 244, 255, 0.35); }
#banner.danger small { color: var(--red); }
#banner.danger h2 { text-shadow: 0 0 30px rgba(255, 75, 62, 0.5); }

/* ---------- Touch ---------- */
#touch { position: fixed; inset: 0; display: none; touch-action: none; }
body.touch[data-phase='playing'] #touch { display: block; }
.stick { position: absolute; left: 0; top: 0; width: 140px; height: 140px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.04); transform: translate(calc(max(24px, env(safe-area-inset-left)) + 20px), calc(100vh - 190px)); pointer-events: none; opacity: 0.6; }
.stick.on { opacity: 1; }
.stick i { position: absolute; left: 45px; top: 45px; width: 50px; height: 50px; border-radius: 50%; background: rgba(255, 255, 255, 0.28); }
.tb { position: absolute; border: 1.5px solid rgba(255, 255, 255, 0.28); background: rgba(10, 16, 24, 0.35); color: rgba(255, 255, 255, 0.85); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; border-radius: 50%; width: 58px; height: 58px; display: grid; place-items: center; touch-action: none; backdrop-filter: blur(2px); }
.tb.on, .tb.latched { background: rgba(95, 244, 255, 0.28); border-color: var(--cyan); }
.tb.fire { right: max(36px, env(safe-area-inset-right)); bottom: 70px; width: 96px; height: 96px; border-color: rgba(255, 75, 62, 0.6); background: rgba(255, 75, 62, 0.12); }
.tb.fire::after { content: ''; width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255, 120, 100, 0.9); }
.tb.fire.on { background: rgba(255, 75, 62, 0.35); }
.tb.aim { right: calc(max(36px, env(safe-area-inset-right)) + 112px); bottom: 118px; }
.tb.jump { right: calc(max(36px, env(safe-area-inset-right)) + 18px); bottom: 186px; }
.tb.slide { right: calc(max(36px, env(safe-area-inset-right)) + 118px); bottom: 40px; }
.tb.dash { right: calc(max(36px, env(safe-area-inset-right)) + 90px); bottom: 196px; width: 50px; height: 50px; font-size: 11px; }
.tb.reload { right: calc(max(36px, env(safe-area-inset-right)) + 196px); bottom: 70px; width: 48px; height: 48px; }
.tb.swap { right: max(20px, env(safe-area-inset-right)); top: calc(max(14px, env(safe-area-inset-top)) + 54px); width: 42px; height: 42px; border-radius: 10px; font-size: 18px; }
.tb.pause { right: max(20px, env(safe-area-inset-right)); top: max(14px, env(safe-area-inset-top)); width: 42px; height: 42px; border-radius: 10px; font-size: 14px; }
body.touch #score-box { right: calc(max(24px, env(safe-area-inset-right)) + 56px); }
body.touch #ammo { bottom: auto; top: calc(max(18px, env(safe-area-inset-top)) + 52px); right: calc(max(20px, env(safe-area-inset-right)) + 56px); }
body.touch #wname { font-size: 12px; }
body.touch #banner { top: 26%; }
body.touch #banner h2 { font-size: clamp(30px, 6.5vw, 64px); }
body.touch #banner small { font-size: 12px; }
body.touch .mag b { font-size: 36px; }
body.touch #slots { display: none; }
body.touch #health { bottom: auto; top: max(16px, env(safe-area-inset-top)); width: 200px; }
body.touch .hp-num b { font-size: 30px; }

/* ---------- Screens ---------- */
.screen { position: fixed; inset: 0; display: flex; }
.screen[hidden] { display: none; }
#menu { background: linear-gradient(90deg, rgba(4, 7, 12, 0.92) 0%, rgba(4, 7, 12, 0.72) 38%, rgba(4, 7, 12, 0.05) 75%), linear-gradient(0deg, rgba(4, 7, 12, 0.8), transparent 40%); align-items: center; padding: 0 max(7vw, 28px); }
body:not([data-phase='menu']) #menu { display: none; }
.brand { position: absolute; top: max(22px, env(safe-area-inset-top)); left: max(7vw, 28px); }
.brand a { color: var(--dim); text-decoration: none; font-weight: 700; font-size: 14px; letter-spacing: 0.3em; }
.brand a:hover { color: var(--ink); }
.menu-main { max-width: 560px; }
.kicker { margin: 0; font-weight: 600; letter-spacing: 0.42em; font-size: 14px; color: var(--cyan); }
.logo { margin: 6px 0 4px; font-weight: 800; font-size: clamp(72px, 13vw, 168px); line-height: 0.82; letter-spacing: 0.01em; font-style: italic; text-shadow: 0 0 40px rgba(95, 244, 255, 0.25); }
.logo span { color: transparent; -webkit-text-stroke: 2px var(--cyan); text-shadow: 0 0 24px rgba(95, 244, 255, 0.55); }
.tag { margin: 14px 0 30px; font-size: 21px; font-weight: 500; color: rgba(238, 243, 246, 0.78); }
.primary { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 260px; height: 62px; padding: 0 34px; border: 0; background: var(--cyan); color: #04121a; font-weight: 800; font-size: 24px; letter-spacing: 0.24em; clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); transition: transform 0.15s, filter 0.15s, box-shadow 0.15s; }
.primary:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.12); }
.primary:active:not(:disabled) { transform: translateY(1px); }
.primary:disabled { background: rgba(255, 255, 255, 0.14); color: var(--dim); cursor: wait; }
.record { margin: 18px 0 0; font-weight: 600; font-size: 15px; letter-spacing: 0.2em; color: var(--dim); min-height: 1em; }
.menu-links { display: flex; gap: 22px; margin-top: 26px; }
.link { background: none; border: 0; padding: 6px 0; font-weight: 700; letter-spacing: 0.26em; font-size: 15px; color: var(--dim); border-bottom: 1px solid transparent; }
.link:hover { color: var(--ink); border-bottom-color: var(--cyan); }
.panel { position: absolute; right: max(6vw, 24px); top: 50%; transform: translateY(-50%); width: min(380px, calc(100vw - 48px)); max-height: calc(100vh - 40px); overflow: auto; padding: 26px 28px; background: rgba(8, 13, 20, 0.88); border: 1px solid rgba(95, 244, 255, 0.18); backdrop-filter: blur(10px); }
.panel h3 { margin: 0 0 18px; letter-spacing: 0.3em; font-size: 16px; color: var(--cyan); }
.panel label { display: block; margin-bottom: 18px; font-weight: 600; font-size: 15px; letter-spacing: 0.06em; }
.panel output { float: right; color: var(--dim); font-variant-numeric: tabular-nums; }
.panel input[type='range'] { width: 100%; margin-top: 8px; accent-color: var(--cyan); }
.panel select { width: 100%; margin-top: 8px; padding: 8px; font: inherit; font-size: 15px; background: #0d1520; color: var(--ink); border: 1px solid rgba(255, 255, 255, 0.2); }
.panel dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0 0 16px; font-size: 16px; }
.panel dt { color: var(--dim); letter-spacing: 0.1em; }
.panel dd { margin: 0; font-weight: 600; }
.panel .note { font-size: 15px; line-height: 1.4; color: rgba(238, 243, 246, 0.75); margin: 0 0 16px; }

#pause, #over { background: rgba(4, 7, 12, 0.72); backdrop-filter: blur(6px); align-items: center; justify-content: center; }
.center-card { text-align: center; padding: 20px; }
.center-card h2 { margin: 6px 0 26px; font-weight: 800; font-size: clamp(54px, 9vw, 104px); line-height: 0.9; font-style: italic; letter-spacing: 0.03em; }
.center-card .link { display: block; margin: 18px auto 0; }
#over .kicker { color: var(--red); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(110px, 1fr)); gap: 14px 28px; margin: 0 auto 26px; max-width: 520px; }
.stats div { text-align: left; border-left: 2px solid rgba(95, 244, 255, 0.4); padding-left: 12px; }
.stats small { display: block; color: var(--dim); font-weight: 600; letter-spacing: 0.24em; font-size: 12px; }
.stats b { font-weight: 800; font-size: 30px; font-variant-numeric: tabular-nums; }
.newbest { color: var(--amber); font-weight: 800; letter-spacing: 0.4em; margin: -8px 0 20px; animation: blink 0.9s infinite; }

#loader { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; background: var(--bg); transition: opacity 0.6s; z-index: 5; }
#loader b { font-weight: 800; font-style: italic; font-size: 44px; letter-spacing: 0.08em; }
#loader i { display: block; width: 220px; height: 3px; background: rgba(255, 255, 255, 0.12); }
#loader em { display: block; height: 100%; width: 0; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); transition: width 0.25s; }
#loader small { color: var(--dim); letter-spacing: 0.25em; font-size: 13px; font-weight: 600; text-transform: uppercase; }
body:not([data-phase='loading']) #loader { opacity: 0; pointer-events: none; }
#fail { position: fixed; inset: 0; display: grid; place-content: center; text-align: center; background: var(--bg); z-index: 6; padding: 24px; }
#fail[hidden] { display: none; }
#fail button { margin-top: 12px; padding: 10px 24px; background: var(--cyan); border: 0; color: #04121a; font-weight: 800; letter-spacing: 0.2em; }

@media (max-width: 760px), (max-height: 500px) {
  #menu { background: linear-gradient(90deg, rgba(4, 7, 12, 0.94), rgba(4, 7, 12, 0.6)); }
  .logo { font-size: clamp(60px, 15vw, 110px); }
  .tag { font-size: 17px; margin: 8px 0 18px; }
  .primary { height: 54px; min-width: 220px; font-size: 21px; }
  .menu-links { margin-top: 14px; }
  .stats b { font-size: 24px; }
  .center-card h2 { margin-bottom: 16px; }
}
@media (max-height: 420px) {
  .kicker { font-size: 12px; }
  .logo { font-size: 64px; }
  .record { margin-top: 10px; }
  .stats { gap: 8px 20px; margin-bottom: 14px; }
}