:root {
  --bg: #0d0f14;
  --panel: #14171f;
  --panel-2: #1b1f29;
  --panel-3: #222633;
  --line: #262b38;
  --line-2: #313747;
  --text: #e8ebf2;
  --muted: #8b93a6;
  --accent: #4a9eff;
  --accent-hi: #6fb2ff;
  --good: #35c07f;
  --bad: #e5484d;
  --gold: #f5c451;
  --radius: 14px;
  --radius-sm: 9px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* The display face. Condensed, so a big number stays big without eating the
     column it sits in — this is a control room and the counts are the content.
     Bahnschrift ships with Windows and DIN Alternate with macOS; both are the
     same idea, and /eraser already leans on exactly this stack, so it is a face
     the project has rather than a new dependency. No webfont: a font that has
     to be fetched is a font that is missing for the first paint.
     ⚠ NOT a monospace fallback anywhere in here. */
  --disp: 'Bahnschrift', 'DIN Alternate', 'Oswald', 'Arial Narrow', 'Segoe UI', var(--font);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ⚠ A RAIL, NOT A ROW OF PILLS. The old note here said a pair of pills under
   the header was the whole navigation, and that was true when there were two
   pages. Five destinations with a live one that appears and disappears is a
   different problem: a horizontal strip gives the control room the same weight
   as Rules, and it has to share the top of the screen with the thing it is
   navigating. A rail is always in the same place, holds a state light and a
   count without crowding, and leaves the whole page for the page. */
.app {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  min-height: 100vh;
}
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
}

.rail {
  background: #0b0d12;
  border-right: 1px solid var(--line);
  padding: 20px 14px 22px;
  display: flex; flex-direction: column; gap: 3px;
  position: sticky; top: 0; align-self: start; max-height: 100vh;
}
@media (max-width: 900px) {
  .rail { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--line); }
}

.rail-brand {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  padding: 2px 10px 20px;
}
.rail-brand b {
  font-family: var(--disp); font-size: 20px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; line-height: 1;
}
/* The connection light, pushed to the end of the row. It used to sit in front
   of the name; the mark is there now, and two round things side by side read as
   one badge with a defect in it. */
.rail-brand .dot { margin-left: auto; }
.rail-brand .online-counter {
  flex-basis: 100%; padding: 0; text-align: left;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  font-size: 12px; font-weight: 500; line-height: 20px;
  font-variant-numeric: tabular-nums;
}
.rail-brand .online-counter:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; }
.rail-brand .online-counter:focus-visible { outline: 2px solid var(--good); outline-offset: 3px; }

.logo { width: 26px; height: 26px; flex-shrink: 0; display: block; }
.logo-lg { width: 44px; height: 44px; margin: 0 auto 12px; }
.rail-foot {
  margin-top: auto; padding: 16px 10px 0;
  color: #5f6879; font-size: 11.5px; line-height: 1.5;
}
/* Who is signed in. There was never a name to put here — one shared password
   means no identity, which is also why every ledger entry recorded the literal
   string "admin" as its actor. */
