@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');
/* Court rows keep names on one line (ellipsis) so a long name can never
   widen a card and push the courts grid over the waiting queue panel. */
.court li { display:flex; align-items:baseline; justify-content:space-between; gap:8px; font-size:19px; }
.court li small,.waiting-panel li small { color:var(--muted); font:10px 'DM Mono'; white-space:nowrap; }
.court li.team-a { border-left:3px solid var(--green); padding-left:8px; }
.court li.team-b { border-left:3px solid var(--coral); padding-left:8px; }
.court li > span:first-child { min-width:0; flex:1 1 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.court li small, .court li .inline-action { flex:0 0 auto; }
.court-player-target { cursor:pointer; transition:background-color .15s, outline-color .15s; }
.court-player-target[draggable="true"] { cursor:grab; }
.court-player-target[draggable="true"]:active { cursor:grabbing; }
.court-player-target.swap-ready { cursor:copy; }
.court-player-target.drop-ready { outline:2px dashed var(--green); outline-offset:2px; background:#eef5d8; }
.court-player-target.is-selected { outline:2px solid var(--lime); outline-offset:2px; background:#eef5d8; }
.court-player-target:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
.queue-identity[draggable="true"] { cursor:grab; border-radius:3px; touch-action:manipulation; }
.queue-identity[draggable="true"]:active { cursor:grabbing; }
.queue-identity.queue-player-selected { outline:2px solid var(--lime); outline-offset:3px; }
.queue-identity.drop-ready { outline:2px dashed var(--green); outline-offset:3px; background:#eef5d8; }
.modal { position:fixed; inset:0; background:rgba(24,34,30,.55); z-index:3; display:grid; place-items:center; padding:24px; }
.modal.hidden { display:none; }
.modal-card { background:var(--panel); max-width:420px; width:min(420px,100%); max-height:calc(100vh - 48px); max-height:calc(100dvh - 48px); overflow-y:auto; padding:28px; border:1px solid var(--line); }
.modal-card ol { list-style:none; padding:18px 0; margin:0; max-height:52vh; overflow-y:auto; }
.modal-card li button { width:100%; text-align:left; border:1px solid var(--line); background:var(--paper); padding:12px 14px; margin-bottom:8px; cursor:pointer; font:600 16px 'Space Grotesk'; }
.modal-card li button small { display:block; color:var(--muted); font:11px 'DM Mono'; margin-top:4px; }
.manual-mode-button { width:100%; margin-top:12px; }
.manual-autofill { margin-left:8px; padding:7px 12px; border:1px solid var(--line); border-radius:5px; background:var(--panel); color:var(--ink); font:500 11px 'DM Mono',monospace; cursor:pointer; white-space:nowrap; }
.manual-autofill:disabled { opacity:.55; cursor:not-allowed; }
.manual-court .court-number { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.manual-court { min-height:280px; }
.manual-court select { max-width:58%; border:1px solid var(--line); border-radius:5px; background:var(--panel); color:var(--ink); padding:7px 8px; font:500 12px 'DM Mono',monospace; }
.manual-teams { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; }
.manual-team { display:grid; gap:7px; min-width:0; }
.manual-team > small { color:var(--muted); font:500 10px 'DM Mono',monospace; }
.manual-slot { display:flex; align-items:center; justify-content:space-between; gap:5px; width:100%; min-width:0; min-height:42px; border:1px dashed var(--line); border-radius:4px; background:#f8f7f0; color:var(--ink); padding:7px; text-align:left; cursor:pointer; font:500 12px 'Space Grotesk',sans-serif; }
.manual-slot.team-a { border-left:3px solid var(--green); }
.manual-slot.team-b { border-left:3px solid var(--coral); }
.manual-slot.filled { border-style:solid; }
.manual-slot span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.manual-slot small { flex:0 0 auto; color:var(--muted); font:10px 'DM Mono',monospace; }
.manual-slot.drop-ready { outline:2px solid var(--lime); outline-offset:1px; background:#eef5d8; }
.manual-slot.is-selected, .manual-player.is-selected { outline:2px solid var(--lime); outline-offset:2px; }
.manual-player { display:flex; justify-content:space-between; align-items:center; gap:8px; width:100%; border:0; background:transparent; color:inherit; padding:0; text-align:left; cursor:grab; font:500 14px 'Space Grotesk',sans-serif; }
.manual-player:active { cursor:grabbing; }
.manual-player span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.manual-player small { flex:0 0 auto; color:#9caaa2; font:10px 'DM Mono',monospace; white-space:nowrap; }

:root { --ink:#18221e; --muted:#6e7b74; --paper:#f3f1e9; --panel:#fffdf7; --line:#d9ded4; --green:#1b6b4b; --lime:#cce86d; --coral:#e76f51; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 90% 0%, #e2edc1 0, transparent 30%), var(--paper); font-family:'Space Grotesk', sans-serif; }
.shell { max-width:1440px; margin:auto; padding:36px 5vw 64px; }
body[data-tab="board-view"] .topbar { display:flex; align-items:center; justify-content:space-between; gap:32px; }
body[data-tab="checkin-view"] .topbar,
body[data-tab="players-view"] .topbar { display:none; }
body[data-tab="venues-view"] .topbar,
body[data-tab="statistics-view"] .topbar { display:none; }
.eyebrow,.label { color:var(--green); font:500 11px 'DM Mono',monospace; letter-spacing:1.5px; margin:0 0 9px; }
h1,h2,p { margin:0; } h1 { font-size:clamp(34px,5vw,64px); letter-spacing:-2px; line-height:.98; } h2 { font-size:25px; letter-spacing:-.7px; }
.topbar h1 { font-size:clamp(26px,3vw,38px); letter-spacing:-1.2px; line-height:1.05; }
.topbar .muted { margin-top:8px; font-size:13px; }
.muted { color:var(--muted); margin-top:13px; font-size:14px; }.live-dot { width:8px;height:8px;background:var(--coral);display:inline-block;border-radius:50%;margin-left:7px; }
.round-status { width:min(100%,420px); text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:10px; }.round-status strong { display:block; font-size:64px; line-height:.9; letter-spacing:-4px; }.round-status .muted { font:12px 'DM Mono',monospace; }
.session-picker { width:100%; max-width:300px; }
.session-picker.wide { max-width:560px; }
.session-picker .eyebrow { margin-bottom:7px; text-align:right; }
.session-picker.wide .eyebrow { text-align:left; }
.session-dropdown { position:relative; }
.session-trigger {
  appearance:none; width:100%; display:flex; align-items:center; gap:10px;
  background:linear-gradient(180deg, #fffef9, var(--panel));
  border:1px solid var(--line); border-radius:14px;
  padding:10px 36px 10px 12px; cursor:pointer; text-align:left;
  box-shadow:0 1px 0 rgba(24,34,30,.06), 0 10px 24px -18px rgba(27,107,75,.55);
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.session-trigger:hover { border-color:var(--green); box-shadow:0 2px 10px rgba(27,107,75,.14), 0 14px 28px -20px rgba(27,107,75,.55); }
.session-trigger:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
.session-menu.open + .visually-hidden-select,
.session-trigger[aria-expanded="true"] { border-color:var(--green); box-shadow:0 0 0 3px rgba(27,107,75,.12); }
.session-trigger-text { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto; }
.session-trigger-day { font:600 14px 'Space Grotesk',sans-serif; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.session-trigger-sub { font:500 11px 'DM Mono',monospace; letter-spacing:.4px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.session-pin { color:var(--green); font-size:15px; flex:0 0 auto; width:26px; height:26px; display:grid; place-items:center; background:rgba(27,107,75,.1); border-radius:999px; }
.session-chevron { position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--green); font-size:13px; pointer-events:none; transition:transform .15s; }
.session-trigger[aria-expanded="true"] .session-chevron { transform:translateY(-50%) rotate(180deg); }
.session-menu {
  position:absolute; z-index:5; left:0; right:0; top:calc(100% + 8px);
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 24px 48px -24px rgba(24,34,30,.35), 0 2px 8px rgba(24,34,30,.08);
  padding:8px; max-height:320px; overflow:auto;
}
.session-menu.hidden { display:none; }
.session-day-label {
  font:500 10.5px 'DM Mono',monospace; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--muted); padding:10px 10px 6px;
}
.session-day-label:first-child { padding-top:6px; }
.session-option {
  width:100%; display:flex; align-items:center; gap:10px; text-align:left;
  border:1px solid transparent; background:transparent; border-radius:10px;
  padding:9px 10px; cursor:pointer; transition:background .12s, border-color .12s;
}
.session-option:hover { background:rgba(27,107,75,.07); }
.session-option:focus-visible { outline:2px solid var(--green); outline-offset:1px; }
.session-option.selected { background:rgba(27,107,75,.1); border-color:rgba(27,107,75,.35); }
.session-option-dot { width:8px; height:8px; border-radius:999px; background:var(--line); flex:0 0 auto; }
.session-option.selected .session-option-dot { background:var(--green); box-shadow:0 0 0 3px rgba(27,107,75,.15); }
.session-option-body { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto; }
.session-option-day { font:600 13.5px 'Space Grotesk',sans-serif; color:var(--ink); }
.session-option-sub { font:500 11px 'DM Mono',monospace; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.session-option-check { color:var(--green); font-weight:700; visibility:hidden; flex:0 0 auto; }
.session-option.selected .session-option-check { visibility:visible; }
.session-menu-empty { padding:14px; color:var(--muted); font-size:13px; }
.visually-hidden-select { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.session-meta { display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap; margin-top:8px; }
.session-row .session-meta { justify-content:flex-start; margin-top:10px; }
.session-chip {
  font:500 10.5px 'DM Mono',monospace; letter-spacing:.8px; text-transform:uppercase;
  background:var(--green); color:#f4f6ec; border-radius:999px; padding:4px 10px;
}
.session-chip.ghost { background:transparent; color:var(--green); border:1px solid var(--green); }
.summary { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:26px 0 42px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; }.summary div { background:var(--panel); padding:20px 22px; }.summary strong { font-size:31px; display:block; letter-spacing:-.8px; }.summary span { color:var(--muted); font:12px 'DM Mono',monospace; text-transform:uppercase; }
.content-grid { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:32px; }.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:18px; }.secondary-button,.primary-button { font:600 15px 'Space Grotesk'; cursor:pointer; border:0; }.secondary-button { border-bottom:1px solid var(--green); color:var(--green); background:transparent; padding:7px 0; }.courts { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:14px; }.court { background:var(--panel); border:1px solid var(--line); border-radius:12px; min-height:215px; padding:18px; position:relative; box-shadow:0 10px 24px -24px rgba(24,34,30,.7); }.court::before { content:''; position:absolute; left:0;top:12px;bottom:12px;width:4px;border-radius:0 4px 4px 0;background:var(--court-color,var(--green)); }.court-number { display:flex;justify-content:space-between;align-items:start; color:var(--muted); font:11px 'DM Mono'; }.court-number strong { color:var(--ink); font:600 22px 'Space Grotesk'; }.court ul { list-style:none;padding:22px 0 0;margin:0; }.court li { font-size:19px; line-height:1.5; }.format { color:var(--muted); font:11px 'DM Mono'; text-transform:uppercase; margin-top:17px; }.waiting-panel { background:var(--ink); color:#f7f6ed; padding:25px; border-radius:14px; align-self:start; position:sticky; top:20px; box-shadow:0 18px 36px -30px rgba(24,34,30,.9); }.waiting-panel .eyebrow { color:var(--lime); }.waiting-panel h2 { color:white; }.queue-count { background:var(--lime);color:var(--ink);font:500 12px 'DM Mono';padding:5px 8px; border-radius:999px; }.waiting-panel ol { margin:22px 0 20px;padding:0;list-style:none;counter-reset:queue; }.waiting-panel li { counter-increment:queue; display:flex;align-items:center; gap:12px; border-top:1px solid #3a4941;padding:11px 0;color:#e9ece3; }.waiting-panel li::before { content:counter(queue, decimal-leading-zero); color:var(--lime); font:11px 'DM Mono'; }.wait-time { margin-left:auto;color:#9caaa2;font:11px 'DM Mono'; }.primary-button { width:100%; background:var(--lime); color:var(--ink); padding:15px; text-align:left; border-radius:9px; }.primary-button span { float:right;font-size:19px; }.fine-print { color:#9caaa2;font-size:11px;line-height:1.5;margin-top:16px; }
.announce { position:fixed; inset:0; background:var(--ink); color:var(--lime); z-index:2; display:grid; place-items:center; text-align:center; }.announce h2 { font-size:clamp(40px,8vw,100px); }.announce p { color:white; margin-top:12px; }
/* Let cards wrap before their fixed-size metadata/actions crowd out names. */
.content-grid > *, .court { min-width:0; }
.content-grid > section > .section-heading { flex-wrap:wrap; gap:14px; }

@media(max-width:900px) { .content-grid { grid-template-columns:minmax(0,1fr); }.waiting-panel { order:2; position:static; } }
@media(max-width:900px) { .topbar { flex-wrap:wrap; }.round-status { width:100%; text-align:left; align-items:flex-start; }.session-picker .eyebrow,.session-meta { justify-content:flex-start; text-align:left; }.board-session-label { align-items:stretch; }.board-session-label select { max-width:none; } }
@media(max-width:570px) { .shell { padding:25px 18px 40px; }.topbar { gap:16px; }.round-status strong { font-size:44px; }.summary { grid-template-columns:repeat(2,1fr); margin-bottom:32px; }.courts { grid-template-columns:1fr; } .section-heading { align-items:start; gap:15px; flex-direction:column; } }
.games-played { margin-left:auto; color:#9caaa2; font:11px 'DM Mono'; white-space:nowrap; }
.wait-time { margin-left:0; white-space:nowrap; }
.tabs { display:flex; gap:24px; border-bottom:1px solid var(--line); margin-bottom:36px; }
.tab { border:0; border-bottom:2px solid transparent; background:transparent; color:var(--muted); cursor:pointer; font:600 16px 'Space Grotesk'; padding:0 0 13px; }
.tab.active { border-color:var(--green); color:var(--green); }
.view { display:none; }
.active-view { display:block; }
.page-heading { margin-bottom:28px; }
.page-heading h2 { margin-bottom:10px; }
.schedule-note { color:var(--green); font:11px 'DM Mono'; margin:-12px 0 20px; }
.form-row,.player-form { display:flex; flex-wrap:wrap; gap:14px; align-items:end; margin-bottom:24px; }
label { display:grid; gap:7px; color:var(--muted); font:11px 'DM Mono'; text-transform:uppercase; }
input,select { min-height:42px; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--ink); font:15px 'Space Grotesk'; padding:9px 11px; text-transform:none; transition:border-color .15s, box-shadow .15s; }
input:focus,select:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(27,107,75,.12); }
select { appearance:none; padding-right:38px; background-image:linear-gradient(45deg,transparent 50%,var(--green) 50%),linear-gradient(135deg,var(--green) 50%,transparent 50%); background-position:calc(100% - 17px) 18px,calc(100% - 12px) 18px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
.player-form input { min-width:220px; }
.player-form .beginner-flag { display:flex; align-items:center; gap:8px; min-height:42px; text-transform:none; }
.player-form .beginner-flag input { min-width:18px; width:18px; min-height:18px; margin:0; accent-color:var(--green); }
.player-form .primary-button { width:auto; min-height:42px; }
.checkin-toolbar { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); padding:15px 0; margin-bottom:4px; }
.checkin-toolbar strong { font-size:18px; }
.player-list { max-width:760px; }
.directory-list { max-width:920px; }
.statistics-toolbar { display:flex; align-items:end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.statistics-session-picker { min-width:min(100%,320px); text-transform:none; }
.statistics-session-picker select { width:100%; }
.statistics-session-picker + .secondary-button { min-height:42px; }
.statistics-summary { color:var(--muted); font:12px 'DM Mono',monospace; margin:0 0 14px; }
.statistics-legend { color:var(--muted); font:11px 'DM Mono',monospace; margin:0 0 10px; }
.statistics-tally-section { margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.statistics-matrix { max-width:100%; }
.statistics-table-scroll { max-width:100%; overflow:auto; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.statistics-table { border-collapse:separate; border-spacing:0; width:max-content; min-width:100%; font:12px 'DM Mono',monospace; }
.statistics-table th,.statistics-table td { min-width:74px; padding:10px 12px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); text-align:center; }
.statistics-table thead th { position:sticky; top:0; z-index:1; background:#f2f5e9; }
.statistics-table th:first-child { position:sticky; left:0; z-index:2; width:190px; min-width:190px; max-width:190px; text-align:left; background:var(--panel); }
.statistics-table thead th:first-child { z-index:3; background:#f2f5e9; }
.statistics-table th:nth-child(2),.statistics-table td:nth-child(2) { position:sticky; left:190px; z-index:1; min-width:66px; background:#fbfaf4; }
.statistics-table thead th:nth-child(2) { z-index:2; background:#f2f5e9; }
.statistics-table th span,.statistics-table th small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.statistics-table th small { color:var(--muted); font:10px 'DM Mono',monospace; margin-top:3px; }
.statistics-table tbody th { font:600 12px 'Space Grotesk',sans-serif; }
.statistics-table .statistics-games { font-weight:600; }
.statistics-table .statistics-shared-count,.statistics-table .statistics-relationship-counts { display:block; }
.statistics-table .statistics-relationship-counts { color:var(--muted); font-size:9px; margin-top:3px; white-space:nowrap; }
.statistics-table .statistics-met { color:var(--green); background:#eef5d8; font-weight:600; }
.statistics-table .statistics-diagonal { color:#9aa49d; background:#f2f1eb; }
.statistics-table tr:last-child th,.statistics-table tr:last-child td { border-bottom:0; }
.statistics-table th:last-child,.statistics-table td:last-child { border-right:0; }
#players-view .player-form { width:fit-content; padding:18px; margin-top:8px; border:1px solid var(--line); border-radius:14px; background:rgba(255,253,247,.7); box-shadow:0 14px 30px -28px rgba(24,34,30,.7); }
.venues-list { display:flex; flex-direction:column; gap:14px; max-width:860px; }
.venue-card { background:var(--panel); border:1px solid var(--line); padding:18px 20px; display:flex; flex-direction:column; gap:12px; }
.venue-card.inactive { opacity:.65; }
.venue-card-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.venue-card-head h3 { margin:0; }
.venue-pill { font:500 10px 'DM Mono',monospace; letter-spacing:1px; text-transform:uppercase; border:1px solid var(--line); border-radius:999px; padding:4px 10px; color:var(--muted); }
.venue-pill.off { color:var(--coral); border-color:var(--coral); }
.venue-card-form { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; align-items:end; }
.venue-card-form label { min-width:0; }
.venue-card-form input,.venue-card-form select { width:100%; }
.venue-card-actions { display:flex; gap:10px; flex-wrap:wrap; }
.player-form.venue-form { align-items:end; }
.player-form.venue-form input[type="number"] { min-width:0; width:110px; }
.player-form.venue-form input#venue-divisions { min-width:200px; }
.checkin-player,.directory-row { display:flex; align-items:center; gap:14px; border-bottom:1px solid var(--line); padding:15px 0; color:var(--ink); font:15px 'Space Grotesk'; text-transform:none; }
.checkin-player { min-height:64px; padding:12px 10px; cursor:pointer; touch-action:manipulation; }
.checkin-player:hover { background:rgba(27,107,75,.045); }
.checkin-player input { flex:0 0 24px; width:24px; height:24px; min-height:24px; margin:0; padding:0; border-radius:4px; accent-color:var(--green); cursor:pointer; }
.checkin-player input:focus-visible { outline:3px solid rgba(27,107,75,.35); outline-offset:3px; }
/* Check-in names are what organisers scan down the roster, so they render a
   step larger than the player-directory rows that share the layout above. */
.checkin-player { font-size:19px; }
.checkin-player small,.directory-row small { color:var(--muted); font:11px 'DM Mono'; margin-left:auto; }
.directory-row { min-height:76px; padding:16px 18px; margin-bottom:10px; border:1px solid var(--line); border-radius:12px; background:var(--panel); box-shadow:0 10px 24px -26px rgba(24,34,30,.8); }
.directory-row > span:first-child { display:flex; flex-direction:column; gap:5px; min-width:0; }
.directory-row strong { font-size:18px; line-height:1.1; }
.directory-row small { margin-left:0; font-size:12px; }
.beginner-badge { display:inline-block; margin-left:5px; padding:2px 6px; border:1px solid #b45309; border-radius:4px; color:#8a3d08; font:600 10px 'DM Mono'; text-transform:uppercase; }
.row-actions { display:flex; flex-direction:row; gap:14px; margin-left:auto; align-items:center; flex:0 0 auto; }
.edit-button,.remove-button { border:0; background:transparent; cursor:pointer; padding:6px 0; font:600 14px 'Space Grotesk'; }
.edit-button { color:var(--green); border-bottom:1px solid rgba(27,107,75,.35); }
.remove-button { color:var(--coral); border-bottom:1px solid rgba(231,111,81,.4); }
.empty-state { color:var(--muted); padding:25px 0; }
@media(max-width:570px) { .tabs { gap:18px; margin:0 -18px 28px; padding:0 18px; overflow-x:auto; scrollbar-width:none; }.tabs::-webkit-scrollbar { display:none; }.tab { flex:0 0 auto; }.nav-logout { margin-left:0; }.checkin-player,.directory-row { align-items:flex-start; flex-wrap:wrap; }.checkin-player small { margin-left:32px; width:100%; }.directory-row small { margin-left:0; width:auto; }.player-form > * { width:100%; }.player-form input { min-width:0; width:100%; }.player-form .primary-button { width:100%; } #players-view .player-form { width:100%; } }
.heading-actions { display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.danger-button { color:var(--coral); border-bottom-color:var(--coral); }
/* Row actions (Swap / Break / Cancel) sit inside single-line flex rows, so the
   type is kept on one line; the row layout stays intact because the name column
   above is flex:1 1 0 with ellipsis and this action is flex:0 0 auto. */
.inline-action { border:0; background:transparent; color:var(--green); cursor:pointer; font:600 14px 'Space Grotesk'; padding:0; white-space:nowrap; }
.court .inline-action { color:var(--coral); margin-left:8px; }
.waiting-panel .inline-action.light { color:var(--lime); }
.waiting-panel li { flex-wrap:wrap; }
/* The divs toggle carries the same weight as the row actions, so it matches
   their 14px rather than the 12px it inherited when it sat below the list. */
.toggle-row { display:flex; align-items:center; gap:10px; margin:0 0 14px; color:#f7f6ed; font:14px 'DM Mono'; text-transform:none; cursor:pointer; }
.toggle-row input { min-height:16px; width:16px; accent-color:var(--lime); cursor:pointer; }
/* Waiting queue rows are split into two lines — name + div on the first,
   games / wait / Break on the second — so player names keep the full width
   of the narrow panel instead of being squeezed against the meta text.
   Names only ellipsize when they are genuinely longer than the row. */
.waiting-panel li { align-items:baseline; }
.queue-body { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:5px; }
.queue-identity { display:flex; align-items:baseline; gap:10px; min-width:0; }
.queue-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.waiting-panel .queue-identity small { flex:0 0 auto; color:#9caaa2; }
.queue-meta { display:flex; align-items:baseline; gap:10px; }
.queue-meta .games-played { margin-left:0; }
.queue-meta .wait-time { margin-left:auto; }


.auth-screen { min-height:100vh; display:grid; place-items:center; padding:24px; }
.auth-card { width:min(430px,100%); background:var(--panel); border:1px solid var(--line); padding:38px; box-shadow:0 18px 55px -30px rgba(24,34,30,.45); }
.auth-card h1 { font-size:clamp(34px,6vw,54px); }
.login-form { display:flex; flex-direction:column; gap:9px; margin-top:28px; }
.login-form #organizer-login-field { display:flex; flex-direction:column; gap:9px; }
.login-form #organizer-login-field[hidden] { display:none; }
.login-form label { color:var(--muted); font:11px 'DM Mono',monospace; letter-spacing:.8px; text-transform:uppercase; }
.login-form input,.login-form select { width:100%; border:1px solid var(--line); background:var(--paper); color:var(--ink); padding:13px 14px; font:16px 'Space Grotesk',sans-serif; }
.login-form input:focus,.login-form select:focus { outline:2px solid var(--green); outline-offset:1px; border-color:var(--green); }
.login-form .primary-button { margin-top:12px; }
.login-error { color:var(--coral); font:12px 'DM Mono',monospace; margin:2px 0 0; }
.nav-logout { padding:8px 12px; margin-left:auto; }
body.authenticated .auth-screen { display:none; }
body:not(.authenticated) .shell { display:none; }
.player-screen { max-width:1600px; margin:0 auto; padding:36px 5vw 60px; }
.player-header { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:32px; }
.player-header h1 { font-size:clamp(34px,6vw,54px); }
.player-session-label { display:block; color:var(--muted); font:11px 'DM Mono',monospace; letter-spacing:.8px; text-transform:uppercase; margin-bottom:8px; }
.player-session-select { width:min(560px,100%); border:1px solid var(--line); background:var(--panel); color:var(--ink); padding:13px 14px; font:16px 'Space Grotesk',sans-serif; }
.player-allocation-status { color:var(--muted); font:12px 'DM Mono',monospace; margin:24px 0 16px; }
.player-court { min-height:0; }
.player-court ul { padding-top:16px; }
.player-court li { padding:5px 0 5px 10px; }
.player-court li.team-a { border-left:3px solid var(--green); }
.player-court li.team-b { border-left:3px solid var(--coral); }
body.player-authenticated .shell { display:none; }
body.player-authenticated .player-screen { display:block; }

@media(max-width:570px) {
  .player-screen { padding:25px 18px 40px; }
  .player-header { align-items:flex-start; }
}

/* Announce mode: the room-facing board. It reuses the main board's .court cards
   four to a row and shows nothing else, so names stay as big and as readable as
   they are in the app. The colour/margin resets undo the old lime-on-dark
   treatment that would otherwise wash out these light cards. */
.announce { display:block; overflow:auto; text-align:left; color:var(--ink); padding:28px 3vw 34px; }
.announce .courts { width:100%; max-width:1680px; margin:0 auto; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.announce .court { min-height:0; padding:20px 22px 24px; }
.announce .court-number strong { font-size:clamp(22px,1.7vw,30px); }
.announce .court li { font-size:clamp(19px,1.5vw,27px); line-height:1.6; }
/* A projected name must never be clipped, so wrap instead of the app's ellipsis. */
.announce .court li > span:first-child { white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; }
.announce .court .format { color:var(--muted); margin-top:18px; font-size:clamp(11px,0.85vw,14px); }
@media(max-width:1200px) { .announce .courts { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:640px) { .announce { padding:16px 14px 22px; } .announce .courts { grid-template-columns:minmax(0,1fr); gap:12px; } }

/* Round timer: the 15-minute round clock under the round number. It is read
   from across the hall, so the clock is large and tabular (digits never jitter
   as they change), turns coral when the round is up, and pulses until the next
   round starts. */
.round-timer { display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
.timer-duration { display:flex; align-items:center; gap:6px; color:var(--muted); font:11px 'DM Mono',monospace; text-transform:uppercase; }
.timer-duration input { width:64px; min-height:32px; padding:4px 6px; }
.timer-duration input:disabled { opacity:.65; }
.round-timer-clock { font:600 26px 'DM Mono',monospace; letter-spacing:1px; color:var(--green); font-variant-numeric:tabular-nums; }
.round-timer.is-running .round-timer-clock { color:var(--ink); }
.round-timer.is-finished .round-timer-clock { color:var(--coral); animation:round-timer-pulse 1.1s ease-in-out infinite; }
.round-timer .timer-button { padding:6px 10px; font-size:14px; white-space:nowrap; }
@keyframes round-timer-pulse { 0%,100% { opacity:1; } 50% { opacity:.3; } }
@media(prefers-reduced-motion:reduce) { .round-timer.is-finished .round-timer-clock { animation:none; } }
@media(max-width:900px) { .round-timer { justify-content:flex-start; } }
/* Screen-reader-only text: used for the timer status announcements. */
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }