:root {
  --bg: #10131a;
  --panel: #1a1f2b;
  --panel-2: #222838;
  --ink: #e8ecf4;
  --muted: #97a1b5;
  --accent: #e07b39;   /* TF2 orange-ish */
  --accent-ink: #fff;
  --on: #3fb950;
  --off: #6b7280;
  --err: #f0655d;
  --line: #2c3446;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  display: flex; align-items: center; gap: 24px;
  padding: 12px 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; color: var(--ink); font-size: 18px; }
.nav { display: flex; gap: 18px; align-items: center; }
.nav a { color: var(--muted); }
.nav a:hover { color: var(--ink); text-decoration: none; }
.nav-cta { color: var(--accent) !important; font-weight: 600; }

/* header identity */
.identity { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.avatar { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; display: inline-flex; }
.avatar-fallback { align-items: center; justify-content: center; background: var(--panel-2); color: var(--muted); font-weight: 700; font-size: 13px; }
.persona { color: var(--ink); font-size: 14px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-sm { padding: 5px 10px; font-size: 13px; }

/* credit balance box (header) — accent-bordered so it reads as currency rather than
   another nav item.
   The empty state is deliberately NOT dimmed. An earlier version muted it at zero, which
   had it recede at exactly the moment it should catch the eye: a captain with no credits
   is the one who needs to notice this and act on it. Zero keeps full contrast and gains a
   prompt instead. */
.credit-box {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px 12px; border-radius: 6px;
  background: var(--panel-2); border: 1px solid var(--accent);
  text-decoration: none; line-height: 1.2; white-space: nowrap;
}
.credit-box:hover { background: var(--panel); box-shadow: 0 0 0 2px rgba(224,123,57,.25); }
.credit-num { color: var(--accent); font-weight: 700; font-size: 17px; }
.credit-label { color: var(--ink); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
/* Zero: same contrast, plus a call to action, since the number alone says nothing useful. */
.credit-box-empty { border-style: dashed; }
.credit-box-empty .credit-label { color: var(--accent); }

/* landing / sign-in */
.landing { text-align: center; padding: 60px 24px; }
.landing h1 { font-size: 30px; }
.landing .lede { max-width: 560px; margin: 8px auto 24px; }
.landing .btn { font-size: 16px; padding: 11px 20px; }
.landing .feature-list { list-style: none; padding: 0; max-width: 520px; margin: 28px auto 0; text-align: left; }
.landing .feature-list li { padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--muted); }

.content { flex: 1; width: 100%; max-width: 960px; margin: 0 auto; padding: 28px 24px; }
.footer { padding: 16px 24px; color: var(--muted); border-top: 1px solid var(--line); font-size: 13px; }

h1 { font-size: 26px; margin: 0 0 4px; }
h2 { font-size: 19px; }
.lede { color: var(--muted); margin-top: 0; }
.muted { color: var(--muted); }
.section-head { margin-top: 28px; }

.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

/* stats */
.stat-row { display: flex; flex-wrap: wrap; gap: 16px; margin: 20px 0; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 20px; min-width: 96px; }
.stat-num { display: block; font-size: 28px; font-weight: 700; }
.stat-label { color: var(--muted); font-size: 13px; }

/* cards */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 16px 0; }
.card { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px; color: var(--ink); }
.card:hover { border-color: var(--accent); text-decoration: none; }
.card h2 { margin: 0 0 6px; font-size: 17px; }  /* h1 26 > section 19 > card 17 */
.card p { margin: 0 0 6px; color: var(--muted); }
.card p:last-child { margin-bottom: 0; }
.card-accent { border-color: var(--accent); }

/* mini list */
.mini-list { list-style: none; padding: 0; margin: 0; }
.mini-list li { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mini-list li:last-child { border-bottom: 0; }

/* table */
.table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.table th, .table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.table th { color: var(--muted); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; }

/* badges — a bare .badge must look like a chip on its own, not floating bold text */
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--panel-2); color: var(--muted); }
.badge-on { background: rgba(63,185,80,.15); color: var(--on); }
.badge-off { background: rgba(107,114,128,.2); color: var(--off); }
.badge-demo { background: rgba(224,123,57,.18); color: var(--accent); border: 1px solid var(--accent); letter-spacing: .04em; }
/* "Server reserved" on a scrim. Green rather than accent-orange: this is a settled,
   good state, and orange is already the colour of "spend something". */
