/* Driftworn website. Colours come from the game: the wordmark's bone white, the store captions'
   signal gold, the engines' ion blue, the hull's green heart and the alarm red of a dying hull.
   Story voices, book boards and the story card follow the game's own values (story-text-style.json,
   BookClose, the Captain's Log). */

@font-face { font-family: "Roboto"; font-weight: 400; font-display: swap; src: url("../fonts/roboto-regular.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 500; font-display: swap; src: url("../fonts/roboto-medium.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 700; font-display: swap; src: url("../fonts/roboto-bold.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 900; font-display: swap; src: url("../fonts/roboto-black.woff2") format("woff2"); }
@font-face { font-family: "Roboto Condensed"; font-weight: 700; font-display: swap; src: url("../fonts/roboto-condensed-bold.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --void: #05080e;
  --hull: #0f1724;
  --rivet: #253145;
  --edge: #22354b;
  --bone: #ece3cb;
  --text: #e9edf3;
  --muted: #a3aebd;
  --gold: #e0c67a;
  --ion: #5db6ff;
  --green: #4fd283;
  --fuel: #e9b949;
  --alarm: #ff6068;
  --card: #0e1827;
  --hud: "Roboto Condensed", "Roboto", system-ui, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Roboto Mono", monospace;
  --page: min(1240px, calc(100% - 40px));
  --radius-screen: 26px;
  --ease-out: cubic-bezier(.16, .84, .3, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Clip sideways overflow at the viewport itself. If anything pokes out to the right, Chrome on Android
   widens the layout viewport past the screen, the view slides around inside it and the sticky ship bar
   ends up hidden under the top edge whenever the address bar hides. */
html { background: var(--void); scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  color: var(--text);
  font: 400 1.0625rem/1.65 "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Clip, not hide: sticky positioning keeps working. */
  overflow-x: clip;
}
body.is-reading { overflow: hidden; }
/* The starfield stays put while the voyage scrolls past it; the canvas adds stars that drift past. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--void) url("../img/starfield.webp") center / cover no-repeat;
}
.sky { position: fixed; left: 0; top: 0; z-index: -1; width: 100%; height: 100vh; height: 100lvh; pointer-events: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--gold); text-underline-offset: .2em; }
a:hover { color: var(--bone); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 6px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 90; padding: .6em 1em; border-radius: 10px; background: var(--gold); color: var(--void); font-weight: 700; }
.skip:focus { top: 12px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Type: Roboto Black headlines, as on the store screenshots; Roboto Condensed for the HUD and labels. */
h1, h2, h3 { margin: 0; color: var(--bone); font-weight: 900; text-wrap: balance; }
h2 { font-size: clamp(2.25rem, 4.4vw, 3.75rem); line-height: 1.02; letter-spacing: -.018em; }
h3 { font-size: 1.375rem; line-height: 1.2; letter-spacing: -.005em; }
p { margin: 0; max-width: 34em; }
.lede { font-size: clamp(1.125rem, 1.6vw, 1.3rem); line-height: 1.6; color: var(--muted); }
.eyebrow { color: var(--gold); font: 700 .85rem/1 var(--hud); letter-spacing: .22em; text-transform: uppercase; margin-bottom: 14px; }
.copy > * + * { margin-top: 1.1rem; }
.copy p { color: var(--muted); }
.copy .alarm { color: var(--alarm); font-weight: 700; }

/* Buttons */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 2rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .65em;
  min-height: 48px; padding: .85em 1.35em .85em 1.1em;
  border: 0; border-radius: 12px;
  background: var(--gold); color: #1a1406;
  font: 700 1rem/1 "Roboto", system-ui, sans-serif;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 10px 30px -12px rgba(224, 198, 122, .65);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:hover { color: #1a1406; transform: translateY(-1px); box-shadow: 0 14px 34px -12px rgba(224, 198, 122, .8); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.05em; height: 1.05em; flex: none; }
/* No backdrop blur on anything that stays on screen while the page scrolls: phones redraw the blur every frame. */
.btn-ghost { background: rgba(12, 19, 30, .82); color: var(--bone); border: 1px solid rgba(236, 227, 203, .28); box-shadow: none; }
.btn-ghost:hover { color: var(--bone); border-color: var(--gold); box-shadow: 0 10px 30px -16px rgba(224, 198, 122, .6); }
.soon {
  display: inline-flex; align-items: center; gap: .6em; margin-top: 18px;
  color: var(--muted); font: 700 .82rem/1 var(--hud); letter-spacing: .14em; text-transform: uppercase;
}
.soon::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: var(--ion); box-shadow: 0 0 12px var(--ion); animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* The store line and the iPhone news side by side. iPhone and iPad visitors get theirs first (site.js marks them). */
.status { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 18px; }
.status .soon, .status .ios-soon { margin: 0; }
.ios-soon {
  display: inline-flex; align-items: center; gap: .55em; margin: 0;
  padding: .4em .95em .4em .4em; border-radius: 99px;
  border: 1px solid rgba(224, 198, 122, .42); background: rgba(12, 19, 30, .82);
  color: var(--bone); font: 600 .95rem/1.2 "Roboto", system-ui, sans-serif;
}
.ios-soon .tag { padding: .36em .6em .3em; border-radius: 99px; background: var(--gold); color: #1a1406; font: 700 .68rem/1 var(--hud); letter-spacing: .14em; text-transform: uppercase; }
.ios-soon svg { width: 1.1em; height: 1.1em; flex: none; color: var(--ion); }
.is-ios .status .ios-soon { order: -1; }

/* Sound: off until the visitor asks; then the game's music and sounds play. */
.sound {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px;
  border-radius: 99px; border: 1px solid rgba(236, 227, 203, .22); background: rgba(5, 8, 14, .9);
  color: var(--muted); font: 700 .8rem/1 var(--hud); letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
  transition: color .2s ease, border-color .2s ease, opacity .3s ease;
}
.sound svg { width: 22px; height: 22px; }
.sound .sound-on { display: none; }
.sound[aria-pressed="true"] { color: var(--gold); border-color: rgba(224, 198, 122, .55); }
.sound[aria-pressed="true"] .sound-on { display: block; }
.sound[aria-pressed="true"] .sound-off { display: none; }
.sound:hover { color: var(--bone); border-color: var(--gold); }
body.is-reading .sound { opacity: 0; pointer-events: none; }

/* A white-blue flash for the jump back to the start of a new voyage. */
.warp-flash { position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .95), rgba(160, 210, 255, .75) 35%, rgba(5, 8, 14, 0) 80%); }

/* Hero: the wordmark, the promise and the ship arriving out of its first jump. */
.hero {
  position: relative;
  min-height: 92vh;
  min-height: 92svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 24px;
  width: var(--page);
  margin: 0 auto;
  padding: 72px 0 96px;
}
.hero h1 { margin: 0 0 18px; }
.hero h1 img { width: min(600px, 100%); filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .65)); }
.hero .tagline { margin: 22px 0 14px; color: var(--bone); font-size: clamp(2rem, 3.6vw, 3.1rem); font-weight: 900; line-height: 1.05; letter-spacing: -.015em; }
.hero-ship { position: relative; justify-self: end; width: min(760px, 112%); margin-right: -6%; }
.hero-ship::before {
  content: ""; position: absolute; inset: -18% -10% -18% 8%; z-index: -1;
  background: radial-gradient(closest-side, rgba(93, 182, 255, .2), rgba(93, 182, 255, .06) 55%, transparent);
}
.hero-ship-inner { position: relative; transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) rotate(var(--tr, 0deg)); transition: transform .6s var(--ease-out); }
.hero-ship img { position: relative; width: 100%; filter: drop-shadow(0 0 38px rgba(93, 182, 255, .28)) drop-shadow(0 30px 40px rgba(0, 0, 0, .7)); animation: drift 9s ease-in-out infinite; }
/* The engines' ion glow breathes behind the hull. */
.engine-glow {
  position: absolute; left: -7%; top: 22%; width: 26%; height: 52%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(150, 215, 255, .9), rgba(93, 182, 255, .45) 45%, rgba(93, 182, 255, 0));
  filter: blur(6px); animation: engine 2.6s ease-in-out infinite; pointer-events: none;
}
@keyframes engine { 0%, 100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes drift { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-.6deg); } 50% { transform: translate3d(0, -14px, 0) rotate(.4deg); } }
/* Arriving: the ship drops out of its jump, then the words settle. */
.hero.arrive .hero-ship { animation: ship-arrive 1.5s var(--ease-out) both; }
.hero.arrive .hero-copy > * { animation: rise .9s var(--ease-out) both; }
.hero.arrive .hero-copy > :nth-child(1) { animation-delay: .35s; }
.hero.arrive .hero-copy > :nth-child(2) { animation-delay: .5s; }
.hero.arrive .hero-copy > :nth-child(3) { animation-delay: .62s; }
.hero.arrive .hero-copy > :nth-child(4) { animation-delay: .74s; }
.hero.arrive .hero-copy > :nth-child(5) { animation-delay: .86s; }
@keyframes ship-arrive {
  0% { opacity: 0; transform: translate3d(-70vw, 0, 0) scaleX(1.6); filter: blur(12px) brightness(2.2); }
  55% { opacity: 1; filter: blur(0) brightness(1.4); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes rise { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }

/* Trailer: a wide viewscreen. Nothing loads from YouTube until it is played. */
.trailer { width: var(--page); margin: 0 auto; padding: 24px 0 120px; }
.viewscreen {
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 20px; background: #000;
  border: 1px solid rgba(236, 227, 203, .18);
  box-shadow: 0 0 0 8px rgba(15, 23, 36, .85), 0 40px 90px -30px rgba(0, 0, 0, .9), 0 0 120px -40px rgba(93, 182, 255, .35);
}
.viewscreen img, .viewscreen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.play {
  position: absolute; inset: 0; display: grid; place-items: center;
  border: 0; padding: 0; background: linear-gradient(180deg, rgba(5, 8, 14, 0) 55%, rgba(5, 8, 14, .55));
  color: var(--bone); cursor: pointer;
}
.play span {
  position: relative; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%;
  background: rgba(5, 8, 14, .55); border: 2px solid var(--gold);
  box-shadow: 0 0 0 10px rgba(224, 198, 122, .12), 0 0 40px rgba(224, 198, 122, .35);
  transition: transform .2s ease, box-shadow .2s ease;
}
/* The pulse is a ring that scales and fades (cheap), not an animated shadow (repainted every frame). */
.play span::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 2px solid rgba(224, 198, 122, .4); animation: pulse-ring 2.8s ease-out infinite; }
@keyframes pulse-ring { 0% { transform: scale(.88); opacity: .9; } 70%, 100% { transform: scale(1.22); opacity: 0; } }
.play:hover span, .play:focus-visible span { transform: scale(1.06); }
.play svg { width: 34px; height: 34px; margin-left: 6px; fill: var(--gold); }
.trailer figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 22px; color: var(--muted); font-size: .95rem; }
.trailer figcaption strong { color: var(--bone); font-weight: 700; }

/* Screens from the game, framed like the store screenshots. */
.screen {
  overflow: hidden; border-radius: var(--radius-screen); background: var(--hull);
  border: 1px solid rgba(236, 227, 203, .18);
  box-shadow: 0 0 0 7px rgba(15, 23, 36, .92), 0 36px 70px -26px rgba(0, 0, 0, .95);
}
.screen img { width: 100%; }

/* The voyage: content on the left, the ship on the right taking every hit the page describes. */
.voyage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 40%);
  width: var(--page);
  margin: 0 auto;
}
.legs { grid-column: 1; grid-row: 1; }
.stage {
  grid-column: 2; grid-row: 1;
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: grid; place-content: center; justify-items: center; gap: 22px;
  pointer-events: none;
}
.stage-ship { position: relative; width: min(470px, 34vw); aspect-ratio: 1; }
.stage-ship img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* A ship's five damage stages sit on top of each other; only the shown one is painted, and the shadow is drawn once,
   on the float that carries them all. */
