/* ===================== Vitropolis — Meta Ray-Ban Display ===================== */
:root {
  --bg:        #000000;   /* transparent on additive display */
  --surface:   #0b1311;   /* faintly visible UI surface */
  --surface-2: #10201b;
  --surface-3: #16302a;
  --line:      #1d3a32;
  --line-soft: #13241f;

  --text:   #eafff6;
  --text-2: #9fc4b6;
  --muted:  #5f7d73;

  --teal:   #4fe0c0;   /* primary accent / titles */
  --green:  #54d27a;   /* residential / positive money */
  --blue:   #4aa3ff;   /* commerce / water / police */
  --amber:  #f4b53a;   /* industry */
  --orange: #ff8a3d;   /* power / fire-dept warm */
  --red:    #ff5a6a;   /* danger / fire */
  --purple: #b98cff;   /* transit */
  --pink:   #ff6fae;   /* hospital */

  --focus:  #6df3d4;
  --focus-glow: rgba(109, 243, 212, 0.45);

  --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Cascadia Code', 'Consolas', 'Roboto Mono', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}

/* center the fixed-size app; JS scales #app to fit any screen (1:1 on the 600×600 glasses) */
body { display: flex; align-items: center; justify-content: center; }

#app {
  position: relative;
  width: 600px;
  height: 600px;
  flex: 0 0 auto;
  transform-origin: center center;
  /* rounded glass frame */
  border-radius: 26px;
  overflow: hidden;
}
/* subtle frame glow drawn over everything, non-interactive */
#app::after {
  content: '';
  position: absolute; inset: 4px;
  border-radius: 22px;
  border: 1px solid rgba(79, 224, 192, 0.18);
  box-shadow: inset 0 0 40px rgba(0, 30, 24, 0.55);
  pointer-events: none;
  z-index: 50;
}

.screen { position: absolute; inset: 0; display: flex; flex-direction: column; }
.hidden { display: none !important; }

/* ============================== PLAY SCREEN ============================== */
#game { z-index: 1; }