.badge-server { background: rgba(63,185,80,.15); color: var(--on); }

/* demo notice banner */
.demo-banner { margin: 14px 0; padding: 10px 14px; border-radius: 8px; background: rgba(224,123,57,.1); border: 1px dashed var(--accent); color: var(--ink); font-size: 14px; }
.demo-banner .badge { vertical-align: middle; }

/* empty state */
.empty-state { background: var(--panel); border: 1px dashed var(--line); border-radius: 12px; padding: 40px; text-align: center; }
.empty-state p { color: var(--muted); }

/* buttons */
.btn { display: inline-block; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); cursor: pointer; font-size: 14px; }
.btn:hover { text-decoration: none; border-color: var(--muted); }
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-primary:hover { filter: brightness(1.07); border-color: var(--accent); }
/* A submit that cannot succeed yet (no opponent picked) still has to look like the
   primary action, so it dims rather than changing colour. */
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { filter: none; border-color: var(--accent); }

/* Off-screen, but still a submit button as far as the form is concerned — that is the
   point, so `display: none` is wrong here. Used to control which button the Enter key
   activates; see the comments in scrim_new.html. */
.offscreen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* forms — every control shares one look, including <select>, which otherwise
   renders as a native white widget against the dark theme */
.form { max-width: 440px; }
.field { display: block; margin-bottom: 16px; }
.field > span, .field > label { display: block; margin-bottom: 6px; font-size: 14px; }
.field input, .field select, .filter select, .table select {
  padding: 9px 11px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); font: inherit;
}
.field input, .field select { width: 100%; }
.table select { padding: 6px 9px; font-size: 13px; }
.field input:focus, .field select:focus, .filter select:focus, .table select:focus {
  outline: none; border-color: var(--accent);
}

/* inline filter above a list */
.filter { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; }
.filter label { color: var(--muted); font-size: 13px; }
.err { color: var(--err); display: block; margin-top: 4px; }
/* Checkbox rows need their own class: `.field` is a label-above-input column and
   `.field input { width: 100% }` stretches a checkbox across the form, which left it
   floating above its own caption. Presented as a small card because ticking it spends a
   credit — a paid choice should look deliberate, not like an afterthought. */
.field-check {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 16px; padding: 12px 14px; border-radius: 6px;
  background: var(--panel-2); border: 1px solid var(--line);
  cursor: pointer; transition: border-color .12s ease;
}
.field-check:hover { border-color: var(--accent); }
.field-check:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(224,123,57,.2); }
.field-check input[type="checkbox"] {
  width: 16px; height: 16px; flex: none; margin: 1px 0 0;
  accent-color: var(--accent); cursor: pointer;
}
.field-check .check-text { display: block; margin: 0; font-size: 14px; color: var(--ink); }
.field-check .check-hint { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }

/* --- Opponent picker (propose form) -----------------------------------------------
   Picking an opponent used to be two controls: a quick-pick <select> at the top of the
   form and a separate "browse by division" card *below* the submit button, each
   described only in the other's fine print. It is now one field with two states — the
   team you chose, or one list to choose from. */

/* A field whose control isn't a single input still needs the label to sit like one. */
.field-label { display: block; margin-bottom: 6px; font-size: 14px; }
.hint { display: block; margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.hint[hidden] { display: none; }   /* a class selector otherwise outranks UA [hidden] */
.form-actions .hint { margin: 0; }

/* Chosen: green-edged like the other settled states in the app, and it answers
   "who are we playing?" without opening anything. */
.chosen {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 14px; border-radius: 6px;
  background: var(--panel-2); border: 1px solid var(--on);
}
.chosen .cell-sub { margin-top: 2px; }

/* Choosing: search first, division as the fallback browse. */
.picker { border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); padding: 12px 14px; }
.picker-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.picker-bar input[type="search"], .picker-bar select {
  padding: 9px 11px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); font: inherit;
  /* The picker sits inside a `.field`, whose `width: 100%` would put every control on
     a row of its own. Here they share one bar. */
  width: auto;
}
.picker-bar input[type="search"] { flex: 1 1 220px; min-width: 0; }
.picker-bar select { flex: 0 1 auto; max-width: 100%; }
.picker-bar input[type="search"]:focus, .picker-bar select:focus { outline: none; border-color: var(--accent); }
.picker-note { margin: 10px 0 0; font-size: 13px; }
/* Bounded height: a division runs to 30+ teams, and the date field below the picker
   has to stay reachable without scrolling past all of them. */
