:root {
    --ink: #0b100d;
    --bunker: #111813;
    --panel: rgba(18, 25, 20, .94);
    --panel-soft: rgba(23, 32, 25, .88);
    --line: rgba(214, 202, 168, .18);
    --line-hot: rgba(235, 176, 86, .5);
    --paper: #e8e2d3;
    --muted: #979c8e;
    --amber: #e8a74c;
    --amber-bright: #ffc267;
    --moss: #7d9b70;
    --teal: #70a99b;
    --rust: #b6603e;
    --danger: #de6854;
    --shadow: 0 20px 50px rgba(0, 0, 0, .45);
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--ink);
    color: var(--paper);
    font-family: "DM Sans", sans-serif;
}

body,
body * {
    font-family: "DM Sans", sans-serif;
}

button {
    font: inherit;
}

.hidden {
    display: none !important;
}

.game-container,
#renderCanvas,
.ui-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

#renderCanvas {
    filter: contrast(1.06) saturate(.86) sepia(.06);
    background: #101410;
}

.scene-transition {
    position: absolute;
    inset: 0;
    z-index: 45;
    display: grid;
    place-content: center;
    gap: 12px;
    pointer-events: none !important;
    opacity: 0;
    visibility: hidden;
    color: var(--amber-bright);
    background: rgba(5, 9, 6, .9);
    backdrop-filter: blur(8px);
    transition: opacity .14s ease, visibility 0s linear .14s;
}

.scene-transition.is-active {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.scene-transition small {
    font: 700 8px/1 "DM Sans", sans-serif;
    letter-spacing: .22em;
}

.scene-transition-signal {
    width: 150px;
    height: 2px;
    overflow: hidden;
    background: rgba(255, 255, 255, .08);
}

.scene-transition-signal::after {
    content: "";
    display: block;
    width: 45%;
    height: 100%;
    background: var(--amber);
    animation: loading-line .65s ease-in-out infinite;
}

body.scene-switching .room-btn {
    pointer-events: none !important;
}

.ui-overlay {
    z-index: 10;
    pointer-events: none;
    display: block;
    background:
        radial-gradient(circle at 50% 46%, transparent 30%, rgba(3, 7, 4, .2) 80%, rgba(3, 7, 4, .68) 100%),
        linear-gradient(180deg, rgba(4, 8, 5, .5), transparent 18%, transparent 72%, rgba(4, 8, 5, .72));
}

.ui-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .13;
    background-image: repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(255, 255, 255, .04) 4px);
    mix-blend-mode: overlay;
}

.ui-overlay>* {
    pointer-events: auto;
}

.bunker-hud {
    position: absolute;
    top: max(14px, env(safe-area-inset-top));
    left: 18px;
    right: 18px;
    height: 92px;
    padding: 0;
    display: grid;
    grid-template-columns: 226px minmax(480px, 1fr) auto 44px;
    gap: 12px;
    align-items: stretch;
}

.hud-brand,
.hud-clock,
.stats-container,
.stats-toggle,
.bunker-panel,
.command-deck,
.event-feed {
    border: 1px solid var(--line);
    background: linear-gradient(145deg, rgba(26, 35, 28, .95), rgba(12, 18, 14, .95));
    box-shadow: inset 0 1px rgba(255, 255, 255, .035), var(--shadow);
    backdrop-filter: blur(14px);
}

.hud-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 15px;
    border-radius: 6px 2px 2px 6px;
}

.brand-mark,
.title-badge span,
.loading-emblem {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border: 1px solid var(--line-hot);
    color: var(--amber-bright);
    font: 800 22px/1 "Barlow Condensed", sans-serif;
    letter-spacing: -.03em;
    background: radial-gradient(circle, rgba(232, 167, 76, .16), transparent 68%);
    transform: rotate(-2deg);
}

.hud-brand div {
    min-width: 0;
}

.hud-brand strong,
.hud-kicker {
    display: block;
}

.hud-brand strong {
    font: 700 18px/1.05 "Barlow Condensed", sans-serif;
    letter-spacing: .06em;
    white-space: nowrap;
}

.hud-kicker {
    margin-bottom: 5px;
    color: var(--amber);
    font: 700 10px/1 "DM Sans", sans-serif;
    letter-spacing: .22em;
}

.hud-clock {
    order: 2;
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    padding: 0 5px;
}

.hud-clock>span {
    min-width: 76px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px 16px;
    border-left: 1px solid var(--line);
}

.hud-clock small {
    color: var(--muted);
    font: 700 9px/1 "DM Sans", sans-serif;
    letter-spacing: .15em;
}

.hud-clock b {
    margin-top: 6px;
    color: var(--paper);
    font: 700 21px/1 "Barlow Condensed", sans-serif;
    letter-spacing: .03em;
}

.hud-clock .hazard-readout b {
    color: var(--amber-bright);
}

.stats-container {
    order: 1;
    width: 100%;
    margin: 0;
    padding: 11px 14px;
    display: grid;
    grid-template-columns: repeat(3, minmax(100px, 1fr));
    grid-template-rows: repeat(2, 1fr);
    gap: 6px 14px;
    border-radius: 2px;
    touch-action: auto;
}

.stats-container-2 {
    display: none !important;
}

.stats-container .stat {
    min-width: 0;
    margin: 0;
}

.stat-head {
    display: grid;
    grid-template-columns: 17px 1fr auto;
    align-items: center;
    gap: 5px;
    margin-bottom: 4px;
}

.stat-icon {
    color: var(--muted);
    font-size: 11px;
}

.stats-container .stat-label {
    margin: 0;
    color: #b6baae;
    font: 700 9px/1 "DM Sans", sans-serif;
    letter-spacing: .09em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-number {
    color: var(--paper);
    font: 700 11px/1 "Barlow Condensed", sans-serif;
}

.stats-container .stat-bar {
    height: 4px;
    border: 0;
    border-radius: 99px;
    background: rgba(255, 255, 255, .08);
    box-shadow: none;
}

.stats-container .stat-fill {
    border-radius: inherit;
    background-image: none;
    box-shadow: 0 0 9px currentColor;
    transition: width .45s ease;
}

.health-fill {
    color: #c7725c;
    background: #c7725c !important;
}

.hunger-fill {
    color: #d29b58;
    background: #d29b58 !important;
}

.energy-fill {
    color: #d9c76a;
    background: #d9c76a !important;
}

.happiness-fill {
    color: #8eaf79;
    background: #8eaf79 !important;
}

.hygiene-fill {
    color: #70a99b;
    background: #70a99b !important;
}

.lifestyle-fill {
    color: #a48bc1;
    background: #a48bc1 !important;
}

.stats-toggle {
    order: 3;
    position: static;
    width: 44px;
    height: 100%;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 2px 6px 6px 2px;
    color: var(--paper);
    cursor: pointer;
}

.stats-toggle:hover {
    border-color: var(--line-hot);
    background: rgba(53, 55, 39, .96);
    transform: none;
}

.stats-toggle::before {
    content: "☰";
    color: var(--paper);
    font: 700 18px/1 "DM Sans", sans-serif;
    text-shadow: 0 0 5px rgba(232, 226, 211, .24);
}

.menu-icon {
    display: none;
}

.bunker-panel {
    position: absolute;
    top: 122px;
    width: 246px;
    padding: 14px;
    border-radius: 4px;
}

.systems-panel {
    left: 18px;
}

.objective-panel {
    right: 18px;
    width: 278px;
}

.panel-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 11px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font: 700 9px/1 "DM Sans", sans-serif;
    letter-spacing: .14em;
}

.system-led {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #87b577;
    box-shadow: 0 0 9px #87b577;
    animation: signal 2.2s ease-in-out infinite;
}

.signal-bars {
    color: var(--moss);
    font-style: normal;
    letter-spacing: 2px;
}

.shelter-level {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 7px;
    margin-bottom: 13px;
}

.shelter-level>span {
    color: var(--paper);
    font: 700 11px/1 "Barlow Condensed", sans-serif;
    letter-spacing: .1em;
}

.shelter-level strong {
    color: var(--amber-bright);
    font: 700 25px/1 "Barlow Condensed", sans-serif;
}

.xp-track,
.mini-track,
.objective-progress {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, .07);
}

.xp-track {
    grid-column: 1 / -1;
    height: 3px;
}

.xp-track i,
.mini-track i,
.objective-progress i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--amber);
    box-shadow: 0 0 9px rgba(232, 167, 76, .5);
    transition: width .45s ease;
}

.system-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
    align-items: center;
    margin: 10px 0;
}

.system-row span {
    color: #b7bcae;
    font-size: 11px;
}

.system-row b {
    color: var(--paper);
    font: 700 13px/1 "Barlow Condensed", sans-serif;
}

.system-icon {
    display: inline-block;
    width: 18px;
    color: var(--amber);
    font-style: normal;
}

.mini-track {
    grid-column: 1 / -1;
    height: 3px;
    border-radius: 99px;
}

#water-fill {
    background: var(--teal);
}

#integrity-fill {
    background: var(--moss);
}

.inventory-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.inventory-strip span {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 5px;
    align-items: center;
    padding: 7px 5px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .045);
}

.inventory-strip i {
    grid-row: 1 / 3;
    color: var(--amber);
    font-style: normal;
    font-size: 14px;
}

.inventory-strip b {
    font: 700 15px/1 "Barlow Condensed", sans-serif;
}

.inventory-strip small {
    color: var(--muted);
    font-size: 7px;
    text-transform: uppercase;
}

.objective-label {
    color: var(--amber);
    font: 700 9px/1 "DM Sans", sans-serif;
    letter-spacing: .13em;
}

.objective-panel h2 {
    margin: 7px 0 5px;
    color: var(--paper);
    font: 700 21px/1 "Barlow Condensed", sans-serif;
    letter-spacing: .02em;
}

.objective-panel>p:not(.objective-label) {
    color: #aeb2a6;
    font-size: 11px;
    line-height: 1.45;
}

.objective-progress {
    height: 24px;
    margin: 12px 0 10px;
    border: 1px solid var(--line);
}

.objective-progress i {
    background: linear-gradient(90deg, #7b925e, #a3b879);
    opacity: .65;
}

.objective-progress span {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--paper);
    font: 700 10px/1 "DM Sans", sans-serif;
}

.objective-reward,
.streak-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.objective-reward {
    padding: 8px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.objective-reward span,
.streak-line>span {
    color: var(--muted);
    font: 700 8px/1 "DM Sans", sans-serif;
    letter-spacing: .13em;
}

.objective-reward b {
    color: var(--amber-bright);
    font: 600 10px/1 "DM Sans", sans-serif;
}

.streak-line {
    margin-top: 10px;
}

.streak-line b {
    color: #bcc2b2;
    font: 700 9px/1 "DM Sans", sans-serif;
}

.streak-pips {
    display: flex;
    gap: 3px;
}

.streak-pips i {
    width: 11px;
    height: 4px;
    background: rgba(255, 255, 255, .09);
}

.streak-pips i.active {
    background: var(--amber);
    box-shadow: 0 0 5px rgba(232, 167, 76, .5);
}

.event-feed {
    position: absolute;
    left: 50%;
    bottom: 145px;
    transform: translateX(-50%);
    width: min(560px, 42vw);
    /* 46px so the stretched logbook toggle inside clears the WCAG 2.5.5 44px
       minimum after the bar's 1px borders are subtracted. The toggle can't
       simply overflow the bar — overflow:hidden would clip it. */
    min-height: 46px;
    display: flex;
    align-items: stretch;
    gap: 11px;
    padding: 0 12px;
    border-radius: 2px;
}

/* Children were vertically centred by the flex container before; with
   align-items:stretch they centre their own text instead. */
.event-feed > .feed-tag,
.event-feed > p {
    display: flex;
    align-items: center;
}

.feed-tag {
    color: var(--amber);
    font: 700 8px/1 "DM Sans", sans-serif;
    letter-spacing: .16em;
}

.event-feed p {
    margin: 0;
    color: #bfc3b7;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.command-deck {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: max(14px, env(safe-area-inset-bottom));
    min-height: 116px;
    padding: 10px;
    display: grid;
    grid-template-columns: minmax(260px, 28fr) minmax(400px, 32fr) minmax(390px, 40fr);
    gap: 10px;
    border-radius: 5px;
    width: auto !important;
}

.room-buttons,
.action-buttons,
.survival-actions {
    display: grid;
    min-width: 0;
    gap: 8px;
}

.room-buttons {
    grid-template-columns: repeat(3, 1fr);
}

.action-buttons {
    grid-template-columns: repeat(7, minmax(64px, 1fr));
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
}

.survival-actions {
    grid-template-columns: repeat(4, 1fr);
}

.command-deck button {
    position: relative;
    min-width: 0;
    min-height: 92px;
    padding: 9px 5px 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #b7bcaf;
    border: 1px solid rgba(214, 202, 168, .1);
    border-radius: 3px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .012));
    cursor: pointer;
    transition: border-color .2s, color .2s, background .2s, transform .2s;
}

.command-deck button::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 4px;
    height: 1px;
    background: transparent;
    transition: background .2s;
}

.command-deck button:hover:not(:disabled) {
    color: var(--paper);
    border-color: var(--line-hot);
    background: rgba(232, 167, 76, .08);
    transform: translateY(-2px);
}

.command-deck button:hover:not(:disabled)::after,
.room-btn.active::after,
.expedition-btn::after {
    background: var(--amber);
}

.command-deck button:disabled {
    opacity: .28 !important;
    cursor: not-allowed !important;
    filter: grayscale(1);
}

.command-deck button>span {
    color: var(--amber);
    font: 500 22px/1 "Barlow Condensed", sans-serif;
}

.command-deck button small {
    color: inherit;
    font: 700 9px/1 "Barlow Condensed", sans-serif;
    letter-spacing: .08em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.command-deck button em {
    color: #757d72;
    font: 500 7px/1 "DM Sans", sans-serif;
}

.room-btn.active {
    color: var(--paper);
    border-color: rgba(125, 155, 112, .5);
    background: rgba(125, 155, 112, .09);
}

.room-btn.active>span {
    color: #9db88e;
}

.survival-actions {
    padding-left: 10px;
    border-left: 1px solid var(--line);
}

.survival-actions .expedition-btn {
    background: linear-gradient(180deg, rgba(232, 167, 76, .14), rgba(182, 96, 62, .06));
    border-color: rgba(232, 167, 76, .4);
}

.notification-list {
    top: 120px !important;
    right: 314px;
    width: 300px;
    pointer-events: none;
}

.notification-list-item,
.notification {
    border: 1px solid var(--line-hot);
    border-left: 3px solid var(--amber);
    border-radius: 2px;
    background: rgba(14, 20, 16, .94);
    color: var(--paper);
    box-shadow: var(--shadow);
    font-family: "DM Sans", sans-serif;
}

/* Title screen */
.overlay-screen.start-screen {
    z-index: 1000;
    display: block;
    padding: 0;
    overflow: hidden;
    background: #0c120e;
}

.start-screen .bg-image {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(90deg, rgba(7, 12, 8, .92) 0%, rgba(7, 12, 8, .62) 38%, rgba(7, 12, 8, .12) 68%, rgba(7, 12, 8, .42) 100%),
        linear-gradient(0deg, rgba(7, 12, 8, .7), transparent 30%),
        url('../images/bunker-cozy-hero.png');
    background-size: cover;
    background-position: center;
    filter: saturate(.86) contrast(1.05);
    transform: scale(1.015);
    animation: hero-breathe 18s ease-in-out infinite alternate;
}

.start-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 255, 255, .022) 4px);
}

