/* v9.9 – the logo's typeface, Bebas Neue (SIL Open Font License), served with
   the app so it shows offline, on TV browsers and on the very first load */
@font-face { font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; font-display: swap;
  src: local('Bebas Neue'), local('BebasNeue-Regular'), url('fonts/bebas-neue-latin.woff2') format('woff2'); }
* { margin: 0; padding: 0; box-sizing: border-box; }
  :root {
    --bg-0: #0e1410;
    --bg-1: #1c2616;
    --bg-2: #2a3622;
    --accent: #c9a14a;
    --accent-2: #e0bb5e;
    --accent-3: #7a1414;
    --accent-4: #a8d97a;
    --text: #f0e6cc;
    --muted: #8a8770;
    --border: #3d4a32;
    --danger: #c41818;
    --bull: #7a1414;
    --bullseye: #c9a14a;
  }
  html, body {
    height: 100%;
    font-family: 'Segoe UI', Roboto, system-ui, sans-serif;
    background: radial-gradient(ellipse at top, var(--bg-1) 0%, var(--bg-0) 60%);
    color: var(--text);
    overflow-x: hidden;
  }
  body::before {
    content: "";
    position: fixed; inset: 0;
    background-image:
      radial-gradient(circle at 20% 10%, rgba(201,161,74,0.08), transparent 40%),
      radial-gradient(circle at 80% 90%, rgba(122,20,20,0.10), transparent 40%);
    pointer-events: none;
    z-index: 0;
  }
  .app { position: relative; z-index: 1; min-height: 100vh; }

  /* ===== HEADER ===== */
  header {
    padding: 28px 32px;
    border-bottom: 1px solid var(--border);
    background: rgba(10,14,26,0.7);
    backdrop-filter: blur(20px);
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 100;
  }
  .logo {
    display: flex; align-items: center; gap: 14px;
    font-size: 22px; font-weight: 800; letter-spacing: 1px;
    font-family: Georgia, 'Times New Roman', serif;
  }
  .logo-mark {
    width: 46px; height: 46px;
    border-radius: 10px;
    background: var(--bg-1);
    border: 2px solid var(--accent);
    position: relative;
    box-shadow: 0 4px 20px rgba(122,20,20,0.4);
  }
  .logo-mark::before {
    content: "";
    position: absolute; inset: 6px;
    background: var(--bull);
    border-radius: 50%;
    border: 2px solid var(--accent);
  }
  .logo-mark::after {
    content: "";
    position: absolute; inset: 16px;
    background: var(--accent);
    border-radius: 50%;
  }
  .logo span:first-of-type { color: var(--accent); }
  .nav-btn {
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
  }
  .nav-btn:hover { background: var(--accent); border-color: var(--accent); }
  /* Same height as the worded buttons beside it, but only as wide as the
     glyph, so a fourth control still fits the header on a 360px phone. */
  /* Only as wide as the glyph, so a fourth control still fits the header on
     a 360px phone — but a real target in both directions. On a phone the
     worded buttons beside it are 26px tall; they are flex siblings and
     stretch, so this min-height lifts all four rather than making one of
     them the odd one out. */
  .nav-btn.nav-icon { padding: 8px 12px; font-size: 16px; line-height: 1.1; min-width: 44px; min-height: 38px; }
  .nav-btn.nav-icon[aria-pressed="false"] { color: var(--muted); opacity: .75; }

  /* ===== HOME ===== */
  .hero {
    padding: 56px 32px 32px;
    text-align: center;
  }
  .hero h1 {
    font-size: 52px;
    font-weight: 900;
    letter-spacing: -1px;
    background: linear-gradient(135deg, #fff 0%, #8893ad 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 12px;
  }
  .hero p { color: var(--muted); font-size: 17px; max-width: 600px; margin: 0 auto; }

  .games-grid {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
  }
  .game-card {
    background: linear-gradient(145deg, var(--bg-1), var(--bg-2));
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
  }
  .game-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-3), var(--accent));
  }
  .game-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: 0 20px 50px rgba(201,161,74,0.2);
  }
  .game-card .icon {
    font-size: 40px;
    margin-bottom: 16px;
    display: inline-block;
    width: 64px; height: 64px;
    line-height: 64px;
    text-align: center;
    background: var(--bg-0);
    border-radius: 12px;
    border: 1px solid var(--border);
  }
  .game-card h3 { font-size: 24px; margin-bottom: 8px; font-weight: 800; }
  .game-card p { color: var(--muted); font-size: 14px; line-height: 1.5; min-height: 60px; }
  .game-card .tag {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(201,161,74,0.15);
    color: var(--accent);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-top: 12px;
    text-transform: uppercase;
  }

  /* ===== SETUP ===== */
  .setup-screen {
    max-width: 700px;
    margin: 40px auto;
    padding: 32px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 16px;
  }
  .setup-screen h2 { font-size: 32px; margin-bottom: 8px; }
  .setup-screen > p { color: var(--muted); margin-bottom: 28px; }
  .form-row { margin-bottom: 20px; }
  .form-row label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--muted);
    margin-bottom: 8px;
    text-transform: uppercase;
  }
  /* email/password are here because the cross-device board panel injects them.
     Left out, they fell back to the UA default and rendered 19px tall on a
     phone — unusable, and under 16px iOS zooms the page on focus. Number is
     deliberately NOT listed: the quick-score grid styles its own. */
  .form-row input[type="text"], .form-row input[type="email"],
  .form-row input[type="password"], .form-row select {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-0);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 8px;
    font-size: 16px;
    font-family: inherit;
  }
  .form-row input:focus, .form-row select:focus { outline: none; border-color: var(--accent); }

  .player-list { display: flex; flex-direction: column; gap: 10px; }
  .player-row {
    display: flex;
    gap: 10px;
    align-items: center;
  }
  .player-row input { flex: 1; }
  .player-row .num {
    width: 36px; height: 36px;
    background: var(--accent);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800;
  }
  .remove-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    width: 36px; height: 36px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
  }
  .remove-btn:hover { color: var(--accent); border-color: var(--accent); }

  .player-field { position: relative; flex: 1; min-width: 0; }
  .player-field input { width: 100%; }

  /* The remembered-names panel. It sits over the row below it, so it needs a
     stacking context of its own and an opaque background — a translucent one
     would show the next player's box through the list. */
  .name-suggest {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px);
    z-index: 40;
    max-height: 216px; overflow-y: auto;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.45);
  }
  .ns-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--border); }
  .ns-row:last-child { border-bottom: none; }
  .ns-pick {
    flex: 1; min-width: 0;
    text-align: left;
    background: transparent; border: none; color: var(--text);
    font-family: inherit; font-size: 15px;
    padding: 12px; min-height: 44px;
    cursor: pointer;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .ns-drop {
    flex: 0 0 44px; min-height: 44px;
    background: transparent; border: none; border-left: 1px solid var(--border);
    color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer;
  }
  .ns-row.active { background: var(--bg-2); }
  /* Behind a hover query: on a touch screen :hover sticks after a tap, and a
     row that stays highlighted reads as selected. */
  @media (hover: hover) {
    .ns-pick:hover { background: var(--bg-2); }
    .ns-drop:hover { color: var(--accent); }
  }
  .btn-row { display: flex; gap: 12px; margin-top: 28px; }
  .btn {
    padding: 14px 24px;
    border-radius: 10px;
    border: none;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
  }
  .btn-primary {
    background: linear-gradient(135deg, var(--accent-3), #5a0e0e);
    color: var(--accent-2);
    flex: 1;
    border: 1px solid var(--accent);
    box-shadow: 0 4px 20px rgba(122,20,20,0.4);
  }
  .btn-primary:hover { transform: translateY(-2px); }
  .btn-secondary {
    background: var(--bg-2);
    color: var(--text);
    border: 1px solid var(--border);
  }
  .btn-secondary:hover { border-color: var(--accent); }
  .btn-add {
    background: transparent;
    border: 1px dashed var(--border);
    color: var(--muted);
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 10px;
    width: 100%;
  }
  .btn-add:hover { border-color: var(--accent); color: var(--accent); }

  /* ===== GAME SCREEN ===== */
  .game-screen { padding: 24px 32px; }
  .game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
  }
  .game-title { font-size: 24px; font-weight: 800; }
  .game-title small { color: var(--muted); font-weight: 500; font-size: 14px; display: block; }

  .players-board {
    display: grid;
    gap: 16px;
    margin-bottom: 24px;
  }
  .player-card {
    background: linear-gradient(145deg, var(--bg-1), var(--bg-2));
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    position: relative;
    transition: all 0.3s;
  }
  .player-card.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(255,59,59,0.3), 0 8px 24px rgba(255,59,59,0.2);
  }
  .player-card.winner {
    border-color: var(--accent-2);
    background: linear-gradient(145deg, rgba(201,161,74,0.18), var(--bg-2));
  }
  .pc-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px;
  }
  .pc-name { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
  .pc-name .dot {
    width: 12px; height: 12px; border-radius: 50%; background: var(--muted);
  }
  .player-card.active .pc-name .dot { background: var(--accent); animation: pulse 1.5s infinite; }
  @keyframes pulse { 50% { opacity: 0.4; } }
  .pc-score {
    font-size: 56px;
    font-weight: 900;
    font-family: 'Segoe UI', monospace;
    letter-spacing: -2px;
    text-align: center;
    color: var(--text);
    line-height: 1;
    margin: 8px 0;
  }
  .pc-label {
    text-align: center;
    color: var(--muted);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
  }
  .pc-stats {
    display: flex; justify-content: space-around;
    margin-top: 12px; padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 12px;
  }
  .pc-stats div { text-align: center; }
  .pc-stats strong { display: block; font-size: 16px; color: var(--accent-2); }

  /* Cricket grid */
  .cricket-grid {
    display: grid;
    grid-template-columns: 50px repeat(var(--players), 1fr);
    gap: 4px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 24px;
  }
  .cricket-cell {
    text-align: center;
    padding: 10px 6px;
    font-weight: 700;
    background: var(--bg-2);
    border-radius: 6px;
  }
  .cricket-cell.header { background: var(--bg-0); color: var(--accent); }
  .cricket-cell.label { background: var(--bg-0); }
  .cricket-marks {
    font-size: 24px; letter-spacing: 2px;
    color: var(--accent-2);
    min-height: 30px;
  }
  .cricket-cell.closed { background: rgba(0,217,163,0.15); color: var(--accent-3); }

  /* ===== SCORE INPUT ===== */
  .score-input-section {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 20px;
  }
  .current-throw {
    text-align: center; margin-bottom: 16px;
  }
  .throw-display {
    display: flex; justify-content: center; gap: 10px;
    margin-top: 10px;
  }
  .throw-slot {
    width: 80px; height: 60px;
    background: var(--bg-0);
    border: 2px solid var(--border);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 800;
    color: var(--accent-2);
  }
  .throw-slot.empty { color: var(--muted); border-style: dashed; font-size: 14px; }

  .multiplier-row {
    display: flex; gap: 8px; justify-content: center; margin: 12px 0;
  }
  .mult-btn {
    flex: 1;
    padding: 14px 10px;
    letter-spacing: 2px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
  }
  .mult-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
  }
  .mult-btn[data-mult="2"].active { background: var(--accent-2); border-color: var(--accent-2); color: #000; }
  .mult-btn[data-mult="3"].active { background: var(--accent-3); border-color: var(--accent-3); color: #000; }

  .mult-btn.mult-flash {
    animation: multFlash 0.45s ease-out;
  }
  @keyframes multFlash {
    0%   { box-shadow: 0 0 0 0 var(--accent); }
    30%  { box-shadow: 0 0 0 6px rgba(232,184,75,0.35); }
    100% { box-shadow: 0 0 0 0 rgba(232,184,75,0); }
  }

  /* ===== DARTBOARD SCORING PAD ===== */
  .board-hint {
    text-align: center;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
    margin: 10px 0 2px;
  }
  .dartboard-wrap {
    display: flex; justify-content: center;
    margin: 6px 0 4px;
  }
  .dartboard {
    width: min(100%, 420px);
  }
  .db-svg {
    width: 100%; height: auto; display: block;
    touch-action: manipulation;           /* no double-tap zoom on a wedge */
    filter: drop-shadow(0 8px 24px rgba(0,0,0,0.45));
  }
  .db-hit {
    cursor: pointer;
    transition: opacity 0.12s ease, filter 0.12s ease;
  }
  .db-hit:focus-visible {
    outline: none;
    stroke: var(--accent); stroke-width: 3;
  }
  @media (hover: hover) {
    .db-hit:hover { filter: brightness(1.45); }
  }
  /* pressed — immediate, while the finger is down */
  .db-hit.db-press {
    filter: brightness(1.9) drop-shadow(0 0 10px var(--accent));
  }
  /* the dart you just scored stays lit until the next one */
  .db-hit.db-last {
    stroke: var(--accent); stroke-width: 2.5;
    filter: brightness(1.5) drop-shadow(0 0 9px var(--accent));
  }
  /* not scoreable in this game */
  .db-hit.db-off { opacity: 0.28; cursor: default; }
  .db-hit.db-off:hover { filter: none; }
  /* the live target in Around the World (id: aroundclock) */
  .db-hit.db-target {
    stroke: var(--accent-3); stroke-width: 2;
    filter: brightness(1.35);
  }
  .db-surround { cursor: pointer; }

  .number-pad {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin: 12px 0;
  }
  .num-btn {
    aspect-ratio: 1.2 / 1;
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 10px;
    cursor: pointer;
    font-weight: 700;
    font-size: 18px;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .num-btn:hover { background: var(--accent); border-color: var(--accent); transform: scale(0.96); }
  .special-row {
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }
  .special-row .num-btn { width: min(100%, 260px); }
  .special-row .num-btn {
    aspect-ratio: auto;
    padding: 14px;
    font-size: 16px;
    letter-spacing: 1px;
  }
  .num-btn.special {
    background: linear-gradient(135deg, var(--bullseye), #0f6b3a);
    color: white;
  }
  .num-btn.bull {
    background: linear-gradient(135deg, var(--bull), #8a1a1a);
    color: white;
  }
  .num-btn.miss {
    background: var(--bg-0);
    color: var(--muted);
  }

  /* ===== BUST ===== */
  .bust-overlay {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    background: rgba(8,6,6,0.92);
    backdrop-filter: blur(3px);
    cursor: pointer;
    opacity: 0;
  }
  .bust-overlay.hidden { display: none; }
  .bust-overlay.show { animation: bustIn 1.8s ease-out forwards; }
  @keyframes bustIn {
    0%   { opacity: 0; }
    8%   { opacity: 1; }
    82%  { opacity: 1; }
    100% { opacity: 0; }
  }
  .bust-inner { text-align: center; padding: 24px; }
  .bust-word {
    font-family: 'Bebas Neue', Georgia, serif;
    font-size: clamp(72px, 22vw, 220px);
    line-height: 0.9;
    letter-spacing: 0.06em;
    color: var(--danger, #E0473D);
    text-shadow: 0 0 40px rgba(224,71,61,0.55);
    animation: bustPunch 0.45s cubic-bezier(.2,1.5,.4,1) both;
  }
  @keyframes bustPunch {
    0%   { transform: scale(0.5) rotate(-4deg); opacity: 0; }
    60%  { transform: scale(1.08) rotate(1deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
  }
  .bust-who {
    margin-top: 14px; font-size: clamp(16px, 3.5vw, 26px);
    font-weight: 700; color: var(--text, #F4ECD8);
  }
  .bust-next {
    margin-top: 6px; font-size: clamp(12px, 2.4vw, 16px);
    letter-spacing: 3px; text-transform: uppercase;
    color: var(--muted, #8b8a82);
  }
  @media (prefers-reduced-motion: reduce) {
    .bust-overlay.show { animation: none; opacity: 1; }
    .bust-word { animation: none; }
  }

  .submit-nudge { animation: submitNudge 0.6s ease-out; }
  @keyframes submitNudge {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
  }

  .action-row { display: flex; gap: 8px; margin-top: 12px; }
  .action-btn {
    flex: 1;
    padding: 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-2);
    color: var(--text);
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
  }
  .action-btn.undo { background: var(--bg-2); }
  .action-btn.submit { background: linear-gradient(135deg, var(--accent-3), #5a0e0e); color: var(--accent-2); border: 1px solid var(--accent); }
  .action-btn:hover { transform: translateY(-1px); }

  /* ===== HISTORY ===== */
  .history-section {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
  }
  .history-section h4 { margin-bottom: 12px; color: var(--muted); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }
  .history-list { display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; }
  .history-item {
    display: flex; justify-content: space-between;
    padding: 8px 12px;
    background: var(--bg-0);
    border-radius: 6px;
    font-size: 13px;
  }
  .history-item .score { font-weight: 700; color: var(--accent-2); }
  .history-item .bust { color: var(--danger); }

  /* ===== RULES MODAL ===== */
  .modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(10px);
    z-index: 1000;
    display: none;
    align-items: center; justify-content: center;
    padding: 20px;
  }
  .modal-overlay.show { display: flex; }
  .modal {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 16px;
    max-width: 700px; width: 100%;
    max-height: 90vh; overflow-y: auto;
    padding: 32px;
  }
  .modal h2 {
    font-size: 28px;
    margin-bottom: 16px;
    display: flex; align-items: center; justify-content: space-between;
  }
  .modal h3 { margin: 20px 0 10px; color: var(--accent-2); }
  .modal p, .modal li { line-height: 1.7; color: var(--text); margin-bottom: 8px; }
  .modal ul, .modal ol { padding-left: 24px; }
  .close-btn {
    background: var(--bg-2);
    border: none; color: var(--text);
    width: 36px; height: 36px;
    border-radius: 8px; cursor: pointer;
    font-size: 18px;
  }

  /* ===== WINNER OVERLAY ===== */
  .winner-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.9);
    z-index: 999;
    display: none;
    align-items: center; justify-content: center;
    flex-direction: column;
    text-align: center;
  }
  .winner-overlay.show { display: flex; animation: fadeIn 0.4s; }
  @keyframes fadeIn { from { opacity: 0; } }
  .winner-overlay h1 {
    font-size: 100px;
    background: linear-gradient(135deg, var(--accent-2), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
    letter-spacing: 4px;
    font-family: Georgia, 'Times New Roman', serif;
    animation: bounce 1s infinite alternate;
  }
  @keyframes bounce { to { transform: translateY(-20px); } }
  .winner-name { font-size: 36px; margin: 12px 0 32px; }

  .hidden { display: none !important; }

  /* Around the World target */
  .clock-target {
    text-align: center;
    padding: 14px;
    background: var(--bg-0);
    border-radius: 10px;
    margin-bottom: 12px;
  }
  .clock-target .target-num {
    font-size: 64px;
    font-weight: 900;
    color: var(--accent-2);
    line-height: 1;
  }
  .clock-target .target-label {
    color: var(--muted);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 4px;
  }

  /* Killer */
  .killer-info {
    background: var(--bg-0);
    border-radius: 8px;
    padding: 10px 14px;
    margin-top: 8px;
    font-size: 13px;
    color: var(--muted);
    display: flex;
    justify-content: space-between;
  }
  .killer-info .lives {
    color: var(--accent);
    font-weight: 700;
  }
  .killer-info .is-killer { color: var(--accent-3); font-weight: 700; }

  @media (max-width: 700px) {
    .hero h1 { font-size: 36px; }
    .number-pad { grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .dartboard { width: min(100%, 360px); }
    .mult-btn { padding: 12px 6px; font-size: 13px; letter-spacing: 1px; }
    .board-hint { font-size: 10px; letter-spacing: 0.5px; }
    .num-btn { font-size: 15px; }
    .game-screen { padding: 16px; }
    header { padding: 16px; }
    .winner-overlay h1 { font-size: 60px; }
    .throw-slot { width: 64px; height: 52px; font-size: 18px; }
  }

/* === NEW UI (v2) === */
.header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.theme-select {
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.theme-select:focus { outline: none; border-color: var(--accent); }

.checkout-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--accent);
  color: var(--bg-0);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.sets-legs {
  text-align: center;
  font-size: 12px;
  color: var(--accent-2);
  letter-spacing: 1px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}
.match-status {
  display: inline-block;
  margin-top: 4px;
  padding: 3px 10px;
  background: var(--bg-2);
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* === MATCH SUMMARY SCREEN === */
.summary-screen {
  max-width: 900px;
  margin: 40px auto;
  padding: 40px 32px;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
  border: 2px solid var(--accent);
  border-radius: 20px;
  text-align: center;
}
.trophy { font-size: 80px; margin-bottom: 12px; animation: bounce 2s infinite alternate; }
.summary-h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 48px;
  letter-spacing: 6px;
  color: var(--accent);
  margin-bottom: 8px;
}
.summary-winner {
  font-size: 36px;
  font-weight: 800;
  color: var(--accent-2);
  margin-bottom: 8px;
}
.summary-meta {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 24px;
}

/* === TOURNAMENT === */
.tournament-hub, .tournament-detail {
  max-width: 1000px;
  margin: 24px auto;
  padding: 0 24px;
}
.tourney-list { display: flex; flex-direction: column; gap: 12px; }
.tourney-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
}
.tc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tc-head h3 { margin: 0 0 4px; font-size: 18px; color: var(--accent); }
.tc-head small { color: var(--muted); font-size: 12px; }
.tc-status {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 10px;
  letter-spacing: 1px;
  font-weight: 700;
}
.tc-status.live { background: rgba(201,161,74,0.2); color: var(--accent); }
.tc-status.done { background: rgba(122,20,20,0.2); color: var(--accent-3); }
.tc-status.pending { background: var(--bg-2); color: var(--muted); }
.tc-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.tc-actions button {
  padding: 8px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.tc-actions button:hover { border-color: var(--accent); }

textarea {
  background: var(--bg-0);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 15px;
  width: 100%;
  resize: vertical;
}

.t-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-1);
  border-radius: 8px;
  overflow: hidden;
  font-size: 13px;
}
.t-table th {
  background: var(--bg-2);
  padding: 10px 12px;
  text-align: left;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--accent);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.t-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.t-table tr:last-child td { border-bottom: none; }

.match-list { display: flex; flex-direction: column; gap: 6px; }
.match-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  gap: 12px;
  align-items: center;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
}
.match-row.done { opacity: 0.85; border-color: var(--accent-3); }
.m-p1, .m-p2 { font-weight: 600; }
.m-p1.win, .m-p2.win { color: var(--accent-2); }
.m-vs { color: var(--muted); font-size: 12px; }
.m-win { color: var(--accent-2); font-size: 12px; }
.match-row button {
  padding: 6px 14px;
  background: linear-gradient(135deg, var(--accent-3), #5a0e0e);
  color: var(--accent-2);
  border: 1px solid var(--accent);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 1px;
}

@media (max-width: 700px) {
  .header-actions { gap: 6px; }
  .header-actions .nav-btn { padding: 8px 12px; font-size: 12px; }
  .theme-select { font-size: 12px; padding: 8px 8px; max-width: 100px; }
  .summary-h1 { font-size: 32px; letter-spacing: 3px; }
  .summary-winner { font-size: 24px; }
  .t-table { font-size: 11px; }
  .t-table th, .t-table td { padding: 6px 8px; }
  .match-row { grid-template-columns: 1fr; gap: 4px; text-align: center; }
}

/* === DAY / NIGHT TOGGLE === */
.mode-toggle {
  font-size: 18px;
  padding: 8px 12px;
  min-width: 40px;
  text-align: center;
  background: var(--bg-2);
  border: 1px solid var(--accent);
  color: var(--accent);
}
.mode-toggle:hover { background: var(--accent); color: var(--bg-0); }

/* When light mode is active, retune surfaces that had hardcoded dark assumptions */
[data-mode="light"] header { background: rgba(255,255,255,0.85); }
[data-mode="light"] .hero h1 {
  background: linear-gradient(135deg, var(--accent-3) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-mode="light"] body::before {
  background-image:
    radial-gradient(circle at 20% 10%, rgba(201,161,74,0.10), transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(122,20,20,0.06), transparent 40%);
}
[data-mode="light"] .game-card {
  background: linear-gradient(145deg, #ffffff, #f5f1e8);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
[data-mode="light"] .game-card:hover { box-shadow: 0 12px 36px rgba(122,20,20,0.15); }
[data-mode="light"] .player-card {
  background: linear-gradient(145deg, #ffffff, #f5f1e8);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
[data-mode="light"] .pc-score { color: var(--accent-3); }
[data-mode="light"] .throw-slot { background: #fff; }
[data-mode="light"] .throw-slot.empty { color: var(--muted); }
[data-mode="light"] .num-btn { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
[data-mode="light"] .num-btn:hover { color: #fff; }
[data-mode="light"] .num-btn.miss { background: #ece6d8; }
[data-mode="light"] .history-item { background: #fff; }
[data-mode="light"] .modal { background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
[data-mode="light"] .modal-overlay { background: rgba(255,255,255,0.7); }
[data-mode="light"] .summary-screen {
  background: linear-gradient(180deg, #fff, #f5f1e8);
}
[data-mode="light"] .tourney-card, [data-mode="light"] .match-row {
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
[data-mode="light"] .t-table { background: #fff; }
[data-mode="light"] .t-table th { background: #ece6d8; }
[data-mode="light"] .winner-overlay { background: rgba(255,255,255,0.95); }
[data-mode="light"] .clock-target,
[data-mode="light"] .score-input-section,
[data-mode="light"] .history-section,
[data-mode="light"] .setup-screen {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
[data-mode="light"] .cricket-cell { background: #ece6d8; }
[data-mode="light"] .cricket-cell.header,
[data-mode="light"] .cricket-cell.label { background: #fff; }
[data-mode="light"] .form-row input[type="text"],
[data-mode="light"] .form-row input[type="email"],
[data-mode="light"] .form-row input[type="password"],
[data-mode="light"] .form-row select,
[data-mode="light"] textarea { background: #fff; }
[data-mode="light"] .checkout-badge { color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
[data-mode="light"] .logo-mark { background: var(--bg-2); }
[data-mode="light"] .nav-btn { background: #fff; }
[data-mode="light"] .nav-btn:hover { color: #fff; }
[data-mode="light"] .action-btn.undo { background: #fff; }

/* Smooth swap */
html, body, header, .game-card, .player-card, .modal, .tourney-card, .match-row,
.score-input-section, .history-section, .setup-screen, .num-btn, .throw-slot,
.history-item, .t-table, .summary-screen, .cricket-cell {
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* === QUICK SCORES === */
.visit-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.quick-side { display: flex; gap: 6px; }
.quick-btn {
  width: 56px; height: 56px;
  background: linear-gradient(145deg, var(--bg-2), var(--bg-1));
  border: 1.5px solid var(--accent);
  color: var(--accent);
  border-radius: 10px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.quick-btn:hover {
  background: var(--accent);
  color: var(--bg-0);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(201,161,74,0.4);
}
.quick-btn:active { transform: scale(0.95); }

/* === SETTINGS === */
.settings-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
}
.settings-quick-cell label {
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--muted);
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}
.settings-quick-cell input {
  width: 100%;
  padding: 10px;
  background: var(--bg-0);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  font-family: inherit;
}
.settings-quick-cell input:focus { outline: none; border-color: var(--accent); }

/* === 180 CELEBRATION === */
#confettiCanvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9998;
  pointer-events: none;
}
#celebrate180 {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 9999;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(201,161,74,0.25), transparent 60%);
}
#celebrate180.show { display: flex; }
.big-180 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(180px, 30vw, 360px);
  font-weight: 900;
  color: var(--accent);
  text-shadow: 0 0 40px var(--accent), 0 0 80px var(--accent-3), 0 8px 0 var(--accent-3);
  animation: flash180 0.4s steps(2) infinite, scale180 0.6s ease-in-out infinite alternate;
  letter-spacing: 8px;
}
.big-180-label {
  font-family: Georgia, serif;
  font-size: clamp(24px, 4vw, 40px);
  letter-spacing: 16px;
  color: var(--accent-2);
  margin-top: -10px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
  animation: flash180 0.4s steps(2) infinite;
}
@keyframes flash180 {
  0%,49% { opacity: 1; }
  50%,100% { opacity: 0.35; }
}
@keyframes scale180 {
  from { transform: scale(0.92); }
  to { transform: scale(1.08); }
}

@media (max-width: 700px) {
  .quick-btn { width: 48px; height: 48px; font-size: 14px; }
  .visit-row { gap: 4px; }
  .quick-side { gap: 4px; }
  /* Stacked, the two quick-score groups used to sandwich the dart slots — one
     group above, one below. Order them so the darts sit on their own line and
     both groups share the line underneath. */
  .visit-row .throw-display { order: 0; flex-basis: 100%; }
  .visit-row .quick-side:first-child { order: 1; }
  .visit-row .quick-side:last-child  { order: 2; }
  .settings-quick-grid { grid-template-columns: repeat(2, 1fr); }
}

@keyframes stagePulse {
  0%   { filter: hue-rotate(0deg) brightness(1); opacity: 0.55; }
  25%  { filter: hue-rotate(40deg) brightness(1.15); opacity: 0.75; }
  50%  { filter: hue-rotate(-30deg) brightness(0.9); opacity: 0.5; }
  75%  { filter: hue-rotate(80deg) brightness(1.2); opacity: 0.8; }
  100% { filter: hue-rotate(-50deg) brightness(1); opacity: 0.6; }
}
50%  { transform: translate(3%, -2%) scale(1.06); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Diagonal marquees behind cards */
.marquee-b to   { transform: translateX(-50%); }
}
to   { transform: translateX(0); }
}

/* Glass veil for separation */
/* Lift cards above the scene with separation shading */
/* === STICKY SCORE BOX === */
.players-board {
  position: sticky;
  top: 80px;
  z-index: 50;
  background: linear-gradient(180deg, rgba(0,0,0,0.4), transparent);
  padding-bottom: 14px;
  margin-bottom: 8px;
}
.player-card {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* === QUICK SCORE TEXT COLOUR === */
:root { --quick-text: #ffd700; }
.quick-btn {
  color: var(--quick-text);
  border-color: var(--quick-text);
}
.quick-btn:hover { background: var(--quick-text); color: var(--bg-0); }

/* === LIGHT MODE TWEAKS FOR STAGE === */
[data-mode="light"] [data-mode="light"] [data-mode="light"] [data-mode="light"] [data-mode="light"] @media (max-width: 700px) {
  .players-board { top: 64px; }
  .marquee-a, }

/* === LEG WIN BANNER === */
#legBanner {
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  height: 96px;
  background: linear-gradient(90deg, transparent 0%, var(--bg-1) 8%, var(--bg-0) 50%, var(--bg-1) 92%, transparent 100%);
  border-top: 3px solid var(--accent);
  border-bottom: 3px solid var(--accent);
  display: none;
  overflow: hidden;
  z-index: 9990;
  pointer-events: none;
  box-shadow: 0 0 60px rgba(201,161,74,0.5);
}
#legBanner.show { display: flex; align-items: center; }
.leg-banner-track {
  display: inline-block;
  white-space: nowrap;
  font-family: Georgia, serif;
  font-size: clamp(36px, 6vw, 72px);
  font-weight: 900;
  letter-spacing: 6px;
  color: var(--accent);
  text-shadow: 0 0 24px var(--accent), 0 0 4px rgba(0,0,0,0.6);
  animation: legBannerSlide 3.2s linear forwards;
}
@keyframes legBannerSlide {
  0%   { transform: translateX(100vw); }
  100% { transform: translateX(-100%); }
}

/* === MATCH WIN: flashing "Winner is X" sign === */
#winnerSign {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9995;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(201,161,74,0.25), transparent 60%);
}
#winnerSign.show { display: flex; }
.winner-sign-text {
  font-family: Georgia, serif;
  font-size: clamp(36px, 7vw, 100px);
  font-weight: 900;
  color: var(--accent);
  letter-spacing: 4px;
  text-align: center;
  text-shadow: 0 0 30px var(--accent), 0 0 80px var(--accent-3);
  animation: signFlash 0.4s steps(2) infinite, signPulse 0.7s ease-in-out infinite alternate;
}
.winner-sign-text span {
  display: block;
  color: var(--accent-2);
  margin-top: 8px;
  font-size: 1.2em;
}
@keyframes signFlash { 0%,49%{opacity:1} 50%,100%{opacity:0.4} }
@keyframes signPulse { from{transform:scale(0.95)} to{transform:scale(1.08)} }

/* === DOG PEEK === */
#dogPeek {
  position: fixed;
  bottom: 8%;
  right: -240px;
  width: 220px;
  height: 220px;
  z-index: 9994;
  pointer-events: none;
  display: none;
}
#dogPeek.show {
  display: block;
  animation: dogSlide 5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes dogSlide {
  0%   { right: -240px; transform: rotate(15deg); }
  20%  { right: 30px;  transform: rotate(-5deg); }
  30%  { right: 30px;  transform: rotate(5deg); }
  50%  { right: 30px;  transform: rotate(-3deg); }
  70%  { right: 30px;  transform: rotate(0deg); }
  100% { right: -240px; transform: rotate(20deg); }
}
.dog-tongue { transform-origin: 100px 148px; animation: dogTongue 0.4s ease-in-out infinite alternate; }
@keyframes dogTongue { from{transform:translateY(0) scaleY(1)} to{transform:translateY(4px) scaleY(1.12)} }
#dogWink { animation: dogWink 0.6s ease-in-out infinite; }
@keyframes dogWink { 0%,40%,100%{stroke-dashoffset:0} 50%,90%{transform:translateY(2px)} }

/* === COMPACT HEADER ON STAGE === */
@media (max-width: 700px) {
  }

/* === DIAGONAL FULL-SCREEN MARQUEE GRID === */
.stage-bg {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 220vmax;
  height: 220vmax;
  transform: translate(-50%, -50%) rotate(-28deg);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.stage-lights {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(circle at 25% 30%, rgba(255,140,0,0.18), transparent 35%),
    radial-gradient(circle at 75% 30%, rgba(0,180,255,0.18), transparent 35%),
    radial-gradient(circle at 50% 70%, rgba(255,215,0,0.14), transparent 30%),
    radial-gradient(circle at 30% 80%, rgba(220,20,60,0.12), transparent 50%);
  animation: stagePulse 9s ease-in-out infinite alternate;
  mix-blend-mode: screen;
  pointer-events: none;
}
@keyframes stagePulse {
  0%   { filter: hue-rotate(0deg) brightness(1); opacity: 0.55; }
  33%  { filter: hue-rotate(60deg) brightness(1.2); opacity: 0.7; }
  66%  { filter: hue-rotate(-40deg) brightness(0.9); opacity: 0.5; }
  100% { filter: hue-rotate(100deg) brightness(1.1); opacity: 0.65; }
}
.marquee-grid {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.stage-bg .player-marquee {
  flex: 0 0 auto;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 800;
  font-size: clamp(22px, 2.4vmax, 38px);
  letter-spacing: 4px;
  color: var(--accent);
  opacity: 0.38;
  line-height: 1.4;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.stage-bg .player-marquee.reverse {
  color: var(--accent-2);
  opacity: 0.32;
}
.stage-bg .marquee-track {
  display: inline-block;
  white-space: nowrap;
  animation: marqueeScroll 80s linear infinite;
  will-change: transform;
}
.stage-bg .player-marquee.reverse .marquee-track {
  animation: marqueeScrollReverse 90s linear infinite;
}
.stage-bg .marquee-track span { padding-right: 80px; }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes marqueeScrollReverse {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* App content above the bg */
.app { position: relative; z-index: 1; }

/* === HOME-PAGE STAGE: dartboard centred, no blur veil obscuring marquees === */
#homeScreen { position: relative; min-height: 100vh; }
.stage-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.55;
}
.stage-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#homeScreen .hero, #homeScreen .games-grid { position: relative; z-index: 2; }

/* Lift the cards with subtle shading without heavy blur */
#homeScreen .game-card {
  background: linear-gradient(145deg, rgba(28,38,22,0.78), rgba(42,54,34,0.85));
  border: 1px solid rgba(201,161,74,0.45);
  box-shadow:
    0 14px 38px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.04) inset;
}
#homeScreen .game-card:hover {
  border-color: var(--accent);
  box-shadow: 0 20px 56px rgba(0,0,0,0.65), 0 0 24px rgba(201,161,74,0.3);
}
#homeScreen .hero h1 { text-shadow: 0 2px 20px rgba(0,0,0,0.7); }
#homeScreen .hero p { text-shadow: 0 1px 4px rgba(0,0,0,0.7); opacity: 0.9; }

/* === LIGHT MODE === */
[data-mode="light"] .stage-bg .player-marquee { color: var(--accent-3); opacity: 0.25; text-shadow: 0 1px 2px rgba(255,255,255,0.4); }
[data-mode="light"] .stage-bg .player-marquee.reverse { color: var(--accent); opacity: 0.22; }
[data-mode="light"] .stage-scene { opacity: 0.25; }
[data-mode="light"] #homeScreen .game-card {
  background: linear-gradient(145deg, rgba(255,255,255,0.92), rgba(245,241,232,0.92));
  border-color: rgba(0,0,0,0.12);
}

@media (max-width: 700px) {
  .stage-bg { transform: translate(-50%, -50%) rotate(-32deg); }
  .stage-bg .player-marquee { font-size: 18px; letter-spacing: 2px; }
}

/* === ELITE TAG & MATCH TYPE TOGGLE === */
.elite-tag {
  color: var(--accent-2);
  font-style: italic;
  letter-spacing: 2px;
  font-size: 0.85em;
  margin-left: 4px;
}
.match-type-toggle {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.mt-btn {
  flex: 1 1 auto;
  padding: 14px 16px;
  background: var(--bg-2);
  border: 2px solid var(--border);
  color: var(--muted);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: all 0.18s;
}
.mt-btn:hover { color: var(--text); border-color: var(--accent); }
.mt-btn.active {
  background: linear-gradient(135deg, var(--accent-3), #5a0e0e);
  color: var(--accent-2);
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(122,20,20,0.4);
}

/* === TUNING: more solid home cards + fainter marquees === */
#homeScreen .game-card {
  background: linear-gradient(145deg, rgba(28,38,22,0.96), rgba(42,54,34,0.98));
  border: 1px solid rgba(201,161,74,0.55);
}
.stage-bg .player-marquee { opacity: 0.22; }
.stage-bg .player-marquee.reverse { opacity: 0.18; }

/* === FIX STICKY: body overflow-x:hidden was killing sticky === */
html, body { overflow-x: clip; height: auto; min-height: 100%; }

/* Re-assert sticky with bigger top offset accommodating header */
.players-board {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 10px 0;
  background: linear-gradient(180deg, rgba(14,20,16,0.92) 0%, rgba(14,20,16,0.85) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
[data-mode="light"] .players-board {
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(245,241,232,0.85));
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

/* === IN-CARD SUBMIT BUTTON === */
.player-card .card-submit {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--bg-0);
  color: var(--muted);
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  font-family: inherit;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: not-allowed;
  transition: all 0.18s;
}
.player-card.active .card-submit {
  background: linear-gradient(135deg, var(--accent-3), #5a0e0e);
  color: var(--accent-2);
  border: 1.5px solid var(--accent);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(122,20,20,0.5);
  animation: submitPulse 1.8s ease-in-out infinite;
}
.player-card.active .card-submit:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(122,20,20,0.65); }
.player-card.active .card-submit:active { transform: translateY(0); }
@keyframes submitPulse {
  0%,100% { box-shadow: 0 4px 16px rgba(122,20,20,0.5); }
  50%     { box-shadow: 0 4px 16px rgba(122,20,20,0.5), 0 0 0 4px rgba(201,161,74,0.25); }
}

/* Hide the old bottom submit, keep undo */
#submitBtn { display: none; }
.action-row { justify-content: center; }
.action-row .undo { flex: 0 0 auto; max-width: 220px; }

/* === HOME CARDS — theme-aware (override prior hardcoded green) === */
#homeScreen .game-card {
  background: linear-gradient(145deg, var(--bg-1), var(--bg-2)) !important;
  border: 1px solid var(--accent) !important;
  box-shadow:
    0 14px 38px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.04) inset !important;
}
#homeScreen .game-card:hover {
  border-color: var(--accent-2) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,0.65), 0 0 28px var(--accent) !important;
}
[data-mode="light"] #homeScreen .game-card {
  background: linear-gradient(145deg, #ffffff, #f5f1e8) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08) !important;
}

/* === SMURF RUNNING WITH WINNER FLAG === */
#smurfRun {
  position: fixed;
  bottom: 8%;
  left: -260px;
  width: 200px;
  height: 240px;
  z-index: 9994;
  pointer-events: none;
  display: none;
}
#smurfRun.show {
  display: block;
  animation: smurfRunAcross 5.2s linear forwards;
}
@keyframes smurfRunAcross {
  0%   { left: -260px; transform: translateY(0); }
  10%  { transform: translateY(-12px); }
  20%  { transform: translateY(0); }
  30%  { transform: translateY(-12px); }
  40%  { transform: translateY(0); }
  50%  { transform: translateY(-12px); }
  60%  { transform: translateY(0); }
  70%  { transform: translateY(-12px); }
  80%  { transform: translateY(0); }
  90%  { transform: translateY(-12px); }
  100% { left: 105vw; transform: translateY(0); }
}
.smurf-body { animation: smurfBob 0.28s ease-in-out infinite alternate; transform-origin: 90px 130px; }
@keyframes smurfBob { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
.smurf-leg-a { animation: legKickA 0.3s ease-in-out infinite alternate; transform-origin: 76px 210px; }
.smurf-leg-b { animation: legKickB 0.3s ease-in-out infinite alternate; transform-origin: 104px 210px; }
@keyframes legKickA { from { transform: rotate(-25deg); } to { transform: rotate(15deg); } }
@keyframes legKickB { from { transform: rotate(20deg); } to { transform: rotate(-20deg); } }
.smurf-arm-back { animation: armSwing 0.3s ease-in-out infinite alternate; transform-origin: 62px 140px; }
@keyframes armSwing { from { transform: rotate(-15deg); } to { transform: rotate(35deg); } }

@media (max-width: 700px) { #smurfRun { width: 140px; height: 170px; bottom: 6%; } }

/* === FIXES v14: sticky bulletproof, slower banners, higher leg banner === */
html, body { overflow: visible !important; height: auto !important; min-height: 100vh !important; }
.app, #gameScreen, .game-screen, main { overflow: visible !important; }

.players-board {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 60 !important;
}

/* Leg banner — higher on page, slower */
#legBanner {
  top: 18% !important;
  transform: none !important;
  height: 96px;
}
.leg-banner-track { animation: legBannerSlide 5s linear forwards !important; }

/* Winner sign — slower flash + pulse */
.winner-sign-text {
  animation: signFlash 0.9s steps(2) infinite, signPulse 1.4s ease-in-out infinite alternate !important;
}

/* Remove any lingering smurf styling */
#smurfRun, #dogPeek { display: none !important; }

/* === STATS HUB === */
.modal-overlay#playerStatsModal.show .modal,
.modal-overlay.wide .modal { max-width: 1000px !important; width: 95vw; }
.hub-btn {
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  margin-right: 4px;
}
.hub-btn:hover { border-color: var(--accent); color: var(--accent); }
.hub-btn.danger { color: var(--danger); border-color: var(--danger); }
.hub-btn.danger:hover { background: var(--danger); color: #fff; }

/* === STICKY FIX v15.1: pin players-board BELOW the sticky header === */
.players-board {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 102px !important;          /* below sticky header */
  z-index: 50 !important;          /* below header (100) but above content */
  background: linear-gradient(180deg, rgba(14,20,16,0.95) 0%, rgba(14,20,16,0.88) 100%) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border) !important;
  padding: 10px 0 14px !important;
}
[data-mode="light"] .players-board {
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(245,241,232,0.9)) !important;
  border-bottom: 1px solid rgba(0,0,0,0.1) !important;
}

@media (max-width: 700px) {
  .players-board { top: 76px !important; }
}

/* === BRAND LOGO MARK (image-based) === */
.logo-mark-img {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: block;
}
.logo-mark { display: none !important; }
.logo {
  font-family: 'Bebas Neue', 'Arial Black', Impact, sans-serif !important;
  letter-spacing: 2px;
}
.elite-tag {
  color: var(--accent) !important;
  font-style: normal !important;
  letter-spacing: 4px !important;
}

/* === Throwline Darts lockup ===================================================
   THROWLINE in the display face, then the oche — a 2px gold rule — then DARTS.
   The rule is the one brand device; it runs horizontal in the lockups and on
   the splash, and stands vertical here because a bar has no room for it flat. */
.logo-type { display: flex; align-items: center; gap: 12px; }
.logo .logo-word {
  /* the older `.logo span:first-of-type` rule paints the first span gold and
     outranks a plain two-class selector, and `.logo` sets font-family and
     letter-spacing with !important — so the lockup has to answer in kind */
  font-family: 'Bebas Neue', Impact, Haettenschweiler, 'Arial Narrow', sans-serif !important;
  font-size: 30px;
  letter-spacing: 0.04em !important;
  line-height: 1;
  color: var(--text) !important;
}
.logo .logo-rule {
  width: 2px; height: 22px;
  background: var(--accent);
  display: block; flex-shrink: 0; border-radius: 1px;
}
.logo .elite-tag {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5em !important;
  padding-left: 0.5em;
  text-transform: uppercase;
}
@media (max-width: 700px) {
  .logo-type { gap: 9px; }
  .logo .logo-word { font-size: 24px; letter-spacing: 0.03em !important; }
  .logo .logo-rule { height: 18px; }
  .logo .elite-tag { font-size: 10px; letter-spacing: 0.4em !important; padding-left: 0.4em; }
}
/* On a phone the side-by-side lockup is wide enough to push the nav buttons off
   the screen, so it becomes the stacked lockup and the oche lies flat — the same
   arrangement as the splash, not a compromise. */
@media (max-width: 560px) {
  .logo { gap: 10px; }
  .logo-type { flex-direction: column; align-items: stretch; gap: 3px; }
  .logo .logo-word { font-size: 22px; }
  .logo .logo-rule { width: auto; height: 2px; }
  .logo .elite-tag { font-size: 9px; letter-spacing: 0.34em !important; padding-left: 0.34em; }
}

@media (max-width: 700px) {
  .logo-mark-img { width: 38px; height: 38px; border-radius: 10px; }
}

/* ============================================================================
   DESKTOP: SIDE-BY-SIDE SCORING  (v27)
   ----------------------------------------------------------------------------
   The scoring page was one tall column: scores, then the board, then history —
   so on a laptop you scored with the board off the bottom of the screen and
   scrolled up to read the score. On a desktop there is width going spare and
   height going short, so the two swap axes: the data reads down the LEFT, the
   board and everything you tap to score fills the RIGHT.

   This is CSS only. No markup moved and no JS changed, so every render
   function, the cast layer and the phone layout are all untouched — below
   1024px none of this applies and the page is exactly as it was.

   The split is "read" vs "do": the current visit, the multiplier row, the
   board, the special row and Undo/Submit are all one act of scoring and stay
   together under the hand. The header, player cards, cricket grid and history
   are what you look at.
   ========================================================================== */
@media (min-width: 1024px) {
  :root { --deskhead: 102px; }   /* the sticky app header */

  .game-screen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    grid-auto-rows: min-content;
    column-gap: 28px;
    align-items: start;
    max-width: 1680px;
    margin: 0 auto;
    padding-bottom: 12px;
  }

  .game-header { grid-column: 1 / -1; }

  /* Everything that is not the header or the scoring controls reads down the
     left, in the order it already appears in the markup. */
  .game-screen > *:not(.game-header):not(.score-input-section) { grid-column: 1; }

  /* The right-hand column. Sticky so that however long the left column runs,
     the board never leaves the screen — which was the whole complaint. */
  .score-input-section {
    grid-column: 2;
    grid-row: 2 / span 6;
    position: sticky;
    top: calc(var(--deskhead) + 12px);
    align-self: start;
    /* No trailing margin: a 44px gap under the board was enough on its own to
       give the page a scrollbar, which is exactly what this layout removes. */
    margin-bottom: 0;
  }

  /* The right column has to fit between the app header and the bottom of the
     window, so everything above the board is trimmed to buy the board height.
     The quick-score buttons are the expensive ones: at 56px the visit row
     wrapped onto a second line in the narrower column and cost ~60px. */
  .score-input-section { padding: 16px 18px; }
  .current-throw { margin-bottom: 10px; }
  .visit-row { flex-wrap: nowrap; margin-top: 8px; }
  .quick-btn { width: 48px; height: 48px; font-size: 14px; }

  /* Sized off the VIEWPORT HEIGHT, not the column width: the board is the
     tallest thing on the right and the point is that it fits without
     scrolling. Grows on a big monitor, shrinks on a laptop, never below
     something you can still hit a treble on. */
  .dartboard { width: min(100%, clamp(280px, calc(100vh - 570px), 620px)); }

  /* The players board was sticky so the score stayed visible while you
     scrolled down to the board. There is no scrolling down to the board any
     more, so it goes back to being an ordinary card and stops painting a
     translucent bar over the content beneath it. */
  .players-board {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    background: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 0 !important;
    padding: 0 0 4px !important;
    margin-bottom: 20px;
  }

  /* Side by side in their own column. Stacked, two players alone ran ~850px
     and pushed the history off the bottom, which would have reintroduced the
     scrolling this whole change exists to remove. */
  .players-board {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    align-items: start;
  }
  .player-card { padding: 16px; }

  /* Cricket is the one game with a lot to show on the left: seven rows of
     marks under the player cards. At the phone's cell size that column ran
     160px past the bottom of a laptop screen — so the grid tightens here.
     It is a read-only display, not a tap target, so it loses nothing. */
  .cricket-grid { gap: 3px; padding: 10px; margin-bottom: 20px; }
  .cricket-cell { padding: 5px 6px; }
  .cricket-marks { font-size: 19px; min-height: 22px; }

  /* With a column of its own, the history can show more than five visits. */
  .history-list { max-height: calc(100vh - 520px); }
}

/* ============================================================================
   PHONE: THE MATCH FITS THE SCREEN  (v28)
   ----------------------------------------------------------------------------
   Measured before touching anything, at 390x844: the scoring page was 1504px
   tall, so 660px of scrolling. 501px of screen was spent before the first
   scoring control, the board began at y=781 — below the fold — and Submit sat
   in the player card at the TOP while the board you tap sat at the bottom. The
   sticky player cards then covered the board when you scrolled to it, and the
   app header (181px, four wrapped rows of buttons) was drawn straight over the
   game title.

   So: during a match the phone gets one screen that does not scroll. The
   header collapses to what a match needs, the player cards become a strip, the
   board takes the space that frees up, and every control you touch every visit
   sits underneath it in the thumb zone.

   Scoped to `body:has(#gameScreen:not(.hidden))` so it only applies while a
   match is on screen — the menus, setup, stats and tournament screens are
   untouched and still scroll normally.
   ========================================================================== */
@media (max-width: 700px) {

  body:has(#gameScreen:not(.hidden)) {
    --mhead: 56px;              /* the collapsed header, fixed and exact */
  }

  /* ---- 1. the header stops eating a fifth of the screen ---- */
  body:has(#gameScreen:not(.hidden)) header {
    height: var(--mhead);
    min-height: 0;
    padding: 0 10px;
    align-items: center;
    overflow: hidden;
  }
  /* Tournaments, Stats, Settings, the theme picker and the second-window
     button are all pre-match or desktop things. What stays is the fullscreen
     big-screen button and Home. */
  body:has(#gameScreen:not(.hidden)) #tourneyBtn,
  body:has(#gameScreen:not(.hidden)) #playerStatsBtn,
  body:has(#gameScreen:not(.hidden)) #settingsBtn,
  body:has(#gameScreen:not(.hidden)) #openCastWindowBtn,
  body:has(#gameScreen:not(.hidden)) #modeToggle,
  body:has(#gameScreen:not(.hidden)) .theme-select { display: none; }
  body:has(#gameScreen:not(.hidden)) .logo-mark-img { width: 34px; height: 34px; }
  body:has(#gameScreen:not(.hidden)) .logo-word { font-size: 17px; }
  body:has(#gameScreen:not(.hidden)) .elite-tag { font-size: 9px; }

  /* ---- 2. one screen, no scrolling ---- */
  body:has(#gameScreen:not(.hidden)) #gameScreen {
    height: calc(100dvh - var(--mhead));
    display: flex;
  }
  body:has(#gameScreen:not(.hidden)) .game-screen {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    gap: 6px;
  }

  /* The game title and Rules/Reset/Quit on one line. */
  .game-header {
    flex-wrap: nowrap; gap: 8px;
    margin-bottom: 0; padding-bottom: 6px;
  }
  .game-title { font-size: 16px; }
  .game-title small, #gameSubtitleDisplay { font-size: 11px; }
  .game-header .nav-btn { padding: 6px 9px; font-size: 11px; }

  /* ---- 3. the player cards become a score strip ---- */
  .players-board {
    position: static !important;
    top: auto !important;
    background: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 0 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
  }
  .player-card { padding: 8px 10px; border-radius: 11px; }
  .pc-score { font-size: 34px; line-height: 1.05; }
  .pc-label { font-size: 9px; }
  .pc-name { font-size: 13px; }
  /* Last / Avg / 180s are worth reading between legs, not mid-visit, and they
     are in the history and on the stats screen either way. */
  .pc-stats { display: none; }
  /* Submit moves to the dock at the bottom — see below. */
  .player-card .card-submit { display: none; }

  /* Visit history is a between-legs read too, and on a phone it is the one
     thing that can afford to go. Everything it holds is on the Stats screen. */
  .history-section { display: none; }

  /* Cricket's marks and Around the World's target sit between the strip and
     the board. They shrink first, and the marks grid scrolls inside itself
     rather than pushing the board off the screen. */
  .cricket-grid {
    /* Nine rows of marks want ~240px, which is more than cricket has to spend
       once the strip, the board and the controls have taken theirs. Capped at
       roughly a fifth of the screen and scrolled inside itself — the marks are
       a read, the board is the input, and the board does not give. */
    flex: 0 1 auto; min-height: 0; max-height: 22vh; overflow-y: auto;
    gap: 2px; padding: 6px; margin-bottom: 0;
  }
  .cricket-cell { padding: 3px 4px; font-size: 12px; }
  .cricket-marks { font-size: 15px; min-height: 17px; letter-spacing: 1px; }
  /* Cricket is the only game with more content than screen — it needs ~68px it
     does not have. Both of these give it back where nothing is lost:

     The quick-score buttons are x01 visit totals. 26, 41, 60, 85, 100 and 180
     cannot be scored in a single cricket visit in any meaningful sense, so
     they are dead weight in this game; the cricket grid being on screen is
     exactly the condition, hence the :has().

     And the board floor drops to 210 here, because cricket's marks have to be
     readable at the same time. */
  .game-screen:has(.cricket-grid:not(.hidden)) .quick-side { display: none; }
  .game-screen:has(.cricket-grid:not(.hidden)) .dartboard-wrap { min-height: 210px; }

  .clock-target { flex: 0 0 auto; margin: 0; padding: 6px 10px; }
  .clock-target .target-num { font-size: 30px; }
  .clock-target .target-label { font-size: 9px; }

  /* ---- 4. board first, controls under the thumb ---- */
  .score-input-section {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
    margin-bottom: 0; padding: 8px 10px;
    gap: 6px;
  }
  /* min-height is load-bearing: in cricket the marks grid claimed the whole
     flex column and the board collapsed to nothing. The board is the input
     device — it never gives. Anything above it that cannot fit scrolls inside
     itself instead. */
  .dartboard-wrap  { order: 1; flex: 1 1 auto; min-height: 232px; margin: 0; align-items: center; }
  .current-throw   { order: 2; margin-bottom: 0; }
  .multiplier-row  { order: 3; margin: 0; }
  .special-row     { order: 4; margin: 0; }
  .action-row      { order: 5; margin: 0; gap: 8px; }
  /* The hint explained rings vs wedges; the fat ring targets below make that
     less of a thing to learn, and it costs a line of the board. */
  .board-hint      { display: none; }

  /* Sized by what is left after the controls, not by the width of the screen. */
  .dartboard { width: auto; height: 100%; max-width: 100%; }
  .db-svg { width: auto; height: 100%; max-width: 100%; margin: 0 auto; }

  /* CURRENT VISIT label off. The three dart slots take their own line and the
     six quick scores share the next — deliberately, in that order.

     They will NOT fit on one line: 3 slots + 6 buttons + gaps comes to ~458px
     inside 370px. Forcing `nowrap` there does not just look cramped, it
     overflows horizontally, and a phone answers horizontal overflow by
     widening the layout viewport — the whole app silently rendered at 490px
     and scaled down, which put innerHeight at 1061 instead of 844. Let it
     wrap. */
  .current-throw > div:first-child { display: none; }
  .visit-row { margin-top: 0; gap: 6px; flex-wrap: wrap; justify-content: center; }
  .throw-display { order: -1; flex: 1 0 100%; gap: 6px; margin: 0; }
  .quick-side { gap: 5px; }
  .quick-btn { width: 44px; height: 40px; font-size: 13px; }
  .throw-slot { width: 60px; height: 40px; font-size: 16px; }
  .throw-slot.empty { font-size: 10px; }
  .mult-btn { padding: 11px 6px; font-size: 12px; }

  /* The live Submit down here, where the thumb already is. */
  #submitBtn { display: block; flex: 1; }
  .action-row .undo { flex: 0 0 auto; max-width: 120px; }
  .action-btn { padding: 13px 10px; font-size: 13px; }
}

/* ---- 5. fat ring targets, on touch screens only ----------------------------
   A double renders about 9px across on a 390px phone. These transparent
   sectors are wider than the ring they stand for, so a thumb landing just off
   still scores it. A mouse keeps the board's true geometry. */
.db-touch { pointer-events: none; }
@media (pointer: coarse) {
  .db-touch { pointer-events: auto; }
}

/* ---- version + update, on the Settings screen (v1.4) --------------------- */
.about-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 14px;
}
.about-row span { font-size: 14px; font-weight: 600; }
.about-row b { color: var(--accent); font-weight: 800; letter-spacing: 0.5px; }
.about-row .btn { flex: 0 0 auto; min-width: 0; }
.upd-msg { min-height: 18px; margin: 8px 2px 0; font-size: 13px; color: var(--muted); }
.upd-msg.good { color: var(--accent-3, #00d9a3); }
.upd-msg.bad  { color: var(--danger, #e05b4a); }
.about-note { margin: 8px 2px 0; font-size: 12px; line-height: 1.5; color: var(--muted); }

/* ============================================================================
   PHONE: HEADER AND WIDE TABLES  (v29)
   ----------------------------------------------------------------------------
   Two faults reported from a real phone, 17 Sep 2026.

   1. THE HEADER OVERLAPPED THE WORDMARK. `header` is one flex row with
      space-between, and `.header-actions` wraps. Measured at 360/390/412 px the
      gap between the logo's right edge and the buttons' left edge was exactly
      ZERO at every width — so on any narrower phone the logo is the one that
      loses and THROWLINE gets clipped by the buttons. The wrapped buttons also
      made the sticky header 181 px tall, on a screen that is 900.

   2. THE SUMMARY TABLE BLEW THE LAYOUT VIEWPORT. Eight columns need 436 px.
      The table is a direct child of the card with no scroll container, so it
      pushed the document to 470 px — and `window.innerWidth` then REPORTED 470
      on a 390 px phone. That is the whole app being scaled down to fit, which
      is why the card looked off-centre and the last column was cut. The same
      applies to Stats (ten columns) and tournament standings (seven).

   Both fixes are appended at the end deliberately: the header and table rules
   above accumulated !important over several versions and a rule placed beside
   them loses.
   ========================================================================== */

/* ---- wide tables scroll inside their own box, never past the screen ---- */
.t-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  scrollbar-width: thin;
}
/* max-content + min-width:100% = full width when the columns fit, scroll when
   they do not. Plain width:100% would squash the columns instead. */
.t-scroll > .t-table { width: max-content; min-width: 100%; border-radius: 0; }

@media (max-width: 700px) {
  .t-scroll > .t-table th,
  .t-scroll > .t-table td { white-space: nowrap; }
  /* the player column stays put while the numbers scroll under it, so a row is
     never anonymous */
  .t-scroll > .t-table th:first-child,
  .t-scroll > .t-table td:first-child {
    position: sticky; left: 0; z-index: 2;
    background: var(--bg-1);
    box-shadow: 1px 0 0 var(--border);
  }
  .t-scroll > .t-table th:first-child { background: var(--bg-2); }
  [data-mode="light"] .t-scroll > .t-table td:first-child { background: #fff; }
  [data-mode="light"] .t-scroll > .t-table th:first-child { background: #ece6d8; }

  .summary-screen { margin: 16px 10px; padding: 24px 14px; max-width: none; }
  .trophy { font-size: 56px; }

  /* Home / Play Again / Download PDF is a nowrap flex row. Three buttons need
     381 px, so on a 360 px phone the row — not the table — was what widened the
     layout viewport and shrank the whole app. Isolated by hiding one child at a
     time: with the row hidden the summary measured 360, with the table hidden it
     still measured 381. Let it wrap and centre. */
  .btn-row { flex-wrap: wrap; justify-content: center; gap: 8px; }
  .btn-row > .btn { flex: 1 1 auto; min-width: 0; }
}

/* ---- the header gives the wordmark its own line and never crowds it ---- */
@media (max-width: 700px) {
  header { flex-wrap: wrap; row-gap: 10px; padding: 12px 16px; }
  .logo { flex: 1 1 100%; min-width: 0; }

  /* One row that scrolls sideways, rather than three wrapped rows: the sticky
     header drops from 181 px to about 95. nowrap is only safe because the
     overflow is contained here — on a bare row it widens the layout viewport,
     which is fault 2 all over again. */
  .header-actions {
    flex: 1 1 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    scrollbar-width: none;
    /* room for the fade, so the last button is never sitting under it */
    padding-right: 14px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
            mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
  }
  .header-actions::-webkit-scrollbar { display: none; }
  .header-actions > * { flex: 0 0 auto; }

  /* ⇗ opens a second window for Chrome's "Cast tab", which exists only in
     desktop Chrome — Android sends you to screen mirroring and iOS cannot cast
     a web page at all. A button that can never work does not belong on a
     phone. 📺 (fullscreen big screen) stays: it works everywhere. */
  #openCastWindowBtn { display: none; }
}

/* ============================================================================
   PHONE, DURING A MATCH: MAKE IT FIT  (v30)
   ----------------------------------------------------------------------------
   Reported from a Samsung with the browser toolbar showing, 20 Sep 2026:
   Submit Visit unreachable, a half-row of buttons cut through by the game
   panel, the cricket grid eating the screen, and the score printed twice.

   Measured at 412x780 (a 412x915 phone once the toolbar takes its share):

     header               h 56   (fixed, overflow hidden)
     .header-actions      y 45 -> bottom 77   <- overflows the header by 21px
     #submitBtn           bottom 809          <- 29px BELOW a 780px viewport

   The first is mine. v29 gave .header-actions `flex: 1 1 100%` so the wordmark
   could have its own line on the home screen — but that rule also applied
   DURING a match, where the header is pinned to 56px with overflow hidden. The
   two or three buttons that survive into a match therefore wrapped onto a
   second line and were sliced in half by the clip.

   v29's own test asserted the header height and that nothing widened the
   layout viewport, but it measured the HOME screen. Nothing checked that the
   in-match header still fit, which is exactly the screen it broke.
   ========================================================================== */
@media (max-width: 700px) {
  /* ---- 1. during a match the header goes back to one row ---- */
  body:has(#gameScreen:not(.hidden)) header { flex-wrap: nowrap; row-gap: 0; }
  body:has(#gameScreen:not(.hidden)) .logo { flex: 0 1 auto; }
  body:has(#gameScreen:not(.hidden)) .header-actions {
    flex: 0 1 auto;
    /* the strip keeps its sideways scroll, it just no longer claims a line */
    max-width: 62%;
  }

  /* ---- 2. the score is not printed twice ---- */
  body:has(#gameScreen:not(.hidden)) .cricket-cell.cricket-pts { display: none; }

  /* ---- 3. the marks grid gives the board and the controls their room back ---- */
  body:has(#gameScreen:not(.hidden)) .cricket-grid { gap: 2px; padding: 6px; margin-bottom: 8px; }
  body:has(#gameScreen:not(.hidden)) .cricket-cell { padding: 4px 2px; font-size: 13px; }
  body:has(#gameScreen:not(.hidden)) .cricket-cell.header,
  body:has(#gameScreen:not(.hidden)) .cricket-cell.label { font-size: 12px; }
}

/* ---- 4. the primary action is ALWAYS reachable (v30, continued) ------------
   Chasing pixels here is a losing game: every phone gives the page a different
   height once its browser toolbar, gesture bar and status bar have taken their
   share, and a layout tuned to 844 breaks at 780. So rather than trimming until
   it happens to fit, the action row is pinned to the bottom of the match screen
   and the dartboard gives up the space instead. Submit Visit cannot be pushed
   off the screen again on any height.                                        */
@media (max-width: 700px) {
  body:has(#gameScreen:not(.hidden)) .game-screen { min-height: 0; overflow: hidden; }

  body:has(#gameScreen:not(.hidden)) .action-row {
    flex: 0 0 auto;
    position: sticky; bottom: 0; z-index: 3;
    margin-top: auto;               /* take up the slack, sit on the floor */
    padding-top: 6px;
    background: linear-gradient(to top, var(--bg-1) 72%, transparent);
  }

  /* the board is the elastic part: it had a 210-232px floor that the small
     screens could not pay for */
  body:has(#gameScreen:not(.hidden)) .dartboard-wrap { min-height: 132px; }
  .game-screen:has(.cricket-grid:not(.hidden)) .dartboard-wrap { min-height: 132px; }

  /* and the marks grid scrolls internally rather than growing without limit */
  /* The marks grid is the elastic one in cricket: seven rows of ticks stay
     perfectly readable in a scroller, whereas a control pushed off the bottom
     is simply unusable. 30vh was still too generous at 700-740px tall, where
     MISS ended up under the action row. */
  body:has(#gameScreen:not(.hidden)) .cricket-grid {
    flex: 0 1 auto; min-height: 0; max-height: 22vh; overflow-y: auto;
  }
}

/* ---- 5. MISS must not hide under the pinned action row (v30, continued) ----
   With the action row on the floor, the last control above it was tucked
   underneath. MISS is a plain full-width button and the easiest 20px in the
   layout to give back — it stays a comfortable target, it just stops being a
   slab. */
@media (max-width: 700px) {
  body:has(#gameScreen:not(.hidden)) #specialRow { flex: 0 0 auto; margin-bottom: 2px; }
  body:has(#gameScreen:not(.hidden)) .num-btn.miss {
    padding: 8px 12px; font-size: 15px; min-height: 40px; letter-spacing: 2px;
  }
}

/* ---- 6. the very short phones (v30, continued) ----------------------------
   A 360x700 page — a small phone with the toolbar showing — was still 8px
   short in cricket. The board gives up the last of it rather than a control:
   a slightly smaller dartboard is a smaller target, a control under the action
   row is no target at all. */
@media (max-width: 700px) and (max-height: 720px) {
  body:has(#gameScreen:not(.hidden)) .dartboard-wrap { min-height: 104px; }
  .game-screen:has(.cricket-grid:not(.hidden)) .dartboard-wrap { min-height: 104px; }
  body:has(#gameScreen:not(.hidden)) .cricket-grid { max-height: 19vh; }
  body:has(#gameScreen:not(.hidden)) .num-btn.miss { min-height: 36px; padding: 6px 12px; }
}

/* ============================================================================
   PHONE: THE CRICKET TABLE TURNS ON ITS SIDE  (v31)
   ----------------------------------------------------------------------------
   "The tables are taking up far too much real estate. The scoring board cannot
   be reduced, so we need to look at options for the tables." — 20 Sep 2026.

   Right diagnosis. The table was simply the wrong SHAPE for a phone: eight rows
   deep and three columns wide, growing down the axis where space is scarce and
   leaving the horizontal axis half empty. Trimming padding was never going to
   buy more than a few pixels.

   So it is transposed — targets across the top, one row per player:

       #    20  19  18  17  16  15  Bull
       P1    /   X   ⊗           ⊗
       P2    ⊗       /       X

   That is 3 rows for two players instead of 8, and it reads the way a chalkboard
   in a pub does. No markup change was needed: the cells are already emitted
   row-major, so `grid-auto-flow: column` with the right row count lays the exact
   same elements out sideways. Only the row count had to come from JS, because
   repeat(calc(--players + 1)) is not valid CSS.

   It also scales the right way. Vertical, the table was eight rows tall no
   matter how many were playing. Transposed it is players + 1, so two players
   cost three rows and four cost five.
   ========================================================================== */
@media (max-width: 700px) {
  body:has(#gameScreen:not(.hidden)) .cricket-grid {
    grid-template-columns: 76px !important;   /* beats the inline style app.js sets */
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    grid-template-rows: repeat(var(--cricket-rows, 3), auto);
    max-height: none;                          /* it no longer needs a scroller */
    overflow: visible;
    gap: 3px;
    padding: 6px;
  }

  /* the first column is now the player names, so it must not push the marks out */
  body:has(#gameScreen:not(.hidden)) .cricket-cell.header {
    text-align: left; padding-left: 6px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    /* 76px and 11px fit "Player 1" whole; a longer name still ellipses rather
       than stealing a mark column. */
    font-size: 11px; letter-spacing: 0;
  }
  body:has(#gameScreen:not(.hidden)) .cricket-cell.label { font-size: 12px; }
  body:has(#gameScreen:not(.hidden)) .cricket-cell { padding: 3px 1px; }
  body:has(#gameScreen:not(.hidden)) .cricket-marks {
    font-size: 17px; min-height: 20px; letter-spacing: 0;
  }
}

/* ===========================================================================
   v32 — THE MATCH SUMMARY TABLE ON A PHONE (v3.1)
   ---------------------------------------------------------------------------
   Per-game stats gave five of the six games their own, shorter column list,
   and x01 one more column than before. The table was still sized for one
   fixed set, so cricket needed 381px of a 360px box — twenty-one pixels over,
   which on a phone does not read as "scroll me", it reads as broken.

   Two changes, in this order of importance:

   1. HEADERS MAY WRAP, VALUES MAY NOT. "Darts / target" over two lines costs
      one row of height, once. The same header on one line costs 60px of width
      on every row underneath it, and the number at the end of the row is what
      gets sliced off. `.t-scroll` sets `white-space: nowrap` on both, which is
      right for the career table (long player names) and wrong here.
   2. Tighter cells and a smaller face, summary only. The Stats hub table keeps
      its own sizing — it has a player-name column and an Actions column and
      genuinely does need to scroll.

   Scoped to #summaryScreen so nothing else in the app moves.
   ========================================================================= */
@media (max-width: 700px) {
  #summaryScreen .t-table { font-size: 10px; }
  #summaryScreen .t-table th,
  #summaryScreen .t-table td { padding: 5px 5px; }
  /* `width: max-content` is the whole reason a header never wrapped: it means
     "as wide as you need with no wrapping", so permission to wrap changed
     nothing on its own. The summary is short numbers and a name, so it is
     bounded to the box instead and the headers take the second line. */
  #summaryScreen .t-scroll > .t-table { width: 100%; min-width: 0; }
  #summaryScreen .t-scroll > .t-table th {
    white-space: normal; line-height: 1.2; vertical-align: bottom;
  }
  #summaryScreen .t-scroll > .t-table td { white-space: nowrap; }
  /* x01 has nine columns and still will not fit 360px, so it keeps the sticky
     name column from v29 — a scrolling row must never go anonymous. The other
     five games no longer scroll at all, which is the point of this block. */
}

/* ===========================================================================
   v33 — SETTING UP A BOARD (v3.2)
   ---------------------------------------------------------------------------
   The diagram is inline SVG, drawn from the app's own CSS variables, so it
   follows every theme and every custom text colour without a second asset and
   without a light-mode copy that goes stale.

   It is drawn TO SCALE at 120px per metre: the 2.93m diagonal in the picture
   really is the hypotenuse of the 1.73 and the 2.37. That is the whole point
   of the diagonal check, and a diagram that cheated the geometry would be
   teaching the reader the wrong thing while claiming to prove it.

   The label text is sized in viewBox units, so it shrinks with the picture. At
   a phone's ~340px the 21px labels land near 11px on screen, which is why the
   figures are only ever the short form here — every number is repeated in full,
   metric and imperial, in the table underneath.
   ========================================================================= */
.hero-btn { margin-top: 18px; }

.bs-diagram {
  display: block;
  width: 100%; height: auto;
  margin: 22px 0 8px;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 6px;
}
#boardSetupModal .t-scroll { margin: 4px 0 14px; }
#boardSetupModal .t-table td:first-child { white-space: normal; }
.bs-note {
  border-left: 3px solid var(--accent);
  padding: 8px 0 8px 14px;
  margin: 14px 0;
  color: var(--muted);
}
.bs-note strong { color: var(--text); }
.bs-src {
  margin-top: 16px; padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12px; line-height: 1.6; color: var(--muted);
}
@media (max-width: 700px) {
  .bs-diagram { margin: 16px 0 6px; padding: 6px 2px; }
  #boardSetupModal .t-table { font-size: 11px; }
  #boardSetupModal .t-table th,
  #boardSetupModal .t-table td { padding: 6px 7px; }
  #boardSetupModal .t-scroll > .t-table { width: 100%; min-width: 0; }
  #boardSetupModal .t-scroll > .t-table th { white-space: normal; }
}


/* ===== v3.8 — play on screen (play.js) ======================================
   A thrown game uses the same match screen as a scored one. The scoring pad's
   controls — multipliers, MISS, Undo, Submit, quick scores — have no meaning
   when the dart decides where it went, so they go, and the board gets the
   room. Appended last on purpose, like every block since v29. */
.dartboard-wrap { position: relative; }
.play-layer {
  position: absolute; inset: 0; z-index: 5;
  touch-action: none; cursor: crosshair;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
body:not(.play-on) .play-layer { display: none; }

body.play-on #gameScreen .multiplier-row,
body.play-on #gameScreen .special-row,
body.play-on #gameScreen .action-row,
body.play-on #gameScreen .quick-side,
body.play-on #gameScreen .card-submit { display: none !important; }

/* The hint line is the instruction in a thrown game, on every screen size —
   it was hidden on phones because the pad explained itself. */
body.play-on #gameScreen .board-hint {
  display: block !important; order: 0; text-align: center;
  font-size: 12px; letter-spacing: 1px; color: var(--muted); margin: 2px 0;
}
body.play-on #gameScreen .board-hint.play-hint-flash { color: var(--accent-2, #e0bb5e); font-weight: 700; }

.play-dart .pd-shadow path { fill: #000; }
.play-dart .pd-knurl { stroke: rgba(18,20,23,0.55); stroke-width: 0.42; }
/* The last few frames of a hit: the dart shivers about its point. The
   transform lives on .pd-wob, which carries no transform attribute of its
   own for CSS to fight with. */
.play-dart.pd-hit .pd-wob { animation: pdWob 0.36s ease-out; transform-box: view-box; transform-origin: 0 0; }
@keyframes pdWob {
  0%   { transform: rotate(0deg); }
  18%  { transform: rotate(4.5deg); }
  42%  { transform: rotate(-2.8deg); }
  68%  { transform: rotate(1.3deg); }
  100% { transform: rotate(0deg); }
}
.play-dart.pd-out { opacity: 0; transition: opacity 0.22s ease-out; }
/* The layer the darts are drawn on (see svg() in play.js). Overflow visible:
   the dart leaves the hand below the board and flies up into it. */
#dartboard { position: relative; }
.play-overlay { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; will-change: transform; }
body:not(.play-on) .play-overlay { display: none; }
/* The scrolling background (32 marquee rows and the stage lights) holds
   still while darts are being thrown. It keeps its look; it just stops
   asking the phone for a full recomposite on every frame of a flick. */
body.play-on .stage-bg .marquee-track,
body.play-on .stage-lights { animation-play-state: paused !important; }
.play-reticle circle, .play-reticle line {
  fill: none; stroke: #fff; stroke-width: 1.8;
  filter: drop-shadow(0 0 1.4px rgba(0,0,0,0.95));
}

/* Setup: the play-mode toggle wears the match-type toggle's clothes. Its
   own class, not .mt-btn, because setMatchTypeUI() clears .active on every
   .mt-btn it finds. */
.pm-btn, .ts-btn {
  flex: 1 1 auto; padding: 14px 16px; background: var(--bg-2);
  border: 2px solid var(--border); color: var(--muted); border-radius: 10px;
  cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 700;
  letter-spacing: 0.5px; transition: all 0.18s;
}
.pm-btn:hover, .ts-btn:hover { color: var(--text); border-color: var(--accent); }
.pm-btn.active, .ts-btn.active {
  background: linear-gradient(135deg, var(--accent-3), #5a0e0e);
  color: var(--accent-2); border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(122,20,20,0.4);
}

/* v6.4 – throwing style buttons: a line of explanation under each */
.ts-btn { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 15px; }
.ts-btn small { font-weight: 500; font-size: 12px; letter-spacing: 0; opacity: .8; line-height: 1.3; }
.mp-throw-note { margin: 4px 0 10px; font-size: 14px; color: var(--muted); }
.mp-throw-note b { color: var(--accent-2); }

/* Setup: the computer's row */
.cpu-row input:disabled { opacity: 1; color: var(--text); cursor: default; -webkit-text-fill-color: var(--text); }
.cpu-row .cpu-level { flex: 0 0 auto; width: 104px; min-width: 0; }
/* On a phone the name needs the whole box, so the difficulty drops to a line
   of its own under it, lined up with the name rather than the number. */
@media (max-width: 480px) {
  .cpu-row { flex-wrap: wrap; row-gap: 6px; }
  .cpu-row .cpu-level { order: 3; width: calc(100% - 46px); margin-left: 46px; }
}

/* Desktop: the pad's rows are gone, so the board takes back their height.
   The v1.2 clamp subtracted 570px for them. */
@media (min-width: 1024px) {
  body.play-on .dartboard { width: min(100%, clamp(280px, calc(100vh - 410px), 620px)); }
}
.btn-add-cpu { margin-top: 8px; }

/* v4.0 — each player's flight colours beside their name in a thrown game */
/* Out of the flow, in the card's bottom corner: in the name it widened a
   three-player row past a 412px phone and the whole app scaled down. */
.player-card { position: relative; }
.player-card .pd-swatch { position: absolute; right: 9px; top: 9px; width: 11px; height: 15px; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5)); }
/* v4.2: top corner, clear of Killer's lives box and the stats rows along the
   bottom. The x01 finish badge owns that corner when it shows, so the swatch
   steps aside for it. */
.player-card:has(.checkout-badge) .pd-swatch { display: none; }

/* ===== v4.3 — play mates online (mp.js) ===================================== */
.mp-modal { max-width: 460px; }
.mp-lead { color: var(--muted); margin: 0 0 12px; }
.mp-choice { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.mp-or { text-align: center; color: var(--muted); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }
.mp-join { display: flex; gap: 8px; }
.mp-join input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 6px; font-size: 22px; text-align: center; font-weight: 800; }
.mp-rejoin { width: 100%; margin-bottom: 12px; }
.mp-code-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-2); margin-bottom: 14px; }
.mp-code-label { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.mp-code { font-family: 'Bebas Neue', Impact, 'Arial Black', sans-serif; font-size: 44px; letter-spacing: 8px; color: var(--accent-2); line-height: 1; }
.mp-players-head { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin: 4px 0 6px; }
.mp-players { padding-left: 24px; margin: 0 0 12px; max-height: 240px; overflow: auto; }
.mp-players li { padding: 7px 0; border-bottom: 1px solid var(--border); }
.mp-tag { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; padding: 2px 6px; border-radius: 6px; background: var(--bg-2); border: 1px solid var(--border); color: var(--muted); margin-left: 6px; }
.mp-tag.mp-you { color: var(--accent-2); border-color: var(--accent); }
.mp-wait { color: var(--muted); text-align: center; font-style: italic; }
.mp-status { min-height: 1.2em; margin: 10px 0 0; color: var(--muted); }
.mp-status.mp-bad { color: #ff6b6b; }
.mp-summary-bar { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.mp-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--bg-2); color: var(--text); border: 1px solid var(--accent); padding: 10px 16px; border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; z-index: 9999; max-width: calc(100vw - 32px); text-align: center; }
.mp-toast.show { opacity: 1; transform: translate(-50%, 0); }
.mp-return { position: fixed; right: 16px; bottom: 16px; z-index: 9000; padding: 12px 18px; border-radius: 999px; border: 2px solid var(--accent); background: linear-gradient(135deg, var(--accent-3), #5a0e0e); color: var(--accent-2); font: inherit; font-weight: 800; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,0.45); }
/* A local reset would put this phone out of step with the others. */
body.mp-on #resetBtn, body.mp-on #summaryReplayBtn { display: none !important; }
/* Five or more players: one sideways strip of cards (see centreActiveCard). */
body.play-on #playersBoard:has(.player-card:nth-child(5)) { display: flex !important; overflow-x: auto; gap: 8px; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
body.play-on #gameScreen > .game-screen { min-width: 0; }   /* a flex item: without this the strip's full width pushes it wider than the phone */
body.play-on #playersBoard:has(.player-card:nth-child(5)) .player-card { flex: 0 0 clamp(118px, 30%, 190px); }

/* ===== v4.4 — match chat (mp.js) =========================================== */
.mp-chat-head { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin: 14px 0 6px; }
.mp-chat { display: flex; flex-direction: column; gap: 8px; }
.mp-chat-list { list-style: none; padding: 8px; margin: 0; height: 180px; overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-2); display: flex; flex-direction: column; gap: 6px; }
.modal .mp-chat-list li { margin: 0; line-height: 1.35; }
.mp-chat-empty { color: var(--muted); font-style: italic; text-align: center; margin: auto 0; }
.mp-msg { max-width: 85%; align-self: flex-start; background: var(--bg-1); border: 1px solid var(--border); border-radius: 12px 12px 12px 4px; padding: 6px 10px; }
.mp-msg.mine { align-self: flex-end; border-radius: 12px 12px 4px 12px; border-color: var(--accent); }
.mp-msg.react { background: none; border: none; padding: 0 4px; }
.mp-msg.react .mp-msg-text { font-size: 26px; line-height: 1.1; }
.mp-msg-who { display: block; font-size: 11px; font-weight: 700; color: var(--accent-2); }
.mp-msg-who time { font-weight: 400; color: var(--muted); margin-left: 4px; }
.mp-msg-text { display: block; color: var(--text); overflow-wrap: anywhere; }
.mp-react-row { display: flex; gap: 6px; justify-content: space-between; }
.mp-react { flex: 1; min-height: 40px; font-size: 20px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-2); cursor: pointer; }
.mp-react:active { transform: scale(0.94); }
.mp-chat-form { display: flex; gap: 8px; margin: 0; }
.mp-chat-form input { flex: 1; min-width: 0; }
.mp-chat-form .btn { flex: 0 0 auto; padding-left: 16px; padding-right: 16px; }

.mp-chat-btn { position: fixed; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 8990; width: 50px; height: 50px; border-radius: 50%; border: 2px solid var(--accent); background: var(--bg-1); font-size: 22px; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,0.45); }
.mp-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #e0322b; color: #fff; font-size: 12px; font-weight: 800; line-height: 20px; }

.mp-chat-drawer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9500; background: var(--bg-1); border-top: 2px solid var(--accent); border-radius: 18px 18px 0 0; padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -12px 30px rgba(0,0,0,0.5); transform: translateY(105%); visibility: hidden; transition: transform 0.25s ease-out, visibility 0s linear 0.25s; max-width: 560px; margin: 0 auto; }
.mp-chat-drawer.show { transform: none; visibility: visible; transition: transform 0.25s ease-out, visibility 0s; }
.mp-chat-drawer .mp-chat-list { height: min(42vh, 320px); }
.mp-drawer-head { display: flex; justify-content: space-between; align-items: center; font-weight: 800; margin-bottom: 8px; }
.mp-drawer-head small { color: var(--muted); font-weight: 400; letter-spacing: 3px; margin-left: 6px; }

.mp-bubbles { position: fixed; top: calc(64px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 9400; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; width: min(92vw, 420px); }
.mp-bubble { background: var(--bg-1); border: 1px solid var(--accent); color: var(--text); border-radius: 999px; padding: 7px 14px; box-shadow: 0 6px 18px rgba(0,0,0,0.4); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; animation: mpBubbleIn 0.25s ease-out; transition: opacity 0.4s, transform 0.4s; }
.mp-bubble b { color: var(--accent-2); }
.mp-bubble.react { font-size: 22px; }
.mp-bubble.out { opacity: 0; transform: translateY(-8px); }
@keyframes mpBubbleIn { from { opacity: 0; transform: translateY(-10px); } }
/* The code box and the chat box sit outside .form-row, so they get the same
   field styling here (16px so iOS does not zoom on focus). */
.mp-join input, .mp-chat-form input {
  padding: 12px 14px; background: var(--bg-0); border: 1px solid var(--border);
  color: var(--text); border-radius: 8px; font-size: 16px; font-family: inherit;
}
.mp-join input { font-size: 22px; }
[data-mode="light"] .mp-join input, [data-mode="light"] .mp-chat-form input { background: #fff; }
.mp-code { font-size: clamp(30px, 9vw, 44px); letter-spacing: 6px; }
.mp-code-row .btn { flex: 0 0 auto; }

/* ===== v4.5 — online tournaments (mp.js) =================================== */
.mp-tourney { border: 1px solid var(--accent); border-radius: 12px; padding: 12px 14px; margin: 6px 0 12px; background: var(--bg-2); }
.mp-t-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-weight: 800; }
.mp-t-head small { color: var(--muted); font-weight: 400; text-align: right; }
.mp-t-champ { margin: 10px 0 4px; padding: 10px; border-radius: 10px; text-align: center; font-weight: 800; font-size: 18px; color: var(--accent-2); background: linear-gradient(135deg, var(--accent-3), #5a0e0e); }
.mp-t-round { margin: 10px 0 4px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.mp-t-fixtures { list-style: none; padding: 0; margin: 0; }
.modal .mp-t-fixtures li { margin: 0; padding: 5px 8px; border-radius: 8px; line-height: 1.4; }
.mp-t-fixtures li span { color: var(--muted); margin: 0 4px; }
.mp-t-fixtures li.done { color: var(--muted); }
.mp-t-fixtures li.done b { color: var(--text); }
.mp-t-fixtures li.next { background: var(--bg-1); border: 1px solid var(--accent); color: var(--text); font-weight: 700; }
.mp-t-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
.mp-t-table th, .mp-t-table td { padding: 5px 6px; border-bottom: 1px solid var(--border); text-align: center; }
.mp-t-table th:first-child, .mp-t-table td:first-child { text-align: left; }
.mp-t-go, .mp-t-end { width: 100%; margin-top: 10px; }

/* ===== v4.7 — Professional Scoring / Fun Zone (zone.js) ==================== */
body.zone-pro .fun-only, body.zone-fun .pro-only { display: none !important; }
/* On the choice itself the header keeps only the look controls. */
body.zone-choose .header-actions > :not(#themeSelect):not(#modeToggle) { display: none !important; }

#zoneScreen { position: relative; z-index: 1; padding: 48px 20px 40px; max-width: 980px; margin: 0 auto; }
.zone-intro { text-align: center; margin-bottom: 28px; }
.zone-intro h1 { font-size: clamp(34px, 7vw, 56px); margin: 0 0 8px; }
.zone-intro p { color: var(--muted); font-size: 18px; margin: 0; }
.zone-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.zone-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-align: left;
  padding: 26px 24px; border-radius: 18px; cursor: pointer; font: inherit; color: var(--text);
  background: var(--bg-1); border: 2px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.zone-card:hover, .zone-card:focus-visible { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 14px 36px rgba(0,0,0,0.45); outline: none; }
.zone-card-fun { background: linear-gradient(160deg, var(--accent-3), #2a0707 70%); border-color: var(--accent); }
.zone-icon { font-size: 44px; line-height: 1; }
.zone-name { font-size: 24px; font-weight: 800; letter-spacing: 0.3px; }
.zone-desc { color: var(--muted); line-height: 1.5; }
.zone-card-fun .zone-desc { color: #e9dcc0; }
.zone-go { margin-top: auto; padding-top: 6px; font-weight: 800; color: var(--accent-2); }
@media (max-width: 480px) {
  #zoneScreen { padding: 28px 16px 32px; }
  .zone-card { padding: 20px 18px; }
  .zone-icon { font-size: 36px; }
  .zone-name { font-size: 21px; }
}
[data-mode="light"] .zone-card-fun .zone-desc { color: #f3ead6; }

/* v4.7 – Professional Scoring has no chat: every chat surface is Fun Zone only. */
body.zone-pro .mp-chat, body.zone-pro .mp-chat-btn, body.zone-pro .mp-chat-drawer, body.zone-pro .mp-bubbles, body.zone-pro #mpPanel,
body.zone-choose .mp-chat-btn, body.zone-choose .mp-chat-drawer, body.zone-choose .mp-bubbles { display: none !important; }

/* v4.7 – Fun Zone quick starts: two action tiles in their own row */
.fun-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; max-width: 760px; margin: 32px auto 8px; padding: 0 16px; }
.fun-tile {
  display: flex; align-items: center; gap: 14px; text-align: left; width: 100%;
  padding: 16px 18px; border-radius: 16px; cursor: pointer; font: inherit; color: #fff;
  background: linear-gradient(150deg, rgba(122,20,20,0.92), rgba(42,7,7,0.92));
  border: 1.5px solid rgba(201,161,74,0.75);
  box-shadow: 0 10px 28px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.fun-tile + .fun-tile { background: linear-gradient(150deg, rgba(28,36,58,0.94), rgba(12,16,28,0.94)); }
.fun-tile:hover, .fun-tile:focus-visible { transform: translateY(-2px); border-color: var(--accent-2); box-shadow: 0 14px 34px rgba(0,0,0,0.55), 0 0 0 3px rgba(201,161,74,0.18); outline: none; }
.fun-tile:active { transform: translateY(0); }
.fun-tile-icon { flex: 0 0 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font-size: 26px; background: rgba(0,0,0,0.35); border: 1px solid rgba(201,161,74,0.4); }
.fun-tile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fun-tile-title { font-weight: 800; font-size: 17px; color: var(--accent-2); letter-spacing: 0.2px; }
.fun-tile-sub { font-size: 13px; color: rgba(255,255,255,0.78); line-height: 1.3; }
.fun-tile-go { flex: 0 0 auto; font-size: 28px; line-height: 1; color: var(--accent); transition: transform 0.15s; }
.fun-tile:hover .fun-tile-go { transform: translateX(3px); }
@media (max-width: 560px) {
  .fun-actions { grid-template-columns: 1fr; gap: 12px; margin-top: 22px; }
  .fun-tile { padding: 14px 16px; }
  .fun-actions { padding: 0; }
}

/* v5.1 – voice notes in the match chat */
.mp-chat-form { position: relative; }
.mp-mic { flex: 0 0 46px; width: 46px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-2); color: var(--text);
  font-size: 20px; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: background .15s, transform .15s; }
.mp-mic:hover { border-color: var(--accent); }
.mp-recording .mp-mic { background: #c0142c; border-color: #ff5a4e; transform: scale(1.12); box-shadow: 0 0 0 6px rgba(192,20,44,.25); }
.mp-rec { position: absolute; left: 0; top: 0; bottom: 0; right: 54px; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 0 12px;
  background: var(--bg-1); border: 1px solid #c0142c; border-radius: 12px; font-size: 13px; color: var(--text); pointer-events: none; }
.mp-rec i { width: 10px; height: 10px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 8px #ff3b30; animation: mpRecBlink 1s infinite; flex: 0 0 auto; }
.mp-rec-t { font-weight: 800; font-variant-numeric: tabular-nums; }
.mp-rec-hint { color: var(--muted); font-size: 11px; line-height: 1.25; }
.mp-rec-cancel .mp-rec { border-color: var(--muted); }
.mp-rec-cancel .mp-rec-hint { font-size: 0; }
.mp-rec-cancel .mp-rec-hint::before { content: 'Let go to cancel'; font-size: 12px; color: #ff8a80; }
.mp-rec-cancel .mp-mic { background: var(--bg-2); border-color: var(--muted); transform: none; box-shadow: none; }
@keyframes mpRecBlink { 50% { opacity: .25; } }

.mp-voice { display: flex; align-items: center; gap: 10px; min-width: 200px; padding: 2px 0; }
.mp-voice-play { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--accent); color: #111; display: grid; place-items: center; }
.mp-vp-icon { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent #111; margin-left: 3px; }
.mp-voice.playing .mp-vp-icon { width: 11px; height: 13px; border: none; margin: 0; background: linear-gradient(90deg, #111 0 35%, transparent 35% 65%, #111 65%); }
.mp-voice-wave { position: relative; flex: 1; height: 28px; display: flex; align-items: center; gap: 2px; overflow: hidden; }
.mp-voice-wave i { flex: 1; min-width: 2px; border-radius: 2px; background: var(--muted); opacity: .75; }
.mp-voice-prog { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, transparent, rgba(224,187,94,.35)); mix-blend-mode: screen; pointer-events: none; }
.mp-voice.playing .mp-voice-wave i { background: var(--accent-2); opacity: 1; }
.mp-voice-dur { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* v5.2 – TV mode: a screen that watches an online match */
.mp-code-btns { display: flex; gap: 8px; flex: 0 0 auto; }
.mp-screens { margin: 6px 0 10px; font-size: 13px; color: var(--accent-2); }
.mp-tv-panel { max-width: 440px; text-align: center; }
.mp-tv-qr { width: 220px; height: 220px; margin: 12px auto; background: #fff; border-radius: 14px; padding: 8px; }
.mp-tv-qr svg { width: 100%; height: 100%; display: block; }
.mp-tv-link code { display: block; font-size: 12px; color: var(--muted); word-break: break-all; background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px; }
.mp-tv-or { font-size: 13px; color: var(--muted); margin: 10px 0 4px; }
.mp-tv-or b { color: var(--accent-2); letter-spacing: 1px; }
.mp-tv-tip { font-size: 12px; color: var(--muted); margin-top: 10px; line-height: 1.5; }

body.mp-tv > .app > header, body.mp-tv header { display: none !important; }
body.mp-tv #gameScreen .game-header > div:last-child,
body.mp-tv #mpChatBtn, body.mp-tv #mpReturn, body.mp-tv #mpChatDrawer,
body.mp-tv #summaryScreen .btn-row, body.mp-tv #mpSummaryBar, body.mp-tv #summaryHomeBtn,
body.mp-tv #homeScreen, body.mp-tv #zoneScreen { display: none !important; }
body.mp-tv .mp-bubbles { top: 3vh; width: min(60vw, 900px); }
body.mp-tv .mp-bubble { font-size: clamp(18px, 1.5vw, 28px); padding: 12px 22px; }


.mp-tv-screen { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 4vh 4vw;
  background: radial-gradient(ellipse at 50% 30%, rgba(122,20,20,.35), transparent 60%), linear-gradient(160deg, #0b0d14, #06070a); color: var(--text, #f1ece0); }
.mp-tv-screen.hidden { display: none; }
.mp-tv-card { text-align: center; width: min(92vw, 1100px); }
.mp-tv-brand { font-family: 'Bebas Neue', Impact, 'Arial Black', sans-serif; letter-spacing: .35em; color: var(--accent-2, #e0bb5e); font-size: clamp(16px, 1.6vw, 28px); }
.mp-tv-brand span { opacity: .7; }
.mp-tv-title { font-size: clamp(34px, 4vw, 80px); margin: 1vh 0 3vh; line-height: 1.05; }
.mp-tv-sub { font-size: clamp(18px, 1.8vw, 34px); color: var(--muted, #a9a39a); margin: 2vh 0; }
.mp-tv-join { display: flex; gap: 16px; justify-content: center; }
.mp-tv-join input { width: 7.5em; font-size: clamp(32px, 4vw, 72px); letter-spacing: .25em; text-align: center; text-transform: uppercase; padding: .2em .4em; border-radius: 16px; }
.mp-tv-join .btn { font-size: clamp(20px, 2vw, 36px); padding: 0 1.2em; }
.mp-tv-code-l { font-size: clamp(14px, 1.2vw, 22px); letter-spacing: .3em; text-transform: uppercase; color: var(--muted, #a9a39a); }
.mp-tv-code { font-family: 'Bebas Neue', Impact, 'Arial Black', sans-serif; font-size: clamp(60px, 9vw, 180px); letter-spacing: .15em; color: var(--accent-2, #e0bb5e); line-height: 1; }
.mp-tv-players { list-style: none; padding: 0; margin: 3vh auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2vw; max-width: 1100px; }
.mp-tv-players li { font-size: clamp(20px, 2vw, 38px); font-weight: 700; padding: .35em .9em; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(201,161,74,.4); }
.mp-tv-players .mp-tv-none { opacity: .6; font-weight: 400; }
.mp-tv-status { min-height: 1.5em; font-size: clamp(16px, 1.4vw, 26px); color: var(--muted, #a9a39a); }
.mp-tv-status.bad { color: #ff8a80; }
.mp-tv-sound { position: fixed; right: 2vw; bottom: 3vh; z-index: 9900; font-size: clamp(16px, 1.3vw, 24px); padding: .6em 1.1em; border-radius: 999px;
  border: 1px solid var(--accent, #c9a14a); background: rgba(0,0,0,.6); color: #fff; cursor: pointer; }
.mp-tv-sound.hidden { display: none; }
.mp-code-btns { flex-direction: column; gap: 6px; }
.mp-code-btns .btn { padding: 8px 14px; font-size: 14px; min-height: 0; }
/* v5.2 – TV: chat on the left under the visit history */
.mp-tv-chat { display: none; }
body.mp-tv.mp-tv-board .mp-bubble:not(.react) { display: none; }
.mp-tv-sound.mp-tv-sound-on { font-size: clamp(20px, 1.6vw, 30px); padding: .35em .6em; opacity: .75; }

/* ==========================================================================
   v5.5 – THE TV LAYOUT. One fixed screen, whatever size the TV says it is.
   A TV browser often reports 960×540 (a 1080p panel at 2× pixels), which is
   under the app's 1024px desktop breakpoint – so the v5.2 layout, built on
   the desktop grid, fell back to the phone's stacked layout: scores in the
   middle, board and chat off the bottom. This grid owns the whole viewport
   in every size, and everything is sized off the screen HEIGHT (vh), so it
   is the same picture at 960×540, 1080p and 4K.

     ┌──────────── 40% ────────────┬──────────── 60% ─────────────┐
     │ game title                  │  current visit · who's up    │
     │ player cards                │                              │
     │ (ATW target / cricket grid) │          THE BOARD           │
     │ visit history               │   (as big as the height      │
     │ chat  (fills what's left)   │    allows)                   │
     └─────────────────────────────┴──────────────────────────────┘
   ========================================================================== */
body.mp-tv { overflow: hidden !important; }
body.mp-tv .app { max-width: none !important; padding: 0 !important; margin: 0 !important; }
body.mp-tv main#gameScreen { padding: 0 !important; margin: 0 !important; }
body.mp-tv #gameScreen .game-screen {
  display: grid !important;
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr) !important;
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr) !important;
  column-gap: 2.2vw !important; row-gap: 1.4vh !important;
  width: 100vw !important; height: 100vh !important; max-width: none !important;
  padding: 2.4vh 2.2vw !important; margin: 0 !important; box-sizing: border-box !important; overflow: hidden !important;
  align-items: start !important;
}
/* the left column, top to bottom */
body.mp-tv #gameScreen .game-screen > .game-header { grid-column: 1 !important; grid-row: 1 !important; margin: 0 !important; padding: 0 0 .6vh !important; border: none !important; }
body.mp-tv #gameScreen .game-screen > .clock-target { grid-column: 1 !important; grid-row: 2 !important; margin: 0 !important; padding: 1vh 1vw !important; }
body.mp-tv #gameScreen .game-screen > #playersBoard { grid-column: 1 !important; grid-row: 3 !important; margin: 0 !important; }
body.mp-tv #gameScreen .game-screen > #cricketGrid { grid-column: 1 !important; grid-row: 4 !important; margin: 0 !important; max-height: 34vh; overflow: hidden; }
body.mp-tv #gameScreen .game-screen > .history-section { grid-column: 1 !important; grid-row: 5 !important; margin: 0 !important; padding: 1.2vh 1.2vw !important; max-height: 18vh; overflow: hidden; position: static !important; }
body.mp-tv #gameScreen .game-screen > .mp-tv-chat { grid-column: 1 !important; grid-row: 6 !important; align-self: stretch !important; min-height: 0; display: flex !important; flex-direction: column;
  margin: 0 !important; padding: 1.2vh 1.2vw; background: var(--bg-1); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
/* the right column: the board, as big as the height allows */
body.mp-tv #gameScreen .game-screen > .score-input-section {
  grid-column: 2 !important; grid-row: 1 / -1 !important; align-self: stretch !important;
  position: static !important; top: auto !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important;
  background: transparent !important; border: none !important; box-shadow: none !important; overflow: hidden !important;
}
body.mp-tv .score-input-section .current-throw { margin: 0 0 .6vh !important; flex: 0 0 auto; }
body.mp-tv .score-input-section .visit-row { margin-top: .6vh !important; }
body.mp-tv .score-input-section .board-hint { margin: .4vh 0 1vh !important; flex: 0 0 auto; font-size: 2vh !important; }
body.mp-tv .score-input-section .dartboard-wrap { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: flex-start; justify-content: center; margin: 0 !important; padding: 0 !important; }
body.mp-tv .score-input-section .dartboard, body.mp-tv.play-on .score-input-section .dartboard {
  width: min(100%, 76vh) !important; height: auto !important; max-width: 100% !important; margin: 0 auto !important; }

/* sizes – all off the height, so every TV gets the same picture */
body.mp-tv .game-title { font-size: 4.2vh !important; line-height: 1.1; }
body.mp-tv .game-header small { font-size: 1.8vh !important; }
body.mp-tv #playersBoard { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15vw), 1fr)) !important; gap: 1vh !important; overflow: hidden !important; width: 100% !important; }
body.mp-tv #playersBoard .player-card { padding: 1.3vh 1vw !important; min-width: 0 !important; flex: none !important; }
body.mp-tv .player-card .pc-name { font-size: 2.6vh !important; }
body.mp-tv .player-card .pc-score { font-size: 9vh !important; line-height: 1 !important; margin: .6vh 0 !important; }
body.mp-tv .player-card .pc-label { font-size: 1.3vh !important; }
body.mp-tv .player-card .pc-stats { font-size: 1.7vh !important; margin-top: .8vh !important; padding-top: .8vh !important; }
body.mp-tv #playersBoard:has(.player-card:nth-child(3)) .pc-score { font-size: 6.5vh !important; }
body.mp-tv #playersBoard:has(.player-card:nth-child(5)) .pc-score { font-size: 4.6vh !important; }
body.mp-tv #playersBoard:has(.player-card:nth-child(5)) .pc-stats { display: none !important; }
body.mp-tv .current-throw > div:first-child { font-size: 1.4vh !important; }
body.mp-tv .throw-slot { font-size: 2.6vh !important; min-width: 9vh !important; height: 6vh !important; padding: 0 1vh !important; white-space: nowrap; }
body.mp-tv .history-section h4, body.mp-tv .mp-tv-chat h4 { font-size: 1.4vh !important; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); margin: 0 0 .8vh !important; }
body.mp-tv .history-item { font-size: 1.9vh !important; padding: .6vh .8vw !important; }
body.mp-tv .mp-tv-chat .mp-chat-list { flex: 1 1 auto; min-height: 0; height: auto !important; overflow: hidden; font-size: 1.9vh; gap: .6vh; }
body.mp-tv .mp-tv-chat .mp-msg { max-width: 94%; padding: .6vh .8vw; }
body.mp-tv .mp-tv-chat .mp-msg-who { font-size: 1.3vh; }
body.mp-tv .mp-tv-chat .mp-voice { min-width: 0; }
body.mp-tv .clock-target .target-num { font-size: 7vh !important; }
body.mp-tv .mp-bubbles { top: 2vh; width: min(60vw, 900px); }
body.mp-tv .mp-bubble { font-size: 2.6vh; padding: 1vh 1.6vw; }

/* the result: scaled to the screen by mp.js (fitTvSummary) */
body.mp-tv #summaryScreen { position: fixed !important; inset: 0 !important; display: grid !important; place-items: center !important; padding: 3vh 3vw !important; overflow: hidden !important; }
body.mp-tv #summaryScreen.hidden { display: none !important; }
body.mp-tv #summaryScreen .summary-screen { max-width: 1000px; transform-origin: center center; }
body.mp-tv #playersBoard { position: static !important; top: auto !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 0 !important; z-index: auto !important; }
body.mp-tv .throw-slot { width: auto !important; min-width: 15vh !important; flex: 0 0 auto !important; }
body.mp-tv .throw-display { gap: 1vh !important; flex-wrap: nowrap !important; }
/* v5.5 – TV: the players' cards in a grid however many there are (the
   phone's 5+-player scrolling strip is not for a TV) */
body.mp-tv #playersBoard, body.mp-tv.play-on #playersBoard:has(.player-card:nth-child(5)) {
  display: grid !important; overflow: hidden !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1vh !important; }
body.mp-tv.play-on #playersBoard:has(.player-card:nth-child(5)), body.mp-tv #playersBoard:has(.player-card:nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
body.mp-tv.play-on #playersBoard:has(.player-card:nth-child(7)), body.mp-tv #playersBoard:has(.player-card:nth-child(7)) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
body.mp-tv.play-on #playersBoard .player-card { flex: none !important; width: auto !important; min-width: 0 !important; }
body.mp-tv .player-card .pc-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 1.4vw; }
body.mp-tv #playersBoard:has(.player-card:nth-child(7)) .pc-score { font-size: 3.8vh !important; }
body.mp-tv #playersBoard:has(.player-card:nth-child(7)) .pc-name { font-size: 1.9vh !important; }
body.mp-tv #playersBoard:has(.player-card:nth-child(7)) .player-card { padding: .8vh .6vw !important; }

/* Cricket on a TV: the marks grid is the game, so it gets its room and the
   cards shrink to make it */
body.mp-tv #gameScreen .game-screen:has(#cricketGrid:not(.hidden)) .pc-score { font-size: 4.6vh !important; }
body.mp-tv #gameScreen .game-screen:has(#cricketGrid:not(.hidden)) .pc-stats { display: none !important; }
body.mp-tv #gameScreen .game-screen:has(#cricketGrid:not(.hidden)) .pc-label { display: none !important; }
body.mp-tv #gameScreen .game-screen:has(#cricketGrid:not(.hidden)) > .history-section { display: none !important; }
body.mp-tv #gameScreen .game-screen > #cricketGrid { max-height: none !important; overflow: hidden !important; padding: .8vh !important; gap: .4vh !important; }
body.mp-tv #cricketGrid .cricket-cell { padding: .35vh .3vw !important; font-size: 2vh !important; min-height: 0 !important; height: 3.9vh !important; line-height: 3.2vh !important;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: flex; align-items: center; justify-content: center; }
body.mp-tv #cricketGrid .cricket-cell.header { font-size: 1.7vh !important; }

/* v5.7 – the announcer and the Bluetooth speaker panel */
.mp-ann { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-2); padding: 10px 12px; margin: 10px 0 12px; }
.mp-ann-row label { display: block; font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.mp-ann-row label small { font-weight: 400; color: var(--muted); }
.mp-ann-row select { width: 100%; }
.mp-ann-who { font-size: 14px; color: var(--accent-2); }
.mp-ann-btns { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.mp-ann-btns .btn { flex: 1 1 auto; padding: 8px 10px; font-size: 13px; min-height: 0; }
.mp-bt-panel { max-width: 460px; }
.mp-bt-steps { margin: 10px 0 10px 20px; padding: 0; font-size: 14px; line-height: 1.5; }
.mp-bt-steps li { margin-bottom: 6px; }
.mp-bt-tips { margin: 0 0 12px 18px; padding: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.mp-bt-tips li { margin-bottom: 5px; }
.mp-bt-tips b { color: var(--text); }
.mp-tv-ann { font-size: clamp(16px, 2.4vh, 30px); color: var(--accent-2, #e0bb5e); margin: 1vh 0 0; }
.mp-tv-ann.hidden { display: none; }
.mp-ann .form-row { margin: 0; }
.mp-ann-btns .btn { flex: 1 1 45%; }
/* v5.8 */
.mp-voice-tv small { color: var(--muted); font-weight: 400; }
.mp-tv-change { margin-top: 2vh; font-size: clamp(14px, 1.6vh, 22px) !important; }

/* ==========================================================================
   v6.0 – THE TV SPLASH, from the Throwline poster. Full-screen venue picture
   (tv-splash.jpg, 16:9), brand + headline in the dark band above the board,
   match details in the dark band below it. Everything in vh so every TV gets
   the same picture, whatever size it says it is.
   ========================================================================== */
.mp-tv-screen.mp-tv-screen-splash, .mp-tv-screen:has(.mp-tv-card-splash) { padding: 0; place-items: stretch; }
.mp-tv-card.mp-tv-card-splash { width: 100vw; height: 100vh; max-width: none; position: relative; }
.mp-tv-card-splash > .mp-tv-brand, .mp-tv-card-splash > .mp-tv-title { display: none; }
.mp-tv-card-splash > .mp-tv-status { position: absolute; left: 3vw; bottom: 2vh; z-index: 2; font-size: 1.8vh; }
.mp-tv-splash {
  --tvp-night: #07090b; --tvp-ink: #f3efe6; --tvp-muted: #b9b2a3; --tvp-gold: #f2c14e; --tvp-gold-deep: #c98a1b;
  --tvp-red: #e0342b; --tvp-blue: #2f7fe0; --tvp-green: #22a060; --tvp-line: rgba(243,239,230,.16);
  --tvp-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --tvp-body: "Barlow Condensed", "Arial Narrow", "Segoe UI", sans-serif;
  --tvp-mono: "Martian Mono", ui-monospace, Menlo, Consolas, monospace;
  position: relative; width: 100vw; height: 100vh; overflow: hidden; box-sizing: border-box;
  /* v7.8 – fit the width: the picture is wider than 16:9, so cover cut its sides */
  background: url("tv-splash.jpg") center / 100% auto no-repeat, var(--tvp-night);
  color: var(--tvp-ink); font-family: var(--tvp-body); text-align: center;
}
.mp-tv-splash.hidden { display: none; }
@media (min-aspect-ratio: 1489/704) { .mp-tv-splash { background-size: cover; background-position: center; } }
@media (max-aspect-ratio: 1/1) { .mp-tv-splash { background-size: 360vw auto; } }
.mp-tv-splash::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 70% at 50% 55%, transparent 60%, rgba(7,9,11,.3) 100%); }
.tvp-top, .tvp-bottom { position: absolute; left: 0; right: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; padding: 0 3vw; }
.tvp-top { top: 3vh; gap: .6vh; }
.tvp-bottom { bottom: 0; gap: 1.6vh; padding-bottom: 2.6vh; }

.tvp-status { display: inline-flex; align-items: center; gap: 1vh; margin-bottom: .6vh;
  font-family: var(--tvp-mono); font-size: 1.6vh; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tvp-muted); background: rgba(7,9,11,.55); border: 1px solid var(--tvp-line); border-radius: 999px; padding: .8vh 1.6vh .8vh 1.3vh; }
.tvp-dot { width: 1.1vh; height: 1.1vh; border-radius: 50%; background: var(--tvp-green); animation: tvpPulse 2s infinite; }
@keyframes tvpPulse { 0% { box-shadow: 0 0 0 0 rgba(34,160,96,.6); } 70% { box-shadow: 0 0 0 1.2vh rgba(34,160,96,0); } 100% { box-shadow: 0 0 0 0 rgba(34,160,96,0); } }
.tvp-brand { margin: 0; font-family: var(--tvp-display); font-weight: 900; font-style: italic; text-transform: uppercase;
  font-size: 11vh; line-height: .9; letter-spacing: .02em;
  background: linear-gradient(180deg, #fff3c4 0%, var(--tvp-gold) 45%, var(--tvp-gold-deep) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 .4vh 0 #5a1410) drop-shadow(0 0 2.4vh rgba(242,193,78,.35));
  display: inline-flex; align-items: center; gap: .34em; }
.tvp-mark { width: .9em; height: .9em; flex: none; border-radius: 50%; box-shadow: 0 0 0 .25vh rgba(242,193,78,.35), 0 .5vh 2.4vh rgba(0,0,0,.6); }
.tvp-head { margin: .4vh 0 0; font-family: var(--tvp-body); font-weight: 700; text-transform: uppercase;
  font-size: 6vh; line-height: 1.02; letter-spacing: .01em; color: var(--tvp-ink); text-shadow: 0 .3vh 1.8vh rgba(0,0,0,.7); }
.tvp-sub { margin: 0; font-weight: 600; font-size: 3vh; color: var(--tvp-ink); text-shadow: 0 .3vh 1.4vh rgba(0,0,0,.8); }

.tvp-chips { display: flex; justify-content: center; align-items: stretch; gap: 1.8vw; max-width: 94vw; }
.tvp-chip { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .3vh; min-width: 0;
  padding: 1.1vh 2.2vw; border-radius: .8vh; border: .25vh solid; background: rgba(7,9,11,.62);
  font-weight: 600; font-size: 2.8vh; line-height: 1.1; text-transform: uppercase; letter-spacing: .04em; }
.tvp-chip.hidden { display: none; }
.tvp-chip small { font-family: var(--tvp-mono); font-size: 1.4vh; letter-spacing: .12em; color: var(--tvp-muted); font-weight: 400; }
.tvp-chip b { font-weight: 700; }
.tvp-chip span { font-size: 2vh; color: var(--tvp-muted); }
.tvp-red { border-color: var(--tvp-red); box-shadow: 0 0 2.2vh rgba(224,52,43,.55), inset 0 0 1.5vh rgba(224,52,43,.25); }
.tvp-red b { color: var(--tvp-gold); }
.tvp-blue { border-color: var(--tvp-blue); box-shadow: 0 0 2.2vh rgba(47,127,224,.55), inset 0 0 1.5vh rgba(47,127,224,.25); }
.tvp-green { border-color: var(--tvp-green); box-shadow: 0 0 2.2vh rgba(34,160,96,.55), inset 0 0 1.5vh rgba(34,160,96,.25); max-width: 52vw; }
.tvp-code { font-family: var(--tvp-display); font-weight: 900; font-size: 5.4vh; letter-spacing: .14em; line-height: 1; }
.tvp-players { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .3vh 1.4vw; }
.tvp-players li { font-size: 2.6vh; white-space: nowrap; }
.tvp-players .mp-tag { font-size: 1.4vh; vertical-align: middle; }
.tvp-ann { margin: 0; font-size: 2.2vh; color: var(--tvp-gold); }
.tvp-ann.hidden { display: none; }
.tvp-foot { width: min(70vw, 1200px); border-top: 1px solid var(--tvp-line); padding-top: 1.2vh;
  font-weight: 600; font-size: 2.6vh; letter-spacing: .06em; text-transform: uppercase; color: var(--tvp-muted); }
.tvp-foot span { color: var(--tvp-ink); }
.tvp-foot em { font-style: normal; }
.tvp-change { position: absolute; z-index: 2; right: 2vw; top: 2vh; background: none; border: 0; color: var(--tvp-muted);
  font: 500 1.6vh var(--tvp-body); text-transform: uppercase; letter-spacing: .08em; opacity: .5; cursor: pointer; }
.tvp-change:focus-visible { opacity: 1; outline: .3vh solid var(--tvp-ink); outline-offset: .4vh; }
@media (prefers-reduced-motion: reduce) { .tvp-dot { animation: none; } }

/* ==========================================================================
   v7.0 – PHOTOS AND GIFS IN THE CHAT
   ========================================================================== */
.mp-react.mp-pic-btn, .mp-react.mp-gif-btn { font-weight: 800; letter-spacing: .02em; }
.mp-react.mp-gif-btn { font-size: 13px; color: var(--text); }
.mp-pic { display: block; position: relative; padding: 0; margin: 4px 0 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg-2); cursor: zoom-in; max-width: min(260px, 100%); max-height: 240px; min-width: 80px; min-height: 60px; }
.mp-pic img { display: block; width: 100%; height: 100%; max-height: 240px; object-fit: cover; }
.mp-pic img:not([src]) { min-height: 90px; background: linear-gradient(110deg, rgba(255,255,255,.04) 30%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.04) 70%) 0 0/200% 100%; animation: mpPicLoad 1.2s linear infinite; }
@keyframes mpPicLoad { to { background-position: -200% 0; } }
.mp-giphy { position: absolute; right: 6px; bottom: 5px; font: 800 9px/1 system-ui, sans-serif; letter-spacing: .08em; color: #fff; background: rgba(0,0,0,.55); padding: 3px 5px; border-radius: 4px; font-style: normal; }
.mp-pic-hide { display: inline-block; margin-top: 4px; padding: 3px 8px; font-size: 12px; color: var(--muted); background: transparent; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; }
.mp-pic-hide:hover { color: #ff6b6b; border-color: #ff6b6b; }
.mp-pic-view { position: fixed; inset: 0; z-index: 99995; background: rgba(0,0,0,.92); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; cursor: zoom-out; }
.mp-pic-view img { max-width: 100%; max-height: calc(100dvh - 80px); border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.mp-pic-view p { margin: 0; color: rgba(255,255,255,.7); font-size: 14px; }
.mp-gifs { position: fixed; inset: 0; z-index: 9800; background: rgba(0,0,0,.6); display: flex; align-items: flex-end; justify-content: center; }
.mp-gifs-card { width: min(560px, 100%); max-height: 78dvh; display: flex; flex-direction: column; background: var(--bg-1, #161922); border: 1px solid var(--border); border-radius: 18px 18px 0 0; padding: 12px; gap: 10px; }
@media (min-width: 700px) { .mp-gifs { align-items: center; } .mp-gifs-card { border-radius: 18px; } }
.mp-gifs-head { display: flex; gap: 8px; }
.mp-gifs-head input { flex: 1; min-width: 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-2); color: var(--text); font-size: 16px; }
.mp-gifs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; overflow-y: auto; min-height: 120px; }
.mp-gif { padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--bg-2); aspect-ratio: 1; cursor: pointer; }
.mp-gif img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-gifs-msg { grid-column: 1 / -1; text-align: center; color: var(--muted); margin: 24px 0; }
.mp-gifs-foot { text-align: right; font: 800 11px/1 system-ui, sans-serif; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
/* the TV: pictures sized to the chat panel */
.mp-tv-chat .mp-pic { max-width: 100%; max-height: 26vh; border-radius: 1vh; cursor: default; }
.mp-tv-chat .mp-pic img { max-height: 26vh; }

/* ==========================================================================
   v7.2 – EMOJIS: the picker, and emoji-only messages shown big
   ========================================================================== */
.mp-msg-text.mp-msg-emoji { font-size: 34px; line-height: 1.15; letter-spacing: 2px; }
.mp-tv-chat .mp-msg-text.mp-msg-emoji { font-size: 5.5vh; }
.mp-emo-head { display: flex; gap: 8px; align-items: center; }
.mp-emo-tabs { flex: 1; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.mp-emo-tabs::-webkit-scrollbar { display: none; }
.mp-emo-tab { flex: 0 0 auto; width: 40px; height: 40px; font-size: 22px; border-radius: 10px; border: 1px solid transparent; background: transparent; cursor: pointer; }
.mp-emo-tab.on { background: var(--bg-2); border-color: var(--accent); }
.mp-emo-body { overflow-y: auto; min-height: 180px; max-height: 46dvh; padding-right: 2px; }
.mp-emo-body h5 { margin: 10px 2px 6px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mp-emo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 2px; }
.mp-emo { height: 44px; font-size: 27px; line-height: 1; border: 0; border-radius: 10px; background: transparent; cursor: pointer; }
.mp-emo:hover, .mp-emo:active { background: var(--bg-2); }
.mp-emo-foot { display: flex; gap: 10px; align-items: center; }
.mp-emo-foot span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 22px; color: var(--text); }
.mp-emo-foot span:empty::before { content: ''; }

/* v7.5 – per-game setup options */
.game-opts{display:flex;flex-wrap:wrap;gap:10px}
.game-opt{display:flex;flex-direction:column;gap:4px;flex:1 1 160px;min-width:0;font-size:12px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.game-opt select{width:100%}

/* v8.1 – chat opens full screen, with the exit X top right */
.mp-chat-drawer { top: 0; height: 100vh; height: 100dvh; max-width: none; border-radius: 0; border-top: 0; box-shadow: none;
  display: flex; flex-direction: column; padding: calc(10px + env(safe-area-inset-top, 0px)) 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
.mp-chat-drawer > * { width: 100%; max-width: 760px; margin-left: auto; margin-right: auto; }
.mp-chat-drawer .mp-drawer-head { flex: 0 0 auto; font-size: 18px; padding-bottom: 8px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.mp-chat-drawer .mp-drawer-head .close-btn { width: 44px; height: 44px; font-size: 22px; border-radius: 50%; display: grid; place-items: center; }
.mp-chat-drawer .mp-chat { flex: 1 1 auto; min-height: 0; }
.mp-chat-drawer .mp-chat-list { flex: 1 1 auto; height: auto; min-height: 0; }
body.mp-chat-full { overflow: hidden; }
body.mp-chat-full .mp-chat-btn, body.mp-chat-full .mp-bubbles { display: none !important; }

/* ===== v8.2 — live voice (live.js) ========================================= */
.tl-live { position: fixed; left: 12px; bottom: calc(74px + env(safe-area-inset-bottom, 0px)); z-index: 8990; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.tl-live.hidden, .tl-live .hidden { display: none !important; }
body.mp-chat-full .tl-live, body.zone-pro .tl-live, body.zone-choose .tl-live { display: none !important; }
.tl-live-join, .tl-live-more { height: 44px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--accent); background: var(--bg-1); color: var(--text); font: 700 14px/1 inherit; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.45); cursor: pointer; }
.tl-live-on { display: flex; gap: 8px; align-items: center; }
.tl-live-talk { height: 56px; min-width: 170px; padding: 0 20px; border-radius: 999px; border: 2px solid var(--accent); background: var(--bg-1); color: var(--text); font: 800 16px/1 inherit; font-family: inherit; letter-spacing: .02em; box-shadow: 0 8px 22px rgba(0,0,0,.5); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: background .12s, transform .12s, box-shadow .12s; }
.tl-live-talk.live { background: linear-gradient(135deg, #22a060, #137a44); border-color: #7ef0b0; color: #fff; transform: scale(1.04); box-shadow: 0 0 0 6px rgba(34,160,96,.25), 0 8px 22px rgba(0,0,0,.5); }
.tl-live-talk.muted { background: #3a1414; border-color: #e0342b; color: #ffd6d2; }
.tl-live-panel { position: fixed; left: 12px; bottom: calc(140px + env(safe-area-inset-bottom, 0px)); width: min(340px, calc(100vw - 24px)); background: var(--bg-1); border: 1px solid var(--accent); border-radius: 16px; padding: 12px 14px; box-shadow: 0 14px 34px rgba(0,0,0,.55); }
.tl-live-head { display: flex; justify-content: space-between; align-items: center; font-weight: 800; margin-bottom: 8px; }
.tl-live-modes { display: flex; gap: 6px; }
.tl-live-modes button { flex: 1; padding: 10px 6px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-2); color: var(--text); font: 700 13px/1.1 inherit; font-family: inherit; cursor: pointer; }
.tl-live-modes button.active { border-color: var(--accent); background: var(--accent-3, #5a0e0e); color: #fff; }
.tl-live-hint { margin: 8px 0; font-size: 12px; color: var(--muted); line-height: 1.4; }
.tl-live-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.tl-live-who { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.tl-live-who small { color: var(--muted); font-weight: 400; }
.tl-live-who i { width: 10px; height: 10px; border-radius: 50%; background: var(--border); flex: 0 0 auto; transition: background .1s, box-shadow .1s; }
.tl-live-who.talking i { background: #2fd27a; box-shadow: 0 0 0 4px rgba(47,210,122,.25); }
.tl-live-leave { width: 100%; }
.tl-live-audio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tl-live-talk i { font-style: normal; margin-right: 6px; }
.tl-live.compact .tl-live-talk { min-width: 0; width: 60px; height: 60px; padding: 0; border-radius: 50%; font-size: 24px; }
.tl-live.compact .tl-live-talk i { margin: 0; }
.tl-live.compact .tl-live-talk span { display: none; }
.tl-live.compact .tl-live-more { height: 40px; padding: 0 10px; }
.tl-live.compact .tl-live-join span { display: none; }

/* ===== v8.4 — Pub League (league.js) ======================================= */
#leagueScreen { max-width: 1000px; margin: 24px auto; padding: 0 16px 40px; }
.lg-wrap { margin-top: 14px; }
.lg-h { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 22px 0 10px; }
.lg-intro, .lg-note { color: var(--muted); font-size: 14px; line-height: 1.5; }
.lg-note { margin: 8px 0; }
.lg-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.lg-full { width: 100%; margin-top: 10px; }
.lg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.lg-card { text-align: left; background: var(--bg-1); border: 1px solid var(--border); border-radius: 14px; padding: 14px; color: var(--text); cursor: pointer; display: flex; flex-direction: column; gap: 4px; font-family: inherit; }
.lg-card:hover { border-color: var(--accent); }
.lg-card b { font-size: 17px; } .lg-card span { color: var(--muted); font-size: 13px; }
.lg-card code { color: var(--accent-2); letter-spacing: 3px; font-weight: 800; }
.lg-form { background: var(--bg-1); border: 1px solid var(--border); border-radius: 14px; padding: 18px; }
.lg-form textarea { width: 100%; }
.lg-grid2, .lg-grid3 { display: grid; gap: 10px; } .lg-grid2 { grid-template-columns: 1fr 1fr; } .lg-grid3 { grid-template-columns: repeat(3, 1fr); }
.lg-check { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; margin: 4px 0 14px; cursor: pointer; }
.lg-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.lg-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.lg-tabs button { flex: 0 0 auto; background: none; border: 0; border-bottom: 3px solid transparent; color: var(--muted); padding: 10px 14px; font: 700 14px/1 inherit; font-family: inherit; cursor: pointer; }
.lg-tabs button.active { color: var(--text); border-bottom-color: var(--accent); }
.lg-tonight { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: var(--bg-1); border: 1px solid var(--accent); border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; }
.lg-tonight span { font-weight: 700; }
.lg-table td, .lg-table th { white-space: nowrap; text-align: center; }
.lg-table td.lg-name, .lg-table th:nth-child(2) { text-align: left; }
.lg-table td.lg-name { font-weight: 700; font-size: 15px; }
.lg-table .lg-pts { color: var(--accent-2); font-weight: 800; font-size: 15px; }
.lg-table tr.lg-lead td { background: rgba(242,193,78,.08); }
.lg-form i, .lg-form-cell i { font-style: normal; }
.lg-table .lg-form i { display: inline-block; width: 20px; height: 20px; line-height: 20px; border-radius: 5px; margin: 0 1px; font-size: 11px; font-weight: 800; font-style: normal; color: #fff; }
.lg-table .lg-form i.fW { background: #22a060; } .lg-table .lg-form i.fL { background: #b8322b; } .lg-table .lg-form i.fD { background: #777; }
.lg-nights { display: grid; gap: 10px; }
.lg-night { background: var(--bg-1); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; }
.lg-night-head { display: flex; align-items: center; gap: 10px; } .lg-night-head span { color: var(--muted); font-size: 13px; flex: 1; }
.lg-results { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.lg-result { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 8px 10px; border-radius: 10px; background: var(--bg-2); }
.lg-result b.won { color: var(--accent-2); }
.lg-score { display: inline-block; min-width: 46px; text-align: center; font-weight: 800; background: var(--bg-0); border-radius: 6px; padding: 1px 6px; margin: 0 4px; }
.lg-extra { color: var(--muted); font-size: 12px; margin-top: 2px; }
.lg-tag { color: var(--muted); font-size: 11px; border: 1px solid var(--border); border-radius: 999px; padding: 0 6px; }
.lg-x { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; }
.lg-x:hover { color: #e0342b; border-color: #e0342b; }
.lg-players { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.lg-players li { display: flex; align-items: center; gap: 10px; background: var(--bg-1); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.lg-players li span { color: var(--muted); font-size: 13px; flex: 1; }
.lg-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lg-inline input, .lg-inline select { flex: 1; min-width: 120px; }
.lg-box { background: var(--bg-1); border: 1px solid var(--border); border-radius: 14px; padding: 4px 14px 14px; margin-bottom: 12px; }
.lg-vs { color: var(--muted); font-weight: 800; min-width: 14px; text-align: center; }
.lg-enter-row { display: grid; grid-template-columns: 1fr 64px 14px 64px 1fr; gap: 8px; align-items: center; margin-bottom: 8px; }
.lg-enter-row.lg-opt { grid-template-columns: repeat(3, 1fr) 14px repeat(3, 1fr); }
.lg-enter-row input { text-align: center; min-width: 0; }
.lg-share { text-align: center; background: var(--bg-1); border: 1px solid var(--border); border-radius: 14px; padding: 18px; }
.lg-share .lg-actions { justify-content: center; }
.lg-code-big { font-size: clamp(38px, 10vw, 60px); font-weight: 900; letter-spacing: 10px; color: var(--accent-2); }
.lg-qr { width: 170px; margin: 6px auto; background: #fff; border-radius: 10px; }
.lg-qr svg { display: block; width: 100%; height: auto; }
.lg-danger { color: #e0342b !important; }
.lg-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); opacity: 0; z-index: 99999; background: var(--bg-1); border: 1px solid var(--accent); color: var(--text); border-radius: 999px; padding: 10px 18px; box-shadow: 0 10px 30px rgba(0,0,0,.5); transition: opacity .25s, transform .25s; pointer-events: none; max-width: 92vw; }
.lg-toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 560px) { .lg-grid3 { grid-template-columns: repeat(3, 1fr); } .lg-enter-row { grid-template-columns: 1fr 52px 10px 52px 1fr; } .lg-enter-row.lg-opt { grid-template-columns: repeat(3, 1fr); } .lg-enter-row.lg-opt .lg-vs { display: none; } }

/* the TV: ?league=CODE */
html.lg-tv-mode body > *:not(#lgTv):not(script) { display: none !important; }
.lg-tv { position: fixed; inset: 0; z-index: 100001; background: radial-gradient(ellipse at 50% 0%, #1c1810, #07090b 70%); color: #f3efe6; padding: 3.5vh 3vw; display: flex; flex-direction: column; font-family: "Barlow Condensed", "Arial Narrow", sans-serif; }
.lg-tv-wait { margin: auto; font-size: 4vh; color: #b9b2a3; }
.lg-tv-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 3vw; border-bottom: 3px solid #f2c14e; padding-bottom: 1.6vh; }
.lg-tv-kicker { font-size: 2.2vh; letter-spacing: .3em; color: #e0bb5e; font-weight: 700; }
.lg-tv-head h1 { margin: .3vh 0 0; font-size: 7.5vh; line-height: 1; font-weight: 800; background: linear-gradient(180deg, #fff7d6, #f2c14e 50%, #b87812); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lg-tv-code { text-align: right; font-size: 2vh; color: #b9b2a3; letter-spacing: .1em; }
.lg-tv-code b { display: block; font-size: 5vh; color: #f2c14e; letter-spacing: .25em; }
.lg-tv-body { flex: 1; display: flex; gap: 2.5vw; min-height: 0; margin-top: 2vh; }
.lg-tv-table { flex: 1 1 auto; min-width: 0; display: flex; }
.lg-tv-table .t-scroll { flex: 1; overflow: hidden; border-radius: 1.4vh; }
.lg-tv .t-table { background: rgba(255,255,255,.03); font-size: 3vh; width: 100%; }
.lg-tv .t-table th { font-size: 1.8vh; padding: 1.2vh 1vw; background: rgba(255,255,255,.06); color: #e0bb5e; }
.lg-tv .t-table td { padding: 1.2vh 1vw; border-bottom: 1px solid rgba(243,239,230,.1); }
.lg-tv .lg-table td.lg-name { font-size: 3.4vh; } .lg-tv .lg-table .lg-pts { font-size: 3.6vh; color: #f2c14e; }
.lg-tv-side { flex: 0 0 30vw; overflow: hidden; }
.lg-tv-side h2 { margin: 0 0 1vh; font-size: 2.6vh; letter-spacing: .2em; color: #e0bb5e; text-transform: uppercase; }
.lg-tv .lg-result { background: rgba(255,255,255,.05); font-size: 2.6vh; padding: 1.2vh 1vw; }
.lg-tv .lg-score { background: rgba(0,0,0,.4); }
.lg-tv .lg-extra { font-size: 1.7vh; color: #b9b2a3; }
.lg-tv .lg-tag { display: none; }

/* the screen saver: the top five */
.lg-splash { position: absolute; right: 2.5vw; bottom: 4vh; z-index: 2; width: min(300px, 26vw); background: rgba(7,9,11,.78); border: 1px solid rgba(242,193,78,.6); border-radius: 14px; padding: 12px 16px; text-align: left; backdrop-filter: blur(4px); }
.lg-splash-h { font-weight: 800; letter-spacing: .06em; color: #f2c14e; margin-bottom: 6px; font-size: 18px; }
.lg-splash ol { margin: 0; padding-left: 22px; font-size: 17px; }
.lg-splash li { padding: 2px 0; } .lg-splash li span { display: inline-block; min-width: 70%; } .lg-splash li b { color: #f2c14e; float: right; }
.lg-tonight .btn { flex: 0 0 auto; width: auto; }
/* v8.5 – results sent from phones */
.lg-subs { background: var(--bg-1); border: 1px solid var(--accent); border-radius: 14px; padding: 2px 14px 12px; margin-bottom: 14px; }
.lg-sub-btns { display: flex; gap: 6px; flex: 0 0 auto; }
.lg-sub-btns .btn { padding: 8px 12px; }
.lg-submit-btn { margin: 0 0 14px; }
@media (max-width: 560px) { .lg-subs .lg-result { flex-direction: column; align-items: stretch; } .lg-sub-btns .btn { flex: 1; } }

/* v8.6 Autodarts */
.ad-pill{display:inline-flex;align-items:center;gap:6px}
.ad-dot{width:8px;height:8px;border-radius:50%;background:var(--muted);display:inline-block;flex:0 0 auto}
.ad-dot.ad-live{background:#4ade80;box-shadow:0 0 6px #4ade80}
.ad-dot.ad-take{background:#facc15;box-shadow:0 0 6px #facc15}
.ad-dot.ad-connecting{background:#facc15;animation:adBlink 1s infinite}
.ad-dot.ad-error{background:#f87171}
@keyframes adBlink{50%{opacity:.25}}
.ad-status.ad-live{color:#4ade80}.ad-status.ad-error{color:#f87171}.ad-status.ad-connecting{color:#facc15}.ad-status.ad-off{color:var(--muted)}
.ad-help:empty{display:none}
/* v8.7 – one "Back to the match" button: the big centre one from splash.js
   wins, the old corner one only shows when it is not there */
body:has(#tlBackToMatch:not(.hidden)) .mp-return { display: none; }
/* v8.7 – the two home buttons (board setup, Pub League) were touching */
.hero .hero-btn { margin: 18px 6px 0; }

/* v8.8 – How-to guide */
.hp-modal{max-width:760px;width:100%;max-height:92vh;display:flex;flex-direction:column}
.hp-search{width:100%;margin:4px 0 12px}
.hp-list{overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:8px;padding-right:2px}
.hp-item{border:1px solid var(--border);border-radius:12px;background:var(--bg-1)}
.hp-item.hidden{display:none}
.hp-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 16px;font-weight:700;font-size:16px}
.hp-item summary::-webkit-details-marker{display:none}
.hp-item summary::after{content:"\25B8";margin-left:auto;color:var(--muted);transition:transform .2s}
.hp-item[open] summary::after{transform:rotate(90deg)}
.hp-ico{font-size:20px;width:26px;text-align:center}
.hp-body{padding:0 16px 14px;color:var(--text);font-size:14px;line-height:1.55}
.hp-body h4{margin:12px 0 4px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-2)}
.hp-body ul,.hp-body ol{margin:6px 0 6px 20px;padding:0}
.hp-body li{margin:4px 0}
.hp-body p{margin:6px 0}
.hp-games dt{font-weight:700;margin-top:8px}
.hp-games dd{margin:2px 0 0;color:var(--muted)}
.hp-table{width:100%;border-collapse:collapse;font-size:13px;margin:6px 0}
.hp-table th,.hp-table td{border-bottom:1px solid var(--border);padding:6px 4px;text-align:left}
.hp-none{color:var(--muted);text-align:center;margin:16px 0}
.hp-fun{text-align:center;margin-top:14px}
.hp-set-btn{width:100%;margin:6px 0 14px}
/* v11.19 – Contact us under the how-to guide */
#helpBtnSettings+.hp-contact{margin-top:-6px}
.hp-contact{display:flex;align-items:center;justify-content:center;box-sizing:border-box;text-decoration:none;text-align:center}
@media (max-width:600px){.hp-overlay{padding:0}.hp-modal{max-height:100vh;height:100vh;border-radius:0}}
.hp-search{padding:12px 14px;border-radius:10px;border:1px solid var(--border);background:var(--bg-2,var(--bg-1));color:var(--text);font:inherit;font-size:15px;-webkit-appearance:none;appearance:none}
.hp-search:focus{outline:2px solid var(--accent);outline-offset:1px}

/* v8.9 – Moving aim difficulty bar */
.aim-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px}
.aim-seg{width:46px;height:34px;border-radius:8px;border:1px solid var(--border);background:var(--bg-1);color:var(--muted);font:inherit;font-weight:800;cursor:pointer;padding:0;transition:background .15s,transform .1s}
.aim-seg:nth-child(1).on{background:#2f9e5b;color:#fff;border-color:#2f9e5b}
.aim-seg:nth-child(2).on{background:#7cb342;color:#fff;border-color:#7cb342}
.aim-seg:nth-child(3).on{background:#e0b02a;color:#1b1206;border-color:#e0b02a}
.aim-seg:nth-child(4).on{background:#e8742a;color:#fff;border-color:#e8742a}
.aim-seg:nth-child(5).on{background:#d13b3b;color:#fff;border-color:#d13b3b}
.aim-seg.cur{transform:translateY(-2px);box-shadow:0 0 0 2px var(--accent-2)}
.aim-seg:disabled{cursor:default;opacity:.85}
.aim-name{margin-left:6px;font-size:13px;color:var(--muted);font-weight:600}

/* v9.0 – remote board match + board cam */
body.rm-on #summaryReplayBtn{display:none}
body.rm-wait .dartboard-wrap,body.rm-wait .multiplier-row,body.rm-wait #specialRow,body.rm-wait .action-row,body.rm-wait .quick-side{opacity:.45;pointer-events:none}
body.rm-wait .player-card .card-submit{opacity:.45;pointer-events:none}
.rm-cam{position:fixed;right:12px;top:calc(env(safe-area-inset-top,0px) + 64px);z-index:900;width:min(46vw,320px);aspect-ratio:16/9;background:#05070a;border:2px solid var(--accent);border-radius:12px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.55)}
.rm-cam.hidden{display:none}
.rm-cam video{width:100%;height:100%;object-fit:contain;background:#000;display:block}
.rm-cam.rm-cam-mine{border-color:var(--border);border-width:1px}.rm-cam.rm-cam-mine .rm-cam-label{font-size:10px}.rm-cam.rm-cam-mine .rm-cam-ctl button{font-size:10px;padding:3px 6px}.rm-cam.rm-cam-mine .rm-cam-size{display:none}
.rm-cam.rm-cam-big{left:50%!important;top:50%!important;right:auto;transform:translate(-50%,-50%);width:min(96vw,1100px)!important;z-index:9600}
.rm-cam-label{position:absolute;left:8px;top:6px;font-size:12px;font-weight:700;color:#fff;text-shadow:0 1px 3px #000;pointer-events:none}
.rm-cam-off{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;color:#cbd5e1;font-size:13px}
.rm-cam-off.hidden{display:none}
.rm-cam-ctl{position:absolute;right:6px;bottom:6px;display:flex;gap:4px}
.rm-cam-ctl button{font:inherit;font-size:11px;font-weight:700;border:0;border-radius:999px;padding:4px 8px;background:rgba(0,0,0,.65);color:#fff;cursor:pointer}
.rm-cam-ctl button.on{background:var(--accent);color:#111}
.rm-chk{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);transform:translateX(-50%);z-index:9000;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;max-width:calc(100vw - 24px);background:var(--bg-1);border:1px solid var(--accent);border-radius:14px;padding:10px 12px;box-shadow:0 10px 30px rgba(0,0,0,.5);font-size:14px}
.rm-chk.hidden{display:none}
.rm-chk button{font:inherit;font-weight:800;border-radius:999px;padding:7px 12px;cursor:pointer;border:1px solid var(--border);background:var(--bg-2,var(--bg-1));color:var(--text)}
.rm-chk .rm-flag{border-color:#e8742a;color:#e8742a}
.rm-fix-modal input{width:100%;margin:6px 0}
.rm-fix-edit{margin-top:12px}.rm-fix-edit.hidden,.rm-fix-err.hidden{display:none}
.rm-fix-err{color:#f87171;font-size:13px}
.rm-preview{position:relative;width:100%;aspect-ratio:16/9;background:#05070a;border-radius:12px;overflow:hidden;margin:12px 0 8px;border:1px solid var(--border)}
.rm-preview video{width:100%;height:100%;object-fit:contain}
.rm-preview-off{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.rm-preview-off.hidden{display:none}
.rm-camtag{font-size:11px;color:var(--muted)}.rm-camtag.on{color:#4ade80}
.rm-summary{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:18px}
.rm-summary.hidden{display:none}
.rm-toast{position:fixed;left:50%;top:80px;transform:translateX(-50%);background:#111;color:#fff;padding:10px 16px;border-radius:10px;z-index:99999}

body.rm-on #resetBtn{display:none}

/* v9.2 – venue package */
.vn-chip{display:flex;align-items:center;gap:8px;margin-left:12px;padding:3px 10px 3px 3px;border:1px solid var(--border);border-radius:999px;background:var(--bg-1);max-width:220px;min-width:0;flex:0 1 auto}
.vn-chip img{height:30px;width:auto;max-width:90px;object-fit:contain;border-radius:6px}
.vn-chip span{font-weight:800;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1100px){.vn-chip{padding:3px;margin-left:8px}.vn-chip span{display:none}.vn-chip img{height:28px}}
.vn-badge{position:fixed;left:1.4vw;bottom:1.6vh;z-index:99000;display:flex;align-items:center;gap:.8vw;padding:.6vh 1vw .6vh .6vh;background:rgba(5,7,10,.72);border:1px solid rgba(255,255,255,.18);border-radius:999px;color:#fff;font:800 2.2vh/1.1 system-ui,sans-serif;pointer-events:none;max-width:40vw}
.vn-badge img{height:4.6vh;width:auto;max-width:12vw;object-fit:contain}
.vn-badge span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vn-ad{position:fixed;inset:0;z-index:99980;background:#000;opacity:0;transition:opacity .4s;display:flex;align-items:center;justify-content:center}
.vn-ad.on{opacity:1}.vn-ad.hidden{display:none}
.vn-ad-img{width:100%;height:100%;object-fit:contain}
.vn-ad-img.hidden,.vn-ad-card.hidden,.vn-ad-corner.hidden,.vn-ad-logo.hidden{display:none}
.vn-ad-corner{position:absolute;right:2vw;bottom:2.4vh;max-height:8vh;max-width:16vw;object-fit:contain;opacity:.92;filter:drop-shadow(0 2px 8px rgba(0,0,0,.6))}
.vn-ad-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3vh;width:100%;height:100%;background:radial-gradient(circle at 50% 40%,#1b2433,#05070a 70%);color:#fff;text-align:center;padding:4vh}
.vn-ad-logo{max-height:42vh;max-width:70vw;object-fit:contain;filter:drop-shadow(0 8px 24px rgba(0,0,0,.6))}
.vn-ad-name{font:900 clamp(28px,7vh,90px)/1.05 "Big Shoulders Display","Arial Narrow",system-ui,sans-serif;letter-spacing:.02em;color:#f2c14e;text-transform:uppercase}
.vn-ad-sub{font:600 clamp(14px,2.6vh,28px)/1.2 system-ui,sans-serif;color:#cbd5e1;letter-spacing:.08em;text-transform:uppercase}
.vn-btns{flex-wrap:wrap;margin-top:8px}
.vn-join{display:flex;gap:8px;margin-top:10px}.vn-join input{flex:1;text-transform:uppercase;letter-spacing:.2em}
.vn-check{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;cursor:pointer;text-transform:none;letter-spacing:0;font-weight:400;margin-top:10px}
.vn-check input{width:18px;height:18px;margin:0;accent-color:var(--accent);flex:0 0 auto}
.vn-card{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--border);border-radius:12px;background:var(--bg-1)}
.vn-card img{height:54px;width:auto;max-width:120px;object-fit:contain}
.vn-card small{display:block;color:var(--muted);margin-top:2px}
.vn-nologo{font-size:32px}
.vn-editor{max-width:760px;width:100%;max-height:92vh;overflow-y:auto}
.vn-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.vn-slot{display:flex;flex-direction:column;gap:6px}
.vn-logo-slot{flex-direction:row;align-items:center;gap:12px}
.vn-thumb{aspect-ratio:16/9;background:#05070a;border:1px dashed var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--muted);font-size:12px}
.vn-logo-slot .vn-thumb{width:140px;aspect-ratio:auto;height:80px}
.vn-thumb img{width:100%;height:100%;object-fit:contain}
.vn-slot-btns{display:flex;gap:6px}.vn-slot-btns .btn{padding:6px 10px;font-size:13px}
.vn-up{flex:1;text-align:center;cursor:pointer}
.vn-rm.hidden{display:none}
.vn-err{color:#f87171;font-size:13px}.vn-err.hidden{display:none}
.vn-pin input{width:100%;font-size:24px;letter-spacing:.5em;text-align:center;margin:8px 0}
.vn-toast{position:fixed;left:50%;top:80px;transform:translateX(-50%);background:#111;color:#fff;padding:10px 16px;border-radius:10px;z-index:99999;max-width:90vw}
.form-row .vn-check,.form-row .vn-up{text-transform:none;letter-spacing:0;font-weight:400}
.form-row .vn-check{font-size:13px;color:var(--muted);display:flex}
.form-row .vn-up{font-weight:700;font-size:13px;color:var(--text)}
/* v9.3 – iPhone (installed app, black-translucent status bar): keep the header
   clear of the clock, battery and signal icons */
header { padding-top: calc(28px + env(safe-area-inset-top, 0px)); }
@media (max-width: 700px) { header { padding-top: calc(12px + env(safe-area-inset-top, 0px)); } }
body:has(#gameScreen:not(.hidden)) { --mhead: calc(56px + env(safe-area-inset-top, 0px)); }
body:has(#gameScreen:not(.hidden)) header { padding-top: env(safe-area-inset-top, 0px); }
.mp-tv-venue{position:fixed;left:1.4vw;top:1.6vh;z-index:99001;font:700 1.8vh/1 system-ui,sans-serif;padding:.9vh 1.2vw;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(5,7,10,.6);color:#fff;cursor:pointer}
body.mp-tv-board .mp-tv-venue{display:none}
.vn-tvjoin{position:fixed;inset:0;z-index:99990;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center}
.vn-tvjoin .box{background:#111827;border:1px solid #334155;border-radius:16px;padding:3vh 3vw;color:#fff;text-align:center;min-width:min(90vw,520px)}
.vn-tvjoin input{font-size:4vh;letter-spacing:.4em;text-align:center;text-transform:uppercase;width:100%;margin:2vh 0;padding:1vh;border-radius:10px;border:1px solid #475569;background:#0b1220;color:#fff}
.vn-tvjoin .row{display:flex;gap:1vw;justify-content:center;flex-wrap:wrap}
.vn-tvjoin button{font:700 2.2vh/1 system-ui,sans-serif;padding:1.4vh 2vw;border-radius:999px;border:0;cursor:pointer}
.vn-tvjoin .go{background:#f2c14e;color:#111}.vn-tvjoin .no{background:#334155;color:#fff}
.vn-tvjoin p{color:#cbd5e1;font-size:2vh;margin:1vh 0}

.vn-danger{border-color:#b91c1c!important;color:#f87171!important}
#venuePin,#venueEditor{z-index:99995!important}

/* v9.5 – venue splash: venue at the top, Throwline under the board */
.tl-brand-box{display:flex;flex-direction:column;align-items:center;gap:1vh}
.vn-welcome{display:flex;flex-direction:column;align-items:center;gap:.6vh;color:#f3efe6;text-align:center;text-shadow:0 2px 10px #000}
.vn-welcome img{max-height:20vh;max-width:min(70vw,900px);object-fit:contain;filter:drop-shadow(0 6px 18px rgba(0,0,0,.7))}
.vn-welcome-name{font:900 clamp(30px,7vmin,96px)/1 "Big Shoulders Display","Arial Narrow",Impact,sans-serif;text-transform:uppercase;letter-spacing:.02em;color:#fff}
.vn-welcome-sub{font:600 clamp(12px,2vmin,22px)/1.2 "Martian Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#f2c14e}
.tl-splash.vn-splash .tl-splash-top{top:max(2.5vh,env(safe-area-inset-top))}
.tl-splash.vn-splash .tl-splash-bot{gap:1vh;bottom:max(2.5vh,env(safe-area-inset-bottom))}
.tl-splash.vn-splash .tl-brand-box{gap:.4vh}
.tl-splash.vn-splash .tl-brand{font-size:clamp(28px,6.5vmin,72px)}
.tl-splash.vn-splash .tl-brand .tl-mark{height:.9em}
.tl-splash.vn-splash .tl-tag{font-size:clamp(12px,2.2vmin,24px)}
.tl-splash.vn-splash .tl-pill{display:none}
.tl-splash.vn-splash .tl-touch{font-size:clamp(12px,2.2vmin,22px);padding:.5em 1.3em}
.tl-splash.vn-splash::after{background:linear-gradient(180deg,rgba(7,9,11,.82) 0%,rgba(7,9,11,.15) 28%,rgba(7,9,11,0) 55%,rgba(7,9,11,.88) 100%)}
@media (min-aspect-ratio:1/1){
  .vn-welcome img{max-height:14vh}
  .vn-welcome-name{font-size:clamp(26px,5.4vmin,80px)}
  .tl-splash.vn-splash .tl-splash-top{top:max(1.8vh,env(safe-area-inset-top))}
}
/* v9.5 – a slimmer Throwline heading under the board */
.tl-splash.vn-splash .tl-brand{font-size:clamp(22px,4.6vmin,52px)}
.tl-splash.vn-splash .tl-tag{font-size:clamp(11px,1.8vmin,20px)}

/* ===== v9.6 – lighter TVs and matches ===== */
/* the scrolling background: off during a match, and off on every TV */
body.tl-match .stage-bg, body.mp-tv .stage-bg, body.dse-cast-window .stage-bg, body.vn-screen .stage-bg { display: none !important; }
/* frosted-glass blur is invisible over a plain background and dear on a TV's chip */
body.mp-tv *, body.mp-tv *::before, body.mp-tv *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* under the green-room splash nothing needs drawing */
body.mp-tv.mp-tv-splashing #gameScreen, body.mp-tv.mp-tv-splashing #summaryScreen { visibility: hidden !important; }
body.mp-tv.mp-tv-splashing #summaryScreen * { animation: none !important; }
/* the after-match advert – older TV browsers have no `inset` */
.vn-ad { top: 0; right: 0; bottom: 0; left: 0; width: 100vw; height: 100vh; }
.vn-ad-img { display: block; max-width: 100vw; max-height: 100vh; }
body.mp-tv #summaryScreen { top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; }
/* the green room's QR – scan to play on this TV */
.tvp-scan { position: absolute; z-index: 2; right: 3vw; top: 50%; transform: translateY(-62%); display: flex; flex-direction: column; align-items: center; gap: .6vh;
  padding: 1.6vh 1.6vh 1.4vh; border-radius: 1.4vh; background: rgba(7,9,11,.78); border: .25vh solid var(--tvp-gold, #f2c14e);
  box-shadow: 0 0 2.6vh rgba(242,193,78,.45); color: #fff; text-align: center; }
.tvp-scan-qr { width: 24vh; height: 24vh; background: #fff; border-radius: .8vh; padding: .8vh; box-sizing: border-box; }
.tvp-scan-qr svg { width: 100%; height: 100%; display: block; }
.tvp-scan b { font: 700 3vh/1 var(--tvp-body, system-ui); text-transform: uppercase; letter-spacing: .06em; color: var(--tvp-gold, #f2c14e); margin-top: .6vh; }
.tvp-scan small { font: 400 1.5vh/1.2 var(--tvp-mono, monospace); color: var(--tvp-muted, #aab); letter-spacing: .06em; }
@media (max-aspect-ratio: 4/3) { .tvp-scan { display: none; } }
.mp-tv-own { display: block; margin: 2vh auto 0; font-size: 2vh; }
.vn-tvno-l { margin-top: 2vh !important; }
.vn-tvno { display: flex; flex-wrap: wrap; gap: .8vh; justify-content: center; margin: 1vh 0 2vh; }
.vn-tvjoin .vn-tvno button { background: #1f2937; color: #fff; border: 1px solid #475569; padding: 1.2vh 1.6vw; }
.vn-tvjoin .vn-tvno button.on { background: #f2c14e; color: #111; border-color: #f2c14e; }
/* v9.7 – dart-hit volume in the online lobby */
.mp-dartvol { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; font-size: 13px; color: var(--muted); }
.mp-dartvol span { min-width: 84px; font-weight: 700; color: var(--text); }
.mp-dartvol input { flex: 1; accent-color: var(--accent); }
.mp-dartvol b { min-width: 42px; text-align: right; font-weight: 600; }

/* ===== v9.8 – the sound desk ===== */
.mx-overlay { z-index: 99960; }
.mx-desk { max-width: 640px; width: calc(100vw - 24px); max-height: calc(100vh - 24px); overflow-y: auto; }
.mx-lead { color: var(--muted); font-size: 13px; margin: -4px 0 12px; }
.mx-board { display: flex; gap: 6px; overflow-x: auto; padding: 12px 8px 10px; border-radius: 14px;
  background: linear-gradient(180deg, #1a1f29, #0d1016); border: 1px solid #2b3240; box-shadow: inset 0 2px 10px rgba(0,0,0,.6); -webkit-overflow-scrolling: touch; }
.mx-strip { flex: 0 0 74px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; border-radius: 10px;
  background: linear-gradient(180deg, #232a36, #171c25); border: 1px solid #323a4a; }
.mx-master { flex-basis: 80px; background: linear-gradient(180deg, #3a2f12, #1d1709); border-color: #6b5521; }
.mx-strip.off { opacity: .55; }
.mx-icon { font-size: 22px; line-height: 1; }
.mx-name { font: 700 11px/1 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #cbd5e1; }
.mx-track { position: relative; width: 36px; height: 168px; border-radius: 8px; background: #0a0d12; box-shadow: inset 0 0 0 1px #2a3140; }
.mx-track::before { content: ""; position: absolute; left: 50%; top: 10px; bottom: 10px; width: 4px; margin-left: -2px; border-radius: 2px; background: #2c3442; }
.mx-unity { position: absolute; left: 3px; right: 3px; height: 2px; background: rgba(242,193,78,.6); pointer-events: none; z-index: 0; }
.mx-fader { position: absolute; left: 50%; top: 50%; width: 156px; height: 34px; margin: 0; transform: translate(-50%, -50%) rotate(-90deg);
  -webkit-appearance: none; appearance: none; background: transparent; z-index: 1; touch-action: none; cursor: pointer; }
.mx-fader::-webkit-slider-runnable-track { height: 4px; background: transparent; }
.mx-fader::-moz-range-track { height: 4px; background: transparent; }
.mx-fader::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 32px; margin-top: -14px; border-radius: 4px;
  background: linear-gradient(90deg, #9aa4b5, #e8ecf2 45%, #8a93a3 55%, #c8ced8); border: 1px solid #101318; box-shadow: 0 2px 6px rgba(0,0,0,.6); }
.mx-fader::-moz-range-thumb { width: 22px; height: 32px; border-radius: 4px; background: linear-gradient(90deg, #9aa4b5, #e8ecf2 45%, #8a93a3 55%, #c8ced8); border: 1px solid #101318; }
.mx-master .mx-fader::-webkit-slider-thumb { background: linear-gradient(90deg, #b8912e, #ffe08a 45%, #a07a20 55%, #e5c060); }
.mx-val { font: 600 12px/1 ui-monospace, monospace; color: #e2e8f0; min-height: 12px; }
.mx-strip.hot .mx-val { color: #f2c14e; }
.mx-btns { display: flex; gap: 4px; }
.mx-btn { min-width: 30px; height: 26px; padding: 0 6px; border-radius: 6px; border: 1px solid #3b4456; background: #121620; color: #cbd5e1; font: 800 11px/1 system-ui, sans-serif; cursor: pointer; }
.mx-mute.lit { background: #b91c1c; border-color: #ef4444; color: #fff; box-shadow: 0 0 8px rgba(239,68,68,.6); }
.mx-on.lit { background: #15803d; border-color: #22c55e; color: #fff; box-shadow: 0 0 8px rgba(34,197,94,.5); }
.mx-route { margin-top: 14px; }
.mx-route h3 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.mx-switch { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.mx-switch input { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--accent); }
.mx-switch span { display: flex; flex-direction: column; gap: 3px; font-size: 14px; }
.mx-switch small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.mx-sinks { display: grid; gap: 8px; margin-top: 10px; }
.mx-sinks label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.mx-sinks .hidden, .mx-sinks.hidden { display: none; }
.mx-note { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 10px 0 0; }
/* the voice panel's own level and switch */
.tl-live-vol { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; font-size: 13px; }
.tl-live-vol span { min-width: 70px; font-weight: 700; }
.tl-live-vol input { flex: 1; accent-color: var(--accent); }
.tl-live-vol b { min-width: 42px; text-align: right; font-weight: 600; color: var(--muted); }
.tl-live-here { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; margin: 4px 0 10px; cursor: pointer; }
.tl-live-here input { width: 18px; height: 18px; margin-top: 1px; flex: 0 0 auto; accent-color: var(--accent); }
.tl-live-here small { display: block; color: var(--muted); font-size: 11px; }
.tl-live-row2 { display: flex; gap: 8px; }
.tl-live-row2 .btn { flex: 1; }
@media (max-width: 520px) {
  .mx-desk { padding: 18px 12px !important; width: calc(100vw - 16px); }
  .mx-strip { flex-basis: 64px; }
  .mx-master { flex-basis: 68px; }
}
.mx-unity { z-index: 1; }

/* ===== v10.0 – the 1–20 number pad (numpad.js) ===== */
.tl-pad-toggle { flex: 0 0 auto; padding: 0 12px; border-radius: 8px; border: 1px dashed var(--accent-2, #e0bb5e); background: transparent;
  color: var(--accent-2, #e0bb5e); font-weight: 700; font-size: 13px; letter-spacing: .5px; cursor: pointer; white-space: nowrap; }
.tl-pad-toggle:hover { background: rgba(224,187,94,.1); }
body.play-on .tl-pad-toggle { display: none; }
body.tl-pad-on #gameScreen .dartboard-wrap { display: none !important; }
.tl-pad { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: minmax(52px, 1fr); gap: 8px; margin: 12px 0; }
.tl-pad.hidden { display: none !important; }
.tl-pad-btn { position: relative; min-height: 52px; border-radius: 12px; border: 1px solid var(--border); cursor: pointer;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1)); color: var(--text);
  font: 800 24px/1 'Bebas Neue', 'Arial Narrow', sans-serif; letter-spacing: 1px; font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 0 rgba(0,0,0,.35); transition: transform .09s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; }
.tl-pad-btn:hover { border-color: var(--accent-2, #e0bb5e); }
/* shrinks when pressed */
.tl-pad-btn:active, .tl-pad-btn.pressing { transform: scale(.86); box-shadow: 0 0 0 rgba(0,0,0,0); }
.tl-pad-btn.pop { animation: tlPadPop .32s ease-out; }
@keyframes tlPadPop { 0% { transform: scale(.82); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
.tl-pad-25, .tl-pad-bull { grid-column: span 2; font-size: 20px; }
.tl-pad-25 { grid-column: 2 / span 2; }
.tl-pad-bull { grid-column: 4 / span 2; }
/* lights up – the board's colours: gold single, green double, red treble */
.tl-pad-btn.lit { background: radial-gradient(circle at 50% 35%, #ffe79a, #e8b84b 55%, #b8862b); color: #1a1408; border-color: #ffe08a;
  box-shadow: 0 0 0 2px rgba(232,184,75,.45), 0 0 18px rgba(232,184,75,.75); }
.tl-pad-btn.lit-d { background: radial-gradient(circle at 50% 35%, #8ef0b0, #22a060 55%, #0b6b3a); color: #04170c; border-color: #9ff5bf;
  box-shadow: 0 0 0 2px rgba(34,160,96,.45), 0 0 18px rgba(34,197,94,.75); }
.tl-pad-btn.lit-t { background: radial-gradient(circle at 50% 35%, #ff9b8f, #e0342b 55%, #8e0c1f); color: #fff; border-color: #ffb3aa;
  box-shadow: 0 0 0 2px rgba(224,52,43,.45), 0 0 18px rgba(239,68,68,.8); }
.tl-pad-bull.lit { background: radial-gradient(circle at 50% 35%, #ff9b8f, #e0342b 55%, #8e0c1f); color: #fff; border-color: #ffb3aa; box-shadow: 0 0 0 2px rgba(224,52,43,.45), 0 0 18px rgba(239,68,68,.8); }
.tl-pad-x { position: absolute; top: 4px; right: 6px; font: 700 11px/1 system-ui, sans-serif; font-style: normal; letter-spacing: 0; opacity: .85; }
/* the chosen multiplier tints the edges, so a Treble is never tapped by accident */
.tl-pad[data-mult="d"] .tl-pad-btn:not(.lit):not(.tl-pad-25):not(.tl-pad-bull) { border-color: #22a060; box-shadow: inset 0 0 0 1px rgba(34,160,96,.6), 0 2px 0 rgba(0,0,0,.35); }
.tl-pad[data-mult="t"] .tl-pad-btn:not(.lit):not(.tl-pad-25):not(.tl-pad-bull) { border-color: #e0342b; box-shadow: inset 0 0 0 1px rgba(224,52,43,.6), 0 2px 0 rgba(0,0,0,.35); }
#throwDisplay.tl-pad-full { animation: tlPadFull .4s; }
@keyframes tlPadFull { 25%, 75% { transform: translateX(-5px); } 50% { transform: translateX(5px); } }
[data-mode="light"] .tl-pad-btn:not(.lit) { background: #fff; color: #14161c; }
body.rm-wait .tl-pad { opacity: .45; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .tl-pad-btn, .tl-pad-btn.pop { transition: none; animation: none; } }
/* phones: the pad takes the board's place in the one-screen match layout */
@media (max-width: 700px) {
  body:has(#gameScreen:not(.hidden)) .tl-pad { order: 1; flex: 1 1 auto; min-height: 232px; margin: 0; gap: 6px; grid-auto-rows: minmax(40px, 1fr); }
  .tl-pad-btn { min-height: 40px; font-size: 22px; border-radius: 10px; }
  .tl-pad-toggle { padding: 0 8px; font-size: 12px; }
}
@media (max-width: 700px) and (max-height: 720px) {
  body:has(#gameScreen:not(.hidden)) .tl-pad { min-height: 180px; }
}

/* ===== v10.1 – the visit row never spills out of its box on a laptop =====
   The right-hand column is narrower than the nine buttons at full size between
   ~1024 and ~1360 px wide. They now shrink a little to fit, and where even that
   is too tight the darts take their own line with the quick scores underneath
   (the phone layout). */
@media (min-width: 1024px) {
  .current-throw { container-type: inline-size; width: 100%; box-sizing: border-box; }
  .visit-row { max-width: 100%; }
  .visit-row .quick-side { min-width: 0; }
  .visit-row .quick-btn { flex: 0 1 auto; width: 48px; min-width: 38px; padding: 0; }
  .visit-row .throw-display { min-width: 0; }
  .visit-row .throw-slot { flex: 0 1 auto; width: 80px; min-width: 58px; overflow: hidden; }
}
@container (max-width: 470px) {
  .visit-row { flex-wrap: wrap; row-gap: 8px; }
  .visit-row .throw-display { order: 0; flex-basis: 100%; }
  .visit-row .quick-side:first-child { order: 1; }
  .visit-row .quick-side:last-child { order: 2; }
  .visit-row .throw-slot, .visit-row .quick-btn { flex-shrink: 0; }
}

/* ===== v10.2 – editions (skins.js) ===== */
.ed-board { display: none; }
body.ed-aotearoa .ed-board { display: block; position: absolute; z-index: 0; pointer-events: none; aspect-ratio: 1 / 1; }
.ed-board img { position: relative; display: block; width: 100%; height: 100%; filter: drop-shadow(0 2.4vmin 3.6vmin rgba(0,0,0,.8)); }
.ed-glow { position: absolute; inset: -14%; border-radius: 50%; background: radial-gradient(circle, rgba(214,120,52,.42) 0%, rgba(214,120,52,0) 66%); animation: edGlow 5s ease-in-out infinite; }
.ed-sheen-wrap { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.ed-sheen { position: absolute; top: -30%; left: 0; width: 36%; height: 160%; background: linear-gradient(90deg, rgba(255,230,180,0), rgba(255,230,180,.15), rgba(255,230,180,0)); animation: edSweep 7s ease-in-out infinite; }
@keyframes edGlow { 0%, 100% { opacity: .55; } 50% { opacity: .9; } }
@keyframes edSweep { 0% { transform: translateX(-120%) rotate(18deg); } 55%, 100% { transform: translateX(320%) rotate(18deg); } }
.ed-tag { display: none; }
body.ed-aotearoa .ed-tag { display: inline-flex; align-items: center; padding: .5em 1.2em; border-radius: 999px; border: 1px solid rgba(217,163,91,.5); background: rgba(10,7,5,.55);
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif; font-size: clamp(12px, 1.8vmin, 20px); letter-spacing: .2em; color: #d9a35b; }
/* the app splash */
body.ed-aotearoa .tl-splash { background: radial-gradient(ellipse 90% 60% at 50% 54%, #3a2416 0%, #1a100a 55%, #070504 100%); }
body.ed-aotearoa .tl-splash-bg { display: none; }
body.ed-aotearoa .tl-splash::after { background: linear-gradient(180deg, rgba(7,5,4,.35) 0%, rgba(7,5,4,0) 22%, rgba(7,5,4,0) 74%, rgba(7,5,4,.5) 100%); }
body.ed-aotearoa .tl-splash .ed-board { left: 50%; top: 53%; width: min(58vh, 88vw); transform: translate(-50%, -50%); }
body.ed-aotearoa .tl-splash .tl-pill { display: none; }
body.ed-aotearoa .tl-splash .tl-touch { border-color: #d9a35b; box-shadow: 0 0 2.4vmin rgba(217,163,91,.45); }
body.ed-aotearoa .tl-splash .tl-tag em { color: #d9a35b; }
@media (min-aspect-ratio: 4/3) { body.ed-aotearoa .tl-splash .ed-board { width: min(56vh, 60vw); } }
/* the TV green room: the board on the left, the details on the right */
body.ed-aotearoa .mp-tv-splash { background: radial-gradient(ellipse 60% 85% at 30% 50%, #3d2617 0%, #1b110a 50%, #070504 100%); }
body.ed-aotearoa .mp-tv-splash::after { background: none; }
body.ed-aotearoa #mpTvWait .ed-board { left: 5vw; top: 50%; height: 82vh; width: auto; transform: translateY(-50%); }
body.ed-aotearoa .tvp-top { left: 54vw; right: 3vw; top: 8vh; align-items: flex-start; text-align: left; padding: 0; }
body.ed-aotearoa .tvp-bottom { left: 54vw; right: 3vw; align-items: flex-start; padding: 0 0 4vh; }
body.ed-aotearoa .tvp-chips { justify-content: flex-start; flex-wrap: wrap; max-width: 43vw; }
body.ed-aotearoa .tvp-foot { width: 43vw; text-align: left; }
body.ed-aotearoa .tvp-brand { font-size: 9vh; }
body.ed-aotearoa .tvp-head { font-size: 7vh; }
body.ed-aotearoa .tvp-scan { right: 3vw; top: 45vh; transform: none; border-color: #d9a35b; box-shadow: 0 0 2.6vh rgba(217,163,91,.45); }
body.ed-aotearoa .tvp-scan-qr { width: 21vh; height: 21vh; }
@media (max-aspect-ratio: 4/3) { body.ed-aotearoa #mpTvWait .ed-board { left: 50%; top: 52%; height: auto; width: 70vw; transform: translate(-50%, -50%); opacity: .35; } body.ed-aotearoa .tvp-top, body.ed-aotearoa .tvp-bottom { left: 3vw; } }
@media (prefers-reduced-motion: reduce) { .ed-glow, .ed-sheen { animation: none; } }
/* Settings → Look */
.sk-look { display: flex; flex-direction: column; gap: 12px; }
.sk-pick { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 600; }
.sk-pick small { font-weight: 400; }
.form-row .sk-pick { text-transform: none; letter-spacing: 0; }
/* v10.3 – the tournament board carries its numbers on the outer ring */
.db-svg.db-nolabels .db-labels { display: none; }

/* v10.9 – picture boards: our board is see-through over the artwork, so the
   tap / last-dart / off / target states light the wedge with a wash instead
   of brightening a fill that isn't there */
body.bd-art .db-hit.db-band, body.bd-art .db-bull25, body.bd-art .db-bull50 { transition: fill .12s ease, opacity .12s ease; }
@media (hover: hover) { body.bd-art .db-hit.db-band:hover, body.bd-art .db-bull25:hover, body.bd-art .db-bull50:hover { fill: rgba(255,255,255,.18); filter: none; } }
body.bd-art .db-hit.db-press { fill: rgba(255,255,255,.42); filter: drop-shadow(0 0 10px var(--accent)); }
body.bd-art .db-hit.db-last { fill: rgba(255,214,120,.30); filter: drop-shadow(0 0 9px var(--accent)); }
body.bd-art .db-hit.db-target { fill: rgba(255,255,255,.22); filter: none; }
body.bd-art .db-hit.db-off { fill: rgba(0,0,0,.62); opacity: 1; }

/* ===== v10.12 – online: Return to game, the waiting room ===================== */
.mp-return { left: 50%; right: auto; transform: translateX(-50%); bottom: max(16px, env(safe-area-inset-bottom)); font-size: 16px; padding: 13px 24px; white-space: nowrap; }
.mp-knock { position: fixed; left: 50%; top: max(14px, env(safe-area-inset-top)); transform: translateX(-50%); z-index: 99980; width: min(420px, calc(100vw - 24px)); box-sizing: border-box;
  background: var(--bg-1, #15181d); color: var(--text, #f3efe6); border: 2px solid var(--accent, #f2c14e); border-radius: 16px; padding: 14px 16px 12px; box-shadow: 0 12px 36px rgba(0,0,0,.6); animation: mpKnockIn .25s ease-out; }
.mp-knock.hidden { display: none; }
.mp-knock-msg { font-size: 17px; line-height: 1.35; text-align: center; }
.mp-knock-msg small { color: var(--muted, #a9a091); }
.mp-knock-btns { display: flex; gap: 12px; justify-content: center; margin-top: 12px; }
.mp-knock-btns button { flex: 1; max-width: 150px; border: 0; border-radius: 999px; padding: 11px 0; font: inherit; font-weight: 800; font-size: 16px; cursor: pointer; letter-spacing: .04em; }
.mp-knock-yes { background: #22a060; color: #fff; }
.mp-knock-no { background: #c0392b; color: #fff; }
@keyframes mpKnockIn { from { opacity: 0; transform: translate(-50%, -12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.mp-knocking { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; padding: 14px; margin: 10px 0; border: 1px dashed var(--accent, #f2c14e); border-radius: 12px; font-weight: 700; }
.mp-knocking.hidden { display: none; }
.mp-knock-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent, #f2c14e); animation: tlPulse 1.6s infinite; }

/* ===== v10.13 – music: win tunes, music while you play ======================= */
.mu-pick { display: flex; gap: 8px; align-items: center; }
.mu-pick .mu-sel { flex: 1; min-width: 0; }
.mu-pick .mu-play { flex: 0 0 auto; min-width: 46px; padding: 10px 12px; }
.mu-pick .mu-play.lit { border-color: var(--accent); color: var(--accent); }
.mu-settings { display: flex; flex-direction: column; gap: 8px; }
.mu-settings .mu-lbl { font-weight: 700; }
.mu-settings .mu-lbl small { display: block; font-weight: 400; color: var(--muted); }
.mu-credits { font-size: 13px; color: var(--muted); }
.mu-credits summary { cursor: pointer; font-weight: 700; color: var(--text); }
.mu-credits p { margin: 6px 0; line-height: 1.4; }
.mp-tune { font-size: 12px; color: var(--muted); margin-left: 6px; white-space: nowrap; }
.mp-tune-row label small { font-weight: 400; color: var(--muted); }

.mu-modal { max-width: 560px; width: 100%; max-height: 92vh; display: flex; flex-direction: column; }
.mu-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 10px; }
@media (max-width: 480px) { .mu-tabs { grid-template-columns: repeat(3, 1fr); } }
.mu-tab { border: 1px solid var(--border); background: var(--bg-2); color: var(--text); border-radius: 10px; padding: 9px 4px; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.mu-tab.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--bg-2)); }
.mu-body { overflow-y: auto; flex: 1; min-height: 160px; }
.mu-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.mu-chip { border: 1px solid var(--border); background: var(--bg-2); color: var(--text); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 14px; cursor: pointer; }
.mu-chip.on { border-color: var(--accent); color: var(--accent); }
.mu-search { display: flex; gap: 8px; margin: 6px 0 8px; }
.mu-search input { flex: 1; min-width: 0; }
.mu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.mu-item { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid transparent; background: var(--bg-2); color: var(--text); border-radius: 10px; padding: 6px 8px; font: inherit; cursor: pointer; }
.mu-item:hover, .mu-item.cur { border-color: var(--accent); }
.mu-item img, .mu-noimg { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex: 0 0 40px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-1); font-style: normal; }
.mu-item span { display: flex; flex-direction: column; min-width: 0; }
.mu-item b, .mu-item small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mu-item small { color: var(--muted); }
.mu-empty { color: var(--muted); padding: 14px 6px; text-align: center; }
.mu-note { font-weight: 700; }
.mu-small { font-size: 13px; color: var(--muted); line-height: 1.4; }
.mu-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.mu-duck { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.mu-switch { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-2); }
.mu-switch input { width: 22px; height: 22px; margin-top: 2px; flex: 0 0 auto; }
.mu-switch small { display: block; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.mu-steps { margin: 12px 0; padding-left: 22px; line-height: 1.6; }

.mu-mini { position: fixed; left: max(10px, env(safe-area-inset-left)); bottom: max(10px, env(safe-area-inset-bottom)); z-index: 8900; display: flex; align-items: center; gap: 2px; max-width: min(380px, calc(100vw - 20px));
  background: rgba(12,14,18,.94); border: 1px solid var(--accent, #f2c14e); border-radius: 999px; padding: 4px 6px 4px 4px; box-shadow: 0 6px 20px rgba(0,0,0,.5); }
.mu-mini.hidden { display: none; }
.mu-mini-main { display: flex; align-items: center; gap: 8px; min-width: 0; background: none; border: 0; color: #f3efe6; font: inherit; cursor: pointer; padding: 4px 6px; }
.mu-mini-txt { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.mu-mini-txt b, .mu-mini-txt small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; font-size: 13px; }
.mu-mini-txt small { color: #a9a091; font-size: 11px; }
.mu-mini-btn { background: none; border: 0; color: #f3efe6; font-size: 16px; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; }
.mu-mini-btn:hover { background: rgba(255,255,255,.08); }
.mu-mini-btn.hidden { display: none; }
.mu-eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 16px; width: 16px; }
.mu-eq i { width: 4px; background: var(--accent, #f2c14e); animation: muEq .9s ease-in-out infinite; }
.mu-eq i:nth-child(2) { animation-delay: .2s; } .mu-eq i:nth-child(3) { animation-delay: .4s; }
.mu-mini.paused .mu-eq i { animation: none; height: 4px; }
@keyframes muEq { 0%, 100% { height: 4px; } 50% { height: 16px; } }
.mu-yt { position: fixed; z-index: 8900; width: 200px; border-radius: 10px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,.5); background: #000; }
.mu-yt-bar { display: flex; align-items: center; justify-content: space-between; height: 26px; padding: 0 4px 0 8px; background: rgba(12,14,18,.96); color: #c9bba4; font-size: 12px; }
.mu-yt-bar button { background: none; border: 1px solid rgba(255,255,255,.2); color: #f3efe6; border-radius: 6px; font: inherit; font-size: 12px; padding: 2px 8px; cursor: pointer; }
.mu-yt #muYt, .mu-yt iframe { width: 200px; height: 200px; display: block; }
.mu-yt[data-pos="bl"] { left: max(10px, env(safe-area-inset-left)); bottom: calc(max(10px, env(safe-area-inset-bottom)) + 54px); }
.mu-yt[data-pos="br"] { right: max(10px, env(safe-area-inset-right)); bottom: calc(max(10px, env(safe-area-inset-bottom)) + 54px); }
.mu-yt[data-pos="tl"] { left: max(10px, env(safe-area-inset-left)); top: calc(env(safe-area-inset-top) + 64px); }
.mu-yt[data-pos="tr"] { right: max(10px, env(safe-area-inset-right)); top: calc(env(safe-area-inset-top) + 64px); }
.mu-yt.hidden { display: none; }
.mu-yt iframe { width: 200px; height: 200px; display: block; }
.mu-toast { position: fixed; left: 50%; top: 18px; transform: translateX(-50%); z-index: 99999; background: rgba(12,14,18,.95); color: #f3efe6; border: 1px solid var(--accent, #f2c14e); border-radius: 12px; padding: 10px 16px; transition: opacity .5s; }
.mu-toast.go { opacity: 0; }
body.mp-on #muHdrBtn { display: none; }
/* the music pill and the Return-to-game pill share the bottom edge */
body.mu-on .mp-return, body.mu-on .tl-back { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 52px); }
/* during a match the music pill tucks under the header, top right, small */
body:has(#gameScreen:not(.hidden)) .mu-mini { left: auto; right: max(8px, env(safe-area-inset-right)); bottom: auto; top: calc(env(safe-area-inset-top) + 60px); }
body:has(#gameScreen:not(.hidden)) .mu-mini-txt { display: none; }
body:has(#gameScreen:not(.hidden)) .mu-yt[data-pos="tr"] { top: calc(env(safe-area-inset-top) + 108px); }
body:has(#gameScreen:not(.hidden)) .mu-mini ~ .mp-return { bottom: max(16px, env(safe-area-inset-bottom)); }
/* v10.17 – remembered YouTube links */
.mu-saved-box { margin: 4px 0 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-2); overflow: hidden; }
.mu-saved-box.hidden { display: none; }
.mu-saved-head { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 8px 12px 4px; }
.mu-saved { list-style: none; margin: 0; padding: 0 0 4px; max-height: 210px; overflow-y: auto; }
.mu-saved li { display: flex; align-items: center; border-top: 1px solid var(--border); }
.mu-saved li:first-child { border-top: 0; }
.mu-saved-play { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: none; border: 0; color: var(--text); font: inherit; text-align: left; padding: 9px 12px; cursor: pointer; }
.mu-saved-play:hover { background: rgba(255,255,255,.04); }
.mu-saved-ic { color: var(--accent); flex: 0 0 auto; }
.mu-saved-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mu-saved-x { flex: 0 0 auto; width: 34px; height: 34px; margin-right: 4px; background: none; border: 0; color: var(--muted); font-size: 20px; line-height: 1; border-radius: 50%; cursor: pointer; }
.mu-saved-x:hover { color: #ff6b5b; background: rgba(255,255,255,.06); }
.mu-search .btn { width: auto; flex: 0 0 auto; padding-left: 18px; padding-right: 18px; }
/* v10.19 – private tune (developer code) */
.mu-dev{display:flex;flex-direction:column;gap:6px;margin:4px 0 6px;padding:8px 10px;border:1px dashed rgba(255,255,255,.25);border-radius:10px}
.mu-dev[hidden]{display:none}
.mu-dev-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mu-dev-row .btn{width:auto;flex:0 0 auto}
.mu-dev-code{flex:1 1 140px;min-width:0}
.mu-dev-msg{opacity:.8;min-height:1em}
#muWinLbl{cursor:default;-webkit-user-select:none;user-select:none}
/* v10.21 – Settings pages picked by pills */
.st-pills{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 16px}
.st-pill{min-width:0;text-align:center;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:var(--text,#eee);border-radius:999px;padding:9px 6px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.st-pill:hover{border-color:rgba(255,255,255,.35)}
.st-pill.on{background:var(--accent);border-color:var(--accent);color:#111}
#settingsScreen .form-row.st-off{display:none!important}
@media (min-width:700px){.st-pills{grid-template-columns:repeat(6,auto);justify-content:start}.st-pill{padding:8px 16px}}
/* v10.23 – updates itself */
.au-cover{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;background:rgba(8,10,14,.92);color:var(--text,#f4ecd8);text-align:center}
.au-cover b{display:block;font-size:22px;margin-bottom:6px}
.au-cover small{opacity:.7}
.au-banner{position:fixed;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 10px);z-index:99999;width:min(560px,calc(100% - 24px));display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;padding:10px 12px 10px 14px;border-radius:14px;background:#1b1e28;border:1px solid var(--accent,#e8b84b);box-shadow:0 8px 28px rgba(0,0,0,.45);color:var(--text,#f4ecd8);font-size:14px;line-height:1.35}
.au-btns{display:flex;gap:6px;margin-left:auto}
.au-banner button{border:0;border-radius:999px;padding:7px 12px;font:inherit;font-weight:700;cursor:pointer}
.au-now{background:var(--accent,#e8b84b);color:#111}
.au-x{background:rgba(255,255,255,.08);color:inherit}
.au-toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 24px);z-index:99999;background:#1e9e63;color:#fff;font-weight:700;padding:10px 16px;border-radius:999px;box-shadow:0 6px 20px rgba(0,0,0,.4);transition:opacity .5s}
.au-toast.go{opacity:0}
/* v10.24 – make your own board (dev option) */
.cb-panel{display:flex;flex-direction:column;gap:8px;margin:6px 0;padding:10px;border:1px dashed rgba(255,255,255,.25);border-radius:12px}
.cb-panel[hidden]{display:none}
.cb-head{font-weight:700}
.cb-head small{display:block;font-weight:400;color:var(--muted)}
.cb-none{color:var(--muted);margin:0;font-size:14px}
.cb-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.cb-list li{display:flex;align-items:center;gap:10px;background:var(--bg-2);border-radius:10px;padding:6px 8px;flex-wrap:wrap}
.cb-list li b{flex:1;min-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cb-thumb{width:40px;height:40px;border-radius:50%;background:#000 center/cover no-repeat;flex:0 0 40px;border:2px solid rgba(255,255,255,.2)}
.cb-acts{display:flex;gap:4px;flex-wrap:wrap}
.cb-acts button{border:1px solid var(--border);background:var(--bg-1);color:var(--text);border-radius:999px;padding:5px 10px;font:inherit;font-size:13px;cursor:pointer}
.cb-acts .cb-del[data-sure]{color:#ff6b5b;border-color:#ff6b5b}
#cbDoor{cursor:default;-webkit-user-select:none;user-select:none}
.cb-modal{max-width:980px;width:100%;max-height:94vh;display:flex;flex-direction:column}
.cb-grid{display:grid;grid-template-columns:1fr;gap:14px;overflow-y:auto;flex:1;min-height:0}
@media (min-width:820px){.cb-grid{grid-template-columns:minmax(320px,1fr) 360px}}
.cb-stage-wrap{position:sticky;top:0;z-index:2;background:var(--bg-1,#14161c);padding-bottom:4px}
@media (min-width:820px){.cb-stage-wrap{position:static}}
.cb-stage{width:min(100%,460px);aspect-ratio:1;margin:0 auto;touch-action:none;cursor:grab;border-radius:50%}
.cb-stage:active{cursor:grabbing}
.cb-stage svg{width:100%;height:100%;display:block;pointer-events:none}
@media (max-width:819px){.cb-stage{width:min(100%,42vh)}}
.cb-tip{text-align:center;color:var(--muted);font-size:12px;margin:6px 0 0}
.cb-ctl{display:flex;flex-direction:column;gap:12px}
.cb-name{display:flex;flex-direction:column;gap:4px;font-weight:700}
.cb-block{display:flex;flex-direction:column;gap:6px}
.cb-block>small{color:var(--muted);margin-top:-4px}
.cb-two{flex-direction:row;gap:16px}
.cb-two>div{display:flex;flex-direction:column;gap:6px;flex:1}
.cb-nudge{display:flex;gap:6px;flex-wrap:wrap}
.cb-nudge button,.cb-fine button{min-width:40px;height:38px;border:1px solid var(--border);background:var(--bg-2);color:var(--text);border-radius:10px;font:inherit;font-weight:700;cursor:pointer;touch-action:manipulation}
.cb-nudge #cbCentre,.cb-nudge #cbFit{padding:0 12px}
.cb-read{color:var(--muted)}
.cb-fine{display:flex;align-items:center;gap:6px}
.cb-fine input,.cb-sl input{flex:1;accent-color:var(--accent)}
.cb-fine output,.cb-sl output{min-width:54px;text-align:right;color:var(--muted);font-size:13px}
.cb-sl{display:flex;align-items:center;gap:8px}
.cb-sl span{min-width:62px;font-size:14px}
.cb-seg{display:flex;flex-wrap:wrap;gap:6px}
.cb-seg button{border:1px solid var(--border);background:var(--bg-2);color:var(--text);border-radius:999px;padding:6px 12px;font:inherit;font-size:14px;cursor:pointer}
.cb-seg button.on{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--bg-2))}
.cb-foot{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;padding-top:10px;margin-top:10px;border-top:1px solid var(--border)}
.cb-foot .btn{width:auto}
#cbDelete{margin-right:auto;color:#ff6b5b}
.cb-name input{background:var(--bg-0,#0c0e13);border:1px solid var(--border);border-radius:10px;padding:9px 12px;color:var(--text);font:inherit;font-weight:400}
/* v11.3 – developer test voice (testvoice.js) */
.tv-panel{display:flex;flex-direction:column;gap:8px;margin:2px 0;padding:10px;border:1px dashed rgba(255,255,255,.25);border-radius:12px}
.tv-panel[hidden]{display:none}
.tv-switch{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);cursor:pointer}
.tv-switch input{width:18px;height:18px;margin:0;accent-color:var(--accent)}
.tv-lines{display:flex;flex-wrap:wrap;gap:6px}
.tv-line{font:inherit;font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:transparent;color:inherit;cursor:pointer}
.tv-line.on{border-color:var(--accent);color:var(--accent)}
.tv-switch span{text-transform:none;letter-spacing:0;font-weight:600;color:inherit}
#installRow[hidden]{display:none}