:root { color-scheme: dark; --cyan: #55f5e5; --blue: #65a8ff; --gold: #ffd56a; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { display: grid; place-items: center; background: radial-gradient(circle at 50% 25%, #10224a, #030711 70%); color: #eefcff; font-family: "Segoe UI", system-ui, sans-serif; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
button { color: inherit; font: inherit; cursor: pointer; touch-action: none; }
button:focus-visible, canvas:focus-visible { outline: 3px solid white; outline-offset: 4px; }
#game-container { position: relative; width: min(calc(100vw - 40px), calc((100dvh - 40px) * 4 / 3)); aspect-ratio: 4 / 3; max-height: calc(100dvh - 40px); }
canvas { display: block; width: 100%; height: 100%; border: 1px solid #6feee988; border-radius: 10px; background: #020611; box-shadow: 0 18px 70px #000c, 0 0 28px #40e9de22; touch-action: none; }
#hud { position: absolute; inset: 12px 16px auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: #c9fffa; font: 700 14px/1 ui-monospace, "Cascadia Mono", monospace; letter-spacing: .12em; pointer-events: none; text-shadow: 0 2px 8px #000; }
#wave { color: var(--gold); }
#lives { text-align: right; }
#status { position: absolute; left: 50%; bottom: 15px; transform: translateX(-50%); min-height: 20px; color: var(--cyan); font: 700 12px/1 ui-monospace, monospace; letter-spacing: .1em; white-space: nowrap; pointer-events: none; }
#power-status { position: absolute; right: 15px; bottom: 15px; color: #ffd56a; font: 700 11px/1 ui-monospace, monospace; letter-spacing: .08em; pointer-events: none; }
#boss-hud { position: absolute; top: 38px; left: 50%; width: min(380px, 60%); transform: translateX(-50%); text-align: center; color: #ffc9d4; font: 700 10px/1 ui-monospace, monospace; letter-spacing: .16em; }
#boss-hud > div { height: 7px; margin-top: 5px; border: 1px solid #ff829c; background: #250714; }
#boss-hud i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #ff4f84, #ffd56a); }
#help-button, #sound-button { position: fixed; z-index: 50; border: 1px solid #7edbd699; background: #0b2030aa; backdrop-filter: blur(5px); }
#help-button { top: 16px; right: 18px; width: 38px; height: 38px; border-radius: 50%; }
#sound-button { right: 66px; top: 18px; padding: 7px 10px; border-radius: 5px; font: 700 10px/1 ui-monospace, monospace; }
.modal { position: fixed; inset: 0; z-index: 1000; display: none; place-items: center; padding: 22px; overflow-y: auto; background: #020711e8; }
.modal.is-visible { display: grid; }
.modal-card { width: min(590px, 100%); max-height: calc(100dvh - 44px); overflow-y: auto; padding: 28px; border: 1px solid #5ce7db88; border-radius: 12px; background: linear-gradient(145deg, #10253b, #07111f); box-shadow: 0 26px 90px #000d, inset 0 0 50px #53e6dd0c; }
.eyebrow { margin: 0 0 8px; color: var(--cyan); font: 700 11px/1 ui-monospace, monospace; letter-spacing: .18em; }
.modal h1, .modal h2 { margin: 0 0 16px; color: white; font-size: clamp(28px, 7vw, 48px); letter-spacing: .03em; }
.modal h2 { font-size: 32px; }
.modal p { color: #c7d9e7; line-height: 1.55; }
.control-guide { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.control-guide p { margin: 0; padding: 12px; border: 1px solid #65a8ff3d; border-radius: 7px; background: #071728; }
.settings { display: flex; gap: 18px; margin: 14px 0 4px; color: #d8f4f3; font: 700 12px/1 ui-monospace, monospace; }
.settings label { display: flex; align-items: center; gap: 7px; min-height: 32px; }
.settings input { width: 18px; height: 18px; accent-color: var(--cyan); }
.primary { width: 100%; min-height: 48px; margin-top: 12px; border: 0; border-radius: 6px; background: linear-gradient(90deg, #59eedd, #69a9ff); color: #06141f; font-weight: 900; letter-spacing: .12em; }
.result-card { max-width: 430px; text-align: center; }
#run-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0; }
#run-summary span { padding: 12px; border: 1px solid #62c8c34a; background: #071728; color: #c9fffa; font: 700 12px/1.4 ui-monospace, monospace; }
#touch-controls { display: none; pointer-events: none; }
.control-cluster { display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.control-button { width: 120px; height: 70px; border: 1px solid #68ddd5aa; border-radius: 12px; background: linear-gradient(#183f53, #0b2331); color: white; box-shadow: 0 4px 0 #030c13; font-weight: 900; letter-spacing: .08em; pointer-events: auto; }
.control-button.fire { background: linear-gradient(#ffe27f, #d49f35); color: #182027; border-color: #fff0b0; }
.control-button small { display: block; margin-top: 4px; font: 700 9px/1 ui-monospace, monospace; color: #93d9d4; }
.control-button.pressed { transform: translateY(3px); box-shadow: 0 1px 0 #030c13, inset 0 0 0 2px white; }
.control-button:disabled { opacity: .45; filter: saturate(.35); }
body.touch-device #help-button, body.touch-device #sound-button { display: none; }
body.touch-device #touch-controls { display: flex; position: fixed; inset: 0; align-items: center; justify-content: space-between; padding: 8px; z-index: 38; }
@media (max-width: 900px), (pointer: coarse) {
  #game-container { width: min(calc(100vw - 288px), calc((100dvh - 8px) * 4 / 3)); max-height: calc(100dvh - 8px); }
  canvas { border-radius: 5px; box-shadow: 0 10px 35px #000b; }
  #hud { inset: 8px 10px auto; font-size: 10px; }
  #status { bottom: 7px; font-size: 9px; }
  #power-status { right: 8px; bottom: 7px; font-size: 8px; }
  .control-button { width: 120px; height: 62px; }
}
@media (max-width: 599px), (orientation: portrait) and (pointer: coarse) {
  body { display: flex; align-items: flex-start; justify-content: center; }
  #game-container { width: calc(100vw - 16px); height: auto; max-height: none; margin-top: max(62px, env(safe-area-inset-top)); }
  html body.touch-device #game-container #touch-controls { position: fixed !important; inset: auto 10px max(16px, env(safe-area-inset-bottom)) !important; height: 230px !important; }
  .control-button { width: 118px; }
  .control-guide { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}