:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ice: #c9fbf3;
  --sea: #71ead7;
  --navy: #06111f;
  --line: rgba(218, 244, 255, .23);
  --danger: #ff4c58;
  --gold: #ffe07a;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #020711; }
body {
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 25%, #16495a 0, #071923 42%, #01070b 100%);
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: none;
}
button, input, select { font: inherit; }
#gameShell {
  position: relative;
  width: min(100vw, 133.333333vh);
  height: min(100vh, 75vw);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  isolation: isolate;
  background: #9db1c7;
  box-shadow: 0 0 0 1px #dff7ff2b, 0 28px 100px #000c;
  touch-action: none;
}
#gameCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: none; }
.hud {
  position: absolute; z-index: 12; top: 1.2%; left: 1.2%; right: 1.2%; height: 5.8%;
  display: grid; grid-template-columns: .72fr 1.28fr 1.45fr; gap: .65%; pointer-events: none;
}
.hud-block {
  min-width: 0; display: flex; align-items: center; gap: .55em; padding: .35em .78em;
  border: 1px solid var(--line); border-radius: .7em;
  background: linear-gradient(180deg, #10283de8, #06131fe8);
  box-shadow: inset 0 1px #ffffff18, 0 .4em 1.2em #0005; backdrop-filter: blur(9px);
}
.hud-label { display: block; color: #91b3c9; font-size: clamp(.45rem, .78vw, .7rem); font-weight: 800; letter-spacing: .14em; line-height: 1; }
.hud strong { color: #f5fbff; font-size: clamp(.72rem, 1.35vw, 1.3rem); line-height: 1.05; text-shadow: 0 1px 0 #000; }
.wave-block { align-items: baseline; }
.wave-block > strong { font-size: clamp(1.2rem, 2.1vw, 2rem); color: var(--gold); }
.wave-block small { margin-left: auto; color: #b8ccda; font-size: clamp(.45rem, .72vw, .67rem); }
.line-block { justify-content: center; }
.line-dot { width: clamp(.55rem, 1.1vw, 1rem); aspect-ratio: 1; border-radius: 50%; background: #5af3a0; box-shadow: 0 0 .85em #5af3a0; transition: .18s; }
.line-block strong { display: block; color: #71f6ad; letter-spacing: .08em; }
.line-block.warning .line-dot { background: #ffd166; box-shadow: 0 0 .85em #ffd166; animation: pulse .6s infinite alternate; }
.line-block.warning strong { color: #ffd166; }
.line-block.danger .line-dot { background: var(--danger); box-shadow: 0 0 1em var(--danger); animation: pulse .25s infinite alternate; }
.line-block.danger strong { color: #ff8991; }
.stats-block { justify-content: space-between; }
.stats-block > div { min-width: 0; text-align: right; }
.stats-block strong { display: block; white-space: nowrap; }
.weapon-bar {
  position: absolute; z-index: 13; top: 7.7%; left: 1.2%; right: 1.2%; height: 6.6%;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5%;
}
.weapon-card {
  position: relative; min-width: 0; display: grid; grid-template-columns: auto auto 1fr; grid-template-rows: 1fr 1fr;
  align-items: center; gap: 0 .38em; padding: .22em .38em; overflow: hidden; color: #dfeef7;
  border: 1px solid #d9f2ff27; border-radius: .6em; background: linear-gradient(180deg, #1c3448e8, #0b1d2ce8);
  box-shadow: inset 0 1px #fff2, 0 .25em .8em #0005; cursor: pointer;
  transition: transform .13s, border-color .13s, filter .13s, background .13s; backdrop-filter: blur(7px);
}
.weapon-card:hover { transform: translateY(-2px); border-color: #d8f4ff88; }
.weapon-card.active { border-color: var(--sea); background: linear-gradient(180deg, #24544edc, #102b31ed); box-shadow: inset 0 0 0 1px #71ead744, 0 0 1.1em #71ead735; }
.weapon-card.locked { filter: saturate(.5) brightness(.72); }
.weapon-card.affordable { border-color: #72f1ae88; animation: affordable 1.3s infinite alternate; }
.weapon-card .slot { grid-row: 1 / 3; display: grid; place-items: center; width: clamp(1.25rem, 2vw, 1.95rem); aspect-ratio: 1; color: #07121b; border-radius: .45em; background: #d9ecf7; font-size: clamp(.55rem, .82vw, .77rem); font-weight: 1000; }
.weapon-card .weapon-icon { grid-row: 1 / 3; width: clamp(1.7rem, 3.1vw, 3rem); height: clamp(1.1rem, 2.15vw, 2.05rem); object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 .2em .35em #0008); }
.weapon-card .weapon-name { grid-column: 3; align-self: end; overflow: hidden; color: #f5fbff; font-size: clamp(.43rem, .7vw, .68rem); font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.weapon-card .weapon-status { grid-column: 3; align-self: start; overflow: hidden; color: #9eb7c8; font-size: clamp(.37rem, .58vw, .55rem); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.weapon-card.locked .weapon-status { color: var(--gold); }
.ammo-hud {
  position: absolute; z-index: 12; right: 2%; bottom: 2%; width: 16%; min-width: 112px; padding: .55em .7em;
  border: 1px solid var(--line); border-radius: .75em; background: #061523dc;
  box-shadow: inset 0 1px #fff2, 0 .4em 1.5em #0007; pointer-events: none; backdrop-filter: blur(9px);
}
.ammo-hud > span { display: block; color: #a6c2d3; font-size: clamp(.48rem, .72vw, .68rem); font-weight: 900; letter-spacing: .08em; }
.ammo-hud strong { display: block; color: #fff; font-size: clamp(1.2rem, 2.15vw, 2rem); line-height: 1; text-align: right; }
.ammo-hud strong i { padding: 0 .12em; color: #7c98aa; font-size: .55em; font-style: normal; }
.ammo-hud strong span { color: #98adba; font-size: .58em; }
.ammo-hud small { display: block; margin-top: .2em; color: #97b0c0; font-size: clamp(.42rem, .62vw, .58rem); text-align: right; }
.reload-track { height: .25em; margin-top: .35em; overflow: hidden; border-radius: 999px; background: #ffffff16; }
.reload-track i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #65dfcc, #effffb); transition: width .05s linear; }
.boss-hud { position: absolute; z-index: 14; top: 15.1%; left: 24%; right: 24%; display: none; padding: .4em .7em .55em; border: 1px solid #ffb3ba55; border-radius: .65em; background: #260c18df; box-shadow: 0 .4em 1.5em #0009; pointer-events: none; }
.boss-hud.visible { display: block; animation: bossIn .3s ease-out; }
.boss-title { display: flex; justify-content: space-between; color: #ffd4d8; font-size: clamp(.48rem, .78vw, .72rem); font-weight: 950; letter-spacing: .12em; }
.boss-track { height: clamp(.35rem, .7vw, .65rem); margin-top: .3em; overflow: hidden; border-radius: 999px; background: #0e0308; }
.boss-track i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #d7133f, #ff8b55); box-shadow: 0 0 1em #ff315d; transition: width .1s; }
.danger-banner { position: absolute; z-index: 15; top: 18%; left: 50%; transform: translate(-50%, -1em); padding: .45em 1.1em; opacity: 0; color: #fff; border: 1px solid #ff9299; border-radius: 999px; background: #a51224e8; box-shadow: 0 0 1.5em #ff233d88; font-size: clamp(.55rem, 1vw, .9rem); font-weight: 1000; letter-spacing: .12em; pointer-events: none; transition: .18s; }
.danger-banner.visible { opacity: 1; transform: translate(-50%, 0); animation: pulse .35s infinite alternate; }
.toast { position: absolute; z-index: 30; left: 50%; bottom: 13%; transform: translate(-50%, .8em); max-width: 70%; padding: .45em 1em; opacity: 0; color: #06121d; border-radius: 999px; background: #e8f9ff; box-shadow: 0 .5em 2em #0008; font-size: clamp(.58rem, .9vw, .82rem); font-weight: 950; pointer-events: none; transition: .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.overlay { position: absolute; z-index: 40; inset: 0; display: none; place-items: center; padding: 2.5%; background: radial-gradient(circle at 50% 42%, #15344f8c, #020812e8 70%); backdrop-filter: blur(8px); }
.overlay.visible { display: grid; }
.panel { width: min(88%, 960px); max-height: 95%; overflow: auto; padding: clamp(1rem, 2.1vw, 2rem); color: #edf9ff; border: 1px solid #dff7ff2e; border-radius: clamp(1rem, 2vw, 1.8rem); background: linear-gradient(150deg, #183247f2, #06131ff5 62%); box-shadow: inset 0 1px #fff2, 0 2em 7em #000c; text-align: center; scrollbar-width: thin; }
.panel .eyebrow { margin: 0 0 .35em; color: var(--gold); font-size: clamp(.5rem, .75vw, .72rem); font-weight: 1000; letter-spacing: .25em; }
.panel h1, .panel h2 { margin: 0; color: #f3fbff; line-height: .94; letter-spacing: -.045em; text-shadow: 0 .08em .2em #0008; }
.panel h1 { font-size: clamp(2.2rem, 5.2vw, 5rem); }
.panel h2 { font-size: clamp(1.05rem, 1.7vw, 1.55rem); letter-spacing: 0; }
.title-sub { margin: .2em 0 0; color: var(--sea); font-size: clamp(.62rem, 1.15vw, 1.05rem); font-weight: 1000; letter-spacing: .22em; line-height: 1.15; text-shadow: 0 0 1.4em #5de0cd66; }
.start-panel { width: min(94%, 1060px); }
.start-heading { margin-bottom: .8em; }
.start-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: .85em; text-align: left; }
.briefing-card, .settings-card { padding: .85em .95em; border: 1px solid #ffffff17; border-radius: .9em; background: #ffffff0a; }
.briefing-card > p { margin: .65em 0; color: #aac3d2; font-size: clamp(.57rem, .78vw, .76rem); line-height: 1.45; }
.control-list { display: grid; grid-template-columns: 1fr 1fr; gap: .35em .55em; color: #b7cbd7; font-size: clamp(.52rem, .72vw, .69rem); }
kbd { display: inline-grid; place-items: center; min-width: 1.65em; padding: .12em .38em; color: #f9fdff; border: 1px solid #dff6ff40; border-radius: .35em; background: #172c3b; box-shadow: inset 0 -2px #0005; font: inherit; font-weight: 850; }
.weapon-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35em; margin-top: .75em; }
.weapon-preview img { width: 100%; height: clamp(2rem, 4.2vw, 3.9rem); object-fit: contain; padding: .25em; border-radius: .55em; background: #071625a8; image-rendering: pixelated; }
.settings-card { display: grid; gap: .38em; }
.settings-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: .15em; }
.text-button { padding: .2em .45em; color: #9fdacb; border: 0; background: transparent; font-size: clamp(.5rem, .7vw, .66rem); cursor: pointer; }
.text-button:hover { color: #fff; }
.setting-row, .toggle-row { min-height: 2.7em; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .8em; padding: .42em .55em; border-radius: .55em; background: #06152378; }
.setting-row > span:first-child, .toggle-row > span:first-child { min-width: 0; }
.setting-row b, .toggle-row b { display: block; color: #e8f7ff; font-size: clamp(.54rem, .74vw, .7rem); }
.setting-row small, .toggle-row small { display: block; margin-top: .1em; color: #7f9dac; font-size: clamp(.43rem, .58vw, .55rem); line-height: 1.2; }
select { min-width: 9.2em; padding: .38em .55em; color: #eaf8ff; border: 1px solid #d9f2ff2e; border-radius: .48em; background: #132b3b; outline: none; font-size: clamp(.5rem, .68vw, .65rem); }
.range-wrap { display: flex; align-items: center; gap: .45em; }
input[type="range"] { width: clamp(5.5rem, 10vw, 8.5rem); accent-color: var(--sea); }
output { min-width: 3em; color: #dffaf4; font-size: clamp(.5rem, .68vw, .65rem); text-align: right; }
.toggle-row { position: relative; cursor: pointer; }
.toggle-row input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-row i { position: relative; width: 2.35em; height: 1.25em; border-radius: 999px; background: #2d4655; box-shadow: inset 0 0 0 1px #ffffff14; transition: .16s; }
.toggle-row i::after { content: ""; position: absolute; top: .16em; left: .17em; width: .93em; height: .93em; border-radius: 50%; background: #afc2cc; transition: .16s; }
.toggle-row input:checked + i { background: #3ecbb5; }
.toggle-row input:checked + i::after { left: 1.25em; background: #effffa; }
.primary, .secondary { min-width: 13em; padding: .72em 1.25em; border-radius: .72em; font-weight: 1000; cursor: pointer; transition: transform .13s, filter .13s; }
.primary { color: #06131e; border: 0; background: linear-gradient(180deg, #a3f7e8, #5ed7c6); box-shadow: inset 0 1px #fff8, 0 .7em 2.2em #65e4d13a; }
.secondary { color: #d9ebf4; border: 1px solid #dff6ff34; background: #0b2030; }
.primary:hover:not(:disabled), .secondary:hover { transform: translateY(-2px); filter: brightness(1.08); }
.primary:active:not(:disabled), .secondary:active { transform: translateY(1px); }
.primary:disabled { cursor: wait; filter: grayscale(.5); opacity: .65; }
.start-panel > .primary { margin-top: .9em; }
.hint { display: block; margin-top: .55em; color: #728c9d; font-size: clamp(.43rem, .62vw, .58rem); }
.compact-panel { width: min(64%, 600px); padding: clamp(1.4rem, 3vw, 2.6rem); }
.compact-panel > p:not(.eyebrow) { color: #acc6d5; }
.button-row { display: flex; justify-content: center; flex-wrap: wrap; gap: .65em; margin-top: 1em; }
.breach-panel { border-color: #ff6d7750; background: linear-gradient(150deg, #4a1422ed, #120610f5 62%); }
.touch-control { display: none; }
@keyframes pulse { to { transform: scale(1.07); filter: brightness(1.18); } }
@keyframes affordable { to { box-shadow: 0 0 1em #72f1ae55; } }
@keyframes bossIn { from { transform: translateY(-.8em); opacity: 0; } }
@media (max-aspect-ratio: 4/3) { #gameShell { box-shadow: none; } }
@media (max-width: 760px) {
  .hud { grid-template-columns: .62fr 1.1fr 1.15fr; }
  .hud-block { padding: .25em .45em; }
  .weapon-card { padding: .15em .2em; gap: 0 .15em; }
  .weapon-card .slot { width: 1.15rem; }
  .weapon-card .weapon-icon { width: 1.6rem; }
  .start-layout { grid-template-columns: 1fr; }
  .briefing-card { display: none; }
  .panel { width: 94%; }
  .title-sub { letter-spacing: .14em; }
}
@media (pointer: coarse) {
  #gameCanvas { cursor: default; }
  .touch-control { display: block; position: absolute; z-index: 25; opacity: .52; touch-action: none; }
  .touch-move { left: 4%; bottom: 4%; width: 17%; aspect-ratio: 1; border: 2px solid #e7f8ff72; border-radius: 50%; background: #08192773; }
  .touch-move i { position: absolute; left: 33%; top: 33%; width: 34%; aspect-ratio: 1; border-radius: 50%; background: #e7f8ffb8; box-shadow: 0 0 1em #fff5; }
  .touch-fire { right: 5%; bottom: 11%; width: 14%; aspect-ratio: 1; color: #fff; border: 2px solid #ffb1b68a; border-radius: 50%; background: #a9182d9a; font-size: clamp(.55rem, 2.4vw, .9rem); font-weight: 1000; }
  .ammo-hud { bottom: 3%; right: 22%; }
}

/* V4 RETRO ARCADE PASS */
:root { --pixel-font: "Courier New", "Lucida Console", monospace; }
html, body, button, select, input, output { font-family: var(--pixel-font) !important; }
body { image-rendering: pixelated; }
#gameShell { border: 4px solid #91a8b8; border-radius: 0; box-shadow: 0 0 0 4px #132330, 0 0 0 7px #dce9ef, 0 1.2rem 4rem #000c; }
#gameShell::after { content:""; position:absolute; z-index:35; inset:0; pointer-events:none; opacity:.11; background:repeating-linear-gradient(0deg, transparent 0 3px, #000 3px 4px); mix-blend-mode:multiply; }
.hud-block, .weapon-card, .ammo-hud, .stamina-hud, .boss-hud, .panel, .briefing-card, .settings-card, .setting-row, .toggle-row, .weapon-preview img, select, kbd, .primary, .secondary { border-radius: 0 !important; }
.hud-block, .weapon-card, .ammo-hud, .stamina-hud { border-width:2px; box-shadow: inset 2px 2px #ffffff24, inset -2px -2px #0008, 4px 4px 0 #03101a99; }
.hud-label, .weapon-name, .weapon-status, .panel h1, .panel h2, .eyebrow, .title-sub, button, select { text-transform: uppercase; letter-spacing:.06em; text-shadow: 2px 2px 0 #000; }
.panel h1 { letter-spacing:.04em; text-shadow: 4px 4px 0 #071018, -2px -2px 0 #8fe9db; }
.primary { background:#6ee0cb; border:3px solid #d4fff7; box-shadow: inset -4px -4px #278f82, inset 4px 4px #e9fffb, 5px 5px 0 #02090e; }
.secondary { border:3px solid #7593a6; box-shadow: inset -3px -3px #07131d, inset 3px 3px #294355, 5px 5px 0 #02090e; }
select { border:2px solid #8ea8b8; box-shadow: inset -2px -2px #071018, inset 2px 2px #355367; }

.stamina-hud { position:absolute; z-index:13; left:2%; bottom:2%; width:22%; min-width:190px; padding:.55em .7em; color:#dffcff; border:2px solid #4f8190; background:#071827e8; pointer-events:none; }
.stamina-title { display:flex; justify-content:space-between; align-items:center; font-size:clamp(.46rem,.72vw,.68rem); font-weight:1000; letter-spacing:.1em; }
.stamina-title b { color:#ffd86a; }
.stamina-track { height:.65em; margin-top:.35em; border:2px solid #02080d; background:#132a38; box-shadow:inset 2px 2px #0008; }
.stamina-track i { display:block; width:0; height:100%; background:repeating-linear-gradient(90deg,#55dfc5 0 10px,#95ffe9 10px 15px); box-shadow:0 0 .7em #65ffe0; transition:width .16s linear; }
.stamina-hud.ready { border-color:#ffe175; animation:stormReady .45s steps(2,end) infinite; }
.stamina-hud.ready .stamina-track i { background:repeating-linear-gradient(90deg,#ffb92f 0 10px,#fff07b 10px 15px); }
.stamina-hud small { display:block; margin-top:.25em; color:#8fb0bf; font-size:clamp(.38rem,.56vw,.52rem); }
.storm-banner { position:absolute; z-index:34; top:46%; left:50%; transform:translate(-50%,-50%) scale(.8); opacity:0; color:#fff29a; font-size:clamp(2rem,6vw,5rem); font-weight:1000; letter-spacing:.08em; text-shadow:5px 5px 0 #7c120d,-3px -3px 0 #fff; pointer-events:none; }
.storm-banner.visible { opacity:1; animation:stormBanner .35s steps(2,end) infinite alternate; }
@keyframes stormReady { to { filter:brightness(1.35); } }
@keyframes stormBanner { to { transform:translate(-50%,-50%) scale(1.05); } }

.starting-weapons { margin:0; padding:.5em; border:2px solid #39586b; background:#06131f99; }
.starting-weapons legend { padding:0 .4em; color:#f4fbff; font-size:clamp(.52rem,.72vw,.68rem); font-weight:1000; letter-spacing:.08em; }
.starting-weapons > small { display:block; color:#7f9dac; font-size:clamp(.4rem,.55vw,.52rem); }
.starting-weapons-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.35em; margin-top:.45em; }
.start-weapon-option { position:relative; cursor:pointer; }
.start-weapon-option input { position:absolute; opacity:0; }
.start-weapon-option span { min-height:3.2em; display:grid; grid-template-columns:2.4em 1fr; align-items:center; gap:.3em; padding:.3em; border:2px solid #294657; background:#0b2030; box-shadow:inset -2px -2px #030a10,inset 2px 2px #28485d; }
.start-weapon-option img { width:2.3em; height:1.8em; object-fit:contain; image-rendering:pixelated; }
.start-weapon-option b { color:#8fa7b5; font-size:clamp(.38rem,.54vw,.5rem); line-height:1.15; }
.start-weapon-option input:checked + span { border-color:#6ee7cf; background:#17483f; box-shadow:inset -2px -2px #08241f,inset 2px 2px #7affea; }
.start-weapon-option input:checked + span b { color:#f0fffb; }
.storm-explain { margin-top:.65em; padding:.5em; border:2px dashed #66cbb8; color:#9ebbc7; font-size:clamp(.43rem,.61vw,.57rem); line-height:1.35; }
.storm-explain b { display:block; color:#ffe277; margin-bottom:.2em; }

@media (max-width:760px) { .starting-weapons-grid { grid-template-columns:repeat(2,1fr); } .stamina-hud { width:34%; } }


/* V5 CINEMATIC UI PASS */
:root { --pixel-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --glass: rgba(7,18,29,.72); --line: rgba(190,232,255,.24); }
html, body, button, select, input, output { font-family: var(--pixel-font) !important; }
body { image-rendering:auto; background:radial-gradient(circle at 50% 12%,#173a55 0,#07111d 44%,#02060b 100%); }
#gameShell { border:1px solid rgba(205,239,255,.26); border-radius:22px; overflow:hidden; box-shadow:0 32px 90px #000b,0 0 0 1px #fff1 inset; }
#gameShell::after { opacity:.16; background:linear-gradient(115deg,rgba(255,255,255,.08),transparent 25%,transparent 70%,rgba(76,205,255,.06)); mix-blend-mode:screen; }
#gameCanvas { image-rendering:auto; }
.hud { gap:.7em; padding:.75em; }
.hud-block,.weapon-card,.ammo-hud,.stamina-hud,.boss-hud { border:1px solid var(--line)!important; border-radius:14px!important; background:linear-gradient(150deg,rgba(14,36,53,.88),rgba(4,13,23,.74)); backdrop-filter:blur(16px) saturate(1.25); box-shadow:0 10px 28px #0007,inset 0 1px #fff2!important; }
.hud-label,.weapon-name,.weapon-status,.eyebrow,.title-sub,button,select { text-shadow:none; letter-spacing:.09em; }
.panel { border:1px solid rgba(184,229,255,.24)!important; border-radius:24px!important; background:linear-gradient(145deg,rgba(10,27,42,.94),rgba(3,10,18,.96)); backdrop-filter:blur(24px); box-shadow:0 36px 100px #000c,inset 0 1px #fff2; }
.panel h1 { text-shadow:0 0 28px rgba(98,227,212,.32); letter-spacing:.01em; }
.briefing-card,.settings-card,.setting-row,.toggle-row,.starting-weapons,.start-weapon-option span,.weapon-preview img,select { border-radius:12px!important; }
.briefing-card,.settings-card { border:1px solid rgba(182,229,255,.17); background:linear-gradient(145deg,rgba(16,40,57,.54),rgba(4,15,25,.58)); }
.setting-row,.toggle-row,.start-weapon-option span { border:1px solid rgba(173,218,244,.14); background:rgba(9,28,42,.58); box-shadow:inset 0 1px rgba(255,255,255,.04); }
.primary,.secondary { border-radius:12px!important; text-shadow:none; box-shadow:0 12px 30px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.3); transition:transform .18s ease,box-shadow .18s ease,filter .18s ease; }
.primary { border:1px solid #bafff3; background:linear-gradient(180deg,#9ff6e6,#48c7b5); }
.secondary { border:1px solid rgba(185,224,245,.3); background:linear-gradient(180deg,#18384c,#0a1d2b); }
.primary:hover:not(:disabled),.secondary:hover { transform:translateY(-2px) scale(1.01); box-shadow:0 18px 38px rgba(0,0,0,.42),0 0 30px rgba(87,224,204,.12); }
.weapon-card { transition:transform .16s ease,border-color .16s ease,background .16s ease; }
.weapon-card.selected { transform:translateY(-5px); border-color:rgba(123,245,222,.7)!important; background:linear-gradient(150deg,rgba(24,85,75,.9),rgba(5,25,31,.85)); }
.boss-hud { overflow:hidden; }
.boss-track,.reload-track,.stamina-track { border-radius:999px!important; overflow:hidden; border:1px solid rgba(255,255,255,.13); }
.boss-track i,.reload-track i,.stamina-track i { border-radius:999px; }
.start-weapon-option img,.weapon-preview img,.weapon-icon { image-rendering:auto!important; filter:drop-shadow(0 8px 10px rgba(0,0,0,.36)); }
.storm-banner { text-shadow:0 0 26px #ffdb58,0 8px 30px #000; }
@media (max-width:760px){#gameShell{border-radius:0}.panel{border-radius:18px!important}}

/* V7 CAMPAIGN, STORY & ENVIRONMENT PASS */
.wave-block { display:grid; grid-template-columns:auto auto 1fr; align-items:center; gap:.5em; }
.wave-block > .hud-label { align-self:center; }
.wave-block > strong { align-self:center; }
.wave-block > small { min-width:0; display:grid; gap:.08em; margin-left:0; line-height:1.05; }
.wave-block > small b { overflow:hidden; color:#e7f7ff; font-size:clamp(.38rem,.63vw,.58rem); letter-spacing:.08em; text-overflow:ellipsis; white-space:nowrap; }
.wave-block > small span { color:#8eabba; font-size:clamp(.36rem,.56vw,.52rem); }
.campaign-route { display:grid; grid-template-columns:repeat(5,1fr); gap:.28em; margin-top:.65em; }
.campaign-route span { min-width:0; padding:.38em .12em; color:#87a6b8; border:1px solid rgba(170,222,247,.13); border-radius:.65em; background:rgba(4,18,29,.55); font-size:clamp(.34rem,.48vw,.46rem); font-weight:850; text-align:center; letter-spacing:.05em; }
.campaign-route b { display:block; margin-bottom:.1em; color:#6fe3cf; font-size:1.18em; }
.settings-card { gap:.31em; }
.setting-row, .toggle-row { min-height:2.65em; }

.cinematic-overlay { position:absolute; z-index:80; inset:0; display:none; overflow:hidden; color:#edfaff; background:#020711; }
.cinematic-overlay.visible { display:block; }
.cinematic-backdrop { position:absolute; inset:-3%; background-position:center; background-size:cover; filter:saturate(1.06) contrast(1.05); transform:scale(1.035); animation:cinematicDrift 11s ease-in-out infinite alternate; }
.cinematic-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(2,8,16,.86) 0,rgba(2,8,16,.35) 46%,rgba(2,8,16,.18) 72%,rgba(2,8,16,.64) 100%),linear-gradient(180deg,#02060ccf 0,transparent 18%,transparent 75%,#02060df0 100%); }
.cinematic-overlay::before,.cinematic-overlay::after { content:""; position:absolute; z-index:8; left:0; right:0; height:7%; background:#010307; pointer-events:none; }
.cinematic-overlay::before { top:0; box-shadow:0 .8em 2em #0008; }
.cinematic-overlay::after { bottom:0; box-shadow:0 -.8em 2em #0008; }
.cinematic-copy { position:absolute; z-index:12; left:6.5%; bottom:10%; width:min(48%,620px); padding:1.05em 1.25em; border:1px solid rgba(196,236,255,.2); border-radius:1.2em; background:linear-gradient(145deg,rgba(7,22,35,.82),rgba(2,8,15,.68)); box-shadow:0 1.5em 4em #0009,inset 0 1px #fff1; backdrop-filter:blur(16px) saturate(1.2); }
.cinematic-kicker { margin:0 0 .45em; color:#7ff0dc; font-size:clamp(.48rem,.78vw,.72rem); font-weight:950; letter-spacing:.23em; }
.cinematic-copy h2 { margin:0; color:#f5fbff; font-size:clamp(1.55rem,3.6vw,3.5rem); line-height:.96; letter-spacing:-.045em; text-shadow:0 .16em .7em #000b; }
.cinematic-copy > p:not(.cinematic-kicker) { margin:.72em 0 0; color:#bed2de; font-size:clamp(.62rem,1vw,.95rem); line-height:1.5; }
.cinematic-skip { position:absolute; z-index:14; top:9.2%; right:3.2%; padding:.65em 1em; color:#d9edf7; border:1px solid rgba(196,234,251,.25); border-radius:999px; background:rgba(5,18,29,.58); font-size:clamp(.48rem,.72vw,.68rem); font-weight:850; letter-spacing:.09em; cursor:pointer; backdrop-filter:blur(10px); }
.cinematic-skip:hover { border-color:#7cead5; background:rgba(14,48,57,.72); }
.story-stage { position:absolute; z-index:5; inset:8% 0 7%; overflow:hidden; }
.story-asset,.story-enemies img,.story-bosses img { position:absolute; object-fit:contain; image-rendering:auto; filter:drop-shadow(0 1.2em 1.2em rgba(0,0,0,.72)); will-change:transform,opacity; }
.story-seal { right:7%; bottom:25%; width:24%; opacity:0; transform:translateX(28%) scale(.84); }
.story-enemies { position:absolute; left:2%; right:38%; bottom:17%; height:52%; opacity:0; }
.story-enemies img { bottom:0; width:31%; max-height:100%; }
.story-enemies img:nth-child(1){left:0}.story-enemies img:nth-child(2){left:27%}.story-enemies img:nth-child(3){left:54%}
.story-bosses { position:absolute; left:47%; right:2%; bottom:13%; height:72%; opacity:0; pointer-events:none; }
.story-bosses img { bottom:0; width:38%; max-height:100%; opacity:0; transform:translateX(-18%) scale(.9); }
.story-bosses img:nth-child(1){left:0;z-index:1}.story-bosses img:nth-child(2){left:28%;z-index:3}.story-bosses img:nth-child(3){left:61%;z-index:2}
.story-weapon { right:28%; bottom:48%; width:13%; opacity:0; transform:scale(.35) rotate(-20deg); filter:drop-shadow(0 0 1.2em rgba(133,244,255,.65)); }
.story-progress { position:absolute; z-index:14; left:6.5%; bottom:7.5%; width:min(48%,620px); display:grid; grid-template-columns:repeat(5,1fr); gap:.35em; }
.story-progress i { display:block; height:.22em; overflow:hidden; border-radius:999px; background:rgba(224,246,255,.18); }
.story-progress i::after { content:""; display:block; width:0; height:100%; background:linear-gradient(90deg,#66e6d1,#dffcff); }
.story-progress i.done::after { width:100%; }
.story-progress i.active::after { animation:storyProgress var(--scene-duration,2.8s) linear forwards; }
.story-overlay[data-scene="peace"] .story-seal { opacity:1; animation:storySealIdle 2.8s ease-in-out infinite; }
.story-overlay[data-scene="invasion"] .story-seal { opacity:1; animation:storySealRetreat 2.8s ease-out both; }
.story-overlay[data-scene="invasion"] .story-enemies { opacity:1; animation:storyMarchIn 2.8s cubic-bezier(.2,.8,.2,1) both; }
.story-overlay[data-scene="bosses"] .story-bosses { opacity:1; }
.story-overlay[data-scene="bosses"] .story-bosses img { animation:storyBossReveal 3.1s cubic-bezier(.2,.85,.2,1) both; }
.story-overlay[data-scene="bosses"] .story-bosses img:nth-child(2){animation-delay:.12s}.story-overlay[data-scene="bosses"] .story-bosses img:nth-child(3){animation-delay:.24s}
.story-overlay[data-scene="vow"] .story-seal { opacity:1; right:14%; bottom:27%; width:26%; animation:storyVow 2.8s ease-out both; }
.story-overlay[data-scene="vow"] .story-weapon { opacity:1; animation:storyWeaponRise 2.8s ease-out both; }
.story-overlay[data-scene="campaign"] .story-seal { opacity:1; right:10%; bottom:24%; width:23%; animation:storyCharge 2.8s cubic-bezier(.2,.8,.2,1) both; }
.story-overlay[data-scene="campaign"] .story-enemies { opacity:.58; left:10%; right:50%; filter:saturate(.65) brightness(.65); animation:storyEnemiesFlee 2.8s ease-in both; }

.level-transition-overlay { z-index:76; }
.level-transition-overlay .cinematic-shade { background:radial-gradient(circle at 50% 40%,rgba(8,35,48,.18),rgba(1,5,11,.82) 68%),linear-gradient(180deg,#02060ccc,transparent 30%,#02060ce8); }
.level-transition-card { position:absolute; z-index:12; left:50%; top:50%; width:min(64%,720px); transform:translate(-50%,-50%); padding:clamp(1.4rem,3vw,2.8rem); text-align:center; border:1px solid rgba(191,235,255,.23); border-radius:1.5em; background:linear-gradient(145deg,rgba(8,28,42,.88),rgba(2,10,18,.82)); box-shadow:0 2em 6em #000c,inset 0 1px #fff2; backdrop-filter:blur(20px); animation:levelCardIn .55s cubic-bezier(.2,.9,.25,1) both; }
.level-number { display:inline-grid; place-items:center; width:2.4em; aspect-ratio:1; margin-bottom:.55em; color:#06151e; border-radius:.55em; background:linear-gradient(145deg,#c8fff4,#66ddca); box-shadow:0 0 2.2em rgba(91,232,208,.28); font-size:clamp(1rem,2.2vw,2rem); font-weight:1000; }
.level-transition-card h2 { margin:0; font-size:clamp(1.7rem,4vw,3.8rem); line-height:.95; letter-spacing:-.04em; }
.level-transition-card > p:not(.cinematic-kicker) { margin:.65em auto 1em; max-width:38em; color:#b9cfdb; font-size:clamp(.6rem,.95vw,.9rem); line-height:1.45; }
.level-route { display:grid; grid-template-columns:repeat(5,1fr); gap:.55em; margin:1em 0; }
.level-route span { position:relative; display:grid; place-items:center; min-height:3.3em; padding:.35em; color:#6f8c9d; border:1px solid rgba(182,225,244,.13); border-radius:.75em; background:rgba(3,14,23,.52); font-size:clamp(.42rem,.62vw,.58rem); font-weight:850; letter-spacing:.06em; }
.level-route span b { display:block; color:#7b9bad; }
.level-route span.complete { color:#a8ddcf; border-color:rgba(106,230,205,.28); background:rgba(12,60,54,.38); }
.level-route span.current { color:#f2fffc; border-color:#76e9d5; background:rgba(18,80,70,.58); box-shadow:0 0 1.5em rgba(83,229,202,.18); }
.transition-countdown { height:.28em; margin:.7em 0 1em; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.12); }
.transition-countdown i { display:block; width:100%; height:100%; transform-origin:left; background:linear-gradient(90deg,#61dfca,#dffdf7); }
.level-transition-card .primary { min-width:10em; }

.victory-overlay { z-index:90; }
.victory-backdrop { background-image:url('assets/backgrounds/crown_glacier.png'); filter:saturate(1.18) brightness(.82) contrast(1.08); animation:victoryBackdrop 12s ease-out both; }
.victory-aurora { position:absolute; z-index:2; inset:-18% -10% 40%; opacity:.75; background:radial-gradient(ellipse at 20% 70%,rgba(70,255,201,.45),transparent 44%),radial-gradient(ellipse at 65% 28%,rgba(104,166,255,.38),transparent 42%),radial-gradient(ellipse at 86% 65%,rgba(188,92,255,.3),transparent 38%); filter:blur(22px); animation:victoryAurora 5s ease-in-out infinite alternate; }
.victory-overlay::after { height:8%; }
.victory-retreat { position:absolute; z-index:5; left:3%; right:48%; bottom:20%; height:50%; opacity:.68; animation:victoryRetreat 4.2s 1s ease-in both; }
.victory-retreat img { position:absolute; bottom:0; width:34%; max-height:100%; object-fit:contain; filter:saturate(.55) brightness(.62) drop-shadow(0 1em 1em #000b); }
.victory-retreat img:nth-child(1){left:0}.victory-retreat img:nth-child(2){left:28%}.victory-retreat img:nth-child(3){left:56%}
.victory-seal { position:absolute; z-index:9; right:9%; bottom:24%; width:29%; object-fit:contain; image-rendering:auto; filter:drop-shadow(0 1.4em 1.4em #000b); animation:victorySealIn 3.4s cubic-bezier(.18,.85,.22,1) both; }
.victory-copy { left:6%; bottom:9%; width:min(52%,680px); animation:victoryCopyIn 1s 1.2s ease-out both; }
.victory-copy > strong { display:block; margin-top:.8em; color:#ffe894; font-size:clamp(.72rem,1.1vw,1rem); letter-spacing:.08em; }
.victory-copy .button-row { justify-content:flex-start; }
.victory-snow { position:absolute; z-index:10; inset:0; pointer-events:none; }
.victory-snow i { position:absolute; top:-8%; width:.35em; aspect-ratio:1; border-radius:50%; background:#fff; opacity:.65; animation:victorySnowFall var(--duration) linear var(--delay) infinite; }

@keyframes cinematicDrift { to { transform:scale(1.08) translate3d(-1.2%,.7%,0); } }
@keyframes storyProgress { to { width:100%; } }
@keyframes storySealIdle { 0%,100%{transform:translateX(0) translateY(0) scale(1)} 50%{transform:translateX(-1.5%) translateY(-2%) scale(1.02)} }
@keyframes storySealRetreat { from{transform:translateX(-18%) scale(1);opacity:1} to{transform:translateX(18%) scale(.92);opacity:.82} }
@keyframes storyMarchIn { from{transform:translateX(-42%)} to{transform:translateX(12%)} }
@keyframes storyBossReveal { from{transform:translateX(24%) scale(.86);opacity:0;filter:brightness(.3) drop-shadow(0 1.2em 1.2em #000)} 45%{opacity:1;filter:brightness(.48) drop-shadow(0 1.2em 1.2em #000)} to{transform:translateX(0) scale(1);opacity:1;filter:brightness(.9) drop-shadow(0 1.2em 1.2em #000)} }
@keyframes storyVow { from{transform:translateX(28%) scale(.78);filter:brightness(.5) drop-shadow(0 1.2em 1.2em #000)} to{transform:translateX(0) scale(1);filter:brightness(1.1) drop-shadow(0 1.2em 1.2em #000)} }
@keyframes storyWeaponRise { 0%{transform:translateY(60%) scale(.25) rotate(-28deg);opacity:0} 45%{opacity:1} 100%{transform:translateY(-8%) scale(1) rotate(8deg);opacity:1} }
@keyframes storyCharge { from{transform:translateX(35%) scale(.85)} to{transform:translateX(-3%) scale(1.05)} }
@keyframes storyEnemiesFlee { from{transform:translateX(10%)} to{transform:translateX(-55%);opacity:.05} }
@keyframes levelCardIn { from{opacity:0;transform:translate(-50%,-46%) scale(.94)} to{opacity:1;transform:translate(-50%,-50%) scale(1)} }
@keyframes victoryBackdrop { from{transform:scale(1.18);filter:saturate(.8) brightness(.35)} to{transform:scale(1.04);filter:saturate(1.18) brightness(.82)} }
@keyframes victoryAurora { to{transform:translate3d(3%,2%,0) scale(1.08);filter:blur(32px)} }
@keyframes victoryRetreat { to{transform:translateX(-75%);opacity:0} }
@keyframes victorySealIn { 0%{transform:translateX(75%) translateY(12%) rotate(5deg);opacity:0} 60%{opacity:1} 78%{transform:translateX(-4%) translateY(-3%) rotate(-2deg)} 100%{transform:translateX(0) translateY(0);opacity:1} }
@keyframes victoryCopyIn { from{opacity:0;transform:translateY(1.2em)} to{opacity:1;transform:none} }
@keyframes victorySnowFall { to{transform:translate3d(var(--drift),118vh,0) rotate(280deg)} }

@media (max-width:760px){
  .cinematic-copy{left:5%;bottom:10%;width:70%}.cinematic-copy h2{font-size:clamp(1.25rem,5vw,2.2rem)}
  .story-progress{left:5%;width:70%}.cinematic-skip{right:4%;top:10%}.story-seal{width:34%;right:1%}
  .story-enemies{right:26%}.story-boss{width:39%;left:2%}.story-weapon{right:20%;width:18%}
  .level-transition-card{width:88%}.level-route span{min-height:2.5em}.victory-copy{width:78%}.victory-seal{width:38%;right:0}.victory-retreat{right:35%}
}


/* V9 game-mode selector */
.game-mode-switch{margin:clamp(.7rem,1.4vw,1.15rem) auto 1rem;width:min(96%,780px);text-align:center}.mode-label{display:block;margin-bottom:.45rem;color:#8faebe;font-size:.62rem;font-weight:900;letter-spacing:.18em}.mode-toggle{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:.32rem;border:1px solid rgba(172,226,246,.2);border-radius:1.1rem;background:rgba(2,12,20,.7);box-shadow:inset 0 1px rgba(255,255,255,.05),0 1rem 3rem rgba(0,0,0,.28);overflow:hidden}.mode-toggle input{position:absolute;opacity:0;pointer-events:none}.mode-toggle label{position:relative;z-index:2;display:grid;gap:.12rem;padding:.82rem 1rem;cursor:pointer;color:#7594a5;border-radius:.8rem;transition:.22s ease}.mode-toggle label b{font-size:clamp(.78rem,1.15vw,1rem);letter-spacing:.07em}.mode-toggle label small{font-size:clamp(.48rem,.7vw,.62rem);font-weight:700}.mode-slider{position:absolute;z-index:1;left:.32rem;top:.32rem;width:calc(50% - .32rem);height:calc(100% - .64rem);border:1px solid rgba(125,241,220,.42);border-radius:.8rem;background:linear-gradient(145deg,rgba(27,113,104,.94),rgba(11,57,72,.96));box-shadow:0 0 2rem rgba(70,231,202,.18),inset 0 1px rgba(255,255,255,.18);transition:transform .28s cubic-bezier(.2,.85,.2,1)}.mode-toggle input:checked+label{color:#effffc;text-shadow:0 0 1rem rgba(105,242,216,.25)}#modeEndless:checked~.mode-slider{transform:translateX(100%)}.mode-toggle input:focus-visible+label{outline:2px solid #8ff7e5;outline-offset:-2px}

/* V9 — fixed-fire co-op and focused launch experience */
#gameCanvas { cursor: default; }
.start-panel { width:min(92%,960px); padding:clamp(.9rem,1.7vw,1.55rem); }
.start-heading { margin-bottom:.65rem; }
.start-heading h1 { font-size:clamp(2rem,4.45vw,4.25rem); }
.start-heading .eyebrow { margin-bottom:.2rem; }
.start-heading .title-sub { margin-top:.12rem; }

.launch-card {
  width:min(100%,860px); margin:0 auto; padding:clamp(.8rem,1.4vw,1.15rem);
  border:1px solid rgba(184,229,255,.17); border-radius:18px;
  background:linear-gradient(145deg,rgba(14,39,56,.72),rgba(4,15,25,.72));
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 18px 48px rgba(0,0,0,.24);
  text-align:left;
}
.launch-row { display:grid; grid-template-columns:1.45fr .85fr; gap:.75rem; align-items:start; }
.choice-block { min-width:0; }
.choice-label { display:block; margin:0 0 .38rem .1rem; color:#8faebe; font-size:clamp(.48rem,.65vw,.6rem); font-weight:900; letter-spacing:.17em; }

.mode-toggle,.player-toggle {
  position:relative; display:grid; gap:.45rem; padding:0; overflow:visible;
  border:0; border-radius:0; background:transparent; box-shadow:none;
}
.mode-toggle { grid-template-columns:1.45fr .82fr; }
.player-toggle { grid-template-columns:1fr 1.35fr; }
.mode-toggle input,.player-toggle input { position:absolute; opacity:0; pointer-events:none; }
.mode-toggle label,.player-toggle label {
  position:relative; z-index:2; display:grid; align-content:center; gap:.12rem; min-width:0;
  padding:.72rem .8rem; color:#7897a8; border:1px solid rgba(174,221,243,.14);
  border-radius:12px; background:rgba(5,19,30,.56); cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease;
}
.mode-toggle label:hover,.player-toggle label:hover { transform:translateY(-1px); border-color:rgba(181,232,248,.3); color:#d9edf6; }
.mode-toggle label b { overflow:hidden; font-size:clamp(.78rem,1.05vw,.98rem); letter-spacing:.07em; text-overflow:ellipsis; white-space:nowrap; }
.mode-toggle label small { overflow:hidden; font-size:clamp(.43rem,.61vw,.56rem); font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.player-toggle label { min-height:3.3rem; text-align:center; }
.player-toggle label b { font-size:clamp(.56rem,.76vw,.7rem); letter-spacing:.06em; }
.mode-slider,.player-slider { display:none; }
#modeEndless:checked + label,#modeCampaign:checked + label,
#playerSolo:checked + label,#playerCoop:checked + label {
  color:#effffc; border-color:rgba(125,241,220,.52);
  background:linear-gradient(145deg,rgba(25,103,96,.9),rgba(9,47,62,.94));
  box-shadow:0 10px 28px rgba(0,0,0,.26),0 0 24px rgba(70,231,202,.1),inset 0 1px rgba(255,255,255,.13);
}
#modeCampaign:checked + label { border-color:rgba(158,200,255,.48); background:linear-gradient(145deg,rgba(42,72,116,.88),rgba(17,37,66,.94)); }
.mode-toggle input:focus-visible + label,.player-toggle input:focus-visible + label { outline:2px solid #a2f7e8; outline-offset:2px; }
.best-run { display:block; min-height:1em; margin:.35rem 0 0 .15rem; color:#6f8e9f; font-size:clamp(.4rem,.56vw,.52rem); font-weight:800; letter-spacing:.1em; }

.control-strip {
  display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-top:.72rem; padding-top:.7rem;
  border-top:1px solid rgba(183,228,248,.12);
}
.control-card { display:flex; align-items:center; gap:.55rem; min-width:0; padding:.48rem .56rem; border-radius:11px; background:rgba(4,17,28,.52); }
.control-card > span { display:grid; place-items:center; flex:0 0 auto; width:2.15rem; aspect-ratio:1; color:#06202a; border-radius:9px; background:#8ff0df; font-size:clamp(.48rem,.65vw,.6rem); font-weight:1000; }
.control-card b { min-width:0; color:#c8dce7; font-size:clamp(.45rem,.62vw,.58rem); white-space:nowrap; }
.control-card kbd { margin-right:.2rem; }
.control-strip > small { grid-column:1/-1; color:#708d9d; font-size:clamp(.39rem,.54vw,.5rem); text-align:center; letter-spacing:.035em; }
.control-p2 { opacity:.28; filter:saturate(.45); transition:.2s ease; }
#startOverlay.coop-selected .control-p2 { opacity:1; filter:none; }
#startOverlay.coop-selected .control-p2 > span { color:#251408; background:#ffc38b; }

.hero-play { display:block; width:100%; min-width:0; margin:.78rem 0 0; padding:.9rem 1.2rem; font-size:clamp(.72rem,1vw,.92rem); letter-spacing:.12em; }
.launch-hint { display:block; margin:.45rem 0 0; color:#688596; font-size:clamp(.38rem,.53vw,.49rem); text-align:center; letter-spacing:.045em; }

.options-panel { width:min(100%,860px); margin:.62rem auto 0; text-align:left; }
.options-panel > summary {
  display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.62rem .78rem;
  color:#c7dce7; border:1px solid rgba(181,227,246,.14); border-radius:12px;
  background:rgba(5,18,29,.54); cursor:pointer; list-style:none;
}
.options-panel > summary::-webkit-details-marker { display:none; }
.options-panel > summary::after { content:"+"; flex:0 0 auto; color:#76e7d3; font-size:1rem; font-weight:700; }
.options-panel[open] > summary::after { content:"−"; }
.options-panel > summary span { font-size:clamp(.53rem,.72vw,.66rem); font-weight:900; letter-spacing:.1em; }
.options-panel > summary small { margin-left:auto; color:#718d9d; font-size:clamp(.39rem,.54vw,.5rem); }
.options-panel .settings-card { margin-top:.45rem; padding:.72rem; }
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:.35rem; }
.options-panel .starting-weapons { margin-top:.42rem; border:1px solid rgba(181,227,246,.14); border-radius:12px!important; }
.options-panel .starting-weapons-grid { grid-template-columns:repeat(6,1fr); }
.options-panel .start-weapon-option span { grid-template-columns:1fr; justify-items:center; min-height:3.15rem; text-align:center; }
.options-panel .start-weapon-option img { width:2.5rem; height:1.55rem; }
.options-panel .start-weapon-option b { overflow:hidden; width:100%; text-overflow:ellipsis; white-space:nowrap; }

.stamina-hud { left:50%!important; right:auto; width:23%; min-width:190px; transform:translateX(-50%); }
.ammo-hud-p1 { right:2%; left:auto; }
.ammo-hud-p2 { display:none; left:2%; right:auto; }
#gameShell.coop-active .ammo-hud-p2 { display:block; }
#gameShell.coop-active .ammo-hud-p1 { border-color:rgba(113,234,215,.34)!important; }
#gameShell.coop-active .ammo-hud-p2 { border-color:rgba(255,190,132,.38)!important; }

.weapon-card { grid-template-columns:auto auto minmax(0,1fr); }
.weapon-card .player-pick { display:none; position:absolute; z-index:4; top:.18rem; padding:.13rem .3rem; border-radius:999px; font-size:clamp(.34rem,.45vw,.42rem); font-weight:1000; letter-spacing:.04em; box-shadow:0 3px 8px rgba(0,0,0,.35); }
.weapon-card .player-pick.p1 { right:.25rem; color:#052129; background:#82edda; }
.weapon-card .player-pick.p2 { right:1.9rem; color:#2a1606; background:#ffc187; }
.weapon-card.p1-selected .player-pick.p1 { display:block; }
#gameShell.coop-active .weapon-card.p2-selected .player-pick.p2 { display:block; }
.weapon-card.p1-selected { border-color:rgba(112,236,215,.62)!important; }
#gameShell.coop-active .weapon-card.p2-selected { box-shadow:0 0 0 1px rgba(255,187,126,.5) inset,0 10px 28px rgba(0,0,0,.25)!important; }

@media (max-width:760px) {
  .launch-row { grid-template-columns:1fr; }
  .control-strip { grid-template-columns:1fr; }
  .control-strip > small { grid-column:1; }
  .settings-grid { grid-template-columns:1fr; }
  .options-panel .starting-weapons-grid { grid-template-columns:repeat(3,1fr); }
  .stamina-hud { width:31%; min-width:0; }
  .ammo-hud-p2 { left:1%; }
  .ammo-hud-p1 { right:1%; }
}

@media (pointer:coarse) {
  #playerCoop + label { opacity:.45; }
  .stamina-hud { bottom:2%; }
  .ammo-hud-p1 { right:20%; bottom:2%; }
  .ammo-hud-p2 { display:none!important; }
}

/* V10 — solo free-aim, adaptive persistence and discoverable advanced settings */
#gameCanvas { cursor: default; }
#gameShell.solo-aim #gameCanvas { cursor: none; }

.control-card { flex-wrap: wrap; }
.control-p1 b { flex: 1 1 auto; }
#startOverlay:not(.coop-selected) .control-p1 {
  border: 1px solid rgba(117, 237, 216, .19);
  background: linear-gradient(135deg, rgba(11, 46, 57, .7), rgba(4, 18, 29, .58));
}
#startOverlay:not(.coop-selected) .control-p1 > span { box-shadow: 0 0 1.2rem rgba(91, 234, 208, .22); }

.options-panel.options-prominent { width: 100%; margin: .78rem 0 0; }
.options-panel.options-prominent > summary {
  position: relative;
  min-height: 4.05rem;
  padding: .68rem .72rem;
  border-color: rgba(111, 231, 211, .34);
  background:
    radial-gradient(circle at 10% 0%, rgba(98, 229, 207, .13), transparent 42%),
    linear-gradient(145deg, rgba(10, 48, 59, .86), rgba(5, 20, 32, .82));
  box-shadow: inset 0 1px rgba(255,255,255,.07), 0 .65rem 1.7rem rgba(0,0,0,.18);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.options-panel.options-prominent > summary:hover {
  transform: translateY(-1px);
  border-color: rgba(133, 244, 224, .58);
  box-shadow: inset 0 1px rgba(255,255,255,.09), 0 .8rem 2rem rgba(0,0,0,.25), 0 0 1.8rem rgba(70, 231, 202, .08);
}
.options-panel.options-prominent > summary::after { display: none; }
.options-leading { display: flex !important; align-items: center; min-width: 0; gap: .68rem; }
.options-leading > span { display: grid; min-width: 0; gap: .1rem; }
.options-leading b { color: #effffc; font-size: clamp(.58rem,.8vw,.74rem); font-weight: 1000; letter-spacing: .11em; }
.options-leading small { overflow: hidden; color: #86a7b7 !important; font-size: clamp(.4rem,.55vw,.52rem) !important; font-weight: 650 !important; text-overflow: ellipsis; white-space: nowrap; }
.settings-icon {
  display: grid !important; place-items: center; flex: 0 0 auto; width: 2.55rem; aspect-ratio: 1;
  color: #071d25; border: 1px solid rgba(225,255,249,.55); border-radius: 11px;
  background: linear-gradient(180deg, #9af6e5, #59cfbd); box-shadow: 0 .5rem 1.2rem rgba(42, 216, 187, .18);
  font-size: .78rem !important; font-style: normal; font-weight: 1000 !important; letter-spacing: .08em !important;
}
.options-quick-summary {
  flex: 0 1 auto; margin-left: auto !important; padding: .34rem .55rem; color: #b7d6e3 !important;
  border: 1px solid rgba(184,228,246,.16); border-radius: 999px; background: rgba(3, 15, 25, .5);
  font-size: clamp(.39rem,.53vw,.5rem) !important; font-weight: 850 !important; letter-spacing: .07em !important; white-space: nowrap;
}
.options-open-label {
  flex: 0 0 auto; padding: .34rem .52rem; color: #061d25 !important; border-radius: 8px;
  background: #7de8d5; font-size: clamp(.39rem,.53vw,.5rem) !important; font-weight: 1000 !important; letter-spacing: .09em !important;
}
.options-panel[open] .options-open-label { font-size: 0 !important; }
.options-panel[open] .options-open-label::after { content: "CLOSE"; font-size: clamp(.39rem,.53vw,.5rem); }
.options-panel.options-prominent[open] > summary { border-color: rgba(143, 244, 226, .56); background: linear-gradient(145deg, rgba(15, 58, 68, .92), rgba(5, 22, 35, .9)); }
.options-panel.options-prominent .settings-card { margin-top: .5rem; border-color: rgba(132, 224, 211, .18); background: rgba(3, 16, 27, .78); }
.options-panel.options-prominent .settings-title h2 { font-size: clamp(.72rem,1vw,.92rem); letter-spacing: .08em; }
.hero-play { margin-top: .72rem; }

@media (max-width: 760px) {
  .options-quick-summary { display: none !important; }
  .options-leading small { white-space: normal; }
  .control-card { gap: .38rem; }
}

@media (pointer: coarse) {
  #gameShell.solo-aim #gameCanvas { cursor: default; }
}