.hud {
  flex-shrink: 0;
  background: linear-gradient(var(--surface), #07100d);
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  z-index: 5;
}
#hud-top   { border-bottom: 1px solid var(--line-soft); }
#hud-bottom{ border-top: 1px solid var(--line-soft); padding-bottom: 12px; }

.hud-row { display: flex; align-items: center; gap: 10px; }
.spacer { flex: 1; }

.funds { color: var(--teal); font-weight: 700; font-size: 22px; letter-spacing: 0.5px; }
.date  { font-weight: 700; font-size: 18px; letter-spacing: 2px; flex: 1; text-align: center; }
.pop   { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 18px; }
.ic-pop { color: var(--teal); font-style: normal; }
.ic-pwr { color: var(--orange); font-style: normal; }
.ic-wtr { color: var(--blue); font-style: normal; }

.hud-row-2 { font-size: 14px; }
.muted { color: var(--muted); }
.net   { color: var(--green); font-weight: 700; }
.net.neg { color: var(--red); }
.speed { color: var(--teal); font-weight: 700; min-width: 28px; }
.pwr   { color: var(--text-2); display: flex; align-items: center; gap: 4px; }
.pwr.over { color: var(--red); }
.jobs  { color: var(--text-2); }
.appr  { font-weight: 700; font-size: 14px; }

.hud-ticker { font-size: 11px; gap: 7px; overflow: hidden; white-space: nowrap; color: var(--text-2); letter-spacing: 0.3px; padding-top: 1px; }
.hud-ticker:empty { display: none; }
.hud-ticker .tk { display: inline-flex; align-items: center; gap: 2px; }
.hud-ticker .tk b { color: var(--teal); font-weight: 700; }

#stage { flex: 1; position: relative; overflow: hidden; }
#city  { display: block; width: 100%; height: 100%; }

.alert {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  background: rgba(20, 8, 10, 0.92); color: var(--red);
  border: 1px solid var(--red); border-radius: 20px;
  padding: 6px 16px; font-size: 13px; font-weight: 700; letter-spacing: 0.5px;
  max-width: 536px; text-align: center; z-index: 8;
  box-shadow: 0 0 18px rgba(255, 90, 106, 0.3);
}
.alert.info {
  color: var(--teal); border-color: var(--teal);
  box-shadow: 0 0 18px rgba(79, 224, 192, 0.28);
}

/* tool readout */
.tool-glyph { color: var(--green); font-weight: 700; font-size: 18px; width: 18px; text-align: center; }
.tool-name  { font-weight: 700; font-size: 17px; letter-spacing: 1px; }
.tool-cost  { color: var(--text-2); font-size: 15px; }
.demand-label { color: var(--muted); font-size: 12px; letter-spacing: 1px; }
.desc-row { font-size: 13px; }
.tool-desc { color: var(--text-2); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hint-row { font-size: 12px; }
.hint { color: var(--muted); flex: 1; }

/* demand bars (right side of bottom HUD) */
.demand-bars { display: flex; align-items: flex-end; gap: 8px; height: 22px; }
.dbar { width: 16px; height: 100%; background: rgba(255,255,255,0.06); border-radius: 3px; position: relative; overflow: hidden; }
.dfill { position: absolute; left: 0; right: 0; bottom: 0; height: 0%; border-radius: 3px; transition: height 0.5s ease, background 0.4s ease; }
.dbar-r .dfill { background: var(--green); }
.dbar-c .dfill { background: var(--blue); }
.dbar-i .dfill { background: var(--amber); }
.demand-keys { display: flex; gap: 8px; }
.demand-keys b { width: 16px; text-align: center; font-size: 13px; font-weight: 700; }
.k-r { color: var(--green); }
.k-c { color: var(--blue); }
.k-i { color: var(--amber); }

/* ============================== OVERLAYS ============================== */
.overlay {
  z-index: 20;
  background: radial-gradient(120% 90% at 50% 0%, rgba(10,26,22,0.97), rgba(2,7,6,0.99));
  padding: 16px 18px;
  overflow-y: auto;
  gap: 10px;
}
.overlay-title {
  color: var(--teal);
  font-size: 22px; font-weight: 700; letter-spacing: 3px;
  text-align: center; margin-top: 4px;
  text-shadow: 0 0 14px rgba(79, 224, 192, 0.35);
}
.overlay-sub { text-align: center; color: var(--text-2); font-size: 14px; letter-spacing: 1px; margin-top: -4px; }

.foot-hint { color: var(--muted); font-size: 12px; text-align: center; letter-spacing: 0.5px; }
.foot-hint.pad { margin-top: auto; padding-top: 8px; }
.foot-hint.focusable { padding: 10px; border-radius: 12px; border: 1px solid transparent; }

/* ----- CHOOSE TOOL grid ----- */
.tool-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  flex: 1; align-content: start; margin-top: 6px;
}
/* full-width supply-chain section header (spans all 3 columns, not focusable) */
.tool-grid .grp-head {
  grid-column: 1 / -1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 9px;
  margin: 9px 2px 1px; font-weight: 700; font-size: 11px; letter-spacing: 1.5px;
}
.tool-grid .grp-head:first-child { margin-top: 0; }
.tool-grid .grp-note { color: var(--muted); font-weight: 400; letter-spacing: 0.3px; font-size: 10.5px; text-transform: none; }
.tile {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: 12px; padding: 10px 11px; min-height: 56px;
  transition: transform 0.18s cubic-bezier(0.6,0,0.4,1), box-shadow 0.2s, border-color 0.2s;
}
.tile .glyph { font-size: 20px; font-weight: 700; width: 22px; text-align: center; flex-shrink: 0; }
.tile .body  { min-width: 0; }
.tile .t-name { font-size: 14px; font-weight: 700; letter-spacing: 0.5px; white-space: nowrap; }
.tile .t-cost { font-size: 12px; color: var(--text-2); }
.tile.locked { opacity: 0.45; }
.tile.locked .t-cost { color: var(--amber); }

.overlay-foot { margin-top: 8px; text-align: center; }
.foot-name { font-weight: 700; letter-spacing: 1px; }
.foot-desc { color: var(--text-2); font-size: 13px; margin: 2px 0 4px; }

/* ----- menu list ----- */
.menu-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; flex: 1; }
.menu-section { color: var(--teal); font-size: 12px; letter-spacing: 2px; margin: 8px 4px 0; opacity: 0.8; }
.menu-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 13px 16px; font-size: 16px;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.menu-item .mi-label { flex: 1; }
.menu-item .mi-note  { color: var(--muted); font-size: 13px; }
.menu-item .mi-value { color: var(--teal); font-weight: 700; }
.menu-item .mi-adjust { color: var(--text-2); letter-spacing: 2px; }
.mi-adjust { display:flex;align-items:center;gap:6px; }
.mi-adjust button { min-width:36px;min-height:36px;border:1px solid #719186;border-radius:6px;background:#213e43;color:#f4d395;font:700 20px system-ui;cursor:pointer; }

/* ----- stats ----- */
.stats-body { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; flex: 1; }
.stat-row { display: flex; align-items: baseline; padding: 5px 6px; font-size: 15px; }
.stat-row .s-key { color: var(--text-2); flex: 1; }
.stat-row .s-val { font-weight: 700; text-align: right; }
.s-val.good { color: var(--green); } .s-val.bad { color: var(--red); }
.s-val.warn { color: var(--amber); } .s-val.info { color: var(--blue); }

/* ----- map ----- */
.map-filter { display: flex; align-items: center; justify-content: center; gap: 14px; font-weight: 700; letter-spacing: 2px; }
.map-filter .chev { color: var(--teal); }
.map-mode { min-width: 130px; text-align: center; }
.map-wrap { flex: 1; display: flex; align-items: center; justify-content: center; }
#minimap { image-rendering: pixelated; border-radius: 8px; }
.map-legend { display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: center; font-size: 12px; color: var(--text-2); }
.map-legend span { display: flex; align-items: center; gap: 5px; }
.map-legend i { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }

/* ----- howto / inspect / report ----- */
.howto-body, .report-body, .inspect-body { font-size: 14px; line-height: 1.5; color: var(--text-2); display: flex; flex-direction: column; gap: 9px; margin-top: 4px; flex: 1; }
.howto-body b.g, .report-body b.g { color: var(--teal); }
.howto-body .howto-h { color: var(--teal); font-weight: 700; letter-spacing: 1.5px; font-size: 12px; margin-top: 7px; padding-top: 10px; border-top: 1px solid var(--line); }
.g { color: var(--teal); }
.report-body .r-row { display: flex; justify-content: space-between; font-size: 15px; color: var(--text); }
.report-body .r-row .r-val { font-weight: 700; }
.report-body .r-event { color: var(--text-2); font-size: 13px; }
.inspect-body .stat-row .s-key { color: var(--muted); }

/* ============================== FOCUS ============================== */
.focusable { cursor: pointer; outline: none; }
.focusable:focus,
.tile.focused, .menu-item.focused, .foot-hint.focused {
  border-color: var(--focus) !important;
  box-shadow: 0 0 18px var(--focus-glow);
}
.tile.focused, .menu-item.focused { transform: scale(1.03); background: var(--surface-2); }

/* ============================== TOAST / BOOT ============================== */
.toast {
  position: fixed; top: 96px; left: 50%;
  transform: translateX(-50%) translateY(-14px);
  background: rgba(8,20,16,0.95); border: 1px solid var(--teal);
  border-radius: 18px; padding: 9px 18px; font-size: 13px; color: var(--text);
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 60;
  max-width: 520px; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.warn { border-color: var(--amber); }
.toast.bad  { border-color: var(--red); }

.boot {
  position: absolute; inset: 0; z-index: 80;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: #02060500;
  background: radial-gradient(circle at 50% 45%, rgba(10,28,23,1), rgba(0,0,0,1));
  transition: opacity 0.5s;
}
.boot.gone { opacity: 0; pointer-events: none; }
.boot-logo { font-size: 40px; font-weight: 700; letter-spacing: 4px; text-shadow: 0 0 24px rgba(79,224,192,0.4); }
.boot-logo .g { color: var(--teal); }
.boot-sub { color: var(--muted); font-size: 14px; letter-spacing: 2px; }

/* ============================== MENU BUTTON ============================== */
/* floating, always-visible menu affordance for tap/click (mouse + touch).
   On the glasses the menu opens via the wiggle gesture instead. */
.menu-btn {
  position: absolute; bottom: 12px; right: 12px; z-index: 9;
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 20, 16, 0.72); border: 1px solid var(--line);
  color: var(--teal); font-size: 21px; font-weight: 700; line-height: 1;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s, border-color 0.2s, box-shadow 0.2s;
}
.menu-btn:hover, .menu-btn:active { border-color: var(--focus); box-shadow: 0 0 16px var(--focus-glow); transform: scale(1.06); }

/* ============================== TOUCH D-PAD ============================== */
/* hidden by default; JS adds .touch to #app on touch devices to reveal it.
   2×2 diamond of buttons — each corner pans toward its own screen corner. */
#dpad {
  display: none;
  position: absolute; left: 14px; bottom: 14px; z-index: 9;
  width: 116px; height: 116px;
  grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 7px;
  touch-action: none;
}
#app.touch #dpad { display: grid; }
.dpad-btn {
  -webkit-appearance: none; appearance: none; margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 20, 16, 0.62); border: 1px solid var(--line);
  color: var(--teal); font-size: 24px; font-weight: 700; line-height: 1;
  border-radius: 12px; cursor: pointer; touch-action: none;
  -webkit-tap-highlight-color: transparent; transition: background 0.08s, box-shadow 0.08s, border-color 0.08s;
}
.dpad-btn[data-dir="nw"] { border-top-left-radius: 30px; }
.dpad-btn[data-dir="ne"] { border-top-right-radius: 30px; }
.dpad-btn[data-dir="sw"] { border-bottom-left-radius: 30px; }
.dpad-btn[data-dir="se"] { border-bottom-right-radius: 30px; }
.dpad-btn.down { background: rgba(79, 224, 192, 0.3); border-color: var(--teal); box-shadow: 0 0 14px rgba(79, 224, 192, 0.4); }

