/* 2045: Drone Aces — cinematic cover followed by the drawing set. */

/* ---------- 01 Hero and inline trailer ---------- */
/* Chapter rail: completed headings above, upcoming headings below. */
.chapter-rail { display: none; }
@media (min-width: 1440px) and (min-height: 700px) {
  body.has-chapter-rail > main, body.has-chapter-rail > .foot { margin-right: 216px; }
  .chapter-rail { display: block; position: fixed; z-index: 30; top: calc(var(--nav-h) + 20px); bottom: 20px; right: 12px; width: 188px; }
  .chapter-rail__rule { position: absolute; top: 0; bottom: 0; right: 0; width: 12px; border-right: 1px solid var(--line-rule); background: repeating-linear-gradient(to bottom, var(--line-rule) 0 1px, transparent 1px 16px); }
  .chapter-rail__rule::before { content: ""; position: absolute; top: 0; right: -1px; width: 2px; height: var(--reading, 0%); background: var(--mark); }
  .chapter-rail__progress { position: absolute; left: 0; top: var(--reading, 0%); color: var(--mark); font: 500 .65rem/1 var(--f-mono); transform: translateY(-50%); pointer-events: none; }
  .chapter-rail__link { position: absolute; right: 32px; width: 156px; text-align: right; text-decoration: none; color: var(--line-faint); font: 700 .85rem/1.5 var(--f-body); text-transform: uppercase; transform-origin: right center; transition: top .65s cubic-bezier(.2,.8,.2,1), transform .65s cubic-bezier(.2,.8,.2,1), color .3s, opacity .3s; }
  .chapter-rail__link b { font: 500 .65rem/1 var(--f-mono); margin-right: .5em; }
  .chapter-rail__link[data-state="past"] { color: var(--line-soft); }
  .chapter-rail__link[data-state="past"] b { color: var(--mark); }
  .chapter-rail__link[data-state="current"] { width: 250px; font-size: 1.45rem; color: var(--line); transform: rotate(90deg); }
  .chapter-rail__link:hover, .chapter-rail__link:focus-visible { color: var(--mark); }
}
.game-hero { padding-top: var(--nav-h); background: #050d1c; }
.game-hero__art { background: #050d1c; }
.game-hero__art img {
  display: block;
  width: min(100%, calc((100svh - var(--nav-h)) * 16 / 9));
  height: auto;
  margin-inline: auto;
  transition: filter .35s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .game-hero__art img:hover { filter: brightness(1.06) drop-shadow(0 0 18px rgba(39, 182, 255, .5)); }
}
.game-hero__intro {
  padding: clamp(1.5rem, 3vw, 3rem) var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  border-bottom: 1px solid var(--line-rule);
}
.game-hero__intro .label { color: var(--mark); margin: 0 0 .65rem; }
.game-hero__hook { font: 800 clamp(1.8rem, 3.3vw, 3.5rem)/1.05 var(--f-display); text-transform: uppercase; margin: 0 0 .65rem; }
.game-hero__description { color: var(--line-soft); max-width: 65ch; margin: 0; }
.game-hero__actions { display: grid; flex-shrink: 0; gap: .9rem; text-align: center; }
.game-hero__actions .btn { min-height: 3.5rem; padding-inline: 1.6rem; }
.game-hero__explore { font-size: .95rem; color: var(--line-soft); text-underline-offset: .3em; }
.game-hero__explore:hover { color: var(--line); }
@media (min-width: 900px) and (min-height: 600px) {
  .game-hero { height: 100svh; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
  .game-hero__art { min-height: 0; }
  .game-hero__art img { width: 100%; height: 100%; object-fit: contain; }
}
.ga__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }
.trailer-section { background: #050d1c; scroll-margin-top: 1rem; }
.trailer { max-width: 88rem; padding: clamp(2.5rem, 6vw, 6rem) var(--gutter); margin: auto; }
.trailer__heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.5rem; }
.trailer__heading .label { margin: 0 0 .6rem; color: var(--line-soft); }
.trailer__heading h2 { font: 900 clamp(2.5rem, 5vw, 4.5rem)/1 var(--f-display); text-transform: uppercase; margin: 0; }
.trailer__video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--line-rule); }
.trailer__video:focus-visible { outline: 2px dashed var(--mark); outline-offset: 5px; }
@media (max-width: 760px) {
  .game-hero__intro { display: grid; gap: 1.5rem; }
  .game-hero__actions { justify-items: start; text-align: left; }
  .trailer__heading { align-items: start; flex-direction: column; gap: .65rem; }
}