.start-content {
    position: absolute;
    z-index: 2;
    left: clamp(38px, 7vw, 128px);
    top: 50%;
    transform: translateY(-57%);
    width: min(620px, 43vw);
    max-width: none;
    max-height: none;
    padding: 0;
    margin: 0;
    overflow: visible !important;
    scrollbar-width: none;
    text-align: left;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.start-content::-webkit-scrollbar {
    display: none;
}

.start-content::before {
    display: none;
}

.title-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.title-badge span {
    width: 48px;
    height: 48px;
}

.title-badge i {
    width: 64px;
    height: 1px;
    background: var(--line-hot);
}

.start-eyebrow {
    color: var(--amber-bright) !important;
    font: 700 11px/1 "DM Sans", sans-serif !important;
    letter-spacing: .27em !important;
}

.start-content h1 {
    margin: 14px 0 12px;
    color: #eee9dc;
    font: 800 clamp(66px, 7vw, 118px)/.74 "Barlow Condensed", sans-serif;
    letter-spacing: -.035em;
    text-shadow: 0 8px 34px rgba(0, 0, 0, .5);
}

.start-content h1::after {
    display: none;
}

.start-content h1 span {
    color: var(--amber);
}

.start-content .start-lead {
    max-width: 500px;
    margin: 22px 0 16px;
    color: #d7d3c7;
    font: 500 clamp(17px, 1.45vw, 23px)/1.35 "DM Sans", sans-serif;
    letter-spacing: -.02em;
}

.feature-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 18px 0;
}

.feature-pills>span {
    padding: 7px 10px;
    color: #b5bbaa;
    background: rgba(12, 18, 14, .55);
    border: 1px solid var(--line);
    font-size: 9px;
    letter-spacing: .04em;
    backdrop-filter: blur(8px);
}

.feature-pills>span,
.feature-pills>span>span {
    font-family: "DM Sans", sans-serif;
}

.start-content .game-tip {
    width: 430px;
    max-width: 100%;
    padding: 0 0 0 11px;
    border: 0;
    border-left: 2px solid var(--amber);
    border-radius: 0;
    color: #8f978a;
    background: transparent;
    box-shadow: none;
    font: 500 10px/1.55 "DM Sans", sans-serif;
}

.start-buttons {
    position: absolute;
    z-index: 3;
    left: clamp(38px, 7vw, 128px);
    bottom: clamp(54px, 8vh, 90px);
    display: flex;
    gap: 9px;
    width: auto;
}

.start-buttons button {
    height: 48px;
    min-width: 182px;
    padding: 0 18px;
    border-radius: 2px;
    font: 700 12px/1 "DM Sans", sans-serif;
    letter-spacing: .08em;
    cursor: pointer;
    transition: .25s ease;
}

.start-buttons .primary-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    color: #18180f;
    border: 1px solid var(--amber-bright);
    background: var(--amber);
    box-shadow: 0 8px 28px rgba(232, 167, 76, .16);
}

#start-game-btn.primary-cta {
    color: #18180f !important;
    border-color: var(--amber-bright) !important;
    background: var(--amber) !important;
}

.primary-cta i {
    font-style: normal;
    font-size: 18px;
}

.start-buttons .primary-cta:hover {
    background: var(--amber-bright);
    transform: translateY(-2px);
}

#start-game-btn.primary-cta:hover {
    background: var(--amber-bright) !important;
}

.start-buttons .secondary-cta {
    color: var(--paper);
    border: 1px solid var(--line);
    background: rgba(13, 19, 15, .66);
    backdrop-filter: blur(8px);
}

#continue-game-btn.secondary-cta {
    color: var(--paper) !important;
    border-color: var(--line) !important;
    background: rgba(13, 19, 15, .82) !important;
}

.start-buttons .secondary-cta:hover {
    border-color: var(--line-hot);
    background: rgba(33, 38, 27, .86);
}

.start-footer {
    position: absolute;
    z-index: 2;
    right: 28px;
    bottom: 20px;
    color: rgba(232, 226, 211, .45);
    font: 700 8px/1 "DM Sans", sans-serif;
    letter-spacing: .18em;
}

.start-screen .language-switcher {
    position: absolute !important;
    z-index: 4 !important;
    top: 20px !important;
    right: 22px !important;
    left: auto !important;
    transform: none !important;
    color: var(--paper) !important;
    border: 1px solid var(--line) !important;
    background: rgba(12, 18, 14, .64) !important;
}

/* Modals */
.survival-modal,
.settings-screen {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: grid;
    place-items: center;
    padding: 24px;
}

.modal-backdrop,
.settings-screen::before {
    position: absolute;
    inset: 0;
    content: "";
    background: rgba(3, 7, 4, .76);
    backdrop-filter: blur(8px);
}

.survival-modal-card,
.settings-content,
.game-over-content {
    position: relative;
    z-index: 1;
    width: min(780px, 94vw);
    max-height: min(760px, 90vh);
    overflow: auto;
    padding: clamp(24px, 4vw, 42px);
    color: var(--paper);
    border: 1px solid var(--line-hot);
    border-radius: 5px;
    background: linear-gradient(145deg, rgba(28, 37, 29, .98), rgba(10, 16, 12, .99));
    box-shadow: 0 32px 100px rgba(0, 0, 0, .7), inset 0 1px rgba(255, 255, 255, .04);
}

.modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    color: var(--muted);
    border: 1px solid var(--line);
    background: transparent;
    cursor: pointer;
}

.modal-close:hover {
    color: var(--paper);
    border-color: var(--line-hot);
}

.modal-kicker {
    margin: 0 0 9px;
    color: var(--amber) !important;
    font: 700 9px/1 "DM Sans", sans-serif !important;
    letter-spacing: .2em;
}

.survival-modal-card h2 {
    margin: 0;
    font: 700 clamp(30px, 4vw, 46px)/1 "Barlow Condensed", sans-serif;
}

.modal-copy {
    margin: 12px 0 22px;
    color: #aeb4a7;
    font-size: 13px;
    line-height: 1.55;
}

.modal-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.modal-option {
    min-height: 190px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    color: var(--paper);
    border: 1px solid var(--line);
    border-radius: 3px;
    background: rgba(255, 255, 255, .025);
    cursor: pointer;
    transition: .22s ease;
}

.modal-option:hover:not(:disabled) {
    transform: translateY(-3px);
    border-color: var(--line-hot);
    background: rgba(232, 167, 76, .06);
}

.modal-option:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.option-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: 22px;
    color: var(--amber);
    border: 1px solid var(--line-hot);
    font-size: 18px;
}

.modal-option strong {
    font: 700 20px/1 "Barlow Condensed", sans-serif;
}

.modal-option p {
    margin: 8px 0;
    color: #9ea498;
    font-size: 10px;
    line-height: 1.45;
}

.modal-option em {
    margin-top: auto;
    color: var(--amber-bright);
    font: 600 9px/1.3 "DM Sans", sans-serif;
    font-style: normal;
}

.option-risk {
    display: block;
    margin-top: 9px;
    color: var(--danger);
    font: 700 8px/1 "DM Sans", sans-serif;
    letter-spacing: .1em;
}

.option-owned {
    color: var(--moss) !important;
}

.settings-content {
    width: min(500px, 94vw);
}

.settings-content h1 {
    margin-bottom: 22px;
    font: 700 38px/1 "Barlow Condensed", sans-serif;
}

.game-over-content {
    text-align: center;
}

/* Loading */
.loading-screen {
    z-index: 3000;
    background: #0b100d;
    transition: opacity .3s ease, visibility 0s linear .3s;
}

.loading-screen.is-complete {
    opacity: 0;
    visibility: hidden;
}

.loading-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .2;
    background: radial-gradient(circle, rgba(232, 167, 76, .2), transparent 35%);
}

.loading-emblem {
    position: relative;
    width: 72px;
    height: 72px;
    margin-bottom: 28px;
    font-size: 30px;
}

.loading-screen .loader {
    width: 180px;
    height: 2px;
    margin: 0 0 20px;
    border: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
}

.loading-screen .loader::after {
    content: "";
    display: block;
    width: 45%;
    height: 100%;
    background: var(--amber);
    animation: loading-line 1.4s ease-in-out infinite;
}

.loading-screen h1 {
    color: var(--paper);
    font: 700 24px/1 "Barlow Condensed", sans-serif;
    letter-spacing: .12em;
}

.loading-screen p {
    margin-top: 8px;
    color: var(--muted);
    font: 700 8px/1 "DM Sans", sans-serif;
    letter-spacing: .22em;
}

@keyframes signal {
    50% {
        opacity: .4;
    }
}

@keyframes hero-breathe {
    to {
        transform: scale(1.035);
    }
}

@keyframes loading-line {
    from {
        transform: translateX(-110%);
    }

    to {
        transform: translateX(240%);
    }
}

@media (max-width: 1360px) {
    .bunker-hud {
        grid-template-columns: 190px minmax(400px, 1fr) auto 44px;
    }

    .hud-brand {
        padding-inline: 10px;
    }

    .brand-mark {
        width: 42px;
        height: 42px;
    }

    .hud-brand strong {
        font-size: 15px;
    }

    .hud-clock>span {
        min-width: 65px;
        padding-inline: 10px;
    }

    .command-deck {
        grid-template-columns: minmax(250px, 28fr) minmax(360px, 32fr) minmax(360px, 40fr);
    }

    .command-deck button small {
        font-size: 8px;
    }

    .command-deck button em {
        display: none;
    }

    .bunker-panel {
        width: 220px;
    }

    .objective-panel {
        width: 248px;
    }

    .notification-list {
        right: 264px;
    }
}

@media (max-width: 1080px) {
    .bunker-hud {
        grid-template-columns: 1fr auto 44px;
    }

    .hud-brand {
        display: none;
    }

    .stats-container {
        grid-template-columns: repeat(3, minmax(85px, 1fr));
    }

    .systems-panel {
        width: 205px;
    }

    .objective-panel {
        display: none;
    }

    .notification-list {
        right: 18px;
    }

    .command-deck {
        grid-template-columns: minmax(220px, 34%) minmax(0, 66%);
        min-height: 112px;
    }

    .survival-actions {
        position: absolute;
        right: 10px;
        top: -60px;
        height: 52px;
        width: min(410px, 48vw);
        padding: 0;
        border: 0;
    }

    .survival-actions button {
        min-height: 52px;
        flex-direction: row;
        gap: 5px;
        padding: 4px 7px;
    }

    .survival-actions button>span {
        font-size: 15px;
    }

    .event-feed {
        bottom: 140px;
        width: 50vw;
    }
}

@media (max-width: 768px) {
    .ui-overlay {
        background: linear-gradient(180deg, rgba(5, 9, 6, .72), transparent 27%, transparent 48%, rgba(5, 9, 6, .86) 75%);
    }

    .bunker-hud {
        top: max(7px, env(safe-area-inset-top));
        left: 7px;
        right: 7px;
        height: 118px;
        display: grid;
        grid-template-columns: 1fr 38px;
        grid-template-rows: 74px 36px;
        gap: 5px;
    }

    .stats-container {
        order: 0;
        grid-column: 1 / -1;
        grid-row: 1;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        padding: 7px 9px;
        gap: 5px 10px;
    }

    .stat-head {
        margin-bottom: 3px;
    }

    .stat-icon {
        display: none;
    }

    .stat-head {
        grid-template-columns: 1fr auto;
    }

    .stats-container .stat-label {
        font-size: 7px;
    }

    .hud-clock {
        grid-column: 1;
        grid-row: 2;
        order: 0;
        justify-content: stretch;
        padding: 0;
    }

    .hud-clock>span {
        flex: 1;
        min-width: 0;
        padding: 4px 8px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .hud-clock small {
        font-size: 6px;
    }

    .hud-clock b {
        margin: 0;
        font-size: 13px;
    }

    .hud-clock>span:nth-child(3) {
        display: none;
    }

    .stats-toggle {
        grid-column: 2;
        grid-row: 2;
        order: 0;
        width: 38px;
        height: 36px;
    }

    .bunker-panel {
        display: none;
    }

    .notification-list {
        top: 130px !important;
        right: 7px;
        left: 7px;
        width: auto;
    }

    .event-feed {
        left: 7px;
        right: 7px;
        bottom: 205px;
        transform: none;
        width: auto;
        min-height: 31px;
        padding: 6px 9px;
    }

    .event-feed p {
        font-size: 8px;
    }

    .command-deck {
        left: 7px;
        right: 7px;
        bottom: max(7px, env(safe-area-inset-bottom));
        min-height: 188px;
        padding: 6px;
        grid-template-columns: 1fr;
        grid-template-rows: 39px 82px 49px;
        gap: 5px;
    }

    .room-buttons {
        grid-row: 1;
        grid-template-columns: repeat(3, 1fr);
    }

    .room-buttons button {
        min-height: 39px;
        flex-direction: row;
        gap: 6px;
        padding: 4px;
    }

    .room-buttons button>span {
        font-size: 13px;
    }

    .room-buttons button small {
        font-size: 8px;
    }

    .action-buttons {
        grid-row: 2;
        grid-template-columns: repeat(7, minmax(56px, 1fr));
        overflow-x: auto;
        overscroll-behavior: contain;
        scrollbar-width: none;
    }

    .action-buttons::-webkit-scrollbar {
        display: none;
    }

    .action-buttons button {
        width: 58px;
        min-height: 78px;
    }

    .survival-actions {
        position: static;
        grid-row: 3;
        width: auto;
        height: auto;
        grid-template-columns: repeat(4, 1fr);
    }

    .survival-actions button {
        min-height: 49px;
        flex-direction: row;
        gap: 5px;
    }

    .survival-actions button>span {
        font-size: 14px;
    }

    .survival-actions button small {
        font-size: 7px;
    }

    .start-screen .bg-image {
        background-image: linear-gradient(0deg, rgba(7, 12, 8, .94) 0%, rgba(7, 12, 8, .66) 50%, rgba(7, 12, 8, .22) 100%), url('../images/bunker-cozy-hero.png');
        background-position: 59% center;
    }

    .start-content {
        left: 24px;
        right: 24px;
        top: auto;
        bottom: 156px;
        transform: none;
        width: auto;
    }

    .title-badge,
    .feature-pills {
        display: none;
    }

    .start-content h1 {
        font-size: clamp(55px, 18vw, 78px);
    }

    .start-content .start-lead {
        margin: 17px 0 12px;
        font-size: 15px;
    }

    .start-content .game-tip {
        font-size: 9px;
    }

    .start-eyebrow {
        font-size: 8px !important;
    }

    .start-buttons {
        left: 24px;
        right: 24px;
        bottom: 48px;
        flex-direction: column;
    }

    .start-buttons button {
        width: 100%;
        height: 43px;
    }

    .start-footer {
        display: none;
    }

    .modal-options {
        grid-template-columns: 1fr;
    }

    .modal-option {
        min-height: 130px;
    }

    .option-icon {
        margin-bottom: 12px;
    }
}

@media (max-height: 650px) and (orientation: landscape) {
    .bunker-hud {
        height: 72px;
    }

    .stats-container {
        grid-template-rows: 1fr;
        grid-template-columns: repeat(6, 1fr);
    }

    .stat-secondary {
        display: block;
    }

    .bunker-panel {
        top: 98px;
    }

    .command-deck {
        min-height: 88px;
    }

    .command-deck button {
        min-height: 68px;
    }

    .event-feed {
        bottom: 116px;
    }

    .start-content {
        transform: translateY(-50%);
    }

    .start-content h1 {
        font-size: 68px;
    }

    .feature-pills,
    .start-content .game-tip {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/* Interaction hierarchy and resilient button labels */
.bunker-hud {
    z-index: 70;
}

.bunker-panel {
    z-index: 55;
}

.command-deck {
    z-index: 70;
}

.event-feed {
    z-index: 64;
    isolation: isolate;
    overflow: hidden;
    bottom: 172px;
}

.event-feed.feed-pulse {
    animation: feed-highlight .75s ease-out;
}

@keyframes feed-highlight {
    0% {
        border-color: var(--amber-bright);
        box-shadow: 0 0 0 1px rgba(232, 167, 76, .28), 0 14px 36px rgba(0, 0, 0, .5);
    }

    100% {
        border-color: var(--line);
        box-shadow: var(--shadow);
    }
}

.notification-list {
    position: absolute;
    z-index: 82 !important;
    left: auto !important;
    max-height: min(42vh, 330px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 7px;
    pointer-events: none !important;
}

.notification-list-item {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    pointer-events: none;
}

.action-btn.outside-hours::after,
.action-btn.comm-failure::after,
.action-btn.food-failure::after,
.action-btn.water-failure::after,
.action-btn.work-cooldown::after {
    content: attr(data-status-label) !important;
    height: 16px;
    padding: 3px 2px 2px;
    line-height: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ATLAS work terminal */
.retro-computer {
    isolation: isolate;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 48%, rgba(232, 167, 76, .09), transparent 34%),
        radial-gradient(circle at 50% 50%, rgba(4, 7, 5, .24), rgba(2, 4, 3, .9) 76%),
        linear-gradient(135deg, rgba(49, 61, 52, .28), rgba(4, 7, 5, .82));
}

.retro-computer::before,
.retro-computer::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.retro-computer::before {
    inset: -30%;
    opacity: .24;
    background: repeating-linear-gradient(112deg, transparent 0 68px, rgba(255, 255, 255, .025) 69px 70px);
    transform: rotate(-4deg);
}

.retro-computer::after {
    inset: 0;
    box-shadow: inset 0 0 18vw rgba(0, 0, 0, .86);
}

.main-computer {
    position: relative;
    width: min(94vw, 900px);
    height: min(94dvh, 720px);
    min-height: 540px;
    margin-top: 0;
    opacity: 0;
    transform: translateY(105vh) scale(.94);
    transition: transform .52s cubic-bezier(.2, .8, .2, 1), opacity .3s ease;
}

.main-computer.active {
    margin-top: 0;
    opacity: 1;
    transform: translateY(0) scale(1);
}

.computer-screen-details {
    width: 100%;
    max-width: none;
    height: 100%;
    overflow: hidden;
    border: 1px solid #252921;
    border-radius: 36px 36px 28px 28px;
    background:
        linear-gradient(103deg, transparent 0 19%, rgba(255, 255, 255, .045) 20%, transparent 22% 71%, rgba(0, 0, 0, .08) 72%, transparent 74%),
        repeating-linear-gradient(96deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 9px),
        linear-gradient(145deg, #777765 0%, #555947 23%, #686954 47%, #464b3e 77%, #32382f 100%);
    box-shadow:
        inset 0 0 0 4px #272c25,
        inset 0 0 0 8px rgba(171, 169, 139, .35),
        inset 0 -34px 70px rgba(18, 21, 18, .5),
        inset 12px 9px 30px rgba(255, 255, 255, .08),
        0 32px 80px rgba(0, 0, 0, .78),
        0 4px 0 #171b17;
}

.computer-screen-details::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: auto 22px 18px;
    width: auto;
    height: 21%;
    border: 1px solid rgba(14, 18, 15, .62);
    border-top-color: rgba(203, 195, 153, .2);
    border-radius: 7px 7px 17px 17px;
    background: linear-gradient(180deg, rgba(25, 30, 25, .12), rgba(22, 27, 23, .32));
    box-shadow: inset 0 1px rgba(255, 255, 255, .05), inset 0 -12px 24px rgba(0, 0, 0, .18);
    animation: none;
}

.computer-screen-details::after {
    content: "";
    position: absolute;
    z-index: 4;
    inset: 0;
    width: auto;
    height: auto;
    border: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        radial-gradient(circle at 19px 19px, #171b17 0 3px, #a4a28a 4px, transparent 6px),
        radial-gradient(circle at calc(100% - 19px) 19px, #171b17 0 3px, #a4a28a 4px, transparent 6px),
        radial-gradient(circle at 19px calc(100% - 19px), #171b17 0 3px, #777761 4px, transparent 6px),
        radial-gradient(circle at calc(100% - 19px) calc(100% - 19px), #171b17 0 3px, #777761 4px, transparent 6px);
    box-shadow: none;
    opacity: .88;
}

.computer-casing-top {
    position: absolute;
    z-index: 3;
    top: 23px;
    left: 88px;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: calc(100% - 330px);
    color: #22271f;
    text-shadow: 0 1px rgba(219, 212, 174, .22);
}

.computer-brand-mark {
    color: #22271f;
    font: 800 28px/.8 "Barlow Condensed", sans-serif;
    letter-spacing: .08em;
}

.computer-model {
    overflow: hidden;
    padding-left: 12px;
    border-left: 1px solid rgba(30, 35, 28, .38);
    font: 800 8px/1.15 "DM Sans", sans-serif;
    letter-spacing: .15em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.computer-status-bank {
    position: absolute;
    z-index: 5;
    top: 22px;
    right: 31px;
    display: flex;
    gap: 13px;
    padding: 7px 10px 6px;
    color: #20251e;
    border: 1px solid rgba(25, 29, 24, .5);
    border-top-color: rgba(220, 213, 178, .22);
    border-radius: 3px;
    background: rgba(39, 44, 36, .2);
    box-shadow: inset 0 1px rgba(255, 255, 255, .06);
}

.computer-status-bank span {
    display: flex;
    align-items: center;
    gap: 4px;
    font: 800 7px/1 "DM Sans", sans-serif;
    letter-spacing: .08em;
}

.computer-status-bank i {
    width: 7px;
    height: 7px;
    border: 1px solid rgba(18, 20, 17, .7);
    border-radius: 50%;
    background: #d8a244;
    box-shadow: 0 0 7px rgba(232, 167, 76, .62), inset 0 0 2px #fff1ba;
}

.computer-status-bank .is-link i {
    background: #7b9b70;
    box-shadow: 0 0 7px rgba(125, 155, 112, .55), inset 0 0 2px #e5ffd9;
}

.computer-status-bank .is-rad i {
    background: #9f4b38;
    box-shadow: 0 0 6px rgba(182, 96, 62, .5), inset 0 0 2px #ffd1c6;
    animation: atlasWarningPulse 2.4s steps(2, end) infinite;
}

.computer-identity-plate {
    position: absolute;
    z-index: 3;
    bottom: 51px;
    left: 39px;
    display: grid;
    gap: 5px;
    min-width: 150px;
    padding: 9px 11px;
    color: #b8b18b;
    border: 1px solid #242923;
    border-left: 3px solid #b55f3c;
    border-radius: 2px;
    background: #353a31;
    box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 2px 4px rgba(0, 0, 0, .25);
    transform: rotate(-.6deg);
}

.computer-identity-plate span {
    font: 800 9px/1 "DM Sans", sans-serif;
    letter-spacing: .14em;
}

.computer-identity-plate b {
    color: #777b66;
    font: 700 7px/1 "DM Sans", sans-serif;
    letter-spacing: .12em;
}

.computer-warning-tape {
    position: absolute;
    z-index: 3;
    right: 210px;
    bottom: 31px;
    left: 210px;
    height: 23px;
    overflow: hidden;
    color: #25251c;
    border: 1px solid rgba(35, 35, 25, .5);
    background: repeating-linear-gradient(135deg, #b89041 0 13px, #36372d 13px 25px);
    box-shadow: inset 0 1px rgba(255, 241, 184, .22), 0 2px 4px rgba(0, 0, 0, .2);
    transform: rotate(.35deg);
}

.computer-warning-tape span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max-content;
    max-width: 88%;
    overflow: hidden;
    padding: 3px 10px;
    background: #c39949;
    font: 900 7px/1 "DM Sans", sans-serif;
    letter-spacing: .12em;
    white-space: nowrap;
    text-overflow: ellipsis;
    transform: translate(-50%, -50%);
}

.computer-power-module {
    position: absolute;
    z-index: 3;
    right: 39px;
    bottom: 47px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    color: #252a23;
    border: 1px solid rgba(27, 31, 25, .5);
    border-radius: 3px;
    background: rgba(72, 76, 62, .45);
    box-shadow: inset 0 1px rgba(255, 255, 255, .08);
    font: 800 7px/1.1 "DM Sans", sans-serif;
    letter-spacing: .08em;
}

.computer-power-module i {
    width: 24px;
    height: 24px;
    border: 4px solid #30342d;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 34%, #9d9b84, #43473d 62%, #242822 64%);
    box-shadow: inset 2px 2px 4px rgba(255, 255, 255, .16), 0 2px 3px rgba(0, 0, 0, .35);
}

.computer-lines {
    z-index: 3;
    top: 76.5%;
    width: min(49%, 420px);
    gap: 8px;
}

.computer-lines span {
    width: 100%;
    height: 4px;
    border: 1px solid rgba(13, 17, 14, .55);
    border-radius: 6px;
    background: linear-gradient(180deg, #20251f, #565b4b 56%, #252a23 58%);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .7), 0 1px rgba(210, 202, 165, .12);
    opacity: .85;
}

.computer-dirt {
    z-index: 2;
    opacity: .075;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.close-computer-btn {
    z-index: 6;
    top: 17px;
    left: 21px;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 0;
    color: #2a1812;
    border: 2px solid #682d21;
    border-radius: 7px;
    background: linear-gradient(145deg, #d46b48, #873923 72%);
    box-shadow: inset 2px 2px 0 rgba(255, 213, 188, .22), inset -3px -3px 5px rgba(55, 16, 9, .3), 0 3px 0 #38231b, 0 5px 8px rgba(0, 0, 0, .35);
    text-shadow: 0 1px rgba(239, 157, 124, .3);
}

.close-computer-btn b {
    font: 900 25px/.7 "DM Sans", sans-serif;
}

.close-computer-btn small {
    margin-top: -3px;
    font: 900 6px/1 "DM Sans", sans-serif;
    letter-spacing: .12em;
}

.close-computer-btn:hover {
    color: #1c100c;
    background: linear-gradient(145deg, #eb8059, #a3472e 72%);
    transform: translateY(-1px);
}

.close-computer-btn:active {
    color: #1c100c;
    box-shadow: inset 2px 3px 5px rgba(55, 16, 9, .35), 0 1px 0 #38231b;
    transform: translateY(2px);
}

.close-computer-btn:focus-visible {
    outline: 3px solid var(--paper);
    outline-offset: 3px;
}

.computer-screen {
    z-index: 3;
    top: 45.5%;
    width: min(76%, 680px);
    height: 56%;
    max-width: none;
    min-height: 350px;
    padding: 18px;
    border-color: rgba(232, 167, 76, .42) !important;
    border-radius: 24px 24px 32px 32px / 18px 18px 28px 28px !important;
    background:
        linear-gradient(rgba(112, 169, 155, .018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(112, 169, 155, .014) 1px, transparent 1px),
        radial-gradient(ellipse at 50% 28%, #132019 0%, #07100b 67%, #020503 100%) !important;
    background-size: 18px 18px, 18px 18px, auto !important;
    box-shadow:
        inset 0 0 48px rgba(112, 169, 155, .18),
        inset 0 0 0 2px rgba(13, 21, 16, .9),
        0 0 0 11px #171c18,
        0 0 0 14px #30372f,
        0 0 0 16px #171b17,
        0 18px 34px rgba(0, 0, 0, .56) !important;
    transform: translate(-50%, -52%);
}

.computer-screen::before,
.computer-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: inherit;
    pointer-events: none;
}

.computer-screen::before {
    background: linear-gradient(112deg, rgba(218, 235, 216, .055), transparent 20% 76%, rgba(255, 255, 255, .018));
    mix-blend-mode: screen;
}

.computer-screen::after {
    box-shadow: inset 0 0 34px rgba(0, 0, 0, .72), inset 0 0 4px rgba(164, 207, 180, .18);
}

@keyframes atlasWarningPulse {

    0%,
    72%,
    100% {
        opacity: 1;
    }

    76%,
    88% {
        opacity: .3;
    }
}

.work-shift-hud {
    position: absolute;
    z-index: 7;
    top: 13px;
    left: 20px;
    right: 82px;
    height: 34px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 16px;
    padding: 0 12px;
    color: var(--muted);
    border: 1px solid rgba(232, 167, 76, .22);
    border-left: 3px solid var(--amber);
    background: rgba(9, 17, 12, .88);
    font: 700 8px/1 "DM Sans", sans-serif;
    letter-spacing: .15em;
}

.work-shift-hud b {
    color: var(--paper);
    font: 700 15px/1 "Barlow Condensed", sans-serif;
    letter-spacing: .06em;
}

.work-shift-hud em {
    color: var(--amber-bright);
    font: 700 11px/1 "DM Sans", sans-serif;
    font-style: normal;
    letter-spacing: .04em;
}

.computer-screen .time-container {
    z-index: 7;
    top: 20px;
    right: 18px;
    color: var(--teal);
    background: transparent;
    font-family: "DM Sans", sans-serif;
    font-size: 10px;
}

.computer-screen-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: calc(100% - 76px);
    margin: 43px 0 8px;
    padding: 10px 8px;
    justify-content: flex-start;
    gap: 9px;
    color: #bdcbbd;
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.45;
}

/* The terminal keeps its own teal-tinted track; the shared scrollbar block
   near the end of this file styles everything else. */
.computer-screen-content {
    scrollbar-color: rgba(232, 167, 76, .6) rgba(112, 169, 155, .08);
    scrollbar-width: thin;
}

.computer-screen-content p {
    color: #91a496;
    text-shadow: none;
}

.computer-screen-content::-webkit-scrollbar {
    width: 4px;
}

.computer-screen-content::-webkit-scrollbar-track {
    background: rgba(112, 169, 155, .08);
}

.computer-screen-content::-webkit-scrollbar-thumb {
    background: rgba(232, 167, 76, .6);
    border-radius: 4px;
}

.computer-screen .scanlines {
    z-index: 6;
    opacity: .24;
    background: repeating-linear-gradient(0deg, rgba(125, 190, 145, .11) 0 1px, transparent 1px 4px);
    animation-duration: 1.8s;
}

.work-question-card {
    width: 100%;
    padding: 14px;
    border: 1px solid rgba(112, 169, 155, .28);
    border-left: 3px solid var(--teal);
    background: rgba(112, 169, 155, .045);
}

.work-question-card>span {
    display: block;
    margin-bottom: 10px;
    color: var(--amber);
    font: 700 8px/1 "DM Sans", sans-serif;
    letter-spacing: .16em;
}

.work-question-copy {
    color: #d1d9cf;
    white-space: pre-wrap;
    font: 500 12px/1.55 Consolas, "Courier New", monospace;
}

.work-answer {
    display: grid;
    gap: 5px;
    width: 100%;
    padding: 10px 13px;
    border-left: 3px solid var(--rust);
    background: rgba(182, 96, 62, .08);
}

.work-answer span {
    color: var(--muted);
    font-size: 9px;
    letter-spacing: .08em;
}

.work-answer strong {
    color: #dc8c70;
    font-size: 12px;
}

.work-answer.is-correct {
    border-left-color: var(--moss);
    background: rgba(125, 155, 112, .09);
}

.work-answer.is-correct strong {
    color: #a9c795;
}

.computer-screen .command-buttons-container {
    z-index: 7;
    flex: 0 0 42px;
    gap: 9px;
}

.computer-screen .command-btn {
    min-width: 44px;
    height: 42px;
    padding: 0;
    color: var(--amber-bright);
    border: 1px solid rgba(232, 167, 76, .52);
    border-bottom-width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, rgba(232, 167, 76, .08), rgba(232, 167, 76, .025));
    box-shadow: inset 0 1px rgba(255, 255, 255, .04);
    font: 800 16px/1 "Barlow Condensed", sans-serif;
}

.computer-screen .command-btn:hover:not(:disabled) {
    color: #15160f;
    background: var(--amber);
    transform: translateY(-1px);
}

.computer-screen .command-btn:active:not(:disabled) {
    border-bottom-width: 1px;
    transform: translateY(2px);
}

.computer-screen .command-btn:focus-visible {
    outline: 2px solid var(--paper);
    outline-offset: 2px;
}

.computer-screen .command-btn:disabled {
    cursor: wait;
}

.work-shift-complete {
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6px clamp(12px, 5vw, 48px);
}

.work-shift-complete>span {
    color: var(--amber);
    font: 700 8px/1 "DM Sans", sans-serif;
    letter-spacing: .2em;
}

.work-shift-complete h2 {
    margin: 8px 0 6px;
    color: var(--paper);
    font: 800 clamp(28px, 4vw, 36px)/1 "Barlow Condensed", sans-serif;
    letter-spacing: .05em;
}

.work-shift-complete>p {
    max-width: 470px;
    color: #aab5a8;
    font: 500 11px/1.35 "DM Sans", sans-serif;
}

.work-shift-results {
    width: min(390px, 100%);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 8px 0;
}

.work-shift-results>span {
    padding: 8px;
    border: 1px solid rgba(232, 167, 76, .2);
    background: rgba(232, 167, 76, .04);
}

.work-shift-results small,
.work-shift-results b {
    display: block;
}

.work-shift-results small {
    color: var(--muted);
    font: 700 7px/1 "DM Sans", sans-serif;
    letter-spacing: .12em;
}

.work-shift-results b {
    margin-top: 5px;
    color: var(--amber-bright);
    font: 700 19px/1 "Barlow Condensed", sans-serif;
}

.work-shift-complete .work-shift-cooldown {
    padding: 6px 10px;
    color: #9db7ad;
    border-left: 2px solid var(--teal);
    background: rgba(112, 169, 155, .06);
}

.work-shift-complete button {
    width: min(300px, 100%);
    margin-top: 8px;
    padding-block: 8px;
    color: #17170f;
    border-color: var(--amber) !important;
    background: var(--amber) !important;
    font: 800 11px/1 "DM Sans", sans-serif;
    letter-spacing: .12em;
}

.work-shift-complete.is-error h2 {
    color: var(--danger);
}

@media (max-width: 768px) {
    .retro-computer {
        padding: 0;
    }

    .main-computer {
        width: 100dvw;
        height: 100dvh;
        min-height: 0;
    }

    .computer-screen-details {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }

    .computer-screen-details::before {
        right: 12px;
        bottom: 10px;
        left: 12px;
    }

    .computer-casing-top {
        top: 19px;
        left: 78px;
        max-width: calc(100% - 235px);
    }

    .computer-brand-mark {
        font-size: 23px;
    }

    .computer-model {
        font-size: 6px;
    }

    .computer-status-bank {
        top: 17px;
        right: 17px;
        gap: 8px;
        padding-inline: 7px;
    }

    .close-computer-btn {
        top: 12px;
        left: 14px;
        width: 48px;
        height: 48px;
    }

    .computer-screen {
        top: 43%;
        width: calc(100% - 34px);
        height: min(57dvh, 510px);
        min-height: 330px;
        padding: 12px 10px;
        border-radius: 18px 18px 24px 24px / 14px 14px 20px 20px !important;
        box-shadow: inset 0 0 36px rgba(112, 169, 155, .16), inset 0 0 0 2px rgba(13, 21, 16, .9), 0 0 0 7px #171c18, 0 0 0 9px #353c34, 0 12px 24px rgba(0, 0, 0, .55) !important;
    }

    .computer-lines {
        top: 76%;
        width: min(52%, 330px);
        gap: 6px;
    }

    .computer-lines span {
        height: 3px;
    }

    .computer-identity-plate {
        bottom: 31px;
        left: 23px;
        min-width: 132px;
        padding: 7px 9px;
    }

    .computer-power-module {
        right: 23px;
        bottom: 28px;
    }

    .computer-warning-tape {
        right: 178px;
        bottom: 17px;
        left: 178px;
    }

    .work-shift-hud {
        left: 10px;
        right: 63px;
        top: 9px;
        gap: 8px;
        padding-inline: 8px;
    }

    .work-shift-hud>span {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .computer-screen .time-container {
        top: 17px;
        right: 10px;
        font-size: 8px;
    }

    .computer-screen-content {
        height: calc(100% - 70px);
        margin-top: 40px;
        font-size: 11px;
    }

    .work-question-copy {
        font-size: 10px;
    }

    .computer-screen .command-buttons-container {
        flex-basis: 44px;
    }

    .computer-screen .command-btn {
        min-height: 44px;
    }

    .work-shift-complete {
        padding-inline: 6px;
    }

    .work-shift-complete h2 {
        font-size: 28px;
    }
}

@media (max-width: 520px) {
    .computer-casing-top {
        max-width: calc(100% - 100px);
    }

    .computer-model {
        max-width: 150px;
    }

    .computer-status-bank {
        top: 68px;
        right: 14px;
    }

    .computer-status-bank span {
        font-size: 0;
    }

    .computer-status-bank i {
        width: 8px;
        height: 8px;
    }

    .computer-warning-tape {
        display: none;
    }

    .computer-identity-plate {
        bottom: 24px;
        left: 18px;
    }

    .computer-power-module {
        right: 18px;
        bottom: 22px;
    }

    .computer-screen {
        top: 44%;
        height: 56dvh;
        min-height: 300px;
    }

    .work-question-card {
        padding: 10px;
    }

    .work-question-copy {
        line-height: 1.42;
    }
}

@media (max-height: 520px) and (orientation: landscape) {
    .main-computer {
        width: 100dvw;
        height: 100dvh;
        min-height: 0;
    }

    .computer-screen {
        top: 50%;
        left: calc(50% - 50px);
        width: calc(100% - 182px);
        height: calc(100% - 30px);
        min-height: 0;
        transform: translate(-50%, -50%);
    }

    .close-computer-btn {
        top: 12px;
        right: 12px;
        left: auto;
    }

    .computer-casing-top {
        top: 76px;
        right: 8px;
        left: auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 7px;
        width: 104px;
        max-width: none;
    }

    .computer-model {
        max-width: 100px;
        padding-top: 7px;
        padding-left: 0;
        border-top: 1px solid rgba(30, 35, 28, .38);
        border-left: 0;
        white-space: normal;
    }

    .computer-status-bank {
        top: 157px;
        right: 16px;
        flex-direction: column;
        align-items: flex-start;
    }

    .computer-status-bank span {
        font-size: 7px;
    }

    .computer-lines,
    .computer-power-module {
        display: none;
    }

    .computer-identity-plate {
        right: 8px;
        bottom: 49px;
        left: auto;
        width: 104px;
        min-width: 104px;
    }

    .computer-warning-tape {
        right: 8px;
        bottom: 14px;
        left: auto;
        display: block;
        width: 104px;
    }

    .computer-warning-tape span {
        max-width: 94%;
        padding-inline: 5px;
        font-size: 5px;
    }

    .computer-screen-content {
        margin-top: 38px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .main-computer,
    .computer-status-bank .is-rad i,
    .computer-screen .scanlines {
        transition: none;
        animation: none;
    }
}

.room-buttons,
.survival-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.survival-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.action-buttons {
    grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
}

.command-deck button {
    overflow: hidden;
    line-height: 1.1;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    white-space: normal !important;
}

.command-deck .room-btn,
.command-deck .action-btn:not([style*="display: none"]) {
    display: flex !important;
    height: 92px !important;
}

.command-deck button small {
    display: flex;
    width: 100%;
    min-height: 22px;
    align-items: center;
    justify-content: center;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
    line-height: 1.12 !important;
    overflow-wrap: anywhere;
}

.command-deck button em {
    display: flex;
    min-height: 15px;
    align-items: center;
    justify-content: center;
    white-space: normal;
    line-height: 1.15;
    text-align: center;
}

@media (max-width: 768px) {
    .action-buttons {
        display: flex;
        grid-template-columns: none;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .action-buttons .action-btn {
        flex: 0 0 78px;
        width: 78px !important;
        min-width: 78px !important;
        height: 78px !important;
    }

    .room-buttons .room-btn {
        height: 39px !important;
    }

    .room-buttons button small {
        min-height: auto;
    }

    .survival-actions button small {
        flex: 0 1 auto;
        width: auto !important;
        min-height: 18px;
        font-size: 6.5px !important;
        letter-spacing: .35px !important;
        white-space: nowrap !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    .survival-actions button em {
        flex: 0 1 auto;
        min-width: 0;
        font-size: 6px !important;
        letter-spacing: 0 !important;
    }

    .survival-actions button {
        gap: 2px !important;
        padding: 3px 2px !important;
    }

    .survival-actions button>span {
        flex: 0 0 auto;
        font-size: 12px !important;
    }

    .event-feed {
        bottom: 205px;
    }

    .notification-list {
        top: 132px !important;
        left: 7px !important;
        right: 7px !important;
        width: auto;
        max-height: 31vh;
    }

    .notification {
        top: 132px !important;
        right: 7px;
        bottom: auto !important;
        left: 7px;
        width: auto;
        max-width: none !important;
        transform: none;
    }
}

@media (min-width: 1081px) and (max-width: 1360px) {
    .notification-list {
        right: 280px;
    }
}

@media (min-width: 769px) and (max-width: 1080px) {
    .notification-list {
        right: 18px;
    }
}

@media (min-width: 901px) and (max-width: 1080px) {
    .command-deck {
        grid-template-columns: minmax(220px, 28fr) minmax(300px, 32fr) minmax(320px, 40fr);
    }

    .survival-actions {
        position: static;
        width: auto;
        height: auto;
        padding-left: 8px;
        border-left: 1px solid var(--line);
    }

    .survival-actions button {
        min-height: 92px;
        flex-direction: column;
    }
}

/* Final responsive safeguards for tablets and short landscape screens */
@media (min-width: 769px) and (max-width: 900px) {
    .command-deck {
        grid-template-columns: minmax(190px, 28fr) minmax(235px, 32fr) minmax(260px, 40fr);
    }

    .survival-actions {
        position: static;
        width: auto;
        height: auto;
        padding-left: 8px;
        border-left: 1px solid var(--line);
    }

    .survival-actions button {
        min-height: 92px;
        flex-direction: column;
    }
}

@media (max-width: 360px) and (orientation: portrait) {
    .survival-actions button em {
        display: none;
    }

    .survival-actions button small {
        font-size: 7px !important;
        letter-spacing: .25px !important;
    }

    .notification-list-item {
        font-size: 11px;
        line-height: 1.28;
    }
}

@media (max-height: 650px) and (orientation: landscape) {

    .systems-panel,
    .objective-panel {
        display: none;
    }

    .bunker-hud {
        top: max(8px, env(safe-area-inset-top));
        left: 8px;
        right: 8px;
        height: 72px;
    }

    .command-deck {
        left: 8px;
        right: 8px;
        bottom: max(8px, env(safe-area-inset-bottom));
        min-height: 86px;
        padding: 6px;
        grid-template-columns: minmax(0, 28fr) minmax(0, 32fr) minmax(0, 40fr);
        grid-template-rows: 74px;
        gap: 6px;
    }

    .room-buttons,
    .action-buttons,
    .survival-actions {
        position: static;
        grid-row: 1;
        width: auto;
        height: 74px;
        min-width: 0;
        padding: 0;
        border: 0;
        overflow: hidden;
    }

    .room-buttons {
        grid-column: 1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .action-buttons {
        grid-column: 2;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    }

    .survival-actions {
        grid-column: 3;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .command-deck .room-btn,
    .command-deck .action-btn:not([style*="display: none"]),
    .command-deck .survival-btn {
        width: 100% !important;
        min-width: 0 !important;
        height: 74px !important;
        min-height: 74px !important;
        padding: 4px 2px !important;
        flex-direction: column;
        gap: 4px !important;
    }

    .command-deck button>span {
        font-size: 15px !important;
    }

    .command-deck button small {
        min-height: 14px;
        font-size: 6.5px !important;
        line-height: 1.05 !important;
        letter-spacing: .35px !important;
    }

    .command-deck button em {
        display: none;
    }

    .event-feed {
        top: auto;
        right: auto;
        bottom: calc(max(8px, env(safe-area-inset-bottom)) + 94px);
        left: 8px;
        width: min(430px, 52vw);
        min-height: 30px;
        transform: none;
    }

    .notification-list {
        top: 88px !important;
        right: 8px !important;
        left: auto !important;
        width: min(300px, 38vw);
        max-height: calc(100dvh - 198px);
    }

    .notification {
        top: 88px !important;
        right: 8px;
        bottom: auto !important;
        left: auto;
        width: min(300px, 38vw);
        max-width: min(300px, 38vw) !important;
        transform: none;
    }

    .start-content {
        left: clamp(28px, 7vw, 70px);
        top: 47%;
        bottom: auto;
        width: min(440px, 48vw);
        transform: translateY(-50%);
    }

    .start-content h1 {
        font-size: clamp(50px, 8vw, 68px);
    }

    .start-content .start-lead,
    .start-content .game-tip,
    .feature-pills {
        display: none;
    }

    .start-buttons {
        left: clamp(28px, 7vw, 70px);
        bottom: max(22px, env(safe-area-inset-bottom));
        flex-direction: row;
        width: auto;
    }

    .start-buttons button {
        width: 190px;
        min-width: 190px;
        height: 48px;
        white-space: nowrap;
    }

    .start-buttons .primary-cta {
        gap: 18px;
    }

    .start-buttons .primary-cta span {
        white-space: nowrap;
    }

    .start-footer {
        display: none;
    }
}

@media (max-width: 768px) and (max-height: 650px) and (orientation: landscape) {
    .bunker-hud {
        grid-template-columns: minmax(0, 1fr) minmax(210px, 38vw) 38px;
        grid-template-rows: 72px;
        gap: 5px;
    }

    .stats-container {
        grid-column: 1;
        grid-row: 1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: repeat(2, 1fr);
    }

    .hud-clock {
        grid-column: 2;
        grid-row: 1;
    }

    .stats-toggle {
        grid-column: 3;
        grid-row: 1;
        width: 38px;
        height: 72px;
    }

    .notification-list {
        width: min(260px, 38vw);
    }
}

@media (max-height: 430px) and (orientation: landscape) {
    .title-badge {
        display: none;
    }

    .start-content {
        top: 45%;
    }

    .start-content h1 {
        margin-top: 9px;
        font-size: clamp(46px, 8vw, 61px);
    }

    .start-buttons {
        bottom: max(14px, env(safe-area-inset-bottom));
    }

    .start-buttons button {
        width: 180px;
        min-width: 180px;
        height: 46px;
    }
}

/* Real iOS / iPad portrait layouts */
@supports (height: 100dvh) {

    html,
    body,
    .game-container,
    #renderCanvas,
    .ui-overlay {
        height: 100dvh;
    }
}

@media (max-width: 768px) and (orientation: portrait) {
    .bunker-hud {
        top: max(6px, env(safe-area-inset-top));
        left: max(3px, env(safe-area-inset-left));
        right: max(3px, env(safe-area-inset-right));
        height: 101px;
        grid-template-rows: 64px 32px;
        gap: 5px;
    }

    .stats-container {
        height: 64px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 5px;
        gap: 4px 6px;
    }

    .stats-container .stat {
        display: grid;
        grid-template-rows: auto 4px;
        align-content: center;
        width: auto;
        min-width: 0;
        margin: 0;
    }

    .stats-container .stat-head {
        min-width: 0;
        margin: 0 0 3px;
    }

    .stats-container .stat-label {
        font-size: 7.5px;
        letter-spacing: .06em;
    }

    .stats-container .stat-number {
        font-size: 10px;
    }

    .stats-container .stat-bar {
        display: block !important;
        width: 100%;
        height: 4px !important;
        min-height: 4px;
        flex: none;
        opacity: 1;
        background: rgba(255, 255, 255, .1);
    }

    .stats-container .stat-fill {
        display: block;
        height: 100%;
        min-width: 1px;
        opacity: 1;
    }

    .hud-clock,
    .stats-toggle {
        height: 32px;
    }

    .hud-clock>span {
        min-height: 32px;
        padding: 3px 8px;
    }

    .stats-toggle {
        width: 38px;
        height: 32px;
    }

    .notification-list,
    .notification {
        top: calc(max(6px, env(safe-area-inset-top)) + 108px) !important;
    }

    .notification {
        padding: 9px 11px;
        font-size: 11px !important;
        line-height: 1.34;
        letter-spacing: .015em;
    }

    .notification-list-item {
        padding: 9px 11px;
        font-size: 10px;
        line-height: 1.3;
    }
}

@media (max-width: 600px) and (orientation: portrait) {
    .command-deck {
        left: max(7px, env(safe-area-inset-left));
        right: max(7px, env(safe-area-inset-right));
        bottom: max(7px, env(safe-area-inset-bottom));
        min-height: 164px;
        padding: 5px;
        grid-template-rows: 34px 66px 44px;
        gap: 5px;
    }

    .command-deck>.room-buttons,
    .command-deck>.action-buttons,
    .command-deck>.survival-actions {
        min-height: 0;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .room-buttons {
        height: 34px;
        min-height: 34px;
        align-items: stretch;
    }

    .room-buttons button,
    .command-deck .room-btn {
        height: 34px !important;
        min-height: 34px !important;
        padding: 3px 4px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        justify-content: center;
        gap: 5px !important;
    }

    .room-buttons button>span {
        flex: 0 0 auto;
        font-size: 11px !important;
    }

    .room-buttons button small {
        flex: 0 1 auto;
        width: auto;
        min-width: 0;
        min-height: 0;
        font-size: 7px;
        line-height: 1 !important;
    }

    .action-buttons {
        display: flex;
        justify-content: center;
        gap: 5px;
        overflow: hidden;
    }

    .action-buttons .action-btn,
    .command-deck .action-btn:not([style*="display: none"]) {
        flex: 1 1 0;
        width: auto !important;
        min-width: 0 !important;
        max-width: 120px !important;
        height: 66px !important;
        min-height: 66px !important;
        padding: 5px 3px !important;
    }

    .action-buttons button>span {
        font-size: 18px !important;
    }

    .action-buttons button small {
        min-height: 14px;
        font-size: 7.5px;
    }

    .action-buttons button em {
        min-height: 11px;
        font-size: 6px;
    }

    .action-buttons .action-btn.outside-hours::after,
    .action-buttons .action-btn.comm-failure::after,
    .action-buttons .action-btn.food-failure::after,
    .action-buttons .action-btn.water-failure::after,
    .action-buttons .action-btn.work-cooldown::after {
        position: static !important;
        flex: 0 0 auto;
        width: 100%;
        height: 7px;
        min-height: 7px;
        padding: 0;
        border: 0;
        background: transparent;
        font-size: 5px;
        line-height: 7px;
        letter-spacing: 0;
    }

    .action-buttons .action-btn.outside-hours em,
    .action-buttons .action-btn.comm-failure em,
    .action-buttons .action-btn.food-failure em,
    .action-buttons .action-btn.water-failure em,
    .action-buttons .action-btn.work-cooldown em {
        display: none;
    }

    .survival-actions {
        height: 44px;
        gap: 5px;
    }

    .command-deck .survival-btn,
    .survival-actions button {
        height: 44px !important;
        min-height: 44px !important;
        padding: 3px 2px !important;
        gap: 3px !important;
    }

    .survival-actions button>span {
        font-size: 11px !important;
    }

    .survival-actions button small {
        min-height: auto;
        font-size: 7px !important;
        letter-spacing: .25px !important;
    }

    .survival-actions button em {
        display: none;
    }

    .event-feed {
        left: max(7px, env(safe-area-inset-left));
        right: max(7px, env(safe-area-inset-right));
        bottom: calc(max(7px, env(safe-area-inset-bottom)) + 172px);
        min-height: 29px;
        padding: 5px 8px;
    }

    .feed-tag {
        font-size: 7px;
    }

    .event-feed p {
        font-size: 7.5px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
    .bunker-hud {
        left: max(12px, env(safe-area-inset-left));
        right: max(12px, env(safe-area-inset-right));
    }

    .systems-panel {
        left: max(12px, env(safe-area-inset-left));
    }

    .command-deck {
        left: max(12px, env(safe-area-inset-left));
        right: max(12px, env(safe-area-inset-right));
        bottom: max(12px, env(safe-area-inset-bottom));
        height: 108px;
        min-height: 108px;
        padding: 8px;
        grid-template-columns: minmax(185px, 27fr) minmax(225px, 31fr) minmax(255px, 42fr);
        gap: 8px;
    }

    .room-buttons,
    .action-buttons,
    .survival-actions {
        height: 88px;
        min-height: 88px;
    }

    .action-buttons {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        overflow: hidden;
    }

    .command-deck .room-btn,
    .command-deck .action-btn:not([style*="display: none"]),
    .command-deck .survival-btn {
        height: 88px !important;
        min-height: 88px !important;
    }

    .event-feed {
        bottom: calc(max(12px, env(safe-area-inset-bottom)) + 124px);
    }
}

@media (min-width: 601px) and (max-width: 768px) and (orientation: portrait) {
    .command-deck {
        min-height: 178px;
        grid-template-rows: 38px 76px 48px;
    }

    .action-buttons {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        justify-self: center;
        width: min(100%, 510px);
        overflow: hidden;
    }

    .action-buttons .action-btn,
    .command-deck .action-btn:not([style*="display: none"]) {
        width: 100% !important;
        min-width: 0 !important;
        height: 76px !important;
        min-height: 76px !important;
        padding: 4px 5px !important;
        gap: 3px !important;
    }

    .action-buttons button>span {
        font-size: 17px !important;
    }

    .action-buttons button small {
        min-height: 12px;
        font-size: 8px !important;
        line-height: 1 !important;
    }

    .action-buttons button em {
        min-height: 10px;
        font-size: 6.5px !important;
        line-height: 1 !important;
    }

    .action-buttons .action-btn.outside-hours::after,
    .action-buttons .action-btn.comm-failure::after,
    .action-buttons .action-btn.food-failure::after,
    .action-buttons .action-btn.water-failure::after,
    .action-buttons .action-btn.work-cooldown::after {
        position: static !important;
        flex: 0 0 auto;
        width: 100%;
        height: 8px;
        min-height: 8px;
        padding: 0;
        border: 0;
        background: transparent;
        font-size: 5.5px;
        line-height: 8px;
        letter-spacing: 0;
    }

    .event-feed {
        bottom: calc(max(7px, env(safe-area-inset-bottom)) + 186px);
    }
}

/* Unified shelter dialogs */
.settings-content {
    width: min(520px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    padding: clamp(22px, 4vw, 34px);
    overflow: auto;
    border: 1px solid rgba(232, 167, 76, .46);
    border-left: 3px solid var(--amber);
    border-radius: 4px;
    background:
        linear-gradient(90deg, rgba(232, 167, 76, .055) 1px, transparent 1px) 0 0 / 28px 100%,
        linear-gradient(145deg, rgba(25, 34, 27, .99), rgba(8, 13, 10, .995));
    box-shadow: 0 28px 90px rgba(0, 0, 0, .78), inset 0 1px rgba(255, 255, 255, .04);
    color: var(--paper);
    font-family: "DM Sans", sans-serif;
}

.settings-content::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 72px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--amber));
}

.settings-content .modal-kicker {
    margin-bottom: 8px;
}

.settings-content h1 {
    margin: 0 0 24px;
    text-align: left;
    color: var(--paper);
    font: 700 clamp(32px, 7vw, 42px)/.95 "Barlow Condensed", sans-serif;
    letter-spacing: .025em;
    text-shadow: none;
}

.settings-options {
    display: grid;
    gap: 10px;
    margin: 0 0 18px;
}

.settings-option {
    min-height: 62px;
    margin: 0;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: rgba(2, 7, 4, .48);
}

.settings-option>label {
    color: #c9c9bd;
    font: 700 9px/1 "DM Sans", sans-serif;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.language-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(220px, 58%);
    gap: 4px;
}

.lang-btn {
    min-width: 0;
    height: 36px;
    padding: 0 10px;
    color: #989f94;
    border: 1px solid var(--line);
    border-radius: 2px;
    background: rgba(255, 255, 255, .025);
    box-shadow: none;
    font: 700 9px/1 "DM Sans", sans-serif;
    letter-spacing: .04em;
}

.lang-btn:hover {
    color: var(--paper);
    border-color: var(--line-hot);
    background: rgba(232, 167, 76, .06);
}

.lang-btn.active {
    color: #11160f;
    border-color: var(--amber);
    background: var(--amber);
    box-shadow: 0 0 18px rgba(232, 167, 76, .16);
}

.toggle-switch {
    width: 48px;
    height: 26px;
}

.toggle-switch label {
    border: 1px solid var(--line);
    border-radius: 2px;
    background: rgba(255, 255, 255, .05);
}

.toggle-switch label::before {
    width: 18px;
    height: 18px;
    left: 3px;
    bottom: 3px;
    border-radius: 1px;
    background: #7b8177;
}

.toggle-switch input:checked+label {
    border-color: rgba(232, 167, 76, .6);
    background: rgba(232, 167, 76, .13);
}

.toggle-switch input:checked+label::before {
    transform: translateX(22px);
    background: var(--amber);
}

.settings-buttons {
    display: grid;
    gap: 8px;
}

.settings-buttons button {
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 2px;
    color: var(--paper);
    background: rgba(255, 255, 255, .035);
    box-shadow: none;
    font: 700 9px/1 "DM Sans", sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.settings-buttons button:hover {
    color: var(--paper);
    border-color: var(--line-hot);
    background: rgba(232, 167, 76, .08);
    box-shadow: none;
}

#continue-game-settings-btn {
    color: #11160f;
    border-color: var(--amber);
    background: var(--amber);
}

#continue-game-settings-btn:hover {
    color: #11160f;
    background: var(--amber-bright);
}

#end-game-btn {
    color: #d18a79;
    border-color: rgba(182, 96, 62, .5);
    background: rgba(182, 96, 62, .08);
}

#end-game-btn:hover {
    color: #f1c1b4;
    border-color: var(--danger);
    background: rgba(182, 96, 62, .16);
    box-shadow: none;
}

@media (max-width: 600px) and (orientation: portrait) {

    .survival-modal,
    .settings-screen {
        width: 100%;
        height: 100dvh;
        padding:
            max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
        place-items: center;
        overflow: hidden;
    }

    .survival-modal-card,
    .settings-content {
        width: 100%;
        max-width: 100%;
        max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        margin: auto;
        padding: 20px 16px 16px;
    }

    .settings-content {
        width: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));
        max-width: 520px;
    }

    .survival-modal-card h2 {
        padding-right: 34px;
        font-size: 30px;
    }

    .survival-modal-card .modal-copy {
        margin: 9px 0 14px;
        font-size: 11px;
        line-height: 1.4;
    }

    .survival-modal-card .modal-close {
        top: 12px;
        right: 12px;
        width: 32px;
        height: 32px;
    }

    .survival-modal-card .modal-options {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .survival-modal-card .modal-option {
        min-height: 0;
        padding: 11px 12px;
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr) auto;
        grid-template-areas:
            "icon title cost"
            "icon copy copy"
            "icon risk risk";
        column-gap: 10px;
        row-gap: 4px;
        align-items: center;
    }

    .survival-modal-card .option-icon {
        grid-area: icon;
        width: 34px;
        height: 34px;
        margin: 0;
    }

    .survival-modal-card .modal-option strong {
        grid-area: title;
        font-size: 17px;
    }

    .survival-modal-card .modal-option p {
        grid-area: copy;
        margin: 0;
        font-size: 8px;
        line-height: 1.35;
    }

    .survival-modal-card .modal-option em {
        grid-area: cost;
        margin: 0;
        white-space: nowrap;
        font-size: 7px;
    }

    .survival-modal-card .option-risk {
        grid-area: risk;
        margin: 0;
        font-size: 6.5px;
    }

    .settings-content h1 {
        margin-bottom: 18px;
    }

    .settings-option {
        min-height: 58px;
        padding: 9px 11px;
    }

    .settings-option>label {
        font-size: 8px;
    }

    .language-toggle {
        width: min(204px, 64%);
    }

    .command-deck {
        height: 162px;
        min-height: 162px;
        padding: 7px;
        grid-template-rows: 36px 54px 42px;
        gap: 8px !important;
    }

    .command-deck>.room-buttons,
    .command-deck>.action-buttons,
    .command-deck>.survival-actions {
        align-self: stretch;
    }

    .room-buttons,
    .room-buttons button,
    .command-deck .room-btn {
        height: 36px !important;
        min-height: 36px !important;
    }

    .room-buttons,
    .action-buttons {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .action-buttons {
        height: 54px;
    }

    .action-buttons .action-btn,
    .command-deck .action-btn:not([style*="display: none"]) {
        width: 100% !important;
        max-width: none !important;
        justify-self: stretch;
        height: 54px !important;
        min-height: 54px !important;
        padding: 3px 2px !important;
        gap: 2px !important;
    }

    .action-buttons button>span {
        font-size: 16px !important;
    }

    .action-buttons button small {
        min-height: 11px;
        font-size: 7px;
        line-height: 1 !important;
    }

    .action-buttons button em {
        min-height: 8px;
        font-size: 5.5px;
        line-height: 1 !important;
    }

    .survival-actions {
        height: 42px;
        gap: 6px;
    }

    .command-deck .survival-btn,
    .survival-actions button {
        height: 42px !important;
        min-height: 42px !important;
    }

    .event-feed {
        bottom: calc(max(7px, env(safe-area-inset-bottom)) + 170px);
    }
}

/* Desktop alert rail: keep notifications out of the 3D focal area */
@media (min-width: 1361px) and (min-height: 651px) {
    .notification-list {
        top: 359px !important;
        right: 18px !important;
        left: auto !important;
        width: 278px;
        max-height: min(330px, calc(100dvh - 510px));
    }
}

@media (min-width: 1081px) and (max-width: 1360px) and (min-height: 651px) {
    .notification-list {
        top: 359px !important;
        right: 18px !important;
        left: auto !important;
        width: 248px;
        max-height: min(330px, calc(100dvh - 510px));
    }
}

/* Mid-size command deck: tablets, foldables and narrow desktop windows */
@media (min-width: 601px) and (max-width: 900px) and (orientation: portrait) {
    .command-deck {
        left: max(10px, env(safe-area-inset-left));
        right: max(10px, env(safe-area-inset-right));
        bottom: max(10px, env(safe-area-inset-bottom));
        width: auto !important;
        height: 174px;
        min-height: 174px;
        padding: 7px;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 36px 62px 46px;
        gap: 8px !important;
        overflow: hidden;
    }

    .command-deck>.room-buttons,
    .command-deck>.action-buttons,
    .command-deck>.survival-actions {
        position: static;
        width: 100%;
        min-width: 0;
        min-height: 0;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .room-buttons {
        grid-row: 1;
    }

    .action-buttons {
        grid-row: 2;
    }

    .survival-actions {
        grid-row: 3;
    }

    .room-buttons,
    .action-buttons {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px !important;
    }

    .survival-actions {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px !important;
    }

    .command-deck .room-btn,
    .command-deck .action-btn:not([style*="display: none"]),
    .command-deck .survival-btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .command-deck .room-btn {
        height: 36px !important;
        min-height: 36px !important;
        padding: 3px 6px !important;
        flex-direction: row;
        gap: 6px;
    }

    .room-buttons .room-btn>span {
        font-size: 12px !important;
    }

    .room-buttons .room-btn small {
        width: auto;
        min-height: 0;
        font-size: 8px;
    }

    .command-deck .action-btn:not([style*="display: none"]) {
        height: 62px !important;
        min-height: 62px !important;
        padding: 4px !important;
        gap: 3px !important;
    }

    .action-buttons button>span {
        font-size: 17px !important;
    }

    .action-buttons button small {
        min-height: 12px;
        font-size: 8px !important;
    }

    .action-buttons button em {
        min-height: 9px;
        font-size: 6px !important;
    }

    .command-deck .survival-btn {
        height: 46px !important;
        min-height: 46px !important;
        padding: 3px 4px !important;
        flex-direction: row;
        gap: 4px !important;
    }

    .survival-actions button>span {
        font-size: 12px !important;
    }

    .survival-actions button small {
        width: auto;
        min-height: 0;
        font-size: 7px !important;
    }

    .survival-actions button em {
        display: none;
    }

    .event-feed {
        bottom: calc(max(10px, env(safe-area-inset-bottom)) + 186px);
    }
}

@media (min-width: 601px) and (max-width: 900px) and (orientation: landscape) and (min-height: 651px) {
    .command-deck {
        left: max(10px, env(safe-area-inset-left));
        right: max(10px, env(safe-area-inset-right));
        bottom: max(10px, env(safe-area-inset-bottom));
        width: auto !important;
        height: 96px;
        min-height: 96px;
        padding: 7px;
        grid-template-columns: minmax(0, 28fr) minmax(0, 33fr) minmax(0, 39fr);
        grid-template-rows: 80px;
        gap: 7px !important;
        overflow: hidden;
    }

    .command-deck>.room-buttons,
    .command-deck>.action-buttons,
    .command-deck>.survival-actions {
        position: static;
        grid-row: 1;
        width: 100%;
        height: 80px;
        min-width: 0;
        min-height: 80px;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .room-buttons {
        grid-column: 1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }

    .action-buttons {
        grid-column: 2;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }

    .survival-actions {
        grid-column: 3;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
    }

    .command-deck .room-btn,
    .command-deck .action-btn:not([style*="display: none"]),
    .command-deck .survival-btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 80px !important;
        min-height: 80px !important;
        margin: 0 !important;
        padding: 5px 3px !important;
        gap: 4px !important;
        flex-direction: column;
    }

    .command-deck button>span {
        font-size: 16px !important;
    }

    .command-deck button small {
        min-height: 13px;
        font-size: 7px !important;
    }

    .command-deck button em {
        min-height: 8px;
        font-size: 5.5px !important;
    }

    .survival-actions button em {
        display: none;
    }

    .event-feed {
        bottom: calc(max(10px, env(safe-area-inset-bottom)) + 108px);
    }
}

/* Keep the primary title-screen CTA on one line at every breakpoint */
#start-game-btn,
#start-game-btn > span {
    white-space: nowrap !important;
}
#start-game-btn { flex-wrap: nowrap; }

/* Cinematic game-over transmission */
#game-over-screen {
    position: fixed;
    inset: 0;
    z-index: 2200;
    width: 100%;
    height: 100dvh;
    padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)) !important;
    display: grid;
    place-items: center start;
    justify-content: start !important;
    align-items: center !important;
    overflow: hidden !important;
    isolation: isolate;
    background: #070a08;
}

#game-over-screen.hidden { display: none !important; }

#game-over-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(90deg, rgba(3, 6, 4, .97) 0%, rgba(3, 6, 4, .82) 31%, rgba(3, 6, 4, .2) 68%, rgba(3, 6, 4, .46) 100%),
        linear-gradient(180deg, rgba(4, 7, 5, .18), rgba(4, 7, 5, .66)),
        url('../images/game-over-bunker.png') 58% center / cover no-repeat;
    transform: scale(1.015);
    animation: game-over-drift 18s ease-out both;
}

#game-over-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .34;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 4px),
        radial-gradient(circle at 75% 18%, rgba(182, 65, 40, .18), transparent 24%);
    mix-blend-mode: screen;
}

#game-over-screen .game-over-content {
    position: relative;
    width: min(570px, calc(100vw - 48px));
    max-width: none !important;
    max-height: calc(100dvh - 48px);
    margin: 0 0 0 clamp(0px, 4vw, 64px);
    padding: clamp(26px, 4vw, 46px);
    overflow: auto;
    text-align: left;
    color: var(--paper);
    border: 1px solid rgba(232, 167, 76, .34);
    border-left: 3px solid #b6603e;
    border-radius: 3px;
    background:
        linear-gradient(90deg, rgba(182, 96, 62, .045) 1px, transparent 1px) 0 0 / 31px 100%,
        linear-gradient(145deg, rgba(17, 23, 18, .96), rgba(5, 9, 7, .985));
    box-shadow: 0 34px 110px rgba(0, 0, 0, .78), inset 0 1px rgba(255, 255, 255, .035);
    backdrop-filter: blur(12px);
}

#game-over-screen .game-over-content::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, .025);
    border-radius: inherit;
}

#game-over-screen .game-over-content::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 42%;
    height: 3px;
    background: linear-gradient(90deg, #b6603e, var(--amber), transparent);
}

.game-over-code {
    margin: 0 0 22px;
    color: #767d72;
    font: 700 8px/1 "DM Sans", sans-serif;
    letter-spacing: .18em;
}

#game-over-screen .modal-kicker {
    margin-bottom: 10px;
    color: #d78168 !important;
}

#game-over-screen .game-over-content h1 {
    display: block;
    margin: 0 0 18px;
    color: var(--paper);
    font: 800 clamp(52px, 7vw, 82px)/.86 "Barlow Condensed", sans-serif;
    letter-spacing: -.015em;
    text-align: left;
    text-shadow: 0 8px 30px rgba(0, 0, 0, .7);
}

#game-over-screen .game-over-content h1::after {
    position: static;
    display: block;
    width: 72px;
    height: 2px;
    margin-top: 18px;
    transform: none;
    background: linear-gradient(90deg, #b6603e, transparent);
}

#game-over-screen .game-over-message {
    max-width: 46ch;
    margin: 0 0 22px;
    color: #c7c8bd;
    font: 500 14px/1.55 "DM Sans", sans-serif !important;
    text-shadow: none;
}

.game-over-record {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    gap: 10px;
    margin-bottom: 16px;
}

.game-over-record > div {
    min-width: 0;
    min-height: 112px;
    padding: 14px;
    border: 1px solid var(--line);
    background: rgba(1, 5, 3, .48);
}

.game-over-record small {
    display: block;
    margin-bottom: 9px;
    color: #7f877b;
    font: 700 7px/1 "DM Sans", sans-serif;
    letter-spacing: .16em;
}

.game-over-record-primary > span {
    display: block;
    color: #aeb2a7;
    font-size: 10px;
}

.game-over-record-primary strong {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 8px;
}

.game-over-record-primary b {
    color: var(--amber-bright);
    font: 800 42px/.8 "Barlow Condensed", sans-serif;
}

.game-over-record-primary em {
    color: #8e9589;
    font: 700 9px/1 "DM Sans", sans-serif;
    font-style: normal;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.game-over-record-signal {
    display: grid;
    align-content: start;
}

.game-over-record-signal i {
    width: 8px;
    height: 8px;
    margin: 3px 0 12px;
    border-radius: 50%;
    background: #b64a35;
    box-shadow: 0 0 0 4px rgba(182, 74, 53, .1), 0 0 18px rgba(182, 74, 53, .45);
    animation: game-over-signal 1.8s ease-in-out infinite;
}

.game-over-record-signal strong {
    color: #d78168;
    font: 700 13px/1.05 "Barlow Condensed", sans-serif;
    letter-spacing: .05em;
}

#game-over-screen .game-over-final-note {
    margin: 0 0 18px;
    padding: 11px 13px;
    color: #92998e;
    border-left: 2px solid rgba(232, 167, 76, .42);
    background: rgba(232, 167, 76, .045);
    font: 500 10px/1.5 "DM Sans", sans-serif !important;
    text-shadow: none;
}

.game-over-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

#game-over-screen .game-over-actions button {
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 8px 14px;
    border: 1px solid var(--line-hot);
    border-radius: 2px;
    color: #11150f;
    background: var(--amber);
    box-shadow: none;
    font: 700 9px/1 "DM Sans", sans-serif;
    letter-spacing: .12em;
    white-space: nowrap;
}

#game-over-screen #main-menu-btn {
    color: #b2b7ac;
    border-color: var(--line);
    background: rgba(255, 255, 255, .025);
}

#game-over-screen .game-over-actions button:hover {
    color: #11150f;
    border-color: var(--amber-bright);
    background: var(--amber-bright);
}

#game-over-screen #main-menu-btn:hover {
    color: var(--paper);
    border-color: var(--line-hot);
    background: rgba(232, 167, 76, .08);
}

@keyframes game-over-drift {
    from { transform: scale(1.045); filter: saturate(.78) brightness(.72); }
    to { transform: scale(1.015); filter: saturate(.9) brightness(.82); }
}

@keyframes game-over-signal {
    0%, 100% { opacity: .35; }
    50% { opacity: 1; }
}

@media (max-width: 600px) {
    #game-over-screen {
        padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
        place-items: center;
        justify-content: center !important;
    }
    #game-over-screen::before {
        background:
            linear-gradient(180deg, rgba(3, 6, 4, .6), rgba(3, 6, 4, .88)),
            linear-gradient(90deg, rgba(3, 6, 4, .86), rgba(3, 6, 4, .28)),
            url('../images/game-over-bunker.png') 68% center / cover no-repeat;
    }
    #game-over-screen .game-over-content {
        width: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));
        max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        margin: 0;
        padding: 22px 17px 17px;
    }
    .game-over-code { margin-bottom: 14px; font-size: 6.5px; }
    #game-over-screen .game-over-content h1 { margin-bottom: 13px; font-size: clamp(44px, 15vw, 60px); }
    #game-over-screen .game-over-content h1::after { margin-top: 13px; }
    #game-over-screen .game-over-message { margin-bottom: 14px; font-size: 11px !important; line-height: 1.4; }
    .game-over-record { gap: 7px; margin-bottom: 11px; }
    .game-over-record > div { min-height: 92px; padding: 11px; }
    .game-over-record small { margin-bottom: 7px; font-size: 6px; }
    .game-over-record-primary > span { font-size: 8px; }
    .game-over-record-primary b { font-size: 34px; }
    .game-over-record-signal strong { font-size: 11px; }
    #game-over-screen .game-over-final-note { margin-bottom: 12px; padding: 8px 10px; font-size: 8px !important; }
    .game-over-actions { grid-template-columns: 1fr; gap: 7px; }
    #game-over-screen .game-over-actions button { height: 42px; font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    #game-over-screen::before,
    .game-over-record-signal i { animation: none; }
}

