/* =============================================================
   Frozen Front Office - Look and feel
   Dark theme is the default. Light theme is one click away and
   is remembered from page to page (see core.js).
   Phone sizes are handled near the bottom of each section and in
   the "Phones and touch screens" part at the end.
   ============================================================= */

:root, :root[data-theme="dark"] {
  --bg: #0a0f16;
  --panel: #111923;
  --panel-2: #16212e;
  --line: #213041;
  --line-soft: #1a2633;
  --text: #e7edf4;
  --muted: #8797ab;
  --accent: #4fc3f7;
  --accent-ink: #04121c;
  --accent-soft: rgba(79, 195, 247, .12);
  --gold: #f5b942;
  --r-elite: #c49bff;
  --r-great: #3fd28f;
  --r-good: #4fc3f7;
  --r-ok: #e9c25a;
  --r-low: #f0904a;
  --r-poor: #e8615e;
  --shadow: 0 1px 0 rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.25);
  --ice: #18283a;
  --ice-line: #33475e;
  --home: #e8615e;
  --away: #4fc3f7;
  --puck: #f4f7fb;
  color-scheme: dark;   /* dark scrollbars and form controls */
}

:root[data-theme="light"] {
  --bg: #f2f5f9;
  --panel: #ffffff;
  --panel-2: #f6f8fb;
  --line: #d9e1eb;
  --line-soft: #e8edf3;
  --text: #0e1a28;
  --muted: #5a6a7e;
  --accent: #0b74b8;
  --accent-ink: #ffffff;
  --accent-soft: rgba(11, 116, 184, .09);
  --gold: #b7800d;
  --r-elite: #7a3fd6;
  --r-great: #12915a;
  --r-good: #0b74b8;
  --r-ok: #a77f06;
  --r-low: #c25f12;
  --r-poor: #c33a37;
  --shadow: 0 1px 2px rgba(15, 30, 50, .06), 0 6px 18px rgba(15, 30, 50, .06);
  --ice: #eef4fa;
  --ice-line: #9fb2c6;
  --home: #c33a37;
  --away: #0b74b8;
  --puck: #0e1a28;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: "Barlow Condensed", Inter, sans-serif; letter-spacing: .02em; margin: 0; }
h1 { font-size: 34px; font-weight: 700; line-height: 1.05; }
h2 { font-size: 20px; font-weight: 600; text-transform: uppercase; color: var(--muted); letter-spacing: .06em; }
h3 { font-size: 20px; font-weight: 600; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 18px;
  padding: 10px 20px;
  background: var(--bg);   /* for older browsers */
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 8px; color: var(--text); font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 21px; letter-spacing: .08em; }
.brand:hover { text-decoration: none; }
.brand svg { width: 26px; height: 26px; color: var(--accent); }
.crumbs { flex: 1; display: flex; gap: 6px; align-items: center; min-width: 0; overflow: hidden; white-space: nowrap; color: var(--muted); font-size: 13px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--text); }
.crumbs .sep { opacity: .5; }
.crumbs .here { color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.top-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; min-width: 0; }
#userBtn { min-width: 0; }
#userLabel { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 420px) { #userLabel { display: none; } }
/* the phone "back" link (shown only on small screens, under the top bar) */
.back-bar { display: none; }
.back-bar a { color: var(--muted); font-size: 14px; font-weight: 600; }
.icon-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--text);
  font: 600 13px Inter, sans-serif; cursor: pointer;
}
.icon-btn:hover { border-color: var(--accent); }
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
:root[data-theme="dark"] .icon-btn .sun, :root:not([data-theme]) .icon-btn .sun { display: none; }
:root[data-theme="light"] .icon-btn .moon { display: none; }

