:root { color-scheme: dark; --ink: #dcecf2; --muted: #9bb0b7; --cyan: #63e6eb; --cyan-soft: rgba(99, 230, 235, 0.14); --amber: #de9d4b; --amber-soft: rgba(222, 157, 75, 0.13); --red: #f06b5f; --night: #03070a; --panel: #071017; --line: rgba(150, 209, 216, 0.16); }
* { box-sizing: border-box; }
html { background: var(--night); }
body { min-height: 100vh; margin: 0; color: var(--ink); font-family: "Avenir Next Condensed", "DIN Condensed", "Trebuchet MS", sans-serif; background: linear-gradient(rgba(99, 230, 235, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(99, 230, 235, 0.025) 1px, transparent 1px), radial-gradient(circle at 12% 8%, rgba(31, 102, 112, 0.2), transparent 30rem), #03070a; background-size: 34px 34px, 34px 34px, auto, auto; }
button { font: inherit; }
.mission-shell { width: min(1680px, calc(100% - 40px)); margin: 0 auto; padding: 20px 0 18px; }
.mission-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 0 4px 15px; border-bottom: 1px solid var(--line); }
.mission-kicker,
.telemetry-label,
.viewport-caption,
.mission-footer,
.signal-strip { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; text-transform: uppercase; letter-spacing: 0.14em; }
.mission-kicker { display: block; margin-bottom: 4px; color: var(--amber); font-size: 0.68rem; font-weight: 800; }
.mission-lockup h1 { margin: 0; font-size: clamp(2.7rem, 5.2vw, 4.8rem); line-height: 0.95; letter-spacing: -0.035em; font-weight: 550; color: #eef9fb; }
.mission-lockup h1 strong { color: var(--amber); font-weight: 850; text-shadow: 0 0 26px rgba(222, 157, 75, 0.32); }
.signal-strip { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 10px 18px; color: #9cb3ba; font-size: 0.66rem; font-weight: 800; }
.signal-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; }
.signal-dot--cyan { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.signal-dot--amber { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.console-button { border: 1px solid rgba(99, 230, 235, 0.38); padding: 7px 10px; color: var(--cyan); background: rgba(99, 230, 235, 0.06); cursor: pointer; letter-spacing: 0.1em; text-transform: uppercase; }
.console-button:hover,
.console-button:focus-visible { color: #041014; background: var(--cyan); outline: none; }
.console-button[aria-pressed="true"] { border-color: rgba(222, 157, 75, 0.58); color: var(--amber); background: rgba(222, 157, 75, 0.1); }
.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 286px; gap: 16px; margin-top: 16px; }
.viewport-frame { position: relative; align-self: start; padding: 8px; border: 1px solid rgba(99, 230, 235, 0.28); border-radius: 4px; background: #020507; box-shadow: 0 22px 70px rgba(0, 0, 0, 0.48), inset 0 0 28px rgba(99, 230, 235, 0.05); }
.viewport-frame::before { content: ""; position: absolute; inset: 8px 8px 26px; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(99,230,235,0.015), transparent 20%); mix-blend-mode: multiply; }
#space-bugs-2-canvas { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 972; background: #02070a; outline: none; cursor: crosshair; touch-action: none; }
#space-bugs-2-canvas:focus-visible { box-shadow: 0 0 0 2px var(--amber), 0 0 24px rgba(222, 157, 75, 0.26); }
.viewport-caption { display: flex; justify-content: space-between; gap: 12px; padding: 7px 3px 0; color: #91aab1; font-size: 0.58rem; }
.frame-corner { position: absolute; width: 20px; height: 20px; z-index: 3; pointer-events: none; border-color: var(--amber); }
.frame-corner--tl { top: 3px; left: 3px; border-top: 2px solid; border-left: 2px solid; }
.frame-corner--tr { top: 3px; right: 3px; border-top: 2px solid; border-right: 2px solid; }
.frame-corner--bl { bottom: 23px; left: 3px; border-bottom: 2px solid; border-left: 2px solid; }
.frame-corner--br { right: 3px; bottom: 23px; border-right: 2px solid; border-bottom: 2px solid; }
.mission-rail { display: grid; align-content: start; gap: 10px; }
.telemetry-card { border-radius: 4px; position: relative; overflow: hidden; border: 1px solid var(--line); padding: 13px; background: linear-gradient(135deg, rgba(99, 230, 235, 0.035), transparent 46%), rgba(7, 16, 23, 0.9); }
.telemetry-card::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--cyan); opacity: 0.5; }
.telemetry-card--primary { min-height: 176px; background: radial-gradient(circle at 95% 0%, rgba(222, 157, 75, 0.17), transparent 56%), rgba(7, 16, 23, 0.94); }
.telemetry-card--primary::after { background: var(--amber); opacity: 0.9; }
.telemetry-label { display: block; margin-bottom: 5px; color: #94adb5; font-size: 0.59rem; font-weight: 800; }
.telemetry-card strong { color: #edf9fb; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 1.26rem; letter-spacing: 0.04em; }
.telemetry-card--primary > strong { display: block; color: var(--amber); font-size: 2.7rem; line-height: 1; }
.telemetry-card h2 { margin: 5px 0 7px; font-size: 1.08rem; letter-spacing: 0.08em; }
.telemetry-card p { margin: 0; color: var(--muted); font-size: 0.78rem; line-height: 1.48; }
.telemetry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.controls-card dl { margin: 4px 0 10px; }
.controls-card dl div { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px dotted rgba(150, 209, 216, 0.15); font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.66rem; }
.controls-card dt { color: var(--muted); }
.controls-card dd { margin: 0; color: var(--cyan); font-weight: 800; }
.controls-card p strong { color: var(--amber); font: inherit; font-weight: 800; }
.audio-card { display: grid; gap: 8px; }
.audio-status { min-height: 1.1em; color: var(--amber) !important; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.62rem !important; letter-spacing: 0.07em; }
.audio-card label { display: grid; grid-template-columns: 48px minmax(0, 1fr) 26px; align-items: center; gap: 8px; color: var(--muted); font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.61rem; }
.audio-card input[type="range"] { width: 100%; height: 4px; accent-color: var(--cyan); cursor: pointer; }
.audio-card output { color: var(--cyan); text-align: right; font-weight: 800; }
.doctrine-card { border-color: rgba(222, 157, 75, 0.22); }
.doctrine-card::after { background: var(--amber); }
.mission-footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line); color: #829ba3; font-size: 0.58rem; }
.mission-footer strong { color: var(--cyan); }
@media (max-width: 1060px) {
  .game-layout { grid-template-columns: 1fr; }
  .mission-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .telemetry-card--primary, .controls-card { min-height: 0; }
}
@media (max-width: 720px) {
  .mission-shell { width: min(100% - 16px, 1600px); padding-top: 12px; }
  .mission-header { align-items: flex-start; flex-direction: column; }
  .signal-strip { justify-content: flex-start; }
  .mission-rail { grid-template-columns: 1fr; }
  .mission-footer { align-items: flex-start; flex-direction: column; }
  .viewport-caption { font-size: 0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}


.flight-stage { min-width: 0; }
.wave-status { display: flex; align-items: center; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--cyan); font: 10px ui-monospace, Menlo, monospace; letter-spacing: .09em; }
.squad-card { background: linear-gradient(135deg, var(--amber-soft), transparent), var(--panel); }
.squad-card::after { background: var(--amber); }
.squad-card strong { color: var(--amber); }
.doctrine-card em { color: var(--amber); font-style: normal; }
.field-guide { margin-top: 16px; border: 1px solid var(--line); border-radius: 4px; background: rgba(7,16,23,.8); }
.guide-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); font: 9px ui-monospace, Menlo, monospace; letter-spacing: .12em; color: var(--muted); }
.guide-heading h2 { margin: 0; font: inherit; color: var(--amber); }
.species-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); margin: 0; padding: 8px; list-style: none; gap: 4px; }
.species-grid li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 7px; border-radius: 3px; }
.species-grid li:hover { background: rgba(99,230,235,.05); }
.species-grid strong { display: block; font: 10px ui-monospace, Menlo, monospace; letter-spacing: .08em; color: #d8e7eb; }
.species-grid small { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); }
.species-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px; width: 34px; height: 38px; font-size: 28px; filter: saturate(.8); }
.species-icon--wasp { color: #e4b14b; font-size: 38px; transform: scaleX(.75); text-shadow: 0 0 8px #bd872a66; }
.species-icon--wasp::after { content: ''; position: absolute; width: 6px; height: 22px; top: 10px; border-radius: 50%; background: repeating-linear-gradient(#ffd071 0 4px, #514023 4px 6px); box-shadow: -9px -5px 0 -1px #8bdcdd55, 9px -5px 0 -1px #8bdcdd55; }
.species-icon--centipede, .species-icon--millipede { color: #e48368; font-size: 0; }
.species-icon--centipede::before, .species-icon--millipede::before { content: ''; width: 14px; height: 32px; border-radius: 7px 7px 4px 4px; background: repeating-linear-gradient(#e48368 0 4px,#553121 4px 6px); transform: rotate(-20deg); box-shadow: 0 0 8px #e483681a; }
.species-icon--centipede::after, .species-icon--millipede::after { content: ''; position: absolute; width: 28px; height: 29px; background: repeating-linear-gradient(transparent 0 3px, currentColor 3px 5px, transparent 5px 6px); transform: rotate(-20deg); z-index: -1; }
.species-icon--millipede { color: #9abd78; }
.species-icon--millipede::before { width: 18px; height: 34px; border-radius: 8px; background: repeating-linear-gradient(#9abd78 0 2px,#334c30 2px 4px); transform: rotate(10deg); }
.species-icon--millipede::after { width: 26px; height: 30px; background: repeating-linear-gradient(transparent 0 2px,currentColor 2px 3px,transparent 3px 4px); transform: rotate(10deg); }
button:focus-visible, input:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
@media (min-width: 1700px) { .game-layout { grid-template-columns: minmax(0,1fr) 306px; gap: 20px; } }
@media (max-width: 1200px) and (min-width: 1061px) { .species-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 720px) { .mission-header { gap: 14px; } .mission-rail { grid-template-columns: repeat(2,minmax(0,1fr)); } .telemetry-grid { grid-column: 1/-1; grid-template-columns: repeat(3,minmax(0,1fr)); } .telemetry-card--primary { grid-column: 1/-1; } .species-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .signal-strip { font-size: .56rem; gap: 10px; } .guide-heading { font-size: 8px; padding: 11px; } }
@media (max-width: 440px) { .mission-rail { grid-template-columns: 1fr; } .telemetry-grid { gap: 6px; } .telemetry-grid .telemetry-card { padding: 10px 7px; } .telemetry-grid strong { font-size: 1.02rem; } .telemetry-label { font-size: .55rem; } .viewport-caption { font-size: .43rem; letter-spacing: .07em; } .species-grid small { font-size: 10px; } }

/* First animation pose doubles as the species identification portrait. */
.species-art { width: 48px; height: 48px; flex: 0 0 48px; background-size: 200% 200%; background-repeat: no-repeat; filter: none; transform: none; }
.species-art--bee { background-image: url("assets/sprites/evolution/bee.png?v=3.0.0"); }
.species-art--ant { background-image: url("assets/sprites/evolution/ant.png?v=3.0.0"); }
.species-art--wasp { background-image: url("assets/sprites/evolution/wasp.png?v=3.0.0"); }
.species-art--spider { background-image: url("assets/sprites/evolution/spider.png?v=3.0.0"); }
.species-art--centipede { background-image: url("assets/sprites/evolution/centipede.png?v=3.0.0"); }
.species-art--millipede { background-image: url("assets/sprites/evolution/millipede.png?v=3.0.0"); }
.species-art--scorpion { background-image: url("assets/sprites/evolution/scorpion.png?v=3.0.0"); }
.species-art--beetle { background-image: url("assets/sprites/evolution/beetle.png?v=3.0.0"); }

.viewport-frame:fullscreen { display:flex; flex-direction:column; align-items:center; justify-content:center; background:#02070c; padding:8px; }
.viewport-frame:fullscreen #space-bugs-2-canvas { width:auto; height:calc(100dvh - 40px); max-width:100%; object-fit:contain; }
.viewport-frame:fullscreen .viewport-caption { width:min(100%,1280px); }

/* Shared high scores and accessible initials entry. */
.leaderboard-card { margin-top:16px; border:1px solid var(--line); border-radius:4px; background:var(--panel); }
.leaderboard-card .guide-heading h2 { font-size:12px; letter-spacing:.12em; }
#leaderboard-status, .leaderboard-note { margin:14px 18px; color:var(--muted); font-size:13px; }
#leaderboard-retry { margin:0 18px 12px; }
.leaderboard-table { width:calc(100% - 36px); margin:0 18px; border-collapse:collapse; font:14px ui-monospace,Menlo,monospace; }
.leaderboard-table th { font-size:10px; letter-spacing:.12em; color:var(--muted); font-weight:500; }
.leaderboard-table th, .leaderboard-table td { padding:11px 8px; text-align:left; border-bottom:1px solid var(--line); }
.leaderboard-table th:last-child, .leaderboard-table td:last-child { text-align:right; font-variant-numeric:tabular-nums; }
.leaderboard-table td:first-child { width:20%; color:var(--amber); }
.leaderboard-table td:nth-child(2) { letter-spacing:.2em; font-weight:bold; }
.leaderboard-table .leaderboard-empty { padding:24px 8px; color:var(--muted); text-align:center; font:14px sans-serif; }
.leaderboard-new { background:var(--amber-soft); color:#ffe1a0; }
.high-score-dialog {
  position:fixed; inset:auto; margin:0; width:min(940px,calc(100vw - 24px));
  max-height:calc(100dvh - 24px); overflow:auto; padding:26px 34px 18px;
  border:1px solid #eabf70; border-radius:3px; color:var(--ink);
  background:linear-gradient(120deg,#021019a8,#02081075),var(--score-sector) center/cover;
  box-shadow:inset 0 0 0 5px #07131ab0,inset 0 0 0 6px #c4975055,0 0 42px #4abfcd20;
}
.high-score-dialog::backdrop { background:transparent; }
.high-score-dialog form { text-align:center; }
.score-honors { position:relative; margin-bottom:20px; }
.score-crest { display:block; width:230px; height:50px; margin:0 auto 9px; color:#f1c675; filter:drop-shadow(0 0 12px #d99c4144); }
.score-honors .mission-kicker { display:block; font-size:11px; letter-spacing:.3em; }
.high-score-dialog h2 { margin:8px 0 0; color:#fff0ce; font-size:clamp(28px,3.5vw,48px); letter-spacing:.09em; line-height:1.1; text-shadow:0 3px 0 #4e331d,0 0 28px #dca54d45; }
.score-rule { display:flex; align-items:center; gap:18px; width:85%; margin:14px auto 0; color:#eabf70; font-size:9px; }
.score-rule::before,.score-rule::after { content:""; flex:1; height:1px; background:linear-gradient(90deg,transparent,#eabf7090); }
.score-rule::after { transform:rotate(180deg); }
.score-results-layout { display:grid; grid-template-columns:minmax(205px,.8fr) minmax(0,1.5fr); gap:30px; align-items:center; }
.score-pilot-summary { padding:22px 0; }
.high-score-value { display:block; margin:14px 0 28px; color:#ffe0a0; font:700 clamp(28px,3vw,40px) ui-monospace,monospace; text-shadow:0 0 24px #ebae4940; }
.high-score-dialog label { display:block; margin-bottom:10px; color:var(--muted); font:11px ui-monospace,monospace; letter-spacing:.12em; }
#high-score-initials { display:block; width:180px; margin:auto; padding:10px 0 10px 14px; border:1px solid var(--cyan); border-radius:4px; background:#02090faa; color:var(--cyan); text-align:center; font:700 32px ui-monospace,monospace; letter-spacing:14px; text-transform:uppercase; }
#high-score-feedback { font:14px/1.5 sans-serif; color:#bdced4; margin:20px 0; }
.high-score-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.high-score-actions button { min-height:44px; padding:10px 16px; }
#high-score-save { background:var(--amber); color:#07121c; border-color:var(--amber); font-weight:bold; }
button:disabled { opacity:.5; cursor:wait; }
[hidden] { display:none !important; }
.high-score-dialog .leaderboard-table { width:100%; margin:0; font-size:20px; background:#02101955; }
.high-score-dialog .leaderboard-table th { color:#7bb6c6; font-size:11px; padding:10px 12px; }
.high-score-dialog .leaderboard-table td { padding:10px 12px; border-color:#8fbac424; }
.high-score-dialog .leaderboard-table td:first-child { font-size:15px; width:19%; }
.high-score-dialog .leaderboard-table tr:nth-child(-n+3) { color:#ffe1a0; }
.high-score-dialog .leaderboard-table tr:first-child td { border-top:1px solid #edc07188; background:#dea64b15; }
.high-score-dialog .leaderboard-new { outline:1px solid #68e1e4; outline-offset:-1px; background:#3ac4c21c; }
.score-footer { display:flex; justify-content:space-between; margin-top:22px; padding-top:12px; border-top:1px solid #d0ab6855; color:#b4b4a1; font:9px ui-monospace,monospace; letter-spacing:.16em; }
@media(max-width:620px) {
  .high-score-dialog { padding:16px 18px; }
  .score-crest { width:170px; height:35px; margin-bottom:5px; }
  .score-honors { margin-bottom:8px; }
  .score-honors .mission-kicker { font-size:8px; }
  .high-score-dialog h2 { font-size:26px; }
  .score-rule { margin-top:8px; }
  .score-results-layout { grid-template-columns:1fr; gap:12px; }
  .score-pilot-summary { padding:4px 0; }
  .high-score-value { margin:5px 0 10px; font-size:28px; }
  #high-score-initials { padding:5px 0 5px 14px; font-size:26px; }
  #high-score-feedback { margin:10px 0; font-size:12px; }
  .high-score-dialog .leaderboard-table { font-size:16px; }
  .high-score-dialog .leaderboard-table td,.high-score-dialog .leaderboard-table th { padding:6px 10px; }
  .score-footer { margin-top:12px; font-size:7px; }
}

/* ── 5.0: codex field guide ─────────────────────────────── */
.field-guide { overflow: hidden; }
.codex-progress { color: var(--cyan); font: 700 9px ui-monospace, Menlo, monospace; letter-spacing: .14em; }
.codex-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 8px 10px 0; border-bottom: 1px solid var(--line); }
.codex-tab { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid transparent; border-bottom: 0; border-radius: 3px 3px 0 0; background: none; color: var(--muted); font: 800 10px ui-monospace, Menlo, monospace; letter-spacing: .12em; cursor: pointer; }
.codex-tab i { font-style: normal; color: #5f7b83; font-weight: 700; }
.codex-tab:hover { color: var(--ink); background: rgba(99,230,235,.06); }
.codex-tab[aria-selected="true"] { color: var(--amber); border-color: var(--line); background: rgba(222,157,75,.07); }
.codex-tab.has-new::after { content: ""; position: absolute; top: 6px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.codex-body-wrap { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); }
.codex-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 8px; list-style: none; gap: 4px; align-content: start; }
.codex-grid li { display: block; min-width: 0; }
.codex-tile { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 8px 10px; text-align: left; color: var(--ink); background: rgba(255,255,255,.015); border: 1px solid rgba(150,209,216,.09); border-left: 2px solid var(--codex-color, var(--cyan)); border-radius: 3px; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
.codex-tile:hover { background: rgba(99,230,235,.07); transform: translateX(2px); }
.codex-tile.is-selected { background: rgba(222,157,75,.09); border-color: rgba(222,157,75,.5); }
.codex-tile.is-locked { opacity: .62; }
.codex-tile.is-new { box-shadow: inset 0 0 0 1px rgba(222,157,75,.35); }
.codex-portrait { flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center; overflow: hidden; }
.codex-portrait .species-art { width: 40px; height: 40px; flex-basis: 40px; }
.codex-portrait .species-art.is-silhouette { filter: brightness(0) opacity(.35); }
.codex-label { display: block; min-width: 0; }
.codex-label strong { display: block; font: 800 10.5px ui-monospace, Menlo, monospace; letter-spacing: .09em; color: #e4f1f4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.codex-label small { display: block; margin-top: 3px; font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .04em; }
.codex-new { position: absolute; top: 5px; right: 6px; padding: 1px 5px; border-radius: 2px; background: var(--amber); color: #150d02; font: 800 8px ui-monospace, Menlo, monospace; letter-spacing: .1em; font-style: normal; }
.codex-detail { margin: 8px 8px 8px 0; padding: 16px 18px; border: 1px solid var(--line); border-left: 2px solid var(--codex-color, var(--cyan)); border-radius: 3px; background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--codex-color, var(--cyan)) 12%, transparent), transparent 60%), rgba(4,11,17,.7); min-height: 220px; align-self: start; position: sticky; top: 12px; }
.codex-detail-head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.codex-detail-head .codex-portrait { flex-basis: 56px; width: 56px; height: 56px; }
.codex-detail-head .codex-portrait .species-art { width: 56px; height: 56px; flex-basis: 56px; }
.codex-detail-titles strong { display: block; font: 800 20px/1.1 "Avenir Next Condensed", "Arial Narrow", sans-serif; letter-spacing: .06em; color: #f0fafc; }
.codex-detail-titles small { display: block; margin-top: 3px; font: 700 10px ui-monospace, Menlo, monospace; letter-spacing: .12em; color: var(--codex-color, var(--cyan)); }
.codex-kicker { display: block; font: 800 8.5px ui-monospace, Menlo, monospace; letter-spacing: .18em; color: var(--muted); margin-bottom: 3px; }
.codex-body { margin: 0 0 10px; font-size: 13px; line-height: 1.55; color: #c3d6db; }
.codex-tip { margin: 0 0 10px; font-size: 12px; line-height: 1.5; color: var(--codex-color, var(--cyan)); }
.codex-tip b { font: 800 9px ui-monospace, Menlo, monospace; letter-spacing: .16em; }
.codex-first, .codex-empty { display: block; font: 700 9px ui-monospace, Menlo, monospace; letter-spacing: .14em; color: var(--muted); }
.codex-empty { line-height: 1.6; padding: 6px 0; font-size: 11px; letter-spacing: .06em; }
@media (max-width: 860px) { .codex-body-wrap { grid-template-columns: 1fr; } .codex-detail { margin: 0 8px 8px; position: static; } }
@media (max-width: 520px) { .codex-grid { grid-template-columns: 1fr; } }

/* ship systems rail */
.ship-tier { margin-left: 8px; padding: 1px 6px; border: 1px solid rgba(222,157,75,.55); border-radius: 2px; color: var(--amber); font-weight: 800; letter-spacing: .12em; }
.systems-card dt { white-space: nowrap; }
.systems-card dd { text-align: right; }
.mods-line { display: grid; gap: 4px; margin-top: 8px !important; }
.mods-line #mods-readout { font: 700 10px/1.5 ui-monospace, Menlo, monospace; letter-spacing: .06em; color: var(--cyan); }
#space-bugs-2-canvas { image-rendering: auto; }