/* SimHub 3000 — SimCity 3000-inspired skin: beveled metal panels, LCD readouts,
   isometric map, advisors and a news ticker. Calm by design: no blinking. */
:root {
  --metal-hi: #9aa597;
  --metal: #6f7b6c;
  --metal-lo: #3d463b;
  --frame-dark: #1d241c;
  --well: #1f2a26;
  --ink: #ece6c8;
  --muted: #a9ae94;
  --gold: #f5c542;
  --gold-dk: #a8801e;
  --lcd-bg: #0b1408;
  --lcd: #7dff6a;
  --bad: #ff7a63;
  --brand: #6fc6ea;
  --wb: #ffd85c;
  --board: #0d0d0a;
  --board-ink: #ffb000;
  --bevel-out: inset 2px 2px 0 var(--metal-hi), inset -2px -2px 0 var(--metal-lo);
  --bevel-in: inset 2px 2px 0 rgba(0,0,0,.55), inset -2px -2px 0 rgba(255,255,255,.12);
  --panel: linear-gradient(180deg, #7b8778, var(--metal) 40%, #5d685a);
  --btn: linear-gradient(180deg, #a3ae9f, #7b8777);
  --btn-hover: linear-gradient(180deg, #c7d1bd, #96a28f);
  --btn-gold: linear-gradient(180deg, #ffe680, #d9a92a);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
  font-size: 13px;
  color: var(--ink);
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 2px, transparent 2px 6px), linear-gradient(180deg, #2b3430, #161c19);
  background-attachment: fixed;
  min-height: 100vh;
  padding-bottom: 34px; /* room for the news ticker */
}
button { font: inherit; color: inherit; cursor: pointer; }
h3 { margin: 0; font-size: 12px; color: var(--gold); text-transform: uppercase; letter-spacing: .05em; text-shadow: 1px 1px 0 #000; }
.muted { color: var(--muted); font-size: 11.5px; }
.hidden { display: none !important; }
.lcd { font-family: "VT323", "Lucida Console", "Courier New", monospace; }

/* ----- Panels ----- */
.card { background: var(--panel); border: 1px solid var(--frame-dark); border-radius: 3px; box-shadow: var(--bevel-out), 0 4px 0 rgba(0,0,0,.35); padding: 10px; }
.card-h { display: flex; justify-content: space-between; align-items: baseline; margin: -4px -4px 8px; padding: 4px 8px; background: linear-gradient(180deg, #2e3a33, #1c2520); box-shadow: var(--bevel-in); }

/* ----- Shared button look (raised metal) ----- */
.icon-btn, .btn, .opt, .quiz-opt, .freq button, .hz .b {
  background: var(--btn); border: 1px solid #111; color: #111; border-radius: 2px;
  box-shadow: inset 1px 1px 0 #d9e0d4, inset -1px -1px 0 #4a5347;
}
.icon-btn:hover, .btn:hover:not(:disabled), .opt:hover:not(:disabled), .freq button:hover:not(:disabled), .hz:hover .b { background: var(--btn-hover); }
.icon-btn:active, .btn:active:not(:disabled), .opt:active:not(:disabled), .freq button:active:not(:disabled) {
  box-shadow: inset 1px 1px 0 #4a5347, inset -1px -1px 0 #d9e0d4; transform: translateY(1px);
}

/* ----- Top bar ----- */
.topbar {
  display: flex; align-items: center; gap: 12px; padding: 6px 12px; flex-wrap: wrap; position: sticky; top: 0; z-index: 20;
  background: linear-gradient(180deg, #8a9686, #5b6658); border-bottom: 2px solid var(--frame-dark); box-shadow: var(--bevel-out), 0 3px 0 rgba(0,0,0,.4);
}
.brand { display: flex; align-items: center; gap: 8px; }
.logo { width: 34px; height: 34px; display: grid; place-items: center; font-size: 19px; color: var(--gold); background: radial-gradient(circle at 35% 30%, #4f6c80, #1d2b35); border: 1px solid #000; border-radius: 50%; box-shadow: var(--bevel-out); text-shadow: 1px 1px 0 #000; }
.airline { font-weight: 700; font-size: 15px; color: var(--gold); text-shadow: 1px 1px 0 #000; }
.sub { color: #141a12; font-size: 11px; font-weight: 700; }
.stats { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
.stat { background: var(--lcd-bg); box-shadow: var(--bevel-in); border: 1px solid #000; padding: 1px 10px 2px; min-width: 96px; }
.stat .k { display: block; font-size: 9.5px; color: #6aa060; text-transform: uppercase; letter-spacing: .06em; }
.stat .v { font-family: "VT323", "Lucida Console", monospace; font-size: 22px; line-height: 1; color: var(--lcd); text-shadow: 0 0 6px rgba(125,255,106,.4); }
.stat .v.neg { color: var(--bad); text-shadow: 0 0 6px rgba(255,122,99,.4); }
.top-actions { display: flex; gap: 4px; }
.icon-btn { padding: 4px 9px; font-weight: 700; }

/* ----- Layout ----- */
.layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; padding: 12px; max-width: 1500px; margin: 0 auto; }
@media (max-width: 1000px) { .layout { grid-template-columns: 1fr; } .hide-sm { display: none; } }
.ops, .planning { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .row-2 { grid-template-columns: 1fr; } }

/* ----- Map (isometric tiles) ----- */
.map-card { position: relative; padding: 6px; overflow: hidden; }
#map { display: block; width: 100%; height: auto; background: #2a6a94; border: 1px solid #000; box-shadow: var(--bevel-in); }
.ap-label { font: bold 10.5px Tahoma, Verdana, sans-serif; fill: #fff; paint-order: stroke; stroke: #000; stroke-width: 2.5px; pointer-events: none; }
.ap-label.closed { fill: #d8dccb; }
.route-line { fill: none; stroke: var(--gold); stroke-width: 2; stroke-dasharray: 5 4; opacity: .85; }
.cloud { fill: #fff; opacity: .45; }
.plane { pointer-events: none; }
.disrupt-ring { fill: none; stroke: var(--gold); stroke-width: 2; }
.hub-ring { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 4 3; }

/* ----- OCC items (calm, no blinking) ----- */
.alerts { position: absolute; right: 12px; top: 12px; width: min(350px, calc(100% - 24px)); display: flex; flex-direction: column; gap: 8px; max-height: calc(100% - 24px); overflow: auto; }
.alert { background: var(--well); border: 2px solid var(--gold-dk); box-shadow: 0 0 0 1px #000, 0 5px 0 rgba(0,0,0,.4); padding: 8px 10px; }
.alert.new { animation: fadein .35s ease-out; }
@keyframes fadein { from { opacity: 0; transform: translateY(-6px); } }
.alert .t { font-weight: 700; display: flex; gap: 6px; align-items: center; color: var(--gold); }
.alert .d { color: var(--muted); font-size: 11.5px; margin: 2px 0 6px; }
.timer { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--muted); margin-bottom: 4px; }
.timer .track { flex: 1; height: 5px; background: #000; box-shadow: var(--bevel-in); overflow: hidden; }
.timer .track > i { display: block; height: 100%; background: #8a9a7f; transition: width .3s linear; }
.opt { display: flex; justify-content: space-between; gap: 8px; width: 100%; text-align: left; margin-top: 4px; padding: 5px 7px; font-size: 12px; font-weight: 700; }
.opt:disabled { opacity: .45; cursor: not-allowed; }
.opt .c { color: #2a2a12; white-space: nowrap; font-weight: 400; }
.opt i.muted { color: #333; }
.opt.default { box-shadow: inset 1px 1px 0 #d9e0d4, inset -1px -1px 0 #4a5347, 0 0 0 2px var(--gold-dk); }
.learn-line { font-size: 11px; color: var(--muted); margin-top: 6px; border-top: 1px dashed #4b5a50; padding-top: 6px; }
.quiz-bubble { position: absolute; left: 14px; bottom: 14px; border: 2px solid #000; padding: 6px 12px; font-weight: 700; background: var(--btn-gold); color: #1a1400; box-shadow: inset 1px 1px 0 #fff3b0, inset -1px -1px 0 var(--gold-dk), 0 3px 0 #000; }

/* ----- Departure board ----- */
.board-wrap { background: var(--board); box-shadow: var(--bevel-in); border: 1px solid #000; padding: 4px; }
.board { width: 100%; border-collapse: collapse; font-family: "VT323", "Lucida Console", monospace; font-size: 17px; }
.board th { text-align: left; color: #8a6a1a; font-weight: 400; font-size: 14px; padding: 1px 4px; }
.board td { padding: 1px 4px; color: var(--board-ink); border-top: 1px solid #241c06; text-shadow: 0 0 5px rgba(255,176,0,.35); }
.board td.st-ontime { color: #8aff7a; } .board td.st-boarding { color: #7fd8ff; }
.board td.st-delayed { color: #ffb000; } .board td.st-cancelled { color: #ff6a5a; }

/* ----- Goals ----- */
#missions { background: var(--well); box-shadow: var(--bevel-in); padding: 6px; }
.mission { display: flex; gap: 8px; padding: 6px; align-items: flex-start; border-bottom: 1px solid #33423a; }
.mission:last-child { border-bottom: 0; }
.mission.done { opacity: .5; text-decoration: line-through; }
.mission .r { margin-left: auto; color: var(--lcd); font-family: "VT323", monospace; font-size: 17px; white-space: nowrap; }
.mission .go { border: 0; background: none; color: var(--brand); padding: 0; font-weight: 700; font-size: 11.5px; text-decoration: underline; }

/* ----- Department toolbar ----- */
.horizon-card { padding: 8px 10px 10px; }
.horizon-label { display: flex; justify-content: space-between; font-size: 10px; color: #141a12; font-weight: 700; text-transform: uppercase; margin-bottom: 4px; }
.horizon { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; background: var(--well); box-shadow: var(--bevel-in); padding: 6px 4px; }
.hz { position: relative; border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; color: var(--muted); }
.hz .b { width: 42px; height: 42px; display: grid; place-items: center; font-size: 20px; }
.hz.active .b { background: var(--btn-gold); box-shadow: inset 1px 1px 0 #4a3a08, inset -1px -1px 0 #fff3b0; }
.hz.active { color: var(--gold); font-weight: 700; }
.hz.locked .b { filter: grayscale(1) brightness(.8); }
.hz .badge { position: absolute; top: -3px; right: calc(50% - 25px); background: var(--gold); color: #000; border: 1px solid #000; font-size: 10px; padding: 0 4px; font-weight: 700; }
.hz .nm { text-align: center; line-height: 1.1; max-width: 64px; }
@media (max-width: 520px) { .hz .nm { display: none; } .hz .b { width: 34px; height: 34px; font-size: 16px; } }

/* ----- Department panel + advisor ----- */
.dept-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.dept-head .ic { font-size: 24px; }
.dept-head h2 { margin: 0; font-size: 17px; color: var(--gold); text-shadow: 1px 1px 0 #000; }
.chip { display: inline-block; padding: 0 6px; background: var(--lcd-bg); color: var(--lcd); font-family: "VT323", monospace; font-size: 15px; box-shadow: var(--bevel-in); }
.advisor { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 10px; }
.advisor .face { width: 64px; height: 64px; display: grid; place-items: center; font-size: 38px; background: radial-gradient(circle at 50% 35%, #5c7d93, #1d2b35); border: 2px solid #000; box-shadow: inset 0 0 0 2px var(--gold-dk); }
.advisor .who { font-size: 10px; color: #141a12; font-weight: 700; text-align: center; margin-top: 3px; width: 64px; line-height: 1.15; }
.speech { position: relative; flex: 1; background: #f4efd6; color: #1c1a10; border: 2px solid #000; padding: 7px 9px; font-size: 12.5px; line-height: 1.45; box-shadow: 3px 3px 0 rgba(0,0,0,.35); }
.speech::before { content: ""; position: absolute; left: -10px; top: 18px; border: 8px solid transparent; border-right-color: #000; border-left: 0; }
.speech::after { content: ""; position: absolute; left: -6px; top: 20px; border: 6px solid transparent; border-right-color: #f4efd6; border-left: 0; }
.speech .tip { display: block; margin-top: 5px; padding-top: 5px; border-top: 1px dashed #b3a97a; font-style: italic; }
.speech .tip.urgent { color: #8c2a10; font-style: normal; font-weight: 700; }
.speech .link { color: #1d5d9b; }
.link { border: 0; background: none; color: var(--brand); padding: 0; font-weight: 700; text-decoration: underline; }
.section-t { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); margin: 12px 0 5px; font-weight: 700; text-shadow: 1px 1px 0 #000; border-bottom: 1px solid #000; box-shadow: 0 1px 0 var(--metal-hi); padding-bottom: 2px; }

.grid-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.tile { background: var(--well); box-shadow: var(--bevel-in); border: 1px solid #000; padding: 7px 8px; display: flex; flex-direction: column; gap: 3px; }
.tile .h { display: flex; justify-content: space-between; font-weight: 700; color: var(--gold); }
.tile.open { border-color: #4f9a44; }
.tile .m { color: var(--muted); font-size: 11px; }
.cls { font-size: 9.5px; padding: 0 5px; font-weight: 700; color: #000; border: 1px solid #000; }
.cls.S { background: #8fd3ff; } .cls.M { background: #b6ff8f; } .cls.L { background: var(--wb); }

.btn { padding: 5px 10px; font-weight: 700; }
.btn:disabled { color: #4f564b; cursor: not-allowed; background: linear-gradient(180deg, #8b9488, #6d756a); }
.btn.small { padding: 3px 8px; font-size: 11.5px; }
.btn.ghost { background: linear-gradient(180deg, #8b9488, #6d756a); }
.btn.good { background: linear-gradient(180deg, #b6ff8f, #5cb83a); }
.btn.warn { background: linear-gradient(180deg, #ffd27a, #e09a1e); }

.upg { display: flex; gap: 10px; align-items: center; background: var(--well); box-shadow: var(--bevel-in); border: 1px solid #000; padding: 6px 8px; margin-bottom: 4px; }
.upg .tx { flex: 1; min-width: 0; }
.upg .n { font-weight: 700; }
.upg .ds { font-size: 11.5px; color: var(--muted); }
.pips { display: inline-flex; gap: 2px; margin-left: 6px; vertical-align: middle; }
.pips i { width: 8px; height: 8px; background: #000; border: 1px solid #556; }
.pips i.on { background: var(--lcd); }

.bar { height: 10px; background: #000; box-shadow: var(--bevel-in); position: relative; overflow: hidden; }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: repeating-linear-gradient(90deg, #6fc6ea 0 6px, #2d7fa0 6px 8px); }
.bar.crew > i { background: repeating-linear-gradient(90deg, #7dff6a 0 6px, #3f9b33 6px 8px); }
.bar.hot > i { background: repeating-linear-gradient(90deg, #ff7a63 0 6px, #a2281a 6px 8px); }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; font-size: 12px; background: var(--well); box-shadow: var(--bevel-in); padding: 6px 8px; }
.kv .v { font-family: "VT323", monospace; font-size: 17px; line-height: 1; color: var(--lcd); text-align: right; }
.kv .v.neg { color: var(--bad); }

.pool { background: var(--well); box-shadow: var(--bevel-in); border: 1px solid #000; padding: 8px; margin-bottom: 6px; }
.pool b { color: var(--gold); }
.pool .row { display: grid; grid-template-columns: 90px 1fr 90px; gap: 8px; align-items: center; font-size: 11.5px; margin-top: 5px; }
.callout { padding: 6px 8px; font-size: 12px; margin-top: 6px; border: 1px solid #000; }
.callout.bad { background: #4a2a17; color: #ffe0cf; }
.callout.ok { background: #1d3d1a; color: #d6ffcf; }
.callout.info { background: #3e3a1b; color: #f4ecc0; }

table.rt { width: 100%; border-collapse: collapse; font-size: 12px; background: var(--well); box-shadow: var(--bevel-in); }
table.rt th { text-align: left; color: var(--gold); font-size: 10.5px; font-weight: 700; padding: 4px; text-transform: uppercase; }
table.rt td { padding: 4px; border-top: 1px solid #33423a; }
.freq { display: inline-flex; align-items: center; gap: 4px; }
.freq button { width: 22px; height: 22px; font-weight: 700; padding: 0; }
.freq button:disabled { opacity: .35; }
.pos { color: var(--lcd); } .neg { color: var(--bad); }

.locked-box { text-align: center; padding: 18px 10px; background: var(--well); box-shadow: var(--bevel-in); border: 2px dashed #4b5a50; }
.locked-box .big { font-size: 40px; filter: grayscale(.6); }
.locked-box h3 { margin: 6px 0; }

/* ----- Modals & toasts ----- */
.modal { position: fixed; inset: 0; background: rgba(5, 10, 8, .6); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal-box { background: var(--panel); border: 2px solid #000; box-shadow: var(--bevel-out), 0 10px 0 rgba(0,0,0,.4); max-width: 640px; width: 100%; max-height: 86vh; overflow: auto; padding: 0 14px 14px; }
.modal-box h2 { margin: 0 -14px 12px; padding: 7px 14px; font-size: 15px; color: var(--gold); text-shadow: 1px 1px 0 #000; background: linear-gradient(180deg, #2e3a33, #1c2520); border-bottom: 2px solid #000; }
.modal-box p { line-height: 1.5; }
.modal-box input { padding: 3px 8px; border: 1px solid #000; background: var(--lcd-bg); color: var(--lcd); box-shadow: var(--bevel-in); width: 100%; font-family: "VT323", monospace; font-size: 19px; }
.form-row { display: grid; grid-template-columns: 1fr 90px 90px; gap: 8px; margin: 12px 0; }
.form-row label { font-size: 10.5px; color: #141a12; font-weight: 700; display: block; margin-bottom: 3px; text-transform: uppercase; }
.flow { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 10px 0; font-size: 11.5px; }
.flow span { background: var(--well); padding: 3px 7px; box-shadow: var(--bevel-in); }
.hb { display: grid; grid-template-columns: 180px 1fr; gap: 12px; }
@media (max-width: 560px) { .hb { grid-template-columns: 1fr; } }
.hb > div { background: #f4efd6; color: #1c1a10; border: 2px solid #000; padding: 8px 12px; }
.hb > div h3 { color: #6b4b00; text-shadow: none; font-size: 14px; }
.hb nav { display: flex; flex-direction: column; gap: 1px; background: var(--well); box-shadow: var(--bevel-in); padding: 4px; }
.hb nav button { text-align: left; border: 0; background: none; padding: 4px 6px; font-size: 12px; }
.hb nav button.on { background: var(--gold); color: #000; font-weight: 700; }
.hb nav button:disabled { opacity: .4; cursor: default; }
.hb nav .g { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--gold); margin: 8px 6px 2px; font-weight: 700; }
.quiz-opt { display: block; width: 100%; text-align: left; margin: 5px 0; padding: 8px 10px; font-weight: 700; }
.quiz-opt:hover { background: var(--btn-gold); }
.toasts { position: fixed; left: 50%; bottom: 44px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 60; width: min(440px, calc(100% - 32px)); }
.toast { background: var(--well); border: 2px solid var(--gold-dk); box-shadow: 0 0 0 1px #000, 0 4px 0 rgba(0,0,0,.5); padding: 8px 12px; font-size: 12.5px; animation: fadein .3s ease-out; }
.toast b { color: var(--gold); }
.toast .l { color: var(--muted); font-size: 11.5px; margin-top: 4px; }
.log-item { font-size: 11.5px; padding: 5px 0; border-top: 1px solid #33423a; }
.log-item .m { color: var(--muted); }

/* ----- News ticker ----- */
.ticker { position: fixed; left: 0; right: 0; bottom: 0; height: 30px; z-index: 40; display: flex; align-items: center; background: linear-gradient(180deg, #8a9686, #5b6658); border-top: 2px solid #000; box-shadow: var(--bevel-out); }
.ticker .tag { flex: none; padding: 0 10px; height: 100%; display: grid; place-items: center; background: var(--btn-gold); color: #000; font-weight: 700; font-size: 11px; border-right: 2px solid #000; letter-spacing: .05em; }
.ticker .lane { flex: 1; height: 22px; margin: 0 6px; overflow: hidden; position: relative; background: var(--lcd-bg); box-shadow: var(--bevel-in); }
.ticker .run { position: absolute; white-space: nowrap; top: 0; left: 0; line-height: 22px; font-family: "VT323", monospace; font-size: 18px; color: var(--board-ink); will-change: transform; }
.ticker .run .sep { color: #7a5b13; margin: 0 18px; }

@media (max-width: 640px) {
  .alerts { position: static; width: auto; max-height: none; padding: 6px 0 0; }
  .alerts:empty { display: none; }
  .advisor .face { width: 48px; height: 48px; font-size: 28px; }
  .advisor .who { width: 48px; }
}
@media (prefers-reduced-motion: reduce) { .ticker .run { animation: none !important; } .alert.new, .toast { animation: none; } }

/* ----- Plan / run controls ----- */
.ctrl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; padding: 5px; background: linear-gradient(180deg, #2e3a33, #1c2520); box-shadow: var(--bevel-in); }
.ctrl-lcd { font-family: "VT323", monospace; font-size: 19px; color: var(--lcd); background: var(--lcd-bg); padding: 0 8px; box-shadow: var(--bevel-in); margin-right: auto; }
.ctrl-note { font-size: 11px; color: var(--muted); }
.btn.on { background: var(--btn-gold); }
.ctrl .btn.good { font-size: 14px; padding: 6px 14px; }
.alerts { top: 58px; }
.paused { font-family: "VT323", monospace; font-size: 16px; color: var(--lcd); margin-bottom: 4px; }

/* ----- Debrief ----- */
.kpis { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.kpis .stat { flex: 1; min-width: 100px; }
.cause { display: flex; gap: 10px; align-items: flex-start; background: var(--well); box-shadow: var(--bevel-in); border: 1px solid #000; border-left: 4px solid #8a9a7f; padding: 7px 9px; margin-bottom: 5px; font-size: 12px; }
.cause.sev3 { border-left-color: var(--bad); } .cause.sev2 { border-left-color: #ffb000; } .cause.sev0 { border-left-color: var(--brand); }
.cause b { color: var(--gold); }
.cause .ci { font-size: 20px; }
.cause .fix { color: #cfe8c0; margin-top: 3px; }
.cause .btn { white-space: nowrap; }
.codes { background: var(--well); box-shadow: var(--bevel-in); padding: 6px 8px; }
.code-row { display: grid; grid-template-columns: 30px minmax(0, 1.4fr) 1fr 44px; gap: 8px; align-items: center; font-size: 11.5px; padding: 2px 0; }
.code-row .cc { font-family: "VT323", monospace; font-size: 17px; color: var(--board-ink); }
.code-row .cm { font-family: "VT323", monospace; font-size: 16px; color: var(--lcd); text-align: right; }
@media (max-width: 560px) { .code-row { grid-template-columns: 30px 1fr 44px; } .code-row .bar { display: none; } .cause { flex-wrap: wrap; } }

/* ----- Rotation Gantt ----- */
.gantt { background: var(--well); box-shadow: var(--bevel-in); padding: 6px 8px; }
.g-row { display: grid; grid-template-columns: 30px 1fr 34px; gap: 6px; align-items: center; margin: 3px 0; }
.g-id { font-family: "VT323", monospace; font-size: 16px; color: var(--gold); }
.g-track { position: relative; height: 16px; background: #10180f; border: 1px solid #000; }
.g-axis .g-track { background: none; border: 0; height: 12px; }
.g-axis i { position: absolute; transform: translateX(-50%); font-size: 9.5px; color: var(--muted); font-style: normal; }
.seg { position: absolute; top: 1px; bottom: 1px; border: 1px solid #000; font-size: 9px; line-height: 12px; color: #000; overflow: hidden; white-space: nowrap; padding-left: 2px; font-weight: 700; }
.seg.S { background: #8fd3ff; } .seg.M { background: #b6ff8f; } .seg.L { background: var(--wb); }
.seg.in { opacity: .6; }
.g-note { position: absolute; left: 4px; top: 1px; font-size: 10px; color: var(--muted); }
.g-buf { font-family: "VT323", monospace; font-size: 15px; color: var(--lcd); text-align: right; }
.g-buf.neg { color: var(--bad); }

/* =====================================================================
   SimCity 3000 pass 2: pixel icons, round brass toolbar, rivets, globe
   ===================================================================== */
.pxi { width: 1.3em; height: 1.3em; vertical-align: -0.28em; flex: none; image-rendering: pixelated; }
.logo { background: radial-gradient(circle at 35% 30%, #4f6c80, #1d2b35); }
.logo .pxi { width: 22px; height: 22px; }
.icon-btn { display: inline-flex; align-items: center; gap: 5px; }
.quiz-bubble { display: inline-flex; align-items: center; gap: 6px; }
.toast .pxi, .cause .ci .pxi { width: 20px; height: 20px; }
.cause .ci { font-size: 0; }
.dept-head .ic .pxi { width: 30px; height: 30px; }
.alert .t .pxi { width: 22px; height: 22px; }

/* Riveted panels */
.card, .modal-box { position: relative; }
.card::after, .modal-box::after {
  content: ""; position: absolute; inset: 3px; pointer-events: none;
  background:
    radial-gradient(circle at 4px 4px, #e3d8a8 0 1.2px, #6b5a20 1.8px, transparent 2.4px) top left / 9px 9px no-repeat,
    radial-gradient(circle at 5px 4px, #e3d8a8 0 1.2px, #6b5a20 1.8px, transparent 2.4px) top right / 9px 9px no-repeat,
    radial-gradient(circle at 4px 5px, #e3d8a8 0 1.2px, #6b5a20 1.8px, transparent 2.4px) bottom left / 9px 9px no-repeat,
    radial-gradient(circle at 5px 5px, #e3d8a8 0 1.2px, #6b5a20 1.8px, transparent 2.4px) bottom right / 9px 9px no-repeat;
}
/* Embossed gold headings */
h3, .section-t, .dept-head h2, .modal-box h2, .airline { letter-spacing: .04em; text-shadow: 1px 1px 0 #000, -1px -1px 0 rgba(255,240,180,.15); }

/* Round brass toolbar buttons (the SimCity 3000 control panel) */
.horizon { background: linear-gradient(180deg, #2b342c, #1a201b); }
.hz .b {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, #6f7b6c 0 55%, #3d463b 70%);
  border: 0; box-shadow: 0 0 0 3px #a8801e, 0 0 0 4px #000, inset 0 2px 0 rgba(255,255,255,.25), inset 0 -3px 0 rgba(0,0,0,.4);
}
.hz .b .pxi { width: 28px; height: 28px; }
.hz:hover .b { background: radial-gradient(circle at 50% 40%, #8e9a8a 0 55%, #4d574a 70%); }
.hz.active .b { background: radial-gradient(circle at 50% 40%, #ffe680 0 50%, #d9a92a 72%); box-shadow: 0 0 0 3px #fff3b0, 0 0 0 4px #000, 0 0 12px 2px rgba(245,197,66,.6); }
.hz .badge { top: -6px; right: calc(50% - 28px); }
@media (max-width: 520px) { .hz .b { width: 34px; height: 34px; } .hz .b .pxi { width: 20px; height: 20px; } }
button.round {
  width: 30px; height: 30px; border-radius: 50%; padding: 0; display: grid; place-items: center; font: bold 16px Tahoma, sans-serif; color: #111;
  background: radial-gradient(circle at 50% 40%, #a3ae9f 0 55%, #6f7b6c 72%);
  border: 0; box-shadow: 0 0 0 2px #a8801e, 0 0 0 3px #000, inset 0 2px 0 rgba(255,255,255,.3);
}
button.round:active { transform: translateY(1px); }
button.round .pxi { width: 18px; height: 18px; }

/* Advisor portraits */
.advisor .face { font-size: 0; padding: 0; background: none; overflow: hidden; }
.advisor .face .pxi { width: 100%; height: 100%; vertical-align: top; }

/* Globe */
.globe { position: relative; width: 100%; background: #0b1020; border: 1px solid #000; box-shadow: var(--bevel-in); overflow: hidden; touch-action: none; }
.globe-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; image-rendering: pixelated; cursor: grab; display: block; }
.globe-canvas:active { cursor: grabbing; }
.globe-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.globe-label {
  position: absolute; left: 0; top: 0; pointer-events: auto; margin: -8px 0 0 7px; padding: 0 4px;
  font: 15px/15px "VT323", "Lucida Console", monospace; color: #e8ecd8; background: rgba(12, 16, 12, .78); border: 1px solid #000; cursor: pointer; white-space: nowrap;
}
.globe-label.closed { color: #aeb49c; opacity: .8; font-size: 13px; line-height: 13px; }
.globe-label.open { color: #b6ff8f; }
.globe-label.hub { color: var(--gold); border-color: var(--gold-dk); font-size: 17px; line-height: 17px; }
.globe-label.alert { background: #8c2a10; color: #fff; border-color: #ffb000; }
.globe-tools { position: absolute; right: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.globe-fallback { padding: 30px; text-align: center; color: var(--muted); }
#map { display: none; }
.alerts { top: 60px; }
.modal-box select { width: 100%; padding: 4px 6px; border: 1px solid #000; background: var(--lcd-bg); color: var(--lcd); box-shadow: var(--bevel-in); font-family: "VT323", monospace; font-size: 18px; }
.form-row { grid-template-columns: 1fr 80px 170px; }
@media (max-width: 640px) {
  .topbar { gap: 6px; padding: 6px 8px; }
  .brand { flex: 1; }
  .stats { order: 3; flex-basis: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .stat { min-width: 0; padding: 1px 6px; }
  .stat .k { font-size: 8.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stat .v { font-size: 18px; }
  .form-row { grid-template-columns: 1fr 70px; }
  .form-row > div:last-child { grid-column: 1 / -1; }
}

/* Hub close-up */
.hubview { position: relative; border: 1px solid #000; box-shadow: var(--bevel-in); background: #3d6a2a; }
.hub-canvas { display: block; width: 100%; height: auto; aspect-ratio: 480 / 300; image-rendering: pixelated; }
.hub-info { position: absolute; left: 6px; right: 6px; bottom: 6px; font-size: 11.5px; background: rgba(12, 16, 12, .8); border: 1px solid #000; padding: 3px 7px; color: var(--ink); }
.hub-info b { color: var(--gold); }
.view-tabs { position: absolute; left: 16px; top: 62px; display: flex; gap: 4px; z-index: 2; }
.view-tabs .btn { display: inline-flex; align-items: center; gap: 4px; }
.hidden { display: none !important; }