/* ============================== COVERAGE OVERLAY BANNER ============================== */
/* floating strip at the top of the map while a data overlay (police/fire/power/…) is on */
#overlay-banner {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 8;
  max-width: 94%; display: flex; align-items: center; gap: 4px 9px; flex-wrap: wrap; justify-content: center;
  padding: 5px 11px; border-radius: 11px;
  background: rgba(8, 20, 16, 0.82); border: 1px solid var(--teal);
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.45); cursor: pointer; -webkit-tap-highlight-color: transparent;
  font-size: 11.5px; line-height: 1.3; transition: border-color 0.2s, box-shadow 0.2s;
}
#overlay-banner.hidden { display: none; }
#overlay-banner:hover { border-color: var(--focus); box-shadow: 0 0 18px var(--focus-glow); }
#overlay-banner .ov-name { color: var(--teal); font-weight: 700; letter-spacing: 0.4px; }
#overlay-banner .ov-sum { color: var(--text); }
#overlay-banner .ov-key { color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
#overlay-banner .ov-key i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
#overlay-banner .ov-g { background: rgba(84, 210, 122, 0.75); }
#overlay-banner .ov-r { background: rgba(255, 90, 106, 0.75); margin-left: 3px; }
#overlay-banner .ov-x { color: var(--muted); font-weight: 700; padding-left: 3px; font-size: 12px; }
#overlay-banner:hover .ov-x { color: var(--text); }