.stage-ship img, .target-ship img, .hangar-ship img { opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s; }
.stage-ship img.is-shown, .target-ship img.is-shown, .hangar-ship img.is-shown { opacity: 1; visibility: visible; transition: opacity .4s ease; }
.stage-ship .ship-float { position: absolute; inset: 0; animation: drift 9s ease-in-out infinite;
  filter: drop-shadow(0 0 34px rgba(93, 182, 255, .22)) drop-shadow(0 26px 36px rgba(0, 0, 0, .7)); }
.stage[data-hit] .ship-float { animation: hit .5s ease-out, drift 9s ease-in-out .5s infinite; }
@keyframes hit { 0% { transform: translateX(0); } 20% { transform: translateX(-12px) rotate(-1.5deg); } 45% { transform: translateX(8px); } 70% { transform: translateX(-4px); } 100% { transform: none; } }
.blast {
  position: absolute; inset: 8%; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 244, 214, .95) 0 12%, rgba(255, 150, 70, .75) 30%, rgba(255, 96, 104, .25) 55%, transparent 70%);
}
.stage.is-destroyed .blast { animation: blast 1.1s ease-out forwards; }
.stage.is-destroyed .stage-ship img { opacity: 0 !important; transition: opacity .25s ease .2s; }
@keyframes blast { 0% { opacity: 0; transform: scale(.3); } 18% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6); } }