/* ---------- 03 Dossier ---------- */
.dossier .sheet__head, .ordnance .sheet__head { max-width: none; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; column-gap: clamp(2rem, 5vw, 6rem); }
.dossier .sheet__head .lede, .ordnance .sheet__head .lede { margin: 0; }
@media (max-width: 860px) { .dossier .sheet__head, .ordnance .sheet__head { grid-template-columns: 1fr; } }
.timeline {
  list-style: none; margin: 0 0 calc(var(--cell) * 8); padding: calc(var(--cell) * 3) 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--cell) * 3);
  border-top: 1.5px solid var(--line);
  position: relative;
}
.timeline li { position: relative; padding-top: calc(var(--cell) * 1); }
.timeline li::before { content: ""; position: absolute; top: calc(var(--cell) * -3 - 0.45rem); left: 0; width: 1.5px; height: 1.6rem; background: var(--line); }
.timeline .mono { display: block; margin-bottom: 0.5rem; color: var(--line); font-size: 0.85rem; }
.timeline p { color: var(--line-soft); font-size: 0.98rem; margin: 0; }
@media (max-width: 860px) { .timeline { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .timeline { grid-template-columns: 1fr; border-top: 0; border-left: 1.5px solid var(--line); padding: 0 0 0 calc(var(--cell) * 2); } .timeline li::before { left: calc(var(--cell) * -2 - 0.45rem); top: 0.55rem; width: 1.6rem; height: 1.5px; } }

.dossier__prints {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: calc(var(--cell) * 3);
  align-items: start; margin-bottom: calc(var(--cell) * 10);
}
.dossier__p1 { grid-column: 1 / span 4; margin-top: calc(var(--cell) * 4); }
.dossier__p2 { grid-column: 5 / span 3; margin-top: calc(var(--cell) * 10); }
.dossier__p3 { grid-column: 8 / span 5; }
@media (max-width: 860px) {
  .dossier__prints { grid-template-columns: minmax(0, 1fr); }
  .dossier__p1, .dossier__p2, .dossier__p3 { grid-column: 1 / -1; margin-top: 0; }
  .dossier__p2 { width: 80%; justify-self: end; }
}

.cast__title { margin: 0 0 calc(var(--cell) * 3); font: 900 clamp(2rem, 3.4vw, 3rem)/0.9 var(--f-display); text-transform: uppercase; }
.cast {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--cell) * 2.5);
}
.cast__m { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; min-width: 0; }
.cast__quote { grid-row: 1; align-self: start; padding-bottom: 1.75rem; font-size: clamp(1.45rem, 2vw, 2.2rem); }
.cast__m img { grid-row: 2; width: 100%; height: auto; aspect-ratio: 2 / 2.6; object-fit: cover; object-position: top center; border-bottom: 1.5px solid var(--line); transform-origin: center bottom; transition: transform .3s var(--ease-out), filter .3s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .cast__m img:hover { transform: translateY(-8px) scale(1.025); filter: brightness(1.08) drop-shadow(0 0 14px rgba(69, 194, 255, .4)); }
}
@media (prefers-reduced-motion: reduce) { .cast__m img:hover { transform: none; } }
.cast__note { grid-row: 3; padding-top: calc(var(--cell) * 1.5); position: relative; }
.cast__note::before { content: ""; position: absolute; top: 0; left: 1rem; width: 1px; height: calc(var(--cell) * 1); background: var(--line); }
.cast__name { font: 900 clamp(1.9rem, 2.8vw, 2.6rem)/0.9 var(--f-display); text-transform: uppercase; margin-bottom: 0.4rem; }
.cast__role { margin: 0 0 0.75rem; font-weight: 600; font-size: 0.92rem; color: var(--line) !important; }
.cast__note p { font-size: 0.98rem; color: var(--line-soft); }
.cast__line { font-size: 1.15rem; color: var(--line) !important; margin: 1rem 0 0; }
.cast .cast__line, .cast .cast__quote { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-style: italic; line-height: 1.4; text-align: left; }
@media (max-width: 980px) { .cast { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .cast { grid-template-columns: 1fr; } .cast__m { display: block; } .cast__m img { aspect-ratio: 1 / 1; } }

/* ---------- 04 Axis change (signature) ---------- */
.axis { padding-top: calc(var(--cell) * 8); }
.axis__pin { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: calc(var(--cell) * 4); align-items: center; }
.axis__head { display: grid; gap: calc(var(--cell) * 2); align-content: center; }
.axis__head .sheet__title { font-size: clamp(2.4rem, 4.4vw, 4.4rem); }
.axis__head p { color: var(--line-soft); margin: 0; }
.gauge { display: flex; align-items: center; gap: 1rem; margin-top: calc(var(--cell) * 1); }
.gauge__arrow { width: 4.5rem; height: 4.5rem; color: var(--line-faint); transition: transform 0.5s var(--ease-out); transform: rotate(var(--axis-rot, 0deg)); }
.gauge .label { display: block; margin-bottom: 0.25rem; }
.gauge__state { font: 900 2.2rem/1 var(--f-display); text-transform: uppercase; color: var(--mark); }

.axis__frame { position: relative; min-width: 0; aspect-ratio: 16 / 9; overflow: hidden; border: 1.5px solid var(--line); background: var(--paper-950); }
.axis__track { position: absolute; inset: 0; display: flex; will-change: transform; }
.axis__track--v { flex-direction: column; }
.axis__slide { flex: none; width: 100%; height: 100%; margin: 0; position: relative; }
.axis__slide img { width: 100%; height: 100%; object-fit: cover; }
.axis__slide figcaption { position: absolute; left: 0; bottom: 0; padding: 0.5rem 0.75rem; background: rgba(6, 26, 58, 0.86); color: var(--line); font: 500 0.88rem/1.35 var(--f-body); }
.axis__mark { position: absolute; width: 1.4rem; height: 1.4rem; border: 0 solid var(--mark); z-index: 2; pointer-events: none; }
.axis__mark--tl { top: 0.6rem; left: 0.6rem; border-top-width: 2px; border-left-width: 2px; }
.axis__mark--tr { top: 0.6rem; right: 0.6rem; border-top-width: 2px; border-right-width: 2px; }
.axis__mark--bl { bottom: 0.6rem; left: 0.6rem; border-bottom-width: 2px; border-left-width: 2px; }
.axis__mark--br { bottom: 0.6rem; right: 0.6rem; border-bottom-width: 2px; border-right-width: 2px; }
.axis__transition { position: absolute; top: 50%; left: 50%; margin: 0; padding: 0.5rem 0.8rem; transform: translate(-50%, -50%); background: var(--mark); color: var(--mark-ink); opacity: 0; z-index: 3; transition: opacity 0.25s; }
.axis[data-phase="transition"] .axis__transition { opacity: 1; }

/* Scroll-driven mode (enabled by site.js when motion is allowed). */
.axis.is-driven { height: 420vh; padding-top: 0; padding-bottom: 0; }
.axis.is-driven::before { display: none; }
.axis.is-driven .axis__pin { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); padding: calc(var(--cell) * 3) 0; }
.axis.is-driven .axis__track--h { flex-direction: row; transform: translateX(100%); }

/* Static fallback: no JS or reduced motion — both tracks laid out as sheets of prints. */
.axis:not(.is-driven) .axis__frame { grid-template-columns: minmax(0, 1fr); aspect-ratio: auto; overflow: visible; border: 0; background: none; display: grid; gap: calc(var(--cell) * 2); }
.axis:not(.is-driven) .axis__track { position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--cell) * 2); }
.axis:not(.is-driven) .axis__slide { height: auto !important; display: flex; flex-direction: column; }
.axis:not(.is-driven) .axis__slide img { height: auto; aspect-ratio: 16 / 9; }
.axis:not(.is-driven) .axis__slide figcaption { position: static; background: none; padding: 0.4rem 0 0; color: var(--line-soft); }
.axis:not(.is-driven) .axis__mark, .axis:not(.is-driven) .axis__transition { display: none; }

@media (max-width: 1000px) {
  .axis__pin { grid-template-columns: 1fr; align-content: center; }
  .axis.is-driven .axis__head p:not(.label) { display: none; }
  .axis:not(.is-driven) .axis__track { grid-template-columns: 1fr; }
}

/* ---------- 05 Ordnance ---------- */
.ordnance__grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: calc(var(--cell) * 5); align-items: start; }
.parts-wrap { overflow-x: auto; border: 1.5px solid var(--line); background: rgba(8, 33, 74, 0.6); }
.parts { width: 100%; border-collapse: collapse; min-width: 38rem; }
.parts th, .parts td { padding: 0.62rem 0.85rem; text-align: left; border-bottom: 1px solid var(--line-rule); vertical-align: middle; }
.parts thead th { font: 500 0.72rem/1.4 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--line-soft); border-bottom: 1.5px solid var(--line); }
.parts tbody th { font: 800 1.15rem/1 var(--f-display); text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; }
.parts td { color: var(--line-soft); font-size: 0.95rem; }
.parts tbody tr:last-child > * { border-bottom: 0; }
.parts tbody tr:hover > * { background: rgba(234, 244, 255, 0.04); }
.parts__pair { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.play {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.25rem; padding: 0.35rem 0.75rem 0.35rem 0.55rem;
  background: transparent; color: var(--line); border: 1px solid var(--line-rule); cursor: pointer;
  font: 500 0.92rem/1.2 var(--f-body); text-align: left;
  transition: border-color 0.18s, color 0.18s, background-color 0.18s;
}
.play svg { width: 0.95rem; height: 0.95rem; flex: none; }
.play:hover { border-color: var(--mark); }
.play[aria-pressed="true"], .track__btn[aria-pressed="true"] { background: var(--mark); color: var(--mark-ink); border-color: var(--mark); }
.play:active { background: var(--line); color: var(--paper-900); }

.ordnance__side { display: grid; gap: calc(var(--cell) * 3); padding-top: calc(var(--cell) * 1); }
.ordnance__side h3 { margin: calc(var(--cell) * 1) 0 0; }
@media (max-width: 1000px) { .ordnance__grid { grid-template-columns: 1fr; } .ordnance__side { grid-template-columns: 1fr 1fr; align-items: start; } }
@media (max-width: 640px) {
  .ordnance__side { grid-template-columns: 1fr; }
  .parts { min-width: 0; }
  .parts thead { display: none; }
  .parts tr { display: grid; grid-template-columns: 3.4rem 1fr; padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--line-rule); gap: 0.15rem 0.5rem; }
  .parts th, .parts td { padding: 0; border: 0 !important; }
  .parts td.mono { grid-row: span 3; padding-top: 0.2rem; }
  .parts td:last-child { padding-top: 0.45rem; }
}