.rail-me {
  padding-bottom: 10px; margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.rail-me b { display: block; color: var(--text); font-size: 13px; font-weight: 600; }
.rail-me span { display: block; color: var(--muted); font-size: 11.5px; }
.linkish {
  background: none; border: 0; padding: 4px 0 0; cursor: pointer;
  color: var(--accent); font-family: inherit; font-size: 11.5px; text-decoration: underline;
}
.linkish:hover { color: var(--accent-hi); }

/* A page this account may not open. Hidden rather than shown-and-refused: a
   greyed row invites a click that can only ever say no. */
.pagetab.nav-denied { display: none; }

/* ---------- the login and password gates ---------- */
.login-box input { margin: 0 0 10px; text-align: center; }
.login-box input:first-of-type { margin-top: 16px; }
.login-box button[type='submit'] { width: 100%; margin-top: 4px; }
.lg-err { color: var(--bad); font-size: 13px; margin: 12px 0 0; }
.lg-hint { font-size: 12px; margin: 10px 0 0; }

/* ---------- the access editor ---------- */
.ac-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.ac-row:last-child { border-bottom: 0; }
.ac-row .ac-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 550; }
.ac-row .ac-name span { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
.ac-seg { display: flex; gap: 0; background: var(--panel-2); border-radius: 999px; padding: 3px; flex-shrink: 0; }
.ac-seg button {
  background: transparent; border: 0; color: var(--muted);
  padding: 5px 13px; font-size: 12.5px; border-radius: 999px; font-family: inherit;
}
.ac-seg button.on { background: var(--panel-3); color: var(--text); font-weight: 600; }
.ac-seg button.on[data-lv='edit'] { background: var(--accent); color: #08111d; }
.ac-seg button.on[data-lv='none'] { background: var(--bad); color: #1b0507; }
.ac-full {
  background: var(--panel-2); border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); padding: 12px 14px; color: var(--muted); font-size: 13px;
}
@media (max-width: 900px) { .rail-foot { display: none; } }

.pagenav { display: flex; flex-direction: column; gap: 3px; }
@media (max-width: 900px) {
  .pagenav { flex-direction: row; flex-wrap: wrap; }
}
.pagetab {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: transparent; color: var(--muted);
  border: 1px solid transparent; padding: 9px 11px;
  font-size: 14px; border-radius: var(--radius-sm); text-align: left;
}
.pagetab .gl { width: 16px; text-align: center; font-size: 12px; opacity: 0.9; flex-shrink: 0; }
.pagetab:hover { background: var(--panel); color: var(--text); }
.pagetab.active { background: rgba(74,158,255,0.12); border-color: transparent; color: var(--accent-hi); font-weight: 600; }
.pagetab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The control room. On screen only while a show is running, and red because it
   is the one tab where the thing behind it cannot be undone — a round started
   is a round every player is already in. */
.pagetab-live {
  color: #ff9b9e; border-color: rgba(229,72,77,0.38);
  background: rgba(229,72,77,0.10); font-weight: 600;
}
.pagetab-live:hover { color: #ffd0d1; }
.pagetab-live.active {
  background: rgba(229,72,77,0.20); border-color: rgba(229,72,77,0.55); color: #ffd0d1;
}

/* ⚠ Something is being fetched. There were NO loading states anywhere on this
   dashboard: a page showed whatever was last in memory until the response
   landed, so stale numbers and fresh ones looked exactly alike — during a live
   show, that is the difference between a field that is shrinking and a console
   that has quietly stopped polling. */
.loading { position: relative; }
.loading::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.035), transparent);
  background-size: 220% 100%;
  animation: sheen 1.1s linear infinite;
  border-radius: var(--radius); pointer-events: none;
}
@keyframes sheen { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) {
  .loading::after { animation: none; background: rgba(255,255,255,0.03); }
}

/* The pending-request count, on the tab itself. It is the one number on this
   dashboard that means a person is waiting, so it has to be readable from
   whichever page you happen to be on — usually the show console. */
.tab-count {
  display: inline-block; margin-left: 7px; min-width: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--gold); color: #20180a;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---------- content ---------- */

/* ⚠ NOT CENTRED IN A NARROW COLUMN ANY MORE. Every page was `max-width:720px`
   inside a centred 1180px shell, so a control room with a draw in it had about
   660px to work with on a 1440px screen and the rest of the monitor was empty
   background. The rail owns the left edge now, and the content starts where the
   rail ends rather than floating in the middle of the window. */
.content {
  max-width: 1160px;
  min-width: 0;
  padding: 26px 34px 70px;
}
@media (max-width: 900px) { .content { padding: 18px 16px 50px; } }

.content-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.content-head h1 {
  font-family: var(--disp);
  font-size: 30px; font-weight: 600; margin: 0; letter-spacing: 0.01em;
  display: flex; align-items: center; gap: 10px;
}
/* What this page is for, in one line. A page title alone names a page; it does
   not say what the person in front of it is meant to do with it. */