/* ==========================================================================
   Campaign layer: phase banner, resource trends, logbook, day summary,
   victory screen. Reuses the existing tokens so it reads as one system.
   ========================================================================== */

.phase-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 8px 10px;
    border: 1px solid var(--line-hot);
    border-radius: 3px;
    background: rgba(232, 167, 76, .06);
}

.phase-banner span {
    color: var(--amber);
    font: 700 8px/1 "DM Sans", sans-serif;
    letter-spacing: .18em;
}

.phase-banner b {
    flex: 1;
    color: var(--paper);
    font: 700 15px/1 "Barlow Condensed", sans-serif;
    letter-spacing: .04em;
}

.phase-track {
    display: flex;
    gap: 4px;
}

.phase-track i {
    width: 14px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .16);
}

.phase-track i.done {
    background: var(--moss, #7f9c6a);
}

.phase-track i.active {
    background: var(--amber-bright);
    box-shadow: 0 0 6px rgba(232, 167, 76, .5);
}

/* Trend marks tell the player which way a system is heading, not just where
   it stands right now. */
.trend-mark {
    margin-left: 5px;
    font-size: 8px;
    font-style: normal;
    line-height: 1;
}

.trend-mark[data-trend="up"] {
    color: var(--moss, #7f9c6a);
}

.trend-mark[data-trend="down"] {
    color: var(--danger);
}

.trend-mark[data-trend="flat"] {
    /* Was rgba(255,255,255,.3) — 2.65:1, below the 4.5:1 AA threshold at 8px.
       A steady resource is the most common state, so this glyph is on screen
       almost always and needs to be legible rather than decorative. */
    color: rgba(255, 255, 255, .62);
}

.mini-track i.is-low {
    background: var(--amber-bright);
}

.mini-track i.is-critical {
    background: var(--danger);
    animation: critical-pulse 1.6s ease-in-out infinite;
}

@keyframes critical-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .45; }
}

