:root {
    --bg-main: #0a0a09;
    --bg-panel: #121110;
    --fg-main: #e4dfd7;
    --fg-muted: #8a847a;
    --line-color: #262421;
    --accent-color: #b83a2e;

    --font-display: 'Unbounded', sans-serif;
    --font-sans: 'IBM Plex Sans', sans-serif;
    --font-serif: 'Spectral', Georgia, serif;
    --font-mono: 'IBM Plex Mono', monospace;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-main);
    color: var(--fg-main);
    font-family: var(--font-sans);
    line-height: 1.68;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

.shell {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

/* Top Navigation Rail */
.top-rail {
    background-color: var(--bg-main);
    border-bottom: 1px solid var(--line-color);
    position: sticky;
    top: 0;
    z-index: 100;
}

.top-rail-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 68px;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.rail-brand {
    text-decoration: none;
    display: flex;
    flex-direction: column;
}

.rail-code {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    color: var(--accent-color);
}

.rail-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--fg-main);
    letter-spacing: -0.02em;
}

.rail-nav {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.rail-nav a {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    color: var(--fg-muted);
    padding: 7px 13px;
    border: 1px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.rail-nav a:hover,
.rail-nav a.active {
    color: var(--fg-main);
    border-color: var(--line-color);
    background-color: var(--bg-panel);
}

.stamp-tag {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-color);
    margin-bottom: 8px;
}

/* Hub Masthead */
.brutalist-hero {
    padding: 64px 0 48px;
    border-bottom: 2px solid var(--line-color);
}

.hero-meta-strip {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    color: var(--fg-muted);
    margin-bottom: 20px;
}

.brutalist-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.1rem);
    line-height: 1.12;
    letter-spacing: -0.03em;
    max-width: 20ch;
    margin-bottom: 20px;
}

.hero-lead {
    font-family: var(--font-serif);
    font-size: 1.18rem;
    color: var(--fg-muted);
    max-width: 64ch;
}

/* Hub Vertical Shaft Levels */
.shaft-list {
    display: flex;
    flex-direction: column;
    margin: 48px 0 72px;
    border: 1px solid var(--line-color);
    background-color: var(--bg-panel);
}

.shaft-level {
    display: grid;
    grid-template-columns: 140px 1fr 210px;
    gap: 32px;
    padding: 40px 36px;
    border-bottom: 1px solid var(--line-color);
    align-items: center;
}

.shaft-level:last-child {
    border-bottom: none;
}

.level-atomic { --accent-color: #c43c2f; }
.level-metro { --accent-color: #d9822b; }
.level-patho { --accent-color: #a66c38; }

.shaft-depth {
    border-left: 3px solid var(--accent-color);
    padding-left: 14px;
    display: flex;
    flex-direction: column;
}

.depth-num {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--fg-main);
}

.depth-sub {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    color: var(--fg-muted);
}

.shaft-content h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin-bottom: 10px;
    letter-spacing: -0.02em;
}

.shaft-content h2 a {
    color: var(--fg-main);
    text-decoration: none;
}

.shaft-content h2 a:hover {
    color: var(--accent-color);
}

.shaft-content p {
    color: #bfb9ae;
    font-size: 0.98rem;
    max-width: 62ch;
}

.shaft-action {
    display: flex;
    justify-content: flex-end;
}

.enter-btn {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--fg-main);
    background-color: var(--bg-main);
    border: 1px solid var(--accent-color);
    padding: 12px 18px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.enter-btn:hover {
    background-color: var(--accent-color);
    color: #0a0a09;
}

/* Shared Inner Dossier Elements */
.world-wrap {
    flex: 1;
    padding-top: 52px;
    padding-bottom: 80px;
}

.world-prose h2 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    margin: 34px 0 14px;
    color: var(--fg-main);
}

.world-prose p {
    margin-bottom: 18px;
    font-size: 1.04rem;
    max-width: 68ch;
}

.counsel-panel {
    margin-top: 36px;
    padding: 24px 28px;
    background-color: var(--bg-main);
    border: 1px solid var(--line-color);
    border-left: 3px solid var(--accent-color);
}

.world-bottom-bar {
    margin-top: 44px;
    padding-top: 24px;
    border-top: 1px solid var(--line-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.steam-cta {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 12px 20px;
    background-color: var(--accent-color);
    color: #090807;
}

.steam-cta:hover {
    filter: brightness(1.12);
}

.bunker-plaque {
    background-color: var(--bg-panel);
    border: 1px solid var(--line-color);
    padding: 44px;
}

.sub-footer {
    margin-top: auto;
    border-top: 1px solid var(--line-color);
    padding: 28px 0;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--fg-muted);
}

.footer-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.sub-footer a {
    color: var(--fg-main);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* WORLD 1: ATOMIC HEART */
body[data-world="atomic"] {
    --bg-main: #0d0808;
    --bg-panel: #160e0e;
    --fg-main: #efe6dc;
    --fg-muted: #9e8a84;
    --line-color: #36201e;
    --accent-color: #c93b2b;
    background-image: radial-gradient(circle at 80% 0%, rgba(201, 59, 43, 0.09) 0%, transparent 55%);
}

.ah-dossier {
    background-color: var(--bg-panel);
    border: 2px solid #452623;
    border-top: 4px solid #c93b2b;
    padding: 48px;
}

.ah-top-stamp {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--fg-muted);
    border-bottom: 1px solid var(--line-color);
    padding-bottom: 14px;
    margin-bottom: 28px;
}

.ah-secret {
    color: #e04a3a;
    border: 1px solid #e04a3a;
    padding: 1px 8px;
    font-weight: 600;
}

.ah-header h1 {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3.6vw, 2.75rem);
    line-height: 1.12;
    margin-bottom: 14px;
}

