:root{
    --ink:#111214;
    --paper:#faf9f1;
    --line:#e5e2d3;
    --gray-bg:#eeebdd;
    --yellow:#f4e04d;
    --orange:#f6a13a;
    --green:#6e8c1a;
    --lime:#afc821;
    --olive:#9b9247;
    --red-text:#c0392b;
    --muted:#6b6b6f;
    --blue:#2e5fae;
  }
  *{box-sizing:border-box;}
  html{
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
    overscroll-behavior-y:none;
    /* App-like touch handling: no double-tap-to-zoom, and no 300ms delay
       before a tap registers. Panning and scrolling are unaffected. */
    touch-action:manipulation;
  }
  body{
    /* Stops the iOS callout/selection UI appearing on a long-press of chrome.
       Real content (tables, names, scores) opts back in below. */
    -webkit-touch-callout:none;
    -webkit-tap-highlight-color:transparent;
  }
  input, textarea, select, table, .coach-p, .standings-footnote, .empty-note{
    -webkit-user-select:text; user-select:text; -webkit-touch-callout:default;
  }
  body{
    margin:0;
    background:#f0efe3;
    font-family:'Helvetica Neue',Arial,sans-serif;
    color:var(--ink);
    padding:24px;
    padding-top:calc(24px + env(safe-area-inset-top));
    padding-bottom:calc(24px + env(safe-area-inset-bottom));
    padding-left:calc(24px + env(safe-area-inset-left));
    padding-right:calc(24px + env(safe-area-inset-right));
    /* Kills the browser's rubber-band bounce / pull-to-refresh gesture when
       installed as a standalone PWA — the single biggest "this is a website
       in a browser" tell on mobile. */
    overscroll-behavior-y:none;
  }
  .sheet{ max-width:1320px; margin:0 auto; }

  /* Form fields render below 16px on phones for compact tables/score
     grids, which makes iOS Safari auto-zoom the whole page on focus.
     Bumping only the focused size to 16px avoids that jump without
     changing the resting layout the tables were tuned for. */
  @media (max-width:600px){
    input:focus, select:focus, textarea:focus{ font-size:1rem; }
  }

  .panel{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:8px;
    padding:20px 24px;
    margin-bottom:20px;
  }
  @media (max-width: 480px){
    body{ padding:10px; }
    .panel{ padding:14px 12px; border-radius:6px; }
  }
  .panel h2{
    font-size:0.8125rem;
    text-transform:uppercase;
    letter-spacing:0.6px;
    margin:0 0 14px;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
  }
  .panel h2 .arrow{ color:var(--muted); font-size:0.6875rem; }
  .format-toggle-btn{
    border:1.5px solid var(--line); background:#fff; color:var(--muted);
    font-size:0.625rem; font-weight:800; letter-spacing:0.4px; text-transform:uppercase;
    padding:4px 9px; border-radius:4px; cursor:pointer;
  }
  .format-toggle-btn.active{ background:var(--lime); color:var(--ink); border-color:var(--ink); }

  /* CONFIG PANEL */
  .config-row{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }
  .preset-btn{
    border:1.5px solid var(--ink);
    background:#fff;
    color:var(--ink);
    font-weight:800;
    font-size:0.8125rem;
    padding:9px 16px;
    border-radius:6px;
    cursor:pointer;
  }
  .preset-btn.active{ background:var(--lime); color:var(--ink); border-color:var(--ink); }
  .config-field{
    display:flex; align-items:center; gap:8px;
    font-size:0.75rem; font-weight:700; color:var(--muted);
  }
  .config-field select{
    padding:8px 10px; border:1.5px solid var(--ink); border-radius:6px;
    font-weight:800; font-size:0.8125rem; color:var(--ink); background:#fff; cursor:pointer;
  }
  .rounds-field{
    display:flex; align-items:center; gap:8px; margin-left:8px;
    font-size:0.75rem; font-weight:700; color:var(--muted);
  }
  .rounds-field input{
    width:56px; padding:7px; border:1px solid var(--line); border-radius:5px; font-weight:800; text-align:center;
  }
  .config-note{ font-size:0.71875rem; color:var(--muted); margin:10px 0 16px; line-height:1.5; }

  /* PLAYERS PANEL */
  .players-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:10px;
  }
  .player-field label{
    display:block; font-size:0.625rem; color:var(--muted); font-weight:700;
    text-transform:uppercase; margin-bottom:3px;
  }
  .player-field input{
    width:100%; padding:7px 9px; border:1px solid var(--line); border-radius:4px;
    font-size:0.875rem; font-weight:700; color:var(--ink);
  }
  .player-field.teammate{ padding:6px; border-radius:6px; }
  .player-field.teammate.team-parity-0{ background:rgba(175,200,33,0.12); }
  .player-field.teammate.team-parity-1{ background:rgba(46,95,174,0.10); }
  .player-linked-badge{ display:block; font-size:0.625rem; font-weight:800; color:var(--green); margin-top:3px; }
  /* Linked slots (member OR guest) are green; only an unlinked slot is grey. */
  .slot-code-btn{
    display:inline-block; margin-top:3px; margin-left:8px; cursor:pointer;
    border:1px solid var(--line); background:#fff; color:var(--green);
    font-size:0.5625rem; font-weight:800; letter-spacing:0.4px; text-transform:uppercase;
    padding:1px 7px; border-radius:999px;
  }
  .slot-code-btn:hover{ background:var(--lime); border-color:var(--ink); color:var(--ink); }
  .slot-remove-btn{
    display:inline-block; margin-top:3px; margin-left:8px; cursor:pointer;
    border:1px solid var(--line); background:#fff; color:var(--red-text);
    font-size:0.5625rem; font-weight:800; letter-spacing:0.4px; text-transform:uppercase;
    padding:1px 7px; border-radius:999px;
  }
  .slot-remove-btn:hover{ background:#f6ded9; border-color:var(--red-text); }
  .player-linked-badge.pending{ color:#b5651d; }
  /* Not yet confirmed. Red until the player accepts, then it reverts to ink
     like any other name - so an unanswered invite is visible at a glance. */
  .pending-name{ color:var(--red-text) !important; }
  .player-linked-badge.unlinked{ color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:0.4px; }

  /* Per-player-slot member search dropdown — replaces the old standalone
     "invite a member" search box; searching now happens right in whichever
     slot you're typing into, and links that exact slot instead of the
     first open one. */
  .player-field{ position:relative; }
  .invite-result-list{
    position:absolute; left:0; right:0; top:100%; z-index:5;
    background:#fff; border:1.5px solid var(--ink); border-top:none; border-radius:0 0 6px 6px;
    max-height:220px; overflow-y:auto;
  }
  .invite-result-row{
    display:flex; justify-content:space-between; align-items:center; gap:10px;
    padding:8px 12px; cursor:pointer; border-bottom:1px solid var(--line);
  }
  .invite-result-row:last-child{ border-bottom:none; }
  .invite-result-row:hover{ background:var(--lime); }
  .invite-result-tier{ font-size:0.625rem; font-weight:800; letter-spacing:0.4px;
    text-transform:uppercase; color:var(--green); }
  .invite-result-name{ font-weight:800; font-size:0.8125rem; }
  .invite-result-email{ font-size:0.6875rem; color:var(--muted); }
  .invite-result-empty{ padding:10px 12px; font-size:0.78125rem; color:var(--muted); font-style:italic; }

  .waiting-list-title{ font-size:0.8125rem; text-transform:uppercase; letter-spacing:0.6px; margin:0 0 8px; }
  .waiting-list-card h3{ font-size:0.6875rem; font-weight:800; text-transform:uppercase; color:var(--green); margin:0 0 10px; }
  .waiting-list-row{
    display:flex; justify-content:space-between; align-items:center;
    padding:6px 0; border-bottom:1px solid var(--line); font-size:0.8125rem; font-weight:700;
  }
  .waiting-list-row:last-child{ border-bottom:none; }
  .waiting-list-row .wl-position{ color:var(--muted); font-weight:800; margin-right:8px; }

  /* META / SESSION INFO */
  .meta-fields-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:10px;
  }
  .meta-fields-grid label{
    display:block; font-size:0.625rem; color:var(--muted); font-weight:700;
    text-transform:uppercase; margin-bottom:3px;
  }
  .meta-fields-grid input,
  .meta-fields-grid select{
    width:100%; padding:7px 9px; border:1px solid var(--line); border-radius:4px;
    font-size:0.875rem; font-weight:700; color:var(--ink); background:#fff;
  }
  .meta-fields-grid input[readonly]{ background:var(--gray-bg); color:var(--muted); cursor:default; }
  /* A single-field grid: used inside modals, where the 4-column default
     squeezes one field into a quarter of the width. */
  .meta-fields-grid.one-col{ grid-template-columns:1fr; }
  /* Modal fields match the settings cards - the roomier of the two styles,
     which is what the rest of the app's forms look like. */
  .modal-box .meta-fields-grid input, .modal-box .meta-fields-grid select,
  #request-join-overlay .meta-fields-grid input,
  #request-join-overlay .meta-fields-grid select,
  #guest-upgrade-overlay .meta-fields-grid input{
    border:1.5px solid var(--ink); border-radius:10px; padding:9px 11px; font-size:0.9375rem;
  }
  #request-join-overlay .phone-input-row select{ width:132px; }
  .meta-fields-grid textarea{
    width:100%; padding:7px 9px; border:1px solid var(--line); border-radius:4px;
    font-size:0.875rem; font-weight:700; color:var(--ink); background:#fff;
    font-family:inherit; resize:vertical;
  }
  .avatar-placeholder{
    width:72px; height:72px; border-radius:50%; background:var(--green); color:#fff;
    display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.5rem;
  }
  .day-checkbox-row{ display:flex; flex-wrap:wrap; gap:10px; font-size:0.8125rem; font-weight:700; }
  .day-checkbox-row label{ display:flex; align-items:center; gap:4px; cursor:pointer; }
  .time-range-row{ display:flex; align-items:center; gap:6px; }
  .phone-input-row{ display:flex; gap:6px; }
  .phone-input-row select{ flex:0 0 auto; width:110px; }
  .phone-input-row input{ flex:1; min-width:0; }
  .time-range-row select{ flex:1; min-width:0; }
  .time-range-sep{ font-size:0.6875rem; color:var(--muted); font-weight:700; flex-shrink:0; }

  @media (max-width: 700px){
    .meta-fields-grid{ grid-template-columns:repeat(2, 1fr); }
    .players-grid{ grid-template-columns:1fr; }
  }
  @media (max-width: 420px){
    .meta-fields-grid{ grid-template-columns:1fr; }
  }

  /* COURT NAMES */
  .court-names-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:10px;
    margin-top:14px;
  }
  @media (max-width: 700px){
    .court-names-grid{ grid-template-columns:repeat(2, 1fr); }
  }
  .court-name-field label{
    display:block; font-size:0.625rem; font-weight:800; margin-bottom:3px; text-transform:uppercase;
  }
  .court-name-field input{
    width:100%; padding:7px 9px; border:1px solid var(--line); border-radius:4px;
    font-size:0.8125rem; font-weight:700; color:var(--ink);
  }

  /* SEASON PANEL */
  .season-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
  .saved-weeks-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
  .season-name-row{ display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
  .season-name-fields{ display:flex; align-items:center; gap:10px; }
  /* Menu sits at the right-hand end of the row, away from the name field. */
  .season-name-row .tool-menu-wrap{ margin-left:auto; }
  .season-name-row label{ font-size:0.75rem; font-weight:800; text-transform:uppercase; color:var(--muted); }
  .season-name-row input{ padding:7px 10px; border:1px solid var(--line); border-radius:5px; font-weight:800; font-size:0.875rem; min-width:180px; }

  .progress-table-wrap{ overflow-x:auto; margin-top:0; }
  /* Metrics are deliberately identical to table.standings (font size, header
     size, cell padding, full width) — the two sit side by side in a
     .season-pair-row over the same player list, so equal row counts have to
     produce equal heights or the pair looks broken. Change both together. */
  table.progress-table{ width:100%; border-collapse:collapse; font-size:0.8125rem; white-space:nowrap; }
  table.progress-table th{ background:var(--ink); color:#fff; font-size:0.6875rem; text-transform:uppercase; padding:8px; text-align:center; position:sticky; top:0; }
  /* --paper, not #fff: the sticky column sits on the card's paper background,
     and white left a visible stripe down the first column. */
  table.progress-table th.name-col, table.progress-table td.name-col{ text-align:left; position:sticky; left:0; background:var(--paper); z-index:1; }
  table.progress-table th.name-col{ background:var(--ink); z-index:2; }
  table.progress-table td{ padding:7px 8px; text-align:center; border-bottom:1px solid var(--line); font-weight:600; }
  table.progress-table td.pos{ color:#2f7a1f; }
  table.progress-table td.neg{ color:var(--red-text); }
  table.progress-table td.zero{ color:var(--muted); }
  table.progress-table td.blank{ color:#ccc; }

  /* Five cards now (Champion sits with them). auto-fit wraps them rather than
     squeezing five into one row on a laptop. */
  .achievements-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:12px; margin:16px 0; }
  /* The champion is the headline of the row — marked, not just another card. */
  .achievement-card.champion-card-inline{ border-color:var(--ink); border-width:1.5px; }
  .achievement-card.champion-card-inline .a-name{ font-size:1.125rem; }
  .achievement-card .champion-score{ font-size:1rem; }
  /* Segmented control over the season views, in the same pill idiom as
     .auth-pill-toggle. inline-flex so it hugs its labels rather than spanning
     the page; wraps to a second line on a phone instead of overflowing. */
  .season-tab-bar{
    display:inline-flex; flex-wrap:wrap; gap:4px; padding:4px; max-width:100%;
    border:1.5px solid var(--ink); border-radius:999px; margin-bottom:16px;
  }
  .season-tab{
    border:none; background:transparent; color:var(--ink); cursor:pointer;
    font-weight:800; font-size:0.75rem; letter-spacing:0.3px; white-space:nowrap;
    padding:8px 16px; border-radius:999px;
  }
  .season-tab:hover{ background:var(--gray-bg); }
  .season-tab.active{ background:var(--lime); }
  /* Belt and braces over the hidden attribute: a display rule elsewhere would
     otherwise win and show every panel at once. */
  .season-tab-panel[hidden]{ display:none !important; }
  @media (max-width: 480px){
    .season-tab{ padding:8px 12px; font-size:0.6875rem; }
  }

  /* iOS zooms into any focused field whose text is below 16px. With zoom locked
     that shows as a jarring shift instead, so form text stays at 16px on phones. */
  @media (max-width: 480px){
    input, select, textarea{ font-size:16px; }
  }

  /* Pairs two peer cards across one row. auto-fit drops them back to a single
     column on a phone with no media query; min-width:0 lets each card's own
     overflow-x scroll instead of a wide table stretching the whole grid.
     align-items:stretch so two paired cards are the same height, not ragged. */
  .season-pair-row{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(420px, 1fr));
    gap:16px; align-items:stretch; margin-bottom:16px;
  }
  .season-pair-row > *{ min-width:0; margin-bottom:0; }
  .fairness-cards-row{ display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; margin:16px 0; }
  .achievement-card{ border:1px solid var(--line); border-radius:6px; padding:12px 14px; }
  .achievement-card h4{ font-size:0.65625rem; text-transform:uppercase; letter-spacing:0.4px; color:var(--green); margin:0 0 8px; }
  .achievement-card .a-name{ font-size:0.9375rem; font-weight:900; }
  .achievement-card .a-detail{ font-size:0.71875rem; color:var(--muted); margin-top:3px; }
  .fairness-pair-list{ list-style:none; margin:0; padding:0; font-size:0.71875rem; color:var(--muted); line-height:1.7; }

  /* Deliberately left at table.standings' own size/padding so this reads as
     the same table as Season Fairness sitting beside it — only the cell
     alignment and nowrap differ, which the grid of numbers needs. */
  .partner-matrix th, .partner-matrix td{ padding:7px 8px; text-align:center; white-space:nowrap; }
  /* Row labels are <th>, which table.standings paints white-on-ink for the
     header row — override both here so they stay readable on the paper
     background of the body rows. */
  .partner-matrix .pm-rowname{
    text-align:left; font-weight:700; position:sticky; left:0;
    background:var(--paper); color:var(--ink); border-bottom:1px solid var(--line);
    /* These are full player names, not a column heading — table.standings th
       uppercases every th, which turned 'Dan M' into 'DAN M'. Names render as
       stored, matching the NAME column in Season Fairness next to it. The
       initials in the column headers stay uppercase. */
    text-transform:none;
  }
  .partner-matrix .pm-self{ color:var(--line); }
  .partner-matrix .pm-none{ color:var(--muted); opacity:0.5; }
  /* Partnered is the figure the fairness view exists to police, so it leads
     in green; against is the context beside it, in ink. 2+ stands out in
     each — red for a repeated partner, amber for a repeated opponent.
     Amber is #b5651d (4.1:1 on paper), not --orange, which reads 2.0:1. */
  .partner-matrix .pm-p{ color:var(--green); font-weight:800; }
  .partner-matrix .pm-o{ color:var(--ink); font-weight:700; }
  .partner-matrix .pm-p.pm-many{ color:var(--red-text); font-weight:900; }
  .partner-matrix .pm-o.pm-many-o{ color:#b5651d; font-weight:900; }
  .partner-matrix .pm-z{ color:var(--muted); opacity:0.5; font-weight:600; }
  .partner-matrix .pm-sep{ color:var(--muted); opacity:0.55; margin:0 2px; }
  /* Two figures per cell now — trim the side padding so a 16-player grid
     doesn't get much wider than the single-figure version was. */
  .partner-matrix td{ padding-left:6px; padding-right:6px; }
  /* Same ink as every other table cell in this row of cards. Zeros used to be
     muted at 0.45 opacity, which made the whole card look washed out next to
     Season Fairness. 2+ keeps the red — that's the actual signal (an uneven
     rotation), not decoration. */
  .partner-matrix .pm-zero{ color:var(--ink); }
  .partner-matrix .pm-one{ color:var(--ink); }
  .partner-matrix .pm-many{ color:var(--red-text); font-weight:900; }
  /* Same green the +/- column uses for a positive figure — a win rate is the
     other "how are they doing" number in this table. */
  table.standings td.winpct{ color:var(--green); font-weight:800; }
  /* Real is the raw figure — ink, so the adjusted column stays the one the
     eye lands on, as in the reference layout. */
  table.standings td.winpct-real{ color:var(--ink); font-weight:800; }
  /* ---- MY STATS (profile dashboard) ---- */
  #profile-stats .card{ margin-bottom:16px; }
  .card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }

  .profile-hero-card .ph-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .profile-hero-card .ph-name{ font-size:1.75rem; font-weight:900; line-height:1.1; }
  .profile-hero-card .ph-badge{
    padding:4px 12px; border:1.5px solid var(--ink); border-radius:999px;
    font-size:0.6875rem; font-weight:800; text-transform:uppercase; letter-spacing:0.4px;
  }
  .profile-hero-card .ph-sub{ font-size:0.8125rem; color:var(--muted); margin:6px 0 2px; font-weight:700; }
  .profile-hero-card .ph-range{ font-size:0.6875rem; color:var(--muted); font-weight:700;
    text-transform:uppercase; letter-spacing:0.4px; margin-bottom:16px; }

  /* auto-fit so four tiles reflow to two rows on a phone with no media query */
  .stat-tile-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(148px, 1fr)); gap:12px; }
  .stat-tile{ border:1px solid var(--line); border-radius:8px; padding:14px 16px; min-width:0; }
  .stat-tile .st-label{ font-size:0.625rem; font-weight:800; letter-spacing:0.5px; text-transform:uppercase; color:var(--green); }
  .stat-tile .st-value{ font-size:1.875rem; font-weight:900; line-height:1.1; margin:6px 0 2px; }
  .stat-tile .st-sub{ font-size:0.6875rem; color:var(--muted); font-weight:700; }

  .coach-card{ border-color:var(--ink); }
  .coach-spark{ color:var(--green); margin-right:4px; }
  .coach-p{ font-size:0.875rem; line-height:1.65; margin:0 0 12px; }
  .coach-p:last-of-type{ margin-bottom:8px; }

  .stat-card-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:16px; align-items:stretch; }
  .stat-card-row > .card{ margin-bottom:0; }
  .stat-big.pos{ color:var(--green); }
  .stat-big.neg{ color:var(--red-text); }
  .ctx-row{ display:flex; gap:10px; justify-content:space-between; align-items:baseline; padding:5px 0; border-top:1px solid var(--line); }
  .ctx-k{ font-size:0.6875rem; color:var(--muted); font-weight:700; flex-shrink:0; }
  .ctx-v{ font-size:0.75rem; font-weight:800; text-align:right; overflow-wrap:anywhere; }

  /* Chart is inline SVG: no build step, and no CDN dependency at the club. */
  .chart{ width:100%; height:auto; display:block; margin-top:8px; }
  .chart-line{ fill:none; stroke:var(--green); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; }
  .chart-dot{ fill:var(--green); }
  .chart-grid{ stroke:var(--line); stroke-width:1; stroke-dasharray:4 4; }
  .chart-axis{ font-size:11px; fill:var(--muted); font-weight:700; }

  .scale-toggle{ display:inline-flex; gap:3px; padding:3px; border:1.5px solid var(--ink); border-radius:999px; flex-shrink:0; }
  .scale-btn{
    border:none; background:transparent; cursor:pointer; color:var(--ink);
    font-size:0.6875rem; font-weight:800; padding:5px 12px; border-radius:999px;
    text-transform:none; letter-spacing:normal;
  }
  .scale-btn.active{ background:var(--lime); }

  .heat-head{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:0.8125rem; margin:10px 0 0; }
  .heat-bar{
    position:relative; height:14px; border-radius:999px; margin:26px 0 10px;
    background:linear-gradient(90deg, #b8b8c4 0%, #b5651d 25%, #e8d27a 50%, var(--lime) 75%, var(--green) 100%);
  }
  .heat-marker{ position:absolute; top:-6px; transform:translateX(-50%); }
  .heat-marker::before{
    content:''; display:block; width:26px; height:26px; border-radius:50%;
    background:var(--paper); border:3px solid var(--ink); box-sizing:border-box;
  }
  .heat-marker span{
    position:absolute; top:28px; left:50%; transform:translateX(-50%);
    background:var(--ink); color:#fff; padding:2px 8px; border-radius:999px;
    font-size:0.625rem; font-weight:800; white-space:nowrap;
  }
  .tier-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(104px, 1fr)); gap:8px; margin-top:28px; }
  .tier{ border:1.5px solid var(--line); border-radius:8px; padding:8px 6px; text-align:center; display:flex; flex-direction:column; gap:2px; min-width:0; }
  .tier b{ font-size:0.75rem; font-weight:800; }
  .tier span{ font-size:0.625rem; color:var(--muted); font-weight:700; }
  .tier.active{ border-color:var(--ink); background:var(--lime); }
  .tier.active span{ color:var(--ink); }

  .ineligible-badge{ color:var(--muted); cursor:help; font-weight:400; }

  .past-seasons-block{ margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }
  .past-season-row{ display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); }
  .past-season-row .ps-name{ font-weight:800; }
  .past-season-row .ps-sub{ font-size:0.71875rem; color:var(--muted); }

  @media (max-width: 900px){
    .achievements-row{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width: 480px){
    .achievements-row{ grid-template-columns:1fr; }
  }
  .sw-game{ display:block; font-size:0.625rem; font-weight:800; letter-spacing:0.5px;
    text-transform:uppercase; color:var(--green); margin-bottom:2px; }
  .saved-week-row{
    display:flex; align-items:center; justify-content:space-between;
    border:1px solid var(--line); border-radius:6px; padding:10px 14px;
    font-size:0.8125rem;
  }
  .saved-week-row .sw-info{ font-weight:700; }
  .saved-week-row .sw-info .sw-sub{ font-weight:500; color:var(--muted); font-size:0.71875rem; margin-top:2px; }
  .btn.danger{ background:#fff; color:var(--red-text); border-color:var(--red-text); font-size:0.6875rem; padding:6px 12px; }
  .empty-note{ font-size:0.78125rem; color:var(--muted); font-style:italic; }
  #importFileInput{ display:none; }

  /* ROUNDS PANEL */
  .rounds-grid{
    display:grid;
    grid-template-columns: 1fr;
    gap:16px;
  }
  .round-day-header{
    grid-column: 1 / -1;
    font-weight:900; font-size:0.8125rem; letter-spacing:0.5px; text-transform:uppercase;
    color:var(--ink); background:var(--gray-bg); padding:8px 12px; border-radius:6px;
    margin-top:4px;
  }
  .round-day-header:first-child{ margin-top:0; }
  .round-card{
    border:1px solid var(--line);
    border-radius:6px;
    padding:12px 14px;
  }
  .round-card .rhead{
    font-weight:900; font-size:0.875rem; margin-bottom:10px; padding-bottom:8px;
    border-bottom:1px solid var(--line);
  }
  .round-card .rhead .rn{ color:var(--green); }
  /* One match = a score box, the bordered block, a score box. The boxes sit
     OUTSIDE the border so the block holds only the fixture (court + players)
     and the inputs read as separate things to fill in. */
  .match-line{
    display:flex; align-items:stretch; gap:8px; margin-bottom:6px;
  }
  /* The names block — court cube and score boxes are its siblings now, each
     its own bordered box in .match-line. */
  .match-block{
    flex:1 1 auto; min-width:0;
    border:2px solid var(--ink); border-radius:6px; overflow:hidden;
    display:flex; align-items:stretch;
  }
  .round-byes{
    font-size:0.65625rem; color:var(--muted); margin-top:6px; padding-top:8px;
    border-top:1px dashed var(--line);
  }
  /* Dark text, exactly as .btn does on this same --lime: white reads 1.9:1
     here and is illegible, ink reads 9.9:1.
     Fixed basis + column flex, so 'COURT 1' stacks as COURT over 1 and a
     renamed court ('Centre Court') wraps inside the block instead of widening
     it — every match row keeps the same left edge. */
  .court-banner{
    flex:0 0 42px; align-self:stretch;
    border:2px solid var(--ink); border-radius:6px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    color:var(--ink); font-weight:900; font-size:0.6875rem; letter-spacing:0.3px;
    text-transform:uppercase; text-align:center; line-height:1.2; padding:4px;
    overflow-wrap:anywhere;
  }
  .court-banner .ct-word{ font-size:0.5625rem; letter-spacing:0.6px; }
  /* No font-size here — the number sits at the block's own size, as it was
     before it was briefly enlarged. It stays on its own line under COURT. */
  .court-banner .ct-num{ line-height:1.1; }
  /* Sole occupant of the cube - sized to read at a glance from courtside. */
  .court-banner .ct-num.only{ font-size:1.5rem; line-height:1; }
  .match-row{
    display:grid;
    grid-template-columns: 1fr auto 1fr; /* the score boxes left the grid */
    align-items:center;
    gap:8px;
    padding:3px 10px;
    flex:1 1 auto; min-width:0; /* the match takes whatever the tag leaves */
  }
  /* One line per pair ("Jo & Dan M"), not two stacked names — so a match
     row is a single line tall. Wraps rather than overflowing when two long
     names meet a narrow screen. */
  .pair-stack{
    font-weight:900; font-size:0.9375rem; line-height:1.25; min-width:0;
    text-align:center; overflow-wrap:anywhere;
  }
  .vs{ font-weight:900; font-size:1.25rem; text-transform:uppercase; text-align:center; }
  .score-box{
    /* Fixed width AND height (not width:100% of the grid track) so it's a
       true square regardless of a number input's built-in min-content width. */
    flex:0 0 34px; align-self:center;
    width:34px; height:34px; text-align:center; padding:0; border:2px solid var(--ink);
    border-radius:6px; font-weight:900; font-size:1rem; -moz-appearance:textfield;
  }
  /* Stand-in used only while exporting the score sheet as an image —
     html2canvas renders real <input> values as empty boxes. */
  .score-box-static{ display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; }
  /* Extra room on a real screen (mouse/trackpad, not a fat finger) means
     these can run thinner still than the already-tightened base above —
     tap-target size only matters on touch. */
  @media (min-width: 700px){
    .court-banner{ flex-basis:46px; font-size:0.75rem; }
    .match-row{ padding:2px 10px; }
    .score-box{ flex-basis:30px; width:30px; height:30px; font-size:0.9375rem; }
  }
  .score-box::-webkit-outer-spin-button,
  .score-box::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

  /* REPORT — logo big on top, session info stacked underneath (not side by
     side), matching the rest of the app's centered hero treatment. */
  .header{ margin-bottom:18px; }
  .logo-title{ display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; }
  .logo{ width:100%; max-width:280px; height:auto; }
  .logo img{ width:100%; height:auto; display:block; object-fit:contain; }
  .title-block{ margin-left:0; }
  /* The game's own name is the biggest thing on the header - it's what the
     organizer typed, and what everyone in the room calls this game. */
  .season-heading{ margin-bottom:14px; }
  .season-heading-sub{ font-size:0.75rem; font-weight:700; color:var(--muted);
    text-transform:uppercase; letter-spacing:0.4px; margin-top:2px; }
  .game-title{ font-size:1.5rem; font-weight:900; letter-spacing:0.5px; text-transform:uppercase; line-height:1.15; margin-bottom:4px; }
  @media (max-width: 480px){ .game-title{ font-size:1.25rem; } }
  .title-block h1{ font-size:0.8125rem; font-weight:800; margin:0; text-transform:uppercase; letter-spacing:0.6px;}
  .meta-row{ font-size:0.6875rem; font-weight:700; color:var(--muted); text-transform:uppercase; margin-top:6px; }
  /* The format leads the row and carries the brand colour - it's the one
     thing there that says what you're actually playing. */
  #game-format-name{ color:var(--green); font-weight:800; }
  .meta-row span:not(:last-child)::after{ content:"•"; margin:0 10px; color:#c9c9c9; }

  hr.rule{ border:none; border-top:2px solid var(--ink); margin:0 0 20px; }

  .summary-row{
    display:grid;
    grid-template-columns: 1.3fr 1.3fr 1fr 1fr 1fr;
    gap:14px;
    margin-bottom:24px;
  }
  .card{ border:1px solid var(--line); border-radius:6px; padding:14px 16px; }
  .card h3{ font-size:0.6875rem; font-weight:800; text-transform:uppercase; color:var(--green); margin:0 0 10px; }
  .champion-name{ font-size:1.5rem; font-weight:900; margin-right:8px; }
  .champion-score{ font-size:1.25rem; font-weight:900; color:var(--green); }
  .champion-sub{ font-size:0.75rem; color:var(--muted); margin-top:8px; line-height:1.5; }
  .champion-sub strong{ color:var(--ink); }

  .podium-card-row{ display:flex; gap:8px; }
  .pcard{ flex:1; text-align:center; padding:10px 4px; border-radius:4px; }
  .pcard .r{ font-size:0.625rem; font-weight:800; }
  .pcard .n{ font-size:0.8125rem; font-weight:800; margin:4px 0 2px; }
  .pcard .s{ font-size:0.9375rem; font-weight:900; }
  .pcard.g2{ background:var(--gray-bg); }
  .pcard.g1{ background:var(--yellow); border:2px solid var(--ink); }
  .pcard.g3{ background:var(--orange); }

  .stat-big{ font-size:1.125rem; font-weight:900; margin-bottom:6px; }
  .stat-sub{ font-size:0.75rem; color:var(--muted); }
  .stat-name-line{ font-size:0.9375rem; font-weight:800; }
  .stat-name-line .num{ font-weight:900; margin-left:4px; }

  .table-scroll{ overflow-x:auto; }
  table.standings{ width:100%; border-collapse:collapse; font-size:0.8125rem; }
  table.standings th{
    text-align:left; font-size:0.6875rem; text-transform:uppercase; background:var(--ink); color:#fff; padding:8px;
  }
  table.standings td{ padding:7px 8px; border-bottom:1px solid var(--line); font-weight:600; }
  table.standings tr.rank-1 td{ background:var(--yellow); font-weight:800; }
  table.standings tr.rank-2 td{ background:var(--gray-bg); font-weight:800; }
  table.standings tr.rank-3 td{ background:var(--orange); font-weight:800; }
  table.standings td.win{ color:#2f7a1f; font-weight:800; }
  table.standings td.loss{ color:var(--red-text); font-weight:800; }
  table.standings td.tied{ color:var(--muted); font-weight:800; }
  table.standings td.plusminus{ font-weight:900; }
  table.standings th.num, table.standings td.num{ text-align:center; }
  .standings-footnote{ font-size:0.6875rem; color:var(--muted); margin-top:12px; line-height:1.7; }

  /* Nav buttons left, Game tools right, pushed apart by .toolbar-spacer. */
  .toolbar{ display:flex; align-items:center; justify-content:flex-start; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
  .toolbar-spacer{ margin-left:auto; }
  /* Inline in the toolbar rather than a block above the scores. Wraps to its
     own line on a phone, since .toolbar is flex-wrap:wrap. */
  #claim-name-row{
    align-items:center; gap:8px; flex-wrap:wrap;
    padding:5px 10px; border:1px solid var(--green); border-radius:999px;
    background:#f2f6e4; font-size:0.75rem; font-weight:700; color:var(--ink);
  }
  /* Just the button: no pill around it. */
  #claim-name-row.bare{ border:none; background:transparent; padding:0; }
  #claim-name-row select{ font-size:0.75rem; padding:3px 6px; }
  #claim-name-row .btn{ padding:5px 11px; font-size:0.6875rem; }
  .tool-menu-wrap{ position:relative; }
  .tool-menu{
    position:absolute; right:0; top:calc(100% + 6px); z-index:55; min-width:220px;
    background:var(--paper); border:1.5px solid var(--ink); border-radius:10px;
    padding:6px; box-shadow:0 10px 26px rgba(0,0,0,0.16);
  }
  .tool-menu[hidden]{ display:none !important; }
  /* Set by placeDropdown() when the default right-alignment would push the
     menu off the left edge. */
  .tool-menu.align-left, .account-menu.align-left{ left:0; right:auto; }
  .tool-menu, .account-menu{ max-width:calc(100vw - 16px); }
  /* The buttons keep .btn for their ids' sake but read as menu rows here. */
  .tool-menu .btn{
    display:block; width:100%; text-align:left; border:none; background:transparent;
    border-radius:7px; padding:9px 12px; font-size:0.8125rem; font-weight:700;
  }
  .tool-menu .btn:hover{ background:var(--lime); }
  .tool-menu .btn.danger-item{ color:var(--red-text); }
  .tool-menu .btn.danger-item:hover{ background:#f6ded9; }
  /* Reset is destructive - separate it from the routine actions. */
  .tool-menu .btn.danger-item{ margin-top:5px; border-top:1px solid var(--line); border-radius:0 0 7px 7px; padding-top:11px; }
  .btn{
    border:1px solid var(--ink); background:var(--lime); color:var(--ink); font-weight:800;
    font-size:0.75rem; padding:8px 14px; border-radius:5px; cursor:pointer;
  }
  .btn.secondary{ background:#fff; color:var(--ink); }
  .btn:disabled{ opacity:0.5; cursor:not-allowed; }
  .btn.danger{ background:var(--red-text); color:#fff; border-color:var(--red-text); }
  .btn.danger:hover{ filter:brightness(0.92); }

  @media (max-width: 1000px){
    .players-grid{ grid-template-columns:repeat(2,1fr); }
    .summary-row{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width: 480px){
    .summary-row{ grid-template-columns:1fr; }
  }

  /* Enter Scores + the Report below it (stats cards, standings) stay a
     single stacked column on anything narrower than this — phones and
     tablets get the exact same layout as before. Only on a genuinely wide
     desktop window do they sit side by side, 50/50. */
  @media (min-width: 1300px){
    .play-columns{ display:flex; align-items:flex-start; gap:24px; }
    .play-columns > #rounds-panel,
    .play-columns > #report-panel{ flex:1 1 50%; min-width:0; }
    /* The 5-card stat row doesn't know it's been squeezed into half the
       viewport (media queries read viewport width, not column width) —
       without this it would try to cram 5 cards into ~600px. */
    .play-columns #report-panel .summary-row{ grid-template-columns:1fr 1fr; }
  }

  /* LADDER MODE */
  .ladder-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  .ladder-group{ border:1px solid var(--line); border-radius:8px; padding:16px; }
  .ladder-group h3{ font-size:0.875rem; margin:0 0 4px; }
  .ladder-group h3 input{
    font-size:0.9375rem; font-weight:900; border:none; border-bottom:2px dashed var(--line);
    padding:2px 0; width:100%; background:transparent;
  }
  .ladder-players-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0; }
  .ladder-players-grid input{
    width:100%; padding:6px 8px; border:1px solid var(--line); border-radius:4px;
    font-size:0.8125rem; font-weight:700;
  }
  .ladder-rounds{ display:flex; flex-direction:column; gap:8px; margin:14px 0; }
  .ladder-round-card{ border:1px solid var(--line); border-radius:6px; padding:8px 10px; }
  .ladder-round-card .lrhead{ font-weight:800; font-size:0.75rem; margin-bottom:6px; color:var(--green); }
  .ladder-match-row{
    display:grid; grid-template-columns:1fr 30px 8px 30px 1fr; align-items:center; gap:4px;
    font-size:0.6875rem; font-weight:700; margin-bottom:4px;
  }
  .ladder-match-row input{
    width:100%; text-align:center; padding:4px 2px; border:1px solid var(--line); border-radius:4px; font-weight:800;
  }
  .ladder-standings{ width:100%; border-collapse:collapse; font-size:0.75rem; margin-top:8px; }
  .ladder-standings th{ background:var(--ink); color:#fff; font-size:0.625rem; text-transform:uppercase; padding:5px 6px; text-align:left; }
  .ladder-standings td{ padding:5px 6px; border-bottom:1px solid var(--line); font-weight:600; }
  .ladder-standings th.num, .ladder-standings td.num{ text-align:center; }
  .ladder-standings tr.top-half td{ background:#f1f6d9; }
  .ladder-standings tr.bottom-half td{ background:#fbeeee; }

  @media (max-width: 900px){
    .ladder-wrap{ grid-template-columns:1fr; }
  }

  /* CHAMPION ROUND */
  .champion-groups-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:10px; }
  .champion-group-card{ border:2px solid var(--ink); border-radius:8px; padding:14px 16px; }
  .champion-group-card h4{ margin:0 0 10px; font-size:0.8125rem; text-transform:uppercase; letter-spacing:0.4px; }
  .champion-rank-list{ font-size:0.6875rem; color:var(--muted); margin-bottom:10px; line-height:1.6; }
  .champion-match-row{
    display:grid; grid-template-columns:1fr 34px 10px 34px 1fr; align-items:center; gap:6px;
    font-size:0.78125rem; font-weight:700; margin-bottom:8px;
  }
  .champion-match-row input{
    width:100%; text-align:center; padding:5px 2px; border:1px solid var(--line); border-radius:4px; font-weight:800;
  }
  .champion-winner{
    font-size:0.75rem; font-weight:800; padding:6px 8px; border-radius:5px; background:var(--yellow);
    text-align:center;
  }
  .champion-winner.pending{ background:var(--gray-bg); color:var(--muted); font-weight:600; }

  @media (max-width: 900px){
    .champion-groups-grid{ grid-template-columns:1fr; }
  }

  /* PRINT SCORE SHEET */
  #print-sheet-panel{ display:none; }
  #print-sheet{ display:none; }
  .print-game-name{ font-size:1.25rem; font-weight:900; text-transform:uppercase; letter-spacing:0.5px; }
  .print-season-line{ font-size:0.75rem; font-weight:700; color:#444; margin-top:2px; }
  .print-header{ text-align:center; margin-bottom:6px; }
  .print-header h1{ font-size:1.5rem; margin:0 0 4px; text-transform:uppercase; letter-spacing:0.5px; }
  .print-header .print-meta{ font-size:0.75rem; color:#333; text-transform:uppercase; letter-spacing:0.5px; }
  .print-header .print-meta span:not(:last-child)::after{ content:"-"; margin:0 8px; color:#999; }
  .print-players{ font-size:0.6875rem; margin:8px 0 14px; color:#333; }
  .print-players b{ font-size:0.6875rem; text-transform:uppercase; }

  /* Print round cards — mirrors the on-screen "Enter Scores" card layout,
     sized up for courtside legibility instead of a dense packed grid. */
  .print-rounds-grid{
    display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; margin-bottom:22px;
  }
  .print-round-card{
    border:1.5px solid #000; border-radius:6px; padding:12px 14px;
    break-inside:avoid; page-break-inside:avoid;
  }
  .print-round-head{
    font-weight:900; font-size:1.125rem; color:var(--green); margin-bottom:10px;
    padding-bottom:8px; border-bottom:1.5px solid #000;
  }
  .print-match-line{
    display:flex; align-items:stretch; gap:8px; margin-bottom:8px;
  }
  .print-match-block{
    flex:1 1 auto; min-width:0;
    border:2px solid #000; border-radius:6px; overflow:hidden;
    display:flex; align-items:stretch;
  }
  .print-match-block:last-child{ margin-bottom:0; }
  .print-court-banner{
    flex:0 0 62px; align-self:stretch;
    border:2px solid #000; border-radius:6px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    color:#111214; font-weight:900; font-size:0.75rem; letter-spacing:0.4px; text-transform:uppercase;
    text-align:center; line-height:1.2; padding:4px; overflow-wrap:anywhere;
    /* .ct-word / .ct-num sizes below — same word-over-number treatment as
       the on-screen block, scaled up for paper. */
    /* Printers often skip background colors by default — force it on. */
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .print-court-banner .ct-word{ font-size:0.625rem; letter-spacing:0.6px; }
  .print-court-banner .ct-num{ line-height:1.1; }
  .print-match-row{
    display:grid; grid-template-columns: 1fr auto 1fr;
    align-items:center; gap:8px; padding:4px 10px;
    flex:1 1 auto; min-width:0;
  }
  .print-pair-stack{
    font-size:1.0625rem; font-weight:900; line-height:1.25; text-align:center;
    min-width:0; overflow-wrap:anywhere;
  }
  .print-vs{ text-align:center; font-weight:900; font-size:1.375rem; text-transform:uppercase; }
  .print-score-box{
    flex:0 0 38px; align-self:center;
    display:block; width:38px; height:38px; border:3px solid #000; border-radius:6px;
    background:#f2f2f0;
  }
  .print-round-byes{
    font-size:0.75rem; font-style:italic; color:#555; margin-top:8px;
    padding-top:8px; border-top:1px dashed #999;
  }

  .print-season-header{ display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:18px; text-align:left; }
  .print-season-header img{ width:64px; height:64px; object-fit:contain; flex-shrink:0; }
  .print-season-header h1{ margin:0; font-size:1.375rem; text-transform:uppercase; }
  .print-season-header .print-meta{ text-align:left; margin-top:4px; font-size:0.75rem; color:#333; text-transform:uppercase; letter-spacing:0.5px; }
  .print-season-header .print-meta span:not(:last-child)::after{ content:"-"; margin:0 8px; color:#999; }
  .print-season-section{ margin-bottom:24px; }

  /* GROUP PICKER / WELCOME / STEP NAV */
  .welcome-hero{ text-align:center; padding:20px 0 28px; }
  /* Grows with the viewport instead of stopping at a fixed cap — scales
     between 220px (narrow screens) and 480px (wide desktop), proportional
     to available width, rather than a single fixed size for everyone. */
  .welcome-hero .logo{ margin:0 auto 10px; width:100%; max-width:clamp(220px, 28vw, 480px); height:auto; }
  .welcome-hero .logo img{ width:100%; height:auto; display:block; object-fit:contain; }
  .welcome-hero h1{ font-size:2rem; font-weight:900; margin:0 0 4px; text-transform:uppercase; letter-spacing:-0.5px; }
  .welcome-tagline{ font-size:0.8125rem; color:var(--muted); margin:0; }
  @media (max-width: 480px){
    .welcome-hero h1{ font-size:1.5rem; }
  }

  .game-choice-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
  .game-choice-btn{
    border:1.5px solid var(--ink); background:#fff; color:var(--ink);
    border-radius:8px; padding:20px 18px; cursor:pointer; text-align:left;
    display:flex; flex-direction:column; gap:6px;
  }
  .game-choice-btn:hover{ background:var(--lime); }
  .game-choice-btn .gc-title{ font-size:1rem; font-weight:900; text-transform:uppercase; }
  .game-choice-btn .gc-desc{ font-size:0.71875rem; color:var(--muted); font-weight:500; }
  .game-choice-btn:hover .gc-desc{ color:var(--ink); }

  /* Group cards are a div (not a button) since they contain a nested Delete
     button — the open-area still behaves like the button cards above. */
  .group-card{ cursor:default; }
  .group-card:hover{ background:#fff; }
  .group-card-open{ display:flex; flex-direction:column; gap:6px; cursor:pointer; margin:-20px -18px 0; padding:20px 18px 12px; border-radius:8px 8px 0 0; }
  .group-card-open:hover{ background:var(--lime); }
  .group-card-open:hover .gc-desc{ color:var(--ink); }
  .group-card .btn.danger{ align-self:flex-start; margin-top:10px; }

  @media (max-width: 900px){ .game-choice-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width: 600px){ .game-choice-grid{ grid-template-columns:1fr; } }
  /* The join-game screen is capped to the logo's width (340px) regardless
     of viewport — a 3-column grid squeezed into that box would be cramped
     no matter the screen size, so it's forced to one column here rather
     than relying on the viewport-width media queries above. */
  .join-panel-content .game-choice-grid{ grid-template-columns:1fr; }

  /* LOG IN / SIGN UP (the unconditional first screen) */
  #auth-panel .welcome-hero{ padding:6px 0 14px; }

  /* ORGANIZER DASHBOARD (group-picker-panel) */
  .dashboard-header{ text-align:center; padding:6px 0 10px; }
  .dashboard-header .logo{ margin:0 auto 8px; width:100%; max-width:clamp(160px, 18vw, 320px); height:auto; }
  .dashboard-header .logo img{ width:100%; height:auto; display:block; object-fit:contain; }
  .dashboard-welcome{ font-size:0.875rem; font-weight:700; color:var(--muted); margin:0 0 10px; }
  /* Matches .dashboard-header .logo's width exactly, so the stats, create-game
     row, and game list below the logo never spill wider than the logo above them. */
  .dashboard-content{ max-width:clamp(160px, 18vw, 320px); margin:0 auto; }
  .dashboard-content .game-choice-grid{ grid-template-columns:1fr; }
  .dashboard-content .new-group-row input{ min-width:0; } /* .new-group-row's default 240px min-width would overflow this 220px column */
  .dashboard-stats{ grid-template-columns:repeat(2, 1fr); max-width:360px; margin:0 auto 20px; }
  .dashboard-stats .card{ text-align:center; }
  .game-card-meta{ font-size:0.6875rem; color:var(--muted); margin-top:4px; }
  .public-badge{
    display:inline-block; font-size:0.5625rem; font-weight:900; letter-spacing:0.5px;
    color:var(--ink); background:var(--lime); padding:2px 6px; border-radius:10px;
    vertical-align:middle; margin-left:6px;
  }
  .modal-overlay{
    position:fixed; inset:0; background:rgba(17,18,20,0.6);
    display:flex; align-items:center; justify-content:center;
    z-index:100; padding:20px;
  }
  .modal-box{
    background:var(--paper); border:1.5px solid var(--ink); border-radius:10px;
    max-width:640px; width:100%; max-height:85vh; overflow-y:auto;
    padding:32px 24px 24px; position:relative;
  }
  .modal-close{
    position:absolute; top:10px; right:10px; width:30px; height:30px;
    border:1.5px solid var(--ink); border-radius:50%; background:#fff;
    font-size:1.125rem; font-weight:900; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center; padding:0;
  }
  .modal-close:hover{ background:var(--lime); }

  /* BRAND INTRO (landing page manifesto) — compact: tight vertical rhythm,
     short lines folded into wrapped/bulleted runs instead of stacked <br>s. */
  .brand-intro{ max-width:580px; margin:0 auto; text-align:center; padding:0 8px; }
  .brand-kicker{
    font-size:1.125rem; font-weight:900; text-transform:uppercase; letter-spacing:0.4px;
    color:var(--green); margin:0 auto 8px; line-height:1.3;
    width:340px; max-width:100%; /* exactly matches .welcome-hero .logo's width */
  }
  .brand-lead{ font-size:0.75rem; font-weight:700; line-height:1.4; margin:0 0 14px; color:var(--muted); }
  .brand-copy{ font-size:0.84375rem; line-height:1.6; color:var(--muted); margin:0 0 16px; }

  .brand-name-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; text-align:center; margin-bottom:16px; }
  .brand-name-card{ background:var(--olive); padding:14px; }
  .brand-name-card h3{
    font-size:1.0625rem; font-weight:900; text-transform:uppercase; letter-spacing:0.4px;
    color:#fff; margin:0 0 4px;
  }
  .brand-name-card p{ font-size:0.75rem; line-height:1.5; color:#fff; margin:0; }
  @media (max-width: 480px){ .brand-name-grid{ grid-template-columns:1fr; } }

  .brand-callout{ font-size:0.8125rem; font-weight:700; line-height:1.7; margin:0 0 14px; color:var(--ink); }
  .brand-closing{
    font-size:1rem; font-weight:900; line-height:1.4; margin:0; color:var(--green);
    text-transform:uppercase; letter-spacing:0.3px;
  }

  .new-group-row{ display:flex; gap:10px; justify-content:center; margin:20px 0; flex-wrap:wrap; }
  .new-group-row input{
    padding:9px 12px; border:1.5px solid var(--ink); border-radius:6px;
    font-weight:700; font-size:0.8125rem; color:var(--ink); min-width:240px; flex:1;
  }
  @media (max-width: 480px){
    .new-group-row{ flex-direction:column; align-items:stretch; }
    .new-group-row input{ min-width:0; }
  }

  .role-choice-grid{ grid-template-columns:repeat(2, 1fr); max-width:640px; margin:0 auto; }
  @media (max-width: 600px){ .role-choice-grid{ grid-template-columns:1fr; } }

  .form-error{ color:var(--red-text); font-size:0.78125rem; font-weight:700; text-align:center; margin-top:8px; min-height:1em; }


  /* SKILL LEVEL QUIZ */
  .quiz-progress-bar{ height:6px; background:var(--gray-bg); border-radius:3px; overflow:hidden; margin:14px 0 6px; }
  .quiz-progress-fill{ height:100%; background:var(--lime); transition:width 0.2s ease; }
  .quiz-progress-label{ font-size:0.75rem; color:var(--muted); margin-bottom:22px; }
  .quiz-category{ margin:26px 0 10px; }
  .quiz-category-label{ font-size:0.6875rem; font-weight:800; text-transform:uppercase; letter-spacing:0.4px; color:var(--muted); }
  .quiz-question{ margin-bottom:18px; }
  .quiz-qtext{ font-weight:800; font-size:0.9375rem; margin-bottom:8px; }
  .quiz-answers{ display:flex; flex-direction:column; gap:6px; }
  .quiz-answer-btn{ text-align:left; width:100%; white-space:normal; line-height:1.35; }
  .quiz-answer-btn.active, .quiz-dominant-hand-btn.active{ background:var(--lime); border-color:var(--ink); }
  .auth-fields-grid{ max-width:340px; margin:0 auto; grid-template-columns:1fr; gap:12px; } /* matches .welcome-hero .logo's width */

  .group-header-bar{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
    padding:8px 4px; margin-bottom:10px; gap:8px 16px;
    font-size:0.75rem; font-weight:800; text-transform:uppercase; letter-spacing:0.4px; color:var(--muted);
  }
  .group-header-bar #group-header-name{ flex:1 1 auto; }
  .group-header-bar a, .account-bar a{ color:var(--blue); text-transform:none; letter-spacing:normal; font-weight:700; }

  .account-bar{
    display:flex; align-items:center; justify-content:flex-start; gap:10px;
    padding:0 4px 8px; font-size:0.6875rem; font-weight:700;
    text-transform:uppercase; letter-spacing:0.3px; color:var(--muted);
  }
  /* The real actions still live in these anchors (applyStepVisibility drives
     their visibility); the menu clicks through to them, so they're hidden
     rather than deleted. */
  .account-legacy-links{ display:none; }

  .jr-wa{ margin-left:8px; font-size:0.6875rem; font-weight:700; color:var(--blue); text-decoration:none; white-space:nowrap; }
  .jr-wa:hover{ text-decoration:underline; }
  .day-hint{ display:block; margin-top:4px; font-size:0.6875rem; font-weight:800;
    letter-spacing:0.4px; text-transform:uppercase; color:var(--green); }
  .viewonly-badge{
    padding:2px 9px; border-radius:999px; background:var(--gray-bg); border:1px solid var(--line);
    color:var(--muted); font-size:0.5625rem; font-weight:800; letter-spacing:0.5px;
    text-transform:uppercase; white-space:nowrap;
  }
  .account-menu-wrap{ position:relative; margin-left:auto; }
  .account-pill{
    display:flex; align-items:center; gap:8px; cursor:pointer;
    border:1.5px solid var(--ink); border-radius:999px; background:var(--paper);
    padding:4px 12px 4px 4px; color:var(--ink);
    font-size:0.75rem; font-weight:800; text-transform:none; letter-spacing:normal;
    max-width:min(240px, 55vw);
  }
  .account-pill:hover{ background:var(--lime); }
  .account-pill > span:nth-child(2){ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .account-caret{ font-size:0.625rem; color:var(--muted); flex-shrink:0; }
  .account-avatar{
    position:relative; flex-shrink:0; width:26px; height:26px; border-radius:50%;
    background:var(--green); color:#fff; overflow:hidden;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:0.625rem; font-weight:900; letter-spacing:0.3px;
  }
  /* The <img> sits over the initials and removes itself on 404, so a member
     with no photo falls back without a flash of empty circle. */
  .account-avatar img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

  .account-menu{
    position:absolute; right:0; top:calc(100% + 6px); z-index:60; min-width:210px;
    background:var(--paper); border:1.5px solid var(--ink); border-radius:10px;
    padding:6px; box-shadow:0 10px 26px rgba(0,0,0,0.16);
  }
  .account-menu[hidden]{ display:none !important; }
  .account-menu-item{
    display:flex; align-items:center; gap:10px; width:100%; cursor:pointer;
    border:none; background:transparent; border-radius:7px; padding:9px 12px;
    color:var(--ink); font-size:0.8125rem; font-weight:700;
    text-transform:none; letter-spacing:normal; text-align:left;
  }
  .account-menu-item:hover{ background:var(--lime); }
  .account-menu-item.danger{ color:var(--red-text); }
  .account-menu-item.danger:hover{ background:#f6ded9; }
  .ami-icon{ width:18px; text-align:center; flex-shrink:0; }
  .account-menu-sep{ height:1px; background:var(--line); margin:5px 4px; }

  @media (max-width: 480px){
    .account-bar > span:first-child{ display:none; } /* the pill already names them */
    .account-menu{ min-width:190px; }
  }

  .auth-top-links{
    display:flex; align-items:center; justify-content:space-between;
    padding:8px 4px 0; font-size:0.75rem; font-weight:800;
    text-transform:uppercase; letter-spacing:0.4px;
  }
  .auth-top-links a{ color:var(--blue); text-decoration:none; }

  .auth-card{
    border:1.5px solid var(--ink); border-radius:16px; padding:24px 22px;
    background:var(--paper);
  }

  .settings-card{
    border:1.5px solid var(--ink); border-radius:14px; padding:18px;
    margin-bottom:18px; background:var(--paper); max-width:100%; overflow:hidden;
  }
  .settings-card-title{
    display:flex; align-items:center; gap:8px; font-size:0.75rem; font-weight:800;
    text-transform:uppercase; letter-spacing:0.5px; color:var(--muted); margin:0 0 14px;
  }
  .settings-card .meta-fields-grid input,
  .settings-card .meta-fields-grid select{
    border:1.5px solid var(--ink); border-radius:10px; padding:9px 11px;
  }
  @media (max-width: 480px){
    .settings-card{ padding:14px; border-radius:12px; }
  }
  .auth-pill-toggle{
    display:flex; border:1.5px solid var(--ink); border-radius:999px;
    padding:4px; gap:4px; margin-bottom:20px;
  }
  .auth-pill-toggle a{
    flex:1; text-align:center; padding:9px 10px; border-radius:999px;
    font-weight:800; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.4px;
    text-decoration:none; color:var(--ink); cursor:pointer;
  }
  .auth-pill-toggle a.active{ background:var(--lime); }
  .auth-card-heading{
    font-size:1.375rem; font-weight:900; margin:0 0 6px;
  }
  .auth-card-subtitle{ font-size:0.8125rem; color:var(--muted); margin:0 0 18px; line-height:1.4; }
  #auth-panel .meta-fields-grid input{
    border:1.5px solid var(--ink); border-radius:10px; padding:10px 12px; font-size:0.9375rem;
  }
  #auth-panel .meta-fields-grid input:focus{ outline:2px solid var(--lime); outline-offset:1px; }

  .step-nav-row{
    display:flex; align-items:center; justify-content:space-between;
    position:sticky; top:0; z-index:10; background:#f0efe3;
    padding:10px 4px; margin-bottom:12px; gap:8px; flex-wrap:wrap;
  }
  .step-progress{ font-size:0.6875rem; font-weight:800; text-transform:uppercase; letter-spacing:0.4px; color:var(--muted); }
  @media (max-width: 480px){
    .step-nav-row{ justify-content:center; text-align:center; }
    .step-nav-row .btn{ width:100%; }
  }

  @media print{
    body{ background:#fff; padding:0; }
    #print-sheet-panel{ display:block !important; }
    #print-sheet{ display:block !important; }
    body > .sheet > *:not(#print-sheet-panel){ display:none !important; }
    #print-sheet-panel{ border:none; padding:0; margin:0; }
    /* @page size/orientation is no longer fixed here — applyPrintPageSize()
       in app.js injects it per-print based on the orientation picker next
       to each print button (A4 either way; only orientation is a choice). */
  }

/* Facebook sign-in button. Google renders its own button into an iframe we
   can't style, so this is hand-matched to it instead: same 40px height, same
   full-row width, Facebook's own brand blue (#1877F2) and the white "f" mark,
   per their brand guidelines. */
.fb-signin-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; height:40px; padding:0 14px; box-sizing:border-box;
  background:#1877F2; color:#fff; border:none; border-radius:4px;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:14px; font-weight:600; letter-spacing:.2px;
  cursor:pointer; transition:background .15s ease;
}
.fb-signin-btn:hover{ background:#166FE5; }
.fb-signin-btn:active{ background:#1464D4; }
.fb-signin-btn svg{ width:20px; height:20px; fill:#fff; flex:0 0 auto; }

/* ---------- BACKOFFICE ---------- */
/* Row actions sit in a cramped final column, so these are a size down from a
   normal .btn and allowed to wrap rather than widening the table. */
.btn.btn-mini{ font-size:0.625rem; padding:5px 9px; letter-spacing:0.2px; }
.admin-actions{ white-space:nowrap; }
.admin-actions .btn{ margin:2px 2px 2px 0; }
.admin-sub{ font-size:0.6875rem; opacity:0.7; }
.tier-badge{
  display:inline-block; padding:2px 8px; border-radius:999px;
  font-size:0.625rem; font-weight:800; letter-spacing:0.4px;
  background:var(--lime); color:var(--ink);
}
.tier-badge.guest{ background:var(--gray-bg); color:var(--ink); border:1px solid var(--line); }
.season-chip{
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 4px 2px 8px; margin:2px 2px 2px 0;
  border:1px solid var(--line); border-radius:999px; font-size:0.6875rem; white-space:nowrap;
}
.season-chip .chip-x{
  border:none; background:transparent; cursor:pointer; color:var(--red-text);
  font-size:0.875rem; line-height:1; padding:0 3px;
}
.season-chip .chip-x:hover{ background:#f6ded9; border-radius:50%; }
@media (max-width: 640px){
  .admin-actions{ white-space:normal; }
}

/* Admin sign-in state. The point is that it should NOT look like the ordinary
   login box - someone landing here by accident should see immediately that
   this is a different door. */
.admin-mode-badge{
  display:block; text-align:center; margin:0 0 12px;
  padding:7px 10px; border-radius:6px;
  background:var(--ink); color:#fff;
  font-size:0.625rem; font-weight:800; letter-spacing:1px;
}
.auth-card.admin-mode{ border-color:var(--ink); border-width:2px; }

/* Administrator reads as a rank above the guest/member tier, so it gets the
   inverted treatment rather than another pale pill. */
.tier-badge.admin{ background:var(--ink); color:#fff; }

/* Add-to-home-screen prompt. Fixed to the bottom so it never displaces the
   game content, and clear of the iPhone home indicator. */
.install-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  display:flex; align-items:center; gap:10px;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  background:var(--ink); color:#fff;
  box-shadow:0 -4px 16px rgba(17,18,20,0.18);
}
.install-bar-text{ flex:1; font-size:0.8125rem; line-height:1.35; }
.install-bar .btn{ flex:0 0 auto; }
.install-bar-x{
  flex:0 0 auto; border:none; background:transparent; color:#fff;
  font-size:1.25rem; line-height:1; cursor:pointer; padding:4px 6px; opacity:.75;
}
.install-bar-x:hover{ opacity:1; }
@media (max-width: 380px){
  .install-bar{ flex-wrap:wrap; }
  .install-bar-text{ flex:1 1 100%; }
}

/* ============================================================
   PHONE LAYOUT PASS
   Everything below only applies at phone widths. The desktop
   layout is deliberately untouched — it was already right.
   ============================================================ */
@media (max-width: 600px){

  /* --- 1. Gutters and vertical balance ---------------------
     24px of padding PLUS the notch inset pushed content down by
     ~80px, while short screens (role choice, sign in) sat
     top-aligned with half the display empty beneath them.
     `margin-block:auto` inside a full-height flex column centres
     a short panel but collapses to normal top alignment as soon
     as content is taller than the screen — so a game in progress
     still scrolls exactly as before. */
  body{
    display:flex;
    flex-direction:column;
    min-height:100vh;
    min-height:100dvh;
    padding-top:calc(10px + env(safe-area-inset-top));
    padding-bottom:calc(10px + env(safe-area-inset-bottom));
    padding-left:calc(12px + env(safe-area-inset-left));
    padding-right:calc(12px + env(safe-area-inset-right));
  }
  /* Deliberately NOT centred: `margin-block:auto` pushed the account bar -
     the first thing in .sheet - down into the middle of the screen with the
     rest of the content, leaving the player-name pill floating. Top aligned,
     with tight gutters, puts it just under the status bar where it belongs. */
  .sheet{ width:100%; }
  .welcome-hero{ padding:8px 0 14px; }
  .welcome-hero .logo{ max-width:min(200px, 60vw); margin-bottom:6px; }

  /* --- 2. Organizer dashboard ------------------------------
     .dashboard-content was clamped to clamp(160px,18vw,320px);
     on a 390px phone 18vw is 70px, so it collapsed to the 160px
     floor — which is why the game cards were far narrower than
     the "Create New Game" field above them. Full width on phone,
     so every element shares one edge. */
  .dashboard-content,
  .dashboard-stats{ max-width:none; width:100%; }
  .dashboard-header .logo{ max-width:min(190px, 56vw); }
  /* Two stat cards side by side had their labels clipped
     ("MY GAMES" losing its second line). Let them breathe. */
  .dashboard-stats .card{ padding:10px 6px; }
  .dashboard-stats .card h3{ font-size:0.5625rem; line-height:1.25; margin-bottom:6px; }

  /* --- 3. Form fields --------------------------------------
     A date input carries an intrinsic width on iOS that ignored
     its grid track and overflowed the card's right edge. One
     column, and nothing wider than its container. */
  .meta-fields-grid{ grid-template-columns:1fr; gap:8px; }
  .meta-fields-grid input,
  .meta-fields-grid select,
  .new-group-row input{ width:100%; min-width:0; }
  /* A grid item's min-width defaults to auto, so it can never be narrower than
     its content. An iOS date input reports a wide min-content (the formatted
     date plus the picker chrome), which pushed the whole cell past the card's
     right edge no matter what width the input itself was given. */
  .meta-fields-grid > div{ min-width:0; }
  /* iOS sizes a date input from its shadow-DOM content and ignores `width`
     entirely until the native appearance is switched off - which is why this
     one field kept spilling past the card while every other input behaved.
     Scoped to phones, so desktop Safari keeps its native stepper. */
  .meta-fields-grid input[type="date"]{
    -webkit-appearance:none; appearance:none;
    width:100%; max-width:100%; min-width:0;
  }
  /* With the native appearance gone the inner value would otherwise centre
     itself in the box (which is why "21 Sep 2026" sat mid-field earlier). */
  .meta-fields-grid input[type="date"]::-webkit-date-and-time-value{
    text-align:left; margin:0;
  }
  .meta-fields-grid input[type="date"]::-webkit-calendar-picker-indicator{
    margin-inline-start:auto; padding:0;
  }
  /* MUST come after the generic rule above: at equal specificity the later one
     wins, and width:100% on this select stretched the country picker across the
     whole row and pushed the number field off screen. Narrower here than on
     desktop too - the code needs far less room than it was taking. */
  .phone-input-row{ width:100%; }
  .phone-input-row select{ flex:0 0 auto; width:100px; font-size:0.8125rem; padding-left:6px; padding-right:4px; }
  .phone-input-row input{ flex:1 1 auto; min-width:0; width:auto; }
  .time-range-row{ width:100%; }
  .time-range-row select{ flex:1 1 0; min-width:0; }
  /* Setup rows had labels of different widths leaving every
     control starting and ending at a different x. Letting the
     control take the remaining space aligns their right edges. */
  .config-row{ gap:8px; }
  .config-row > .config-field{ flex:1 1 auto; min-width:0; }
  .config-field select,
  .config-field input{ flex:1 1 auto; min-width:0; }

  /* --- 4. Season / backoffice tab strip --------------------
     Three tabs could not fit 390px, so the pill wrapped onto two
     lines and read as broken. One line that scrolls instead —
     the standard mobile pattern — with the scrollbar hidden. */
  .season-tab-bar{
    display:flex; flex-wrap:nowrap; width:100%;
    justify-content:space-between; gap:2px; padding:3px;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; border-radius:999px;
  }
  .season-tab-bar::-webkit-scrollbar{ display:none; }
  .season-tab{ flex:0 0 auto; padding:8px 10px; font-size:0.625rem; letter-spacing:0.1px; }

  /* --- 5. Court rows, the worst of it ----------------------
     The fixed parts (54px court cube, two 34px score boxes, the
     gaps and padding) consumed ~170px of a ~294px row, leaving
     each pair roughly 44px. At that width `overflow-wrap:anywhere`
     shattered names mid-word — "Jo & Da n M". Stacking the two
     pairs instead of sitting them side by side hands each one the
     block's full width, and break-word only splits a word as a
     last resort, preferring the spaces. */
  .match-line{ gap:6px; }
  .court-banner{ flex:0 0 36px; }
  .score-box{ flex-basis:32px; width:32px; height:32px; font-size:0.9375rem; }
  .match-row{
    grid-template-columns:1fr;
    gap:1px;
    padding:6px 8px;
    justify-items:center;
  }
  .pair-stack{
    font-size:0.875rem; line-height:1.3;
    overflow-wrap:break-word; word-break:normal;
  }
  .vs{ font-size:0.875rem; line-height:1.1; }

  /* --- 6. Wide tables must scroll, not drag the page -------
     The standings and the partners/opponents grid are genuinely
     wider than a phone. They were overflowing their container
     instead of scrolling inside it, so the whole PAGE slid
     sideways and every other panel drifted off-screen with it.
     Containing them takes two things: ancestors that are allowed
     to be narrower than their contents (min-width:0 — a flex or
     grid item defaults to min-content, which is what let the
     table push everything wide), and a hard stop at the document
     edge. `clip` rather than `hidden` because it doesn't create a
     scroll container, so sticky headers still work. */
  html, body{ max-width:100%; overflow-x:clip; }
  .sheet, .panel, .round-card, .card{ min-width:0; max-width:100%; }
  .table-scroll{
    max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain; /* swiping the table stops at its ends */
  }
  /* Fill the container when the table fits, overflow (and scroll) when it
     doesn't. `width:max-content` alone made short tables stop short of the
     right edge; min-width:100% puts that back. */
  .table-scroll table{ min-width:100%; width:max-content; }

  /* Season Fairness / Times Partnered sit in a grid whose track is
     minmax(420px, 1fr). On a ~342px-wide phone that 420px floor forced the
     CARD wider than the screen — so the card overflowed, not the table inside
     it, which left .table-scroll with nothing to scroll and the page simply
     clipped the missing column. One column that actually fits; the wide table
     inside it then scrolls the way every other table here does. */
  .season-pair-row{ grid-template-columns:1fr; }

  /* --- 7. Sign in / Create account toggle ------------------
     "CREATE ACCOUNT" wrapped onto two lines while "SIGN IN"
     stayed on one, so the two halves of the pill were different
     heights and the lime highlight looked lopsided. Equal halves,
     no wrapping, and a slightly smaller face so the longer label
     fits a 390px screen on one line. */
  .auth-pill-toggle a{
    flex:1 1 0; min-width:0; white-space:nowrap;
    font-size:0.6875rem; letter-spacing:0.2px; padding:10px 6px;
    display:flex; align-items:center; justify-content:center;
  }

  /* --- 8. Verify-email banner ------------------------------
     The message and the Dismiss button were one flex row, so on a
     phone the text wrapped underneath and collided with the button
     ("email" sitting beside Dismiss). Stack them instead: message
     on its own line, button beneath it and right-aligned. */
  #verify-email-banner{
    flex-direction:column; align-items:stretch; gap:8px;
  }
  #verify-email-banner > span{ line-height:1.45; }
  #verify-email-banner > button{ align-self:flex-end; }
}

/* SHARE SHEET */
.share-preview{
  white-space:pre-wrap; word-break:break-word; margin:10px 0 0;
  background:var(--gray-bg); border:1px solid var(--line); border-radius:8px;
  padding:12px 14px; font-family:inherit; font-size:0.8125rem; line-height:1.5;
  max-height:220px; overflow-y:auto;
}
.btn.share-wa{ background:#25D366; border-color:#1da851; color:#0b3d22; }
.btn.share-wa:hover{ filter:brightness(0.95); }

/* Organizer confirming an invited player without waiting for their reply.
   Green to read as the affirmative next to the neutral "Send code" and the
   red "Remove". */
.slot-confirm-btn{
  border:1px solid var(--green); background:#fff; color:var(--green);
  border-radius:999px; cursor:pointer;
  font-weight:800; font-size:0.5625rem; letter-spacing:0.4px; text-transform:uppercase;
  padding:3px 9px; margin-left:6px;
}
.slot-confirm-btn:hover{ background:#eef7e4; }
.slot-confirm-btn:disabled{ opacity:0.5; cursor:default; }