.survival-btn.is-locked {
    opacity: .32;
    filter: grayscale(1);
}

.survival-btn.is-ready {
    border-color: var(--amber-bright);
    box-shadow: 0 0 0 1px rgba(232, 167, 76, .3);
}

/* Logbook: the state already kept twelve entries, the HUD only showed one. */
.event-feed {
    flex-wrap: wrap;
}

.feed-toggle {
    position: relative;
    margin-left: auto;
    padding: 3px 8px;
    color: var(--amber);
    border: 1px solid var(--line);
    border-radius: 2px;
    background: transparent;
    font-size: 9px;
    line-height: 1;
    cursor: pointer;
    transition: .2s ease;
}

/* The feed bar clips its children (overflow:hidden), so an overflowing
   pseudo-element can't extend the hit area. Instead the button fills the
   bar's full height with a transparent border, which grows the target to the
   WCAG 2.5.5 minimum while the visible chevron box stays small. */
.feed-toggle {
    min-width: 44px;
    align-self: stretch;
    border-color: transparent;
    background-clip: padding-box;
}

.feed-toggle:hover {
    border-color: var(--line-hot);
}

.feed-toggle:hover {
    border-color: var(--line-hot);
    background: rgba(232, 167, 76, .1);
}

.logbook-entries {
    display: none;
    width: 100%;
    max-height: 172px;
    overflow-y: auto;
    margin: 8px 0 2px;
    padding: 8px 0 0 18px;
    border-top: 1px solid var(--line);
    list-style: decimal;
}

