:root {
  color-scheme: dark;
  --ink: #101817;
  --panel: #18221f;
  --panel-raised: #1d2925;
  --line: #35443e;
  --paper: #e7dab9;
  --cream: #f4ecd8;
  --muted: #94a39b;
  --gold: #d3a451;
  --gold-light: #edc879;
  --green: #76ae78;
  --red: #c57262;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; }
body { margin: 0; color: var(--cream); background: radial-gradient(circle at 32% 12%, rgba(65, 92, 80, .18), transparent 32%), #0d1413; overflow: hidden; }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
h1, h2, h3, h4, p, blockquote { margin-top: 0; }
h1 { margin-bottom: 0; font: 600 25px/1 Georgia, serif; letter-spacing: .01em; }
h2 { margin: 0; font: 600 22px/1.15 Georgia, serif; }
h3 { margin: 0 0 9px; font: 600 17px/1.2 Georgia, serif; }
h4 { margin: 0 0 4px; font: 600 14px/1.25 Georgia, serif; }
.eyebrow { margin-bottom: 5px; color: #90a098; text-transform: uppercase; letter-spacing: .16em; font-size: 9px; font-weight: 800; }

.shell { position: relative; height: 100vh; min-height: 620px; padding: 12px; display: grid; grid-template-columns: 74px minmax(0, 1fr); grid-template-rows: 70px minmax(0, 1fr); gap: 10px 12px; }

/* Top status bar */
.topbar { grid-column: 1 / -1; min-width: 0; display: grid; grid-template-columns: 270px minmax(420px, 1fr) auto; align-items: center; gap: 18px; padding: 0 8px 0 4px; border-bottom: 1px solid rgba(230, 213, 174, .12); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 45px; height: 45px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(225, 191, 121, .5); border-radius: 50%; color: #e0bc70; background: #121b19; font: 700 25px Georgia, serif; transform: rotate(-6deg); box-shadow: inset 0 0 0 4px #101716, inset 0 0 0 5px rgba(225,191,121,.22); }
.realm-resources { min-width: 0; display: flex; align-items: center; justify-content: center; }
.resource { min-width: 98px; height: 42px; padding: 0 14px; display: flex; align-items: center; gap: 9px; border-left: 1px solid rgba(228, 214, 178, .1); }
.resource:last-child { border-right: 1px solid rgba(228, 214, 178, .1); }
.resource > span:last-child { display: grid; gap: 2px; }
.resource b { color: #e5dcc7; font-size: 12px; font-variant-numeric: tabular-nums; }
.resource small { color: #71837a; font-size: 8px; }
.resource-icon { width: 19px; text-align: center; font: 15px Georgia, serif; }
.resource-icon.gold { color: #d8aa54; }
.resource-icon.grain { color: #c9af62; }
.resource-icon.timber { color: #8fa16d; }
.resource-icon.iron { color: #9aa7a7; }
.resource-icon.people { color: #a77e67; }
.turn-status { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.world-time { min-width: 130px; display: grid; gap: 3px; text-align: right; }
.world-time span { color: #788981; font-size: 9px; }
.world-time b { color: #c7c0af; font-size: 10px; }
.action-points { width: 138px; height: 42px; padding: 7px 10px; display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; text-align: left; border: 1px solid #5f5034; border-radius: 6px; color: #b8ae98; background: #181f1d; }
.action-points span { font-size: 9px; }
.action-points b { color: #edca7c; font-size: 11px; }
.action-points > i, .prosperity i, .need-list em, .order-list li div > i { position: relative; overflow: hidden; display: block; height: 3px; border-radius: 3px; background: #34403b; }
.action-points > i { grid-column: 1 / -1; }
.action-points em, .prosperity em, .need-list em i, .order-list em { position: absolute; inset: 0 auto 0 0; display: block; background: linear-gradient(90deg, #987138, #dfb861); }
.settings-menu { position: relative; }
.settings-menu summary { width: 38px; height: 38px; display: grid; place-items: center; list-style: none; border: 1px solid var(--line); border-radius: 6px; color: #9daca5; background: #17211e; cursor: pointer; }
.settings-menu summary::-webkit-details-marker { display: none; }
.settings-popover { position: absolute; z-index: 20; top: 48px; right: 0; width: 280px; padding: 17px; border: 1px solid #5b563f; border-radius: 8px; background: #19231f; box-shadow: 0 24px 70px rgba(0,0,0,.55); }
.seed-field { display: grid; gap: 5px; margin-bottom: 11px; color: #8e9c94; font-size: 9px; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.seed-field input { width: 100%; height: 38px; padding: 0 11px; color: #e9dfc9; border: 1px solid #35443e; border-radius: 5px; outline: none; background: #111917; }
.seed-field input:focus { border-color: #b88e45; box-shadow: 0 0 0 3px rgba(184,142,69,.12); }
.settings-actions { display: flex; gap: 7px; }
.primary, .icon-button { height: 36px; border: 1px solid #405048; border-radius: 5px; color: #e9dfc9; background: #222e2a; }
.primary { flex: 1; padding: 0 12px; border-color: #a47d3c; color: #171c1a; background: linear-gradient(#dfb461, #c29240); font-weight: 800; }
.primary:hover { filter: brightness(1.08); }
.icon-button { padding: 0 10px; font-size: 10px; }
.icon-button.active { color: #e3bb69; border-color: #9e793c; }
.connection-status { width: 100%; height: 34px; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid #405048; border-radius: 5px; color: #9baaa2; background: #141d1a; font-size: 9px; }
.connection-status i { width: 7px; height: 7px; border-radius: 50%; background: #c3924f; box-shadow: 0 0 0 3px rgba(195,146,79,.12); }
.connection-status.online { color: #cae1cf; border-color: #476551; }
.connection-status.online i { background: #6dbc7c; box-shadow: 0 0 0 3px rgba(109,188,124,.13); }
.connection-status.offline i { background: #b45e51; }

/* Main navigation */
.primary-nav { min-height: 0; padding: 8px 5px; display: flex; flex-direction: column; gap: 4px; border: 1px solid #293630; border-radius: 9px; background: linear-gradient(180deg, #17211e, #121a18); box-shadow: 0 15px 40px rgba(0,0,0,.2); }
.nav-item { position: relative; height: 62px; padding: 7px 2px; display: grid; place-content: center; gap: 5px; border: 0; border-left: 2px solid transparent; border-radius: 4px; color: #788981; background: transparent; text-align: center; }
.nav-item > span { font: 19px Georgia, serif; }
.nav-item > b { font-size: 8px; letter-spacing: .02em; font-weight: 700; }
.nav-item:hover { color: #d0c5ab; background: rgba(230, 213, 174, .045); }
.nav-item.active { color: #edc46f; border-left-color: #d4a652; background: linear-gradient(90deg, rgba(209,162,76,.13), transparent); }
.nav-bottom { margin-top: auto; }
.nav-badge { position: absolute; top: 7px; right: 6px; min-width: 15px; height: 15px; padding: 0 4px; display: grid; place-items: center; border-radius: 8px; color: #15201c; background: #cfaa5c; font-size: 8px; font-style: normal; font-weight: 800; }
.nav-badge.warning { color: #f6e9ca; background: #a25c4d; }

/* Map workspace */
.workspace { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 338px; gap: 10px; }
.map-panel { position: relative; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid #3a4842; border-radius: 10px; background: #314a51; box-shadow: 0 18px 60px rgba(0,0,0,.28); }
#worldBase, #worldStatic, #worldStaticNext, #world { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
#worldBase { z-index: 0; pointer-events: none; }
#worldStatic, #worldStaticNext { z-index: 1; pointer-events: none; opacity: 0; transform-origin: 50% 50%; will-change: transform; }
#world { z-index: 2; cursor: grab; touch-action: none; }
#world.dragging { cursor: grabbing; }
.living-world-card { margin-top: 9px; padding: 12px; border: 1px solid rgba(203,177,112,.25); border-radius: 7px; background: rgba(28,42,35,.72); }
.living-world-card > p { margin: 7px 0 9px; color: #aeb9af; font-size: 10px; line-height: 1.45; }
.living-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin-bottom: 8px; }
.living-metrics span { padding: 6px; border-radius: 4px; background: rgba(9,17,14,.35); color: #89998e; font-size: 8px; text-transform: uppercase; }
.living-metrics b { display: block; margin-top: 2px; color: #e7d7ad; font-size: 10px; }
.living-industry { margin: -2px 0 8px; padding: 6px 7px; border: 1px solid rgba(218,190,125,.14); border-radius: 4px; color: #aaae9b; background: rgba(9,17,14,.23); font: 600 8px/1.45 Inter,sans-serif; }
.living-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
.living-actions button, .living-build-row button, .living-build-row select { min-height: 29px; border: 1px solid rgba(218,190,125,.27); border-radius: 4px; color: #decda5; background: #283c33; font: 600 9px Inter,sans-serif; }
.living-actions button:hover, .living-build-row button:hover { border-color: #c99e52; background: #344c3f; }
.living-actions button:disabled, .living-build-row button:disabled, .living-build-row select:disabled { opacity: .42; cursor: not-allowed; }
.living-build-row { display: grid; grid-template-columns: minmax(0,1fr) 62px; gap: 5px; margin-top: 5px; }
.living-build-row select { padding: 0 6px; }
.structure-actions { margin-top: 5px; }
.structure-actions[hidden] { display: none; }
.map-vignette { position: absolute; inset: 0; z-index: 3; pointer-events: none; box-shadow: inset 0 0 100px rgba(10,16,15,.5); }
.map-tools, .map-hint, .overview, .compass, .map-status, .selection-actions, .map-view-switcher, .map-view-context { z-index: 4; }
.map-view-switcher { position: absolute; top: 14px; left: 58px; display: flex; padding: 3px; border: 1px solid rgba(235,221,186,.22); border-radius: 7px; background: rgba(15,23,21,.88); box-shadow: 0 8px 24px rgba(0,0,0,.25); backdrop-filter: blur(8px); }
.map-view-switcher button { position: relative; min-width: 92px; height: 44px; padding: 5px 10px 5px 27px; display: grid; grid-template-columns: 1fr; align-content: center; gap: 1px; border: 0; border-radius: 4px; color: #7f8d86; background: transparent; text-align: left; }
.map-view-switcher button + button::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 0; width: 1px; background: rgba(235,221,186,.1); }
.map-view-switcher button > span { position: absolute; top: 8px; left: 9px; color: #5f6e67; font: 700 8px/1 Inter,sans-serif; }
.map-view-switcher button b { color: #b9c2bb; font: 650 11px/1 Georgia,serif; }
.map-view-switcher button small { color: #697870; font-size: 7px; letter-spacing: .04em; }
.map-view-switcher button:hover { background: rgba(235,221,186,.06); }
.map-view-switcher button.active { color: #efd083; background: linear-gradient(135deg,rgba(204,157,73,.2),rgba(204,157,73,.05)); box-shadow: inset 0 0 0 1px rgba(222,181,99,.24); }
.map-view-switcher button.active > span, .map-view-switcher button.active b { color: #e9c36f; }
.map-view-context { position: absolute; top: 69px; left: 59px; min-width: 250px; padding: 9px 12px 10px; border-left: 2px solid rgba(220,177,88,.72); color: #d8cfb8; background: linear-gradient(90deg,rgba(15,23,21,.76),rgba(15,23,21,.16)); text-shadow: 0 1px 2px rgba(0,0,0,.5); pointer-events: none; }
.map-view-context .eyebrow { margin-bottom: 3px; color: #c49b4e; }
.map-view-context strong { display: block; font: 600 15px/1.15 Georgia,serif; }
.map-view-context > span { display: block; margin-top: 3px; color: #94a199; font-size: 8px; }
.hex-detail-layer { position: absolute; inset: 0; z-index: 3; visibility: hidden; opacity: 0; overflow: hidden; background: radial-gradient(circle at 50% 44%,rgba(219,197,145,.18),transparent 38%), linear-gradient(135deg,rgba(21,37,31,.97),rgba(12,21,19,.97)); transition: opacity .22s ease, visibility .22s; }
.hex-detail-layer::before { content: ""; position: absolute; inset: 0; opacity: .16; background-image: radial-gradient(rgba(236,220,180,.32) .7px,transparent .8px); background-size: 7px 7px; pointer-events: none; }
.map-panel[data-map-view="hex"] .hex-detail-layer { visibility: visible; opacity: 1; }
.map-panel[data-map-view="hex"] .overview, .map-panel[data-map-view="hex"] .map-status, .map-panel[data-map-view="hex"] .compass, .map-panel[data-map-view="hex"] .selection-actions, .map-panel[data-map-view="hex"] .map-hint { display: none; }
.map-panel[data-map-view="global"] .map-hint::after { content: " · Scroll in to enter a region"; }
.map-panel[data-map-view="global"] .map-view-context { background: rgba(12,25,29,.9); }
.map-panel[data-map-view="global"] .overview, .map-panel[data-map-view="region"] .overview { display: none; }
.globe-navigation { display: none; position: absolute; z-index: 4; right: 18px; bottom: 110px; text-align: center; }
.map-panel[data-map-view="global"] .globe-navigation { display: grid; justify-items: center; gap: 3px; }
.globe-navigation button { width: 32px; height: 30px; border: 1px solid #61706a; border-radius: 5px; color: #e8d6a9; background: #152a30; }
.globe-navigation button:hover, .globe-navigation button:focus-visible { background: #36525a; border-color: #e8c36f; }
.globe-navigation .globe-focus { width: auto; padding: 0 9px; margin-top: 6px; font-size: 10px; }
.map-panel[data-map-view="global"] .compass { display: none; }
.map-panel[data-map-view="region"] .map-hint::after { content: " · Drag across regions · Double-click a hex to explore"; }
.hex-detail-heading { position: absolute; top: 92px; left: 50%; width: min(440px,70%); text-align: center; transform: translateX(-50%); }
.hex-detail-heading h2 { color: #f0dfb8; font-size: 26px; }
.hex-detail-heading > p:last-child { margin: 7px 0 0; color: #91a49a; font: 11px/1.4 Georgia,serif; }
.hex-place-stage { position: absolute; top: 50%; left: 50%; width: min(660px,82%); aspect-ratio: 1.7; transform: translate(-50%,-42%); }
.hex-place-halo { position: absolute; top: 12%; right: 18%; bottom: 4%; left: 18%; border: 1px solid rgba(216,176,91,.2); border-radius: 50%; background: radial-gradient(ellipse,rgba(229,207,155,.15),rgba(229,207,155,.025) 58%,transparent 70%); box-shadow: inset 0 -25px 55px rgba(7,14,12,.35); }
#hexLandmarkImage { position: absolute; top: 50%; left: 50%; width: min(390px,58%); aspect-ratio: 1; object-fit: cover; clip-path: polygon(50% 0,93.3% 25%,93.3% 75%,50% 100%,6.7% 75%,6.7% 25%); filter: drop-shadow(0 22px 25px rgba(0,0,0,.5)); transform: translate(-50%,-47%); }
.local-site { position: absolute; min-width: 126px; padding: 8px 10px 8px 35px; display: grid; gap: 2px; border: 1px solid rgba(222,187,109,.35); border-radius: 6px; color: #cfc5aa; background: rgba(15,24,21,.9); box-shadow: 0 8px 22px rgba(0,0,0,.28); text-align: left; backdrop-filter: blur(5px); }
.local-site > span { position: absolute; top: 50%; left: 10px; width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid #997538; border-radius: 50%; color: #e8c471; font-size: 8px; transform: translateY(-50%); }
.local-site b { font: 600 10px/1 Georgia,serif; }
.local-site small { color: #74857c; font-size: 7px; text-transform: uppercase; letter-spacing: .08em; }
.local-site:hover, .local-site.active { color: #f0dfb9; border-color: #c79b4c; background: rgba(40,55,46,.96); transform: translateY(-2px); }
.site-north { top: 15%; left: 50%; transform: translateX(-50%); }
.site-north:hover, .site-north.active { transform: translate(-50%,-2px); }
.site-east { top: 44%; right: 0; }
.site-south { bottom: -2%; left: 50%; transform: translateX(-50%); }
.site-south:hover, .site-south.active { transform: translate(-50%,-2px); }
.site-west { top: 44%; left: 0; }
.hex-detail-note { position: absolute; right: 18px; bottom: 18px; width: 230px; padding: 10px 12px; border: 1px solid rgba(219,183,104,.2); border-radius: 6px; background: rgba(13,22,19,.82); }
.hex-detail-note b { display: block; margin-bottom: 4px; color: #d7b56d; font-size: 8px; text-transform: uppercase; letter-spacing: .1em; }
.hex-detail-note span { color: #7f9087; font-size: 8px; line-height: 1.4; }
.map-status { position: absolute; top: 14px; left: 50%; display: flex; gap: 5px; transform: translateX(-50%); }
.status-pill { padding: 6px 9px; display: flex; align-items: center; gap: 5px; border: 1px solid rgba(235,221,186,.2); border-radius: 4px; color: #a9b3ad; background: rgba(17,25,23,.83); backdrop-filter: blur(6px); font-size: 8px; text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; }
.status-pill b { color: #d8d0bd; }
.status-pill i { width: 6px; height: 6px; border-radius: 50%; background: #6daa74; box-shadow: 0 0 0 3px rgba(109,170,116,.13); }
.map-hint { position: absolute; left: 16px; bottom: 15px; padding: 7px 10px; border: 1px solid rgba(233,221,189,.2); border-radius: 5px; color: rgba(246,239,220,.73); background: rgba(16,24,22,.8); backdrop-filter: blur(6px); font-size: 9px; }
.map-hint span { display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: #d3a354; box-shadow: 0 0 0 3px rgba(211,163,84,.17); }
.map-tools { position: absolute; left: 15px; top: 15px; display: grid; gap: 4px; }
.map-tools button { width: 33px; height: 33px; border: 1px solid rgba(233,221,189,.25); border-radius: 5px; color: #ead7aa; background: rgba(18,27,24,.84); box-shadow: 0 3px 10px rgba(0,0,0,.2); font: 600 17px Georgia,serif; backdrop-filter: blur(5px); }
.map-tools button:hover { color: #fff0c7; border-color: #b88e45; }
.tile-metadata-toggle { position: absolute; z-index: 6; top: 84px; right: 15px; padding: 9px 12px; border: 1px solid #9a8658; border-radius: 5px; background: rgba(18,27,24,.94); color: #ecdcb7; font: 600 11px/1.2 Inter,sans-serif; }
.tile-metadata-toggle[aria-pressed="true"] { background: #50472c; border-color: #ecc672; color: #fff0c5; }
.tile-metadata-toggle:focus-visible { outline: 2px solid #fff0c5; outline-offset: 3px; }
.tile-metadata-labels { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.tile-metadata-label { position: absolute; top: 0; left: 0; height: 43px; box-sizing: border-box; padding: 4px 5px; border: 1px solid #779b87; border-radius: 4px; color: #e1eee4; background: rgba(12,27,20,.88); font: 9px/1.25 Inter,sans-serif; text-align: center; }
.tile-metadata-label.role-gameplay { border-color: #c9a34f; color: #ffe5ad; background: rgba(44,33,15,.92); }
.tile-metadata-label.focused { outline: 2px solid #f4df9d; outline-offset: 2px; }
.tile-metadata-label b, .tile-metadata-label span, .tile-metadata-label small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-metadata-label small { font: 8px/1.2 Consolas,monospace; opacity: .9; }
.tile-metadata-detail { position: absolute; z-index: 5; top: 126px; right: 15px; width: min(270px,calc(100% - 30px)); max-height: min(260px,45%); overflow: auto; padding: 12px; border: 1px solid rgba(215,192,134,.6); border-radius: 6px; background: rgba(13,23,19,.95); color: #dce4d9; box-shadow: 0 7px 20px #0005; font: 11px/1.45 Inter,sans-serif; }
.tile-metadata-detail strong { display: block; color: #f0d895; font: 600 15px Georgia,serif; }
.tile-metadata-detail span, .tile-metadata-detail small { display: block; margin-top: 5px; }
.tile-metadata-detail p { margin: 8px 0; }
.tile-metadata-detail a { display: inline-block; margin-top: 7px; color: #eacb82; }
.tile-metadata-status { position: absolute; z-index: 5; bottom: 12px; left: 15px; max-width: calc(100% - 30px); margin: 0; padding: 7px 10px; border-radius: 4px; background: rgba(13,23,19,.93); color: #d3ddcd; font: 10px/1.4 Inter,sans-serif; pointer-events: none; }
.tile-metadata-labels[hidden], .tile-metadata-detail[hidden], .tile-metadata-status[hidden] { display: none; }
.map-panel[data-tile-metadata="on"] .map-hint { display: none; }
/* Keep map menus in flow with one another, even when their labels wrap. */
.map-header { position: relative; z-index: 4; display: grid; gap: 8px; padding: 12px; pointer-events: none; }
.map-header .prototype-bar { position: static; max-width: none; }
.map-navigation-row, .map-heading-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.map-header .map-view-switcher { position: static; flex: 1 1 260px; min-width: 0; pointer-events: auto; }
.map-header .map-view-switcher button { flex: 1; min-width: 0; height: 44px; }
.map-header .map-tools { position: static; display: flex; pointer-events: auto; }
.map-header .map-tools button { width: 44px; height: 44px; }
.map-header .tile-metadata-toggle { position: static; min-height: 44px; pointer-events: auto; }
.map-header .map-view-context { position: static; min-width: 0; flex: 1 1 230px; overflow-wrap: anywhere; }
.map-header .map-status { position: static; transform: none; flex-wrap: wrap; }
.map-panel .compass { top: calc(var(--map-header-height, 180px) + 8px); }
.map-panel .hex-detail-layer { top: var(--map-header-height, 180px); touch-action: none; }
.map-panel .hex-detail-heading { top: 12px; }
.map-panel .tile-metadata-detail { top: calc(var(--map-header-height, 180px) + 8px); }
/* Global is an unobstructed globe with a narrow, independent side toolbar. */
.map-panel { --globe-inset-left: 12; --globe-inset-right: 84; --globe-inset-top: 56; --globe-inset-bottom: 36; }
.global-map-options, .map-options-content { display: none; }
.map-panel[data-map-view="global"] .map-header { position: absolute; inset: 0; padding: 0; display: block; }
.map-panel[data-map-view="global"] .prototype-bar,
.map-panel[data-map-view="global"] .map-status { display: none; }
.map-panel[data-map-view="global"] .map-navigation-row { display: contents; }
.map-panel[data-map-view="global"] .map-view-switcher { position: absolute; top: 12px; right: 12px; left: auto; width: 56px; display: grid; padding: 3px; box-shadow: none; }
.map-panel[data-map-view="global"] .map-view-switcher button { width: 48px; padding: 0; text-align: center; }
.map-panel[data-map-view="global"] .map-view-switcher button b { font: 600 10px/1.2 Inter, sans-serif; }
.map-panel[data-map-view="global"] .map-view-switcher button > span,
.map-panel[data-map-view="global"] .map-view-switcher button small,
.map-panel[data-map-view="global"] .map-view-switcher button::before { display: none; }
.map-panel[data-map-view="global"] .map-tools { position: absolute; top: 160px; right: 12px; left: auto; display: grid; width: 56px; justify-items: center; }
.map-panel[data-map-view="global"] .map-tools button { width: 48px; box-shadow: none; }
.map-panel[data-map-view="global"] .global-map-options { position: absolute; top: 308px; right: 16px; display: block; width: 48px; height: 44px; border: 1px solid #46584f; border-radius: 5px; color: #c8cdbf; background: #12221ee8; pointer-events: auto; }
.map-panel[data-map-view="global"] .global-map-options[aria-expanded="true"] { border-color: #d3a451; color: #edc879; }
.map-panel[data-map-view="global"] .map-heading-row { position: absolute; top: 14px; right: 84px; left: 14px; display: block; }
.map-panel[data-map-view="global"] .map-view-context { padding: 0; border: 0; background: none; }
.map-panel[data-map-view="global"] .map-view-context .eyebrow { font-size: 7px; letter-spacing: .13em; }
.map-panel[data-map-view="global"] .map-view-context strong { color: #acb8ae; font: 500 11px/1.3 Inter, sans-serif; }
.map-panel[data-map-view="global"] .map-view-context > span { display: none; }
.map-panel[data-map-view="global"] .map-hint { right: 84px; left: 14px; bottom: 12px; padding: 0; border: 0; background: none; font-size: 8px; color: #8b9d95; pointer-events: none; }
.map-panel[data-map-view="global"] .map-hint::after { content: none; }
.map-panel[data-map-view="global"] .map-options-content { position: absolute; z-index: 7; top: 12px; right: 80px; width: min(224px,calc(100% - 92px)); max-height: calc(100% - 24px); overflow-y: auto; padding: 12px; border: 1px solid #53634f; border-radius: 7px; background: #101f1bf5; box-shadow: 0 8px 30px #0006; pointer-events: auto; }
.map-panel[data-map-view="global"][data-options-open="true"] .map-options-content { display: grid; gap: 10px; }
.map-options-content > button { min-height: 44px; border: 1px solid #51634f; border-radius: 5px; color: #d3d8c7; background: #1b2a23; font-size: 11px; }
.map-panel[data-map-view="global"] .map-options-content .globe-navigation { position: static; }
.map-panel[data-map-view="global"] .globe-navigation button { min-width: 44px; min-height: 44px; }
.map-panel[data-map-view="global"] .map-options-content .selection-actions { position: static; display: block; min-width: 0; height: auto; padding: 8px 0 0; border: 0; border-top: 1px solid #35483c; border-radius: 0; background: none; box-shadow: none; transform: none; }
.map-panel[data-map-view="global"] .selection-summary { display: none; }
.map-panel[data-map-view="global"] .selection-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 100%; }
.map-panel[data-map-view="global"] .selection-buttons button { min-width: 0; min-height: 44px; font-size: 10px; }
.map-panel[data-map-view="global"] .tile-metadata-detail { top: auto; bottom: 12px; right: 84px; max-width: calc(100% - 96px); }
@media (max-width: 800px) {
  .map-panel .tile-metadata-detail { top: auto; bottom: 55px; max-height: 145px; width: min(250px,calc(100% - 30px)); }
  .tile-metadata-label { font-size: 8px; }
}
.overview { position: absolute; right: 14px; bottom: 14px; width: 194px; padding: 7px; border: 1px solid rgba(233,221,189,.22); border-radius: 6px; background: rgba(16,24,22,.87); box-shadow: 0 6px 22px rgba(0,0,0,.25); backdrop-filter: blur(6px); }
.overview > div { display: flex; justify-content: space-between; margin: 0 2px 5px; color: #9fada6; text-transform: uppercase; letter-spacing: .09em; font-size: 7px; }
.overview b { color: #d6b46e; font-weight: 700; }
#minimap { display: block; width: 178px; height: 107px; border: 1px solid rgba(238,224,185,.16); border-radius: 3px; background: #274b56; cursor: crosshair; }
.compass { position: absolute; right: 15px; top: 14px; width: 42px; height: 60px; color: rgba(245,231,195,.7); text-align: center; filter: drop-shadow(0 2px 2px #17201e); }
.compass b { display: block; font: 700 9px Georgia, serif; }
.compass i { display: block; width: 1px; height: 7px; margin: 2px auto -1px; background: currentColor; }
.compass span { font-size: 26px; }
.selection-actions { position: absolute; left: 50%; bottom: 14px; min-width: 490px; height: 62px; padding: 7px 8px 7px 11px; display: flex; align-items: center; gap: 11px; border: 1px solid rgba(224,199,140,.34); border-radius: 7px; background: rgba(15,23,21,.9); box-shadow: 0 12px 35px rgba(0,0,0,.34); backdrop-filter: blur(9px); transform: translateX(-50%); }
.selection-summary { min-width: 135px; display: flex; align-items: center; gap: 8px; padding-right: 10px; border-right: 1px solid rgba(233,221,189,.14); }
.selection-summary > span:last-child { display: grid; gap: 2px; }
.selection-summary small { color: #7c8b84; font-size: 7px; text-transform: uppercase; letter-spacing: .09em; }
.selection-summary b { max-width: 120px; overflow: hidden; color: #ddd3bb; font: 600 12px Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.selection-symbol { color: #dbb461; font: 23px Georgia, serif; }
.selection-buttons { display: flex; align-items: stretch; gap: 3px; }
.selection-buttons button { height: 43px; min-width: 70px; padding: 4px 8px; display: grid; place-items: center; gap: 1px; border: 0; border-radius: 4px; color: #b7c0ba; background: transparent; font-size: 8px; }
.selection-buttons button span { color: #d2aa59; font: 15px Georgia, serif; }
.selection-buttons button:hover { color: #f0e5ca; background: rgba(228,210,169,.08); }
.selection-buttons .more-action { min-width: 60px; display: flex; gap: 5px; border-left: 1px solid rgba(233,221,189,.14); color: #d4b66f; }
.selection-buttons .more-action span { font-size: 14px; }

/* Right-side information area */
.sidebar { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto 39px minmax(0, 1fr); overflow: hidden; border: 1px solid #303d38; border-radius: 9px; background: linear-gradient(145deg, #1a2521, #141d1b); box-shadow: 0 12px 35px rgba(0,0,0,.18); }
.realm-card { padding: 14px 15px 11px; border-bottom: 1px solid #303d38; background: linear-gradient(120deg, rgba(114,143,103,.09), transparent 60%); }
.realm-card-heading { display: flex; align-items: center; gap: 10px; }
.realm-card-heading > div:nth-child(2) { min-width: 0; flex: 1; }
.realm-card-heading h2 { font-size: 19px; }
.realm-card-heading p:last-child { margin: 3px 0 0; color: #77877f; font-size: 9px; }
.heraldry { width: 40px; height: 47px; display: grid; place-items: center; clip-path: polygon(0 0,100% 0,100% 77%,50% 100%,0 77%); color: #edd18c; background: linear-gradient(135deg,#5c7657 50%,#324c3e 50%); font: 700 17px Georgia, serif; }
.quiet-icon { width: 26px; height: 34px; border: 0; color: #a88b51; background: transparent; font-size: 24px; }
.prosperity { margin-top: 11px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; color: #798a82; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.prosperity b { color: #8fb58e; font-size: 8px; }
.prosperity em { background: linear-gradient(90deg,#607f5d,#a0bb78); }
.sidebar-tabs { display: grid; grid-template-columns: 1fr 1fr 1fr; border-bottom: 1px solid #303d38; }
.sidebar-tab { position: relative; border: 0; border-right: 1px solid rgba(230,215,178,.08); color: #788880; background: #141d1b; font-size: 9px; font-weight: 700; }
.sidebar-tab:last-child { border-right: 0; }
.sidebar-tab::after { content: ""; position: absolute; right: 18px; bottom: 0; left: 18px; height: 2px; background: transparent; }
.sidebar-tab.active { color: #e2d6ba; background: #18221f; }
.sidebar-tab.active::after { background: #d1a451; }
.sidebar-tab span { margin-left: 3px; padding: 1px 5px; border-radius: 7px; color: #1d241f; background: #c79c4c; font-size: 7px; }
.sidebar-panels { min-height: 0; overflow: hidden; }
.sidebar-panel { height: 100%; padding: 13px; display: none; overflow: auto; scrollbar-color: #45534c transparent; scrollbar-width: thin; }
.sidebar-panel.active { display: block; }
.attention-card { padding: 13px; border: 1px solid rgba(197,114,98,.34); border-left: 3px solid #b66d5f; border-radius: 5px; background: rgba(102,54,46,.13); }
.attention-card .section-heading { align-items: flex-start; }
.attention-card h3 { font-size: 15px; }
.attention-card > p { margin: 8px 0 9px; color: #a99f8e; font: 11px/1.45 Georgia, serif; }
.severity { padding: 3px 5px; color: #d8a99d; border: 1px solid rgba(197,114,98,.35); border-radius: 3px; font-size: 7px; text-transform: uppercase; }
.inline-action, .text-button { padding: 2px 0; border: 0; color: #d2a95a; background: transparent; font-size: 9px; font-weight: 700; }
.inline-action { width: 100%; display: flex; justify-content: space-between; }
.inline-action:hover, .text-button:hover { color: #efca7d; }
.overview-section { padding: 14px 2px; border-bottom: 1px solid rgba(229,213,176,.1); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.need-list { display: grid; gap: 10px; }
.need-list > div { display: grid; grid-template-columns: 1fr auto; gap: 5px 8px; align-items: center; color: #9ca8a1; font-size: 9px; }
.need-list b { color: #c8c1b0; font-size: 8px; }
.need-list em { grid-column: 1 / -1; height: 4px; }
.need-list em i { background: linear-gradient(90deg,#587459,#90aa75); }
.need-dot { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; }
.need-dot.good { background: #729b70; }
.need-dot.caution { background: #c2954b; }
.activity-list, .order-list { margin: 0; padding: 0; list-style: none; }
.activity-list { display: grid; gap: 3px; }
.activity-list li { padding: 8px 0; display: grid; grid-template-columns: 29px 1fr auto; align-items: center; gap: 8px; }
.activity-list li + li { border-top: 1px solid rgba(229,213,176,.075); }
.activity-icon { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #3b4943; border-radius: 50%; color: #c6a45f; background: #111917; font: 12px Georgia, serif; }
.activity-list span { display: grid; gap: 3px; }
.activity-list b { color: #c9c2af; font-size: 9px; }
.activity-list small { color: #718077; font-size: 8px; }
.activity-list time { color: #a38c5e; font-size: 7px; }
.council-note { border: 0; }
.council-note blockquote { margin-bottom: 7px; color: #b7af9b; font: italic 12px/1.5 Georgia, serif; }
.council-note > span { color: #6f8077; font-size: 8px; }
.tile-card { padding: 3px 2px 15px; }
.tile-heading { display: flex; gap: 11px; align-items: center; }
.tile-heading p { margin: 4px 0 0; color: #88978f; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; }
.tile-heading h2 { font-size: 18px; }
.tile-preview-frame { position: relative; width: 58px; height: 58px; flex: 0 0 auto; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; background: #202d29; box-shadow: inset 0 0 18px rgba(0,0,0,.28); }
.biome-swatch { position: absolute; inset: 0; background: #668c4b; opacity: .52; }
.tile-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform: scale(1.16); filter: drop-shadow(0 3px 3px rgba(0,0,0,.4)); }
.tile-preview:not([src]) { display: none; }
.tile-lore { margin: 14px 0; min-height: 34px; color: #aeb9b3; font: italic 12px/1.45 Georgia, serif; }
.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.metrics div { padding: 8px; border: 1px solid #303d38; border-radius: 5px; background: rgba(9,14,13,.18); }
.metrics .metric-wide { grid-column: 1 / -1; }
.metrics span { display: block; margin-bottom: 3px; color: #75847d; text-transform: uppercase; font-size: 7px; letter-spacing: .12em; }
.metrics strong { color: #d9d2bf; font-size: 9px; font-weight: 650; }
.legend-card { padding: 14px 2px 3px; border-top: 1px solid rgba(229,213,176,.1); }
.legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.legend-item { display: flex; align-items: center; gap: 7px; color: #aab5af; font-size: 9px; }
.legend-color { width: 11px; height: 11px; border: 1px solid rgba(255,255,255,.15); border-radius: 2px; box-shadow: inset 0 0 4px rgba(0,0,0,.2); }
.queue-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 12px; }
.queue-heading h3 { margin: 0; }
.queue-heading > span { color: #9b895d; font-size: 8px; }
.order-list { counter-reset: orders; }
.order-list li { position: relative; min-height: 62px; padding: 10px 0; display: grid; grid-template-columns: 25px 1fr auto; align-items: start; gap: 9px; }
.order-list li + li { border-top: 1px solid rgba(229,213,176,.09); }
.order-index { width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid #5a4b31; border-radius: 50%; color: #d6ae5c; background: #111917; font-size: 8px; }
.order-list li > div { display: grid; gap: 4px; }
.order-list b { color: #d1c9b5; font-size: 9px; }
.order-list small { color: #718077; font-size: 8px; }
.order-list li div > i { width: 100%; margin-top: 3px; }
.order-list time { color: #aa915e; font-size: 8px; }
.add-order { width: 100%; height: 38px; margin-top: 8px; border: 1px dashed #665534; border-radius: 5px; color: #d1aa5d; background: rgba(184,142,69,.045); font-size: 9px; font-weight: 700; }
.add-order span { font-size: 13px; }
.queue-rule { margin-top: 18px; padding: 12px; border-left: 2px solid #54675d; color: #78867e; background: rgba(10,16,14,.19); font-size: 9px; }
.queue-rule b { color: #aab2ac; }
.queue-rule p { margin: 5px 0 0; line-height: 1.45; }

/* Command views */
.command-center { position: absolute; z-index: 12; top: 92px; right: 360px; bottom: 12px; left: 98px; display: grid; grid-template-rows: auto minmax(0, 1fr); visibility: hidden; opacity: 0; overflow: hidden; border: 1px solid #5c5945; border-radius: 9px; background: linear-gradient(140deg, rgba(27,39,35,.975), rgba(15,23,21,.98)); box-shadow: 0 24px 100px rgba(0,0,0,.58); transform: translateY(8px); transition: opacity .18s ease, transform .18s ease, visibility .18s; }
.command-center.open { visibility: visible; opacity: 1; transform: none; }
.command-header { min-height: 92px; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #36433d; background: linear-gradient(90deg, rgba(111,139,96,.08), transparent 52%); }
.command-header h2 { font-size: 26px; }
.command-header > div > p:last-child { margin: 7px 0 0; color: #839189; font: 11px/1.4 Georgia, serif; }
.command-header > button { width: 36px; height: 36px; border: 1px solid #46544d; border-radius: 50%; color: #9ca9a2; background: #141d1b; font-size: 20px; }
.command-header > button:hover { color: #eadbbb; border-color: #8c7445; }
.command-body { min-height: 0; padding: 20px 23px 28px; overflow: auto; scrollbar-color: #48574f transparent; scrollbar-width: thin; }
.command-summary { display: grid; grid-template-columns: 1.15fr repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
.summary-lead, .summary-stat { min-height: 82px; padding: 14px; border: 1px solid #35433d; background: rgba(9,15,13,.23); }
.summary-lead { border-left: 3px solid #b88e45; }
.summary-lead p, .summary-stat p { margin: 6px 0 0; color: #718078; font-size: 8px; }
.summary-lead strong { color: #e5d8bc; font: 600 18px Georgia, serif; }
.summary-stat span, .summary-lead span { display: block; margin-bottom: 8px; color: #77877f; font-size: 8px; text-transform: uppercase; letter-spacing: .1em; }
.summary-stat b { display: block; color: #d7cfbb; font-size: 14px; }
.summary-stat small { color: #789477; font-size: 8px; }
.command-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px; }
.command-card { grid-column: span 4; min-height: 155px; padding: 15px; border: 1px solid #34413b; border-radius: 6px; background: rgba(20,30,27,.72); }
.command-card.wide { grid-column: span 8; }
.command-card.full { grid-column: 1 / -1; }
.command-card h3 { font-size: 16px; }
.command-card > p { color: #7d8c84; font: 10px/1.45 Georgia, serif; }
.card-kicker { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; color: #819088; font-size: 8px; text-transform: uppercase; letter-spacing: .09em; }
.card-kicker span:last-child { color: #c7a55e; }
.data-rows { display: grid; gap: 1px; }
.data-row { min-height: 35px; padding: 8px 0; display: flex; align-items: center; justify-content: space-between; gap: 9px; border-top: 1px solid rgba(229,213,176,.075); }
.data-row:first-child { border-top: 0; }
.data-row span { color: #9ba79f; font-size: 9px; }
.data-row small { display: block; margin-top: 2px; color: #66766e; font-size: 7px; }
.data-row b { color: #d7cfb9; font-size: 9px; text-align: right; }
.trend-up { color: #7da27b !important; }
.trend-down { color: #c78371 !important; }
.command-action { height: 31px; padding: 0 10px; border: 1px solid #6e5832; border-radius: 4px; color: #d8b566; background: rgba(184,142,69,.07); font-size: 8px; font-weight: 700; }
.command-action:hover { color: #f2d083; border-color: #a6803d; background: rgba(184,142,69,.13); }
.command-action.primary-order { color: #151c19; background: #d2a552; }
.bar-list { display: grid; gap: 9px; }
.bar-list div { display: grid; grid-template-columns: 1fr auto; gap: 5px; color: #9ba79f; font-size: 8px; }
.bar-list i { grid-column: 1 / -1; height: 4px; overflow: hidden; background: #34413c; }
.bar-list i em { display: block; height: 100%; background: linear-gradient(90deg,#657d5d,#afad6e); }
.portrait-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.portrait { min-height: 90px; padding: 10px; border: 1px solid #35433d; background: #151f1c; }
.portrait i { width: 31px; height: 31px; margin-bottom: 8px; display: grid; place-items: center; border-radius: 50%; color: #d7b46b; background: #26352f; font: 14px Georgia,serif; }
.portrait b { display: block; color: #cfc7b3; font-size: 8px; }
.portrait span { color: #708078; font-size: 7px; }
.timeline { position: relative; margin: 0; padding: 0 0 0 24px; list-style: none; }
.timeline::before { content: ""; position: absolute; top: 7px; bottom: 7px; left: 7px; width: 1px; background: #46554d; }
.timeline li { position: relative; padding: 0 0 17px 12px; }
.timeline li::before { content: ""; position: absolute; top: 3px; left: -21px; width: 7px; height: 7px; border: 2px solid #1a2521; border-radius: 50%; background: #c9a153; box-shadow: 0 0 0 1px #75603a; }
.timeline time { color: #ae9157; font-size: 8px; }
.timeline b { display: block; margin: 3px 0; color: #d0c7b2; font: 600 11px Georgia,serif; }
.timeline p { margin: 0; color: #708078; font-size: 8px; }

/* Feedback and production art dialog */
.toast-region { position: fixed; z-index: 30; right: 24px; bottom: 24px; display: grid; gap: 7px; pointer-events: none; }
.toast { min-width: 260px; padding: 11px 13px; display: flex; align-items: center; gap: 10px; border: 1px solid #6d5a36; border-left: 3px solid #d0a14d; border-radius: 5px; color: #cfc6b2; background: #17211e; box-shadow: 0 12px 40px rgba(0,0,0,.42); font-size: 9px; animation: toast-in .2s ease both; }
.toast i { color: #dfb967; font: 17px Georgia, serif; }
.toast.out { animation: toast-out .25s ease both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(12px); } }
dialog { width: min(1040px, calc(100vw - 34px)); padding: 25px; color: #26312d; border: 1px solid #a58b5c; border-radius: 10px; background: #efe4ca; box-shadow: 0 30px 100px #000; }
dialog::backdrop { background: rgba(7,11,10,.82); backdrop-filter: blur(4px); }
dialog h2 { margin-bottom: 8px; font-size: 26px; }
dialog > p:not(.eyebrow) { max-width: 720px; margin-bottom: 18px; color: #68706b; font: 14px/1.5 Georgia, serif; }
.library-link { display: inline-block; margin: -7px 12px 18px 0; color: #725622; font-size: 12px; font-weight: 750; text-decoration: none; }
.library-link:hover { text-decoration: underline; }
dialog img { display: block; width: 100%; border: 1px solid #bca77d; border-radius: 6px; }
.dialog-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: 1px solid #aa9875; border-radius: 50%; color: #5d5a50; background: #e4d7ba; font-size: 20px; }

@media (max-width: 1180px) {
  .topbar { grid-template-columns: 230px 1fr auto; }
  .resource { min-width: 76px; padding: 0 9px; }
  .resource.population { display: none; }
  .world-time { display: none; }
  .workspace { grid-template-columns: minmax(0, 1fr) 310px; }
  .command-center { right: 332px; }
  .selection-actions { min-width: 430px; }
  .selection-summary { display: none; }
}
@media (max-width: 900px) {
  body { overflow: auto; }
  .shell { height: auto; min-height: 100vh; grid-template-columns: 62px minmax(0,1fr); grid-template-rows: auto minmax(650px, 1fr); }
  .topbar { min-height: 70px; grid-template-columns: 200px 1fr; }
  .realm-resources { justify-content: flex-end; padding-right: 185px; }
  .resource { min-width: 68px; }
  .resource:nth-child(4) { display: none; }
  .turn-status { grid-column: 2; position: absolute; right: 18px; }
  .workspace { grid-template-columns: 1fr; grid-template-rows: 68vh minmax(420px, auto); }
  .sidebar { min-height: 500px; }
  .command-center { position: fixed; top: 82px; right: 12px; bottom: 12px; left: 86px; }
  .command-card { grid-column: span 6; }
  .command-card.wide { grid-column: 1 / -1; }
  .map-view-switcher button { min-width: 78px; }
  .hex-place-stage { width: 88%; }
}
@media (max-width: 640px) {
  .shell { padding: 7px; grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0,1fr); gap: 7px; }
  .topbar { grid-column: 1; min-height: 58px; grid-template-columns: 1fr auto; }
  .realm-resources { display: none; }
  .turn-status { position: static; grid-column: auto; }
  .action-points { width: 118px; }
  .primary-nav { grid-row: 2; padding: 3px; flex-direction: row; overflow-x: auto; }
  .nav-item { min-width: 58px; height: 48px; }
  .nav-item > span { font-size: 15px; }
  .nav-bottom { margin: 0; }
  .workspace { grid-column: 1; grid-row: 3; grid-template-rows: 62vh minmax(450px, auto); }
  .map-panel { min-height: 430px; }
  .map-status { display: none; }
  .selection-actions { right: 10px; left: 10px; min-width: 0; transform: none; }
  .selection-buttons { width: 100%; justify-content: space-around; }
  .overview { width: 158px; }
  #minimap { width: 142px; height: 85px; }
  .map-hint { display: none; }
  .map-view-switcher { right: 8px; left: 52px; }
  .map-view-switcher button { min-width: 0; flex: 1; padding-left: 24px; }
  .map-view-switcher button small { display: none; }
  .map-view-context { top: 66px; left: 54px; min-width: 0; right: 9px; }
  .hex-detail-heading { top: 102px; }
  .hex-place-stage { width: 94%; }
  .local-site { min-width: 104px; }
  .hex-detail-note { display: none; }
  .command-center { top: 70px; right: 7px; bottom: 7px; left: 7px; }
  .command-header { min-height: 76px; padding: 15px; }
  .command-body { padding: 13px; }
  .command-summary { grid-template-columns: 1fr 1fr; }
  .summary-lead { grid-column: 1 / -1; }
  .command-card, .command-card.wide { grid-column: 1 / -1; }
  .portrait-row { grid-template-columns: 1fr; }
}