/* ---------- page ---------- */
.page { max-width: 1200px; margin: 0 auto; padding: 24px 20px 60px; }
.loading { padding: 60px 0; text-align: center; color: var(--muted); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head .sub { color: var(--muted); margin-top: 6px; }
.section { margin-top: 28px; }
.section > h2 { margin-bottom: 10px; }
.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid > * { min-width: 0; }   /* a wide table scrolls inside its box instead of stretching the page */
@media (max-width: 860px) { .grid.two, .grid.three { grid-template-columns: minmax(0, 1fr); } h1 { font-size: 28px; } }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.card.pad { padding: 16px 18px; }
.card-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.card-head h3 { font-size: 18px; }

.stats { display: flex; gap: 10px; flex-wrap: wrap; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; min-width: 120px; }
.stat .v { font: 700 24px "Barlow Condensed", sans-serif; }
.stat .k { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }

/* ---------- buttons and forms ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--accent-ink); font: 600 13px Inter, sans-serif; cursor: pointer;
}
.btn:hover { filter: brightness(1.08); text-decoration: none; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--accent); }
.btn.danger { background: transparent; color: var(--r-poor); border-color: var(--line); }
.btn.danger:hover { border-color: var(--r-poor); }
.btn.small { height: 30px; padding: 0 10px; font-size: 12px; }
input, select {
  height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text); font: 14px Inter, sans-serif; min-width: 0;
}
input:focus, select:focus { outline: none; border-color: var(--accent); }
label.field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; max-width: 100%; min-width: 0; }
label.field select, label.field input { max-width: 100%; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; padding: 14px 16px; }
.filters input.w-sm, .filters select.w-sm { width: 90px; }
.error { color: var(--r-poor); }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; max-width: 100%; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px 12px; text-align: left; white-space: nowrap; }
/* long text (titles, notes, reasons) can wrap instead of making the table very wide */
th.wrap, td.wrap { white-space: normal; min-width: 160px; }
th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600;
  border-bottom: 1px solid var(--line); position: relative; user-select: none;
}
th.sortable { cursor: pointer; }
th.sortable:hover { color: var(--text); }
th.sorted::after { content: " ▾"; color: var(--accent); }
th.sorted.asc::after { content: " ▴"; }
td { border-bottom: 1px solid var(--line-soft); }
tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--accent-soft); }
td.r, th.r { text-align: right; }
td.c, th.c { text-align: center; }
.group-row td { background: var(--panel-2); color: var(--muted); font: 600 12px Inter, sans-serif; text-transform: uppercase; letter-spacing: .06em; }
.player-link { color: var(--text); font-weight: 600; }
.sub-line { color: var(--muted); font-size: 12px; }