.event-feed.is-open {
    overflow: visible;
}

.event-feed.is-open .logbook-entries {
    display: block;
}

.event-feed.is-open .feed-toggle {
    transform: rotate(180deg);
}

.logbook-entries li {
    margin-bottom: 5px;
    color: #a9af9f;
    font-size: 9.5px;
    line-height: 1.45;
}

.logbook-entries li:first-child {
    color: var(--paper);
}

/* Day summary: the end-of-day ritual that makes the next day worth starting. */
.day-summary-card {
    width: min(560px, 94vw);
}

.day-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 20px;
}

.summary-cell {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: rgba(255, 255, 255, .022);
}

.summary-cell small {
    color: #8f958a;
    font: 600 8px/1 "DM Sans", sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.summary-cell b {
    font: 700 19px/1 "Barlow Condensed", sans-serif;
}

.summary-cell.is-up b {
    color: var(--moss, #7f9c6a);
}

.summary-cell.is-down b {
    color: var(--danger);
}

.summary-cell.is-flat b {
    color: #8f958a;
}

.summary-heading {
    margin: 0 0 8px;
    color: var(--amber);
    font: 700 8px/1 "DM Sans", sans-serif;
    letter-spacing: .2em;
}

.day-summary-events {
    margin: 0 0 18px;
    padding-left: 17px;
    list-style: square;
}

.day-summary-events li {
    margin-bottom: 6px;
    color: #a9af9f;
    font-size: 11px;
    line-height: 1.5;
}

.summary-next {
    margin: 0 0 18px;
    padding: 9px 11px;
    color: var(--paper);
    border-left: 2px solid var(--amber);
    background: rgba(232, 167, 76, .05);
    font-size: 11px;
}

.summary-continue {
    width: 100%;
    padding: 12px;
    color: #10160f;
    border: 0;
    border-radius: 3px;
    background: var(--amber-bright);
    font: 700 11px/1 "DM Sans", sans-serif;
    letter-spacing: .16em;
    cursor: pointer;
    transition: .2s ease;
}

.summary-continue:hover {
    filter: brightness(1.12);
}

/* Victory: the run finally has an ending that is not death. */
.victory-content {
    border-color: var(--amber-bright);
}

.victory-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 24px 0 16px;
}

.victory-stats span {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 13px 10px;
    border: 1px solid var(--line-hot);
    border-radius: 3px;
    background: rgba(232, 167, 76, .05);
}

.victory-stats small {
    color: var(--amber);
    font: 700 7.5px/1.3 "DM Sans", sans-serif;
    letter-spacing: .14em;
}

.victory-stats b {
    font: 700 26px/1 "Barlow Condensed", sans-serif;
}

.victory-roster {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
    margin-bottom: 22px;
}

.victory-roster span {
    padding: 5px 10px;
    color: #bfc3b7;
    border: 1px solid var(--line);
    border-radius: 20px;
    font-size: 10px;
}

@media (max-width: 768px) {
    .day-summary-grid,
    .victory-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .logbook-entries {
        max-height: 124px;
    }

    .phase-banner b {
        font-size: 13px;
    }
}

/* A phase briefing has a single acknowledge card; the three-column grid would
   leave it stranded in the left third. */
.modal-options:has(> .modal-option:only-child) {
    grid-template-columns: 1fr;
}

.modal-options > .modal-option:only-child {
    min-height: 0;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    text-align: left;
}

.modal-options > .modal-option:only-child .option-icon {
    flex: 0 0 auto;
    margin-bottom: 0;
}

.modal-options > .modal-option:only-child p {
    margin: 4px 0 0;
}

.modal-options > .modal-option:only-child em {
    margin-top: 0;
}

/* Two-option decisions should split evenly rather than leave a gap. */
.modal-options:has(> .modal-option:first-child:nth-last-child(2)) {
    grid-template-columns: repeat(2, 1fr);
}

.day-summary {
    z-index: 1600;
}

/* The victory screen inherits the game-over shell, which is styled for death:
   red title, and buttons keyed to the game-over IDs. A win needs to read as a
   win, so the colour is reclaimed and the buttons are restyled to match. */
.victory-content h1 {
    color: var(--amber-bright) !important;
    text-shadow: 0 0 18px rgba(232, 167, 76, .45) !important;
}

.victory-content h1::after {
    background: var(--amber-bright) !important;
}

#victory-restart-btn,
#victory-menu-btn {
    min-width: 190px;
    margin: 0 6px;
    padding: 13px 26px;
    border-radius: 3px;
    font: 700 11px/1 "DM Sans", sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: .2s ease;
}

#victory-restart-btn {
    color: #10160f;
    border: 1px solid var(--amber-bright);
    background: var(--amber-bright);
}

#victory-restart-btn:hover {
    filter: brightness(1.12);
}

#victory-menu-btn {
    color: var(--paper);
    border: 1px solid var(--line-hot);
    background: transparent;
}

#victory-menu-btn:hover {
    background: rgba(232, 167, 76, .1);
}

@media (max-width: 768px) {
    #victory-restart-btn,
    #victory-menu-btn {
        display: block;
        width: 100%;
        min-width: 0;
        margin: 0 0 9px;
    }
}

/* The trend mark is a third child in what was a two-column grid, so it wrapped
   onto its own line. Give the row an explicit column for it. */
.system-row {
    grid-template-columns: 1fr auto auto;
}

.system-row .trend-mark {
    margin-left: 0;
    min-width: 9px;
    text-align: center;
}

/* The start-screen CTAs kept their labels on one line only inside the mobile
   media queries. Guard the base rule too, so a longer translation cannot wrap
   them on desktop. */
.start-buttons button {
    white-space: nowrap;
}

.start-buttons .primary-cta span {
    white-space: nowrap;
}

/* Victory finale: a hopeful counterpoint to the failure screen. */
#victory-screen {
    z-index: 2600;
    display: grid;
    place-items: center start;
    justify-content: start !important;
    align-items: center !important;
    box-sizing: border-box;
    min-height: 100dvh;
    padding: clamp(18px, 4vw, 64px);
    overflow: auto;
    isolation: isolate;
    background:
        linear-gradient(90deg, rgba(4, 7, 5, .98) 0%, rgba(5, 9, 6, .9) 31%, rgba(5, 8, 5, .4) 62%, rgba(3, 4, 3, .14) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, .04) 54%, rgba(0, 0, 0, .62)),
        url('../images/victory-bunker.png') center / cover no-repeat;
}

#victory-screen::before {
    content: "";
    position: fixed;
    inset: -3%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 77% 41%, rgba(255, 202, 104, .23), transparent 18%),
        radial-gradient(circle at 9% 32%, rgba(115, 173, 101, .1), transparent 24%),
        repeating-linear-gradient(0deg, rgba(255,255,255,.016) 0 1px, transparent 1px 4px);
    animation: victory-light-breathe 7s ease-in-out infinite alternate;
}

#victory-screen::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    box-shadow: inset 0 0 130px 26px rgba(0, 0, 0, .72);
}

@keyframes victory-light-breathe {
    from { opacity: .72; transform: scale(1); }
    to { opacity: 1; transform: scale(1.018); }
}

#victory-screen .victory-content {
    position: relative;
    width: min(590px, 48vw);
    max-width: none !important;
    box-sizing: border-box;
    padding: clamp(24px, 3.2vw, 46px);
    color: #e8eadf;
    border: 1px solid rgba(212, 181, 99, .68);
    border-left: 3px solid #d6ad4f;
    border-radius: 4px;
    background:
        linear-gradient(135deg, rgba(121, 152, 87, .07), transparent 38%),
        rgba(5, 10, 7, .91);
    box-shadow:
        0 28px 80px rgba(0, 0, 0, .62),
        inset 0 0 0 1px rgba(255, 228, 151, .05),
        0 0 52px rgba(189, 150, 60, .08);
    backdrop-filter: blur(10px) saturate(.82);
    text-align: left;
}

#victory-screen .victory-content::before,
#victory-screen .victory-content::after {
    content: "";
    position: absolute;
    width: 34px;
    height: 34px;
    pointer-events: none;
}

#victory-screen .victory-content::before {
    top: 9px;
    right: 9px;
    border-top: 1px solid rgba(230, 195, 107, .72);
    border-right: 1px solid rgba(230, 195, 107, .72);
}

#victory-screen .victory-content::after {
    bottom: 9px;
    left: 9px;
    border-bottom: 1px solid rgba(126, 177, 103, .58);
    border-left: 1px solid rgba(126, 177, 103, .58);
}

.victory-code {
    margin: 0 0 19px;
    color: rgba(210, 215, 196, .58);
    font: 700 8px/1.2 "DM Sans", sans-serif;
    letter-spacing: .24em;
    text-transform: uppercase;
}

#victory-screen .modal-kicker {
    margin: 0 0 7px;
    color: #88ad72;
    font-size: 9px;
    letter-spacing: .25em;
}

#victory-screen .victory-content h1 {
    position: static;
    margin: 0 0 13px;
    color: #f3d383 !important;
    font: 700 clamp(42px, 5vw, 72px)/.88 "Barlow Condensed", sans-serif !important;
    letter-spacing: .035em !important;
    text-shadow: 0 0 26px rgba(240, 190, 79, .26) !important;
    text-transform: uppercase;
}

#victory-screen .victory-content h1::after {
    position: static;
    display: block;
    width: 82px;
    height: 2px;
    margin: 16px 0 0;
    transform: none;
    background: linear-gradient(90deg, #e2b759, transparent) !important;
    box-shadow: none;
}

#victory-screen .victory-copy {
    max-width: 500px;
    margin: 0 0 16px;
    color: rgba(229, 232, 217, .78);
    font: 500 12px/1.65 "DM Sans", sans-serif;
}

.victory-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    color: #a8c990;
    border: 1px solid rgba(126, 177, 103, .34);
    border-radius: 2px;
    background: rgba(105, 151, 85, .08);
    font: 700 8px/1 "DM Sans", sans-serif;
    letter-spacing: .17em;
}

.victory-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #91bc77;
    box-shadow: 0 0 0 4px rgba(145, 188, 119, .1), 0 0 14px #91bc77;
    animation: victory-signal 1.8s ease-in-out infinite;
}

@keyframes victory-signal {
    50% { opacity: .58; box-shadow: 0 0 0 7px rgba(145, 188, 119, .03), 0 0 18px #91bc77; }
}

#victory-screen .victory-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 18px 0 13px;
}

#victory-screen .victory-stats span {
    display: flex;
    min-width: 0;
    min-height: 68px;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 12px;
    border: 1px solid rgba(214, 173, 79, .24);
    border-radius: 2px;
    background: linear-gradient(145deg, rgba(224, 181, 82, .075), rgba(95, 134, 76, .035));
}

#victory-screen .victory-stats small {
    color: rgba(211, 215, 197, .6);
    font: 700 7px/1.25 "DM Sans", sans-serif;
    letter-spacing: .13em;
}

#victory-screen .victory-stats b {
    color: #f1d584;
    font: 700 28px/1 "Barlow Condensed", sans-serif;
}

.victory-roster-label {
    margin: 0 0 7px;
    color: rgba(211, 215, 197, .5);
    font: 700 7px/1.2 "DM Sans", sans-serif;
    letter-spacing: .18em;
}

#victory-screen .victory-roster {
    display: flex;
    min-height: 23px;
    justify-content: flex-start;
    gap: 6px;
    margin: 0 0 13px;
}

#victory-screen .victory-roster span {
    padding: 5px 9px;
    color: #c9d7bd;
    border-color: rgba(126, 177, 103, .28);
    background: rgba(126, 177, 103, .06);
    font-size: 8px;
}

.victory-final-note {
    margin: 0 0 17px;
    padding: 9px 11px;
    color: rgba(235, 220, 174, .75);
    border-left: 2px solid rgba(214, 173, 79, .72);
    background: rgba(214, 173, 79, .045);
    font: italic 500 9px/1.55 "DM Sans", sans-serif;
}

.victory-actions {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 9px;
}

#victory-screen .victory-actions button {
    width: 100%;
    min-width: 0;
    height: 46px;
    box-sizing: border-box;
    margin: 0;
    padding: 0 14px;
    font-size: 9px;
}

@media (max-width: 600px) {
    #victory-screen {
        place-items: center;
        justify-content: center !important;
        align-items: center !important;
        min-height: 100dvh;
        padding: 12px;
        background:
            linear-gradient(180deg, rgba(3, 7, 5, .45), rgba(3, 7, 5, .86) 70%, rgba(3, 7, 5, .96)),
            url('../images/victory-bunker.png') 66% center / cover no-repeat;
    }

    #victory-screen .victory-content {
        width: min(100%, 430px);
        padding: 20px 18px 18px;
        background: rgba(5, 10, 7, .92);
    }

    .victory-code { margin-bottom: 12px; font-size: 6.5px; }
    #victory-screen .modal-kicker { font-size: 7px; }
    #victory-screen .victory-content h1 { margin-bottom: 9px; font-size: clamp(38px, 13vw, 54px) !important; }
    #victory-screen .victory-content h1::after { margin-top: 12px; }
    #victory-screen .victory-copy { margin-bottom: 11px; font-size: 9px; line-height: 1.5; }
    .victory-status { padding: 6px 9px; font-size: 6.5px; }
    #victory-screen .victory-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin: 12px 0 10px; }
    #victory-screen .victory-stats span { min-height: 58px; padding: 8px 7px; }
    #victory-screen .victory-stats small { font-size: 5.7px; letter-spacing: .08em; }
    #victory-screen .victory-stats b { font-size: 23px; }
    .victory-roster-label { font-size: 6px; }
    #victory-screen .victory-roster { min-height: 18px; margin-bottom: 8px; }
    #victory-screen .victory-roster span { padding: 4px 7px; font-size: 6.5px; }
    .victory-final-note { margin-bottom: 11px; padding: 7px 9px; font-size: 7px; }
    .victory-actions { grid-template-columns: 1fr; gap: 6px; }
    #victory-screen .victory-actions button { height: 40px; font-size: 7.5px; }
}

@media (prefers-reduced-motion: reduce) {
    #victory-screen::before,
    .victory-status i { animation: none; }
}

/* ==========================================================================
   Story imagery — generated stills for the campaign's narrative beats.
   Every still sits behind the existing copy, so text remains the readable
   layer and a missing image degrades to the original text-only layout.
   ========================================================================== */

.story-still {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    margin-bottom: 18px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: rgba(0, 0, 0, .4);
}

.story-still img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Pull the generated art toward the UI's amber/olive range so the stills
       and the interface read as one piece rather than pasted-in stock. */
    filter: saturate(.88) contrast(1.04);
}

