:root {
    --bg: #060a08;
    --panel: #0c1410;
    --line: #1e3a2a;
    --fg: #8ff0a4;
    --dim: #4e8a62;
    --amber: #ffc857;
    --red: #ff6b6b;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: "Cascadia Code", "Fira Mono", "Menlo", monospace;
}

main { max-width: 1000px; margin: 0 auto; padding: 1rem 1rem 3rem; }

.ticker {
    position: fixed; left: 0; right: 0; bottom: 0;
    background: #04140a; border-top: 1px solid var(--line);
    overflow: hidden; white-space: nowrap; z-index: 10;
    font-size: .85rem; padding: .3rem 0; color: var(--amber);
}
.ticker-track { display: inline-block; animation: ticker-scroll 45s linear infinite; }
.ticker-track span { padding-right: 3rem; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

h1, h2, h3 { color: var(--amber); font-weight: normal; }

button {
    background: transparent;
    border: 1px solid var(--dim);
    color: var(--fg);
    font-family: inherit;
    padding: .35rem .8rem;
    cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--fg); background: #10281a; }
button:disabled { opacity: .35; cursor: default; }

input {
    background: var(--panel);
    border: 1px solid var(--dim);
    color: var(--fg);
    font-family: inherit;
    padding: .35rem .5rem;
}

.hud-title { color: var(--amber); }

.tabs { display: flex; gap: .5rem; margin: .8rem 0; }

.system-blurb { color: var(--dim); }

table.market { width: 100%; border-collapse: collapse; }
table.market th, table.market td {
    border-bottom: 1px solid var(--line);
    padding: .4rem .6rem;
    text-align: left;
}
tr.illegal td { color: var(--amber); }

.station-actions { margin-top: 1rem; }
.error { color: var(--red); }
.dim { color: var(--dim); }
.loading { text-align: center; margin-top: 20vh; color: var(--dim); }

.title-screen {
    text-align: center;
    margin-top: 15vh;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    align-items: center;
}
.title-screen h1 { letter-spacing: .6em; margin-left: .6em; }
.new-game { display: flex; gap: .5rem; }

.starmap {
    width: 100%;
    max-height: 75vh;
    background: var(--panel);
    border: 1px solid var(--line);
}
.starmap .range-ring {
    fill: none;
    stroke: var(--dim);
    stroke-dasharray: 1 1;
    stroke-width: .15;
}
.starmap .star { cursor: pointer; stroke-width: .25; }
.starmap .star.current, .mini-map .star.current { fill: var(--amber); }
.starmap .star.reachable, .mini-map .star.reachable { fill: var(--fg); }
.starmap .star.unreachable { fill: #2c4436; cursor: default; }
.starmap .star-label { fill: var(--dim); font-size: 1.2px; font-family: inherit; pointer-events: none; }
.starmap .ship-dot, .mini-map .ship-dot { fill: var(--amber); stroke: #fff; stroke-width: .12; }
.starmap .jump-line, .mini-map .jump-line {
    stroke: var(--amber); stroke-width: .12; stroke-dasharray: .6 .4;
    opacity: .5; animation: jump-line-march .4s linear infinite;
}
@keyframes jump-line-march { to { stroke-dashoffset: -1; } }
.faction-TCA { stroke: #6ea8ff; }
.faction-SiriusCompact { stroke: #ffc857; }
.faction-FrontierFreeholds { stroke: #8ff0a4; }
.faction-KuiperSyndicates { stroke: #ff6b6b; }
.faction-AndromedanFederation { stroke: #c9a0ff; }
.doctrine { opacity: .7; letter-spacing: .08em; }
.map-hint { color: var(--dim); }

.ship-panel { max-width: 480px; }
.fuel-bar {
    height: .8rem;
    background: #132218;
    border: 1px solid var(--line);
}
.fuel-bar > div { height: 100%; background: var(--fg); }

.notice {
    border: 1px solid var(--amber);
    color: var(--amber);
    background: #1a1508;
    padding: .5rem .8rem;
    margin: .8rem 0;
}

.encounter {
    border: 1px solid var(--red);
    background: var(--panel);
    padding: 1rem;
    margin-top: .8rem;
}
.encounter h2 { color: var(--red); margin-top: 0; letter-spacing: .3em; }
.npc-stats { color: var(--dim); }
.encounter-log { list-style: none; padding: 0; max-height: 12rem; overflow-y: auto; }
.encounter-log li { padding: .15rem 0; border-bottom: 1px dotted var(--line); }
.encounter-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; }

.hull-bar > div { background: var(--amber); }
.wanted { color: var(--red); }
.forger { color: #ff6b6b; border: 1px solid #ff6b6b; padding: 0 .3rem; margin-left: .5rem; font-size: .75em; letter-spacing: .08em; }

.news h3 { margin-bottom: .3rem; }
.news ul { list-style: none; padding: 0 0 .6rem 0; margin: 0; }
.news li { padding: .2rem 0; border-bottom: 1px dotted var(--line); }

.chronicle td { padding: .15rem .8rem .15rem 0; vertical-align: top; }
.chronicle tr.credit td { color: #8ff0a4; }

.starmap .event-ring {
    fill: none;
    stroke: var(--amber);
    stroke-width: .25;
    stroke-dasharray: .7 .5;
}

.exchange-scroll { overflow-x: auto; }
table.exchange td, table.exchange th { white-space: nowrap; font-size: .85rem; }
tr.current-row td { color: var(--amber); }

.npc-name { color: var(--amber); letter-spacing: .15em; }
.rep-table { max-width: 420px; }
.rep-good { color: var(--fg); }
.rep-bad { color: var(--red); }
.quiet-facts td { padding-right: 1rem; }

.colony { border: 1px solid var(--amber); background: var(--panel); padding: 1rem; margin-top: .8rem; }
.colony h2 { color: var(--amber); letter-spacing: .3em; margin-top: 0; }
.colony-stats { max-width: 420px; }
button.release { border-color: var(--amber); color: var(--amber); }

.bar-scene .neon-sign {
    font-size: 1.6rem; letter-spacing: .35em; text-align: center;
    color: #ff7edb; text-shadow: 0 0 6px #ff7edb, 0 0 18px #ff2fbf;
    padding: .8rem 0 .4rem; animation: neon-flicker 7s infinite;
}
@keyframes neon-flicker {
    0%, 18%, 22%, 100% { opacity: 1; }
    19%, 21% { opacity: .45; }
    60% { opacity: .92; }
}
.bar-scene .bar-counter {
    height: 2.6rem; border-radius: .3rem; margin-bottom: 1rem;
    background: linear-gradient(#4a2f18, #2b1a0c);
    border-bottom: 4px solid #1c1108; display: flex; align-items: flex-end; justify-content: center;
}
.bar-scene .bottles { display: flex; gap: .55rem; margin-bottom: .45rem; }
.bar-scene .bottles span {
    width: .45rem; height: 1.3rem; border-radius: .15rem .15rem 0 0; opacity: .85;
    background: linear-gradient(#8ff0a4, #1f5c33);
}
.bar-scene .bottles span:nth-child(2n) { background: linear-gradient(#ffc857, #7a5410); height: 1.05rem; }
.bar-scene .bottles span:nth-child(3n) { background: linear-gradient(#6ea8ff, #24457a); height: 1.5rem; }
.patrons { display: flex; flex-wrap: wrap; gap: .8rem; }
.patron-card {
    border: 1px solid var(--line); border-radius: .4rem; padding: .7rem;
    width: 12rem; text-align: center; background: #071b0f;
}
.patron-card .patron-name { color: var(--fg); }
.patron-card button { margin-top: .5rem; }
.corkboard {
    display: flex; flex-wrap: wrap; gap: .9rem; padding: .9rem;
    background: #241505; border: 3px solid #3a2409; border-radius: .3rem;
}
.pinned-note {
    background: #e8dcae; color: #221a08; padding: .6rem .7rem; width: 14rem;
    box-shadow: 2px 3px 6px rgba(0,0,0,.5); position: relative;
}
.pinned-note::before {
    content: ""; position: absolute; top: -6px; left: 50%; width: 10px; height: 10px;
    border-radius: 50%; background: #b3372f; box-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.pinned-note:nth-child(2n) { transform: rotate(1.6deg); }
.pinned-note:nth-child(2n+1) { transform: rotate(-1.2deg); }
.pinned-note .dim { color: #5a4a22; }
.pinned-note .note-pay { font-weight: bold; }
.pinned-note button { margin-top: .4rem; background: #221a08; color: #e8dcae; border-color: #5a4a22; }
.back-room {
    margin-top: 1.2rem; padding: .8rem; border-left: 4px double #7a1020;
    background: linear-gradient(90deg, rgba(122,16,32,.18), transparent 55%);
}
.back-room h3 { color: #ff6b6b; }
.cinematic {
    position: fixed; inset: 0; z-index: 30; overflow: hidden;
    background: #010409; cursor: pointer;
}
.cinematic .starfield {
    position: absolute; inset: -50%; width: 200%; height: 200%;
    background-image:
        radial-gradient(1px 1px at 12% 22%, #cfe8d6, transparent),
        radial-gradient(1px 1px at 38% 71%, #9fb8a8, transparent),
        radial-gradient(1.5px 1.5px at 61% 34%, #ffffff, transparent),
        radial-gradient(1px 1px at 83% 58%, #b7d2c0, transparent),
        radial-gradient(1px 1px at 27% 89%, #e8f2ec, transparent),
        radial-gradient(1.5px 1.5px at 74% 12%, #d6e6dc, transparent);
    background-repeat: repeat; background-size: 260px 260px;
    animation: star-drift 60s linear infinite;
}
.cinematic .starfield.l2 {
    background-size: 420px 420px; opacity: .5; animation-duration: 90s;
}
@keyframes star-drift { to { transform: translateX(-260px); } }
.cinematic.p-takeoff .starfield { animation-duration: 6s; }
.cinematic.p-takeoff .starfield.l2 { animation-duration: 9s; }
.cinematic.p-hyper .starfield { opacity: 0; }
.cinematic .hyper-streaks {
    position: absolute; inset: 0;
    background: repeating-linear-gradient(90deg,
        transparent 0 14px, rgba(143,240,164,.35) 14px 15px,
        transparent 15px 41px, rgba(255,255,255,.25) 41px 42px);
    animation: hyper-rush .25s linear infinite;
}
@keyframes hyper-rush { to { transform: translateX(-56px); } }
.cinematic .mini-map {
    position: absolute; top: 1rem; left: 1rem; width: 240px; height: 160px;
    border: 1px solid var(--line); background: rgba(2, 12, 6, .85); border-radius: .3rem;
}
.cinematic .phase-label {
    position: absolute; top: 22%; left: 0; right: 0; text-align: center;
    font-size: 2.6rem; letter-spacing: .45em; margin-left: .45em;
    text-shadow: 0 0 14px currentColor; animation: label-pulse 1s ease-in-out infinite;
}
@keyframes label-pulse { 50% { opacity: .55; } }
.cinematic .readout {
    position: absolute; left: 1rem; bottom: 1.2rem; border-collapse: collapse;
    color: var(--fg); font-size: .9rem; background: rgba(2, 12, 6, .7);
}
.cinematic .readout td { padding: .15rem .8rem .15rem .4rem; border: none; }
.cinematic .readout td:first-child { color: var(--dim); }

.finance { margin-top: 1rem; }
.finance h3 { margin-bottom: .3rem; }
.scoop { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin: .3rem 0; }
.ledger-line { letter-spacing: .04em; opacity: .85; }
.gate-dark { color: #c9a0ff; opacity: .8; letter-spacing: .06em; }
button.retire { border-color: var(--red); color: var(--red); }
button.retire:hover:not(:disabled) { background: #2a0f12; border-color: var(--red); }
button.payoff { margin-left: .4rem; border-color: var(--amber); color: var(--amber); }
.starmap .mission-pin {
    fill: none; stroke: var(--amber); stroke-width: .18;
    animation: pin-pulse 1.6s ease-in-out infinite;
}
@keyframes pin-pulse { 50% { opacity: .25; } }

/* ---- dock-ID portraits ---- */
.face { display: inline-block; border: 1px solid var(--line); background: #04120a; border-radius: .2rem; flex: none; }
.patron-card .face { display: block; margin: 0 auto .4rem; }
.fixer-head { display: flex; align-items: center; gap: .55rem; }
.crew-cell { display: inline-flex; align-items: center; gap: .5rem; }
.npc-plate { display: flex; align-items: center; gap: .6rem; }

/* ---- the dockside monitor wall ---- */
.monitor-wall { display: flex; gap: 1rem; flex-wrap: wrap; align-items: stretch; margin-bottom: 1.2rem; }
.crt {
    flex: 1 1 26rem; min-width: 20rem; border-radius: .6rem;
    background: linear-gradient(#241f1a, #171310);
    border: 1px solid #3a322a; padding: .55rem .55rem 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 18px rgba(0,0,0,.5);
}
.crt-label {
    display: flex; justify-content: space-between; gap: 1rem;
    font-size: .7rem; letter-spacing: .12em; color: #8a7a64; padding: 0 .2rem .4rem;
}
.crt-label .signal { color: #6b5c48; }
.crt-screen {
    position: relative; overflow: hidden; border-radius: .5rem .5rem .3rem .3rem;
    background: radial-gradient(120% 100% at 50% 0%, #0a1a10 0%, #060f0a 70%, #030905 100%);
    border: 2px solid #0b0906; min-height: 16rem; padding: .8rem .9rem 1.1rem;
}
.crt-green .crt-screen { color: var(--fg); }
.crt-amber .crt-screen {
    color: var(--amber);
    background: radial-gradient(120% 100% at 50% 0%, #1a1408 0%, #0f0c05 70%, #080602 100%);
}
.crt-amber .crt-screen h4 { color: var(--amber); margin: .2rem 0 .3rem; letter-spacing: .2em; font-weight: normal; }
.crt-amber .crt-screen li { border-bottom-color: #3a2f14; }
.crt-screen ul { list-style: none; margin: 0; padding: 0; }
.crt-screen li { padding: .22rem 0; border-bottom: 1px dotted var(--line); font-size: .88rem; }
.crt-chin { display: flex; align-items: center; gap: .5rem; padding: .35rem .2rem .45rem; }
.crt-power { width: .45rem; height: .45rem; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 5px #ff3b30; }
.crt-brand { font-size: .6rem; letter-spacing: .25em; color: #6b5c48; }

/* bad signal: the feed itself misbehaves */
.crt-feed { position: relative; z-index: 1; animation: feed-window 12s linear infinite; }
.crt-green .crt-feed li { text-shadow: 1px 0 rgba(143,240,164,.35), -1px 0 rgba(64,160,255,.12); }
.crt-green .crt-screen { animation: crt-flicker 4.2s steps(1) infinite; }
@keyframes crt-flicker { 0%, 92%, 100% { opacity: 1; } 93% { opacity: .82; } 94% { opacity: .96; } 97% { opacity: .88; } }
.crt-green .crt-feed { animation: feed-window 12s linear infinite, feed-jitter 8.5s steps(1) infinite; }
@keyframes feed-jitter {
    0%, 87%, 100% { transform: none; }
    88% { transform: translateX(2px) skewX(.6deg); }
    89% { transform: translateX(-1px); }
    93% { transform: translateX(1px); }
}
.crt-rollbar {
    position: absolute; left: 0; right: 0; top: -20%; height: 18%;
    background: linear-gradient(rgba(143,240,164,0), rgba(143,240,164,.08), rgba(143,240,164,0));
    animation: rollbar 7s linear infinite; pointer-events: none; z-index: 2;
}
@keyframes rollbar { to { top: 120%; } }
.crt-noise {
    position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: .05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
    animation: noise-hop .35s steps(2) infinite;
}
@keyframes noise-hop { 50% { background-position: 60px 30px; } }
.crt-scanlines {
    position: absolute; inset: 0; pointer-events: none; z-index: 3;
    background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px);
}
.crt-vignette {
    position: absolute; inset: 0; pointer-events: none; z-index: 3;
    background: radial-gradient(110% 100% at 50% 45%, transparent 62%, rgba(0,0,0,.5) 100%);
}

/* the takeover: ~4.4s of perfect signal every 12s - saturation airtime */
.crt-feed { opacity: 1; }
@keyframes feed-window {
    0%, 60% { opacity: 1; }
    62%, 97% { opacity: 0; }
    99%, 100% { opacity: 1; }
}
.crt-ad {
    position: absolute; inset: 0; z-index: 4; opacity: 0; pointer-events: none;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(120% 120% at 50% 30%, #0d2438 0%, var(--fed-deep, #061422) 70%);
    animation: ad-window 12s linear infinite;
}
@keyframes ad-window {
    0%, 60% { opacity: 0; }
    62% { opacity: 1; filter: contrast(3) brightness(2); }   /* static burst in */
    65% { filter: none; }
    95% { opacity: 1; filter: none; }                        /* hold clean until the edge */
    97% { opacity: 1; filter: contrast(3) brightness(2); }   /* burst out */
    99%, 100% { opacity: 0; }
}
.ad-slide {
    position: absolute; inset: 0; opacity: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .7rem; text-align: center; padding: 1.2rem;
    font-family: "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
    animation: ad-rotation 48s linear infinite;
}
/* each slide owns one 12s quarter of the 48s supercycle */
.ad-2 { animation-name: ad-rotation-2; }
.ad-3 { animation-name: ad-rotation-3; }
.ad-4 { animation-name: ad-rotation-4; }
@keyframes ad-rotation   { 0%, 24.99% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes ad-rotation-2 { 0%, 24.99% { opacity: 0; } 25%, 49.99% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes ad-rotation-3 { 0%, 49.99% { opacity: 0; } 50%, 74.99% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes ad-rotation-4 { 0%, 74.99% { opacity: 0; } 75%, 100% { opacity: 1; } }
.ad-ring {
    width: 5.2rem; height: 5.2rem; border-radius: 50%;
    border: 2px solid var(--fed-glow, #7fc4ff);
    box-shadow: 0 0 18px rgba(127,196,255,.5), inset 0 0 14px rgba(127,196,255,.25);
    animation: ring-breathe 6s ease-in-out infinite;
}
@keyframes ring-breathe { 50% { transform: scale(1.06); box-shadow: 0 0 26px rgba(127,196,255,.7), inset 0 0 18px rgba(127,196,255,.35); } }
.ad-headline {
    color: var(--fed-sky, #cfe9ff); font-size: 1.15rem; font-weight: 300;
    letter-spacing: .3em; margin-left: .3em;
}
.ad-sub { color: #9db8cc; font-size: .85rem; font-weight: 300; letter-spacing: .06em; }
.ad-chyron {
    position: absolute; bottom: .7rem; left: 0; right: 0;
    color: #6f8ba1; font-size: .62rem; letter-spacing: .22em;
}

@media (prefers-reduced-motion: reduce) {
    .crt-green .crt-screen, .crt-green .crt-feed { animation: none; }
    .crt-rollbar, .crt-noise { animation: none; display: none; }
    .ad-ring { animation: none; }
    .crt-ad { animation: ad-window-soft 12s linear infinite; }
    @keyframes ad-window-soft { 0%, 60% { opacity: 0; } 66% { opacity: 1; } 94% { opacity: 1; } 100% { opacity: 0; } }
}
@media (max-width: 720px) { .crt { min-width: 100%; } }

/* ---- the whole app is one machine ---- */
body::after {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 40;
    background:
        radial-gradient(120% 90% at 50% 40%, transparent 62%, rgba(0,0,0,.32) 100%),
        repeating-linear-gradient(0deg, rgba(0,0,0,.08) 0 1px, transparent 1px 3px);
}

.hud {
    display: flex; flex-wrap: wrap;
    border: 1px solid #3a322a; border-radius: .5rem;
    background: linear-gradient(#241f1a, #171310);
    padding: .45rem .8rem; gap: 1.4rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 3px 10px rgba(0,0,0,.4);
}
.gauge { display: inline-flex; flex-direction: column; line-height: 1.2; }
.gauge-label { font-size: .56rem; letter-spacing: .24em; color: #8a7a64; }
.gauge-value { color: var(--fg); font-size: .95rem; }
.gauge-value.hud-title { color: var(--amber); }
.hud .lang-toggle { margin-left: auto; align-self: center; font-size: .75rem; padding: .2rem .6rem; }

.tabs button {
    background: linear-gradient(#182c1f, #0d1a12);
    border: 1px solid #2c4436; border-bottom-width: 3px;
    border-radius: .25rem .25rem .35rem .35rem;
    letter-spacing: .08em;
}
.tabs button:hover:not(:disabled) { background: linear-gradient(#1d3826, #102217); border-color: var(--fg); }
.tabs .active {
    color: var(--amber); border-color: var(--amber); border-bottom-width: 2px;
    transform: translateY(1px);
    box-shadow: 0 0 8px rgba(255,200,87,.25), inset 0 0 6px rgba(255,200,87,.12);
}

.viewport {
    border: 1px solid #2a241d; border-radius: .5rem;
    background: rgba(9, 16, 11, .4);
    padding: .6rem .9rem 1.1rem;
}
.viewport-label {
    display: flex; justify-content: space-between;
    font-size: .62rem; letter-spacing: .25em; color: #8a7a64;
    border-bottom: 1px solid #2a241d; padding-bottom: .35rem; margin-bottom: .7rem;
}

.starmap {
    background:
        repeating-linear-gradient(0deg, rgba(143,240,164,.05) 0 1px, transparent 1px 40px),
        repeating-linear-gradient(90deg, rgba(143,240,164,.05) 0 1px, transparent 1px 40px),
        radial-gradient(100% 100% at 50% 50%, #0a1a10 0%, #050d08 100%);
    border: 1px solid #3a322a; border-radius: .4rem;
}

.encounter {
    background: radial-gradient(120% 100% at 50% 0%, #1a0a0c 0%, #0c0507 80%);
    border-radius: .5rem;
    box-shadow: inset 0 0 30px rgba(255,107,107,.08);
}
.encounter h2 { animation: alert-blink 1.4s steps(1) infinite; }
@keyframes alert-blink { 50% { opacity: .55; } }

.boot-lines { color: var(--dim); font-size: .78rem; letter-spacing: .18em; }
.boot-lines span { display: block; opacity: 0; animation: boot-in .01s forwards; }
.boot-lines span:nth-child(1) { animation-delay: .25s; }
.boot-lines span:nth-child(2) { animation-delay: .7s; }
.boot-lines span:nth-child(3) { animation-delay: 1.25s; }
@keyframes boot-in { to { opacity: 1; } }
.title-screen h1 {
    text-shadow: 0 0 18px rgba(143,240,164,.35);
    animation: power-on 1.1s ease-out;
}
@keyframes power-on {
    0% { opacity: 0; transform: scaleY(.06); filter: brightness(3); }
    45% { transform: scaleY(1.03); }
    100% { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .encounter h2, .title-screen h1 { animation: none; }
    .boot-lines span { animation: none; opacity: 1; }
}

/* ---- the holo-table ---- */
.holo-controls { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.holo-controls .map-hint { margin-left: auto; font-size: .75rem; }
.holo-scene {
    perspective: 1100px; overflow: auto; max-height: 62vh;
    border: 1px solid #3a322a; border-radius: .4rem;
    background: radial-gradient(120% 120% at 50% 30%, #081409 0%, #040a05 80%);
    display: grid; padding: 2.5rem 1.5rem;
}
.holo-plane {
    position: relative; transform-style: preserve-3d;
    margin: auto;   /* scroll-safe centering: grid place-items center clips the top when zoomed past the container */
    transform: rotateX(55deg);
    transition: transform .5s ease;
    background:
        repeating-linear-gradient(0deg, rgba(143,240,164,.09) 0 1px, transparent 1px 24px),
        repeating-linear-gradient(90deg, rgba(143,240,164,.09) 0 1px, transparent 1px 24px),
        radial-gradient(100% 100% at 50% 50%, rgba(143,240,164,.06), transparent 75%);
    border: 1px solid rgba(143,240,164,.3);
    box-shadow: 0 0 40px rgba(143,240,164,.08);
}
.holo-plane.flat { transform: rotateX(0deg); }
.holo-ring {
    position: absolute; border: 1px dashed rgba(78,138,98,.7); border-radius: 50%;
    pointer-events: none;
}
.holo-site { position: absolute; width: 0; height: 0; transform-style: preserve-3d; }
.holo-pin {
    position: absolute; bottom: 0; left: 0; width: 1px;
    background: linear-gradient(to top, rgba(143,240,164,.45), rgba(143,240,164,.05));
    transform-origin: bottom center; transform: rotateX(-90deg);
    pointer-events: none;
}
.holo-star {
    position: absolute; left: -6px; top: -6px; width: 12px; height: 12px;
    padding: 0; border-radius: 50%; cursor: pointer;
    border: 1px solid var(--star, #8ff0a4);
    background: radial-gradient(circle at 35% 35%, #ffffff 0%, var(--star, #8ff0a4) 45%, rgba(0,0,0,.6) 100%);
    box-shadow: 0 0 8px var(--star, #8ff0a4);
}
.holo-star.faction-TCA { --star: #6ea8ff; }
.holo-star.faction-SiriusCompact { --star: #ffc857; }
.holo-star.faction-FrontierFreeholds { --star: #8ff0a4; }
.holo-star.faction-KuiperSyndicates { --star: #ff6b6b; }
.holo-star.faction-AndromedanFederation { --star: #c9a0ff; }
.holo-star.current { width: 16px; height: 16px; left: -8px; top: -8px; --star: #ffc857; }
.holo-star.unreachable { opacity: .4; box-shadow: none; }
.holo-star.selected { outline: 2px solid #fff; outline-offset: 2px; }
.holo-star:hover:not(:disabled) { background: radial-gradient(circle at 35% 35%, #ffffff 0%, var(--star, #8ff0a4) 45%, rgba(0,0,0,.6) 100%); border-color: #fff; }
.holo-name {
    position: absolute; left: 9px; top: -7px; font-size: 10px;
    color: var(--dim); white-space: nowrap; pointer-events: none;
    text-shadow: 0 0 4px #000;
}
.holo-event-ring, .holo-mission-ring {
    position: absolute; border-radius: 50%; pointer-events: none;
}
.holo-event-ring {
    left: -14px; top: -14px; width: 28px; height: 28px;
    border: 1px dashed var(--amber);
}
.holo-mission-ring {
    left: -19px; top: -19px; width: 38px; height: 38px;
    border: 1px solid var(--amber);
    animation: pin-pulse 1.6s ease-in-out infinite;
}

.star-dossier {
    margin-top: .8rem; padding: .7rem .9rem;
    border: 1px solid var(--line); border-left: 4px solid var(--amber);
    background: var(--panel);
}
.star-dossier .dossier-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.star-dossier h3 { margin: 0; }
.dossier-stats td { padding: .15rem .9rem .15rem 0; }
.dossier-stats td:nth-child(odd) { color: #8a7a64; font-size: .68rem; letter-spacing: .18em; }
.dossier-event { color: var(--amber); margin: .25rem 0; }
button.depart {
    margin-top: .6rem; border-color: var(--amber); color: var(--amber);
    letter-spacing: .15em; padding: .5rem 1.2rem;
}
button.depart:hover:not(:disabled) { background: #1a1508; }

@media (prefers-reduced-motion: reduce) {
    .holo-plane { transition: none; }
    .holo-mission-ring { animation: none; }
}

/* ---- chart overlays: dead ships' trails in ink ---- */
.chart-locker { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .6rem; }
.locker-title { font-size: .62rem; letter-spacing: .25em; color: #8a7a64; margin-right: .3rem; }
.locker-chip { font-size: .72rem; padding: .25rem .55rem; }
.locker-chip.ink-a { color: #ffc857; border-color: #ffc857; box-shadow: 0 0 6px rgba(255,200,87,.3); }
.locker-chip.ink-b { color: #ff7edb; border-color: #ff7edb; box-shadow: 0 0 6px rgba(255,126,219,.3); }

.ink-a { --ink: #ffc857; }
.ink-b { --ink: #ff7edb; }
.holo-route {
    position: absolute; height: 0; border-top: 1px dashed var(--ink, #ffc857);
    transform-origin: left center; opacity: .75; pointer-events: none;
}
.holo-wp {
    position: absolute; width: 10px; height: 10px; margin: -5px;
    border: 1px solid var(--ink, #ffc857); border-radius: 50%;
    opacity: .8; pointer-events: none;
}
.holo-phantom {
    position: absolute; margin: -8px 0 0 -5px; color: var(--ink, #ffc857);
    font-size: 12px; text-shadow: 0 0 5px var(--ink, #ffc857);
    pointer-events: none;   /* labels live in the readout; never block a star click */
}
.holo-conflict {
    position: absolute; width: 22px; height: 22px; margin: -11px;
    border: 2px solid var(--red); border-radius: 50%; pointer-events: none;
    animation: conflict-pulse 1.2s ease-in-out infinite;
}
@keyframes conflict-pulse { 50% { opacity: .3; transform: scale(1.25); } }

.chart-readout {
    margin-top: .8rem; padding: .7rem .9rem;
    border: 1px solid var(--line); background: var(--panel);
}
.chart-readout h4 { margin: .3rem 0; font-weight: normal; letter-spacing: .1em; }
.chart-readout h4.ink-a { color: #ffc857; }
.chart-readout h4.ink-b { color: #ff7edb; }
.chart-readout .conflict-head { color: var(--red); }
.chart-readout ul.trail { list-style: none; margin: 0 0 .5rem; padding: 0; }
.chart-readout ul.trail li { padding: .12rem 0; }
.phantom-line { color: #c9a0ff; }
.conflict-line { color: var(--red); }

@media (prefers-reduced-motion: reduce) {
    .holo-conflict { animation: none; }
}

.docked-line { color: var(--amber); letter-spacing: .06em; margin: .2rem 0 .6rem; }
.exchange-footnote { font-size: .75rem; margin-top: .3rem; }

/* ---- the orrery ---- */
.holo-plane.orrery {
    background:
        radial-gradient(100% 100% at 50% 50%, rgba(255,200,87,.05), transparent 60%),
        radial-gradient(100% 100% at 50% 50%, #0a1a10 0%, #050d08 100%);
}
.holo-sun {
    position: absolute; width: 26px; height: 26px; margin: -13px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 38%, #fff8e0 0%, #ffc857 45%, #7a5410 100%);
    box-shadow: 0 0 24px rgba(255,200,87,.8), 0 0 60px rgba(255,200,87,.3);
    pointer-events: none;
}
.sun-name { color: var(--amber); }
.holo-orbit {
    position: absolute; border: 1px dashed rgba(143,240,164,.22); border-radius: 50%;
    pointer-events: none;
}
.holo-star.berth { --star: #8ff0a4; }
.holo-star.berth.current { --star: #ffc857; }

/* ---- the price ledger ---- */
.ledger-snap { border: 1px solid var(--line); background: #071b0f; padding: .45rem .6rem; margin: .4rem 0; }
.ledger-snap-head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .25rem; }
.ledger-snap-grid { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .82rem; }
.ledger-cell b { color: var(--fg); font-weight: normal; }
.delta-up { color: #8ff0a4; margin-left: .2rem; }
.delta-down { color: var(--red); margin-left: .2rem; }

/* --- The Second Chance tutorial (increment 30) --- */
.tutorial-boot {
    position: fixed; inset: 0; z-index: 50;
    display: grid; place-items: center;
    background: rgba(3, 6, 5, 0.94);
    padding: 1rem;
}
.tutorial-boot .boot-card {
    max-width: 34rem; text-align: center;
    border: 1px solid var(--amber); border-radius: 6px;
    padding: 2rem 1.6rem; background: #060a08;
    box-shadow: 0 0 40px rgba(240, 180, 90, 0.15);
}
.tutorial-boot h2 { color: var(--amber); letter-spacing: 0.14em; margin: 0.8rem 0 0.2rem; }
.tutorial-boot .navmind-name { color: #8a7a64; font-size: 0.8rem; letter-spacing: 0.08em; margin: 0 0 1rem; }
.tutorial-boot .boot-intro { line-height: 1.6; margin: 0 0 1.2rem; }
.tutorial-boot .boot-chips { display: flex; gap: 0.6rem; justify-content: center; margin-bottom: 1.4rem; }
.tutorial-boot .chip {
    border: 1px solid #3a4a44; border-radius: 3px; padding: 0.2rem 0.5rem;
    font-size: 0.72rem; letter-spacing: 0.06em; color: #8fd8c8;
}
.tutorial-boot .chip.sealed { border-color: var(--amber); color: var(--amber); }
.tutorial-boot .boot-go { border-color: var(--amber); color: var(--amber); font-weight: 600; }

.navmind {
    display: flex; gap: 0.7rem; align-items: flex-start;
    border-left: 3px solid var(--amber);
    background: rgba(240, 180, 90, 0.06);
    padding: 0.6rem 0.8rem; margin: 0.4rem 0;
}
.navmind .face { flex: none; border-radius: 50%; box-shadow: 0 0 0 1px var(--amber); }
.navmind-line { margin: 0; color: #e7d8b8; line-height: 1.5; }
.navmind-choice { display: flex; gap: 0.5rem; margin-top: 0.6rem; flex-wrap: wrap; }
.navmind-choice button { border-color: var(--amber); color: var(--amber); }