:root {
  --bg: #070b10;
  --panel: #0c1620;
  --ink: #e8fff8;
  --muted: #93c4ba;
  --line: rgba(110, 230, 214, 0.28);
  --amber: #f0c14a;
  --red: #e06a58;
  --green: #8ee7a4;
  --blue: #8fd4ff;
  --cyan: #7ef6e4;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background:
    radial-gradient(1100px 420px at 50% -8%, rgba(40, 140, 150, 0.16), transparent 60%),
    var(--bg);
  color: var(--ink);
  font: 15px/1.45 ui-sans-serif, system-ui, sans-serif;
}
.topbars { position: sticky; top: 0; z-index: 6; }
.banner, .stale {
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 8px 16px;
}
.banner {
  background: var(--red);
  color: #1a0d09;
}
.stale {
  background: var(--amber);
  color: #1a1408;
  display: none;
}
.stale.show { display: block; }
main { padding: 16px; display: grid; gap: 16px; min-width: 0; }
main > * { min-width: 0; }
h1 { font-size: 22px; margin: 0; letter-spacing: 0.03em; }
h2 { font-size: 15px; margin: 0 0 8px; color: var(--amber); font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; }
.sub { color: var(--muted); margin: 4px 0 0; }
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.panel {
  position: relative;
  background-color: rgba(10, 20, 28, 0.94);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 12px;
  box-shadow: 0 0 24px rgba(40, 180, 170, 0.06);
  background-image:
    linear-gradient(var(--cyan), var(--cyan)), linear-gradient(var(--cyan), var(--cyan)),
    linear-gradient(var(--cyan), var(--cyan)), linear-gradient(var(--cyan), var(--cyan)),
    linear-gradient(var(--cyan), var(--cyan)), linear-gradient(var(--cyan), var(--cyan)),
    linear-gradient(var(--cyan), var(--cyan)), linear-gradient(var(--cyan), var(--cyan));
  background-repeat: no-repeat;
  background-size: 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px;
  background-position:
    left 6px top 6px, left 6px top 6px,
    right 6px top 6px, right 6px top 6px,
    left 6px bottom 6px, left 6px bottom 6px,
    right 6px bottom 6px, right 6px bottom 6px;
}
.metric { font: 22px/1.1 ui-monospace, monospace; color: #f3fffb; }
.label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid rgba(110, 230, 214, 0.16); vertical-align: top; }
th { color: var(--muted); font-weight: 600; }
tr.click { cursor: pointer; }
tr.click:hover, tr.click.on { background: rgba(80, 220, 210, 0.08); }
canvas { width: 100%; max-width: 100%; min-width: 0; height: 220px; background: #081016; border-radius: 2px; }
#arena-canvas { height: auto; background: transparent; display: block; border-radius: 0; }
pre { white-space: pre-wrap; font: 12px/1.4 ui-monospace, monospace; color: var(--blue); margin: 8px 0 0; }
.two { display: grid; gap: 12px; grid-template-columns: 1.2fr 0.8fr; }
@media (max-width: 900px) { .two { grid-template-columns: 1fr; } }
.scroll { overflow: auto; max-width: 100%; min-width: 0; max-height: 420px; }
.ticker { max-width: 100%; }

.ticker {
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid rgba(126, 246, 228, 0.35);
  background: rgba(4, 14, 20, 0.85);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker-track {
  display: flex;
  gap: 28px;
  width: max-content;
  padding: 5px 0;
  animation: ticker 42s linear infinite;
  font: 12px/1.4 ui-monospace, monospace;
  color: #c9fff4;
  letter-spacing: 0.03em;
}
.ticker-track span { white-space: nowrap; }
.ticker-track span::before { content: "▸ "; color: var(--amber); }
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.arena-stage { position: relative; margin-top: 10px; min-width: 0; }
.arena-panel { overflow: hidden; }
.note-layer { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.hover-tip {
  position: absolute;
  z-index: 4;
  max-width: 280px;
  pointer-events: none;
  background: rgba(6, 14, 20, 0.94);
  border: 1px solid rgba(126, 246, 228, 0.7);
  color: var(--ink);
  font: 11px/1.35 ui-monospace, monospace;
  padding: 6px 8px;
  box-shadow: 0 0 16px rgba(60, 220, 200, 0.2);
}
.sr-robots {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.note-chip {
  position: absolute;
  left: 0;
  top: 0;
  width: 176px;
  background: rgba(6, 16, 22, 0.94);
  border: 1px solid rgba(126, 246, 228, 0.85);
  border-radius: 2px;
  padding: 4px 6px;
  color: var(--ink);
  box-shadow: 0 0 16px rgba(60, 220, 200, 0.28);
}
.note-chip.worked { border-color: var(--green); }
.note-chip.failed { border-color: var(--red); }
.note-k { color: #9adfd4; font-size: 10px; }
.note-t { font-size: 11px; }
.note-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.note-list li { font: 12px/1.35 ui-monospace, monospace; color: var(--muted); }
.note-list li.on { color: var(--ink); }
.kind.worked { color: var(--green); }
.kind.failed { color: var(--red); }
.kind.other, .kind.missing { color: var(--amber); }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; flex-wrap: wrap; width: auto; padding: 6px 8px; }
  .ticker { mask-image: none; }
}
@media (max-width: 900px) {
  .note-chip { width: 140px; }
}

.view-tabs { display: flex; gap: 8px; }
.view-tabs button {
  background: #0c1620;
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 6px 12px;
  font: 13px/1.2 ui-monospace, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.view-tabs button.on { color: #071018; background: var(--amber); border-color: var(--amber); }
.station-panel { overflow: hidden; }
.station-layout {
  display: grid;
  grid-template-columns: minmax(168px, 220px) minmax(0, 1fr) minmax(168px, 220px);
  grid-template-areas: "left stage right" "rooms rooms rooms";
  gap: 8px;
  margin-top: 8px;
  min-width: 0;
}
.hud-left { grid-area: left; }
.hud-right { grid-area: right; }
.station-stage { grid-area: stage; position: relative; min-width: 0; }
.station-rooms { grid-area: rooms; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hud { display: grid; gap: 8px; align-content: start; }
.hud-card, .room-card {
  border: 1px solid rgba(110, 230, 214, 0.28);
  background: rgba(6, 14, 22, 0.72);
  padding: 6px 8px;
  min-width: 0;
}
.hud-card .label, .room-card .label { font-size: 10px; }
.hud-card .metric, .room-card .metric { font-size: 16px; }
.hud-card p, .room-card p { margin: 2px 0 0; font: 11px/1.35 ui-monospace, monospace; color: var(--ink); word-break: break-word; }
#station-canvas {
  width: 100%;
  height: auto;
  background: #071018;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
}
#unseen-chart { width: 100%; height: 46px; background: transparent; display: block; }
.gate {
  height: 6px;
  background: #1a2834;
  margin-top: 3px;
}
.gate > span { display: block; height: 100%; background: #c9842a; }
@media (max-width: 900px) {
  .station-layout {
    grid-template-columns: 1fr;
    grid-template-areas: "stage" "left" "right" "rooms";
  }
  .hud { grid-template-columns: 1fr 1fr; }
  .station-rooms { grid-template-columns: 1fr; }
}
.blindbet-panel h3 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan); margin: 14px 0 6px; }
.bb-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.bb-tile { border: 2px solid var(--line); background: rgba(126, 246, 228, 0.04); padding: 8px 10px; image-rendering: pixelated; box-shadow: 3px 3px 0 rgba(0,0,0,0.5); }
.blindbet-panel .pos { color: var(--green); }
.blindbet-panel .neg { color: var(--red); }
.tag-bad { color: var(--red); font-weight: 700; }
.tag-warn { color: var(--amber); }
.tag-ok { color: var(--green); font-weight: 700; }
.bb-grad { margin: 8px 0; }
.bb-grad-head { display: flex; justify-content: space-between; gap: 8px; }
.bb-bar { height: 10px; border: 2px solid var(--line); background: #050a0e; }
.bb-fill { height: 100%; background: repeating-linear-gradient(90deg, var(--cyan) 0 6px, transparent 6px 8px); }

.grad-table td { vertical-align: top; }
.grad-table .bb-bar { width: 90px; }
.bb-foot { font-size: 12px; opacity: 0.8; }
/* Graduation board in station HUD style */
.blindbet-panel { border: 1px solid rgba(110, 230, 214, 0.28); background: rgba(6, 14, 22, 0.72); }
.blindbet-panel h2 { font: 14px/1.2 ui-monospace, monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); }
.grad-table { font: 12px/1.35 ui-monospace, monospace; }
.grad-table th { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.grad-table .bb-bar { height: 6px; border: 0; background: #1a2834; margin-top: 3px; }
.grad-table .bb-fill { background: #c9842a; }