/* Bottom fade so overlaid copy never sits on busy pixels. */
.story-still::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 45%, rgba(10, 16, 12, .78) 100%);
}

.story-still.is-banner {
    aspect-ratio: 21 / 9;
    margin-bottom: 16px;
}

/* Survivor portraits inside option cards, replacing the glyph badge. */
.option-portrait {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    margin-bottom: 14px;
    overflow: hidden;
    border: 1px solid var(--line-hot);
    border-radius: 2px;
}

.option-portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.85) contrast(1.05);
    transition: transform .3s ease;
}

.modal-option:hover:not(:disabled) .option-portrait img {
    transform: scale(1.04);
}

.modal-option:disabled .option-portrait img {
    filter: saturate(.2) contrast(.95) brightness(.7);
}

/* -------------------------------------------------------------- prologue */

.story-prologue {
    position: fixed;
    inset: 0;
    z-index: 2400;
    display: grid;
    place-items: center;
    padding: 24px;
    background: #070b09;
}

/* The overlay is opaque from the first frame. Fading it *in* would let the
   start screen tearing down and the 3D scene appearing show through
   underneath — the jump this is here to hide. Only the frame's contents
   animate in. */
.story-prologue.is-opening .prologue-frame {
    opacity: 0;
}

.prologue-frame {
    width: min(880px, 96vw);
    opacity: 1;
    /* Both the entry fade and the exit scale live here so a later rule can't
       silently drop one of them. */
    transition: opacity .45s ease .05s, transform .7s ease;
}

.prologue-frame .story-still {
    aspect-ratio: 16 / 9;
    margin-bottom: 0;
    border: 1px solid var(--line-hot);
    border-radius: 4px 4px 0 0;
    border-bottom: 0;
}

.prologue-frame .story-still img {
    animation: prologue-drift 9s ease-out forwards;
}

/* A slow push-in keeps a still frame from feeling like a dead screenshot. */
@keyframes prologue-drift {
    from { transform: scale(1.06); }
    to { transform: scale(1); }
}

.prologue-caption {
    margin: 0;
    padding: 22px 26px;
    color: var(--paper);
    border: 1px solid var(--line-hot);
    border-top: 0;
    background: linear-gradient(145deg, rgba(28, 37, 29, .98), rgba(10, 16, 12, .99));
    font: 400 clamp(13px, 1.6vw, 16px)/1.6 "DM Sans", sans-serif;
    min-height: 84px;
}

.prologue-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 16px;
}

.prologue-progress {
    display: flex;
    gap: 6px;
}

.prologue-progress i {
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .16);
    transition: background .3s ease;
}

.prologue-progress i.done { background: var(--moss, #7f9c6a); }
.prologue-progress i.active { background: var(--amber-bright); }

.prologue-buttons {
    display: flex;
    gap: 9px;
}

.prologue-skip,
.prologue-next {
    padding: 11px 22px;
    border-radius: 3px;
    font: 700 10px/1 "DM Sans", sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: .2s ease;
}

.prologue-skip {
    color: #8f958a;
    border: 1px solid var(--line);
    background: transparent;
}

.prologue-skip:hover {
    color: var(--paper);
    border-color: var(--line-hot);
}

.prologue-next {
    color: #10160f;
    border: 1px solid var(--amber-bright);
    background: var(--amber-bright);
}

.prologue-next:hover { filter: brightness(1.12); }

/* Ending screens: the still anchors the card rather than floating above it. */
.victory-content .story-still,
.game-over-content .story-still {
    aspect-ratio: 21 / 9;
    margin: -1px -1px 20px;
    width: calc(100% + 2px);
    border-radius: 4px 4px 0 0;
    border: 0;
    border-bottom: 1px solid var(--line-hot);
}

.game-over-content .story-still img {
    filter: saturate(.55) contrast(1.06) brightness(.85);
}

@media (max-width: 768px) {
    .story-still,
    .prologue-frame .story-still {
        aspect-ratio: 16 / 10;
    }

    .story-still.is-banner,
    .victory-content .story-still,
    .game-over-content .story-still {
        aspect-ratio: 16 / 9;
    }

    .prologue-caption {
        padding: 16px 18px;
        min-height: 0;
    }

    .prologue-controls {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .prologue-buttons { justify-content: stretch; }
    .prologue-buttons button { flex: 1; }
    .prologue-progress { justify-content: center; }

    .option-portrait { aspect-ratio: 16 / 9; margin-bottom: 10px; }
}

/* Users who ask for less motion get the still, not the push-in. */
@media (prefers-reduced-motion: reduce) {
    .prologue-frame .story-still img { animation: none; }
    .story-prologue { animation: none; }
    .modal-option:hover:not(:disabled) .option-portrait img { transform: none; }
}

/* Prologue panel swap and exit.
   The image is decoded before the swap (see story_images.js), and the frame
   cross-fades rather than cutting, so Next never shows a black rectangle. */
.story-prologue .story-still {
    background: #0a0f0c;
    transition: opacity .18s ease;
}

.story-prologue .story-still.is-swapping {
    opacity: 0;
}

/* The overlay dissolves into the live 3D bunker instead of vanishing, so the
   last panel hands over to the scene the player is about to inhabit. */
.story-prologue {
    transition: opacity .7s ease;
}

.story-prologue.is-dissolving {
    opacity: 0;
    pointer-events: none;
}

/* Fading a fully opaque backdrop would reveal the scene abruptly at the end;
   scaling the frame down slightly as it goes makes the handover feel deliberate. */
.story-prologue.is-dissolving .prologue-frame {
    transform: scale(.985);
    transition: transform .7s ease;
}

@media (prefers-reduced-motion: reduce) {
    .story-prologue,
    .story-prologue .story-still,
    .prologue-frame {
        transition: none;
    }
}

/* ==========================================================================
   Scrollbars.
   Every scrollable surface in the game used the raw OS scrollbar — a bright
   grey strip that reads as browser chrome sitting inside a weathered
   civil-defense terminal. These restyle it as part of the panel: a recessed
   track like a slot milled into the casing, with an amber indicator riding
   in it.
   ========================================================================== */

/* Two mechanisms, because no single one covers every engine:

   - `scrollbar-color` / `scrollbar-width` are the standard properties. Firefox
     needs them, and recent Chromium (which draws non-styleable *overlay*
     scrollbars and ignores ::-webkit-scrollbar entirely) honours the colour
     from them too. This is the rule that actually themes the bar for most
     players today.
   - `::-webkit-scrollbar` below still covers older WebKit/Blink builds that
     draw classic space-taking scrollbars.

   Do NOT wrap the standard properties in `@supports not (selector(::-webkit-scrollbar))`:
   Chromium reports that selector as supported while rendering overlay bars,
   so the gate evaluates false and leaves the scrollbar unstyled. */
.survival-modal-card,
.settings-content,
.game-over-content,
.victory-content,
.start-content,
.logbook-entries,
.day-summary-events,
.modal-options,
.overlay-screen,
.computer-screen-content,
.story-prologue,
.prologue-frame,
.survival-modal,
#game-over-screen .game-over-content {
    scrollbar-width: thin;
    scrollbar-color: rgba(232, 167, 76, .55) rgba(10, 16, 12, .55);
}

/* WebKit / Blink — the detailed treatment. */
.survival-modal-card::-webkit-scrollbar,
.settings-content::-webkit-scrollbar,
.game-over-content::-webkit-scrollbar,
.victory-content::-webkit-scrollbar,
.logbook-entries::-webkit-scrollbar,
.day-summary-events::-webkit-scrollbar,
.modal-options::-webkit-scrollbar,
.overlay-screen::-webkit-scrollbar,
.computer-screen-content::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.survival-modal-card::-webkit-scrollbar-track,
.settings-content::-webkit-scrollbar-track,
.game-over-content::-webkit-scrollbar-track,
.victory-content::-webkit-scrollbar-track,
.logbook-entries::-webkit-scrollbar-track,
.day-summary-events::-webkit-scrollbar-track,
.modal-options::-webkit-scrollbar-track,
.overlay-screen::-webkit-scrollbar-track,
.computer-screen-content::-webkit-scrollbar-track {
    /* A milled slot: dark, inset, with a hairline edge like the panel seams. */
    background: rgba(0, 0, 0, .32);
    border-left: 1px solid rgba(255, 255, 255, .05);
}

.survival-modal-card::-webkit-scrollbar-thumb,
.settings-content::-webkit-scrollbar-thumb,
.game-over-content::-webkit-scrollbar-thumb,
.victory-content::-webkit-scrollbar-thumb,
.logbook-entries::-webkit-scrollbar-thumb,
.day-summary-events::-webkit-scrollbar-thumb,
.modal-options::-webkit-scrollbar-thumb,
.overlay-screen::-webkit-scrollbar-thumb,
.computer-screen-content::-webkit-scrollbar-thumb {
    /* Amber indicator, inset from the track so the slot stays visible behind
       it — reads as a sliding marker rather than a browser widget. */
    background: linear-gradient(180deg, rgba(232, 167, 76, .62), rgba(184, 128, 54, .62));
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 99px;
    transition: background .2s ease;
}

.survival-modal-card::-webkit-scrollbar-thumb:hover,
.settings-content::-webkit-scrollbar-thumb:hover,
.game-over-content::-webkit-scrollbar-thumb:hover,
.victory-content::-webkit-scrollbar-thumb:hover,
.logbook-entries::-webkit-scrollbar-thumb:hover,
.day-summary-events::-webkit-scrollbar-thumb:hover,
.modal-options::-webkit-scrollbar-thumb:hover,
.overlay-screen::-webkit-scrollbar-thumb:hover,
.computer-screen-content::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--amber-bright), var(--amber));
    background-clip: padding-box;
}

/* The arrow buttons at each end are pure OS chrome — remove them. */
.survival-modal-card::-webkit-scrollbar-button,
.settings-content::-webkit-scrollbar-button,
.game-over-content::-webkit-scrollbar-button,
.victory-content::-webkit-scrollbar-button,
.logbook-entries::-webkit-scrollbar-button,
.day-summary-events::-webkit-scrollbar-button,
.modal-options::-webkit-scrollbar-button,
.overlay-screen::-webkit-scrollbar-button,
.computer-screen-content::-webkit-scrollbar-button {
    display: none;
}

.survival-modal-card::-webkit-scrollbar-corner,
.settings-content::-webkit-scrollbar-corner,
.overlay-screen::-webkit-scrollbar-corner {
    background: transparent;
}

/* The logbook is a narrow strip; a 10px bar would dominate it. */
.logbook-entries::-webkit-scrollbar,
.day-summary-events::-webkit-scrollbar {
    width: 6px;
}

.logbook-entries::-webkit-scrollbar-thumb,
.day-summary-events::-webkit-scrollbar-thumb {
    border-width: 1px;
}

/* Scrolling a modal shouldn't chain to the page behind it. */
.survival-modal-card,
.settings-content,
.game-over-content,
.victory-content,
.logbook-entries,
.computer-screen-content {
    overscroll-behavior: contain;
}

/* Touch devices overlay their own transient scrollbars; a permanent 10px
   gutter just eats horizontal space there. */
@media (hover: none) and (pointer: coarse) {
    .survival-modal-card::-webkit-scrollbar,
    .settings-content::-webkit-scrollbar,
    .game-over-content::-webkit-scrollbar,
    .victory-content::-webkit-scrollbar,
    .overlay-screen::-webkit-scrollbar {
        width: 4px;
    }
}

/* ==========================================================================
   Notification dock — collapsible feed.
   The running feed is useful but heavy: on a busy day it stacks several cards
   over the 3D view. The toggle collapses it to a single badge that still
   reports how much was missed, and the choice persists across sessions.
   ========================================================================== */

/* The centre notification is a fixed banner at top:170px, horizontally
   centred and up to 720px wide. The dock has to clear it both vertically and
   horizontally, so it sits below that banner and hugs the right edge inside
   the objective panel's column rather than floating over the middle. */
/* Two things to clear: the centre notification (a fixed banner at top:170px,
   centred, up to 720px wide) and the objective panel (right:18px, 278px wide,
   ending around y=350). Sitting under the panel in the same right-hand column
   avoids both without covering the 3D view. */
.notification-dock {
    position: absolute;
    top: 366px;
    right: 18px;
    z-index: 80;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
    width: 278px;
    pointer-events: none;
}

/* The list keeps its own styling; the dock only positions it. */
.notification-dock .notification-list {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: 100%;
    max-height: 46vh;
    overflow-y: auto;
    transition: opacity .25s ease, transform .25s ease;
}

.notification-toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 44px;
    min-height: 44px;         /* WCAG 2.5.5 minimum target size */
    padding: 6px 10px;
    color: var(--amber);
    border: 1px solid var(--line);
    border-radius: 3px;
    background: rgba(14, 20, 16, .92);
    box-shadow: var(--shadow);
    backdrop-filter: blur(8px);
    cursor: pointer;
    pointer-events: auto;      /* the dock itself is click-through */
    transition: .2s ease;
}

.notification-toggle:hover {
    color: var(--amber-bright);
    border-color: var(--line-hot);
    background: rgba(24, 32, 25, .95);
}

.notification-toggle-icon {
    font-size: 12px;
    line-height: 1;
}

.notification-count {
    display: none;
    min-width: 16px;
    padding: 1px 4px;
    color: #10160f;
    border-radius: 99px;
    background: var(--amber-bright);
    font: 700 9px/1.4 "DM Sans", sans-serif;
}

/* The count only means something while the feed is hidden. */
.notification-dock.is-collapsed .notification-count.has-unseen {
    display: block;
}

.notification-dock.is-collapsed .notification-list {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    visibility: hidden;
    height: 0;
    overflow: hidden;
}

/* A short pulse when something arrives behind the collapsed feed. */
.notification-toggle.is-pinging {
    animation: dock-ping .7s ease-out;
}

@keyframes dock-ping {
    0% { box-shadow: 0 0 0 0 rgba(232, 167, 76, .45), var(--shadow); }
    100% { box-shadow: 0 0 0 12px rgba(232, 167, 76, 0), var(--shadow); }
}

@media (max-width: 1080px) {
    /* The side panels collapse here, so the dock only has to clear the centre
       notification — which grows taller as it wraps on narrow screens. */
    .notification-dock {
        top: 300px;
        right: 14px;
        width: min(280px, 62vw);
    }
}

@media (max-width: 768px) {
    /* Portrait phones: the banner is nearly full width and wraps to several
       lines, so the dock drops well below it and the list is capped so it
       cannot reach the command deck at the bottom. */
    .notification-dock {
        top: auto;
        bottom: calc(max(14px, env(safe-area-inset-bottom)) + 190px);
        right: 10px;
        width: min(260px, 72vw);
    }

    .notification-dock .notification-list {
        max-height: 30vh;
    }
}

@media (prefers-reduced-motion: reduce) {
    .notification-toggle.is-pinging { animation: none; }
    .notification-dock .notification-list { transition: none; }
}

/* ==========================================================================
   Workshop options as a 2x2 grid.
   The shelter upgrades screen has four cards (salvage + three upgrades). In
   the default three-column grid the fourth wraps alone onto a second row,
   which reads as a mistake; two rows of two is balanced and lets each card
   keep a comfortable width.
   ========================================================================== */
.modal-options.is-quad {
    grid-template-columns: repeat(2, 1fr);
    max-width: 720px;
    margin-inline: auto;
}

@media (max-width: 768px) {
    .modal-options.is-quad {
        grid-template-columns: 1fr;
    }
}