/* ---------- 06 Targets ---------- */
.target { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: calc(var(--cell) * 4); align-items: center; padding: calc(var(--cell) * 4) 0; border-top: 1px solid var(--line-rule); }
.target--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }
.target--flip > :first-child { order: 2; }
.target__name { font-size: clamp(2.8rem, 5vw, 4.6rem); margin: 0 0 0.6rem; }
.target__data > .mono { margin: 0 0 1rem; color: var(--line-soft); }
.target__data > p:not(.mono) { color: var(--line-soft); }
.target__data .print { margin-top: calc(var(--cell) * 3); max-width: 24rem; }

.lens { position: relative; border: 1.5px solid var(--line); overflow: hidden; cursor: crosshair; --x: 50%; --y: 50%; --r: 0px; touch-action: pan-y; }
.lens img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.lens__top { position: absolute; inset: 0; height: 100%; clip-path: circle(var(--r) at var(--x) var(--y)); transition: clip-path 0.5s var(--ease-out); }
.lens.is-active .lens__top { transition: none; }
.lens[data-developed="true"] .lens__top { clip-path: circle(150% at var(--x) var(--y)); transition: clip-path 0.9s var(--ease-out); }
.lens::after { content: ""; position: absolute; left: var(--x); top: var(--y); width: calc(var(--r) * 2); height: calc(var(--r) * 2); transform: translate(-50%, -50%); border: 1.5px dashed var(--line); border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity 0.2s; }
.lens.is-active::after { opacity: 1; }
.lens[data-developed="true"]::after { opacity: 0; }
.lens__toggle { position: absolute; right: 0.75rem; bottom: 0.75rem; background: rgba(6, 26, 58, 0.86); }
@media (max-width: 900px) { .target, .target--flip { grid-template-columns: 1fr; } .target--flip > :first-child { order: 0; } }

/* ---------- 07 Console ---------- */
.console__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: calc(var(--cell) * 5); align-items: start; }
.console__title { grid-column: 1 / -1; text-align: center; font-size: clamp(2rem, 4vw, 4.4rem); line-height: 1.1; margin: 0 0 1rem; }
.console__media, .console__copy { display: grid; min-width: 0; gap: calc(var(--cell) * 2.5); }
.console__copy .lede { margin: 0; }
.track { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; padding: 1rem; border: 1.5px solid var(--line); background: rgba(8, 33, 74, 0.6); }
.track__btn { width: 3.25rem; height: 3.25rem; display: grid; place-items: center; background: transparent; color: var(--line); border: 1.5px solid var(--line); cursor: pointer; }
.track__btn svg { width: 1.3rem; height: 1.3rem; }
.track__btn:hover { border-color: var(--mark); }
.track__meta .label { margin: 0 0 0.6rem; }
.track__rule { position: relative; height: 0.9rem; border-left: 1.5px solid var(--line); border-right: 1.5px solid var(--line); }
.track__rule::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line-faint); }
.track__fill { position: absolute; left: 0; top: calc(50% - 1px); height: 3px; width: 0; background: var(--mark); }
.track__time { margin: 0.5rem 0 0; color: var(--line-soft); }
@media (max-width: 1000px) { .console__grid { grid-template-columns: 1fr; } }

