@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Mono:wght@400;700&display=swap');

:root {
    color-scheme: dark;
    --void: #000f13;
    --ink: #001a20;
    --deep: #002a31;
    --panel: #033d43;
    --teal: #20c9b5;
    --teal-bright: #71f5da;
    --orange: #ff6817;
    --yellow: #ffd447;
    --cream: #fff0bf;
    --red: #ff3f27;
    --muted: #8ba7a5;
    --line: rgba(113, 245, 218, .2);
    --shadow: rgba(0, 0, 0, .48);
    --display: 'Archivo Black', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    --mono: 'Space Mono', 'Courier New', monospace;
}

* { box-sizing: border-box; }

html { min-height: 100%; overflow-x: hidden; background: var(--void); scroll-behavior: smooth; }

body {
    min-width: 300px;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    color: var(--cream);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 11% 7%, rgba(32, 201, 181, .16), transparent 30rem),
        radial-gradient(circle at 88% 34%, rgba(255, 104, 23, .09), transparent 33rem),
        linear-gradient(150deg, #00171c 0%, #001116 48%, #001b20 100%);
}

body::before {
    content: "";
    position: fixed;
    z-index: 50;
    inset: 0;
    pointer-events: none;
    opacity: .2;
    background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(113, 245, 218, .055) 4px);
    mix-blend-mode: screen;
}

button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.site-bar {
    position: relative;
    z-index: 60;
    min-height: 66px;
    padding: .72rem clamp(1rem, 4vw, 3.5rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--line);
    background: rgba(0, 24, 29, .88);
    backdrop-filter: blur(16px);
}

.brand {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    color: var(--teal-bright);
    font-size: 1.17rem;
    font-weight: 950;
    letter-spacing: -.045em;
    text-decoration: none;
}

.brand span { color: var(--orange); }

.live-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-left: auto;
    color: #80aaa7;
    font: 850 .62rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .07em;
}

.live-pill i {
    width: .48rem;
    height: .48rem;
    border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 10px var(--teal);
    animation: status-blink 1.8s ease-in-out infinite;
}

.back-link {
    min-height: 44px;
    padding: .5rem .85rem;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 212, 71, .48);
    border-radius: 999px;
    color: var(--yellow);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-decoration: none;
    text-transform: uppercase;
    transition: .18s ease;
}

.back-link:hover { color: var(--void); background: var(--yellow); transform: rotate(-1deg); }

.page-shell {
    width: min(1260px, calc(100% - 2rem));
    margin: 0 auto;
    padding: clamp(2.2rem, 6vw, 5.4rem) 0 3rem;
}

.intro { margin: 0 0 clamp(1.6rem, 4vw, 2.8rem); }

