:root {
  color-scheme: dark;
  --bg: #0f1115;
  --panel: #161920;
  --line: #262b34;
  --fg: #dfe3ea;
  --muted: #868e9d;
  --accent: #4caf6a;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--fg);
  font: 14px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow: hidden;
}
main { display: grid; grid-template-columns: 1fr 340px; height: 100%; }

.stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.mapholder { flex: 1 1 56%; min-height: 0; overflow: hidden; }
#map { display: block; cursor: grab; touch-action: none; }
#map:active { cursor: grabbing; }

.controls { flex: 0 1 44%; min-height: 0; border-top: 1px solid var(--line); padding: .6rem .8rem; background: var(--panel); overflow-y: auto; }
.row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: .5rem; }
.row:first-child { margin-top: 0; }
.spacer { flex: 1; }
label { color: var(--muted); font-size: 12px; display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
label.check { gap: .3rem; }
input[type=range] { accent-color: var(--accent); }
#timeline { width: 100%; }
input[type=text], input:not([type]), input[type=number] {
  background: var(--bg); color: var(--fg); border: 1px solid var(--line);
  border-radius: 5px; padding: .3rem .45rem; font: inherit;
}
select {
  background: var(--bg); color: var(--fg); border: 1px solid var(--line);
  border-radius: 5px; padding: .25rem; font: inherit;
}
button {
  background: transparent; color: var(--accent); border: 1px solid var(--accent);
  border-radius: 5px; padding: .3rem .7rem; font: inherit; cursor: pointer;
}
button:hover { background: rgba(76,175,106,.12); }
button:disabled { opacity: .5; cursor: default; }
button.wide { width: 100%; margin-top: .5rem; }
.personalityEditor { margin-top: .8rem; padding: .7rem; border: 1px solid var(--line); border-radius: 6px; min-width: 0; }
.personalityEditor legend { color: var(--accent); font-size: 12px; padding: 0 .25rem; }
.personalityLine { display: grid; grid-template-columns: 8.5rem 1fr 2.5rem; gap: .45rem; width: 100%; margin-top: .4rem; }
.personalityLine input { min-width: 0; }
.personalityLine output { color: var(--fg); text-align: right; font-variant-numeric: tabular-nums; }
.personalityActions { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-top: .7rem; }
.personalityActions button { font-size: 11px; }
.soundVolume { gap: .25rem; }
.soundVolume input { width: 4.5rem; }
.soundStatus { color: var(--muted); font-size: 11px; min-width: 15rem; }
.soundStatus[data-state="on"] { color: var(--accent); }
.soundStatus[data-state="warning"] { color: #d1a24a; }
.soundStatus[data-state="error"] { color: #d35c4c; }
.zoomValue { color: var(--fg); min-width: 2.8rem; text-align: right; font-variant-numeric: tabular-nums; }
.overlayControls { position: relative; color: var(--muted); font-size: 11px; }
.overlayControls summary { cursor: pointer; color: var(--fg); }
.overlayPanel {
  position: absolute; z-index: 3; top: 1.7rem; left: 0; width: min(34rem, calc(100vw - 2rem));
  padding: .55rem .65rem; background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 .6rem 1.5rem rgba(0,0,0,.35);
}
.overlayGrid { display: grid; grid-template-columns: repeat(2, minmax(12rem, 1fr)); gap: .3rem .6rem; }
.overlayGrid label { display: grid; grid-template-columns: auto 4.2rem 1fr 2.4rem; gap: .25rem; min-width: 0; }
.overlayGrid input[type=range] { width: 100%; min-width: 0; }
.overlayGrid output { color: var(--fg); text-align: right; font-variant-numeric: tabular-nums; }
.overlayControls small { display: block; margin-top: .35rem; color: var(--muted); }
.overlayActions { display: flex; gap: .35rem; margin-top: .45rem; }
.overlayActions button { color: var(--muted); border-color: var(--line); padding: .2rem .45rem; font-size: 11px; }
.pill { font-size: 12px; color: var(--muted); min-width: 3.5rem; }
.tile {
  margin-top: .5rem; padding: .45rem .6rem; border: 1px solid var(--line);
  border-radius: 5px; font-size: 12px; color: var(--muted);
  font-family: ui-monospace, Menlo, monospace; line-height: 1.55;
}
.tileBuilding { margin-top: .18rem; color: var(--accent); font-weight: 600; }
.tileState, .tileMetrics, .tileReason { margin-top: .12rem; }
.tileState { color: var(--fg); }
.tileReason { color: #d1a24a; }
.phase { display: flex; align-items: baseline; gap: .45rem; margin-top: .55rem; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 5px; background: rgba(255,255,255,.02); font-size: 12px; }
.phaseLabel, .legendTitle { color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-size: 10px; }
.phase strong { color: var(--accent); font-weight: 600; }
#phaseDetail { color: var(--muted); }
.mayorVoice { margin-top: .65rem; padding: .55rem .7rem .6rem; border-left: 2px solid var(--accent); background: rgba(76,175,106,.06); }
.mayorMeta { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.mayorLabel { color: var(--accent); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
#mayorMood { color: var(--muted); font-size: 10px; }
#mayorThought { margin: .2rem 0 0; color: var(--fg); font-size: 12px; line-height: 1.5; }
.legend { display: flex; align-items: center; gap: .35rem .7rem; flex-wrap: wrap; margin-top: .45rem; color: var(--muted); font-size: 10.5px; }
.legendItem { display: inline-flex; align-items: center; gap: .25rem; }
.legendSwatch { display: inline-block; width: .65rem; height: .65rem; border: 1px solid rgba(255,255,255,.2); border-radius: 2px; }
.legendSwatch.residential { background: #4caf6a; }
.legendSwatch.commercial { background: #4a9fe0; }
.legendSwatch.industrial { background: #d1a24a; }
.legendSwatch.structure { background: #9aa0a6; }
.legendSwatch.dark { background: #6a4550; }
.legendSwatch.level { background: linear-gradient(90deg, #2f6b45 0 20%, #4caf6a 20% 40%, #7ed99a 40% 60%, #dfe3ea 60% 80%, #ffffff 80%); }
.overlayLegend { display: flex; align-items: center; gap: .35rem .7rem; flex-wrap: wrap; margin-top: .35rem; color: var(--muted); font-size: 10.5px; }
.overlayLegend[hidden] { display: none; }
.overlayLegendTitle { color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-size: 10px; }
.overlayLegendItem { display: inline-flex; align-items: center; gap: .25rem; }
.overlayLegendSwatch { display: inline-block; width: 2.4rem; height: .65rem; border: 1px solid rgba(255,255,255,.2); border-radius: 2px; }
.tileReasonLayer { color: #d1a24a; border-color: rgba(209,162,74,.65); padding: .08rem .3rem; font-size: 10px; }

aside { border-left: 1px solid var(--line); background: var(--panel); overflow-y: auto;
        display: flex; flex-direction: column; }
.panel { padding: .8rem; border-bottom: 1px solid var(--line); }
.panel.grow { flex: 1; min-height: 8rem; display: flex; flex-direction: column; }
h2 { font-size: 11px; text-transform: none; letter-spacing: .06em;
     color: var(--muted); margin: 0 0 .5rem; font-weight: 600; }
h2 small { float: right; font-weight: 400; text-transform: none; letter-spacing: 0; }

.big { display: flex; align-items: baseline; gap: .4rem; margin-bottom: .5rem; }
.big span { font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; }
.big small { color: var(--muted); }
dl { display: grid; grid-template-columns: auto 1fr; gap: .15rem .8rem; margin: 0; font-size: 12.5px; }
dt { color: var(--muted); }
dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }

.demand { display: grid; grid-template-columns: auto 1fr; gap: .25rem .5rem;
          align-items: center; margin-top: .6rem; font-size: 12px; color: var(--muted); }
.windowButtons { gap: .35rem; }
.windowButtons button { padding: .25rem .45rem; font-size: 11px; }
.bar { display: block; height: 8px; border-radius: 4px; background: #22262e; position: relative; }
.bar::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 1px; background: var(--line);
}
.bar::after {
  content: attr(data-value); position: absolute; top: -1px; left: var(--v, 50%);
  transform: translateX(-50%); font-size: 9px; color: var(--fg);
}
#graph { display: block; width: 100%; height: 96px; }

pre { margin: 0; font: 11.5px/1.5 ui-monospace, Menlo, Consolas, monospace;
      white-space: pre; overflow: auto; color: var(--fg); }
#log { flex: 1; color: var(--muted); min-height: 0; }
.script { max-height: 8rem; margin-top: .5rem; color: var(--muted);
          background: var(--bg); border: 1px solid var(--line); border-radius: 5px; padding: .4rem; }

#verdict {
  position: fixed; inset: 0; z-index: 10; margin: 0; padding: 1rem;
  display: grid; place-items: center; background: rgba(5, 7, 10, .64);
}
#verdict[hidden] { display: none; }
.verdictCard {
  width: min(34rem, calc(100vw - 2rem)); max-width: 100%;
  background: rgba(22,25,32,.98); border: 1px solid var(--accent);
  border-radius: 8px; padding: 1.1rem 1.25rem; text-align: center;
  line-height: 1.5; box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .5);
}
.verdictHeader { display: flex; align-items: flex-start; gap: 1rem; }
.verdictHeader b { flex: 1; font-size: 15px; }
.verdictClose { color: var(--muted); border-color: var(--line); padding: .2rem .5rem; }
.verdictOutcome { margin: .6rem 0 .15rem; color: var(--fg); font-size: 13px; }
.verdictMeta { margin: 0; color: var(--muted); font-size: 12.5px; }

dialog {
  max-width: min(760px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  color: var(--fg);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .45);
}
dialog::backdrop { background: rgba(5, 7, 10, .72); }
.help { padding: 1.1rem 1.25rem 1.25rem; overflow: auto; }
.helpHeader { display: flex; align-items: center; gap: 1rem; margin-bottom: .75rem; }
.helpHeader h2 { flex: 1; margin: 0; color: var(--fg); font-size: 15px; }
.helpActions { display: flex; align-items: center; gap: .35rem; }
.helpLang { color: var(--muted); border-color: var(--line); padding: .25rem .45rem; font-size: 11px; }
.helpLang[aria-pressed="true"] { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.helpClose { color: var(--muted); border-color: var(--line); }
.helpLocale[hidden] { display: none; }
.helpColumns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.help h3 { margin: 0 0 .35rem; color: var(--accent); font-size: 13px; }
.help p { margin: .5rem 0 0; color: var(--muted); }
.help section p:first-of-type { margin-top: 0; }
.help strong { color: var(--fg); font-weight: 600; }
.help code { color: var(--fg); font: 12px ui-monospace, Menlo, Consolas, monospace; }
.windowPanel { min-width: min(430px, calc(100vw - 2rem)); padding: 1.1rem 1.25rem 1.25rem; }
.windowGrid { margin: .4rem 0 .8rem; }
.windowNote { color: var(--muted); margin: .7rem 0 0; font-size: 12px; }
.optionLine { display: flex; justify-content: space-between; margin: .55rem 0; color: var(--fg); font-size: 12px; }
.optionLine input[type=number] { width: 5rem; }
.saveRow { margin-top: .5rem; }

#notice {
  position: fixed; left: 50%; bottom: 1rem; transform: translate(-50%, 3rem);
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  padding: .5rem .9rem; font-size: 12.5px; opacity: 0; pointer-events: none;
  transition: opacity .18s, transform .18s;
}
#notice.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 900px) {
  main { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) minmax(12rem, 45vh); }
  .controls { overflow-y: auto; }
  aside { border-left: 0; border-top: 1px solid var(--line); max-height: none; min-height: 0; }
  .helpColumns { grid-template-columns: 1fr; }
}

/* Observation room: the town is the largest surface; evidence sits beside it. */
:root { --fg: #e5e9df; --muted: #98a49c; --accent: #c1d58e; --line: #303c37; }
main { grid-template-columns: minmax(0, 1fr) 340px; }
.stage { background: #131b18; }
.cityHeader { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem 1rem; border-bottom: 1px solid var(--line); }
.eyebrow { font-size: 10px; letter-spacing: .16em; color: var(--accent); }
h1 { font-size: 24px; font-weight: 500; letter-spacing: .1em; margin: .35rem 0 0; }
.cityHeader p { font-size: 11px; color: var(--muted); margin: 0; }
.mapholder { flex: 1 1 auto; min-height: 220px; position: relative; }
.mapCaption { position: absolute; left: 1rem; bottom: 1rem; max-width: min(620px, calc(100% - 2rem)); padding: .55rem .8rem; background: #101b17eb; border-left: 2px solid var(--accent); font-size: 12px; line-height: 1.7; pointer-events: none; }
.controls { flex: 0 0 auto; max-height: 36vh; padding: .8rem 1rem; }
.controls > .phase, .controls > .mayorVoice { display: none; }
.watchButton { background: var(--accent); color: #172116; border-color: var(--accent); font-weight: 700; padding: .5rem .9rem; }
.watchButton:hover { background: #d7e6b0; }
.watchPace { color: var(--muted); font-size: 11px; }
#autoWatch[aria-pressed=true] { border-color: var(--accent); color: var(--accent); }
#autoWatch[aria-pressed=false] { border-color: var(--line); color: var(--muted); }
.citySettings { border-top: 1px solid var(--line); margin-top: .7rem; padding-top: .6rem; }
summary { cursor: pointer; color: var(--muted); font-size: 12px; }
aside { overflow-y: auto; display: block; background: #121a17; }
.purposePanel { padding: 1.3rem 1.2rem; border-bottom: 1px solid var(--line); }
.voteOptions { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.6rem; }
.voteOptions button { text-align: left; padding: 0.5rem 0.7rem; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: inherit; cursor: pointer; font: inherit; }
.voteOptions button:hover:not(:disabled) { border-color: var(--accent, #8ab4f8); }
.voteOptions button:disabled { opacity: 0.65; cursor: default; }
.voteOptions button.chosen { border-color: var(--accent, #8ab4f8); opacity: 1; font-weight: 600; }
.voteOptions .voteCount { float: right; opacity: 0.75; }
.voteNote { margin-top: 0.5rem; font-size: 0.85em; opacity: 0.8; }
.purposeHeading { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
#purposeStatus, #evidenceCount { color: var(--muted); font-size: 10px; }
#purposeTitle { font-size: 21px; font-weight: 500; line-height: 1.5; margin: 1rem 0 .7rem; }
#purposeDetail { color: #bdc9bc; line-height: 1.8; font-size: 12px; min-height: 3.6em; }
#purposeProgress { appearance: none; width: 100%; height: 3px; border: 0; display: block; margin: 1rem 0; accent-color: var(--accent); background: var(--line); }
#purposeProgress::-webkit-progress-bar { background: var(--line); }
#purposeProgress::-webkit-progress-value { background: var(--accent); }
#purposeLocation { font-size: 11px; }
.chroniclePanel { padding: 1.2rem; }
.chroniclePanel h2 { margin: 0; color: var(--fg); font-size: 14px; font-weight: 500; }
.evidenceList { list-style: none; margin: 1rem 0 0; padding: 0; }
.evidenceList > li { color: var(--muted); font-size: 12px; line-height: 1.8; }
.evidenceItem { border-left: 1px solid #3d4c3b; padding: 0 0 .5rem .8rem; position: relative; }
.evidenceItem::before { content: ''; position: absolute; left: -3px; top: .85rem; width: 5px; height: 5px; background: #92a58b; }
.evidenceItem.event-3::before, .evidenceItem.event-8::before { background: #d8e7a1; }
.evidenceItem.event-4::before, .evidenceItem.event-6::before { background: #e3a777; }
.evidenceButton { display: block; width: 100%; text-align: left; border: 0; border-radius: 0; padding: .5rem .3rem .8rem; color: #c6d1c3; line-height: 1.8; font-size: 12px; }
.evidenceButton:disabled { opacity: 1; cursor: default; }
.evidenceMeta { display: block; font-family: ui-monospace, monospace; color: #92a58b; font-size: 10px; letter-spacing: .05em; margin-bottom: .3rem; }
.event-3 .evidenceMeta, .event-8 .evidenceMeta { color: #d8e7a1; }
.event-4 .evidenceMeta, .event-6 .evidenceMeta { color: #e3a777; }
.cityNumbers { margin: 0 1.2rem 1.5rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.cityNumbers .panel { padding-left: 0; padding-right: 0; }
.verdictCard { max-height: 85vh; overflow-y: auto; width: min(680px, 92vw); }
.reviewList { padding-left: 1.4rem; max-height: 32vh; overflow-y: auto; font-size: 12px; color: #c4cfbd; line-height: 1.8; }
.reviewList li { padding: .4rem 0; }
.reviewMayor { font-size: 12px; line-height: 1.8; color: var(--muted); }
button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 900px) { main { grid-template-columns: minmax(0, 1fr) 290px; grid-template-rows: 1fr; } .cityHeader p { display: none; } .cityHeader { padding: .8rem 1rem; } h1 { font-size: 20px; } }
@media (max-width: 650px) { html, body { height: auto; overflow: auto; } main { display: block; height: auto; } .stage { height: 78vh; min-height: 540px; } aside { border-top: 1px solid var(--line); } .controls { max-height: 30vh; } .soundStatus, .soundVolume, #soundTest { display: none; } .cityHeader { padding: .7rem 1rem; } .chroniclePanel { max-height: 65vh; overflow-y: auto; } .overlayPanel { position: static; width: auto; margin-top: .35rem; box-shadow: none; } .overlayGrid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

.unreadPanel { padding: .6rem 1rem; border-top: 1px solid var(--line); font-size: 12px; }
.unreadPanel select { flex: 1 1 220px; min-width: 0; max-width: 100%; width: 220px; }
.unreadPanel small { color: var(--muted); }
@media (max-width: 650px) {
  .stage { height: auto; }
  .mapholder { flex: 0 0 auto; height: min(84vw, 40vh); }
}

/* The shared town needs a window and a ballot, with no playback controls. */
.loadingCity .unreadPanel,
.loadingCity .controls,
.loadingCity aside { visibility: hidden; }
.liveCity .unreadPanel,
.liveCity .controls,
.liveCity aside > .purposePanel:not(#votePanel),
.liveCity .chroniclePanel,
.liveCity .cityNumbers,
.liveCity #voteMarker,
.liveCity #verdict,
.liveCity #notice { display: none; }
.liveCity main { grid-template-columns: minmax(0, 1fr) 320px; }
.liveCity .cityHeader { padding: 1.4rem 1.6rem; }
.liveCity .cityHeader p { display: none; }
.liveSoundControl { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: .3rem; }
.liveSoundControl[hidden] { display: none; }
#liveSoundToggle { min-width: 76px; min-height: 44px; padding: .4rem .6rem; color: var(--muted); font-size: 11px; }
#liveSoundToggle[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
#liveSoundMessage { max-width: 12rem; font-size: 10px; color: var(--muted); }
#liveSoundMessage:empty { display: none; }
.liveCity .mapholder { min-height: 0; }
.liveCity #map, .liveCity #map:active { cursor: default; touch-action: auto; }
.liveCity .mapCaption { max-width: min(32rem, calc(100% - 2rem)); font-size: 11px; }
.liveCity aside { padding-top: .3rem; }
.liveStatus { padding: 1.5rem 1.3rem 1.8rem; border-bottom: 1px solid var(--line); }
.liveStatus[hidden] { display: none; }
.liveStatus h2 { margin: 0; font-size: 12px; color: var(--accent); letter-spacing: .12em; }
#liveDay { font-size: 11px; color: var(--muted); }
.livePopulation { display: flex; flex-direction: column; gap: .2rem; margin: 1.6rem 0 1rem; }
#livePopulation { font-size: 48px; line-height: 1.1; font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.livePopulation > span:last-child { color: var(--muted); font-size: 12px; }
.livePhase { margin: 1.3rem 0; font-size: 12px; line-height: 1.8; }
.liveClock { grid-template-columns: 1fr; gap: .3rem; margin-top: 1.5rem; }
.liveClock dt { font-size: 10px; }
.liveClock dd { text-align: left; font-size: 12px; margin-bottom: .7rem; overflow-wrap: anywhere; }
.liveNote { color: var(--muted); font-size: 10px; line-height: 1.7; margin: .8rem 0 0; }
.liveCity #votePanel { padding: 1.5rem 1.3rem; border: 0; }
.liveCity #voteTitle { color: var(--fg); font-size: 17px; font-weight: 400; letter-spacing: 0; line-height: 1.7; margin: 1rem 0; }
.liveCity #voteState { font-size: 11px; color: var(--muted); }
.liveCity .voteOptions { gap: .6rem; }
.liveCity .voteOptions button { min-height: 44px; border-radius: 4px; font-size: 13px; }
.liveCity .voteNote { font-size: 11px; line-height: 1.8; }
@media (max-width: 900px) and (min-width: 651px) {
  .liveCity main { grid-template-columns: minmax(0, 1fr) 280px; }
  .liveCity .cityHeader p { display: none; }
}
@media (max-width: 650px) {
  .liveCity main { display: flex; flex-direction: column; }
  .liveCity .stage { height: auto; min-height: 0; }
  .liveCity .cityHeader { padding: .7rem 1.2rem; }
  .liveCity h1 { font-size: clamp(17px, 4.5vw, 20px); }
  .liveCity .mapholder { flex: none; height: clamp(180px, 30svh, 300px); min-height: 0; }
  .liveCity aside { padding: 0; overflow: visible; }
  .liveStatus { display: grid; grid-template-columns: auto 1fr; gap: .6rem 1rem; padding: .8rem 1.2rem; }
  .liveStatus .purposeHeading { grid-column: 1 / -1; }
  .livePopulation { margin: 0; }
  #livePopulation { font-size: 32px; }
  .livePopulation > span:last-child { font-size: 10px; }
  .liveClock { grid-template-columns: auto 1fr; align-content: center; gap: .35rem .7rem; margin: 0; }
  .liveClock dd { margin: 0; text-align: right; font-size: 11px; }
  .livePhase, .liveNote { grid-column: 1 / -1; margin: 0; }
  .liveStatus[data-phase="running"] .livePhase { display: none; }
  .liveCity #votePanel { padding: 1rem 1.2rem; }
  .liveCity #voteTitle { margin: .6rem 0; font-size: 16px; }
}
@media (max-height: 500px) and (min-width: 651px) {
  .liveCity aside { display: flex; flex-direction: column; }
  .liveCity #votePanel { order: -1; padding: .75rem 1rem; border-bottom: 1px solid var(--line); }
  .liveCity #voteTitle { font-size: 14px; line-height: 1.5; margin: .5rem 0; }
  .liveCity .voteOptions { gap: .35rem; }
}