/* ---------- 08 Status ---------- */
.status__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: calc(var(--cell) * 6); align-items: end; }
.status__grid > div:first-child { display: grid; gap: calc(var(--cell) * 2.5); }
.status__grid .sheet__title { font-size: clamp(3rem, 7vw, 6rem); }
.status__grid .lede { margin: 0; }
.status__block {
  --holo: #9beaff;
  position: relative; isolation: isolate; margin: 0; padding: 1rem;
  font-size: 1rem; color: #e1f8ff;
  border: 1px solid rgba(117, 225, 255, .55);
  background: linear-gradient(135deg, rgba(29, 109, 146, .28), rgba(4, 24, 48, .92)), repeating-linear-gradient(0deg, transparent 0 3px, rgba(155, 234, 255, .025) 3px 4px);
  box-shadow: 0 0 28px rgba(59, 199, 255, .12), inset 0 0 34px rgba(78, 196, 238, .07);
}
.status__block::before, .status__block::after { content: ""; position: absolute; width: 1.5rem; height: 1.5rem; pointer-events: none; border: 2px solid var(--holo); }
.status__block::before { top: -.3rem; left: -.3rem; border-right: 0; border-bottom: 0; }
.status__block::after { bottom: -.3rem; right: -.3rem; border-left: 0; border-top: 0; }
.status__block > div { border-color: rgba(137, 229, 255, .2); }
.status__block dt { color: var(--holo); border-color: rgba(137, 229, 255, .2); }
.status__block dd { color: #e1f8ff; }
.status__block .status { color: var(--mark); }
.status__release dd { font: 700 clamp(1.15rem, 1.8vw, 1.55rem)/1.4 var(--f-mono); color: var(--holo); text-shadow: 0 0 14px rgba(118, 228, 255, .4); }
@media (max-width: 900px) { .status__grid { grid-template-columns: 1fr; } }
.combat-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: calc(var(--cell) * 5); align-items: center; }
.armory-skills h3, .armory-cache h3, .console__soundtrack h3 { font: 800 clamp(1.7rem, 3vw, 2.4rem)/1.1 var(--f-display); margin-bottom: 1rem; }
.skill-list, .powerup-grid { padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2rem; }
.skill-list { margin: 0 0 3rem; }
.skill-list li, .powerup-grid li { display: grid; grid-template-columns: 6rem minmax(0, 1fr); align-items: center; gap: 1rem; padding-block: 1.2rem; border-top: 1px solid var(--line-rule); }
.skill-list img, .powerup-grid img { width: 6rem; aspect-ratio: 1; object-fit: contain; }
.skill-list h4, .powerup-grid h3 { font: 800 1.6rem/1.1 var(--f-display); margin-bottom: .5rem; }
.skill-list p, .powerup-grid p, .armory-cache p { margin: 0; font-size: 1rem; color: var(--line-soft); }
.skill-overdrive { height: 6rem; display: grid; align-content: center; gap: .5rem; color: #ff7f85; font: 700 .8rem/1 var(--f-body); }
.skill-overdrive i { display: block; height: 1.25rem; border: 1px solid #ff8c93; background: repeating-linear-gradient(90deg, #ce3348 0 9px, #451929 9px 12px); }
.armory-cache { display: flex; gap: 1.5rem; align-items: center; margin-bottom: 2rem; padding-block: 1.5rem; border-block: 1px solid var(--line-rule); }
.armory-cache img { width: 8rem; flex: 0 0 auto; }
.armory-cache p { max-width: 70ch; }
.boss-blueprints { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.boss-blueprints > * { display: block; position: relative; border: 1px solid var(--line-rule); }
.boss-blueprints [data-boss-number]::after { content: attr(data-boss-number) " / 12"; position: absolute; right: .6rem; bottom: .6rem; padding: .25rem .4rem; font: 500 .7rem/1 var(--f-mono); color: var(--line); background: #062d4b; border: 1px solid var(--line-rule); }
.boss-blueprints img { width: 100%; height: auto; }
.boss-blueprints a:hover { border-color: var(--mark); }
.image-zoom { display: block; cursor: zoom-in; }
.game-hero__art > .image-zoom { height: 100%; }
.image-zoom:focus-visible { outline: 2px solid var(--mark); outline-offset: 4px; }
html.has-lightbox { overflow: hidden; }
.image-lightbox {
  position: fixed; inset: 0; margin: 0; padding: 72px 16px 24px;
  width: 100%; height: 100dvh; max-width: none; max-height: none;
  border: 0; color: var(--line); background: rgba(2, 8, 18, .96); overflow: hidden;
}
.image-lightbox[open] { display: flex; align-items: center; justify-content: center; }
.image-lightbox::backdrop { background: transparent; }
.image-lightbox__image {
  display: block; width: min(calc(100vw - 32px), calc((100dvh - 96px) * var(--image-ratio)));
  height: auto; max-height: calc(100dvh - 96px); object-fit: contain;
  box-shadow: 0 0 40px rgba(39, 182, 255, .16); transform-origin: center;
}
.image-lightbox__close { position: absolute; top: 16px; right: 16px; z-index: 1; }
.targets .sheet__head { margin-bottom: 2rem; }
.targets .sheet__title { font-size: clamp(2.4rem, 4.5vw, 4.25rem); }
.console__soundtrack { border-top: 1px solid var(--line-rule); padding-top: 1.5rem; }
.console__soundtrack p { color: var(--line-soft); }
@media (max-width: 1150px) { .skill-list, .powerup-grid, .boss-blueprints { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px) { .skill-list, .powerup-grid, .boss-blueprints { grid-template-columns: 1fr; } .armory-cache { align-items: start; } .armory-cache img { width: 5rem; } }
.console__settings { border-top: 1px solid var(--line-rule); padding-top: 1.5rem; }
.console__settings h3 { font: 800 clamp(1.7rem, 3vw, 2.4rem)/1.1 var(--f-display); margin-bottom: 1rem; }
.crt-compare { --reveal: 50%; width: 70%; margin: 1.5rem auto; }
.crt-compare__stage { position: relative; box-sizing: content-box; aspect-ratio: 640 / 520; overflow: hidden; border: 1px solid var(--line-rule); background: #032337; }
.crt-compare__layer { position: absolute; inset: 0; overflow: hidden; }
/* OFF crop: x1600 y1580 w640 h520. ON is registered to the ship, not the screen.
   Measured OFF -> ON around (1920,1840): scale (1.025625,1.004375), shift (0,19.75).
   Inverse mapping below aligns the hull without rewriting either source image. */
.crt-compare__layer img { position: absolute; width: 600%; max-width: none; height: auto; left: -250%; top: -303.84615385%; }
.crt-compare__layer:not(.crt-compare__layer--off) img { width: 585.00914077%; height: 413.57522378%; left: -242.50457038%; top: -306.08635297%; }
.crt-compare__layer--off { clip-path: inset(0 calc(100% - var(--reveal)) 0 0); }
.crt-compare__label { position: absolute; z-index: 1; top: .75rem; padding: .4rem .6rem; background: #061a3a; border: 1px solid var(--line-rule); color: var(--line); font: 500 .75rem/1 var(--f-mono); pointer-events: none; }
.crt-compare__label--off { left: .75rem; }
.crt-compare__label--on { right: .75rem; color: #9beaff; }
.crt-compare__divider { position: absolute; z-index: 2; inset: 0 auto 0 var(--reveal); width: 2px; background: #eaf4ff; transform: translateX(-1px); pointer-events: none; }
.crt-compare__divider::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; display: grid; place-content: center; border: 1px solid #b6eeff; border-radius: 50%; background: #08214a; color: #fff; font: 700 1.3rem/1 var(--f-body); box-shadow: 0 0 20px #37b6ff55; }
.crt-compare__range { display: none; position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.crt-compare.is-ready .crt-compare__range { display: block; }
.crt-compare__stage:focus-within { outline: 2px solid var(--mark); outline-offset: 4px; }
.crt-compare__hint { display: none; margin: .65rem 0 0; color: var(--line-soft); font-size: .85rem; }
.crt-compare.is-ready .crt-compare__hint { display: block; }
@media (max-width: 900px) { .combat-grid { grid-template-columns: 1fr; } }