/* Effects drawn over a ship: shots, sparks, storms, signal rings, repairs and numbers. */
.fx { position: absolute; inset: 0; pointer-events: none; }
.fx > * { position: absolute; pointer-events: none; will-change: transform, opacity; }
.fx .bolt { height: 5px; border-radius: 99px; transform-origin: 100% 50%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--c) 45%, #fff 92%);
  box-shadow: 0 0 10px var(--c), 0 0 22px var(--c); }
.fx .rocket { width: 64px; transform-origin: 100% 50%; filter: drop-shadow(0 0 8px rgba(255, 170, 90, .8)); }
.fx .impact { width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 14%, rgba(255, 214, 140, .95) 26%, rgba(255, 120, 60, .55) 48%, rgba(255, 80, 60, 0) 70%); mix-blend-mode: screen; }
.fx .impact.cool { background: radial-gradient(circle, #fff 0 14%, rgba(170, 225, 255, .95) 26%, rgba(93, 182, 255, .55) 48%, rgba(93, 182, 255, 0) 70%); }
.fx .spark { width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: #ffd9a0; box-shadow: 0 0 8px #ff9d4d; }
.fx .debris { width: 9px; height: 5px; margin: -2px 0 0 -4px; border-radius: 1px; background: #8d97a3; box-shadow: 0 0 6px rgba(255, 140, 60, .8); }
.fx .ring { width: 40%; aspect-ratio: 1; left: 30%; top: 30%; border-radius: 50%; border: 2px solid var(--gold); box-shadow: 0 0 18px rgba(224, 198, 122, .5), inset 0 0 18px rgba(224, 198, 122, .3); }
.fx .shock { width: 50%; aspect-ratio: 1; left: 25%; top: 25%; border-radius: 50%; border: 3px solid rgba(255, 210, 160, .9); box-shadow: 0 0 30px rgba(255, 140, 70, .7); }
.fx .arcs { inset: -6%; width: 112%; height: 112%; overflow: visible; filter: drop-shadow(0 0 6px #8fd0ff) drop-shadow(0 0 14px #5db6ff); }
.fx .arcs polyline { fill: none; stroke: #dff2ff; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fx .storm { inset: -20%; border-radius: 50%; background: radial-gradient(closest-side, rgba(110, 170, 255, .35), rgba(120, 90, 255, .12) 60%, transparent); mix-blend-mode: screen; }
/* Nanite mend: a green glaze that sweeps across the hull itself (masked by the ship's own sprite). */
.glaze { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(100deg, rgba(79, 210, 131, 0) 38%, rgba(175, 255, 210, .95) 50%, rgba(79, 210, 131, 0) 62%) 110% 0 / 260% 100% no-repeat;
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.fx .mote { width: 5px; height: 5px; margin: -2px 0 0 -2px; border-radius: 50%; background: #b9ffd5; box-shadow: 0 0 8px #4fd283; }
.fx .alarm { inset: -30%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 60, 70, .05) 15%, rgba(255, 60, 70, .26) 55%, rgba(255, 60, 70, .1) 80%, rgba(255, 60, 70, 0)); }
.fx .dmg { left: 50%; top: 30%; font: 900 clamp(1.1rem, 2.2vw, 2rem)/1 "Roboto", sans-serif; color: #ff7a80; white-space: nowrap;
  text-shadow: 0 2px 0 #3a0a0e, 0 0 18px rgba(255, 60, 70, .7); transform: translate(-50%, 0); }
.fx .dmg.heal { color: #8ff0b6; text-shadow: 0 2px 0 #08301a, 0 0 18px rgba(79, 210, 131, .7); }
.fx .dmg.crew { color: #ffb4a0; font-size: clamp(.9rem, 1.4vw, 1.25rem); letter-spacing: .04em; }

/* The HUD reads the voyage like the game's top bar: galaxy, fuel, hull and crew, then what just happened. */
.hud { width: min(380px, 30vw); font-family: var(--hud); font-weight: 700; letter-spacing: .04em; }
.hud-bar { display: flex; flex-wrap: nowrap; gap: 8px; justify-content: center; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px;
  border-radius: 99px; background: rgba(10, 16, 26, .82); border: 1px solid var(--rivet);
  color: var(--bone); font: 700 1rem/1 var(--hud); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.chip b { font-weight: 700; }
.chip i { font-style: normal; color: var(--muted); font-size: .8em; margin-left: -3px; }
.chip svg { width: 17px; height: 17px; flex: none; }
.chip-galaxy { color: var(--gold); border-color: rgba(224, 198, 122, .45); padding: 0 12px; }
.chip-fuel svg { color: var(--fuel); }
.chip-hull svg { color: var(--green); transition: color .4s ease; }
.chip-crew svg { color: #8fb3d9; }
.chip.bump { animation: bump .55s var(--ease-out); }
.chip.bump-bad { animation: bump-bad .7s ease-out; }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.18); border-color: var(--gold); } 100% { transform: scale(1); } }
@keyframes bump-bad { 0% { transform: scale(1); } 30% { transform: scale(1.15); border-color: var(--alarm); background: rgba(255, 96, 104, .25); } 100% { transform: scale(1); } }
.hud[data-level="mid"] .chip-hull svg { color: var(--gold); }
.hud[data-level="low"] .chip-hull svg, .hud[data-level="low"] .chip-hull b { color: var(--alarm); }
.hull-bar { height: 8px; margin: 12px 0 10px; border-radius: 99px; background: var(--rivet); overflow: hidden; }
.hull-fill { height: 100%; width: 100%; border-radius: inherit; background: var(--green); box-shadow: 0 0 14px currentColor; color: var(--green); transition: width .7s cubic-bezier(.2, .8, .2, 1), background-color .4s ease; }
.hud[data-level="mid"] .hull-fill { background: var(--gold); color: var(--gold); }
.hud[data-level="low"] .hull-fill { background: var(--alarm); color: var(--alarm); }
.hud-status { color: var(--gold); font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; min-height: 1.4em; text-align: center; }
.hud[data-level="low"] .hud-status { color: var(--alarm); }

/* One leg of the voyage per screen. */
.leg {
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  align-items: center; gap: clamp(28px, 4vw, 56px);
  padding: 80px 0;
}
.leg .shots { display: grid; gap: 22px; }
.leg .shots.pair { grid-template-columns: 1fr; }
.leg .shots.pair .screen + .screen { width: 78%; margin: -46% 0 0 34%; }
.leg-death { position: relative; }
.leg-death .shots.pair .screen + .screen { width: 92%; margin: -18% 0 0 14%; }

/* A live story card, drawn like the game's: the real first page of a signal, with the call at the bottom. */
.story-card {
  position: relative; overflow: hidden; border-radius: 20px;
  background: linear-gradient(180deg, #0f1b2b, #0b1420);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--edge));
  box-shadow: 0 0 0 7px rgba(15, 23, 36, .92), 0 36px 70px -26px rgba(0, 0, 0, .95);
}
.story-art { position: relative; aspect-ratio: 2 / 1; overflow: hidden; }
.story-art img { width: 100%; height: 100%; object-fit: cover; }
.story-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 27, 43, 0) 40%, #0f1b2b); }
.story-body { padding: 0 18px 18px; margin-top: -16px; position: relative; }
.story-eyebrow, .reader-eyebrow { color: var(--accent); font: 700 .72rem/1.3 var(--hud); letter-spacing: .2em; text-transform: uppercase; max-width: none; }
.story-title { margin-top: 4px; font-size: 1.25rem; font-weight: 700; }
.story-meta { margin-top: 2px; color: var(--muted); font-size: .82rem; }
.story-text { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(143, 179, 217, .14); max-height: 10.5em; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
.story-text p { font-size: .86rem; line-height: 1.55; color: #dfe6ee; max-width: none; }
.story-text p + p { margin-top: .7em; }
.your-call { display: flex; align-items: center; gap: 12px; margin: 10px 0 2px; color: var(--accent); font: 700 .7rem/1 var(--hud); letter-spacing: .22em; text-transform: uppercase; max-width: none; }
.your-call::before, .your-call::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--accent) 45%, transparent); }
.story-choices { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 7px; }
.story-choices li { padding: 9px 12px; border-radius: 10px; background: rgba(10, 17, 28, .9); border: 1px solid #263a52; font-size: .82rem; line-height: 1.35; color: var(--text); }
.story-open { display: block; width: 100%; padding: 13px 16px; border: 0; border-top: 1px solid rgba(143, 179, 217, .14); background: rgba(10, 16, 26, .9);
  color: var(--gold); font: 700 .8rem/1 var(--hud); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.story-open::after { content: ""; position: absolute; inset: 0; }
.story-card:hover { border-color: var(--accent); }
.story-card:hover .story-open { color: var(--bone); }

/* "You will die" breaks out of the column: the aftermath, full width. */
.aftermath {
  position: relative; isolation: isolate;
  padding: 140px 0 120px; margin: 40px 0;
  background: linear-gradient(180deg, var(--void) 0%, rgba(5, 8, 14, .25) 22%, rgba(5, 8, 14, .35) 70%, var(--void) 100%),
              url("../img/aftermath-1728.webp") center / cover no-repeat;
}
.aftermath-inner { width: var(--page); margin: 0 auto; text-align: center; }
.aftermath h2 { font-size: clamp(3rem, 8vw, 7rem); letter-spacing: -.03em; text-shadow: 0 10px 40px rgba(0, 0, 0, .8); }
.aftermath p { margin: 20px auto 0; color: var(--bone); font-size: 1.2rem; text-shadow: 0 2px 16px rgba(0, 0, 0, .9); }

/* The Captain's Log shelf: every story as a book, the middle one large, its neighbours fading away. */
.library { width: var(--page); margin: 0 auto; padding: 40px 0 120px; text-align: center; }
.library-head { max-width: 760px; margin: 0 auto; }
.library-head .lede { margin: 18px auto 0; }
.library-note { margin: 34px auto 0; color: var(--muted); font-size: .95rem; }
.shelf { --bw: 250px; position: relative; height: calc(var(--bw) * 1.38 + 90px); margin-top: 30px; perspective: 1600px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.shelf::after { /* the shelf's light: a soft line the books stand on */
  content: ""; position: absolute; left: 8%; right: 8%; bottom: 40px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(143, 179, 217, .35), transparent); box-shadow: 0 0 30px 6px rgba(93, 182, 255, .08);
}
.books { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; transform-style: preserve-3d; }
/* Before the script arranges them (or without it), the books sit in a row you can scroll. */
.shelf:not(.is-ready) .books { position: static; display: flex; gap: 20px; overflow-x: auto; padding: 12px 4px 20px; scroll-snap-type: x mandatory; }
.shelf:not(.is-ready) .book-slot { position: relative; flex: 0 0 160px; scroll-snap-align: center; }
.shelf:not(.is-ready) .shelf-arrow { display: none; }
.shelf:not(.is-ready) { height: auto; }
.book-caption { display: block; margin-top: 10px; color: var(--muted); font-size: .85rem; line-height: 1.3; }
.shelf.is-ready .book-caption { display: none; }
.shelf.is-ready .book-slot {
  position: absolute; left: 50%; top: 14px; width: var(--bw); margin-left: calc(var(--bw) / -2);
  transition: transform .55s var(--ease-out), opacity .55s ease;
}
.shelf.is-dragging .book-slot { transition: none; }
.book { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.book:focus-visible { outline-offset: 8px; }
.book-board {
  position: relative; display: block; aspect-ratio: 1 / 1.38; overflow: hidden;
  border-radius: 2px 8px 8px 2px; background: #0a1322;
  box-shadow: 0 24px 30px -10px rgba(0, 0, 0, .75);
}
.book-board::before { /* the cover's light: darker edges, a darker foot, as BookClose paints it; side books dimmer (--dim) */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(rgba(5, 8, 14, var(--dim, 0)), rgba(5, 8, 14, var(--dim, 0))),
              radial-gradient(circle at 56% 42%, rgba(2, 6, 16, 0) 0, rgba(2, 6, 16, 0) 37%, rgba(2, 6, 16, .62) 82%),
              linear-gradient(180deg, rgba(5, 10, 20, 0) 55%, rgba(5, 10, 20, .6));
}
.book-board::after { /* the board's rim */
  content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; border: 1px solid var(--edge); pointer-events: none;
}
.book-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter .6s ease; }
.book-cover-main { display: grid; place-items: center; background: linear-gradient(135deg, #22395c, #132540 55%, #0c1828); color: #e4ecf4; }
.book-cover-main .mark { width: 42%; height: 42%; margin-top: -14%; filter: drop-shadow(0 0 18px rgba(228, 236, 244, .35)); }
.book-cover-main::after { content: "Heartglass"; position: absolute; left: 0; right: 0; bottom: 16%; text-align: center; color: #e4ecf4;
  font: 700 .82rem/1 var(--hud); letter-spacing: .32em; text-transform: uppercase; opacity: .85; }
.book-binding { position: absolute; z-index: 3; left: 0; top: 0; bottom: 0; width: 10%;
  background: linear-gradient(90deg, rgba(0, 0, 0, .55) 0%, rgba(255, 255, 255, .2) 12%, rgba(255, 255, 255, 0) 28%, rgba(0, 0, 0, .45) 37%, rgba(0, 0, 0, 0) 48%, rgba(255, 255, 255, .14) 57%, rgba(255, 255, 255, 0) 80%); }
.book-foot { display: block; height: 4px; margin: 0 6px 0 2px; border-radius: 0 0 4px 2px;
  background: repeating-linear-gradient(90deg, #22344a 0 2px, #18263a 2px 4px); box-shadow: 0 2px 0 #060c16; }
.book-chip { position: absolute; z-index: 5; top: 10px; right: 10px; padding: 4px 7px 3px; border-radius: 6px;
  background: rgba(5, 8, 14, .82); color: var(--gold); font: 700 .66rem/1 var(--hud); letter-spacing: .12em; text-transform: uppercase; }
.book-seal { position: absolute; z-index: 5; left: 50%; top: 44%; width: 64px; height: 64px; margin: -32px 0 0 -32px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(143, 179, 217, .35); background: rgba(5, 8, 14, .6); color: #8fb3d9; transition: opacity .5s ease, transform .5s ease; }
.book-seal svg { width: 30px; height: 30px; }
.book.is-decoding .book-board::before { background: repeating-linear-gradient(180deg, rgba(143, 179, 217, .18) 0 2px, transparent 2px 5px); animation: scan 1.1s linear; }
@keyframes scan { from { background-position: 0 0; } to { background-position: 0 120px; } }
.book.is-decoded .book-seal { opacity: 0; transform: scale(1.6); }
.book-slot.is-active .book { cursor: zoom-in; }
.book-slot.is-active .book-board { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent), 0 0 46px -8px color-mix(in srgb, var(--accent) 55%, transparent), 0 24px 30px -10px rgba(0, 0, 0, .75); }
.book-slot.is-opening { visibility: hidden; }

.shelf-arrow {
  position: absolute; z-index: 30; top: calc(14px + var(--bw) * .69); width: 52px; height: 52px; margin-top: -26px;
  display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(236, 227, 203, .25);
  background: rgba(5, 8, 14, .88); color: var(--bone); cursor: pointer;
  transition: border-color .2s ease, transform .2s ease;
}
.shelf-arrow:hover { border-color: var(--gold); transform: scale(1.06); }
.shelf-arrow svg { width: 24px; height: 24px; }
.shelf-arrow.prev { left: 0; }
.shelf-arrow.next { right: 0; }
.shelf-arrow:disabled { opacity: .3; cursor: default; transform: none; }
.shelf-dots { display: flex; justify-content: center; gap: 6px; margin-top: -24px; position: relative; z-index: 2; }
.shelf-dots span { width: 6px; height: 6px; border-radius: 99px; background: #3a4a5e; transition: width .3s ease, background-color .3s ease; }
.shelf-dots span.is-on { width: 20px; background: var(--gold); }
.shelf-info { --accent: var(--gold); max-width: 560px; margin: 26px auto 0; min-height: 190px; }
.shelf-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font: 700 .8rem/1 var(--hud); letter-spacing: .22em; text-transform: uppercase; max-width: none; }
.shelf-eyebrow svg { width: 14px; height: 14px; }
.shelf-title { margin-top: 8px; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.shelf-info.is-swapping > * { animation: info-in .45s var(--ease-out); }
@keyframes info-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.track { display: flex; justify-content: center; gap: 5px; margin: 14px 0 10px; }
.track span { width: 26px; height: 4px; border-radius: 99px; background: #2a3b4d; }
.track span:first-child { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.shelf-meta { margin: 0 auto; color: var(--muted); font-size: .95rem; }
.shelf-meta .premium { color: var(--gold); }
.shelf-tagline { margin: 8px auto 0; color: var(--bone); font-size: 1.1rem; font-style: italic; min-height: 1.6em; }
.shelf-actions { display: flex; justify-content: center; margin-top: 20px; }
.decode-text { font-family: var(--mono); letter-spacing: .02em; }

/* The reader: the book opens, its first page grows into the game's story card. */
.reader { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; }
.reader[hidden] { display: none; }
.reader-dim { position: absolute; inset: 0; background: rgba(3, 6, 12, .8); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.reader-stage { position: absolute; inset: 0; pointer-events: none; perspective: 1800px; overflow: hidden; }
.fly-book { position: absolute; transform-style: preserve-3d; }
.fly-page { position: absolute; inset: 1.5% 2% 1.5% 1%; border-radius: 1px 6px 6px 1px; background: #18263a; overflow: hidden; box-shadow: inset 0 0 0 1px #1e2f44; }
.fly-page::before { /* the page's printed lines, seen small */
  content: ""; position: absolute; left: 12%; right: 12%; top: 30%; bottom: 14%;
  background: repeating-linear-gradient(180deg, rgba(223, 230, 238, .28) 0 2px, transparent 2px 9px); }
.fly-page::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26%; background: var(--art) center / cover; opacity: .9; }
.fly-cover { position: absolute; inset: 0; transform-origin: 0 50%; transform-style: preserve-3d; }
.fly-cover .face { position: absolute; inset: 0; border-radius: 2px 8px 8px 2px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.fly-cover .face.back { transform: rotateY(180deg); border-radius: 8px 2px 2px 8px; background: #0d1828; }
.fly-cover .face.back svg { width: 100%; height: 100%; }
.fly-cover .face .book-cover-main, .fly-cover .face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fly-cover .face::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid var(--edge); }

.reader-card {
  --accent: var(--gold);
  position: relative; z-index: 2; display: flex; flex-direction: column;
  width: min(580px, calc(100vw - 32px)); height: min(880px, calc(100vh - 40px)); height: min(880px, calc(100dvh - 40px));
  border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, #101c2d, #0b1421);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--edge));
  box-shadow: 0 50px 140px -30px rgba(0, 0, 0, .95), 0 0 80px -30px color-mix(in srgb, var(--accent) 40%, transparent);
  transform-origin: 0 0;
}
.reader-card.is-main { --accent: #e4ecf4; }
.reader-close {
  position: absolute; top: 12px; right: 12px; z-index: 5; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(236, 227, 203, .28); background: rgba(5, 8, 14, .65); color: var(--bone); cursor: pointer;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.reader-close:hover { border-color: var(--gold); }
.reader-close svg { width: 20px; height: 20px; }
.reader-page { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.reader-page[hidden] { display: none; }
.reader-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 18px; scrollbar-width: thin; scrollbar-color: #2a3f57 transparent; }
.reader-art { position: relative; aspect-ratio: 2 / 1; overflow: hidden; background: #0a1322; }
.reader-art img { width: 100%; height: 100%; object-fit: cover; }
.reader-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 28, 45, 0) 45%, #101c2d 98%); }
.reader-head { position: relative; padding: 0 26px; margin-top: -30px; }
.reader-eyebrow { display: flex; align-items: center; gap: 8px; }
.reader-eyebrow svg { width: 14px; height: 14px; }
.reader-head h3 { margin-top: 6px; font-size: clamp(1.45rem, 3.2vw, 1.85rem); font-weight: 700; }
.reader-meta { margin-top: 4px; color: var(--muted); font-size: .92rem; }
.reader-text { margin: 18px 26px 0; padding-top: 18px; border-top: 1px solid rgba(143, 179, 217, .14); }
.reader-text p { max-width: none; margin: 0 0 1.05em; color: #e3eaf1; font-size: 1.04rem; line-height: 1.66; letter-spacing: .005em; }
.reader-text p:last-child { margin-bottom: 0; }
/* The game's voices (story-text-style.json): colour per voice, a typeface per role. */
.v-warm { color: #e4c78b; } .v-cool { color: #abd4e8; } .v-stern { color: #eeada3; } .v-strange { color: #cfb9e8; } .v-calm { color: #b5d6c6; }
.r-transmission { font-weight: 500; }
.r-readout, .r-receipt { font-family: var(--mono); font-size: .9em; letter-spacing: .05em; }
.reader-choices { flex: none; padding: 8px 22px 22px; padding-bottom: max(22px, env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(11, 20, 33, .4), #0b1421 30%); border-top: 1px solid rgba(143, 179, 217, .1); }
.reader-choices .your-call { margin-top: 8px; }
.choices { display: grid; gap: 9px; margin-top: 12px; }
.choice {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 12px 16px; text-align: left;
  border-radius: 12px; border: 1px solid #283e57; background: #0e1a2a; color: var(--text);
  font: 500 1rem/1.35 "Roboto", sans-serif; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.choice:hover, .choice:focus-visible { border-color: var(--accent); background: #13233a; transform: translateX(3px); }
.choice-tag { flex: none; padding: 4px 8px 3px; border-radius: 6px; background: rgba(224, 198, 122, .14); color: var(--gold); font: 700 .74rem/1 var(--hud); letter-spacing: .08em; text-transform: uppercase; }
.choice-go { margin-left: auto; flex: none; width: 18px; height: 18px; color: var(--muted); }
.reader-end { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; height: 100%; padding: 60px 30px; text-align: center; }
.reader-end[hidden] { display: none; }
.reader-end .reader-eyebrow { justify-content: center; }
.end-label { margin-top: 30px; color: var(--muted); font: 700 .78rem/1 var(--hud); letter-spacing: .24em; text-transform: uppercase; }
.end-choice { margin: 16px 0 0; max-width: 24em; color: var(--bone); font-size: clamp(1.35rem, 3.4vw, 1.9rem); font-weight: 900; line-height: 1.2; letter-spacing: -.01em; }
.end-choice::before { content: "“"; } .end-choice::after { content: "”"; }
.end-text { margin: 22px auto 0; color: var(--muted); font-size: 1.05rem; max-width: 26em; }
.reader-end .btn-play { margin-top: 28px; font-size: 1.05rem; min-height: 54px; padding: .9em 1.5em; }
.reader-end .soon { margin-top: 26px; }
.reader-end .ios-soon { margin-top: 14px; }
.end-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
.end-actions .btn svg { order: 2; }
.reader-card.turn .reader-page, .reader-card.turn .reader-end { animation: page-turn .7s var(--ease-out); transform-origin: 0 50%; }
@keyframes page-turn { 0% { transform: perspective(1400px) rotateY(-80deg); opacity: 0; } 45% { opacity: 1; } 100% { transform: none; } }

/* Know your enemy: tap a ship and watch it break apart, stage by stage, as in battle. */
.range { width: var(--page); margin: 0 auto; padding: 40px 0 130px; }
.range-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 18px 40px; margin-bottom: 40px; }
.range-head .lede { grid-column: 1; }
.range-head h2 { grid-column: 1; }
/* Your kills and everyone's: the shared total comes from api/kills.php and stays hidden until it answers. */
.range-score { grid-column: 2; grid-row: 1 / span 2; align-self: end; display: flex; gap: 34px; }
.range-score p { max-width: none; color: var(--muted); font: 700 .9rem/1 var(--hud); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; text-align: right; }
.range-score span { display: block; margin-bottom: 6px; color: var(--alarm); font-size: 2.6rem; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.range-global span { color: var(--gold); text-shadow: 0 0 22px rgba(224, 198, 122, .35); }
.range-global.bump span { animation: bump .5s var(--ease-out); }
.targets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.target {
  position: relative; display: grid; width: 100%; height: 100%; padding: 16px 18px 18px; text-align: left; overflow: hidden;
  border-radius: 18px; border: 1px solid var(--rivet); cursor: crosshair; -webkit-tap-highlight-color: transparent;
  background: radial-gradient(120% 80% at 70% 30%, rgba(255, 96, 104, .07), transparent 60%), linear-gradient(180deg, rgba(15, 23, 36, .82), rgba(9, 14, 23, .92));
  transition: border-color .2s ease, transform .2s ease;
}
.target:hover { border-color: rgba(255, 96, 104, .5); }
.target:active { transform: scale(.99); }
.target-ship { position: relative; display: block; aspect-ratio: 16 / 10; margin: 0 -6px 4px; }
.target-ship img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.target-ship .float { position: absolute; inset: 0; animation: drift 7s ease-in-out infinite; filter: drop-shadow(0 18px 20px rgba(0, 0, 0, .65)); }
/* Sizes as they read in battle: a Warden is a pod, the Mother Ship fills the screen. */
[data-target="praedao-scout"] .target-ship img { transform: scale(.8); }
[data-target="praedao-bomber"] .target-ship img { transform: scale(.76); }
[data-target="praedao-destroyer"] .target-ship img { transform: scale(.92); }
[data-target="ancient-warden"] .target-ship img { transform: scale(.64); }
[data-target="mother-ship"] .target-ship img { transform: scale(1.08); }
.target.is-hit .target-ship .float { animation: hit .45s ease-out, drift 7s ease-in-out .45s infinite; }
.target.is-dead .target-ship img { opacity: 0 !important; transition: opacity .2s ease .15s; }
.target.is-back .target-ship { animation: warp-in .7s var(--ease-out); }
@keyframes warp-in { from { opacity: 0; transform: translateX(40%) scaleX(1.5); filter: blur(8px) brightness(2); } to { opacity: 1; transform: none; filter: none; } }
.target-name { color: var(--bone); font-weight: 900; font-size: 1.2rem; line-height: 1.2; }
.target-role { margin-top: 4px; color: var(--muted); font-size: .95rem; line-height: 1.45; }
.target-hull { display: block; height: 6px; margin-top: 14px; border-radius: 99px; background: var(--rivet); overflow: hidden; align-self: end; }
.target-hull span { display: block; height: 100%; width: 100%; border-radius: inherit; background: #ff7a5c; box-shadow: 0 0 10px rgba(255, 122, 92, .7); transition: width .35s ease; }
.target .fx { z-index: 3; }
.target .kill-tag { position: absolute; z-index: 4; left: 50%; top: 32%; transform: translate(-50%, -50%); color: var(--alarm);
  font: 700 1rem/1 var(--hud); letter-spacing: .24em; text-transform: uppercase; text-shadow: 0 0 18px rgba(255, 60, 70, .8); pointer-events: none; }

/* The hangar: pick a ship, meet its crew, drag its hull down and watch it break. */
.hangar { width: var(--page); margin: 0 auto; padding: 40px 0 130px; }
.hangar-head { max-width: 760px; margin-bottom: 30px; }
.hangar-head .lede { margin-top: 18px; }
.hangar-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 30px 48px; }
.hangar-view { --ship: #8fa6b8; position: relative; width: 100%; max-width: 600px; aspect-ratio: 1; justify-self: center; }
.hangar-view::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ship) 30%, transparent), transparent 75%); transition: background .5s ease; }
.hangar-ship { position: absolute; inset: 0 0 12% 0; }
.hangar-ship .float { position: absolute; inset: 0; animation: drift 9s ease-in-out infinite;
  filter: drop-shadow(0 0 30px color-mix(in srgb, var(--ship) 30%, transparent)) drop-shadow(0 26px 36px rgba(0, 0, 0, .7)); }
.hangar-ship img, .hangar-ship .glaze { transform: scale(1.14); }
.hangar-ship img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.hangar-view.is-hit .hangar-ship .float { animation: hit .45s ease-out, drift 9s ease-in-out .45s infinite; }
.hangar-view.is-swapping .hangar-ship { animation: warp-in .8s var(--ease-out); }
.hangar-view.is-destroyed .hangar-ship img { opacity: 0 !important; }
.hangar-view .fx { inset: 0 0 12% 0; }
.hangar-blast { position: absolute; inset: 10% 10% 22% 10%; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 244, 214, .95) 0 12%, rgba(255, 150, 70, .75) 30%, rgba(255, 96, 104, .25) 55%, transparent 70%); }
.hangar-view.is-destroyed .hangar-blast { animation: blast 1.1s ease-out forwards; }
.hull-slider { position: absolute; left: 12%; right: 12%; bottom: 0; display: block; font-family: var(--hud); font-weight: 700; }
.hull-slider-row { display: flex; justify-content: space-between; align-items: baseline; color: var(--muted); font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; }
.hull-slider-row b { color: var(--bone); font-size: 1.15rem; letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.hull-slider input {
  --pct: 100%; --tone: var(--green);
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 34px; margin: 4px 0 0; background: transparent; cursor: grab; touch-action: pan-y;
}
.hull-slider input:active { cursor: grabbing; }
.hull-slider input::-webkit-slider-runnable-track { height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--tone) var(--pct), var(--rivet) var(--pct)); box-shadow: 0 0 14px -2px var(--tone); }
.hull-slider input::-moz-range-track { height: 10px; border-radius: 99px; background: var(--rivet); }
.hull-slider input::-moz-range-progress { height: 10px; border-radius: 99px; background: var(--tone); }
.hull-slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -9px; border-radius: 50%; background: var(--bone); border: 4px solid #0b1421; box-shadow: 0 0 0 2px var(--tone), 0 6px 14px rgba(0, 0, 0, .6); }
.hull-slider input::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--bone); border: 4px solid #0b1421; box-shadow: 0 0 0 2px var(--tone); }
.ship-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ship-tab {
  display: grid; justify-items: center; gap: 8px; min-height: 92px; padding: 12px 6px 10px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--rivet); background: rgba(12, 19, 30, .7); color: var(--muted); font: 700 .78rem/1 var(--hud); letter-spacing: .12em; text-transform: uppercase;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.ship-tab img { width: 100%; height: 44px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .6)); }
.ship-tab:hover { color: var(--bone); border-color: color-mix(in srgb, var(--ship) 60%, var(--rivet)); }
.ship-tab[aria-selected="true"] { color: var(--bone); border-color: var(--ship); background: color-mix(in srgb, var(--ship) 10%, rgba(12, 19, 30, .8)); box-shadow: 0 12px 30px -16px var(--ship); }
.ship-card { --ship: #8fa6b8; margin-top: 26px; }
.ship-card h3 { font-size: clamp(2rem, 3.6vw, 2.8rem); letter-spacing: -.02em; }
.ship-look { margin-top: 8px; color: var(--bone); font-size: 1.1rem; }
.ship-unlock { margin-top: 6px; color: var(--ship); font-weight: 700; }
.ship-note { margin-top: 16px; color: var(--muted); }
.crew-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.crew-list li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 99px; border: 1px solid var(--rivet); background: rgba(12, 19, 30, .75); color: var(--bone); font-weight: 500; }
.crew-list .role { padding: 4px 8px 3px; border-radius: 99px; background: color-mix(in srgb, var(--ship) 18%, #0b1421); color: var(--ship); font: 700 .68rem/1 var(--hud); letter-spacing: .12em; text-transform: uppercase; }
.ship-card.is-swapping > * { animation: info-in .45s var(--ease-out); }

/* More than 100 achievements: two slow rows of the game's own icons. */
.honors { padding: 40px 0 110px; overflow: hidden; }
.honors-head { width: var(--page); margin: 0 auto 38px; text-align: center; }
.honors-head .lede { margin: 18px auto 0; }
/* Each row is one prebuilt strip of icons shown twice and slid by half its width: two images, no pop-in. */
.marquee { position: relative; display: grid; gap: 16px; }
.marquee::before, .marquee::after { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; width: 10%; pointer-events: none; }
.marquee::before { left: 0; background: linear-gradient(90deg, var(--void), rgba(5, 8, 14, 0)); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--void), rgba(5, 8, 14, 0)); }
.marquee-row { display: flex; width: max-content; animation: marquee 90s linear infinite; }
.marquee-row.reverse { animation-direction: reverse; animation-duration: 110s; }
/* Only a real mouse pauses the rows: on phones a tap leaves :hover stuck on, which froze the wall until the next tap elsewhere. */
@media (hover: hover) and (pointer: fine) { .marquee:hover .marquee-row { animation-play-state: paused; } }
.marquee-row img { height: 88px; width: auto; max-width: none; flex: none; }
@keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* What it costs and what it plays on. */
.facts { width: var(--page); margin: 0 auto; padding: 0 0 120px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.facts section { padding-top: 22px; border-top: 1px solid var(--rivet); }
.facts h3 { margin-bottom: 10px; }
.facts p { color: var(--muted); }

.final { width: var(--page); margin: 0 auto; padding: 60px 0 160px; text-align: center; }
.final h2 { font-size: clamp(2.5rem, 6vw, 5rem); letter-spacing: -.025em; }
.final > p:not(.soon) { margin: 18px auto 0; color: var(--muted); font-size: 1.2rem; }
.final .actions, .final .status { justify-content: center; }

.site-footer { border-top: 1px solid var(--rivet); background: rgba(5, 8, 14, .86); }
.site-footer .inner { width: var(--page); margin: 0 auto; padding: 28px 0 36px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 28px; color: var(--muted); font-size: .92rem; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.site-footer a { color: var(--bone); text-decoration: none; }
.site-footer a:hover { color: var(--gold); text-decoration: underline; }

/* Sections below the first screen rise in once as they come into view (site.js marks them; without it they just show). */
.reveal.is-pending { opacity: 0; transform: translate3d(0, 26px, 0); }
.reveal.is-in { transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }

/* Offscreen sections sleep: their endless animations stop until they scroll back into view (site.js). */
.is-asleep, .is-asleep *, .is-asleep *::before, .is-asleep *::after { animation-play-state: paused !important; }

/* Smaller screens: the ship and its HUD ride along in a slim bar at the top. */
@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; text-align: center; padding: 40px 0 40px; gap: 8px; min-height: 0; }
  .hero h1 img { margin: 0 auto; width: min(520px, 92%); }
  .hero p { margin-left: auto; margin-right: auto; }
  .hero .actions, .hero .status { justify-content: center; }
  .hero-ship { order: -1; justify-self: center; width: min(560px, 96%); margin: 0 0 6px; }
  .voyage { grid-template-columns: 1fr; }
  .stage {
    grid-column: 1; grid-row: 1; z-index: 5;
    top: 0; height: auto; margin: 0 -20px;
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 8px 20px; background: rgba(5, 8, 14, .97); border-bottom: 1px solid var(--rivet);
  }
  .stage-ship { width: 64px; flex: none; }
  .hud { flex: 0 1 340px; width: auto; min-width: 0; }
  .hud-bar { gap: 5px; justify-content: flex-start; }
  .chip { height: 24px; padding: 0 7px; gap: 4px; font-size: .8rem; }
  .chip svg { width: 13px; height: 13px; }
  .hull-bar { margin: 6px 0 4px; height: 5px; }
  .hud-status { font-size: .72rem; text-align: left; letter-spacing: .08em; }
  .fx .dmg { font-size: 1rem; top: 10%; }
  .fx .dmg.crew { font-size: .72rem; }
  .fx .impact { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
  .legs { grid-row: 2; }
  .leg { min-height: auto; grid-template-columns: 1fr; padding: 72px 0 40px; gap: 34px; }
  .leg .shots { max-width: 340px; width: 100%; margin: 0 auto; }
  /* Overlapping pairs stay inside the column: no screenshot sticks out past the screen edge. */
  .leg .shots.pair .screen:first-child { width: 86%; }
  .leg .shots.pair .screen + .screen { width: 72%; margin: -46% 0 0 28%; }
  .leg-death .shots.pair .screen:first-child { width: 100%; }
  .leg-death .shots.pair .screen + .screen { width: 88%; margin: -18% 0 0 12%; }
  .shelf { --bw: 220px; }
  .targets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hangar-body { grid-template-columns: 1fr; }
  .hangar-view { max-width: 520px; }
  .facts { grid-template-columns: 1fr; gap: 0; }
  .facts section { padding: 22px 0 26px; }
}
@media (max-width: 700px) {
  .shelf { --bw: min(52vw, 210px); }
  .shelf-arrow { display: none; }
  .range-head { grid-template-columns: 1fr; }
  .range-score { grid-column: 1; grid-row: auto; gap: 26px; }
  .range-score p { text-align: left; font-size: .8rem; }
  .range-score span { font-size: 1.8rem; }
  .reader-card { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; border: 0; }
  .reader-close { top: max(10px, env(safe-area-inset-top)); }
  .reader-head { padding: 0 20px; }
  .reader-text { margin: 16px 20px 0; }
  .reader-text p { font-size: 1rem; }
  .reader-choices { padding-left: 16px; padding-right: 16px; }
  .choice { font-size: .95rem; min-height: 48px; padding: 11px 14px; }
}
@media (max-width: 560px) {
  :root { --page: calc(100% - 32px); }
  .stage { margin: 0 -16px; padding: 8px 16px; }
  .hero .tagline { margin-top: 16px; }
  .hero .actions { margin-top: 1.5rem; }
  .hero .actions .btn { flex: 1 1 100%; }
  .sound { padding: 0; width: 46px; justify-content: center; }
  .sound .sound-label { display: none; }
  .targets { gap: 10px; }
  .target { padding: 10px 12px 12px; border-radius: 14px; }
  .target-name { font-size: 1rem; }
  .target-role { font-size: .82rem; }
  .ship-tabs { gap: 6px; }
  .ship-tab { min-height: 76px; padding: 10px 4px 8px; font-size: .66rem; letter-spacing: .06em; }
  .ship-tab img { height: 32px; }
  .crew-list li { font-size: .92rem; }
  .marquee-row img { height: 64px; }
  .play span { width: 74px; height: 74px; }
  .final { padding-bottom: 130px; }
  .final .actions .btn { flex: 1 1 100%; }
  .end-actions .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Text pages: privacy policy, imprint, 404. */
.doc { width: min(780px, calc(100% - 40px)); margin: 0 auto; padding: 56px 0 90px; }
.doc .brand { display: inline-block; margin-bottom: 36px; }
.doc .brand img { width: 220px; }
.doc h1 { font-size: clamp(2.3rem, 5vw, 3.4rem); line-height: 1.05; letter-spacing: -.02em; }
.doc .meta { margin-top: 12px; color: var(--muted); font-size: .95rem; }
.doc h2 { margin: 46px 0 12px; font-size: 1.45rem; line-height: 1.25; letter-spacing: -.005em; }
.doc p, .doc li { color: var(--muted); max-width: none; }
.doc p + p { margin-top: 14px; }
.doc ul { margin: 12px 0 0; padding-left: 1.2em; }
.doc li + li { margin-top: 6px; }
.doc strong { color: var(--text); }
.doc code { padding: 1px 6px; border-radius: 5px; background: var(--hull); border: 1px solid var(--rivet); color: var(--text); font-size: .92em; }
.doc .summary { margin: 30px 0 8px; padding: 20px 22px; border-radius: 14px; background: rgba(15, 23, 36, .82); border: 1px solid var(--rivet); }
.doc .summary p { color: var(--text); }