.picker-list { max-height: 320px; overflow-y: auto; overflow-x: auto; margin-top: 8px; }
.table-pick { margin-top: 0; }
.table-pick td { padding: 8px 10px; vertical-align: middle; }
.table-pick tr:last-child td { border-bottom: 0; }
.table-pick td:last-child { text-align: right; white-space: nowrap; }

/* Connect command. Given prominence because it is the single thing every player on both
   teams actually needs from this app once a match starts. */
.connect {
  margin: 14px 0; padding: 12px 14px; border-radius: 6px;
  background: var(--panel-2); border: 1px solid var(--on);
}
.connect-head { font-size: 12px; font-weight: 700; color: var(--on);
                text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.connect-cmd {
  display: inline-block; padding: 6px 10px; border-radius: 4px;
  background: var(--bg); border: 1px solid var(--line);
  color: var(--ink); font-size: 13px; user-select: all;
  max-width: 100%; overflow-x: auto; white-space: nowrap; vertical-align: middle;
}
.connect-hint { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
/* In a table cell the command has to stay compact. */
.table .connect-cmd { font-size: 12px; max-width: 320px; }

.form-actions { display: flex; align-items: center; gap: 12px; margin-top: 4px; }

/* flashes */
.flashes { margin-bottom: 16px; }
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 8px; border: 1px solid var(--line); }
.flash-info { background: rgba(224,123,57,.12); border-color: var(--accent); }

/* detail two-column */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
@media (max-width: 760px) { .two-col { grid-template-columns: 1fr; } }

/* Two-column screens (home + scrims): one grid system, two widths.
   `.cols` = wide main column with a rail on the right (scrims);
   `.cols-side-left` = narrow box on the left, content to its right (home). */
body[data-screen="scrims"] .content,
body[data-screen="dashboard"] .content { max-width: 1200px; }
.cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 20px; }
.cols-side-left { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); }
.col-main, .col-side { display: grid; gap: 20px; align-content: start; }
.col-main > .card, .col-side > .card { overflow-x: auto; } /* safety net; tables are compact enough to fit */
@media (max-width: 900px) {
  .cols, .cols-side-left { grid-template-columns: 1fr; }
  .col-side { order: 2; }   /* content leads when stacked; the side box follows */
  .col-main { order: 1; }
}

.cell-sub { display: block; color: var(--muted); font-size: 13px; }
.nowrap { white-space: nowrap; }  /* e.g. "RGL-Amateur" must not break at the hyphen */
/* Localized times ("Jul 28 8:52 PM CDT") stay on one line in table cells. */
.table time.ts { white-space: nowrap; }
.card h3 { margin: 16px 0 6px; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.card h3:first-of-type { margin-top: 8px; }

/* Stacked list item: a title line, then one muted meta line under it. */
.rail-item { padding: 10px 0; border-top: 1px solid var(--line); }
.rail-item:first-child { border-top: 0; padding-top: 2px; }
.rail-meta { display: block; color: var(--muted); margin: 2px 0 6px; }

/* Label/value pairs (listing detail). Without this a <dl> falls back to the
   browser default: value indented on its own line, twice the height it needs. */
.meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; margin: 14px 0 0; }
.meta dt { color: var(--muted); font-size: 13px; }
.meta dd { margin: 0; }
@media (max-width: 560px) { .meta { grid-template-columns: 1fr; gap: 2px; } .meta dd { margin-bottom: 8px; } }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.panel h2 { margin-top: 0; }

/* console */
.console { background: #0c0e14; border: 1px solid var(--line); border-radius: 8px; padding: 12px; height: 220px; overflow-y: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.console-line { padding: 2px 0; white-space: pre-wrap; word-break: break-word; }
.console-command { color: var(--accent); }
.console-response { color: var(--ink); }
.console-form { display: flex; gap: 8px; margin-top: 10px; }
.console-form input { flex: 1; padding: 8px 11px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-family: ui-monospace, monospace; }
code { background: var(--panel-2); padding: 1px 5px; border-radius: 4px; }