:root {
  color-scheme: dark;
  --ink: #030812;
  --deep: #071426;
  --navy: #0b2340;
  --water: #0b3f6a;
  --water-light: #145d8f;
  --cream: #f0e6cf;
  --paper: #d2c5a8;
  --brass: #b98a3d;
  --gold: #e2bf69;
  --red: #e95e4d;
  --green: #70c99c;
  --blue: #63b6e6;
  --muted: #8798ad;
  --line: rgba(166, 190, 218, 0.18);
  --panel: rgba(5, 16, 31, 0.84);
  --panel-strong: #091d34;
  --shadow: 0 24px 70px rgba(0, 4, 12, 0.56);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-width: 320px; min-height: 100%; background: var(--ink); }

body { overflow-x: hidden; color: var(--cream); }

button, input { font: inherit; }

button { color: inherit; }

button:focus-visible, input:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

[hidden] { display: none !important; }

.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }

.screen { min-height: 100svh; position: relative; }

.eyebrow {
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.primary-action, .secondary-action, .quiet-button, .pause-button, .dialog-action, .carousel-arrow {
  border: 0;
  cursor: pointer;
}

.primary-action {
  min-width: 210px;
  padding: 0.95rem 1.8rem;
  border: 1px solid #f2d58d;
  border-radius: 999px;
  background: linear-gradient(180deg, #d5ae63, #9b6d2d);
  box-shadow: inset 0 1px rgba(255,255,255,.35), 0 12px 30px rgba(0,0,0,.32);
  color: #07101c;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: transform .2s ease, filter .2s ease;
}

.primary-action:hover { filter: brightness(1.12); transform: translateY(-2px); }
.primary-action:disabled { cursor: not-allowed; filter: grayscale(.55); opacity: .58; transform: none; }
.primary-action.compact { min-width: 175px; padding: .78rem 1.35rem; }

.opening-screen { display: grid; place-items: end center; overflow: hidden; background: #030913; }

.opening-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 47%; opacity: .9; }

.opening-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2,7,16,.08), rgba(2,8,18,.2) 46%, rgba(2,7,16,.94) 86%),
    linear-gradient(90deg, rgba(1,5,14,.4), transparent 35%, transparent 65%, rgba(1,5,14,.4));
}

.opening-copy { position: relative; z-index: 2; width: min(780px, calc(100% - 2rem)); padding: 2rem 2rem 6vh; text-align: center; }

.opening-copy h1 {
  margin: .3rem 0 .15rem;
  color: #f6ecd5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 500;
  letter-spacing: .08em;
  line-height: .95;
  text-transform: uppercase;
  text-shadow: 0 5px 22px #000;
}

.opening-copy p { margin: 1rem auto 1.6rem; color: #cbd3dc; font-size: clamp(.95rem, 2vw, 1.15rem); letter-spacing: .055em; }

.opening-camo {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .12;
  background: repeating-linear-gradient(105deg, transparent 0 12px, rgba(88,150,211,.25) 13px, transparent 15px 28px);
  mix-blend-mode: screen;
  animation: camo-scan 9s linear infinite;
}

@keyframes camo-scan { from { transform: translateX(-15%); } to { transform: translateX(15%); } }

.simple-header, .battle-header {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 66px;
  padding: .65rem clamp(1rem, 3vw, 3rem);
  border-bottom: 1px solid var(--line);
  background: rgba(3, 10, 21, .9);
  backdrop-filter: blur(18px);
}

.quiet-button { justify-self: start; padding: .6rem 0; background: transparent; color: var(--paper); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.brand-lockup { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.brand-lockup span { color: var(--brass); font-size: .6rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.brand-lockup strong { font-family: Georgia, serif; font-size: 1.3rem; font-weight: 500; letter-spacing: .11em; text-transform: uppercase; }
.header-step { justify-self: end; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.mode-screen, .setup-screen {
  background:
    radial-gradient(circle at 50% 20%, rgba(38,76,128,.27), transparent 41%),
    linear-gradient(145deg, #040b17, #0a213b 58%, #030914);
}

.mode-screen::before, .setup-screen::before {
  content: "";
  position: absolute;
  inset: 66px 0 0;
  pointer-events: none;
  opacity: .13;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 36px 36px;
}

.mode-intro { position: relative; z-index: 1; padding: clamp(1.5rem, 4vh, 3rem) 1.5rem 1rem; text-align: center; }
.mode-intro h2 { margin: .35rem 0 .35rem; font-family: Georgia, serif; font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 500; }
.mode-intro p { margin: 0; color: var(--muted); }

.carousel-shell { position: relative; z-index: 2; display: grid; grid-template-columns: 48px minmax(0, 1080px) 48px; gap: .65rem; justify-content: center; align-items: center; padding: 0 1rem; }
.mode-track { position: relative; display: block; height: calc(clamp(250px, 39vh, 410px) + 2rem); overflow: hidden; padding: 1rem 0; }

.mode-card {
  position: absolute;
  top: 1rem;
  left: 50%;
  width: min(68vw, 680px);
  height: clamp(250px, 39vh, 410px);
  overflow: hidden;
  border: 1px solid rgba(232,214,169,.24);
  border-radius: 18px;
  background: #091b31;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateX(-50%) scale(.88);
  transition: left .34s cubic-bezier(.22,.75,.22,1), opacity .28s ease, transform .34s cubic-bezier(.22,.75,.22,1), border-color .3s ease;
  text-align: left;
  pointer-events: none;
  cursor: pointer;
}
.mode-card.is-selected { z-index: 3; opacity: 1; transform: translateX(-50%) scale(1); border-color: rgba(234,200,118,.8); pointer-events: auto; }
.mode-card.is-prev { z-index: 1; left: calc(50% - min(68vw, 680px) - 44px); opacity: .42; transform: translateX(-50%) scale(.93); pointer-events: auto; }
.mode-card.is-next { z-index: 1; left: calc(50% + min(68vw, 680px) + 44px); opacity: .42; transform: translateX(-50%) scale(.93); pointer-events: auto; }
.mode-card.is-far { z-index: 0; opacity: 0; }
.mode-card img, .card-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2,7,16,.04), rgba(2,8,18,.22) 40%, rgba(2,7,16,.97)); }
.card-number { position: absolute; top: 1rem; right: 1.2rem; color: rgba(242,230,203,.55); font-family: Georgia, serif; font-size: 2rem; }
.card-copy { position: absolute; left: clamp(1.25rem, 4vw, 2.5rem); right: 1.5rem; bottom: 1.4rem; display: flex; flex-direction: column; }
.card-copy small { color: var(--gold); font-size: .68rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.card-copy strong { margin: .15rem 0 .2rem; font-family: Georgia, serif; font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 500; }
.card-copy em { color: #b3bfce; font-size: .82rem; font-style: normal; letter-spacing: .06em; }

.card-art-attrition { display: grid; place-items: center; background: radial-gradient(circle, #153b66, #040a14 68%); }
.card-art-attrition b, .card-art-attrition i, .card-art-attrition u { position: absolute; color: transparent; font: 900 15rem/1 Georgia, serif; -webkit-text-stroke: 1px rgba(235,203,126,.28); text-decoration: none; }
.card-art-attrition b { transform: translateX(-32%); }
.card-art-attrition i { color: rgba(205,72,55,.58); transform: translateY(-3%); }
.card-art-attrition u { transform: translateX(32%); }
.card-art-break { background: linear-gradient(150deg, #050b16, #17406c); }
.card-art-break::before, .card-art-break::after { content: ""; position: absolute; top: 14%; bottom: 14%; width: 42%; border: 1px solid rgba(111,174,230,.35); background: repeating-linear-gradient(0deg, transparent 0 26px, rgba(107,166,218,.12) 27px 28px); }
.card-art-break::before { left: 5%; transform: perspective(500px) rotateY(20deg); }
.card-art-break::after { right: 5%; transform: perspective(500px) rotateY(-20deg); }
.card-art-break b { position: absolute; inset: 47% 25%; height: 3px; background: var(--red); box-shadow: 0 0 24px var(--red); transform: rotate(-12deg); }
.card-art-blind-luck {
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 24%, #173c5a, #061b33 56%, #030912 100%);
  color: #81d2ff;
}
.card-art-blind-luck b {
  position: absolute;
  font: 900 4.6rem/1 Georgia, serif;
  text-shadow: 0 0 24px rgba(132, 221, 255, .7);
}
.card-art-blind-luck i {
  position: absolute;
  inset: 24%;
  border: 1px solid rgba(129, 210, 255, .35);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(129, 210, 255, .18);
  background: radial-gradient(circle, rgba(129, 210, 255, .16), transparent 68%);
}
.card-art-dreadnought {
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, #220f0c, #3f1512 40%, #0f0604 74%);
  color: #f2d6ad;
}
.card-art-dreadnought b {
  position: absolute;
  font: 900 4.2rem/1 Georgia, serif;
  letter-spacing: .04em;
  text-shadow: 0 0 28px rgba(249, 213, 156, .46);
}
.card-art-dreadnought b::before {
  content: "";
  position: absolute;
  inset: 18% 16%;
  border: 1px solid rgba(242, 214, 173, .24);
  border-left-width: 3px;
  border-right-width: 3px;
  box-shadow: inset 0 0 0 1px rgba(242, 214, 173, .2);
}
.card-art-tournament { display: grid; place-items: center; background: radial-gradient(circle at 50% 46%, #806027, #102d50 36%, #040b17 70%); color: #f0d38e; font: 12rem/1 Georgia, serif; text-shadow: 0 12px 50px #000; }

.carousel-arrow { width: 44px; height: 64px; border: 1px solid var(--line); border-radius: 999px; background: rgba(5,16,31,.72); color: var(--paper); font-size: 2.2rem; }
.mode-dots { position: relative; z-index: 3; display: flex; justify-content: center; gap: .5rem; min-height: 12px; }
.mode-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #54677f; cursor: pointer; }
.mode-dots button.is-selected { width: 26px; border-radius: 99px; background: var(--gold); }

.mode-detail { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(160px, .7fr) minmax(260px, 1.5fr) auto; gap: 1.5rem; align-items: center; width: min(1000px, calc(100% - 2rem)); margin: 1.15rem auto 0; padding: 1rem 1.25rem; border-top: 1px solid var(--line); }
.mode-detail span { color: var(--gold); font-size: .62rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.mode-detail h3 { margin: .16rem 0 0; font-family: Georgia, serif; font-size: 1.55rem; font-weight: 500; }
.mode-detail p { margin: 0; color: #acb9c9; font-size: .85rem; line-height: 1.5; }

.setup-layout { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(340px, .8fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; width: min(1120px, calc(100% - 3rem)); min-height: calc(100svh - 66px); margin: auto; padding: 3rem 0; }
.setup-brief h2 { margin: .45rem 0 1rem; font: 500 clamp(2.8rem, 6vw, 5.6rem)/.98 Georgia, serif; max-width: 700px; }
.setup-brief > p { max-width: 660px; color: #b6c1cf; font-size: 1.05rem; line-height: 1.7; }
.rules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; max-width: 660px; margin-top: 2rem; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--line); }
.rules-grid div { display: flex; flex-direction: column; padding: 1rem; background: rgba(5,16,31,.9); }
.rules-grid strong { color: var(--gold); font: 500 1.45rem Georgia, serif; }
.rules-grid span { margin-top: .2rem; color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.rule-panel { padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid rgba(231,205,144,.3); border-radius: 18px; background: rgba(7,20,38,.9); box-shadow: var(--shadow); }
.rule-panel-heading { display: flex; justify-content: space-between; padding-bottom: .9rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.rule-panel-heading strong { color: var(--gold); }
.rule-toggle { display: grid; grid-template-columns: 1fr auto; gap: 1.3rem; align-items: center; margin: 1.4rem 0 .5rem; cursor: pointer; }
.rule-toggle > span { display: flex; flex-direction: column; gap: .45rem; }
.rule-toggle strong { font: 500 1.45rem Georgia, serif; }
.rule-toggle small { color: #a9b6c6; line-height: 1.5; }
.rule-toggle input { position: absolute; opacity: 0; }
.rule-toggle i { position: relative; width: 58px; height: 32px; border: 1px solid #536982; border-radius: 99px; background: #10253f; transition: .2s ease; }
.rule-toggle i::after { content: ""; position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: #a9b4c2; transition: .2s ease; }
.rule-toggle input:checked + i { border-color: var(--gold); background: #856326; }
.rule-toggle input:checked + i::after { transform: translateX(26px); background: #fff0c5; }
.fairness-note { margin: 0 0 1.4rem; color: var(--muted); font-size: .75rem; }
.rule-summary { margin: 0 0 1rem; color: var(--cream); font-size: .79rem; line-height: 1.45; }

.battle-screen { isolation: isolate; height: 100svh; min-height: 690px; overflow: clip; background: radial-gradient(ellipse at 50% 74%, rgba(32,105,148,.34), transparent 56%), linear-gradient(180deg, #061522 0 24%, #0a3a5b 47%, #071f37 76%, #020711); }
.battle-screen::before { content: ""; position: absolute; z-index: 0; inset: 66px 0 0; background: linear-gradient(180deg, transparent 0 15%, rgba(15,79,113,.2) 34%, rgba(5,37,63,.68) 72%, #030b17 100%), repeating-linear-gradient(104deg, rgba(255,255,255,.025) 0 2px, transparent 3px 14px); background-size: auto, 220px 90px; pointer-events: none; animation: battle-water-drift 22s linear infinite; }
@keyframes battle-water-drift { to { background-position: 0 0, 220px 35px; } }
.battle-header { height: 66px; grid-template-columns: 1fr auto 1fr; padding-top: .45rem; padding-bottom: .45rem; }
.battle-brand { display: flex; flex-direction: column; line-height: 1; }
.battle-brand span { color: var(--brass); font-size: .55rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.battle-brand strong { font: 500 1.25rem Georgia, serif; letter-spacing: .1em; text-transform: uppercase; }
.turn-command { display: flex; flex-direction: column; align-items: center; min-width: 260px; padding: .3rem 2rem; border-right: 1px solid var(--line); border-left: 1px solid var(--line); line-height: 1.2; }
.turn-command span { color: var(--gold); font-size: .58rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.turn-command strong { margin-top: .18rem; font-size: .9rem; letter-spacing: .06em; }
.pause-button { justify-self: end; padding: .55rem 1.1rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(10,31,54,.86); color: var(--paper); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

.enemy-horizon { position: absolute; z-index: 1; top: 66px; left: 0; right: 0; height: clamp(142px, 18vh, 205px); overflow: hidden; background: #061522; box-shadow: 0 14px 34px rgba(0,0,0,.38); pointer-events: none; }
.enemy-horizon img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 57%; filter: saturate(.86) contrast(1.08) brightness(.82); }
.enemy-horizon::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(2,8,15,.08), transparent 30%, rgba(4,17,29,.12) 62%, rgba(6,27,44,.78) 100%), linear-gradient(90deg, rgba(2,8,15,.18), transparent 18% 82%, rgba(2,8,15,.18)); }
.enemy-horizon::after { content: "ENEMY MISSILE FACILITY"; position: absolute; z-index: 2; right: clamp(12px, 2vw, 30px); bottom: 12px; padding: .32rem .52rem; border: 1px solid rgba(233,94,77,.34); background: rgba(5,14,24,.62); color: rgba(255,185,166,.68); font: 800 .5rem/1 ui-monospace, monospace; letter-spacing: .14em; }
.enemy-launch-origin { position: absolute; z-index: 3; left: 64.5%; top: 59%; width: 2px; height: 2px; }

.battlefield-shell { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(150px, 220px) minmax(600px, 1fr) minmax(160px, 230px); gap: clamp(.65rem, 1.3vw, 1.35rem); width: min(1540px, calc(100% - 2rem)); margin: 0 auto; padding-top: clamp(.45rem, 1.2vh, .85rem); }
.tactical-panel { align-self: start; margin-top: 5vh; padding: .85rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: 0 14px 35px rgba(0,0,0,.3); backdrop-filter: blur(12px); }
.panel-heading { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .65rem; color: var(--muted); font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.panel-heading strong { color: var(--gold); }
.mini-map { position: relative; aspect-ratio: 4/3; border: 1px solid rgba(145,180,218,.3); background: linear-gradient(145deg, #0c3a63, #082646); }
.mini-grid { position: absolute; z-index: 2; inset: 0; display: grid; grid-template-columns: repeat(var(--board-cols), 1fr); grid-template-rows: repeat(var(--board-rows), 1fr); }
.mini-cell { border: .5px solid rgba(185,211,237,.07); }
.mini-cell.is-island { background: #866f48; }
.mini-cell.is-hull { background: rgba(108,159,196,.14); box-shadow: inset 0 0 0 1px rgba(224,239,250,.18); }
.mini-cell.is-hit { background: var(--red); }
.mini-cell.is-miss { background: #b5d7d5; border-radius: 50%; transform: scale(.45); }
.mini-cell.is-burning { animation: burn-pulse .55s alternate infinite; }
.fleet-counts { display: grid; gap: .45rem; margin-top: .7rem; }
.fleet-counts div { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: .42rem; border-bottom: 1px solid var(--line); }
.fleet-counts span { color: var(--muted); font-size: .61rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.fleet-counts strong { color: var(--cream); font-size: .72rem; }

.board-stage { position: relative; min-width: 0; }
.board-assembly { width: 100%; margin: 0 auto; }
.board-stage:has(.board-plane.is-deploying) .board-assembly { width: min(100%, calc((100svh - 232px) * 4 / 3)); }
.board-stage:has(.board-plane.is-deploying) .coastline { height: 0; }
.coastline { height: 0; margin: 0; opacity: 0; }
.board-plane { position: relative; aspect-ratio: 4/3; overflow: hidden; border: 6px solid rgba(91,145,178,.7); border-top-width: 3px; border-radius: 4px 4px 10px 10px; background: linear-gradient(180deg, rgba(14,75,109,.66), rgba(5,43,73,.9) 58%, rgba(3,25,48,.96)); box-shadow: 0 30px 70px rgba(0,4,12,.7), inset 0 0 65px rgba(1,12,25,.36), 0 0 0 1px rgba(170,218,236,.18); transform: perspective(640px) rotateX(16deg); transform-origin: 50% 100%; transition: filter .2s ease, border-color .2s ease, box-shadow .2s ease; backdrop-filter: blur(1px); }
.board-plane.is-turn-ready { border-color: rgba(209,174,93,.9); box-shadow: 0 30px 70px rgba(0,4,12,.7), inset 0 0 55px rgba(3,14,28,.32), 0 0 0 1px rgba(226,191,105,.48), 0 0 28px rgba(185,138,61,.24); }
.board-plane::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at 40% 18%, rgba(126,198,225,.15), transparent 34%), repeating-linear-gradient(108deg, rgba(255,255,255,.026) 0 2px, transparent 3px 12px), linear-gradient(180deg, rgba(103,180,208,.12), transparent 28%); animation: water-drift 18s linear infinite; }
@keyframes water-drift { to { background-position: 180px 0, 100px 30px; } }
.target-grid { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-columns: repeat(var(--board-cols), 1fr); grid-template-rows: repeat(var(--board-rows), 1fr); }
.formation-layer { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; }
.mini-formation-layer { z-index: 1; }
.formation-sprite { position: absolute; display: block; transform-origin: 50% 50%; filter: brightness(1.24) contrast(1.08) drop-shadow(0 2px 2px rgba(0,0,0,.72)); transition: opacity .2s ease, filter .2s ease; }
.formation-sprite-art { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.formation-sprite.has-horizontal-overhang .formation-sprite-art {
  transform: scale(1.55);
  transform-origin: 50% 50%;
}
.formation-sprite.has-vertical-beam .formation-sprite-art {
  transform: scaleX(var(--vertical-beam-scale));
  transform-origin: 50% 50%;
}
.formation-sprite.is-selected { filter: drop-shadow(0 0 6px rgba(255,215,119,.98)) brightness(1.42) contrast(1.08); }
.formation-sprite.is-burning { z-index: 2; animation: wreck-burn .52s alternate infinite; filter: drop-shadow(0 0 6px rgba(255,76,24,.95)) brightness(1.14); }
.formation-sprite.is-charred { opacity: .94; filter: grayscale(.25) brightness(.72) drop-shadow(0 2px 3px rgba(0,0,0,.9)); }
.formation-sprite.is-miniature { filter: brightness(1.34) contrast(1.08) drop-shadow(0 1px 1px rgba(0,0,0,.82)); }
.formation-sprite.is-miniature.is-burning { filter: drop-shadow(0 0 3px rgba(255,76,24,.95)) brightness(1.15); }
@keyframes wreck-burn { from { filter: drop-shadow(0 0 4px rgba(255,74,20,.72)) brightness(1); } to { filter: drop-shadow(0 0 9px rgba(255,134,35,1)) brightness(1.28); } }
.target-cell { position: relative; min-width: 0; min-height: 0; padding: 0; border: 1px solid rgba(195,225,239,.2); background: transparent; color: var(--cream); cursor: crosshair; }
.target-cell::after { content: ""; position: absolute; inset: 19%; border-radius: 50%; opacity: 0; background: rgba(231,219,180,.75); }
.target-cell:hover:not(:disabled) { background: rgba(99,182,230,.14); }
.target-cell:disabled { cursor: default; }
.target-cell.is-friendly { background: rgba(104,157,197,.1); box-shadow: inset 0 0 0 1px rgba(210,232,249,.24); }
.target-cell.is-selected-hull { background: rgba(227,193,107,.16); box-shadow: inset 0 0 0 2px var(--gold), 0 0 10px rgba(233,200,118,.4); }
.target-cell.is-hit { background: rgba(117,23,25,.45); box-shadow: inset 0 0 0 2px var(--red); }
.target-cell.is-hit::before { content: "×"; position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; color: #ffd9c8; font-size: clamp(.62rem, 1.25vw, 1rem); font-weight: 900; text-shadow: 0 1px 4px #000; }
.target-cell.is-miss::after { opacity: .82; transform: scale(.34); }
.target-cell.is-sonar::before { content: attr(data-sonar); position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; color: #ffe5a0; font-size: clamp(.55rem, 1vw, .85rem); font-weight: 900; text-shadow: 0 1px 4px #000; }
.target-cell.is-sonar::after { opacity: .12; transform: scale(.88); background: var(--gold); }
.target-cell.is-zero::before { color: #a5d9e0; }
.target-cell.is-island { background: rgba(104,90,61,.22); }
.target-cell.is-pending { background: rgba(233,94,77,.22); box-shadow: inset 0 0 0 2px var(--red); }
.target-cell.is-burning { animation: burn-pulse .55s alternate infinite; }
.target-cell.is-charred { background: rgba(31,19,15,.86); box-shadow: inset 0 0 0 2px #5b4038; }
@keyframes burn-pulse { from { filter: brightness(1); } to { filter: brightness(1.65); } }
.island-layer, .effects-layer { position: absolute; inset: 0; pointer-events: none; }
.island-layer { z-index: 3; }
.island-sprite { position: absolute; object-fit: fill; filter: drop-shadow(0 7px 5px rgba(0,0,0,.38)); }
.effects-layer { z-index: 8; overflow: hidden; }
.target-reticle { position: absolute; z-index: 7; display: none; width: calc(100% / 24); height: calc(100% / 18); pointer-events: none; border: 2px solid var(--red); box-shadow: 0 0 0 1px rgba(255,222,190,.5), 0 0 14px var(--red); transition: left .06s linear, top .06s linear, border-color .2s ease, box-shadow .2s ease; }
.target-reticle::before, .target-reticle::after { content: ""; position: absolute; background: currentColor; color: var(--red); }
.target-reticle::before { left: 50%; top: -38%; bottom: -38%; width: 1px; }
.target-reticle::after { top: 50%; left: -38%; right: -38%; height: 1px; }
.target-reticle span { position: absolute; inset: 24%; border: 1px solid currentColor; border-radius: 50%; color: var(--red); }
.target-reticle.is-ready { border-color: var(--green); box-shadow: 0 0 0 1px rgba(220,255,235,.55), 0 0 16px var(--green); }
.target-reticle.is-ready::before, .target-reticle.is-ready::after, .target-reticle.is-ready span { color: var(--green); }
.target-reticle.is-locking { display: block !important; animation: target-lock .32s ease-out both; }
@keyframes target-lock { 0% { transform: scale(1.22); opacity: .7; } 56% { transform: scale(.76); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.board-plane:not(.is-deploying):not(.is-locked) .target-reticle { display: block; }
.board-plane.is-locked { filter: saturate(.82) brightness(.86); }
.board-readout { position: relative; z-index: 5; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; width: 84%; margin: .25rem auto 0; overflow: hidden; border: 1px solid var(--line); border-radius: 0 0 8px 8px; background: var(--line); }
.board-readout div { display: flex; justify-content: space-between; padding: .48rem .7rem; background: rgba(4,15,29,.9); }
.board-readout span { color: var(--muted); font-size: .56rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.board-readout strong { color: var(--cream); font-size: .65rem; }

.deployment-actions { position: relative; z-index: 12; display: grid; grid-template-columns: auto auto auto minmax(175px, 1fr); gap: .55rem; align-items: center; margin-top: .55rem; padding: .65rem; border: 1px solid rgba(230,207,151,.46); border-radius: 12px; background: rgba(3,12,25,.96); box-shadow: var(--shadow); }
.deployment-copy { display: flex; grid-column: 1 / -1; flex-direction: row; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: .62rem; }
.deployment-copy strong { margin-top: .14rem; color: var(--cream); font-size: .72rem; }
.formation-tray { display: flex; gap: .3rem; }
.formation-token { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid #4a617d; border-radius: 7px; background: #102b4a; color: #b9c5d5; font: 800 .68rem/1 ui-monospace, monospace; cursor: pointer; }
.formation-token.is-selected { border-color: var(--gold); background: #775b27; color: #fff0c4; box-shadow: 0 0 10px rgba(233,200,118,.3); }
.secondary-action { padding: .72rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: #102a48; color: var(--paper); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.foreground-fleet { position: absolute; z-index: 3; left: 50%; bottom: -3vh; width: min(760px, 56vw); height: 17vh; transform: translateX(-50%); pointer-events: none; filter: drop-shadow(0 15px 16px rgba(0,0,0,.58)); }
.fleet-sprite { position: absolute; display: block; object-fit: contain; object-position: 50% 100%; }
.command-ship { left: 50%; bottom: 0; width: 25%; height: 100%; transform: translateX(-50%); filter: brightness(.88) contrast(1.08); }
.support-ship { bottom: 7%; width: 18%; height: 61%; opacity: .9; filter: brightness(.72) saturate(.85); }
.support-left { left: 4%; transform: rotate(-10deg) scale(.82); }
.support-right { right: 4%; transform: rotate(10deg) scale(.78); }
.horizon-patrol { bottom: 46%; width: 7%; height: 25%; opacity: .62; filter: brightness(.55) blur(.2px); }
.patrol-left { left: 25%; transform: rotate(-7deg); }
.patrol-right { right: 25%; transform: rotate(7deg); }

.sink-toast { position: fixed; z-index: 30; top: 84px; left: 50%; padding: .75rem 1.4rem; border: 1px solid rgba(245,215,143,.58); border-radius: 999px; background: rgba(65,21,18,.94); color: #ffe3bc; font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; opacity: 0; transform: translate(-50%, -20px); transition: .3s ease; pointer-events: none; }
.sink-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.missile { position: fixed; z-index: 100; width: 8px; height: 28px; border-radius: 50% 50% 30% 30%; background: linear-gradient(#f9eee0, #a7b1ac 55%, #4d5d61); box-shadow: 0 0 12px #fff4ca; pointer-events: none; transform-origin: 50% 50%; }
.missile::after { content: ""; position: absolute; left: 2px; top: 20px; width: 4px; height: 34px; border-radius: 50%; background: linear-gradient(#ffec99, rgba(232,86,45,.8), transparent); filter: blur(1px); }
.impact-flash { position: fixed; z-index: 101; width: 18px; height: 18px; border-radius: 50%; background: #fff5c9; box-shadow: 0 0 12px #fff, 0 0 30px #ff7f43, 0 0 65px #db433c; pointer-events: none; animation: impact .45s ease-out forwards; }
@keyframes impact { from { transform: translate(-50%,-50%) scale(.25); opacity: 1; } to { transform: translate(-50%,-50%) scale(4); opacity: 0; } }

.resolved-impact { --impact-size: 52px; position: fixed; z-index: 102; width: var(--impact-size); height: var(--impact-size); transform: translate(-50%,-50%); pointer-events: none; }
.resolved-impact > i { position: absolute; left: 50%; top: 50%; display: block; transform: translate(-50%,-50%); }
.resolved-impact .impact-core { width: 72%; height: 72%; border-radius: 50%; background: radial-gradient(circle at 42% 38%,#fff 0 8%,#fff0a5 12% 23%,#ffc334 28% 41%,#ff6a21 46% 61%,#9f2415 67% 78%,transparent 83%); box-shadow: 0 0 24px rgba(255,174,47,.98), 0 0 52px rgba(255,64,19,.78); animation: impact-core 1.05s cubic-bezier(.1,.74,.2,1) forwards; }
.resolved-impact .impact-ring { width: 105%; height: 105%; border: 2px solid rgba(255,221,157,.9); border-radius: 50%; box-shadow: 0 0 17px rgba(255,137,43,.8); animation: impact-ring 1.15s ease-out forwards; }
.resolved-impact.miss .impact-core { width: 42%; height: 150%; border-radius: 52% 48% 44% 56%; background: linear-gradient(180deg,rgba(255,255,255,.98),rgba(215,246,255,.96) 28%,rgba(119,213,245,.78) 63%,rgba(34,125,169,.18) 91%,transparent); box-shadow: 0 0 18px rgba(205,245,255,.72); animation: water-column 1.1s cubic-bezier(.05,.68,.25,1) forwards; }
.resolved-impact.miss .impact-ring { width: 128%; height: 48%; border-color: rgba(220,249,255,.86); box-shadow: 0 0 15px rgba(112,216,255,.65); animation: splash-ring 1.18s ease-out forwards; }
.resolved-impact.sonar .sonar-ring { width: 150%; height: 58%; border: 3px solid rgba(90,244,226,.92); border-radius: 50%; box-shadow: 0 0 18px rgba(44,229,222,.78), inset 0 0 12px rgba(56,230,216,.32); animation: sonar-ring 1.45s ease-out forwards; }
.resolved-impact.sunk { --impact-size: 76px; }
.resolved-impact.sunk .impact-core { width: 96%; height: 96%; box-shadow: 0 0 38px rgba(255,193,62,1), 0 0 82px rgba(255,57,15,.92); }
.resolved-impact.sunk .impact-ring { border-width: 3px; animation-duration: 1.45s; }
@keyframes impact-core { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.2); } 28% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.55); } }
@keyframes impact-ring { from { opacity: 1; transform: translate(-50%,-50%) scale(.2); } to { opacity: 0; transform: translate(-50%,-50%) scale(1.7); } }
@keyframes water-column { 0% { opacity: 0; transform: translate(-50%,-30%) scale(.2,.05); } 30% { opacity: 1; transform: translate(-50%,-58%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-80%) scale(.72,1.45); } }
@keyframes splash-ring { from { opacity: 1; transform: translate(-50%,-50%) scale(.25); } to { opacity: 0; transform: translate(-50%,-50%) scale(1.65); } }
@keyframes sonar-ring { from { opacity: .95; transform: translate(-50%,-50%) scale(.22); } to { opacity: 0; transform: translate(-50%,-50%) scale(2.1); } }

.camo-transition { position: absolute; z-index: 40; inset: 66px 0 0; display: grid; place-items: center; overflow: hidden; background: radial-gradient(ellipse at 50% 62%,rgba(36,84,135,.56),transparent 48%),linear-gradient(180deg,rgba(2,10,22,.94),rgba(6,25,48,.97)); backdrop-filter: blur(8px); }
.camo-transition::before { content: ""; position: absolute; inset: 0; opacity: .27; background: repeating-linear-gradient(0deg,transparent 0 7px,rgba(118,178,232,.17) 8px 9px),linear-gradient(90deg,transparent,rgba(112,175,230,.18),transparent); background-size: 100% 100%,34% 100%; animation: camo-sweep 1.8s linear infinite; }
.camo-horizon { position: absolute; left: 12%; right: 12%; top: 26%; height: 38%; filter: drop-shadow(0 15px 18px rgba(0,0,0,.7)); }
.camo-horizon i { position: absolute; bottom: 8%; width: 18%; height: 68%; clip-path: polygon(50% 0,66% 18%,100% 82%,72% 100%,28% 100%,0 82%,34% 18%); background: linear-gradient(90deg,rgba(6,17,31,.92),rgba(126,160,195,.74),rgba(15,42,72,.94)); animation: cloak-ship 2.25s ease-in-out forwards; }
.camo-horizon i:nth-child(1) { left: 4%; transform: scale(.62) rotate(-8deg); animation-delay: .18s; }
.camo-horizon i:nth-child(2) { left: 22%; transform: scale(.78) rotate(-4deg); animation-delay: .32s; }
.camo-horizon i:nth-child(3) { left: 41%; transform: scale(1); animation-delay: .46s; }
.camo-horizon i:nth-child(4) { right: 22%; transform: scale(.78) rotate(4deg); animation-delay: .6s; }
.camo-horizon i:nth-child(5) { right: 4%; transform: scale(.62) rotate(8deg); animation-delay: .74s; }
.camo-transition-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: min(620px,calc(100% - 2rem)); padding-top: 26vh; text-align: center; }
.camo-transition-copy strong { margin: .45rem 0 .35rem; font: 500 clamp(1.8rem,4vw,3.2rem) Georgia,serif; letter-spacing: .04em; text-transform: uppercase; }
.camo-transition-copy small { color: #a9b9cb; letter-spacing: .08em; }
.camo-progress { width: min(360px,75vw); height: 3px; margin-top: 1.3rem; overflow: hidden; border-radius: 99px; background: rgba(132,164,201,.18); }
.camo-progress i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg,var(--brass),var(--blue)); transform-origin: left; animation: camo-progress 2.2s linear forwards; }
.camo-skip { margin-top: 1rem; padding: .55rem 1rem; border: 1px solid var(--line); border-radius: 999px; }
@keyframes camo-sweep { from { background-position: 0 0,-50% 0; } to { background-position: 0 0,160% 0; } }
@keyframes cloak-ship { 0%,18% { opacity: .92; filter: blur(0); } 55% { opacity: .58; filter: blur(.6px) brightness(1.6); } 100% { opacity: .06; filter: blur(2px); } }
@keyframes camo-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.game-dialog { width: min(430px, calc(100% - 2rem)); padding: 0; border: 1px solid rgba(234,205,137,.42); border-radius: 18px; background: linear-gradient(160deg, #0b2948, #040d1b); color: var(--cream); box-shadow: 0 35px 100px #000; }
.game-dialog::backdrop { background: rgba(0,9,13,.76); backdrop-filter: blur(8px); }
.game-dialog form { display: grid; gap: .75rem; padding: 2rem; text-align: center; }
.game-dialog h2 { margin: 0 0 .45rem; font: 500 2.2rem Georgia, serif; }
.dialog-action { padding: .75rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(13,42,73,.86); color: var(--paper); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dialog-action.danger { color: #ffb3a5; }
.outcome-dialog p { margin: 0 0 .75rem; color: #b0bdcd; line-height: 1.5; }
.outcome-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: .4rem 0 .8rem; background: var(--line); }
.outcome-stats div { display: flex; flex-direction: column; padding: .8rem; background: #091d34; }
.outcome-stats span { color: var(--muted); font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.outcome-stats strong { margin-top: .2rem; color: var(--gold); font: 500 1.5rem Georgia, serif; }

/* v0.3 — Combat Information Center identity pass */
:root {
  --ink: #02070b;
  --deep: #071419;
  --navy: #0a2731;
  --water: #0c4c5c;
  --water-light: #18a6ad;
  --cream: #f0eadc;
  --paper: #c8d0c9;
  --brass: #b98b49;
  --gold: #f0c66f;
  --red: #ff6655;
  --green: #6ff7ca;
  --blue: #67e6f4;
  --muted: #7f989c;
  --line: rgba(151, 207, 207, .18);
  --panel: rgba(3, 17, 21, .91);
  --panel-strong: #071f25;
  --shadow: 0 26px 75px rgba(0, 5, 8, .66);
}

body {
  background: #010508;
  background-image: radial-gradient(circle at 50% 0, rgba(40, 115, 119, .08), transparent 46%);
}

body::after {
  content: "";
  position: fixed;
  z-index: 200;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(176, 241, 236, .035) 4px);
  mix-blend-mode: screen;
}

.primary-action,
.secondary-action,
.pause-button,
.dialog-action {
  border-radius: 0;
  clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 11px 100%, 0 50%);
}

.primary-action {
  position: relative;
  border-color: #ffe2a1;
  background: linear-gradient(180deg, #f1ca78, #9e6e2b);
  box-shadow: inset 0 1px rgba(255, 255, 255, .45), 0 0 0 1px rgba(255, 213, 119, .14), 0 12px 34px rgba(0, 0, 0, .42);
  letter-spacing: .17em;
}

.primary-action:hover { filter: brightness(1.16) saturate(1.08); }

.opening-copy { padding-bottom: 4.5vh; }
.opening-copy::before,
.opening-copy::after {
  content: none;
}
.opening-copy h1 { text-shadow: 0 5px 22px #000, 0 0 44px rgba(83, 197, 202, .13); }
.opening-action { min-width: 188px; padding: .82rem 1.6rem; background: linear-gradient(180deg, rgba(241,202,120,.94), rgba(126,83,30,.96)); box-shadow: inset 0 1px rgba(255,255,255,.45), 0 14px 40px rgba(0,0,0,.58), 0 0 28px rgba(240,198,111,.12); }

.simple-header,
.battle-header {
  border-bottom-color: rgba(99, 222, 221, .2);
  background:
    linear-gradient(90deg, rgba(30, 87, 91, .08), transparent 28% 72%, rgba(30, 87, 91, .08)),
    rgba(2, 9, 13, .94);
  box-shadow: inset 0 -1px rgba(240, 198, 111, .08), 0 8px 24px rgba(0, 0, 0, .25);
}

.quiet-button,
.header-step,
.battle-brand span,
.panel-heading,
.fleet-counts span,
.deployment-copy,
.board-readout,
.theater-strip {
  font-family: "Bahnschrift Condensed", "Arial Narrow", sans-serif;
}

.mode-screen { background: #080807; }

.setup-screen {
  background:
    radial-gradient(circle at 50% 22%, rgba(25, 107, 113, .24), transparent 40%),
    linear-gradient(145deg, #02080c, #09232a 58%, #02070a);
}

.setup-screen::before {
  opacity: .2;
  background-image:
    linear-gradient(rgba(105, 224, 224, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(105, 224, 224, .045) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.88), transparent 82%);
}

.mode-screen::before {
  z-index: 0;
  inset: 66px 0 0;
  opacity: .72;
  background: url("./assets/battlesweep-key-art-clean-fleet.jpg") center 46% / cover no-repeat;
  filter: saturate(.62) contrast(1.08) brightness(.66);
  mask-image: none;
}

.mode-screen::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 66px 0 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 43%, rgba(4, 5, 6, .2), rgba(4, 5, 6, .46) 58%, rgba(3, 3, 3, .82) 100%),
    linear-gradient(180deg, rgba(3, 3, 3, .28), rgba(8, 6, 5, .38) 56%, rgba(5, 4, 3, .9));
}

.mode-screen .simple-header {
  border-bottom-color: rgba(197, 153, 78, .3);
  background: linear-gradient(90deg, rgba(58, 37, 18, .28), transparent 28% 72%, rgba(58, 37, 18, .28)), rgba(8, 7, 6, .94);
  box-shadow: inset 0 -1px rgba(240, 198, 111, .12), 0 8px 28px rgba(0, 0, 0, .4);
}

.mode-screen .mode-intro h2,
.mode-screen .mode-detail h3 { color: #f2e9d7; text-shadow: 0 3px 18px rgba(0,0,0,.88); }
.mode-screen .mode-intro p,
.mode-screen .mode-detail p { color: #c7c0b2; text-shadow: 0 2px 8px rgba(0,0,0,.9); }
.mode-screen .carousel-arrow { border-color: rgba(211, 176, 103, .34); background: rgba(12, 10, 8, .82); color: #ecd8ad; box-shadow: 0 12px 30px rgba(0,0,0,.4); }
.mode-screen .mode-card { border-color: rgba(199, 161, 88, .24); background: #100e0d; box-shadow: 0 24px 70px rgba(0,0,0,.68); }
.mode-screen .mode-card.is-selected { border-color: rgba(240, 198, 111, .92); box-shadow: 0 30px 85px rgba(0,0,0,.82), 0 0 0 1px rgba(240,198,111,.13); }
.mode-screen .mode-detail {
  padding: 1rem 1.25rem;
  border: 1px solid rgba(199, 161, 88, .25);
  background: linear-gradient(90deg, rgba(18, 14, 10, .9), rgba(7, 7, 7, .82));
  box-shadow: 0 18px 48px rgba(0,0,0,.42);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.mode-screen .mode-dots button { background: #746d62; box-shadow: 0 1px 4px rgba(0,0,0,.6); }
.mode-screen .mode-dots button.is-selected { background: var(--gold); }

.mode-card,
.rule-panel,
.game-dialog {
  border-radius: 0;
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}

.mode-card { border-color: rgba(111, 222, 220, .2); }
.mode-card.is-selected {
  border-color: rgba(240, 198, 111, .9);
  box-shadow: 0 28px 80px rgba(0, 4, 7, .75), 0 0 0 1px rgba(240, 198, 111, .12), inset 0 -60px 90px rgba(2, 8, 12, .64);
}
.card-number { font-family: "Bahnschrift Condensed", "Arial Narrow", sans-serif; font-weight: 300; letter-spacing: .06em; }
.mode-detail { border-top-color: rgba(105, 224, 224, .2); }
.rules-grid { border-radius: 0; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.rule-panel { border-color: rgba(112, 225, 224, .25); background: linear-gradient(145deg, rgba(8, 36, 40, .96), rgba(2, 13, 17, .97)); }

.battle-screen {
  background:
    radial-gradient(ellipse at 50% 72%, rgba(14, 111, 120, .42), transparent 52%),
    linear-gradient(180deg, #031014 0 23%, #0a4650 48%, #06262f 76%, #010608);
}

.battle-screen::before {
  background:
    linear-gradient(180deg, transparent 0 13%, rgba(8, 92, 101, .17) 35%, rgba(2, 35, 43, .72) 73%, #02080b 100%),
    repeating-linear-gradient(106deg, rgba(163, 237, 233, .024) 0 2px, transparent 3px 15px);
  background-size: auto, 230px 92px;
}

.battle-header {
  height: 70px;
  border-top: 3px solid rgba(240, 198, 111, .68);
  border-bottom: 1px solid rgba(103, 230, 228, .28);
}

.battle-header::after {
  content: "";
  position: absolute;
  left: clamp(1rem, 3vw, 3rem);
  right: clamp(1rem, 3vw, 3rem);
  bottom: -2px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--blue) 20%, var(--gold) 50%, var(--blue) 80%, transparent);
  opacity: .45;
}

.battle-brand { position: relative; padding-left: 17px; }
.battle-brand::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 5px;
  background: linear-gradient(var(--gold), #775424);
  box-shadow: 0 0 12px rgba(240, 198, 111, .35);
}
.battle-brand span { color: #cfad66; font-size: .57rem; letter-spacing: .2em; }
.battle-brand strong { font-size: 1.22rem; letter-spacing: .14em; }
.battle-brand small { margin-top: .18rem; color: #638288; font: 700 .48rem/1 "Bahnschrift Condensed", "Arial Narrow", sans-serif; letter-spacing: .16em; text-transform: uppercase; }

.turn-command { position: relative; min-width: 330px; padding-left: 3rem; padding-right: 3rem; border-color: rgba(114, 209, 210, .14); }
.turn-command > i {
  position: absolute;
  left: 1.25rem;
  top: 50%;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(111, 247, 202, .8);
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(111, 247, 202, .08), 0 0 13px var(--green);
  transform: translateY(-50%);
  animation: status-pulse 1.8s ease-in-out infinite;
}
.battle-screen[data-actor="cpu"] .turn-command > i { border-color: var(--red); background: var(--red); box-shadow: 0 0 0 4px rgba(255, 102, 85, .08), 0 0 13px var(--red); }
.battle-screen[data-phase="deployment"] .turn-command > i,
.battle-screen[data-phase="camouflage"] .turn-command > i { border-color: var(--gold); background: var(--gold); box-shadow: 0 0 0 4px rgba(240, 198, 111, .08), 0 0 13px var(--gold); }
.turn-command span { color: #c5a55f; letter-spacing: .18em; }
.turn-command strong { font: 700 .87rem/1.2 "Bahnschrift Condensed", "Arial Narrow", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
@keyframes status-pulse { 50% { opacity: .45; transform: translateY(-50%) scale(.72); } }

.pause-button {
  min-width: 94px;
  border-color: rgba(112, 220, 219, .24);
  background: linear-gradient(180deg, rgba(17, 56, 63, .9), rgba(4, 22, 28, .95));
}

.enemy-horizon { top: 70px; filter: saturate(.92); }
.enemy-horizon img { filter: saturate(.72) contrast(1.18) brightness(.7) hue-rotate(156deg); }
.enemy-horizon::before {
  background:
    linear-gradient(90deg, rgba(255, 82, 62, .06), transparent 28% 72%, rgba(255, 82, 62, .06)),
    linear-gradient(180deg, rgba(2,8,12,.06), transparent 30%, rgba(3,21,24,.14) 62%, rgba(4,29,33,.88) 100%);
}
.enemy-horizon::after {
  bottom: 10px;
  border-color: rgba(255, 102, 85, .42);
  background: rgba(10, 18, 19, .74);
  color: rgba(255, 150, 132, .88);
  box-shadow: inset 3px 0 var(--red);
}

.battlefield-shell { padding-top: clamp(.5rem, 1.2vh, .9rem); }

.tactical-panel {
  position: relative;
  overflow: hidden;
  padding: .9rem;
  border-color: rgba(106, 222, 219, .28);
  border-radius: 0;
  background:
    linear-gradient(145deg, rgba(15, 53, 58, .16), transparent 42%),
    linear-gradient(180deg, rgba(4, 24, 29, .96), rgba(2, 13, 17, .94));
  box-shadow: 0 18px 46px rgba(0, 4, 6, .45), inset 0 0 0 1px rgba(255, 255, 255, .015);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.tactical-panel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 2px;
  height: 48px;
  background: linear-gradient(var(--blue), transparent);
  box-shadow: 0 0 12px rgba(103, 230, 244, .42);
}
.panel-heading { margin-bottom: .72rem; color: #769095; letter-spacing: .13em; }
.panel-heading strong { color: var(--gold); font-weight: 800; }

.mini-map {
  overflow: hidden;
  border-color: rgba(110, 230, 229, .35);
  background:
    radial-gradient(circle at 50% 50%, rgba(90, 227, 225, .08), transparent 54%),
    linear-gradient(145deg, #0a3941, #051d25);
  box-shadow: inset 0 0 26px rgba(0, 5, 7, .62), 0 0 0 1px rgba(0,0,0,.5);
}
.mini-map::after {
  content: "OWN FORCE // LIVE";
  position: absolute;
  z-index: 5;
  left: 6px;
  bottom: 5px;
  color: rgba(111, 247, 202, .72);
  font: 700 .43rem/1 "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .12em;
}
.mini-sweep {
  position: absolute;
  z-index: 4;
  inset: -28%;
  border-radius: 50%;
  opacity: .36;
  background: conic-gradient(from 10deg, transparent 0 82%, rgba(103, 230, 244, .2) 92%, rgba(103, 230, 244, .65) 99%, transparent);
  animation: mini-sweep 7s linear infinite;
  pointer-events: none;
}
@keyframes mini-sweep { to { transform: rotate(360deg); } }
.mini-cell { border-color: rgba(170, 230, 228, .055); }

.fleet-counts div { position: relative; padding: .48rem 0; border-bottom-color: rgba(125, 207, 207, .12); }
.fleet-counts div:first-child strong { color: var(--green); }
.fleet-counts div:nth-child(2) strong { color: #ff9384; }

.board-stage { padding: 0 2px; }
.board-assembly { position: relative; }
.board-stage:has(.board-plane.is-deploying) .board-assembly { width: min(100%, calc((100svh - 252px) * 4 / 3)); }
.theater-strip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .75rem;
  align-items: center;
  width: calc(100% - 16px);
  min-height: 23px;
  margin: 0 auto 3px;
  padding: 0 .7rem;
  border: 1px solid rgba(97, 205, 205, .25);
  border-bottom: 0;
  background: linear-gradient(90deg, rgba(9, 39, 44, .96), rgba(2, 14, 18, .96));
  color: #769397;
  font-size: .5rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
}
.theater-strip i { height: 1px; background: linear-gradient(90deg, rgba(103,230,244,.12), rgba(103,230,244,.58), rgba(103,230,244,.12)); }
.theater-strip b { color: #ff9281; font-weight: 800; }

.board-stage:has(.board-plane.is-deploying) .theater-strip b { color: var(--green); }
.board-stage:has(.board-plane.is-deploying) .theater-strip b::after { content: " DEPLOYMENT"; }
.board-stage:has(.board-plane.is-deploying) .theater-strip b { font-size: 0; }
.board-stage:has(.board-plane.is-deploying) .theater-strip b::after { font-size: .5rem; }

.board-plane {
  border: 8px solid rgba(34, 79, 84, .96);
  border-top-width: 5px;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 18%, rgba(79, 209, 206, .15), transparent 36%),
    linear-gradient(180deg, rgba(12, 89, 96, .84), rgba(4, 50, 59, .96) 58%, rgba(2, 28, 36, .98));
  box-shadow:
    0 32px 80px rgba(0, 3, 5, .76),
    inset 0 0 80px rgba(0, 6, 8, .5),
    inset 0 0 0 1px rgba(144, 239, 232, .14),
    0 0 0 1px rgba(0, 0, 0, .85);
  transform: perspective(760px) rotateX(13deg);
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 7px);
}
.board-plane.is-turn-ready {
  border-color: rgba(61, 134, 133, .98);
  box-shadow:
    0 32px 80px rgba(0, 3, 5, .76),
    inset 0 0 70px rgba(0, 8, 9, .4),
    inset 0 0 0 1px rgba(111, 247, 202, .4),
    0 0 24px rgba(111, 247, 202, .16),
    0 0 0 1px rgba(0, 0, 0, .9);
}
.board-plane::before {
  background:
    radial-gradient(circle at 40% 18%, rgba(132, 246, 235, .12), transparent 34%),
    repeating-linear-gradient(108deg, rgba(213, 255, 250, .026) 0 2px, transparent 3px 13px),
    linear-gradient(180deg, rgba(105, 224, 220, .09), transparent 28%);
}
.board-plane::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -35%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: conic-gradient(from 0deg, transparent 0 91%, rgba(111, 247, 202, .04) 95%, rgba(111, 247, 202, .24) 99.5%, transparent);
  transition: opacity .3s ease;
  animation: board-sweep 9s linear infinite;
}
.board-plane.is-turn-ready::after { opacity: .65; }
@keyframes board-sweep { to { transform: rotate(360deg); } }

.target-cell { border-color: rgba(176, 235, 231, .14); }
.target-cell:nth-child(4n) { border-right-color: rgba(186, 239, 236, .24); }
.target-cell:hover:not(:disabled) {
  background: rgba(111, 247, 202, .16);
  box-shadow: inset 0 0 0 1px rgba(111, 247, 202, .6), 0 0 14px rgba(111, 247, 202, .15);
}
.target-cell.is-friendly { background: rgba(92, 202, 202, .1); }
.target-cell.is-selected-hull { background: rgba(240, 198, 111, .2); box-shadow: inset 0 0 0 2px var(--gold), 0 0 13px rgba(240, 198, 111, .46); }
.target-cell.is-hit { background: rgba(135, 29, 23, .58); box-shadow: inset 0 0 0 2px var(--red), 0 0 12px rgba(255, 77, 57, .34); }
.target-cell.is-hit::before { color: #fff0e8; text-shadow: 0 0 8px var(--red), 0 1px 4px #000; }
.target-cell.is-sonar::before { color: #ffe29b; text-shadow: 0 0 8px rgba(240, 198, 111, .65), 0 1px 4px #000; }
.target-cell.is-zero::before { color: #8eeef0; }
.target-cell.is-pending { animation: pending-cell .58s ease-in-out infinite alternate; }
@keyframes pending-cell { to { background: rgba(255, 102, 85, .42); box-shadow: inset 0 0 0 2px #fff0d4, 0 0 18px var(--red); } }

.grid-north,
.grid-west { position: absolute; z-index: 6; display: grid; pointer-events: none; color: rgba(211, 252, 246, .48); font: 700 clamp(.28rem, .42vw, .44rem)/1 "Bahnschrift Condensed", "Arial Narrow", sans-serif; text-shadow: 0 1px 3px #001014; }
.grid-north { inset: 2px 4px auto; grid-template-columns: repeat(var(--board-cols), 1fr); }
.grid-west { inset: 4px auto 4px 3px; grid-template-rows: repeat(16, 1fr); }
.grid-north i,
.grid-west i { display: grid; place-items: center; font-style: normal; }

.target-reticle {
  border: 1px solid var(--red);
  box-shadow: 0 0 0 1px rgba(255, 226, 217, .6), 0 0 18px var(--red), inset 0 0 10px rgba(255, 102, 85, .2);
}
.target-reticle span { inset: 18%; border-style: dashed; }
.target-reticle.is-ready {
  border-color: var(--green);
  box-shadow: 0 0 0 1px rgba(222, 255, 245, .68), 0 0 19px var(--green), inset 0 0 10px rgba(111, 247, 202, .2);
}

.board-readout {
  width: calc(100% - 30px);
  margin-top: 0;
  border-radius: 0;
  border-color: rgba(105, 218, 218, .22);
  background: rgba(105, 218, 218, .14);
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 9px 100%);
}
.board-readout div { padding: .52rem .8rem; background: rgba(2, 16, 20, .94); }
.board-readout span { color: #6d8f93; letter-spacing: .16em; }
.board-readout strong { color: #e7eee7; font-family: "Bahnschrift Condensed", "Arial Narrow", sans-serif; letter-spacing: .05em; text-transform: uppercase; }

.deployment-actions {
  border-color: rgba(240, 198, 111, .5);
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(240, 198, 111, .045), transparent 26%),
    rgba(2, 12, 16, .97);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.deployment-copy { letter-spacing: .035em; }
.deployment-copy strong { color: var(--gold); font-family: "Bahnschrift Condensed", "Arial Narrow", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.formation-token {
  width: 32px;
  height: 32px;
  border-color: rgba(111, 218, 217, .28);
  border-radius: 0;
  background: linear-gradient(145deg, #123941, #061e26);
  color: #a7bfc0;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.formation-token:hover { border-color: var(--blue); color: #dcffff; }
.formation-token.is-selected { border-color: var(--gold); background: linear-gradient(145deg, #a47930, #49330f); color: #fff0c4; box-shadow: 0 0 14px rgba(240, 198, 111, .34); }
.secondary-action { border-color: rgba(104, 218, 217, .2); background: linear-gradient(180deg, #123740, #061d24); }
.secondary-action:hover { border-color: rgba(103, 230, 244, .62); filter: brightness(1.15); }

.foreground-fleet {
  bottom: -2.6vh;
  width: min(900px, 66vw);
  height: 19vh;
  filter: drop-shadow(0 18px 20px rgba(0,0,0,.68));
  transition: opacity .45s ease, transform .45s ease;
}
.battle-screen[data-phase="deployment"] .foreground-fleet,
.battle-screen[data-phase="camouflage"] .foreground-fleet { opacity: 0; transform: translateX(-50%) translateY(34px); }
.foreground-fleet::before,
.foreground-fleet::after {
  content: "";
  position: absolute;
  bottom: 13%;
  width: 33%;
  height: 8%;
  border-radius: 50%;
  opacity: .32;
  filter: blur(4px);
  background: linear-gradient(90deg, transparent, rgba(169, 239, 232, .72), transparent);
}
.foreground-fleet::before { left: 9%; transform: rotate(7deg); }
.foreground-fleet::after { right: 9%; transform: rotate(-7deg); }
.command-ship { width: 28%; filter: brightness(.92) contrast(1.14) saturate(.9); }
.support-ship { opacity: .94; filter: brightness(.76) contrast(1.1) saturate(.82); }

.sink-toast {
  border-radius: 0;
  border-color: rgba(255, 187, 107, .74);
  background: linear-gradient(90deg, rgba(87, 23, 18, .97), rgba(37, 10, 8, .97));
  box-shadow: inset 5px 0 var(--red), 0 18px 45px rgba(0,0,0,.52), 0 0 30px rgba(255, 102, 85, .16);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
}

.camo-transition {
  inset: 70px 0 0;
  background:
    radial-gradient(ellipse at 50% 58%, rgba(32, 151, 155, .4), transparent 46%),
    linear-gradient(180deg, rgba(1, 9, 12, .96), rgba(3, 27, 31, .98));
}
.camo-transition::before {
  opacity: .38;
  background:
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(103, 230, 244, .13) 6px 7px),
    linear-gradient(90deg, transparent, rgba(111, 247, 202, .2), transparent);
  background-size: 100% 100%, 28% 100%;
}
.camo-horizon {
  left: 7%;
  right: 7%;
  top: 16%;
  height: 50%;
  filter: drop-shadow(0 20px 26px rgba(0,0,0,.8));
}
.camo-horizon::after {
  content: "";
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: 2%;
  height: 16%;
  background: radial-gradient(ellipse, rgba(115, 242, 234, .22), transparent 68%);
  filter: blur(5px);
}
.camo-ship {
  position: absolute;
  bottom: 2%;
  display: block;
  object-fit: contain;
  object-position: 50% 100%;
  opacity: .96;
  filter: brightness(1.02) contrast(1.15) drop-shadow(0 12px 9px rgba(0,0,0,.68));
  transform-origin: 50% 100%;
  animation: cloak-real-ship 2.25s cubic-bezier(.42,0,.18,1) forwards;
}
.camo-destroyer { left: 4%; width: 16%; height: 70%; transform: rotate(-8deg) scale(.8); animation-delay: .12s; }
.camo-corvette-left { left: 25%; width: 13%; height: 57%; transform: rotate(-4deg) scale(.9); animation-delay: .27s; }
.camo-command { left: 42%; width: 16%; height: 94%; animation-delay: .42s; }
.camo-corvette-right { right: 25%; width: 13%; height: 57%; transform: rotate(4deg) scale(.9); animation-delay: .57s; }
.camo-patrol { right: 7%; width: 10%; height: 36%; transform: rotate(8deg); animation-delay: .72s; }
@keyframes cloak-real-ship {
  0%, 18% { opacity: .96; filter: brightness(1.04) contrast(1.14) drop-shadow(0 12px 9px rgba(0,0,0,.68)); }
  42% { opacity: .88; filter: brightness(2) saturate(.35) drop-shadow(0 0 13px rgba(111,247,202,.88)); }
  64% { opacity: .38; filter: brightness(1.7) saturate(.15) blur(.45px) drop-shadow(0 0 24px rgba(103,230,244,.72)); }
  100% { opacity: .025; filter: brightness(2.6) saturate(0) blur(2.4px); }
}
.camo-transition-copy { padding-top: 29vh; }
.camo-transition-copy strong { text-shadow: 0 0 28px rgba(103, 230, 244, .24); }
.camo-progress { height: 4px; border-radius: 0; background: rgba(99, 190, 191, .12); }
.camo-progress i { background: linear-gradient(90deg, var(--gold), var(--green), var(--blue)); box-shadow: 0 0 12px rgba(103, 230, 244, .42); }

.game-dialog { border-color: rgba(103, 230, 228, .3); background: linear-gradient(160deg, #0a343a, #020d11); }
.dialog-action { background: rgba(10, 48, 55, .86); }

@media (max-width: 1100px) {
  .battlefield-shell { grid-template-columns: 155px minmax(560px, 1fr); }
  .foreground-fleet { width: 58vw; }
  .deployment-actions { display: flex; flex-wrap: wrap; }
  .deployment-copy { flex: 1 1 100%; }
}

@media (max-width: 820px) {
  .simple-header { grid-template-columns: 1fr auto; }
  .header-step { display: none; }
  .setup-layout { grid-template-columns: 1fr; align-content: center; }
  .setup-brief h2 { font-size: 3.1rem; }
  .battle-screen { min-height: 650px; overflow: auto; }
  .battle-header { grid-template-columns: 1fr auto; }
  .turn-command { order: 3; grid-column: 1/-1; min-width: 0; border: 0; border-top: 1px solid var(--line); }
  .battle-header { height: auto; }
  .enemy-horizon { top: 94px; }
  .battlefield-shell { grid-template-columns: 1fr; width: min(760px, calc(100% - 1rem)); }
  .tactical-panel { display: grid; grid-template-columns: 120px 1fr; gap: .8rem; margin-top: 0; }
  .tactical-panel .panel-heading { grid-column: 1/-1; margin: 0; }
  .fleet-counts { margin: 0; }
  .board-stage { grid-row: 1; }
  .foreground-fleet { display: none; }
  .board-stage:has(.board-plane.is-deploying) .board-assembly { width: 100%; }
  .deployment-actions { margin-top: .6rem; }
  .deployment-copy { flex-basis: 100%; }
  .mode-detail { grid-template-columns: 1fr auto; }
  .mode-detail p { grid-column: 1/-1; grid-row: 2; }
}

@media (max-width: 560px) {
  .carousel-shell { grid-template-columns: 32px minmax(0, 1fr) 32px; padding: 0 .35rem; }
  .carousel-arrow { width: 32px; height: 54px; }
  .mode-track { padding-inline: 0; }
  .mode-card { width: 78vw; }
  .mode-card.is-prev { left: calc(50% - 78vw - 24px); }
  .mode-card.is-next { left: calc(50% + 78vw + 24px); }
  .mode-detail { grid-template-columns: 1fr; text-align: center; }
  .mode-detail p { grid-column: 1; }
  .mode-detail .primary-action { justify-self: center; }
  .rules-grid { grid-template-columns: 1fr; }
  .battlefield-shell { min-width: 700px; transform: scale(.72); transform-origin: top left; }
  .enemy-horizon::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* v0.4 — wide naval theater layout. Deep ocean blues replace the teal CIC wash. */
:root {
  --ink: #02060b;
  --deep: #07111e;
  --navy: #0b1b2f;
  --water: #0b2741;
  --water-light: #173c5d;
  --green: #a9d5b5;
  --blue: #82acd2;
  --muted: #8c9aaa;
  --line: rgba(164, 187, 210, .2);
  --panel: rgba(3, 9, 17, .9);
  --panel-strong: #081522;
}

.simple-header,
.battle-header {
  border-bottom-color: rgba(146, 172, 199, .2);
  background: rgba(3, 8, 15, .94);
}

.setup-screen {
  background:
    radial-gradient(circle at 50% 22%, rgba(54, 91, 130, .24), transparent 41%),
    linear-gradient(145deg, #02060b, #0b1a2d 58%, #02060b);
}

.setup-screen::before {
  background-image:
    linear-gradient(rgba(151, 179, 207, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(151, 179, 207, .04) 1px, transparent 1px);
}

.rule-panel,
.game-dialog {
  border-color: rgba(155, 180, 205, .28);
  background: linear-gradient(145deg, rgba(11, 27, 45, .97), rgba(2, 8, 14, .98));
}

.battle-screen {
  --horizon-height: clamp(165px, 19.5svh, 245px);
  --deck-height: clamp(165px, 21.5svh, 255px);
  min-height: 720px;
  overflow: hidden;
  background: #02070d;
}

.battle-screen::before {
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 82%, rgba(38, 73, 108, .24), transparent 48%),
    linear-gradient(180deg, #050b13 0 52%, #071523 71%, #02070d 100%);
  animation: none;
}

.battle-header {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: block;
  width: auto;
  height: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  pointer-events: none;
}

.battle-header::after { content: none; }
.battle-header > * { pointer-events: auto; }

.movable-panel {
  --panel-x: 0px;
  --panel-y: 0px;
  transform: translate3d(var(--panel-x), var(--panel-y), 0);
  will-change: transform;
}

.movable-panel.is-dragging {
  z-index: 60 !important;
  box-shadow: 0 22px 55px rgba(0, 0, 0, .72), 0 0 0 1px rgba(227, 191, 108, .42) !important;
  user-select: none;
}

.panel-grip {
  position: absolute;
  z-index: 8;
  top: 6px;
  right: 7px;
  width: 25px;
  height: 18px;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: rgba(204, 216, 227, .46);
  font-size: 0;
  cursor: grab;
  touch-action: none;
}

.panel-grip::before {
  content: "•••";
  display: block;
  font-size: .62rem;
  letter-spacing: 2px;
  line-height: 18px;
}

.panel-grip:active { cursor: grabbing; }
.panel-grip:hover { color: var(--gold); }

.battle-brand,
.player-panel,
.turn-command,
.tactical-panel,
.fleet-status-panel,
.deployment-actions {
  border: 1px solid rgba(151, 174, 196, .24);
  border-radius: 0;
  background:
    linear-gradient(145deg, rgba(22, 40, 60, .18), transparent 42%),
    linear-gradient(180deg, rgba(3, 10, 18, .95), rgba(2, 7, 13, .91));
  box-shadow: 0 16px 38px rgba(0, 0, 0, .46), inset 0 0 0 1px rgba(255, 255, 255, .018);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

.battle-brand {
  position: absolute;
  top: clamp(10px, 1.2vw, 20px);
  left: clamp(10px, 1.2vw, 22px);
  display: flex;
  width: clamp(270px, 17vw, 390px);
  min-height: clamp(105px, 12svh, 150px);
  justify-content: center;
  padding: clamp(1rem, 2vw, 1.8rem) 1.25rem 1.1rem 2rem;
  border-color: rgba(201, 161, 82, .3);
  background: linear-gradient(110deg, rgba(3, 9, 16, .97), rgba(3, 10, 17, .86));
}

.battle-brand::before {
  left: 19px;
  top: 20%;
  bottom: 20%;
  width: 5px;
  background: linear-gradient(#f1ca78, #755025);
}

.battle-brand span { color: #d2b46f; font-size: clamp(.52rem, .55vw, .68rem); }
.battle-brand strong { margin-top: .32rem; font: 500 clamp(1.45rem, 1.85vw, 2.4rem)/1 Georgia, serif; letter-spacing: .1em; }
.battle-brand small { margin-top: .45rem; color: #8190a0; font-size: clamp(.46rem, .45vw, .58rem); }

.turn-command {
  position: absolute;
  top: clamp(12px, 1.4vw, 22px);
  left: calc(50% - min(19vw, 210px));
  display: flex;
  width: min(38vw, 420px);
  min-width: 300px;
  min-height: 54px;
  justify-content: center;
  padding: .65rem 2.2rem .62rem 2.65rem;
  border-color: rgba(154, 177, 201, .2);
  background: rgba(3, 9, 17, .82);
}

.turn-command > i { left: 1.25rem; }
.turn-command span { color: #d0ae63; }
.turn-command strong { color: #eff0e9; }

.player-panel {
  position: absolute;
  top: clamp(10px, 1.2vw, 20px);
  right: clamp(10px, 1.2vw, 22px);
  width: clamp(285px, 18vw, 410px);
  min-height: clamp(105px, 12svh, 150px);
  overflow: hidden;
  color: #e8e3d8;
}

.player-network {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: .9rem 1rem .65rem;
  border-bottom: 1px solid rgba(205, 161, 76, .3);
  background: linear-gradient(90deg, rgba(151, 104, 39, .18), transparent);
  text-transform: uppercase;
}

.player-network span { color: #d9bb76; font: 800 .58rem/1 "Bahnschrift Condensed", "Arial Narrow", sans-serif; letter-spacing: .15em; }
.player-network strong { font: 500 .86rem/1 Georgia, serif; letter-spacing: .08em; }
.player-identity { display: flex; gap: .7rem; align-items: center; padding: .65rem 1rem .45rem; }
.player-identity > i { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #7596b7; border-radius: 50%; color: #bdcee0; font: 800 .52rem/1 sans-serif; font-style: normal; }
.player-identity > span { display: flex; flex-direction: column; }
.player-identity strong { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.player-identity small { margin-top: .18rem; color: #8b9aac; font-size: .56rem; }
.player-actions { display: flex; justify-content: flex-end; gap: .5rem; padding: 0 1rem .65rem; }
.layout-reset,
.pause-button { padding: .46rem .7rem; border: 1px solid rgba(145, 172, 198, .28); border-radius: 0; background: #0a1a2a; color: #c9d2dc; font: 800 .54rem/1 "Bahnschrift Condensed", "Arial Narrow", sans-serif; letter-spacing: .09em; text-transform: uppercase; cursor: pointer; }
.layout-reset:hover,
.pause-button:hover { border-color: var(--gold); color: #f6e8c5; }

.enemy-horizon {
  top: 0;
  height: var(--horizon-height);
  background: #07101b;
  box-shadow: 0 14px 42px rgba(0, 0, 0, .48);
  filter: none;
}

.enemy-horizon img {
  object-position: 50% 58%;
  filter: saturate(.78) contrast(1.08) brightness(.84);
}

.enemy-horizon::before {
  background:
    linear-gradient(180deg, rgba(2, 6, 11, .08), transparent 34%, rgba(3, 9, 15, .12) 70%, rgba(3, 9, 16, .68) 100%),
    linear-gradient(90deg, rgba(2, 6, 12, .17), transparent 22% 78%, rgba(2, 6, 12, .17));
}

.enemy-horizon::after {
  right: 1rem;
  bottom: 7px;
  border-color: rgba(230, 98, 77, .42);
  background: rgba(5, 10, 16, .74);
  color: #df9a87;
  box-shadow: inset 3px 0 var(--red);
}

.battlefield-shell {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
}

.board-stage {
  position: absolute;
  z-index: 4;
  top: calc(var(--horizon-height) - 2px);
  left: 7%;
  right: 7%;
  min-width: 0;
  padding: 0;
}

.board-assembly,
.board-stage:has(.board-plane.is-deploying) .board-assembly {
  width: 100%;
  max-width: none;
}

.theater-strip,
.coastline { display: none; }

.board-plane {
  aspect-ratio: 3 / 1;
  border: 8px solid #25496a;
  border-top-width: 5px;
  background:
    radial-gradient(circle at 50% 12%, rgba(111, 151, 191, .13), transparent 36%),
    linear-gradient(180deg, rgba(21, 54, 84, .94), rgba(8, 29, 49, .98) 58%, rgba(4, 18, 32, 1));
  box-shadow:
    0 28px 64px rgba(0, 3, 8, .68),
    inset 0 0 80px rgba(0, 4, 10, .46),
    inset 0 0 0 1px rgba(178, 204, 228, .14),
    0 0 0 1px #02060b;
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
  transform: none;
  transform-origin: 50% 100%;
}

.board-plane::before {
  background:
    radial-gradient(circle at 40% 14%, rgba(156, 190, 220, .1), transparent 34%),
    repeating-linear-gradient(108deg, rgba(222, 237, 250, .022) 0 2px, transparent 3px 13px),
    linear-gradient(180deg, rgba(112, 151, 188, .08), transparent 28%);
}

.board-plane::after {
  background: conic-gradient(from 0deg, transparent 0 91%, rgba(171, 204, 232, .03) 95%, rgba(171, 204, 232, .19) 99.5%, transparent);
}

.board-plane.is-turn-ready {
  border-color: #3c6487;
  box-shadow:
    0 28px 64px rgba(0, 3, 8, .68),
    inset 0 0 68px rgba(0, 4, 10, .4),
    inset 0 0 0 1px rgba(224, 196, 129, .32),
    0 0 18px rgba(224, 191, 105, .12),
    0 0 0 1px #02060b;
}

.target-cell { border-color: rgba(184, 207, 228, .15); }
.target-cell:nth-child(4n) { border-right-color: rgba(196, 216, 235, .24); }
.target-cell:hover:not(:disabled) { background: rgba(133, 173, 211, .17); box-shadow: inset 0 0 0 1px rgba(171, 204, 232, .62), 0 0 14px rgba(111, 151, 191, .15); }
.target-cell.is-friendly { background: rgba(118, 153, 187, .1); }
.target-cell.is-zero::before { color: #a9c7df; }
.target-reticle.is-ready { border-color: #e3c372; box-shadow: 0 0 0 1px rgba(255, 240, 195, .66), 0 0 19px rgba(226, 191, 105, .7), inset 0 0 10px rgba(226, 191, 105, .2); }
.target-reticle.is-ready::before,
.target-reticle.is-ready::after,
.target-reticle.is-ready span { color: #e3c372; }

.board-readout {
  width: 82%;
  border-color: rgba(156, 181, 205, .24);
  background: rgba(156, 181, 205, .15);
}

.board-readout div { background: rgba(3, 10, 18, .95); }
.board-readout span { color: #8596a8; }

.tactical-panel,
.fleet-status-panel {
  position: absolute;
  z-index: 10;
  bottom: 8px;
  width: clamp(220px, 15.6vw, 390px);
  margin: 0;
  padding: .72rem;
  overflow: hidden;
}

.tactical-panel { left: 8px; height: calc(var(--deck-height) - 16px); }
.fleet-status-panel { right: 8px; height: auto; }
.panel-heading { margin-bottom: .55rem; color: #8494a5; }
.panel-heading strong { color: #d4b66e; }

.mini-map {
  height: calc(100% - 24px);
  aspect-ratio: auto;
  border-color: rgba(143, 173, 202, .36);
  background:
    radial-gradient(circle at 50% 48%, rgba(112, 153, 192, .1), transparent 54%),
    linear-gradient(145deg, #102942, #071522);
}

.mini-cell { border-color: rgba(184, 205, 224, .065); }
.mini-map::after { color: rgba(180, 205, 226, .72); }
.mini-sweep { background: conic-gradient(from 10deg, transparent 0 82%, rgba(142, 178, 210, .15) 92%, rgba(177, 205, 230, .52) 99%, transparent); }

.fleet-status-panel .fleet-counts { margin-top: .25rem; }
.fleet-counts div { border-bottom-color: rgba(151, 177, 202, .15); }
.fleet-counts div:first-child strong { color: #b8dbc2; }

.fleet-water {
  position: absolute;
  z-index: 1;
  left: clamp(235px, 16.6vw, 425px);
  right: clamp(235px, 16.6vw, 425px);
  bottom: 0;
  height: var(--deck-height);
  overflow: hidden;
  border-top: 1px solid rgba(166, 190, 214, .34);
  background:
    radial-gradient(ellipse at 50% -20%, rgba(96, 137, 177, .24), transparent 55%),
    repeating-linear-gradient(174deg, rgba(142, 174, 203, .045) 0 1px, transparent 2px 18px),
    linear-gradient(180deg, #102a43, #081725 62%, #030a12);
  box-shadow: inset 0 18px 32px rgba(0, 0, 0, .28), 0 -8px 24px rgba(0, 0, 0, .35);
}

.fleet-water::before,
.fleet-water::after,
.fleet-water i {
  content: "";
  position: absolute;
  left: -12%;
  width: 124%;
  height: 1px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(165, 193, 218, .23), transparent);
  box-shadow: 0 0 8px rgba(112, 150, 183, .14);
}

.fleet-water::before { top: 24%; }
.fleet-water::after { top: 68%; }
.fleet-water i:nth-child(1) { top: 42%; transform: rotate(-1deg); }
.fleet-water i:nth-child(2) { top: 54%; transform: rotate(1deg); }
.fleet-water i:nth-child(3) { top: 82%; transform: rotate(-.5deg); }

.foreground-fleet {
  z-index: 3;
  bottom: 0;
  width: min(66vw, 1620px);
  height: var(--deck-height);
  filter: drop-shadow(0 17px 18px rgba(0, 0, 0, .7));
}

.battle-screen[data-phase="deployment"] .foreground-fleet,
.battle-screen[data-phase="camouflage"] .foreground-fleet {
  opacity: 1;
  transform: translateX(-50%);
}

.foreground-fleet::before,
.foreground-fleet::after {
  bottom: 8%;
  height: 5%;
  opacity: .22;
  background: linear-gradient(90deg, transparent, rgba(183, 207, 227, .56), transparent);
}

.command-ship {
  left: 50%;
  bottom: -8%;
  width: 58%;
  height: 112%;
  object-position: 50% 100%;
  transform: translateX(-50%);
  filter: brightness(.9) contrast(1.08) saturate(.72);
}

.support-ship {
  bottom: 5%;
  width: 21%;
  height: 60%;
  opacity: .94;
  filter: brightness(.78) contrast(1.06) saturate(.68);
}

.support-left { left: 0; transform: rotate(-2deg); }
.support-right { right: 0; transform: scaleX(-1) rotate(-2deg); }

.deployment-actions {
  position: fixed;
  z-index: 16;
  top: calc(var(--horizon-height) + 16px);
  left: 14px;
  width: clamp(175px, 12vw, 220px);
  max-height: min(38svh, 340px);
  margin: 0;
  padding: .75rem;
  overflow: hidden;
}

.deployment-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .42rem;
  border-color: rgba(221, 188, 111, .46);
  background: linear-gradient(145deg, rgba(96, 65, 25, .13), transparent 38%), rgba(3, 9, 16, .96);
}

.deployment-copy { display: flex; flex-direction: column; gap: .25rem; }
.formation-tray { flex-wrap: wrap; }
.formation-token { border-color: rgba(151, 177, 202, .28); background: linear-gradient(145deg, #132b43, #071522); color: #b6c3d0; }
.secondary-action { width: 100%; border-radius: 0; border-color: rgba(151, 177, 202, .24); background: linear-gradient(180deg, #142b42, #071522); }
.deployment-actions .primary-action { width: 100%; min-width: 0; border-radius: 0; padding: .7rem .6rem; }

.camo-transition {
  inset: 0;
  background: radial-gradient(ellipse at 50% 58%, rgba(53, 89, 123, .35), transparent 46%), linear-gradient(180deg, rgba(2, 7, 13, .97), rgba(5, 17, 29, .99));
}
.camo-transition::before { background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(142, 178, 210, .1) 6px 7px), linear-gradient(90deg, transparent, rgba(157, 192, 221, .16), transparent); }
.camo-progress { background: rgba(137, 168, 196, .13); }
.camo-progress i { background: linear-gradient(90deg, var(--gold), #b4c8dc, #769cc0); }

@media (max-width: 1100px) {
  .battle-screen { --deck-height: 190px; }
  .battle-brand { width: 245px; }
  .player-panel { width: 270px; }
  .turn-command { top: 95px; left: calc(50% - 155px); width: 310px; min-width: 0; }
  .board-stage { left: 2%; right: 2%; }
  .tactical-panel,
  .fleet-status-panel { width: 210px; }
  .fleet-water { left: 215px; right: 215px; }
  .foreground-fleet { width: calc(100% - 430px); }
}

@media (max-width: 820px) {
  .battle-screen { min-width: 760px; min-height: 720px; overflow: auto; }
  .battle-header { height: 0; }
  .enemy-horizon { top: 0; }
  .battlefield-shell { width: 100%; transform: none; }
  .board-stage { grid-row: auto; }
  .foreground-fleet { display: block; }
  .tactical-panel { display: block; grid-template-columns: none; }
  .tactical-panel .panel-heading { grid-column: auto; }
  .fleet-status-panel { display: block; }
}

/* v0.5 — shared perspective battlefield and direct fleet deployment. */
:root {
  --board-cols: 24;
  --board-rows: 16;
}

.target-grid,
.mini-grid {
  grid-template-columns: repeat(var(--board-cols), 1fr);
  grid-template-rows: repeat(var(--board-rows), 1fr);
}

.grid-north { grid-template-columns: repeat(var(--board-cols), 1fr); }
.grid-west { grid-template-rows: repeat(var(--board-rows), 1fr); }
.target-reticle {
  width: calc(100% / var(--board-cols));
  height: calc(100% / var(--board-rows));
}

.board-stage {
  top: calc(var(--horizon-height) - 24px);
  left: .55vw;
  right: .55vw;
  perspective: none;
}

.board-assembly,
.board-stage:has(.board-plane.is-deploying) .board-assembly { width: 100%; }

.board-plane {
  aspect-ratio: 3.2 / 1;
  overflow: clip;
  clip-path: polygon(6.5% 0, 93.5% 0, 100% 100%, 0 100%);
  transform: none;
  transform-origin: 50% 100%;
  border-color: #264e74;
  background:
    radial-gradient(circle at 50% 10%, rgba(96, 137, 177, .12), transparent 34%),
    linear-gradient(180deg, #173957 0%, #0b2741 48%, #05182b 100%);
  box-shadow:
    0 34px 70px rgba(0, 2, 7, .78),
    inset 0 0 90px rgba(0, 2, 8, .5),
    inset 0 0 0 1px rgba(191, 211, 230, .13),
    0 0 0 1px #01050a;
}

/* Keep the locked-state dimming from changing the absolute-positioning
   context of the projected grid while a weapon animation is resolving. */
.board-plane.is-locked { filter: none; }

.board-plane::before {
  background:
    radial-gradient(circle at 38% 8%, rgba(171, 199, 224, .09), transparent 32%),
    repeating-linear-gradient(108deg, rgba(226, 239, 250, .018) 0 2px, transparent 3px 14px),
    linear-gradient(180deg, rgba(117, 153, 186, .07), transparent 28%);
}

.target-cell { border-color: rgba(174, 199, 224, .16); }
.target-cell:nth-child(4n) { border-right-color: rgba(194, 215, 234, .23); }
.target-cell:hover:not(:disabled) {
  background: rgba(195, 164, 96, .13);
  box-shadow: inset 0 0 0 1px rgba(228, 194, 116, .52), 0 0 12px rgba(208, 172, 91, .12);
}
.target-cell.is-friendly { background: rgba(117, 154, 190, .11); }

.grid-north,
.grid-west {
  color: rgba(200, 214, 228, .5);
  font-size: clamp(.2rem, .3vw, .4rem);
}

.board-readout { width: 84%; }

.formation-layer { overflow: visible; }
.board-plane.is-deploying .formation-layer { z-index: 5; }
.formation-sprite.is-draggable {
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.formation-sprite.is-draggable:active { cursor: grabbing; }
.formation-sprite.is-unconfirmed {
  opacity: .48;
  filter: grayscale(.25) brightness(1.08) drop-shadow(0 2px 2px rgba(0, 0, 0, .8));
}
.formation-sprite.is-dragging {
  z-index: 8;
  opacity: .86;
  filter: brightness(1.45) drop-shadow(0 0 8px rgba(227, 191, 108, .92));
}
.board-plane[data-drag-valid="false"] .target-reticle {
  display: block;
  border-color: var(--red);
  box-shadow: 0 0 14px rgba(233, 94, 77, .72);
}

.battle-brand { overflow: visible; }
.brand-pause {
  position: absolute;
  top: calc(clamp(10px, 1.2vw, 20px) + clamp(105px, 12svh, 150px) + 10px);
  left: clamp(10px, 1.2vw, 22px);
  width: clamp(105px, 8vw, 150px);
  padding: .7rem .75rem;
  border-color: #9f762f;
  background: linear-gradient(180deg, #e7c46d, #9e6c25);
  color: #07101b;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 244, 195, .55);
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 9px 100%, 0 50%);
  font-size: .68rem;
  letter-spacing: .15em;
}
.brand-pause:hover { color: #02060b; filter: brightness(1.08); }

.turn-command {
  top: clamp(12px, 1.35vw, 22px);
  left: calc(50% - min(27vw, 440px));
  display: grid;
  grid-template-columns: minmax(132px, .8fr) minmax(210px, 1.35fr) minmax(112px, .7fr);
  width: min(54vw, 880px);
  min-width: 540px;
  min-height: 96px;
  align-items: center;
  justify-content: initial;
  gap: clamp(.7rem, 1.3vw, 1.35rem);
  padding: .8rem 1.35rem;
  background:
    linear-gradient(90deg, rgba(192, 151, 67, .07), transparent 26% 76%, rgba(192, 151, 67, .045)),
    rgba(3, 9, 17, .92);
}

.deployment-shortcuts {
  display: grid;
  gap: .45rem;
  padding-right: 1rem;
  border-right: 1px solid rgba(163, 184, 204, .16);
}
.deployment-shortcuts button {
  padding: .32rem .45rem;
  border: 0;
  background: transparent;
  color: #d9e0e8;
  text-align: left;
  font: 800 clamp(.66rem, .72vw, .86rem)/1 "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.deployment-shortcuts button::before {
  content: "◆";
  margin-right: .55rem;
  color: #bc9145;
  font-size: .52em;
}
.deployment-shortcuts button:hover { color: #f3d992; }

.turn-copy {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 1.25rem;
}
.turn-copy > i {
  position: absolute;
  left: 0;
  top: .12rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #d2ad5d;
  box-shadow: 0 0 10px rgba(210, 173, 93, .7);
}
.turn-copy > span {
  color: #d0ae63;
  font: 800 clamp(.52rem, .55vw, .66rem)/1 "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.turn-copy > strong {
  margin-top: .32rem;
  color: #f0eee6;
  font: 800 clamp(.9rem, 1vw, 1.18rem)/1 "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.turn-copy > small,
.turn-copy > em {
  overflow: hidden;
  max-width: 100%;
  color: #9aa9b7;
  font: 600 clamp(.46rem, .48vw, .58rem)/1.25 "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  font-style: normal;
  letter-spacing: .035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.turn-copy > small { margin-top: .38rem; }
.turn-copy > em { margin-top: .22rem; color: #c9a65b; text-transform: uppercase; }

.header-deploy {
  min-width: 0;
  padding: .75rem .65rem;
  border: 1px solid #ae8134;
  background: linear-gradient(180deg, #e7c36a, #a46f25);
  color: #06101a;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
  font: 900 clamp(.66rem, .75vw, .9rem)/1 "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}
.header-deploy:disabled {
  border-color: #394450;
  background: linear-gradient(180deg, #303943, #1d252e);
  color: #77818b;
  cursor: not-allowed;
  filter: saturate(0);
}
.header-deploy:not(:disabled):hover { filter: brightness(1.1); }
.blind-luck-fire {
  min-width: 0;
  padding: .75rem .9rem;
  border: 1px solid #4a8f88;
  background: linear-gradient(180deg, #8ce2da, #2d6f78);
  color: #051015;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
  font: 900 clamp(.66rem, .75vw, .9rem)/1 "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}
.blind-luck-fire:disabled {
  border-color: #394450;
  background: linear-gradient(180deg, #303943, #1d252e);
  color: #77818b;
  cursor: not-allowed;
  filter: saturate(0);
}
.blind-luck-fire:not(:disabled):hover { filter: brightness(1.08); }

.battle-screen:not([data-phase="deployment"]) .deployment-shortcuts,
.battle-screen:not([data-phase="deployment"]) .header-deploy,
.battle-screen:not([data-phase="deployment"]) #deployment-instruction,
.battle-screen:not([data-phase="deployment"]) #placement-status { display: none; }
.battle-screen:not([data-phase="deployment"]) .turn-command {
  display: none;
}
.battle-screen[data-mode="blind-luck"]:not([data-phase="deployment"]) .turn-command {
  display: flex;
}

.pause-audio {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .55rem .8rem;
  padding: .85rem;
  border: 1px solid rgba(151, 174, 196, .2);
  background: #071321;
  text-align: left;
}
.pause-audio > div { display: flex; grid-column: 1 / -1; justify-content: space-between; color: #d7ba75; text-transform: uppercase; }
.pause-audio label { color: #9ba9b7; font-size: .68rem; text-transform: uppercase; }
.pause-audio input { width: 100%; accent-color: #c89a49; }
.pause-audio .dialog-action { grid-column: 1 / -1; border-radius: 0; }

@media (max-width: 1100px) {
  .turn-command {
    top: 96px;
    left: calc(50% - 310px);
    width: 620px;
    min-width: 620px;
    min-height: 74px;
  }
  .board-stage { left: .75vw; right: .75vw; }
}

/* v0.6 — presentation upgrade: raised islands, living fleet, and two weapon signatures. */
.island-layer { overflow: visible; }
.island-piece {
  position: absolute;
  z-index: 1;
  display: block;
  overflow: visible;
  pointer-events: none;
  isolation: isolate;
}
.island-piece::before {
  content: "";
  position: absolute;
  z-index: -4;
  left: 3%;
  right: 3%;
  bottom: -8%;
  height: 28%;
  border-radius: 50%;
  opacity: .8;
  background: radial-gradient(ellipse, rgba(0, 3, 9, .92), rgba(2, 12, 23, .34) 48%, transparent 74%);
  filter: blur(3px);
  transform: scaleX(1.05);
}
.island-piece > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  transform-origin: 50% 70%;
}
.island-depth {
  z-index: -2;
  opacity: .92;
  filter: saturate(.45) brightness(.24) contrast(1.38) drop-shadow(0 5px 4px rgba(0, 2, 7, .7));
}
.island-depth-1 { transform: translateY(3.2%); }
.island-depth-2 { z-index: -3; opacity: .62; transform: translateY(6.4%); filter: saturate(.25) brightness(.14) contrast(1.5) blur(.35px); }
.island-art {
  z-index: 2;
  filter:
    saturate(1.04)
    contrast(1.1)
    brightness(1.02)
    drop-shadow(0 1px 0 rgba(255, 229, 163, .46))
    drop-shadow(0 3px 0 rgba(67, 43, 27, .7))
    drop-shadow(0 7px 5px rgba(0, 2, 7, .64));
  transform: translateY(-2%);
  animation: island-light 6.5s ease-in-out infinite alternate;
}
.island-shoreline {
  position: absolute;
  z-index: -1;
  left: 2%;
  right: 2%;
  bottom: -2%;
  height: 17%;
  border-radius: 50%;
  opacity: .48;
  background: radial-gradient(ellipse, rgba(177, 206, 229, .4), rgba(92, 135, 171, .14) 45%, transparent 72%);
  filter: blur(1.5px);
  animation: shoreline-pulse 4.8s ease-in-out infinite alternate;
}
.island-piece:nth-child(2n) .island-art { animation-delay: -2.1s; }
.island-piece:nth-child(3n) .island-shoreline { animation-delay: -1.6s; }
@keyframes island-light {
  from { filter: saturate(1.01) contrast(1.08) brightness(.98) drop-shadow(0 1px 0 rgba(255, 229, 163, .4)) drop-shadow(0 3px 0 rgba(67, 43, 27, .7)) drop-shadow(0 7px 5px rgba(0, 2, 7, .64)); }
  to { filter: saturate(1.08) contrast(1.13) brightness(1.05) drop-shadow(0 1px 0 rgba(255, 232, 170, .56)) drop-shadow(0 3px 0 rgba(67, 43, 27, .74)) drop-shadow(0 8px 6px rgba(0, 2, 7, .72)); }
}
@keyframes shoreline-pulse { to { opacity: .7; transform: scaleX(1.035); } }

.island-smoke {
  position: absolute;
  z-index: 6;
  left: 38%;
  top: 30%;
  width: 42%;
  height: 54%;
  pointer-events: none;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .68));
}
.island-smoke::before,
.island-smoke::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.island-smoke::before {
  left: 23%;
  bottom: 12%;
  width: 50%;
  aspect-ratio: 1;
  opacity: .64;
  background: radial-gradient(circle at 48% 55%, rgba(2, 3, 5, .98), rgba(12, 13, 16, .8) 44%, rgba(38, 40, 46, .3) 68%, transparent 79%);
  filter: blur(1.4px);
  animation: smoke-heart 3.2s ease-in-out infinite alternate;
}
.island-smoke::after {
  left: 7%;
  bottom: 0;
  width: 84%;
  height: 62%;
  opacity: .4;
  background: radial-gradient(ellipse at 50% 66%, rgba(5, 6, 8, .88), rgba(20, 22, 27, .38) 54%, transparent 76%);
  filter: blur(2.6px);
  animation: smoke-aura 4.1s ease-in-out infinite alternate;
}
.island-smoke i {
  position: absolute;
  left: 40%;
  bottom: 12%;
  width: 39%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle at 42% 44%, rgba(2, 3, 5, .98), rgba(12, 13, 16, .84) 48%, rgba(42, 44, 50, .32) 66%, transparent 76%);
  filter: blur(1.35px);
  animation: smoke-wisp 4s ease-out infinite;
}
.island-smoke i:nth-child(2) { left: 8%; animation-delay: -.66s; }
.island-smoke i:nth-child(3) { left: 59%; animation-delay: -1.33s; }
.island-smoke i:nth-child(4) { left: 24%; width: 35%; animation-delay: -2s; }
.island-smoke i:nth-child(5) { left: 51%; width: 32%; animation-delay: -2.66s; }
.island-smoke i:nth-child(6) { left: 2%; width: 38%; animation-delay: -3.33s; }
@keyframes smoke-wisp {
  0% { opacity: 0; transform: translate(0, 18%) scale(.42); }
  18% { opacity: .84; }
  66% { opacity: .44; }
  100% { opacity: 0; transform: translate(31%, -142%) scale(1.58); }
}
@keyframes smoke-heart { to { opacity: .84; transform: translateY(-7%) scale(1.11); } }
@keyframes smoke-aura { to { opacity: .58; transform: scale(1.07, 1.14); } }

/* Reuse the approved v0.6.17 polar-bear pixels. A feathered crop from a clean
   sand area covers the original resting point while the identical bear crop
   patrols the I island and occasionally rears. */
.island-bear-cover {
  position: absolute;
  z-index: 3;
  left: 34%;
  top: 48%;
  width: 32%;
  height: 25%;
  background-image: url("./assets/islands/I.png");
  background-repeat: no-repeat;
  background-size: 312.5% 400%;
  background-position: 50% 33%;
  filter: brightness(1.015) saturate(1.02);
  -webkit-mask-image: radial-gradient(ellipse, #000 52%, rgba(0, 0, 0, .84) 68%, transparent 100%);
  mask-image: radial-gradient(ellipse, #000 52%, rgba(0, 0, 0, .84) 68%, transparent 100%);
}
.island-bear {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  transform-origin: 50% 60%;
  filter: saturate(1.02) contrast(1.08) brightness(1.04) drop-shadow(0 2px 1px rgba(25, 20, 14, .54));
  -webkit-mask-image: radial-gradient(ellipse 15.5% 11.5% at 50% 60%, #000 52%, rgba(0, 0, 0, .84) 70%, transparent 100%);
  mask-image: radial-gradient(ellipse 15.5% 11.5% at 50% 60%, #000 52%, rgba(0, 0, 0, .84) 70%, transparent 100%);
  animation: polar-bear-patrol 26s ease-in-out infinite;
}
@keyframes polar-bear-patrol {
  0%, 7% { transform: translate(0, 0) rotate(0deg) scale(1); }
  18% { transform: translate(-6%, -17%) rotate(168deg) scale(1); }
  28% { transform: translate(5%, -27%) rotate(194deg) scale(1); }
  31%, 34% { transform: translate(5%, -27%) rotate(194deg) scale(1.13, 1.38); filter: saturate(1.02) contrast(1.1) brightness(1.12) drop-shadow(0 3px 2px rgba(25, 20, 14, .62)); }
  38% { transform: translate(5%, -27%) rotate(194deg) scale(1); }
  52% { transform: translate(7%, -6%) rotate(8deg) scale(1); }
  67% { transform: translate(-5%, 17%) rotate(-11deg) scale(1); }
  76% { transform: translate(-7%, 10%) rotate(174deg) scale(1); }
  79%, 82% { transform: translate(-7%, 10%) rotate(174deg) scale(1.12, 1.36); filter: saturate(1.02) contrast(1.1) brightness(1.12) drop-shadow(0 3px 2px rgba(25, 20, 14, .62)); }
  86% { transform: translate(-7%, 10%) rotate(174deg) scale(1); }
  100% { transform: translate(0, 0) rotate(360deg) scale(1); }
}

.foreground-fleet {
  overflow: visible;
  filter: drop-shadow(0 15px 17px rgba(0, 0, 0, .68));
}
.command-ship {
  bottom: -5%;
  width: 55%;
  height: 108%;
  filter: brightness(.94) contrast(1.1) saturate(.84) drop-shadow(0 6px 5px rgba(0, 0, 0, .65));
  animation: command-heave 6.2s ease-in-out infinite;
}
.support-ship {
  bottom: 7%;
  width: 19%;
  height: 53%;
  opacity: .96;
  filter: brightness(.82) contrast(1.1) saturate(.8) drop-shadow(0 5px 4px rgba(0, 0, 0, .72));
}
.support-left { left: 2%; animation: support-heave-left 5.4s ease-in-out -1.2s infinite; }
.support-right { right: 2%; animation: support-heave-right 5.8s ease-in-out -3.1s infinite; }
@keyframes command-heave {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(-.18deg); }
  50% { transform: translateX(-50%) translateY(-3px) rotate(.18deg); }
}
@keyframes support-heave-left {
  0%, 100% { transform: translateY(0) rotate(-2.2deg); }
  50% { transform: translateY(-3px) rotate(-1.4deg); }
}
@keyframes support-heave-right {
  0%, 100% { transform: scaleX(-1) translateY(0) rotate(-2.2deg); }
  50% { transform: scaleX(-1) translateY(-2px) rotate(-1.3deg); }
}
.foreground-fleet::before,
.foreground-fleet::after {
  height: 7%;
  opacity: .34;
  filter: blur(3px);
  background: linear-gradient(90deg, transparent, rgba(169, 199, 224, .5) 42%, rgba(225, 237, 246, .7) 54%, transparent);
  animation: fleet-wake 3.8s ease-in-out infinite alternate;
}
.foreground-fleet::after { animation-delay: -1.9s; }
@keyframes fleet-wake { to { opacity: .58; transform: translateX(2%) scaleX(1.08); } }
.fleet-water { background-size: 100% 100%, 130% 100%, 100% 100%; animation: water-drift 12s linear infinite; }
@keyframes water-drift { to { background-position: 0 0, 80px 0, 0 0; } }

.weapon-hardpoint {
  position: absolute;
  z-index: 6;
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.weapon-hardpoint i { position: absolute; inset: -5px; border: 1px solid currentColor; border-radius: 50%; animation: hardpoint-ready 1.8s ease-out infinite; }
.missile-hardpoint { left: 56.5%; bottom: 49%; color: #eac56d; background: #ffe3a0; box-shadow: 0 0 10px #e4b755; }
.battle-screen[data-phase="combat"][data-actor="player"][data-busy="false"] .weapon-hardpoint { opacity: .7; }
@keyframes hardpoint-ready { from { opacity: .8; transform: scale(.35); } to { opacity: 0; transform: scale(1.45); } }

.launcher-bloom { position: fixed; z-index: 104; display: block; pointer-events: none; }
.launcher-bloom {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff 0 8%, #ffe6a5 18%, #ff9f3f 38%, rgba(218, 80, 28, .42) 57%, transparent 72%);
  box-shadow: 0 0 18px #ffcb68, 0 0 34px rgba(255, 116, 38, .7);
  animation: launcher-flash .72s ease-out forwards;
}
.launcher-bloom i {
  position: absolute;
  left: 50%;
  top: 55%;
  width: 26px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(205, 213, 218, .54), rgba(92, 100, 108, .2) 54%, transparent 74%);
  filter: blur(2px);
  animation: launch-smoke .9s ease-out forwards;
}
.launcher-bloom i:nth-child(2) { animation-delay: .12s; transform: rotate(18deg); }
@keyframes launcher-flash { from { opacity: 1; transform: translate(-50%, -50%) scale(.25); } to { opacity: 0; transform: translate(-50%, -50%) scale(2.2); } }
@keyframes launch-smoke { from { opacity: .7; transform: translate(-50%, -30%) scale(.4); } to { opacity: 0; transform: translate(-80%, -180%) scale(1.7); } }

.missile {
  width: 9px;
  height: 31px;
  border: 1px solid rgba(255, 255, 255, .45);
  background: linear-gradient(#fff8e7, #cbd1d0 48%, #4c5860 74%);
  box-shadow: 0 0 10px #fff5d7, 0 0 22px rgba(255, 158, 57, .62);
}
.missile::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 23px;
  width: 12px;
  height: 82px;
  transform: translateX(-50%);
  background: linear-gradient(#fff8c4 0 5%, rgba(255, 147, 48, .84) 12%, rgba(173, 186, 195, .26) 42%, transparent 88%);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  filter: blur(1.2px);
}
.missile.is-enemy { filter: hue-rotate(330deg) saturate(1.5); }

.resolved-impact.sonar .sonar-ring {
  border-color: rgba(239, 198, 105, .94);
  box-shadow: 0 0 18px rgba(239, 198, 105, .78), inset 0 0 12px rgba(126, 183, 229, .26);
}

@media (prefers-reduced-motion: reduce) {
  .island-art,
  .island-shoreline,
  .island-bear,
  .island-smoke::before,
  .island-smoke::after,
  .island-smoke i,
  .command-ship,
  .support-left,
  .support-right,
  .foreground-fleet::before,
  .foreground-fleet::after,
  .fleet-water,
  .weapon-hardpoint i { animation: none !important; }
}

/* v0.6.1 — one shared perspective surface. The former trapezoid clipped a
   rectangular grid; this projects the grid, islands, ships, labels, reticle,
   and effects together so every corner cell stays inside the board. */
.board-plane,
.board-plane.is-turn-ready {
  overflow: visible;
  border: 0;
  clip-path: none;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.board-plane::before,
.board-plane::after { content: none; }

.board-surface {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 121%;
  overflow: clip;
  border: 8px solid #264e74;
  border-top-width: 5px;
  background:
    radial-gradient(circle at 50% 10%, rgba(96, 137, 177, .12), transparent 34%),
    linear-gradient(180deg, #173957 0%, #0b2741 48%, #05182b 100%);
  box-shadow:
    0 34px 70px rgba(0, 2, 7, .78),
    inset 0 0 90px rgba(0, 2, 8, .5),
    inset 0 0 0 1px rgba(191, 211, 230, .13),
    0 0 0 1px #01050a;
  transform: perspective(70vw) rotateX(17deg);
  transform-origin: 50% 100%;
  backface-visibility: hidden;
}

.board-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 38% 8%, rgba(171, 199, 224, .09), transparent 32%),
    repeating-linear-gradient(108deg, rgba(226, 239, 250, .018) 0 2px, transparent 3px 14px),
    linear-gradient(180deg, rgba(117, 153, 186, .07), transparent 28%);
  animation: water-drift 18s linear infinite;
}

.board-plane.is-turn-ready .board-surface {
  border-color: #3c6487;
  box-shadow:
    0 34px 70px rgba(0, 2, 7, .78),
    inset 0 0 74px rgba(0, 2, 8, .44),
    inset 0 0 0 1px rgba(224, 196, 129, .32),
    0 0 18px rgba(224, 191, 105, .12),
    0 0 0 1px #01050a;
}

/* v0.6.2 — one continuous sea. The shoreline, projected grid, open theater
   margins, and foreground fleet now share the same ocean instead of stacking
   separate dark water panels. */
.battle-screen {
  background: #071a2b;
}

.battle-screen::before {
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 23%, rgba(88, 132, 167, .2), transparent 48%),
    radial-gradient(ellipse at 18% 69%, rgba(43, 85, 123, .11), transparent 38%),
    repeating-linear-gradient(174deg, rgba(169, 199, 223, .035) 0 1px, transparent 2px 21px),
    linear-gradient(180deg, #163b59 0%, #12344f 24%, #0d2a43 51%, #081e34 75%, #061628 100%);
  background-size: auto, auto, 130% 100%, auto;
  animation: continuous-sea-drift 24s linear infinite;
}

@keyframes continuous-sea-drift {
  to { background-position: 0 0, 0 0, 84px 12px, 0 0; }
}

.enemy-horizon {
  box-shadow: none;
}

.enemy-horizon::before {
  background:
    linear-gradient(180deg, rgba(2, 6, 11, .08), transparent 34%, rgba(8, 25, 40, .06) 68%, rgba(18, 52, 79, .5) 100%),
    linear-gradient(90deg, rgba(2, 6, 12, .17), transparent 22% 78%, rgba(2, 6, 12, .17));
}

.board-surface {
  border: 1px solid rgba(175, 207, 231, .34);
  background: transparent;
  box-shadow: 0 0 0 1px rgba(3, 16, 29, .2);
}

.board-surface::before {
  background:
    linear-gradient(180deg, rgba(192, 220, 238, .045), transparent 24%),
    repeating-linear-gradient(108deg, rgba(226, 239, 250, .014) 0 1px, transparent 2px 16px);
  animation: water-drift 22s linear infinite;
}

.board-plane.is-turn-ready .board-surface {
  border-color: rgba(225, 197, 130, .58);
  box-shadow: 0 0 0 1px rgba(225, 197, 130, .12), 0 0 16px rgba(225, 191, 105, .08);
}

.target-cell {
  border-color: rgba(200, 222, 239, .17);
  background-color: transparent;
}

.target-cell:nth-child(4n) {
  border-right-color: rgba(207, 228, 243, .2);
}

.fleet-water {
  left: 0;
  right: 0;
  border-top: 0;
  background: transparent;
  box-shadow: none;
}

.fleet-water::before,
.fleet-water::after,
.fleet-water i {
  opacity: .48;
  background: linear-gradient(90deg, transparent, rgba(170, 199, 222, .16), transparent);
  box-shadow: none;
}

/* v0.6.3 — keep the projected grid below the distant shoreline terrain. */
.board-stage {
  top: var(--horizon-height);
}

/* v0.6.4 — remove the obsolete dark readout between the grid and fleet. */
.board-readout {
  display: none;
}

/* v0.6.5 — tactile impact response. Ordinary hits produce a restrained nudge;
   sinking a formation produces a stronger, quickly damped full-screen shake. */
.battle-screen.is-hit-shaking {
  animation: battlesweep-hit-shake 170ms ease-out both;
}

.battle-screen.is-sink-shaking {
  animation: battlesweep-sink-shake 580ms cubic-bezier(.18, .72, .24, 1) both;
}

@keyframes battlesweep-hit-shake {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  28% { transform: translate3d(-1.5px, .8px, 0) scale(1.002); }
  58% { transform: translate3d(1.2px, -.7px, 0) scale(1.002); }
  80% { transform: translate3d(-.5px, .3px, 0) scale(1.001); }
}

@keyframes battlesweep-sink-shake {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  10% { transform: translate3d(-7px, 3px, 0) rotate(-.12deg) scale(1.008); }
  23% { transform: translate3d(6px, -3px, 0) rotate(.11deg) scale(1.008); }
  38% { transform: translate3d(-5px, -2px, 0) rotate(-.08deg) scale(1.007); }
  54% { transform: translate3d(4px, 2px, 0) rotate(.06deg) scale(1.006); }
  69% { transform: translate3d(-2.5px, 1px, 0) scale(1.004); }
  83% { transform: translate3d(1.2px, -.6px, 0) scale(1.002); }
}

@media (prefers-reduced-motion: reduce) {
  .battle-screen.is-hit-shaking,
  .battle-screen.is-sink-shaking { animation: none !important; }
}

/* v0.6.6 — approved foreground fleet and independent environmental motion. */
.foreground-fleet {
  bottom: 0;
  width: min(76vw, 1480px);
  height: var(--deck-height);
  overflow: visible;
  filter: none;
}

.foreground-fleet::before,
.foreground-fleet::after {
  content: none;
}

.fleet-vessel {
  position: absolute;
  z-index: 2;
  bottom: 0;
  height: 100%;
  transform-origin: 50% 78%;
  will-change: transform;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.vessel-canvas {
  position: absolute;
  inset: auto 0 0;
  width: 100%;
  aspect-ratio: 1914 / 822;
  transform: translateY(15%);
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}

.fleet-vessel .fleet-sprite {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
  transform: none;
  animation: none;
}

.command-vessel {
  z-index: 4;
  left: 50%;
  width: min(62%, 720px);
  transform: translateX(-50%);
  animation: command-vessel-heave 5.2s ease-in-out infinite;
}

.command-vessel .command-ship {
  filter: brightness(.91) contrast(1.1) saturate(.8) drop-shadow(0 8px 6px rgba(0, 0, 0, .67));
}

.support-vessel {
  z-index: 3;
  bottom: 68%;
  width: min(14.5%, 225px);
  height: 82%;
}

.support-vessel .vessel-canvas {
  aspect-ratio: 1684 / 934;
  transform: translateY(24%);
}

.support-vessel .support-ship {
  opacity: .97;
  filter: brightness(.78) contrast(1.12) saturate(.78) drop-shadow(0 7px 5px rgba(0, 0, 0, .7));
}

.support-left {
  left: 5%;
  transform: none;
  animation: support-vessel-heave-left 4.8s ease-in-out -1.2s infinite;
}

.support-right {
  right: 4.5%;
  transform: none;
  animation: support-vessel-heave-right 5.4s ease-in-out -3s infinite;
}

.support-right .vessel-canvas {
  transform: translateY(24%) scaleX(-1);
}

@keyframes command-vessel-heave {
  0%, 100% { transform: translateX(-50%) translate3d(0, 5px, 0) rotate(-.34deg); }
  50% { transform: translateX(-50%) translate3d(0, -5px, 0) rotate(.34deg); }
}

@keyframes support-vessel-heave-left {
  0%, 100% { transform: translate3d(0, 5px, 0) rotate(-.5deg); }
  50% { transform: translate3d(0, -5px, 0) rotate(.5deg); }
}

@keyframes support-vessel-heave-right {
  0%, 100% { transform: translate3d(0, 5px, 0) rotate(.5deg); }
  50% { transform: translate3d(0, -5px, 0) rotate(-.5deg); }
}

.vessel-ripple {
  position: absolute;
  z-index: -1;
  left: 6%;
  right: 6%;
  bottom: 4%;
  height: 13%;
  border-radius: 50%;
  opacity: .42;
  background:
    radial-gradient(ellipse at center, transparent 0 34%, rgba(199, 220, 235, .24) 43%, transparent 56%),
    linear-gradient(90deg, transparent, rgba(185, 210, 228, .5) 46% 54%, transparent);
  filter: blur(2.4px);
  animation: vessel-waterline 2.9s ease-in-out infinite alternate;
}

.command-vessel .vessel-ripple {
  left: 3%;
  right: 3%;
  bottom: 1%;
  height: 12%;
}

.support-right .vessel-ripple { animation-delay: -1.4s; }

@keyframes vessel-waterline {
  from { opacity: .28; transform: scaleX(.94) scaleY(.78); }
  to { opacity: .54; transform: scaleX(1.04) scaleY(1.08); }
}

.ducted-rotor {
  position: absolute;
  z-index: 5;
  overflow: hidden;
  border-radius: 50%;
  transform-origin: 50% 50%;
  box-shadow: inset 0 0 4px rgba(5, 9, 12, .9);
  opacity: .78;
}

.ducted-rotor-a {
  left: 77.55%;
  top: 30.3%;
  width: 5.35%;
  height: 3.7%;
  transform: rotate(-9deg);
}

.ducted-rotor-b {
  left: 83.9%;
  top: 41.45%;
  width: 6.75%;
  height: 4%;
  transform: rotate(-14deg);
}

.ducted-rotor i {
  position: absolute;
  inset: -42%;
  display: block;
  border-radius: 50%;
  background:
    radial-gradient(circle, #9aa2a4 0 4%, #171c20 5% 11%, transparent 12%),
    conic-gradient(from 8deg,
      transparent 0 8%, rgba(198, 207, 209, .62) 9% 14%, transparent 15% 33%,
      rgba(198, 207, 209, .54) 34% 39%, transparent 40% 58%,
      rgba(198, 207, 209, .6) 59% 64%, transparent 65% 83%,
      rgba(198, 207, 209, .52) 84% 89%, transparent 90%);
  filter: blur(.35px);
  animation: ducted-rotor-spin .18s linear infinite;
}

.ducted-rotor-b i { animation-duration: .21s; animation-direction: reverse; }

@keyframes ducted-rotor-spin { to { transform: rotate(360deg); } }

.radar-array {
  position: absolute;
  z-index: 7;
  display: block;
  height: 1.65%;
  perspective: 130px;
  transform: translate(-50%, -58%);
  transform-style: preserve-3d;
}

.radar-array::before {
  content: "";
  position: absolute;
  left: calc(50% - 1px);
  top: 42%;
  width: 2px;
  height: 120%;
  background: linear-gradient(#90999f, #283039);
  box-shadow: 0 0 2px rgba(200, 220, 231, .42);
}

.radar-array i {
  position: absolute;
  inset: 0;
  display: block;
  border: 1px solid rgba(183, 199, 208, .68);
  border-radius: 1px;
  background: linear-gradient(180deg, #bac4ca, #4d5962 48%, #1a2229 54%, #6f7d85);
  box-shadow: 0 0 3px rgba(157, 190, 209, .44);
  transform-origin: 50% 50%;
  animation: radar-array-spin 6.4s linear infinite;
}

.command-radar {
  left: 49.75%;
  top: 13.75%;
  width: 4.8%;
}

.patrol-radar {
  left: 55.35%;
  top: 11.8%;
  width: 9.2%;
  height: 2.1%;
}

.support-left .radar-array i { animation-duration: 5.8s; animation-delay: -1.45s; }
.support-right .radar-array i { animation-duration: 6.9s; animation-delay: -3.8s; }

@keyframes radar-array-spin {
  from { transform: rotateY(0deg); filter: brightness(1.08); }
  25% { filter: brightness(.72); }
  50% { filter: brightness(1.18); }
  75% { filter: brightness(.78); }
  to { transform: rotateY(360deg); filter: brightness(1.08); }
}

.command-vessel .missile-hardpoint {
  left: 37.2%;
  top: 53.5%;
  bottom: auto;
}

@media (max-width: 1100px) {
  .foreground-fleet { width: calc(100% - 410px); min-width: 590px; }
  .command-vessel { width: 64%; }
  .support-vessel { width: 21%; }
}

@media (prefers-reduced-motion: reduce) {
  .command-vessel,
  .support-left,
  .support-right,
  .vessel-ripple { animation: none !important; }

  .radar-array i {
    animation: none !important;
    transform: rotateY(24deg);
  }

  .ducted-rotor i {
    animation: none !important;
    opacity: .54;
    filter: blur(.8px);
    transform: rotate(18deg);
  }
}

/* v0.6.7 — approved upper-left Battlesweep command identity. */
.battle-screen {
  --identity-width: clamp(265px, 18vw, 360px);
  --identity-height: clamp(78px, 5.3vw, 106px);
}

.battle-brand {
  width: var(--identity-width);
  height: var(--identity-height);
  min-height: var(--identity-height);
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #020914;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .48), 0 0 0 1px rgba(146, 169, 190, .14);
  clip-path: none;
}

.battle-brand::before { content: none; }

.battle-brand-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: scale(1.16);
}

.battle-brand .panel-grip {
  top: 2px;
  right: 3px;
  width: 32px;
  height: 20px;
}

.battle-brand .panel-grip::before { content: none; }

.brand-pause {
  top: calc(clamp(10px, 1.2vw, 20px) + var(--identity-height) + 10px);
}

/* v0.6.9 — layered open-ocean treatment. Broad, low-frequency swell fields
   replace the old evenly spaced stripes. Fine crossing currents and sparse
   highlights move independently above the depth layer while the tactical grid
   remains a separate transparent interaction surface. */
.battle-screen {
  background: #061727;
}

.battle-screen::before {
  inset: var(--horizon-height) 0 0;
  background:
    radial-gradient(ellipse 115% 22% at 50% -2%, rgba(153, 191, 214, .22), transparent 61%),
    repeating-radial-gradient(ellipse 155% 29% at 18% 29%, transparent 0 25px, rgba(131, 174, 202, .036) 28px 29px, transparent 33px 62px),
    repeating-radial-gradient(ellipse 145% 37% at 82% 72%, transparent 0 34px, rgba(76, 126, 163, .032) 37px 39px, transparent 43px 78px),
    radial-gradient(ellipse 72% 48% at 18% 63%, rgba(41, 88, 123, .16), transparent 68%),
    radial-gradient(ellipse 68% 42% at 86% 39%, rgba(49, 102, 137, .12), transparent 70%),
    linear-gradient(180deg, #1b4865 0%, #143b57 18%, #0e304a 42%, #09243c 68%, #06172a 100%);
  background-size: 100% 100%, 165% 132%, 178% 158%, 100% 100%, 100% 100%, 100% 100%;
  background-position: 0 0, -23% -8%, 116% 27%, 0 0, 0 0, 0 0;
  animation: ocean-depth-drift 26s cubic-bezier(.45, .05, .55, .95) infinite alternate;
}

.battle-screen::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: var(--horizon-height);
  right: -16%;
  bottom: 0;
  left: -16%;
  pointer-events: none;
  opacity: .64;
  background:
    radial-gradient(ellipse 8% 1.2% at 24% 21%, rgba(212, 231, 242, .24), transparent 72%),
    radial-gradient(ellipse 11% 1.4% at 68% 39%, rgba(179, 209, 228, .17), transparent 74%),
    radial-gradient(ellipse 7% 1.1% at 46% 72%, rgba(191, 217, 233, .14), transparent 72%),
    repeating-linear-gradient(174deg, transparent 0 23px, rgba(182, 211, 230, .03) 25px, transparent 27px 58px),
    repeating-linear-gradient(187deg, transparent 0 31px, rgba(108, 159, 191, .024) 33px, transparent 36px 77px);
  background-size: 132% 116%, 145% 127%, 120% 111%, 148% 124%, 163% 139%;
  background-position: 8% 0, 76% 18%, 44% 72%, 0 0, 100% 20%;
  mix-blend-mode: screen;
  filter: blur(.35px);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.25), #000 21%, #000 88%, rgba(0,0,0,.72));
  mask-image: linear-gradient(180deg, rgba(0,0,0,.25), #000 21%, #000 88%, rgba(0,0,0,.72));
  animation: ocean-surface-crosscurrent 19s linear infinite alternate;
}

@keyframes ocean-depth-drift {
  from { background-position: 0 0, -23% -8%, 116% 27%, 0 0, 0 0, 0 0; }
  to { background-position: 0 0, 4% 8%, 83% 12%, 0 0, 0 0, 0 0; }
}

@keyframes ocean-surface-crosscurrent {
  from { background-position: 8% 0, 76% 18%, 44% 72%, 0 0, 100% 20%; }
  to { background-position: 17% 5%, 62% 25%, 55% 67%, 84px 18px, calc(100% - 62px) 7%; }
}

.enemy-horizon::before {
  background:
    linear-gradient(180deg, rgba(2, 6, 11, .08), transparent 34%, rgba(9, 29, 45, .04) 64%, rgba(27, 72, 101, .64) 100%),
    linear-gradient(90deg, rgba(2, 6, 12, .17), transparent 22% 78%, rgba(2, 6, 12, .17));
}

.board-surface::before {
  background:
    linear-gradient(180deg, rgba(205, 226, 239, .035), transparent 23%),
    radial-gradient(ellipse 90% 18% at 48% 6%, rgba(171, 204, 225, .035), transparent 72%);
  animation: none;
}

.fleet-water::before,
.fleet-water::after,
.fleet-water i {
  left: -15%;
  width: 130%;
  height: 13%;
  border: 1px solid transparent;
  border-top-color: rgba(191, 217, 233, .18);
  border-radius: 50%;
  opacity: .46;
  background: radial-gradient(ellipse at center, rgba(170, 204, 225, .11), transparent 68%);
  box-shadow: 0 -2px 8px rgba(139, 181, 207, .07);
  filter: blur(.65px);
  animation: ocean-foreground-ripple 7.8s ease-in-out infinite alternate;
}

.fleet-water::before { top: 16%; animation-delay: -1.9s; }
.fleet-water i:nth-child(1) { top: 35%; animation-duration: 9.4s; animation-delay: -5.1s; }
.fleet-water i:nth-child(2) { top: 51%; animation-duration: 8.7s; animation-delay: -2.8s; }
.fleet-water::after { top: 67%; animation-duration: 10.2s; animation-delay: -7.2s; }
.fleet-water i:nth-child(3) { top: 81%; animation-duration: 7.2s; animation-delay: -3.7s; }

@keyframes ocean-foreground-ripple {
  from { opacity: .27; transform: translateX(-1.8%) scaleX(.96) scaleY(.72) rotate(-.35deg); }
  to { opacity: .52; transform: translateX(1.5%) scaleX(1.035) scaleY(1.08) rotate(.28deg); }
}

@media (prefers-reduced-motion: reduce) {
  .battle-screen::before,
  .battle-screen::after,
  .fleet-water::before,
  .fleet-water::after,
  .fleet-water i { animation: none !important; }
}

/* v0.6.10 — photographic ocean surface. The tactical grid remains a separate
   transparent interaction layer above a genuine water texture. */
.battle-screen::before {
  inset: calc(var(--horizon-height) - 2px) 0 0;
  background:
    linear-gradient(180deg, rgba(28, 70, 96, .96) 0%, rgba(21, 57, 82, .62) 5%, rgba(8, 30, 49, .14) 14%, rgba(8, 30, 49, .18) 42%, rgba(1, 8, 18, .54) 100%),
    radial-gradient(ellipse 92% 24% at 50% -3%, rgba(150, 186, 207, .15), transparent 67%),
    url("./assets/ocean/battlesweep-distant-ocean-v3.png");
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%, 106% 106%;
  background-position: 0 0, 0 0, 50% 0%;
  filter: saturate(.82) brightness(.72) contrast(1.06);
  animation: realistic-ocean-heave 18s ease-in-out infinite alternate;
}

.battle-screen::after {
  opacity: .34;
  background:
    radial-gradient(ellipse 16% 1.4% at 18% 17%, rgba(218, 232, 241, .2), transparent 76%),
    radial-gradient(ellipse 21% 1.7% at 71% 36%, rgba(186, 210, 226, .17), transparent 78%),
    radial-gradient(ellipse 14% 1.3% at 43% 66%, rgba(200, 220, 232, .13), transparent 76%),
    radial-gradient(ellipse 19% 1.5% at 82% 84%, rgba(158, 190, 211, .1), transparent 78%);
  background-size: 122% 116%, 136% 124%, 128% 119%, 141% 132%;
  background-position: 4% 1%, 78% 20%, 39% 70%, 88% 82%;
  mix-blend-mode: screen;
  filter: blur(.55px);
  animation: realistic-ocean-glints 14s ease-in-out infinite alternate;
}

@keyframes realistic-ocean-heave {
  from { background-position: 0 0, 0 0, 49% 0%; }
  to { background-position: 0 0, 0 0, 52% 2%; }
}

@keyframes realistic-ocean-glints {
  from { background-position: 4% 1%, 78% 20%, 39% 70%, 88% 82%; }
  to { background-position: 11% 4%, 67% 24%, 49% 66%, 77% 87%; }
}

.fleet-water::before,
.fleet-water::after,
.fleet-water i {
  opacity: .11;
  border-top-color: rgba(205, 224, 237, .1);
  background: radial-gradient(ellipse at center, rgba(186, 211, 228, .08), transparent 70%);
}

.target-cell {
  border-color: rgba(205, 224, 238, .115);
}

.target-cell:nth-child(4n) {
  border-right-color: rgba(213, 229, 241, .14);
}

@media (prefers-reduced-motion: reduce) {
  .battle-screen::before,
  .battle-screen::after { animation: none !important; }
}

/* v0.6.11 — the photographic ocean now deforms continuously. Two animated
   displacement scales produce broad swell and fine surface movement while a
   separately timed light field prevents the water from reading as a panning
   still image. */
.animated-ocean {
  position: absolute;
  z-index: 0;
  top: calc(var(--horizon-height) - 2px);
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
}

.animated-ocean-surface {
  position: absolute;
  inset: -3.5%;
  background:
    linear-gradient(180deg, rgba(28, 70, 96, .96) 0%, rgba(21, 57, 82, .62) 5%, rgba(8, 30, 49, .14) 14%, rgba(8, 30, 49, .18) 42%, rgba(1, 8, 18, .54) 100%),
    radial-gradient(ellipse 92% 24% at 50% -3%, rgba(150, 186, 207, .15), transparent 67%),
    url("./assets/ocean/battlesweep-distant-ocean-v3.png") center top / cover no-repeat;
  filter: url("#battlesweep-ocean-waves") saturate(.82) brightness(.72) contrast(1.06);
  transform: translate3d(0, 0, 0) scale(1.018);
  transform-origin: 50% 12%;
  animation: animated-ocean-surge 15s ease-in-out infinite alternate;
  will-change: transform, filter;
}

.animated-ocean-light {
  position: absolute;
  inset: -8% -14%;
  opacity: .23;
  background:
    radial-gradient(ellipse 11% .7% at 17% 18%, rgba(221, 235, 244, .17), transparent 76%),
    radial-gradient(ellipse 14% .9% at 72% 39%, rgba(188, 212, 228, .13), transparent 78%),
    radial-gradient(ellipse 9% .65% at 42% 69%, rgba(203, 222, 234, .1), transparent 76%),
    radial-gradient(ellipse 13% .8% at 83% 86%, rgba(161, 192, 212, .08), transparent 78%);
  mix-blend-mode: screen;
  filter: blur(.7px);
  animation: animated-ocean-light-sweep 11s ease-in-out infinite alternate;
}

@keyframes animated-ocean-surge {
  from { transform: translate3d(-.1%, -.08%, 0) scale(1.018); }
  to { transform: translate3d(.12%, .1%, 0) scale(1.022); }
}

@keyframes animated-ocean-light-sweep {
  from { transform: translate3d(-1.1%, -.45%, 0) scaleX(.99); opacity: .16; }
  to { transform: translate3d(1%, .5%, 0) scaleX(1.015); opacity: .27; }
}

.ocean-filter-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .animated-ocean-surface {
    filter: saturate(.82) brightness(.72) contrast(1.06);
    animation: none !important;
  }

  .animated-ocean-light { animation: none !important; }
}

/* v0.6.13 laptop refinement — preserve the complete projected board while
   reserving the foreground waterline on short, wide landscape displays. */
@media (min-width: 1101px) and (max-height: 950px) and (orientation: landscape) {
  .board-assembly,
  .board-stage:has(.board-plane.is-deploying) .board-assembly {
    width: min(100%, 182svh);
  }
}

/* v0.6.15 performance consolidation — retain the photographic ocean while
   removing duplicate full-screen painters and live SVG displacement. */
.battle-screen::before,
.battle-screen::after {
  content: none;
  display: none;
  animation: none;
  background: none;
  filter: none;
}

.animated-ocean {
  isolation: isolate;
  contain: strict;
  transform: translateZ(0);
}

.animated-ocean-surface {
  inset: -3%;
  background:
    linear-gradient(180deg, rgba(13, 82, 122, .58) 0%, rgba(8, 60, 99, .34) 8%, rgba(5, 45, 82, .13) 22%, rgba(4, 38, 75, .12) 56%, rgba(2, 24, 55, .32) 100%),
    radial-gradient(ellipse 92% 30% at 50% -3%, rgba(92, 174, 214, .26), transparent 70%),
    url("./assets/ocean/battlesweep-distant-ocean-v4-optimized.png") center top / cover no-repeat;
  background-blend-mode: screen, screen, normal;
  filter: none;
  transform: translate3d(-.12%, -.08%, 0) scale(1.022);
  transform-origin: 50% 12%;
  animation: optimized-ocean-surge 18s ease-in-out infinite alternate;
  will-change: transform;
  backface-visibility: hidden;
  contain: paint;
}

.animated-ocean-light {
  inset: -6% -9%;
  opacity: .2;
  mix-blend-mode: normal;
  filter: none;
  animation: optimized-ocean-light-sweep 13s ease-in-out infinite alternate;
  will-change: transform, opacity;
  backface-visibility: hidden;
  contain: paint;
}

@keyframes optimized-ocean-surge {
  from { transform: translate3d(-.12%, -.08%, 0) scale(1.022); }
  to { transform: translate3d(.14%, .1%, 0) scale(1.026); }
}

@keyframes optimized-ocean-light-sweep {
  from { transform: translate3d(-1%, -.4%, 0) scaleX(.992); opacity: .16; }
  to { transform: translate3d(.95%, .45%, 0) scaleX(1.012); opacity: .25; }
}

.board-plane {
  backdrop-filter: none;
}

.board-plane::before {
  inset: -3%;
  animation: optimized-board-sheen 24s ease-in-out infinite alternate;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

@keyframes optimized-board-sheen {
  from { transform: translate3d(-1.2%, -.35%, 0) scale(1.025); opacity: .88; }
  to { transform: translate3d(1.1%, .3%, 0) scale(1.025); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .animated-ocean-surface,
  .animated-ocean-light,
  .board-plane::before {
    animation: none !important;
  }
}

/* v0.6.19 — pull the desktop battlefield inward and relax its panoramic
   aspect without changing the 28 × 18 logical grid or responsive layouts. */
@media (min-width: 1101px) {
  .board-stage {
    left: 4vw;
    right: 4vw;
  }

  .board-plane {
    aspect-ratio: 2.9 / 1;
  }
}

/* v0.6.20 — restore visible natural current without the laptop-heavy SVG
   displacement filter, then organize the complete foreground below the grid. */
.animated-ocean-surface {
  animation: natural-ocean-surge 17s cubic-bezier(.42, 0, .58, 1) infinite alternate;
}

.animated-ocean-light {
  inset: -9% -12%;
  opacity: .3;
  background:
    radial-gradient(ellipse 28% 2.2% at 15% 21%, rgba(205, 226, 238, .18), transparent 74%),
    radial-gradient(ellipse 36% 2.5% at 72% 39%, rgba(169, 201, 220, .14), transparent 76%),
    radial-gradient(ellipse 24% 1.8% at 43% 68%, rgba(190, 216, 231, .12), transparent 75%),
    repeating-radial-gradient(ellipse 158% 34% at 12% 20%, transparent 0 30px, rgba(160, 197, 220, .046) 32px 33px, transparent 36px 72px),
    repeating-radial-gradient(ellipse 146% 39% at 88% 76%, transparent 0 38px, rgba(102, 151, 183, .038) 40px 42px, transparent 45px 86px);
  mix-blend-mode: screen;
  filter: none;
  animation: natural-ocean-current 14s cubic-bezier(.45, .05, .55, .95) infinite alternate;
  will-change: transform, opacity;
}

@keyframes natural-ocean-surge {
  0% { transform: translate3d(-.24%, -.12%, 0) scale(1.023); }
  48% { transform: translate3d(.04%, .13%, 0) scale(1.027); }
  100% { transform: translate3d(.3%, -.03%, 0) scale(1.024); }
}

@keyframes natural-ocean-current {
  0% { transform: translate3d(-2.2%, -.7%, 0) rotate(-.32deg) scaleX(.985); opacity: .22; }
  52% { transform: translate3d(.15%, .55%, 0) rotate(.08deg) scaleX(1.012); opacity: .34; }
  100% { transform: translate3d(2.1%, -.15%, 0) rotate(.3deg) scaleX(.995); opacity: .27; }
}

.island-bear {
  scale: 1;
  animation:
    polar-bear-oval 28s linear infinite,
    polar-bear-rear 28s ease-in-out infinite;
}

@keyframes polar-bear-oval {
  0% { transform: translate(0, 17%) rotate(0deg); }
  12.5% { transform: translate(-8%, 12%) rotate(45deg); }
  25% { transform: translate(-11%, 0) rotate(90deg); }
  37.5% { transform: translate(-8%, -12%) rotate(135deg); }
  50% { transform: translate(0, -17%) rotate(180deg); }
  62.5% { transform: translate(8%, -12%) rotate(225deg); }
  75% { transform: translate(11%, 0) rotate(270deg); }
  87.5% { transform: translate(8%, 12%) rotate(315deg); }
  100% { transform: translate(0, 17%) rotate(360deg); }
}

@keyframes polar-bear-rear {
  0%, 21%, 29%, 71%, 79%, 100% { scale: 1; }
  24%, 26%, 74%, 76% { scale: 1.11 1.34; }
}

@media (min-width: 1101px) {
  .board-stage {
    top: calc(var(--horizon-height) + 22px);
  }

  .support-vessel {
    bottom: 44%;
  }

  .tactical-panel {
    width: clamp(210px, 14vw, 350px);
    height: clamp(110px, 12.5svh, 160px);
    padding: .42rem .5rem;
  }

  .tactical-panel .panel-heading {
    margin-bottom: .28rem;
  }

  .tactical-panel .mini-map {
    height: calc(100% - 18px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .animated-ocean-surface,
  .animated-ocean-light,
  .island-bear {
    animation: none !important;
  }
}

/* v0.6.22 — remove the narrow grid-level highlights that read as two long
   wakes. Natural motion remains in the photographic surface, while the light
   layer is broad and diffuse rather than striped. */
.animated-ocean-surface {
  animation: visible-ocean-surge 14s cubic-bezier(.42, 0, .58, 1) infinite alternate;
}

.animated-ocean-light {
  inset: -9% -12%;
  opacity: .28;
  background:
    radial-gradient(ellipse 74% 58% at 15% 28%, rgba(206, 226, 239, .1), transparent 72%),
    radial-gradient(ellipse 78% 62% at 87% 73%, rgba(142, 180, 204, .08), transparent 74%);
  mix-blend-mode: screen;
  filter: none;
  animation: visible-ocean-current 16s cubic-bezier(.45, .05, .55, .95) infinite alternate;
  will-change: transform, opacity;
}

@keyframes visible-ocean-surge {
  0% { transform: translate3d(-.48%, -.2%, 0) scale(1.024); }
  46% { transform: translate3d(.08%, .21%, 0) scale(1.029); }
  100% { transform: translate3d(.53%, -.06%, 0) scale(1.025); }
}

@keyframes visible-ocean-current {
  0% { transform: translate3d(-1.8%, -.45%, 0) scale(1.01); opacity: .22; }
  51% { transform: translate3d(.15%, .38%, 0) scale(1.018); opacity: .31; }
  100% { transform: translate3d(1.7%, -.18%, 0) scale(1.012); opacity: .25; }
}

.board-surface::before {
  content: none;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .animated-ocean-surface,
  .animated-ocean-light {
    animation: none !important;
  }
}

/* v0.6.23 — approved 28 × 16 locked baseline. The wider projection preserves
   28 × 18 cell proportions while two fewer rows lift the lower grid edge. */
.mini-map {
  aspect-ratio: 28 / 16;
}

@media (min-width: 1101px) {
  .board-plane {
    aspect-ratio: 3.2625 / 1;
  }
}

@media (min-width: 1101px) and (max-height: 950px) and (orientation: landscape) {
  .board-assembly,
  .board-stage:has(.board-plane.is-deploying) .board-assembly {
    width: min(100%, 204.75svh);
  }
}

/* v0.6.25 review — keep the locked 28 × 16 logical battlefield, but give the
   desktop projection one additional cell of total width and lower the complete
   grid by exactly two of its own rows. */
@media (min-width: 1101px) {
  .board-stage {
    left: 2.35vw;
    right: 2.35vw;
    transform: translateY(12.5%);
  }
}

/* Maelstrom effect proof — query-gated and non-canon. The interaction grid and
   its evidence cells stay above this compositor-only overlay at all times. */
.maelstrom-effect {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  contain: paint;
  transition: opacity 220ms ease;
}

.maelstrom-effect[hidden] { display: none; }

.maelstrom-sonar-pulse,
.maelstrom-vortex,
.maelstrom-current-bands,
.maelstrom-current-bands i {
  position: absolute;
  will-change: transform, opacity;
}

.maelstrom-sonar-pulse {
  left: 50%;
  top: 50%;
  width: min(45vw, 520px);
  aspect-ratio: 1;
  border: 2px solid rgba(119, 238, 237, .72);
  border-radius: 50%;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(.08);
  box-shadow: 0 0 0 1px rgba(119, 238, 237, .25), inset 0 0 28px rgba(42, 208, 211, .12);
}

.maelstrom-current-bands { inset: -24%; opacity: 0; transform: translate3d(0, 0, 0) rotate(-7deg); }
.maelstrom-current-bands i {
  left: 50%;
  top: 50%;
  width: 115%;
  height: 52%;
  border: 2px solid rgba(136, 224, 221, .28);
  border-color: rgba(136, 224, 221, .3) transparent rgba(190, 229, 218, .16) transparent;
  border-radius: 50%;
  transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(.72);
  box-shadow: inset 0 10px 24px rgba(52, 180, 184, .06), 0 -8px 20px rgba(155, 228, 215, .05);
}
.maelstrom-current-bands i:nth-child(2) { width: 88%; height: 39%; opacity: .72; transform: translate3d(-50%, -50%, 0) rotate(28deg) scale(.78); }
.maelstrom-current-bands i:nth-child(3) { width: 62%; height: 29%; opacity: .58; transform: translate3d(-50%, -50%, 0) rotate(57deg) scale(.84); }

.maelstrom-vortex {
  left: 50%;
  top: 50%;
  width: min(31vw, 390px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(.2) rotate(0deg);
  background: conic-gradient(from 12deg, transparent 0 8%, rgba(116, 234, 226, .26) 13%, transparent 22% 34%, rgba(196, 232, 214, .18) 42%, transparent 51% 65%, rgba(66, 184, 196, .3) 72%, transparent 84%);
  box-shadow: inset 0 0 54px rgba(1, 23, 38, .88), 0 0 50px rgba(63, 198, 197, .15);
}
.maelstrom-vortex::before,
.maelstrom-vortex::after,
.maelstrom-vortex i,
.maelstrom-vortex b {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.maelstrom-vortex::before { inset: 13%; border: 2px solid rgba(129, 232, 224, .25); border-left-color: transparent; border-bottom-color: transparent; }
.maelstrom-vortex::after { inset: 31%; background: radial-gradient(circle, rgba(1, 12, 25, .96), rgba(5, 40, 59, .78) 44%, transparent 72%); }
.maelstrom-vortex i { inset: 22%; border: 1px solid rgba(205, 235, 220, .24); border-right-color: transparent; }
.maelstrom-vortex b { inset: 42%; background: rgba(2, 13, 25, .88); box-shadow: 0 0 18px rgba(0, 0, 0, .7); }

.maelstrom-event-copy {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  display: grid;
  min-width: min(310px, 72%);
  padding: .55rem 1rem .65rem;
  border: 1px solid rgba(131, 229, 224, .32);
  background: rgba(2, 16, 28, .78);
  color: #d8f3ee;
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(.96);
}
.maelstrom-event-copy span { color: #7fe0dc; font-size: .46rem; font-weight: 800; letter-spacing: .18em; }
.maelstrom-event-copy strong { margin: .08rem 0; color: #f0d69a; font: 800 clamp(1rem, 2vw, 1.55rem)/1 Rajdhani, sans-serif; letter-spacing: .12em; }
.maelstrom-event-copy small { color: #a5c9cb; font-size: .5rem; letter-spacing: .08em; }

.maelstrom-replay {
  position: fixed;
  z-index: 45;
  right: 1rem;
  bottom: 1rem;
  padding: .65rem .85rem;
  border: 1px solid rgba(127, 224, 220, .52);
  border-radius: 4px;
  background: rgba(3, 24, 39, .92);
  color: #d8f3ee;
  font: 800 .62rem/1 Rajdhani, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

.battle-screen.is-maelstrom-proof .maelstrom-replay { display: block; }
.battle-screen.maelstrom-phase-signal .maelstrom-effect,
.battle-screen.maelstrom-phase-vortex .maelstrom-effect,
.battle-screen.maelstrom-phase-release .maelstrom-effect { opacity: 1; }
.battle-screen.maelstrom-phase-after .maelstrom-effect { opacity: 0; }

.battle-screen.maelstrom-phase-signal .maelstrom-sonar-pulse { animation: maelstrom-sonar 540ms ease-out both; }
.battle-screen.maelstrom-phase-signal .maelstrom-event-copy { animation: maelstrom-copy-in 420ms ease-out both; }
.battle-screen.maelstrom-phase-vortex .maelstrom-current-bands { opacity: 1; animation: maelstrom-band-field 1050ms ease-in-out both; }
.battle-screen.maelstrom-phase-vortex .maelstrom-current-bands i { animation: maelstrom-band-spin 1300ms cubic-bezier(.34, .04, .28, 1) infinite; }
.battle-screen.maelstrom-phase-vortex .maelstrom-current-bands i:nth-child(2) { animation-direction: reverse; animation-duration: 1050ms; }
.battle-screen.maelstrom-phase-vortex .maelstrom-current-bands i:nth-child(3) { animation-duration: 820ms; }
.battle-screen.maelstrom-phase-vortex .maelstrom-vortex { opacity: .94; animation: maelstrom-vortex-rise 1150ms cubic-bezier(.2, .65, .22, 1) both, maelstrom-vortex-spin 1550ms linear infinite; }
.battle-screen.maelstrom-phase-vortex .maelstrom-event-copy { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
.battle-screen.maelstrom-phase-vortex .mini-formation-layer { opacity: .08; transform: scale(.94); transition: opacity 520ms ease, transform 520ms ease; }
.battle-screen.maelstrom-phase-vortex .mini-sweep { animation: maelstrom-overview-spiral 900ms cubic-bezier(.25, .7, .2, 1) infinite; opacity: .9; }
.battle-screen.maelstrom-phase-release .maelstrom-current-bands { opacity: .38; transform: rotate(18deg) scale(1.12); transition: opacity 420ms ease, transform 420ms ease; }
.battle-screen.maelstrom-phase-release .maelstrom-vortex { opacity: .24; transform: translate3d(-50%, -50%, 0) scale(1.34) rotate(105deg); transition: opacity 420ms ease, transform 420ms ease; }
.battle-screen.maelstrom-phase-release .mini-formation-layer { opacity: 0; transform: scale(.9); }
.battle-screen.maelstrom-phase-after .mini-formation-layer { opacity: 1; transform: scale(1); transition: opacity 440ms ease, transform 440ms ease; }
.battle-screen.maelstrom-phase-after .mini-sweep { animation: maelstrom-overview-release 720ms ease-out both; }
.battle-screen.maelstrom-phase-after .target-cell.is-hit,
.battle-screen.maelstrom-phase-after .target-cell.is-miss { animation: maelstrom-evidence-glow 950ms ease-out 2; }

.battle-screen.is-maelstrom-held.maelstrom-phase-vortex .maelstrom-current-bands,
.battle-screen.is-maelstrom-held.maelstrom-phase-vortex .maelstrom-current-bands i,
.battle-screen.is-maelstrom-held.maelstrom-phase-vortex .maelstrom-vortex,
.battle-screen.is-maelstrom-held.maelstrom-phase-vortex .mini-sweep { animation: none; }
.battle-screen.is-maelstrom-held.maelstrom-phase-vortex .maelstrom-current-bands { opacity: 1; transform: rotate(12deg) scale(1.06); }
.battle-screen.is-maelstrom-held.maelstrom-phase-vortex .maelstrom-vortex { opacity: .94; transform: translate3d(-50%, -50%, 0) scale(1) rotate(82deg); }
.battle-screen.is-maelstrom-held.maelstrom-phase-vortex .mini-formation-layer { opacity: .08; transform: scale(.94); transition: none; }
.battle-screen.is-maelstrom-held.maelstrom-phase-vortex .mini-sweep { opacity: .9; transform: rotate(205deg) scale(.82); }
.battle-screen.is-maelstrom-held.maelstrom-phase-after .target-cell.is-hit,
.battle-screen.is-maelstrom-held.maelstrom-phase-after .target-cell.is-miss { animation: none; box-shadow: inset 0 0 0 2px rgba(240, 198, 111, .92), 0 0 16px rgba(118, 236, 226, .7); }

@keyframes maelstrom-sonar {
  0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.08); }
  26% { opacity: .9; }
  100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1.45); }
}
@keyframes maelstrom-copy-in { from { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.94); } to { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); } }
@keyframes maelstrom-band-field { from { opacity: 0; transform: rotate(-7deg) scale(.8); } to { opacity: 1; transform: rotate(12deg) scale(1.06); } }
@keyframes maelstrom-band-spin { to { transform: translate3d(-50%, -50%, 0) rotate(360deg) scale(1.02); } }
@keyframes maelstrom-vortex-rise { from { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.2) rotate(0); } to { opacity: .94; transform: translate3d(-50%, -50%, 0) scale(1) rotate(82deg); } }
@keyframes maelstrom-vortex-spin { to { rotate: 360deg; } }
@keyframes maelstrom-overview-spiral { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(205deg) scale(.82); } 100% { transform: rotate(520deg) scale(1.08); } }
@keyframes maelstrom-overview-release { from { transform: rotate(120deg) scale(.86); opacity: .9; } to { transform: rotate(360deg) scale(1); opacity: .48; } }
@keyframes maelstrom-evidence-glow { 0%, 100% { filter: none; } 42% { filter: brightness(1.65); box-shadow: inset 0 0 0 2px rgba(240, 198, 111, .92), 0 0 16px rgba(118, 236, 226, .75); } }

@media (prefers-reduced-motion: reduce) {
  .battle-screen.maelstrom-phase-vortex .maelstrom-current-bands,
  .battle-screen.maelstrom-phase-vortex .maelstrom-vortex { display: none; }
  .battle-screen.maelstrom-phase-signal .maelstrom-sonar-pulse,
  .battle-screen.maelstrom-phase-signal .maelstrom-event-copy,
  .battle-screen.maelstrom-phase-vortex .mini-sweep,
  .battle-screen.maelstrom-phase-after .mini-sweep,
  .battle-screen.maelstrom-phase-after .target-cell.is-hit,
  .battle-screen.maelstrom-phase-after .target-cell.is-miss { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
  .battle-screen.maelstrom-phase-vortex .mini-formation-layer,
  .battle-screen.maelstrom-phase-after .mini-formation-layer { transition-duration: 180ms; }
}

/* Maelstrom proof v2 — deliberately forceful after the first review read as
   too restrained. These remain visual-prototype overrides, not canon rules. */
.maelstrom-effect::before,
.maelstrom-effect::after {
  content: "";
  position: absolute;
  inset: -18% -8%;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}

.maelstrom-effect::before {
  background:
    radial-gradient(ellipse 30% 68% at 50% 50%, rgba(0, 7, 18, .96) 0 25%, rgba(0, 35, 52, .86) 38%, rgba(16, 140, 148, .42) 57%, transparent 76%),
    radial-gradient(ellipse 72% 88% at 50% 50%, transparent 38%, rgba(76, 221, 211, .3) 54%, transparent 75%),
    linear-gradient(90deg, rgba(1, 17, 31, .5), transparent 22% 78%, rgba(1, 17, 31, .5));
  transform: translate3d(0, 0, 0) scale(.72);
}

.maelstrom-effect::after {
  background:
    radial-gradient(ellipse 58% 78% at 50% 50%, transparent 0 9%, rgba(167, 247, 230, .24) 10%, transparent 12% 18%, rgba(111, 231, 222, .2) 19%, transparent 21% 29%, rgba(205, 255, 235, .18) 30%, transparent 32% 43%, rgba(65, 205, 214, .16) 44%, transparent 47%),
    conic-gradient(from 25deg at 50% 50%, transparent 0 6%, rgba(86, 235, 222, .2) 12%, transparent 19% 31%, rgba(215, 247, 226, .2) 38%, transparent 46% 61%, rgba(59, 201, 211, .22) 69%, transparent 78%);
  transform: translate3d(0, 0, 0) rotate(-18deg) scale(.82 1.08);
  mix-blend-mode: screen;
}

.maelstrom-current-bands { inset: -38% -18%; }
.maelstrom-current-bands i {
  width: 138%;
  height: 68%;
  border-width: 4px;
  border-color: rgba(157, 248, 234, .74) transparent rgba(74, 211, 219, .42) transparent;
  box-shadow: inset 0 18px 34px rgba(50, 216, 210, .16), 0 -12px 30px rgba(196, 255, 232, .15), 0 0 34px rgba(54, 210, 219, .14);
}
.maelstrom-current-bands i:nth-child(2) { width: 108%; height: 50%; opacity: .92; }
.maelstrom-current-bands i:nth-child(3) { width: 78%; height: 38%; opacity: .82; }

.maelstrom-vortex {
  width: min(62vw, 790px);
  height: min(37vw, 470px);
  aspect-ratio: auto;
  background: conic-gradient(from 12deg,
    transparent 0 5%, rgba(133, 255, 239, .76) 10%, rgba(21, 142, 162, .18) 16%, transparent 22% 30%,
    rgba(224, 255, 231, .62) 36%, rgba(45, 210, 205, .22) 43%, transparent 50% 60%,
    rgba(58, 231, 223, .72) 67%, rgba(208, 255, 236, .34) 74%, transparent 84%);
  box-shadow: inset 0 0 82px rgba(0, 6, 18, .98), inset 0 0 26px rgba(100, 247, 228, .42), 0 0 84px rgba(74, 231, 220, .46);
}
.maelstrom-vortex::before { inset: 9%; border-width: 4px; border-color: rgba(190, 255, 237, .74) transparent rgba(67, 213, 221, .42) transparent; box-shadow: 0 0 34px rgba(99, 244, 225, .34); }
.maelstrom-vortex::after { inset: 24%; background: radial-gradient(ellipse, rgba(0, 3, 12, 1), rgba(0, 18, 34, .98) 38%, rgba(4, 80, 91, .62) 64%, transparent 76%); }
.maelstrom-vortex i { inset: 17%; border-width: 3px; border-color: rgba(232, 255, 235, .65) transparent rgba(82, 225, 221, .4) transparent; }
.maelstrom-vortex b { inset: 37%; background: rgba(0, 3, 11, .98); box-shadow: 0 0 34px rgba(0, 0, 0, .95), 0 0 12px rgba(142, 252, 230, .36); }

.battle-screen.maelstrom-phase-vortex .maelstrom-effect::before { opacity: 1; animation: maelstrom-water-draw-v2 980ms cubic-bezier(.18, .72, .2, 1) both; }
.battle-screen.maelstrom-phase-vortex .maelstrom-effect::after { opacity: .94; animation: maelstrom-wide-spiral-v2 1350ms linear infinite; }
.battle-screen.maelstrom-phase-vortex .maelstrom-current-bands { opacity: 1; }
.battle-screen.maelstrom-phase-vortex .maelstrom-vortex { opacity: 1; animation-duration: 820ms, 920ms; }
.battle-screen.maelstrom-phase-vortex .mini-formation-layer { opacity: 0; transform: scale(.82) rotate(-5deg); transition-duration: 360ms; }
.battle-screen.maelstrom-phase-vortex .mini-sweep { opacity: 1; }
.battle-screen.maelstrom-phase-vortex .board-surface {
  box-shadow: 0 0 0 1px rgba(154, 255, 235, .36), inset 0 0 42px rgba(39, 228, 216, .25), 0 0 48px rgba(50, 211, 214, .26);
}

.battle-screen.maelstrom-phase-release .maelstrom-effect::before { opacity: .72; transform: scale(1.2); transition: opacity 360ms ease, transform 360ms ease; }
.battle-screen.maelstrom-phase-release .maelstrom-effect::after { opacity: .42; transform: rotate(36deg) scale(1.28 1.4); transition: opacity 360ms ease, transform 360ms ease; }
.battle-screen.maelstrom-phase-release .maelstrom-current-bands { opacity: .62; transform: rotate(31deg) scale(1.32); }
.battle-screen.maelstrom-phase-release .maelstrom-vortex { opacity: .38; transform: translate3d(-50%, -50%, 0) scale(1.65 1.3) rotate(158deg); }

.battle-screen.maelstrom-phase-after .target-cell.is-hit,
.battle-screen.maelstrom-phase-after .target-cell.is-miss { animation-name: maelstrom-evidence-glow-v2; animation-duration: 820ms; animation-iteration-count: 2; }

.battle-screen.is-maelstrom-held.maelstrom-phase-vortex .maelstrom-effect::before { opacity: 1; transform: scale(1); animation: none; }
.battle-screen.is-maelstrom-held.maelstrom-phase-vortex .maelstrom-effect::after { opacity: .94; transform: rotate(18deg) scale(1.08 1.18); animation: none; }
.battle-screen.is-maelstrom-held.maelstrom-phase-vortex .maelstrom-current-bands { transform: rotate(24deg) scale(1.18); }
.battle-screen.is-maelstrom-held.maelstrom-phase-vortex .maelstrom-vortex { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1.08 1) rotate(136deg); }
.battle-screen.is-maelstrom-held.maelstrom-phase-vortex .mini-formation-layer { opacity: 0; transform: scale(.82) rotate(-5deg); }
.battle-screen.is-maelstrom-held.maelstrom-phase-after .target-cell.is-hit,
.battle-screen.is-maelstrom-held.maelstrom-phase-after .target-cell.is-miss {
  box-shadow: inset 0 0 0 3px rgba(255, 222, 131, 1), 0 0 10px rgba(255, 236, 164, .9), 0 0 24px rgba(85, 255, 237, .98);
}

@keyframes maelstrom-water-draw-v2 {
  from { opacity: 0; transform: scale(.62); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes maelstrom-wide-spiral-v2 {
  to { transform: rotate(342deg) scale(1.12 1.22); }
}
@keyframes maelstrom-evidence-glow-v2 {
  0%, 100% { filter: none; }
  38% { filter: brightness(2.1); box-shadow: inset 0 0 0 3px rgba(255, 222, 131, 1), 0 0 10px rgba(255, 236, 164, .9), 0 0 24px rgba(85, 255, 237, .98); }
}

@media (prefers-reduced-motion: reduce) {
  .maelstrom-effect::before,
  .maelstrom-effect::after { display: none; }
  .battle-screen.maelstrom-phase-vortex .board-surface { box-shadow: inset 0 0 28px rgba(39, 228, 216, .2); }
}

.attrition-controls {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.25fr) auto;
  align-items: center;
  gap: .7rem;
  width: 100%;
  min-width: 0;
}

.attrition-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: .22rem;
}

.attrition-copy > span {
  color: #c5d7df;
  font: 800 clamp(.5rem, .55vw, .64rem)/1 "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.attrition-copy > strong {
  color: #f1eee6;
  font: 800 clamp(.82rem, .94vw, 1.02rem)/1.05 "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.attrition-copy > small {
  overflow: hidden;
  color: #9db3c4;
  font: 600 clamp(.46rem, .49vw, .58rem)/1.25 "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attrition-choice-list {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: .42rem;
}

.attrition-choice-list button {
  padding: .48rem .7rem;
  border: 1px solid rgba(104, 149, 177, .42);
  background: linear-gradient(180deg, rgba(26, 46, 61, .92), rgba(8, 18, 30, .94));
  color: #dbe6ef;
  font: 800 clamp(.58rem, .62vw, .72rem)/1 "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}

.attrition-choice-list button:hover {
  border-color: rgba(229, 194, 108, .7);
  color: #f2dda6;
}

.attrition-choice-list button:disabled {
  border-color: rgba(69, 81, 96, .48);
  color: #7b8794;
  cursor: not-allowed;
}

.battle-screen[data-phase="attrition-choice"] .turn-command,
.battle-screen[data-phase="attrition-placement"] .turn-command {
  display: grid;
}

.battle-screen[data-phase="attrition-placement"] #attrition-confirm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.target-cell.is-reinforcement-hint {
  background: rgba(96, 201, 195, .14);
  box-shadow: inset 0 0 0 1px rgba(131, 235, 229, .72), 0 0 10px rgba(108, 224, 216, .22);
  animation: attrition-hint-pulse 1.4s ease-in-out infinite alternate;
}

.target-cell.is-reinforcement-legal-water:not(.is-reinforcement-hint) {
  box-shadow: inset 0 0 0 1px rgba(131, 235, 229, .3);
}

.target-cell.is-reinforcement-anchor {
  background: rgba(96, 201, 195, .13);
  cursor: pointer;
}

.target-cell.is-reinforcement-fired {
  background: repeating-linear-gradient(135deg, rgba(238, 75, 55, .1) 0 3px, transparent 3px 7px);
  box-shadow: inset 0 0 0 1px rgba(238, 75, 55, .46);
}

@keyframes attrition-hint-pulse {
  0% {
    background: rgba(96, 201, 195, .08);
    box-shadow: inset 0 0 0 1px rgba(131, 235, 229, .38), 0 0 6px rgba(108, 224, 216, .1);
  }
  100% {
    background: rgba(116, 220, 214, .2);
    box-shadow: inset 0 0 0 1px rgba(181, 249, 243, .88), 0 0 16px rgba(108, 224, 216, .34);
  }
}

/* Match presentation v0.7 — art-backed command deck, continuous Combat Channel,
   persistent audio, and true-blue small-laptop composition. This block must stay
   above the pre-match lock marker. */
.match-page-v2 {
  --horizon-height: clamp(148px, 23svh, 238px);
  --deck-height: clamp(154px, 22svh, 228px);
  min-width: 0;
  min-height: 640px;
  overflow: clip;
  background: #06152a;
  color: #f1e7cf;
}

.match-page-v2::before {
  background:
    radial-gradient(ellipse at 52% 32%, rgba(37, 96, 169, .24), transparent 44%),
    repeating-linear-gradient(174deg, rgba(137, 183, 226, .028) 0 1px, transparent 2px 22px),
    linear-gradient(180deg, #173f70 0%, #102f58 38%, #0a2445 69%, #06152a 100%);
  animation: continuous-sea-drift 28s linear infinite;
}

.match-page-v2 .battle-header { z-index: 40; }

.match-page-v2 .battle-brand,
.match-page-v2 .match-command-cluster,
.match-page-v2 .combat-channel,
.match-page-v2 .battle-studio-logo {
  position: fixed;
  z-index: 42;
  transform: none;
  pointer-events: auto;
}

.match-page-v2 .battle-brand {
  top: 5px;
  left: 8px;
  display: block;
  width: auto;
  height: clamp(142px, 22svh, 226px);
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  filter: drop-shadow(0 9px 12px rgba(0, 0, 0, .72));
}

.match-page-v2 .battle-brand::before { content: none; }

.match-page-v2 .battle-brand-art {
  display: block;
  width: auto;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

.match-command-cluster {
  top: 7px;
  left: clamp(126px, 12vw, 235px);
  display: flex;
  align-items: flex-start;
  gap: clamp(4px, .65vw, 10px);
}

.match-page-v2 .brand-pause {
  position: relative;
  top: auto;
  left: auto;
  width: clamp(104px, 8.4vw, 150px);
  min-height: clamp(46px, 6.3svh, 66px);
  padding: .48rem .8rem;
  border: 3px solid #9b773d;
  border-radius: 11px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 24%),
    linear-gradient(180deg, #173d6e, #071b39 68%, #041127);
  color: #e8c57e;
  box-shadow:
    inset 0 0 0 2px #061026,
    inset 0 0 0 3px rgba(231, 198, 126, .36),
    0 5px 0 #302417,
    0 9px 16px rgba(0, 0, 0, .52);
  clip-path: none;
  font: 900 clamp(.8rem, 1.05vw, 1.2rem)/1 "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .13em;
  text-shadow: 0 2px 2px #000;
}

.match-page-v2 .brand-pause:hover,
.match-page-v2 .brand-pause:focus-visible {
  color: #ffe7aa;
  filter: brightness(1.14);
  box-shadow: inset 0 0 0 2px #061026, inset 0 0 0 3px #e1bd70, 0 0 20px rgba(224, 182, 95, .62), 0 5px 0 #302417;
}

.battle-audio-console {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  height: clamp(68px, 9.4svh, 94px);
}

.battle-mute-control,
.battle-volume-control {
  position: relative;
  display: block;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .48));
}

.battle-mute-control { width: clamp(70px, 6.2vw, 102px); cursor: pointer; }
.battle-volume-control { width: clamp(154px, 15vw, 270px); }
.battle-mute-control img,
.battle-volume-control img { display: block; width: 100%; height: 100%; object-fit: contain; }
.battle-mute-control:hover { filter: brightness(1.12) drop-shadow(0 0 10px rgba(224, 183, 96, .52)); }

.battle-muted-symbol {
  position: absolute;
  right: 18%;
  top: 42%;
  display: none;
  color: #d84332;
  font: 900 clamp(1rem, 1.8vw, 1.7rem)/1 sans-serif;
  text-shadow: 0 0 5px #190000, 0 0 8px #ff5a45;
  transform: translate(50%, -50%) rotate(-12deg);
}

.battle-mute-control[aria-pressed="true"] .battle-muted-symbol { display: block; }

.battle-volume-control input,
.pause-art-volume input {
  position: absolute;
  left: 8.8%;
  right: 8.8%;
  bottom: 20.5%;
  width: 82.4%;
  height: 15%;
  margin: 0;
  opacity: .02;
  cursor: pointer;
}

.battle-volume-control::after,
.pause-art-volume::after {
  content: "";
  position: absolute;
  left: var(--audio-thumb-left, 54.5%);
  bottom: 18%;
  width: clamp(7px, .75vw, 12px);
  height: 20%;
  border: 1px solid #65491f;
  border-radius: 3px;
  background: linear-gradient(90deg, #8d672e, #e5c176 45%, #80602d);
  box-shadow: 0 2px 4px #000, inset 1px 0 rgba(255, 239, 185, .52);
  pointer-events: none;
  transform: translateX(-50%);
}

.battle-studio-logo {
  top: 8px;
  right: 7px;
  width: clamp(126px, 11.5vw, 210px);
  height: auto;
  filter: drop-shadow(0 6px 7px rgba(0, 0, 0, .68));
}

.combat-channel {
  top: 3px;
  right: clamp(137px, 12vw, 224px);
  width: clamp(154px, 14vw, 232px);
  aspect-ratio: 300 / 331;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .66));
}

.combat-channel > img { display: block; width: 100%; height: 100%; object-fit: contain; }

.combat-channel-copy {
  position: absolute;
  z-index: 2;
  left: 10.5%;
  right: 10.5%;
  top: 26.8%;
  bottom: 10.5%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #e9e0ce;
  font-family: "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  text-shadow: 0 1px 2px #000;
}

.combat-channel-copy > strong {
  display: block;
  flex: 0 0 auto;
  padding: .32rem .34rem;
  border-left: 3px solid #c42d24;
  background: linear-gradient(90deg, rgba(119, 21, 20, .5), rgba(8, 28, 58, .16));
  color: #fff1d1;
  font-size: clamp(.58rem, .78vw, .92rem);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.combat-channel-copy ol {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
  gap: 3px;
  margin: 5px 0 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}

.combat-channel-copy li {
  display: grid;
  grid-template-columns: 1.55rem 1fr;
  align-items: start;
  min-height: 28%;
  padding: .25rem .25rem .24rem 0;
  border-bottom: 1px solid rgba(146, 178, 218, .17);
  background: linear-gradient(90deg, rgba(24, 58, 103, .34), rgba(5, 20, 44, .06));
  animation: combat-entry-in 260ms ease-out both;
}

.combat-channel-copy li span {
  color: #d8b46c;
  font-size: clamp(.48rem, .58vw, .7rem);
  letter-spacing: .08em;
  text-align: center;
}

.combat-channel-copy li b {
  color: #dce5ef;
  font-size: clamp(.48rem, .58vw, .7rem);
  font-weight: 700;
  letter-spacing: .035em;
  line-height: 1.18;
  text-transform: uppercase;
}

.combat-channel-copy li.is-hit b,
.combat-channel-copy li.is-sink b { color: #ffc4ae; }
.combat-channel-copy li.is-sonar b { color: #f0d48b; }

@keyframes combat-entry-in {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

.match-page-v2 .enemy-horizon {
  top: 0;
  height: var(--horizon-height);
  filter: none;
}

.match-page-v2 .enemy-horizon img {
  object-position: 50% 55%;
  filter: saturate(.76) contrast(1.12) brightness(.82) hue-rotate(0deg);
}

.match-page-v2 .enemy-horizon::before {
  background:
    linear-gradient(180deg, rgba(2, 6, 14, .08), transparent 38%, rgba(9, 31, 62, .06) 70%, rgba(12, 45, 82, .58) 100%),
    linear-gradient(90deg, rgba(3, 8, 17, .28), transparent 24% 78%, rgba(3, 8, 17, .22));
}

.match-page-v2 .enemy-horizon::after {
  right: 1.2%;
  bottom: 6px;
  border-color: rgba(209, 67, 51, .55);
  background: rgba(8, 14, 26, .78);
  color: #f0a795;
  box-shadow: inset 3px 0 #c63025;
}

.match-page-v2 .enemy-launch-origin {
  left: 64.5%;
  top: 57%;
  display: grid;
  grid-template-columns: repeat(4, 5px);
  gap: 2px;
  width: auto;
  height: auto;
}

.enemy-launch-origin i {
  display: block;
  width: 5px;
  height: 11px;
  border: 1px solid rgba(186, 198, 211, .54);
  border-radius: 5px 5px 2px 2px;
  background: #121d2d;
  box-shadow: inset 0 0 2px #000;
}
.enemy-launch-origin i.is-loaded { background: #d8d4c4; box-shadow: 0 0 5px #d45a39; }
.enemy-launch-origin i.is-firing { animation: enemy-tube-fire 720ms ease-out both; }
.enemy-launch-origin.is-reloading i { animation: enemy-tube-reload 1.5s ease-out both; }
.enemy-launch-origin.is-reloading i:nth-child(2) { animation-delay: 80ms; }
.enemy-launch-origin.is-reloading i:nth-child(3) { animation-delay: 160ms; }
.enemy-launch-origin.is-reloading i:nth-child(4) { animation-delay: 240ms; }
@keyframes enemy-tube-fire { 35% { transform: translateY(-9px); filter: brightness(2); } to { opacity: .25; transform: translateY(-14px); } }
@keyframes enemy-tube-reload { from { opacity: .2; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

.match-page-v2 .board-stage {
  top: calc(var(--horizon-height) - 9px);
  left: 3.7%;
  right: 3.7%;
}

.match-page-v2 .board-plane { aspect-ratio: 3 / 1; }
.match-page-v2 .board-surface {
  height: 100%;
  border: 1px solid rgba(174, 210, 242, .48);
  background: linear-gradient(180deg, rgba(24, 67, 119, .1), rgba(5, 27, 57, .1));
  box-shadow: inset 0 0 46px rgba(1, 12, 28, .34), 0 0 0 1px rgba(2, 15, 31, .3);
  transform: perspective(92vw) rotateX(12deg);
}

.match-page-v2 .target-cell { border-color: rgba(169, 202, 231, .19); }
.match-page-v2 .target-cell:nth-child(4n) { border-right-color: rgba(187, 216, 241, .25); }
.match-page-v2 .target-cell:hover:not(:disabled) {
  background: rgba(51, 112, 185, .22);
  box-shadow: inset 0 0 0 1px rgba(183, 214, 244, .74), 0 0 11px rgba(48, 102, 175, .3);
}
.match-page-v2 .target-cell.is-zero::before { color: #b8d4ee; }
.match-page-v2 .target-cell.is-reinforcement-hint {
  background: rgba(49, 102, 182, .22);
  box-shadow: inset 0 0 0 1px #e1bd71, 0 0 12px rgba(72, 130, 206, .42);
  animation: none;
}
.match-page-v2 .target-cell.is-reinforcement-legal-water:not(.is-reinforcement-hint) {
  box-shadow: inset 0 0 0 1px rgba(225, 189, 113, .32);
}
.match-page-v2 .target-cell.is-reinforcement-fired {
  box-shadow: inset 0 0 0 1px rgba(238, 75, 55, .56);
}

.match-page-v2 .target-reticle,
.match-page-v2 .target-reticle.is-ready {
  border: 1px dashed #ee4b37;
  border-radius: 50%;
  color: #ee4b37;
  box-shadow: 0 0 0 1px rgba(255, 214, 198, .62), 0 0 16px rgba(235, 57, 42, .88), inset 0 0 10px rgba(201, 39, 29, .2);
  transition: left 70ms linear, top 70ms linear, transform 160ms ease, box-shadow 160ms ease;
}
.match-page-v2 .target-reticle::before,
.match-page-v2 .target-reticle::after,
.match-page-v2 .target-reticle.is-ready::before,
.match-page-v2 .target-reticle.is-ready::after,
.match-page-v2 .target-reticle span,
.match-page-v2 .target-reticle.is-ready span { color: #ee4b37; }
.match-page-v2 .target-reticle span { inset: 25%; border-style: solid; }
.match-page-v2 .target-reticle.is-locking { animation: target-lock .32s cubic-bezier(.2,.82,.24,1) both; }

.match-page-v2 .board-readout {
  width: 70%;
  max-width: 690px;
  border: 1px solid rgba(165, 195, 225, .27);
  background: rgba(8, 31, 64, .78);
  clip-path: none;
}
.match-page-v2 .board-readout div { background: rgba(5, 19, 42, .88); }
.match-page-v2 .board-readout span { color: #91a9c2; }

.match-page-v2 .tactical-panel,
.match-page-v2 .fleet-status-panel {
  position: fixed;
  z-index: 18;
  bottom: 7px;
  margin: 0;
  transform: none;
  clip-path: none;
}

.match-page-v2 .tactical-panel {
  left: 7px;
  width: clamp(188px, 17vw, 320px);
  height: clamp(132px, 19svh, 204px);
  padding: clamp(8px, .7vw, 13px);
  overflow: hidden;
  border: 4px solid #91703b;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.07), transparent 18%),
    linear-gradient(180deg, #182d51, #091932 74%, #050e20);
  box-shadow: inset 0 0 0 2px #071025, inset 0 0 0 3px rgba(224, 190, 115, .35), 0 10px 24px rgba(0, 0, 0, .58);
}

.match-page-v2 .tactical-panel::before,
.match-page-v2 .tactical-panel::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e1c17d, #604522 55%, #17100b 72%);
}
.match-page-v2 .tactical-panel::before { left: 7px; }
.match-page-v2 .tactical-panel::after { right: 7px; }

.match-page-v2 .tactical-panel .panel-heading {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 5px;
  padding: 0 8px 4px;
  border-bottom: 1px solid rgba(222, 187, 111, .38);
}
.match-page-v2 .tactical-panel .panel-heading span {
  color: #e4bf76;
  font: 900 clamp(.58rem, .78vw, .9rem)/1 "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.match-page-v2 .tactical-panel .panel-heading strong {
  color: #b8cde4;
  font: 700 clamp(.44rem, .52vw, .62rem)/1 "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.match-page-v2 .tactical-panel .mini-map {
  height: calc(100% - 23px);
  border: 1px solid rgba(168, 199, 230, .36);
  background: radial-gradient(circle at 50% 45%, rgba(49, 104, 170, .25), transparent 55%), linear-gradient(145deg, #173a68, #071a37);
}

.match-page-v2 .fleet-status-panel {
  right: 7px;
  width: clamp(214px, 20vw, 365px);
  height: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.enemy-fleet-status-art { display: block; width: 100%; height: auto; filter: drop-shadow(0 9px 12px rgba(0, 0, 0, .68)); }

.enemy-fleet-status-live {
  position: absolute;
  inset: 7% 2.5% 4%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, 1fr);
  gap: 0 1%;
  pointer-events: none;
}
.enemy-fleet-status-live > span { position: relative; }
.enemy-fleet-status-live > span i {
  position: absolute;
  right: 2%;
  top: 31%;
  width: 23%;
  height: 44%;
  border-radius: 3px;
  background: radial-gradient(circle at 50% 50%, rgba(77, 122, 183, .44), rgba(4, 17, 42, .12) 67%);
  box-shadow: inset 0 0 0 1px rgba(170, 198, 227, .14);
}
.enemy-fleet-status-live > span.is-damaged i {
  background: radial-gradient(circle, rgba(226, 151, 72, .86), rgba(116, 56, 24, .48) 54%, transparent 72%);
  box-shadow: 0 0 8px rgba(225, 131, 54, .64);
}
.enemy-fleet-status-live > span.is-empty { opacity: .2; }
.enemy-fleet-status-live > span.is-sunk i {
  background: linear-gradient(45deg, transparent 42%, #d34734 43% 56%, transparent 57%), linear-gradient(-45deg, transparent 42%, #d34734 43% 56%, transparent 57%), rgba(37, 8, 11, .72);
  box-shadow: 0 0 8px rgba(207, 55, 43, .68);
}

.match-page-v2 .fleet-water { left: 0; right: 0; }
.match-page-v2 .foreground-fleet {
  z-index: 12;
  width: calc(100% - clamp(390px, 37vw, 700px));
  min-width: 560px;
}

.player-missile-battery {
  position: absolute;
  z-index: 8;
  left: 30.8%;
  top: 45.4%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  width: 5.4%;
  aspect-ratio: 1;
  padding: 2px;
  border: 1px solid rgba(121, 132, 142, .72);
  border-radius: 3px;
  background: #1a242d;
  box-shadow: 0 2px 4px #000;
}
.player-missile-battery i {
  border-radius: 50%;
  background: radial-gradient(circle, #050709 0 44%, #59636a 48% 62%, #151a1e 66%);
  transform-origin: 50% 100%;
}
.player-missile-battery i.is-open { box-shadow: inset 0 0 4px #000, 0 0 4px rgba(225, 180, 87, .56); }
.player-missile-battery i.is-firing { animation: player-hatch-fire 720ms ease-out both; }
.player-missile-battery i.is-reloading { animation: player-hatch-reload 1.2s ease-in-out both; }
@keyframes player-hatch-fire { 45% { transform: perspective(20px) rotateX(-76deg); filter: brightness(1.8); } to { transform: perspective(20px) rotateX(-8deg); } }
@keyframes player-hatch-reload { from { opacity: .35; transform: scale(.62); } to { opacity: 1; transform: scale(1); } }

.match-page-v2 .turn-command { display: none; }
.match-page-v2[data-phase="attrition-choice"] .turn-command,
.match-page-v2[data-phase="attrition-placement"] .turn-command {
  position: fixed;
  z-index: 70;
  top: 50%;
  left: 50%;
  display: grid;
  width: min(620px, calc(100vw - 36px));
  min-width: 0;
  min-height: 0;
  padding: 1rem;
  border: 4px solid #9b773d;
  border-radius: 8px;
  background: linear-gradient(180deg, #142e55, #07162f);
  box-shadow: inset 0 0 0 2px #050d20, 0 18px 48px rgba(0,0,0,.72);
  clip-path: none;
  transform: translate(-50%, -50%);
}
.match-page-v2 .blind-luck-fire { border-color: #9c7536; background: linear-gradient(180deg, #e3bd68, #986722); color: #081326; }

.pause-command-dialog {
  width: min(560px, calc(100vw - 30px));
  max-width: none;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.pause-command-dialog::backdrop { background: rgba(1, 6, 15, .74); backdrop-filter: blur(3px); }
.pause-command-frame {
  position: relative;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: clamp(24px, 4vw, 42px);
  border: 6px solid #92703c;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.07), transparent 19%),
    linear-gradient(180deg, #17365f, #081932 62%, #050e20);
  box-shadow: inset 0 0 0 3px #060d1d, inset 0 0 0 5px rgba(225, 189, 112, .3), 0 24px 70px rgba(0, 0, 0, .8);
  color: #efe5d1;
}
.pause-command-frame::before,
.pause-command-frame::after {
  content: "⚓";
  position: absolute;
  top: 12px;
  color: #c9a45f;
  font-size: 1rem;
}
.pause-command-frame::before { left: 16px; }
.pause-command-frame::after { right: 16px; }
.pause-command-frame .eyebrow {
  color: #d9b66d;
  font: 800 .67rem/1 "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .2em;
  text-align: center;
  text-transform: uppercase;
}
.pause-command-frame h2 {
  margin: .1rem 0 .4rem;
  color: #f2dfb7;
  font: 900 clamp(1.5rem, 3.2vw, 2.35rem)/1 "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .1em;
  text-align: center;
  text-shadow: 0 2px 2px #000;
  text-transform: uppercase;
}
.pause-command-button {
  min-height: 48px;
  border: 3px solid #8f6d38;
  border-radius: 9px;
  background: linear-gradient(180deg, #173c6d, #081c3b 70%, #05132b);
  color: #e6c37d;
  box-shadow: inset 0 0 0 2px #050c1b, inset 0 0 0 3px rgba(231, 199, 128, .25), 0 4px 0 #241b12;
  font: 900 clamp(.72rem, 1.4vw, .95rem)/1 "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}
.pause-command-button:hover,
.pause-command-button:focus-visible { color: #ffe7aa; filter: brightness(1.14); box-shadow: inset 0 0 0 2px #050c1b, inset 0 0 0 3px #d8b268, 0 0 17px rgba(219, 175, 84, .55), 0 4px 0 #241b12; }
.pause-resume { background: linear-gradient(180deg, #25538b, #0d2b58 70%, #071b3b); }
.pause-command-frame .pause-audio {
  display: grid;
  grid-template-columns: .58fr 1.42fr;
  gap: 5px 8px;
  margin-top: 6px;
  padding: 8px;
  border: 1px solid rgba(204, 168, 93, .44);
  background: rgba(3, 12, 29, .62);
}
.pause-command-frame .pause-audio > div { grid-column: 1/-1; color: #d8b66e; }
.pause-art-mute,
.pause-art-volume { position: relative; display: block; min-width: 0; padding: 0; border: 0; background: transparent; }
.pause-art-mute { cursor: pointer; }
.pause-art-mute img,
.pause-art-volume img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pause-art-volume { min-height: 88px; }

@media (max-width: 1366px), (max-height: 800px) {
  .match-page-v2 { --horizon-height: clamp(142px, 22svh, 176px); --deck-height: clamp(146px, 22svh, 178px); min-height: 620px; }
  .match-page-v2 .battle-brand { height: clamp(132px, 21svh, 164px); }
  .match-command-cluster { left: clamp(112px, 11vw, 154px); }
  .battle-audio-console { height: clamp(64px, 9svh, 76px); }
  .battle-mute-control { width: clamp(60px, 5.6vw, 76px); }
  .battle-volume-control { width: clamp(136px, 14vw, 196px); }
  .combat-channel { width: clamp(146px, 13.4vw, 183px); right: clamp(126px, 11.4vw, 160px); }
  .battle-studio-logo { width: clamp(118px, 10.8vw, 148px); }
  .match-page-v2 .board-stage { left: 2.2%; right: 2.2%; }
  .match-page-v2 .tactical-panel { width: clamp(178px, 16vw, 220px); height: clamp(124px, 18.4svh, 148px); }
  .match-page-v2 .fleet-status-panel { width: clamp(202px, 18.5vw, 253px); }
  .match-page-v2 .foreground-fleet { width: calc(100% - clamp(360px, 35vw, 478px)); min-width: 560px; }
  .match-page-v2 .board-readout { display: none; }
}

@media (max-width: 1040px) {
  .match-page-v2 { min-width: 760px; overflow: auto; }
  .match-page-v2 .combat-channel { right: 120px; width: 142px; }
  .match-page-v2 .battle-studio-logo { width: 112px; }
  .match-page-v2 .battle-brand { height: 126px; }
  .match-command-cluster { left: 108px; }
  .battle-volume-control { width: 130px; }
  .match-page-v2 .foreground-fleet { min-width: 520px; }
}

@media (prefers-reduced-motion: reduce) {
  .combat-channel-copy li,
  .enemy-launch-origin i,
  .player-missile-battery i { animation: none !important; transition: none !important; }
}

/* Plain-language progression cues requested after visual approval. These sit
   outside the protected pre-match slice so its approved artwork and geometry
   remain byte-for-byte unchanged. */
.gps-progress-cue {
  position: absolute;
  z-index: 90;
  display: grid;
  place-items: center;
  margin: 0;
  color: #fff0c2;
  font: 900 clamp(10px, .92vw, 18px)/1 Bahnschrift, "Arial Narrow", sans-serif;
  letter-spacing: .18em;
  text-align: center;
  text-shadow:
    0 2px 3px #020916,
    0 0 8px rgba(228, 189, 104, .9),
    0 0 18px rgba(36, 94, 168, .82);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.gps-progress-cue::before,
.gps-progress-cue::after {
  color: #e4bd68;
  font-size: .78em;
  line-height: .8;
  text-shadow: 0 0 8px rgba(228, 189, 104, .88);
}

.gps-progress-cue-start {
  top: 80.5%;
  left: 50%;
  transform: translate(-50%, 8px);
}

.gps-progress-cue-start::before,
.gps-progress-cue-deploy::before { content: "▲"; margin-bottom: .42em; }

.gps-progress-cue-stealth {
  top: 82.1%;
  left: 53.4375%;
  transform: translate(-50%, -7px);
}

.gps-progress-cue-stealth::after { content: "▼"; margin-top: .42em; }

.gps-progress-cue-deploy {
  top: 8.7%;
  left: 53.385417%;
  transform: translate(-50%, 8px);
}

@keyframes gps-progress-cue-arrive {
  from { opacity: 0; transform: translate(-50%, 8px) scale(.94); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@keyframes gps-progress-cue-pulse {
  0%, 100% { filter: brightness(1); }
  55% { filter: brightness(1.22) drop-shadow(0 0 7px rgba(228, 189, 104, .7)); }
}

@keyframes gps-map-deploy-ready {
  0%, 100% {
    filter:
      brightness(1.04)
      drop-shadow(0 0 6px rgba(228, 189, 104, .7))
      drop-shadow(0 0 11px rgba(36, 94, 168, .66));
  }
  55% {
    filter:
      brightness(1.18)
      drop-shadow(0 0 11px rgba(255, 224, 144, .96))
      drop-shadow(0 0 22px rgba(48, 112, 198, .94));
  }
}

.gps-bridge-screen.is-active.is-start-view .gps-progress-cue-start {
  animation:
    gps-progress-cue-arrive .5s ease-out 1.1s both,
    gps-progress-cue-pulse 1.9s ease-in-out 1.6s infinite;
}

.gps-bridge-screen.is-active.is-mode-revealed .gps-progress-cue-stealth {
  animation:
    gps-progress-cue-arrive .45s ease-out .45s both,
    gps-progress-cue-pulse 1.65s ease-in-out .9s infinite;
}

#map-room-screen.is-active .gps-progress-cue-deploy {
  animation:
    gps-progress-cue-arrive .48s ease-out 2.2s both,
    gps-progress-cue-pulse 1.75s ease-in-out 2.68s infinite;
}

#map-room-screen.is-active #map-room-deploy {
  animation: gps-map-deploy-ready 1.55s ease-in-out infinite !important;
}

#map-room-screen.is-active #map-room-deploy:hover,
#map-room-screen.is-active #map-room-deploy:focus-visible {
  animation-play-state: paused !important;
  filter:
    brightness(1.24)
    drop-shadow(0 0 6px #fff0bd)
    drop-shadow(0 0 24px rgba(55, 120, 210, .98)) !important;
}

@media (prefers-reduced-motion: reduce) {
  .gps-progress-cue {
    opacity: 1 !important;
    transform: translate(-50%, 0) !important;
    animation: none !important;
  }

  #map-room-screen.is-active #map-room-deploy {
    animation: none !important;
    filter:
      brightness(1.12)
      drop-shadow(0 0 9px rgba(228, 189, 104, .86))
      drop-shadow(0 0 16px rgba(36, 94, 168, .78)) !important;
  }
}

/* GHOST PATROL PREMATCH PRESENTATION LOCK: BEGIN */
/* Step 6 unified opening, bridge, and persistent CGH chrome. */
:root {
  --gps-brass: #d7ae57;
  --gps-brass-bright: #ffe3a0;
  --gps-cyan: #61e6f2;
  --gps-console: #07151b;
  --gps-ink: #031017;
  --gps-red: #a7261e;
  --gps-font-display: Georgia, "Times New Roman", serif;
  --gps-font-command: Bahnschrift, "Franklin Gothic Medium", sans-serif;
}

.gps-global-controls {
  position: fixed;
  z-index: 120;
  top: max(10px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  pointer-events: none;
}

.gps-global-controls > * { pointer-events: auto; }

.gps-global-button,
.gps-volume-control {
  min-height: 36px;
  border: 1px solid rgba(211, 228, 224, .25);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(19, 49, 58, .94), rgba(4, 18, 25, .96));
  box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 5px 18px rgba(0, 0, 0, .25);
  color: #dce7e4;
  font: 700 .62rem/1 var(--gps-font-command);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.gps-global-button {
  padding: 0 12px;
  cursor: pointer;
}

.gps-global-button:hover,
.gps-global-button:focus-visible {
  border-color: rgba(245, 208, 124, .72);
  color: #fff1ca;
}

.gps-global-audio {
  position: relative;
  display: flex;
  align-items: center;
  width: clamp(158px, 12vw, 168px);
  aspect-ratio: 956 / 274;
  gap: 0;
  overflow: hidden;
  border-radius: 5px;
  filter: drop-shadow(0 5px 16px rgba(0, 0, 0, .32));
}

.gps-global-audio-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.gps-global-audio .gps-audio-toggle {
  position: absolute;
  z-index: 2;
  top: 17%;
  bottom: 17%;
  left: 2.5%;
  width: 31%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: transparent;
  font-size: 0;
}

.gps-global-audio .gps-audio-toggle:hover,
.gps-global-audio .gps-audio-toggle:focus-visible {
  outline: 2px solid #fff1b5;
  outline-offset: -2px;
  background: rgba(89, 204, 225, .1);
}

.gps-global-audio .gps-audio-toggle[aria-pressed="true"] {
  background: rgba(3, 9, 15, .42);
  box-shadow: inset 0 0 16px rgba(0, 0, 0, .55);
}

.gps-volume-control {
  position: absolute;
  z-index: 2;
  top: 20%;
  right: 3.5%;
  bottom: 19%;
  left: 36%;
  display: flex;
  align-items: center;
  min-height: 0;
  padding: 0 5%;
  border: 0;
  background: linear-gradient(90deg, rgba(9, 28, 57, .97), rgba(9, 18, 25, .97));
  box-shadow: inset 0 0 0 2px rgba(178, 143, 88, .72), inset 0 0 9px rgba(0, 0, 0, .9);
}

.gps-volume-control span {
  display: flex;
  flex-direction: column;
  gap: 1px;
  color: #a8bcba;
  font-size: .5rem;
}

.gps-volume-control output { color: #edd18e; font-size: .58rem; }
.gps-volume-control input {
  width: 100%;
  height: 20px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--gps-brass);
}

.gps-volume-control:focus-within {
  outline: 2px solid #fff1b5;
  outline-offset: 1px;
}

.gps-achievements-control {
  position: relative;
  width: clamp(140px, 12.2vw, 176px);
  min-height: 0;
  aspect-ratio: 2315 / 565;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 6px;
  background: transparent;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .3);
}

.gps-achievements-control img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.gps-achievements-control:hover { filter: brightness(1.12); }
.gps-achievements-control:focus-visible { outline: 3px solid #fff1b5; outline-offset: 3px; }

.gps-cgh-link {
  display: block;
  width: clamp(126px, 12vw, 178px);
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 5px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 5px 20px rgba(0, 0, 0, .28);
}

.gps-cgh-link img {
  display: block;
  width: 100%;
  height: auto;
}

.gps-cinematic-sweep {
  position: fixed;
  z-index: 115;
  inset: -18%;
  opacity: 0;
  pointer-events: none;
  background:
    linear-gradient(104deg, transparent 25%, rgba(193, 239, 249, .08) 35%, rgba(233, 250, 255, .7) 49%, rgba(101, 190, 214, .2) 57%, transparent 70%),
    radial-gradient(ellipse at center, rgba(80, 186, 214, .18), rgba(2, 12, 20, .68) 72%);
  transform: translateX(-115%) skewX(-8deg);
}

.gps-opening,
.gps-bridge-screen {
  min-height: 100svh;
  overflow: hidden;
  background: #07151d;
}

.gps-opening-panorama,
.gps-opening-panorama > img,
.gps-bridge-structure,
.gps-bridge-structure > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.gps-opening-panorama > img,
.gps-bridge-structure > img {
  object-fit: cover;
}

.gps-opening-panorama > img { object-position: 52% center; }

.gps-opening-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3, 16, 25, .34), transparent 49%),
    linear-gradient(0deg, rgba(1, 10, 17, .42), transparent 35%),
    radial-gradient(circle at 68% 40%, transparent 0 34%, rgba(3, 15, 23, .13) 74%);
}

.gps-opening-copy {
  position: absolute;
  inset: 0;
  display: block;
  width: auto;
  max-width: none;
  padding: 0;
  text-align: left;
}

.gps-opening-copy::before,
.gps-opening-copy::after { display: none; }

.gps-opening-logo {
  position: absolute;
  z-index: 2;
  top: clamp(54px, 7vh, 78px);
  left: clamp(24px, 3.8vw, 62px);
  width: clamp(420px, 41vw, 650px);
  max-height: 38vh;
  height: auto;
  object-fit: contain;
  object-position: left top;
  filter: drop-shadow(0 12px 13px rgba(0, 0, 0, .48)) drop-shadow(0 0 12px rgba(230, 194, 109, .12));
  transform-origin: 34% 54%;
  animation: gps-logo-suspended 8.4s cubic-bezier(.42, 0, .58, 1) infinite;
  will-change: transform, filter;
}

.gps-opening-copy > p {
  position: absolute;
  top: clamp(272px, 39vh, 372px);
  left: clamp(42px, 7vw, 104px);
  max-width: 410px;
  margin: 0;
  color: rgba(244, 247, 239, .92);
  font: italic 500 clamp(.9rem, 1.3vw, 1.15rem)/1.4 var(--gps-font-display);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .62);
}

.gps-radar-action {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(38px, 7vh, 72px);
  display: grid;
  place-content: center;
  width: clamp(148px, 12.5vw, 184px);
  aspect-ratio: 1;
  padding: 0;
  transform: translateX(-50%);
  cursor: pointer;
  overflow: visible;
  border: 0;
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);
  background: transparent;
  box-shadow:
    0 0 20px 4px rgba(235, 181, 70, .34),
    0 12px 30px rgba(0, 0, 0, .46);
  animation: gps-radar-idle-glow 3.8s ease-in-out infinite;
  transition: filter 180ms ease, box-shadow 180ms ease, transform 110ms ease;
}

.gps-radar-action > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  pointer-events: none;
}

.gps-radar-rings,
.gps-radar-rings::before,
.gps-radar-rings::after {
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(255, 225, 148, .42);
  border-radius: 50%;
  content: "";
}

.gps-radar-rings::before { inset: 10%; animation: gps-radar-pulse 2.6s ease-out infinite; }
.gps-radar-rings::after { inset: 22%; border-color: rgba(255, 232, 167, .25); }
.gps-radar-action:hover {
  filter: brightness(1.12) saturate(1.08);
  box-shadow: 0 0 0 3px rgba(97, 230, 242, .46), 0 0 30px 10px rgba(94, 226, 240, .28), 0 12px 30px rgba(0, 0, 0, .46);
}
.gps-radar-action:focus-visible { outline: 3px solid #fff3c9; outline-offset: 12px; }
.gps-radar-action:active,
.gps-radar-action.is-activating { transform: translateX(-50%) translateY(3px) scale(.97); filter: brightness(.9) saturate(1.15); }
.gps-radar-action:disabled { cursor: wait; opacity: 1; }

.gps-radar-activation-pulse {
  position: absolute;
  z-index: -1;
  inset: 23%;
  border: 3px solid rgba(102, 238, 248, .92);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.gps-radar-action.is-activating .gps-radar-activation-pulse {
  animation: gps-radar-activation 820ms cubic-bezier(.15, .75, .2, 1) 1 both;
}

.gps-fleet-bob,
.gps-wake-light {
  position: absolute;
  inset: 0;
  background: url("./assets/step6/Ghost_Patrol_Start_Daytime_Reference.jpg") 52% center / cover no-repeat;
  pointer-events: none;
}

.gps-fleet-bob-a { clip-path: polygon(11% 49%, 31% 43%, 35% 57%, 9% 63%); animation: gps-escort-bob 5.8s ease-in-out -1.3s infinite; }
.gps-fleet-bob-b { clip-path: polygon(74% 54%, 96% 43%, 98% 64%, 72% 69%); animation: gps-escort-bob 6.5s ease-in-out -3.1s infinite reverse; }
.gps-fleet-bob-c { clip-path: polygon(54% 20%, 75% 17%, 78% 32%, 53% 34%); animation: gps-escort-bob 7.2s ease-in-out -2.2s infinite; }
.gps-wake-light { opacity: .24; mix-blend-mode: screen; filter: brightness(1.3); }
.gps-wake-light-a { clip-path: polygon(6% 58%, 40% 48%, 42% 62%, 8% 71%); animation: gps-wake-shimmer 4.8s linear infinite; }
.gps-wake-light-b { clip-path: polygon(67% 59%, 100% 46%, 100% 69%, 69% 74%); animation: gps-wake-shimmer 5.6s linear -2s infinite; }

.gps-opening-camo {
  z-index: 3;
  background: linear-gradient(115deg, transparent 18%, rgba(156, 228, 230, .18) 50%, transparent 78%);
  opacity: 0;
  pointer-events: none;
}

body.is-radar-transitioning .gps-opening-camo {
  opacity: 1;
  animation: gps-radar-transition 2.05s ease both;
}

body.is-radar-transitioning .gps-cinematic-sweep { animation: gps-cinematic-glass-sweep 2.05s cubic-bezier(.34, 0, .2, 1) both; }
body.is-radar-transitioning #opening-screen .gps-opening-panorama { animation: gps-exterior-push 1.02s cubic-bezier(.2, .72, .25, 1) both; }
body.is-radar-transitioning #opening-screen .gps-opening-logo,
body.is-radar-transitioning #opening-screen .gps-opening-copy > p { animation: gps-opening-copy-departure 760ms ease-in both; }

.gps-bridge-structure > img { object-position: center; }

.gps-bridge-panorama {
  position: absolute;
  z-index: 1;
  top: 12.5%;
  right: 7.5%;
  bottom: 27%;
  left: 7.5%;
  overflow: hidden;
  border-radius: 24px 24px 5px 5px;
  background: #94cbe4 url("./assets/step6/Ghost_Patrol_Start_Daytime_Reference.jpg") 52% 46% / cover no-repeat;
  box-shadow: inset 0 0 28px rgba(17, 43, 56, .35), 0 0 0 2px rgba(177, 210, 220, .2);
}

.gps-bridge-panorama::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .12), transparent 9% 86%, rgba(255, 255, 255, .1)),
    linear-gradient(180deg, rgba(230, 247, 255, .12), transparent 35% 75%, rgba(14, 47, 63, .15));
}

.gps-bridge-panorama > span {
  position: absolute;
  inset: 0;
  background: inherit;
  opacity: .22;
  mix-blend-mode: screen;
  animation: gps-horizon-breathe 9s ease-in-out infinite;
}

.gps-bridge-reflection {
  position: absolute;
  z-index: 2;
  top: 13%;
  right: 8%;
  bottom: 28%;
  left: 8%;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 13%, rgba(255, 255, 255, .13) 28%, transparent 36% 72%, rgba(255, 255, 255, .08) 82%, transparent 90%);
  opacity: .45;
}

body.is-bridge-arriving .gps-bridge-structure > img { animation: gps-bridge-resolve 1.05s ease-out both; }
body.is-bridge-arriving .gps-bridge-panorama { animation: gps-bridge-view-resolve 1.08s ease-out both; }
body.is-bridge-arriving .gps-bridge-reflection { animation: gps-bridge-glass-resolve 1.1s ease-out both; }
body.is-bridge-arriving .gps-bridge-console { animation: gps-console-settle 920ms cubic-bezier(.18, .78, .2, 1) both; }
body.is-bridge-arriving .gps-radar-console { animation: gps-display-power-on 620ms ease-out 310ms both; }
body.is-bridge-arriving .gps-tactical-console { animation: gps-display-power-on 620ms ease-out 570ms both; }

.gps-bridge-heading {
  position: absolute;
  z-index: 5;
  top: 76px;
  left: clamp(18px, 2.4vw, 38px);
  display: flex;
  align-items: center;
  gap: 14px;
}

.gps-bridge-heading > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 12px;
  border-left: 2px solid var(--gps-brass);
  background: rgba(5, 22, 29, .62);
  text-shadow: 0 2px 8px #000;
}

.gps-bridge-heading span { color: #bed0d0; font: 800 .54rem/1 var(--gps-font-command); letter-spacing: .18em; text-transform: uppercase; }
.gps-bridge-heading strong { color: #f3e8d3; font: 500 1rem/1.1 var(--gps-font-display); }

.gps-back-button,
.gps-mode-step,
.gps-review-action {
  min-height: 34px;
  border: 1px solid rgba(206, 225, 221, .3);
  border-radius: 4px;
  background: rgba(5, 23, 29, .9);
  color: #dce9e6;
  cursor: pointer;
  font: 800 .58rem/1 var(--gps-font-command);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.gps-back-button { padding: 0 12px; }
.gps-mode-step { padding: 0 9px; }
.gps-review-action { padding: 0 14px; border-color: rgba(222, 188, 111, .5); color: #f2d99d; }
.gps-back-button:hover, .gps-mode-step:hover, .gps-review-action:hover { border-color: #e3c378; background: #153943; }

.gps-bridge-console {
  position: absolute;
  z-index: 8;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: minmax(240px, 24%) minmax(360px, 52%) minmax(240px, 24%);
  height: clamp(188px, 27vh, 248px);
  padding: 20px clamp(18px, 3vw, 48px) 16px;
  border-top: 2px solid rgba(188, 211, 210, .28);
  background:
    linear-gradient(180deg, rgba(31, 50, 54, .98), rgba(5, 17, 23, .99) 24%),
    repeating-linear-gradient(90deg, transparent 0 75px, rgba(255, 255, 255, .018) 76px 77px);
  box-shadow: 0 -18px 35px rgba(1, 8, 12, .45), inset 0 1px rgba(255, 255, 255, .08);
}

.gps-radar-console,
.gps-tactical-console,
.gps-stealth-console {
  min-width: 0;
  padding: 0 clamp(8px, 1.4vw, 20px);
}

.gps-stealth-console {
  display: grid;
  place-items: center;
  align-content: center;
  border-inline: 1px solid rgba(171, 201, 199, .13);
}

.gps-console-label {
  display: block;
  margin-bottom: 8px;
  color: #829b9d;
  font: 800 .52rem/1 var(--gps-font-command);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.gps-radar-scope,
.gps-tactical-map {
  position: relative;
  height: calc(100% - 22px);
  min-height: 128px;
  overflow: hidden;
  border: 3px solid #172e35;
  border-radius: 7px;
  background-color: #03171d;
  box-shadow: inset 0 0 26px rgba(44, 200, 220, .16), 0 0 0 1px #01090d;
}

.gps-radar-scope {
  aspect-ratio: 1.8 / 1;
  background:
    radial-gradient(circle at center,
      transparent 0 18px,
      rgba(80, 225, 237, .18) 19px,
      transparent 20px 37px,
      rgba(80, 225, 237, .16) 38px,
      transparent 39px 56px,
      rgba(80, 225, 237, .14) 57px,
      transparent 58px),
    linear-gradient(90deg, transparent 49.5%, rgba(88, 218, 229, .22) 50%, transparent 50.5%),
    linear-gradient(transparent 49.5%, rgba(88, 218, 229, .22) 50%, transparent 50.5%),
    radial-gradient(circle, #082d36, #021216 72%);
}

.gps-radar-scope i {
  position: absolute;
  inset: -35%;
  background: conic-gradient(from 0deg, transparent 0 82%, rgba(72, 239, 244, .58) 98%, transparent 100%);
  animation: gps-radar-sweep 4.2s linear infinite;
}

.gps-radar-scope b {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #bafcff;
  box-shadow: 0 0 9px #70f7ff;
  animation: gps-contact-flicker 2.7s steps(2) infinite;
}
.gps-radar-scope b:nth-of-type(1) { top: 28%; left: 66%; }
.gps-radar-scope b:nth-of-type(2) { top: 61%; left: 31%; animation-delay: -.8s; }
.gps-radar-scope b:nth-of-type(3) { top: 74%; left: 73%; animation-delay: -1.7s; }

.gps-tactical-map {
  background:
    linear-gradient(rgba(63, 189, 208, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63, 189, 208, .12) 1px, transparent 1px),
    radial-gradient(circle at 60% 40%, #0b3540, #03171d 70%);
  background-size: 18px 18px, 18px 18px, auto;
}

.gps-tactical-map em {
  position: absolute;
  right: 8px;
  bottom: 7px;
  color: rgba(138, 224, 229, .7);
  font: 700 .46rem/1 ui-monospace, monospace;
  letter-spacing: .08em;
}

.gps-island { position: absolute; width: 28px; height: 13px; border-radius: 55% 38% 60% 35%; background: #3b827f; box-shadow: inset 0 -4px rgba(0, 0, 0, .28); }
.gps-island-a { top: 24%; left: 22%; transform: rotate(-12deg); }
.gps-island-b { top: 56%; left: 56%; width: 36px; transform: rotate(8deg); }
.gps-island-c { top: 31%; left: 73%; width: 20px; transform: rotate(-30deg); }
.gps-contact { position: absolute; width: 7px; height: 7px; border: 1px solid #9ef8ff; transform: rotate(45deg); box-shadow: 0 0 8px #42e5f0; }
.gps-contact-a { top: 66%; left: 24%; }
.gps-contact-b { top: 40%; left: 47%; }
.gps-contact-c { top: 22%; left: 82%; }
.gps-route { position: absolute; height: 1px; background: rgba(100, 231, 241, .64); transform-origin: left; }
.gps-route-a { top: 68%; left: 25%; width: 94px; transform: rotate(-18deg); }
.gps-route-b { top: 42%; left: 48%; width: 84px; transform: rotate(-11deg); }

.gps-stealth-control {
  position: relative;
  width: clamp(190px, 18vw, 258px);
  height: clamp(112px, 15vh, 145px);
  perspective: 600px;
}

.gps-stealth-action,
.gps-stealth-lid {
  position: absolute;
  inset: 0;
  width: 100%;
  border-radius: 8px;
  font-family: var(--gps-font-command);
}

.gps-stealth-action {
  display: grid;
  place-content: center;
  border: 2px solid #f4d785;
  background: radial-gradient(circle at 50% 40%, #3f3013, #15150f 65%);
  box-shadow: inset 0 0 25px rgba(244, 197, 85, .3), 0 0 18px rgba(241, 181, 55, .2);
  color: #ffe29b;
  cursor: pointer;
  text-shadow: 0 0 8px rgba(255, 213, 116, .65);
}
.gps-stealth-action strong { font-size: .72rem; letter-spacing: .14em; }
.gps-stealth-action span { margin-top: 4px; font-size: 1.05rem; font-weight: 900; letter-spacing: .2em; }
.gps-stealth-action:disabled { cursor: not-allowed; opacity: .42; }

.gps-stealth-lid {
  transform-origin: top center;
  cursor: pointer;
  border: 2px solid #de5747;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, .2), transparent 22%),
    repeating-linear-gradient(90deg, transparent 0 17px, rgba(73, 7, 5, .22) 18px 21px),
    linear-gradient(180deg, #bd352b, #74150f);
  box-shadow: inset 0 0 0 5px rgba(77, 8, 5, .38), inset 0 2px rgba(255, 190, 176, .35), 0 9px 20px rgba(0, 0, 0, .48);
  color: #ffd2c7;
  transition: transform 520ms cubic-bezier(.24, .82, .22, 1), filter 180ms ease;
  backface-visibility: hidden;
}
.gps-stealth-lid span { display: block; font-size: .62rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.gps-stealth-lid i { position: absolute; right: 15%; bottom: 17%; left: 15%; height: 9px; border-radius: 5px; background: #3a0907; box-shadow: inset 0 2px #f07d6c; }
.gps-stealth-lid:hover { filter: brightness(1.12); }
.gps-bridge-screen.is-mode-revealed .gps-stealth-lid { transform: rotateX(116deg) translateY(-4px); pointer-events: none; }

.gps-mode-reveal {
  position: absolute;
  z-index: 14;
  right: clamp(260px, 24.5vw, 370px);
  bottom: clamp(178px, 25vh, 228px);
  left: clamp(260px, 24.5vw, 370px);
  max-height: calc(100svh - 112px - clamp(178px, 25vh, 228px));
  padding: 12px;
  overflow: auto;
  border: 1px solid rgba(176, 214, 215, .31);
  border-radius: 9px 9px 4px 4px;
  background: linear-gradient(180deg, rgba(5, 27, 34, .96), rgba(2, 15, 21, .97));
  box-shadow: 0 16px 42px rgba(0, 0, 0, .44), inset 0 1px rgba(255, 255, 255, .06);
  animation: gps-console-rise 420ms cubic-bezier(.2, .8, .2, 1) both;
}

.gps-mode-heading {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.gps-mode-heading > div { display: flex; flex-direction: column; gap: 2px; }
.gps-mode-heading span { color: #80acaf; font: 800 .48rem/1 var(--gps-font-command); letter-spacing: .14em; text-transform: uppercase; }
.gps-mode-heading strong { color: #ead8b3; font: 500 .92rem/1.1 var(--gps-font-display); }

.gps-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.gps-mode-grid .gps-mode-card,
.gps-mode-grid .gps-mode-card.is-selected,
.gps-mode-grid .gps-mode-card.is-prev,
.gps-mode-grid .gps-mode-card.is-next,
.gps-mode-grid .gps-mode-card.is-far {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  min-width: 0;
  height: clamp(74px, 10.2vh, 98px);
  padding: 0;
  overflow: hidden;
  transform: none;
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
  border: 1px solid rgba(166, 201, 201, .25);
  border-radius: 4px;
  background: #0c242c;
  box-shadow: none;
  text-align: left;
}

.gps-mode-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.65) contrast(1.08) brightness(.72);
  transition: transform 220ms ease, filter 220ms ease;
}
.gps-classic > img { object-position: center 34%; }
.gps-dreadnought > img { object-position: center 34%; }

.gps-mode-card:hover > img,
.gps-mode-card.is-selected > img { transform: scale(1.045); filter: saturate(.9) contrast(1.06) brightness(.86); }
.gps-mode-card.is-selected { border-color: #e3bd69 !important; box-shadow: inset 0 0 0 1px rgba(255, 223, 145, .42), 0 0 13px rgba(225, 176, 65, .24) !important; }
.gps-card-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2, 12, 17, .95), rgba(3, 16, 22, .5) 70%, rgba(3, 15, 20, .2)); }
.gps-card-number { position: absolute; top: 7px; right: 8px; color: rgba(227, 204, 151, .7); font: 800 .48rem/1 ui-monospace, monospace; letter-spacing: .12em; }
.gps-card-anchor { position: absolute; top: 7px; left: 8px; padding: 2px 5px; border: 1px solid rgba(224, 190, 112, .34); color: #d7bd7e; font: 700 .38rem/1 var(--gps-font-command); letter-spacing: .08em; text-transform: uppercase; }
.gps-card-copy { position: absolute; z-index: 2; right: 8px; bottom: 7px; left: 8px; display: flex; flex-direction: column; gap: 1px; }
.gps-card-copy small { color: #91b5b5; font: 800 .42rem/1 var(--gps-font-command); letter-spacing: .08em; text-transform: uppercase; }
.gps-card-copy strong { color: #f5ead7; font: 500 clamp(.9rem, 1.2vw, 1.18rem)/1 var(--gps-font-display); text-shadow: 0 2px 5px #000; }
.gps-card-copy em { overflow: hidden; color: #c2cdca; font: normal 600 .42rem/1.2 var(--gps-font-command); text-overflow: ellipsis; white-space: nowrap; }

.gps-mode-detail {
  display: grid;
  grid-template-columns: minmax(150px, .55fr) minmax(210px, 1.3fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(164, 200, 200, .18);
}
.gps-mode-detail > div { display: flex; flex-direction: column; gap: 2px; }
.gps-mode-detail span { color: #82a6a8; font: 800 .42rem/1 var(--gps-font-command); letter-spacing: .08em; text-transform: uppercase; }
.gps-mode-detail h3 { margin: 0; color: #f2dfb4; font: 500 1.25rem/1 var(--gps-font-display); }
.gps-mode-detail p { margin: 0; color: #b9c9c8; font-size: .55rem; line-height: 1.4; }
.gps-mode-dots { display: none; }

.setup-screen { padding-top: 70px; }
.setup-screen .simple-header { padding-right: min(430px, 36vw); }
.gps-registry-brief {
  max-height: 38vh;
  margin-top: 18px;
  padding: 14px 16px;
  overflow: auto;
  border: 1px solid rgba(151, 190, 190, .2);
  border-radius: 8px;
  background: rgba(4, 22, 29, .48);
}
.gps-registry-brief h3 { margin: 0 0 9px; color: #d9bd7f; font: 800 .55rem/1 var(--gps-font-command); letter-spacing: .12em; text-transform: uppercase; }
.gps-registry-brief div { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(156, 191, 190, .16); }
.gps-registry-brief ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.gps-registry-brief li { position: relative; padding-left: 13px; color: #b9c8c6; font-size: .68rem; line-height: 1.45; }
.gps-registry-brief li::before { position: absolute; top: .5em; left: 0; width: 5px; height: 5px; border-radius: 50%; background: #70c5c5; content: ""; }

.battle-screen .player-panel { top: 68px; }

@keyframes gps-radar-pulse {
  0% { opacity: .85; transform: scale(.72); }
  90%, 100% { opacity: 0; transform: scale(1.32); }
}

@keyframes gps-logo-suspended {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-.08deg); filter: drop-shadow(0 12px 13px rgba(0, 0, 0, .48)) drop-shadow(0 0 12px rgba(230, 194, 109, .12)) brightness(.98); }
  48% { transform: translate3d(1px, -5px, 0) rotate(.08deg); filter: drop-shadow(0 16px 16px rgba(0, 0, 0, .42)) drop-shadow(0 0 16px rgba(245, 213, 133, .2)) brightness(1.06); }
}

@keyframes gps-radar-idle-glow {
  0%, 100% { box-shadow: 0 0 18px 3px rgba(235, 181, 70, .27), 0 12px 30px rgba(0, 0, 0, .46); }
  50% { box-shadow: 0 0 28px 8px rgba(245, 194, 82, .44), 0 12px 30px rgba(0, 0, 0, .46); }
}

@keyframes gps-radar-activation {
  0% { opacity: .9; transform: scale(.55); }
  100% { opacity: 0; transform: scale(5.5); }
}

@keyframes gps-escort-bob {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(1.5px) rotate(.08deg); }
}

@keyframes gps-wake-shimmer {
  0%, 100% { opacity: .12; transform: translateX(-1%); }
  50% { opacity: .31; transform: translateX(1%); }
}

@keyframes gps-radar-transition {
  0% { transform: translateX(-110%); opacity: 0; }
  44% { opacity: .65; }
  100% { transform: translateX(110%); opacity: 0; }
}

@keyframes gps-cinematic-glass-sweep {
  0% { opacity: 0; transform: translateX(-115%) skewX(-8deg); }
  34% { opacity: .18; }
  47% { opacity: .98; }
  58% { opacity: .7; }
  100% { opacity: 0; transform: translateX(115%) skewX(-8deg); }
}

@keyframes gps-exterior-push {
  from { transform: scale(1); filter: brightness(1); }
  to { transform: scale(1.115) translate3d(-1.2%, 1%, 0); filter: brightness(.82) saturate(.92); }
}

@keyframes gps-opening-copy-departure {
  from { opacity: 1; }
  to { opacity: 0; transform: translate3d(-8px, -3px, 0); }
}

@keyframes gps-bridge-resolve {
  from { opacity: .18; filter: brightness(1.5) blur(5px); transform: scale(1.035); }
  to { opacity: 1; filter: none; transform: scale(1); }
}

@keyframes gps-bridge-view-resolve {
  from { opacity: .25; filter: brightness(1.35) blur(3px); transform: scale(1.04); }
  to { opacity: 1; filter: none; transform: scale(1); }
}

@keyframes gps-bridge-glass-resolve {
  0% { opacity: 0; transform: translateX(-18%); }
  48% { opacity: .8; }
  100% { opacity: .45; transform: translateX(0); }
}

@keyframes gps-console-settle {
  from { opacity: .35; transform: translateY(34px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes gps-display-power-on {
  0% { opacity: 0; filter: brightness(.35); transform: translateY(8px); }
  55% { opacity: 1; filter: brightness(1.65); }
  100% { opacity: 1; filter: brightness(1); transform: translateY(0); }
}

@keyframes gps-horizon-breathe {
  0%, 100% { transform: translateY(0) scale(1.002); }
  50% { transform: translateY(1px) scale(1.004); }
}

@keyframes gps-radar-sweep { to { transform: rotate(360deg); } }
@keyframes gps-contact-flicker { 0%, 30%, 100% { opacity: .2; } 35%, 82% { opacity: 1; } }
@keyframes gps-console-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1100px) {
  .gps-global-controls { gap: 5px; }
  .gps-global-audio { width: 158px; }
  .gps-cgh-link { width: 118px; }
  .gps-mode-reveal { right: 236px; left: 236px; }
  .gps-bridge-console { grid-template-columns: 225px minmax(330px, 1fr) 225px; padding-inline: 14px; }
}

@media (max-height: 800px) and (min-width: 900px) {
  .gps-opening-logo { top: 58px; width: min(500px, 37vw); }
  .gps-opening-copy > p { top: 34vh; }
  .gps-radar-action { width: 128px; bottom: 30px; }
  .gps-bridge-heading { top: 64px; }
  .gps-bridge-console { height: 196px; padding-top: 13px; padding-bottom: 10px; }
  .gps-mode-reveal { right: 232px; bottom: 184px; left: 232px; max-height: calc(100svh - 252px); }
  .gps-mode-grid .gps-mode-card,
  .gps-mode-grid .gps-mode-card.is-selected,
  .gps-mode-grid .gps-mode-card.is-prev,
  .gps-mode-grid .gps-mode-card.is-next,
  .gps-mode-grid .gps-mode-card.is-far { height: 72px; }
  .gps-radar-scope, .gps-tactical-map { min-height: 120px; }
  .gps-stealth-control { height: 110px; }
}

@media (max-width: 760px) {
  .gps-global-controls { left: 8px; right: 8px; justify-content: flex-end; }
  .gps-global-audio { display: none; }
  .gps-global-button { padding-inline: 8px; }
  .gps-opening-logo { top: 82px; left: 20px; width: min(390px, 78vw); }
  .gps-opening-copy > p { top: 31vh; left: 24px; width: min(380px, 74vw); }
  .gps-radar-action { width: 124px; }
  .gps-bridge-heading { top: 64px; }
  .gps-bridge-heading > div { display: none; }
  .gps-bridge-console { grid-template-columns: 1fr; height: 180px; }
  .gps-radar-console, .gps-tactical-console { display: none; }
  .gps-stealth-console { border: 0; }
  .gps-mode-reveal { right: 12px; bottom: 172px; left: 12px; }
  .gps-mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gps-mode-detail { grid-template-columns: 1fr auto; }
  .gps-mode-detail p { display: none; }
  .setup-screen .simple-header { padding-right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .gps-fleet-bob,
  .gps-wake-light,
  .gps-bridge-panorama > span,
  .gps-radar-scope i,
  .gps-radar-scope b,
  .gps-radar-rings::before,
  .gps-radar-action,
  .gps-radar-activation-pulse,
  .gps-opening-logo,
  .gps-mode-reveal,
  .gps-opening-camo {
    animation: none !important;
  }

  body.is-radar-transitioning .gps-cinematic-sweep {
    animation: gps-reduced-crossfade 280ms ease both !important;
  }

  body.is-radar-transitioning #opening-screen .gps-opening-panorama,
  body.is-radar-transitioning #opening-screen .gps-opening-logo,
  body.is-radar-transitioning #opening-screen .gps-opening-copy > p,
  body.is-bridge-arriving .gps-bridge-structure > img,
  body.is-bridge-arriving .gps-bridge-panorama,
  body.is-bridge-arriving .gps-bridge-reflection,
  body.is-bridge-arriving .gps-bridge-console,
  body.is-bridge-arriving .gps-radar-console,
  body.is-bridge-arriving .gps-tactical-console {
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }

  .gps-stealth-lid { transition-duration: 1ms; }
  .gps-mode-card > img { transition: none; }
}

@keyframes gps-reduced-crossfade {
  0%, 100% { opacity: 0; transform: none; }
  50% { opacity: .72; transform: none; }
}

/* Ghost Patrol Strike achievements foundation. The catalog remains Open;
   this layer owns only presentation, interaction, and state infrastructure. */
.achievements-dialog {
  width: min(1040px, calc(100% - 32px));
  max-width: none;
  max-height: min(820px, calc(100dvh - 32px));
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(112, 185, 219, .42);
  border-radius: 2px;
  background: #05111e;
  color: #eef3f2;
  box-shadow: 0 36px 120px rgba(0, 2, 8, .9), 0 0 0 1px rgba(216, 179, 102, .13);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}

.achievements-dialog::backdrop {
  background: radial-gradient(circle at 50% 45%, rgba(10, 37, 59, .42), rgba(0, 4, 10, .9));
  backdrop-filter: blur(9px) saturate(.78);
}

.achievements-dialog[open] { animation: achievements-enter .24s cubic-bezier(.2, .76, .2, 1); }

@keyframes achievements-enter {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.achievements-frame {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  max-height: min(820px, calc(100dvh - 32px));
  overflow: hidden;
  background:
    linear-gradient(rgba(119, 182, 207, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(119, 182, 207, .035) 1px, transparent 1px),
    radial-gradient(circle at 82% 4%, rgba(42, 115, 151, .25), transparent 36%),
    linear-gradient(152deg, #081d2d, #040c17 62%, #020811);
  background-size: 32px 32px, 32px 32px, auto, auto;
}

.achievements-frame::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  right: 82px;
  width: min(38%, 360px);
  height: 3px;
  background: linear-gradient(90deg, transparent, #55c5dd 34%, #dfbd73);
  box-shadow: 0 0 18px rgba(85, 197, 221, .55);
}

.achievements-header {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 1.65rem 1.75rem 1.25rem;
  border-bottom: 1px solid rgba(126, 172, 196, .2);
  background: linear-gradient(90deg, rgba(7, 25, 40, .98), rgba(6, 18, 29, .88));
}

.achievements-heading { min-width: 0; }
.achievements-eyebrow {
  display: block;
  margin-bottom: .35rem;
  color: #dfbd73;
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.achievements-heading h2 {
  margin: 0;
  color: #f3eee2;
  font: 500 clamp(2.25rem, 4.4vw, 3.8rem)/.96 Georgia, "Times New Roman", serif;
  letter-spacing: .025em;
}

.achievements-heading p {
  margin: .55rem 0 0;
  color: #9fb2bf;
  font-size: .94rem;
  line-height: 1.45;
}

.achievements-close {
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid rgba(139, 183, 204, .38);
  border-radius: 50%;
  background: rgba(7, 25, 39, .9);
  color: #eef3f2;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.achievements-close:hover { border-color: #dfbd73; background: rgba(26, 53, 67, .96); transform: rotate(2deg); }
.achievements-close span::before,
.achievements-close span::after {
  content: "";
  position: absolute;
  top: 25px;
  left: 15px;
  width: 21px;
  height: 2px;
  border-radius: 99px;
  background: currentColor;
}
.achievements-close span::before { transform: rotate(45deg); }
.achievements-close span::after { transform: rotate(-45deg); }

.achievements-summary {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 180px));
  gap: 1px;
  padding: 0 1.75rem;
  border-bottom: 1px solid rgba(126, 172, 196, .16);
  background: rgba(2, 10, 18, .66);
}

.achievements-summary > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .7rem;
  align-items: center;
  min-height: 62px;
  padding: .55rem 1.2rem .55rem 0;
}

.achievements-summary > div + div { padding-left: 1.2rem; border-left: 1px solid rgba(126, 172, 196, .16); }
.achievements-summary strong { color: #f0c978; font: 500 2rem/1 Georgia, serif; }
.achievements-summary span { color: #94a8b5; font-size: .74rem; font-weight: 800; letter-spacing: .1em; line-height: 1.35; text-transform: uppercase; }

.achievements-body {
  position: relative;
  z-index: 1;
  min-height: 0;
  padding: 1rem 1.75rem 1.35rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #577d91 #07131f;
  scrollbar-width: thin;
}

.achievements-dev-notice {
  display: flex;
  gap: .85rem;
  align-items: center;
  margin-bottom: 1rem;
  padding: .75rem .9rem;
  border: 1px solid rgba(230, 187, 100, .36);
  background: linear-gradient(90deg, rgba(112, 79, 25, .22), rgba(15, 28, 37, .5));
  color: #c8d2d6;
  font-size: .82rem;
  line-height: 1.4;
}
.achievements-dev-notice strong { flex: 0 0 auto; color: #f0c978; font-size: .76rem; letter-spacing: .11em; }

.achievements-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }

.achievement-card {
  --state-color: #6f8592;
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: .95rem;
  min-height: 174px;
  padding: 1.1rem;
  overflow: hidden;
  border: 1px solid rgba(127, 167, 186, .22);
  border-left: 3px solid var(--state-color);
  background: linear-gradient(145deg, rgba(9, 31, 46, .96), rgba(4, 15, 25, .96));
  box-shadow: inset 0 1px rgba(255, 255, 255, .025), 0 10px 25px rgba(0, 2, 7, .18);
}

.achievement-card::after {
  content: "";
  position: absolute;
  right: -35px;
  bottom: -65px;
  width: 125px;
  height: 125px;
  border: 1px solid color-mix(in srgb, var(--state-color) 25%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 18px color-mix(in srgb, var(--state-color) 3%, transparent), 0 0 0 36px color-mix(in srgb, var(--state-color) 2%, transparent);
  pointer-events: none;
}

.achievement-card[data-state="progress"] { --state-color: #59c2da; }
.achievement-card[data-state="completed"] { --state-color: #d8b566; }
.achievement-card[data-state="secret"] { --state-color: #bd735f; background: linear-gradient(145deg, rgba(33, 27, 31, .98), rgba(10, 13, 20, .98)); }

.achievement-emblem {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid color-mix(in srgb, var(--state-color) 58%, #334653);
  background: radial-gradient(circle, color-mix(in srgb, var(--state-color) 13%, transparent), rgba(3, 12, 20, .94));
  color: color-mix(in srgb, var(--state-color) 82%, white);
  font: 600 1.35rem/1 Georgia, serif;
  letter-spacing: .08em;
  clip-path: polygon(50% 0, 90% 22%, 90% 72%, 50% 100%, 10% 72%, 10% 22%);
}

.achievement-card[data-state="completed"] .achievement-emblem::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 7px;
  border-bottom: 2px solid #f6e5bb;
  border-left: 2px solid #f6e5bb;
  transform: rotate(-45deg) translate(1px, -1px);
}
.achievement-card[data-state="completed"] .achievement-emblem { font-size: 0; }
.achievement-card[data-state="secret"] .achievement-emblem { font: 800 .95rem/1 ui-monospace, monospace; }

.achievement-card-content { position: relative; z-index: 1; display: flex; min-width: 0; flex-direction: column; }
.achievement-card-meta { display: flex; flex-wrap: wrap; gap: .45rem .7rem; align-items: center; }
.achievement-state-label {
  color: color-mix(in srgb, var(--state-color) 78%, white);
  font-size: .75rem;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.achievement-category { color: #8299a7; font-size: .78rem; font-weight: 700; }
.achievement-card h3 { margin: .35rem 0 .25rem; color: #f0eee7; font: 500 1.3rem/1.15 Georgia, serif; }
.achievement-card p { margin: 0; color: #a6b6bf; font-size: .9rem; line-height: 1.45; }
.achievement-card-footer { display: flex; flex-direction: column; gap: .45rem; margin-top: auto; padding-top: .75rem; }
.achievement-progress-copy,
.achievement-classified { color: #b8c4c9; font-size: .78rem; font-weight: 750; letter-spacing: .035em; }
.achievement-meter { display: block; width: 100%; height: 7px; overflow: hidden; background: rgba(131, 159, 172, .14); }
.achievement-meter i { display: block; width: var(--achievement-progress); height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--state-color) 55%, #365365), var(--state-color)); box-shadow: 0 0 10px color-mix(in srgb, var(--state-color) 55%, transparent); }
.achievement-classified { color: #bf9184; text-transform: uppercase; }

.achievements-empty {
  display: grid;
  grid-template-columns: 104px minmax(0, 540px);
  gap: 1.45rem;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: 2.5rem 1rem;
  text-align: left;
}
.achievements-empty-mark { position: relative; display: grid; place-items: center; width: 104px; height: 104px; border: 1px solid rgba(97, 190, 211, .35); border-radius: 50%; }
.achievements-empty-mark::before,
.achievements-empty-mark::after { content: ""; position: absolute; border: 1px solid rgba(97, 190, 211, .15); border-radius: 50%; }
.achievements-empty-mark::before { inset: 12px; }
.achievements-empty-mark::after { inset: 27px; }
.achievements-empty-mark i { width: 7px; height: 7px; border-radius: 50%; background: #dfbd73; box-shadow: 0 0 15px #dfbd73; }
.achievements-empty span:not(.achievements-empty-mark) { color: #61bed3; font-size: .75rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.achievements-empty h3 { margin: .35rem 0 .5rem; color: #f0eee7; font: 500 1.75rem/1.16 Georgia, serif; }
.achievements-empty p { margin: 0; color: #9fb0ba; font-size: .95rem; line-height: 1.6; }

.achievements-footer {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  min-height: 42px;
  padding: .75rem 1.75rem;
  border-top: 1px solid rgba(126, 172, 196, .15);
  background: rgba(2, 8, 14, .82);
  color: #728a98;
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-width: 680px) {
  .achievements-dialog {
    width: calc(100% - 12px);
    max-height: calc(100dvh - 12px);
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  }
  .achievements-frame { max-height: calc(100dvh - 12px); }
  .achievements-header { gap: .75rem; padding: max(1.15rem, env(safe-area-inset-top)) 1rem .95rem; }
  .achievements-heading h2 { font-size: clamp(2rem, 10vw, 2.7rem); }
  .achievements-heading p { font-size: .88rem; }
  .achievements-eyebrow { font-size: .7rem; letter-spacing: .13em; }
  .achievements-close { width: 50px; height: 50px; }
  .achievements-close span::before,
  .achievements-close span::after { top: 24px; left: 14px; }
  .achievements-summary { grid-template-columns: 1fr 1fr; padding: 0 1rem; }
  .achievements-summary > div { min-height: 55px; padding-right: .75rem; }
  .achievements-summary > div + div { padding-left: .75rem; }
  .achievements-summary strong { font-size: 1.65rem; }
  .achievements-summary span { font-size: .68rem; }
  .achievements-body { padding: .85rem .75rem 1rem; }
  .achievements-dev-notice { align-items: flex-start; flex-direction: column; gap: .25rem; margin-bottom: .75rem; }
  .achievements-list { grid-template-columns: 1fr; gap: .7rem; }
  .achievement-card { grid-template-columns: 50px minmax(0, 1fr); gap: .75rem; min-height: 158px; padding: .95rem .85rem; }
  .achievement-emblem { width: 50px; height: 50px; }
  .achievement-card h3 { font-size: 1.2rem; }
  .achievement-card p { font-size: .88rem; }
  .achievements-empty { grid-template-columns: 1fr; gap: 1rem; min-height: 350px; padding: 2rem .7rem; text-align: center; }
  .achievements-empty-mark { width: 92px; height: 92px; margin: 0 auto; }
  .achievements-footer { padding: .7rem 1rem max(.7rem, env(safe-area-inset-bottom)); font-size: .66rem; }
  .achievements-footer span:last-child { display: none; }
}

@media (max-width: 360px) {
  .achievement-card { grid-template-columns: 1fr; }
  .achievement-emblem { width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .achievements-dialog[open],
  .achievements-close,
  .achievement-meter i { animation: none !important; transition: none !important; }
}

/* v0.6.27 Map Room — Lenny's decorated cabinet remains one byte-identical base.
   Every functional element below is an independent responsive interface layer. */
.map-room-screen {
  display: grid;
  height: 100svh;
  min-height: 0;
  overflow: hidden;
  place-items: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(29, 72, 92, .4), transparent 62%),
    #040911;
}

.map-room-stage {
  --map-room-aspect: 73 / 36;
  --map-room-grid-line: rgba(166, 229, 246, .48);
  --map-room-grid-hot: rgba(211, 248, 255, .78);
  position: relative;
  width: min(100vw, calc(100svh * 73 / 36));
  aspect-ratio: var(--map-room-aspect);
  overflow: hidden;
  isolation: isolate;
  background: #07101a;
  box-shadow: 0 0 52px rgba(0, 0, 0, .78);
}

.map-room-decorated-background {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.map-room-logo {
  position: absolute;
  z-index: 2;
  top: -3.5%;
  left: 2.9%;
  width: 14.5%;
  height: 44.2%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.map-room-logo-wide {
  position: absolute;
  z-index: 2;
  top: .25%;
  left: 17.2%;
  display: none;
  width: 65.6%;
  height: 8.8%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.map-room-stage[data-logo-option="B"] .map-room-logo-a { display: none; }
.map-room-stage[data-logo-option="B"] .map-room-logo-b { display: block; }
.map-room-stage[data-logo-option="B"] .map-room-copy-scrim-top { display: none; }

.map-room-playfield {
  position: absolute;
  z-index: 3;
  top: 9.3%;
  left: 20.5%;
  width: 59%;
  aspect-ratio: 28 / 16;
  overflow: visible;
  touch-action: none;
}

.map-room-island-glow-layer,
.map-room-island-art-layer,
.map-room-exact-grid-layer,
.map-room-interaction-layer,
.map-room-reference-layer {
  position: absolute;
  inset: 0;
}

.map-room-island-glow-layer {
  z-index: 1;
  pointer-events: none;
}

.map-room-island-glow {
  position: absolute;
  border-radius: 42%;
  background: rgba(78, 219, 224, .2);
  filter: blur(clamp(6px, .65vw, 15px));
  transform: scale(1.13);
  box-shadow: 0 0 18px rgba(92, 224, 231, .42);
}

.map-room-island-art-layer {
  z-index: 2;
  pointer-events: none;
}

.map-room-island-art {
  position: absolute;
  display: block;
  object-fit: fill;
  filter:
    saturate(.72)
    brightness(.92)
    drop-shadow(0 0 5px rgba(86, 230, 233, .35))
    drop-shadow(0 5px 5px rgba(0, 0, 0, .66));
}

.map-room-exact-grid-layer {
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  shape-rendering: crispEdges;
}

.map-room-grid-cells { fill: url(#map-room-cell-grid); }

#map-room-cell-grid path {
  fill: none;
  stroke: var(--map-room-grid-line);
  stroke-width: .045;
}

.map-room-grid-border {
  fill: none;
  stroke: var(--map-room-grid-hot);
  stroke-width: .08;
}

.map-room-interaction-layer {
  z-index: 4;
  pointer-events: none;
}

.map-room-formation-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.map-room-cell-reticle {
  position: absolute;
  z-index: 1;
  border: 1px solid rgba(236, 252, 255, .72);
  background: rgba(88, 219, 235, .12);
  box-shadow:
    inset 0 0 8px rgba(110, 236, 246, .2),
    0 0 8px rgba(89, 221, 235, .34);
  pointer-events: none;
}

.map-room-formation {
  position: absolute;
  z-index: 2;
  display: block;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: grab;
  outline: none;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  filter:
    brightness(1.08)
    drop-shadow(0 2px 2px rgba(0, 0, 0, .82))
    drop-shadow(0 0 4px rgba(153, 222, 229, .14));
  transition: filter 120ms ease, opacity 120ms ease;
}

.map-room-formation img {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  object-fit: fill;
  pointer-events: none;
}

.map-room-formation:hover,
.map-room-formation:focus-visible {
  z-index: 5;
  filter:
    brightness(1.28)
    drop-shadow(0 3px 3px rgba(0, 0, 0, .9))
    drop-shadow(0 0 7px rgba(159, 235, 241, .72));
}

.map-room-formation:focus-visible {
  outline: 1px solid rgba(226, 248, 252, .92);
  outline-offset: 1px;
}

.map-room-formation.is-dragging {
  z-index: 6;
  cursor: grabbing;
  opacity: .88;
}

.map-room-formation.is-illegal {
  filter:
    sepia(.7)
    saturate(2.8)
    hue-rotate(318deg)
    brightness(1.15)
    drop-shadow(0 0 7px rgba(255, 74, 54, .88));
}

.map-room-reference-layer {
  z-index: 4;
  pointer-events: none;
}

.map-room-dreadnought-reference {
  position: absolute;
  z-index: 2;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(207, 235, 240, .24);
  border-radius: 7%;
  background: rgba(15, 39, 47, .14);
  box-shadow:
    inset 0 0 0 1px rgba(31, 75, 83, .52),
    0 4px 5px rgba(0, 0, 0, .6),
    0 0 9px rgba(120, 222, 228, .16);
}

.map-room-dreadnought-reference img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  filter:
    brightness(1.08)
    drop-shadow(0 2px 2px rgba(0, 0, 0, .82));
}

.map-room-dreadnought-reference figcaption {
  position: absolute;
  right: -2px;
  bottom: calc(100% + 3px);
  display: grid;
  width: max-content;
  justify-items: end;
  padding: 2px 4px;
  border: 1px solid rgba(155, 205, 214, .22);
  border-radius: 3px;
  background: rgba(4, 17, 26, .88);
  color: rgba(219, 242, 246, .86);
  font: 700 clamp(5px, .46vw, 9px)/1.15 "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px #000;
}

.map-room-dreadnought-reference figcaption span {
  color: rgba(141, 210, 221, .75);
  font-size: .88em;
}

.map-room-glass-treatment {
  position: absolute;
  z-index: 6;
  top: 8.8%;
  left: 16.85%;
  width: 66.25%;
  height: 72.4%;
  border-radius: .2%;
  background:
    linear-gradient(112deg, transparent 5%, rgba(208, 244, 250, .035) 18%, transparent 32%),
    linear-gradient(180deg, rgba(120, 222, 235, .025), transparent 36%);
  pointer-events: none;
}

.map-room-foreground-preservation {
  position: absolute;
  z-index: 7;
  inset: 0;
  clip-path: polygon(
    78.2% 73.5%,
    79.1% 73.9%,
    80.2% 74.9%,
    80.8% 76.2%,
    80.7% 77.8%,
    77.1% 77.8%,
    76.7% 77.1%,
    77.2% 76.1%,
    77.7% 74.6%
  );
  background: url("./assets/map-room/Map_Room_Foundation_LOCKED.jpg") 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}

.map-room-topline {
  position: absolute;
  z-index: 8;
  top: 5.15%;
  left: 50%;
  color: rgba(208, 234, 239, .66);
  font: 700 clamp(6px, .55vw, 11px)/1 "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px #000;
  transform: translateX(-50%);
  pointer-events: none;
}

.map-room-topline span { color: rgba(163, 227, 238, .86); }

.map-room-actions {
  position: absolute;
  z-index: 9;
  top: .7%;
  left: 16.85%;
  display: grid;
  width: 66.25%;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 1%;
}

.map-room-action,
.map-room-readout button {
  border: 1px solid rgba(181, 202, 211, .28);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(26, 44, 52, .92), rgba(7, 18, 25, .94));
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 2px 5px rgba(0, 0, 0, .42);
  color: rgba(224, 237, 240, .82);
  cursor: pointer;
  font: 800 clamp(6px, .52vw, 10px)/1 "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.map-room-action {
  width: max-content;
  padding: clamp(4px, .4vw, 8px) clamp(6px, .75vw, 13px);
}

.map-room-forward {
  justify-self: end;
  border-color: rgba(226, 191, 105, .52);
  color: rgba(245, 224, 168, .92);
}

.map-room-action:hover,
.map-room-action:focus-visible,
.map-room-readout button:hover,
.map-room-readout button:focus-visible {
  border-color: rgba(226, 213, 172, .76);
  color: #fff5dc;
  filter: brightness(1.16);
}

.map-room-readout {
  display: grid;
  min-width: min(32vw, 460px);
  justify-items: center;
  gap: 2px;
  color: rgba(210, 232, 236, .76);
  font: 700 clamp(5px, .48vw, 9px)/1.1 "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 1px 3px #000;
}

.map-room-readout > span {
  color: rgba(226, 191, 105, .85);
  letter-spacing: .18em;
}

.map-room-readout strong {
  overflow: hidden;
  max-width: 36vw;
  color: rgba(211, 231, 235, .72);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-room-readout strong[data-state="blocked"] { color: rgba(255, 136, 118, .88); }

.map-room-readout button {
  padding: 2px 5px;
  border-color: transparent;
  background: transparent;
  color: rgba(174, 203, 209, .58);
}

@media (max-aspect-ratio: 4 / 3) {
  .map-room-stage { box-shadow: 0 0 32px rgba(0, 0, 0, .72); }
  .map-room-readout strong { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .map-room-formation { transition: none; }
}

/* Decorated-base composition, copy repair, and live command layer. */
.map-room-formation.is-selected {
  z-index: 5;
  outline: 1px solid rgba(242, 210, 129, .86);
  outline-offset: 1px;
  filter:
    brightness(1.2)
    drop-shadow(0 3px 3px rgba(0, 0, 0, .9))
    drop-shadow(0 0 7px rgba(235, 200, 115, .54));
}

.map-room-glass-treatment {
  z-index: 6;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: none;
}

.map-room-glass-treatment::before {
  position: absolute;
  top: 8.3%;
  left: 20.3%;
  width: 59.4%;
  height: 73.2%;
  content: "";
  background:
    linear-gradient(112deg, transparent 5%, rgba(208, 244, 250, .035) 18%, transparent 32%),
    linear-gradient(180deg, rgba(120, 222, 235, .025), transparent 36%);
}

.map-room-copy-scrim {
  position: absolute;
  display: block;
  border: 1px solid rgba(140, 180, 190, .12);
  background:
    linear-gradient(180deg, rgba(17, 31, 38, .94), rgba(5, 18, 26, .92));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .045),
    0 2px 8px rgba(0, 0, 0, .42);
}

.map-room-copy-scrim-top {
  top: 2.15%;
  left: 41%;
  display: flex;
  width: 18%;
  height: 5.35%;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
}

.map-room-copy-scrim-top b {
  color: rgba(208, 230, 234, .76);
  font: 700 clamp(6px, .52vw, 10px)/1 "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .12em;
  text-shadow: 0 1px 2px #000;
  text-transform: uppercase;
  white-space: nowrap;
}

.map-room-copy-scrim-instruction {
  top: 75.1%;
  left: 30.6%;
  width: 38.8%;
  height: 4.85%;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(10, 35, 52, .9), rgba(6, 22, 34, .96));
}

.map-room-copy-scrim-lower {
  top: 81.7%;
  left: 30.6%;
  width: 38.8%;
  height: 4.65%;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(15, 29, 34, .95), rgba(8, 20, 27, .97));
}

.map-room-foreground-preservation {
  z-index: 7;
  inset: 0;
  clip-path: none;
  background: none;
}

.map-room-foreground-object {
  position: absolute;
  inset: 0;
  display: block;
  background: url("./assets/map-room/Map_Room_Decorated_Current.jpg") 0 0 / 100% 100% no-repeat;
}

.map-room-foreground-van {
  clip-path: polygon(32.3% 83.4%, 33.8% 80.1%, 40.7% 79.8%, 42.8% 83.5%, 42.6% 92.3%, 40.3% 94.8%, 33.2% 93.9%, 32.2% 89.5%);
}

.map-room-foreground-bear {
  clip-path: polygon(41.5% 82%, 43.3% 80.6%, 48.7% 80.2%, 51.2% 80.4%, 54.7% 80.5%, 55.4% 82.9%, 53.5% 86.1%, 51.8% 87.1%, 51.4% 95.7%, 49.2% 97.5%, 47% 95.8%, 46.7% 90.6%, 44.6% 91%, 43.8% 96.4%, 41.9% 96%, 41.3% 89.4%);
}

.map-room-foreground-knight {
  clip-path: polygon(74.4% 69%, 77.2% 72.1%, 78.4% 80.8%, 77.3% 86%, 73.5% 86%, 73% 78.1%, 73.4% 72.2%);
}

.map-room-command-rail {
  position: absolute;
  z-index: 9;
  top: 38.5%;
  left: 3.45%;
  display: grid;
  width: 13.45%;
  min-height: 38%;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  align-items: stretch;
  gap: clamp(2px, .28vw, 6px);
  padding: .5% .45%;
  border: 1px solid rgba(169, 194, 202, .22);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(24, 39, 46, .96), rgba(6, 17, 24, .96));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .07),
    0 3px 10px rgba(0, 0, 0, .52);
  color: rgba(214, 232, 235, .8);
}

.map-room-control {
  width: 100%;
  min-width: 0;
  min-height: clamp(16px, 1.65vw, 26px);
  padding: clamp(3px, .32vw, 6px) clamp(4px, .48vw, 9px);
  border: 1px solid rgba(181, 202, 211, .3);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(39, 57, 64, .92), rgba(10, 22, 29, .96));
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 2px 4px rgba(0, 0, 0, .38);
  color: rgba(225, 237, 240, .86);
  cursor: pointer;
  font: 800 clamp(7px, .56vw, 11px)/1 "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .065em;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.map-room-control:hover,
.map-room-control:focus-visible {
  border-color: rgba(228, 211, 162, .76);
  color: #fff3d1;
  filter: brightness(1.16);
  outline: none;
}

.map-room-control:disabled {
  cursor: default;
  opacity: .48;
}

.map-room-deploy {
  border-color: rgba(226, 191, 105, .58);
  background: linear-gradient(180deg, rgba(76, 61, 33, .94), rgba(28, 23, 16, .97));
  color: rgba(250, 225, 160, .96);
}

.map-room-mode-status,
.map-room-selected-readout {
  display: grid;
  min-width: 0;
  gap: 1px;
  font-family: "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  line-height: 1.02;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 1px 2px #000;
}

.map-room-mode-status span,
.map-room-selected-readout span {
  color: rgba(231, 196, 109, .88);
  font-size: clamp(6px, .48vw, 9px);
  font-weight: 800;
  letter-spacing: .12em;
}

.map-room-mode-status strong,
.map-room-selected-readout strong {
  overflow: hidden;
  color: rgba(211, 230, 234, .78);
  font-size: clamp(6px, .51vw, 10px);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-room-mode-status strong[data-state="blocked"] { color: rgba(255, 143, 121, .92); }
.map-room-mode-status strong[data-state="moving"] { color: rgba(157, 225, 236, .92); }

.map-room-board-size {
  text-align: center;
  color: rgba(156, 219, 230, .9);
  font: 800 clamp(7px, .56vw, 11px)/1 "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .08em;
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
}

.map-room-live-instruction {
  position: absolute;
  z-index: 9;
  top: 76.05%;
  left: 31.2%;
  display: flex;
  width: 37.6%;
  height: 3.8%;
  align-items: center;
  justify-content: center;
  gap: .55em;
  color: rgba(216, 237, 241, .8);
  font: 700 clamp(7px, .63vw, 12px)/1 "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .075em;
  text-align: center;
  text-shadow: 0 1px 3px #000;
  text-transform: uppercase;
  pointer-events: none;
  white-space: nowrap;
}

.map-room-live-instruction i {
  color: rgba(229, 193, 106, .78);
  font-style: normal;
}

@media (max-width: 900px) {
  .map-room-command-rail {
    gap: 2px;
    padding: 2px;
  }

  .map-room-control {
    min-height: 16px;
    padding-right: 4px;
    padding-left: 4px;
    letter-spacing: .025em;
  }

  .map-room-mode-status span { display: none; }
}

@media (max-width: 620px) {
  .map-room-mode-status strong { display: none; }
  .map-room-command-rail { grid-template-columns: minmax(0, 1fr); }
  .map-room-selected-readout { grid-column: auto; }
  .map-room-board-size { display: none; }
}

/* Step 6 Map Room: the approved room/panel reference is the immutable shell.
   All labels and hit targets remain live layers aligned to its perspective. */
.map-room-decorated-background {
  content: url("./assets/step6/Ghost_Patrol_Map_Room_Command_Panel_APPROVED.jpg");
}

.map-room-logo-wide.map-room-logo-b {
  top: .65%;
  left: 20.5%;
  display: block;
  width: 59%;
  height: 6.7%;
  padding: .15% .8%;
  border: 1px solid rgba(118, 78, 37, .34);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(39, 20, 9, .24), rgba(152, 100, 38, .08));
  box-shadow:
    inset 0 1px rgba(255, 220, 143, .14),
    inset 0 -2px rgba(16, 7, 3, .45),
    0 2px 3px rgba(4, 1, 0, .62);
  filter: sepia(.1) saturate(.85) brightness(.82) drop-shadow(0 1px 1px rgba(255, 205, 118, .16));
  opacity: .94;
}

.map-room-playfield {
  top: 8.25%;
  left: 20.45%;
  width: 59.45%;
}

.map-room-island-art-layer { z-index: 2; }

.map-room-island {
  position: absolute;
  display: block;
  object-fit: fill;
  filter:
    saturate(.76)
    brightness(.95)
    drop-shadow(0 0 5px rgba(86, 230, 233, .34))
    drop-shadow(0 5px 5px rgba(0, 0, 0, .64));
}

.map-room-glass-treatment {
  inset: 8.2% 20.1% 19.5%;
  background:
    linear-gradient(110deg, transparent 10%, rgba(220, 244, 249, .075) 31%, transparent 43%),
    linear-gradient(180deg, rgba(193, 236, 247, .045), transparent 22%, rgba(3, 17, 31, .08));
  pointer-events: none;
}

.map-room-foreground-object {
  background-image: url("./assets/step6/Ghost_Patrol_Map_Room_Command_Panel_APPROVED.jpg");
}

.map-room-command-panel {
  position: absolute;
  z-index: 10;
  top: 4.2%;
  left: 2.1%;
  width: 15.4%;
  height: 63.5%;
  clip-path: polygon(2% 0, 98% 6%, 100% 91%, 0 100%);
  transform: perspective(900px) rotateY(3deg) rotateZ(.2deg);
  transform-origin: 0 50%;
  color: #d5eef4;
  font-family: var(--gps-font-command);
}

.map-room-panel-display {
  position: absolute;
  left: 10%;
  display: grid;
  width: 78%;
  height: 16%;
  align-content: center;
  gap: 2px;
  padding: 4% 5%;
  overflow: hidden;
  border: 1px solid rgba(127, 207, 229, .24);
  border-radius: 3px;
  background: linear-gradient(160deg, rgba(8, 49, 74, .76), rgba(2, 24, 42, .84));
  box-shadow: inset 0 0 12px rgba(55, 170, 207, .18);
  text-align: left;
  text-shadow: 0 1px 2px #00101a;
}

.map-room-panel-status { top: 7%; }
.map-room-panel-selected { top: 27%; }

.map-room-panel-display span {
  color: rgba(117, 207, 227, .84);
  font-size: clamp(5px, .42vw, 8px);
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.map-room-panel-display strong {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(224, 244, 247, .94);
  font-size: clamp(6px, .5vw, 10px);
  font-weight: 700;
  line-height: 1.15;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.map-room-panel-display strong[data-state="blocked"] { color: #ffb19f; }
.map-room-panel-display strong[data-state="moving"] { color: #a6eef5; }

.map-room-panel-buttons {
  position: absolute;
  top: 47%;
  left: 8%;
  display: grid;
  width: 82%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4%;
}

.map-room-panel-control,
.map-room-panel-mute,
.map-room-panel-deploy {
  min-width: 0;
  padding: 0;
  border: 1px solid rgba(176, 190, 191, .44);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(50, 65, 69, .88), rgba(11, 25, 31, .92));
  box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 2px 4px rgba(0, 0, 0, .46);
  color: rgba(232, 240, 238, .92);
  cursor: pointer;
  font: 800 clamp(4px, .35vw, 7px)/1 var(--gps-font-command);
  letter-spacing: .035em;
  text-transform: uppercase;
}

.map-room-panel-control { aspect-ratio: 1; }

.map-room-panel-control:hover,
.map-room-panel-control:focus-visible,
.map-room-panel-mute:hover,
.map-room-panel-mute:focus-visible,
.map-room-panel-deploy:hover,
.map-room-panel-deploy:focus-visible {
  border-color: rgba(244, 215, 143, .88);
  color: #fff4d4;
  filter: brightness(1.16);
  outline: 2px solid rgba(126, 217, 235, .72);
  outline-offset: 1px;
}

.map-room-panel-deploy {
  position: absolute;
  top: 59%;
  left: 19%;
  display: grid;
  width: 38%;
  aspect-ratio: 1;
  place-content: center;
  border-color: rgba(239, 211, 143, .72);
  background:
    radial-gradient(circle, rgba(255, 238, 170, .54), rgba(109, 82, 39, .8) 52%, rgba(28, 27, 24, .94) 72%);
  box-shadow:
    inset 0 0 0 3px rgba(235, 218, 173, .17),
    inset 0 0 16px rgba(255, 228, 151, .45),
    0 0 12px rgba(229, 192, 108, .4);
  font-size: clamp(6px, .52vw, 10px);
  line-height: 1.1;
}

.map-room-panel-deploy strong { font-size: 1.1em; }

.map-room-panel-mute {
  position: absolute;
  top: 88%;
  left: 17%;
  width: 37%;
  height: 8%;
}

.map-room-panel-mute[aria-pressed="true"] {
  border-color: rgba(241, 145, 123, .72);
  color: #ffc1b3;
}

.map-room-panel-volume {
  position: absolute;
  top: 59%;
  left: 64%;
  display: grid;
  width: 22%;
  height: 36%;
  justify-items: center;
  gap: 2%;
  color: rgba(176, 216, 222, .82);
  font-size: clamp(4px, .31vw, 6px);
  font-weight: 800;
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
}

.map-room-panel-volume input {
  width: clamp(52px, 6.7vw, 108px);
  margin: 0;
  accent-color: #e6c06e;
  transform: rotate(-90deg);
  transform-origin: center;
}

.map-room-board-size {
  position: absolute;
  z-index: 9;
  top: 74.1%;
  right: 21%;
}

.map-room-live-instruction {
  top: 76.4%;
  left: 30%;
  width: 40%;
  height: 3.4%;
  padding-inline: 1%;
  background: linear-gradient(90deg, transparent, rgba(9, 31, 45, .82) 12%, rgba(9, 31, 45, .82) 88%, transparent);
}

@media (max-width: 900px) {
  .map-room-command-panel { left: 1.9%; width: 15.8%; }
  .map-room-panel-buttons { gap: 2%; }
  .map-room-panel-display strong { font-size: clamp(5px, .48vw, 8px); }
}

@media (prefers-reduced-motion: reduce) {
  .map-room-formation,
  .map-room-panel-control,
  .map-room-panel-mute,
  .map-room-panel-deploy { transition: none !important; }
}

/* Map Room review composition: coordinates are normalized from the approved
   1920 by 1080 reference while the 28 by 16 board stays a live square-cell overlay. */
.map-room-stage {
  --map-room-shell-aspect: 16 / 9;
  --map-room-board-left: 26.103%;
  --map-room-board-top: 18.617725%;
  --map-room-board-width: 59.895833%;
  --map-room-board-height: 60.846565%;
  width: min(100vw, calc(100svh * 16 / 9));
  aspect-ratio: var(--map-room-shell-aspect);
  overflow: clip;
}

.map-room-decorated-background {
  content: url("./assets/map-room/Ghost_Patrol_Strike_Map_Room_Environmental_Shell_APPROVED.jpg");
}

.map-room-logo-wide.map-room-logo-b,
.map-room-foreground-preservation {
  display: none;
}

.map-room-playfield {
  top: var(--map-room-board-top);
  left: var(--map-room-board-left);
  width: var(--map-room-board-width);
  height: var(--map-room-board-height);
  aspect-ratio: 28 / 16;
}

.map-room-glass-treatment {
  top: var(--map-room-board-top);
  left: var(--map-room-board-left);
  width: var(--map-room-board-width);
  height: var(--map-room-board-height);
  background:
    linear-gradient(108deg, transparent 12%, rgba(216, 244, 250, .06) 31%, transparent 45%),
    linear-gradient(180deg, rgba(177, 226, 239, .035), transparent 24%, rgba(1, 17, 31, .08));
  pointer-events: none;
}

.map-room-knight-foreground {
  position: absolute;
  z-index: 7;
  inset: 0;
  background: url("./assets/map-room/Ghost_Patrol_Strike_Map_Room_Environmental_Shell_APPROVED.jpg") 0 0 / 100% 100% no-repeat;
  clip-path: polygon(
    82.7% 76.8%,
    83.8% 78.1%,
    84% 80.2%,
    83.2% 82%,
    83.5% 84.3%,
    84.2% 87.1%,
    84.4% 89.7%,
    80.1% 89.7%,
    80.1% 86.4%,
    80.6% 83.1%,
    80.8% 80.5%,
    81.7% 78.3%
  );
  pointer-events: none;
}

.map-room-command-panel {
  position: absolute;
  z-index: 10;
  inset: 0;
  display: block;
  width: auto;
  height: auto;
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  clip-path: none;
  color: #d5eef4;
  font-family: var(--gps-font-command);
  pointer-events: none;
  transform: none;
}

.map-room-panel-control,
.map-room-panel-deploy,
.map-room-panel-audio,
.map-room-panel-achievements,
.map-room-panel-cgh {
  pointer-events: auto;
}

.map-room-panel-display {
  position: absolute;
  top: 79.8%;
  display: grid;
  width: 19%;
  height: 3.8%;
  min-width: 0;
  align-content: center;
  gap: 2px;
  padding: 0 .55%;
  overflow: hidden;
  border: 1px solid rgba(145, 205, 216, .22);
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(2, 20, 34, .82), rgba(6, 45, 68, .7), rgba(2, 20, 34, .82));
  box-shadow: inset 0 0 10px rgba(55, 170, 207, .12), 0 2px 5px rgba(0, 0, 0, .42);
  text-align: left;
  text-shadow: 0 1px 2px #00101a;
}

.map-room-panel-status {
  left: 27.083333%;
}

.map-room-panel-selected {
  left: 47.4%;
}

.map-room-panel-display span {
  overflow: hidden;
  color: rgba(126, 210, 228, .86);
  font-size: clamp(6px, .44vw, 8px);
  font-weight: 850;
  letter-spacing: .1em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.map-room-panel-display strong {
  display: block;
  overflow: hidden;
  color: rgba(229, 246, 248, .96);
  font-size: clamp(7px, .56vw, 10px);
  font-weight: 700;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: unset;
}

.map-room-panel-display strong[data-state="blocked"] { color: #ffb19f; }
.map-room-panel-display strong[data-state="moving"] { color: #a6eef5; }

.map-room-panel-buttons {
  display: contents;
}

.map-room-panel-control,
.map-room-panel-mute,
.map-room-panel-deploy {
  position: absolute;
  min-width: 0;
  min-height: 0;
  padding: 0 .35%;
  border: clamp(1px, .16vw, 3px) solid #a98555;
  border-radius: clamp(4px, .55vw, 11px);
  background:
    linear-gradient(180deg, rgba(23, 49, 86, .98), rgba(5, 19, 45, .98)),
    radial-gradient(circle at 50% 0, rgba(72, 126, 182, .48), transparent 68%);
  box-shadow:
    inset 0 0 0 1px rgba(246, 218, 161, .4),
    inset 0 -5px 9px rgba(0, 4, 17, .72),
    0 2px 0 #3a281b,
    0 4px 8px rgba(0, 0, 0, .58);
  color: #d7b780;
  cursor: pointer;
  font: 900 clamp(8px, 1.03vw, 20px)/.9 Georgia, "Times New Roman", serif;
  letter-spacing: .025em;
  text-shadow: 0 2px 2px #071020, 0 0 1px #ffe7b0;
  text-transform: uppercase;
}

.map-room-panel-control {
  aspect-ratio: auto;
}

#map-room-back { top: .092593%; left: 30.104167%; width: 7.8125%; height: 3.611111%; }
#map-room-reset { top: 4.166667%; left: 30.104167%; width: 7.760417%; height: 3.703704%; }
#map-room-auto-arrange { top: .092593%; left: 39.0625%; width: 7.8125%; height: 3.611111%; font-size: clamp(7px, .78vw, 15px); }
#map-room-rotate { top: 4.62963%; left: 39.0625%; width: 7.8125%; height: 3.240741%; }

.map-room-panel-control:hover,
.map-room-panel-control:focus-visible,
.map-room-panel-mute:hover,
.map-room-panel-mute:focus-visible,
.map-room-panel-deploy:hover,
.map-room-panel-deploy:focus-visible {
  border-color: rgba(244, 215, 143, .88);
  color: #fff4d4;
  filter: brightness(1.16);
  outline: 2px solid rgba(126, 217, 235, .72);
  outline-offset: 1px;
}

.map-room-panel-deploy {
  display: flex;
  top: .925926%;
  left: 48.958333%;
  width: 8.854167%;
  height: 6.481481%;
  aspect-ratio: auto;
  align-items: center;
  justify-content: center;
  gap: .25em;
  border-color: #ba9762;
  background:
    linear-gradient(180deg, rgba(38, 73, 124, .98), rgba(5, 24, 58, .99)),
    radial-gradient(circle at 50% 0, rgba(98, 153, 213, .5), transparent 70%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 226, 169, .32),
    inset 0 -8px 12px rgba(0, 4, 20, .68),
    0 3px 0 #3a281b,
    0 5px 12px rgba(0, 0, 0, .64);
  color: #e5c58c;
  font-size: clamp(11px, 1.42vw, 27px);
}

.map-room-panel-deploy strong {
  display: none;
}

.map-room-panel-audio {
  position: absolute;
  top: .092593%;
  left: 60.208333%;
  display: block;
  width: 8.541667%;
  height: 7.777778%;
  min-width: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.map-room-panel-mute {
  top: 1%;
  left: 2%;
  width: 96%;
  height: 40%;
  padding: 0;
  border: 0;
  border-radius: clamp(4px, .35vw, 7px);
  background: transparent;
  box-shadow: none;
  color: transparent;
  font-size: 0;
  text-shadow: none;
}

.map-room-panel-mute:hover {
  border: 0;
  background: transparent;
  filter: none;
  outline: 0;
}

.map-room-panel-mute:focus-visible {
  border: 0;
  background: rgba(9, 29, 67, .16);
  filter: none;
  outline: 2px solid rgba(230, 199, 139, .88);
  outline-offset: -2px;
}

.map-room-panel-mute::before,
.map-room-panel-mute::after {
  position: absolute;
  z-index: 2;
  opacity: 0;
  content: "";
  pointer-events: none;
}

.map-room-panel-mute::before {
  top: 20%;
  left: 41%;
  width: 18%;
  height: 60%;
  background: #e6c68c;
  clip-path: polygon(0 34%, 30% 34%, 68% 0, 68% 100%, 30% 66%, 0 66%);
  filter: drop-shadow(0 1px 2px #000);
}

.map-room-panel-mute::after {
  top: 47%;
  left: 35%;
  width: 30%;
  height: clamp(2px, .18vw, 4px);
  border-radius: 999px;
  background: #e95e4d;
  box-shadow: 0 1px 2px #000, 0 0 5px rgba(233, 94, 77, .52);
  transform: rotate(-40deg);
}

.map-room-panel-mute[aria-pressed="true"]::before,
.map-room-panel-mute[aria-pressed="true"]::after {
  opacity: 1;
}

.map-room-panel-volume {
  position: absolute;
  top: 74%;
  left: -1px;
  display: block;
  width: calc(100% + 2px);
  height: 15%;
}

.map-room-panel-volume input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
  opacity: 1;
  transform: none;
}

.map-room-panel-volume input::-webkit-slider-runnable-track {
  height: 100%;
  border: 1px solid rgba(197, 155, 90, .82);
  border-radius: 999px;
  background: linear-gradient(180deg, #12345f, #061a3d);
  box-shadow: inset 0 1px 4px #000;
}

.map-room-panel-volume input::-webkit-slider-thumb {
  width: clamp(6px, .52vw, 10px);
  height: 100%;
  margin: 0;
  appearance: none;
  border: 1px solid rgba(255, 225, 164, .78);
  border-radius: 2px;
  background: linear-gradient(90deg, #74512a, #d3b47b 48%, #65451f);
  box-shadow: 0 1px 3px #000;
}

.map-room-panel-volume input::-moz-range-track {
  height: 100%;
  border: 1px solid rgba(197, 155, 90, .82);
  border-radius: 999px;
  background: linear-gradient(180deg, #12345f, #061a3d);
  box-shadow: inset 0 1px 4px #000;
}

.map-room-panel-volume input::-moz-range-thumb {
  width: clamp(6px, .52vw, 10px);
  height: 100%;
  border: 1px solid rgba(255, 225, 164, .78);
  border-radius: 2px;
  background: linear-gradient(90deg, #74512a, #d3b47b 48%, #65451f);
  box-shadow: 0 1px 3px #000;
}

/* Restore the original illustrated Map Room controls from the supplied source
   sheet while keeping the existing semantic buttons and audio inputs live. */
.map-room-panel-control,
.map-room-panel-deploy {
  overflow: hidden;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent;
  font-size: 0;
  text-shadow: none;
  isolation: isolate;
}

.map-room-panel-control::before,
.map-room-panel-deploy::before,
.map-room-panel-audio::before {
  position: absolute;
  z-index: 0;
  background: url("./assets/controls/Ghost_Patrol_Map_Room_Control_Sprite_APPROVED.png") 0 0 / 100% 100% no-repeat;
  content: "";
  pointer-events: none;
}

#map-room-back::before {
  top: -221.875%;
  left: -13.67%;
  width: 617.27%;
  height: 433.59%;
}

#map-room-reset::before {
  top: -221.875%;
  left: -119.29%;
  width: 612.5%;
  height: 433.59%;
}

#map-room-auto-arrange::before {
  top: -77.24%;
  left: -444.9%;
  width: 700%;
  height: 382.76%;
}

#map-room-rotate::before {
  top: -77.24%;
  left: -441.69%;
  width: 558.63%;
  height: 382.76%;
}

.map-room-panel-deploy::before {
  top: -68.12%;
  left: -152.88%;
  width: 412.26%;
  height: 201.09%;
}

.map-room-panel-deploy > * { opacity: 0; }

.map-room-panel-audio {
  top: .092593%;
  left: 58.65%;
  width: 10.9%;
  height: 8%;
  overflow: hidden;
  isolation: isolate;
}

.map-room-panel-audio::before {
  top: 36%;
  left: 14%;
  width: 86%;
  height: 64%;
  background: url("./assets/controls/Ghost_Patrol_Master_Volume_Panel_APPROVED.png") center / 100% 100% no-repeat;
}

.map-room-panel-mute,
.map-room-panel-volume { z-index: 2; }

.map-room-panel-mute {
  top: 0;
  left: 14%;
  width: 51%;
  height: 40%;
  overflow: hidden;
  background-color: transparent !important;
  background-image: url("./assets/controls/Ghost_Patrol_Mute_Control_APPROVED.png") !important;
  background-position: center 50% !important;
  background-size: 100% auto !important;
  background-repeat: no-repeat !important;
}

.map-room-panel-mute::before { display: none; }

.map-room-panel-mute::after {
  top: 47%;
  left: 68%;
  width: 24%;
}

.map-room-panel-volume {
  top: 58%;
  left: 20%;
  width: 76%;
  height: 18%;
}

.map-room-panel-volume input::-webkit-slider-runnable-track,
.map-room-panel-volume input::-moz-range-track {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.map-room-panel-control:hover,
.map-room-panel-deploy:hover {
  border: 0;
  filter: brightness(1.12);
  outline: 0;
}

.map-room-panel-control:focus-visible,
.map-room-panel-deploy:focus-visible {
  border: 0;
  filter: brightness(1.1);
  outline: 2px solid rgba(255, 232, 173, .92);
  outline-offset: -2px;
}

.map-room-panel-achievements {
  position: absolute;
  top: 1.203704%;
  left: 70.15625%;
  width: 9.0625%;
  height: 3.703704%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.map-room-panel-achievements img,
.map-room-panel-cgh img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.map-room-panel-cgh {
  position: absolute;
  top: .462963%;
  left: 79.479167%;
  display: block;
  width: 10.104167%;
  height: 7.407407%;
  transform: translateY(-1.5%);
}

.map-room-panel-achievements:hover,
.map-room-panel-cgh:hover { filter: brightness(1.12); }

.map-room-panel-achievements:focus-visible,
.map-room-panel-cgh:focus-visible { outline: 2px solid #fff1b5; outline-offset: 2px; }

.map-room-board-size {
  position: absolute;
  z-index: 9;
  top: 79.8%;
  right: 13.020833%;
  color: rgba(196, 230, 236, .76);
  font-size: clamp(7px, .48vw, 9px);
}

.map-room-live-instruction {
  top: 85%;
  left: 27.083333%;
  width: 59.895833%;
  height: 3.6%;
  padding: 0;
  background: none;
  color: rgba(222, 240, 242, .9);
  font-size: clamp(8px, .63vw, 11px);
  letter-spacing: .075em;
  text-shadow: 0 1px 3px #00131d, 0 0 7px rgba(0, 13, 22, .92);
  white-space: nowrap;
}

/* Keep live placement diagnostics available to assistive technology without
   placing persistent chrome over the display-to-shelf boundary. */
.map-room-panel-display,
.map-room-live-instruction {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

@media (max-height: 800px) {
  .map-room-panel-display span { display: none; }
}

/* Bridge correction: one physical console around the approved homepage cards. */
.gps-bridge-screen::before,
.gps-bridge-screen::after { display: none; }

.gps-bridge-structure > img {
  object-position: center;
  filter: saturate(.94) contrast(1.04) brightness(.96);
}

.gps-bridge-structure::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 9, 13, .28), transparent 11% 89%, rgba(2, 9, 13, .3)),
    linear-gradient(180deg, rgba(3, 11, 16, .22), transparent 15% 58%, rgba(2, 10, 14, .28) 72%, rgba(1, 7, 10, .76));
}

.gps-bridge-reflection {
  z-index: 3;
  inset: 7% 0 31%;
  background:
    linear-gradient(111deg, transparent 10%, rgba(255, 255, 255, .11) 25%, transparent 34% 70%, rgba(255, 255, 255, .08) 82%, transparent 91%),
    linear-gradient(180deg, rgba(224, 245, 251, .08), transparent 34% 88%, rgba(19, 51, 61, .1));
  opacity: .42;
  mix-blend-mode: screen;
}

.gps-back-button,
.gps-bridge-heading,
.gps-mode-heading { display: none; }

.gps-bridge-console {
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(220px, 330px) minmax(300px, 1fr) minmax(220px, 330px);
  align-items: stretch;
  height: clamp(210px, 27vh, 286px);
  padding: clamp(22px, 2.6vh, 30px) clamp(22px, 3vw, 56px) 15px;
  border: 0;
  background: none;
  box-shadow: none;
  isolation: isolate;
}

.gps-bridge-console::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(63, 78, 79, .99), rgba(16, 29, 33, .99) 11%, rgba(5, 16, 21, 1) 45%),
    repeating-linear-gradient(90deg, transparent 0 78px, rgba(255, 255, 255, .018) 79px 80px);
  box-shadow:
    0 -22px 42px rgba(1, 7, 10, .48),
    inset 0 2px rgba(210, 226, 222, .2),
    inset 0 10px 18px rgba(255, 255, 255, .035);
  clip-path: polygon(0 12%, 4.5% 0, 95.5% 0, 100% 12%, 100% 100%, 0 100%);
}

.gps-bridge-console::after {
  position: absolute;
  z-index: 1;
  top: 8px;
  right: 5%;
  left: 5%;
  height: 7px;
  border-top: 1px solid rgba(217, 229, 221, .36);
  border-bottom: 1px solid rgba(0, 0, 0, .74);
  background: linear-gradient(180deg, #526165, #18272c);
  box-shadow: 0 4px 8px rgba(0, 0, 0, .45);
  content: "";
  pointer-events: none;
}

.gps-console-rail {
  position: absolute;
  z-index: 2;
  top: 7px;
  left: 50%;
  width: clamp(260px, 31vw, 520px);
  height: 10px;
  border: 1px solid rgba(220, 190, 119, .34);
  background: linear-gradient(180deg, #6b624c, #2a2e2d 50%, #101a1d 51%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .58);
  transform: translateX(-50%);
}

.gps-radar-console,
.gps-tactical-console,
.gps-stealth-console {
  position: relative;
  z-index: 4;
  min-width: 0;
  padding: 0 clamp(6px, 1.1vw, 17px);
}

.gps-stealth-console {
  display: grid;
  place-items: end center;
  padding-bottom: 3px;
  border: 0;
}

.gps-console-label {
  margin-bottom: 7px;
  color: #9aaca9;
  text-shadow: 0 1px 2px #000;
}

.gps-radar-scope,
.gps-tactical-map {
  height: calc(100% - 21px);
  min-height: 0;
  border: 5px solid #1a2c31;
  border-radius: 3px;
  box-shadow:
    inset 0 0 30px rgba(44, 200, 220, .17),
    inset 0 0 0 1px rgba(128, 198, 201, .12),
    0 0 0 1px #01090d,
    0 9px 16px rgba(0, 0, 0, .44);
}

.gps-stealth-control {
  z-index: 8;
  width: clamp(196px, 17vw, 244px);
  height: clamp(116px, 14vh, 136px);
  perspective: 700px;
}

.gps-stealth-control::before {
  position: absolute;
  z-index: -1;
  inset: -8px;
  border: 2px solid #111a1c;
  border-radius: 7px;
  background: linear-gradient(145deg, #667174, #172327 38%, #080f12 78%);
  box-shadow: inset 0 1px rgba(255, 255, 255, .24), 0 8px 16px rgba(0, 0, 0, .54);
  content: "";
}

.gps-stealth-action,
.gps-stealth-lid { border-radius: 4px; }

.gps-stealth-action {
  border: 1px solid #202c2f;
  background:
    linear-gradient(145deg, rgba(93, 102, 102, .96), rgba(25, 36, 39, .98) 34%, rgba(8, 16, 19, .99) 76%),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(255, 255, 255, .025) 19px 20px);
  box-shadow: inset 0 0 0 5px rgba(4, 10, 12, .48), inset 0 1px rgba(255, 255, 255, .28), 0 7px 13px rgba(0, 0, 0, .42);
  text-shadow: 0 1px 2px #220301;
}

.gps-stealth-action::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(92px, 47%);
  aspect-ratio: 1;
  border: 6px solid #6e6757;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #e85e4e, #a52218 45%, #4e0b08 74%);
  box-shadow:
    inset 0 2px 4px rgba(255, 189, 169, .54),
    inset 0 -8px 13px rgba(45, 2, 1, .72),
    0 0 0 2px #111719,
    0 7px 9px rgba(0, 0, 0, .58);
  content: "";
  transform: translate(-50%, -50%);
}

.gps-stealth-action::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(74px, 38%);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 219, 192, .28);
  border-radius: 50%;
  content: "";
  transform: translate(-50%, -50%);
}

.gps-stealth-action strong,
.gps-stealth-action span { position: relative; z-index: 2; color: #ffe9d2; }
.gps-stealth-action strong { font-size: .51rem; }
.gps-stealth-action span { font-size: .72rem; }

.gps-stealth-action:focus-visible,
.gps-stealth-lid:focus-visible {
  outline: 3px solid #fff1b5;
  outline-offset: 5px;
}

.gps-stealth-lid {
  transform-style: preserve-3d;
  border-color: #e05c4d;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, .24), transparent 22%),
    repeating-linear-gradient(90deg, transparent 0 17px, rgba(73, 7, 5, .24) 18px 21px),
    linear-gradient(180deg, #c63d31, #6d110d);
  box-shadow:
    inset 0 0 0 5px rgba(77, 8, 5, .4),
    inset 0 2px rgba(255, 190, 176, .38),
    0 9px 20px rgba(0, 0, 0, .5);
}

.gps-bridge-screen.is-mode-revealed .gps-stealth-lid {
  transform: rotateX(118deg) translateY(-6px);
  pointer-events: none;
}

.gps-mode-reveal {
  position: absolute;
  z-index: 6;
  right: auto;
  bottom: clamp(148px, 17vh, 180px);
  left: 50%;
  width: clamp(760px, calc(100vw - 640px), 960px);
  max-height: none;
  padding: 17px 20px 15px;
  overflow: visible;
  border: 1px solid rgba(168, 191, 186, .34);
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(25, 41, 43, .995), rgba(6, 20, 26, .995) 12%, rgba(2, 12, 17, .998)),
    repeating-linear-gradient(90deg, transparent 0 58px, rgba(255, 255, 255, .016) 59px 60px);
  box-shadow:
    0 20px 35px rgba(0, 0, 0, .48),
    inset 0 1px rgba(255, 255, 255, .09),
    0 0 0 5px rgba(5, 14, 17, .48);
  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%, 0 18px);
  transform: translateX(-50%);
  animation: gps-console-drawer-open 470ms cubic-bezier(.18, .78, .2, 1) both;
}

.gps-mode-reveal::before {
  position: absolute;
  top: 7px;
  right: 24px;
  left: 24px;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(221, 194, 127, .5) 18% 82%, transparent);
  content: "";
}

.gps-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 0;
}

/* Exact card composition from Ghost_Patrol_Homepage_v0.6.25. */
.gps-mode-grid .gps-mode-card,
.gps-mode-grid .gps-mode-card.is-selected,
.gps-mode-grid .gps-mode-card.is-prev,
.gps-mode-grid .gps-mode-card.is-next,
.gps-mode-grid .gps-mode-card.is-far {
  position: relative;
  inset: auto;
  left: auto;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  min-width: 0;
  aspect-ratio: 1.52 / 1;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(159,187,187,.23);
  border-radius: 7px;
  background: #07131b;
  box-shadow: 0 17px 42px rgba(0,0,0,.34);
  opacity: 1;
  transform: none;
  clip-path: none;
  pointer-events: auto;
  cursor: pointer;
  text-align: left;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.gps-mode-grid .gps-mode-card::after {
  position: absolute;
  z-index: 5;
  inset: 7px;
  border: 1px solid transparent;
  border-radius: 3px;
  content: "";
  pointer-events: none;
  transition: border-color .22s ease;
}

.gps-mode-grid .gps-mode-card:hover,
.gps-mode-grid .gps-mode-card.is-selected {
  z-index: 2;
  border-color: rgba(225,193,121,.84) !important;
  box-shadow: 0 22px 54px rgba(0,0,0,.58), 0 0 24px rgba(68,170,168,.12) !important;
  transform: translateY(-4px);
}

.gps-mode-grid .gps-mode-card:focus-visible {
  outline: 3px solid #f7df9e;
  outline-offset: 3px;
}

.gps-mode-grid .gps-mode-card:hover::after,
.gps-mode-grid .gps-mode-card.is-selected::after { border-color: rgba(225,193,121,.28); }

.gps-card-art,
.gps-card-scrim {
  position: absolute;
  inset: 0;
}

.gps-card-art {
  overflow: hidden;
  background: linear-gradient(145deg, #123d4d, #06121b 72%);
}

.gps-card-art > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .8;
  transition: transform .55s ease, filter .3s ease;
}

.gps-mode-card:hover .gps-card-art > img { transform: scale(1.04); }

.gps-card-scrim {
  z-index: 1;
  background: linear-gradient(180deg, rgba(1,7,10,.06) 0 27%, rgba(2,9,13,.42) 48%, rgba(2,8,12,.97) 100%), linear-gradient(90deg, rgba(2,8,12,.28), transparent 62%);
}

.gps-card-number {
  position: absolute;
  z-index: 3;
  top: 16px;
  left: 17px;
  color: rgba(222,203,162,.78);
  font: 800 .58rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .17em;
}

.gps-card-number::before {
  color: rgba(148,174,177,.64);
  content: "OP-";
}

.gps-card-anchor {
  position: absolute;
  z-index: 3;
  top: 13px;
  right: 14px;
  left: auto;
  padding: 5px 7px;
  border: 1px solid rgba(227,194,119,.38);
  border-radius: 2px;
  background: rgba(4,13,17,.56);
  color: #ddc98f;
  font-size: .48rem;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.gps-card-copy {
  position: absolute;
  z-index: 4;
  right: 18px;
  bottom: 15px;
  left: 18px;
  display: grid;
}

.gps-card-copy small {
  color: #7ec9c5;
  font-size: .51rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.gps-card-copy strong {
  margin-top: 4px;
  color: #f2e8d4;
  font: 500 clamp(1.35rem, 2vw, 1.85rem)/1 Georgia, serif;
  letter-spacing: -.01em;
  text-shadow: 0 3px 12px #000;
}

.gps-card-copy em {
  margin-top: 5px;
  overflow: visible;
  color: #bac8c8;
  font-size: .68rem;
  font-style: normal;
  line-height: 1.3;
  text-overflow: clip;
  white-space: normal;
}

.gps-card-copy b {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px solid rgba(155,181,181,.17);
  color: #c9b579;
  font-size: .51rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.gps-card-copy b span { font-size: .85rem; transition: transform .2s ease; }
.gps-mode-card:hover .gps-card-copy b span { transform: translateX(3px); }

.gps-attrition .gps-card-art { background: radial-gradient(circle at 48% 38%, #285c63, #0a252e 38%, #030c13 78%); }
.gps-attrition .gps-card-art > img { position: absolute; left: 35%; top: -41%; width: 32%; height: 178%; object-fit: contain; opacity: .83; transform: rotate(72deg); filter: sepia(.2) brightness(1.25) drop-shadow(0 8px 10px #000); }
.gps-attrition:hover .gps-card-art > img { transform: rotate(72deg) scale(1.04); }
.gps-reinforcement-lines { position: absolute; inset: 15% 10% 32%; opacity: .45; background: repeating-linear-gradient(90deg, transparent 0 23%, rgba(116,219,208,.55) 24% 24.5%, transparent 25% 35%); transform: skewY(-8deg); }

.gps-classic .gps-card-art > img { object-position: 50% 48%; filter: saturate(.65) brightness(.82) contrast(1.08); }

.gps-maelstrom .gps-card-art { background: radial-gradient(ellipse at 50% 43%, #81c8c7 0 3%, #2b7f88 4% 9%, #124750 16%, #09232e 31%, #06121b 55%, #02090f 78%); }
.gps-vortex { position: absolute; left: 50%; top: 42%; width: 78%; aspect-ratio: 1; border: 1px solid rgba(181,237,229,.42); border-radius: 49% 51% 46% 54%; box-shadow: 0 0 0 11px rgba(78,174,174,.1), 0 0 0 25px rgba(64,144,154,.08), 0 0 0 46px rgba(34,99,111,.09), inset 0 0 38px rgba(194,242,232,.32); transform: translate(-50%,-50%) rotate(-18deg) scaleY(.54); }
.gps-vortex::before, .gps-vortex::after { position: absolute; inset: -25%; border: 2px solid rgba(87,176,179,.18); border-radius: 46% 54% 48% 52%; content: ""; transform: rotate(32deg); }
.gps-vortex::after { inset: -55%; border-width: 1px; transform: rotate(-18deg); }

.gps-blind-luck .gps-card-art { display: grid; place-items: center; background: radial-gradient(circle at 50% 38%, #315e48, #102c28 42%, #041117 76%); }
.gps-clover { color: #b8d49a; font: 400 clamp(6rem, 10vw, 9rem)/1 Georgia, serif; opacity: .82; text-shadow: 0 10px 28px #000, 0 0 24px rgba(154,212,158,.23); transform: translateY(-9%); }
.gps-random-pips { position: absolute; top: 25%; right: 18%; color: #e6cf90; font: 800 1.2rem/1 ui-monospace, monospace; letter-spacing: .28em; transform: rotate(-20deg); }

.gps-dreadnought .gps-card-art { background: radial-gradient(ellipse at 50% 41%, #315769, #0c2d3b 45%, #041018 77%); }
.gps-dreadnought .gps-card-art > img { position: absolute; left: 26%; top: -49%; width: 48%; height: 198%; object-fit: contain; opacity: .92; transform: rotate(90deg); filter: brightness(1.34) contrast(1.08) drop-shadow(0 10px 13px #000); }
.gps-dreadnought:hover .gps-card-art > img { transform: rotate(90deg) scale(1.04); }

.gps-tournament .gps-card-art { background: linear-gradient(180deg, #184754, #0b2732 55%, #051117); }
.gps-tournament .gps-card-art > img { position: absolute; left: 17%; top: -9%; width: 66%; height: 74%; object-fit: contain; opacity: .82; filter: sepia(.2) saturate(.8) brightness(.9) drop-shadow(0 12px 8px rgba(0,0,0,.8)); transform: perspective(300px) rotateX(55deg); }
.gps-tournament:hover .gps-card-art > img { transform: perspective(300px) rotateX(55deg) scale(1.04); }
.gps-stage-marks { position: absolute; top: 48%; right: 0; left: 0; color: rgba(231,205,145,.68); font: 700 .7rem/1 Georgia, serif; letter-spacing: .35em; text-align: center; }

.gps-bridge-screen .gps-mode-detail {
  display: grid;
  grid-template-columns: minmax(145px, .55fr) minmax(180px, 1.25fr) auto;
  align-items: center;
  gap: 11px;
  margin-top: 9px;
  padding: 9px 0 0;
  border: 0;
  border-top: 1px solid rgba(164, 200, 200, .18);
  background: none;
  box-shadow: none;
  clip-path: none;
}

.gps-mode-detail > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.gps-mode-detail span { color: #82a6a8; font: 800 .42rem/1 var(--gps-font-command); letter-spacing: .08em; text-transform: uppercase; }
.gps-bridge-screen .gps-mode-detail h3 { margin: 0; color: #f2dfb4; font: 500 1.25rem/1 var(--gps-font-display); }
.gps-bridge-screen .gps-mode-detail p { margin: 0; color: #b9c9c8; font-size: .55rem; line-height: 1.4; text-shadow: none; }

.gps-mode-detail .gps-mode-actions { display: flex; flex-direction: row; align-items: center; gap: 5px; }
.gps-mode-step,
.gps-review-action {
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid rgba(186, 205, 201, .34);
  border-radius: 2px;
  background: linear-gradient(180deg, #24383b, #07161b);
  box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 4px 8px rgba(0, 0, 0, .38);
  color: #dce9e6;
  cursor: pointer;
  font: 800 .52rem/1 var(--gps-font-command);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.gps-review-action { padding-inline: 12px; border-color: rgba(222, 188, 111, .5); color: #f2d99d; }
.gps-mode-step:hover, .gps-review-action:hover { border-color: #e3c378; background: linear-gradient(180deg, #34545a, #10262d); }
.gps-mode-step:focus-visible, .gps-review-action:focus-visible { outline: 2px solid #fff0b8; outline-offset: 3px; }
.gps-mode-dots { display: none; }

@keyframes gps-console-drawer-open {
  from { opacity: 0; transform: translate(-50%, 26px) scale(.985); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@media (max-height: 800px) and (min-width: 900px) {
  .gps-bridge-console { height: 210px; padding-top: 22px; padding-bottom: 12px; }
  .gps-mode-reveal { bottom: 148px; }
  .gps-stealth-control { height: 116px; }
}

@media (max-width: 1100px) {
  .gps-bridge-console { grid-template-columns: 205px minmax(280px, 1fr) 205px; padding-inline: 14px; }
  .gps-mode-reveal { width: min(740px, calc(100vw - 330px)); }
}

@media (max-width: 760px) {
  .gps-bridge-console { grid-template-columns: 1fr; height: 180px; padding-inline: 12px; }
  .gps-radar-console, .gps-tactical-console { display: none; }
  .gps-stealth-console { display: grid; }
  .gps-mode-reveal { bottom: 164px; width: calc(100vw - 24px); max-height: calc(100svh - 176px); padding: 14px; overflow: auto; }
  .gps-mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gps-card-copy strong { font-size: 1.1rem; }
  .gps-card-copy em, .gps-card-copy b { font-size: .46rem; }
  .gps-bridge-screen .gps-mode-detail { grid-template-columns: 1fr auto; }
  .gps-bridge-screen .gps-mode-detail p { display: none; }
  .gps-mode-actions { grid-column: 2; grid-row: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .gps-mode-reveal,
  .gps-mode-grid .gps-mode-card,
  .gps-card-art > img,
  .gps-card-copy b span,
  .gps-stealth-lid {
    animation: none !important;
    transition: none !important;
  }
}

/* Approved seamless 1920x1200 start-to-bridge flow, 2026-08-23. */
body[data-stage="mode-screen"] {
  overflow: hidden;
  background: #02050a;
}

.gps-cinematic-sweep { display: none !important; }

.gps-start-controls {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: block !important;
  padding: 0;
  pointer-events: none;
  opacity: 1;
  transition: opacity 520ms ease;
}

.gps-start-controls[hidden],
body:not([data-stage="mode-screen"]) .gps-start-controls { display: none !important; }
.gps-start-controls.is-departing { opacity: 0; }
.gps-start-controls > * { position: absolute; pointer-events: auto; }

.gps-start-controls .gps-achievements-control {
  top: clamp(14px, 2.1svh, 26px);
  left: clamp(16px, 2.1vw, 40px);
  width: clamp(210px, 18vw, 286px);
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  box-shadow: none;
}

.gps-start-controls .gps-achievements-control img,
.gps-start-controls .gps-global-audio-art,
.gps-start-controls .gps-cgh-link img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.gps-start-controls .gps-global-audio {
  top: clamp(12px, 1.8svh, 22px);
  right: clamp(170px, 13vw, 250px);
  width: clamp(252px, 20vw, 316px);
  height: auto;
  aspect-ratio: 580 / 189;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.gps-start-controls .gps-audio-toggle {
  position: absolute;
  top: 29%;
  left: 2.2%;
  width: 29.5%;
  height: 39%;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: transparent;
  box-shadow: none;
}

.gps-start-controls .gps-audio-toggle[aria-pressed="true"] {
  background: rgba(2, 13, 27, .44);
  box-shadow: inset 0 0 0 2px rgba(244, 204, 112, .52);
}

.gps-start-controls .gps-volume-control {
  position: absolute;
  top: 28%;
  right: 4.1%;
  width: 57.3%;
  height: 37%;
  margin: 0;
}

.gps-start-controls .gps-volume-control input,
.gps-bridge-volume input {
  width: 100%;
  height: 100%;
  margin: 0;
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.gps-start-controls .gps-volume-control input::-webkit-slider-runnable-track,
.gps-bridge-volume input::-webkit-slider-runnable-track {
  height: 100%;
  background: transparent;
}

.gps-start-controls .gps-volume-control input::-moz-range-track,
.gps-bridge-volume input::-moz-range-track {
  height: 100%;
  border: 0;
  background: transparent;
}

.gps-start-controls .gps-volume-control input::-webkit-slider-thumb,
.gps-bridge-volume input::-webkit-slider-thumb {
  width: clamp(13px, 1.35vw, 22px);
  height: clamp(24px, 2.7vw, 42px);
  margin-top: 0;
  appearance: none;
  border: 1px solid #43321d;
  border-radius: 5px;
  background: linear-gradient(90deg, #765724, #d5a95d 45%, #83652d);
  box-shadow: inset 0 0 0 2px rgba(255, 226, 157, .24), 0 2px 4px #000;
}

.gps-start-controls .gps-volume-control input::-moz-range-thumb,
.gps-bridge-volume input::-moz-range-thumb {
  width: clamp(13px, 1.35vw, 22px);
  height: clamp(24px, 2.7vw, 42px);
  border: 1px solid #43321d;
  border-radius: 5px;
  background: linear-gradient(90deg, #765724, #d5a95d 45%, #83652d);
  box-shadow: inset 0 0 0 2px rgba(255, 226, 157, .24), 0 2px 4px #000;
}

.gps-start-controls .gps-cgh-link {
  top: clamp(3px, .7svh, 10px);
  right: clamp(10px, 1.6vw, 30px);
  width: clamp(138px, 11.6vw, 184px);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.gps-start-controls button:focus-visible,
.gps-start-controls a:focus-visible,
.gps-start-controls input:focus-visible {
  outline: 3px solid #fff1a8;
  outline-offset: 4px;
  filter: drop-shadow(0 0 10px rgba(84, 205, 255, .72));
}

.gps-bridge-screen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100svh;
  min-height: 0;
  overflow: hidden;
  background: #02050a;
  isolation: isolate;
}

.gps-bridge-screen::before,
.gps-bridge-screen::after { display: none !important; }

.gps-bridge-canvas {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: min(100vw, 160svh);
  aspect-ratio: 16 / 10;
  overflow: visible;
  transform: translate(-50%, -50%);
}

.gps-bridge-zoom-layer {
  position: absolute;
  inset: 0;
  transform: translate(-48.333333%, -33.333333%) scale(2);
  transform-origin: 0 0;
  transition: transform 1450ms cubic-bezier(.2, .76, .22, 1);
  will-change: transform;
}

.gps-bridge-screen.is-bridge-ready .gps-bridge-zoom-layer { transform: translate(0, 0) scale(1); }
body.is-fast-mode .gps-bridge-zoom-layer,
body.is-fast-mode .gps-start-controls,
body.is-fast-mode .gps-opening-copy,
body.is-fast-mode .gps-bridge-controls,
body.is-fast-mode .gps-bridge-art-open,
body.is-fast-mode .gps-mode-reveal,
body.is-fast-mode .gps-mode-card-shell { animation: none !important; transition: none !important; }

.gps-bridge-art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  user-select: none;
  -webkit-user-drag: none;
}

.gps-bridge-art-closed { z-index: 0; }
.gps-bridge-art-open {
  z-index: 2;
  opacity: 0;
  clip-path: polygon(40.45% 67.5%, 60.55% 67.5%, 60.55% 100%, 40.45% 100%);
  transition: opacity 260ms ease;
}
.gps-bridge-screen.is-cover-open .gps-bridge-art-open { opacity: 1; }

.gps-calibration-dot {
  position: absolute;
  z-index: 4;
  width: calc(100% / 1920);
  height: calc(100% / 1200);
  background: #00a2e8;
  pointer-events: none;
}
.gps-calibration-dot-a { top: 16.666667%; left: 25.833333%; }
.gps-calibration-dot-b { top: 16.666667%; left: 74.166667%; }
.gps-calibration-dot-c { top: 65%; left: 25.833333%; }
.gps-calibration-dot-d { top: 65%; left: 74.166667%; }

.gps-mounted-radar-sweep {
  position: absolute;
  z-index: 5;
  top: 68.916667%;
  left: 21.145833%;
  width: 6.041667%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background: conic-gradient(from -42deg, transparent 0 76%, rgba(70, 255, 232, .08) 80%, rgba(80, 255, 220, .44) 86%, transparent 88%);
  mix-blend-mode: screen;
  opacity: .62;
  pointer-events: none;
  animation: gps-mounted-radar-rotation 4.8s linear infinite;
}

@keyframes gps-mounted-radar-rotation { to { transform: rotate(1turn); } }

.gps-bridge-controls {
  position: absolute;
  z-index: 8;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease 950ms;
}

.gps-bridge-screen.is-bridge-ready .gps-bridge-controls {
  opacity: 1;
  pointer-events: auto;
}

.gps-bridge-hit,
.gps-bridge-volume {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.gps-bridge-hit:hover { background: rgba(80, 205, 255, .09); }
.gps-bridge-hit:active { filter: brightness(1.18); transform: translateY(.12%); }
.gps-bridge-hit:focus-visible,
.gps-bridge-volume input:focus-visible {
  outline: 0;
  background: rgba(53, 194, 255, .14);
  box-shadow: inset 0 0 0 3px #fff1a8, 0 0 16px rgba(64, 202, 255, .88);
}

.gps-hit-back {
  top: 2.666667%;
  left: 6.25%;
  width: 10.572917%;
  height: 6.333333%;
  clip-path: polygon(1.97% 0, 100% 18.42%, 99.01% 100%, 0 89.47%);
}

.gps-hit-achievements {
  top: 4.333333%;
  left: 18.541667%;
  width: 13.697917%;
  height: 6.416667%;
  clip-path: polygon(11.41% 0, 100% 25.97%, 98.86% 100%, 0 76.62%);
}

.gps-hit-mute {
  top: 6.5%;
  left: 68.229167%;
  width: 3.90625%;
  height: 2.916667%;
  clip-path: polygon(0 22.86%, 94.67% 0, 100% 91.43%, 6.67% 100%);
}

.gps-bridge-volume {
  top: 5.8%;
  left: 73.541667%;
  width: 6.5625%;
  height: 3.25%;
  transform: rotate(-5.44deg);
  transform-origin: left center;
}

.gps-bridge-volume input::-webkit-slider-thumb {
  width: max(10px, .78vw);
  height: max(20px, 1.72vw);
}
.gps-bridge-volume input::-moz-range-thumb {
  width: max(10px, .78vw);
  height: max(20px, 1.72vw);
}

.gps-hit-cgh {
  top: 0;
  left: 82.5%;
  width: 13.541667%;
  height: 10.5%;
  clip-path: polygon(0 19.84%, 97.69% 0, 100% 86.51%, 6.15% 100%);
}

.gps-hit-activate {
  z-index: 9;
  top: 81.083333%;
  left: 40.625%;
  width: 19.791667%;
  height: 18.833333%;
  clip-path: polygon(0 0, 100% 0, 99.47% 100%, .79% 100%);
}

.gps-bridge-screen.is-cover-open .gps-hit-activate {
  opacity: 0;
  pointer-events: none;
}

.gps-hit-activate::before,
.gps-hit-stealth::before,
.gps-radar-action::before {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
}

.gps-hit-activate::before {
  inset: 11% 8% 7%;
  border-radius: 26px 26px 10px 10px;
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 232, 158, .2), transparent 58%),
    linear-gradient(180deg, rgba(81, 214, 255, .18), rgba(255, 208, 116, .08));
  box-shadow:
    inset 0 0 0 1px rgba(255, 230, 162, .32),
    0 0 18px rgba(74, 201, 255, .2),
    0 0 28px rgba(255, 200, 98, .12);
}

.gps-hit-stealth {
  z-index: 10;
  top: 86%;
  left: 49.583333%;
  width: 7.708333%;
  aspect-ratio: 1;
  border-radius: 50%;
  clip-path: circle(44% at 50% 50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease 140ms, filter 120ms ease;
}

.gps-bridge-screen.is-cover-open .gps-hit-stealth {
  opacity: 1;
  pointer-events: auto;
}
.gps-hit-stealth:disabled { cursor: not-allowed; filter: grayscale(.5); opacity: .48 !important; }

.gps-hit-stealth::before {
  inset: 16%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 236, 176, .22), rgba(76, 204, 255, .18) 42%, transparent 70%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 178, .34),
    0 0 16px rgba(79, 210, 255, .28),
    0 0 28px rgba(255, 202, 106, .16);
}

.gps-opening-copy {
  position: absolute;
  z-index: 60;
  top: 50%;
  left: 50%;
  display: block;
  width: min(100vw, 160svh);
  max-width: none;
  aspect-ratio: 16 / 10;
  padding: 0;
  pointer-events: none;
  opacity: 1;
  transform: translate(-50%, -50%);
  transition: opacity 500ms ease;
}

.gps-bridge-screen.is-bridge-ready .gps-opening-copy { opacity: 0; pointer-events: none; }
.gps-bridge-screen.is-bridge-ready .gps-radar-action { pointer-events: none; }

.gps-opening-logo {
  position: absolute;
  top: 6.4%;
  left: 0;
  width: 51.4%;
  height: auto;
  max-width: none;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .58));
  pointer-events: none;
  animation: gps-logo-suspended 4.8s ease-in-out infinite alternate;
}

.gps-radar-action {
  position: absolute;
  right: auto;
  top: 65%;
  bottom: auto;
  left: 50%;
  width: clamp(260px, 27.3%, 390px);
  height: auto;
  aspect-ratio: 736 / 448;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  clip-path: ellipse(25% 48% at 50% 50%);
  pointer-events: auto;
  transform: translate(-50%, -50%);
  transition: filter 180ms ease, transform 150ms ease;
}

.gps-radar-action::before {
  inset: 20% 28%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 236, 180, .22), rgba(77, 208, 255, .14) 48%, transparent 72%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 232, 160, .38),
    0 0 22px rgba(83, 210, 255, .26),
    0 0 34px rgba(255, 201, 100, .16);
}

.gps-radar-action img {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gps-radar-action:hover { filter: brightness(1.08) drop-shadow(0 0 18px rgba(62, 196, 255, .72)); }
.gps-radar-action:active,
.gps-radar-action.is-activating { transform: translate(-50%, calc(-50% + 3px)) scale(.965); }
.gps-radar-action:focus-visible {
  outline: 0;
  filter: brightness(1.08) drop-shadow(0 0 4px #fff5b5) drop-shadow(0 0 20px #33bdff);
}
.gps-radar-action:disabled { cursor: wait; }

@keyframes gps-bridge-attention {
  0%, 100% {
    opacity: .38;
    transform: scale(.985);
  }
  55% {
    opacity: .88;
    transform: scale(1.03);
  }
}

@keyframes gps-radar-idle-glow {
  0%, 100% {
    filter:
      brightness(1.03)
      drop-shadow(0 0 8px rgba(255, 224, 142, .72))
      drop-shadow(0 0 14px rgba(52, 188, 255, .56));
  }
  55% {
    filter:
      brightness(1.12)
      drop-shadow(0 0 14px rgba(255, 230, 155, .92))
      drop-shadow(0 0 28px rgba(45, 191, 255, .88));
  }
}

.gps-bridge-screen.is-start-view .gps-radar-action {
  animation: gps-radar-idle-glow 1.85s ease-in-out infinite;
}

.gps-bridge-screen.is-start-view .gps-radar-action:hover,
.gps-bridge-screen.is-start-view .gps-radar-action:focus-visible {
  animation-play-state: paused;
  filter:
    brightness(1.14)
    drop-shadow(0 0 5px #fff5b5)
    drop-shadow(0 0 28px #33bdff);
}

.gps-bridge-screen.is-start-view .gps-radar-action::before,
.gps-bridge-screen.is-bridge-ready:not(.is-cover-open) .gps-hit-activate::before,
.gps-bridge-screen.is-cover-open .gps-hit-stealth:not(:disabled)::before {
  opacity: .62;
  animation: gps-bridge-attention 2.15s ease-in-out infinite;
}

@keyframes gps-stealth-ready-glow {
  0%, 100% {
    filter:
      brightness(1.24)
      drop-shadow(0 0 7px rgba(255, 49, 31, .92))
      drop-shadow(0 0 15px rgba(255, 180, 70, .7));
  }
  55% {
    filter:
      brightness(1.58)
      drop-shadow(0 0 13px rgba(255, 53, 33, 1))
      drop-shadow(0 0 27px rgba(255, 41, 24, .98))
      drop-shadow(0 0 18px rgba(255, 218, 112, .92));
  }
}

@keyframes gps-stealth-core-pulse {
  0%, 100% { opacity: .78; transform: scale(.96); }
  55% { opacity: 1; transform: scale(1.05); }
}

.gps-bridge-screen.is-mode-revealed .gps-hit-stealth:not(:disabled) {
  animation: gps-stealth-ready-glow 1.35s ease-in-out infinite;
}

.gps-bridge-screen.is-mode-revealed .gps-hit-stealth:not(:disabled)::before {
  opacity: 1;
  inset: 3%;
  background: radial-gradient(
    circle,
    transparent 0 54%,
    rgba(255, 39, 24, .2) 58%,
    rgba(255, 49, 27, .94) 64%,
    rgba(255, 224, 129, .98) 69%,
    rgba(255, 64, 31, .72) 73%,
    transparent 79%
  );
  box-shadow:
    inset 0 0 0 2px rgba(255, 229, 146, .9),
    0 0 9px 3px rgba(255, 48, 27, .94),
    0 0 20px 5px rgba(255, 62, 30, .86),
    0 0 34px 8px rgba(255, 184, 66, .64);
  animation: gps-stealth-core-pulse 1.35s ease-in-out infinite;
}

.gps-bridge-screen.is-mode-revealed .gps-hit-stealth:not(:disabled):hover,
.gps-bridge-screen.is-mode-revealed .gps-hit-stealth:not(:disabled):focus-visible {
  animation-play-state: paused;
  filter:
    brightness(1.72)
    drop-shadow(0 0 6px #fff4b2)
    drop-shadow(0 0 20px #ff3824)
    drop-shadow(0 0 36px rgba(255, 186, 67, .98));
}

.gps-bridge-screen.is-launch-transitioning .gps-bridge-canvas {
  filter: brightness(.52) saturate(.76);
  transition: filter 320ms ease;
}

.gps-bridge-screen.is-launch-transitioning .gps-mode-card-shell {
  transition: transform 280ms ease, filter 280ms ease, opacity 280ms ease;
}

.gps-bridge-screen.is-launch-transitioning .gps-mode-card-shell:not(.is-selected) {
  opacity: .16;
  transform: scale(.94);
  filter: blur(.7px) saturate(.42);
}

.gps-bridge-screen.is-launch-transitioning .gps-mode-card-shell.is-selected {
  transform: translateY(-1.8svh) scale(1.18);
  filter: drop-shadow(0 22px 28px rgba(0, 0, 0, .72)) drop-shadow(0 0 18px rgba(84, 214, 255, .42));
}

.gps-mode-reveal {
  position: absolute;
  z-index: 30;
  inset: 0;
  width: auto;
  max-height: none;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  clip-path: none;
  transform: none;
  animation: gps-card-rack-reveal 300ms cubic-bezier(.2, .76, .2, 1) both;
  pointer-events: none;
}
.gps-mode-reveal[hidden] { display: none; }

.gps-select-mode-prompt {
  position: absolute;
  z-index: 32;
  top: 8.15svh;
  left: 50%;
  color: #ffe6a1;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(.72rem, 1.32svh, 1.04rem);
  font-weight: 800;
  letter-spacing: .24em;
  line-height: 1;
  text-shadow:
    0 1px 2px #06111d,
    0 0 8px rgba(255, 226, 145, .88),
    0 0 18px rgba(54, 195, 255, .72);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 7px) scale(.94);
  animation: gps-select-mode-prompt 2.35s ease-out both;
  pointer-events: none;
}

.gps-mode-grid {
  --gps-card-width: min(20.5vw, 27svh, 340px);
  position: absolute;
  top: 11svh;
  left: 50%;
  display: grid;
  grid-template-columns: repeat(3, var(--gps-card-width));
  grid-auto-rows: calc(var(--gps-card-width) * 1.3);
  gap: clamp(8px, 1.15svh, 16px) clamp(10px, 1.05vw, 20px);
  width: auto;
  margin: 0;
  pointer-events: auto;
  transform: translateX(-50%);
}

.gps-mode-card-shell {
  position: relative;
  z-index: 1;
  width: var(--gps-card-width);
  aspect-ratio: 400 / 520;
  transform: scale(1);
  transform-origin: center;
  transition: transform 190ms ease, filter 190ms ease;
}

.gps-mode-card-shell.is-selected {
  z-index: 8;
  filter:
    drop-shadow(0 18px 24px rgba(0, 0, 0, .66))
    drop-shadow(0 0 7px rgba(255, 229, 151, .96))
    drop-shadow(0 0 17px rgba(67, 200, 255, .88))
    drop-shadow(0 0 29px rgba(229, 181, 77, .68));
  transform: scale(1.1);
  animation: gps-selected-mode-frame-glow 1.8s ease-in-out infinite;
}

.gps-mode-card-shell:not(.is-selected):hover,
.gps-mode-card-shell:not(.is-selected):focus-within {
  z-index: 7;
  filter: drop-shadow(0 15px 18px rgba(0, 0, 0, .55));
  transform: translateY(-2.2%);
}

.gps-bridge-screen .gps-mode-grid .gps-mode-card,
.gps-bridge-screen .gps-mode-grid .gps-mode-card.is-selected,
.gps-bridge-screen .gps-mode-grid .gps-mode-card.is-prev,
.gps-bridge-screen .gps-mode-grid .gps-mode-card.is-next,
.gps-bridge-screen .gps-mode-grid .gps-mode-card.is-far {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none !important;
  opacity: 1;
  transform: none;
  clip-path: none;
  pointer-events: auto;
  cursor: pointer;
}

.gps-bridge-screen .gps-mode-grid .gps-mode-card::after { display: none; }
.gps-bridge-screen .gps-mode-card > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 1;
  filter: none;
  transform: none;
  transition: none;
}

.gps-card-description,
.gps-chain-fire-description {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  color: #ead8a6;
  background:
    linear-gradient(180deg, rgba(12, 39, 86, .995), rgba(5, 18, 50, .995));
  font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
  font-size: clamp(8px, calc(var(--gps-card-width) * .043), 15px);
  font-weight: 600;
  letter-spacing: .005em;
  line-height: 1.2;
  text-align: left;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .92);
  pointer-events: none;
}

.gps-card-description {
  top: 73.3%;
  right: 6.5%;
  bottom: 3.2%;
  left: 6.5%;
  padding: 2.4% 2.2% 1.6%;
  border-top: 1px solid rgba(217, 190, 127, .2);
  box-shadow: inset 0 7px 12px rgba(1, 8, 24, .22);
}

.gps-card-description-classic {
  top: 56.2%;
  bottom: 22.7%;
}

.gps-chain-fire-description {
  z-index: 2;
  top: 89.2%;
  right: 7.8%;
  bottom: 3.8%;
  left: 28.4%;
  padding: 0 .8%;
  font-size: clamp(7px, calc(var(--gps-card-width) * .032), 11px);
  line-height: 1.08;
}

.gps-bridge-screen .gps-mode-card:focus-visible {
  outline: 3px solid #fff0a5;
  outline-offset: 4px;
  box-shadow: 0 0 0 2px rgba(7, 28, 44, .88), 0 0 17px rgba(57, 196, 255, .8) !important;
}

.gps-chain-fire-control {
  position: absolute;
  z-index: 3;
  top: 84.25%;
  left: 10.8%;
  width: 16.2%;
  height: 7.1%;
  cursor: pointer;
}

.gps-chain-fire-control input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.gps-chain-fire-control span {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(218, 188, 119, .82);
  border-radius: 18%;
  background: rgba(3, 17, 29, .92);
  box-shadow: inset 0 1px 3px #000, 0 0 4px rgba(77, 191, 229, .28);
}

.gps-chain-fire-control span::after {
  position: absolute;
  top: 14%;
  bottom: 14%;
  left: 8%;
  width: 38%;
  border-radius: 22%;
  background: linear-gradient(180deg, #d9bd73, #785423);
  box-shadow: 0 1px 3px #000;
  content: "";
  transition: transform 150ms ease;
}

.gps-chain-fire-control input:checked + span {
  background: rgba(10, 79, 111, .94);
  box-shadow: inset 0 0 7px rgba(91, 220, 255, .66), 0 0 6px rgba(76, 204, 255, .46);
}
.gps-chain-fire-control input:checked + span::after { transform: translateX(116%); }
.gps-chain-fire-control input:focus-visible + span { outline: 3px solid #fff0a5; outline-offset: 3px; }
.gps-chain-fire-control input:disabled + span { opacity: .42; }

@keyframes gps-card-rack-reveal {
  from { opacity: 0; transform: translateY(2.2svh); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes gps-select-mode-prompt {
  0% { opacity: 0; transform: translate(-50%, 7px) scale(.94); }
  15%, 68% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -3px) scale(1); }
}

@keyframes gps-selected-mode-frame-glow {
  0%, 100% {
    filter:
      drop-shadow(0 18px 24px rgba(0, 0, 0, .66))
      drop-shadow(0 0 6px rgba(255, 229, 151, .9))
      drop-shadow(0 0 14px rgba(67, 200, 255, .76))
      drop-shadow(0 0 23px rgba(229, 181, 77, .56));
  }
  50% {
    filter:
      drop-shadow(0 18px 24px rgba(0, 0, 0, .68))
      drop-shadow(0 0 10px rgba(255, 237, 176, 1))
      drop-shadow(0 0 23px rgba(67, 208, 255, .98))
      drop-shadow(0 0 36px rgba(239, 190, 80, .82));
  }
}

.gps-deployment-transition {
  --gps-launch-card-left: calc(50vw - 170px);
  --gps-launch-card-top: 18vh;
  --gps-launch-card-width: 340px;
  --gps-launch-card-height: 442px;
  position: fixed;
  inset: 0;
  z-index: 75;
  pointer-events: none;
}

.gps-deployment-transition[hidden] { display: none; }

.gps-deployment-transition::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 46%, rgba(56, 138, 187, .2), transparent 32%),
    linear-gradient(180deg, rgba(2, 9, 18, .1), rgba(2, 10, 19, .78) 34%, rgba(2, 9, 18, .96));
  transition: opacity 220ms ease;
}

.gps-deployment-transition-card {
  position: absolute;
  left: var(--gps-launch-card-left);
  top: var(--gps-launch-card-top);
  width: var(--gps-launch-card-width);
  height: var(--gps-launch-card-height);
  overflow: hidden;
  border: 1px solid rgba(238, 215, 143, .54);
  border-radius: 20px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .62), 0 0 22px rgba(92, 204, 255, .22);
  opacity: 0;
  transform: scale(1);
  transition:
    left 640ms cubic-bezier(.2, .75, .22, 1),
    top 640ms cubic-bezier(.2, .75, .22, 1),
    width 640ms cubic-bezier(.2, .75, .22, 1),
    height 640ms cubic-bezier(.2, .75, .22, 1),
    opacity 240ms ease,
    transform 640ms cubic-bezier(.2, .75, .22, 1),
    filter 320ms ease;
}

.gps-deployment-transition-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(2, 7, 16, .26) 38%, rgba(2, 7, 16, .7));
}

.gps-deployment-transition-card > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gps-deployment-transition-sweep {
  position: absolute;
  inset: 0 -16%;
  opacity: 0;
  transform: translateX(-32%) skewX(-16deg);
  background:
    linear-gradient(90deg, transparent 34%, rgba(114, 244, 255, .08) 46%, rgba(162, 255, 224, .3) 50%, rgba(249, 220, 132, .2) 54%, transparent 64%),
    repeating-linear-gradient(0deg, transparent 0 6px, rgba(113, 241, 255, .08) 7px 8px);
  filter: blur(1px);
  mix-blend-mode: screen;
  transition: transform 760ms cubic-bezier(.19, .83, .2, 1), opacity 180ms ease;
}

.gps-deployment-transition.is-active::before { opacity: 1; }

.gps-deployment-transition.is-active .gps-deployment-transition-card {
  left: calc(50vw - min(22vw, 340px) / 2);
  top: clamp(92px, 14vh, 148px);
  width: min(22vw, 340px);
  height: calc(min(22vw, 340px) * 1.3);
  opacity: .95;
  transform: translateY(-1.2svh) scale(1.06);
  filter: brightness(1.08) saturate(1.02);
}

.gps-deployment-transition.is-active .gps-deployment-transition-sweep {
  opacity: .96;
  transform: translateX(64%) skewX(-16deg);
}

.map-room-screen.is-deployment-arriving .map-room-stage {
  filter: brightness(.76) saturate(.82);
  transition: filter 260ms ease;
}

@media (max-height: 820px) and (min-width: 900px) {
  .gps-opening-logo { top: 5.5%; width: 65%; }
  .gps-radar-action { width: clamp(260px, 27.3%, 336px); }
  .gps-mode-grid {
    --gps-card-width: min(18.9vw, 26.5svh, 250px);
    top: 9.5svh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gps-bridge-zoom-layer { transition-duration: 80ms !important; }
  .gps-start-controls,
  .gps-opening-copy,
  .gps-bridge-controls,
  .gps-bridge-art-open,
  .gps-hit-stealth,
  .gps-hit-activate::before,
  .gps-radar-action,
  .gps-radar-action::before,
  .gps-mode-reveal,
  .gps-select-mode-prompt,
  .gps-mode-card-shell,
  .gps-deployment-transition::before,
  .gps-deployment-transition-card,
  .gps-deployment-transition-sweep,
  .gps-chain-fire-control span::after { animation: none !important; transition-duration: 80ms !important; transition-delay: 0ms !important; }
  .gps-mounted-radar-sweep { animation: none !important; opacity: .36; transform: rotate(24deg); }
  .gps-opening-logo { animation: none !important; }
  .gps-deployment-transition-sweep { opacity: 0 !important; }
}
/* GHOST PATROL PREMATCH PRESENTATION LOCK: END */

/* Ghost Patrol v0.9.2 integration: one visual language, three intentional worlds. */
@font-face {
  font-family: "Black Ops One";
  src: url("./assets/fonts/black-ops-one/BlackOpsOne-Regular.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

:root {
  --gps-font-display: "Black Ops One", "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  --gps-font-ui: "Bahnschrift Condensed", "Arial Narrow", Arial, sans-serif;
  --gps-navy-950: #020817;
  --gps-navy-900: #06142b;
  --gps-navy-800: #0b2348;
  --gps-gold: #d5ad5e;
  --gps-gold-light: #f0d496;
  --gps-steel: #8b9ba7;
}

.gps-radar-action,
.gps-select-mode-prompt,
.gps-mode-confirm,
.map-room-panel-deploy,
.combat-right-rail h2,
.panel-heading span,
.pause-command-frame h2,
.outcome-dialog h2,
.achievements-heading h2,
.achievement-card h3 {
  font-family: var(--gps-font-display) !important;
  font-weight: 400 !important;
}

/* Exterior title control: dark navy and aged gold, with no teal light language. */
.gps-radar-action {
  border: 2px solid #a77d37;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 26%),
    linear-gradient(180deg, #12305e, #06142e 72%, #020919);
  color: var(--gps-gold-light);
  box-shadow: inset 0 0 0 2px #020714, inset 0 0 0 3px rgba(226,190,111,.34), 0 8px 18px rgba(0,0,0,.62);
  letter-spacing: .08em;
  text-shadow: 0 2px 2px #000, 0 0 10px rgba(217,174,87,.28);
}
.gps-radar-action::before { display: none; }
.gps-radar-action:hover,
.gps-radar-action:focus-visible { filter: brightness(1.12); box-shadow: inset 0 0 0 2px #020714, inset 0 0 0 3px #e7c57d, 0 0 22px rgba(211,169,82,.5); }

/* Bridge controls: battleship gray housings and a passive status console in the old hardware gap. */
.gps-bridge-mode-status {
  position: absolute;
  z-index: 12;
  top: 81.5%;
  left: 40.7%;
  display: grid;
  width: 19.6%;
  height: 17.2%;
  align-content: center;
  justify-items: center;
  gap: 4%;
  padding: 1.1% 1.2%;
  border: 2px solid #2c343a;
  border-radius: 4px;
  background:
    linear-gradient(110deg, rgba(255,255,255,.12), transparent 18% 77%, rgba(255,255,255,.05)),
    linear-gradient(180deg, #69747b, #3d474e 48%, #20292f);
  box-shadow: inset 0 0 0 2px #10171c, inset 0 1px rgba(255,255,255,.18), 0 6px 10px rgba(0,0,0,.48);
  color: #e3e7e7;
  font-family: var(--gps-font-ui);
  text-align: center;
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
}
.gps-bridge-mode-status::before,
.gps-bridge-mode-status::after { position: absolute; top: 7%; width: 5px; height: 5px; border-radius: 50%; background: #14191d; box-shadow: inset 0 1px 1px #000, 0 1px rgba(255,255,255,.16); content: ""; }
.gps-bridge-mode-status::before { left: 5%; }
.gps-bridge-mode-status::after { right: 5%; }
.gps-bridge-mode-status > span { color: #f0d391; font: 400 clamp(8px, .9vw, 17px)/1 var(--gps-font-display); letter-spacing: .08em; }
.gps-bridge-mode-status > strong { color: #f3f5f2; font: 800 clamp(7px, .72vw, 14px)/1 var(--gps-font-ui); letter-spacing: .08em; }
.gps-bridge-mode-status > small { color: #c1c9ca; font: 700 clamp(5px, .48vw, 9px)/1.1 var(--gps-font-ui); letter-spacing: .04em; }
.gps-bridge-mode-status > i { display: grid; width: 76%; grid-template-columns: repeat(6, 1fr); gap: 6%; }
.gps-bridge-mode-status > i b { aspect-ratio: 1; border: 1px solid #151b1e; border-radius: 50%; background: #24333a; box-shadow: inset 0 1px 2px #000; }
.gps-bridge-mode-status > i b.is-active { background: #d5a94f; box-shadow: 0 0 6px rgba(222,177,83,.7), inset 0 1px #fff0b2; }

.gps-select-mode-prompt { color: var(--gps-gold-light); text-shadow: 0 2px 3px #000, 0 0 12px rgba(217,174,87,.5); }
.gps-mode-card-shell.is-selected {
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.68)) drop-shadow(0 0 7px rgba(255,229,151,.9)) drop-shadow(0 0 22px rgba(202,154,64,.58));
  transform: scale(1.1);
  animation: gps-selected-mode-gold 1.9s ease-in-out infinite;
}
@keyframes gps-selected-mode-gold {
  50% { filter: drop-shadow(0 18px 26px rgba(0,0,0,.7)) drop-shadow(0 0 10px #ffe6a1) drop-shadow(0 0 30px rgba(201,151,59,.75)); }
}
.gps-chain-fire-control input:checked + span { background: #17335c; box-shadow: inset 0 0 7px rgba(198,215,228,.38), 0 0 6px rgba(213,172,83,.35); }
.gps-mode-navigation {
  position: absolute;
  z-index: 44;
  bottom: 7.1svh;
  left: 50%;
  display: flex;
  gap: clamp(12px, 1.15vw, 22px);
  pointer-events: auto;
  transform: translateX(-50%);
}
.gps-mode-navigation button {
  display: grid;
  width: clamp(42px, 3.4vw, 62px);
  aspect-ratio: 1.35;
  place-items: center;
  border: 1px solid #8f9ba2;
  border-radius: 4px;
  background: linear-gradient(180deg, #57636a, #273139 70%, #121a20);
  color: #f0d394;
  box-shadow: inset 0 1px rgba(255,255,255,.16), 0 4px 7px rgba(0,0,0,.5);
  font: 900 clamp(18px, 1.45vw, 27px)/1 var(--gps-font-ui);
  cursor: pointer;
}
.gps-mode-navigation button:hover,
.gps-mode-navigation button:focus-visible { border-color: #efd18c; filter: brightness(1.14); outline: 2px solid rgba(238,207,139,.62); }
.gps-mode-confirm {
  position: absolute;
  z-index: 44;
  bottom: 1.45svh;
  left: 50%;
  min-width: clamp(270px, 23vw, 440px);
  min-height: clamp(38px, 4.8svh, 58px);
  padding: .55em 1.4em;
  border: 2px solid #9b7538;
  border-radius: 5px;
  background: linear-gradient(180deg, #172f55, #07162f 72%, #020917);
  color: #f0d18b;
  box-shadow: inset 0 0 0 2px #020714, inset 0 1px rgba(255,255,255,.14), 0 6px 12px rgba(0,0,0,.58);
  font-size: clamp(14px, 1.25vw, 24px);
  letter-spacing: .055em;
  pointer-events: auto;
  transform: translateX(-50%);
  cursor: pointer;
}
.gps-mode-confirm:hover,
.gps-mode-confirm:focus-visible { color: #ffe7aa; filter: brightness(1.15); outline: 2px solid rgba(238,207,139,.62); }

/* Bridge-to-Map Room: pull back to the real ship, then reveal the same form as a die-cast piece. */
.gps-deployment-transition { position: fixed; inset: 0; z-index: 90; overflow: hidden; background: #020712; pointer-events: none; }
.gps-deployment-transition[hidden] { display: none; }
.gps-deployment-transition::before { background: radial-gradient(circle at 50% 48%, rgba(218,177,86,.14), transparent 38%), linear-gradient(180deg, rgba(2,7,16,.08), rgba(2,7,16,.55)); opacity: 1; }
.imagination-real-world,
.imagination-tabletop-world { position: absolute; inset: 0; overflow: hidden; }
.imagination-real-world { z-index: 1; opacity: 1; }
.imagination-real-world img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; filter: contrast(1.08) saturate(.82) brightness(.84); transform: scale(2.15); transition: transform 760ms cubic-bezier(.18,.75,.2,1), opacity 420ms ease 560ms, filter 420ms ease 520ms; }
.imagination-real-world span { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 48%, transparent 26%, rgba(1,5,12,.76) 84%); }
.imagination-tabletop-world { z-index: 2; opacity: 0; transform: scale(.78); transition: opacity 520ms ease 520ms, transform 830ms cubic-bezier(.16,.76,.19,1) 500ms; }
.imagination-map-room-shell { width: 100%; height: 100%; object-fit: cover; filter: brightness(.82) saturate(.82); }
.imagination-die-cast-ship { position: absolute; z-index: 3; top: 28%; left: 46%; width: min(12vw, 180px); height: auto; opacity: 0; filter: brightness(.9) saturate(.72) drop-shadow(0 18px 13px rgba(0,0,0,.72)); transform: rotate(90deg) scale(2.6); transition: opacity 300ms ease 650ms, transform 720ms cubic-bezier(.2,.72,.2,1) 620ms; }
.imagination-material-glint { position: absolute; z-index: 4; inset: -15% -30%; opacity: 0; background: linear-gradient(105deg, transparent 42%, rgba(255,232,173,.5) 49%, rgba(203,152,57,.2) 52%, transparent 59%); mix-blend-mode: screen; transform: translateX(-45%); transition: opacity 180ms ease 520ms, transform 780ms ease 520ms; }
.gps-deployment-transition.is-active .imagination-real-world img { opacity: .15; filter: contrast(1.04) saturate(.5) brightness(.48); transform: scale(1); }
.gps-deployment-transition.is-active .imagination-tabletop-world { opacity: 1; transform: scale(1); }
.gps-deployment-transition.is-active .imagination-die-cast-ship { opacity: .94; transform: rotate(90deg) scale(1); }
.gps-deployment-transition.is-active .imagination-material-glint { opacity: .8; transform: translateX(45%); }
.map-room-screen.is-deployment-arriving .map-room-stage { filter: brightness(1) saturate(1); }

/* Map Room remains the tangible wooden toy box; controls now read left-to-right. */
.map-room-playfield { aspect-ratio: 24 / 16; }
.map-room-logo-clean {
  position: absolute;
  z-index: 8;
  top: 2.4%;
  left: 1.4%;
  width: 20.3%;
  height: 70%;
  padding: 1.1%;
  object-fit: contain;
  object-position: 50% 50%;
  border: 1px solid rgba(213,172,91,.18);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(3,8,18,.94), rgba(5,15,30,.9));
  filter: drop-shadow(0 5px 3px rgba(0,0,0,.88)) drop-shadow(0 12px 14px rgba(0,0,0,.56));
}
.map-room-panel-buttons { position: absolute; inset: 0; display: block; width: auto; pointer-events: none; }
.map-room-panel-control,
.map-room-panel-deploy,
.map-room-panel-back {
  position: absolute;
  display: grid;
  height: 7.1%;
  min-width: 0;
  place-items: center;
  padding: 0 .7%;
  border: 3px solid #b69051;
  border-radius: 11px;
  background: linear-gradient(180deg, #244f84, #0b2852 68%, #061735);
  box-shadow: inset 0 0 0 2px #061026, inset 0 0 0 3px rgba(228,195,124,.28), 0 5px 0 #302417, 0 8px 13px rgba(0,0,0,.5);
  color: #e8ca8a;
  font: 400 clamp(9px, 1.08vw, 21px)/1 var(--gps-font-display);
  letter-spacing: .035em;
  pointer-events: auto;
  cursor: pointer;
}
#map-room-auto-arrange { top: 74.4%; left: 28.7%; width: 16.1%; font-size: clamp(8px, 1vw, 19px); }
#map-room-deploy { top: 73.8%; left: 47.1%; width: 18.2%; height: 8.1%; }
#map-room-deploy strong { display: block; font-size: 1.35em; }
#map-room-rotate { top: 74.4%; left: 67.6%; width: 13.3%; }
#map-room-back { top: 1.2%; left: 29.4%; width: 10%; height: 7%; }
.map-room-panel-control:hover,
.map-room-panel-control:focus-visible,
.map-room-panel-deploy:hover,
.map-room-panel-deploy:focus-visible,
.map-room-panel-back:hover,
.map-room-panel-back:focus-visible { border-color: #f0d18c; color: #ffe9af; filter: brightness(1.12); outline: 2px solid rgba(239,207,137,.72); }
.map-room-knight-foreground { z-index: 18; pointer-events: none !important; }

/* Map Room-to-combat: the board dives in and painted water becomes real ocean. */
.combat-deployment-transition { position: fixed; inset: 0; z-index: 94; overflow: hidden; background: #020817; pointer-events: none; }
.combat-deployment-transition[hidden] { display: none; }
.combat-tabletop-world,
.combat-real-world { position: absolute; inset: 0; overflow: hidden; }
.combat-tabletop-world { opacity: 1; transform: scale(1); transition: opacity 390ms ease 360ms, transform 780ms cubic-bezier(.4,.04,.82,.34); }
.combat-tabletop-world img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.7) saturate(.72); }
.combat-real-world { opacity: 0; background: radial-gradient(ellipse at 50% 32%, #244462, #071a30 58%, #020817); transition: opacity 460ms ease 360ms; }
.combat-real-world::before { position: absolute; inset: 0; background: repeating-linear-gradient(174deg, rgba(190,211,226,.08) 0 1px, transparent 2px 24px); content: ""; }
.combat-real-world img { position: absolute; left: 50%; bottom: -10%; width: min(84vw, 1500px); height: 90%; object-fit: contain; filter: brightness(.72) saturate(.7) drop-shadow(0 24px 22px rgba(0,0,0,.75)); transform: translateX(-50%) scale(.7); transition: transform 600ms cubic-bezier(.16,.76,.19,1) 300ms; }
.combat-scale-glint { position: absolute; z-index: 4; inset: -20% -35%; opacity: 0; background: linear-gradient(105deg, transparent 45%, rgba(245,219,158,.45) 50%, transparent 56%); transform: translateX(-45%); transition: opacity 180ms ease 260ms, transform 650ms ease 260ms; }
.combat-deployment-transition.is-active .combat-tabletop-world { opacity: 0; transform: scale(2.7); }
.combat-deployment-transition.is-active .combat-real-world { opacity: 1; }
.combat-deployment-transition.is-active .combat-real-world img { transform: translateX(-50%) scale(1); }
.combat-deployment-transition.is-active .combat-scale-glint { opacity: .78; transform: translateX(45%); }

/* Combat is a single wide command surface that scales intact on laptop screens. */
.match-page-v2 {
  --horizon-height: clamp(142px, 21svh, 224px);
  height: 100svh;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #07182b;
}
.match-page-v2::before { background: radial-gradient(ellipse at 51% 27%, rgba(73,111,143,.2), transparent 47%), repeating-linear-gradient(174deg, rgba(160,190,214,.035) 0 1px, transparent 2px 22px), linear-gradient(180deg, #173a57, #0c2a45 45%, #06172a); }
.match-page-v2 .battle-header { position: absolute; inset: 0 0 auto; z-index: 60; height: 0; padding: 0; pointer-events: none; }
.match-command-cluster { position: fixed !important; z-index: 66 !important; top: 8px; left: 9px; display: flex; gap: 7px; pointer-events: auto; }
.match-page-v2 .brand-pause { width: clamp(90px, 7vw, 132px); min-height: clamp(40px, 5.4svh, 58px); border-radius: 5px; font-family: var(--gps-font-display); font-weight: 400; }
.battle-audio-console { display: flex; height: clamp(40px, 5.4svh, 58px); gap: 6px; }
.battle-mute-control { width: clamp(66px, 5vw, 92px); border: 2px solid #9b773d; border-radius: 5px; background: linear-gradient(180deg, #173d6e, #071b39); color: #e8c57e; }
.battle-mute-control::before { position: absolute; inset: 0; display: grid; place-items: center; content: "MUTE"; font: 400 clamp(9px,.72vw,13px)/1 var(--gps-font-display); letter-spacing: .04em; }
.battle-mute-control img,
.battle-volume-control img { display: none; }
.battle-volume-control { width: clamp(138px, 12vw, 225px); border: 2px solid #9b773d; border-radius: 5px; background: linear-gradient(180deg, #173d6e, #071b39); }
.battle-volume-control::before { position: absolute; top: 10%; left: 8%; color: #e8c57e; content: "MASTER VOLUME"; font: 800 clamp(7px,.55vw,10px)/1 var(--gps-font-ui); letter-spacing: .08em; }
.battle-volume-control input { left: 8%; bottom: 12%; width: 84%; height: 32%; opacity: 1; accent-color: #d6ad5c; }
.battle-volume-control::after { display: none; }
.battle-studio-logo { position: fixed !important; z-index: 66 !important; top: 8px; right: 8px; width: clamp(92px, 8vw, 150px); }
.match-page-v2 .enemy-horizon { top: 0; height: var(--horizon-height); overflow: hidden; background: #0a1625; }
.match-page-v2 .enemy-horizon > img:first-child { width: 106%; height: 106%; margin: -3%; object-fit: cover; object-position: 50% 68%; filter: saturate(.78) contrast(1.08) brightness(.72); }
.match-page-v2 .enemy-horizon::before { z-index: 2; background: linear-gradient(180deg, rgba(2,6,13,.08), transparent 38%, rgba(5,16,30,.38) 78%, #0c2943), linear-gradient(90deg, rgba(2,7,16,.2), transparent 28% 78%, rgba(2,7,16,.24)); }
.match-page-v2 .battle-brand-art { position: absolute; z-index: 4; left: 2%; bottom: 2%; display: block; width: min(51vw, 980px); height: 78%; object-fit: contain; object-position: 0 100%; filter: drop-shadow(0 3px 1px rgba(0,0,0,.95)) drop-shadow(0 8px 5px rgba(0,0,0,.72)) drop-shadow(0 16px 14px rgba(0,0,0,.46)); }
.match-page-v2 .enemy-horizon::after { z-index: 5; right: 1%; bottom: 5%; border-color: rgba(181,62,45,.65); background: rgba(5,10,19,.82); color: #efa38d; }

.match-page-v2 .battlefield-shell {
  position: absolute;
  z-index: 12;
  top: calc(var(--horizon-height) - 1px);
  right: .45%;
  bottom: .55%;
  left: .45%;
  display: grid;
  width: auto;
  height: auto;
  grid-template-columns: minmax(190px, 18%) minmax(0, 64%) minmax(190px, 18%);
  gap: .55%;
  margin: 0;
  padding: 0;
}
.combat-command-ship {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(190,157,90,.35);
  background: radial-gradient(ellipse at 50% 42%, rgba(67,97,123,.28), transparent 54%), linear-gradient(180deg, rgba(5,18,34,.28), rgba(3,13,26,.72));
  box-shadow: inset 0 0 35px rgba(0,0,0,.48), 0 10px 22px rgba(0,0,0,.42);
}
.combat-command-ship .command-ship { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 54% 50%; filter: brightness(.76) contrast(1.06) saturate(.67); transform: none; }
.combat-command-ship .player-missile-battery { z-index: 12; top: 37%; left: 51%; width: 8.5%; }
.combat-command-ship .missile-hardpoint { z-index: 13; top: 39%; left: 55%; bottom: auto; }
.match-page-v2 .board-stage { position: relative; inset: auto; width: 100%; height: 100%; min-width: 0; perspective: none; }
.match-page-v2 .board-assembly { width: 100%; height: 100%; }
.match-page-v2 .board-plane { width: 100%; height: 100%; aspect-ratio: 24 / 16; overflow: hidden; }
.match-page-v2 .board-surface { position: absolute; inset: 0; width: 100%; height: 100%; border: 1px solid rgba(194,164,97,.55); background: linear-gradient(rgba(16,52,87,.04), rgba(5,26,51,.1)); box-shadow: inset 0 0 45px rgba(1,10,24,.38), 0 0 0 1px rgba(2,12,25,.55); transform: none; }
.match-page-v2 .target-cell { border-color: rgba(151,183,210,.22); }
.match-page-v2 .target-cell:hover:not(:disabled) { background: rgba(33,79,132,.28); box-shadow: inset 0 0 0 1px #e1c27e, 0 0 10px rgba(188,145,64,.32); }
.theater-strip,
.coastline,
.board-readout { display: none !important; }

.combat-right-rail { display: grid; min-width: 0; height: 100%; grid-template-rows: 24% 32% 1fr; gap: 1.1%; }
.combat-right-rail > section {
  position: relative !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  min-width: 0;
  margin: 0 !important;
  padding: clamp(6px,.55vw,11px) !important;
  overflow: hidden;
  border: 3px solid #967239 !important;
  border-radius: 7px !important;
  background: linear-gradient(180deg, #17355d, #091a36 72%, #040d1f) !important;
  box-shadow: inset 0 0 0 2px #040b1b, inset 0 0 0 3px rgba(224,190,115,.24), 0 8px 15px rgba(0,0,0,.52) !important;
  transform: none !important;
  filter: none !important;
}
.combat-right-rail h2,
.combat-right-rail .panel-heading span { margin: 0 0 5px; color: #e7c373; font-size: clamp(9px,.82vw,16px); letter-spacing: .055em; text-shadow: 0 2px 2px #000; }
.combat-channel-copy { position: relative; inset: auto; height: calc(100% - 25px); color: #e7edf0; }
.combat-channel-copy > strong { padding: .25rem .32rem; border-left-color: #b83d2d; background: rgba(112,27,27,.35); font-size: clamp(8px,.68vw,13px); }
.combat-channel-copy li { min-height: 0; grid-template-columns: 1.4rem 1fr; }
.combat-channel-copy li b,
.combat-channel-copy li span { font-size: clamp(7px,.52vw,10px); }
.match-page-v2 .tactical-panel .mini-map { height: calc(100% - 26px); border-color: rgba(212,178,102,.35); background: radial-gradient(circle at 50% 45%, rgba(57,91,131,.25), transparent 55%), #0b2446; }
.match-page-v2 .fleet-status-panel h2 { display: block; }
.enemy-fleet-status-art { width: 100%; height: calc(100% - 28px); object-fit: contain; filter: saturate(.72) brightness(.78) contrast(1.08); }
.enemy-fleet-status-live { top: 11%; bottom: 5%; }

/* No wooden volume insert in Pause; this is the combat navy-and-gold type system. */
.pause-command-frame { border-color: #967239; border-radius: 7px; background: linear-gradient(180deg, #17355d, #091a36 72%, #040d1f); }
.pause-command-frame .pause-audio { border: 1px solid rgba(214,174,92,.42); background: rgba(3,12,26,.7); }
.pause-art-mute { border: 2px solid #967239; background: linear-gradient(180deg,#173d6e,#071b39); color: #e7c373; }
.pause-art-volume { position: relative; border: 2px solid #967239; background: linear-gradient(180deg,#173d6e,#071b39); color: #e7c373; }
.pause-art-volume input { position: relative; left: auto; right: auto; bottom: auto; width: 100%; height: 28px; opacity: 1; accent-color: #d5ad5e; }
.pause-art-volume::after { display: none; }

/* Achievements use the same naval record language and Black Ops One headlines. */
.achievements-dialog { border-color: rgba(205,164,83,.5); background: #040c1a; }
.achievements-frame { background: linear-gradient(152deg, #0b2448, #06142b 55%, #020817); }
.achievements-frame::before { background: linear-gradient(90deg, transparent, #8c9aa4 34%, #d5ad5e); box-shadow: 0 0 18px rgba(213,173,94,.42); }
.achievements-header { border-bottom-color: rgba(213,173,94,.25); background: linear-gradient(90deg, #0d2b53, #06152d); }
.achievements-heading h2 { color: #f1d28e; letter-spacing: .045em; }
.achievements-close { border-color: rgba(213,173,94,.48); border-radius: 4px; background: #071a36; }
.achievements-summary { grid-template-columns: repeat(2,minmax(120px,180px)) 1fr; border-bottom-color: rgba(213,173,94,.2); }
.achievements-total-meter { align-self: center; height: 8px; overflow: hidden; background: #020714; }
.achievements-total-meter i { display: block; width: 0; height: 100%; background: linear-gradient(90deg,#8e6c32,#e1bf74); transition: width .2s ease; }
.achievements-list { gap: .65rem; }
.achievement-card { --state-color: #7e8b95; min-height: 128px; border-color: rgba(130,148,163,.28); background: linear-gradient(145deg, rgba(12,36,70,.96), rgba(4,14,31,.97)); }
.achievement-card[data-state="progress"] { --state-color: #a68a52; }
.achievement-card[data-state="completed"] { --state-color: #d8b566; }
.achievement-card h3 { color: #f0d394; font-size: 1.08rem; }
.achievement-emblem { transform: rotate(45deg); clip-path: none; border-color: rgba(213,173,94,.5); background: #07162f; }
.achievement-emblem > span,
.achievement-emblem { font-family: var(--gps-font-ui); }
.achievement-emblem { font-size: .92rem; }

/* Wispy gray-white launch smoke, conventional missiles only. */
.launcher-bloom { background: radial-gradient(circle, #fff 0 7%, #f4dca4 17%, rgba(209,199,171,.54) 34%, rgba(100,108,112,.28) 55%, transparent 74%); box-shadow: 0 0 14px rgba(246,224,175,.7); }
.launcher-bloom i { background: radial-gradient(ellipse, rgba(224,229,230,.7), rgba(126,135,139,.34) 48%, transparent 75%); filter: blur(3px); }
.missile { width: 8px; height: 30px; border-color: rgba(255,255,255,.5); background: linear-gradient(#f4f2e9,#bfc5c4 52%,#45515a 76%); box-shadow: 0 0 8px rgba(255,244,218,.75); }
.missile::before { background: linear-gradient(#fff1bb 0 5%, rgba(229,151,69,.78) 12%, rgba(189,197,199,.3) 40%, transparent 88%); }
.missile.is-enemy { filter: none; }

@media (max-height: 820px) and (min-width: 900px) {
  .gps-mode-navigation { bottom: 7.4svh; }
  .gps-mode-confirm { bottom: 1.1svh; }
  .match-page-v2 { --horizon-height: clamp(124px, 19svh, 154px); }
  .match-page-v2 .battlefield-shell { grid-template-columns: minmax(155px,18%) minmax(0,64%) minmax(155px,18%); }
  .combat-right-rail { grid-template-rows: 23% 31% 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .imagination-real-world img,
  .imagination-tabletop-world,
  .imagination-die-cast-ship,
  .imagination-material-glint,
  .combat-tabletop-world,
  .combat-real-world,
  .combat-real-world img,
  .combat-scale-glint { transition-duration: 80ms !important; transition-delay: 0ms !important; }
}

/* v0.9.2 flagship continuity: the physical game becomes real in the player's imagination. */
.gps-opening-worlds {
  position: absolute;
  z-index: 28;
  inset: 0;
  overflow: hidden;
  background: #02060e;
  opacity: 1;
  transition: opacity 900ms ease, visibility 0s linear 900ms;
  visibility: visible;
}
.gps-shadow-box-cover,
.gps-real-flagship-world,
.gps-real-flagship-world img,
.gps-opening-material-glint { position: absolute; inset: 0; width: 100%; height: 100%; }
.gps-shadow-box-cover {
  z-index: 1;
  object-fit: cover;
  filter: brightness(.82) contrast(1.08) saturate(.82);
  opacity: 1;
  transform: scale(1);
  transform-origin: 55% 58%;
  transition: opacity 760ms ease, transform 1500ms cubic-bezier(.2,.78,.2,1), filter 760ms ease;
}
.gps-real-flagship-world {
  z-index: 2;
  overflow: hidden;
  background: #030912;
  opacity: 0;
  transition: opacity 900ms ease;
}
.gps-real-flagship-world::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(1,5,12,.48), transparent 48%), radial-gradient(ellipse at 51% 53%, transparent 30%, rgba(1,4,10,.5) 96%);
  content: "";
}
.gps-real-flagship-world img {
  object-fit: cover;
  object-position: 50% 55%;
  filter: brightness(.86) saturate(.74) contrast(1.06);
  transform: scale(1.12);
  transition: transform 1500ms cubic-bezier(.2,.74,.2,1);
}
.gps-opening-material-glint {
  z-index: 3;
  left: -35%;
  width: 170%;
  background: linear-gradient(108deg, transparent 43%, rgba(241,215,151,.34) 49%, rgba(154,115,50,.08) 53%, transparent 59%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-34%);
}
.gps-bridge-screen.is-opening-real .gps-shadow-box-cover { opacity: 0; filter: brightness(.52) contrast(1.12) saturate(.55); transform: scale(1.68); }
.gps-bridge-screen.is-opening-real .gps-real-flagship-world { opacity: 1; }
.gps-bridge-screen.is-opening-real .gps-real-flagship-world img { transform: scale(1); }
.gps-bridge-screen.is-opening-real .gps-opening-material-glint { animation: gps-opening-world-glint 820ms ease both; }
.gps-bridge-screen.is-bridge-ready .gps-opening-worlds { opacity: 0; visibility: hidden; }
.gps-bridge-screen.is-start-view:not(.is-opening-real) .gps-opening-copy { opacity: 0; pointer-events: none; }
.gps-bridge-screen.is-opening-real .gps-opening-copy { opacity: 1; }
body.is-opening-intro .gps-start-controls { opacity: 0; pointer-events: none; }
.gps-start-controls { transition: opacity 520ms ease; }
.gps-opening-logo { filter: drop-shadow(0 6px 2px rgba(0,0,0,.88)) drop-shadow(0 14px 15px rgba(0,0,0,.72)) drop-shadow(0 0 9px rgba(216,173,78,.28)); }
@keyframes gps-opening-world-glint {
  0% { opacity: 0; transform: translateX(-34%); }
  32% { opacity: .82; }
  100% { opacity: 0; transform: translateX(34%); }
}

/* Retreat from the bridge, meet the real flagship, then reveal its die-cast form on the board. */
.imagination-bridge-world { position: absolute; z-index: 3; inset: 0; overflow: hidden; opacity: 1; }
.imagination-bridge-world img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.82) saturate(.75); }
.imagination-real-world { z-index: 2; opacity: 0; }
.imagination-real-world img { object-position: 50% 55%; opacity: 1; filter: brightness(.76) saturate(.7) contrast(1.06); transform: scale(1.18); transition: none; }
.imagination-tabletop-world { z-index: 1; opacity: 0; transform: scale(.88); transition: none; }
.imagination-die-cast-ship {
  top: 25%;
  left: 38%;
  width: min(38vw, 610px);
  max-height: 62vh;
  object-fit: contain;
  opacity: 1;
  filter: brightness(.88) saturate(.7) drop-shadow(0 20px 15px rgba(0,0,0,.78));
  transform: rotate(0deg) scale(1);
  transition: none;
}
.gps-deployment-transition.is-active .imagination-bridge-world { animation: gps-bridge-retreat 1580ms cubic-bezier(.22,.72,.18,1) both; }
.gps-deployment-transition.is-active .imagination-real-world { animation: gps-real-ship-pass 1580ms ease both; }
.gps-deployment-transition.is-active .imagination-real-world img { animation: gps-real-ship-scale 1580ms cubic-bezier(.2,.72,.2,1) both; }
.gps-deployment-transition.is-active .imagination-tabletop-world { animation: gps-tabletop-arrive 1580ms cubic-bezier(.16,.76,.19,1) both; }
.gps-deployment-transition.is-active .imagination-die-cast-ship { animation: gps-diecast-arrive 1580ms cubic-bezier(.16,.76,.19,1) both; }
@keyframes gps-bridge-retreat {
  0% { opacity: 1; transform: scale(1); }
  38% { opacity: 0; transform: scale(.66); }
  100% { opacity: 0; transform: scale(.58); }
}
@keyframes gps-real-ship-pass {
  0%, 18% { opacity: 0; }
  34%, 54% { opacity: 1; }
  74%, 100% { opacity: 0; }
}
@keyframes gps-real-ship-scale { 0%, 18% { transform: scale(1.28); } 68%, 100% { transform: scale(.9); } }
@keyframes gps-tabletop-arrive { 0%, 47% { opacity: 0; transform: scale(.76); } 76%, 100% { opacity: 1; transform: scale(1); } }
@keyframes gps-diecast-arrive { 0%, 48% { opacity: 0; transform: scale(2.2); } 72% { opacity: .98; } 100% { opacity: 1; transform: scale(1); } }

/* DEPLOY begins exactly at the player's 1x4 flagship, then turns that piece into the command ship. */
.combat-deployment-transition {
  --flagship-left: 44vw;
  --flagship-top: 36vh;
  --flagship-width: 5vw;
  --flagship-height: 22vh;
  --flagship-image-width: 5vw;
  --flagship-image-height: 22vh;
  --flagship-image-turn: 0deg;
  --flagship-shift-x: 0px;
  --flagship-shift-y: 0px;
  background: transparent;
}
.combat-transition-ocean { position: absolute; z-index: 0; inset: 0; background: radial-gradient(ellipse at 50% 34%, #29445e, #081b30 58%, #020817); opacity: 0; }
.combat-transition-ocean::after { position: absolute; inset: 0; background: repeating-linear-gradient(174deg, rgba(194,211,224,.07) 0 1px, transparent 2px 25px); content: ""; }
.combat-transition-flagship-origin {
  position: absolute;
  z-index: 4;
  top: var(--flagship-top);
  left: var(--flagship-left);
  width: var(--flagship-width);
  height: var(--flagship-height);
  opacity: 1;
  transform-origin: 50% 50%;
}
.combat-transition-flagship-origin img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--flagship-image-width);
  height: var(--flagship-image-height);
  object-fit: fill;
  filter: brightness(1.05) drop-shadow(0 4px 4px rgba(0,0,0,.82));
  transform: translate(-50%,-50%) rotate(var(--flagship-image-turn));
}
.combat-transition-flagship-diecast {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: min(62vw, 980px);
  height: 78vh;
  object-fit: contain;
  opacity: 0;
  filter: brightness(.88) saturate(.72) drop-shadow(0 26px 18px rgba(0,0,0,.78));
  transform: translate(-50%,-50%) rotate(-7deg) scale(.76);
}
.combat-real-world { z-index: 2; opacity: 0; background: transparent; transition: none; }
.combat-real-world::before { display: none; }
.combat-real-world img { width: min(90vw, 1500px); height: 96%; opacity: 1; transform: translateX(-50%) scale(.82); transition: none; }
.combat-deployment-transition.is-active .combat-transition-ocean { animation: gps-combat-ocean-in 1560ms ease both; }
.combat-deployment-transition.is-active .combat-transition-flagship-origin { animation: gps-board-flagship-zoom 1560ms cubic-bezier(.18,.72,.18,1) both; }
.combat-deployment-transition.is-active .combat-transition-flagship-diecast { animation: gps-flagship-turn-real 1560ms cubic-bezier(.18,.72,.18,1) both; }
.combat-deployment-transition.is-active .combat-real-world { animation: gps-combat-reality-in 1560ms ease both; }
.combat-deployment-transition.is-active .combat-real-world img { animation: gps-combat-ship-settle 1560ms cubic-bezier(.18,.72,.18,1) both; }
.combat-deployment-transition.is-active .combat-scale-glint { animation: gps-deploy-glint 1560ms ease both; }
@keyframes gps-board-flagship-zoom {
  0% { opacity: 1; transform: translate(0,0) scale(1); }
  46% { opacity: 1; transform: translate(var(--flagship-shift-x), var(--flagship-shift-y)) scale(4.2); }
  62%, 100% { opacity: 0; transform: translate(var(--flagship-shift-x), var(--flagship-shift-y)) scale(5); }
}
@keyframes gps-flagship-turn-real {
  0%, 30% { opacity: 0; transform: translate(-50%,-50%) rotate(8deg) scale(.68); }
  44%, 70% { opacity: 1; transform: translate(-50%,-50%) rotate(-7deg) scale(1); }
  84%, 100% { opacity: 0; transform: translate(-50%,-50%) rotate(-10deg) scale(1.14); }
}
@keyframes gps-combat-ocean-in { 0%, 45% { opacity: 0; } 74%, 100% { opacity: 1; } }
@keyframes gps-combat-reality-in { 0%, 56% { opacity: 0; } 82%, 100% { opacity: 1; } }
@keyframes gps-combat-ship-settle { 0%, 54% { transform: translateX(-50%) scale(1.18); } 100% { transform: translateX(-50%) scale(1); } }
@keyframes gps-deploy-glint { 0%, 42% { opacity: 0; transform: translateX(-45%); } 58% { opacity: .86; } 88%, 100% { opacity: 0; transform: translateX(45%); } }

@media (prefers-reduced-motion: reduce) {
  .gps-shadow-box-cover,
  .gps-real-flagship-world,
  .gps-real-flagship-world img,
  .gps-opening-worlds { transition-duration: 80ms !important; transition-delay: 0ms !important; }
  .gps-opening-material-glint,
  .imagination-bridge-world,
  .imagination-real-world,
  .imagination-real-world img,
  .imagination-tabletop-world,
  .imagination-die-cast-ship,
  .combat-transition-ocean,
  .combat-transition-flagship-origin,
  .combat-transition-flagship-diecast,
  .combat-real-world,
  .combat-real-world img,
  .combat-scale-glint { animation-duration: 90ms !important; animation-delay: 0ms !important; }
}

/* Final exterior controls: navy-and-gold typography over the cinematic, never Map Room wood. */
.gps-opening-worlds {
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100svh;
  transform: translate(-50%,-50%);
}
.gps-radar-action {
  top: 73%;
  width: clamp(285px, 24%, 410px);
  height: clamp(54px, 6.8%, 76px);
  aspect-ratio: auto;
  border-radius: 6px;
  clip-path: none;
  font-size: clamp(17px, 1.35vw, 26px);
}
.gps-start-controls .gps-achievements-control {
  display: grid;
  width: clamp(190px, 15vw, 265px);
  height: clamp(48px, 6.2svh, 68px);
  place-items: center;
  border: 2px solid #9f7939;
  border-radius: 5px;
  background: linear-gradient(180deg,#153660,#07172f 72%,#020918);
  box-shadow: inset 0 0 0 2px #020714, inset 0 1px rgba(255,255,255,.13), 0 7px 16px rgba(0,0,0,.62);
  color: #efd18b;
}
.gps-start-controls .gps-achievements-control img { display: none; }
.gps-start-controls .gps-achievements-control::after { content: "ACHIEVEMENTS"; font: 400 clamp(13px,1.1vw,21px)/1 var(--gps-font-display); letter-spacing: .055em; text-shadow: 0 2px 2px #000; }
.gps-start-controls .gps-global-audio {
  right: clamp(155px, 12vw, 225px);
  width: clamp(260px, 20vw, 350px);
  height: clamp(50px, 6.8svh, 76px);
  border: 2px solid #9f7939;
  border-radius: 5px;
  background: linear-gradient(180deg,#153660,#07172f 72%,#020918);
  box-shadow: inset 0 0 0 2px #020714, inset 0 1px rgba(255,255,255,.13), 0 7px 16px rgba(0,0,0,.62);
}
.gps-start-controls .gps-global-audio::before { position: absolute; top: 8%; left: 4%; color: #efd18b; content: "AUDIO"; font: 400 clamp(7px,.58vw,11px)/1 var(--gps-font-display); letter-spacing: .08em; }
.gps-start-controls .gps-global-audio-art { display: none; }
.gps-start-controls .gps-audio-toggle {
  top: 38%;
  left: 4%;
  width: 25%;
  height: 43%;
  border: 1px solid #a37b39;
  border-radius: 3px;
  background: #091a34;
  color: #e8ca87;
  font: 700 clamp(8px,.62vw,12px)/1 var(--gps-font-ui);
}
.gps-start-controls .gps-volume-control { top: 39%; right: 4%; width: 64%; height: 37%; }
.gps-start-controls .gps-volume-control input { border: 1px solid #8d713d; border-radius: 3px; background: #020b1d; box-shadow: inset 0 2px 5px #000; }
.gps-start-controls .gps-volume-control input::-webkit-slider-thumb { width: clamp(10px,.8vw,15px); height: clamp(25px,2.5vw,37px); margin-top: -2px; border-color: #5d4521; border-radius: 2px; background: linear-gradient(90deg,#8f692c,#e0b65e 48%,#856126); }
.gps-start-controls .gps-volume-control input::-moz-range-thumb { width: clamp(10px,.8vw,15px); height: clamp(25px,2.5vw,37px); border-color: #5d4521; border-radius: 2px; background: linear-gradient(90deg,#8f692c,#e0b65e 48%,#856126); }
.gps-bridge-screen.is-start-view .gps-radar-action { animation: gps-exterior-gold-pulse 2.15s ease-in-out infinite; }
.gps-bridge-screen.is-start-view .gps-radar-action:hover,
.gps-bridge-screen.is-start-view .gps-radar-action:focus-visible { animation-play-state: paused; filter: brightness(1.12) drop-shadow(0 0 5px rgba(255,232,169,.72)) drop-shadow(0 0 19px rgba(207,160,67,.64)); }
@keyframes gps-exterior-gold-pulse {
  0%,100% { filter: brightness(1.02) drop-shadow(0 0 5px rgba(255,226,146,.48)) drop-shadow(0 0 13px rgba(197,148,55,.38)); }
  50% { filter: brightness(1.08) drop-shadow(0 0 8px rgba(255,232,169,.72)) drop-shadow(0 0 20px rgba(215,168,72,.58)); }
}

/* Live Bridge hardware over the clean naval background. */
.gps-bridge-screen.is-bridge-ready .gps-bridge-art-open { opacity: 0; }
.gps-bridge-mode-status {
  top: 84.2%;
  left: 32.8%;
  width: 34.4%;
  height: 10.5%;
  padding: .5% 1.2%;
  gap: 3%;
}
.gps-bridge-mode-status > small { display: none; }
.gps-bridge-mode-status > i { width: 60%; }
.gps-bridge-hit,
.gps-bridge-volume,
.gps-hit-cgh {
  border: 1px solid #7c878d;
  border-radius: 3px;
  background: linear-gradient(180deg,#374147,#20282d 56%,#11181c);
  box-shadow: inset 0 0 0 2px #11181c, inset 0 1px rgba(255,255,255,.14), 0 4px 7px rgba(0,0,0,.58);
  color: #d7dcda;
  text-shadow: 0 1px 2px #000;
}
.gps-bridge-hit::after,
.gps-hit-cgh::after { position: absolute; inset: 0; display: grid; place-items: center; font: 700 clamp(7px,.72vw,14px)/1 var(--gps-font-ui); letter-spacing: .09em; }
.gps-hit-back { top: 2.4%; left: 3%; width: 12%; height: 5.4%; }
.gps-hit-back::after { content: "BACK"; }
.gps-hit-achievements { top: 2.4%; left: 17%; width: 15%; height: 5.4%; }
.gps-hit-achievements::after { content: "ACHIEVEMENTS"; }
.gps-hit-mute { top: 2.4%; left: 68.2%; width: 7%; height: 5.4%; }
.gps-hit-mute::after { content: "MUTE"; }
.gps-bridge-volume { top: 2.4%; left: 76%; width: 13%; height: 5.4%; padding: 1.6% .7% .25%; }
.gps-bridge-volume::before { position: absolute; top: 9%; left: 50%; color: #d7dcda; content: "MASTER VOLUME"; font: 700 clamp(4px,.38vw,7px)/1 var(--gps-font-ui); letter-spacing: .08em; transform: translateX(-50%); }
.gps-bridge-volume input { border: 1px solid #182229; border-radius: 2px; background: #101920; box-shadow: inset 0 2px 4px #000; }
.gps-hit-cgh { top: 2.4%; left: 90.5%; width: 6.5%; height: 5.4%; }
.gps-hit-cgh::after { content: "CGH"; color: #d7dcda; font-family: var(--gps-font-display); }
.gps-bridge-hit:hover,
.gps-bridge-hit:focus-visible,
.gps-hit-cgh:hover,
.gps-hit-cgh:focus-visible { border-color: #d3b571; background: linear-gradient(180deg,#909ba1,#5d686f 54%,#333f46); outline: 2px solid rgba(217,182,105,.55); }
.map-room-logo-clean {
  top: 3.2%;
  left: 1.2%;
  width: 20.8%;
  height: 75%;
  padding: 0;
  border: 0;
  background: transparent;
  object-fit: fill;
  filter: drop-shadow(0 5px 3px rgba(0,0,0,.9)) drop-shadow(0 13px 15px rgba(0,0,0,.62));
}
.gps-deployment-transition.is-active .imagination-real-world img { opacity: 1; filter: brightness(.84) saturate(.68) contrast(1.08); }
.match-page-v2 .enemy-horizon > img:first-child { filter: saturate(.42) hue-rotate(18deg) contrast(1.12) brightness(.61); }
.combat-command-ship .command-ship {
  top: 3%;
  right: 0;
  bottom: auto;
  left: 0;
  width: 100%;
  height: 61%;
  object-fit: contain;
  object-position: 50% 0;
  filter: brightness(.78) contrast(1.08) saturate(.58) drop-shadow(0 16px 13px rgba(0,0,0,.7));
}
.combat-command-ship .player-missile-battery { top: 19%; left: 52%; }
.combat-command-ship .missile-hardpoint { top: 21%; left: 56%; }
.combat-command-ship .combat-escort {
  position: absolute;
  z-index: 3;
  display: block;
  object-fit: contain;
  opacity: .88;
  filter: brightness(.72) saturate(.55) drop-shadow(0 9px 7px rgba(0,0,0,.72));
}
.combat-command-ship .combat-escort-a { top: 60%; left: 20%; width: 30%; height: 28%; transform: rotate(90deg); }
.combat-command-ship .combat-escort-b { top: 78%; right: 17%; width: 22%; height: 18%; transform: rotate(-24deg); }
.match-page-v2 .board-stage {
  display: grid;
  height: 100%;
  min-height: 0;
  place-items: center;
  transform: none;
}
.match-page-v2 .board-assembly {
  width: 100%;
  height: auto;
  max-height: 100%;
  aspect-ratio: 24 / 16;
}
.match-page-v2 .board-plane { width: 100%; height: 100%; }
.combat-command-ship,
.combat-right-rail { height: 100%; min-height: 0; }
.combat-right-rail > section { min-height: 0; overflow: hidden; }

/* v0.9.2 combat command surface revision: one scalable navy-and-gold console. */
.match-page-v2 {
  --horizon-height: clamp(122px, 17svh, 178px);
}

.match-page-v2 .battlefield-shell {
  grid-template-columns: minmax(178px, 15.5%) minmax(0, 68.5%) minmax(212px, 16%);
  gap: clamp(6px, .5vw, 10px);
}

.match-page-v2 .board-surface {
  border: 2px solid rgba(211, 176, 96, .68);
  box-shadow:
    inset 0 0 0 1px rgba(3, 12, 26, .9),
    inset 0 0 48px rgba(1, 8, 20, .34),
    0 10px 24px rgba(0, 0, 0, .42);
}

.combat-command-ship {
  isolation: isolate;
  border: 2px solid #8e6b34;
  border-radius: 7px;
  background: #041025;
  box-shadow:
    inset 0 0 0 2px #020817,
    inset 0 0 0 3px rgba(224, 190, 115, .22),
    0 9px 18px rgba(0, 0, 0, .5);
}

.combat-command-ship::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2, 8, 18, .06) 48%, rgba(3, 12, 27, .76) 78%, #030b1c 100%),
    linear-gradient(90deg, rgba(2, 7, 16, .28), transparent 28% 72%, rgba(2, 7, 16, .16));
  content: "";
  pointer-events: none;
}

.combat-command-ship .command-ship {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 50%;
  filter: brightness(.9) contrast(1.08) saturate(.62);
  animation: none;
  transform: none;
}

.combat-command-ship .combat-escort { display: none; }
.combat-command-ship .player-missile-battery { top: 48%; left: 52%; width: 9%; }
.combat-command-ship .missile-hardpoint { top: 50%; left: 56%; }

.combat-flagship-copy {
  position: absolute;
  z-index: 14;
  right: clamp(8px, .8vw, 14px);
  bottom: clamp(10px, 1.1vh, 18px);
  left: clamp(8px, .8vw, 14px);
  display: grid;
  padding: clamp(8px, .75vw, 13px);
  border-top: 1px solid rgba(213, 173, 94, .6);
  background: linear-gradient(90deg, rgba(3, 12, 27, .9), rgba(7, 27, 52, .58));
  box-shadow: 0 -8px 20px rgba(2, 7, 16, .3);
  text-shadow: 0 2px 2px #000;
}

.combat-flagship-copy > span {
  color: #9fabb4;
  font: 700 clamp(7px, .52vw, 10px)/1 var(--gps-font-ui);
  letter-spacing: .14em;
}

.combat-flagship-copy > strong {
  margin-top: 4px;
  color: #f0d496;
  font: 400 clamp(12px, 1.05vw, 20px)/1 var(--gps-font-display);
  letter-spacing: .035em;
}

.combat-flagship-copy > small {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 7px;
  color: #d5dce0;
  font: 700 clamp(7px, .58vw, 11px)/1 var(--gps-font-ui);
  letter-spacing: .09em;
}

.combat-flagship-copy b::after {
  color: #aab3ba;
  content: "CYCLING";
  font-weight: 800;
}

.match-page-v2[data-actor="player"][data-busy="false"] .combat-flagship-copy b::after {
  color: #e8c57e;
  content: "READY";
}

.combat-right-rail {
  grid-template-rows: 28% 32% 40%;
  gap: 0;
  padding: 4px;
  overflow: hidden;
  border: 2px solid #8e6b34;
  border-radius: 7px;
  background: linear-gradient(180deg, #142f55, #081a37 64%, #030c1e);
  box-shadow:
    inset 0 0 0 2px #020817,
    inset 0 0 0 3px rgba(224, 190, 115, .2),
    0 9px 18px rgba(0, 0, 0, .5);
}

.combat-right-rail > section {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.combat-right-rail .combat-channel {
  aspect-ratio: auto;
}

.combat-right-rail > section:not(:last-child) {
  border-bottom: 1px solid rgba(213, 173, 94, .42) !important;
}

.combat-right-rail h2,
.combat-right-rail .panel-heading span {
  margin-bottom: clamp(5px, .55vh, 9px);
  color: #f0d496;
  font-size: clamp(10px, .84vw, 16px);
  letter-spacing: .06em;
}

.combat-right-rail .panel-heading strong {
  color: #aebcc7;
  font-size: clamp(8px, .62vw, 12px);
}

.combat-channel-copy > strong {
  padding: clamp(4px, .42vw, 8px);
  font-size: clamp(9px, .72vw, 14px);
}

.combat-channel-copy li {
  grid-template-columns: clamp(18px, 1.35vw, 26px) 1fr;
  padding-top: clamp(3px, .34vh, 6px);
  padding-bottom: clamp(3px, .34vh, 6px);
}

.combat-channel-copy li b,
.combat-channel-copy li span {
  font-size: clamp(7px, .56vw, 11px);
}

.match-page-v2 .tactical-panel .mini-map {
  height: calc(100% - 28px);
  border-color: rgba(213, 173, 94, .44);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, .35);
}

.enemy-fleet-status-art {
  display: none;
}

.enemy-fleet-status-live {
  position: static;
  inset: auto;
  height: calc(100% - 30px);
  gap: clamp(3px, .35vw, 6px);
}

.enemy-fleet-status-live > span {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(154, 178, 201, .22);
  border-left: 2px solid rgba(213, 173, 94, .62);
  border-radius: 2px;
  background: linear-gradient(145deg, rgba(19, 49, 88, .84), rgba(4, 15, 34, .9));
  box-shadow: inset 0 0 12px rgba(0, 0, 0, .24);
}

.enemy-fleet-status-live > span::before {
  position: absolute;
  top: 12%;
  right: 7%;
  left: 7%;
  overflow: hidden;
  color: #c9a85f;
  content: attr(data-enemy-label);
  font: 700 clamp(6px, .45vw, 9px)/1 var(--gps-font-ui);
  letter-spacing: .035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.enemy-fleet-status-live > span::after {
  position: absolute;
  right: 7%;
  bottom: 12%;
  left: 7%;
  color: #aab7c1;
  content: "CONTACT";
  font: 700 clamp(6px, .42vw, 8px)/1 var(--gps-font-ui);
  letter-spacing: .08em;
}

.enemy-fleet-status-live > span i {
  top: 47%;
  right: 7%;
  width: 42%;
  height: 6%;
  border-radius: 999px;
  background: linear-gradient(90deg, #617489, #c5d0d7);
  box-shadow: 0 0 5px rgba(152, 185, 214, .28);
}

.enemy-fleet-status-live > span.is-damaged::after {
  color: #e2a35c;
  content: "DAMAGED";
}

.enemy-fleet-status-live > span.is-damaged i {
  background: linear-gradient(90deg, #7f3e22, #e1a256);
  box-shadow: 0 0 7px rgba(225, 131, 54, .54);
}

.enemy-fleet-status-live > span.is-sunk::after {
  color: #e06a59;
  content: "DESTROYED";
}

.enemy-fleet-status-live > span.is-empty::after {
  content: "NO CONTACT";
}

@media (max-height: 820px) and (min-width: 900px) {
  .match-page-v2 {
    --horizon-height: clamp(116px, 17svh, 136px);
  }

  .match-page-v2 .battlefield-shell {
    grid-template-columns: minmax(176px, 15.5%) minmax(0, 68.5%) minmax(210px, 16%);
  }

  .combat-right-rail { grid-template-rows: 29% 32% 39%; }
}
/* v0.9.2 opening controller — cloaked fleet to live Map Room selection. */
#mode-screen.is-opening-cinematic {
  position: fixed;
  inset: 0;
  min-height: 100svh;
  overflow: hidden;
  background: #01040b;
}

#mode-screen.is-opening-cinematic .gps-bridge-canvas,
#mode-screen.is-opening-cinematic .gps-opening-worlds {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
}

.gps-opening-cinematic {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  background: #01040b;
  opacity: 0;
  transition: opacity 900ms ease;
}

.gps-opening-cinematic.is-ready { opacity: 1; }

.gps-opening-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #01040b;
  opacity: 0;
  transition: none;
}

.gps-opening-cinematic[data-phase="cloaked"] .gps-opening-video-cloaked,
.gps-opening-cinematic[data-phase="post"] .gps-opening-video-post { opacity: 1; }

.gps-opening-credit {
  position: absolute;
  z-index: 7;
  top: clamp(26px, 6.5svh, 54px);
  left: 50%;
  width: min(88vw, 920px);
  color: #f4dfae;
  font: 400 clamp(16px, 2.1vw, 34px)/1.15 var(--gps-font-display);
  letter-spacing: .22em;
  text-align: center;
  text-shadow: 0 3px 3px #000, 0 0 24px rgba(224, 186, 104, .42);
  opacity: 0;
  transform: translateX(-50%);
  pointer-events: none;
}

.gps-opening-cinematic.is-ready[data-phase="cloaked"] .gps-opening-credit {
  animation: gps-opening-credit 4s ease both;
}

@keyframes gps-opening-credit {
  0%, 18% { opacity: 0; transform: translate(-50%, 8px); }
  30%, 74% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -5px); }
}

.gps-opening-shadow-box {
  position: absolute;
  z-index: 5;
  inset: 0;
  overflow: hidden;
  background: #01040b;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.gps-opening-cinematic[data-phase="hub"] .gps-opening-shadow-box {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.gps-shadow-box-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100vw, 177.7778svh);
  height: max(100svh, 56.25vw);
  transform: translate(-50%, -50%);
}

.gps-shadow-box-stage > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  -webkit-user-drag: none;
}

.gps-opening-hub { position: absolute; inset: 0; }

.gps-shadow-display {
  position: absolute;
  top: 7.1%;
  left: 22.55%;
  width: 58.55%;
  height: 60.7%;
  overflow: hidden;
  color: #d9efff;
  font-family: var(--gps-font-display);
  text-shadow: 0 2px 3px #001127, 0 0 12px rgba(89, 181, 255, .48);
}

.gps-shadow-display::after {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(126, 202, 255, .18);
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(157, 218, 255, .024) 3px 4px);
  box-shadow: inset 0 0 56px rgba(37, 123, 206, .12);
  content: "";
  pointer-events: none;
}

.gps-shadow-welcome {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 92%;
  margin: 0;
  font-size: clamp(18px, 2.8vw, 48px);
  letter-spacing: .14em;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -42%);
  transition: opacity 440ms ease, transform 560ms ease;
}

.gps-opening-hub.is-welcome-active .gps-shadow-welcome {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.gps-opening-hub.is-actions-ready .gps-shadow-welcome {
  opacity: 0;
  transform: translate(-50%, -58%);
}

.gps-shadow-actions {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: grid;
  width: min(76%, 660px);
  gap: clamp(10px, 1.7svh, 20px);
  opacity: 0;
  transform: translate(-50%, -43%);
  transition: opacity 480ms ease, transform 560ms ease;
  pointer-events: none;
}

.gps-opening-hub.is-actions-ready .gps-shadow-actions {
  opacity: 1;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.gps-shadow-actions button,
.gps-fleet-inspector-nav button {
  min-height: clamp(44px, 6.4svh, 62px);
  border: 1px solid rgba(170, 221, 255, .72);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(19, 72, 124, .86), rgba(3, 25, 57, .92));
  box-shadow: inset 0 0 0 2px rgba(2, 15, 39, .82), 0 7px 18px rgba(0, 6, 20, .42), 0 0 18px rgba(69, 164, 234, .14);
  color: #e2f4ff;
  font: 400 clamp(12px, 1.35vw, 23px)/1 var(--gps-font-display);
  letter-spacing: .1em;
  text-shadow: 0 2px 2px #001229;
}

.gps-shadow-actions button:hover,
.gps-shadow-actions button:focus-visible,
.gps-fleet-inspector-nav button:hover,
.gps-fleet-inspector-nav button:focus-visible {
  outline: 2px solid #dff4ff;
  outline-offset: 3px;
  filter: brightness(1.18);
  box-shadow: inset 0 0 0 2px rgba(2, 15, 39, .82), 0 0 24px rgba(111, 197, 255, .52);
}

.gps-fleet-inspector {
  position: absolute;
  z-index: 3;
  inset: clamp(10px, 2.2svh, 22px) clamp(14px, 2vw, 28px);
  display: block;
  opacity: 0;
  transform: translateY(9px);
  transition: opacity 320ms ease, transform 380ms ease;
  pointer-events: none;
}

.gps-opening-hub.is-inspecting .gps-shadow-actions { opacity: 0; visibility: hidden; pointer-events: none; }
.gps-opening-hub.is-inspecting .gps-fleet-inspector { opacity: 1; transform: none; pointer-events: auto; }

.gps-fleet-blueprint {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(188, 226, 248, .35);
  background: rgba(5, 49, 92, .16);
  box-shadow: inset 0 0 34px rgba(4, 30, 69, .36);
}

.gps-fleet-blueprint img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: saturate(.94) brightness(.98);
  transition: opacity 180ms ease, filter 180ms ease;
}

.gps-fleet-blueprint img.is-sideways {
  inset: 50% auto auto 50%;
  width: 56%;
  height: 178%;
  transform: translate(-50%, -50%) rotate(90deg);
}

.gps-opening-hub.is-inspecting .gps-fleet-inspector:not(.is-sideways) .gps-fleet-inspector-kicker,
.gps-opening-hub.is-inspecting .gps-fleet-inspector:not(.is-sideways) h2,
.gps-opening-hub.is-inspecting .gps-fleet-inspector:not(.is-sideways) > p,
.gps-opening-hub.is-inspecting .gps-fleet-inspector:not(.is-sideways) dl {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.gps-fleet-inspector.is-sideways .gps-fleet-inspector-kicker,
.gps-fleet-inspector.is-sideways h2,
.gps-fleet-inspector.is-sideways > p,
.gps-fleet-inspector.is-sideways dl {
  position: absolute;
  z-index: 1;
  right: clamp(12px, 1.2vw, 20px);
  left: clamp(12px, 1.2vw, 20px);
  pointer-events: none;
}

.gps-fleet-inspector.is-sideways .gps-fleet-inspector-kicker { top: clamp(8px, 1svh, 12px); }
.gps-fleet-inspector.is-sideways h2 { top: clamp(20px, 2.3svh, 30px); }
.gps-fleet-inspector.is-sideways > p { top: clamp(48px, 6svh, 68px); }
.gps-fleet-inspector.is-sideways dl {
  bottom: clamp(7px, 1svh, 12px);
  padding: clamp(5px, .7svh, 8px) clamp(8px, .8vw, 12px);
  background: linear-gradient(90deg, rgba(4, 34, 70, .72), rgba(4, 34, 70, .22), rgba(4, 34, 70, .72));
}

.gps-fleet-inspector-kicker {
  color: #8dccf4;
  font: 400 clamp(8px, .72vw, 13px)/1 var(--gps-font-display);
  letter-spacing: .14em;
}
.gps-fleet-inspector-kicker span { color: #f3d790; }
.gps-fleet-inspector h2 { margin: 0; color: #edf8ff; font-size: clamp(17px, 2vw, 34px); letter-spacing: .1em; }
.gps-fleet-inspector > p { margin: 0; color: #b8dcf3; font: 500 clamp(9px, .9vw, 15px)/1.3 var(--gps-font-ui); letter-spacing: .03em; }
.gps-fleet-inspector dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  margin: 0;
  gap: clamp(4px, .85svh, 9px) clamp(16px, 2.2vw, 32px);
}
.gps-fleet-inspector dl > div { display: grid; grid-template-columns: minmax(64px, .9fr) 1.2fr; align-items: baseline; border-bottom: 1px solid rgba(131, 196, 238, .2); }
.gps-fleet-inspector dt { color: #77b8e2; font: 400 clamp(7px, .62vw, 11px)/1.2 var(--gps-font-display); letter-spacing: .08em; }
.gps-fleet-inspector dd { margin: 0; color: #e1f2fc; font: 600 clamp(9px, .76vw, 13px)/1.2 var(--gps-font-ui); text-align: right; }

.gps-fleet-inspector-nav {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: clamp(8px, 1vw, 16px);
  left: clamp(8px, 1vw, 16px);
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none;
}
.gps-fleet-inspector-nav button { min-height: 44px; font-size: clamp(8px, .75vw, 13px); }
.gps-fleet-inspector-nav button:first-child,
.gps-fleet-inspector-nav button:last-child { width: clamp(44px, 3vw, 48px); padding: 0; pointer-events: auto; }

.gps-fleet-hotspots { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.gps-fleet-hotspots button {
  position: absolute;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 48%;
  background: transparent;
  opacity: 0;
  cursor: pointer;
  pointer-events: none;
}
.gps-opening-hub.is-inspecting .gps-fleet-hotspots button { opacity: 1; pointer-events: auto; }
.gps-fleet-hotspots button:nth-child(1) { top: 72%; left: 38%; width: 7%; height: 24%; }
.gps-fleet-hotspots button:nth-child(2) { top: 71%; left: 74%; width: 8%; height: 25%; }
.gps-fleet-hotspots button:nth-child(3) { top: 68%; left: 27%; width: 11%; height: 30%; }
.gps-fleet-hotspots button:nth-child(4) { top: 67%; left: 58%; width: 14%; height: 31%; }
.gps-fleet-hotspots button:nth-child(5) { top: 67%; left: 45%; width: 12%; height: 31%; }
.gps-fleet-hotspots button.is-selected {
  border-color: rgba(255, 220, 146, .75);
  background: radial-gradient(ellipse at 50% 72%, rgba(255, 234, 180, .34), rgba(255, 200, 92, .08) 56%, transparent 73%);
  box-shadow: 0 0 24px 10px rgba(255, 200, 102, .26), inset 0 0 22px rgba(255, 231, 172, .28);
}
.gps-fleet-hotspots button:hover:not(.is-selected) {
  border-color: rgba(168, 217, 255, .38);
  background: radial-gradient(ellipse at 50% 72%, rgba(136, 207, 255, .16), transparent 70%);
}
.gps-fleet-hotspots button:focus-visible { outline: 2px solid #fff1b8; outline-offset: 3px; }

.gps-opening-cinematic-shade {
  position: absolute;
  z-index: 4;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(1, 4, 11, .34), transparent 27%, transparent 69%, rgba(1, 4, 11, .62)),
    radial-gradient(ellipse at 50% 48%, transparent 42%, rgba(1, 4, 11, .32) 100%);
  pointer-events: none;
  transition: background-color 560ms ease, opacity 560ms ease;
}

.gps-opening-cinematic.is-map-room-handoff .gps-opening-cinematic-shade {
  background-color: #01040b;
  opacity: 1;
}

#mode-screen.is-opening-cinematic .gps-opening-copy {
  position: absolute;
  z-index: 8;
  inset: 0;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  transform: none;
  opacity: 1;
  pointer-events: none;
  transition: opacity 420ms ease, visibility 420ms ease;
}

#mode-screen.is-opening-cinematic .gps-opening-logo {
  position: absolute;
  top: clamp(105px, 17svh, 154px);
  left: clamp(22px, 4vw, 60px);
  width: min(57vw, 780px);
  height: auto;
  transform: none;
  filter: drop-shadow(0 5px 2px rgba(0, 0, 0, .92)) drop-shadow(0 15px 22px rgba(0, 0, 0, .78));
  animation: none;
  opacity: 0;
  transition: opacity 800ms ease;
}

#mode-screen.is-opening-cinematic .gps-opening-copy.is-title-revealed .gps-opening-logo { opacity: 1; }
#mode-screen.is-opening-cinematic .gps-opening-copy.is-logo-departing .gps-opening-logo,
body.is-opening-hub #mode-screen.is-opening-cinematic .gps-opening-copy.is-title-revealed .gps-opening-logo { opacity: 0; }
body.is-opening-hub #mode-screen.is-opening-cinematic .gps-opening-copy { visibility: hidden; }

#mode-screen.is-opening-cinematic .gps-radar-action {
  position: absolute;
  top: auto;
  right: auto;
  bottom: clamp(42px, 8svh, 86px);
  left: 50%;
  display: grid;
  place-items: center;
  width: clamp(220px, 22vw, 330px);
  height: clamp(54px, 7svh, 72px);
  padding: 0 32px;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
  border: 1px solid #e6c475;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(11, 28, 58, .97), rgba(3, 10, 27, .98));
  box-shadow: inset 0 0 0 2px #020714, inset 0 0 0 3px rgba(230, 196, 117, .68), 0 12px 34px rgba(0, 0, 0, .62), 0 0 24px rgba(202, 157, 66, .32);
  color: #f5dfac;
  font: 400 clamp(18px, 1.65vw, 27px)/1 var(--gps-font-display);
  letter-spacing: .16em;
  text-shadow: 0 2px 2px #000;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 360ms ease, filter 180ms ease, box-shadow 180ms ease;
  pointer-events: auto;
}

body:not(.is-opening-intro).is-opening-cloaked #mode-screen.is-opening-cinematic .gps-opening-copy.is-title-revealed .gps-radar-action { opacity: 1; }
body.is-opening-post #mode-screen.is-opening-cinematic .gps-radar-action,
body.is-opening-hub #mode-screen.is-opening-cinematic .gps-radar-action { opacity: 0; pointer-events: none; }

#mode-screen.is-opening-cinematic .gps-radar-action:hover,
#mode-screen.is-opening-cinematic .gps-radar-action:focus-visible {
  filter: brightness(1.12);
  box-shadow: inset 0 0 0 2px #020714, inset 0 0 0 3px #f1d48d, 0 0 30px rgba(211, 169, 82, .62);
}

#mode-screen.is-opening-cinematic .gps-radar-action:active,
#mode-screen.is-opening-cinematic .gps-radar-action.is-activating {
  transform: translateX(-50%) translateY(2px) scale(.98);
}

.map-room-screen.is-mode-selection::after {
  position: fixed;
  z-index: 34;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 7, 18, .16), rgba(2, 7, 18, .68));
  content: "";
  pointer-events: none;
}

.map-room-screen.is-mode-selection .map-room-stage {
  filter: brightness(.58) saturate(.76);
  animation: gps-map-room-opening-arrival 760ms ease-out both;
}

.map-room-screen.is-mode-selection .map-room-playfield,
.map-room-screen.is-mode-selection .map-room-command-panel,
.map-room-screen.is-mode-selection .map-room-logo-clean {
  opacity: .12;
  pointer-events: none;
}

.map-room-screen .gps-mode-reveal {
  position: fixed;
  z-index: 40;
  inset: clamp(74px, 9svh, 104px) clamp(34px, 5vw, 92px) clamp(28px, 4svh, 52px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  align-items: center;
  max-height: none;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  animation: gps-map-mode-cards-arrive 720ms cubic-bezier(.18, .78, .2, 1) both;
}

.map-room-screen .gps-mode-reveal[hidden] { display: none; }

.map-room-screen .gps-select-mode-prompt {
  position: static;
  margin: 0 auto clamp(10px, 1.8svh, 20px);
  color: #f0d28d;
  font: 400 clamp(20px, 2vw, 34px)/1 var(--gps-font-display);
  letter-spacing: .18em;
  text-shadow: 0 3px 4px #000, 0 0 18px rgba(205, 158, 63, .34);
}

.map-room-screen .gps-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.35vw, 22px);
  width: min(900px, 78vw);
  height: min(62svh, 660px);
  margin: 0 auto;
  perspective: 1200px;
}

.map-room-screen .gps-mode-card-shell,
.map-room-screen .gps-mode-card-shell.is-selected {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  padding: 0;
  transform: none;
  filter: drop-shadow(0 14px 11px rgba(0, 0, 0, .64));
  transition: transform 260ms ease, opacity 360ms ease, filter 260ms ease;
}

.map-room-screen .gps-mode-card-shell.is-selected {
  z-index: 2;
  transform: scale(1.08) translateY(-3px);
  filter: drop-shadow(0 18px 14px rgba(0, 0, 0, .72)) drop-shadow(0 0 24px rgba(225, 177, 73, .62));
}

.map-room-screen .gps-mode-grid .gps-mode-card,
.map-room-screen .gps-mode-grid .gps-mode-card.is-selected,
.map-room-screen .gps-mode-grid .gps-mode-card.is-prev,
.map-room-screen .gps-mode-grid .gps-mode-card.is-next,
.map-room-screen .gps-mode-grid .gps-mode-card.is-far {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 2px solid rgba(196, 158, 84, .54);
  border-radius: 7px;
  background: #06122c;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  cursor: pointer;
}

.map-room-screen .gps-mode-card > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #06122c;
  filter: saturate(.82) contrast(1.05) brightness(.86);
}

.map-room-screen .gps-mode-card.is-selected { border-color: #efd18b !important; }

.map-room-screen .gps-mode-navigation {
  position: static;
  top: auto;
  left: auto;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: clamp(8px, 1.4svh, 14px) auto 0;
  transform: none;
}

.map-room-screen .gps-mode-navigation button {
  width: 48px;
  height: 34px;
  border: 1px solid #9c783d;
  background: rgba(3, 12, 31, .94);
  color: #efd18b;
}

.map-room-screen .gps-mode-confirm {
  position: static;
  justify-self: center;
  width: min(360px, 78vw);
  min-height: 46px;
  margin-top: 8px;
  border: 1px solid #e5c173;
  background: linear-gradient(180deg, #10264a, #040d21);
  color: #f5dfad;
  font: 400 clamp(15px, 1.25vw, 21px)/1 var(--gps-font-display);
  letter-spacing: .08em;
}

.map-room-screen.is-mode-confirming .gps-mode-card-shell:not(.is-selected) {
  opacity: 0;
  transform: translateY(14vh) scale(.72);
}

.map-room-screen.is-mode-confirming .gps-mode-card-shell.is-selected {
  opacity: 0;
  transform: translateY(20vh) scale(.42);
}

.map-room-screen.is-mode-confirming .gps-select-mode-prompt,
.map-room-screen.is-mode-confirming .gps-mode-navigation,
.map-room-screen.is-mode-confirming .gps-mode-confirm { opacity: 0; transition: opacity 240ms ease; }

@keyframes gps-map-room-opening-arrival {
  from { opacity: 0; filter: brightness(.18) saturate(.5); transform: scale(1.035); }
  to { opacity: 1; filter: brightness(.58) saturate(.76); transform: scale(1); }
}

@keyframes gps-map-mode-cards-arrive {
  from { opacity: 0; transform: translateY(9vh) scale(.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 900px), (max-height: 680px) {
  .map-room-screen .gps-mode-reveal { inset: 58px 22px 18px; }
  .map-room-screen .gps-mode-grid { width: min(760px, 88vw); height: min(60svh, 520px); gap: 8px; }
  .map-room-screen .gps-mode-card-shell.is-selected { transform: scale(1.04); }
}

@media (max-width: 900px) {
  .gps-opening-credit { top: 3.5svh; width: 92vw; font-size: clamp(14px, 3.2vw, 24px); }
  #mode-screen.is-opening-cinematic .gps-opening-logo {
    top: 14svh;
    left: 3vw;
    width: min(84vw, 620px);
  }
}

@media (max-height: 680px) and (min-width: 901px) {
  .gps-opening-credit { top: 4svh; }
  #mode-screen.is-opening-cinematic .gps-opening-logo {
    top: 15svh;
    left: 3vw;
    width: min(56vw, 700px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gps-opening-cinematic,
  .gps-opening-video,
  #mode-screen.is-opening-cinematic .gps-opening-copy,
  .map-room-screen .gps-mode-reveal,
  .map-room-screen.is-mode-selection .map-room-stage,
  .map-room-screen .gps-mode-card-shell { animation: none !important; transition-duration: 80ms !important; }
}

/* v0.9.2 Ghost Patrol deck — live mode panels presented as physical playing cards. */
.map-room-screen .gps-mode-grid {
  position: static;
  top: auto;
  left: auto;
  grid-template-columns: repeat(3, minmax(148px, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.35svh, 18px) clamp(16px, 1.5vw, 28px);
  width: min(760px, 74vw);
  height: min(64svh, 680px);
  transform: none;
}

.map-room-screen .gps-mode-card-shell,
.map-room-screen .gps-mode-card-shell.is-selected {
  justify-self: center;
  width: auto;
  height: 100%;
  aspect-ratio: 5 / 7;
}

.map-room-screen .gps-mode-grid .gps-mode-card,
.map-room-screen .gps-mode-grid .gps-mode-card.is-selected,
.map-room-screen .gps-mode-grid .gps-mode-card.is-prev,
.map-room-screen .gps-mode-grid .gps-mode-card.is-next,
.map-room-screen .gps-mode-grid .gps-mode-card.is-far {
  overflow: hidden;
  border: 2px solid #b8944e;
  border-radius: clamp(9px, .8vw, 15px);
  background:
    linear-gradient(145deg, #f0e4c5 0 2.2%, #b8944e 2.35% 3.1%, #081633 3.25% 96.7%, #b8944e 96.9% 97.6%, #e8d9b5 97.8%);
  box-shadow:
    inset 0 0 0 4px rgba(240, 223, 178, .82),
    inset 0 0 0 6px rgba(75, 49, 16, .88),
    0 14px 18px rgba(0, 0, 0, .72);
  backface-visibility: hidden;
  transform-origin: 50% 92%;
}

.map-room-screen .gps-mode-grid .gps-mode-card::after {
  display: block;
  z-index: 4;
  inset: clamp(6px, .55vw, 10px);
  border: 1px solid rgba(242, 211, 134, .58);
  border-radius: clamp(5px, .45vw, 9px);
  background: none;
  content: "";
  pointer-events: none;
}

.map-room-screen .gps-mode-card > img {
  position: absolute;
  inset: clamp(7px, .65vw, 12px);
  width: calc(100% - clamp(14px, 1.3vw, 24px));
  height: calc(100% - clamp(14px, 1.3vw, 24px));
  object-fit: contain;
  object-position: center;
  border-radius: clamp(5px, .48vw, 9px);
  background: #06122c;
  filter: saturate(.84) contrast(1.05) brightness(.83);
}

.gps-playing-card-index {
  position: absolute;
  z-index: 8;
  display: grid;
  place-items: center;
  width: clamp(27px, 18%, 43px);
  min-height: clamp(43px, 18%, 65px);
  padding: 4px 2px;
  border: 1px solid rgba(231, 197, 117, .7);
  background: linear-gradient(180deg, rgba(5, 17, 41, .98), rgba(2, 8, 23, .98));
  box-shadow: 0 3px 8px rgba(0, 0, 0, .72), inset 0 0 0 2px rgba(238, 219, 168, .11);
  color: #f4dda6;
  line-height: 1;
  text-align: center;
  text-shadow: 0 2px 2px #000;
  pointer-events: none;
}

.gps-playing-card-index b {
  display: block;
  font: 400 clamp(15px, 1.35vw, 25px)/.9 var(--gps-font-display);
  letter-spacing: 0;
}

.gps-playing-card-index i {
  display: block;
  margin-top: 3px;
  color: #d2ae60;
  font: normal 700 clamp(11px, .9vw, 18px)/1 Georgia, serif;
}

.gps-playing-card-index-top {
  top: clamp(7px, .7vw, 12px);
  left: clamp(7px, .7vw, 12px);
  border-radius: 6px 2px 8px 2px;
}

.gps-playing-card-index-bottom {
  right: clamp(7px, .7vw, 12px);
  bottom: clamp(7px, .7vw, 12px);
  border-radius: 6px 2px 8px 2px;
  transform: rotate(180deg);
}

.gps-playing-card-index-joker b {
  font-size: clamp(7px, .62vw, 11px);
  letter-spacing: .03em;
}

.gps-playing-card-identity {
  position: absolute;
  z-index: 7;
  top: clamp(9px, .8vw, 14px);
  left: 50%;
  max-width: 56%;
  padding: 4px 8px 3px;
  border: 1px solid rgba(210, 173, 89, .52);
  border-radius: 999px;
  background: rgba(3, 12, 31, .94);
  color: #e9cf91;
  font: 800 clamp(7px, .56vw, 10px)/1 var(--gps-font-command);
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 1px 2px #000;
  transform: translateX(-50%);
  pointer-events: none;
}

.map-room-screen.is-mode-selection .gps-mode-card-shell:nth-child(1) .gps-mode-card { animation-delay: 70ms; }
.map-room-screen.is-mode-selection .gps-mode-card-shell:nth-child(2) .gps-mode-card { animation-delay: 125ms; }
.map-room-screen.is-mode-selection .gps-mode-card-shell:nth-child(3) .gps-mode-card { animation-delay: 180ms; }
.map-room-screen.is-mode-selection .gps-mode-card-shell:nth-child(4) .gps-mode-card { animation-delay: 235ms; }
.map-room-screen.is-mode-selection .gps-mode-card-shell:nth-child(5) .gps-mode-card { animation-delay: 290ms; }
.map-room-screen.is-mode-selection .gps-mode-card-shell:nth-child(6) .gps-mode-card { animation-delay: 345ms; }

.map-room-screen.is-mode-selection .gps-mode-grid .gps-mode-card {
  animation: gps-playing-card-deal-in 610ms cubic-bezier(.18, .78, .2, 1) both;
}

@keyframes gps-playing-card-deal-in {
  from { opacity: 0; transform: translateY(21vh) rotateY(-82deg) rotateZ(-4deg) scale(.72); }
  68% { opacity: 1; transform: translateY(-1.5%) rotateY(5deg) rotateZ(.4deg) scale(1.015); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 900px), (max-height: 680px) {
  .map-room-screen .gps-mode-grid {
    grid-template-columns: repeat(3, minmax(112px, 1fr));
    width: min(650px, 82vw);
    height: min(58svh, 440px);
    gap: 8px 12px;
  }

  .gps-playing-card-identity { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .map-room-screen.is-mode-selection .gps-mode-grid .gps-mode-card { animation: none !important; }
}

/* v0.9.2 card-face correction: the supplied art is the complete card. */
.map-room-screen .gps-mode-card-shell,
.map-room-screen .gps-mode-card-shell.is-selected {
  aspect-ratio: 2 / 3;
}

.map-room-screen .gps-mode-grid .gps-mode-card,
.map-room-screen .gps-mode-grid .gps-mode-card.is-selected,
.map-room-screen .gps-mode-grid .gps-mode-card.is-prev,
.map-room-screen .gps-mode-grid .gps-mode-card.is-next,
.map-room-screen .gps-mode-grid .gps-mode-card.is-far {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.map-room-screen .gps-mode-grid .gps-mode-card::after { display: none; }

.map-room-screen .gps-mode-card > img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  background: transparent;
  filter: none;
}

.gps-mode-selection-actions {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
  pointer-events: auto;
}

.map-room-screen .gps-mode-selection-actions .gps-mode-confirm {
  position: relative;
  inset: auto;
  left: auto;
  z-index: auto;
  width: min(360px, 58vw);
  margin-top: 0;
  transform: none;
}

.gps-mode-selection-actions .gps-chain-fire-control {
  position: relative;
  inset: auto;
  display: grid;
  grid-template-columns: minmax(94px, 1fr) 42px;
  align-items: center;
  gap: 10px;
  flex: 0 0 180px;
  width: 180px;
  min-height: 46px;
  height: auto;
  padding: 6px 10px;
  border: 1px solid #9c783d;
  background: linear-gradient(180deg, #10264a, #040d21);
  color: #f5dfad;
  cursor: pointer;
  pointer-events: auto;
}

.gps-mode-selection-actions .gps-chain-fire-control .gps-chain-fire-copy {
  position: static;
  inset: auto;
  display: grid;
  gap: 2px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: left;
}

.gps-mode-selection-actions .gps-chain-fire-copy::after {
  display: none;
  content: none;
}

.gps-chain-fire-copy b {
  font: 800 11px/1 var(--gps-font-command);
  letter-spacing: .12em;
}

.gps-mode-selection-actions .gps-chain-fire-control input {
  position: absolute;
  inset: 50% 10px auto auto;
  z-index: 2;
  width: 42px;
  height: 22px;
  opacity: 0;
  transform: translateY(-50%);
  cursor: pointer;
  pointer-events: auto;
}

.gps-mode-selection-actions .gps-chain-fire-switch {
  position: relative;
  display: block;
  width: 42px;
  height: 22px;
  border: 1px solid rgba(218, 188, 119, .82);
  border-radius: 999px;
  background: rgba(3, 17, 29, .92);
  box-shadow: inset 0 1px 3px #000;
  pointer-events: none;
}

.gps-mode-selection-actions .gps-chain-fire-switch::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(180deg, #d9bd73, #785423);
  box-shadow: 0 1px 3px #000;
  content: "";
  transition: transform 150ms ease;
}

.gps-mode-selection-actions .gps-chain-fire-control input:checked + .gps-chain-fire-switch {
  background: rgba(10, 79, 111, .94);
  box-shadow: inset 0 0 7px rgba(91, 220, 255, .66), 0 0 6px rgba(76, 204, 255, .46);
}

.gps-mode-selection-actions .gps-chain-fire-control input:checked + .gps-chain-fire-switch::after {
  transform: translateX(20px);
}

.gps-mode-selection-actions .gps-chain-fire-control input:focus-visible + .gps-chain-fire-switch {
  outline: 3px solid #fff0a5;
  outline-offset: 3px;
}

.map-room-screen.is-mode-confirming .gps-mode-selection-actions {
  opacity: 0;
  transition: opacity 240ms ease;
}

@media (max-width: 900px), (max-height: 680px) {
  .gps-mode-selection-actions .gps-chain-fire-control {
    grid-template-columns: 1fr 36px;
    flex-basis: 158px;
    width: 158px;
  }
  .gps-mode-selection-actions .gps-chain-fire-switch { width: 36px; }
  .gps-mode-selection-actions .gps-chain-fire-control input { width: 36px; }
  .gps-mode-selection-actions .gps-chain-fire-control input:checked + .gps-chain-fire-switch::after { transform: translateX(14px); }
}

/* v0.9.2 Rose Compass Shadow Box — one reusable live stage. */
.gps-shadow-command-hotspots {
  position: absolute;
  z-index: 9;
  inset: 0;
  pointer-events: none;
}

.gps-shadow-command-hotspots button,
.gps-shadow-command-hotspots a,
.gps-shadow-command-hotspots label {
  position: absolute;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  cursor: pointer;
  pointer-events: auto;
}

.gps-shadow-command-hotspots button:focus-visible,
.gps-shadow-command-hotspots a:focus-visible,
.gps-shadow-command-hotspots label:focus-within {
  outline: 3px solid #fff0a5;
  outline-offset: 2px;
  border-radius: 5px;
}

.gps-shadow-command-back { top: .8%; left: 26.4%; width: 12.1%; height: 7.2%; }
.gps-shadow-command-mute { top: 1.1%; left: 45.2%; width: 9.1%; height: 3.5%; }
.gps-shadow-command-volume { top: 4.4%; left: 45.2%; width: 9.8%; height: 2.8%; }
.gps-shadow-command-achievements { top: 1.3%; left: 57.6%; width: 9.5%; height: 5.1%; }
.gps-shadow-command-cgh { top: .7%; left: 69%; width: 10%; height: 6.7%; }

.gps-shadow-command-volume input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: .01;
  cursor: pointer;
}

.gps-opening-hub.is-mode-selection .gps-shadow-display,
.gps-opening-hub.is-mode-selection .gps-fleet-hotspots {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.gps-shadow-box-stage > .gps-mode-reveal {
  position: absolute;
  z-index: 8;
  top: 7.1%;
  left: 22.55%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.4%;
  width: 58.55%;
  height: 60.7%;
  max-height: none;
  padding: 1.5% 7.5% 1.1%;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #f5dfad;
  pointer-events: auto;
  animation: gps-shadow-mode-reveal 520ms ease-out both;
}

.gps-shadow-box-stage > .gps-mode-reveal[hidden] { display: none; }
.gps-shadow-box-stage > .gps-mode-reveal .gps-select-mode-prompt { display: none; }
.gps-shadow-box-stage > .gps-mode-reveal .gps-mode-navigation { display: none !important; }

.gps-shadow-box-stage > .gps-mode-reveal .gps-mode-grid {
  position: static;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 2.4% 5.5%;
  width: 100%;
  height: 100%;
  margin: 0;
  perspective: 1200px;
  transform: none;
}

.gps-shadow-box-stage > .gps-mode-reveal .gps-mode-card-shell,
.gps-shadow-box-stage > .gps-mode-reveal .gps-mode-card-shell.is-selected {
  position: relative;
  justify-self: center;
  display: block;
  width: auto;
  height: 100%;
  aspect-ratio: 2 / 3;
  padding: 0;
  transform: none;
  filter: drop-shadow(0 9px 8px rgba(0, 0, 0, .7));
  transition: transform 220ms ease, filter 220ms ease, opacity 260ms ease;
}

.gps-shadow-box-stage > .gps-mode-reveal .gps-mode-card-shell.is-selected {
  z-index: 4;
  transform: translateY(-1.5%) scale(1.08);
  filter:
    drop-shadow(0 13px 10px rgba(0, 0, 0, .76))
    drop-shadow(0 0 13px rgba(255, 222, 143, .94))
    drop-shadow(0 0 27px rgba(225, 170, 58, .68));
}

.gps-shadow-box-stage > .gps-mode-reveal .gps-mode-card,
.gps-shadow-box-stage > .gps-mode-reveal .gps-mode-card.is-selected,
.gps-shadow-box-stage > .gps-mode-reveal .gps-mode-card.is-prev,
.gps-shadow-box-stage > .gps-mode-reveal .gps-mode-card.is-next,
.gps-shadow-box-stage > .gps-mode-reveal .gps-mode-card.is-far {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  transform: none;
  cursor: pointer;
  pointer-events: auto;
}

.gps-shadow-box-stage > .gps-mode-reveal .gps-mode-card:focus-visible {
  outline: 2px solid #fff1b8;
  outline-offset: 3px;
}

.gps-shadow-box-stage > .gps-mode-reveal .gps-mode-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  background: transparent;
  filter: none;
}

.gps-shadow-box-stage > .gps-mode-reveal .gps-mode-card::after { display: none; }

.gps-chain-fire-card-control {
  position: absolute;
  z-index: 10;
  top: 67%;
  left: 8%;
  display: block;
  width: 45%;
  height: 22%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}

.gps-chain-fire-card-control[hidden] { display: none !important; }

.gps-chain-fire-card-control input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.gps-chain-fire-card-control .gps-chain-fire-switch {
  position: absolute;
  top: 40%;
  left: 23%;
  display: block;
  width: clamp(9px, 16%, 17px);
  aspect-ratio: 1;
  height: auto;
  border: 1px solid transparent;
  border-radius: 1px;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}

.gps-chain-fire-card-control .gps-chain-fire-switch::after { display: none; }

.gps-chain-fire-card-control input:checked + .gps-chain-fire-switch {
  border-color: #f8e6aa;
  background: #c99e46;
  box-shadow: 0 0 7px 2px rgba(255, 222, 132, .9), inset 0 0 0 2px #18334f;
}

.gps-chain-fire-card-control input:checked + .gps-chain-fire-switch::after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  color: #fff5d0;
  font: 900 clamp(7px, .72vw, 12px)/1 Arial, sans-serif;
  content: "✓";
  transform: translate(-50%, -52%);
}

.gps-chain-fire-card-control input:focus-visible + .gps-chain-fire-switch {
  outline: 2px solid #fff0a5;
  outline-offset: 2px;
}

.gps-shadow-box-stage > .gps-mode-reveal .gps-mode-selection-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0;
  pointer-events: auto;
}

.gps-shadow-box-stage > .gps-mode-reveal .gps-mode-confirm {
  position: static;
  justify-self: center;
  width: min(58%, 470px);
  min-height: clamp(42px, 6.2svh, 58px);
  margin: 0;
  border: 2px solid #d8e4f4;
  border-radius: 20% / 32%;
  background: linear-gradient(180deg, rgba(32, 73, 126, .96), rgba(9, 31, 68, .98));
  box-shadow: inset 0 0 0 2px rgba(6, 20, 48, .88), 0 7px 18px rgba(0, 0, 0, .56), 0 0 16px rgba(101, 171, 228, .18);
  color: #eef4ff;
  font: 400 clamp(13px, 1.35vw, 24px)/1 var(--gps-font-display);
  letter-spacing: .045em;
  text-shadow: 0 2px 2px #06142c;
  transform: none;
}

.gps-shadow-box-stage > .gps-mode-reveal .gps-mode-confirm:hover,
.gps-shadow-box-stage > .gps-mode-reveal .gps-mode-confirm:focus-visible {
  outline: 2px solid #fff0a5;
  outline-offset: 3px;
  filter: brightness(1.15);
  box-shadow: inset 0 0 0 2px rgba(6, 20, 48, .88), 0 0 24px rgba(255, 213, 117, .56);
}

.gps-opening-hub.is-mode-confirming ~ .gps-mode-reveal .gps-mode-card-shell:not(.is-selected) {
  opacity: 0;
  transform: translateY(10%) scale(.82);
}

.gps-opening-hub.is-mode-confirming ~ .gps-mode-reveal .gps-mode-card-shell.is-selected {
  opacity: 0;
  transform: translateY(18%) scale(.58);
}

.gps-opening-hub.is-mode-confirming ~ .gps-mode-reveal .gps-mode-selection-actions {
  opacity: 0;
  transition: opacity 220ms ease;
}

@keyframes gps-shadow-mode-reveal {
  from { opacity: 0; transform: translateY(3%) scale(.97); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 900px), (max-height: 680px) {
  .gps-shadow-box-stage > .gps-mode-reveal {
    padding-top: 1.15%;
    padding-right: 6.5%;
    padding-left: 6.5%;
  }

  .gps-shadow-box-stage > .gps-mode-reveal .gps-mode-grid { gap: 1.8% 4%; }
  .gps-shadow-box-stage > .gps-mode-reveal .gps-mode-card-shell.is-selected { transform: translateY(-1%) scale(1.055); }
}

@media (prefers-reduced-motion: reduce) {
  .gps-shadow-box-stage > .gps-mode-reveal,
  .gps-shadow-box-stage > .gps-mode-reveal .gps-mode-card-shell { animation: none !important; transition-duration: 80ms !important; }
}

/* v0.9.3 combat presentation correction: preserve the art, reveal the water,
   and keep every combat instrument in a deliberate responsive stack. */
.match-page-v2 {
  --horizon-height: clamp(148px, 20svh, 205px);
}

.match-page-v2 .enemy-horizon {
  height: var(--horizon-height);
  background: #0a1825;
}

.match-page-v2 .enemy-horizon > img:first-child {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  object-position: 50% 54.5%;
  filter: saturate(.58) hue-rotate(7deg) contrast(1.1) brightness(.68);
}

.match-page-v2 .enemy-horizon::before {
  background:
    linear-gradient(180deg, rgba(2, 6, 13, .16), transparent 27%, rgba(5, 16, 30, .08) 71%, rgba(7, 22, 39, .74)),
    linear-gradient(90deg, rgba(2, 7, 16, .22), transparent 22% 83%, rgba(2, 7, 16, .18));
}

.match-page-v2 .battle-brand-art {
  top: clamp(44px, 6.4svh, 62px);
  bottom: auto;
  left: clamp(12px, 1.2vw, 22px);
  width: clamp(360px, 32vw, 540px);
  height: clamp(84px, 12svh, 124px);
  object-fit: contain;
  object-position: 0 50%;
  filter: drop-shadow(0 3px 1px rgba(0,0,0,.95)) drop-shadow(0 9px 8px rgba(0,0,0,.7));
}

.match-page-v2 .enemy-launch-origin {
  top: 56%;
  left: 65.1%;
}

.match-page-v2 .battlefield-shell {
  grid-template-columns: minmax(0, 1fr) minmax(214px, 17.5%);
  gap: clamp(7px, .62vw, 12px);
}

.match-page-v2 .board-stage { grid-column: 1; }
.match-page-v2 .combat-right-rail { grid-column: 2; }

.match-page-v2 .combat-command-ship {
  position: absolute;
  z-index: 18;
  left: clamp(-48px, -2.4vw, -18px);
  bottom: clamp(-28px, -3vh, -16px);
  width: min(48vw, 760px);
  height: clamp(225px, 40%, 360px);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}

.match-page-v2 .combat-command-ship::before { content: none; }

.match-page-v2 .combat-command-ship .command-ship {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 0 100%;
  filter: brightness(.78) contrast(1.08) saturate(.62) drop-shadow(0 16px 12px rgba(0,0,0,.72));
  transform: rotate(-1deg);
}

.match-page-v2 .combat-command-ship .player-missile-battery {
  top: 43%;
  left: 29%;
  width: 5.5%;
}

.match-page-v2 .combat-command-ship .missile-hardpoint {
  top: 44%;
  left: 32%;
}

.match-page-v2 .combat-flagship-copy {
  right: auto;
  bottom: clamp(34px, 4.5vh, 58px);
  left: clamp(48px, 4vw, 76px);
  width: clamp(160px, 13vw, 230px);
  padding: clamp(6px, .52vw, 10px);
  border: 1px solid rgba(213, 173, 94, .5);
  background: linear-gradient(90deg, rgba(3, 12, 27, .92), rgba(7, 27, 52, .68));
}

.combat-right-rail {
  grid-template-rows: minmax(0, 43%) minmax(0, 29%) minmax(0, 28%);
  gap: 0;
}

.combat-right-rail .fleet-status-panel { grid-row: 1; }
.combat-right-rail .combat-channel { grid-row: 2; }
.combat-right-rail .tactical-panel { grid-row: 3; }

.combat-right-rail .fleet-status-panel,
.combat-right-rail .combat-channel,
.combat-right-rail .tactical-panel {
  min-height: 0;
  padding: clamp(6px, .55vw, 11px) !important;
}

.combat-right-rail .enemy-fleet-status-live {
  height: calc(100% - 28px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.combat-right-rail .combat-channel-copy {
  height: calc(100% - 25px);
}

.combat-right-rail .tactical-panel .mini-map {
  height: calc(100% - 27px);
  min-height: 0;
}

/* Transparent water cells: the grid is a guide, not a checkerboard. */
.match-page-v2 .target-cell,
.match-page-v2 .target-cell:nth-child(4n) {
  border: 1px solid rgba(180, 207, 229, .18);
  background: transparent;
  box-shadow: none;
}

.match-page-v2 .target-cell:disabled:not(.is-island):not(.is-hit):not(.is-miss),
.match-page-v2 .target-cell.is-friendly { background: transparent; }

.match-page-v2 .target-cell:hover:not(:disabled) {
  background: rgba(77, 126, 173, .16);
  box-shadow: inset 0 0 0 1px rgba(225, 194, 126, .75);
}

.match-page-v2 .target-cell.is-island { background: rgba(105, 87, 50, .12); }
.match-page-v2 .target-cell.is-selected-hull { background: rgba(222, 185, 96, .17); }

/* Connected blend-mode fire replaces the old red circle/X hit marker. */
.target-cell.is-hit,
.mini-cell.is-hit {
  z-index: 4;
  overflow: visible;
  background: transparent !important;
  box-shadow: none !important;
  isolation: isolate;
}

.target-cell.is-hit::before,
.mini-cell.is-hit::before {
  position: absolute;
  z-index: 5;
  inset: -18%;
  display: block;
  border: 0;
  border-radius: 42% 55% 46% 58%;
  background:
    radial-gradient(ellipse at 50% 83%, rgba(255, 248, 203, .98) 0 7%, rgba(255, 189, 64, .96) 13%, rgba(242, 89, 24, .88) 29%, rgba(139, 21, 10, .48) 49%, transparent 68%),
    radial-gradient(ellipse at 30% 66%, rgba(255, 173, 47, .82), rgba(204, 48, 15, .48) 34%, transparent 62%),
    radial-gradient(ellipse at 73% 61%, rgba(255, 211, 102, .72), rgba(225, 62, 17, .42) 30%, transparent 61%);
  color: transparent;
  content: "";
  filter: blur(.25px) drop-shadow(0 0 5px rgba(255, 88, 23, .88));
  mix-blend-mode: screen;
  text-shadow: none;
  transform-origin: 50% 82%;
  animation: gps-cell-fire 620ms steps(2, end) infinite alternate;
  pointer-events: none;
}

.target-cell.is-hit::after,
.mini-cell.is-hit::after {
  position: absolute;
  z-index: 4;
  inset: -30% -18% 25%;
  display: block;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 78%, rgba(91, 97, 102, .54), rgba(39, 45, 51, .25) 45%, transparent 72%);
  content: "";
  opacity: .72;
  filter: blur(2px);
  transform: translateY(-5%);
  animation: gps-cell-smoke 1.8s ease-in-out infinite alternate;
  pointer-events: none;
}

.target-cell.is-hit.is-fire-left::before,
.mini-cell.is-hit.is-fire-left::before { left: -52%; border-top-left-radius: 24%; border-bottom-left-radius: 25%; }
.target-cell.is-hit.is-fire-right::before,
.mini-cell.is-hit.is-fire-right::before { right: -52%; border-top-right-radius: 24%; border-bottom-right-radius: 25%; }
.target-cell.is-hit.is-fire-up::before,
.mini-cell.is-hit.is-fire-up::before { top: -54%; }
.target-cell.is-hit.is-fire-down::before,
.mini-cell.is-hit.is-fire-down::before { bottom: -52%; }

.target-cell.is-hit.is-fire-left::after,
.mini-cell.is-hit.is-fire-left::after { left: -45%; }
.target-cell.is-hit.is-fire-right::after,
.mini-cell.is-hit.is-fire-right::after { right: -45%; }

.target-cell.is-hit.is-burning::before,
.target-cell.is-hit.is-burning::after,
.target-cell.is-hit.is-charred::before,
.target-cell.is-hit.is-charred::after,
.mini-cell.is-hit.is-burning::before,
.mini-cell.is-hit.is-burning::after,
.mini-cell.is-hit.is-charred::before,
.mini-cell.is-hit.is-charred::after { display: none; }

.resolved-impact.hit .impact-ring { display: none; }

.resolved-impact.hit .impact-core {
  width: 82%;
  height: 112%;
  border-radius: 48% 52% 42% 58%;
  background:
    radial-gradient(ellipse at 50% 82%, #fff4bd 0 7%, #ffbd3c 15%, rgba(240, 78, 20, .88) 34%, rgba(132, 19, 9, .34) 55%, transparent 70%),
    radial-gradient(ellipse at 28% 64%, rgba(255, 187, 60, .85), rgba(218, 51, 15, .48) 38%, transparent 66%),
    radial-gradient(ellipse at 75% 59%, rgba(255, 219, 108, .72), rgba(218, 54, 16, .38) 35%, transparent 64%);
  box-shadow: 0 0 20px rgba(255, 133, 35, .78), 0 0 38px rgba(255, 55, 16, .42);
  clip-path: polygon(8% 100%, 13% 57%, 31% 76%, 40% 18%, 54% 61%, 72% 4%, 75% 66%, 94% 45%, 91% 100%);
}

.resolved-impact.sunk .impact-core {
  width: 105%;
  height: 132%;
  box-shadow: 0 0 30px rgba(255, 175, 48, .9), 0 0 58px rgba(255, 54, 15, .62);
}

@keyframes gps-cell-fire {
  from { opacity: .86; transform: scale(.94, 1.03) skewX(-2deg); }
  to { opacity: 1; transform: scale(1.05, .94) skewX(2deg); }
}

@keyframes gps-cell-smoke {
  from { opacity: .44; transform: translate(-2%, 5%) scale(.9); }
  to { opacity: .7; transform: translate(3%, -14%) scale(1.18); }
}

/* The supplied burning and charred hulls remain authoritative; these overlays
   only add a restrained flame shimmer and residual smoke. */
.formation-sprite.is-burning,
.formation-sprite.is-charred { z-index: 6; }

.wreck-effect {
  position: absolute;
  z-index: 8;
  inset: -12%;
  overflow: visible;
  pointer-events: none;
}

.wreck-effect-burning {
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 4px rgba(255, 92, 28, .72));
}

.wreck-effect-burning i {
  position: absolute;
  bottom: 24%;
  width: 18%;
  height: 44%;
  border-radius: 48% 52% 46% 54%;
  background: radial-gradient(ellipse at 50% 88%, #fff2b0 0 7%, #ffad31 18%, rgba(229, 65, 18, .76) 43%, transparent 72%);
  filter: blur(.35px);
  transform-origin: 50% 100%;
  animation: gps-wreck-flame 760ms steps(2, end) infinite alternate;
}
.wreck-effect-burning i:nth-child(1) { left: 8%; height: 32%; animation-delay: -180ms; }
.wreck-effect-burning i:nth-child(2) { left: 27%; bottom: 16%; height: 48%; animation-delay: -520ms; }
.wreck-effect-burning i:nth-child(3) { left: 47%; height: 38%; animation-delay: -310ms; }
.wreck-effect-burning i:nth-child(4) { right: 17%; bottom: 19%; height: 44%; animation-delay: -650ms; }
.wreck-effect-burning i:nth-child(5) { right: 3%; height: 29%; animation-delay: -90ms; }

.wreck-effect-charred i {
  position: absolute;
  bottom: 35%;
  width: 24%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(166, 171, 174, .34), rgba(72, 78, 82, .18) 46%, transparent 72%);
  filter: blur(3px);
  animation: gps-wreck-smoke 3.2s ease-out infinite;
}
.wreck-effect-charred i:nth-child(1) { left: 12%; animation-delay: -2.1s; }
.wreck-effect-charred i:nth-child(2) { left: 44%; animation-delay: -.8s; }
.wreck-effect-charred i:nth-child(3) { right: 6%; animation-delay: -1.5s; }

@keyframes gps-wreck-flame {
  from { opacity: .4; transform: scale(.76, .9) skewX(-4deg); }
  to { opacity: .78; transform: scale(1.05, 1.13) skewX(4deg); }
}

@keyframes gps-wreck-smoke {
  from { opacity: 0; transform: translateY(15%) scale(.62); }
  24% { opacity: .42; }
  to { opacity: 0; transform: translate(12%, -85%) scale(1.35); }
}

/* Exterior controls are substantial naval buttons; Shadow Box plaques stay in
   the Shadow Box and never float over open water. */
#mode-screen.is-opening-cinematic .gps-radar-action {
  width: clamp(310px, 29vw, 470px);
  height: clamp(70px, 9.4svh, 94px);
  padding: 0 46px;
  clip-path: none;
  border: 3px solid #d8b566;
  border-radius: 11px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), transparent 18%),
    linear-gradient(180deg, #214b81 0%, #102f60 43%, #071a3a 72%, #030c21 100%);
  box-shadow:
    inset 0 0 0 2px #4b310d,
    inset 0 0 0 5px rgba(255, 226, 157, .52),
    inset 0 9px 13px rgba(255,255,255,.08),
    0 7px 0 #2c1d0d,
    0 15px 30px rgba(0,0,0,.62),
    0 0 26px rgba(202,157,66,.28);
  font-size: clamp(24px, 2.1vw, 36px);
  letter-spacing: .12em;
}

#mode-screen.is-opening-cinematic .gps-radar-action::before {
  position: absolute;
  top: 8%;
  right: 5%;
  left: 5%;
  display: block;
  height: 32%;
  border-radius: 8px 8px 50% 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.22), transparent);
  content: "";
  pointer-events: none;
}

#mode-screen.is-opening-cinematic .gps-radar-action span { position: relative; z-index: 2; }

#mode-screen.is-opening-cinematic .gps-radar-action:active,
#mode-screen.is-opening-cinematic .gps-radar-action.is-activating {
  box-shadow: inset 0 0 0 2px #020714, inset 0 0 0 4px rgba(240,205,128,.52), inset 0 5px 14px rgba(0,0,0,.42), 0 2px 0 #2c1d0d, 0 8px 18px rgba(0,0,0,.58);
  transform: translateX(-50%) translateY(5px) scale(.995);
}

.gps-start-controls .gps-achievements-control::after {
  font-size: clamp(16px, 1.28vw, 23px);
}

.gps-start-controls .gps-achievements-control {
  border: 3px solid #d4ac58;
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.2), transparent 19%),
    linear-gradient(180deg, #214b81, #102f60 45%, #071a3a 74%, #030c21);
  box-shadow:
    inset 0 0 0 2px #4b310d,
    inset 0 0 0 5px rgba(255,226,157,.46),
    inset 0 8px 12px rgba(255,255,255,.07),
    0 5px 0 #2b1c0c,
    0 10px 22px rgba(0,0,0,.56);
}

.match-page-v2 .brand-pause,
.match-page-v2 .battle-mute-control,
.match-page-v2 .header-deploy,
.match-page-v2 .blind-luck-fire,
.match-page-v2 .attrition-choice-list button {
  border: 2px solid #c49a4b;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 20%),
    linear-gradient(180deg, #214b81, #102f60 48%, #071a3a 76%, #030c21);
  box-shadow: inset 0 0 0 2px #3d290d, inset 0 0 0 4px rgba(242,205,125,.28), inset 0 6px 9px rgba(255,255,255,.06), 0 4px 0 #23170a, 0 8px 15px rgba(0,0,0,.48);
  color: #edcf8c;
}

@media (max-height: 720px) and (min-width: 900px) {
  .match-page-v2 { --horizon-height: clamp(124px, 18svh, 140px); }
  .combat-right-rail { grid-template-rows: minmax(0, 46%) minmax(0, 33%) minmax(0, 21%); }
  .combat-right-rail .tactical-panel .panel-heading { margin-bottom: 2px; }
  .match-page-v2 .combat-command-ship { height: 31%; }
}

@media (prefers-reduced-motion: reduce) {
  .target-cell.is-hit::before,
  .target-cell.is-hit::after,
  .mini-cell.is-hit::before,
  .mini-cell.is-hit::after,
  .wreck-effect i { animation: none !important; }
  .wreck-effect-burning i { opacity: .58; }
  .wreck-effect-charred i { opacity: .24; transform: translateY(-28%); }
}

/* v0.9.4 opening-film utility controls: deliberately quiet over the cinematic,
   then completely absent once the live Shadow Box takes over. */
.gps-opening-video-controls[hidden] { display: none !important; }

.gps-opening-video-controls {
  position: absolute;
  z-index: 42;
  right: clamp(12px, 1.8vw, 30px);
  bottom: clamp(12px, 2.2svh, 24px);
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 24px);
  opacity: .62;
  transition: opacity 180ms ease;
}

.gps-opening-video-controls:hover,
.gps-opening-video-controls:focus-within { opacity: .96; }

.gps-opening-video-controls button,
.gps-opening-video-controls label {
  min-height: 44px;
  border: 1px solid rgba(214, 184, 119, .45);
  border-radius: 4px;
  background: rgba(3, 11, 24, .66);
  color: rgba(239, 222, 185, .92);
  box-shadow: inset 0 0 0 1px rgba(4, 13, 28, .82), 0 3px 10px rgba(0, 0, 0, .35);
  backdrop-filter: blur(5px);
  font: 400 clamp(9px, .72vw, 12px)/1 var(--gps-font-display);
  letter-spacing: .055em;
  text-transform: uppercase;
}

.gps-opening-video-controls button {
  padding: 0 clamp(10px, 1vw, 16px);
  cursor: pointer;
}

.gps-opening-video-controls button:hover,
.gps-opening-video-controls button:focus-visible {
  border-color: rgba(239, 205, 132, .9);
  background: rgba(7, 25, 49, .88);
  color: #ffe8b4;
  outline: 2px solid rgba(239, 205, 132, .38);
  outline-offset: 1px;
}

.gps-opening-video-controls label {
  display: grid;
  min-width: clamp(118px, 11vw, 168px);
  grid-template-columns: auto minmax(64px, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0 10px;
}

.gps-opening-video-controls input {
  width: 100%;
  min-width: 0;
  accent-color: #d9b66b;
}

#opening-video-skip { opacity: .82; }

@media (max-width: 640px) {
  .gps-opening-video-controls {
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    left: 8px;
    display: grid;
    grid-template-columns: minmax(76px, 1fr) 58px minmax(110px, 1.35fr) minmax(76px, 1fr);
    gap: 4px;
    max-width: none;
  }

  .gps-opening-video-controls button { padding-inline: 5px; font-size: 8px; }
  .gps-opening-video-controls label { min-width: 0; gap: 5px; padding-inline: 6px; font-size: 8px; }
}

/* v0.9.4 24 × 16 combat correction: the flagship owns a true left bay,
   the targeting grid is centered with square cells, and the command rail stays right. */
.match-page-v2 .battlefield-shell {
  grid-template-columns: clamp(260px, 22%, 340px) minmax(0, 1fr) clamp(214px, 17.5%, 280px);
  gap: clamp(7px, .62vw, 12px);
}

.match-page-v2 .combat-command-ship {
  position: relative;
  z-index: 18;
  grid-column: 1;
  left: auto;
  bottom: auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(190, 157, 90, .35);
  border-radius: 7px;
  background:
    radial-gradient(ellipse at 50% 44%, rgba(67, 103, 135, .3), transparent 56%),
    linear-gradient(180deg, rgba(10, 31, 54, .72), rgba(3, 13, 26, .94));
  box-shadow: inset 0 0 38px rgba(0, 0, 0, .5), 0 10px 22px rgba(0, 0, 0, .42);
  pointer-events: none;
}

.match-page-v2 .combat-command-ship::before {
  content: "";
  background:
    linear-gradient(180deg, transparent 42%, rgba(2, 10, 22, .22) 62%, rgba(2, 8, 18, .88) 100%),
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(164, 195, 218, .035) 35px 36px);
}

.match-page-v2 .combat-command-ship .command-ship {
  top: 26%;
  right: auto;
  bottom: auto;
  left: -25%;
  width: 150%;
  height: auto;
  object-fit: contain;
  object-position: 50% 50%;
  filter: brightness(.84) contrast(1.08) saturate(.62) drop-shadow(0 16px 12px rgba(0,0,0,.72));
  transform: rotate(-1deg);
}

.match-page-v2 .combat-command-ship .player-missile-battery {
  top: 42%;
  left: 29%;
  width: 8%;
}

.match-page-v2 .combat-command-ship .missile-hardpoint {
  top: 43%;
  left: 33%;
}

.match-page-v2 .combat-flagship-copy {
  right: clamp(10px, .8vw, 14px);
  bottom: clamp(14px, 2vh, 24px);
  left: clamp(10px, .8vw, 14px);
  width: auto;
}

.match-page-v2 .board-stage {
  grid-column: 2;
  display: grid;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  place-items: center;
}

.match-page-v2 .board-assembly {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 24 / 16;
}

.match-page-v2 .board-plane {
  width: 100%;
  height: 100%;
  aspect-ratio: 24 / 16;
}

.match-page-v2 .combat-right-rail { grid-column: 3; }
.match-page-v2 .tactical-panel .mini-map { aspect-ratio: 24 / 16; }

@media (max-height: 720px) and (min-width: 900px) {
  .match-page-v2 .battlefield-shell {
    grid-template-columns: clamp(238px, 21%, 300px) minmax(0, 1fr) clamp(205px, 17.5%, 250px);
  }

  .match-page-v2 .combat-command-ship { height: 100%; }
  .match-page-v2 .combat-command-ship .command-ship { top: 25%; }
}

/* v0.9.5 monochrome Shadow Box display: every live glyph on the blue monitor
   uses phosphor-white or ice blue. Physical cabinet controls and card art stay intact. */
.gps-shadow-display,
.gps-shadow-welcome,
.gps-shadow-actions button,
.gps-fleet-inspector-nav button {
  color: #edf9ff;
  text-shadow: 0 0 5px rgba(207, 240, 255, .42), 0 0 15px rgba(96, 191, 255, .34);
}

.gps-shadow-actions button,
.gps-fleet-inspector-nav button {
  border-color: rgba(181, 228, 255, .78);
  background: linear-gradient(180deg, rgba(22, 78, 132, .88), rgba(3, 27, 61, .94));
  box-shadow: inset 0 0 0 2px rgba(2, 15, 39, .84), 0 7px 18px rgba(0, 6, 20, .42), 0 0 18px rgba(103, 197, 255, .2);
}

.gps-shadow-actions button:hover,
.gps-shadow-actions button:focus-visible,
.gps-fleet-inspector-nav button:hover,
.gps-fleet-inspector-nav button:focus-visible {
  outline-color: #eaf8ff;
  box-shadow: inset 0 0 0 2px rgba(2, 15, 39, .84), 0 0 26px rgba(142, 216, 255, .6);
}

.gps-fleet-inspector-kicker,
.gps-fleet-inspector-kicker span,
.gps-fleet-inspector h2,
.gps-fleet-inspector > p,
.gps-fleet-inspector dt,
.gps-fleet-inspector dd {
  color: #dff4ff;
}

.gps-fleet-inspector-kicker,
.gps-fleet-inspector dt { color: #9dd8fb; }
.gps-fleet-inspector dl > div { border-bottom-color: rgba(157, 216, 251, .24); }

.gps-shadow-box-stage > .gps-mode-reveal { color: #edf9ff; }
.gps-shadow-box-stage > .gps-mode-reveal .gps-mode-card:focus-visible,
.gps-chain-fire-card-control input:focus-visible + .gps-chain-fire-switch {
  outline-color: #dff4ff;
}

.gps-shadow-box-stage > .gps-mode-reveal .gps-mode-confirm {
  border-color: #b9e5ff;
  color: #edf9ff;
  text-shadow: 0 0 6px rgba(207, 240, 255, .36), 0 2px 2px #06142c;
  box-shadow: inset 0 0 0 2px rgba(6, 20, 48, .88), 0 7px 18px rgba(0, 0, 0, .56), 0 0 18px rgba(111, 197, 255, .25);
}

.gps-shadow-box-stage > .gps-mode-reveal .gps-mode-confirm:hover,
.gps-shadow-box-stage > .gps-mode-reveal .gps-mode-confirm:focus-visible {
  outline-color: #eaf8ff;
  box-shadow: inset 0 0 0 2px rgba(6, 20, 48, .88), 0 0 26px rgba(142, 216, 255, .6);
}

.map-room-panel-control,
.map-room-panel-deploy,
.map-room-panel-back {
  overflow: visible;
  border: 2px solid #9fd8f8 !important;
  border-radius: clamp(5px, .55vw, 10px);
  background: linear-gradient(180deg, #255989, #0d315d 68%, #061a38) !important;
  color: #edf9ff;
  box-shadow: inset 0 0 0 2px #061026, inset 0 0 0 3px rgba(181, 228, 255, .22), 0 5px 0 #07162b, 0 8px 13px rgba(0, 0, 0, .5), 0 0 12px rgba(96, 191, 255, .16);
  text-shadow: 0 0 6px rgba(207, 240, 255, .38);
}

.map-room-panel-control::before,
.map-room-panel-deploy::before {
  display: none;
}

.map-room-panel-deploy > * {
  opacity: 1;
}

.map-room-panel-control:hover,
.map-room-panel-control:focus-visible,
.map-room-panel-deploy:hover,
.map-room-panel-deploy:focus-visible,
.map-room-panel-back:hover,
.map-room-panel-back:focus-visible {
  border-color: #dff4ff;
  color: #fff;
  outline-color: rgba(194, 232, 255, .82);
  box-shadow: inset 0 0 0 2px #061026, inset 0 0 0 3px rgba(210, 241, 255, .28), 0 0 20px rgba(111, 197, 255, .45);
}

/* v0.9.8 front-of-game candidate correction: safe framing, bitmap monitor copy,
   readable fleet dossiers, and an unchanged deployment contract. */
:root {
  --gps-font-terminal: Fixedsys, "Fixedsys Excelsior 3.01", "Lucida Console", "Courier New", monospace;
}

.gps-bridge-screen.is-opening-cinematic { overflow: clip; }

body.is-opening-post .gps-start-controls,
body.is-opening-hub .gps-start-controls { display: none !important; }

/* Contain the full 16:9 cabinet inside a small safe inset so the mounted top
   rail and Back hit target can never disappear under a viewport edge. */
.gps-shadow-box-stage {
  width: min(calc(100vw - 24px), calc(177.7778svh - 42.6667px));
  height: auto;
  aspect-ratio: 16 / 9;
}

.gps-shadow-box-stage > img:first-child { object-fit: fill; }

.gps-shadow-box-stage > .gps-shadow-gold-ghost {
  position: absolute;
  z-index: 2;
  inset: auto;
  top: 9%;
  left: 4.1%;
  width: 10.4% !important;
  height: 27% !important;
  object-fit: contain !important;
  object-position: 50% 50%;
  filter: drop-shadow(0 4px 3px rgba(0,0,0,.72)) drop-shadow(0 0 10px rgba(220,171,73,.24));
  pointer-events: none;
}

/* Fixedsys on the phosphor-blue monitor; Black Ops One stays on physical
   cabinet controls and every combat-facing control. */
.gps-shadow-display,
.gps-shadow-display button,
.gps-shadow-display input,
.gps-shadow-box-stage > .gps-mode-reveal,
.gps-shadow-box-stage > .gps-mode-reveal button,
.map-room-panel-display,
.map-room-live-instruction {
  font-family: var(--gps-font-terminal);
  font-synthesis: none;
}

.gps-radar-action,
.gps-start-controls button,
.gps-opening-video-controls button,
.gps-opening-video-controls label,
.gps-shadow-command-hotspots,
.map-room-panel-control,
.map-room-panel-deploy,
.map-room-panel-back,
.map-room-panel-mute,
.match-page-v2 button,
.match-page-v2 input,
.match-page-v2 label {
  font-family: var(--gps-font-display);
}

/* Lenny readability pass: approximately 1.6× the initially plausible sizes. */
#mode-screen.is-opening-cinematic .gps-radar-action {
  width: clamp(330px, 27vw, 500px);
  height: clamp(68px, 8.6svh, 96px);
  font-size: clamp(28px, 2.2vw, 43px);
}

.gps-opening-video-controls button,
.gps-opening-video-controls label {
  min-height: 52px;
  font-size: clamp(14px, 1.12vw, 19px);
}

.gps-opening-video-controls label { min-width: clamp(190px, 15vw, 275px); }

.gps-start-controls .gps-global-audio::before { font-size: clamp(12px, .85vw, 16px); }
.gps-start-controls .gps-audio-toggle { font-size: clamp(13px, .92vw, 17px); }

.gps-shadow-welcome { font-size: clamp(29px, 4vw, 72px); }

.gps-shadow-actions { width: min(80%, 760px); }

.gps-shadow-actions button {
  min-height: clamp(58px, 8svh, 78px);
  font-size: clamp(20px, 2.1vw, 37px);
}

/* All five dossiers now share one orientation and one information hierarchy.
   The supplied Valkyrie sheet stays upright instead of being rotated sideways. */
.gps-fleet-inspector,
.gps-fleet-inspector.is-sideways {
  inset: clamp(8px, 1.3svh, 15px) clamp(12px, 1.3vw, 22px);
}

.gps-fleet-blueprint {
  inset: 0 31% 0 0;
  border-right-color: rgba(188, 226, 248, .48);
}

.gps-fleet-blueprint img,
.gps-fleet-blueprint img.is-sideways {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
  transform: none;
  filter: saturate(.9) brightness(.88) contrast(1.06);
}

.gps-opening-hub.is-inspecting .gps-fleet-inspector:not(.is-sideways) .gps-fleet-inspector-kicker,
.gps-opening-hub.is-inspecting .gps-fleet-inspector:not(.is-sideways) h2,
.gps-opening-hub.is-inspecting .gps-fleet-inspector:not(.is-sideways) > p,
.gps-opening-hub.is-inspecting .gps-fleet-inspector:not(.is-sideways) dl {
  position: absolute !important;
  z-index: 3;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  border: 0 !important;
  pointer-events: none;
}

.gps-fleet-inspector .gps-fleet-inspector-kicker {
  top: 4%;
  right: 2%;
  left: 71%;
  font-size: clamp(11px, .95vw, 18px);
  line-height: 1.1;
}

.gps-fleet-inspector h2 {
  top: 9%;
  right: 2%;
  left: 71%;
  font-size: clamp(22px, 2vw, 36px);
  line-height: 1;
}

.gps-fleet-inspector > p {
  top: 20%;
  right: 2%;
  left: 71%;
  padding: 2.2% 1.5%;
  background: linear-gradient(90deg, rgba(2,25,58,.92), rgba(4,45,83,.72));
  font: 400 clamp(13px, 1.05vw, 19px)/1.3 var(--gps-font-terminal);
}

.gps-fleet-inspector dl,
.gps-fleet-inspector.is-sideways dl {
  top: 36%;
  right: 2%;
  bottom: 15%;
  left: 71%;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: clamp(5px, .7svh, 9px);
  padding: clamp(8px, .9svh, 12px);
  background: linear-gradient(180deg, rgba(2,25,58,.92), rgba(4,45,83,.68), rgba(2,25,58,.92));
  box-shadow: 0 0 18px rgba(0,8,25,.36);
}

.gps-fleet-inspector dt { font: 400 clamp(10px, .78vw, 15px)/1.2 var(--gps-font-terminal); }
.gps-fleet-inspector dd { font: 400 clamp(11px, .88vw, 17px)/1.2 var(--gps-font-terminal); }

.gps-fleet-inspector-nav {
  z-index: 5;
  top: auto;
  right: 2%;
  bottom: 3%;
  left: 71%;
  gap: 8px;
  transform: none;
}
.gps-fleet-inspector-nav button { font-size: clamp(13px, 1vw, 19px); }
.gps-fleet-inspector-nav button:first-child,
.gps-fleet-inspector-nav button:last-child {
  width: auto;
  min-width: 0;
  flex: 1 1 0;
  padding: 0 .75em;
}

.gps-shadow-box-stage > .gps-mode-reveal .gps-mode-confirm {
  width: min(70%, 660px);
  min-height: clamp(50px, 6.8svh, 68px);
  font-family: var(--gps-font-terminal) !important;
  font-size: clamp(20px, 2.05vw, 36px);
  font-weight: 400 !important;
  line-height: 1;
  white-space: nowrap;
  transform: translateY(34%);
}

/* Repaint only the polar-bear area from the approved cabinet art above the
   live confirmation control, creating a shallow, non-blocking depth overlap. */
.gps-shadow-bear-depth {
  position: absolute;
  z-index: 10;
  inset: 0;
  background: url("./assets/opening/gps_strike_shadow_box_rose_compass_blank_v1.png") 0 0 / 100% 100% no-repeat;
  clip-path: polygon(43.4% 68.2%, 49.8% 68%, 52.9% 70.8%, 53.7% 75.2%, 52.1% 79.6%, 44.6% 80.1%, 43.2% 76.2%);
  -webkit-mask-image: radial-gradient(ellipse at 48.5% 74%, #000 42%, transparent 66%);
  mask-image: radial-gradient(ellipse at 48.5% 74%, #000 42%, transparent 66%);
  pointer-events: none;
}

/* Restore visible operational copy in the Map Room without entering the board. */
.map-room-panel-display,
.map-room-live-instruction {
  clip: auto !important;
  clip-path: none !important;
  margin: 0 !important;
  overflow: hidden !important;
  white-space: normal !important;
}

.map-room-panel-display {
  top: 13.2% !important;
  width: 29% !important;
  height: 4.7% !important;
  padding: .25% .7% !important;
  border: 1px solid rgba(173, 225, 255, .5) !important;
  background: linear-gradient(90deg, rgba(2,20,50,.92), rgba(9,62,104,.74), rgba(2,20,50,.92));
}

.map-room-panel-status { left: 27% !important; }
.map-room-panel-selected { left: 56.2% !important; }
.map-room-panel-display span { display: block; font-size: clamp(10px, .68vw, 13px); }
.map-room-panel-display strong { font-size: clamp(12px, .82vw, 16px); }

.map-room-live-instruction {
  z-index: 16;
  top: 17.65% !important;
  left: 30% !important;
  display: flex;
  width: 54% !important;
  height: 2.8% !important;
  align-items: center;
  justify-content: center;
  gap: .75em;
  color: #edf9ff;
  background: linear-gradient(90deg, transparent, rgba(2,25,58,.82) 9% 91%, transparent);
  font-size: clamp(11px, .78vw, 15px);
  text-align: center;
  text-shadow: 0 0 6px rgba(160,220,255,.54), 0 2px 2px #001126;
}

.map-room-panel-control,
.map-room-panel-deploy,
.map-room-panel-back { font-family: var(--gps-font-display); }

@media (max-width: 900px), (max-height: 680px) {
  .gps-shadow-box-stage > .gps-shadow-gold-ghost { top: 9.5%; width: 9.5% !important; height: 25% !important; }
  .gps-fleet-inspector h2 { font-size: clamp(21px, 2.6vw, 35px); }
  .gps-fleet-inspector > p { top: 14%; font-size: clamp(11px, 1.2vw, 16px); }
  .gps-fleet-inspector dt { font-size: clamp(9px, .82vw, 13px); }
  .gps-fleet-inspector dd { font-size: clamp(10px, .94vw, 15px); }
  .gps-fleet-inspector-nav button:first-child,
  .gps-fleet-inspector-nav button:last-child { min-width: 74px; }
  .gps-opening-video-controls button,
  .gps-opening-video-controls label { min-height: 46px; font-size: clamp(11px, 1.05vw, 15px); }
}

/* v1.0.0 corrected Shadow Box direction: an old naval terminal lives behind
   a genuine diorama foreground, while start, Map Room, and combat stay modern. */
.gps-shadow-box-stage > .gps-shadow-cabinet-base {
  z-index: 0;
  object-fit: fill;
}

/* The master plate is the final decoded frame of the arrival film. Only the
   approved Squadron wall mark is composited over it, so cabinet perspective,
   monitor glass, deck, and every physical piece remain frame-for-frame aligned. */

.gps-shadow-box-stage > .gps-shadow-gold-ghost,
.gps-shadow-bear-depth { display: none !important; }

.gps-shadow-display,
.gps-shadow-box-stage > .gps-mode-reveal {
  top: 9.25%;
  left: 22.55%;
  width: 58.3%;
  height: 58.55%;
}

.gps-shadow-display {
  color: #eaf8ff;
  font-family: var(--gps-font-terminal);
  text-shadow: 0 0 4px rgba(222, 247, 255, .54), 0 0 13px rgba(96, 191, 255, .3);
}

.gps-shadow-display::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(54, 125, 191, .08), transparent 66%),
    linear-gradient(180deg, rgba(3, 22, 54, .1), rgba(1, 12, 35, .15));
  box-shadow: inset 0 0 52px rgba(0, 7, 25, .34);
  content: "";
  pointer-events: none;
}

.gps-shadow-display::after {
  z-index: 20;
  border: 0;
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(205, 239, 255, .035) 3px 4px);
  box-shadow: inset 0 0 42px rgba(43, 126, 204, .1);
}

/* The monitor arrives blank, then the greeting, then the two terminal choices. */
.gps-shadow-welcome {
  z-index: 4;
  top: 47%;
  width: 94%;
  font-size: clamp(42px, 5.25vw, 94px);
  line-height: 1.08;
  letter-spacing: .075em;
  transform: translate(-50%, -45%);
}

.gps-shadow-welcome span { display: block; }

.gps-opening-hub.is-welcome-active .gps-shadow-welcome {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.gps-opening-hub.is-actions-ready .gps-shadow-welcome {
  top: 22%;
  opacity: 1;
  transform: translate(-50%, -50%);
}

.gps-shadow-actions {
  z-index: 5;
  top: 62%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 82%;
  gap: 8%;
}

.gps-opening-hub.is-actions-ready .gps-shadow-actions { transform: translate(-50%, -50%); }

.gps-shadow-actions button,
.gps-fleet-inspector-nav button,
.gps-mode-selection-actions button {
  border: 3px solid rgba(224, 246, 255, .86);
  border-radius: 17% / 27%;
  background: rgba(5, 30, 68, .34);
  color: #edf9ff;
  font-family: var(--gps-font-terminal);
  font-weight: 400;
  text-shadow: 0 0 5px rgba(224, 246, 255, .46), 0 0 13px rgba(88, 179, 242, .28);
  box-shadow: inset 0 0 20px rgba(90, 169, 226, .08), 0 0 10px rgba(143, 213, 255, .14);
}

.gps-shadow-actions button {
  min-height: clamp(96px, 13svh, 142px);
  padding: .35em .55em;
  font-size: clamp(25px, 3vw, 54px);
  line-height: 1.05;
}

.gps-shadow-actions button:hover,
.gps-shadow-actions button:focus-visible,
.gps-fleet-inspector-nav button:hover,
.gps-fleet-inspector-nav button:focus-visible,
.gps-mode-selection-actions button:hover,
.gps-mode-selection-actions button:focus-visible {
  border-color: #fff;
  outline: 2px solid rgba(225, 247, 255, .92);
  outline-offset: 3px;
  background: rgba(20, 74, 127, .42);
  filter: none;
  box-shadow: inset 0 0 24px rgba(102, 190, 247, .13), 0 0 22px rgba(144, 217, 255, .4);
}

/* A deterministic foreground plane repaints the exact diorama art above all
   monitor content. Multiple masks include the pieces that rise above the lip. */
.gps-shadow-diorama-foreground {
  position: absolute;
  z-index: 12;
  inset: 0;
  background: url("./assets/opening/gps_shadow_box_squadron_blank_user_v1.png") 0 0 / 100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0 67.7%, #000 68.05%);
  mask-image: linear-gradient(to bottom, transparent 0 67.7%, #000 68.05%);
  pointer-events: none;
}

.gps-shadow-diorama-overlap {
  position: absolute;
  z-index: 12;
  inset: 0;
  background: url("./assets/opening/gps_shadow_box_squadron_blank_user_v1.png") 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}

.gps-shadow-diorama-overlap-van {
  clip-path: polygon(34.1% 67.9%, 34.7% 67%, 40.8% 66.8%, 42.2% 67.8%, 42.4% 69%, 34% 69%);
}

.gps-shadow-diorama-overlap-bear {
  clip-path: polygon(44.2% 68.6%, 44.7% 67.1%, 45.8% 66.4%, 48.8% 66.2%, 50.2% 66.7%, 52.4% 66.9%, 53% 68%, 52.4% 69.2%, 44.5% 69.3%);
}

.gps-shadow-diorama-overlap-knight {
  clip-path: polygon(74.1% 68.7%, 74.8% 66.7%, 75.1% 64.9%, 76% 64.1%, 77% 64.5%, 77.5% 66.3%, 78% 68.7%);
}

/* The final film frame contains an uncluttered top rail. The three approved
   controls mount onto it as live image-backed controls after arrival. */
.gps-shadow-command-achievements { top: 1.3%; left: 57.6%; width: 9.5%; height: 5.1%; }
.gps-shadow-command-mute { top: 1.1%; left: 45.2%; width: 9.1%; height: 3.5%; }
.gps-shadow-command-volume { top: 4.4%; left: 45.2%; width: 9.8%; height: 2.8%; }
.gps-shadow-command-cgh { top: .7%; left: 69%; width: 10%; height: 6.7%; }

#shadow-box-controls .gps-shadow-command-achievements { background: transparent; }

#shadow-box-controls::before { display: none; }

#shadow-box-controls .gps-shadow-command-mute,
#shadow-box-controls .gps-shadow-command-volume {
  opacity: 1;
  background: transparent;
}

#shadow-box-controls .gps-shadow-command-cgh {
  background: url("./assets/branding/CGH_Development_Studio_Transparent_2026-08-23.png") center / contain no-repeat;
}

/* Every vessel uses the supplied full-screen blueprint dossier. */
.gps-fleet-inspector,
.gps-fleet-inspector.is-sideways {
  z-index: 6;
  inset: 1.2%;
  overflow: hidden;
  border: 1px solid rgba(214, 241, 255, .68);
  background: #06447c;
  box-shadow: inset 0 0 24px rgba(0, 10, 35, .36);
}

.gps-fleet-blueprint {
  inset: 0;
  border: 0;
  background: #07528d;
  box-shadow: none;
}

.gps-fleet-blueprint img,
.gps-fleet-blueprint img.is-sideways {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center;
  transform: none;
  filter: saturate(.84) brightness(.92) contrast(1.04);
}

.gps-opening-hub.is-inspecting .gps-fleet-inspector .gps-fleet-inspector-kicker,
.gps-opening-hub.is-inspecting .gps-fleet-inspector h2,
.gps-opening-hub.is-inspecting .gps-fleet-inspector > p,
.gps-opening-hub.is-inspecting .gps-fleet-inspector dl {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#fleet-inspector .gps-fleet-inspector-kicker,
#fleet-inspector > h2,
#fleet-inspector > p,
#fleet-inspector > dl {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.gps-fleet-inspector-nav {
  z-index: 14;
  inset: 0;
  display: block;
  transform: none;
  pointer-events: none;
}

.gps-fleet-inspector-nav button {
  position: absolute;
  min-height: 0;
  padding: 0;
  font-size: clamp(34px, 4.2vw, 74px);
  line-height: 1;
  pointer-events: auto;
}

.gps-fleet-inspector-nav button:first-child,
.gps-fleet-inspector-nav button:last-child {
  top: 44%;
  width: 7.5%;
  height: 14%;
}

.gps-fleet-inspector-nav button:first-child { left: .8%; }
.gps-fleet-inspector-nav button:last-child { right: .8%; left: auto; }

.gps-fleet-inspector-nav #fleet-inspector-back {
  right: auto;
  bottom: 15%;
  left: 50%;
  width: 24%;
  height: 11.5%;
  border-radius: 16% / 30%;
  font-size: clamp(24px, 2.8vw, 48px);
  transform: translateX(-50%);
}

.gps-fleet-footprint {
  position: absolute;
  z-index: 9;
  right: 2.1%;
  bottom: 1.5%;
  display: grid;
  width: 17.5%;
  height: 43%;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  padding: 1.2% 1.1%;
  border: 2px solid rgba(225, 247, 255, .88);
  background: rgba(3, 39, 79, .96);
  color: #edf9ff;
  font-family: var(--gps-font-terminal);
  text-align: center;
  text-shadow: 0 0 5px rgba(220, 245, 255, .42);
  box-shadow: 0 0 0 2px rgba(2, 23, 52, .82), 0 0 18px rgba(94, 180, 238, .16);
}

.gps-fleet-inspector[data-vessel-class="leviathan"] .gps-fleet-footprint {
  width: 24.5%;
}

.gps-fleet-footprint strong { font-size: clamp(10px, .85vw, 16px); line-height: 1; }
.gps-fleet-footprint > span { font-size: clamp(11px, 1vw, 18px); line-height: 1.05; }

.gps-fleet-footprint-grid {
  display: grid;
  height: 94%;
  max-width: 92%;
  aspect-ratio: var(--footprint-columns) / var(--footprint-rows);
  grid-template-columns: repeat(var(--footprint-columns), minmax(0, 1fr));
  grid-template-rows: repeat(var(--footprint-rows), minmax(0, 1fr));
}

.gps-fleet-footprint-grid i {
  border: 1px solid rgba(190, 229, 252, .58);
  background: rgba(11, 61, 108, .86);
}

.gps-fleet-footprint-grid i.is-occupied {
  background: #d9f1ff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.72), 0 0 8px rgba(158, 220, 255, .5);
}

/* Cards sit higher and carry live, readable Fixedsys copy over their baked
   small print. The bottom rail remains entirely inside the monitor. */
.gps-shadow-box-stage > .gps-mode-reveal {
  z-index: 8;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 1.2%;
  padding: 1% 3.8% .25%;
  overflow: hidden;
  font-family: var(--gps-font-terminal);
}

.gps-shadow-box-stage > .gps-mode-reveal .gps-mode-grid {
  align-self: start;
  gap: 2.8% 7%;
}

.gps-shadow-box-stage > .gps-mode-reveal .gps-mode-card-shell,
.gps-shadow-box-stage > .gps-mode-reveal .gps-mode-card-shell.is-selected {
  height: 100%;
  align-self: center;
}

.gps-shadow-box-stage > .gps-mode-reveal .gps-mode-card-shell.is-selected {
  transform: translateY(-1%) scale(1.055);
}

.gps-mode-card-copy {
  position: absolute;
  z-index: 5;
  right: 7%;
  bottom: 3%;
  left: 7%;
  display: flex;
  min-height: 52%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .28em;
  padding: 3.5% 3%;
  border-top: 1px solid rgba(213, 240, 255, .72);
  background: linear-gradient(180deg, rgba(5, 35, 72, .96), rgba(2, 18, 47, .98));
  color: #edf9ff;
  font-family: var(--gps-font-terminal);
  text-align: center;
  text-shadow: 0 0 4px rgba(215, 244, 255, .4);
  pointer-events: none;
}

.gps-mode-card-copy strong { font-size: clamp(15px, 1.18vw, 21px); line-height: 1; }
.gps-mode-card-copy small { font-size: clamp(11px, .9vw, 16px); line-height: 1.06; }
.gps-classic .gps-mode-card-copy { bottom: 16%; min-height: 47%; }

.gps-chain-fire-card-control {
  top: auto;
  bottom: 4.5%;
  left: 12%;
  display: flex;
  width: 76%;
  height: 10%;
  align-items: center;
  justify-content: center;
  gap: 8%;
  color: #edf9ff;
  font-family: var(--gps-font-terminal);
  font-size: clamp(8px, .65vw, 12px);
  text-shadow: 0 0 4px rgba(213, 242, 255, .4);
}

.gps-chain-fire-card-control .gps-chain-fire-switch {
  position: relative;
  top: auto;
  left: auto;
  width: clamp(12px, 13%, 20px);
}

.gps-shadow-box-stage > .gps-mode-reveal .gps-mode-selection-actions {
  display: grid;
  grid-template-columns: 22% minmax(0, 1fr) 28%;
  gap: 2%;
  min-height: clamp(62px, 8.2svh, 88px);
}

.gps-shadow-box-stage > .gps-mode-reveal .gps-mode-selection-actions button {
  position: static;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  margin: 0;
  padding: .28em .45em;
  border-radius: 14% / 28%;
  font-size: clamp(15px, 1.35vw, 25px);
  line-height: 1.05;
  white-space: normal;
  transform: none;
}

.gps-shadow-box-stage > .gps-mode-reveal .gps-mode-selection-actions .gps-mode-confirm {
  font-size: clamp(20px, 1.8vw, 34px);
  white-space: nowrap;
}

.gps-opening-hub.is-mode-selection ~ .gps-shadow-diorama-foreground,
.gps-opening-hub.is-inspecting ~ .gps-shadow-diorama-foreground { display: block; }

/* The Map Room and combat-facing interface return to the polished display
   face. Fixedsys is confined to the blue Shadow Box monitor. */
.map-room-panel-display,
.map-room-live-instruction {
  font-family: var(--gps-font-display) !important;
  font-synthesis: auto;
}

/* v1.0.1 continuity lock: the Map Room is projected into the exact cabinet
   and diorama reached by the opening film, rather than a second toy-box scene. */
.map-room-decorated-background,
.imagination-map-room-shell {
  content: url("./assets/opening/gps_shadow_box_squadron_blank_user_v1.png") !important;
  object-fit: fill;
  object-position: 50% 50%;
}

.map-room-playfield {
  top: 18.8% !important;
  left: 23.7% !important;
  width: 55.9% !important;
  height: 45.9% !important;
  aspect-ratio: auto;
}

.map-room-panel-display {
  top: 12.2% !important;
  width: 28% !important;
  height: 5% !important;
}

.map-room-panel-status { left: 23.7% !important; }
.map-room-panel-selected { left: 51.7% !important; }
.map-room-panel-display span { font-size: clamp(12px, .9vw, 16px); }
.map-room-panel-display strong { font-size: clamp(15px, 1.05vw, 19px); }

.map-room-live-instruction {
  top: 17.05% !important;
  left: 24.8% !important;
  width: 54.8% !important;
  height: 2.5% !important;
  font-size: clamp(14px, 1.05vw, 18px);
}

#map-room-auto-arrange {
  top: 56.8% !important;
  left: 26% !important;
  width: 18% !important;
  height: 4.8% !important;
}

#map-room-rotate {
  top: 62% !important;
  left: 26% !important;
  width: 18% !important;
  height: 4.8% !important;
}

#map-room-deploy {
  top: 56.8% !important;
  left: 45.5% !important;
  width: 20.5% !important;
  height: 10% !important;
}

.map-room-panel-control,
.map-room-panel-back { font-size: clamp(16px, 1.3vw, 24px); }

#map-room-back {
  top: 57.5% !important;
  left: 68.5% !important;
  width: 12.5% !important;
  height: 8% !important;
}

.map-room-board-size {
  top: 63% !important;
  right: 20.5% !important;
}

.map-room-command-panel .map-room-panel-achievements {
  top: 1.3%;
  left: 57.6%;
  width: 9.5%;
  height: 5.1%;
}

.map-room-command-panel .map-room-panel-audio {
  top: .7%;
  left: 44.5%;
  width: 11%;
  height: 7%;
  overflow: visible;
  background: transparent;
}

.map-room-command-panel .map-room-panel-audio::before { display: none; }

.map-room-command-panel .map-room-panel-mute {
  top: 0;
  left: 0;
  width: 38%;
  height: 58%;
  background: transparent !important;
}

.map-room-command-panel .map-room-panel-volume {
  top: 54%;
  left: 9%;
  width: 82%;
  height: 24%;
}

.map-room-command-panel .map-room-panel-cgh {
  top: .7%;
  left: 69%;
  width: 10%;
  height: 6.7%;
  transform: none;
}

.map-room-command-panel .map-room-panel-achievements img,
.map-room-command-panel .map-room-panel-cgh img { opacity: 0; }

.map-room-knight-foreground {
  background: none !important;
  clip-path: none !important;
}

.map-room-knight-foreground::before,
.map-room-knight-foreground::after {
  position: absolute;
  inset: 0;
  background: url("./assets/opening/gps_shadow_box_squadron_blank_user_v1.png") 0 0 / 100% 100% no-repeat;
  content: "";
}

.map-room-knight-foreground::before {
  clip-path: polygon(44.2% 68.6%, 44.7% 67.1%, 45.8% 66.4%, 48.8% 66.2%, 50.2% 66.7%, 52.4% 66.9%, 53% 68%, 52.4% 69.2%, 44.5% 69.3%);
}

.map-room-knight-foreground::after {
  clip-path: polygon(74.1% 68.7%, 74.8% 66.7%, 75.1% 64.9%, 76% 64.1%, 77% 64.5%, 77.5% 66.3%, 78% 68.7%);
}

@media (max-width: 900px), (max-height: 680px) {
  .gps-shadow-actions button { min-height: 72px; font-size: clamp(21px, 2.7vw, 34px); }
  .gps-fleet-inspector-nav button { font-size: clamp(28px, 4vw, 52px); }
  .gps-fleet-inspector-nav #fleet-inspector-back { font-size: clamp(19px, 2.5vw, 31px); }
  .gps-shadow-box-stage > .gps-mode-reveal .gps-mode-selection-actions { min-height: 54px; }
  .gps-shadow-box-stage > .gps-mode-reveal .gps-mode-selection-actions button { font-size: clamp(12px, 1.25vw, 18px); }
  .gps-shadow-box-stage > .gps-mode-reveal .gps-mode-selection-actions .gps-mode-confirm { font-size: clamp(18px, 2vw, 28px); }
  .gps-mode-card-copy strong { font-size: 12px; }
  .gps-mode-card-copy small { font-size: 8px; }
}