.page-why { color: var(--muted); font-size: 13.5px; margin: 3px 0 0; }
.head-right { display: flex; align-items: center; gap: 12px; }

.banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: linear-gradient(180deg, rgba(74,158,255,0.08), transparent), var(--panel);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 20px;
  max-width: 1080px;
}
.banner-ico { font-size: 22px; }
.banner p { margin: 4px 0 0; }

/* ---------- pages ---------- */

/* There has only ever been one .page, so nothing hid the others — there were no
   others. The moment a second one exists these two lines are what make the
   first one go away, and without them both pages render stacked. */
.page { display: none; }
.page.active { display: block; }

.page-inner { width: 100%; }
/* Was 720px. A form still wants a readable measure, but a list of shows, a
   ledger and a live draw do not — and they were all sharing the form's width. */
.page-inner.narrow { max-width: 1000px; }
.page-inner.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  max-width: 1080px;
  align-items: start;
}
.stack { display: flex; flex-direction: column; gap: 18px; }

/* ---------- cards ---------- */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}
.card + .card { margin-top: 18px; }
.card h2 {
  margin: 0 0 16px; font-family: var(--disp);
  font-size: 19px; font-weight: 600; letter-spacing: 0.02em;
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-head h2 { margin-bottom: 16px; }

.muted { color: var(--muted); font-size: 13px; font-weight: 400; }
.hint { color: var(--muted); font-size: 12.5px; margin: 8px 0 0; }
.pill {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--accent); background: rgba(74,158,255,0.12);
  padding: 3px 9px; border-radius: 999px; text-transform: uppercase;
}

hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }

/* ---------- forms ---------- */

label { display: block; font-size: 12.5px; color: var(--muted); margin: 14px 0 6px; font-weight: 500; }
label:first-of-type, .card > label:first-child { margin-top: 0; }

/* ⚠ time and date belong in this list. Left out, they fall back to the browser
   default — a white box with black text, which is what a native picker looks
   like dropped into a dark page, and it was one. */
