/* One bottom sheet on every device: its orange prompt is also its header. */
.game-menu-list {display:grid;gap:8px;}
.game-menu-group {display:contents;}


.game-credits {padding:4px 2px 12px;}
.credits-intro {font-weight:700;letter-spacing:.04em;}
.credit-people {display:grid;gap:4px;margin:18px 0 24px;}
.credit-people dt {color:var(--fg-muted);font-size:var(--text-meta);}
.credit-people dd {margin:0 0 12px;font-size:var(--text-body);}
.game-credits h3 {margin:0 0 8px;font-size:18px;}
.game-credits section>p {font-size:var(--text-meta);line-height:1.5;color:var(--fg-muted);}
.credit-tracks {list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px;font-size:var(--text-meta);}
@media(min-width:701px) and (min-height:501px), (min-width:701px) and (pointer:fine) {
 .turn-flow .turn-workspace {--decision-width:clamp(340px,32vw,460px);display:block!important;overflow:hidden;isolation:isolate;}
 .turn-flow .turn-workspace #board.art-board {position:absolute!important;inset:0!important;z-index:0;visibility:visible!important;}
 .desktop-art-dismiss {position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;border-radius:0;background:transparent;z-index:10;cursor:default;}
 .turn-flow .turn-workspace>.desktop-turn-dock {position:absolute;inset:auto 16px 16px auto;display:flex;flex-direction:column;width:var(--decision-width);max-width:calc(100% - 32px);height:auto;min-height:0;max-height:calc(100% - 32px);padding:0;margin:0;border:2px solid var(--accent);border-radius:18px;background:var(--canvas);overflow:hidden;box-shadow:0 12px 48px #0006;z-index:20;}
 .turn-flow .desktop-turn-dock.is-open {height:min(680px,calc(100% - 32px));}
 .turn-flow .desktop-turn-dock>.context-panel {position:relative;inset:auto;display:flex;flex:1;flex-direction:column;width:100%;height:auto;min-width:0;min-height:0;max-height:none;padding:0;overflow:hidden;border:0;border-radius:0;background:var(--canvas);color:var(--fg);font-family:var(--font-sans);letter-spacing:normal;text-transform:none;box-shadow:none;isolation:isolate;}
 .turn-flow .desktop-turn-dock>.context-panel[hidden] {display:none!important;}
 .turn-flow .desktop-turn-dock>.context-panel::before {display:none;}
 .desktop-turn-dock .context-body {flex:1;min-width:0;min-height:0;padding:14px 12px;overflow:auto;scrollbar-gutter:stable;}
 .desktop-turn-dock:not([data-panel=research]):not([data-panel=victories]) .context-body {width:100%;max-width:760px;align-self:center;}
 .desktop-turn-dock:is([data-panel=research],[data-panel=victories]) .context-body {display:block;overflow:auto;padding:14px 12px;}
 .turn-flow .desktop-turn-dock .turn-prompt {position:relative;display:flex;flex:none;flex-direction:row;justify-content:space-between;gap:16px;width:100%;height:auto;min-height:74px;padding:20px 26px 16px;margin:0;border:0;border-radius:0;background:var(--accent);color:var(--accent-on);text-align:left;touch-action:none;}
 .desktop-turn-dock .turn-prompt:hover {filter:brightness(1.04);}
 .desktop-turn-dock .turn-prompt:focus-visible {outline:2px solid var(--accent-on);outline-offset:-5px;}
 .desktop-turn-dock .turn-prompt .turn-context {flex:1;writing-mode:horizontal-tb;transform:none;}
 .desktop-turn-dock .turn-prompt :is(.turn-message,.turn-detail) {color:inherit;}
 .desktop-turn-dock .turn-prompt .turn-message {font-size:18px;}
 .desktop-turn-dock .turn-prompt .turn-detail {font-size:var(--text-meta);margin:3px 0 0;opacity:.8;}
 .desktop-turn-dock .turn-prompt .turn-prompt-icon {flex:none;width:32px;height:32px;padding:0;background:none;color:inherit;font-size:28px;}
 .desktop-turn-dock .turn-prompt .turn-grip {left:calc(50% - 22px);top:7px;width:44px;height:3px;background:currentColor;opacity:.25;}
 .desktop-turn-dock .context-body>.readiness-view {display:flex;flex-direction:column;gap:12px;overflow:auto;height:auto;}
 .desktop-turn-dock .readiness-grid {grid-template-columns:1fr;}
 .turn-workspace .map-key {bottom:16px;right:calc(var(--decision-width) + 40px);}
 .turn-workspace .world-view::after {content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent calc(100% - var(--decision-width) - 90px),#05101c calc(100% - var(--decision-width) + 28px));z-index:3;}
 .desktop-turn-dock .context-body>.inline-work {margin-top:0;}
 .desktop-turn-dock[data-next-decision=work] .inline-work>.section-heading {display:none;}
}
@media(min-width:701px) and (max-height:600px) and (pointer:fine) {
 .turn-flow .turn-workspace>.desktop-turn-dock {left:auto;right:10px;bottom:8px;max-height:calc(100% - 16px);border-radius:14px;}
 .turn-flow .desktop-turn-dock.is-open {height:calc(100% - 16px);}
 .turn-flow .desktop-turn-dock .turn-prompt {min-height:52px;padding:14px 20px 10px;}
 .desktop-turn-dock .turn-prompt .turn-message {font-size:16px;}
 .desktop-turn-dock .context-body,.desktop-turn-dock:is([data-panel=research],[data-panel=victories]) .context-body {padding:12px 16px;}
}

/* Explanations expand in the flow instead of overlapping production choices.
   The click behaviour is the same as on a phone; hover never opens a huge card. */
.context-body .compact-city-stats [data-resource-help] {cursor:pointer;}
.context-body .compact-city-stats [data-resource-help]>.resource-tooltip {display:none!important;position:static!important;inset:auto!important;transform:none!important;width:100%;min-width:0;max-width:100%;max-height:none;margin:10px 0 0;padding:12px 0 0;border:0;border-top:1px solid var(--border-subtle);border-radius:0;box-shadow:none;background:none;overflow:visible;white-space:normal;}
.context-body .compact-city-stats [data-resource-help].help-pinned>.resource-tooltip {display:block!important;}
.context-body .compact-city-stats .city-share-row {flex-wrap:wrap;gap:8px;}
.context-body .compact-city-stats .city-share-row>.resource-tooltip {flex-basis:100%;}
.context-body .compact-city-stats .city-resource-strip .help-pinned {flex:0 0 100%;display:block;}
.context-body .compact-city-stats .metric-source {gap:12px;}
.context-body .compact-city-stats .metric-source>span {min-width:0;}

.phone-city-controls {position:absolute;top:6px;left:12px;right:12px;z-index:8;display:flex;align-items:center;gap:10px;font-size:var(--text-meta);}
.phone-city-controls>span {flex:1;text-shadow:0 1px 5px #000;}
.phone-city-controls button {min-height:40px;background:#07111bcc;padding:8px;border-radius:8px;}
.menu-destinations {display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;}
@media(min-width:701px) and (max-height:500px) and (pointer:coarse) {
 .art-phone .phone-workspace {--decision-width:340px;}
 .art-phone .phone-scene {margin:0!important;visibility:visible!important;}
 .art-phone .turn-dock.phone-controls {left:auto;right:8px;width:var(--decision-width);bottom:8px;}
 .art-phone .turn-dock.is-open,.art-phone.panel-expanded .turn-dock.is-open {height:calc(100% - 16px);}
 .art-phone .phone-workspace #board.phone-art-board {right:calc(var(--decision-width) + 20px)!important;bottom:0!important;width:auto!important;}
 .art-phone .map-totals,.art-phone .phone-city-controls {right:calc(var(--decision-width) + 20px);}
 .art-phone.panel-open .world-labels,.art-phone.panel-open .world-leaders,.art-phone.panel-open .map-totals {visibility:visible;}
 .art-phone .world-view::after {content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 90%,#05101c);z-index:3;}
}

/* Small landscape maps retain the facts without crowd illustrations colliding. */
.compact-world .world-label {min-width:0!important;min-height:44px!important;width:120px!important;height:auto!important;padding:5px 2px!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;text-shadow:0 1px 3px #020810,0 0 8px #020810;white-space:normal;}
.compact-world .world-label>.map-caption-content {display:block!important;padding:0;background:none;}
.compact-world .world-label .map-name-row {display:flex;flex-direction:column;gap:2px;font-size:var(--text-meta);line-height:1.25;white-space:nowrap;}
.compact-world .world-label .map-status-icons {position:absolute;top:-8px;right:5px;background:none;gap:2px;}
.compact-world .world-label .map-status-icon {width:10px;height:12px;}
.compact-world .world-label :is(.map-adoption,.resident-figures,.alert-label) {display:none!important;}
.compact-world .world-label .map-phone-facts {display:flex!important;justify-content:center;gap:8px;font-size:var(--text-meta);line-height:1.5;font-weight:600;margin-top:2px;}
.compact-world .world-label .map-work-state {display:block!important;font-size:var(--text-meta);color:var(--player);line-height:1.4;padding:0;background:none;}
.compact-world .world-label::before {display:none;}

/* The prompt belongs to the screen edge; the opened sheet keeps that width. */
@media(max-width:700px) {
 .art-phone .turn-dock.phone-controls {left:0;right:0;bottom:0;width:100%;box-sizing:border-box;border:2px solid var(--accent);border-radius:16px 16px 22px 22px;box-shadow:none;}
 .art-phone .turn-dock:not(.is-open) {padding-bottom:env(safe-area-inset-bottom);background:var(--accent);}
 .art-phone .turn-dock .turn-prompt {padding-left:24px;padding-right:24px;}
 .art-phone .turn-dock.is-open {max-height:calc(100% - 8px);}
 .art-phone .turn-dock.is-open:has(.game-menu-list) {height:min(600px,calc(100% - 8px));}
 .art-phone .phone-actions {padding:14px 16px max(24px,env(safe-area-inset-bottom));}
 .art-phone .phone-workspace #board.phone-art-board {bottom:0!important;isolation:isolate;z-index:0;}
}
@media(min-width:701px) and (min-height:501px), (min-width:701px) and (pointer:fine) {
 .turn-flow .turn-workspace>.desktop-turn-dock {right:0;bottom:0;border:2px solid var(--accent);border-radius:18px 18px 9px 0;max-width:calc(100% - 24px);box-shadow:none;}
}
@media(min-width:701px) and (max-height:500px) and (pointer:coarse) {
 .art-phone .turn-dock.phone-controls {right:0;bottom:0;border:2px solid var(--accent);border-radius:16px 16px 22px 0;box-shadow:none;}
}

@media(min-width:701px) and (max-width:999px) {
 .turn-flow .turn-workspace>.desktop-turn-dock {border-bottom-right-radius:22px;}
}

/* The resource popover is shared by the header and city strip: hover, focus or tap. */
#simulation :is(.headline-metrics,.phone-resources,.city-overview) [data-resource-help] {position:relative;cursor:pointer;}
#simulation :is(.headline-metrics,.phone-resources,.city-overview) [data-resource-help]>:is(.metric-tooltip,.resource-tooltip) {display:none!important;position:absolute!important;inset:calc(100% + 8px) auto auto 0!important;width:min(340px,calc(100vw - 24px));min-width:0;max-width:calc(100vw - 24px);max-height:min(50dvh,400px);overflow:auto;margin:0!important;padding:16px!important;transform:none!important;background:var(--surface)!important;color:var(--fg);border:1px solid var(--border-strong)!important;border-radius:12px;box-shadow:0 8px 28px #0006!important;z-index:40;white-space:normal;text-shadow:none;font-size:var(--text-meta);line-height:1.5;}
#simulation :is(.headline-metrics,.phone-resources,.city-overview) [data-resource-help]:is(.help-pinned,:focus-visible)>:is(.metric-tooltip,.resource-tooltip) {display:block!important;}
#simulation :is(.headline-metrics,.phone-resources,.city-overview) [data-resource-help]>:is(.metric-tooltip,.resource-tooltip)>h3 {margin:0 0 8px;font-size:var(--text-body);}
#simulation .headline-metrics .header-world-users>.resource-tooltip,#simulation .city-overview .city-share-row>.resource-tooltip {left:auto!important;right:0!important;}
#simulation .headline-metrics .header-world-users .resource-tooltip .metric-source {display:flex;}
@media(hover:hover) {
 #simulation :is(.headline-metrics,.phone-resources,.city-overview) [data-resource-help]:hover>:is(.metric-tooltip,.resource-tooltip) {display:block!important;}
}
@media(max-width:700px),(pointer:coarse) and (max-height:500px) {
 #simulation :is(.phone-resources,.city-overview) [data-resource-help] {position:static;}
 #simulation :is(.phone-resources,.city-overview) [data-resource-help]>:is(.metric-tooltip,.resource-tooltip) {left:0!important;right:0!important;top:calc(100% + 8px)!important;width:100%;max-width:100%;}
 #simulation .phone-resources [data-resource-help]>:is(.metric-tooltip,.resource-tooltip) {left:12px!important;right:12px!important;width:calc(100% - 24px);}
}
#simulation .city-overview .city-resource-strip .help-pinned {flex:0 1 auto;display:inline-flex;}
#simulation .city-overview .city-share-row.help-pinned {flex-wrap:nowrap;}
#simulation :is(.headline-metrics,.phone-resources,.city-overview) [role=tooltip] {pointer-events:auto;}
#sim-dialog.menu-sheet .sound-page .sound-settings label {margin:0;}
@media(max-height:620px) {#sim-dialog.menu-sheet .sound-page .sound-settings {gap:12px;margin-top:14px;} #sim-dialog.menu-sheet:has(.sound-page) .menu-page-content {padding-top:10px;padding-bottom:10px;}}
@media(max-height:500px) {
 #sim-dialog.menu-sheet .sound-page .sound-settings {gap:6px;margin-top:8px;}
 #sim-dialog.menu-sheet .sound-page .sound-settings label {gap:4px;}
 #sim-dialog.menu-sheet .sound-page .sound-settings input {min-height:22px;}
}

/* An open sheet fills the scene below the shared header. */
body.strategy-game #simulation .turn-dock.is-open,
body.strategy-game #simulation .turn-dock.is-open:has(.game-menu-list) {
 position:absolute;top:0;bottom:0;height:100%;max-height:100%;z-index:20;
}
@media(max-width:700px) {
 body.strategy-game #simulation .turn-dock.is-open,
 body.strategy-game #sim-dialog.menu-sheet {border-radius:16px 16px 22px 22px;}
}
.game-header .desktop-brand {display:flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:none;box-shadow:none;color:var(--fg);font-weight:600;white-space:nowrap;}
.game-header .desktop-brand .phone-menu-mark {margin-left:6px;color:var(--fg-muted);}
.turn-dock .turn-prompt-icon {display:flex;align-items:center;justify-content:center;}