:root {
    --ink: #020711;
    --void: #050b17;
    --panel: rgba(5, 15, 30, 0.88);
    --panel-solid: #071426;
    --line: rgba(128, 222, 234, 0.22);
    --line-hot: rgba(128, 222, 234, 0.62);
    --cyan: #00e5ff;
    --ice: #80deea;
    --mint: #64ffda;
    --violet: #7c4dff;
    --gold: #ffd740;
    --orange: #ffab40;
    --red: #ff5252;
    --paper: #e8fbff;
    --muted: #8caebb;
    --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    --sans: "Segoe UI", Inter, Tahoma, Geneva, Verdana, sans-serif;
    --content: min(1220px, calc(100vw - 48px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
    margin: 0;
    min-width: 280px;
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--paper);
    background:
        radial-gradient(circle at 75% 4%, rgba(44, 109, 168, 0.15), transparent 28rem),
        linear-gradient(180deg, #02050c, #06101e 36%, #030914 72%, #02050c);
    font-family: var(--sans);
    line-height: 1.5;
}

body::before {
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image:
        linear-gradient(rgba(128, 222, 234, 0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(128, 222, 234, 0.022) 1px, transparent 1px);
    background-size: 52px 52px;
    content: "";
    pointer-events: none;
}

button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
img { max-width: 100%; }
canvas { display: block; }
em { color: var(--cyan); font-style: normal; }

.skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 1000;
    padding: 10px 14px;
    color: #001018;
    background: var(--cyan);
    font: 800 12px var(--mono);
    transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

#signal-field {
    position: fixed;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    opacity: 0.62;
    pointer-events: none;
}

.wiki-hero {
    position: relative;
    min-height: min(920px, 100svh);
    overflow: hidden;
    border-bottom: 1px solid var(--line-hot);
    background:
        linear-gradient(180deg, rgba(1, 4, 11, 0.18), rgba(2, 7, 17, 0.5) 58%, #020711 100%),
        radial-gradient(circle at 50% 28%, transparent 0 12%, rgba(0, 229, 255, 0.05) 36%, transparent 56%),
        url('/assets/menu-background.webp') center / cover no-repeat;
}
.wiki-hero::before,
.wiki-hero::after {
    position: absolute;
    content: "";
    pointer-events: none;
}
.wiki-hero::before {
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 26%, rgba(1, 4, 10, 0.8) 100%);
}
.wiki-hero::after {
    left: 50%;
    bottom: 2.5%;
    width: min(900px, 86vw);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    box-shadow: 0 0 32px 5px rgba(0, 229, 255, 0.28);
    transform: translateX(-50%);
}
.hero-grid {
    position: absolute;
    inset: 48% -15% -32%;
    opacity: 0.2;
    background-image:
        linear-gradient(rgba(0, 229, 255, 0.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 229, 255, 0.18) 1px, transparent 1px);
    background-size: 70px 46px;
    transform: perspective(440px) rotateX(62deg);
    transform-origin: center top;
    mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 65%, transparent);
}
.hero-scanline {
    position: absolute;
    inset: 0;
    opacity: 0.08;
    background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(154, 236, 255, 0.32) 4px);
    pointer-events: none;
}
.hero-inner {
    position: relative;
    z-index: 2;
    display: flex;
    width: var(--content);
    min-height: min(920px, 100svh);
    margin: auto;
    padding: max(28px, env(safe-area-inset-top)) 0 42px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.eyebrow,
.section-index {
    color: var(--ice);
    font: 700 10px/1.2 var(--mono);
    letter-spacing: 2.2px;
}
.eyebrow {
    position: absolute;
    top: 28px;
    left: 0;
    margin: 0;
}
.status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--mint);
    box-shadow: 0 0 10px var(--mint);
    animation: signal-pulse 2s ease-in-out infinite;
}
.hero-title-stage {
    position: relative;
    display: grid;
    width: min(760px, 86vw);
    aspect-ratio: 1092 / 362;
    margin: -3vh auto -7px;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    place-items: center;
}
.hero-title-starfield {
    position: relative;
    z-index: 0;
    grid-area: 1 / 1;
    width: 94%;
    height: 72%;
    overflow: hidden;
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.92) 0 0.7px, transparent 1.2px),
        radial-gradient(circle, rgba(128, 222, 234, 0.72) 0 0.8px, transparent 1.35px),
        radial-gradient(circle, rgba(179, 136, 255, 0.56) 0 0.65px, transparent 1.15px);
    background-position: 0 0, 19px 31px, 53px 17px;
    background-size: 83px 61px, 137px 103px, 211px 151px;
    filter: drop-shadow(0 0 3px rgba(128, 222, 234, 0.5));
    opacity: 0.55;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    pointer-events: none;
    animation: wiki-title-star-drift 18s linear infinite;
}
.hero-title-starfield::after {
    content: '';
    position: absolute;
    top: 74%;
    left: -12%;
    width: 74px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(64, 196, 255, 0.18) 35%, rgba(255, 255, 255, 0.92) 92%);
    box-shadow: 8px 0 8px rgba(0, 229, 255, 0.72), 12px 0 18px rgba(124, 77, 255, 0.42);
    opacity: 0;
    transform: rotate(-13deg);
    animation: wiki-title-comet-pass 8.5s ease-in-out infinite;
}
.hero-title-stage::before,
.hero-title-stage::after {
    content: '';
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.hero-title-stage::before {
    z-index: 0;
    background:
        linear-gradient(90deg, transparent 8%, rgba(0, 229, 255, 0.08) 24%, rgba(255, 255, 255, 0.72) 50%, rgba(255, 215, 64, 0.12) 76%, transparent 92%) center 68% / 86% 1px no-repeat,
        radial-gradient(ellipse 58% 20% at 50% 67%, rgba(128, 222, 234, 0.28), rgba(124, 77, 255, 0.1) 43%, transparent 72%),
        radial-gradient(ellipse 42% 44% at 50% 50%, rgba(0, 229, 255, 0.1), transparent 72%);
    clip-path: polygon(4% 50%, 16% 13%, 84% 13%, 96% 50%, 84% 87%, 16% 87%);
    filter: blur(1px) brightness(1);
    opacity: 0.88;
    transform: scale(1.08, 0.92);
    animation: wiki-title-horizon-breathe 5.2s ease-in-out infinite;
}
.hero-title-stage::after {
    z-index: 0;
    background:
        linear-gradient(108deg, transparent 25%, rgba(255, 255, 255, 0.92) 48%, transparent 70%) -65% 0 / 34% 100% no-repeat,
        linear-gradient(90deg, #00e5ff 4%, #40c4ff 23%, #7c4dff 40%, #fff 50%, #ffd740 67%, #ff4081 94%) 0 0 / 100% 100% no-repeat;
    -webkit-mask: url('/assets/xenovector_title.png?v=1') center / contain no-repeat;
    mask: url('/assets/xenovector_title.png?v=1') center / contain no-repeat;
    filter: blur(13px) saturate(1.5) brightness(1.12);
    opacity: 0.62;
    transform: scale(1.018);
    animation: wiki-title-letter-energy 6.8s ease-in-out infinite;
}
.hero-title {
    z-index: 1;
    display: block;
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter:
        drop-shadow(0 2px 2px rgba(1, 4, 15, 0.9))
        drop-shadow(-5px 0 11px rgba(0, 229, 255, 0.34))
        drop-shadow(5px 0 13px rgba(124, 77, 255, 0.3))
        drop-shadow(0 0 24px rgba(255, 255, 255, 0.16));
}
.hero-copy {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(250px, 0.55fr);
    gap: clamp(24px, 4vw, 52px);
    width: min(980px, 100%);
    padding: 16px 0 20px;
    align-items: center;
    border-top: 1px solid var(--line);
}
.hero-copy > div { min-width: 0; container-type: inline-size; }
.hero-copy h1 {
    display: flex;
    margin: 9px 0 0;
    gap: clamp(5px, 1cqw, 11px);
    align-items: baseline;
    color: #f4fcff;
    font: 800 clamp(16px, 5.1cqw, 44px)/1 var(--sans);
    letter-spacing: -1.2px;
    white-space: nowrap;
    text-shadow: 0 0 28px rgba(128, 222, 234, 0.18);
}
.hero-copy h1 span { display: inline; }
.hero-copy h1 .hero-survive { color: #f4fcff; }
.hero-copy h1 .hero-destroy { color: var(--red); text-shadow: 0 0 24px rgba(255, 82, 82, 0.3); }
.hero-copy h1 .hero-evolve { color: var(--cyan); }
.hero-copy p {
    max-width: 300px;
    margin: 0;
    color: #acd0da;
    font: 600 clamp(10px, 1vw, 13px)/1.45 var(--mono);
}
.hero-telemetry {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    width: min(980px, 100%);
    margin-top: 8px;
    padding: 12px 0 10px;
    background: transparent;
}
.hero-telemetry::before,
.hero-telemetry::after {
    content: '';
    position: absolute;
    right: 2%;
    left: 2%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(128, 222, 234, 0.28) 18%, rgba(128, 222, 234, 0.28) 82%, transparent);
    pointer-events: none;
}
.hero-telemetry::before { top: 0; }
.hero-telemetry::after { bottom: 0; opacity: 0.5; }
.hero-telemetry div { padding: 3px 16px; }
.hero-telemetry strong { display: block; color: var(--gold); font: 800 26px/1 var(--mono); text-shadow: 0 0 16px rgba(255, 215, 64, 0.18); }
.hero-telemetry span { color: var(--muted); font: 700 9px var(--mono); letter-spacing: 1.25px; }
.hero-combat-loop {
    position: relative;
    width: min(552px, calc(100vw - 24px));
    height: min(129px, calc(23.333vw - 5.6px));
    margin-top: 28px;
    overflow: visible;
    flex: 0 0 min(129px, calc(23.333vw - 5.6px));
    pointer-events: none;
}
.hero-combat-loop svg { display: block; width: 100%; height: 100%; }
.hero-combat-grid { fill: none; stroke: rgba(128, 222, 234, 0.1); stroke-width: 0.45; }
.hero-combat-track { fill: none; stroke: rgba(128, 222, 234, 0.28); stroke-width: 0.6; stroke-dasharray: 2 4; }
.hero-combat-ship { filter: drop-shadow(0 0 4px var(--mint)); transform-box: fill-box; transform-origin: center; animation: hero-combat-ship 1.4s ease-in-out infinite; }
.hero-combat-engine { fill: var(--mint); filter: drop-shadow(0 0 3px var(--mint)); animation: hero-combat-engine 0.45s ease-in-out infinite alternate; }
.hero-combat-ship-body { fill: #1b6475; stroke: #d9fbff; stroke-width: 1; }
.hero-combat-ship-detail { fill: none; stroke: var(--cyan); stroke-width: 1; }
.hero-combat-canopy { fill: #061926; stroke: #d9ffff; stroke-width: 0.8; }
.hero-combat-shot { fill: none; stroke: #e8ffff; stroke-width: 1.15; stroke-linecap: round; stroke-dasharray: 5 76; filter: drop-shadow(0 0 2px var(--cyan)); opacity: 0; animation: hero-combat-shot 1.4s linear infinite; }
.hero-combat-shot-a { animation-delay: 0s; }
.hero-combat-shot-b { animation-delay: 0.12s; }
.hero-combat-shot-c { animation-delay: 0.24s; }
.hero-combat-target { filter: drop-shadow(0 0 4px rgba(255, 82, 82, 0.8)); transform-box: fill-box; transform-origin: center; animation: hero-combat-target 1.4s steps(1, end) infinite; }
.hero-combat-target-body { fill: #38121c; stroke: #ff6b71; stroke-width: 1; }
.hero-combat-target-core { fill: var(--red); }
.hero-combat-impact { fill: none; stroke: #fff0c2; stroke-width: 0.7; filter: drop-shadow(0 0 3px #ffab40); transform-box: fill-box; transform-origin: center; animation: hero-combat-impact 1.4s ease-out infinite; }
.hero-combat-impact circle { fill: #ffab40; }

.hero-play-button {
    display: inline-flex;
    min-width: 250px;
    min-height: 50px;
    margin-top: 8px;
    padding: 0 24px;
    gap: 14px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cyan);
    color: #001018;
    background: linear-gradient(110deg, #b2f7ff, var(--cyan));
    box-shadow: 0 0 26px rgba(0, 229, 255, 0.26), inset 0 0 0 1px rgba(255, 255, 255, 0.42);
    font: 900 12px/1 var(--mono);
    letter-spacing: 1.8px;
    text-decoration: none;
    clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.hero-play-button b { font-size: 13px; }
.hero-play-button:hover,
.hero-play-button:focus-visible { outline: none; filter: brightness(1.08); box-shadow: 0 0 38px rgba(0, 229, 255, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.58); transform: translateY(-2px); }

.sector-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    height: 62px;
    padding: 0 max(18px, calc((100vw - 1320px) / 2));
    align-items: center;
    border-bottom: 1px solid rgba(128, 222, 234, 0.28);
    background: rgba(2, 8, 18, 0.93);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(15px);
}
.nav-mark {
    display: flex;
    width: 70px;
    height: 38px;
    margin-right: 24px;
    align-items: center;
    border-right: 1px solid var(--line);
    text-decoration: none;
}
.nav-mark span { color: var(--cyan); font: 900 17px var(--mono); letter-spacing: -1px; }
.nav-mark small { margin: 2px 0 0 6px; color: var(--muted); font: 700 7px var(--mono); letter-spacing: 1px; }
.nav-play-button {
    display: inline-flex;
    min-width: 64px;
    height: 34px;
    margin-right: 10px;
    padding: 0 12px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--red);
    color: white;
    background: linear-gradient(110deg, #a5182c, var(--red));
    box-shadow: 0 0 15px rgba(255, 82, 82, 0.2);
    font: 900 9px/1 var(--mono);
    letter-spacing: 1.2px;
    text-decoration: none;
    transition: filter 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.nav-play-button:hover,
.nav-play-button:focus-visible { outline: none; filter: brightness(1.14); box-shadow: 0 0 22px rgba(255, 82, 82, 0.38); transform: translateY(-1px); }
.sector-links { display: flex; flex: 1; height: 100%; align-items: stretch; }
.sector-links a {
    position: relative;
    display: flex;
    padding: 0 clamp(8px, 1vw, 16px);
    align-items: center;
    color: #789ca9;
    font: 700 9px var(--mono);
    letter-spacing: 0.7px;
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease;
}
.sector-links a::after {
    position: absolute;
    right: 10px;
    bottom: 0;
    left: 10px;
    height: 2px;
    background: var(--cyan);
    box-shadow: 0 0 8px var(--cyan);
    content: "";
    opacity: 0;
    transform: scaleX(0.5);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.sector-links a:hover,
.sector-links a:focus-visible,
.sector-links a.is-active { color: var(--paper); background: rgba(0, 229, 255, 0.04); outline: none; }
.sector-links a.is-active::after { opacity: 1; transform: scaleX(1); }
.language-control {
    display: flex;
    min-width: 104px;
    height: 34px;
    margin-left: 10px;
    padding-left: 10px;
    gap: 7px;
    align-items: center;
    border-left: 1px solid var(--line);
    color: var(--muted);
    font: 700 7px var(--mono);
    letter-spacing: .8px;
}
.language-control select {
    height: 30px;
    min-width: 58px;
    padding: 0 6px;
    border: 1px solid rgba(128, 222, 234, .34);
    border-radius: 0;
    outline: 0;
    color: var(--paper);
    background: #071426;
    font: 800 8px var(--mono);
    cursor: pointer;
}
.language-control select:hover,
.language-control select:focus-visible { border-color: var(--cyan); box-shadow: 0 0 12px rgba(0, 229, 255, .14); }
.nav-progress { position: absolute; right: 0; bottom: -1px; left: 0; height: 1px; }
.nav-progress span { display: block; width: 0; height: 100%; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.nav-toggle { display: none; }

.manual-section {
    position: relative;
    width: var(--content);
    margin: auto;
    padding: clamp(58px, 7vw, 92px) 0 12px;
    scroll-margin-top: 54px;
}
.manual-section::before {
    position: absolute;
    top: clamp(52px, 6vw, 78px);
    right: 100%;
    width: 200px;
    height: 1px;
    margin-right: 28px;
    background: linear-gradient(90deg, transparent, var(--line-hot));
    content: "";
}
.section-heading { width: 100%; margin-bottom: clamp(20px, 2vw, 28px); }
.section-heading > div { display: flex; gap: 10px; align-items: center; }
.section-number {
    display: inline-flex;
    width: 32px;
    height: 21px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 229, 255, 0.45);
    color: var(--cyan);
    background: rgba(0, 229, 255, 0.07);
    font: 800 8px var(--mono);
}
.section-kicker { color: var(--ice); font: 700 8px var(--mono); letter-spacing: 1.4px; }
.section-heading h2 {
    margin: 8px 0 7px;
    color: #f2fcff;
    font: 850 clamp(12px, 3vw, 40px)/1 var(--sans);
    letter-spacing: -0.045em;
    white-space: nowrap;
}
.section-heading p { max-width: 900px; margin: 0; color: #91b5c2; font: 600 clamp(9px, 0.8vw, 11px)/1.55 var(--mono); }

.loop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.loop-card {
    --loop-accent: var(--cyan);
    --loop-glow: rgba(0, 229, 255, 0.28);
    position: relative;
    min-width: 0;
    min-height: 318px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--loop-accent) 26%, transparent);
    background:
        radial-gradient(circle at 50% 20%, var(--loop-glow), transparent 52%),
        linear-gradient(155deg, rgba(12, 31, 53, 0.74), rgba(2, 8, 18, 0.92));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.025), 0 14px 34px rgba(0, 0, 0, 0.2);
    clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
}
.loop-intercept { --loop-accent: var(--mint); --loop-glow: rgba(105, 240, 174, 0.22); }
.loop-evolve { --loop-accent: var(--gold); --loop-glow: rgba(255, 215, 64, 0.2); }
.loop-escalate { --loop-accent: #ea80fc; --loop-glow: rgba(234, 128, 252, 0.23); }
.loop-card::before { position: absolute; top: 0; right: 0; z-index: 2; width: 34px; height: 1px; background: var(--loop-accent); content: ""; box-shadow: 0 0 13px var(--loop-accent); }
.loop-card::after { position: absolute; right: 0; bottom: 0; width: 46px; height: 2px; background: var(--loop-accent); content: ""; box-shadow: 0 0 12px var(--loop-accent); }
.loop-index { position: absolute; top: 12px; right: 14px; z-index: 3; color: color-mix(in srgb, var(--loop-accent) 52%, transparent); font: 800 27px var(--mono); text-shadow: 0 0 16px var(--loop-glow); }
.loop-visual { display: block; width: 100%; height: 145px; overflow: visible; border-bottom: 1px solid color-mix(in srgb, var(--loop-accent) 18%, transparent); background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent); }
.loop-copy { position: relative; padding: 19px 20px 22px; }
.loop-copy::before { position: absolute; top: 0; left: 20px; width: 28px; height: 1px; background: var(--loop-accent); content: ""; box-shadow: 0 0 10px var(--loop-accent); }
.loop-copy small { color: color-mix(in srgb, var(--loop-accent) 74%, #789ba8); font: 700 7px var(--mono); letter-spacing: 1.25px; }
.loop-card h3 { margin: 6px 0 8px; color: #effcff; font: 850 15px var(--mono); letter-spacing: 1.8px; }
.loop-card p { margin: 0; color: var(--muted); font: 600 10px/1.55 var(--mono); }

.scene-grid { fill: none; stroke: color-mix(in srgb, var(--loop-accent) 8%, transparent); stroke-width: 0.7; }
.scene-stars { fill: #dff6ff; opacity: 0.58; }
.scene-label, .scene-coordinate, .tier-marks { fill: color-mix(in srgb, var(--loop-accent) 60%, #6c8792); font: 700 6px var(--mono); letter-spacing: 0.7px; }
.scene-coordinate { text-anchor: start; opacity: 0.72; }
.region-line { fill: none; stroke-width: 15; opacity: 0.075; }
.region-line-a { stroke: #00e5ff; }
.region-line-b { stroke: #ea80fc; }
.flight-path, .pressure-line { fill: none; stroke: var(--loop-accent); stroke-width: 1.5; stroke-dasharray: 5 6; filter: drop-shadow(0 0 4px var(--loop-accent)); animation: route-flow 3s linear infinite; }
.waypoint circle:first-child { fill: rgba(2, 8, 18, 0.8); stroke: var(--loop-accent); stroke-width: 1; }
.waypoint circle:last-child { fill: var(--loop-accent); filter: drop-shadow(0 0 5px var(--loop-accent)); }
.loop-ship { filter: drop-shadow(0 0 8px var(--loop-accent)); }
.loop-ship .ship-body { fill: #1b6475; stroke: #d9fbff; stroke-width: 1; }
.loop-ship .ship-detail, .loop-ship .ship-spine { fill: none; stroke: var(--loop-accent); stroke-width: 1; }
.loop-ship .ship-panel { fill: #102b40; stroke: var(--loop-accent); stroke-width: 0.85; }
.loop-ship .ship-canopy { fill: #061926; stroke: #d9ffff; stroke-width: 0.8; }
.loop-ship .engine-flare { fill: var(--loop-accent); opacity: 0.75; filter: drop-shadow(0 0 5px var(--loop-accent)); animation: engine-pulse 0.75s ease-in-out infinite alternate; }
.striker-ship .ship-body { fill: #9f4238; stroke: #fff0c2; }
.striker-ship .ship-panel { fill: #351820; }
.striker-ship .ship-canopy { fill: #351820; stroke: #ffd27d; }
.aegis-ship .ship-body { fill: #416f8c; stroke: #d9fbff; }
.aegis-ship .ship-panel { fill: #102b40; }
.aegis-ship .ship-canopy { fill: #102b40; stroke: #b8f4ff; }
.target-cone { fill: color-mix(in srgb, var(--loop-accent) 7%, transparent); stroke: color-mix(in srgb, var(--loop-accent) 20%, transparent); stroke-width: 0.7; }
.ordnance path { fill: none; stroke: var(--loop-accent); stroke-width: 1; opacity: 0.7; }
.ordnance circle { fill: #fff; filter: drop-shadow(0 0 4px var(--loop-accent)); }
.enemy-hull { fill: #38121c; stroke: #ff6b71; stroke-width: 1; filter: drop-shadow(0 0 4px rgba(255, 82, 82, 0.65)); }
.enemy-core { fill: #ff5252; }
.target-lock { fill: none; stroke: var(--loop-accent); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: target-turn 8s linear infinite; }
.target-lock circle { stroke-dasharray: 5 4; }
.upgrade-orbit { fill: none; stroke: color-mix(in srgb, var(--loop-accent) 38%, transparent); stroke-width: 0.8; stroke-dasharray: 3 4; }
.upgrade-node { color: var(--loop-accent); filter: drop-shadow(0 0 5px currentColor); }
.upgrade-node path, .upgrade-node circle { fill: rgba(4, 13, 27, 0.94); stroke: currentColor; stroke-width: 1; }
.upgrade-node text { fill: currentColor; font: 800 7px var(--mono); text-anchor: middle; }
.node-damage { color: #ff5252; }
.node-prism { color: #80cbc4; }
.node-core { color: #00e5ff; }
.node-shield { color: #b388ff; }
.energy-transfer { fill: none; stroke: var(--loop-accent); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.68; animation: route-flow 2s linear infinite reverse; }
.tier-rings { fill: none; stroke: color-mix(in srgb, var(--loop-accent) 24%, transparent); stroke-width: 0.75; stroke-dasharray: 4 5; }
.tier-marks { fill: color-mix(in srgb, var(--loop-accent) 72%, #fff); }
.boss-sigil { filter: drop-shadow(0 0 8px var(--loop-accent)); }
.boss-sigil path:first-child { fill: rgba(38, 9, 48, 0.82); stroke: var(--loop-accent); stroke-width: 1; }
.boss-sigil path:nth-child(2) { fill: none; stroke: #ff5252; stroke-width: 1; }
.boss-sigil circle { fill: white; }
.hostile-rounds { fill: #ff5252; filter: drop-shadow(0 0 4px #ff1744); animation: threat-pulse 1.2s ease-in-out infinite alternate; }

.split-layout { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 20px; margin-top: 20px; }
.hud-panel,
.chart-card {
    position: relative;
    border: 1px solid var(--line);
    background:
        linear-gradient(135deg, rgba(0, 229, 255, 0.035), transparent 40%),
        rgba(4, 13, 27, 0.78);
    clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px));
}
.panel-label { padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--ice); font: 700 9px var(--mono); letter-spacing: 1.4px; }
.control-grid { display: grid; grid-template-columns: repeat(2, 1fr); padding: 8px 14px 15px; }
.control-grid div { display: grid; grid-template-columns: 76px 1fr; padding: 11px 5px; align-items: center; border-bottom: 1px solid rgba(128, 222, 234, 0.09); }
.control-grid div:nth-last-child(-n+2) { border-bottom: 0; }
.control-grid kbd { justify-self: start; padding: 4px 6px; border: 1px solid rgba(128, 222, 234, 0.42); color: var(--cyan); background: rgba(0, 229, 255, 0.06); font: 800 9px var(--mono); box-shadow: inset 0 -2px rgba(128, 222, 234, 0.1); }
.control-grid strong { color: #e8fbff; font: 800 10px var(--mono); letter-spacing: 1px; }
.control-grid small { grid-column: 2; color: #6f929f; font: 600 8px var(--mono); }
.mobile-orbits { position: relative; display: flex; height: 160px; align-items: center; justify-content: space-around; overflow: hidden; }
.mobile-orbits svg { position: absolute; width: 150px; opacity: 0.16; fill: none; stroke: var(--cyan); stroke-width: 1; animation: slow-spin 18s linear infinite; }
.stick { position: relative; z-index: 1; display: grid; width: 76px; height: 76px; place-items: center; border: 1px solid rgba(128, 222, 234, 0.25); border-radius: 50%; box-shadow: inset 0 0 20px rgba(0, 229, 255, 0.06); }
.stick span { width: 34px; height: 34px; border: 1px solid var(--cyan); border-radius: 50%; background: rgba(0, 229, 255, 0.08); box-shadow: 0 0 12px rgba(0, 229, 255, 0.2); }
.stick b { position: absolute; top: 84px; color: var(--muted); font: 700 8px var(--mono); letter-spacing: 1px; }
.right-stick span { border-color: var(--gold); background: rgba(255, 215, 64, 0.08); box-shadow: 0 0 12px rgba(255, 215, 64, 0.2); }
.signal-list { margin: 0; padding: 0 18px 14px; list-style: none; }
.signal-list li { display: grid; grid-template-columns: 104px 1fr; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(128, 222, 234, 0.1); }
.signal-list strong { color: var(--mint); font: 800 8px var(--mono); letter-spacing: 0.7px; }
.signal-list span { color: #88aab7; font: 600 8px/1.4 var(--mono); }
.mechanic-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mechanic-strip article { padding: 20px 22px; border-right: 1px solid var(--line); }
.mechanic-strip article:last-child { border-right: 0; }
.mechanic-strip b { display: block; color: var(--muted); font: 700 8px var(--mono); letter-spacing: 1.1px; }
.mechanic-strip strong { display: block; margin: 4px 0 8px; color: var(--gold); font: 900 24px var(--mono); }
.mechanic-strip p { margin: 0; color: #789ba8; font: 600 9px/1.5 var(--mono); }

.hull-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hull-card {
    --hull-color: var(--cyan);
    position: relative;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--hull-color) 42%, transparent);
    background:
        radial-gradient(circle at 50% 22%, color-mix(in srgb, var(--hull-color) 12%, transparent), transparent 34%),
        linear-gradient(145deg, rgba(8, 24, 43, 0.92), rgba(2, 8, 18, 0.95));
    clip-path: polygon(0 0, calc(100% - 17px) 0, 100% 17px, 100% 100%, 17px 100%, 0 calc(100% - 17px));
}
.hull-card::before { position: absolute; inset: 0; opacity: 0.11; background: repeating-radial-gradient(circle at 50% 27%, transparent 0 28px, var(--hull-color) 29px 30px); content: ""; }
.hull-card canvas { position: relative; width: 100%; height: 230px; }
.hull-header { display: flex; padding: 0 20px 14px; align-items: end; justify-content: space-between; border-bottom: 1px solid color-mix(in srgb, var(--hull-color) 28%, transparent); }
.hull-header span { color: var(--hull-color); font: 700 8px var(--mono); letter-spacing: 1.2px; }
.hull-header h3 { margin: 2px 0 0; color: #fff; font: 900 23px/1 var(--sans); letter-spacing: 0.5px; }
.hull-header b { color: var(--hull-color); font: 800 10px var(--mono); }
.stat-bars { display: grid; gap: 8px; padding: 17px 20px 12px; }
.stat-row { display: grid; grid-template-columns: 62px 1fr 42px; gap: 8px; align-items: center; }
.stat-row span, .stat-row strong { font: 700 8px var(--mono); }
.stat-row span { color: var(--muted); }
.stat-row strong { color: #dffaff; text-align: right; }
.stat-bar { height: 3px; background: rgba(255, 255, 255, 0.08); }
.stat-bar i { display: block; height: 100%; background: var(--hull-color); box-shadow: 0 0 7px var(--hull-color); }
.ultimate-readout { margin: 4px 20px 20px; padding: 12px; border-left: 2px solid var(--hull-color); background: color-mix(in srgb, var(--hull-color) 7%, transparent); }
.ultimate-readout small { display: block; color: var(--hull-color); font: 700 7px var(--mono); letter-spacing: 1px; }
.ultimate-readout strong { display: block; margin: 2px 0 4px; font: 800 12px var(--mono); }
.ultimate-readout p { margin: 0; color: #8eb0bc; font: 600 9px/1.5 var(--mono); }
.data-note { display: flex; margin-top: 18px; padding: 14px 17px; gap: 20px; border: 1px solid rgba(255, 215, 64, 0.25); background: rgba(255, 215, 64, 0.035); }
.data-note strong { flex: 0 0 auto; color: var(--gold); font: 800 9px var(--mono); letter-spacing: 1px; }
.data-note span { color: #a8c1c8; font: 600 9px var(--mono); }

.weapon-tabs { display: flex; gap: 7px; margin-bottom: 10px; overflow-x: auto; scrollbar-width: thin; }
.weapon-tabs button,
.upgrade-switch button,
.archive-filters button {
    border: 1px solid var(--line);
    color: #779ba8;
    background: rgba(4, 13, 27, 0.78);
    font: 800 9px var(--mono);
    letter-spacing: 1px;
    cursor: pointer;
}
.weapon-tabs button {
    --weapon-tab-color: var(--cyan);
    display: flex;
    flex: 1 0 150px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 16px;
    border-color: color-mix(in srgb, var(--weapon-tab-color) 42%, transparent);
    color: color-mix(in srgb, var(--weapon-tab-color) 75%, white);
    background: linear-gradient(180deg, color-mix(in srgb, var(--weapon-tab-color) 9%, transparent), rgba(4, 13, 27, 0.82));
    box-shadow: inset 0 -2px color-mix(in srgb, var(--weapon-tab-color) 55%, transparent);
}
.weapon-tabs button::before {
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--weapon-tab-color);
    box-shadow: 0 0 8px var(--weapon-tab-color);
    content: '';
}
.weapon-tabs button:hover,
.weapon-tabs button:focus-visible,
.weapon-tabs button[aria-selected="true"] {
    border-color: var(--weapon-tab-color);
    outline: none;
    color: white;
    background: color-mix(in srgb, var(--weapon-tab-color) 15%, rgba(4, 13, 27, 0.88));
    box-shadow: inset 0 -2px var(--weapon-tab-color), 0 0 16px color-mix(in srgb, var(--weapon-tab-color) 18%, transparent);
}
.weapon-tabs button[aria-selected="true"]::before { background: white; }
.upgrade-switch button,
.archive-filters button {
    --selector-color: var(--cyan);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-color: color-mix(in srgb, var(--selector-color) 40%, transparent);
    color: color-mix(in srgb, var(--selector-color) 72%, white);
    background: linear-gradient(180deg, color-mix(in srgb, var(--selector-color) 8%, transparent), rgba(4, 13, 27, 0.82));
    box-shadow: inset 0 -2px color-mix(in srgb, var(--selector-color) 48%, transparent);
}
.upgrade-switch button::before,
.archive-filters button::before {
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--selector-color);
    box-shadow: 0 0 8px var(--selector-color);
    content: '';
}
.upgrade-switch button:hover,
.upgrade-switch button:focus-visible,
.upgrade-switch button[aria-selected="true"],
.archive-filters button:hover,
.archive-filters button:focus-visible,
.archive-filters button.is-active {
    border-color: var(--selector-color);
    outline: none;
    color: white;
    background: color-mix(in srgb, var(--selector-color) 15%, rgba(4, 13, 27, 0.88));
    box-shadow: inset 0 -2px var(--selector-color), 0 0 16px color-mix(in srgb, var(--selector-color) 18%, transparent);
}
.upgrade-switch button[aria-selected="true"]::before,
.archive-filters button.is-active::before { background: white; }
.weapon-console { min-height: 560px; border: 1px solid var(--line-hot); background: rgba(3, 10, 22, 0.88); clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); }
.weapon-detail { --weapon-color: var(--cyan); display: grid; grid-template-columns: 1.1fr 0.9fr; min-height: 560px; }
.weapon-visual { position: relative; min-height: 560px; overflow: hidden; border-right: 1px solid var(--line); background: radial-gradient(circle at 42% 50%, color-mix(in srgb, var(--weapon-color) 12%, transparent), transparent 42%); }
.weapon-visual canvas { width: 100%; height: 100%; min-height: 560px; }
.visual-caption { position: absolute; right: 18px; bottom: 15px; left: 18px; display: flex; justify-content: space-between; color: var(--weapon-color); font: 700 8px var(--mono); letter-spacing: 1px; }
.weapon-data { padding: 34px clamp(22px, 4vw, 48px); }
.weapon-data > span { color: var(--weapon-color); font: 800 9px var(--mono); letter-spacing: 1.5px; }
.weapon-data h3 { margin: 7px 0 8px; color: white; font: 900 clamp(27px, 3vw, 42px)/1 var(--sans); }
.weapon-data > p { margin: 0 0 24px; color: #90b0bc; font: 600 11px/1.65 var(--mono); }
.weapon-metrics { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--line); }
.weapon-metrics div { padding: 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.weapon-metrics div:nth-child(even) { border-right: 0; }
.weapon-metrics div:nth-last-child(-n+2) { border-bottom: 0; }
.weapon-metrics small { display: block; color: #678a98; font: 700 7px var(--mono); letter-spacing: 1px; }
.weapon-metrics strong { color: var(--weapon-color); font: 800 13px var(--mono); }
.charge-note { margin-top: 18px; padding: 13px 15px; border-left: 2px solid var(--gold); background: rgba(255, 215, 64, 0.045); }
.charge-note b { color: var(--gold); font: 800 8px var(--mono); letter-spacing: 1px; }
.charge-note p { margin: 3px 0 0; color: #a5bec6; font: 600 9px/1.55 var(--mono); }
.tier-band { display: flex; margin-top: 12px; align-items: stretch; }
.tier-band > div { min-width: 150px; padding: 11px 14px; border: 1px solid var(--line); background: rgba(4, 13, 27, 0.8); }
.tier-band > i { flex: 1; align-self: center; height: 1px; background: linear-gradient(90deg, var(--cyan), rgba(0, 229, 255, 0.18)); }
.tier-band span, .tier-band small { display: block; font: 700 7px var(--mono); letter-spacing: 0.7px; }
.tier-band span { color: var(--muted); }
.tier-band b { color: var(--cyan); font: 800 17px var(--mono); }
.tier-band small { color: #789aa6; }
.tier-band .tier-max { border-color: rgba(255, 215, 64, 0.35); }
.tier-band .tier-max b { color: var(--gold); }

.upgrade-switch { display: flex; gap: 8px; margin-bottom: 13px; }
.upgrade-switch button { padding: 12px 18px; }
.upgrade-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; min-height: 260px; }
.upgrade-card { --item-color: var(--cyan); min-height: 126px; padding: 16px; border: 1px solid color-mix(in srgb, var(--item-color) 30%, transparent); background: linear-gradient(145deg, color-mix(in srgb, var(--item-color) 5%, transparent), rgba(3, 10, 22, 0.9)); }
.upgrade-card header { display: flex; align-items: center; gap: 10px; }
.upgrade-icon { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border: 1px solid var(--item-color); border-radius: 50%; color: var(--item-color); background: color-mix(in srgb, var(--item-color) 8%, transparent); box-shadow: 0 0 13px color-mix(in srgb, var(--item-color) 20%, transparent); font: 900 10px var(--mono); }
.upgrade-card h3 { margin: 0; color: #ecfbff; font: 800 9px/1.3 var(--mono); letter-spacing: 0.5px; }
.upgrade-card p { margin: 11px 0 0; color: #819fab; font: 600 8px/1.55 var(--mono); }
.systems-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 32px; }
.system-card { display: grid; grid-template-columns: 155px 1fr; min-height: 168px; overflow: hidden; border: 1px solid var(--line); background: rgba(4, 13, 27, 0.78); }
.system-card canvas { width: 155px; height: 168px; border-right: 1px solid var(--line); background: radial-gradient(circle, rgba(0, 229, 255, 0.08), transparent 65%); }
.system-card div { padding: 24px 22px; }
.system-card span { color: var(--cyan); font: 700 8px var(--mono); letter-spacing: 1px; }
.system-card h3 { margin: 4px 0 8px; color: white; font: 850 16px var(--mono); }
.system-card p { margin: 0; color: #88a8b4; font: 600 9px/1.55 var(--mono); }

.ecology-viewport { position: relative; height: 430px; overflow: hidden; border: 1px solid var(--line-hot); background: #020812; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
.ecology-viewport canvas { width: 100%; height: 100%; }
.map-overlay { position: absolute; top: 18px; left: 18px; padding: 12px 15px; border-left: 2px solid var(--cyan); background: rgba(2, 8, 18, 0.72); backdrop-filter: blur(6px); }
.map-overlay span, .map-overlay small { display: block; color: var(--muted); font: 700 7px var(--mono); letter-spacing: 1px; }
.map-overlay strong { display: block; margin: 2px 0; color: white; font: 900 17px var(--mono); }
.ecology-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.ecology-card { --eco-color: var(--cyan); position: relative; width: 100%; min-height: 142px; padding: 18px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--eco-color) 28%, transparent); color: inherit; background: linear-gradient(145deg, color-mix(in srgb, var(--eco-color) 7%, transparent), rgba(3, 10, 22, 0.9)); font: inherit; text-align: left; cursor: pointer; }
.ecology-card::before { position: absolute; right: -18px; bottom: -22px; width: 95px; height: 95px; border: 1px solid color-mix(in srgb, var(--eco-color) 22%, transparent); border-radius: 50%; content: ""; box-shadow: 0 0 0 15px color-mix(in srgb, var(--eco-color) 4%, transparent), 0 0 0 30px color-mix(in srgb, var(--eco-color) 3%, transparent); }
.ecology-card span { color: var(--eco-color); font: 800 8px var(--mono); letter-spacing: 1px; }
.ecology-card h3 { margin: 5px 0 7px; color: #effcff; font: 850 14px var(--mono); }
.ecology-card p { position: relative; z-index: 1; max-width: 85%; margin: 0; color: #789aa7; font: 600 8px/1.5 var(--mono); }
.ecology-card:hover, .ecology-card:focus-visible { border-color: var(--eco-color); outline: none; box-shadow: inset 0 -2px var(--eco-color), 0 0 16px color-mix(in srgb, var(--eco-color) 12%, transparent); }

.archive-toolbar { display: flex; margin-bottom: 12px; gap: 14px; align-items: center; justify-content: space-between; }
.archive-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.archive-filters button { padding: 9px 12px; }
.archive-search { display: flex; min-width: 255px; align-items: center; border: 1px solid var(--line); background: rgba(4, 13, 27, 0.78); }
.archive-search span { padding: 0 11px; color: var(--muted); font: 700 7px var(--mono); letter-spacing: 0.8px; }
.archive-search input { width: 145px; padding: 9px; border: 0; border-left: 1px solid var(--line); outline: 0; color: var(--paper); background: transparent; font: 700 9px var(--mono); text-transform: uppercase; }
.archive-search input:focus { box-shadow: inset 0 -2px var(--cyan); }
.enemy-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.enemy-card { --enemy-color: var(--red); min-width: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--enemy-color) 27%, transparent); background: rgba(3, 11, 23, 0.88); transition: border-color 0.2s ease, transform 0.2s ease; }
.enemy-card:hover { border-color: color-mix(in srgb, var(--enemy-color) 70%, transparent); transform: translateY(-2px); }
.enemy-card canvas { width: 100%; height: 128px; background: radial-gradient(circle, color-mix(in srgb, var(--enemy-color) 9%, transparent), transparent 62%); }
.enemy-copy { padding: 13px 14px 15px; border-top: 1px solid color-mix(in srgb, var(--enemy-color) 20%, transparent); }
.enemy-copy header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.enemy-copy h3 { margin: 0; overflow: hidden; color: #f0fcff; font: 850 13px var(--mono); text-overflow: ellipsis; }
.enemy-copy header span { flex: 0 0 auto; color: var(--enemy-color); font: 700 7px var(--mono); letter-spacing: 0.7px; }
.enemy-copy > p { min-height: 40px; margin: 7px 0 11px; color: #7f9fa9; font: 600 8px/1.55 var(--mono); }
.enemy-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); padding-top: 9px; }
.enemy-stats div { border-right: 1px solid var(--line); text-align: center; }
.enemy-stats div:last-child { border-right: 0; }
.enemy-stats small { display: block; color: #647f8b; font: 700 6px var(--mono); }
.enemy-stats strong { display: block; color: var(--enemy-color); font: 800 10px var(--mono); }
.enemy-empty { grid-column: 1 / -1; padding: 40px; border: 1px solid var(--line); color: var(--muted); font: 700 10px var(--mono); text-align: center; }
.rank-console { display: grid; grid-template-columns: 0.32fr 0.68fr; margin-top: 32px; border: 1px solid var(--line); background: rgba(4, 13, 27, 0.84); }
.rank-copy { padding: 24px; border-right: 1px solid var(--line); }
.rank-copy span, .formation-panel span { color: var(--gold); font: 700 8px var(--mono); letter-spacing: 1.2px; }
.rank-copy h3, .formation-panel h3 { margin: 5px 0 9px; font: 850 17px var(--mono); }
.rank-copy p, .formation-panel p { margin: 0; color: #82a1ad; font: 600 9px/1.6 var(--mono); }
.rank-track { display: grid; grid-template-columns: repeat(6, 1fr); }
.rank-item { position: relative; padding: 20px 12px; border-right: 1px solid var(--line); }
.rank-item:last-child { border-right: 0; }
.rank-item i { display: block; width: 10px; height: 10px; margin-bottom: 12px; border-radius: 50%; background: var(--rank-color); box-shadow: 0 0 12px var(--rank-color); }
.rank-item strong { display: block; min-height: 28px; color: #eafcff; font: 800 8px/1.35 var(--mono); }
.rank-item span { display: block; color: var(--rank-color); font: 800 13px var(--mono); }
.rank-item small { color: #6e8c97; font: 700 6px var(--mono); }
.formation-panel { display: grid; grid-template-columns: 0.6fr 0.4fr; min-height: 260px; margin-top: 12px; border: 1px solid var(--line); background: rgba(3, 10, 22, 0.8); }
.formation-panel canvas { width: 100%; height: 260px; border-right: 1px solid var(--line); }
.formation-panel > div { align-self: center; padding: 30px; }

.boss-forge { display: grid; grid-template-columns: 1.2fr 0.8fr; min-height: 530px; border: 1px solid rgba(234, 128, 252, 0.4); background: #030915; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); }
.boss-visual { position: relative; min-height: 530px; overflow: hidden; border-right: 1px solid var(--line); background: radial-gradient(circle at center, rgba(124, 77, 255, 0.16), transparent 48%); }
.boss-visual canvas { width: 100%; height: 100%; min-height: 530px; }
.boss-lock { position: absolute; right: 20px; bottom: 20px; left: 20px; padding: 13px 16px; border-left: 2px solid #ea80fc; background: rgba(2, 8, 18, 0.72); backdrop-filter: blur(8px); }
.boss-lock span, .boss-lock small { display: block; color: #af8dbc; font: 700 7px var(--mono); letter-spacing: 1px; }
.boss-lock strong { display: block; margin: 2px 0; color: #f7eaff; font: 900 clamp(18px, 2.5vw, 28px) var(--mono); }
.boss-readout { display: flex; padding: 28px; flex-direction: column; }
.boss-traits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.boss-trait { padding: 12px; border: 1px solid var(--line); background: rgba(128, 222, 234, 0.025); }
.boss-trait small { display: block; color: #64828f; font: 700 7px var(--mono); letter-spacing: 0.8px; }
.boss-trait strong { display: block; margin-top: 3px; color: var(--trait-color, var(--cyan)); font: 800 10px var(--mono); }
.boss-stats { --boss-color: #ea80fc; --boss-accent: #00e5ff; margin-top: 18px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--boss-color) 28%, transparent); }
.boss-stat-heading { display: flex; margin-bottom: 11px; gap: 8px 12px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.boss-stat-heading span { color: color-mix(in srgb, var(--boss-color) 78%, white); font: 850 9px var(--mono); letter-spacing: 1.2px; }
.boss-stat-heading small { color: #597783; font: 700 6px/1.25 var(--mono); letter-spacing: 0.7px; }
.boss-health { padding: 10px 11px; border: 1px solid color-mix(in srgb, var(--boss-color) 25%, transparent); background: color-mix(in srgb, var(--boss-color) 4%, rgba(3, 10, 22, 0.8)); }
.boss-health header,
.boss-stat-row header { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.boss-health span,
.boss-stat-row span { color: #7898a4; font: 700 7px var(--mono); letter-spacing: 0.65px; }
.boss-health strong { color: #f7eaff; font: 850 11px var(--mono); }
.boss-health-bar,
.boss-stat-meter { overflow: hidden; background: rgba(255, 255, 255, 0.075); }
.boss-health-bar { height: 7px; margin-top: 7px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025); }
.boss-health-bar i,
.boss-stat-meter i { display: block; width: var(--stat-width, 100%); height: 100%; background: linear-gradient(90deg, var(--boss-color), var(--boss-accent)); box-shadow: 0 0 8px color-mix(in srgb, var(--boss-color) 60%, transparent); }
.boss-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.boss-stat-row { min-width: 0; padding: 8px 9px; border: 1px solid rgba(128, 222, 234, 0.1); background: rgba(128, 222, 234, 0.018); }
.boss-stat-row strong { color: #dffaff; font: 800 8px var(--mono); white-space: nowrap; }
.boss-stat-meter { height: 3px; margin-top: 6px; }
#compose-boss { margin-top: 20px; padding: 14px; border: 1px solid #ea80fc; color: #f1c9fa; background: rgba(234, 128, 252, 0.07); font: 800 9px var(--mono); letter-spacing: 1px; cursor: pointer; }
#compose-boss:hover, #compose-boss:focus-visible { outline: none; background: rgba(234, 128, 252, 0.14); box-shadow: 0 0 20px rgba(234, 128, 252, 0.15); }
#compose-boss span { display: inline-block; margin-right: 7px; font-size: 15px; }
.boss-matrix { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 12px; border: 1px solid var(--line); }
.boss-matrix article { min-width: 0; padding: 17px 14px; border-right: 1px solid var(--line); background: rgba(4, 13, 27, 0.74); }
.boss-matrix article:last-child { border-right: 0; }
.boss-matrix strong { color: #ea80fc; font: 900 23px var(--mono); }
.boss-matrix span { display: block; color: #d9b8e0; font: 800 8px var(--mono); letter-spacing: 0.8px; }
.boss-matrix p { margin: 7px 0 0; color: #6e8c97; font: 600 7px/1.5 var(--mono); overflow-wrap: anywhere; }
.phase-line { display: flex; margin-top: 20px; align-items: center; }
.phase-line > div { min-width: 195px; padding: 13px 15px; border: 1px solid var(--line); background: rgba(4, 13, 27, 0.74); }
.phase-line > i { flex: 1; height: 1px; background: linear-gradient(90deg, var(--cyan), var(--red)); }
.phase-line b, .phase-line span, .phase-line small { display: block; font-family: var(--mono); }
.phase-line b { color: var(--red); font-size: 15px; }
.phase-line span { color: #e8fbff; font-size: 8px; font-weight: 800; }
.phase-line small { color: #718f9a; font-size: 7px; }
.encounter-variations { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 20px; }
.encounter-variations article { padding: 19px; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(234, 128, 252, 0.045), rgba(4, 13, 27, 0.78)); }
.encounter-variations span { color: #ea80fc; font: 800 7px var(--mono); letter-spacing: 1px; }
.encounter-variations h3 { margin: 5px 0 8px; color: #f4efff; font: 850 12px/1.25 var(--mono); }
.encounter-variations p { margin: 0; color: #7899a5; font: 600 8px/1.55 var(--mono); }

.colossus-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.colossus-card { --apex-color: var(--orange); overflow: hidden; border: 1px solid color-mix(in srgb, var(--apex-color) 42%, transparent); background: rgba(3, 10, 22, 0.9); clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px)); }
.colossus-card canvas { width: 100%; height: 290px; background: radial-gradient(circle, color-mix(in srgb, var(--apex-color) 12%, transparent), transparent 60%); }
.colossus-copy { padding: 20px; border-top: 1px solid color-mix(in srgb, var(--apex-color) 25%, transparent); }
.colossus-copy > span { color: var(--apex-color); font: 800 8px var(--mono); letter-spacing: 1.2px; }
.colossus-copy h3 { margin: 5px 0 4px; color: white; font: 900 22px var(--mono); }
.colossus-copy > p { min-height: 58px; margin: 0 0 14px; color: #87a6b2; font: 600 9px/1.55 var(--mono); }
.objective-steps { margin: 0; padding: 0; counter-reset: objective; list-style: none; }
.objective-steps li { position: relative; padding: 7px 0 7px 26px; border-top: 1px solid rgba(128, 222, 234, 0.1); color: #a9c2ca; font: 600 8px/1.4 var(--mono); counter-increment: objective; }
.objective-steps li::before { position: absolute; left: 0; color: var(--apex-color); font-weight: 900; content: "0" counter(objective); }
.apex-reward { display: grid; grid-template-columns: 160px 30px 160px 1fr; gap: 12px; margin-top: 18px; padding: 18px 22px; align-items: center; border: 1px solid rgba(255, 171, 64, 0.3); background: rgba(255, 171, 64, 0.035); }
.apex-reward div span, .apex-reward div small { display: block; color: #ae8c68; font: 700 7px var(--mono); letter-spacing: 0.8px; }
.apex-reward div strong { color: var(--orange); font: 900 25px var(--mono); }
.apex-reward > i { color: var(--orange); font: normal 25px var(--mono); text-align: center; }
.apex-reward > p { margin: 0; padding-left: 20px; border-left: 1px solid rgba(255, 171, 64, 0.2); color: #8eaab4; font: 600 9px/1.55 var(--mono); }

.difficulty-dashboard { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 14px; }
.chart-card { min-height: 430px; }
.chart-card canvas { width: 100%; height: 350px; }
.chart-legend { display: flex; padding: 0 20px 17px; gap: 20px; color: var(--muted); font: 700 7px var(--mono); }
.chart-legend i { display: inline-block; width: 18px; height: 2px; margin: 0 7px 2px 0; }
.legend-cyan { background: var(--cyan); box-shadow: 0 0 7px var(--cyan); }
.legend-gold { background: var(--gold); box-shadow: 0 0 7px var(--gold); }
.formula-stack { display: grid; gap: 10px; }
.formula-stack article { padding: 22px; border: 1px solid var(--line); background: rgba(4, 13, 27, 0.78); }
.formula-stack span { color: var(--cyan); font: 800 8px var(--mono); letter-spacing: 1px; }
.formula-stack code { display: block; margin: 6px 0 9px; color: var(--gold); font: 800 11px/1.4 var(--mono); }
.formula-stack p { margin: 0; color: #7d9da9; font: 600 8px/1.55 var(--mono); }
.scale-facts { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 14px; border: 1px solid var(--line); }
.scale-facts article { padding: 20px; border-right: 1px solid var(--line); background: rgba(3, 11, 23, 0.8); }
.scale-facts article:last-child { border-right: 0; }
.scale-facts span { color: var(--muted); font: 700 7px var(--mono); letter-spacing: 1px; }
.scale-facts strong { display: block; margin: 4px 0 7px; color: var(--cyan); font: 900 24px var(--mono); }
.scale-facts p { margin: 0; color: #76949f; font: 600 8px/1.5 var(--mono); }
.score-panel { display: grid; grid-template-columns: 1fr auto; margin-top: 14px; border: 1px solid rgba(255, 215, 64, 0.32); background: linear-gradient(90deg, rgba(255, 215, 64, 0.055), rgba(4, 13, 27, 0.82)); }
.score-panel > div:first-child { padding: 22px; }
.score-panel span { color: var(--gold); font: 700 8px var(--mono); letter-spacing: 1px; }
.score-panel h3 { margin: 4px 0 7px; font: 850 17px var(--mono); }
.score-panel p { margin: 0; max-width: 670px; color: #88a8b4; font: 600 9px/1.6 var(--mono); }
.score-panel code { color: #f8e797; }
.score-values { display: grid; grid-template-columns: repeat(2, 145px); border-left: 1px solid rgba(255, 215, 64, 0.2); }
.score-values span { display: flex; padding: 20px; flex-direction: column; justify-content: center; border-right: 1px solid rgba(255, 215, 64, 0.2); }
.score-values span:last-child { border-right: 0; }
.score-values small { color: #927f4f; font: 700 7px var(--mono); }
.score-values strong { color: var(--gold); font: 900 20px var(--mono); }

.wiki-footer { position: relative; display: flex; width: var(--content); min-height: 270px; margin: 130px auto 0; padding: 70px 0 max(30px, env(safe-area-inset-bottom)); flex-direction: column; align-items: center; text-align: center; }
.footer-line { position: absolute; top: 0; right: 0; left: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); box-shadow: 0 0 18px rgba(0, 229, 255, 0.25); }
.wiki-footer img { width: 180px; height: auto; opacity: 0.86; }
.wiki-footer p { margin: 18px 0 5px; color: var(--ice); font: 800 9px var(--mono); letter-spacing: 2px; }
.wiki-footer small { color: #536f7a; font: 600 8px var(--mono); }
.wiki-footer a { margin-top: 23px; color: var(--cyan); font: 700 8px var(--mono); letter-spacing: 1px; text-decoration: none; }
.noscript-warning { position: fixed; right: 15px; bottom: 15px; left: 15px; z-index: 500; padding: 12px; border: 1px solid var(--red); color: white; background: #21070c; font: 700 10px var(--mono); text-align: center; }

/* Keep dense interface metadata readable without scaling established body copy or headings. */
.hero-telemetry span,
.nav-mark small,
.section-number,
.section-kicker,
.loop-copy small,
.control-grid small,
.stick b,
.signal-list strong,
.signal-list span,
.mechanic-strip b,
.hull-header span,
.stat-row span,
.stat-row strong,
.ultimate-readout small,
.visual-caption,
.weapon-metrics small,
.charge-note b,
.tier-band span,
.tier-band small,
.system-card span,
.map-overlay span,
.map-overlay small,
.ecology-card span,
.archive-search span,
.rank-copy span,
.formation-panel span,
.rank-item strong,
.boss-lock span,
.boss-lock small,
.boss-trait small,
.boss-matrix span,
.boss-matrix p,
.phase-line span,
.phase-line small,
.encounter-variations span,
.colossus-copy > span,
.objective-steps li,
.apex-reward div span,
.apex-reward div small,
.chart-legend,
.formula-stack span,
.scale-facts span,
.score-panel span,
.score-values small,
.wiki-footer small,
.wiki-footer a { font-size: 9px; }

.upgrade-card p,
.ecology-card p,
.enemy-copy > p,
.encounter-variations p,
.formula-stack p,
.scale-facts p { font-size: 9px; }

.language-control { font-size: 8px; }
.language-control select { font-size: 9px; }
.upgrade-node text,
.enemy-stats small,
.rank-item small { font-size: 8px; }
.scene-label,
.scene-coordinate,
.tier-marks { font-size: 7.5px; }

.sector-links,
.sector-links a,
.section-heading,
.section-heading > div,
.loop-copy,
.control-grid div,
.signal-list li,
.mechanic-strip article,
.hull-header,
.hull-header > div,
.stat-row,
.ultimate-readout,
.data-note,
.weapon-data,
.weapon-metrics div,
.charge-note,
.tier-band > div,
.upgrade-card,
.upgrade-card header,
.upgrade-card h3,
.system-card div,
.map-overlay,
.ecology-card,
.archive-toolbar,
.archive-search,
.enemy-copy,
.enemy-copy header,
.enemy-stats div,
.rank-copy,
.rank-item,
.formation-panel > div,
.boss-lock,
.boss-readout,
.boss-trait,
.phase-line > div,
.encounter-variations article,
.colossus-copy,
.apex-reward > *,
.formula-stack article,
.scale-facts article,
.score-panel > div,
.score-values span { min-width: 0; }

.sector-links a,
.section-kicker,
.loop-copy small,
.control-grid small,
.signal-list strong,
.signal-list span,
.mechanic-strip b,
.hull-header span,
.hull-header b,
.stat-row span,
.ultimate-readout small,
.visual-caption,
.weapon-metrics small,
.charge-note b,
.tier-band span,
.tier-band small,
.upgrade-card h3,
.upgrade-card p,
.system-card span,
.system-card p,
.map-overlay,
.ecology-card span,
.ecology-card p,
.archive-search span,
.enemy-copy > p,
.enemy-stats small,
.rank-copy span,
.formation-panel span,
.rank-item strong,
.rank-item small,
.boss-lock span,
.boss-lock small,
.boss-trait small,
.boss-trait strong,
.boss-matrix span,
.phase-line span,
.phase-line small,
.encounter-variations span,
.encounter-variations p,
.colossus-copy > span,
.objective-steps li,
.apex-reward div span,
.apex-reward div small,
.chart-legend,
.formula-stack span,
.formula-stack p,
.scale-facts span,
.scale-facts p,
.score-panel span,
.score-values small,
.wiki-footer small { overflow-wrap: anywhere; }

.loop-card h3,
.hull-header h3,
.upgrade-card h3,
.system-card h3,
.ecology-card h3,
.rank-copy h3,
.formation-panel h3,
.encounter-variations h3,
.colossus-copy h3,
.score-panel h3 { overflow-wrap: anywhere; }

.hull-header { gap: 12px; }
.hull-header b { max-width: 58%; text-align: right; }
.visual-caption,
.chart-legend { flex-wrap: wrap; }
.visual-caption { gap: 6px 14px; }
.enemy-copy header { gap: 6px; flex-wrap: wrap; }
.enemy-copy h3 { flex: 0 0 auto; font-size: clamp(11px, 0.9vw, 12px); white-space: nowrap; }
.enemy-copy header span { flex: 0 0 auto; font-size: clamp(7px, 0.6vw, 8px); white-space: nowrap; }
.map-overlay { max-width: calc(100% - 36px); }

@keyframes hero-combat-ship { 0%, 100% { transform: translateY(1px); } 50% { transform: translateY(-1px); } }
@keyframes hero-combat-engine { from { opacity: 0.45; transform: scaleX(0.72); } to { opacity: 0.95; transform: scaleX(1.1); } }
@keyframes hero-combat-shot { 0% { opacity: 0; stroke-dashoffset: 82; } 10%, 70% { opacity: 1; } 88%, 100% { opacity: 0; stroke-dashoffset: -8; } }
@keyframes hero-combat-target { 0%, 70% { opacity: 1; } 72%, 78% { opacity: 0.35; } 80%, 100% { opacity: 1; } }
@keyframes hero-combat-impact { 0%, 66% { opacity: 0; transform: scale(0.35); } 72% { opacity: 1; transform: scale(1); } 88%, 100% { opacity: 0; transform: scale(1.8); } }
@keyframes signal-pulse { 0%, 100% { opacity: 0.55; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes wiki-title-horizon-breathe { 0%, 100% { filter: blur(1px) brightness(0.9); } 50% { filter: blur(2px) brightness(1.22); } }
@keyframes wiki-title-letter-energy {
    0%, 28% { background-position: -65% 0, 0 0; filter: blur(12px) saturate(1.35) brightness(1); }
    55% { background-position: 165% 0, 0 0; filter: blur(16px) saturate(1.7) brightness(1.28); }
    100% { background-position: 165% 0, 0 0; filter: blur(12px) saturate(1.35) brightness(1); }
}
@keyframes wiki-title-star-drift { from { background-position: 0 0, 19px 31px, 53px 17px; } to { background-position: 83px 61px, -118px 134px, 264px -134px; } }
@keyframes wiki-title-comet-pass {
    0%, 58% { top: 74%; left: -12%; opacity: 0; }
    63% { opacity: 0.78; }
    76% { top: 28%; left: 108%; opacity: 0.62; }
    80%, 100% { top: 28%; left: 108%; opacity: 0; }
}
@keyframes slow-spin { to { transform: rotate(360deg); } }
@keyframes route-flow { to { stroke-dashoffset: -22; } }
@keyframes engine-pulse { from { opacity: 0.45; } to { opacity: 0.95; } }
@keyframes target-turn { to { transform: rotate(360deg); } }
@keyframes threat-pulse { from { opacity: 0.45; } to { opacity: 1; } }

@media (max-width: 1080px) {
    :root { --content: min(100% - 36px, 980px); }
    .sector-links a { padding: 0 6px; font-size: 8px; }
    .nav-mark { margin-right: 10px; }
    .loop-grid { grid-template-columns: repeat(2, 1fr); }
    .hull-grid { grid-template-columns: 1fr; }
    .hull-card { display: grid; grid-template-columns: 0.42fr 0.58fr; }
    .hull-card canvas { grid-row: 1 / 4; height: 100%; min-height: 280px; }
    .hull-header { padding-top: 22px; }
    .upgrade-grid { grid-template-columns: repeat(4, 1fr); }
    .ecology-grid, .enemy-grid { grid-template-columns: repeat(3, 1fr); }
    .rank-console { grid-template-columns: 1fr; }
    .rank-copy { border-right: 0; border-bottom: 1px solid var(--line); }
    .boss-matrix { grid-template-columns: repeat(3, 1fr); }
    .boss-matrix article:nth-child(3) { border-right: 0; }
    .boss-matrix article:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
    .encounter-variations { grid-template-columns: repeat(2, 1fr); }
    .colossus-card canvas { height: 240px; }
}

@media (max-width: 820px) {
    :root { --content: min(100% - 28px, 720px); }
    .wiki-hero, .hero-inner { min-height: 820px; }
    .hero-copy { grid-template-columns: 1fr; gap: 17px; }
    .hero-copy p { max-width: 460px; }
    .hero-telemetry { grid-template-columns: repeat(5, minmax(85px, 1fr)); overflow-x: auto; }
    .hero-telemetry div { min-width: 85px; padding: 11px; }
    .sector-nav { height: 56px; padding: 0 14px; }
    .nav-mark { flex: 1; margin-right: 4px; border: 0; }
    .nav-play-button { min-width: 60px; margin-right: 8px; padding: 0 10px; }
    .language-control { min-width: 68px; margin-left: 8px; padding-left: 8px; }
    .language-control span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .nav-toggle { display: flex; padding: 8px 10px; gap: 3px; flex-direction: column; border: 1px solid var(--line); color: var(--ice); background: transparent; cursor: pointer; }
    .nav-toggle span { display: block; width: 22px; height: 1px; background: var(--cyan); }
    .nav-toggle b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .sector-links { position: absolute; top: 55px; right: 0; left: 0; display: grid; height: auto; grid-template-columns: repeat(3, 1fr); padding: 9px; border-bottom: 1px solid var(--line-hot); background: rgba(2, 8, 18, 0.98); box-shadow: 0 18px 34px rgba(0, 0, 0, 0.45); opacity: 0; visibility: hidden; transform: translateY(-7px); transition: 0.18s ease; }
    .sector-links.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
    .sector-links a { min-height: 42px; justify-content: center; border: 1px solid rgba(128, 222, 234, 0.1); }
    .manual-section { padding-top: 64px; }
    .split-layout, .weapon-detail, .boss-forge, .difficulty-dashboard { grid-template-columns: 1fr; }
    .weapon-visual, .boss-visual { border-right: 0; border-bottom: 1px solid var(--line); }
    .upgrade-grid { grid-template-columns: repeat(3, 1fr); }
    .systems-grid { grid-template-columns: 1fr; }
    .ecology-grid, .enemy-grid { grid-template-columns: repeat(2, 1fr); }
    .rank-track { overflow-x: auto; }
    .rank-item { min-width: 105px; }
    .formation-panel { grid-template-columns: 1fr; }
    .formation-panel canvas { border-right: 0; border-bottom: 1px solid var(--line); }
    .colossus-grid { grid-template-columns: 1fr; }
    .colossus-card { display: grid; grid-template-columns: 0.44fr 0.56fr; }
    .colossus-card canvas { height: 100%; min-height: 330px; }
    .phase-line > div { min-width: 160px; }
    .scale-facts { grid-template-columns: repeat(2, 1fr); }
    .scale-facts article:nth-child(2) { border-right: 0; }
    .scale-facts article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    .score-panel { grid-template-columns: 1fr; }
    .score-values { border-top: 1px solid rgba(255, 215, 64, 0.2); border-left: 0; }
}

@media (max-width: 580px) {
    :root { --content: calc(100% - 22px); }
    .wiki-hero, .hero-inner { min-height: 780px; }
    .eyebrow { top: 20px; }
    .hero-title-stage { width: 100%; margin-top: 16px; }
    .hero-copy h1 { font-size: clamp(16px, 5.1cqw, 44px); letter-spacing: -0.8px; }
    .hero-copy p { font-size: 10px; }
    .hero-telemetry { width: 100%; }
    .hero-combat-loop { margin-top: 20px; }
    .hero-play-button { min-width: 220px; min-height: 46px; }
    .sector-links { grid-template-columns: repeat(2, 1fr); }
    .section-heading { margin-bottom: 20px; }
    .section-heading h2 { font-size: clamp(12px, 3vw, 40px); letter-spacing: -0.045em; white-space: normal; overflow-wrap: anywhere; }
    .section-heading p { font-size: 9px; }
    .section-kicker { font-size: 9px; }
    .loop-grid { grid-template-columns: 1fr; }
    .loop-card { min-height: 0; }
    .loop-visual { height: auto; aspect-ratio: 260 / 132; }
    .loop-copy { padding: 18px 18px 22px; }
    .control-grid { grid-template-columns: 1fr; }
    .control-grid div:nth-last-child(2) { border-bottom: 1px solid rgba(128, 222, 234, 0.09); }
    .mechanic-strip { grid-template-columns: repeat(2, 1fr); }
    .mechanic-strip article:nth-child(2) { border-right: 0; }
    .mechanic-strip article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    .hull-card { display: block; }
    .hull-card canvas { height: 210px; min-height: 0; }
    .data-note { flex-direction: column; gap: 6px; }
    .weapon-console, .weapon-visual, .weapon-visual canvas { min-height: 460px; }
    .weapon-data { padding: 24px 18px 30px; }
    .tier-band { overflow-x: auto; padding-bottom: 6px; }
    .tier-band > i { min-width: 28px; }
    .upgrade-switch { overflow-x: auto; }
    .upgrade-switch button { flex: 0 0 auto; }
    .upgrade-grid { grid-template-columns: repeat(2, 1fr); }
    .system-card { grid-template-columns: 112px 1fr; }
    .system-card canvas { width: 112px; }
    .system-card div { padding: 20px 15px; }
    .ecology-viewport { height: 330px; }
    .ecology-grid { grid-template-columns: 1fr; }
    .archive-toolbar { align-items: stretch; flex-direction: column; }
    .archive-search { min-width: 0; }
    .archive-search input { flex: 1; width: auto; }
    .enemy-grid { grid-template-columns: 1fr; }
    .enemy-card { display: grid; grid-template-columns: 130px 1fr; }
    .enemy-card canvas { width: 130px; height: 100%; min-height: 168px; }
    .enemy-copy { border-top: 0; border-left: 1px solid color-mix(in srgb, var(--enemy-color) 20%, transparent); }
    .enemy-copy > p { min-height: 0; }
    .boss-forge, .boss-visual, .boss-visual canvas { min-height: 400px; }
    .boss-readout { padding: 18px; }
    .boss-matrix { grid-template-columns: repeat(2, 1fr); }
    .boss-matrix article:nth-child(3) { border-right: 1px solid var(--line); }
    .boss-matrix article:nth-child(even) { border-right: 0; }
    .boss-matrix article:nth-child(-n+4) { border-bottom: 1px solid var(--line); }
    .encounter-variations { grid-template-columns: 1fr; }
    .phase-line { align-items: stretch; flex-direction: column; }
    .phase-line > div { min-width: 0; }
    .phase-line > i { width: 1px; height: 22px; margin-left: 28px; flex: none; background: linear-gradient(var(--cyan), var(--red)); }
    .colossus-card { display: block; }
    .colossus-card canvas { height: 250px; min-height: 0; }
    .apex-reward { grid-template-columns: 1fr 24px 1fr; }
    .apex-reward > p { grid-column: 1 / -1; padding: 12px 0 0; border-top: 1px solid rgba(255, 171, 64, 0.2); border-left: 0; }
    .chart-card { min-height: 370px; }
    .chart-card canvas { height: 300px; }
    .scale-facts { grid-template-columns: 1fr; }
    .scale-facts article { border-right: 0; border-bottom: 1px solid var(--line); }
    .scale-facts article:last-child { border-bottom: 0; }
    .score-values { grid-template-columns: repeat(2, 1fr); }
    .wiki-footer { margin-top: 90px; }
}

@media (max-width: 360px) {
    .hero-copy h1 { gap: 4px; font-size: clamp(13px, 4.8cqw, 16px); letter-spacing: -0.7px; }
    .mechanic-strip p { overflow-wrap: anywhere; }
    .enemy-card { grid-template-columns: 96px 1fr; }
    .enemy-card canvas { width: 96px; }
    .boss-stat-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
    .hero-combat-ship,
    .hero-combat-engine,
    .hero-combat-target,
    .hero-combat-impact { animation: none !important; }
    .hero-combat-shot { animation: none !important; stroke-dasharray: none; opacity: 0.85; }
}