/* Shared layout with an earned, distinct identity for each zone. */
body { --world-color: #f4bf76; --world-glow: #f4bf7619; --world-art: url('../../assets/zones/ashfall.png'); }
/* Keep URL tokens in this stylesheet: var() resolves relative URLs where used. */
body[data-zone="1"] { --world-color: #f4bf76; --world-glow: #f4bf7619; --world-art: url('../../assets/zones/ashfall.png'); }
body[data-zone="2"] { --world-color: #92e2b1; --world-glow: #92e2b119; --world-art: url('../../assets/zones/depot.png'); }
body[data-zone="3"] { --world-color: #ffab7d; --world-glow: #ffab7d19; --world-art: url('../../assets/zones/foundry.png'); }
body[data-zone="4"] { --world-color: #c4a5ff; --world-glow: #c4a5ff19; --world-art: url('../../assets/zones/relay.png'); }
body[data-zone="5"] { --world-color: #a8dfff; --world-glow: #a8dfff19; --world-art: url('../../assets/zones/citadel.png'); }
body, body[data-zone] {
    --blue: var(--world-color); --yellow: var(--world-color); --feedback-color: var(--world-color);
    background: radial-gradient(ellipse at 85% 0%, var(--world-glow), transparent 50%), #080b13;
}
.game-container { row-gap: 14px; }
.game-container > .game-mode-tabs { grid-row: 1 / span 16; }
.game-mode-tabs::before { content: "YOUR CITY"; }
.game-mode-tab { line-height: 1.4; }
.game-mode-tab.active { background: var(--world-glow); }
.stage-tabs { margin: 0; }
.stage-tab { flex: 1 1 120px; }
.stage-tab.active { border-color: var(--world-color); background: var(--world-glow); }
.stage-tab.locked { opacity: .65; }
.stage-tab.locked::before { content: "🔒 "; font-size: 9px; }
.world-banner {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1fr) 100px; gap: 20px;
    padding: 28px; min-height: 290px; border: 1px solid #566176;
    border-radius: 18px;
    background: linear-gradient(90deg, #080e18ee 0%, #080e18b8 42%, #080e1820 100%), var(--world-art) center 42% / cover;
    box-shadow: 0 12px 36px #0003;
}
.world-banner::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(0deg, #080e18c9, transparent 70%);
}
.world-banner-copy { max-width: 570px; }
.world-banner .eyebrow { color: var(--world-color); }
.world-mood { color: #d3ddec; font-size: 11px; margin: 8px 0; letter-spacing: 1px; }
.world-banner h2 { color: #fff; font-size: clamp(25px, 3.8vw, 42px); line-height: 1.1; letter-spacing: -1px; margin: 4px 0 14px; }
.world-banner-copy > p:last-of-type { color: #d9e2ed; font-size: 13px; line-height: 1.7; max-width: 48ch; }
.world-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.world-actions button { min-height: 44px; padding: 10px 16px; border: 1px solid var(--world-color); border-radius: 9px; cursor: pointer; background: var(--world-color); color: #101621; font-size: 12px; font-weight: 600; }
.world-actions .secondary-button { background: #101827d9; color: #eef4ff; border-color: #8190a088; }
.world-zone-marker { align-self: start; justify-self: end; padding: 10px; border: 1px solid #ffffff33; border-radius: 8px; text-align: center; background: #080e1880; color: #ffffffb0; }
.world-zone-marker span { display: block; font-size: 8px; letter-spacing: 3px; }
.world-zone-marker strong { display: block; font-size: 26px; line-height: 1.4; }
.world-objective { grid-column: 1 / -1; display: flex; gap: 12px; align-items: baseline; padding-top: 15px; border-top: 1px solid #ffffff20; }
.world-objective > span { flex-shrink: 0; color: var(--world-color); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }
.world-objective p { color: #dde7f4; font-size: 12px; line-height: 1.5; margin: 0; }
.milestone-panel, .tutorial-hint { margin: 0; }
.save-status-row { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; color: var(--muted); }
.save-status-row .auto-save-indicator, .save-status-row .cloud-save-status { margin: 0; font-size: 10px; }
body.stats-open .save-status-row .auto-save-indicator { display: block !important; }
.story-notice { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid var(--world-color); border-radius: 12px; background: var(--world-glow); }
.story-notice[hidden] { display: none; }
.story-notice strong { font-size: 13px; color: var(--text); }
.story-notice button { padding: 10px 14px; min-height: 44px; flex-shrink: 0; }
.stage-panel .zone-scene { background: linear-gradient(90deg, #0a1019f5, #0a1019d6 55%, #0a1019a1), var(--world-art) center / cover; border-color: #526174; }
.stage-panel .zone-scenery { display: none; }
.zone-content, .collection-header { max-width: none; }
.zone-lore { color: #d0dce7; }
.zone-workshop, .resource-card:first-child { border-top-color: var(--world-color); }
.energy-button { background: linear-gradient(110deg, var(--world-color), #e4e9f6); border-color: var(--world-color); }
.purchase-track > span { background: linear-gradient(90deg, var(--world-color), #ab94ff); }
.collection-field { background: linear-gradient(#10182acc, #10182ae6), var(--world-art) center / cover; }
.player-settings { position: relative; }
.player-settings > summary { list-style: none; cursor: pointer; min-height: 42px; display: flex; align-items: center; padding: 10px 15px; border: 1px solid var(--border); border-radius: 9px; background: #111522; color: #cbd6ea; font-size: 11px; }
.player-settings > summary::-webkit-details-marker { display: none; }
.player-settings > summary:focus-visible { outline: 2px solid var(--world-color); outline-offset: 3px; }
.settings-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 220; display: grid; gap: 10px; width: min(290px, calc(100vw - 28px)); padding: 18px; background: #111827; border: 1px solid #506177; border-radius: 12px; box-shadow: 0 15px 45px #0009; }
.settings-menu button { width: 100%; }
.settings-menu > p:not(.eyebrow) { font-size: 11px; color: #b2c1d7; line-height: 1.6; }
.settings-menu .danger-button { margin-top: 5px; border-top-color: #9b5360; }
.story-panel { display: none; min-width: 0; }
body.stories-open .story-panel { display: block; }
body.stories-open .stage-panel, body.stories-open .stage-reset-dock,
body.stories-open .milestone-panel, body.stories-open .tutorial-hint,
body.companions-open .milestone-panel, body.companions-open .tutorial-hint { display: none !important; }
.archive-heading { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.archive-heading h2 { font-size: 24px; margin: 5px 0; }
.archive-heading p:not(.eyebrow) { color: var(--muted); font-size: 12px; line-height: 1.6; }
.archive-heading > strong { flex-shrink: 0; font-size: 12px; color: var(--world-color); }
.story-filters { display: flex; flex-wrap: wrap; gap: 7px; padding: 16px 0; }
.story-filters button { min-height: 44px; border: 1px solid var(--border); background: #111b2b; color: #cbd8eb; padding: 9px 13px; border-radius: 8px; font-size: 11px; cursor: pointer; }
.story-filters button[aria-pressed="true"] { border-color: var(--world-color); color: var(--world-color); background: var(--world-glow); }
.archive-layout { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 18px; align-items: start; }
.story-index { display: grid; gap: 8px; max-height: 680px; max-height: min(680px, 80dvh); overflow-y: auto; padding-right: 5px; scrollbar-width: thin; }
.story-index button { display: grid; gap: 6px; width: 100%; padding: 15px; min-height: 95px; border: 1px solid var(--border); border-radius: 10px; background: #131c2b; color: var(--text); text-align: left; cursor: pointer; }
.story-index button[aria-pressed="true"] { border-color: var(--world-color); background: var(--world-glow); }
.story-index small { color: var(--world-color); font-size: 9px; letter-spacing: 1px; }
.story-index strong { font-size: 13px; }
.story-index span { color: #b6c4d8; font-size: 11px; line-height: 1.5; }
.story-index button:disabled { cursor: default; background: #0e1521; color: #8999b0; }
.story-index button:disabled small { color: #8999b0; }
.story-reader { background: #111a28; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; min-width: 0; }
.story-art { height: clamp(170px, 22vw, 260px); background-position: center; background-size: cover; border-bottom: 1px solid var(--border); }
.story-art-1 { background-image: url('../../assets/zones/ashfall.png'); }
.story-art-2 { background-image: url('../../assets/zones/depot.png'); }
.story-art-3 { background-image: url('../../assets/zones/foundry.png'); }
.story-art-4 { background-image: url('../../assets/zones/relay.png'); }
.story-art-5 { background-image: url('../../assets/zones/citadel.png'); }
.story-page { padding: clamp(20px, 3vw, 36px); }
.story-page h3 { font-size: clamp(24px, 3vw, 32px); line-height: 1.3; margin: 12px 0 24px; color: #fff; }
.story-page > p:not(.eyebrow) { font-size: 15px; line-height: 1.85; color: #d2dfef; margin: 0 0 19px; max-width: 65ch; }
.story-page button { padding: 10px 15px; }
/* Native lore dialogs keep the chapter readable without leaving the current activity. */
dialog.lore-modal {
    --lore-color: var(--world-color, #f4bf76);
    position: fixed; inset: 0; margin: auto; padding: 0;
    width: min(680px, calc(100vw - 32px)); max-width: none;
    max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
    border: 1px solid var(--lore-color); border-radius: 18px;
    background: #101827; color: #e7eef8;
    overflow: hidden; box-shadow: 0 28px 100px #000b;
}
dialog.lore-modal:not([open]) { display: none; }
dialog.lore-modal::backdrop { background: #02060edb; backdrop-filter: blur(7px); }
body:has(dialog.lore-modal[open]) { overflow: hidden; }
.lore-popup-shell {
    display: flex; flex-direction: column; min-height: 0;
    max-height: min(850px, calc(100vh - 32px));
    max-height: min(850px, calc(100dvh - 32px));
}
.lore-popup-header {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    flex-shrink: 0; padding: 10px 14px 10px 24px;
    border-bottom: 1px solid #ffffff16; background: #101827;
}
.lore-popup-header .eyebrow, .lore-popup-copy .eyebrow { margin: 0; color: var(--lore-color); line-height: 1.5; }
.lore-close-icon {
    display: grid; place-items: center; flex-shrink: 0;
    width: 44px; height: 44px; padding: 0;
    border: 1px solid #63738a; border-radius: 9px;
    background: #1c293d; color: #eff5ff;
    font-family: inherit; font-size: 28px; line-height: 1; cursor: pointer;
}
.lore-popup-shell > .story-art {
    flex-shrink: 0; height: clamp(100px, 18vh, 170px); height: clamp(100px, 18dvh, 170px);
    background-position: center 45%; border-bottom-color: #ffffff1a;
}
.lore-popup-copy {
    min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: 24px 30px 8px; scrollbar-width: thin; scrollbar-color: #70839c #101827;
}
.lore-popup-copy h2 {
    margin: 10px 0 20px; font-size: clamp(25px, 4vw, 34px);
    color: #fff; line-height: 1.2; letter-spacing: -.5px; overflow-wrap: anywhere;
}
#loreText p { margin: 0 0 18px; max-width: 65ch; font-size: 15px; line-height: 1.85; color: #d4e0ee; }
.lore-popup-footer {
    flex-shrink: 0; padding: 16px 24px 20px;
    border-top: 1px solid #ffffff1a; background: #101827;
}
.lore-popup-footer > p { margin: 0 0 12px; font-size: 12px; line-height: 1.5; color: #b6c6db; }
.lore-popup-footer > div { display: flex; justify-content: flex-end; gap: 10px; }
.lore-popup-footer button {
    min-height: 44px; padding: 10px 15px; border: 1px solid var(--lore-color);
    border-radius: 9px; background: var(--lore-color); color: #101827;
    font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1.4; cursor: pointer;
}
.lore-popup-footer .secondary-button { background: #1a283c; border-color: #63738a; color: #e8f1ff; }
.lore-close-icon, .lore-popup-footer button { transition: transform .12s ease, filter .12s ease; }
.lore-close-icon:hover, .lore-popup-footer button:hover { filter: brightness(1.12); }
.lore-close-icon:active, .lore-popup-footer button:active { transform: scale(.97); }
.lore-close-icon:focus-visible, .lore-popup-footer button:focus-visible { outline: 2px solid var(--lore-color); outline-offset: 3px; }
@media (max-width: 520px) {
    dialog.lore-modal {
        width: calc(100vw - 24px); border-radius: 14px;
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    }
    .lore-popup-shell {
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    }
    .lore-popup-header { padding: 8px 10px 8px 18px; }
    .lore-popup-copy { padding: 20px 20px 4px; }
    #loreText p { font-size: 14px; line-height: 1.8; }
    .lore-popup-footer { padding: 14px 16px 16px; }
    .lore-popup-footer > div { display: grid; grid-template-columns: 1fr 1fr; }
    .lore-popup-footer button { padding: 10px 8px; font-size: 12px; }
}
@media (max-height: 480px) {
    .lore-popup-shell > .story-art { height: 64px; }
    .lore-popup-header { padding-top: 4px; padding-bottom: 4px; }
    .lore-popup-copy { padding-top: 14px; }
    .lore-popup-copy h2 { margin: 6px 0 12px; font-size: 24px; }
    #loreText p { font-size: 14px; line-height: 1.7; margin-bottom: 14px; }
    .lore-popup-footer { padding-top: 10px; padding-bottom: 10px; }
    .lore-popup-footer > p { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .lore-close-icon, .lore-popup-footer button { transition: none; }
}
@media (max-width: 1180px) {
    .game-container > .game-mode-tabs { grid-row: 1; }
    .game-mode-tab { flex: 1 1 140px; }
}
@media (max-width: 760px) {
    .archive-layout { grid-template-columns: 1fr; }
    .story-index { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 280px; padding: 0 4px 5px 0; }
    .world-banner { padding: 22px; grid-template-columns: 1fr; min-height: 270px; }
    .world-zone-marker { display: none; }
    .world-objective { flex-direction: column; gap: 5px; }
    .archive-heading { flex-wrap: wrap; }
    .story-art { height: 190px; }
}
@media (max-width: 520px) {
    .game-container { width: calc(100% - 24px); row-gap: 12px; }
    .game-container > .game-mode-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
    .game-mode-tab { width: 100%; min-height: 50px; padding: 8px 5px; font-size: 10px; }
    .stage-tab { flex: 1 1 calc(33.333% - 6px); min-width: 0; }
    .world-banner { background-position: center, 60% center; padding: 20px 16px; }
    .world-actions button { flex: 1 1 120px; }
    .header-buttons { align-items: stretch; }
    .header-buttons > button, .header-buttons > details { flex: 1 1 calc(33.333% - 6px); }
    .player-settings > summary { height: 100%; justify-content: center; padding: 10px; }
    .story-notice { align-items: stretch; flex-direction: column; }
    .story-notice button { width: 100%; }
    .story-index button { padding: 12px; }
    .story-filters { gap: 6px; }
    .story-filters button { flex: 1 1 45%; }
}