.ah-lead {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    color: #ccb8b0;
    max-width: 64ch;
    margin-bottom: 32px;
}

.ah-specs-grid,
.metro-specs-grid,
.patho-specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 36px;
}

.ah-cell,
.metro-cell,
.patho-cell {
    background-color: var(--bg-main);
    border: 1px solid var(--line-color);
    padding: 14px 16px;
}

.cell-k {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    color: var(--accent-color);
    margin-bottom: 4px;
}

.cell-v {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--fg-main);
}

.ah-directive {
    background-color: #090505;
    border: 1px solid #522722;
    border-left: 4px solid #c93b2b;
    padding: 20px 24px;
    margin: 30px 0;
    font-family: var(--font-mono);
    font-size: 0.92rem;
}

.directive-title {
    display: block;
    font-size: 0.72rem;
    color: #d4a459;
    letter-spacing: 0.14em;
    margin-bottom: 8px;
}

/* WORLD 2: METRO TRILOGY */
body[data-world="metro"] {
    --bg-main: #090a08;
    --bg-panel: #11130f;
    --fg-main: #e2e0d5;
    --fg-muted: #878a7c;
    --line-color: #282c23;
    --accent-color: #e08b2c;
}

.metro-clipboard {
    background-color: var(--bg-panel);
    border: 1px solid #32382c;
    border-top: 3px solid #e08b2c;
    padding: 48px;
}

.nixie-bar {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    background-color: #060705;
    border: 1px solid #282c23;
    padding: 10px 16px;
    margin-bottom: 28px;
    color: var(--fg-muted);
}

.nixie-readout {
    color: #ff9d2e;
    font-weight: 600;
    letter-spacing: 0.12em;
}

.metro-header h1 {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3.6vw, 2.75rem);
    line-height: 1.12;
    margin-bottom: 14px;
}

.metro-lead {
    font-size: 1.08rem;
    color: #b7baab;
    max-width: 64ch;
    margin-bottom: 32px;
}

.metro-diary {
    background-color: #070806;
    border: 1px dashed #3d4235;
    border-left: 3px solid #e08b2c;
    padding: 22px 26px;
    margin: 30px 0;
    font-family: var(--font-mono);
    font-size: 0.93rem;
    color: #dedccf;
}

.diary-head {
    display: block;
    font-size: 0.72rem;
    color: #e08b2c;
    letter-spacing: 0.14em;
    margin-bottom: 8px;
}

/* WORLD 3: PATHOLOGIC 2 / МОР */
body[data-world="pathologic"] {
    --bg-main: #0c0907;
    --bg-panel: #16110d;
    --fg-main: #e6dac8;
    --fg-muted: #998773;
    --line-color: #33271d;
    --accent-color: #b56535;
    font-family: var(--font-serif);
}

.patho-playbill {
    background-color: var(--bg-panel);
    border: 3px double #4a3728;
    padding: 52px;
}

.patho-act-banner {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--fg-muted);
    border-top: 1px solid var(--line-color);
    border-bottom: 1px solid var(--line-color);
    padding: 10px 0;
    margin-bottom: 28px;
}

.patho-header h1 {
    font-family: var(--font-serif);
    font-size: clamp(2.2rem, 4.2vw, 3.2rem);
    font-weight: 600;
    line-height: 1.08;
    margin-bottom: 14px;
    color: #f2e6d5;
}

.patho-lead {
    font-size: 1.18rem;
    font-style: italic;
    color: #c2b09b;
    max-width: 64ch;
    margin-bottom: 32px;
}

body[data-world="pathologic"] .world-prose h2 {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    color: #ebdcc7;
    border-bottom: 1px solid var(--line-color);
    padding-bottom: 6px;
}

body[data-world="pathologic"] .world-prose p {
    font-size: 1.1rem;
    line-height: 1.78;
}

.patho-script {
    background-color: #0e0b08;
    border-top: 2px solid #8c2f23;
    border-bottom: 2px solid #8c2f23;
    padding: 24px 28px;
    margin: 32px 0;
    font-size: 1.22rem;
    font-style: italic;
    text-align: center;
    color: #f0e4d4;
}

.script-speaker {
    display: block;
    font-family: var(--font-mono);
    font-style: normal;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    color: #b56535;
    margin-bottom: 10px;
}

@media (max-width: 820px) {
    .shaft-level {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 28px 22px;
    }
    .shaft-action {
        justify-content: flex-start;
    }
    .ah-dossier,
    .metro-clipboard,
    .patho-playbill {
        padding: 28px 20px;
    }
}