/* Core 13.1: layout rules for the interface; map rendering remains in main.css. */
:root {
  --sidebar-width: 400px;
  --bg: #101017;
  --panel: #181820;
  --panel-2: #20202b;
  --muted: #c0becd;
  --muted-2: #aba7bd;
}
[hidden] { display: none !important; }
button { touch-action: manipulation; }
#sidebar {
  display: flex;
  flex-direction: column;
  padding: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--panel);
  box-shadow: none;
}
.sidebar-top { flex: 0 0 auto; padding: 18px 18px 0; border-bottom: 1px solid var(--border); }
.sidebar-head { min-height: 48px; padding: 0 0 16px; }
.sidebar-head h2 { font-size: 21px; letter-spacing: -.02em; }
.sidebar-eyebrow { font-size: 10px; margin-bottom: 6px; }
.sidebar-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.sidebar-tab {
  position: relative;
  display: flex; justify-content: center; align-items: center; gap: 5px;
  min-width: 0; min-height: 44px; border: 0; border-bottom: 3px solid transparent;
  background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer;
}
.sidebar-tab:hover { color: #fff; background: #ffffff08; }
.sidebar-tab[aria-selected="true"] { color: #fff; border-bottom-color: var(--pink); background: #833ab414; }
.tab-count { border-radius: 5px; padding: 1px 4px; background: #54432c; color: #ffda95; font-size: 11px; }
.sidebar-body { flex: 1; min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden; padding: 20px 18px; scrollbar-gutter: stable; }
.sidebar-pane { min-width: 0; }
.section-title { font-size: 18px; font-weight: 650; margin: 0 0 12px; }
.section-description { color: var(--muted); font-size: 13px; line-height: 1.55; margin-bottom: 18px; }
.selection-panel { padding: 0; min-height: 0; background: none; border: 0; box-shadow: none; }
.panel { border-radius: 12px; box-shadow: none; }
.selection-empty { min-height: 200px; border: 0; background: #ffffff03; }
.selection-empty strong { font-size: 16px; }
.selection-empty span { font-size: 13px; max-width: 280px; }
.selection-kind { font-size: 11px; }
.city-name { font-size: 22px; line-height: 1.2; }
.detail-stack { gap: 16px; }
.detail-card { border-radius: 9px; background: #ffffff03; }
.stat-row { font-size: 13px; gap: 12px; min-width: 0; line-height: 1.45; }
.detail-card .stat-row, .compact-card .stat-row { min-height: 37px; padding: 8px 11px; align-items: flex-start; }
.stat-row span { flex: 1 1 auto; min-width: 0; }
.stat-row strong { flex: 0 1 55%; min-width: 0; }
.panel-subtitle { font-size: 14px; margin-bottom: 12px; }
.action-hint { color: var(--muted); font-size: 12px; line-height: 1.55; margin: 12px 0; }
.city-section { margin-top: 12px; border: 1px solid var(--border); border-radius: 10px; padding: 0 12px 12px; }
.city-section > summary { cursor: pointer; padding: 14px 0; font-size: 14px; font-weight: 650; }
.city-section:not([open]) { padding-bottom: 0; }
.more-statistics { margin: 8px 0 12px; }
.more-statistics > summary { cursor: pointer; padding: 10px 2px; color: var(--muted); font-size: 12px; }
.section-block { margin-top: 18px; padding-top: 18px; }
.resource-grid { gap: 8px; }
.resource-card { padding: 10px; min-width: 0; }
.resource-card span { font-size: 12px; }
.resource-card strong { font-size: 18px; }
.two-col-actions { grid-template-columns: minmax(0, 1fr); gap: 9px; }
.primary-btn, .secondary-btn, .danger-btn {
  width: 100%; min-width: 0; padding: 12px; min-height: 44px; border-radius: 9px;
  font-size: 13px; line-height: 1.45; font-weight: 600; white-space: normal; overflow-wrap: anywhere;
  box-shadow: none; text-align: left;
}
.build-action-name, .build-action-cost, .build-action-duration { display: block; }
.build-action-name { font-size: 13px; font-weight: 650; }
.build-action-cost { font-size: 12px; margin-top: 3px; font-weight: 400; }
.build-action-duration { font-size: 11px; margin-top: 5px; opacity: .85; }
.primary-btn { background: #833ab426; border-color: #a668cd55; }
.primary-btn:hover { background: #833ab43d; }
button:disabled { cursor: default; opacity: .6; transform: none; }
.sidebar-top .build-feedback { margin: 12px 0; padding: 11px; font-size: 12px; line-height: 1.5; max-height: 108px; overflow: auto; }
.construction-panel { margin: 0; padding: 0; background: none; border: 0; }
.construction-panel > summary { font-size: 18px; padding-bottom: 8px; }
.construction-help, .construction-empty { font-size: 13px; line-height: 1.55; }
.construction-list { max-height: none; overflow: visible; margin-top: 18px; gap: 12px; }
.construction-card { background: #28251f; padding: 13px; gap: 10px; }
.construction-city-link { font-size: 13px; line-height: 1.45; }
.construction-detail { font-size: 12px; }
.production-construction-notice { padding: 13px; margin: 0 0 12px; border: 1px solid #80632c; border-radius: 9px; background: #30281e; color: #ffdfab; font-size: 13px; line-height: 1.55; }
.construction-foundation { fill: #30291d; stroke: #ffcc73; stroke-width: 1.5; stroke-dasharray: 3 2; }
.live-dot.is-paused { background: var(--warn); box-shadow: 0 0 0 5px #f0c76a12; }
.sidebar-utilities { margin: 0; display: grid; gap: 12px; }
.utility-drawer { border-radius: 10px; background: #ffffff03; }
.utility-drawer summary { font-size: 14px; padding: 14px 12px; }
.utility-drawer summary small { font-size: 12px; }
.drawer-content { padding: 0 12px 14px; }
.save-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.save-row button { text-align: center; }

/* Map controls now live in their own full-width sidebar pane. */
.map-view-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 8px; margin: 0; }
.map-view-controls .layer-toggle { min-width: 0; width: 100%; margin: 0; min-height: 44px; padding: 11px 10px; justify-content: flex-start; font-size: 12px; letter-spacing: 0; font-weight: 600; overflow-wrap: anywhere; }
.map-view-controls .layer-toggle:first-child { grid-column: 1 / -1; }
.layer-toggle-dot { width: 7px; height: 7px; flex: 0 0 7px; background: #787387; box-shadow: none; }
.layer-toggle.active .layer-toggle-dot { background: #ef86b0; }
.map-view-legend { margin-top: 16px; padding: 12px; font-size: 13px; line-height: 1.5; }
.sidebar-terrain-key { margin-top: 22px; }
.map-legend { display: block; width: 212px; left: 16px; bottom: 16px; padding: 14px; background: #181820ed; border-radius: 10px; }
.legend-title { font-size: 11px; margin-bottom: 10px; }
.legend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
.legend-grid span { color: #d3d0df; font-size: 11px; }
.legend-swatch { flex: 0 0 10px; width: 10px; height: 10px; }
.map-active-layer { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); color: #dfb9f6; font-size: 12px; }

/* Readable overview; no controls disappear at smaller widths. */
.map-topbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; padding: 12px; border-radius: 12px; background: #181820f2; box-shadow: 0 8px 25px #0002; gap: 12px; }
.topbar-brand { min-width: 145px; }
.topbar-version { font-size: 10px; letter-spacing: .025em; }
.topbar-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.metric-chip, .metric-chip:nth-child(4), .metric-chip:nth-child(5) { display: flex; min-height: 48px; border-radius: 8px; padding: 8px; }
.metric-label { font-size: 10px; letter-spacing: .025em; color: #bcb6cd; }
.metric-chip strong { font-size: 14px; }
.sim-cluster { grid-column: auto; margin: 0; }
.compact-speed-row { width: 196px; }
.speed-row button { min-height: 36px; font-size: 12px; }
.map-hint { font-size: 10px; }
.keycap { font-size: 9px; }
@media (max-width: 1440px) {
  :root { --sidebar-width: 360px; }
  .map-topbar { grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
  .sim-cluster { grid-column: 1 / -1; justify-content: flex-end; }
  .sidebar-top { padding: 16px 14px 0; }
  .sidebar-body { padding: 16px 14px; }
}
@media (max-width: 1000px) {
  :root { --sidebar-width: 330px; }
  .topbar-brand { min-width: 125px; }
  .topbar-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .metric-chip strong { font-size: 12px; }
  .metric-label { font-size: 9px; }
  .map-legend { width: 184px; padding: 12px; }
  .map-hint { display: none; }
}
@media (max-width: 820px) {
  #app { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(260px, 52dvh) minmax(0, 1fr); height: 100dvh; }
  #sidebar { border-left: 0; border-top: 1px solid var(--border); padding: 0; }
  .sidebar-top { padding: 8px 12px 0; }
  .sidebar-head { display: none; }
  .sidebar-body { padding: 14px; }
  .map-topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; top: 8px; left: 8px; right: 8px; padding: 8px; }
  .topbar-brand { min-width: 0; }
  .topbar-title { font-size: 15px; }
  .brand-mark { width: 28px; height: 28px; flex: 0 0 28px; }
  .topbar-metrics { grid-column: 1 / -1; grid-row: 2; }
  .sim-cluster { grid-column: 2; grid-row: 1; }
  .sim-state { display: none; }
  .compact-speed-row { width: 172px; }
  .map-legend { display: none; }
  .sidebar-terrain-key { display: grid; }
  .city-section { margin-top: 10px; }
}

/* One small, optional learning task above the ordinary panels. */
.learning-guide { margin: 0 0 16px; padding: 14px; border: 1px solid #6d527e; border-radius: 12px; background: #241d30; color: #f6f1fc; }
.learning-guide[hidden] { display: none; }
.guide-heading { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; }
.guide-heading h3 { margin: 0; font-size: 16px; line-height: 1.4; }
.guide-heading button { flex: 0 0 28px; width: 28px; height: 28px; border: 1px solid #806d91; border-radius: 6px; color: #fff; background: transparent; cursor: pointer; font-size: 20px; }
.learning-guide p { margin: 10px 0 12px; font-size: 14px; line-height: 1.55; }
.learning-guide progress { width: 100%; height: 6px; margin-top: 10px; accent-color: #e1306c; }
.learning-guide > button { width: 100%; min-height: 38px; white-space: normal; }
.guide-target { outline: 2px solid #ffcf75 !important; outline-offset: 3px; }
#showLearningGuide { width: 100%; margin-bottom: 16px; }

/* Illustrated lessons: the game stays visible behind a paused, accessible modal. */
#tutorialDialog { position:fixed; inset:0; margin:auto; height:fit-content; color:#f6f3fb; background:#191720; border:1px solid #51425e; border-radius:18px; padding:0; width:min(760px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; box-shadow:0 24px 90px #000a; }
#tutorialDialog::backdrop { background:#090611b8; }
.tutorial-content { padding:24px 28px 12px; }
.tutorial-eyebrow { color:#d2b7e6; font-size:12px; letter-spacing:.07em; margin:0 0 8px; }
#tutorialTitle { font-size:clamp(22px,3vw,30px); margin:0 0 16px; }
#tutorialImage { display:block; width:100%; height:auto; max-height:42dvh; object-fit:contain; background:#140f20; border-radius:12px; }
#tutorialText { font-size:17px; line-height:1.6; margin:18px 0 8px; }
.tutorial-actions { display:flex; justify-content:space-between; gap:12px; padding:16px 28px 24px; position:sticky; bottom:0; background:#191720; border-top:1px solid #ffffff12; }
.tutorial-actions button { min-height:44px; width:auto; }
.learning-guide .guide-heading { flex-wrap:wrap; }
.learning-guide [data-guide-close] { width:auto; height:auto; font-size:12px; padding:6px 8px; }
#tutorialDialog button:focus-visible { outline:3px solid #fbc86b; outline-offset:3px; }
@media(max-width:520px) { .tutorial-content {padding:18px 16px 8px;} .tutorial-actions {padding:12px 16px; flex-wrap:wrap;} #tutorialText {font-size:15px;} }

/* Language is selected before creating a world or starting its clock. */
#app[hidden] {display:none;}
#languageDialog {position:fixed; inset:0; margin:auto; height:fit-content; width:min(560px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; padding:0; border:1px solid #51425e; border-radius:18px; background:#191720; color:#f6f3fb; box-shadow:0 24px 90px #000a;}
#languageDialog::backdrop {background:#090611ed;}
.language-content {padding:32px;}
#languageTitle {font-size:clamp(24px,4vw,32px);line-height:1.3;margin:12px 0 20px;}
#languageDescription {line-height:1.6;color:#d2cbdc;}
.language-options {display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px;}
.language-options button {min-height:60px;font-size:18px;}
#languageDialog button:focus-visible {outline:3px solid #fbc86b;outline-offset:3px;}
@media(max-width:420px){.language-content{padding:24px 18px;}.language-options{gap:10px;}}

.language-options button {display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px;}
.language-options img {width:100px;height:60px;object-fit:contain;box-shadow:0 0 0 1px #ffffff40;}
.language-options button[aria-pressed="true"] {outline:3px solid #fbc86b;outline-offset:3px;}
.terms-consent {display:flex;align-items:flex-start;gap:12px;margin:24px 0;line-height:1.6;font-size:14px;}
.terms-consent input {width:20px;height:20px;flex-shrink:0;margin-top:3px;accent-color:#e34182;}
.terms-consent a {color:#e4b7fa;text-decoration:underline;}
#startGameBtn {width:100%;min-height:48px;}
#startGameBtn:disabled {opacity:.45;cursor:not-allowed;}
.music-controls {padding:14px;border:1px solid #ffffff20;border-radius:10px;margin:12px 0;}
.music-row {display:flex;align-items:center;gap:12px;margin:8px 0;}
.music-row input {flex:1;min-width:0;accent-color:#e34182;}
.music-row output {min-width:3.5em;text-align:right;}
.music-controls label {font-size:14px;}
.music-controls p {font-size:13px;margin-top:8px;}
#tutorialDialog > .music-controls {margin:0 28px 12px;}

#musicDialog {position:fixed;inset:0;margin:auto;height:fit-content;width:min(500px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;border:1px solid #51425e;border-radius:18px;padding:0;background:#191720;color:#f6f3fb;}
#musicDialog::backdrop {background:#090611b8;}
#musicIntro {margin:16px 0;line-height:1.6;}
#musicDone {width:100%;min-height:44px;}
#musicIcon {
  appearance: none;
  display: inline-grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font-size: 20px;
  cursor: pointer;
}
#musicIcon:hover { background: rgba(255,255,255,.06); }
#musicIcon:focus-visible { outline: 2px solid #fbc86b; outline-offset: 3px; }
#musicDialog button:focus-visible,#musicDialog input:focus-visible {outline:3px solid #fbc86b;outline-offset:3px;}