/* VoxTTD UI — cs16.css pixel/pseudographics aesthetic: beveled borders,
   no rounded corners, CS-green chrome, VT323 DOS terminal text. */
:root {
  --bg: #4a5942;        /* CS panel green */
  --bg2: #3e4637;
  --ink: #e7ead8;
  --muted: #aab39c;
  --accent: #c4b550;    /* CS yellow */
  --good: #7bbf5b;
  --bad: #d65a48;
  --bl: #8c9284;        /* bevel light (top/left) */
  --bd: #23271c;        /* bevel dark (bottom/right) */
}

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

html, body {
  height: 100%;
  overflow: hidden;
  background: #0e1118;
  color: var(--ink);
  font: 19px/1.15 "VT323", "Courier New", ui-monospace, monospace;
  letter-spacing: .5px;
  text-transform: uppercase;
  image-rendering: pixelated;
  -webkit-user-select: none;
  user-select: none;
}

#scene { display: block; width: 100vw; height: 100vh; cursor: crosshair; }

/* beveled (raised) and inset (pressed) chrome */
.bevel { border: 3px solid; border-color: var(--bl) var(--bd) var(--bd) var(--bl); }
.bevel-in { border: 3px solid; border-color: var(--bd) var(--bl) var(--bl) var(--bd); }

#hud, #toolbar { position: fixed; z-index: 10; }

#hud {
  top: 10px; left: 10px; right: 10px;
  display: flex; gap: 8px; align-items: stretch;
}
.hud-item {
  background: var(--bg); border: 3px solid;
  border-color: var(--bl) var(--bd) var(--bd) var(--bl);
  padding: 4px 12px 1px; font-size: 21px;
  font-variant-numeric: tabular-nums;
}
#hud-cash { color: var(--accent); font-size: 24px; }
.hud-spacer { flex: 1; }
.hud-speed { display: flex; gap: 4px; padding: 3px; }
.hud-speed button {
  width: 32px; height: 30px; cursor: pointer;
  background: var(--bg); color: var(--ink);
  border: 3px solid; border-color: var(--bl) var(--bd) var(--bd) var(--bl);
}
.hud-speed button.active { background: #e7ead8; border-color: var(--bd) var(--bl) var(--bl) var(--bd); }
.hud-speed button.active .pix { filter: brightness(0); }
.hud-speed button.active .pix-mask { background-color: #000 !important; filter: none; }
.hud-speed button .pix { width: 15px; height: 15px; display: block; margin: auto; }

#toolbar {
  bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 5px; padding: 6px;
  background: var(--bg); border: 3px solid;
  border-color: var(--bl) var(--bd) var(--bd) var(--bl);
  max-width: 96vw; flex-wrap: nowrap; justify-content: center;
  overflow-x: auto; overflow-y: hidden;
}
#toolbar button {
  flex: 0 0 auto; width: 42px; height: 42px; cursor: pointer;
  background: var(--bg); color: var(--ink);
  border: 3px solid; border-color: var(--bl) var(--bd) var(--bd) var(--bl);
  display: flex; align-items: center; justify-content: center;
}
#toolbar button:active { border-color: var(--bd) var(--bl) var(--bl) var(--bd); }
#toolbar button.active {
  background: #e7ead8; border-color: var(--bd) var(--bl) var(--bl) var(--bd);
}
#toolbar button.active .pix { filter: brightness(0); }
#toolbar button.active .pix-mask { background-color: #000 !important; filter: none; }
#toolbar button .pix { width: 24px; height: 24px; display: block; }
.pix-mask {
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
}
.tb-sep { flex: 0 0 auto; width: 3px; background: var(--bd); margin: 2px 4px; }

/* TTD-style info windows */
.win {
  position: fixed; top: 72px; z-index: 30; min-width: 250px; max-width: 340px;
  background: var(--bg); border: 3px solid;
  border-color: var(--bl) var(--bd) var(--bd) var(--bl);
}
#win-finance, #win-stats { left: 12px; }
#win-news { right: 12px; }
.win-bar {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--bg2); color: var(--accent);
  padding: 3px 4px 1px 9px; border-bottom: 3px solid var(--bd);
}
.win-close {
  width: 24px; height: 21px; cursor: pointer; line-height: 1;
  background: var(--bg); color: var(--ink);
  border: 3px solid; border-color: var(--bl) var(--bd) var(--bd) var(--bl);
}
.win-close:active { border-color: var(--bd) var(--bl) var(--bl) var(--bd); }
.win-body { padding: 8px 11px; font-size: 18px; }
.win-row { display: flex; justify-content: space-between; gap: 18px; padding: 2px 0; }
.win-row b { font-weight: 400; }
.win-row .pos { color: var(--good); }
.win-row .neg { color: var(--bad); }
.win-body hr { border: 0; border-top: 2px solid var(--bd); margin: 5px 0; }
.news-log { max-height: 260px; overflow-y: auto; }
.news-line { padding: 2px 0; border-bottom: 1px solid var(--bd); font-size: 15px; color: var(--muted); }

#floats { position: fixed; inset: 0; z-index: 15; pointer-events: none; overflow: hidden; }
.float {
  position: absolute; top: 0; left: 0; will-change: transform, opacity;
  font-size: 24px; font-variant-numeric: tabular-nums;
  text-shadow: 1px 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000; white-space: nowrap;
}
.float.gain { color: #54e07a; }
.float.loss { color: #ff6a5a; }

#tooltip {
  position: fixed; z-index: 20; pointer-events: none; display: none;
  background: var(--bg2); border: 3px solid;
  border-color: var(--bl) var(--bd) var(--bd) var(--bl);
  padding: 4px 9px 1px; font-size: 17px; max-width: 260px;
}

#status {
  position: fixed; z-index: 10; left: 50%; transform: translateX(-50%);
  top: 60px; padding: 4px 14px 1px;
  background: var(--bg2); border: 3px solid;
  border-color: var(--bl) var(--bd) var(--bd) var(--bl);
  color: var(--ink); font-size: 17px; max-width: 90vw; text-align: center;
  transition: opacity .4s; pointer-events: none;
}

dialog#help {
  border: 3px solid; border-color: var(--bl) var(--bd) var(--bd) var(--bl);
  padding: 20px 24px; background: var(--bg); color: var(--ink);
  max-width: 560px; text-transform: none; font-size: 20px; line-height: 1.25;
}
dialog#help::backdrop { background: rgba(0,0,0,.55); }
dialog#help h2 { margin-bottom: 12px; color: var(--accent); text-transform: uppercase; }
dialog#help ul { margin: 0 0 12px 18px; }
dialog#help li { margin-bottom: 6px; }
dialog#help button {
  margin-top: 6px; padding: 6px 18px 4px; cursor: pointer;
  background: var(--bg2); color: var(--ink);
  border: 3px solid; border-color: var(--bl) var(--bd) var(--bd) var(--bl);
}
dialog#help button:active { border-color: var(--bd) var(--bl) var(--bl) var(--bd); }
.muted { color: var(--muted); font-size: 16px; }

@media (max-width: 600px) {
  #toolbar button { width: 38px; height: 38px; }
  .hud-item { padding: 3px 8px 1px; font-size: 18px; }
}