/* inspect-panel "show coverage" action row */
.inspect-act { cursor: pointer; margin-top: 4px; }
.inspect-act .s-val { color: var(--teal); font-weight: 700; }
.inspect-act:hover, .inspect-act.focus { outline: 1px solid var(--focus); border-radius: 8px; }

/* ============================== CONTROLS SCREEN ============================== */
.ctrl-body { display: flex; flex-direction: column; gap: 7px; margin-top: 6px; flex: 1; overflow-y: auto; }
.ctrl-sec { color: var(--teal); font-size: 12px; letter-spacing: 2px; margin: 6px 4px 0; opacity: 0.8; }
.ctrl-row { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; }
.ctrl-act { font-weight: 700; font-size: 14px; letter-spacing: 0.5px; color: var(--text); margin-bottom: 5px; }
.ctrl-maps { display: flex; flex-direction: column; gap: 4px; }
.ctrl-map { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.ctrl-map .pf { color: var(--muted); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; background: rgba(255,255,255,0.05); padding: 1px 6px; border-radius: 5px; min-width: 46px; text-align: center; }
.ctrl-map .ck { color: var(--text-2); }
.ctrl-map.hi .ck { color: var(--teal); font-weight: 700; }
.ctrl-map.hi .pf { color: var(--teal); background: rgba(79, 224, 192, 0.14); }
.ctrl-note { color: var(--muted); font-size: 12px; line-height: 1.5; margin-top: 4px; }

/* Civic desk: clean hierarchy at the native 600 × 600 display size. */
:root { --surface:#12232a; --surface-2:#203b40; --surface-3:#29464c; --line:#476364; --line-soft:#293f45; --text:#f0f1df; --text-2:#c1d0cb; --muted:#9badac; --teal:#a6d9be; --focus:#f4d395; --focus-glow:rgba(244,211,149,.16); }
html,body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
#app { border-radius:14px; }
#app::after { inset:0; border-radius:14px; border:1px solid #496365; box-shadow:none; }
.hud { background:#0c1b22; padding:9px 16px; gap:5px; }
.city-brand { display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:800; letter-spacing:2.5px; color:#e8d8af; margin-bottom:3px; }
.city-brand-sub { color:#9bb8b7; font-size:9px; letter-spacing:1.8px; }
.hud-row-1 { gap:0; align-items:stretch; }
.metric { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; border-right:1px solid #32474c; }
.metric small { color:#9fb7b6; font-size:9px; letter-spacing:1.5px; font-weight:700; }
.metric-date { padding-left:20px; flex:1.1; }
.metric-pop { text-align:right; border:0; flex:.7; }
.funds { color:#f2dfb9; font-size:25px; line-height:1.1; font-variant-numeric:tabular-nums; }
.date { font-size:15px; text-align:left; letter-spacing:1px; line-height:27px; }
.pop { justify-content:flex-end; color:#b5e0ce; font-size:23px; line-height:1.2; font-variant-numeric:tabular-nums; }
.ic-pop { font-size:15px; }
.hud-row-2 { border-top:1px solid #2a4047; padding-top:6px; margin-top:3px; font-size:12px; gap:9px; }
.appr { font-size:12px; }
.hud-ticker { font-size:11px; }
#hud-top { border-bottom:1px solid #728c83; }
#hud-bottom { border-top:1px solid #728c83; padding-top:10px; gap:6px; }
.tool-glyph { display:flex; align-items:center; justify-content:center; background:#284a43; border:1px solid #648c79; border-radius:6px; width:30px; height:27px; color:#cbedd2; }
.tool-name { font-size:16px; letter-spacing:1px; }
.tool-cost { color:#f1d6a3; padding:3px 8px; background:#263637; border-radius:4px; font-size:13px; }
.demand-label { font-size:10px; color:#a9c1b8; }
.tool-desc { font-size:13px; }
.hint { color:#a8bdb8; font-size:12px; }
.menu-btn { background:#142b30; border:1px solid #9ab8a4; border-radius:9px; color:#f3ddb3; box-shadow:none; }
.dpad-btn { background:#132b30; border:1px solid #4e7570; color:#cae2cb; box-shadow:none; }
.overlay { background:#07141b; padding:22px 20px 15px; }
.overlay > .menu-list,.overlay > .tool-grid { min-height:0;overflow-y:auto;overscroll-behavior:contain;flex:1 1 0;padding:2px; }
.overlay-title { position:sticky;top:0;z-index:2;background:#07141b;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-shrink:0; }
.overlay > .overlay-foot,.overlay > .foot-hint,.overlay > .overlay-sub { flex-shrink:0; }
.overlay-back { font:600 14px system-ui;color:#efe2bd;background:#213c43;border:1px solid #6b8884;border-radius:7px;padding:8px 14px;cursor:pointer;letter-spacing:0; }
.overlay-title { text-align:left; padding-bottom:14px; border-bottom:1px solid #526c6b; color:#eee2c5; font-size:24px; letter-spacing:.3px; font-weight:750; text-shadow:none; }
.overlay-sub { text-align:left; font-size:14px; color:#a9c3bd; letter-spacing:.4px; }
.tool-grid { gap:8px; }
.tile { min-height:76px; padding:8px; gap:5px; border-radius:8px; background:#142831; border-color:#3a575d; box-shadow:none; transition:background .12s; }
.tile .t-name { white-space:normal; font-size:12px; letter-spacing:.1px; line-height:1.25; display:inline-block; }
.tile .t-cost { font-size:12px; color:#d6c6a3; }
.tool-art { width:45px; height:42px; flex-shrink:0; object-fit:contain; }
.tool-grid .grp-head { margin-top:13px; margin-bottom:3px; font-size:12px; letter-spacing:1.2px; }
.tool-grid .grp-note { font-size:11px; color:#abc1b8; letter-spacing:0; }
.menu-item { padding:13px 15px; border-radius:8px; background:#132831; border-color:#3b575e; font-size:16px; }
.menu-section { color:#ddca9c; font-size:11px; letter-spacing:1.8px; opacity:1; }
.menu-item .mi-note { color:#acc4ba; }
.tile.focused,.menu-item.focused,.focusable:focus { transform:none; border:2px solid #f4d395!important; box-shadow:inset 4px 0 #f4d395; background:#2b4648; }
.overlay-foot { background:#11242c; border:1px solid #405e62; padding:10px; border-radius:8px; }
.foot-name { font-size:15px; color:#f4dcac; }
.foot-hint { color:#adc6bb; font-size:12px; }
.ctrl-row { border-color:#3b565d; background:#13252d; border-radius:8px; }
.ctrl-map { font-size:13px; }
.ctrl-map .pf { color:#adbfba; }
.toast { background:#162b32; border-radius:8px; font-size:14px; }
.stat-row { border-bottom:1px solid #20383e; padding:8px 6px; }
.boot { background:#07151d; }
.boot-logo { color:#efe2bd; text-shadow:none; font-family:inherit; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; animation:none!important; } }