.eyebrow, .section-kicker {
    margin: 0;
    color: var(--yellow);
    font: 950 .67rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.intro h1 {
    margin: .38rem 0 0;
    max-width: 920px;
    font-size: clamp(3.3rem, 10vw, 8.2rem);
    font-weight: 1000;
    line-height: .77;
    letter-spacing: -.085em;
    text-transform: uppercase;
    text-shadow: 0 16px 46px rgba(0, 0, 0, .5);
}

.intro h1 span { display: block; color: var(--orange); transform: translateX(clamp(.2rem, 4vw, 3.2rem)); }

.intro-copy {
    max-width: 960px;
    margin: clamp(1.3rem, 3vw, 2rem) 0 0 clamp(0rem, 4vw, 3.2rem);
    display: grid;
    grid-template-columns: 1.25fr .9fr;
    gap: 1.2rem 2rem;
    align-items: start;
}

.intro-copy p { margin: 0; color: #b8cdca; font-size: clamp(.98rem, 1.8vw, 1.15rem); line-height: 1.55; }
.intro-copy .truth-label { padding-left: 1rem; border-left: 4px solid var(--yellow); color: #7d9c9b; font-size: .83rem; }
.truth-label strong { color: var(--yellow); }

.game-console {
    position: relative;
    isolation: isolate;
    padding: clamp(.75rem, 2vw, 1.4rem);
    border: 1px solid var(--line);
    border-radius: 25px;
    background:
        linear-gradient(rgba(113, 245, 218, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(113, 245, 218, .025) 1px, transparent 1px),
        linear-gradient(145deg, rgba(3, 61, 67, .9), rgba(0, 25, 31, .97));
    background-size: 32px 32px, 32px 32px, auto;
    box-shadow:
        7px 7px 0 var(--orange),
        10px 10px 0 #000,
        0 30px 100px rgba(0, 0, 0, .5),
        inset 0 1px rgba(255,255,255,.05);
    overflow: hidden;
    rotate: -.22deg;
    transform-origin: center;
}

.console-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
    padding: .7rem .8rem;
    border: 1px solid rgba(113, 245, 218, .14);
    border-radius: 12px;
    background: rgba(0, 15, 19, .55);
}

.console-identity { min-width: 0; }
.console-identity span, .console-identity strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.console-identity span { color: var(--teal-bright); font: 900 .64rem ui-monospace, monospace; letter-spacing: .1em; }
.console-identity strong { margin-top: .18rem; color: #739896; font: 800 .56rem ui-monospace, monospace; letter-spacing: .08em; }

.console-actions { display: flex; flex: 0 0 auto; gap: .38rem; }

.utility-button, .buy-mode {
    min-width: 44px;
    min-height: 44px;
    padding: .45rem .68rem;
    border: 1px solid #315a5c;
    border-radius: 7px;
    color: var(--teal-bright);
    background: #061d22;
    font: 900 .58rem ui-monospace, monospace;
    letter-spacing: .05em;
    cursor: pointer;
    transition: .15s ease;
}

.utility-button:hover, .buy-mode:hover { border-color: var(--yellow); color: var(--yellow); transform: translateY(-1px); }
.danger-button { color: #ff927e; }

.stats {
    display: grid;
    grid-template-columns: 1.15fr repeat(3, 1fr);
    gap: .65rem;
    margin-bottom: .75rem;
}

.stat {
    min-width: 0;
    padding: .76rem .85rem;
    border: 1px solid rgba(113, 245, 218, .15);
    border-radius: 12px;
    background: rgba(0, 15, 19, .58);
}

.stat > span { display: block; overflow: hidden; color: var(--muted); font-size: .6rem; font-weight: 900; letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.stat > strong { display: block; overflow: hidden; margin-top: .1rem; color: var(--yellow); font: 950 clamp(1.05rem, 2.3vw, 1.55rem) ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
.stat-main > strong { color: var(--cream); }
.stat strong b { font: inherit; }
.stat strong em { margin-left: .2rem; color: #7ca09e; font-size: .55em; font-style: normal; }
.stat small { display: block; min-height: .78rem; margin-top: .1rem; overflow: hidden; color: #638381; font-size: .54rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }

.active-effects {
    margin: 0 0 .75rem;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.effect-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .55rem;
    border: 1px solid rgba(255, 212, 71, .35);
    border-radius: 999px;
    color: var(--yellow);
    background: rgba(35, 28, 0, .65);
    font: 850 .58rem ui-monospace, monospace;
}
.effect-chip.bad { border-color: rgba(255, 63, 39, .45); color: #ff927e; background: rgba(55, 8, 3, .63); }

.game-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, .85fr); gap: .75rem; align-items: stretch; }

.rack-bay, .store, .ledger, .achievements {
    border: 1px solid rgba(113, 245, 218, .15);
    border-radius: 17px;
    background: rgba(0, 17, 21, .69);
}

.rack-bay { min-width: 0; padding: clamp(.8rem, 2vw, 1.2rem); }

.rack-heading, .store-head, .lower-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
}

.rack-heading h3, .store-head h3, .lower-heading h3 {
    margin: .12rem 0 0;
    color: var(--cream);
    font-size: clamp(1rem, 2vw, 1.3rem);
    line-height: 1;
    letter-spacing: -.025em;
    text-transform: uppercase;
}

.save-state { color: #719592; font: 800 .55rem ui-monospace, monospace; letter-spacing: .07em; text-align: right; }
.save-state.saving { color: var(--yellow); }

.rack-wrap { position: relative; padding: clamp(.3rem, 1vw, .55rem) 0; }

.rack-button {
    position: relative;
    width: 100%;
    min-height: clamp(280px, 33vw, 392px);
    display: grid;
    grid-template-columns: 28px 1fr 28px;
    align-items: stretch;
    padding: 0;
    border: 0;
    border-radius: 15px;
    color: var(--cream);
    background: transparent;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    filter: drop-shadow(0 20px 28px rgba(0,0,0,.42));
    transition: filter .15s, transform .06s;
}

.rack-button:hover { filter: drop-shadow(0 20px 34px rgba(32,201,181,.2)); }
.rack-button:active, .rack-button.pressed { transform: translateY(4px) scale(.992); }
.rack-button:focus-visible { outline-offset: 5px; }

.rack-ear {
    position: relative;
    margin: 17px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    padding: 14px 0;
    border: 2px solid #49686a;
    background: linear-gradient(90deg, #1c3032, #456064 50%, #132426);
    box-shadow: inset 0 0 0 2px #091719;
}
.rack-ear-left { border-radius: 10px 0 0 10px; border-right: 0; }
.rack-ear-right { border-radius: 0 10px 10px 0; border-left: 0; }
.rack-ear i { width: 9px; height: 9px; border: 2px solid #061215; border-radius: 50%; background: #758688; box-shadow: inset 0 0 0 1px #b1bcbc; }

.rack-face {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(68px, .7fr) minmax(140px, 1.25fr) minmax(68px, .7fr);
    grid-template-rows: auto 1fr auto;
    gap: clamp(.5rem, 1.5vw, 1rem);
    align-items: center;
    padding: clamp(.7rem, 2vw, 1.2rem);
    border: 3px solid #5d7678;
    border-radius: 14px;
    background:
        linear-gradient(rgba(255,255,255,.025), transparent 35%),
        linear-gradient(135deg, #0c282c, #02171c 60%, #0c2a2f);
    box-shadow: inset 0 0 0 2px #001216, inset 0 0 55px rgba(0,0,0,.75), 0 0 0 1px #000;
}

.rack-face::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .22;
    background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(113,245,218,.12) 6px);
}

.rack-label-row {
    position: relative;
    z-index: 2;
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .55rem;
    border-bottom: 1px solid #234447;
    font-family: ui-monospace, monospace;
}
.rack-label-row b { color: var(--teal-bright); font-size: .66rem; letter-spacing: .1em; }
.rack-label-row small { color: #5f8584; font-size: .49rem; font-weight: 850; letter-spacing: .05em; }

.drive-bank, .vent-bank { position: relative; z-index: 2; min-width: 0; display: grid; gap: .35rem; }
.drive-bank { grid-template-columns: repeat(2, 1fr); }
.drive-bank i { position: relative; height: clamp(23px, 3.3vw, 36px); border: 1px solid #315458; border-radius: 3px; background: linear-gradient(#143236, #051a1e); box-shadow: inset 0 0 8px #000; }
.drive-bank i::before { content: ""; position: absolute; left: 6px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 7px var(--teal); animation: drive-flash 2.1s steps(2) infinite; animation-delay: calc(var(--n, 0) * -.18s); }
.drive-bank i:nth-child(2n)::before { background: var(--yellow); box-shadow: 0 0 7px var(--yellow); animation-delay: -.7s; }
.drive-bank i:nth-child(3n)::before { animation-delay: -1.4s; }

.vent-bank { grid-template-columns: repeat(3, 1fr); }
.vent-bank i { aspect-ratio: 1; border: 1px solid #2e5053; border-radius: 50%; background: repeating-conic-gradient(#091b1e 0 12deg, #294145 13deg 20deg); box-shadow: inset 0 0 0 5px #031417, inset 0 0 0 7px #30494c; animation: fan-spin 3.6s linear infinite; }
.vent-bank i:nth-child(2n) { animation-direction: reverse; animation-duration: 2.8s; }

.rack-core {
    position: relative;
    z-index: 3;
    aspect-ratio: 1;
    width: min(100%, 230px);
    margin: auto;
    display: grid;
    place-content: center;
    border: clamp(5px, 1vw, 10px) solid #08282c;
    border-radius: 50%;
    background: radial-gradient(circle, #ffb719 0 7%, #e7580d 8% 14%, #143b3e 15% 41%, #03181c 42% 56%, #1c5355 57% 59%, #001318 60%);
    box-shadow: inset 0 0 26px #000, 0 0 0 2px #3a6668, 0 0 35px rgba(255,104,23,.28);
    text-align: center;
    transition: box-shadow .16s, filter .16s;
}
.rack-core::after { content: ""; position: absolute; inset: 15%; border: 2px dashed rgba(255,212,71,.48); border-radius: 50%; animation: core-turn 12s linear infinite; }
.rack-core b { position: relative; z-index: 3; font-size: clamp(1.04rem, 3vw, 1.75rem); font-weight: 1000; line-height: .86; letter-spacing: -.045em; text-shadow: 0 2px 8px #000; }
.rack-core small { position: relative; z-index: 3; margin-top: .42rem; color: var(--yellow); font: 900 clamp(.48rem, 1.2vw, .68rem) ui-monospace, monospace; letter-spacing: .04em; }
.core-rings { position: absolute; z-index: 2; inset: 5%; border-radius: 50%; }
.core-rings i { position: absolute; inset: 0; border: 1px solid rgba(113,245,218,.15); border-radius: 50%; }
.core-rings i:nth-child(2) { inset: 11%; border-color: rgba(255,212,71,.18); }
.core-rings i:nth-child(3) { inset: 24%; border-color: rgba(255,104,23,.24); }

.rack-button:hover .rack-core, .rack-button:focus-visible .rack-core { box-shadow: inset 0 0 22px #000, 0 0 0 2px var(--teal), 0 0 50px rgba(32,201,181,.38); filter: brightness(1.12); }
.rack-button.hot .rack-core { box-shadow: inset 0 0 20px #000, 0 0 0 2px var(--orange), 0 0 60px rgba(255,104,23,.55); }

.rack-legal { position: relative; z-index: 2; grid-column: 1 / -1; color: #668886; font: 800 .51rem ui-monospace, monospace; letter-spacing: .045em; text-align: center; }
kbd { padding: .08rem .25rem; border: 1px solid #4f6d6d; border-bottom-width: 2px; border-radius: 3px; color: var(--cream); background: #102529; font: 800 .82em ui-monospace, monospace; }

.float-layer { position: absolute; z-index: 10; inset: 0; overflow: hidden; pointer-events: none; }
.floater { position: absolute; translate: -50% -50%; color: var(--yellow); font: 1000 clamp(1rem, 2vw, 1.35rem) ui-monospace, monospace; text-shadow: 0 2px 0 #000, 0 0 12px var(--orange); animation: float-up .85s cubic-bezier(.1,.7,.2,1) forwards; }
.particle { position: absolute; width: 6px; height: 6px; translate: -50% -50%; border-radius: 1px; background: var(--yellow); box-shadow: 0 0 8px currentColor; animation: particle-pop .62s ease-out forwards; }

.excitement-meter { margin-top: .55rem; }
.meter-copy { margin-bottom: .28rem; display: flex; align-items: center; justify-content: space-between; color: #719390; font: 850 .56rem ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.meter-copy b { color: var(--teal-bright); font-size: .55rem; }
.meter-track { height: 8px; padding: 2px; border: 1px solid #2c5556; border-radius: 999px; background: #001015; overflow: hidden; }
.meter-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal), var(--yellow) 58%, var(--orange)); box-shadow: 0 0 10px var(--orange); transition: width .12s linear; }

.incident-strip {
    min-height: 72px;
    margin-top: .8rem;
    padding: .65rem .72rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .68rem;
    align-items: center;
    border: 1px solid #244c50;
    border-radius: 10px;
    background: #041c21;
    transition: border-color .2s, background .2s;
}
.incident-strip.alert { border-color: var(--orange); background: rgba(72,25,3,.45); animation: incident-pulse .5s ease-out 2; }
.incident-icon { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #3a6969; border-radius: 8px; color: var(--teal-bright); background: #08282d; font: 1000 1rem ui-monospace, monospace; }
.incident-strip.alert .incident-icon { border-color: var(--orange); color: var(--yellow); background: #4a1b04; }
.incident-strip div:nth-child(2) { min-width: 0; }
.incident-strip small, .incident-strip strong, .incident-strip span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.incident-strip small { color: var(--orange); font: 850 .49rem ui-monospace, monospace; letter-spacing: .1em; }
.incident-strip strong { margin-top: .1rem; font-size: .72rem; }
.incident-strip span { margin-top: .12rem; color: #7d9c9a; font-size: .61rem; }
.incident-strip > b { color: var(--yellow); font: 850 .56rem ui-monospace, monospace; text-align: right; }

.controls-note { margin: .65rem .1rem 0; color: #5e7f7e; font-size: .58rem; line-height: 1.5; text-align: center; }

.store { min-width: 0; padding: clamp(.8rem, 2vw, 1.1rem); }
.store-head { align-items: center; }
.buy-modes { display: flex; gap: .25rem; }
.buy-mode { min-width: 44px; min-height: 44px; padding: .3rem .44rem; color: #769895; }
.buy-mode.active { border-color: var(--yellow); color: var(--void); background: var(--yellow); }
.store-intro { margin: -.15rem 0 .75rem; color: #789794; font-size: .68rem; line-height: 1.4; }

.upgrade-list { max-height: 640px; padding-right: .2rem; display: grid; gap: .42rem; overflow-y: auto; scrollbar-color: #315b5b #06191d; scrollbar-width: thin; }
.upgrade-card {
    position: relative;
    width: 100%;
    min-height: 78px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: .6rem;
    align-items: center;
    padding: .55rem .58rem;
    border: 1px solid #24494c;
    border-radius: 10px;
    color: var(--cream);
    background: linear-gradient(110deg, #08262a, #031a1e);
    text-align: left;
    cursor: pointer;
    transition: .14s ease;
}
.upgrade-card:hover:not(:disabled) { border-color: var(--teal); transform: translateX(-2px); background: #0a3033; }
.upgrade-card.affordable { border-color: rgba(255,212,71,.48); box-shadow: inset 3px 0 var(--yellow); }
.upgrade-card:disabled { cursor: not-allowed; opacity: .55; }
.upgrade-card:focus-visible { outline-offset: 1px; }
.upgrade-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #31595b; border-radius: 8px; color: var(--yellow); background: #001419; font-size: 1.25rem; }
.upgrade-copy { min-width: 0; }
.upgrade-copy strong { display: flex; align-items: baseline; gap: .35rem; font-size: .73rem; line-height: 1.1; }
.upgrade-copy strong i { color: var(--orange); font: 900 .54rem ui-monospace, monospace; font-style: normal; }
.upgrade-copy span { display: block; margin-top: .18rem; color: #7e9c99; font-size: .57rem; line-height: 1.26; }
.upgrade-copy small { display: block; margin-top: .18rem; color: var(--teal-bright); font: 800 .5rem ui-monospace, monospace; }
.upgrade-price { min-width: 66px; color: var(--yellow); font: 900 .66rem ui-monospace, monospace; text-align: right; }
.upgrade-price small { display: block; margin-top: .12rem; color: #657f7e; font-size: .48rem; }

.lower-grid { margin-top: .75rem; display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.ledger, .achievements { min-width: 0; padding: clamp(.8rem, 2vw, 1.1rem); }
.lower-heading > span { color: #6e918f; font: 800 .54rem ui-monospace, monospace; letter-spacing: .07em; }

.event-log { height: 150px; margin: 0; padding: 0; list-style: none; overflow-y: auto; scrollbar-color: #315b5b #06191d; scrollbar-width: thin; }
.event-log li { padding: .42rem .15rem; display: grid; grid-template-columns: 4.1rem 1fr; gap: .5rem; border-top: 1px solid rgba(113,245,218,.1); color: #87a29f; font-size: .64rem; line-height: 1.35; }
.event-log time { color: var(--orange); font: 800 .55rem ui-monospace, monospace; }
.event-log li.good span { color: var(--teal-bright); }
.event-log li.bad span { color: #ff927e; }

.achievement-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: .42rem; }
.achievement-badge { position: relative; min-width: 0; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid #27494c; border-radius: 9px; color: #426361; background: #04181d; filter: grayscale(1); opacity: .52; }
.achievement-badge span { font-size: clamp(1rem, 3vw, 1.45rem); }
.achievement-badge[title] { cursor: help; }
.achievement-badge.unlocked { border-color: rgba(255,212,71,.58); color: var(--yellow); background: radial-gradient(circle, rgba(255,104,23,.17), #09272a); filter: none; opacity: 1; box-shadow: inset 0 -3px rgba(255,104,23,.35); }
.achievement-badge.new { animation: badge-pop .7s cubic-bezier(.2,.9,.3,1.4); }
.achievement-note { margin: .6rem 0 0; color: #668583; font-size: .56rem; line-height: 1.4; }
.achievement-note b { color: var(--yellow); }

.fine-print {
    margin: 1rem 0 0;
    padding: .85rem 1rem;
    border-left: 5px solid var(--orange);
    color: #76918f;
    background: rgba(0,20,24,.65);
    font-size: .68rem;
    line-height: 1.55;
}
.fine-print strong { color: var(--orange); }

.modal {
    width: min(560px, calc(100% - 1.5rem));
    max-height: calc(100vh - 1.5rem);
    padding: 0;
    border: 1px solid rgba(113,245,218,.3);
    border-radius: 18px;
    color: var(--cream);
    background: transparent;
    box-shadow:
        6px 6px 0 var(--orange),
        9px 9px 0 #000,
        0 30px 90px #000;
    overflow: visible;
    rotate: .28deg;
}
.modal::backdrop { background: rgba(0,9,12,.82); backdrop-filter: blur(5px); }
.modal-card { position: relative; padding: clamp(1.2rem, 5vw, 2.25rem); border-radius: inherit; background: linear-gradient(145deg, #073b40, #00161b 78%); overflow: hidden; }
.modal-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .16; background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(113,245,218,.1) 5px); }
.modal-icon { position: relative; width: 64px; height: 64px; margin-bottom: 1rem; display: grid; place-items: center; border: 2px solid var(--orange); border-radius: 14px; color: var(--yellow); background: #401601; font-size: 2rem; transform: rotate(-3deg); box-shadow: 7px 7px 0 rgba(255,104,23,.2); }
.modal-icon.bad { border-color: var(--red); color: #ff927e; background: #390805; }
.modal h2 { position: relative; margin: .25rem 0 .65rem; font-size: clamp(1.65rem, 5vw, 2.5rem); line-height: .94; letter-spacing: -.05em; text-transform: uppercase; }
.modal p:not(.section-kicker) { position: relative; margin: 0; color: #9bb3b1; font-size: .86rem; line-height: 1.55; }
.modal-stamp { position: absolute; z-index: 2; top: 1.3rem; right: -1.3rem; padding: .42rem 2rem; color: var(--void); background: var(--yellow); font: 1000 .62rem ui-monospace, monospace; letter-spacing: .08em; transform: rotate(5deg); }
.modal-foot { position: relative; display: block; margin-top: .8rem; color: #5e807e; font-size: .55rem; text-align: center; }

.event-choices { position: relative; margin-top: 1.1rem; display: grid; gap: .55rem; }
.event-choice { width: 100%; padding: .75rem .85rem; display: grid; grid-template-columns: 1fr auto; gap: .3rem 1rem; border: 1px solid #356467; border-radius: 9px; color: var(--cream); background: #06262a; text-align: left; cursor: pointer; transition: .15s ease; }
.event-choice:hover { border-color: var(--yellow); background: #0b3537; transform: translateX(3px); }
.event-choice strong { color: var(--yellow); font-size: .75rem; text-transform: uppercase; }
.event-choice span { color: #89a6a3; font-size: .62rem; line-height: 1.35; }
.event-choice b { grid-row: 1 / 3; grid-column: 2; align-self: center; color: var(--orange); font: 950 .7rem ui-monospace, monospace; }

.offline-haul { position: relative; margin: 1rem 0; padding: 1rem; border: 1px solid rgba(255,212,71,.35); border-radius: 10px; background: rgba(45,35,0,.35); text-align: center; }
.offline-haul span, .offline-haul strong, .offline-haul small { display: block; }
.offline-haul span { color: #839f9c; font: 800 .56rem ui-monospace, monospace; letter-spacing: .1em; }
.offline-haul strong { margin: .25rem 0; color: var(--yellow); font: 1000 clamp(1.6rem, 7vw, 2.7rem) ui-monospace, monospace; }
.offline-haul small { color: #738e8c; font-size: .58rem; }

.modal-primary, .modal-secondary, .modal-danger { position: relative; min-height: 46px; padding: .7rem 1rem; border-radius: 8px; font-size: .7rem; font-weight: 950; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.modal-primary { width: 100%; border: 0; color: var(--void); background: var(--yellow); }
.reset-actions { position: relative; margin-top: 1.2rem; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.modal-secondary { border: 1px solid #466464; color: var(--cream); background: #092428; }
.modal-danger { border: 1px solid var(--red); color: #fff; background: #9d1b0d; }

.toast {
    position: fixed;
    z-index: 100;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    width: min(390px, calc(100% - 2rem));
    padding: .78rem .9rem;
    border: 1px solid var(--yellow);
    border-radius: 9px;
    color: var(--void);
    background: var(--yellow);
    box-shadow: 8px 8px 0 rgba(255,104,23,.5), 0 14px 40px #000;
    font-size: .7rem;
    font-weight: 900;
    line-height: 1.35;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(150%);
    transition:
        transform .25s cubic-bezier(.2,.8,.2,1),
        opacity .18s ease,
        visibility 0s linear .25s;
}
.toast.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
}
.toast.bad { border-color: #ff927e; color: #fff; background: #9d1b0d; box-shadow: 8px 8px 0 #4a0803, 0 14px 40px #000; }

.game-console.impact { animation: console-impact .22s ease-out; }
.game-console.bad-event { animation: bad-shake .45s ease-out; }

@keyframes status-blink { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes drive-flash { 0%, 65% { opacity: .22; } 66%, 75% { opacity: 1; } 76%, 100% { opacity: .35; } }
@keyframes fan-spin { to { transform: rotate(1turn); } }
@keyframes core-turn { to { transform: rotate(1turn); } }
@keyframes float-up { 0% { opacity: 0; transform: translateY(10px) scale(.7) rotate(-4deg); } 18% { opacity: 1; } 100% { opacity: 0; transform: translateY(-90px) scale(1.18) rotate(4deg); } }
@keyframes particle-pop { from { opacity: 1; transform: translate(0,0) rotate(0); } to { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(240deg); } }
@keyframes incident-pulse { 50% { transform: scale(1.008); box-shadow: 0 0 22px rgba(255,104,23,.3); } }
@keyframes badge-pop { 0% { transform: scale(.3) rotate(-20deg); } 55% { transform: scale(1.2) rotate(5deg); } 100% { transform: scale(1); } }
@keyframes console-impact { 50% { filter: brightness(1.15); } }
@keyframes bad-shake { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }

@media (max-width: 960px) {
    .game-grid { grid-template-columns: 1fr; }
    .upgrade-list { max-height: none; grid-template-columns: 1fr 1fr; }
    .intro-copy { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
    .site-bar { min-height: 58px; padding: .6rem .8rem; }
    .live-pill { display: none; }
    .back-link { padding: .45rem .62rem; font-size: .61rem; }
    .page-shell { width: min(100% - 1rem, 1260px); padding-top: 2.2rem; }
    .intro h1 { font-size: clamp(3rem, 19vw, 5.4rem); }
    .intro h1 span { transform: none; }
    .intro-copy { margin-left: 0; grid-template-columns: 1fr; gap: .9rem; }
    .game-console {
        width: calc(100% - .75rem);
        margin-inline: auto;
        border-radius: 18px;
        box-shadow:
            4px 4px 0 var(--orange),
            7px 7px 0 #000,
            0 24px 70px rgba(0, 0, 0, .5),
            inset 0 1px rgba(255,255,255,.05);
    }
    .console-bar { align-items: flex-start; }
    .console-identity strong { max-width: 30vw; }
    .utility-button { min-height: 44px; padding: .4rem .5rem; font-size: .51rem; }
    .stats { grid-template-columns: 1fr 1fr; }
    .stat { padding: .62rem .67rem; }
    .stat small {
        min-height: 2.4em;
        overflow: visible;
        line-height: 1.2;
        text-overflow: clip;
        white-space: normal;
    }
    .rack-button { min-height: 290px; grid-template-columns: 19px 1fr 19px; }
    .rack-face { grid-template-columns: minmax(50px,.55fr) minmax(120px,1.25fr) minmax(50px,.55fr); padding: .65rem .45rem; gap: .38rem; }
    .rack-ear { margin: 13px 0; }
    .rack-label-row small { display: none; }
    .drive-bank { grid-template-columns: 1fr; }
    .drive-bank i:nth-child(n+5) { display: none; }
    .vent-bank { grid-template-columns: 1fr 1fr; }
    .vent-bank i:nth-child(n+5) { display: none; }
    .rack-legal { font-size: .42rem; }
    .incident-strip { grid-template-columns: auto 1fr; }
    .incident-strip > b { grid-column: 2; text-align: left; }
    .incident-strip strong, .incident-strip span { white-space: normal; }
    .upgrade-list { grid-template-columns: 1fr; }
    .lower-grid { grid-template-columns: 1fr; }
    .achievement-list { gap: .35rem; }
}

@media (max-width: 400px) {
    .console-identity { display: none; }
    .console-bar { justify-content: flex-end; }
    .stats { gap: .4rem; }
    .stat small { font-size: .49rem; }
    .rack-bay { padding: .58rem; }
    .rack-heading { padding: 0 .15rem; }
    .rack-button { min-height: 265px; }
    .rack-face { grid-template-columns: 45px minmax(112px,1fr) 45px; }
    .rack-core b { font-size: .92rem; }
    .rack-legal { padding: 0 .2rem; }
    .upgrade-card { grid-template-columns: 37px minmax(0,1fr) auto; gap: .45rem; }
    .upgrade-icon { width: 37px; height: 37px; }
    .reset-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Corporate parentage is now visible from across the incident room. */
body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        linear-gradient(rgba(113, 245, 218, .027) 1px, transparent 1px) 0 0 / 36px 36px,
        linear-gradient(90deg, rgba(113, 245, 218, .027) 1px, transparent 1px) 0 0 / 36px 36px,
        radial-gradient(circle at 11% 7%, rgba(32, 201, 181, .16), transparent 30rem),
        radial-gradient(circle at 88% 34%, rgba(255, 104, 23, .09), transparent 33rem),
        var(--void);
}

body::after {
    content: "";
    position: fixed;
    z-index: 999;
    inset: 0;
    opacity: .14;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
    mix-blend-mode: soft-light;
}

.site-bar {
    position: sticky;
    z-index: 60;
    top: 0;
    min-height: 76px;
    border-bottom: 2px solid var(--line);
    background: rgba(0, 15, 19, .9);
}

.brand { gap: .65rem; color: var(--cream); font-family: var(--display); }
.brand .brand-emblem {
    position: relative;
    width: 52px;
    height: 40px;
    flex: 0 0 auto;
    display: block;
    color: #020808;
    border: 2px solid #020808;
    border-radius: 48% 52% 44% 56% / 57% 43% 55% 45%;
    background: linear-gradient(135deg, var(--teal) 0 53%, var(--yellow) 54% 100%);
    box-shadow: 3px 3px 0 var(--orange), inset 0 0 0 2px rgba(255, 240, 191, .35);
    transform: rotate(-4deg);
}
.brand .brand-emblem::after { content: ""; position: absolute; inset: 4px; border: 1px dashed rgba(0, 15, 19, .5); border-radius: inherit; }
.brand .brand-emblem i { position: absolute; z-index: 1; top: 50%; font: normal 1.15rem/1 "Apple Color Emoji", "Segoe UI Emoji", sans-serif; transform: translateY(-50%); }
.brand .brand-emblem i:first-child { left: 5px; }
.brand .brand-emblem i:last-child { right: 4px; }
.brand .brand-copy { display: grid; gap: .05rem; color: var(--cream); line-height: 1; }
.brand .brand-copy b { color: var(--cream); font-size: .98rem; }
.brand .brand-copy small { color: var(--muted); font: 700 .47rem/1.2 var(--mono); letter-spacing: .035em; text-transform: uppercase; }

.back-link { border: 2px solid #020808; border-radius: 2px; box-shadow: 3px 3px 0 var(--orange); font-family: var(--mono); }
.intro h1, .modal-card h2 { font-family: var(--display); font-weight: 400; }
.eyebrow, .section-kicker, .live-pill, .console-identity, .stat, .save-state, .controls-note, .event-log, .lower-heading > span { font-family: var(--mono); }

.frame-tape {
    position: relative;
    z-index: 8;
    width: max-content;
    max-width: calc(100% - 2rem);
    margin: -2rem 0 .9rem .7rem;
    padding: .4rem .74rem;
    overflow-wrap: anywhere;
    color: #020808;
    background: var(--yellow);
    border: 2px solid #020808;
    box-shadow: 3px 3px 0 var(--orange);
    font: 700 .58rem/1.25 var(--mono);
    letter-spacing: .055em;
    transform: rotate(-1.35deg);
}

.game-console {
    overflow: visible;
    border: 2px solid #020808;
    border-radius: 4px;
    outline: 1px solid var(--line);
    outline-offset: -5px;
    box-shadow: 7px 7px 0 var(--orange), 10px 10px 0 #000, 0 30px 100px rgba(0, 0, 0, .5);
}

.console-bar,
.stat,
.rack-bay,
.store,
.ledger,
.achievements,
.rack-button,
.rack-face,
.incident-strip,
.upgrade-card,
.achievement-badge,
.utility-button,
.buy-mode,
.modal-card {
    border-radius: 3px;
}

.console-bar, .stat { border: 2px solid #020808; box-shadow: 3px 3px 0 rgba(32, 201, 181, .27); }
.rack-bay { border: 2px solid #020808; box-shadow: 4px 4px 0 var(--teal), 7px 7px 0 #000; transform: rotate(.12deg); }
.store { border: 2px solid #020808; box-shadow: 4px 4px 0 var(--orange), 7px 7px 0 #000; transform: rotate(-.12deg); }
.ledger { border: 2px solid #020808; box-shadow: 4px 4px 0 var(--yellow), 7px 7px 0 #000; transform: rotate(-.1deg); }
.achievements { border: 2px solid #020808; box-shadow: 4px 4px 0 var(--teal), 7px 7px 0 #000; transform: rotate(.1deg); }
.modal-card { border: 2px solid #020808; outline: 2px solid var(--orange); outline-offset: -5px; box-shadow: 6px 6px 0 var(--orange), 9px 9px 0 #000, 0 25px 90px #000; transform: rotate(-.2deg); }

@media (max-width: 680px) {
    .site-bar { min-height: 62px; }
    .brand { gap: .45rem; }
    .brand .brand-emblem { width: 43px; height: 33px; }
    .brand .brand-emblem i { font-size: .94rem; }
    .brand .brand-copy b { font-size: .8rem; }
    .brand .brand-copy small { max-width: 92px; font-size: .36rem; }
    .back-link { font-size: .51rem; }
    .frame-tape { margin: -1.2rem 0 .68rem .4rem; padding: .3rem .46rem; font-size: .43rem; }
    .game-console { border-radius: 3px; box-shadow: 4px 4px 0 var(--orange), 7px 7px 0 #000, 0 24px 70px rgba(0, 0, 0, .5); }
    .rack-bay, .store, .ledger, .achievements { transform: none; box-shadow: 3px 3px 0 var(--teal), 6px 6px 0 #000; }
}