input[type='text'], input[type='number'], input[type='password'],
input[type='time'], input[type='date'], select, textarea {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.12s;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
textarea { resize: vertical; }
select { cursor: pointer; }

.head-right select { min-width: 200px; background: var(--panel-2); }

label.check, label.inline {
  display: flex; align-items: center; gap: 8px;
  color: var(--text); font-size: 13.5px; font-weight: 400;
}
label.inline input[type='number'] { width: 72px; }
input[type='checkbox'], input[type='radio'] { accent-color: var(--accent); width: auto; }

/* ---------- keying in each place by hand ---------- */

.pay-manual { list-style: none; margin: 0; padding: 0; }
.pay-manual li {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 0;
}
/* Fixed width so every box starts at the same x — a ragged left edge down a
   column of amounts makes them much harder to scan against each other. */
.pay-manual .pl { flex: 0 0 46px; color: var(--muted); font-size: 13px; }
.pay-manual input[type='number'] { width: 140px; flex: 0 0 140px; }

/* ---------- the start-time shortcuts ---------- */

.whenpills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.whenpill {
  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--text);
  border-radius: 999px; padding: 6px 13px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; white-space: nowrap;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.whenpill:hover { border-color: var(--accent); }
/* Which shortcut produced what is in the boxes. It goes out again the moment
   the clock or the date is edited by hand, or it would be claiming a shortcut
   that no longer describes the value. */
.whenpill.on {
  background: var(--accent); border-color: var(--accent);
  color: var(--bg); font-weight: 600;
}

/* The clock and the date sit side by side and want their natural width — the
   100% above would stretch a time picker across the whole form. */
.whenrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.whenrow input[type='time'], .whenrow input[type='date'] { width: auto; flex: 0 0 auto; }
.whenclear {
  background: none; border: 0; cursor: pointer; padding: 6px 4px;
  color: var(--muted); font-family: inherit; font-size: 12.5px; text-decoration: underline;
}

.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
#tmList > li { align-items: flex-start; flex-wrap: wrap; }
#tmList > li > .who { flex: 1 1 270px; }
#tmList .team-role-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#tmList .team-role-controls label { margin: 0; }
#tmList .team-role-controls select { width: auto; flex: 1 1 130px; max-width: 190px; }
#tmList .team-role-note { margin: 6px 0 0; max-width: 42ch; }
.subtle-box {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 10px 12px; margin-top: 14px;
}

/* ---------- buttons ---------- */

button {
  font-family: inherit; font-size: 14px; font-weight: 550;
  border-radius: var(--radius-sm); padding: 10px 16px;
  border: 1px solid transparent; cursor: pointer;
  transition: filter 0.12s, background 0.12s;
}
button:hover:not(:disabled) { filter: brightness(1.1); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.primary { background: var(--accent); color: #fff; }
.ghost { background: var(--panel-2); color: var(--text); border-color: var(--line-2); }
.danger { background: transparent; color: var(--bad); border-color: var(--bad); }
.block { width: 100%; margin-top: 16px; }
.row .primary, .row .ghost, .row .danger { margin-top: 0; }

/* tabs (from-bank / write-your-own) */
.tabs { display: flex; gap: 6px; margin-bottom: 18px; background: var(--panel-2); padding: 4px; border-radius: var(--radius-sm); }
.tab {
  flex: 1; background: transparent; color: var(--muted);
  border: 0; padding: 8px 12px; font-size: 13px; border-radius: 7px;
}
.tab.active { background: var(--panel-3); color: var(--text); }

/* option rows (custom question builder) */
.opt-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.opt-row input[type='text'] { flex: 1; }
.opt-row .rm, .img-preview .rm {
  background: transparent; color: var(--muted);
  border-color: var(--line-2); padding: 6px 10px; line-height: 1;
}

/* ---------- image preview ---------- */
.img-preview { margin-top: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.img-preview img { max-width: 100%; max-height: 190px; border-radius: var(--radius-sm); border: 1px solid var(--line-2); }
input[type='file'] { width: 100%; font-size: 13px; color: var(--muted); }
input[type='file']::file-selector-button {
  font-family: inherit; font-size: 13px;
  background: var(--panel-3); color: var(--text);
  border: 1px solid var(--line-2); border-radius: 8px;
  padding: 7px 12px; margin-right: 10px; cursor: pointer;
}

/* ---------- leaderboard ---------- */
.board { list-style: none; margin: 0; padding: 0; }
.board li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.board li:last-child { border-bottom: 0; }
.board .rank { width: 26px; color: var(--muted); font-variant-numeric: tabular-nums; }
.board .who { flex: 1; }
.board .pts { color: var(--accent); font-weight: 650; font-variant-numeric: tabular-nums; }
.board .empty, .bank .empty { color: var(--muted); padding: 10px 0; border: 0; }

/* ---------- lists (bank / rounds) ---------- */
.bank { list-style: none; margin: 0; padding: 0; }
.bank li {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.bank li:last-child { border-bottom: 0; }
.bank .q { flex: 1; font-size: 14px; min-width: 0; }
.bank .q > div:first-child { overflow: hidden; text-overflow: ellipsis; }
.bank .ans { color: var(--good); font-size: 12.5px; margin-top: 2px; }
.bank .acts { display: flex; gap: 6px; flex-shrink: 0; }
.bank .acts button { padding: 6px 11px; font-size: 12.5px; }

/* ---------- show stats ---------- */
.show-stats {
  display: flex; gap: 22px; flex-wrap: wrap;
  padding: 14px 16px; margin-bottom: 16px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.show-stats .stat b { display: block; font-size: 21px; font-weight: 700; }
.show-stats .stat span { color: var(--muted); font-size: 12px; }
.show-phase { color: var(--accent); font-weight: 650; text-transform: capitalize; }

/* ---------- toast ---------- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--panel-3); border: 1px solid var(--line-2); color: var(--text);
  padding: 11px 18px; border-radius: 11px; font-size: 14px;
  box-shadow: 0 10px 34px rgba(0,0,0,0.5); z-index: 50; max-width: min(560px, 90vw);
}
.toast.ok { border-color: var(--good); }
.toast.err { border-color: var(--bad); }

/* ---------- login ---------- */
.login-overlay {
  position: fixed; inset: 0; background: rgba(8,10,14,0.9);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
.login-box {
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 28px; width: min(360px, 90vw); text-align: center;
}
.login-box h2 { margin: 0 0 6px; }
.login-box input { margin: 16px 0 12px; text-align: center; }

/* ---------- responsive ---------- */
/* ⚠ The .content padding rule that used to live here is gone deliberately —
   it duplicated the one in the .content block above at a DIFFERENT breakpoint
   (860 vs the rail's 900), so between those two widths the rail collapsed and
   the content kept its desktop padding. Two rules for one thing at two
   breakpoints is how a layout ends up with a state nobody designed. */
@media (max-width: 860px) {
  .page-inner.split { grid-template-columns: 1fr; }
}

/* brand bits that used to live in the sidebar. The .dot rules went out with the
   sidebar block they were written in, which left a 0x0 transparent span — the
   connection light simply stopped existing. */
.dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--muted); flex-shrink: 0;
}
.dot.online { background: var(--good); box-shadow: 0 0 0 3px rgba(53,192,127,0.15); }
.dot.offline { background: var(--bad); box-shadow: 0 0 0 3px rgba(255,107,107,0.15); }
#pageTitle .dot { display: inline-block; vertical-align: middle; margin-right: 9px; }
.head-right .bot-name { color: var(--muted); font-size: 12.5px; white-space: nowrap; }

/* Player levels retired; keep shared-controller anchors inert. */
.retired-level { display: none !important; }

/* Live player presence */
.online-counter { color: var(--good); white-space: nowrap; font-size: 12px; }
.online-table-wrap { overflow: auto; max-height: 65vh; margin-top: 14px; }
.online-table { width: 100%; border-collapse: collapse; text-align: left; }
.online-table th, .online-table td { padding: 10px 8px; border-bottom: 1px solid var(--line); }
.online-table th { position: sticky; top: 0; background: var(--panel); color: var(--muted); font-size: 12px; }
.online-table td { font-size: 13px; white-space: nowrap; }
.online-table td:first-child { white-space: normal; min-width: 140px; }
.online-table small { display: block; color: var(--muted); margin-top: 4px; overflow-wrap: anywhere; }
.online-table button { text-align: left; overflow-wrap: anywhere; }

.prize-message-dialog{width:min(680px,calc(100vw - 24px));max-height:90vh;overflow:auto;border:1px solid #47625a;border-radius:16px;padding:22px;background:var(--panel,#122724);color:var(--text,#edf3ef)}.prize-message-dialog::backdrop{background:#000a}.prize-message-dialog>.row{justify-content:space-between}.prize-message-dialog h2{font-size:19px;overflow-wrap:anywhere}.prize-message-winner{display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid #78918444;padding:13px 0}.prize-message-winner>div{min-width:0;overflow-wrap:anywhere}.prize-message-dialog label{display:block;margin:14px 0}.prize-message-dialog textarea{display:block;box-sizing:border-box;width:100%;margin-top:8px}.prize-message-dialog input[type=file]{display:block;max-width:100%;margin-top:8px}.prize-message-preview{border:1px solid #78918455;border-radius:12px;padding:15px;margin:10px 0 18px;overflow-wrap:anywhere}.prize-message-preview p{white-space:pre-wrap}.prize-message-preview img{display:block;max-width:100%;max-height:300px;margin:auto}.prize-message-preview img[hidden]{display:none}@media(max-width:480px){.prize-message-winner{align-items:stretch;flex-direction:column}.prize-message-dialog{padding:16px}}

.prize-message-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}