/* ---------- chips and badges ---------- */
.chip {
  display: inline-block; padding: 1px 7px; border-radius: 5px; font: 600 11px Inter, sans-serif;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); letter-spacing: .03em;
}
.chip.accent { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.chip.gold { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.chip.elite { color: var(--r-elite); border-color: color-mix(in srgb, var(--r-elite) 40%, transparent); }
.ovr {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 24px; padding: 0 6px; border-radius: 6px;
  font: 700 14px "Barlow Condensed", sans-serif; font-variant-numeric: tabular-nums;
  color: var(--rc); background: color-mix(in srgb, var(--rc) 14%, transparent);
}
.ovr.big { min-width: 64px; height: 56px; font-size: 34px; border-radius: 12px; }
.ovr.hidden-val { outline: 1px dashed color-mix(in srgb, var(--rc) 55%, transparent); }
.rc-elite { --rc: var(--r-elite); } .rc-great { --rc: var(--r-great); } .rc-good { --rc: var(--r-good); }
.rc-ok { --rc: var(--r-ok); } .rc-low { --rc: var(--r-low); } .rc-poor { --rc: var(--r-poor); }

/* ---------- worlds list ---------- */
.world-list { display: grid; gap: 12px; }
.world-row { display: flex; align-items: center; gap: 16px; padding: 14px 16px; }
.world-row .name { font: 700 22px "Barlow Condensed", sans-serif; }
.world-row .grow { flex: 1; min-width: 0; }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: spin .8s linear infinite; display: inline-block; vertical-align: -2px; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty { padding: 28px; text-align: center; color: var(--muted); }

/* ---------- league tiles ---------- */
.league-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.league-tile { display: block; padding: 14px 16px; color: var(--text); }
.league-tile:hover { text-decoration: none; border-color: var(--accent); }
.league-tile .code { font: 700 22px "Barlow Condensed", sans-serif; letter-spacing: .04em; }
.league-tile .lname { color: var(--muted); font-size: 12px; margin-bottom: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.league-tile .row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }

/* ---------- bars ---------- */
.bar-list { display: grid; gap: 8px; padding: 14px 16px; }
.bar-item { display: grid; grid-template-columns: 120px 1fr 64px; gap: 10px; align-items: center; font-size: 13px; }
.bar-track { height: 8px; border-radius: 4px; background: var(--panel-2); overflow: hidden; border: 1px solid var(--line-soft); }
.bar-fill { height: 100%; border-radius: 4px; background: var(--rc, var(--accent)); }

/* ---------- player page ---------- */
.player-hero { display: flex; gap: 20px; align-items: center; padding: 20px; flex-wrap: wrap; }
.player-hero .jersey { font: 700 56px/1 "Barlow Condensed", sans-serif; color: var(--muted); min-width: 70px; }
.player-hero .info { flex: 1; min-width: 220px; }
.player-hero h1 { margin-bottom: 6px; }
.facts { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; }
.facts div span { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.facts div b { font-weight: 600; }
.ovr-stack { display: flex; gap: 12px; align-items: center; }
.ovr-stack .lbl { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; text-align: center; margin-top: 4px; }
.rating-group { padding: 6px 16px 14px; }
.rating-row { display: grid; grid-template-columns: 1fr 120px 34px; gap: 10px; align-items: center; padding: 5px 0; font-size: 13px; }
.rating-row .val { text-align: right; font: 700 15px "Barlow Condensed", sans-serif; color: var(--rc); }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; padding: 14px 16px; font-size: 13px; }
.kv .k { color: var(--muted); }
.kv .v { font-weight: 600; text-align: right; }
.note { padding: 12px 16px; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--muted); }
.lock-note { font-size: 12px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }

/* ---------- tabs ---------- */
/* links (they change the address) or buttons (they switch a panel) */
.tabs { display: flex; gap: 4px; align-items: center; border-bottom: 1px solid var(--line); margin-top: 8px; overflow-x: auto; }
.tabs a, .tabs button {
  padding: 10px 14px; color: var(--muted); font: 600 14px Inter, sans-serif; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  background: none; cursor: pointer; white-space: nowrap;
}
.tabs a:hover, .tabs button:hover { color: var(--text); text-decoration: none; }
.tabs a.on, .tabs button.on { color: var(--text); border-bottom-color: var(--accent); }
.tab-tools { margin-left: auto; display: flex; gap: 6px; align-items: center; }
/* small screens: tabs go onto two lines, so every tab can be seen */
@media (max-width: 600px) {
  .tabs { flex-wrap: wrap; overflow-x: visible; row-gap: 0; }
  .tabs a, .tabs button { padding: 9px 10px; }
  .tab-tools { margin: 6px 0; width: 100%; flex-wrap: wrap; }
}

/* ---------- tap-to-explain labels (tip() in ui.js) ---------- */
.tip { display: inline-block; vertical-align: middle; }
.tip > summary { display: inline-block; list-style: none; cursor: help; }
.tip > summary::-webkit-details-marker { display: none; }
.tip > summary.muted { text-decoration: underline dotted; }
.tip:not([open]) > .tip-text { display: none; }
.tip[open] { display: inline; }   /* the text opens on its own line under the label */
.tip-text { display: block; white-space: normal; width: max-content; max-width: 220px; margin-top: 4px; font-size: 12px; font-weight: 400; color: var(--muted); text-align: left; }

.deal-mark { font-size: 10px; }
.deal-mark.down { color: var(--r-great); }
.deal-mark.up { color: var(--gold); }

/* ---------- front office ---------- */
.pad-in { padding: 14px 16px 4px; }
.big-name { font: 700 24px "Barlow Condensed", sans-serif; line-height: 1.15; }
.trait-list { display: grid; gap: 8px; margin-top: 10px; }
.trait { display: grid; grid-template-columns: 1fr 110px 28px; gap: 10px; align-items: center; color: var(--text); }
.trait .num { text-align: right; font-weight: 600; }
.pos { color: var(--r-great); }
.neg { color: var(--r-poor); }
.profit-line { display: flex; justify-content: space-between; align-items: center; font-size: 16px; }
.profit-line b { font: 700 26px "Barlow Condensed", sans-serif; }
.notice { border-color: color-mix(in srgb, var(--gold) 50%, var(--line)); color: var(--text); }

/* ---------- settings switch ---------- */
.setting { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 14px 16px; cursor: pointer; }
.setting .muted { font-size: 13px; margin-top: 2px; }
.switch { position: relative; width: 46px; height: 26px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.slider { position: absolute; inset: 0; background: var(--panel-2); border: 1px solid var(--line); border-radius: 26px; transition: .15s; }
.slider::before { content: ""; position: absolute; width: 20px; height: 20px; left: 2px; top: 2px; border-radius: 50%; background: var(--muted); transition: .15s; }
.switch input:checked + .slider { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(20px); background: var(--accent-ink); }
.switch input:focus-visible + .slider { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- forms in pop-ups ---------- */
.modal-card.wide { max-width: 560px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid input { width: 100%; margin-top: 0; }
@media (max-width: 520px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.modal[hidden] { display: none; }
.modal-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 22px; width: 100%; max-width: 380px; box-shadow: var(--shadow); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; }
.modal-card h3 { margin-bottom: 6px; font-size: 24px; }
.modal-card input { width: 100%; margin-top: 10px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

@media (max-width: 640px) {
  .topbar { padding: 10px 12px; gap: 10px; }
  .crumbs { display: none; }
  .brand span { display: none; }
  .page { padding: 16px 12px 40px; }
  .back-bar { display: block; max-width: 1200px; margin: 0 auto; padding: 10px 12px 0; }
  .back-bar:empty { display: none; }
  th, td { padding: 7px 8px; }
  .bar-item { grid-template-columns: 90px 1fr 56px; }
  .rating-row { grid-template-columns: 1fr 80px 30px; }
}

/* ---------- news lists ---------- */
.news-list { display: flex; flex-direction: column; }
.news-item { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.news-item:last-child { border-bottom: none; }
.news-item b { font-weight: 600; }
.news-item .muted { font-size: 13px; margin-top: 2px; }
.news-item.country { grid-template-columns: 48px 1fr; }
.news-date { color: var(--muted); font-size: 12px; padding-top: 3px; white-space: nowrap; }
.chip.warn { background: color-mix(in srgb, var(--r-poor) 18%, transparent); color: var(--r-poor); border-color: transparent; }
@media (max-width: 600px) {
  .news-item { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- draft screen ---------- */
.draft-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 20px; margin-top: 16px; }
.draft-grid > div { min-width: 0; }
.draft-grid h2 { margin-top: 0; }
.on-clock { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; border-color: var(--accent); }
.clock-team { font-size: 22px; font-weight: 700; margin: 2px 0; }
.clock-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.picks-card .table-wrap { max-height: 75vh; overflow-y: auto; }
.small-tabs { margin-bottom: 8px; }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.draft-banner { display: block; text-decoration: none; color: inherit; }
.build-note { flex-basis: 100%; font-size: 13px; line-height: 1.5; }
.field.check .check-row { display: flex; align-items: center; gap: 6px; height: 38px; }
@media (max-width: 900px) {
  .draft-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- trades ---------- */
.trade-box { margin-top: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.trade-side b a { color: inherit; }

/* ---------- Stage 2: lines, games and the 2D rink ---------- */
.pad { padding: 14px 16px; }
.lines-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.lines-grid .span-all { grid-column: 1 / -1; }
.lines-grid h3 { font-size: 15px; margin-bottom: 8px; }
.unit-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line-soft); }
.unit-row:first-of-type { border-top: 0; }
.unit-name { font-size: 12px; color: var(--muted); }
.unit-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; min-width: 0; }
.unit-picks select { width: 100%; min-width: 0; font-size: 13px; padding-left: 8px; padding-right: 4px; }
.unit-picks > span { font-size: 13px; }
.usage { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 3px; }
.usage input { width: 54px; }
.tactic { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 6px 0; font-size: 14px; }
.tactic > span:first-child { width: 190px; color: var(--muted); }
.tactic .muted { font-size: 12px; }
.tactic input[type=number] { width: 70px; }

.scoreboard { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; text-align: center; padding: 12px 16px; margin-bottom: 14px; }
.sb-team a { font-weight: 600; color: var(--text); }
.sb-team:first-child .sb-score { color: var(--away); }
.sb-team:last-child .sb-score { color: var(--home); }
.sb-score { font-size: 40px; font-weight: 800; line-height: 1.1; }
.sb-mid { padding: 0 18px; }
.sb-mid #sbClock { font-size: 26px; font-weight: 700; }
.sb-rules { grid-column: 1 / -1; font-size: 12px; margin-top: 8px; border-top: 1px solid var(--line-soft); padding-top: 6px; }
.sb-str { font-size: 12px; color: var(--gold); min-height: 16px; }
.game-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; align-items: start; }
.game-grid > div { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (max-width: 1000px) { .game-grid { grid-template-columns: 1fr; } }
.rink-card { padding: 8px; }
.rink-card canvas { display: block; width: 100%; }
.controls { display: flex; gap: 6px; flex-wrap: wrap; }
.btn.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
#momentum { width: 100%; height: 90px; display: block; }
.home-c { color: var(--home); }
.away-c { color: var(--away); }
.side-card { max-height: 640px; overflow-y: auto; }
.pbp-row { display: grid; grid-template-columns: 70px 1fr auto; gap: 8px; align-items: center; padding: 6px 14px; border-top: 1px solid var(--line-soft); font-size: 13px; }
.pbp-row:first-child { border-top: 0; }
.pbp-row.goal { background: var(--accent-soft); font-weight: 600; }
.pbp-row.pen { color: var(--gold); }
.pbp-row.per { color: var(--muted); font-style: italic; }
.ice-list { display: flex; flex-direction: column; }
.ice-row { display: grid; grid-template-columns: 28px 1fr 70px 76px; gap: 6px; align-items: center; font-size: 12px; padding: 3px 0; opacity: .6; }
.ice-row.on { opacity: 1; font-weight: 600; }
.ebar { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.ebar span { display: block; height: 100%; border-radius: 3px; }
.stars { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.coach-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.coach-head h3 { font-size: 16px; }
.check-row { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }
.coach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin: 8px 0; }
.coach-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); min-width: 0; }
.coach-grid select { width: 100%; min-width: 0; }
.coach-actions { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 600px) {
  .sb-score { font-size: 30px; }
  .tactic > span:first-child { width: 100%; }
  .pbp-row { grid-template-columns: 60px 1fr; }
  .pbp-row button { grid-column: 2; justify-self: start; }
}
#xTestOut td:first-child, #xTestOut th:first-child { white-space: normal; }

/* ---------- Stage 3: the season ---------- */
.season-card { margin-bottom: 16px; }
.season-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.season-date { font-size: 24px; font-weight: 700; }
.sim-buttons { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sim-date { display: inline-flex; gap: 6px; align-items: center; }
.sim-date input { width: 150px; }
.sim-status { margin-top: 10px; font-size: 14px; }
.season-sub { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); font-size: 14px; }
.season-sub .chip a { color: inherit; }
.coach-chip { display: inline-flex; align-items: center; gap: 2px; }
.chip-x { border: 0; background: none; color: inherit; font: 700 15px/1 Inter, sans-serif; padding: 2px 6px; cursor: pointer; border-radius: 4px; }
.chip-x:hover { background: var(--accent-soft); }
.setting-list { display: flex; flex-direction: column; gap: 8px; max-width: 460px; }
.setting-list .check-row { align-items: flex-start; }
.setting-list .check-row input { margin-top: 3px; flex: none; }
.setting-list .sub-line { display: block; }
.autosim { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.autosim input[type=text] { width: 110px; }
.season-today { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.today-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.today-head h3 { font-size: 15px; }
.today-league { font-size: 13px; color: var(--muted); margin: 6px 0; }
.score-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.score-card { display: block; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--panel-2); color: var(--text); font-size: 14px; }
a.score-card:hover { border-color: var(--accent); text-decoration: none; }
.sc-team { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); }
.sc-team.win { color: var(--text); font-weight: 600; }
.sc-foot { margin-top: 4px; font-size: 12px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.day-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.leaders { margin-top: 8px; }
.leader h3 { font-size: 14px; margin-bottom: 6px; }
.leader-row { display: grid; grid-template-columns: 18px 1fr auto; gap: 6px; font-size: 13px; padding: 3px 0; }
.bracket { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.b-round { min-width: 230px; display: flex; flex-direction: column; gap: 8px; }
.b-round h3 { font-size: 14px; color: var(--muted); }
.series { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--panel); font-size: 14px; }
.series > div:not(.series-foot) { display: grid; grid-template-columns: 18px 1fr auto; gap: 6px; padding: 2px 0; }
.series .win { font-weight: 700; }
.series .lose { opacity: .55; }
.series-foot { font-size: 12px; margin-top: 4px; }
@media (max-width: 600px) {
  .season-date { font-size: 20px; }
  .score-grid { grid-template-columns: 1fr 1fr; }
}
.season-card, .season-head > div { min-width: 0; }
@media (max-width: 600px) {
  .sim-buttons .btn { padding-left: 10px; padding-right: 10px; }
  .sim-date input { width: 170px; }
  .autosim input[type=text] { width: 140px; }
  /* lines: the player boxes get the full width, the % goes under them */
  .unit-row { grid-template-columns: 36px minmax(0, 1fr); }
  .unit-row > :nth-child(3) { grid-column: 2; }
  .unit-row > span:nth-child(3):empty { display: none; }
  /* your games: name and details on top, buttons underneath */
  .world-row { flex-wrap: wrap; }
  .world-row .grow { flex-basis: 100%; }
}
.section, .card { min-width: 0; }
#app { overflow-x: clip; }

/* ---------- Stage 3b: accounts, new game, joining ---------- */
.auth-wrap { display: flex; justify-content: center; padding: 30px 0; }
.auth-card { width: 100%; max-width: 420px; }
.auth-card h1 { font-size: 30px; margin: 10px 0 14px; }
.auth-brand { display: flex; flex-direction: column; gap: 2px; font-size: 13px; letter-spacing: .06em; }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-form input { width: 100%; }
.auth-form .btn { align-self: flex-start; }
.auth-links { margin-top: 14px; font-size: 14px; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 8px 0 16px; }
.choice-grid.small { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.choice { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 16px; cursor: pointer; color: var(--text); font: inherit; border: 1px solid var(--line); }
a.choice:hover, button.choice:hover { border-color: var(--accent); text-decoration: none; }
.choice b { font-size: 17px; }
.choice span { color: var(--muted); font-size: 13px; line-height: 1.4; }
.choice.on { border-color: var(--accent); background: var(--accent-soft); }
.choice-grid.small .choice { padding: 12px; }
.choice-grid.small .choice b { font-size: 15px; }
.setup-card h3 { margin: 18px 0 6px; font-size: 16px; }
.ratings-wrap { margin: 4px 0 10px; }
.pts-left { font-size: 14px; margin-bottom: 6px; }
.rating-edit { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 16px; }
.re-row { display: grid; grid-template-columns: 1fr auto 34px auto; gap: 6px; align-items: center; font-size: 14px; padding: 3px 0; }
.re-row b { text-align: center; }
.pm-btn { min-width: 34px; font-size: 16px; }
.invite-code { font-size: 20px; letter-spacing: .12em; color: var(--accent); }
.staff-card h3 { margin: 4px 0; font-size: 18px; }

/* =============================================================
   The website (site.js): home page, help, pricing, news, board
   ============================================================= */
.top-link { color: var(--muted); font-size: 13px; font-weight: 600; padding: 6px 8px; border-radius: 8px; text-decoration: none; }
.top-link:hover { color: var(--text); background: var(--accent-soft); }
.btn.big { padding: 12px 22px; font-size: 16px; }
.hero { display: grid; grid-template-columns: 1fr 1.1fr; gap: 32px; align-items: center; padding: 28px 0 18px; }
.hero h1 { font-family: 'Barlow Condensed', sans-serif; font-size: 52px; line-height: 1.02; letter-spacing: .5px; margin: 0 0 14px; }
.accent-text { color: var(--accent); }
.lead { font-size: 17px; color: var(--muted); max-width: 520px; line-height: 1.5; }
.hero-buttons { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.hero-shot { width: 100%; border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.feature h3 { margin: 0 0 6px; }
.feature p { margin: 0; color: var(--muted); line-height: 1.5; font-size: 14px; }
.shot-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.shot-grid figure { margin: 0; overflow: hidden; }
.shot-grid img { width: 100%; display: block; border-bottom: 1px solid var(--line); }
.shot-grid figcaption { padding: 10px 12px; font-size: 13px; color: var(--muted); }
.cta { text-align: center; }
.cta h2 { margin-top: 0; }
.site-foot { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 36px 0 12px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; }
.site-foot .muted { margin-left: auto; }
.how-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; counter-reset: how; }
.how-list li { counter-increment: how; position: relative; padding-left: 58px; }
.how-list li::before { content: counter(how); position: absolute; left: 16px; top: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 700; }
.how-list h3 { margin: 0 0 4px; }
.how-list p { margin: 0; color: var(--muted); line-height: 1.5; }
.price-card { max-width: 640px; }
.price-big { font-size: 34px; font-weight: 800; margin: 6px 0 10px; color: var(--accent); }
.update { margin-bottom: 12px; }
.update h2 { margin: 0 0 4px; }
.post-body { margin-top: 8px; line-height: 1.55; white-space: normal; overflow-wrap: anywhere; }
.board-post { margin-bottom: 10px; }
.post-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
textarea { width: 100%; box-sizing: border-box; background: var(--panel-2, var(--bg)); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 10px; font: inherit; }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .hero h1 { font-size: 38px; }
  .feature-grid, .shot-grid { grid-template-columns: 1fr; }
  .hide-sm { display: none; }
}
[hidden] { display: none !important; }

/* =============================================================
   Phones and touch screens
   ============================================================= */
/* Phones zoom in on a box with text smaller than 16px when you tap it. */
@media (max-width: 640px) {
  input, select, textarea, .unit-picks select, .coach-grid select { font-size: 16px; }
}
/* Fingers need bigger targets than a mouse (about 44px). */
@media (pointer: coarse) {
  .btn, .btn.small { min-height: 44px; }
  .icon-btn { height: 44px; min-width: 44px; justify-content: center; }
  .top-link { padding: 12px 8px; }
  .tabs a, .tabs button { padding-top: 12px; padding-bottom: 12px; }
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select { min-height: 44px; }
  .pm-btn { min-width: 44px; }
  .chip-x { min-width: 32px; min-height: 32px; font-size: 18px; }
  .tip > summary { padding-top: 4px; padding-bottom: 4px; }
  .check-row input[type=checkbox] { width: 22px; height: 22px; }
}

/* ---------- Practice tab ---------- */
.practice-grid { align-items: start; }
.practice-grid h3 { margin-bottom: 6px; }
.practice-grid label.field { margin-top: 8px; }
.practice-grid label.field select { width: 100%; max-width: 360px; }
.practice-players select { width: 100%; min-width: 130px; }
.practice-save { margin-top: 14px; }
p.small, .muted.small { font-size: 13px; margin-top: 4px; }
.plain-list { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 6px; }
.form-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Lines tab: the playoff cap check */
.cap-check { margin-bottom: 14px; }
.cap-check p { margin: 6px 0; }

/* Staff page: how a rating changed last summer */
.change-mark { font-size: 11px; font-weight: 700; margin-left: 4px; white-space: nowrap; }
.change-mark.up { color: var(--r-great); }
.change-mark.down { color: var(--r-poor); }