/* Afterlight iso interface. Modified version of micropolisJS; GPL-3.0 (see LICENSE, COPYING).
 * Loaded after style.css: restyles the micropolisJS page into a modern city-builder shell around the iso view. */

:root {
  --glass: rgba(20, 28, 36, 0.86);
  --glass2: rgba(34, 45, 56, 0.92);
  --line: rgba(255, 255, 255, 0.10);
  --ink: #eef2f4;
  --muted: #9fb0bb;
  --accent: #f2b544;
  --accent2: #ffd47a;
  --good: #35c45a;
  --bad: #e0574f;
  --radius: 12px;
  --font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

html, body { height: 100%; overflow: hidden; }
body { background: #2d3e47; font-family: var(--font); color: var(--ink); }
button, input[type="submit"] { font-family: var(--font); }

/* ---- top bar ---- */
header#header {
  position: absolute; top: 0; left: 0; right: 0; height: 52px; z-index: 30;
  display: flex; align-items: center; gap: 14px; padding: 0 14px;
  background: linear-gradient(180deg, rgba(30,40,50,0.98), rgba(20,28,36,0.96));
  border-bottom: 1px solid rgba(0,0,0,0.5); box-shadow: 0 2px 12px rgba(0,0,0,0.35);
  font-family: var(--font);
}
#brand { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
#brandMark { width: 22px; height: 22px; align-self: center; border-radius: 6px;
  background: conic-gradient(from 200deg, #ffd47a, #f2b544, #e07a3a, #a23bd6, #2fbf4a, #ffd47a); box-shadow: 0 0 10px rgba(242,181,68,0.5); }
#title { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: 0.4px; color: #fff; }
#brand .alSub { font-size: 11px; color: var(--muted); opacity: 1; }
#hud { display: flex; align-items: center; gap: 6px; margin-left: 6px; }
#hud.initialHidden, #menuButtons.initialHidden { display: none; }
.hudItem { display: flex; flex-direction: column; justify-content: center; padding: 3px 12px; min-width: 70px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--line); border-radius: 9px; height: 36px; box-sizing: border-box; }
.hudItem label { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.9px; color: var(--muted); }
.hudItem > span { font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hudCity { min-width: 120px; }
.hudCity #name { font-size: 14px; font-weight: 700; }
.hudCity .hudSub { font-size: 10px; color: var(--accent2); letter-spacing: 0.6px; font-weight: 600; }
.hudMoney { color: #b9f0b0; }
#speedButtons { flex-direction: row; gap: 3px; padding: 3px; min-width: 0; }
.speedButton { width: 30px !important; height: 28px !important; border-radius: 7px !important; background: transparent !important; color: var(--muted);
  display: flex; align-items: center; justify-content: center; }
.speedButton svg { width: 15px; height: 15px; fill: currentColor; pointer-events: none; }
.speedButton:hover { background: rgba(255,255,255,0.08) !important; color: #fff; }
.speedButton.active { background: var(--accent) !important; color: #1b1406; }
#menuButtons { display: flex; gap: 4px; margin-left: auto; }
#menuButtons .miscButton { width: auto; height: 32px; padding: 0 11px; border-radius: 8px; background: rgba(255,255,255,0.06); color: var(--ink);
  border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; }
#menuButtons .miscButton:hover { background: rgba(255,255,255,0.14); }
#menuButtons .miscButton:disabled { opacity: 0.4; cursor: default; }
#pauseRequest { display: none; }
#headerLinks { margin-left: auto; display: flex; gap: 14px; font-size: 12px; }
#headerLinks a { color: var(--muted); text-decoration: none; }
#hud:not(.initialHidden) ~ #headerLinks { display: none; }

/* ---- stage ---- */
#wrapper { top: 52px !important; bottom: 0; }
main#canvasContainer { top: 0; bottom: 34px !important; background: #3d5a66; }
#MicropolisCanvas { cursor: grab; }
#MicropolisCanvas.pointer { cursor: crosshair; }
#MicropolisCanvas.helpPointer { cursor: help; }
#RCIContainer, #monstertv, #tw, #debug { display: none !important; }

/* ---- bottom toolbar ---- */
#controls {
  position: absolute; top: auto !important; bottom: 12px; left: 50%; transform: translateX(-50%); right: auto;
  width: auto !important; height: auto !important; z-index: 5; padding: 8px 10px 8px; box-sizing: border-box;
  background: var(--glass); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  backdrop-filter: blur(8px);
}
#controls.initialHidden { display: none; }
#toolInfo { position: absolute; left: 50%; top: -30px; transform: translateX(-50%); white-space: nowrap;
  background: var(--glass); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 12px; color: var(--accent2); }
#buttons { display: flex; gap: 6px; align-items: flex-end; }
.toolGroup { display: flex; gap: 3px; padding: 14px 6px 0; position: relative; border-left: 1px solid var(--line); }
.toolGroup:first-child { border-left: none; }
.toolGroupLabel { position: absolute; top: 0; left: 8px; font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
#controls .toolButton {
  width: 46px; height: 46px; padding: 0; margin: 0; border-radius: 10px; position: relative; color: var(--ink);
  background: rgba(255,255,255,0.04) !important; border: 1px solid transparent; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  font-size: 9.5px; font-weight: 600; transition: background 120ms, transform 120ms;
}
#controls .toolButton > * { pointer-events: none; }
#controls .toolButton:hover { background: rgba(255,255,255,0.12) !important; transform: translateY(-2px); }
#controls .toolButton.selected { background: rgba(242,181,68,0.22) !important; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.tbIcon { width: 40px; height: 40px; background-size: contain; background-repeat: no-repeat; background-position: center; display: block; margin-top: 1px; }
.tbLabel { display: none; line-height: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 50px; color: #d7e0e5; }
#controls .alTool { border-left: 1px solid transparent; }
#controls .alTool::after { content: ""; position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: #2fbf4a; }
#dcHelixButton::after, #depotHelixButton::after { background: #a23bd6 !important; }
#solarButton::after, #fusionButton::after { background: #4f8fe0 !important; }
#controls .alLocked { opacity: 0.38; filter: grayscale(0.8); }
#controls .alLocked::before { content: "\1F512"; position: absolute; left: 4px; top: 3px; font-size: 10px; }

/* ---- zoom buttons and hint ---- */
#zoomButtons { position: absolute; right: 14px; bottom: 104px; z-index: 5; display: flex; flex-direction: column; gap: 4px; }
#zoomButtons button { width: 36px; height: 36px; border-radius: 10px; background: var(--glass); color: var(--ink); border: 1px solid var(--line); font-size: 20px; font-weight: 600; }
#zoomButtons button:hover { background: var(--glass2); }
#hint { position: absolute; left: 14px; bottom: 104px; z-index: 4; font-size: 11.5px; color: #e7eef2; background: rgba(20,28,36,0.6); padding: 6px 10px; border-radius: 8px; transition: opacity 1s; }
#hint.fade { opacity: 0; pointer-events: none; }

/* ---- news ticker ---- */
#notifications {
  top: 12px !important; bottom: auto !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important;
  width: auto !important; max-width: 46%; height: auto !important; padding: 8px 16px 8px 34px !important; border: 1px solid var(--line) !important;
  border-radius: 999px; background: var(--glass) !important; color: var(--ink) !important; font-size: 13px; font-weight: 500; box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  z-index: 6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#notifications::before { content: ""; position: absolute; left: 14px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
#notifications.bad::before { background: var(--bad); box-shadow: 0 0 8px var(--bad); }
#notifications.good::before { background: var(--good); box-shadow: 0 0 8px var(--good); }
#notifications.pointer:hover { background: var(--glass2) !important; }

/* ---- right panel: demand, mood, stats, policies, news ---- */
#alPanel {
  position: absolute; top: 12px !important; right: 12px; left: auto; width: 292px; max-height: calc(100% - 190px); overflow: auto; z-index: 5;
  background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  padding: 10px 12px; box-sizing: border-box; font-size: 12px; color: var(--ink); backdrop-filter: blur(8px);
}
#alPanel .alTitle { display: flex; align-items: baseline; gap: 6px; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
#alPanel .alTitle #alEra { font-weight: 500; color: var(--accent2); font-size: 11.5px; }
#alPanel .alCollapse { margin-left: auto; width: 24px; height: 22px; border-radius: 6px; background: rgba(255,255,255,0.06); color: var(--ink); font-size: 14px; }
#alPanel.collapsed .alBody { display: none; }
#alPanel .alSection { border-top: 1px solid var(--line); padding: 8px 0 6px; }
#alPanel .alSectionTitle { font-size: 9.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 5px; }
#alPanel .alRow { display: flex; align-items: center; margin: 4px 0; }
#alPanel .alLabel { width: 88px; color: #d7e0e5; }
#alPanel .alBar { flex: 1; height: 8px; background: rgba(255,255,255,0.08); border: none; border-radius: 99px; margin: 0 8px; overflow: hidden; }
#alPanel .alFill { display: block; height: 100%; border-radius: 99px; transition: width 400ms; }
#alPanel .alVal { width: 36px; text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
#alPanel .alStats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
#alPanel .alStats div { display: flex; justify-content: space-between; background: rgba(255,255,255,0.04); padding: 4px 7px; border-radius: 6px; }
#alPanel .alStats span { color: var(--muted); }
#alPanel .alStats b { font-weight: 650; font-variant-numeric: tabular-nums; }
#alPanel .alPolicy { display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 5px 0; color: #e3e9ec; }
.alSwitch { appearance: none; -webkit-appearance: none; width: 30px; height: 17px; border-radius: 99px; background: rgba(255,255,255,0.16); position: relative; cursor: pointer; flex: none; transition: background 150ms; margin: 0; }
.alSwitch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; transition: left 150ms; }
.alSwitch:checked { background: var(--good); }
.alSwitch:checked::after { left: 15px; }
#alNews { list-style: none; margin: 0; padding: 0; max-height: 150px; overflow: hidden; }
#alNews li { margin: 0 0 6px; line-height: 1.3; padding-left: 9px; border-left: 2px solid rgba(255,255,255,0.2); color: #dfe6ea; }
#alNews .alDate { color: var(--muted); font-size: 10.5px; display: block; }
#alNews .al_bad { border-left-color: var(--bad); }
#alNews .al_good { border-left-color: var(--good); }
#alNews .al_bad, #alNews .al_good { color: #dfe6ea; }

/* RCI meter */
#alRCI { display: flex; gap: 14px; justify-content: center; padding: 2px 0; }
.rciCol { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.rciTrack { width: 18px; height: 64px; display: flex; flex-direction: column; background: rgba(255,255,255,0.06); border-radius: 5px; overflow: hidden; }
.rciUp, .rciDown { flex: 1; position: relative; }
.rciUp { border-bottom: 1px solid rgba(255,255,255,0.35); }
.rciUp span { position: absolute; bottom: 0; left: 0; right: 0; transition: height 500ms; }
.rciDown span { position: absolute; top: 0; left: 0; right: 0; background: rgba(224,87,79,0.75); transition: height 500ms; }
.rci_res .rciUp span { background: #4fd16a; }
.rci_com .rciUp span { background: #4f9de0; }
.rci_ind .rciUp span { background: #f0c64a; }
.rciLetter { font-weight: 700; font-size: 11px; color: var(--muted); }

/* ---- tooltip ---- */
#tooltip { position: fixed; z-index: 100; max-width: 260px; padding: 6px 10px; border-radius: 8px; background: #0f161c; color: #eef2f4;
  font-size: 12px; line-height: 1.35; box-shadow: 0 6px 18px rgba(0,0,0,0.45); pointer-events: none; border: 1px solid var(--line); }
#tooltip.hidden { display: none; }

/* ---- modals ---- */
#opaque { background: rgba(10, 16, 22, 0.55) !important; opacity: 1 !important; backdrop-filter: blur(3px); }
.modal { border: none !important; border-radius: 14px; overflow: hidden; background: #f6f3ec !important; color: #1f2a30; box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  font-family: var(--font); width: 520px; }
.modal header { height: auto !important; font-family: var(--font) !important; font-weight: 700; font-size: 15px; letter-spacing: 0.4px; padding: 12px 16px !important;
  background: linear-gradient(180deg, #2a3843, #1f2a33) !important; color: #fff !important; text-align: left !important; }
.modal .dialogOK, .modal input[type="submit"] { width: auto; min-width: 120px; height: 34px; padding: 0 18px; border-radius: 9px; background: var(--accent); color: #1b1406; font-weight: 700; font-size: 13px; }
.modal button, .modal .cancel { width: auto; min-width: 100px; height: 34px; padding: 0 14px; border-radius: 9px; font-weight: 600; font-size: 13px; }
.modal .cancel { background: #d9dcdf !important; color: #1f2a30 !important; }
#budgetReset { background: #4f8fe0 !important; }
.aboutBody { font-size: 13.5px; line-height: 1.55; }
.aboutBody p { margin: 0 0 10px; }
.aboutBody a { color: #2f6db5; }
#aboutWindow { width: 600px; }

/* splash and start cards */
#splash, #start, #loadingBanner { border: none !important; border-radius: 16px; background: #f6f3ec !important; color: #1f2a30; box-shadow: 0 24px 60px rgba(0,0,0,0.5); }
#splash h2, #start h2 { font-family: var(--font) !important; font-weight: 800; letter-spacing: 0.3px; }
.splashButton { height: 32px !important; border-radius: 9px !important; font-weight: 700; }
#splashPlay { background: var(--accent) !important; color: #1b1406; }
#playit { height: 38px; border-radius: 10px; background: var(--accent) !important; color: #1b1406 !important; font-weight: 800; }

/* ---- the Valley Ledger ---- */
#alPaper { width: 640px !important; background: #f5f0e3 !important; color: #1d1b17; font-family: Georgia, "Times New Roman", serif; border-radius: 6px !important;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,0,0,0.15), 0 0 0 200vmax rgba(10,16,22,0.5); }
#alPaper .paperMast { padding: 14px 22px 0; text-align: center; }
#alPaper .paperEdition { display: flex; justify-content: space-between; font: 600 10.5px var(--font); letter-spacing: 1.2px; text-transform: uppercase; color: #5c554a;
  border-bottom: 1px solid #1d1b17; padding-bottom: 5px; }
#alPaper .alPaperHead { background: none !important; color: #141210 !important; font-family: "Old English Text MT", "UnifrakturMaguntia", Georgia, serif; font-size: 42px;
  font-weight: 700; letter-spacing: 0.5px; padding: 6px 0 2px !important; }
#alPaper.alBad .alPaperHead { background: none !important; color: #141210 !important; }
#alPaper .paperRule { height: 4px; border-top: 2px solid #1d1b17; border-bottom: 1px solid #1d1b17; }
#alPaper .paperBody { padding: 10px 22px 18px; }
#alPaper .paperKicker { font: 700 11px var(--font); text-transform: uppercase; letter-spacing: 1.6px; color: #b3402b; margin-top: 4px; }
#alPaper.alBad .paperKicker { color: #b3402b; }
#alPaper h2 { font-size: 30px; line-height: 1.12; margin: 4px 0 10px; font-weight: 800; }
#alPaper .paperPhoto { margin: 0 0 10px; }
#alPaperPhoto { width: 100%; height: 218px; display: block; filter: sepia(0.18) contrast(1.05); border: 1px solid #1d1b17; }
#alPaper .paperCaption { font: italic 11.5px Georgia, serif; color: #5c554a; margin-top: 3px; }
#alPaper .paperCols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
#alPaper p { font-size: 15px; line-height: 1.45; margin: 0; }
#alPaper p::first-letter { font-size: 2.6em; float: left; line-height: 0.9; padding: 3px 6px 0 0; font-weight: 700; }
#alPaper .paperFacts { border-left: 1px solid #b9b09d; padding-left: 14px; font-size: 13px; }
#alPaper .paperFacts b { display: block; font: 700 10.5px var(--font); text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 2px; }
#alPaper .paperHelps { margin-bottom: 10px; }
#alPaper .paperHelps b { color: #2b7a3d; }
#alPaper .paperStrains b { color: #b3402b; }
#alPaperForm { margin-top: 14px; }
#alPaper .dialogOK { background: #1d1b17 !important; color: #f5f0e3 !important; border-radius: 6px; }

/* ---- footer: compact credits strip (all of the original attribution, in small type) ---- */
footer#footer {
  position: absolute; left: 0; right: 0; bottom: 0; height: 34px !important; padding: 3px 14px !important; box-sizing: border-box; z-index: 30;
  display: block; overflow: hidden; background: #141c22; color: #8fa1ac; font: 10px/1.4 var(--font); text-align: left !important;
  border-top: 1px solid rgba(255,255,255,0.06); white-space: normal;
}
footer#footer a { color: #b9c8d1; margin-left: 0; }
footer#footer #author { display: inline !important; margin-left: 4px; }
footer#footer #author::before { content: "· "; }
footer#footer .nameLicense { display: block; margin: 0; }
footer#footer #build { position: static; display: inline; margin-left: 8px; opacity: 0.6; }

/* ---- phones and small tablets ----
 * The upstream "screen too small" blocker is retired: small screens get the layout below instead. Everything else in
 * this block only applies under the media query, so desktop layout is unchanged. */
#tooSmall, #tooSmall[data-hasscript=true] { display: none !important; }
html, body { overscroll-behavior: none; }
button, input, label, a, .toolButton { touch-action: manipulation; }
#canvasContainer, #MicropolisCanvas { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#menuToggle, #alMini { display: none; }

@media (max-width: 760px), (max-height: 500px) {
  body { -webkit-tap-highlight-color: transparent; }
  header#header { height: 44px; padding: 0 6px; padding-left: max(6px, env(safe-area-inset-left)); padding-right: max(6px, env(safe-area-inset-right)); gap: 6px; }
  #brand .alSub { display: none; }
  #brandMark { width: 20px; height: 20px; flex: none; }
  body.inGame #title, body.inGame #headerLinks { display: none; }
  body:has(#alPanel:not(.collapsed)) #zoomButtons, body:has(#alPanel:not(.collapsed)) #hint { display: none; }
  #hud { flex: 1 1 auto; min-width: 0; margin-left: 0; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  #hud::-webkit-scrollbar { display: none; }
  .hudItem { padding: 2px 7px; min-width: 0; height: 34px; flex: none; }
  .hudItem label { font-size: 8.5px; letter-spacing: 0.5px; }
  .hudItem > span { font-size: 12.5px; }
  .hudCity, .hudScore { display: none; }
  #speedButtons { padding: 2px; gap: 2px; }
  .speedButton { width: 32px !important; height: 30px !important; }
  #menuToggle:not(.initialHidden) { display: block; flex: none; width: 38px; height: 34px; border-radius: 9px; background: rgba(255,255,255,0.08); color: var(--ink);
    border: 1px solid var(--line); font-size: 18px; line-height: 1; }
  #menuButtons { display: none !important; }
  #menuButtons.open:not(.initialHidden) { display: flex !important; position: fixed; top: 48px; right: 6px; z-index: 40; flex-direction: column; gap: 4px; padding: 8px;
    background: var(--glass2); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,0.5); }
  #menuButtons.open .miscButton { height: 42px; min-width: 160px; text-align: left; font-size: 14px; }
  #headerLinks { gap: 8px; font-size: 11px; white-space: nowrap; }

  #wrapper { top: 44px !important; }
  main#canvasContainer { bottom: 18px !important; }
  footer#footer { height: 18px !important; padding: 0 8px !important; white-space: nowrap; overflow-x: auto; overflow-y: hidden; font-size: 9px; line-height: 18px; scrollbar-width: none; }
  footer#footer::-webkit-scrollbar { display: none; }
  footer#footer .nameLicense { display: inline; margin-left: 6px; }

  /* toolbar: a full-width strip that scrolls sideways, big targets */
  #controls { left: 0; right: 0; bottom: 0; transform: none; border-radius: 14px 14px 0 0; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); border-bottom: none; }
  #buttons { overflow-x: auto; overflow-y: hidden; gap: 2px; touch-action: pan-x; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  #buttons::-webkit-scrollbar { display: none; }
  .toolGroup { padding: 0 4px; flex: none; }
  .toolGroupLabel { display: none; }
  #controls .toolButton { width: 52px; height: 52px; flex: none; }
  #controls .toolButton:hover { transform: none; }
  .tbIcon { width: 42px; height: 42px; }
  #toolInfo { top: -26px; font-size: 11px; padding: 3px 10px; max-width: 70vw; overflow: hidden; text-overflow: ellipsis; }

  #zoomButtons { right: 8px; bottom: 120px; }
  #zoomButtons button { width: 42px; height: 42px; }
  #hint { left: 8px; right: 60px; bottom: 120px; font-size: 11px; }

  #notifications { top: 6px !important; max-width: 92vw; z-index: 30; font-size: 12px; padding: 6px 12px 6px 28px !important; }
  #notifications::before { left: 11px; }

  /* City pulse: a bottom sheet above the toolbar; collapsed it is just a summary bar */
  #alPanel { top: auto !important; bottom: 66px; left: 0; right: 0; width: auto; max-height: 58%; border-radius: 14px 14px 0 0; padding: 6px 12px 8px;
    border-bottom: none; box-shadow: 0 -8px 24px rgba(0,0,0,0.35); }
  #alPanel .alTitle { margin-bottom: 4px; min-height: 30px; align-items: center; cursor: pointer; }
  #alPanel .alTitle::before { content: ""; position: absolute; left: 50%; top: 4px; width: 36px; height: 4px; margin-left: -18px; border-radius: 4px; background: rgba(255,255,255,0.25); }
  #alPanel #alMini { display: inline; font-size: 11.5px; color: var(--muted); font-weight: 500; }
  #alPanel .alTitle #alEra { display: none; }
  #alPanel .alCollapse { width: 40px; height: 32px; font-size: 16px; }
  #alPanel.collapsed { padding-bottom: 4px; }
  #alPanel.collapsed .alCollapse::after { content: ""; }
  #alPanel .alPolicy { margin: 8px 0; min-height: 28px; }
  .alSwitch { width: 40px; height: 22px; }
  .alSwitch::after { width: 18px; height: 18px; }
  .alSwitch:checked::after { left: 20px; }

  /* dialogs fit the screen */
  .modal { width: min(520px, 94vw) !important; max-height: calc(100% - 20px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
  #aboutWindow { width: min(600px, 94vw) !important; }
  .aboutBody { font-size: 13px; }
  #statisticsList, .queryList { width: auto !important; padding: 0 10px !important; }
  #budgetForm > div, #budgetForm > fieldset { width: 100% !important; }
  #budgetForm input[type="range"] { max-width: 100%; width: 90%; }
  .modal .dialogOK, .modal input[type="submit"], .modal button, .modal .cancel { height: 42px; }
  #alPaper { width: 96vw !important; }
  #alPaper .paperMast { padding: 10px 12px 0; }
  #alPaper .alPaperHead { font-size: 28px; }
  #alPaper .paperBody { padding: 8px 12px 14px; }
  #alPaper h2 { font-size: 20px; }
  #alPaperPhoto { height: auto; aspect-ratio: 1120 / 440; }
  #alPaper .paperCols { grid-template-columns: 1fr; gap: 10px; }
  #alPaper .paperFacts { border-left: none; padding-left: 0; border-top: 1px solid #b9b09d; padding-top: 8px; }
  #alPaper p { font-size: 14px; }

  /* splash and new-game cards */
  #splash { width: min(540px, 94vw) !important; height: auto !important; max-height: calc(100% - 16px); overflow-y: auto; box-sizing: border-box; padding: 12px !important; }
  #splash p { font-size: 13px; }
  #splashButtonContainer, #splashButtons { position: static !important; }
  #splashContainer canvas { width: 100%; height: auto; display: block; margin: 8px 0; }
  #splashButtons { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
  #splashButtons .splashButton { width: auto !important; min-width: 120px; height: 44px !important; margin: 0 !important; flex: 1 1 auto; }
  #start { width: min(400px, 92vw) !important; box-sizing: border-box; font-size: 15px; max-height: calc(100% - 16px); overflow-y: auto; }
  #nameForm { font-size: 16px; height: 36px; width: 80%; }
  #start input[type=radio] { width: 20px; height: 20px; vertical-align: middle; }
  #playit { width: 70%; height: 46px; }
}

/* phones held sideways: little height, so the sheet and toolbar get slimmer */
@media (max-height: 500px) {
  #controls { padding-top: 4px; padding-bottom: calc(4px + env(safe-area-inset-bottom)); }
  #controls .toolButton { width: 48px; height: 46px; }
  .tbIcon { width: 38px; height: 38px; }
  #alPanel { bottom: 56px; left: auto; right: max(0px, env(safe-area-inset-right)); width: min(380px, 60vw); max-height: calc(100% - 70px); }
  #zoomButtons { bottom: 100px; }
  #hint { bottom: 100px; }
  #splash .alignCenter { margin: 0; }
}

/* narrow portrait phones: the slow speed goes so the top bar fits without scrolling */
@media (max-width: 430px) {
  .speedButton[data-speed="1"] { display: none; }
  body.inGame #brand { display: none; }
  .hudItem { padding: 2px 6px; }
  .hudItem > span { font-size: 12px; }
}

/* ---- Aftersight mayor layer: approval, factions, decision cards, scenario picker ---- */
.hudApproval > span { font-weight: 800; }
#alPanel .alApprovalRow { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
#alPanel .alApprovalBig { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
#alPanel .alApprovalSub { color: var(--muted); font-size: 11px; }
#alPanel .alGoal { color: var(--muted); font-size: 10.5px; line-height: 1.35; margin-top: 6px; }
#alPanel .alDeal { color: #d7e0e5; font-size: 11px; line-height: 1.35; margin-top: 5px; }
#alPanel .alDeal:empty { display: none; }

#alCard { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(600px, 94vw); max-height: calc(100% - 40px);
  overflow-y: auto; z-index: 30; padding: 18px 22px 16px; box-sizing: border-box; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
#alCard .cardKicker { display: flex; justify-content: space-between; gap: 10px; font: 700 11px var(--font); letter-spacing: 1.1px; text-transform: uppercase; color: #8a5a12; }
#alCard[data-type="research"] .cardKicker { color: #2f6db5; }
#alCard[data-type="ask"] .cardKicker { color: #2d7a45; }
#alCard .cardLev { color: #6b6457; letter-spacing: 0.5px; }
#alCard .cardTitle { margin: 6px 0 6px; font: 800 22px/1.2 var(--font); color: #161d22; }
#alCard .cardBody { margin: 0 0 10px; font-size: 14px; line-height: 1.45; color: #34414a; }
#alCard .cardTerms { width: 100%; border-collapse: collapse; margin: 4px 0 12px; font-size: 13px; }
#alCard .cardTerms tr { background: none !important; }
#alCard .cardTerms th { text-align: left; font-weight: 650; color: #4a555d; padding: 6px 10px 6px 0; width: 38%; vertical-align: top; border-top: 1px solid #e3ddd0; }
#alCard .cardTerms td { padding: 6px 0; border-top: 1px solid #e3ddd0; color: #1f2a30; }
#alCard .cardTerms tr.t-bad td { color: #b0352b; }
#alCard .cardTerms tr.t-good td { color: #227a3d; }
#alCard .cardOptions { display: flex; gap: 10px; flex-wrap: wrap; }
#alCard .cardOptWrap { flex: 1 1 150px; display: flex; flex-direction: column; gap: 5px; }
#alCard .cardOption { width: 100%; min-height: 42px; border-radius: 10px; font: 750 14px var(--font); background: #e4e0d6; color: #1f2a30; border: none; cursor: pointer; }
#alCard .cardOption.tone-good { background: var(--accent); color: #1b1406; }
#alCard .cardOption.tone-bad { background: #3a4650; color: #fff; }
#alCard .cardOption.disabled, #alCard .cardOption:disabled { opacity: 0.45; cursor: not-allowed; }
#alCard .cardChips { display: flex; flex-wrap: wrap; gap: 3px; }
#alCard .chip { font: 650 10.5px var(--font); padding: 2px 6px; border-radius: 99px; }
#alCard .chip.up { background: #dcefdc; color: #1e6b33; }
#alCard .chip.down { background: #f6dcd7; color: #9a2d23; }
#alCard .cardNote { font-size: 11px; color: #6b6457; line-height: 1.35; }
#alCard .cardAsks { width: 100%; }
#alCard .cardAsksTitle { font-weight: 700; font-size: 13px; margin-bottom: 6px; }
#alCard .askRow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 0 0 4px; border-radius: 9px; background: #ece7dc; font-size: 13.5px; cursor: pointer; }
#alCard .askRow input { width: 18px; height: 18px; flex: none; }
#alCard .cardAskButtons { display: flex; gap: 10px; margin-top: 10px; }
#alPaper.alGameOver .paperKicker { color: #b0201a; }
#alPaper.alWin .paperKicker { color: #227a3d; }
#alPaperRestart { margin-right: 10px; background: #3a4650 !important; color: #fff !important; }

#alScenarios { border: none; padding: 0; margin: 10px 0 !important; }
#alScenarios legend { font-weight: 700; margin-bottom: 6px; }
#alScenarios .alScen { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; margin-bottom: 6px; border-radius: 10px; background: #ece7dc; cursor: pointer; }
#alScenarios .alScen input { margin-top: 3px; }
#alScenarios .alScen small { display: block; color: #6b6457; font-size: 12px; margin-top: 2px; }
#splashFestus { background: #2f6db5 !important; color: #fff !important; }

@media (max-width: 760px), (max-height: 500px) {
  #alCard { top: 50%; width: 96vw; max-height: calc(100% - 12px); padding: 14px 14px 12px; border-radius: 14px; }
  #alCard .cardTitle { font-size: 19px; }
  #alCard .cardBody { font-size: 13.5px; }
  #alCard .cardTerms { font-size: 12.5px; }
  #alCard .cardTerms tr { background: none !important; }
#alCard .cardTerms th { width: 34%; }
  #alCard .cardOptWrap { flex: 1 1 100%; }
  #alCard .cardOption { min-height: 46px; }
  #alCard .askRow { padding: 11px 10px; }
}
@media (max-width: 430px) {
  .hudPop { display: none; }
}
#alCard[data-type="campaign"] .cardKicker { color: #7a3fa8; }

/* ---- brand: the AfterSIght poster on the splash, the circuit SI as the mark ---- */
#brandMark { background: #cfe3f5 url(../assets/brand/si-mark.webp) center / cover no-repeat; box-shadow: 0 0 8px rgba(120, 180, 255, 0.35); }
#title { font-weight: 600; letter-spacing: 0.3px; }
#title .si { font-weight: 900; letter-spacing: 0; padding: 0 0.5px;
  background: linear-gradient(180deg, #eaf5ff 0%, #8cc4f2 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 0 4px rgba(120, 180, 255, 0.45)); }
#alPoster { position: absolute; top: 0; bottom: 0; left: 0; width: min(42%, 66vh);
  background: #9cc7ea url(../assets/brand/poster.webp) center 47% / cover no-repeat; }
#alPoster::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 28, 34, 0) 75%, rgba(20, 28, 34, 0.6)); }
body.inGame #alPoster { display: none; }

/* ---- intro: splash and town picker, bright like the poster ---- */
:root { --sky1: #dff1ff; --sky2: #f4faff; --warm: #fff0d9; --introInk: #1d2a36; --ink2: #4f5f6d; --blue: #2f7fd1; --blueDark: #1f63ab; --sun: #f5b545; }
body:not(.inGame) main#canvasContainer { background: linear-gradient(165deg, var(--sky1) 0%, var(--sky2) 48%, var(--warm) 100%); }
body:not(.inGame) header#header { background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(246, 251, 255, 0.95)); border-bottom: 1px solid rgba(29, 42, 54, 0.08);
  box-shadow: 0 2px 16px rgba(60, 110, 160, 0.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
body:not(.inGame) #title { color: var(--introInk); }
body:not(.inGame) #brand .alSub, body:not(.inGame) #headerLinks a { color: var(--ink2) !important; }
body:not(.inGame) footer#footer { background: #f3f8fc; color: var(--ink2); border-top: 1px solid rgba(29, 42, 54, 0.08); }
body:not(.inGame) footer#footer a { color: var(--blueDark); }
#title .si, .intro .si { font-weight: 900; }
body:not(.inGame) #title .si { background: linear-gradient(180deg, #2f7fd1, #163e6b); -webkit-background-clip: text; background-clip: text; filter: none; }
.intro .si { color: var(--blue); }
#alPoster { box-shadow: 8px 0 40px rgba(40, 90, 140, 0.18); }
#alPoster::after { background: none; }

#splash.intro, #start.intro { position: absolute; border: none !important; border-radius: 24px; background: rgba(255, 255, 255, 0.94) !important; color: var(--introInk);
  box-shadow: 0 30px 70px rgba(40, 90, 140, 0.22), 0 4px 14px rgba(40, 90, 140, 0.1); font-family: var(--font); box-sizing: border-box;
  height: auto !important; max-height: calc(100% - 32px); overflow-y: auto; padding: 26px 28px !important; text-align: left; }
#splash.intro { width: min(820px, calc(100% - 32px)); }
#start.intro { width: min(560px, calc(100% - 32px)); font-size: 15px; }
.intro h2 { margin: 0 0 4px; font-size: 28px; font-weight: 800; letter-spacing: -0.3px; color: var(--introInk); text-align: left; }
.introHead p { margin: 0 0 18px; color: var(--ink2); font-size: 15px; line-height: 1.45; }
.townCards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.townCard { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid #e3ecf4;
  box-shadow: 0 10px 26px rgba(40, 90, 140, 0.12); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.townCard:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(40, 90, 140, 0.18); }
.townThumb { aspect-ratio: 480 / 300; overflow: hidden; background: linear-gradient(160deg, #cfe8fb, #e9f6e0); position: relative; }
.townThumb img, .townThumb canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
#splashContainer, #splashButtonContainer, #splashButtons { position: static !important; }
#splashContainer { position: absolute !important; inset: 0; }
#splashContainer canvas { width: 100%; height: 100%; object-fit: cover; }
#splashContainer canvas { image-rendering: pixelated; }
.townBody { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.townTag { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--blueDark);
  background: #e6f1fc; padding: 3px 9px; border-radius: 999px; }
.townBody h3 { margin: 2px 0 0; font-size: 19px; font-weight: 800; color: var(--introInk); }
.townBody p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink2); flex: 1; }
.townBtns { display: flex; gap: 8px; margin-top: 8px; }
.intro .splashButton, #playit { font-family: var(--font); font-size: 15px; font-weight: 700; border: none; border-radius: 12px; height: 44px !important;
  padding: 0 18px; cursor: pointer; width: auto !important; margin: 0 !important; transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s; }
.intro .splashButton.primary, #playit { flex: 1; color: #fff !important; background: linear-gradient(180deg, #3f92e6, var(--blueDark)) !important;
  box-shadow: 0 6px 16px rgba(47, 127, 209, 0.35); }
#splashFestus.primary { background: linear-gradient(180deg, #f8c25a, #e79b25) !important; color: #2b1a02 !important; box-shadow: 0 6px 16px rgba(231, 155, 37, 0.35); }
.intro .splashButton.primary:hover, #playit:hover { transform: translateY(-1px); }
.intro .splashButton:focus, #playit:focus { outline: none; }
.intro .splashButton:focus-visible, #playit:focus-visible { outline: 3px solid rgba(47, 127, 209, 0.45); outline-offset: 2px; }
.intro .splashButton.secondary { background: #eef4fa !important; color: var(--blueDark) !important; border: 1px solid #d5e4f2; }
.intro .splashButton.ghost { background: transparent !important; color: var(--blueDark) !important; height: 36px !important; padding: 0 6px; font-weight: 600; }
.intro .splashButton.ghost:disabled { color: #9aa9b6 !important; cursor: default; }
#splashButtonContainer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.introCredit { margin: 0; font-size: 12px; color: #7d8b97; }

/* the town picker */
.formRow { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 0; }
.formLabel, .formRow > label { font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--ink2); }
#start #nameForm { font-family: var(--font); font-size: 16px; height: 44px; width: 100%; box-sizing: border-box; margin: 0; padding: 0 14px;
  border: 1px solid #d3e0ec; border-radius: 12px; background: #f7fbff; color: var(--introInk); outline: none; }
#start #nameForm:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47, 127, 209, 0.18); background: #fff; }
.segmented { display: flex; background: #eef4fa; border-radius: 12px; padding: 4px; gap: 4px; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label { flex: 1; text-align: center; padding: 9px 0; border-radius: 9px; font-weight: 600; color: var(--ink2); cursor: pointer; transition: background 0.15s; }
.segmented input:checked + label { background: #fff; color: var(--blueDark); box-shadow: 0 2px 8px rgba(40, 90, 140, 0.15); }
.segmented input:focus-visible + label { outline: 2px solid var(--blue); }
#alScenarios { border: none; padding: 0; margin: 14px 0 0 !important; }
#alScenarios legend { margin-bottom: 6px; padding: 0; }
#alScenarios .alScen { display: flex; align-items: center; gap: 12px; padding: 10px; margin-bottom: 8px; border-radius: 14px; background: #fff;
  border: 2px solid #e3ecf4; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; text-align: left; }
#alScenarios .alScen:hover { border-color: #b9d4ee; }
#alScenarios .alScen:has(input:checked) { border-color: var(--blue); box-shadow: 0 6px 18px rgba(47, 127, 209, 0.18); background: #f5faff; }
#alScenarios .alScen input { position: absolute; opacity: 0; pointer-events: none; }
#alScenarios .alScen input:focus-visible ~ span { outline: 2px solid var(--blue); }
.scenThumb { width: 88px; height: 58px; flex: none; object-fit: cover; border-radius: 10px; background: linear-gradient(160deg, #cfe8fb, #e9f6e0); image-rendering: pixelated; }
.scenThumb:not([src]) { visibility: visible; }
.scenThumb.scenEmpty { filter: saturate(0.75) brightness(1.06); }
#alScenarios .alScen b { font-size: 15px; color: var(--introInk); }
#alScenarios .alScen small { display: block; color: var(--ink2); font-size: 13px; margin-top: 2px; line-height: 1.35; }
#playSubmitDiv { margin-top: 16px; display: flex; }
#playit { height: 48px !important; font-size: 16px; }

/* desktop: the poster is a panel on the left; the cards sit in the bright space beside it */
@media (min-width: 761px) and (min-height: 501px) {
  #alPoster { width: min(40%, 62vh); }
  body:not(.inGame) #splash, body:not(.inGame) #start, body:not(.inGame) #loadingBanner { left: calc(min(40%, 62vh) + (100% - min(40%, 62vh)) / 2); }
  #splash.intro { width: min(820px, calc(100% - min(40%, 62vh) - 48px)); }
}
/* phones held upright: the poster runs edge to edge across the top, the cards scroll below it */
@media (max-width: 760px) and (orientation: portrait) {
  #alPoster { width: 100%; height: 44%; bottom: auto; background-image: url(../assets/brand/poster-480.webp); background-position: center 52%; box-shadow: none; }
  #alPoster::after { background: linear-gradient(180deg, rgba(244, 250, 255, 0) 70%, var(--sky2) 100%); }
  body:not(.inGame) #splash.intro { top: auto !important; bottom: calc(10px + env(safe-area-inset-bottom)); transform: translateX(-50%);
    width: calc(100% - 20px); max-height: 64%; padding: 14px !important; border-radius: 22px; }
  body:not(.inGame) #start.intro { width: calc(100% - 20px); max-height: calc(100% - 20px); padding: 18px !important; }
  .intro h2 { font-size: 22px; }
  .introHead p { display: none; }
  #splash.intro h2 { margin-bottom: 10px; }
  .townCards { grid-template-columns: 1fr; gap: 10px; }
  .townCard { flex-direction: row; }
  .townThumb { width: 112px; flex: none; aspect-ratio: auto; }
  .townBody { padding: 10px 12px 12px; gap: 4px; }
  .townBody h3 { font-size: 16px; }
  .townBody p { font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .townBtns { flex-wrap: wrap; margin-top: 4px; }
  .intro .splashButton { height: 40px !important; font-size: 14px; padding: 0 12px; }
  .introCredit { display: none; }
  .scenThumb { width: 64px; height: 44px; }
  #start.intro h2 { font-size: 22px; }
  .formRow { margin-top: 10px; }
  #alScenarios { margin-top: 10px !important; }
  #alScenarios .alScen { padding: 8px; margin-bottom: 6px; gap: 10px; }
  #alScenarios .alScen b { font-size: 14px; }
  #alScenarios .alScen small { font-size: 12px; }
  .segmented label { padding: 7px 0; }
  #playSubmitDiv { margin-top: 10px; }
}
/* phones held sideways: poster down the left, the cards scroll beside it */
@media (max-height: 500px) {
  #alPoster { width: 34%; background-position: center 48%; }
  body:not(.inGame) #splash.intro, body:not(.inGame) #start.intro { left: calc(34% + 33%) !important; width: calc(66% - 20px); max-height: calc(100% - 16px); padding: 14px 16px !important; }
  .intro h2 { font-size: 20px; }
  .introHead p { display: none; }
  .townCards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .townThumb { aspect-ratio: 480 / 220; }
  .townBody { padding: 8px 10px 10px; gap: 3px; }
  .townBody h3 { font-size: 15px; }
  .townBody p { display: none; }
  .townBtns { flex-wrap: wrap; margin-top: 4px; }
  .intro .splashButton { height: 38px !important; font-size: 13px; padding: 0 10px; }
  #splashButtonContainer { margin-top: 8px; }
  .introCredit { display: none; }
}
#splashPlay.primary { background: linear-gradient(180deg, #3f92e6, var(--blueDark)) !important; color: #fff !important; }
/* facility design asks: a small group under the money asks */
#alCard .cardAsksDesign { margin-top: 8px; }
#alCard .cardAsksSub { font: 700 11px var(--font); letter-spacing: 0.8px; text-transform: uppercase; color: #2f6db5; margin: 4px 0 5px; }
#alCard .askRow.askDesign { background: #e3ecf4; }
/* Festus Fund and town projects */
.hudPurpose > span { font-weight: 800; }
@media (max-width: 430px) { .hudPurpose { display: none; } }
#alPanel .alFundGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
#alPanel .alFundGrid div { display: flex; flex-direction: column; background: rgba(255,255,255,0.04); padding: 4px 7px; border-radius: 6px; }
#alPanel .alFundGrid span { color: var(--muted); font-size: 11px; }
#alPanel .alFundGrid b { font-weight: 650; font-variant-numeric: tabular-nums; }
#alPanel .alSlider { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; font-size: 11px; color: var(--muted); }
#alPanel .alSlider input { flex: 1; accent-color: #d9b44a; min-width: 0; }
#alPanel .alFundNote { font-size: 11px; color: var(--muted); line-height: 1.35; }
#alPanel .alAbund { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
#alPanel .alProj { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; margin: 0 0 4px; padding: 7px 9px; border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; background: rgba(255,255,255,0.05); color: inherit; font: 600 12px var(--font); text-align: left; cursor: pointer; }
#alPanel .alProj:hover:not(:disabled) { background: rgba(217,180,74,0.18); }
#alPanel .alProj.done { opacity: 0.7; cursor: default; }
#alPanel .alProjInfo { font-weight: 500; color: var(--muted); font-size: 11px; text-align: right; }
#alCard[data-type="project"] .cardKicker { color: #2d7a45; }
#alPanel .alFundGrid b, #alPanel .alProjName { color: #eef2f4; }
/* ---- news ticker, readable: solid, bigger, two lines, always clickable for the full story ---- */
#notifications {
  background: #111a22 !important; color: #f4f7f9 !important; border: 1px solid rgba(255,255,255,0.18) !important;
  font-size: 14px; font-weight: 550; line-height: 1.35; max-width: min(680px, 56vw); border-radius: 14px;
  padding: 8px 40px 8px 34px !important; white-space: normal; text-align: left; cursor: pointer;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#notifications[style*="display: none"] { display: none !important; }
#notifications::after { content: "More \203A"; position: absolute; right: 10px; bottom: 7px; font-size: 11px; font-weight: 700; color: var(--accent); }
#notifications:hover { background: #1a2631 !important; }
#notifications.bad { border-color: rgba(240,96,84,0.65) !important; }
#notifications.good { border-color: rgba(70,200,110,0.55) !important; }
@media (max-width: 760px), (max-height: 500px) {
  #notifications { max-width: 94vw; font-size: 13px; padding: 7px 38px 7px 28px !important; }
}

/* ---- alert detail window ---- */
#alAlertBack { position: absolute; inset: 0; z-index: 40; background: rgba(8,12,16,0.55); }
#alAlert { position: absolute; z-index: 41; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, 94vw); max-height: calc(100% - 40px);
  overflow-y: auto; box-sizing: border-box; padding: 20px 22px 18px; border-radius: 18px; background: #f7f4ec; color: #1f2a30; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
#alAlert.hidden, #alAlertBack.hidden { display: none; }
#alAlertClose { position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; border: none; border-radius: 10px; background: #e4e0d6; color: #1f2a30; font-size: 22px; line-height: 1; cursor: pointer; }
#alAlert .alAlertKicker { font: 700 11px var(--font); letter-spacing: 1.1px; text-transform: uppercase; color: #8a5a12; margin-right: 40px; }
#alAlert .alAlertKicker.t-bad { color: #b0352b; }
#alAlert .alAlertKicker.t-good { color: #227a3d; }
#alAlert .alAlertText { margin: 8px 0 6px; font: 700 18px/1.35 var(--font); color: #161d22; }
#alAlert h3 { margin: 14px 0 6px; font: 700 12px var(--font); text-transform: uppercase; letter-spacing: 0.8px; color: #4a555d; }
#alAlert .alAlertWhy { margin: 0; font-size: 14px; line-height: 1.5; color: #2c3a43; }
#alAlert .alAlertFactions { display: flex; flex-wrap: wrap; gap: 6px; }
#alAlert .alAF { font-size: 13px; padding: 4px 9px; border-radius: 99px; background: #ece7dc; }
#alAlert .alAF i { font-style: normal; font-weight: 700; }
#alAlert .alAF i.up { color: #1e6b33; }
#alAlert .alAF i.down { color: #9a2d23; }
#alAlert .alAlertStats { width: 100%; border-collapse: collapse; font-size: 13.5px; }
#alAlert .alAlertStats th { text-align: left; font-weight: 600; color: #4a555d; padding: 5px 10px 5px 0; width: 40%; border-top: 1px solid #e3ddd0; }
#alAlert .alAlertStats td { padding: 5px 0; border-top: 1px solid #e3ddd0; }
#alAlert .alAlertStats tr.t-bad td { color: #b0352b; }
#alAlert .alAlertStats tr.t-good td { color: #227a3d; }
#alAlert .alAlertActions { display: flex; gap: 10px; margin-top: 16px; }
#alAlert .cardOption { flex: 1; min-height: 42px; border-radius: 10px; font: 750 14px var(--font); background: #e4e0d6; color: #1f2a30; border: none; cursor: pointer; }
#alAlert .cardOption.tone-good { background: var(--accent); color: #1b1406; }
#alPanel #alNews li { cursor: pointer; }
#alPanel #alNews li:hover { background: rgba(255,255,255,0.06); }
/* clip the ticker at exactly two lines: the vertical padding is a transparent border, so overflow can't show in it */
#notifications { padding-top: 0 !important; padding-bottom: 0 !important; border: 0 !important; border-top: 8px solid transparent !important; border-bottom: 8px solid transparent !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.18), 0 6px 20px rgba(0,0,0,0.35); }
#notifications.bad { box-shadow: 0 0 0 1px rgba(240,96,84,0.7), 0 6px 20px rgba(0,0,0,0.35); }
#notifications.good { box-shadow: 0 0 0 1px rgba(70,200,110,0.6), 0 6px 20px rgba(0,0,0,0.35); }
#notifications::after { bottom: 0; }
@media (max-width: 760px), (max-height: 500px) {
  #notifications { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px); box-sizing: border-box; top: 52px !important; }
}
body:not(.inGame) #notifications, #notifications:empty { display: none !important; }

/* ---- build menu: Compute (halls, co-op, Research Lab) and AfterSight (unlocks) sections ---- */
.toolGroupLabel { font-size: 10px; color: #b7c5cf; white-space: nowrap; }
.tgIcon { margin-right: 4px; font-size: 11px; letter-spacing: 0; }
.alGroupCompute .toolGroupLabel { color: #9fd0ff; }
.alGroupAfter .toolGroupLabel { color: #f2c66d; }
#alComputeChip { margin-left: 5px; color: #f4f7f9; font-weight: 700; text-transform: none; letter-spacing: 0; }
#labButton::after { background: #3a7bd5 !important; }
#controls .alLabIdle::after { background: #e0574f !important; }
@media (max-width: 760px), (max-height: 500px) {
  .alGroupCompute .toolGroupLabel, .alGroupAfter .toolGroupLabel { display: flex; position: static; flex: none; flex-direction: column; align-items: center;
    justify-content: center; width: 58px; height: 52px; font-size: 9px; letter-spacing: 0.5px; white-space: normal; text-align: center; line-height: 1.2;
    border-radius: 10px; background: rgba(255,255,255,0.06); }
  .tgIcon { margin: 0 0 1px; font-size: 13px; }
  #alComputeChip { display: block; margin: 2px 0 0; font-size: 10px; }
}
/* leave room for "More ›" when the ticker is a single line */
#notifications { padding-right: 60px !important; }
@media (max-width: 760px), (max-height: 500px) { #notifications { padding-right: 54px !important; } }
.alGroupCompute { min-width: 178px; }
@media (max-width: 760px), (max-height: 500px) { .alGroupCompute { min-width: 0; } }
/* narrower desktops: smaller buttons, and the strip scrolls sideways rather than running off the screen */
@media (min-width: 761px) and (min-height: 501px) and (max-width: 1360px) {
  #controls { max-width: calc(100vw - 24px); }
  #buttons { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
  #controls .toolButton { width: 40px; height: 40px; flex: none; }
  #controls .toolButton:hover { transform: none; }
  .tbIcon { width: 34px; height: 34px; }
  .toolGroup { flex: none; padding-left: 4px; padding-right: 4px; }
  .alGroupCompute { min-width: 166px; }
}

/* ---- Festus: the three headline dials (approval, household income, Purpose), the path, and town hall asks ---- */
body.alFestus .hudScore { display: none; }
body:not(.alFestus) .hudIncome { display: none; }
.hudIncome { min-width: 96px; }
.hudIncome .hudIncBar { display: flex; flex: none; height: 7px !important; min-height: 7px; width: 78px; margin: 3px 0 2px; border-radius: 99px; overflow: hidden; background: rgba(255,255,255,0.08); }
.hudIncome .hudIncBar i { height: 7px !important; }
.hudIncBar i, #alPanel .alIncBar i { display: block; height: 100%; transition: width 400ms; }
#hudIncW, #alIncW { background: #9aa9b3; }
#hudIncO, #alIncO { background: #35c45a; }
#hudIncT, #alIncT { background: #e9b44a; }
.hudIncome .hudOwn { font-size: 11px !important; font-weight: 700; color: #7fe39a; line-height: 1; }
@media (max-width: 760px), (max-height: 500px) { .hudIncome { min-width: 0; } .hudIncome .hudIncBar { width: 54px; } }
@media (max-width: 430px) { .hudIncome { display: none !important; } }
#alPanel .alPath, #alPanel .alTownHall { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; width: 100%; height: auto; min-height: 30px; margin: 4px 0 6px;
  padding: 6px 9px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255,255,255,0.05); color: var(--ink); font: 700 12px/1.3 var(--font);
  text-align: left; cursor: pointer; box-sizing: border-box; }
#alPanel .alPath[data-tone="good"] { border-color: rgba(70,200,110,0.55); color: #a9efbd; }
#alPanel .alPath[data-tone="bad"] { border-color: rgba(240,96,84,0.55); color: #ffb3aa; }
#alPanel .alTownHall { border-color: rgba(242,181,68,0.55); background: rgba(242,181,68,0.12); }
#alPanel .alTownHall b { margin-left: auto; color: var(--accent); white-space: nowrap; }
#alPanel .alTownHall .alPathK { flex-basis: 100%; }
#alPanel .alTownHall.hidden { display: none; }
#alPanel .alPathK { font-weight: 600; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.9px; color: var(--muted); }
#alPanel .alIncBar { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: rgba(255,255,255,0.08); margin: 2px 0 5px; }
#alPanel .alIncLegend { display: flex; flex-wrap: wrap; gap: 3px 10px; font-size: 11px; color: var(--muted); }
#alPanel .alIncLegend b { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; }
#alPanel .alIncLegend em { font-style: normal; color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
#alPanel .alIncLegend .kW { background: #9aa9b3; } #alPanel .alIncLegend .kO { background: #35c45a; } #alPanel .alIncLegend .kT { background: #e9b44a; }
#alPanel #alIncomeOwn { font-weight: 600; letter-spacing: 0; text-transform: none; color: #7fe39a; }
#alPanel .alIncNote { font-size: 11px; color: var(--muted); line-height: 1.35; margin-top: 3px; }
#alPanel .alMoreToggle { width: 100%; margin: 6px 0 2px; padding: 6px 9px; border-radius: 8px; border: 1px dashed var(--line); background: none; color: var(--muted);
  font: 600 11px var(--font); text-align: left; cursor: pointer; }
#alPanel .alMore { display: none; }
#alPanel .alMore.open { display: block; }
/* offer cards: the key terms first, the rest folded */
#alCard .cardTerms tr.minor { display: none; }
#alCard .cardTerms.showAll tr.minor { display: table-row; }
#alCard .cardMore { margin: -6px 0 12px; padding: 4px 10px; border: none; border-radius: 8px; background: #ece7dc; color: #4a555d; font: 650 12px var(--font); cursor: pointer; }
/* alert window: what you can do, and town hall asks decided in place */
#alAlert .alAlertLever { color: #24543a; }
#alAlert .alQuick { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 4px; }
#alAlert .alQuick .cardOptWrap { flex: 1 1 150px; display: flex; flex-direction: column; gap: 5px; }
#alAlert .alQuick .cardOption.tone-bad { background: #3a4650; color: #fff; }
#alAlert .alQuick .cardOption.disabled { opacity: 0.45; cursor: not-allowed; }
#alAlert .cardChips { display: flex; flex-wrap: wrap; gap: 3px; }
#alAlert .chip { font: 650 10.5px var(--font); padding: 2px 6px; border-radius: 99px; }
#alAlert .chip.up { background: #dcefdc; color: #1e6b33; }
#alAlert .chip.down { background: #f6dcd7; color: #9a2d23; }
#alAlert .alQuickNote { font-size: 11.5px; color: #6b6457; margin: 4px 0 0; }

/* Aftersight: the demand meter sits beside the zone tools, like a city builder's RCI bars */
.alRCIbar { display: flex; gap: 5px; align-items: center; padding: 0 2px 0 6px; height: 42px; }
.alRCIbar .rciCol { gap: 1px; cursor: help; }
.alRCIbar .rciTrack { width: 10px; height: 30px; border-radius: 3px; }
.alRCIbar .rciLetter { font-size: 9px; line-height: 10px; }
.alHomes { margin-top: 6px; }