/* Barlow Condensed and JetBrains Mono (SIL OFL 1.1, from Fontsource 5.3.0), self-hosted. Latin and Latin Extended
   (Š, Đ, Ć, Č, Ž). The 20 Oct 2026 handoff uses them for the game screen's bands, the Board and page titles. */
@font-face {
	font-family: "Barlow Condensed";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/assets/barlow-condensed-latin-ext-600-normal-18ESti3H.woff2") format("woff2");
	unicode-range:
		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
		U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Barlow Condensed";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/assets/barlow-condensed-latin-600-normal-DepVgxBB.woff2") format("woff2");
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
		U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Barlow Condensed";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/assets/barlow-condensed-latin-ext-700-normal-CwuXbfVR.woff2") format("woff2");
	unicode-range:
		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
		U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Barlow Condensed";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/assets/barlow-condensed-latin-700-normal-v1xN8_Wq.woff2") format("woff2");
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
		U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Barlow Condensed";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("/assets/barlow-condensed-latin-ext-800-normal-DGNyg4u8.woff2") format("woff2");
	unicode-range:
		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
		U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Barlow Condensed";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("/assets/barlow-condensed-latin-800-normal-BKzMuPgK.woff2") format("woff2");
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
		U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Barlow Condensed";
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url("/assets/barlow-condensed-latin-ext-700-italic-CbhzQEkf.woff2") format("woff2");
	unicode-range:
		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
		U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Barlow Condensed";
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url("/assets/barlow-condensed-latin-700-italic-DjyOzRJ7.woff2") format("woff2");
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
		U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Barlow Condensed";
	font-style: italic;
	font-weight: 800;
	font-display: swap;
	src: url("/assets/barlow-condensed-latin-ext-800-italic-BbzArEj4.woff2") format("woff2");
	unicode-range:
		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
		U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Barlow Condensed";
	font-style: italic;
	font-weight: 800;
	font-display: swap;
	src: url("/assets/barlow-condensed-latin-800-italic-Cnej2eWp.woff2") format("woff2");
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
		U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("/assets/jetbrains-mono-latin-ext-500-normal-Cut-4mMH.woff2") format("woff2");
	unicode-range:
		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
		U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("/assets/jetbrains-mono-latin-500-normal-BWZEU5yA.woff2") format("woff2");
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
		U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/assets/jetbrains-mono-latin-ext-600-normal-BfB_LPfz.woff2") format("woff2");
	unicode-range:
		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
		U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/assets/jetbrains-mono-latin-600-normal-C8RAYTDA.woff2") format("woff2");
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
		U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* RackSync kit · extracted from the single-file app; grows into the in-house component kit */

  :root {
    --bg0: #16161e; --bg1: #1a1b26; --bg2: #24283b; --bg3: #292e42;
    --line: #3b4261; --line2: #545c7e;
    --text: #c0caf5; --dim: #9aa5ce;
    --blue: #7aa2f7; --cyan: #7dcfff; --teal: #73daca; --green: #9ece6a;
    --red: #f7768e; --pink: #ff9bb0; --amber: #e0af68; --gold: #ffc777; --purple: #bb9af7;
    --r: .875rem; --shadow: 0 .4rem 1.5rem rgba(10,12,28,.55);
    --text-quiet: #aab2d6; /* de-emphasised control text: 5.9:1 on #232946, 7:1 on --bg1 */
    --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in: cubic-bezier(.4, 0, 1, 1); --dur-fast: 150ms;
    /* Semantic tier: components reference these, never the hue primitives above */
    --color-accent: var(--blue); --color-accent-soft: rgba(122,162,247,.15); --color-focus: var(--blue);
    --color-success: var(--green); --color-live: var(--green); --color-danger: var(--red); --color-warning: var(--amber);
    --color-highlight: var(--gold); /* the game: racks/breaks, on the hill, selection in the stats grid */
    --color-text: var(--text); --color-text-muted: var(--dim); --color-text-quiet: var(--text-quiet);
    --color-bg-page: var(--bg0); --color-bg-surface: var(--bg1); --color-bg-raised: var(--bg2); --color-bg-control: var(--bg3);
    --color-border: var(--line); --color-border-strong: var(--line2);
    /* Type scale (16px root): xs is the floor for any text */
    --text-xs: .75rem; --text-sm: .875rem; --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.625rem; --text-display: 2.125rem;
    /* Spacing: 4 / 8 / 12 / 16 / 24 / 32 */
    --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem;
    --lh-tight: 1.1; --lh-body: 1.5;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  /* Everything is sized in rem: --fit scales up on big screens, --fs is the user's A−/A+ choice */
  html { font-size: calc(16px * var(--fit, 1) * var(--fs, 1)); overflow-y: scroll; scrollbar-gutter: stable; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    background: radial-gradient(120% 90% at 50% 0%, var(--bg2) 0%, var(--bg1) 45%, var(--bg0) 100%) no-repeat var(--bg0);
    color: var(--text); min-height: 100vh; line-height: var(--lh-body);
    -webkit-tap-highlight-color: transparent;
  }
  /* Selection is suppressed only on the drag surfaces, so names, codes and standings stay copyable */
  .card, .tcard, .hold, .zone, .queue-panel, .dice-btn, .act, .lose-btn, .cal { -webkit-user-select: none; user-select: none; }
  h1, h2, h3, .brand-t, .panel-title, .live-name, .score-tab, .vs, .tn-text, .dev-name, .dev-score, .kpi, .title-link, .card-link b { line-height: var(--lh-tight); }
  .badge, .who-badge, .tag, .role-badge, .pair-score, .timer, .field-label, .tbl th, .rr-tbl th, .bk-rl, .cal-hd, .live-eyebrow { line-height: 1.2; }
  a { color: var(--blue); }
  
  button { font: inherit; }
  .hidden { display: none !important; }

  .app {
    container: app / inline-size;
    max-width: 82rem; margin: 0 auto; min-height: 100vh;
    padding: 1rem clamp(.75rem, 3vw, 1.75rem) 5.5rem;
    display: flex; flex-direction: column;
  }

  /* ---------- Header ---------- */
  /* The title shrinks (smaller type, then …) before it pushes the buttons onto a second row */
  .brand { flex: 1 1 14rem; }
  .header-right { flex: 0 1 auto; }
  @container app (max-width: 63.99rem) { #titleText.long { font-size: 1.3125rem !important; } } /* wide screens: full size, the icon toolbar leaves plenty of room */
  @container app (max-width: 40rem) { #titleText, #titleText.long { font-size: 1.1875rem !important; } }
  header {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
    padding: .375rem 0 .875rem; border-bottom: 1px solid var(--line);
  }
  .brand { display: flex; align-items: center; gap: .625rem; min-width: 0; font-size: 1.375rem; font-weight: 700; letter-spacing: .03em; }
  #titleText { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-inline-end: .2em; margin-inline-end: -.2em; } /* room for the italic overhang of the last letter, same layout */
  .nine {
    width: 1.625rem; height: 1.625rem; border-radius: 50%; flex: none; position: relative;
    background: radial-gradient(circle at 35% 30%, #fff8dc 0 28%, #e8c93e 32% 100%);
    box-shadow: inset -.2rem -.25rem .4rem rgba(0,0,0,.35);
  }
  .nine::after {
    content: "9"; position: absolute; inset: 0; margin: auto; width: .875rem; height: .875rem;
    display: grid; place-items: center; background: #fff; border-radius: 50%;
    font-size: .6875rem; font-weight: 800; color: #222;
  }
  .header-right { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; justify-content: flex-end; margin-inline-start: auto; }
  .toolbar { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
  .btn {
    color: var(--text); background: var(--bg2); border: 1px solid var(--line); border-radius: .625rem;
    padding: .625rem 1rem; min-height: 2.75rem; font-size: .9375rem; font-weight: 600;
    cursor: pointer; white-space: nowrap; touch-action: manipulation;
    transition: background .15s, border-color .15s, color .15s, opacity .15s;
  }
  
  .btn:disabled { opacity: .4; cursor: not-allowed; }
  .btn.active { border-color: var(--blue); color: var(--blue); }
  .btn-danger { border-color: #914c58; }
  
  .btn-primary { background: linear-gradient(180deg, #8fb3ff, var(--blue)); color: #16161e; border-color: #5a7ec9; font-weight: 800; }
  
  .fs-group { display: flex; }
  /* Help + text size: one segmented group of equal square buttons */
  .fs-group .btn { display: inline-grid; place-items: center; width: 2.75rem; padding: 0; font-weight: 800; border-radius: 0; }
  .fs-group .btn:not(:last-child) { border-right-width: 0; }
  .fs-group .btn:first-child { border-radius: .625rem 0 0 .625rem; }
  .fs-group .btn:last-child { border-radius: 0 .625rem .625rem 0; }
  @container app (max-width: 40rem) {
    /* Phone: title + text size on the first row, the four actions as a 2×2 grid below */
    .header-right { display: contents; }
    .brand { flex: 1 1 0; font-size: 1.25rem; }
    .fs-group { order: 2; }
    .toolbar { order: 3; flex: 1 1 100%; display: flex; gap: .5rem; flex-wrap: nowrap; }
    .toolbar .btn.ib:not(.active) { flex: 1 1 0; width: auto; min-width: 2.75rem; }
    /* Phones: the open section stays icon-only (highlighted) so the row never overflows */
    .toolbar .btn.ib.active { flex: 1 1 0; width: auto; min-width: 2.75rem; padding: 0; }
    .toolbar .btn.ib.active .lbls { display: none; }
  }

  /* ---------- Timers ---------- */
  .timers { grid-area: tm; display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; color: var(--text-quiet); transition: color .2s; }
  .timers:focus-within, .timers:has(.paused) { color: var(--text); }
  .timer {
    display: inline-flex; align-items: center; gap: .5rem; padding: .375rem .875rem; border-radius: 999px; min-height: 2.5rem;
    background: rgba(0,0,0,.22); border: 1px solid var(--line);
    font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); font-weight: 700;
  }
  .timer b { display: inline-block; text-align: end; font-size: 1rem; letter-spacing: .02em; color: var(--text); font-variant-numeric: tabular-nums; }
  #tSession { min-width: 7ch; }
  #tMatch { min-width: 5ch; }
  .pause-btn { width: 2rem; height: 2rem; margin: -.25rem -.5rem -.25rem 0; border-radius: 50%; display: grid; place-items: center; background: var(--bg2); border: 1px solid var(--line); color: var(--dim); cursor: pointer; transition: color .15s, border-color .15s; }
  
  .pause-btn svg { width: .875rem; height: .875rem; }
  .pause-btn .i-play, .timer.paused .i-pause { display: none; }
  .timer.paused .i-play { display: block; }
  .timer.paused { border-color: var(--amber); }
  .timer.paused b { color: var(--amber); }

  /* ---------- Game screen ---------- */
  #gameScreen { margin-block: auto; padding-block: 1.25rem .5rem; }
  #statsScreen, #settingsScreen { padding-top: 1.5rem; }
  .layout { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
  @container app (min-width: 70rem) {
    .layout { column-gap: 3rem; }
    .layout.has-queue { grid-template-columns: minmax(0, 1fr) minmax(18rem, 26%); }
    /* Wide screens: the queue collapses sideways into a slim rail */
    .layout.has-queue.q-collapsed { grid-template-columns: minmax(0, 1fr) 4rem; }
    .q-collapsed .queue-panel { padding: .5rem .25rem; align-items: center; }
    .q-collapsed .queue-toggle { flex-direction: column; min-height: 14rem; margin: 0; padding: .75rem 0; gap: .75rem; }
    .q-collapsed .queue-toggle .panel-title { writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .2em; }
    .q-collapsed .q-summary { display: none !important; }
    .queue-toggle svg { transform: rotate(-90deg); }
    .queue-panel.collapsed .queue-toggle svg { transform: rotate(90deg); }
  }

  .match {
    align-self: start; display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "tm tm tm" "za vs zb" "xa . xb" "ba . bb" "msg msg msg";
    column-gap: clamp(.625rem, 2.5vw, 1.5rem); row-gap: .75rem;
  }
  @container app (max-width: 40rem) {
    .match {
      grid-template-columns: 1fr auto 1fr;
      grid-template-areas: "tm tm tm" "za za za" "xa xa xa" "ba ba ba" "vs vs vs" "zb zb zb" "xb xb xb" "bb bb bb" "msg msg msg";
      row-gap: .625rem;
    }
    .vs { padding: .25rem 0; }
    .mid { position: relative; }
    .mid .dice-btn { position: absolute; left: calc(50% + 2.5rem); top: 50%; transform: translateY(-50%); }
    .zone { min-height: 0 !important; }
    .card { font-size: 1.125rem !important; }
  }
  .mid { grid-area: vs; align-self: center; display: flex; flex-direction: column; align-items: center; gap: .75rem; }
  .vs { font-size: 1.875rem; font-weight: 800; color: var(--blue); letter-spacing: .06em; text-shadow: 0 .125rem .5rem rgba(0,0,0,.5); }

  .team-head { display: flex; align-items: center; gap: .5rem; min-height: 2.75rem; min-width: 0; }
  .team-name {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 .5rem;
    background: none; border: 1px solid transparent; border-radius: .5rem; color: var(--text); cursor: pointer; text-align: start;
  }
  
  .team-name .tn-text { font-size: 1.125rem; font-weight: 800; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .team-name svg { flex: none; width: 1rem; height: 1rem; color: var(--dim); opacity: .55; }
  
  .team-name-input { flex: 1; min-width: 0; }
  .pair-score {
    flex: none; display: inline-flex; align-items: center; justify-content: center; gap: .125rem; height: 2rem; padding: 0 .75rem; border-radius: 999px;
    background: rgba(0,0,0,.3); border: 1px solid var(--line); color: var(--dim);
    font-weight: 700; font-size: 1rem; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .pair-score b { color: var(--green); font-weight: 800; }
  .pair-score.hot { border-color: var(--amber); }
  .pair-score.hot b { color: var(--amber); }

  .zone {
    container-type: inline-size;
    display: flex; flex-direction: column; gap: .625rem; padding: .75rem; min-width: 0; min-height: 8.75rem;
    border-radius: var(--r); border: 2px dashed transparent;
    background: rgba(0,0,0,.22);
    transition: border-color .12s, background .12s;
  }
  /* Team card: shared by the match and the waiting queue. Diagonal stripes fade top→bottom from player 1's colour to player 2's */
  @property --h0 { syntax: "<number>"; inherits: true; initial-value: 250; }
  @property --h1 { syntax: "<number>"; inherits: true; initial-value: 250; }
  .tcard {
    --h0: 250; --h1: 250;
    container-type: inline-size; position: relative; isolation: isolate;
    display: flex; flex-direction: column; gap: .625rem; padding: .75rem; min-width: 0;
    border-radius: var(--r); border: 2px solid rgba(84,92,126,.5);
    background: linear-gradient(180deg, oklch(.3 .045 var(--h0) / .5), oklch(.3 .045 var(--h1) / .5));
    transition: --h0 .7s ease, --h1 .7s ease, border-color .2s, box-shadow .3s;
  }
  /* A new pair arriving: colours glide (via the hue transition above), stripes and name/score fade in */
  .tcard.enter::before { animation: stripesIn .7s ease; }
  .tcard.enter .team-head { animation: headIn .5s ease; }
  @keyframes stripesIn { from { opacity: 0; } }
  @keyframes headIn { from { opacity: 0; } } /* opacity only: a transform here would re-anchor the score tab mid-animation */
  @media (prefers-reduced-motion: reduce) { .tcard { transition: none; } .tcard.enter::before, .tcard.enter .team-head { animation: none; } }
  .tcard::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, oklch(.78 .12 var(--h0)), oklch(.78 .12 var(--h1)));
    opacity: .11;
    -webkit-mask-image: repeating-linear-gradient(135deg, #000 0 2px, transparent 2px 11px);
    mask-image: repeating-linear-gradient(135deg, #000 0 2px, transparent 2px 11px);
  }
  .tcard.solo { background: rgba(0,0,0,.22); }
  .tcard.solo::before { display: none; }
  .tcard.next { border-color: rgba(122,162,247,.6); }
  .tcard[data-ids] { cursor: grab; }
  .tcard.swap-target { outline: 3px solid var(--blue); outline-offset: 2px; }
  .tcard.dragging-src { opacity: .35; }
  .t-grip { flex: none; color: var(--text-quiet); font-size: 1rem; letter-spacing: 1px; cursor: grab; padding: 0 .125rem; }
  .tcard.hill { border-color: var(--amber); box-shadow: 0 0 1.5rem rgba(224,175,104,.35), inset 0 0 1rem rgba(224,175,104,.08); }
  .tcard.hill .pair-score { box-shadow: 0 0 .9rem rgba(224,175,104,.6); background: rgba(224,175,104,.14); }
  .match.hill-hill .tcard.hill { animation: hill 1.8s ease-in-out infinite; }
  @keyframes hill { 0%, 100% { box-shadow: 0 0 1.25rem rgba(224,175,104,.3); } 50% { box-shadow: 0 0 2.25rem rgba(224,175,104,.6); } }
  @media (prefers-reduced-motion: reduce) { .match.hill-hill .tcard.hill { animation: none; box-shadow: 0 0 2rem rgba(224,175,104,.5); } }
  .zone.drop-ok { border-style: dashed; border-color: var(--cyan); background: rgba(125,207,255,.10); }
  .zone.drop-hot { border-style: dashed; border-color: var(--blue); background: rgba(122,162,247,.14); }
  @container (max-width: 21rem) { .rb-txt { display: none; } }

  .card {
    --h: 250;
    display: flex; align-items: center; gap: .625rem; min-width: 0; min-height: 3.625rem;
    padding: .5rem .375rem .5rem .875rem; border-radius: .75rem;
    background: rgba(24,25,36,.94);
    border: 1px solid rgba(84,92,126,.55);
    font-size: 1.25rem; font-weight: 700; cursor: grab; touch-action: none;
    box-shadow: 0 .125rem .375rem rgba(0,0,0,.35);
  }
  .card:active { cursor: grabbing; }
  .card .pname { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .card.dragging-src { opacity: .3; }
  .card.swap-target { outline: 3px solid var(--blue); outline-offset: 1px; }
  .card.just-moved { animation: pop .6s ease; }
  .card.flip { position: relative; z-index: 5; }
  @keyframes pop { 0% { box-shadow: 0 0 0 .25rem rgba(122,162,247,.6); } 100% { box-shadow: 0 .125rem .375rem rgba(0,0,0,.35); } }
  .pdot { --h: 250; flex: none; width: .75rem; height: .75rem; border-radius: 50%; background: oklch(.78 .13 var(--h)); display: inline-block; }
  .score-badge {
    flex: none; min-width: 1.875rem; height: 1.75rem; padding: 0 .5rem; border-radius: 999px; display: grid; place-items: center;
    background: rgba(0,0,0,.3); border: 1px solid var(--line); color: var(--green); font-size: .9375rem; font-weight: 800; font-variant-numeric: tabular-nums;
  }
  .card-x {
    flex: none; width: 2.75rem; height: 2.75rem; margin: -.375rem 0; border-radius: .5rem;
    background: transparent; border: 1px solid transparent; color: var(--text-quiet); font-size: 1.25rem; line-height: 1; cursor: pointer;
  }
  
  .ghost { position: fixed; z-index: 1000; pointer-events: none; opacity: .94; transform: rotate(2deg) scale(1.03); box-shadow: var(--shadow); }

  .role-badge {
    flex: none; display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .55rem; border-radius: 999px;
    font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  }
  .role-badge svg { width: .8rem; height: .8rem; flex: none; }
  .role-badge.rack { color: var(--amber); border: 1px solid rgba(224,175,104,.5); background: rgba(224,175,104,.12); }
  .role-badge.break { color: var(--cyan); border: 1px solid rgba(125,207,255,.5); background: rgba(125,207,255,.12); }

  .dice-btn {
    width: 2.75rem; height: 2.75rem; border-radius: .75rem; display: grid; place-items: center;
    background: #232946; border: 1px solid var(--line); color: var(--text); cursor: pointer;
    transition: border-color .15s, box-shadow .15s, color .15s, opacity .15s;
  }
  .dice-btn svg { width: 1.75rem; height: 1.75rem; overflow: visible; }
  
  .dice-btn:disabled { opacity: .3; cursor: not-allowed; }
  .dice-btn.gone { visibility: hidden; pointer-events: none; }
  /* Idle invitation: a soft white glow pulse and a small tumble every few seconds until someone rolls */
  .dice-btn:not(.gone):not(:disabled):not(.rolling) { color: #fff; border-color: rgba(255,255,255,.7); animation: diceGlow 2.4s ease-in-out infinite; }
  .dice-btn:not(.gone):not(:disabled):not(.rolling) svg { animation: diceIdle 4.8s ease-in-out infinite; }
  @keyframes diceGlow { 0%, 100% { box-shadow: 0 0 .5rem rgba(255,255,255,.18); } 50% { box-shadow: 0 0 1.5rem rgba(255,255,255,.55), 0 0 .25rem rgba(255,255,255,.6); } }
  @keyframes diceIdle { 0%, 70%, 100% { transform: rotate(0) scale(1); } 78% { transform: rotate(-18deg) scale(1.08); } 86% { transform: rotate(14deg) scale(1.08); } 93% { transform: rotate(-6deg) scale(1); } }
  @media (prefers-reduced-motion: reduce) { .dice-btn, .dice-btn svg { animation: none !important; } .dice-btn:not(.gone):not(:disabled) { box-shadow: 0 0 1rem rgba(255,255,255,.45); } }
  .dice-btn.rolling svg { animation: roll .85s ease-in-out; }
  @keyframes roll { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(360deg) scale(1.3); } 100% { transform: rotate(720deg) scale(1); } }

  .acts { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: .5rem; }
  @container app (max-width: 28rem) { .acts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .act {
    display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.75rem; padding: 0 .375rem;
    border-radius: .625rem; background: #232946; border: 1px solid var(--line); color: var(--text-quiet);
    font-size: .8125rem; font-weight: 700; letter-spacing: .03em; cursor: pointer;  white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s, opacity .15s; touch-action: manipulation;
  }
  .act svg { width: 1.125rem; height: 1.125rem; flex: none; }
  .act span { overflow: hidden; text-overflow: ellipsis; }
  .act:disabled { opacity: .3; cursor: not-allowed; }
  
  
  

  .lose-btn {
    width: 100%; padding: .875rem .625rem; min-height: 3.5rem;
    font-size: .75rem; font-weight: 800; letter-spacing: .03em; line-height: 1.35; text-wrap: balance; text-transform: uppercase; color: #fff;
    background: linear-gradient(180deg, #2e3452, #232946); border: 1px solid var(--line); border-radius: .75rem;
    cursor: pointer; touch-action: manipulation; box-shadow: 0 .2rem .6rem rgba(0,0,0,.4);
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s, opacity .15s;
  }
  
  .lose-btn:disabled { opacity: .25; cursor: not-allowed; filter: grayscale(.4); }
  /* Contextual hover motion: Šamar downs the shot, Golden spins, Break & Run zaps, the loss button shakes its head */
  
  
  
  
  
  
  @keyframes shot { 0% { transform: rotate(0); } 35%, 60% { transform: rotate(-40deg) translate(-1px, -2px); } 100% { transform: rotate(0); } }
  @keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
  @keyframes zap { 0% { transform: translate(0, 0); } 33% { transform: translate(-1.5px, 1px); } 66% { transform: translate(1.5px, -1px); } 100% { transform: translate(0, 0); } }
  @keyframes nope { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }
  @keyframes rewind { from { transform: rotate(0); } to { transform: rotate(-360deg); } }
  @keyframes wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
  @media (prefers-reduced-motion: reduce) { .act svg, .lose-btn, .undo-btn svg, .dice-btn svg, .pause-btn svg { animation: none !important; } }
  .invalid-msg { grid-area: msg; text-align: center; color: var(--color-warning); font-size: .9375rem; font-weight: 600; min-height: 1.375rem; }

  .queue-panel { background: rgba(0,0,0,.18); border: 1px solid var(--line); border-radius: var(--r); padding: .875rem; display: flex; flex-direction: column; }
  .panel-title { font-size: .9375rem; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); font-weight: 700; margin-bottom: .75rem; }
  .queue-panel .panel-title { text-align: center; }
  #queueList { flex: 1; min-height: 4rem; padding: .25rem; background: transparent; }
  .queue-item { display: flex; align-items: center; gap: .75rem; }
  .queue-item .card { flex: 1; }
  .queue-num {
    flex: none; width: 2.125rem; height: 2.125rem; border-radius: 50%; display: grid; place-items: center;
    background: var(--bg0); border: 1px solid var(--line); color: var(--dim); font-weight: 800; font-size: 1rem;
  }
  .queue-item.next .queue-num { color: var(--blue); border-color: rgba(122,162,247,.6); }
  .drop-slot { height: .375rem; border-radius: .2rem; background: var(--blue); margin: -.5rem 0; box-shadow: 0 0 .5rem rgba(122,162,247,.7); }
  #queueFoot { margin-top: .75rem; }
  .solo-add { display: flex; justify-content: center; }
  .solo-add .add-player { width: 100%; max-width: 26rem; }
  .add-player .add-open { width: 100%; }

  .undo-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
  .undo-btn svg { width: 1.0625rem; height: 1.0625rem; flex: none; }
  .toolbar .btn.ib { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 2.75rem; padding: 0; }
  .toolbar .btn.ib svg { width: 1.25rem; height: 1.25rem; flex: none; }
  .ib .lbl { display: none; }
  .toolbar .btn.ib.active { width: auto; padding: 0 1rem 0 .875rem; background: rgba(122,162,247,.14); }
  .ib.active .lbl { display: inline; }
  /* Open section: hovering swaps to a back arrow + "Back to game"; both states share one grid cell so the width never jumps */
  .ib .ico, .ib .lbls { display: inline-grid; }
  .ib .ico > svg, .ib .lbls > span { grid-area: 1 / 1; }
  .ib .lbls { display: none; }
  .ib.active .lbls { display: inline-grid; justify-items: start; }
  .ib .lbls .lbl { display: inline; }
  .ib .i-back, .ib .lbl-back { visibility: hidden; }
  .ib.active:focus-visible .i-back, .ib.active:focus-visible .lbl-back { visibility: visible; }
  .ib.active:focus-visible .i-main, .ib.active:focus-visible .lbl { visibility: hidden; }
  #fullBtn .i-exit, #fullBtn.is-full .i-enter { display: none; }
  #fullBtn.is-full .i-exit { display: inline; }
  .tip { position: fixed; z-index: 1300; padding: .375rem .625rem; border-radius: .5rem; background: var(--bg0); border: 1px solid var(--line2); color: var(--text); font-size: .8125rem; font-weight: 600; white-space: nowrap; box-shadow: var(--shadow); pointer-events: none; opacity: 0; transform: translateY(-.25rem); transition: opacity .12s, transform .12s; }
  .tip.show { opacity: 1; transform: none; }
  #fsDown { font-size: .75rem; }
  .header-right { column-gap: 1.125rem; }
  .help-btn { display: inline-grid; place-items: center; font-size: 1.125rem; font-weight: 800; text-decoration: none; color: var(--text); }
  
  .getting-started { display: flex; align-items: center; justify-content: center; gap: .625rem; text-decoration: none; color: var(--blue); border-style: dashed; margin-top: -.25rem; }
  .getting-started span { flex: none; display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1.5px solid currentColor; font-weight: 800; font-size: .875rem; }
  
  #fsUp { font-size: 1.0625rem; }
  .undo-btn-old {
    position: fixed; right: 1.125rem; bottom: 1.125rem; z-index: 900;
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .875rem; font-weight: 700; color: var(--dim);
    background: rgba(36,40,59,.94); border: 1px solid var(--line); border-radius: 999px;
    padding: 0 1rem 0 .75rem; min-height: 2.75rem; cursor: pointer; box-shadow: var(--shadow);
    transition: color .15s, border-color .15s, opacity .15s;
  }
  .undo-btn svg { width: 1.125rem; height: 1.125rem; }
  
  .undo-btn:disabled { opacity: .3; cursor: not-allowed; }

  .toast {
    position: fixed; left: 50%; bottom: 4.75rem; transform: translateX(-50%) translateY(1.25rem); z-index: 1200;
    background: var(--bg2); border: 1px solid var(--blue); color: var(--text);
    padding: .75rem 1.375rem; border-radius: 999px; font-weight: 700; font-size: 1rem;
    box-shadow: var(--shadow); opacity: 0; pointer-events: none; max-width: 90vw; text-align: center;
    transition: opacity var(--dur-fast) var(--ease-in), transform var(--dur-fast) var(--ease-in);
    display: flex; align-items: center; gap: .75rem;
  }
  .toast.show { transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); }
  .toast.bad { border-color: var(--color-danger); }
  .toast .x { display: grid; place-items: center; padding: 0; background: none; border: 0; color: var(--dim); cursor: pointer; min-width: 2.75rem; min-height: 2.75rem; margin: -.75rem -.75rem -.75rem 0; }
  .toast .x svg { width: 1.125rem; height: 1.125rem; }
  
  .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

  /* ---------- Match & queue refinements ---------- */
  .tcard .card { border-color: transparent; box-shadow: 0 .125rem .5rem rgba(0,0,0,.35); }
  .tn-empty { color: var(--dim); font-weight: 600 !important; font-size: .9375rem !important; opacity: .75; }
  .queue-toggle { display: flex; align-items: center; justify-content: center; gap: .625rem; width: 100%; min-height: 2.75rem; margin: -.25rem 0 .5rem; background: none; border: 0; border-radius: .625rem; color: var(--dim); cursor: pointer; }
  .queue-toggle .panel-title { margin: 0; }
  
  .queue-toggle svg { width: 1rem; height: 1rem; transition: transform .2s; }
  .q-count { font-size: .8125rem; font-weight: 800; color: var(--dim); min-width: 1.75rem; padding: .1rem .5rem; border: 1px solid var(--line); border-radius: 999px; font-variant-numeric: tabular-nums; }
  .queue-panel.collapsed .queue-toggle { margin-bottom: 0; }
  .queue-panel.collapsed .queue-toggle svg { transform: rotate(-90deg); }
  .queue-panel.collapsed #queueList, .queue-panel.collapsed #queueFoot { display: none; }
  .q-summary { font-size: .9375rem; color: var(--dim); font-weight: 600; text-align: center; padding: .25rem .25rem .125rem; overflow-wrap: anywhere; }
  .q-summary strong { color: var(--text); }
  /* The queue is secondary: slightly more compact than the match */
  .queue-panel { opacity: .7; transition: opacity .2s; }
  .queue-panel:focus-within, .queue-panel:has(.drop-ok) { opacity: 1; }
  .score-tab {
    position: absolute; top: 0; right: 1.25rem; transform: translateY(-58%); z-index: 2;
    display: inline-flex; align-items: baseline; gap: .2rem; padding: .3rem .875rem .4rem; border-radius: .75rem;
    background: var(--bg1); border: 2px solid rgba(84,92,126,.75); box-shadow: 0 .25rem .75rem rgba(0,0,0,.45);
    font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap;
  }
  .score-tab b { font-size: var(--text-display); font-weight: 900; color: var(--color-success); letter-spacing: -.02em; }
  .score-tab small { font-size: 1rem; font-weight: 800; color: var(--dim); }
  .tcard.hill .score-tab { border-color: var(--amber); box-shadow: 0 0 1.25rem rgba(224,175,104,.55); }
  .tcard.hill .score-tab b { color: var(--amber); }

  /* ---------- Display type: condensed, heavy, slanted (system fonts only, no downloads) ---------- */
  :root { --display: "Avenir Next Condensed", "Bahnschrift Condensed", "Bahnschrift", "DIN Condensed", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif; }
  .vs, .score-tab, #titleText, .panel-title, .tn-text:not(.tn-empty), .timer b, .md-title, .setup h2 { font-family: var(--display); font-stretch: condensed; }
  #titleText, .panel-title, .tn-text:not(.tn-empty), .timer b, .md-title, .setup h2 { font-style: italic; }
  .vs { font-size: 2.75rem; font-weight: 900; letter-spacing: 0; transform: skewX(-8deg); }
  .score-tab { transform: translateY(-58%) skewX(-10deg); border-radius: .45rem; padding: .2rem 1rem .3rem; }
  .score-tab b { font-size: 2.75rem; font-weight: 900; letter-spacing: -.01em; }
  .score-tab small { font-family: var(--display); font-size: 1.25rem; font-weight: 800; }
  #titleText { font-weight: 800; font-size: 1.625rem; letter-spacing: .01em; text-transform: uppercase; }
  .panel-title { font-weight: 800; letter-spacing: .1em; font-size: 1.0625rem; }
  .tn-text:not(.tn-empty) { font-size: 1.375rem !important; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
  .timer b { font-weight: 800; font-size: 1.125rem; }
  .setup h2 { font-size: 2.25rem; font-weight: 900; text-transform: uppercase; }

  /* Quieter loss button; more air under the timers; match + queue side by side, top-aligned (app.css lines the queue up with the team cards) */
  .lose-btn { min-height: 3rem; color: var(--text-quiet); background: linear-gradient(180deg, #262b45, #1e2238); border-color: var(--line); }
  .lose-btn:disabled { opacity: .2; }
  .timers { margin-bottom: 1.75rem; }
  @container app (min-width: 70rem) { .layout { align-items: start; } .match, .queue-panel { align-self: start; } }

  /* Partner details: the card stays put, only the game list scrolls. Absolutely positioned so the list never changes the section height */
  #mxDetail.md { position: relative; display: block; background: none; border: 0; padding: 0; min-height: 20rem; max-height: none; overflow: visible; }
  .md-abs { position: absolute; inset: 0; display: flex; flex-direction: column; padding-top: var(--mx-top, 1.25rem); }
  .md-abs .md-card { flex: none; margin-top: 0; }
  @container app (max-width: 63.99rem) { .md-abs { padding-top: 1.25rem; } }
  @container app (max-width: 63.99rem) { #mxDetail.md { min-height: 0; height: 32rem; } }
  .md-list { flex: 1; min-height: 0; overflow-y: auto; padding-inline-end: .25rem; }
  .score-tab { align-items: baseline; padding: .42rem 1rem .14rem; }
  .md-list.more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 4rem), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 4rem), transparent); }
  .mx td.pcross { box-shadow: inset 0 0 0 10rem oklch(.72 .12 var(--ph) / .16); }
  .mx th.pcross { color: oklch(.82 .12 var(--ph)); }
  .tbl tr.found { outline: 2px solid oklch(.75 .12 var(--h)); outline-offset: -2px; }
  .log-row.sel-player-row { background: linear-gradient(90deg, oklch(.38 .08 var(--h) / .5), transparent 85%); border-radius: .5rem; border-top-color: transparent; }
  .score-tab b, .score-tab small { line-height: 1; }
  .score-tab small.l { color: var(--red); font-size: 1.625rem; font-weight: 900; }
  .pair-score .l { color: var(--red); }
  /* Selected pair, echoed across the statistics page */
  .tbl tr.pick { cursor: pointer; }
  
  .sel-row { background: repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 2px, transparent 2px 11px), linear-gradient(90deg, oklch(.36 .07 var(--h0) / .6), oklch(.36 .07 var(--h1) / .6)) !important; }
  .tbl tr.sel-player { background: linear-gradient(90deg, oklch(.38 .08 var(--h) / .6), transparent 85%); }
  .tbl tr.sel-row td, .tbl tr.sel-player td { border-top-color: transparent; }
  .log-row.sel-row { border-radius: .5rem; border-top-color: transparent; }
  .queue-panel.bump { animation: qbump .8s ease; }
  .tcard.break-glow { animation: breakGlow 3s ease-out; }
  @keyframes breakGlow { 0%, 15% { border-color: var(--cyan); box-shadow: 0 0 2rem rgba(125,207,255,.6), inset 0 0 1.25rem rgba(125,207,255,.12); } 100% { box-shadow: none; } }
  @media (prefers-reduced-motion: reduce) { .tcard.break-glow { animation-duration: .01s; } }
  .role-badge { font-family: var(--display); font-style: italic; font-stretch: condensed; font-size: .875rem; letter-spacing: .06em; }
  .act.runout.holding { opacity: 1; color: #16161e; background: var(--cyan); border-color: #c4ecff; box-shadow: 0 0 1.1rem rgba(125,207,255,.55); }
  @keyframes qbump { 30% { opacity: 1; border-color: var(--blue); box-shadow: 0 0 1.5rem rgba(122,162,247,.45); } }
  .md-card { margin: 1.25rem 0 .5rem; cursor: default; }
  .md-card .team-head { padding-inline-end: 8rem; min-height: 2.5rem; }
  .md-title { font-size: 1.25rem; font-weight: 800; text-transform: uppercase; padding-inline-start: .25rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .md-card .card { font-size: 1.125rem; min-height: 3.25rem; cursor: default; }
  #queueList .tcard { padding: .5rem; gap: .5rem; }
  #queueList .team-head { min-height: 2.25rem; }
  #queueList .card { min-height: 3rem; font-size: 1.0625rem; padding-block: .3rem; }

  /* ---------- Press & hold ---------- */
  button { touch-action: manipulation; }
  .hold { position: relative; overflow: hidden; isolation: isolate; touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  .hold::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: rgba(255,255,255,.28); transform: scaleX(0); transform-origin: left center;
    transition: none;
  }
  .hold.holding { box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }
  .hold.holding::after { animation: holdFill var(--hold, 1.5s) linear forwards; }
  @keyframes holdFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .no-hold .hold { touch-action: manipulation; }
  .hold.held::after { transform: scaleX(1); transition: none; background: rgba(255,255,255,.5); }
  /* While held, touch users (no hover) get the same coloured state as a mouse hover */
  .act.samar.holding { opacity: 1; color: #16161e; background: var(--purple); border-color: #d7c3ff; box-shadow: 0 0 1.1rem rgba(187,154,247,.55); }
  .act.golden.holding { opacity: 1; color: #16161e; background: var(--gold); border-color: #ffe2a8; box-shadow: 0 0 1.1rem rgba(255,199,119,.55); }
  .act.bnr.holding { opacity: 1; color: #16161e; background: var(--teal); border-color: #b4f0e6; box-shadow: 0 0 1.1rem rgba(115,218,202,.55); }
  .lose-btn.holding { opacity: 1; color: #16161e; background: linear-gradient(180deg, var(--pink), var(--red)); border-color: #ffb3c1; box-shadow: 0 0 1.25rem rgba(247,118,142,.55); }
  .undo-btn.holding { color: #16161e; background: var(--blue); border-color: var(--blue); }
  /* Touch screens: no sticky hover colours after a tap */
  @media (hover: none) {
    /* quiet by lightness, not opacity: the text stays above 4.5:1 where no hover can restore it */
    .act:not(.holding):not(:disabled) { opacity: 1 !important; color: var(--text-quiet) !important; background: #232946 !important; border-color: var(--line) !important; box-shadow: none !important; }
    .lose-btn:not(.holding):not(:disabled) { opacity: 1 !important; color: var(--text-quiet) !important; background: linear-gradient(180deg, #262b45, #1e2238) !important; border-color: var(--line) !important; box-shadow: 0 .2rem .6rem rgba(0,0,0,.4) !important; }
    .undo-btn:not(.holding) { color: var(--dim) !important; border-color: var(--line) !important; }
    .act svg, .lose-btn, .undo-btn svg, .icon-btn svg, .dice-btn svg, .pause-btn svg { animation: none !important; }
  }
  @media (prefers-reduced-motion: reduce) { .hold.holding::after { animation-timing-function: steps(4, end); } }

  /* ---------- Dialog ---------- */
  .dlg { padding: 0; margin: auto; border: 1px solid var(--line2); border-radius: 1rem; background: var(--bg2); color: var(--text); width: min(28rem, calc(100vw - 2rem)); box-shadow: 0 1.5rem 4rem rgba(0,0,0,.6); }
  .dlg::backdrop { background: rgba(10,10,16,.6); }
  .dlg[open] { animation: dlgIn .2s var(--ease-out); overscroll-behavior: contain; }
  .dlg.closing { animation: dlgOut var(--dur-fast) var(--ease-in) forwards; }
  @keyframes dlgOut { to { opacity: 0; transform: translateY(.375rem) scale(.98); } }
  .dlg-body { padding: 1.375rem; display: flex; flex-direction: column; gap: .875rem; }
  .dlg h3 { font-size: 1.25rem; font-weight: 800; text-wrap: balance; overflow-wrap: anywhere; }
  .dlg p { color: var(--dim); font-size: 1rem; line-height: 1.45; text-wrap: pretty; }
  .dlg-link { font-size: .875rem; font-weight: 500; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--dim); text-overflow: ellipsis; }
  .dlg-actions { display: flex; gap: .75rem; justify-content: flex-end; flex-wrap: wrap; margin-top: .375rem; }
  .dlg-actions .btn { min-width: 6rem; }
  @container app (max-width: 28rem) { .dlg-actions .btn { flex: 1 1 auto; } }
  .btn-destructive { background: linear-gradient(180deg, var(--pink), var(--red)); color: #16161e; border-color: #ffb3c1; font-weight: 800; }
  
  @keyframes dlgIn { from { opacity: 0; transform: translateY(.5rem) scale(.96); } }
  @media (prefers-reduced-motion: reduce) { .dlg[open], .dlg.closing, .menu.closing { animation: none; } }

  /* ---------- Panels & forms ---------- */
  .panel { background: rgba(0,0,0,.18); border: 1px solid var(--line); border-radius: var(--r); padding: 1.125rem; min-width: 0; }
  @container app (max-width: 40rem) { .panel { padding: .875rem; } }
  .form { display: flex; flex-direction: column; gap: 1.125rem; }
  .form > .panel-title { margin-bottom: -.25rem; }
  .field-label { display: block; font-size: .8125rem; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); font-weight: 700; margin-bottom: .5rem; }
  .text-input {
    width: 100%; font: inherit; font-size: 1.0625rem; font-weight: 600; color: var(--text);
    background: rgba(0,0,0,.28); border: 1px solid var(--line); border-radius: .625rem;
    padding: .625rem .875rem; min-height: 2.75rem; -webkit-user-select: text; user-select: text;
  }
  .text-input:focus { outline: 2px solid var(--color-focus); border-color: var(--blue); }
  .text-input.bad { outline: 2px solid var(--red); border-color: var(--red); }
  .seg { display: grid; grid-template-columns: 1fr 1fr; gap: .375rem; padding: .3rem; border-radius: .75rem; background: rgba(0,0,0,.28); border: 1px solid var(--line); }
  .seg label { position: relative; display: grid; place-items: center; min-height: 2.75rem; border-radius: .55rem; font-size: 1rem; font-weight: 700; color: var(--dim); cursor: pointer; transition: background .15s, color .15s; }
  
  .seg input, .choice input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
  .seg label:has(input:checked) { background: var(--blue); color: #16161e; }
  .choice {
    position: relative; display: flex; align-items: center; gap: .875rem; padding: .75rem .875rem; min-height: 3.75rem;
    border-radius: .75rem; background: rgba(0,0,0,.22); border: 1px solid var(--line); cursor: pointer; transition: border-color .15s, background .15s;
  }
  
  .choice:has(input:checked) { border-color: var(--blue); background: rgba(122,162,247,.10); }
  

  /* ---------- Setup ---------- */
  .setup { width: 100%; max-width: 35rem; margin: 0 auto; padding-top: .625rem; display: flex; flex-direction: column; gap: 1rem; }
  .setup h2 { text-align: center; font-size: 1.5rem; margin: 1.125rem 0 .375rem; }
  .hint { color: var(--dim); font-size: .875rem; margin-bottom: .75rem; }
  .setup-list { display: flex; flex-direction: column; gap: .625rem; }
  .setup-row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 2.75rem; gap: .625rem; align-items: center; }
  .setup-tag { display: flex; align-items: center; justify-content: flex-end; gap: .4rem; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); text-align: right; }
  @container app (max-width: 28rem) { .setup-row { grid-template-columns: 5rem minmax(0, 1fr) 2.75rem; } .setup-tag { font-size: var(--text-xs); } }
  .row-x { width: 2.75rem; height: 2.75rem; border-radius: .625rem; font-size: 1.25rem; font-weight: 700; color: var(--dim); background: transparent; border: 1px solid var(--line); cursor: pointer; }
  
  .row-x:disabled { opacity: .3; cursor: not-allowed; }
  .list-actions { display: flex; gap: .625rem; margin-top: .75rem; }
  .list-actions .btn { flex: 1; }
  .setup-err { text-align: center; color: var(--red); font-weight: 600; font-size: .9375rem; }
  .setup-err:empty { display: none; }
  #startBtn { width: 100%; min-height: 3.5rem; font-size: 1.0625rem; }
  #importJsonBtn { width: 100%; }
  .brand { position: relative; }
  .share-wrap { position: relative; flex: none; display: inline-flex; }
  .icon-btn { flex: none; width: 2.75rem; height: 2.75rem; border-radius: .625rem; display: grid; place-items: center; background: transparent; border: 1px solid var(--line); color: var(--dim); cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
  .icon-btn[aria-expanded="true"] { color: var(--blue); border-color: var(--blue); background: var(--bg2); }
  .icon-btn svg { width: 1.25rem; height: 1.25rem; }
  
  @keyframes lift { 50% { transform: translateY(-3px); } }
  .menu {
    position: absolute; top: calc(100% + .5rem); left: 0; z-index: 1100; width: 19rem; max-width: calc(100vw - 1.5rem);
    padding: .375rem; background: var(--bg2); border: 1px solid var(--line2); border-radius: .875rem; box-shadow: var(--shadow);
    display: flex; flex-direction: column; gap: .125rem; letter-spacing: 0; transform-origin: top left; animation: menuIn var(--dur-fast) var(--ease-out);
  }
  .menu-item {
    display: flex; align-items: center; gap: .75rem; min-height: 3.25rem; padding: .5rem .75rem; border-radius: .625rem;
    background: none; border: 0; color: var(--text); text-align: start; cursor: pointer; font-size: 1rem; font-weight: 700;
  }
  .menu-item:focus-visible { background: #2f3549; outline: none; }
  .menu-item:disabled { opacity: .5; cursor: progress; }
  .menu-item svg { width: 1.25rem; height: 1.25rem; color: var(--blue); flex: none; }
  .menu-item small { display: block; font-size: .8125rem; color: var(--dim); font-weight: 500; margin-top: .1rem; }
  @keyframes menuIn { from { opacity: 0; transform: translateY(-.25rem) scale(.96); } }
  .menu.closing { animation: menuOut var(--dur-fast) var(--ease-in) forwards; pointer-events: none; }
  @keyframes menuOut { to { opacity: 0; transform: translateY(-.25rem) scale(.96); } }
  @media (prefers-reduced-motion: reduce) { .menu, .icon-btn svg { animation: none !important; } }
  .settings-wrap { width: 100%; max-width: 35rem; margin: 0 auto; }

  /* ---------- Statistics ---------- */
  .stats-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
  @container app (min-width: 56rem) { .stats-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .stats-grid .wide { grid-column: 1 / -1; } }
  .stats-grid .first { order: -1; }
  .scroll-x { overflow-x: auto; }
  table.tbl { width: 100%; border-collapse: collapse; font-size: 1.0625rem; font-weight: 700; font-variant-numeric: tabular-nums; }
  .tbl th { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); font-weight: 700; padding: 0 .5rem .5rem; text-align: end; white-space: nowrap; }
  .tbl td { padding: .625rem .5rem; border-top: 1px solid rgba(59,66,97,.45); text-align: end; white-space: nowrap; }
  /* Fixed layout: number columns get set widths, the name column takes the rest and truncates */
  table.tbl { table-layout: fixed; }
  .tbl th { width: 2.75rem; }
  .tbl th:first-child { width: 2.5rem; }
  .tbl th:last-child { width: 3.75rem; }
  .tbl th.tl { width: auto; }
  .tbl .tl { text-align: start; overflow: hidden; text-overflow: ellipsis; }
  .tbl .who { max-width: 100%; }
  .tbl .who .pname { min-width: 0; }
  .tbl td:first-child { width: 2.25rem; padding-inline-start: .25rem; }
  .tbl .w { color: var(--green); } .tbl .l { color: var(--red); } .tbl .s { color: var(--purple); }
  .tbl .g { color: var(--gold); } .tbl .t { color: var(--teal); } .tbl .p { color: var(--dim); font-size: .9375rem; }
  .tbl tr.left td { opacity: .6; }
  .rank { width: 2rem; height: 2rem; border-radius: 50%; display: inline-grid; place-items: center; background: var(--bg0); border: 1px solid var(--line); color: var(--blue); font-weight: 800; font-size: .875rem; }
  .who { display: inline-flex; align-items: center; gap: .5rem; max-width: 100%; }
  .who .pname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tag { font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--line); border-radius: 999px; padding: .1rem .45rem; }
  .dimtxt { color: var(--dim); font-weight: 500; }
  .empty { color: var(--dim); font-size: 1rem; font-weight: 600; padding: .5rem .25rem; }

  .mx-wrap { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  @container app (min-width: 64rem) { .mx-wrap { grid-template-columns: minmax(0, auto) minmax(18rem, 1fr); } }
  .mx { border-collapse: separate; border-spacing: .25rem; font-variant-numeric: tabular-nums; }
  .mx .colh { vertical-align: bottom; padding: 0 0 .25rem; color: var(--dim); font-size: .8125rem; font-weight: 700; }
  .mx .colh .vt { display: inline-flex; flex-direction: column-reverse; align-items: center; gap: .4rem; }
  .mx .colh .vn { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; max-height: 8rem; overflow: hidden; text-overflow: ellipsis; }
  .mx .rowh { text-align: left; white-space: nowrap; padding-inline-end: .5rem; font-size: .9375rem; font-weight: 700; color: var(--dim); max-width: 11rem; overflow: hidden; text-overflow: ellipsis; }
  .mx th.cross { color: var(--blue); }
  .mx .rowh .who { max-width: 10rem; }
  .mx td {
    width: 3.5rem; min-width: 3.5rem; height: 2.5rem; text-align: center; border-radius: .5rem;
    background: rgba(0,0,0,.22); border: 1px solid var(--line); font-size: .9375rem; font-weight: 700; cursor: pointer;
  }
  .mx td.self { background: repeating-linear-gradient(45deg, transparent 0 4px, rgba(59,66,97,.35) 4px 5px); border-color: transparent; cursor: default; }
  .mx td.fresh { color: var(--line2); }
  .mx td.won { border-color: rgba(158,206,106,.55); background: rgba(158,206,106,.13); color: #c6e6a5; }
  .mx td.lost { border-color: rgba(247,118,142,.55); background: rgba(247,118,142,.13); color: #ffb3c1; }
  .mx td.even { border-color: var(--line2); background: rgba(65,72,104,.35); color: var(--text); }
  .mx td.cross { box-shadow: inset 0 0 0 10rem rgba(122,162,247,.12); }
  .mx td.live { outline: 2px dashed var(--cyan); outline-offset: 1px; }
  .mx td.hot { outline: 2px solid var(--blue); outline-offset: 1px; }
  .mx td.sel { outline: 2px solid var(--gold); outline-offset: 1px; }
  .mx td { height: 3rem; }
  .mx-main { display: block; line-height: 1.15; }
  .mx-sub { display: block; font-size: var(--text-xs); line-height: 1.15; margin-top: .1rem; color: var(--dim); font-weight: 700; }
  .mx-note { margin-top: .625rem; font-size: .875rem; color: var(--dim); font-weight: 600; }
  .md { background: rgba(0,0,0,.18); border: 1px solid var(--line); border-radius: .75rem; padding: .875rem; min-height: 10rem; max-height: 32rem; overflow: auto; }
  .md-head { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; margin-bottom: .375rem; font-weight: 800; font-size: 1.0625rem; }
  .md-rec { font-variant-numeric: tabular-nums; color: var(--dim); font-size: .9375rem; white-space: nowrap; }
  .md-row { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .75rem; align-items: start; padding: .625rem 0; border-top: 1px solid rgba(59,66,97,.45); }
  .md-res { width: 2rem; height: 2rem; border-radius: .5rem; display: grid; place-items: center; font-weight: 800; font-size: .875rem; }
  .md-res.w { background: rgba(158,206,106,.15); color: var(--green); }
  .md-res.l { background: rgba(247,118,142,.15); color: var(--red); }
  .md-main { font-weight: 700; font-size: .9375rem; overflow-wrap: anywhere; }
  .md-head > span:first-child { min-width: 0; overflow-wrap: anywhere; }
  .md-meta { color: var(--dim); font-size: .8125rem; font-weight: 500; margin-top: .15rem; font-variant-numeric: tabular-nums; }

  .facts { list-style: none; }
  .fact { padding: .5rem .25rem; font-size: 1.0625rem; font-weight: 600; }
  .fact strong { color: var(--blue); }
  .log-row { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); gap: .75rem; padding: .625rem .25rem; border-top: 1px solid rgba(59,66,97,.45); font-size: 1rem; font-weight: 600; }
  .log-row:first-child { border-top: 0; }
  .log-time { font-variant-numeric: tabular-nums; color: var(--dim); font-size: .875rem; font-weight: 700; padding-top: .1rem; }
  .log-row small { display: block; color: var(--dim); font-size: .875rem; font-weight: 500; margin-top: .1rem; }
  .c-w { color: var(--green); } .c-l { color: var(--red); } .c-s { color: var(--purple); }
  .c-g { color: var(--gold); } .c-t { color: var(--teal); } .c-x { color: var(--purple); } .c-b { color: var(--cyan); }

  /* ---------- Phones (kept last so these win over the base rules above) ---------- */
  @container app (max-width: 40rem) {
    .timers { gap: .375rem; }
    .timer { gap: .3rem; padding: .25rem .5rem; letter-spacing: .04em; font-size: var(--text-xs); min-height: 2.25rem; }
    .timer b { font-size: .875rem; }
    .tbl { font-size: .9375rem; }
    .tbl td { padding: .5rem .25rem; }
    .tbl th { padding: 0 .25rem .5rem; letter-spacing: .04em; }
    .tbl .who { gap: .375rem; }
    .tbl th { width: 2.125rem; }
    .tbl th:first-child { width: 2.125rem; }
    .tbl th:last-child { width: 3rem; }
    .tbl th.tl { width: auto; }
    .setup-row { grid-template-columns: 5.75rem minmax(0, 1fr) 2.75rem; gap: .5rem; }
    .setup-tag { font-size: var(--text-xs); letter-spacing: .02em; gap: .3rem; }
    .rank { width: 1.625rem; height: 1.625rem; font-size: .75rem; }
    .mx .rowh .who { max-width: 6.5rem; }
    .log-row { grid-template-columns: 4.5rem minmax(0, 1fr); font-size: .9375rem; }
  }
  @container app (max-width: 28rem) {
    /* Narrow phones: action buttons stack icon over label so "Break & Run" fits */
    .act { flex-direction: column; gap: .2rem; min-height: 3.25rem; padding: .375rem .25rem; font-size: .75rem; }
    .queue-panel { padding: .625rem; }
  }

  /* Player cards: thin gradient outline in the player's colour with a faint glow, so they stand out from the team stripes */
  .card, .tcard .card {
    border: 1px solid transparent;
    background: linear-gradient(rgba(24,25,36,.95), rgba(24,25,36,.95)) padding-box,
                linear-gradient(135deg, oklch(.72 .13 var(--h) / .75), oklch(.72 .13 var(--h) / .12) 70%) border-box;
    box-shadow: 0 0 .75rem oklch(.65 .13 var(--h) / .14), 0 .125rem .5rem rgba(0,0,0,.35);
    transition: box-shadow .2s, transform .15s;
  }
  @media (hover: hover) {
    .card:hover { transform: translateY(-1px); box-shadow: 0 0 1.25rem oklch(.68 .14 var(--h) / .38), 0 .25rem .75rem rgba(0,0,0,.4); }
    .tcard[data-ids]:not(.hill):not(.break-glow):hover { border-color: rgba(125,140,190,.7); box-shadow: 0 0 1.5rem oklch(.62 .1 var(--h0) / .22), 0 0 1.5rem oklch(.62 .1 var(--h1) / .18); }
    .tcard { transition: border-color .2s, box-shadow .25s; }
  }
  @media (prefers-reduced-motion: reduce) {  
  @media (hover: hover) {
    .card:hover { transform: none; }
  }
}
  /* Phones: dice sits left of VS */
  @container app (max-width: 40rem) { .mid .dice-btn { left: auto; right: calc(50% + 2.5rem); } }
  .getting-started { padding: .625rem 1rem; text-align: center; line-height: 1.35; }
  @container app (max-width: 28rem) { .getting-started { font-size: .875rem; gap: .5rem; } }
  /* Long team names: smaller in the narrow queue and on phones, so more of the name fits */
  #queueList .tn-text:not(.tn-empty) { font-size: 1.125rem !important; }
  @container app (max-width: 40rem) { .match .team-head { padding-inline-end: 5.25rem; } .tn-text:not(.tn-empty) { font-size: 1.1875rem !important; } .score-tab b { font-size: 2.25rem; } }


  /* Collapsed queue rail: keep the vertical label on one line */
  .q-collapsed .queue-toggle .panel-title { white-space: nowrap; }

  /* 1v1: a single player per side, so the side card hugs its one card (no empty space) */
  .match .tcard.solo { min-height: 0 !important; justify-content: center; }

  .match .tcard.one { min-height: 0 !important; }
  .match .tcard.one .team-head { min-height: 1.75rem; padding-right: 0; }

  .spark { width: 2.75rem; height: 1.875rem; margin-inline-end: .5rem; align-self: center; overflow: visible; flex: none; }
  .spark polyline { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
  .spark.up polyline { stroke: var(--green); }
  .spark.down polyline { stroke: var(--red); }
  .spark line { stroke: rgba(154,165,206,.35); stroke-width: 1; stroke-dasharray: 2 2; }

  /* Win/loss strip sits outside the score tab, to its left, above the card */
  .score-tab .spark {
    position: absolute; right: calc(100% + 2px); top: auto; bottom: 42%; transform: translateY(50%); z-index: -1;
    height: 1.5rem; box-sizing: content-box; overflow: hidden; padding: .15rem .4rem .15rem .75rem; margin: 0;
    background: linear-gradient(90deg, rgba(20,21,31,0), rgba(20,21,31,.92) 1.5rem);
    border: 1px solid rgba(125,140,190,.28); border-right: 0; border-left-color: transparent; border-radius: .45rem 0 0 .45rem;
    box-shadow: 0 .375rem 1rem rgba(0,0,0,.35);
  }
  .spark rect.w { filter: drop-shadow(0 0 .15rem oklch(.75 .15 140 / .5)); }
  .spark rect.l { filter: drop-shadow(0 0 .15rem oklch(.7 .16 20 / .5)); }
  .spark rect.l { fill: var(--red); }
  .spark rect.w.new { transform-origin: 50% 100%; }
  @keyframes tickIn { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  @keyframes tickGlow { 0%, 30% { filter: brightness(1.8) drop-shadow(0 0 .35rem currentColor); } 100% { filter: none; } }
  @media (prefers-reduced-motion: reduce) { .spark rect.new { animation: none; } }
  #gameScreen, #gameScreen * { overflow-anchor: none; }

  @media (hover: hover) {
    a:hover { color: var(--cyan); }
    .btn:hover:not(:disabled) { background: #2f3549; border-color: var(--line2); }
    .btn-danger:hover:not(:disabled) { background: #3b2836; border-color: #b25a6e; }
    .btn-primary:hover:not(:disabled) { background: linear-gradient(180deg, #a3c0ff, #8fb3ff); border-color: #5a7ec9; }
    .timers:hover { color: var(--text); }
    .pause-btn:hover { color: var(--blue); border-color: var(--blue); }
    .team-name:hover { border-color: var(--line); }
    .team-name:hover svg { opacity: 1; color: var(--blue); }
    .card-x:hover { opacity: 1; color: var(--red); border-color: rgba(247,118,142,.5); }
    .dice-btn:hover:not(:disabled) { color: var(--blue); border-color: var(--blue); box-shadow: 0 0 1rem rgba(122,162,247,.5); }
    .act.samar:hover:not(:disabled) { opacity: 1; color: #16161e; background: var(--purple); border-color: #d7c3ff; box-shadow: 0 0 1.1rem rgba(187,154,247,.55); }
    .act.golden:hover:not(:disabled) { opacity: 1; color: #16161e; background: var(--gold); border-color: #ffe2a8; box-shadow: 0 0 1.1rem rgba(255,199,119,.55); }
    .act.bnr:hover:not(:disabled) { opacity: 1; color: #16161e; background: var(--teal); border-color: #b4f0e6; box-shadow: 0 0 1.1rem rgba(115,218,202,.55); }
    .lose-btn:hover:not(:disabled) {
    opacity: 1; color: #16161e; background: linear-gradient(180deg, var(--pink), var(--red)); border-color: #ffb3c1;
    box-shadow: 0 0 1.25rem rgba(247,118,142,.55), 0 .2rem .6rem rgba(0,0,0,.4);
  }
    .act.samar:hover:not(:disabled) svg { animation: shot .8s ease-in-out; }
    .act.golden:hover:not(:disabled) svg { animation: spin .8s cubic-bezier(.3,1.4,.5,1); }
    .act.bnr:hover:not(:disabled) svg { animation: zap .12s linear 4; }
    .lose-btn:hover:not(:disabled) { animation: nope .5s ease; }
    .undo-btn:hover:not(:disabled) svg { animation: rewind .5s ease; }
    .dice-btn:not(.rolling):hover:not(:disabled) svg { animation: wobble .5s ease; }
    .pause-btn:hover svg { animation: wobble .4s ease; }
    .ib.active:hover .i-back, .ib.active:hover .lbl-back { visibility: visible; }
    .ib.active:hover .i-main, .ib.active:hover .lbl { visibility: hidden; }
    a.btn:hover { color: var(--text); }
    .getting-started:hover { color: var(--cyan); }
    .undo-btn:hover:not(:disabled) { color: var(--blue); border-color: var(--blue); }
    .toast .x:hover { color: #fff; }
    .queue-toggle:hover { background: rgba(255,255,255,.03); }
    .queue-panel:hover { opacity: 1; }
    .tbl tr.pick:hover { background: rgba(255,255,255,.035); }
    .act.runout:hover:not(:disabled) { opacity: 1; color: #16161e; background: var(--cyan); border-color: #c4ecff; box-shadow: 0 0 1.1rem rgba(125,207,255,.55); }
    .btn-destructive:hover:not(:disabled) { background: linear-gradient(180deg, #ffb3c1, var(--pink)); border-color: #ffc9d3; box-shadow: 0 0 1rem rgba(247,118,142,.45); }
    .seg label:hover { color: var(--text); }
    .choice:hover { border-color: var(--line2); }
    .row-x:hover:not(:disabled) { color: var(--red); border-color: var(--red); }
    .icon-btn:hover { color: var(--blue); border-color: var(--blue); background: var(--bg2); }
    .icon-btn:hover svg { animation: lift .45s ease; }
    .menu-item:hover { background: #2f3549; outline: none; }
  }

  /* press feedback (ui-craft): 0.96, transform only */
  @media (prefers-reduced-motion: no-preference) {
    .btn, .act, .icon-btn, .side-it, .card-x { transition-property: background-color, color, border-color, box-shadow, opacity, transform; transition-duration: var(--dur-fast); transition-timing-function: var(--ease-out); }
    .btn:active:not(:disabled), .act:active:not(:disabled), .icon-btn:active, .side-it:active { transform: scale(.96); }
  }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
  .skip-link { position: absolute; inset-inline-start: -999px; top: 1rem; z-index: 2000; padding: .75rem 1rem; border-radius: .625rem; background: var(--color-accent); color: #0e1222; font-weight: 800; }
  .skip-link:focus { inset-inline-start: 1rem; }
  .menu-item:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
  .btn.sm { min-height: 2.75rem; padding: .4rem .8rem; font-size: .85rem; border-radius: .5rem; }
  .undo-btn[aria-disabled="true"] { opacity: .45; }

/* v2 slice 8: partner matrix. Phones get a per-player list; the grid gets edge cues when it scrolls */
.mx-list { display: none; }
@container app (max-width: 40rem) {
  #mxScroll { display: none; }
  .mx-list { display: grid; gap: .4rem; }
  .mx-note { font-size: 0; } .mx-note::after { content: attr(data-narrow); font-size: .875rem; }
}
.mx-pick-l { display: grid; gap: .3rem; margin-bottom: .35rem; color: var(--dim); font-size: .8125rem; font-weight: 700; }
.mx-pick { min-height: 2.75rem; padding: 0 .75rem; border: 1px solid var(--line2); border-radius: .625rem; background: var(--bg2, #24283b); color: var(--text); font: inherit; font-size: 1rem; font-weight: 700; }
.mx-li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 2.75rem; padding: .35rem .75rem; border: 1px solid var(--line); border-radius: .625rem; background: none; color: var(--text); font: inherit; font-weight: 700; text-align: start; cursor: pointer; }
.mx-li .who { min-width: 0; }
.mx-li-r { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mx-li.won { border-color: rgba(158,206,106,.55); background: rgba(158,206,106,.13); } .mx-li.won .mx-li-r { color: #c6e6a5; }
.mx-li.lost { border-color: rgba(247,118,142,.55); background: rgba(247,118,142,.13); } .mx-li.lost .mx-li-r { color: #ffb3c1; }
.mx-li.even { border-color: var(--line2); background: rgba(65,72,104,.35); }
.mx-li.fresh .mx-li-r { color: var(--dim); font-weight: 600; }
.mx-li.live { outline: 2px dashed var(--cyan); outline-offset: 1px; } .mx-li.sel { outline: 2px solid var(--gold); outline-offset: 1px; }
.mx-li:focus-visible, .mx-pick:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
#mxScroll.se-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); }
#mxScroll.se-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent); }
#mxScroll.se-l.se-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); }

/* v2 review round: on phones every toolbar button keeps its width when it turns into "Back to game" (it grew from 78 to 100 px) */
@container app (max-width: 40rem) {
  #rsapp .toolbar .btn.ib, #rsapp .toolbar .btn.ib.active { flex: 1 1 0; width: auto; min-width: 0; padding: 0; }
  #rsapp .toolbar .btn.ib.active .lbls { display: none; }
}
/* full screen only on tablets and up: hidden when either side of the screen is under 600 px (phones, phone landscape) */
@media (max-width: 599px), (max-height: 599px) { #fullBtn { display: none !important; } }

/* audit H5: text at 4.5:1 or better. Placeholders, queue title and count, pair score, unplayed matrix cells, unavailable actions (dashed edge instead of fading) */
#rsapp ::placeholder { color: var(--dim); opacity: 1; }
#rsapp .q-count, #rsapp .queue-panel .panel-title { color: var(--text); }
#rsapp .pair-score { color: var(--text); }
.mx td.fresh { color: var(--dim); }
#rsapp .act:disabled, #rsapp .lose-btn:disabled, .rs-ro .act, .rs-ro .lose-btn { opacity: 1 !important; color: var(--dim) !important; background: transparent !important; border-style: dashed !important; box-shadow: none !important; }
#rsapp .act:disabled svg, .rs-ro .act svg { opacity: .8; }
/* audit H3: ladder names wrap instead of being cut */
#ladder table { table-layout: auto; width: 100%; } #ladder th:nth-child(2), #ladder td:nth-child(2) { width: 100%; min-width: 5.5rem; } #ladder td:nth-child(2) .who, #ladder td:nth-child(2) .who-n, #ladder td:nth-child(2) span { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
/* audit M9: the full session title, not only in a tooltip: up to two lines on phones */
@container app (max-width: 40rem) { #rsapp #titleText { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } }
@container app (max-width: 40rem) { #ladder th, #ladder td { padding-inline: .25rem; } #ladder th:first-child, #ladder td:first-child { padding-inline-start: 0; } #ladder th:last-child, #ladder td:last-child { padding-inline-end: 0; } }
/* Shell styles for the platform app; everything visual comes from kit.css tokens */
.boot { color: var(--dim); padding: 3rem; text-align: center; }
.shell-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .375rem 0 .75rem; border-bottom: 1px solid var(--line); position: relative; }
.shell-head .brand-t { font-family: var(--display); font-style: italic; font-weight: 800; font-size: var(--text-lg); text-transform: uppercase; letter-spacing: .04em; color: var(--text); }
.shell-head .crumb { color: var(--dim); font-weight: 700; display: flex; align-items: center; gap: .5rem; min-width: 0; }
.shell-head .crumb b { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14rem; }
.shell-head .who { margin-inline-start: auto; display: flex; align-items: center; gap: .5rem; color: var(--dim); font-size: .875rem; flex-wrap: wrap; justify-content: flex-end; }
.who-badge { white-space: nowrap; display: inline-flex; align-items: center; font-size: var(--text-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: .2rem .5rem; border-radius: .35rem; background: var(--bg3); color: var(--dim); border: 1px solid var(--line); font-family: var(--display); font-style: italic; }
.who-badge.super { color: var(--color-accent); border-color: rgba(122,162,247,.5); }
.tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1rem 0; }
.tabs .btn[aria-selected="true"] { border-color: var(--color-accent); background: var(--color-accent-soft); color: #fff; }
.stack { display: grid; gap: var(--sp-4); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--sp-4); align-items: start; }
.row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.row .grow { flex: 1 1 10rem; }
.list { display: grid; gap: .5rem; }
.item { display: flex; align-items: center; gap: .625rem; padding: .625rem .75rem; border: 1px solid var(--line); border-radius: .625rem; background: rgba(0,0,0,.18); min-width: 0; flex-wrap: wrap; }
.item .n { font-weight: 700; flex: 1 1 10rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .m { color: var(--dim); font-size: .85rem; font-variant-numeric: tabular-nums; }
.item .text-input { flex: 1 1 10rem; width: auto; font-size: 1rem; padding: .4rem .6rem; }
.item .btn { min-height: 2.75rem; padding: .4rem .8rem; font-size: var(--text-sm); border-radius: .5rem; }
.item.paused { opacity: .55; }
.badge { font-size: var(--text-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: .2rem .5rem; border-radius: .35rem; background: var(--bg3); color: var(--dim); border: 1px solid var(--line); }
.badge.live { color: var(--color-live); border-color: rgba(158,206,106,.5); }
.badge.paused { color: var(--color-text-muted); border-style: dashed; }
.badge.pending { color: var(--cyan); border-color: rgba(125,207,255,.4); }
select.text-input { appearance: auto; }
.auth { width: 100%; max-width: 24rem; margin: 3rem auto 0; display: grid; gap: 1rem; }
.auth h2 { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 2rem; text-align: center; color: #fff; text-transform: uppercase; }
.auth .or { text-align: center; color: var(--dim); font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; }
.otp { display: flex; gap: .4rem; justify-content: center; }
.otp input { width: 2.75rem; height: 3.5rem; text-align: center; font: 800 1.6rem/1 var(--display); font-style: italic; color: #fff; background: rgba(0,0,0,.28); border: 1px solid var(--line); border-radius: .625rem; }
.otp input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(122,162,247,.25); }
.err { color: var(--color-danger); font-size: var(--text-sm); font-weight: 600; }
.empty { color: var(--color-text-muted); font-size: var(--text-md); padding: .5rem .25rem; }
.card-link { display: grid; gap: .25rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--r); background: rgba(0,0,0,.18); text-align: left; color: var(--text); cursor: pointer; }

.card-link b { font-family: var(--display); font-style: italic; font-weight: 800; font-size: var(--text-xl); color: #fff; }
.card-link span { color: var(--dim); font-size: .85rem; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.muted { color: var(--dim); }
.skel { background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.11) 50%, rgba(255,255,255,.05) 75%); background-size: 200% 100%; animation: skel 1.2s linear infinite; border-radius: .5rem; }
@keyframes skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }
.shell-head .vsel { flex: 0 1 17rem; min-width: 8rem; margin-inline-end: auto; } /* platform admins: the switcher stands in for the venue name */ .shell-head .vsel .xsel-btn { min-height: 2.75rem; } .shell-head .vsel .xsel-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-head .adm-back { display: inline-flex; align-items: center; gap: .5rem; flex: 0 0 auto; white-space: nowrap; min-height: 2.75rem; }
.shell-head .adm-back svg { width: 1.15rem; height: 1.15rem; flex: none; }

/* account menu */
.acct { position: relative; margin-inline-start: auto; display: inline-flex; }
.icon-btn.avatar { overflow: hidden; border-radius: 50%; padding: 0; }
.icon-btn.avatar img { width: 100%; height: 100%; object-fit: cover; }
.icon-btn.avatar .ini { font-family: var(--display); font-style: italic; font-weight: 800; font-size: .95rem; color: var(--text); }
.acct-menu { left: auto; right: 0; width: 17rem; }
.acct-id { padding: .6rem .75rem .5rem; border-bottom: 1px solid var(--line); margin-bottom: .25rem; display: grid; }
.acct-id b { font-weight: 800; } .acct-id small { color: var(--dim); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* concentric radii: outer radius = inner radius + padding */
.item { --pad: .625rem; padding: var(--pad) .75rem; border-radius: calc(.625rem + var(--pad)); }
.panel .item { --pad: .5rem; border-radius: .75rem; } /* inner stays smaller than the panel's .875rem */
.card-link { --pad: 1rem; border-radius: calc(.625rem + var(--pad)); }
/* Live now: one panel per table */
.live-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 38rem), 1fr)); gap: 1rem; }
.live-table { padding: 1rem 1.125rem 1.125rem; }
.live-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.live-eyebrow { font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); font-weight: 700; }
.live-eyebrow { display: block; margin-bottom: .25rem; }
.live-name { font-family: var(--display); font-style: italic; font-weight: 800; font-size: var(--text-xl); text-transform: uppercase; color: #fff; line-height: 1.1; }

/* custom select */
.xsel { position: relative; display: inline-flex; }
.xsel-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: .6rem; width: 100%; min-width: 9rem; text-align: left; }
.xsel-btn svg { width: 1rem; height: 1rem; flex: none; color: var(--dim); transition: transform .15s; }
.xsel.open .xsel-btn { border-color: var(--color-accent); } .xsel.open .xsel-btn svg { transform: rotate(180deg); }
.xsel-menu { display: none; width: max(100%, 12rem); }
.xsel.open .xsel-menu { display: flex; }
.xsel-opt[aria-selected="true"] { color: var(--color-accent); }
.xsel.small .xsel-btn { min-height: 2.25rem; padding: .3rem .6rem; font-size: .9rem; min-width: 7rem; }
.field .xsel, .field .nsel { width: 100%; }
select.text-input { appearance: none; -webkit-appearance: none; padding-inline-end: 2.25rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa5ce' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .6rem center; background-size: 1rem; }
.nsel.small { width: auto; min-height: 2.75rem; padding-top: .3rem; padding-bottom: .3rem; font-size: .9rem; }

.xsel.small .xsel-menu { left: auto; right: 0; }

.back-btn { width: 2.75rem; min-height: 2.75rem; padding: 0; display: inline-grid; place-items: center; border-radius: .625rem; }
.back-btn svg { width: 1.25rem; height: 1.25rem; }

a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; line-height: 1.2; }

.dlg-big { font-family: var(--display); font-style: italic; font-weight: 900; font-size: 3rem; letter-spacing: .25em; text-align: center; color: #fff; padding: .5rem 0 .25rem; user-select: all; }
.otp { display: flex; gap: .4rem; justify-content: center; }
.otp input { width: 2.75rem; height: 3.5rem; text-align: center; font: 800 1.6rem/1 var(--display); font-style: italic; color: #fff; background: rgba(0,0,0,.28); border: 1px solid var(--line); border-radius: .625rem; }
.otp input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(122,162,247,.25); }

.claim { margin-top: 1rem; }

.icon-btn.avatar.in-play { border: 2px solid hsl(var(--h) 70% 60%); box-shadow: 0 0 .8rem hsl(var(--h) 70% 60% / .55); }

.chip-pick:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-soft); color: #fff; }
.chip-pick input, label.btn input[type=checkbox] { accent-color: var(--color-accent); }

/* roster picker */
.picker { display: grid; gap: .5rem; }
.picked { display: flex; flex-wrap: wrap; gap: var(--sp-2); min-height: 1.5rem; }
.pchip { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .4rem .25rem .7rem; border-radius: 2rem; background: var(--color-accent-soft); border: 1px solid var(--color-accent); color: #fff; font-weight: 700; font-size: .9rem; }
.pchip.guest { background: rgba(255,255,255,.04); border-color: var(--color-border-strong); color: var(--text); } .pchip small { color: var(--dim); font-weight: 600; }
.pchip button { background: none; border: 0; color: var(--dim); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 .25rem; } 
.pick-list { max-height: 16rem; overflow-y: auto; display: grid; gap: var(--sp-1); padding: var(--sp-1); border: 1px solid var(--line); border-radius: .75rem; background: rgba(0,0,0,.18); }
.pick-row { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-radius: .5rem; cursor: pointer; }
 .pick-row:has(input:checked) { background: rgba(122,162,247,.12); }
.pick-row input { accent-color: var(--color-accent); width: 1.1rem; height: 1.1rem; } .pick-row .n { font-weight: 700; flex: 1; } .pick-row small { color: var(--dim); }

/* profile */
.prof-top { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.prof-photo { width: 6rem; height: 6rem; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: rgba(0,0,0,.3); border: 3px solid hsl(var(--h) 70% 60%); box-shadow: 0 0 1rem hsl(var(--h) 70% 60% / .45); flex: none; }
.prof-photo img { width: 100%; height: 100%; object-fit: cover; } .prof-photo .ini { font-family: var(--display); font-style: italic; font-weight: 900; font-size: 2.5rem; color: #fff; }
.hues { display: flex; gap: .875rem; flex-wrap: wrap; }
.hue::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2.75rem; height: 2.75rem; transform: translate(-50%, -50%); }
.hue { position: relative; width: 2.25rem; height: 2.25rem; cursor: pointer; } .hue input { position: absolute; opacity: 0; inset: 0; }
.hue span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: hsl(var(--h) 70% 55%); border: 3px solid transparent; transition: transform .12s; color: var(--dim); font-weight: 800; }
.hue.none span { background: var(--bg3); border-color: var(--line); }
.hue input:checked + span { border-color: #fff; transform: scale(1.12); box-shadow: 0 0 .8rem hsl(var(--h) 70% 55% / .7); }
.hue input:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* bracket */
.bk-scroll { overflow-x: auto; padding-bottom: .5rem; }
.bk-wrap { display: grid; gap: 1.5rem; min-width: max-content; }
.bk-sec h3 { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin: 0 0 .6rem; }
.bk { display: flex; gap: 2rem; align-items: stretch; }
.bk-col { display: flex; flex-direction: column; width: 13rem; flex: none; position: relative; padding-top: 1.4rem; scroll-snap-align: start; }
.bk-slot { flex: 1; display: flex; flex-direction: column; justify-content: center; position: relative; padding: .9rem 0; }
.bk-col:not(.last) .bk-slot::after { content: ""; position: absolute; right: -1rem; top: 50%; width: 1rem; border-top: 1px solid var(--line2); }
.bk-col.pair .bk-slot:nth-of-type(odd)::before { content: ""; position: absolute; right: -1rem; top: 50%; bottom: 0; border-right: 1px solid var(--line2); }
.bk-col.pair .bk-slot:nth-of-type(even)::before { content: ""; position: absolute; right: -1rem; top: 0; bottom: 50%; border-right: 1px solid var(--line2); }
.bk-col:not(:first-child) .bk-slot .bk-m::before { content: ""; position: absolute; left: -1rem; top: 50%; width: 1rem; border-top: 1px solid var(--line2); }
.bk-rl { margin: 0; }
.bk { scroll-snap-type: x proximity; }
@container app (max-width: 40rem) { .bk-col { width: clamp(11rem, 72cqw, 13rem); } }
.bk-rl { position: absolute; top: 0; left: 0; right: 0; font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); font-weight: 800; text-align: center; }
.bk-m { background: var(--bg1); border: 1px solid var(--line); border-radius: .6rem; overflow: visible; position: relative; }
.bk-m.act { cursor: pointer; } 
.bk-m.live { border-color: var(--color-live); box-shadow: 0 0 .9rem rgba(158,206,106,.25); } .bk-m.gf { border-color: var(--color-highlight); }

.bk-tag { position: absolute; top: -1.15rem; inset-inline-end: .5rem; line-height: 1; font-size: var(--text-xs); font-weight: 900; letter-spacing: .12em; padding: .15rem .45rem; border-radius: .3rem; background: var(--color-live); color: #0e1222; z-index: 1; } .bk-tag.wo { background: var(--bg3); color: var(--dim); border: 1px solid var(--line2); }
.bk-side { display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem; font-weight: 700; font-size: var(--text-sm); min-height: 2.1rem; }
.bk-side + .bk-side { border-top: 1px solid var(--line); }
.bk-side .bk-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bk-side .tbd { color: var(--dim); font-style: italic; font-weight: 600; }
.bk-side .bk-s { font-family: var(--display); font-style: italic; font-weight: 900; color: var(--dim); min-width: 1.2rem; text-align: end; }
.bk-side.won { background: rgba(158,206,106,.12); } .bk-side.won .bk-n, .bk-side.won .bk-s { color: var(--color-success); }
.bk-side.lost .bk-n { color: var(--dim); opacity: .55; position: relative; }
.bk-side.lost .bk-n::after { content: ""; position: absolute; left: -.1em; right: -.1em; top: 50%; height: .6em; transform: translateY(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M1 6 C 20 3, 40 8, 60 5 S 90 3, 99 5' fill='none' stroke='%23f7768e' stroke-width='2.2' stroke-linecap='round' opacity='.85'/%3E%3C/svg%3E") center / 100% 100% no-repeat; pointer-events: none; }
.bk-side.hl { background: rgba(255,199,119,.18); box-shadow: inset 3px 0 0 var(--color-highlight); } .bk-side.hl .bk-n { color: var(--color-highlight); }
.mscore { display: grid; gap: .5rem; } .msrow { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .msrow b { font-size: 1.05rem; }
.msn { font-family: var(--display); font-style: italic; font-weight: 900; font-size: 1.6rem; min-width: 2rem; text-align: center; color: #fff; }
.msrow .btn { width: 2.75rem; padding: 0; }

/* sidebar */
.shell { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--sp-5); margin-top: .75rem; align-items: start; }
.shell.collapsed { grid-template-columns: 3.5rem minmax(0, 1fr); }
.side { position: sticky; top: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-2); border: 1px solid var(--line); border-radius: var(--r); background: rgba(0,0,0,.18); min-height: 20rem; }
.side-it { display: flex; align-items: center; gap: .7rem; padding: .6rem .7rem; border-radius: .6rem; background: none; border: 0; color: var(--dim); font-weight: 700; text-align: left; cursor: pointer; position: relative; white-space: nowrap; min-height: 2.75rem; }
.side-it svg { width: 1.25rem; height: 1.25rem; flex: none; } 
.side-it.on { background: rgba(122,162,247,.14); color: #fff; box-shadow: inset 3px 0 0 var(--color-accent); }
.side-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--color-live); box-shadow: 0 0 .5rem var(--color-live); margin-inline-start: auto; }
.collapsed .side-it span { display: none; } .collapsed .side-it { justify-content: center; padding: .6rem 0; } .collapsed .side-dot { position: absolute; top: .35rem; inset-inline-end: .35rem; margin: 0; }
.side-toggle { color: var(--dim); }
@container app (max-width: 52rem) {
  .shell, .shell.collapsed { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; flex-direction: row; min-height: 0; overflow-x: auto; padding: .35rem; }
  .side-it span { display: none; } .side-it { padding: .6rem .8rem; } .side-toggle, .side .grow { display: none; } .side-dot { position: absolute; top: .35rem; right: .35rem; margin: 0; }
}

/* calendar */
.cal-scroll { overflow-x: auto; }
.cal { display: grid; grid-template-columns: 3.25rem repeat(var(--cols), minmax(7rem, 1fr)); min-width: calc(3.25rem + var(--cols) * 7rem); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: rgba(0,0,0,.18); user-select: none; -webkit-user-select: none; }
.cal-hd { padding: .5rem .4rem; text-align: center; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); font-size: var(--text-xs); color: var(--dim); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.cal-hd b { display: block; font-family: var(--display); font-style: italic; font-size: 1.15rem; color: #fff; letter-spacing: 0; text-transform: none; }
.cal-hd.today b { color: #0e1222; background: var(--color-accent); border-radius: .5rem; display: inline-block; min-width: 2.25rem; padding: .1rem .4rem; } .cal-hd:first-child { border-inline-start: 0; }
.cal-day.today { background: var(--color-accent-soft); }
.cal-now { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--color-danger); z-index: 3; pointer-events: none; } .cal-now::before { content: ""; position: absolute; left: -.3rem; top: -.35rem; width: .6rem; height: .6rem; border-radius: 50%; background: var(--color-danger); }
.cal-times, .cal-day { padding-top: .75rem; }
.cal-times .cal-t { height: 3.25rem; font-size: var(--text-xs); color: var(--dim); text-align: end; padding: 0 .4rem; font-variant-numeric: tabular-nums; transform: translateY(-.5em); line-height: 1; }
.cal-day { position: relative; border-left: 1px solid var(--line); }
.cal-cell { height: 3.25rem; border-bottom: 1px solid rgba(59,66,97,.5); cursor: crosshair; } 
.cal-cell.closed { background: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 6px, transparent 6px 12px); cursor: not-allowed; }
.cal-cell.sel { background: rgba(122,162,247,.25); }
.cal-bk { position: absolute; left: 3px; right: 3px; border-radius: .45rem; padding: .3rem .45rem; background: linear-gradient(180deg, hsl(var(--h) 45% 32%), hsl(var(--h) 45% 24%)); border: 1px solid hsl(var(--h) 50% 45%); font-size: var(--text-xs); font-weight: 700; overflow: hidden; cursor: pointer; display: grid; align-content: start; gap: .05rem; }
.cal-bk b { font-family: var(--display); font-style: italic; font-size: .85rem; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cal-bk small { color: var(--text); opacity: .8; font-variant-numeric: tabular-nums; }
.cal-bk.block { background: repeating-linear-gradient(135deg, var(--bg3) 0 6px, var(--bg2) 6px 12px); border-color: var(--line2); } .cal-bk.block b { color: var(--dim); }
.cal-bk.ns { border-color: var(--color-danger); } .cal-bk.ns b { text-decoration: line-through; color: var(--color-danger); }
.cal-bk.mine { box-shadow: 0 0 0 1px rgba(122,162,247,.6); }
.row .btn.on { border-color: var(--color-accent); background: var(--color-accent-soft); color: #fff; }

.bk-chips { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.dev-match { max-width: 46rem; margin: 1.5rem auto 0; display: grid; gap: 1rem; }
.dev-sides { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: start; }
.dev-side { text-align: center; display: grid; gap: .75rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--r); background: rgba(0,0,0,.18); }
.dev-name { font-family: var(--display); font-style: italic; font-weight: 800; font-size: var(--text-xl); text-transform: uppercase; color: #fff; }
.dev-score { font-family: var(--display); font-style: italic; font-weight: 900; font-size: 4rem; line-height: 1; color: #fff; }
@container app (max-width: 40rem) { .dev-sides { grid-template-columns: 1fr; } }

.rr-wrap { display: grid; gap: var(--sp-4); } .rr-rounds { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--sp-4); }
.rr-tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .rr-tbl th { font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); font-weight: 700; padding: 0 .5rem .5rem; text-align: right; } .rr-tbl td { padding: .5rem; text-align: right; border-top: 1px solid rgba(59,66,97,.5); white-space: nowrap; } .rr-tbl th:nth-child(2), .rr-tbl td.n { text-align: left; font-weight: 700; }
.item .n.won { color: var(--color-success); }

.choice { display: grid; gap: var(--sp-2); }
.choice-opt { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem .875rem; border: 1px solid var(--line); border-radius: .75rem; cursor: pointer; }
.choice-opt:has(input:checked) { border-color: var(--color-accent); background: rgba(122,162,247,.1); }
.choice-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice-opt { position: relative; }
.choice-opt b { display: block; } .choice-opt small { color: var(--dim); display: block; margin-top: .15rem; }

  @media (hover: hover) {
    .card-link:hover { border-color: var(--color-accent); }
    .pchip button:hover { color: var(--red); }
    .pick-row:hover { background: rgba(255,255,255,.04); }
    .bk-m.act:hover { border-color: var(--color-accent); }
    .side-it:hover { background: rgba(255,255,255,.05); color: var(--text); }
    .cal-cell:hover { background: rgba(122,162,247,.08); }
  }

/* ui-craft pass */
.note { color: var(--color-text-muted); font-size: var(--text-sm); max-width: 65ch; text-wrap: pretty; }
.hint { color: var(--dim); letter-spacing: 0; text-transform: none; font-weight: 600; }
.title-link { font-family: var(--display); font-style: italic; font-weight: 800; font-size: var(--text-xl); text-transform: uppercase; color: #fff; text-decoration: none; text-wrap: balance; }
.kpi { font-size: var(--text-2xl); font-family: var(--display); font-style: italic; font-variant-numeric: tabular-nums; }
.brand-t, .panel-title, .live-name { text-wrap: balance; }
.muted, .empty { text-wrap: pretty; }
.empty { max-width: 65ch; } .panel .empty { padding-inline: 0; font-size: var(--text-sm); } /* inside a panel: lined up with the title, the size of its notes */
.side-it[aria-current="page"] { background: rgba(122,162,247,.14); color: #fff; box-shadow: inset 3px 0 0 var(--color-accent); }
.pchip button { position: relative; } .pchip button::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2.75rem; height: 2.75rem; transform: translate(-50%, -50%); }
.bk-chips .btn { min-height: 2.75rem; }
.dev-score, .bk-side .bk-s, .msn { font-variant-numeric: tabular-nums; }
button.bk-m, button.cal-bk, button.cal-cell, button.item { font: inherit; color: inherit; text-align: start; letter-spacing: inherit; }
button.bk-m { display: block; width: 100%; padding: 0; }
button.bk-m:focus-visible, button.cal-bk:focus-visible, button.cal-cell:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; z-index: 2; }
button.cal-cell { display: block; width: 100%; background: none; border: 0; border-bottom: 1px solid rgba(59,66,97,.5); border-radius: 0; }
button.cal-cell:disabled { cursor: not-allowed; }
.bk-side.hl-focus { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.pick-list { mask-image: linear-gradient(to bottom, #000 calc(100% - 1.5rem), transparent); }
.bk-scroll { mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent); }
@container app (max-width: 52rem) { .side { mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent); } .cal-scroll { mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent); } }
.spin { display: inline-block; width: .9em; height: .9em; margin-inline-start: .5em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -.1em; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2s; } }
/* field errors: forms marked .vf reserve one line under every field, so an error never moves the layout */
.vf .field { display: block; }
.vf .field::after { content: ""; display: block; height: 1.25rem; }
.vf .field:has(> .fe)::after { display: none; }
.fe, .dlg-body p.fe, .field > p.fe { margin: 0; padding-top: .25rem; min-height: 1.25rem; box-sizing: border-box; font-size: var(--text-xs); font-weight: 700; line-height: 1rem; letter-spacing: 0; text-transform: none; color: var(--color-danger); text-wrap: pretty; }
.field.invalid .text-input, .field.invalid .xsel-btn, .field.invalid .dp-btn { border-color: var(--color-danger); }
.field.invalid .text-input:focus, .field.invalid .xsel-btn:focus-visible, .field.invalid .dp-btn:focus-visible { box-shadow: 0 0 0 3px rgba(247,118,142,.25); }
.field.invalid [role="group"] .btn, .field.invalid [role="group"] input[type="checkbox"] { border-color: var(--color-danger); }
.vf .grid2 { row-gap: var(--sp-2); }

/* better-* pass */
.item a.n, a.title-link, a.menu-item { text-decoration: none; color: var(--text); }
.item:has(> a.n) { transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
a.item { display: flex; align-items: center; gap: .6rem; color: inherit; text-decoration: none; }
.item a.n::after { content: " ›"; color: var(--color-text-muted); }
@media (hover: hover) { .item:has(> a.n:hover) { border-color: var(--color-accent); background: var(--color-accent-soft); } .item a.n:hover, a.title-link:hover { color: #fff; } .item a.n:hover::after { color: var(--color-accent); } }
.muted, .empty { max-width: 65ch; }
#cropCanvas:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }

/* form controls: one look for radios and checkboxes */
.check { display: inline-flex; align-items: flex-start; gap: .625rem; cursor: pointer; position: relative; min-height: 2.75rem; padding: .5rem 0; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ctl { flex: none; width: 1.375rem; height: 1.375rem; margin-top: .05rem; border: 2px solid var(--color-border-strong); border-radius: .375rem; background: rgba(0,0,0,.25); display: grid; place-items: center; transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.choice-opt .ctl { border-radius: 50%; }
.ctl::after { content: ""; width: .75rem; height: .75rem; border-radius: .125rem; background: #0e1222; transform: scale(0); transition: transform var(--dur-fast) var(--ease-out); }
.choice-opt .ctl::after { border-radius: 50%; width: .625rem; height: .625rem; }
.check .ctl::after { width: .45rem; height: .8rem; border: solid #0e1222; border-width: 0 2.5px 2.5px 0; border-radius: 0; background: none; transform: rotate(45deg) scale(0); margin-top: -.15rem; }
input:checked + .ctl { background: var(--color-accent); border-color: var(--color-accent); }
input:checked + .ctl::after { transform: scale(1); } .check input:checked + .ctl::after { transform: rotate(45deg) scale(1); }
input:focus-visible + .ctl { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (hover: hover) { .check:hover .ctl, .choice-opt:hover .ctl { border-color: var(--color-accent); } }
.day-toggles { display: flex; flex-wrap: wrap; gap: .375rem; }
.day-toggle { position: relative; } .day-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.day-toggle span { display: inline-grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 .5rem; border-radius: .5rem; border: 1px solid var(--color-accent); background: var(--color-accent-soft); color: #fff; font-weight: 700; font-size: var(--text-sm); cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
.day-toggle input:checked + span { background: none; border-color: var(--color-border); color: var(--dim); text-decoration: line-through; }
.day-toggle input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.hours-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.hours-tbl { border: 1px solid var(--color-border); border-radius: .75rem; padding: .75rem; display: grid; gap: .625rem; min-width: 0; }
.hours-tbl legend { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; padding: 0 .35rem; }
.dlg:has(.hours-grid) { width: min(44rem, calc(100vw - 2rem)); }
.dlg { overflow: hidden; max-height: calc(100dvh - 2rem); } /* one scroller per dialog: the body */
.dlg-body { max-height: calc(100dvh - 2rem - 2px); overflow-y: auto; overscroll-behavior: contain; }
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.form-foot .btn { margin-inline-start: auto; }
.callout { display: flex; gap: .6rem; align-items: flex-start; padding: .625rem .75rem; border-radius: .625rem; background: var(--color-accent-soft); border: 1px solid rgba(122,162,247,.35); color: var(--text); font-size: var(--text-sm); max-width: 40rem; flex: 1 1 18rem; }
.callout svg { width: 1.1rem; height: 1.1rem; flex: none; color: var(--color-accent); margin-top: .1rem; }
.cal-bk.pending { opacity: .6; outline: 1px dashed var(--color-accent); }

/* phase navigator */
.bk-nav { display: flex; align-items: stretch; gap: .5rem; position: sticky; top: .5rem; z-index: 6; }
.bk-nav .btn { min-width: 2.75rem; }
.bk-cur-wrap { position: relative; flex: 1; min-width: 0; }
.bk-cur { width: 100%; display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; }
.bk-cur .hint { font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; } .bk-cur b { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: var(--text-lg); } .bk-cur svg { width: 1rem; height: 1rem; color: var(--dim); }
.bk-menu { position: absolute; left: 0; right: 0; top: calc(100% + .35rem); max-height: 60vh; overflow-y: auto; list-style: none; margin: 0; }
.bk-menu-sec { font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); font-weight: 800; padding: .5rem .75rem .25rem; }
.bk-menu .menu-item { min-height: 2.75rem; } .bk-menu .menu-item.on { color: var(--color-accent); } @media (hover: hover) { .bk-menu .menu-item:hover { background: rgba(255,255,255,.05); } } .bk-menu .menu-item:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
/* header navigation */
.topnav { display: flex; align-items: center; gap: .25rem; margin-inline-start: auto; min-width: 0; }
.nav-it { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 .8rem; border-radius: .6rem; background: none; border: 0; color: var(--dim); font-weight: 700; cursor: pointer; position: relative; white-space: nowrap; }
.nav-it svg { width: 1.2rem; height: 1.2rem; flex: none; } .nav-it .side-dot { position: absolute; top: .4rem; right: .4rem; margin: 0; }
.nav-it.on { color: #fff; }
.topnav { position: relative; }
.nav-ind { position: absolute; left: 0; bottom: -1px; height: 3px; width: 0; border-radius: 3px 3px 0 0; background: var(--color-accent); box-shadow: 0 0 .75rem rgba(122,162,247,.55); transition: opacity .2s; pointer-events: none; z-index: 2; }
.nav-it span { transition: max-width .3s var(--ease-out), opacity .2s var(--ease-out), margin .3s var(--ease-out); white-space: nowrap; }
.shell-head .who { padding-inline-start: var(--sp-3); border-inline-start: 1px solid var(--line); }
.shell, .shell.collapsed { grid-template-columns: minmax(0, 1fr); } .side { display: none; }
/* 1a: labelled items at every width, the rest under Manage; the items take their own row under a wide tablet; phones get a tab bar */
.navrow { display: flex; align-items: center; gap: .25rem; min-width: 0; margin-inline-start: auto; }
.navrow .topnav { margin: 0; }
.navrow .ovf { position: absolute; visibility: hidden; pointer-events: none; } /* tabs that do not fit (in the menu now), kept for measuring */
.nav-man { position: relative; display: inline-flex; flex: none; }
.nav-man-btn .chev { width: 1rem; height: 1rem; margin-inline-start: -.15rem; transition: transform .2s var(--ease-out); }
.nav-man-btn[aria-expanded="true"] { color: var(--text); background: rgba(255,255,255,.05); }
.nav-man-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav-man-menu { left: auto; right: 0; width: 15.5rem; transform-origin: top right; }
.nav-man-menu .menu-item.on { color: #fff; background: var(--color-accent-soft); box-shadow: inset 0 0 0 1px rgba(122,162,247,.45); }
.more-list { padding: .375rem; display: grid; gap: .125rem; }
.more-list .menu-item { width: 100%; } .more-list .menu-item .go { margin-inline-start: auto; width: 1rem; height: 1rem; color: var(--dim); }
@media (hover: hover) { .more-list .menu-item:hover { background: #2f3549; } }
@container app (min-width: 66.01rem) { .shell-head { flex-wrap: nowrap; } .brand-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shell-head .who { flex: none; margin-inline-start: 0; } .navrow { flex: none; } }
@container app (max-width: 66rem) { .shell-head { row-gap: .5rem; } .shell-head .brand-t { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .navrow { order: 3; flex: 1 0 100%; margin: 0; justify-content: space-between; border-top: 1px solid var(--line); padding-top: .5rem; } .navrow .topnav { flex: 1 1 auto; } .navrow .nav-it { padding: 0 .55rem; gap: .4rem; } }
.tabbar { display: none; }
@container app (max-width: 47.5rem) {
  .navrow, .shell-head > .nav-ind { display: none !important; }
  .tabbar { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); position: fixed; inset: auto 0 0 0; z-index: 900; padding: 0 .25rem env(safe-area-inset-bottom); background: rgba(22,22,30,.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); box-shadow: 0 -.5rem 1.5rem rgba(10,12,28,.55); }
  .tab-it { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; min-height: 4rem; background: none; border: 0; color: var(--dim); font-size: var(--text-xs); font-weight: 700; letter-spacing: .02em; cursor: pointer; }
  .tab-it svg { width: 1.375rem; height: 1.375rem; flex: none; }
  .tab-it.on { color: #fff; }
  .tab-it.on::before { content: ""; position: absolute; top: -1px; left: 24%; right: 24%; height: 3px; border-radius: 0 0 3px 3px; background: var(--color-accent); box-shadow: 0 0 .75rem rgba(122,162,247,.6); }
  .tab-it .side-dot { position: absolute; top: .6rem; left: calc(50% + .55rem); margin: 0; }
  .tab-it:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -4px; border-radius: .75rem; }
  .main { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
}
/* logged out on a phone: venue name + Sign in; connecting a tablet is on the venue page */
@container app (max-width: 40rem) { .shell-head .who a[href="#/device"] { display: none; } .shell-head .who:not(:has(.acct)) { border: 0; padding: 0; } }
@media (prefers-reduced-motion: reduce) { .nav-man-btn .chev { transition: none; } }
/* people */
.phead { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); } .phead .panel-title { margin: 0; }
.invite-row { flex: 1 1 22rem; } .plist { display: grid; gap: var(--sp-2); }
.prow { display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: .75rem; background: rgba(0,0,0,.18); min-width: 0; }
.prow.pending { border-style: dashed; } .prow .pmain { flex: 1; min-width: 0; display: grid; } .prow .pmain b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .prow .pmain small { color: var(--dim); font-size: var(--text-xs); letter-spacing: .04em; }
.prow .pcontact { font-size: var(--text-xs); max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pav { width: 2.25rem; height: 2.25rem; border-radius: 50%; flex: none; object-fit: cover; border: 2px solid hsl(var(--h) 70% 60%); box-shadow: 0 0 .4rem hsl(var(--h) 70% 60% / .5); }
.pav.ini { display: grid; place-items: center; background: hsl(var(--h) 40% 24%); color: #fff; font-family: var(--display); font-style: italic; font-weight: 800; font-size: var(--text-sm); overflow: hidden; } .pav.ini img { width: 100%; height: 100%; object-fit: cover; }
@container app (max-width: 40rem) { .prow .pcontact { display: none; } }
/* custom select */
.xsel { position: relative; display: inline-flex; min-width: 9rem; } .xsel-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: .6rem; width: 100%; text-align: start; cursor: pointer; } .xsel-btn svg { width: 1rem; height: 1rem; flex: none; color: var(--dim); transition: transform var(--dur-fast) var(--ease-out); } .xsel.open .xsel-btn { border-color: var(--color-accent); } .xsel.open .xsel-btn svg { transform: rotate(180deg); }
.xsel-list { position: absolute; left: 0; min-width: 100%; top: calc(100% + .35rem); list-style: none; margin: 0; max-height: 50vh; overflow-y: auto; z-index: 30; } .xsel-opt { min-height: 2.75rem; cursor: pointer; } .xsel-opt[aria-selected="true"] { color: var(--color-accent); } .xsel-opt:hover { background: rgba(255,255,255,.05); } .xsel-opt:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.xsel.small .xsel-btn { min-height: 2.75rem; padding: .3rem .6rem; font-size: var(--text-sm); } .field .xsel { width: 100%; }
/* booking drag */
.cal-bk.editable { cursor: grab; } .cal-bk.editable:active { cursor: grabbing; }
.cal-rz { position: absolute; left: 0; right: 0; bottom: 0; height: .6rem; cursor: ns-resize; } .cal-rz::after { content: ""; position: absolute; left: 50%; bottom: .15rem; width: 1.5rem; height: 3px; border-radius: 2px; background: rgba(255,255,255,.35); transform: translateX(-50%); }
.cal-day.drop { background: var(--color-accent-soft); outline: 1px dashed var(--color-accent); outline-offset: -1px; }

.xsel.right .xsel-list { left: auto; inset-inline-end: 0; } .xsel-list { max-width: min(20rem, calc(100vw - 2rem)); }

/* month view */
.mgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(6.5rem, auto); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: rgba(0,0,0,.18); }
.mgrid .cal-hd { border-inline-start: 0; border-bottom: 1px solid var(--line); padding: .5rem .25rem; }
.mcell { border-top: 1px solid rgba(59,66,97,.5); border-inline-start: 1px solid rgba(59,66,97,.5); padding: .35rem; min-width: 0; display: grid; grid-template-rows: auto 1fr; gap: .25rem; }
.mcell:nth-child(7n+8) { border-inline-start: 0; }
.mcell.out { opacity: .45; } .mcell.closed { background: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 6px, transparent 6px 12px); }
.mcell.today { background: var(--color-accent-soft); }
.mday { display: flex; align-items: center; justify-content: space-between; gap: .35rem; background: none; border: 0; color: inherit; cursor: pointer; padding: .15rem .25rem; border-radius: .4rem; min-height: 2rem; text-align: start; }
.mday b { font-family: var(--display); font-style: italic; font-weight: 800; font-size: var(--text-md); color: #fff; }
.mcell.today .mday b { background: var(--color-accent); color: #0e1222; border-radius: .4rem; padding: 0 .4rem; }
.mcount { font-size: var(--text-xs); color: var(--dim); font-variant-numeric: tabular-nums; }
@media (hover: hover) { .mday:hover { background: rgba(255,255,255,.06); } }
.mday:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.mlist { display: grid; gap: .15rem; align-content: start; min-width: 0; }
.mbk { display: flex; align-items: center; gap: .3rem; min-width: 0; background: none; border: 0; color: var(--text); font: inherit; font-size: var(--text-xs); font-weight: 700; padding: .15rem .25rem; border-radius: .3rem; cursor: pointer; text-align: start; }
.mbk i { width: .5rem; height: .5rem; border-radius: 50%; background: hsl(var(--h) 50% 55%); flex: none; } .mbk.block i { background: var(--line2); } .mbk.ns i { background: var(--color-danger); }
.mbk span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mbk small { color: var(--dim); font-weight: 600; }
.mbk.ns span { text-decoration: line-through; color: var(--dim); }
@media (hover: hover) { .mbk:hover { background: rgba(255,255,255,.06); } } .mbk:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.mmore { background: none; border: 0; color: var(--color-accent); font: inherit; font-size: var(--text-xs); font-weight: 700; padding: .1rem .25rem; cursor: pointer; text-align: start; }
@container app (max-width: 48rem) { .mgrid { grid-auto-rows: minmax(4.5rem, auto); } .mlist { display: none; } .mcell { grid-template-rows: auto; } .mday { flex-direction: column; align-items: flex-start; } .mcount { font-weight: 800; color: var(--color-accent); } }

.page-title { font-family: var(--display); font-style: italic; font-weight: 900; font-size: 2rem; text-transform: uppercase; color: #fff; margin: var(--sp-5) 0 var(--sp-4); letter-spacing: 0; line-height: 1; }
.t-title { margin: 0; font-size: var(--text-2xl); flex: 0 1 auto; min-width: 0; }
.main > .stack { gap: var(--sp-5); }
.panel-title { font-size: var(--text-md); letter-spacing: .08em; margin-bottom: var(--sp-3); }
.field-label { font-size: var(--text-xs); letter-spacing: .1em; margin-bottom: .375rem; }
.live-name { font-size: var(--text-xl); }
.panel .kpi { display: block; }
.tip { position: fixed; z-index: 1300; transform: translate(-50%, 4px); padding: .375rem .625rem; border-radius: .5rem; background: var(--bg0); border: 1px solid var(--line2); color: var(--text); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.tip.show { opacity: 1; transform: translate(-50%, 0); }
[data-live] { min-height: 11rem; }

/* calendar: booker colours, system bookings, mine brighter */
.cal-bk { background: linear-gradient(180deg, hsl(var(--h) 38% 27%), hsl(var(--h) 38% 21%)); border-color: hsl(var(--h) 40% 40%); }
.cal-bk.mine { background: linear-gradient(180deg, hsl(var(--h) 62% 44%), hsl(var(--h) 62% 35%)); border-color: hsl(var(--h) 75% 66%); box-shadow: 0 0 0 1px hsl(var(--h) 75% 66% / .5), 0 .3rem 1rem hsl(var(--h) 70% 45% / .35); }
.cal-bk.mine b { color: #fff; }
.cal-bk.sys { background: linear-gradient(180deg, #252b45, #1e2238); border-color: rgba(122,162,247,.45); box-shadow: inset 3px 0 0 var(--color-accent); }
.cal-bk.sys.mine { border-color: var(--color-accent); box-shadow: inset 3px 0 0 var(--color-accent), 0 0 0 1px rgba(122,162,247,.55); }
.cal-bk.block { background: repeating-linear-gradient(135deg, #252b45 0 6px, #1e2238 6px 12px); }
.mbk.sys i { background: var(--color-accent); border-radius: .15rem; } .mbk.mine span { color: #fff; } .mbk:not(.mine) span { color: var(--dim); }
.cal-export { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; padding-top: .25rem; border-top: 1px solid var(--line); }
.cal-export-btns { display: flex; gap: .5rem; } .cal-export .btn { display: inline-flex; align-items: center; justify-content: center; line-height: 1.2; }
@container app (max-width: 28rem) { .cal-export-btns { flex: 1 1 100%; } .cal-export-btns .btn { flex: 1 1 0; min-width: 0; white-space: normal; text-align: center; } }
/* insights */
.ins-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--sp-4); }
.ins-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--sp-4); }
.ins-wide { grid-column: 1 / -1; }
.ins-bars { width: 100%; height: 9rem; display: block; } .ins-bars rect { fill: var(--color-accent); opacity: .85; } .ins-bars rect:hover { opacity: 1; fill: var(--cyan); }
.ins-axis { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--dim); margin-top: .35rem; }
.ins-lead { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.ins-lead li { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(4rem, 34%) auto auto; align-items: center; gap: .6rem; font-variant-numeric: tabular-nums; }
.ins-lead li:not(:has(.ins-rank)) { grid-template-columns: minmax(0, 1fr) minmax(4rem, 34%) auto auto; }
.ins-lead .n { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-lead small { color: var(--dim); font-size: var(--text-xs); min-width: 2.5rem; text-align: end; }
.ins-rank { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--bg0); border: 1px solid var(--line); font-weight: 800; font-size: var(--text-xs); color: var(--color-accent); }
.ins-bar { height: .5rem; border-radius: .25rem; background: rgba(255,255,255,.06); overflow: hidden; } .ins-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--color-accent), var(--cyan)); border-radius: inherit; }
.ins-specials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); }
.ins-sp { display: flex; justify-content: space-between; gap: .5rem; font-weight: 700; } .ins-sp .n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* bracket: current phase, pinned player, schedule view */
.bk-col { isolation: isolate; }
.bk-col::before, .bk-col::after { content: ""; position: absolute; inset: -.25rem -.75rem -.5rem; border-radius: 1.125rem; pointer-events: none; opacity: 0; transition: opacity .3s var(--ease-out); }
.bk-col::before { z-index: -1; background: linear-gradient(180deg, rgba(122,162,247,.12), rgba(122,162,247,.02) 70%, transparent); }
.bk-col::after { padding: 1px; background: linear-gradient(180deg, rgba(122,162,247,.6), rgba(122,162,247,.12) 55%, rgba(122,162,247,0)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.bk-col.cur::before, .bk-col.cur::after { opacity: 1; }
.bk { padding: .5rem .75rem 1rem; }
.bk-col.cur .bk-rl { color: var(--color-accent); }
.bk-col .bk-rl { padding: 0 .25rem; }
.t-viewbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.seg { display: inline-flex; gap: .25rem; padding: .25rem; border: 1px solid var(--line); border-radius: .75rem; background: rgba(0,0,0,.25); }
.seg .btn { border: 0; background: none; color: var(--dim); } .seg .btn.on { background: var(--color-accent-soft); color: #fff; box-shadow: inset 0 0 0 1px rgba(122,162,247,.5); }
.pin-btn { background: none; border: 0; color: inherit; font: inherit; font-weight: 700; padding: .35rem .25rem; margin: -.35rem -.25rem; cursor: pointer; text-align: start; border-radius: .35rem; }
.pin-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.rr-tbl tr.pinned td, .rr-tbl tr.peek td { background: rgba(255,199,119,.12); } .rr-tbl tr.pinned td:first-child { box-shadow: inset 3px 0 0 var(--color-highlight); } .rr-tbl tr.pinned .pin-btn { color: var(--color-highlight); }
.rr-tbl tr[data-seed] { cursor: pointer; }
.t-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); position: relative; }
.t-phase { padding-inline-start: 1.25rem; position: relative; }
.t-phase::before { content: ""; position: absolute; left: .3rem; top: .5rem; bottom: -1rem; width: 2px; background: var(--line); }
.t-phase:last-child::before { bottom: auto; height: 1rem; }
.t-phase::after { content: ""; position: absolute; left: 0; top: .35rem; width: .65rem; height: .65rem; border-radius: 50%; background: var(--bg2); border: 2px solid var(--line2); }
.t-phase.done::after { background: var(--color-success); border-color: var(--color-success); } .t-phase.live::after { background: var(--color-live); border-color: var(--color-live); box-shadow: 0 0 .6rem var(--color-live); }
.t-phase h3 { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: var(--text-lg); margin: 0 0 .6rem; }
.t-phase h3 .hint { font-size: var(--text-xs); letter-spacing: .1em; font-style: normal; font-family: inherit; }
.t-phase h3 .badge { margin-inline-start: auto; }
.t-match { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; gap: .5rem; width: 100%; text-align: start; }
.t-li-side { padding: .25rem .4rem; border-radius: .4rem; min-height: 0; } .t-li-side + .t-li-side { border-top: 0; }
.t-vs { color: var(--dim); font-family: var(--display); font-style: italic; font-weight: 800; }
@container app (max-width: 36rem) { .t-match { grid-template-columns: minmax(0, 1fr) auto; } .t-vs { display: none; } .t-match .t-li-side { grid-column: 1 / -1; } .t-match .badge { grid-column: 1 / -1; justify-self: start; } }

.badge, .who-badge { white-space: nowrap; flex: none; }

.bk-cur-txt { display: grid; justify-items: center; gap: .1rem; line-height: 1.1; min-width: 0; }
.bk-cur-txt .hint { font-size: var(--text-xs); } .bk-cur-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.bk-side.pin { background: rgba(255,199,119,.2); box-shadow: inset 3px 0 0 var(--color-highlight); } .bk-side.pin .bk-n { color: var(--color-highlight); }
.bk-side.hl:not(.pin) { background: rgba(255,199,119,.09); box-shadow: inset 2px 0 0 rgba(255,199,119,.5); } .bk-side.hl:not(.pin) .bk-n { color: var(--text); }
.rr-tbl tr.peek td { background: rgba(255,199,119,.06); }
/* schedule rows: names and scores meet at "vs" */
.t-match { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; column-gap: .75rem; }
.t-li-side { display: flex; align-items: center; gap: .6rem; min-width: 0; } .t-li-side .bk-n { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-li-side .bk-s { min-width: 1.5rem; text-align: center; font-size: var(--text-lg); }
.t-a { justify-content: flex-end; text-align: end; } .t-b { flex-direction: row-reverse; justify-content: flex-end; }
@container app (max-width: 36rem) { .t-match { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } .t-vs { display: block; } .t-match .t-li-side { grid-column: auto; } .t-match .badge { grid-column: 1 / -1; justify-self: center; } }

.live-eyebrow { display: flex; align-items: center; gap: .625rem; margin-bottom: .5rem; }
.live-eyebrow .badge { margin: 0; }

/* calendar header row: same height and layout in month, week and day */
.cal-hd { min-height: 3.75rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; }
.cal-hd b { display: block; line-height: 1.1; max-width: 100%; padding-inline: .1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-hd.today b { display: block; width: fit-content; margin: 0 auto; padding: .05rem .5rem; }
.mgrid { grid-template-rows: auto; }
.mgrid .cal-hd { padding: 0 .25rem; }

/* breadcrumbs */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin: var(--sp-4) 0 0; padding: 0; font-size: var(--text-sm); color: var(--dim); }
.crumbs li { display: flex; align-items: center; gap: .375rem; min-width: 0; }
.crumbs li + li::before { content: "›"; color: var(--line2); }
.crumbs a { color: var(--dim); text-decoration: none; border-radius: .25rem; padding: .25rem .125rem; margin: -.25rem -.125rem; }
@media (hover: hover) { .crumbs a:hover { color: var(--text); text-decoration: underline; text-underline-offset: .2em; } }
.crumbs a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.crumbs [aria-current] { color: var(--text); font-weight: 600; max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumbs + .page-title { margin-top: var(--sp-2); }
.crumbs + #claim, .crumbs + #tour, .crumbs + section { margin-top: var(--sp-3); }

/* phase navigator: compact, chevron at the edge, menu as wide as the button */
.bk-nav .btn { min-height: 2.75rem; }
.bk-cur { position: relative; min-height: 2.75rem; padding: .2rem 2.75rem; }
.bk-cur svg { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); }
.bk-cur-txt { gap: 0; } .bk-cur-txt .hint { line-height: 1.1; font-size: .6875rem; } .bk-cur-txt b { font-size: var(--text-md); line-height: 1.15; }
.bk-menu { left: 0; right: 0; width: auto; min-width: 0; max-width: none; }
/* clear highlight floats */
.pin-float { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40; display: inline-flex; align-items: center; gap: .5rem; background: var(--bg2); border-color: var(--color-highlight); color: var(--color-highlight); box-shadow: 0 .75rem 2rem rgba(0,0,0,.5); }
.pin-float svg { width: 1rem; height: 1rem; }
.rr-tbl tr[data-seed] td { transition: background-color var(--dur-fast); }
.th-tip { text-decoration: underline dotted; text-decoration-color: var(--line2); text-underline-offset: .2em; cursor: help; }
/* list pages */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin: var(--sp-2) 0 var(--sp-4); }
.page-head .page-title { margin: 0; }
.page-act { display: inline-flex; align-items: center; gap: .4rem; } .page-act svg { width: 1.1rem; height: 1.1rem; }
.lst-tools { display: flex; gap: .5rem var(--sp-3); flex-wrap: wrap; align-items: center; margin-bottom: var(--sp-3); }
.lst-q { flex: 1 1 14rem; width: auto; } .lst-date { display: inline-flex; align-items: center; gap: .4rem; } .lst-date .text-input { width: auto; }
.lst-panel { padding: 0; overflow: hidden; } .lst-scroll { overflow-x: auto; }
.lst { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.lst th { text-align: start; font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); font-weight: 700; padding: .75rem 1rem .5rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.lst td { padding: .5rem 1rem; border-bottom: 1px solid rgba(59,66,97,.45); vertical-align: middle; }
.lst tbody tr.row-act { cursor: pointer; } .lst tbody tr:last-child td { border-bottom: 0; }
@media (hover: hover) { .lst tbody tr.row-act:hover td { background: rgba(255,255,255,.03); } }
.lst td.n a { color: #fff; font-weight: 700; text-decoration: none; } @media (hover: hover) { .lst td.n a:hover { color: var(--color-accent); } }
.lst td.n { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lst .m { color: var(--dim); font-size: var(--text-sm); white-space: nowrap; }
.lst .act-cell { width: 3.5rem; text-align: end; } .lst .icon-btn svg { width: 1.1rem; height: 1.1rem; }
.lst-pg { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .75rem 1rem; border-top: 1px solid var(--line); color: var(--dim); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.dlg.dlg-lg { width: min(46rem, calc(100vw - 2rem)); }
@container app (max-width: 40rem) { .lst .hide-sm { display: none; } .lst-date { flex: 1 1 8rem; } .lst-date .text-input { flex: 1; } }

.stack { grid-template-columns: minmax(0, 1fr); }

/* read-only game blocks: no drag affordance */
.rs-live .card, .rs-live .tcard, .rs-live .zone, #rsapp.rs-ro .card, #rsapp.rs-ro .tcard { cursor: default !important; }
.rs-live .t-grip, #rsapp.rs-ro .t-grip { display: none !important; }
#rsapp #holdField { display: none !important; }
/* list pages: filters, sort, pager */
.page-acts { gap: .5rem; } .filt-btn { position: relative; } .filt-btn svg { width: 1.15rem; height: 1.15rem; }
.filt-btn[aria-expanded="true"], .filt-btn.on { border-color: var(--color-accent); color: #fff; }
.filt-dot { position: absolute; top: .4rem; right: .4rem; width: .45rem; height: .45rem; border-radius: 50%; background: var(--color-accent); }
.lst-tools { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)) auto; gap: var(--sp-3); align-items: end; margin-bottom: var(--sp-4); }
.lst-tools .field { margin: 0; } .lst-tools .text-input { width: 100%; }
.lst-tools.hidden { display: none; }
@container app (max-width: 40rem) { .lst-tools { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .lst-tools .field:first-child { grid-column: 1 / -1; } }
.th-sort { background: none; border: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; padding: .25rem 0; }
.th-sort i { font-style: normal; font-size: .7em; opacity: .5; } .th-sort.on { color: var(--text); } .th-sort.on i { opacity: 1; color: var(--color-accent); }
.th-sort:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: .25rem; }
.lst-pg { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: .625rem 1rem; border-top: 1px solid var(--line); }
.pg-per { display: inline-flex; align-items: center; gap: .6rem; color: var(--dim); font-size: var(--text-sm); } .pg-per .xsel { min-width: 5rem; }
.pg { display: inline-flex; align-items: center; gap: .25rem; }
.pg-n, .pg-arrow { min-width: 2.75rem; min-height: 2.75rem; padding: 0 .75rem; border-radius: .625rem; background: none; border: 1px solid transparent; color: var(--text); font: inherit; font-weight: 700; cursor: pointer; font-variant-numeric: tabular-nums; }
.pg-n.on { background: var(--bg3); border-color: var(--line2); color: #fff; }
.pg-arrow:disabled { opacity: .35; cursor: not-allowed; } .pg-gap { color: var(--dim); padding: 0 .25rem; }
@media (hover: hover) { .pg-n:not(.on):hover, .pg-arrow:not(:disabled):hover { background: rgba(255,255,255,.05); } }
.pg-n:focus-visible, .pg-arrow:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
@container app (max-width: 40rem) { .pg .pg-n:not(.on), .pg .pg-gap { display: none; } .lst-pg { justify-content: center; } }

.lst-tools .text-input { height: 2.75rem; min-height: 2.75rem; box-sizing: border-box; -webkit-appearance: none; appearance: none; }

/* filter row expands smoothly */
.lst-tools-wrap { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .28s var(--ease-out), opacity .2s var(--ease-out); }
.lst-tools-wrap.open { grid-template-rows: 1fr; opacity: 1; }
.lst-tools-wrap > .lst-tools { overflow: hidden; min-height: 0; margin: -3px; padding: 3px 3px calc(var(--sp-4) + 3px); }
@media (prefers-reduced-motion: reduce) { .lst-tools-wrap { transition: none; } }
.lst-tools.simple { grid-template-columns: minmax(0, 1fr) auto; }
.filt-btn { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; } .filt-btn svg { display: block; width: 1.15rem; height: 1.15rem; transform: translateY(1px); }
/* people rows */
.pcell { display: flex; align-items: center; gap: .65rem; min-width: 0; } .pcell-t { display: grid; min-width: 0; } .pcell-t b, .pcell-t > a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pcell-t small { color: var(--dim); font-size: var(--text-xs); font-weight: 600; }
.lst td.n .pav { width: 2rem; height: 2rem; }
.badge.paused { color: var(--color-text-muted); border-style: dashed; }

/* closed filter row takes no space; spacing only when open */
.lst-tools-wrap > .lst-tools { padding: 0; margin: 0; }
.lst-tools-wrap > .lst-tools > * { margin: 3px; }
.lst-tools-wrap { margin-bottom: 0; transition: grid-template-rows .28s var(--ease-out), opacity .2s var(--ease-out), margin-bottom .28s var(--ease-out); }
.lst-tools-wrap.open { margin-bottom: var(--sp-4); }
.lst-tools-wrap > .lst-tools { gap: calc(var(--sp-3) - 6px); }

/* one checkbox look everywhere */
input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; margin: 0; width: 1.375rem; height: 1.375rem; border: 2px solid var(--color-border-strong); border-radius: .375rem; background: rgba(0,0,0,.25); display: inline-grid; place-content: center; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); vertical-align: middle; }
input[type="checkbox"]::after { content: ""; width: .42rem; height: .78rem; border: solid #0e1222; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); margin-top: -.15rem; transition: transform var(--dur-fast) var(--ease-out); }
input[type="checkbox"]:checked { background: var(--color-accent); border-color: var(--color-accent); } input[type="checkbox"]:checked::after { transform: rotate(45deg) scale(1); }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (hover: hover) { input[type="checkbox"]:not(:checked):hover { border-color: var(--color-accent); } }
label.btn:has(> input[type="checkbox"]) { display: inline-flex; align-items: center; gap: .6rem; }
.pick-row { align-items: center; } .pick-row input { accent-color: initial; }
/* dialog rows line up */
.dlg .grid2 { align-items: end; } .dlg .text-input, .dlg .xsel-btn { height: 2.75rem; min-height: 2.75rem; box-sizing: border-box; }
.xsel-list.hidden { display: none !important; }
/* empty live tables stay small */
[data-live]:has(> .empty, > .empty-card) { min-height: 0; } .live-table:has([data-live] > .empty, [data-live] > .empty-card) .live-head { margin-bottom: var(--sp-2); }
/* home crumb, venue name link */
.crumb-home { display: inline-grid; place-items: center; } .crumb-home svg { width: 1rem; height: 1rem; display: block; }
.brand-link { color: inherit; text-decoration: none; } @media (hover: hover) { .brand-link:hover { color: #fff; } } .brand-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: .25rem; }
/* scroll-edge shadows */
.lst-scroll, .cal-scroll, .bk-scroll, .pick-list, .dlg-body, .md-list { --sl: 0 0 transparent; --sr: 0 0 transparent; --st: 0 0 transparent; --sb: 0 0 transparent; box-shadow: var(--sl), var(--sr), var(--st), var(--sb); transition: box-shadow .2s; }
.se-l { --sl: inset 1.5rem 0 1.25rem -1.25rem rgba(0,0,0,.75); } .se-r { --sr: inset -1.5rem 0 1.25rem -1.25rem rgba(0,0,0,.75); }
.se-t { --st: inset 0 1.5rem 1.25rem -1.25rem rgba(0,0,0,.75); } .se-b { --sb: inset 0 -1.5rem 1.25rem -1.25rem rgba(0,0,0,.75); }
.bk-scroll, .pick-list { mask-image: none !important; -webkit-mask-image: none !important; }

/* calendar: page-head icons, view/table filter row, period bar */
.head-ic { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; } .head-ic svg { display: block; width: 1.2rem; height: 1.2rem; }
.lst-tools.cal-tools { grid-template-columns: auto minmax(0, 16rem); justify-content: start; }
.cal-tools .seg { display: flex; padding: 2px; } .cal-tools .seg .btn { min-height: calc(2.75rem - 6px); padding-inline: 1rem; }
@container app (max-width: 40rem) { .lst-tools.cal-tools { grid-template-columns: minmax(0, 1fr); } .cal-tools .seg .btn { flex: 1; } }
.cal-bar { display: flex; align-items: center; gap: var(--sp-3) var(--sp-4); flex-wrap: wrap; }
.cal-title { margin: 0; display: flex; align-items: baseline; gap: .1rem .65rem; flex-wrap: wrap; min-width: 0; }
.cal-title b { font-family: var(--display); font-style: italic; font-weight: 800; font-size: var(--text-xl); line-height: var(--lh-tight); text-transform: uppercase; color: #fff; }
.cal-title span { color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 600; }
.cal { grid-template-columns: 3.25rem repeat(var(--cols), minmax(var(--colw, 7rem), 1fr)); min-width: calc(3.25rem + var(--cols) * var(--colw, 7rem)); }
/* week · all tables (few): day groups with one column per table */
.cal.split { --colw: 4.75rem; }
.cal-hd.corner { grid-row: span 2; }
.cal-hd.grp { grid-column: span var(--n); border-bottom-color: rgba(59,66,97,.5); }
.cal-hd.sub { padding: .35rem .3rem; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-hd.sub:not(.first), .cal.split .cal-day:not(.first) { border-inline-start-color: rgba(59,66,97,.5); }
.cal-hd.grp, .cal-hd.sub.first, .cal.split .cal-day.first { border-inline-start-color: var(--line2); }
/* week · all tables (many): free tables per hour */
.cal-lc { display: flex; align-items: center; gap: .4rem; width: 100%; height: 3.25rem; padding: 0 .5rem; border: 0; border-bottom: 1px solid rgba(59,66,97,.5); border-radius: 0; font: inherit; font-size: var(--text-xs); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; text-align: start; cursor: pointer;
  background: linear-gradient(to right, rgba(154,165,206,.16) calc(var(--f, 0) * 100%), transparent 0); }
.cal-lc.full { color: var(--color-text-muted); background: rgba(154,165,206,.22); }
.cal-lc.closed { cursor: default; background: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 6px, transparent 6px 12px); }
.cal-lc-me { flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--color-accent); }
.cal-lc:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; position: relative; z-index: 2; }
@media (hover: hover) { button.cal-lc:hover { background-color: rgba(122,162,247,.1); } }

/* date picker */
.dp { display: contents; }
.dp-ctl { display: flex; gap: .5rem; min-width: 0; }
.dp-btn { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex: 1 1 auto; min-width: 0; height: 2.75rem; min-height: 2.75rem; box-sizing: border-box; text-align: start; cursor: pointer; }
.dp-btn svg { flex: none; width: 1.1rem; height: 1.1rem; color: var(--color-text-muted); }
.dp-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dp-val.empty { color: var(--color-text-muted); font-weight: 500; }
.dp-btn[aria-expanded="true"] { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(122,162,247,.25); }
.dp-time { flex: 0 0 7.25rem; width: 7.25rem !important; }
.lst-tools .dp > .field { margin: 3px; }
.dp-pop { position: fixed; inset: auto; margin: 0; z-index: 1400; width: max-content; max-width: calc(100vw - 1rem); padding: .75rem; border: 1px solid var(--line2); border-radius: 1rem; background: var(--bg2); color: var(--text); box-shadow: var(--shadow); overflow: visible; }
.dp-pop:popover-open, .dp-pop:not([popover]) { animation: menuIn var(--dur-fast) var(--ease-out); }
.dp-hint { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); }
.dp-nav { flex: none; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 1px solid var(--line); border-radius: .625rem; background: transparent; color: var(--text); font: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer; }
.dp-months { display: flex; gap: 1.25rem; align-items: flex-start; }
.dp-mhead { display: flex; align-items: center; justify-content: space-between; gap: .25rem; margin-bottom: .35rem; } .dp-nav-sp { width: 2.5rem; flex: none; }
.dp-title { flex: 1; text-align: center; font-family: var(--display); font-style: italic; font-weight: 800; font-size: var(--text-md); text-transform: uppercase; letter-spacing: .04em; color: #fff; }
.dp-grid { border-collapse: collapse; }
.dp-grid th { width: 2.5rem; padding: 0 0 .3rem; font-size: var(--text-xs); font-weight: 700; color: var(--color-text-muted); text-align: center; }
.dp-grid td { padding: 1px 0; }
.dp-day { position: relative; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 0; border-radius: .5rem; background: none; color: var(--text); font: inherit; font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.dp-day.today::after { content: ""; position: absolute; left: 32%; right: 32%; bottom: .35rem; height: 2px; border-radius: 1px; background: var(--color-accent); }
.dp-day.in, .dp-day.pv { border-radius: 0; background: var(--color-accent-soft); }
.dp-day.pv:not(.in) { background: rgba(122,162,247,.1); }
.dp-day.sel { background: var(--color-accent); color: #0e1222; font-weight: 800; }
.dp-day.sel.today::after { background: #0e1222; }
.dp-day.start:not(.end) { border-radius: .5rem 0 0 .5rem; } .dp-day.end:not(.start) { border-radius: 0 .5rem .5rem 0; }
.dp-day:focus-visible, .dp-nav:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; z-index: 1; }
@media (hover: hover) { .dp-day:not(.sel):hover { background: rgba(255,255,255,.08); } .dp-nav:hover { border-color: var(--line2); background: rgba(255,255,255,.04); } }
@media (pointer: coarse) { .dp-day, .dp-grid th { width: 2.75rem; } .dp-day { height: 2.75rem; } .dp-nav, .dp-nav-sp { width: 2.75rem; height: 2.75rem; } }
.dp-foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .5rem; padding-top: .6rem; border-top: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) { .dp-pop { animation: none !important; } }

/* tournament form: options open under the choice that enables them */
.choice-card { border: 1px solid var(--line); border-radius: .75rem; transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.choice-card:has(> .choice-opt input:checked) { border-color: var(--color-accent); background: rgba(122,162,247,.06); }
.choice-card > .choice-opt, .choice-card > .choice-opt:has(input:checked) { border: 0; background: none; }
.opt-more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .28s var(--ease-out), opacity .2s var(--ease-out); }
.opt-more.open { grid-template-rows: 1fr; opacity: 1; }
.opt-in { overflow: hidden; min-height: 0; margin: -3px; padding: 3px; }
.choice-card .opt-pad { display: grid; gap: var(--sp-3); padding: 0 .875rem .875rem 3rem; }
.choice-card .opt-pad .opt-more .opt-pad, .opt-more.flush > .opt-in > .opt-pad { padding: 0; }
.opt-pad .opt-more.open { margin-top: calc(-1 * var(--sp-1)); }
@media (prefers-reduced-motion: reduce) { .opt-more { transition: none; } }
.fmt-choices { display: grid; gap: var(--sp-2); }
.race-row { border: 0; margin: 0; padding: 0; min-width: 0; } .race-row > legend { padding: 0; float: left; width: 100%; } .race-row > legend + * { clear: both; }
.race-list { display: grid; gap: var(--sp-2) var(--sp-4); min-width: 0; } .race-list .xsel { min-width: 0; }
.vf .field.fmt-field::after, .vf .field.seed-field::after { display: none; }
.check.radio .ctl { border-radius: 50%; }
.check.radio .ctl::after { width: .625rem; height: .625rem; border: 0; border-radius: 50%; background: #0e1222; transform: scale(0); margin: 0; }
.check.radio input:checked + .ctl::after { transform: scale(1); }
.choice-opt.is-check .ctl { border-radius: .375rem; }
.choice-opt.is-check .ctl::after { width: .45rem; height: .8rem; border: solid #0e1222; border-width: 0 2.5px 2.5px 0; border-radius: 0; background: none; transform: rotate(45deg) scale(0); margin-top: -.15rem; }
.choice-opt.is-check input:checked + .ctl::after { transform: rotate(45deg) scale(1); }
.stack.tight { gap: var(--sp-2); }
/* seeding list */
.seed-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); } .seed-head .field-label { margin: 0; }
.seeds { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; max-height: 22rem; overflow-y: auto; }
.seed { display: grid; grid-template-columns: 1.5rem 1.75rem minmax(0, 1fr) auto; align-items: center; gap: .5rem; padding: .25rem .375rem .25rem .25rem; border: 1px solid var(--line); border-radius: .625rem; background: rgba(0,0,0,.18); }
.seed.lead:not(.alone) { border-bottom-left-radius: .25rem; border-bottom-right-radius: .25rem; } .seed.mate { margin-top: -.125rem; border-top-left-radius: .25rem; border-top-right-radius: .25rem; }
.seed.mate + .seed.lead { margin-top: .25rem; }
.seed-grip { display: grid; place-items: center; height: 2.25rem; color: var(--color-text-quiet); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.seed.drag { box-shadow: var(--shadow); border-color: var(--color-accent); } .seed.drag .seed-grip { cursor: grabbing; }
.seed-n { font-family: var(--display); font-style: italic; font-weight: 800; color: #fff; text-align: end; font-variant-numeric: tabular-nums; }
.seed-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; } .seed-name small { color: var(--color-text-muted); font-weight: 600; }
.seed.alone .seed-name small:last-child { color: var(--color-warning); }
.seed-acts { display: flex; gap: .25rem; } .seed-acts .icon-btn { width: 2.25rem; height: 2.25rem; font-size: 1rem; font-weight: 700; color: var(--text); }
.seed-acts .icon-btn:disabled { opacity: .35; cursor: default; }
@media (pointer: coarse) { .seed-acts .icon-btn, .seed-grip { width: 2.75rem; height: 2.75rem; } .seed { grid-template-columns: 2.75rem 1.75rem minmax(0, 1fr) auto; } }
.seed-empty { padding: .5rem .25rem; }
/* group stage */
.grp-wrap { display: grid; gap: var(--sp-6); }
.rr-title { margin: 0; display: flex; align-items: center; gap: .6rem; font-family: var(--display); font-style: italic; font-weight: 800; font-size: var(--text-xl); text-transform: uppercase; color: #fff; }
.rr-tbl tr.adv td:first-child { color: var(--color-success); font-weight: 800; }
.rr-tbl tr.adv:not(:has(+ tr.adv)) td { border-bottom: 1px dashed var(--line2); }
.rr-adv { margin: var(--sp-2) 0 0; }

/* platform admin · users */
.lst-tools.usr { grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) repeat(2, minmax(0, 1fr)) auto; }
@container app (max-width: 52rem) { .lst-tools.usr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .lst-tools.usr > .field:first-child { grid-column: 1 / -1; } }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--sp-3); margin: 0; }
.kv dt { font-size: var(--text-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); }
.kv dd { margin: .2rem 0 0; color: var(--text); font-weight: 600; }
#userForm .item .n { flex: 1; min-width: 0; font-weight: 700; color: var(--text); }

/* filter rows: let dropdowns out once open; calendar row = navigation, period, view and table */
.lst-tools-wrap.ovf > .lst-tools { overflow: visible; }
.lst-tools.cal-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); }
.cal-nav { display: flex; gap: .25rem; } .cal-opts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-inline-start: auto; }
.cal-opts .seg { padding: 2px; } .cal-opts .seg .btn { min-height: calc(2.75rem - 6px); padding-inline: .9rem; } .cal-opts .xsel { min-width: 11rem; }
@container app (max-width: 40rem) { .cal-opts { margin-inline-start: 0; width: 100%; } .cal-opts .seg { flex: 1; } .cal-opts .seg .btn { flex: 1; } .cal-opts .xsel { flex: 1; } }

/* time picker */
.tp { display: flex; flex: 1 1 auto; min-width: 0; } .dp-ctl .tp { flex: 0 0 7.5rem; }
.tp-btn { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; height: 2.75rem; min-height: 2.75rem; box-sizing: border-box; text-align: start; cursor: pointer; font-variant-numeric: tabular-nums; }
.tp-btn svg { flex: none; width: 1.1rem; height: 1.1rem; color: var(--color-text-muted); }
.tp-val.empty { color: var(--color-text-muted); font-weight: 500; letter-spacing: .1em; }
.tp-btn[aria-expanded="true"] { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(122,162,247,.25); }
.field.invalid .tp-btn { border-color: var(--color-danger); }
.tp-pop { padding: .5rem; }
.tp-cols { display: grid; grid-template-columns: 4rem 4rem; gap: .375rem; }
.tp-col { display: grid; align-content: start; align-self: start; gap: 2px; max-height: 15rem; overflow-y: auto; overscroll-behavior: contain; padding: 2px; scrollbar-width: thin; }
.tp-opt { height: 2.5rem; border: 0; border-radius: .5rem; background: none; color: var(--text); font: inherit; font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.tp-opt.sel { background: var(--color-accent); color: #0e1222; font-weight: 800; }
.tp-opt:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
@media (hover: hover) { .tp-opt:not(.sel):hover { background: rgba(255,255,255,.08); } }
@media (pointer: coarse) { .tp-opt { height: 2.75rem; } }
.tp-pop .dp-foot { margin-top: .4rem; padding-top: .5rem; }

/* 2v2 teams */
.pair-pool { display: grid; gap: var(--sp-2); padding: var(--sp-2) .25rem 0; list-style: none; }
.pair-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pair-pick { cursor: pointer; font: inherit; font-weight: 700; padding: .35rem .8rem; min-height: 2.25rem; }
.pair-pick[aria-pressed="true"] { background: var(--color-accent); color: #0e1222; border-color: var(--color-accent); }
.pair-pick:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.pair-pool .btn { justify-self: start; }

/* header nav: below 72rem every tab is an icon (names in tooltips), so switching tabs never moves the others */

/* stream view + broadcast overlay */
.stream { position: relative; container-type: size; width: 100%; height: calc(100dvh - 2rem); margin-top: 1rem; background: #000; border-radius: var(--r); overflow: hidden; }
.stream:fullscreen { height: 100dvh; margin: 0; border-radius: 0; }
.stream-media, .stream-media iframe, .stream-media video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; background: #000; }
.stream-none { position: absolute; inset: 0; display: grid; place-items: center; color: var(--color-text-muted); font-weight: 600; text-align: center; padding: 2rem; }
.stream-bar { position: absolute; inset: 0 0 auto 0; display: flex; gap: .5rem; padding: .75rem; background: linear-gradient(rgba(0,0,0,.6), transparent); opacity: 0; transition: opacity .2s var(--ease-out); z-index: 3; }
.stream:hover .stream-bar, .stream:focus-within .stream-bar { opacity: 1; } @media (hover: none) { .stream-bar { opacity: 1; } }
.ov { position: absolute; left: 3cqw; bottom: 4cqh; z-index: 2; display: grid; gap: .6cqw; max-width: min(64cqw, 60rem); pointer-events: none; transition: opacity .25s var(--ease-out), transform .25s var(--ease-out); }
.stream.no-ov .ov { opacity: 0; transform: translateY(1rem); }
.ov:empty { display: none; }
.ov-strip { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.2cqw; justify-self: start; padding: .35cqw 1cqw; border-radius: .4cqw; background: rgba(10,12,24,.82); color: #e6e9ff; font: 800 clamp(.7rem, 1.15cqw, 1.1rem)/1.2 var(--display); font-style: italic; text-transform: uppercase; letter-spacing: .06em; }
.ov-strip span + span:not(.ov-live)::before { content: "·"; margin-inline-end: 1.2cqw; opacity: .6; }
.ov-live { color: #0e1222; background: var(--color-live); padding: .1em .5em; border-radius: .25em; }
.ov-match { display: flex; align-items: stretch; gap: .8cqw; }
.ov-side { display: flex; align-items: center; gap: 1cqw; padding: .8cqw 1.2cqw; border-radius: .6cqw; background: rgba(14,18,34,.86); border: 1px solid rgba(255,255,255,.12); min-width: 0; }
.ov-names { display: grid; gap: .2cqw; min-width: 0; } .ov-names span { display: flex; align-items: center; gap: .6cqw; color: #fff; font: 800 clamp(.9rem, 1.9cqw, 2rem)/1.1 var(--display); font-style: italic; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-names i { flex: none; width: .7cqw; height: .7cqw; min-width: .45rem; min-height: .45rem; border-radius: 50%; background: hsl(var(--h) 75% 60%); }
.ov-score { font: 900 clamp(1.4rem, 3.4cqw, 3.4rem)/1 var(--display); font-style: italic; color: var(--color-highlight); font-variant-numeric: tabular-nums; }
.ov-tag { align-self: center; padding: .15em .5em; border-radius: .3em; background: rgba(255,199,119,.16); color: var(--color-highlight); font: 800 clamp(.6rem, 1cqw, .95rem)/1.2 var(--display); font-style: italic; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.ov-vs { align-self: center; color: var(--color-accent); font: 900 clamp(.9rem, 1.8cqw, 1.8rem)/1 var(--display); font-style: italic; text-transform: uppercase; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
@media (prefers-reduced-motion: reduce) { .ov, .stream-bar { transition: none; } }

/* page rhythm: header, filter row and content sit --sp-4 apart on every list page */
.lst-tools-wrap, .lst-tools-wrap.open { margin-bottom: 0; }
.lst-tools-wrap:not(.open) { margin-bottom: calc(-1 * var(--sp-4)); }
/* calendar row: navigation and period on the left, view and table fixed on the right */
.lst-tools.cal-tools > .cal-opts { margin-inline-start: auto; }
.cal-title { min-width: 11.5rem; }
.cal-opts .xsel { width: 12.5rem; min-width: 0; } .cal-opts .xsel-btn { min-width: 0; } .cal-opts .xsel-btn > :not(svg) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container app (max-width: 40rem) { .lst-tools.cal-tools > .cal-opts { margin-inline-start: 0; } .cal-opts .xsel { width: auto; } }
/* scroll overlays: shown while there is more to scroll that way */
.sc-wrap { position: relative; min-width: 0; }
.sc-wrap::before, .sc-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2.5rem; pointer-events: none; opacity: 0; transition: opacity .2s var(--ease-out); z-index: 4; }
.sc-wrap::before { left: 0; background: linear-gradient(to right, rgba(10,12,24,.75), transparent); }
.sc-wrap::after { right: 0; background: linear-gradient(to left, rgba(10,12,24,.75), transparent); }
.sc-wrap:has(> .se-l)::before, .sc-wrap:has(> .se-r)::after { opacity: 1; }
.sc-wrap:has(> .cal-scroll)::before { border-radius: var(--r) 0 0 var(--r); } .sc-wrap:has(> .cal-scroll)::after { border-radius: 0 var(--r) var(--r) 0; }
.sc-wrap > .lst-scroll, .sc-wrap > .cal-scroll, .sc-wrap > .bk-scroll, .sc-wrap > .s-scroll { box-shadow: none !important; -webkit-mask-image: none !important; mask-image: none !important; }
/* round-robin and schedule rows: names meet at the score */
.rr-rounds .item.rr-m, .rr-rounds button.item.rr-m { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; column-gap: .75rem; width: 100%; padding: .6rem .875rem; cursor: default; }
.rr-rounds button.item.rr-m.act { cursor: pointer; }
.rr-m .n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; } .rr-m > .n:first-child { text-align: end; }
.rr-sc { font-family: var(--display); font-style: italic; font-size: 1.1rem; font-variant-numeric: tabular-nums; min-width: 2.75rem; text-align: center; color: #fff; }
.t-list .item.t-match, .t-list button.item.t-match { display: grid; padding: .5rem .75rem; width: 100%; }
.t-list .t-match .bk-side { border: 0; background: none; } .t-list .t-match .bk-side.won .bk-n { color: var(--color-success); }
.t-list .t-phase .list { gap: var(--sp-2); margin-top: var(--sp-2); }
/* tournament header and cards */
.t-head { display: grid; gap: var(--sp-4); }
.t-head-top { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.t-head-t { display: grid; gap: .25rem; min-width: 0; flex: 1 1 14rem; } .t-head-t .live-eyebrow { margin: 0; } .t-head-t .t-title { margin: 0; }
.t-head-acts { gap: var(--sp-2); }
.t-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--sp-3) var(--sp-4); margin: 0; padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r); background: rgba(0,0,0,.18); }
.t-meta dt { font-size: var(--text-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); }
.t-meta dd { margin: .25rem 0 0; font-weight: 700; color: var(--text); text-wrap: pretty; }
.t-prog { display: block; height: .375rem; margin-top: .4rem; border-radius: 1rem; background: rgba(255,255,255,.08); overflow: hidden; } .t-prog i { display: block; height: 100%; border-radius: inherit; background: var(--color-accent); }
.t-champ { color: var(--color-highlight); font-family: var(--display); font-style: italic; font-size: var(--text-lg); text-transform: uppercase; }
.t-card { display: grid; gap: var(--sp-3); }
.t-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.t-card-t { display: grid; gap: .25rem; min-width: 0; } .t-card-t .live-eyebrow { margin: 0; }
.t-card-meta { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 600; text-wrap: pretty; }
.t-now { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.t-now-m { display: grid; grid-template-columns: 8rem minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; column-gap: .75rem; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: .625rem; background: rgba(0,0,0,.18); }
.t-now-tbl { font-size: var(--text-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-now-a, .t-now-b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; } .t-now-a { text-align: end; }
.t-now-sc { font-family: var(--display); font-style: italic; font-size: 1.15rem; color: #fff; font-variant-numeric: tabular-nums; }
.t-now-x { display: flex; justify-content: flex-end; min-width: 0; }
@container app (max-width: 40rem) { .t-now-m { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); row-gap: .25rem; } .t-now-tbl { grid-column: 1 / -1; } .t-now-x { grid-column: 1 / -1; justify-content: flex-start; } .t-now-x:empty { display: none; } }
.t-now-panel .panel-title { margin-bottom: var(--sp-3); }
/* Live now: session and table names are links */
.live-sess { color: inherit; text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: .2em; }
.live-tbl { color: inherit; text-decoration: none; } @media (hover: hover) { .live-tbl:hover, .live-sess:hover { color: #fff; text-decoration: underline; } }
.live-tbl:focus-visible, .live-sess:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: .25rem; }
/* admin */
.adm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--sp-3); }
.adm-kpi { display: grid; gap: .25rem; padding: var(--sp-4); }
.rr-m .badge, .t-match .badge { justify-self: end; overflow: visible; text-overflow: clip; max-width: none; }
.t-head-acts { margin-inline-start: auto; }
.lst-scroll { overflow-y: hidden; }

/* tournament wizard */
.wiz-dlg { width: min(52rem, calc(100vw - 2rem)); }
.wiz-head { display: grid; gap: var(--sp-3); }
.wiz-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.6fr); /* the last label is the long one */ gap: var(--sp-2); counter-reset: none; }
.wiz-step { display: flex; align-items: center; gap: .5rem; width: 100%; min-height: 2.75rem; padding: .4rem .6rem; border: 1px solid var(--line); border-radius: .625rem; background: none; color: var(--color-text-muted); font: inherit; font-size: var(--text-sm); font-weight: 700; text-align: start; cursor: pointer; }
.wiz-step:disabled { cursor: default; opacity: .55; }
.wiz-n { flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid var(--line2); font-size: var(--text-xs); font-weight: 800; font-variant-numeric: tabular-nums; }
.wiz-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wiz-step.on { border-color: var(--color-accent); color: #fff; background: var(--color-accent-soft); } .wiz-step.on .wiz-n { border-color: var(--color-accent); background: var(--color-accent); color: #0e1222; }
.wiz-step.done { color: var(--text); } .wiz-step.done .wiz-n { border-color: var(--color-success); color: var(--color-success); }
.wiz-step:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@container app (max-width: 40rem) { .wiz-l { display: none; } }
@media (max-width: 40rem) { .wiz-step:not(.on) .wiz-l { display: none; } .wiz-steps { grid-template-columns: repeat(5, auto); justify-content: start; } }
.wiz-body { display: grid; gap: var(--sp-3); }
.wiz-foot { position: sticky; bottom: -1.375rem; margin: 0 -1.375rem -1.375rem; padding: .875rem 1.375rem; background: var(--bg2); border-top: 1px solid var(--line); }
.wz-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--sp-4); align-items: start; }
@media (max-width: 44rem) { .wz-cols { grid-template-columns: minmax(0, 1fr); } }
.wz-roster { display: grid; gap: var(--sp-2); }
.wz-mode { width: 100%; } .wz-mode .btn { flex: 1; } .wz-mode-note { margin: 0; }
.wz-list { display: grid; gap: 2px; max-height: 18rem; overflow-y: auto; padding: 2px; border: 1px solid var(--line); border-radius: .75rem; background: rgba(0,0,0,.18); }
.wz-pl { display: flex; align-items: center; gap: .5rem; min-height: 2.5rem; padding: .35rem .7rem; border: 0; border-radius: .5rem; background: none; color: var(--text); font: inherit; font-weight: 700; text-align: start; cursor: pointer; }
.wz-pl span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wz-pl small { color: var(--color-text-muted); font-weight: 600; } .wz-pl i { font-style: normal; color: var(--color-accent); font-weight: 800; }
@media (hover: hover) { .wz-pl:hover { background: rgba(255,255,255,.06); } } .wz-pl:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.wz-teams-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-2); } .wz-teams-head .field-label { margin: 0; }
.wz-team-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); max-height: 22rem; overflow-y: auto; }
.wz-team { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; gap: .4rem; padding: .3rem .3rem .3rem .5rem; border: 1px solid var(--line); border-radius: .75rem; background: rgba(0,0,0,.18); }
.wz-team .icon-btn { width: 2.25rem; height: 2.25rem; }
.wz-slot { display: flex; align-items: center; justify-content: space-between; gap: .25rem; min-width: 0; min-height: 2.5rem; padding: .25rem .25rem .25rem .6rem; border: 1px dashed var(--line2); border-radius: .5rem; background: none; color: var(--color-text-muted); font: inherit; font-size: var(--text-sm); font-weight: 600; text-align: start; cursor: pointer; }
.wz-slot.filled { border-style: solid; border-color: var(--line); background: rgba(255,255,255,.04); color: var(--text); font-weight: 700; cursor: default; }
.wz-slot.filled span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wz-slot.filled button { flex: none; width: 2rem; height: 2rem; border: 0; border-radius: .375rem; background: none; color: var(--color-text-muted); font-size: 1.1rem; cursor: pointer; }
.wz-slot.active { border-style: solid; border-color: var(--color-accent); color: #fff; background: var(--color-accent-soft); }
.wz-slot:focus-visible, .wz-slot button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.wz-amp { color: var(--color-text-muted); font-weight: 800; }
.wz-pool { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--line); } .wz-pool .btn { justify-self: start; }
.wz-sched { display: grid; gap: var(--sp-3); margin: 0; padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r); } .wz-sched > legend { padding: 0 .35rem; }
.wz-est { margin: 0; color: var(--text); font-weight: 600; text-wrap: pretty; } .wz-est b { color: #fff; font-family: var(--display); font-style: italic; font-size: var(--text-lg); }
.wz-end { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); } .wz-end > .dp { display: block; flex: 1 1 18rem; } .wz-end > .btn { margin-bottom: 1.25rem; }
.wz-review h4 { margin: 0 0 .4rem; font-size: var(--text-sm); }
.t-issues { margin: .35rem 0 0; padding-inline-start: 1.1rem; color: var(--color-warning); font-weight: 600; } .t-issues li + li { margin-top: .2rem; }
.wz-ok { color: var(--color-success); margin: 0; }
.t-state { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; } .t-state .note { margin: .25rem 0 0; } .t-state.warn { border-color: rgba(224,175,104,.5); }

/* admin dashboard */
.adm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: var(--sp-4); align-items: start; }
.adm-needs, .adm-list, .adm-board, .adm-acts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.adm-need { display: grid; gap: .15rem; width: 100%; padding: .6rem .75rem; border: 1px solid rgba(224,175,104,.45); border-radius: .625rem; background: rgba(224,175,104,.07); color: var(--text); font: inherit; text-align: start; text-decoration: none; cursor: pointer; }
.adm-need small { color: var(--color-text-muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (hover: hover) { .adm-need:hover { border-color: var(--color-warning); } } .adm-need:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.adm-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: .75rem; padding: .4rem 0; border-bottom: 1px solid rgba(59,66,97,.5); } .adm-list li:last-child { border-bottom: 0; }
.adm-list .n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--text); } .adm-list .m { color: var(--color-text-muted); font-size: var(--text-sm); }
.adm-t { font-variant-numeric: tabular-nums; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 700; white-space: nowrap; }
.panel > .btn.sm { margin-top: var(--sp-3); }
.adm-sub { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); }
.adm-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .4rem; }
.adm-day { display: grid; justify-items: center; gap: .2rem; } .adm-day small { font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; } .adm-day.today small:first-of-type { color: var(--color-accent); font-weight: 800; }
.adm-bar { display: flex; align-items: flex-end; width: 100%; max-width: 2.5rem; height: 4.5rem; border-radius: .375rem; background: rgba(255,255,255,.05); overflow: hidden; } .adm-bar i { display: block; width: 100%; background: var(--color-accent); border-radius: .375rem .375rem 0 0; min-height: 2px; }
.adm-board li { display: grid; grid-template-columns: auto minmax(5rem, auto) minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid rgba(59,66,97,.5); } .adm-board li:last-child { border-bottom: 0; }
.adm-board .n { font-weight: 700; } .adm-board .m { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-muted); font-size: var(--text-sm); }
.adm-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--line2); } .adm-dot.free { background: var(--color-success); } .adm-dot.busy { background: var(--color-accent); } .adm-dot.off { background: transparent; border: 2px dashed var(--line2); }
.adm-tab.on { color: var(--color-success); } .adm-tab.none { opacity: .8; }
@container app (max-width: 40rem) { .adm-board li { grid-template-columns: auto minmax(0, 1fr); } .adm-board .m { grid-column: 2; } }
.adm-act-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); } .adm-act-head .panel-title { margin: 0; } .adm-act-head .seg { flex-wrap: wrap; }
.adm-acts { max-height: 28rem; overflow-y: auto; gap: 0; }
.adm-acts li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid rgba(59,66,97,.5); align-items: baseline; }
.adm-acts time { color: var(--color-text-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; } .adm-acts .n { color: var(--text); font-weight: 600; min-width: 0; text-wrap: pretty; } .adm-acts .m { color: var(--color-text-muted); font-size: var(--text-sm); white-space: nowrap; }
@container app (max-width: 40rem) { .adm-acts li { grid-template-columns: minmax(0, 1fr); gap: .1rem; } }
/* settings */
.adm-imgs { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--sp-4); }
@container app (max-width: 40rem) { .adm-imgs { grid-template-columns: minmax(0, 1fr); } }
.adm-img-box { display: grid; place-items: center; border: 1px dashed var(--line2); border-radius: .75rem; background: rgba(0,0,0,.18); overflow: hidden; margin-bottom: var(--sp-2); }
.adm-img.logo .adm-img-box { aspect-ratio: 1; } .adm-img.cover .adm-img-box { aspect-ratio: 3 / 1; }
.adm-img-box img { width: 100%; height: 100%; object-fit: cover; }
textarea.text-input { min-height: 6rem; resize: vertical; line-height: 1.45; }
.adm-imgs { grid-template-columns: 8rem minmax(0, 1fr); } .adm-img.logo .adm-img-box { aspect-ratio: auto; height: 8rem; } .adm-img.cover .adm-img-box { aspect-ratio: auto; height: 8rem; }
.adm-act-f .xsel { min-width: 13rem; }

/* match rows: names meet at slanted score tags around "vs" (schedule, round robin, Live now) */
/* schedule phases fold */
.t-phase > details > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); list-style: none; cursor: pointer; padding: .25rem 0; border-radius: .4rem; }
.t-phase > details > summary::-webkit-details-marker { display: none; }
.t-phase > details > summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.t-ph-t { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; min-width: 0; } .t-ph-t b { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: var(--text-lg); color: #fff; } .t-ph-t .hint { font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; }
.t-ph-st { display: flex; align-items: center; gap: .5rem; flex: none; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 700; }
.t-ph-st::after { content: ""; width: .5rem; height: .5rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); margin: -.2rem .2rem 0 .3rem; transition: transform var(--dur-fast) var(--ease-out); }
details[open] > summary .t-ph-st::after { transform: rotate(-135deg); margin-top: .25rem; }
.t-phase.done .t-ph-t b { color: var(--color-text-muted); } .t-phase.done .t-ph-st { color: var(--color-success); }
.t-phase > details > .list { margin-top: var(--sp-2); }
/* bracket: live tag sits on the slot, links to the table */
.bk-card { position: relative; } .bk-card > .bk-tag { top: -1.15rem; inset-inline-end: .5rem; z-index: 3; text-decoration: none; }
.bk-card > a.bk-tag:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } @media (hover: hover) { .bk-card > a.bk-tag:hover { filter: brightness(1.15); } }
/* hand-drawn strike only a little wider than the name */
.bk-side .bk-n { flex: 0 1 auto; } .bk-side .bk-s { margin-inline-start: auto; }
.bk-side.lost .bk-n::after { left: -3px; right: -3px; }
/* Live now: tournament card = session card */
.t-live .live-name .live-tbl { display: block; }
/* tournament meta: one item per line */
.t-meta dd b { color: #fff; font-family: var(--display); font-style: italic; }
/* selects open upwards near the bottom of the screen */
.xsel.up .xsel-list { top: auto; bottom: calc(100% + .35rem); }
/* wizard: steady height, aligned estimate fields, scroll edges */
.wiz-dlg > form.wiz { min-height: min(46rem, calc(100dvh - 2rem)); grid-template-rows: auto 1fr auto; } .wiz-body { flex: 1 1 auto; align-content: start; }
.wz-sched .race-list { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--sp-3); }
@media (max-width: 40rem) { .wz-sched .race-list { grid-template-columns: minmax(0, 1fr); } }
.wz-end { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0 var(--sp-3); } .wz-end > .dp { display: block; } .wz-end > .btn { margin-bottom: 1.25rem; }
@media (max-width: 40rem) { .wz-end { grid-template-columns: minmax(0, 1fr); } .wz-end > .btn { margin-bottom: 0; } }
.sc-wrap.v::before, .sc-wrap.v::after { left: 0; right: 0; width: auto; height: 2rem; }
.sc-wrap.v::before { top: 0; bottom: auto; border-radius: .75rem .75rem 0 0; background: linear-gradient(to bottom, rgba(10,12,24,.8), transparent); }
.sc-wrap.v::after { top: auto; bottom: 0; border-radius: 0 0 .75rem .75rem; background: linear-gradient(to top, rgba(10,12,24,.8), transparent); }
.sc-wrap.v::before, .sc-wrap.v::after { opacity: 0; } .sc-wrap.v:has(> .se-t)::before, .sc-wrap.v:has(> .se-b)::after { opacity: 1; }
.sc-wrap.v > * { box-shadow: none !important; }
/* upload dropzones */
.dropzone { position: relative; display: grid; place-items: center; min-height: 8rem; padding: var(--sp-4); border: 2px dashed var(--line2); border-radius: .875rem; background: rgba(0,0,0,.18); color: var(--color-text-muted); text-align: center; cursor: pointer; overflow: hidden; transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.adm-img.logo .dropzone { aspect-ratio: 1; min-height: 0; } .adm-img.cover .dropzone { aspect-ratio: 3 / 1; min-height: 8rem; }
.dropzone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dz-in { position: relative; display: grid; justify-items: center; gap: .3rem; } .dz-in svg { width: 1.6rem; height: 1.6rem; color: var(--color-accent); } .dz-in b { color: var(--text); font-size: var(--text-sm); } .dz-in small { font-size: var(--text-xs); max-width: 18rem; text-wrap: balance; }
.dropzone.has .dz-in { opacity: 0; padding: .5rem .75rem; border-radius: .625rem; background: rgba(10,12,24,.82); transition: opacity var(--dur-fast) var(--ease-out); }
@media (hover: hover) { .dropzone:hover { border-color: var(--color-accent); background-color: rgba(122,162,247,.06); } .dropzone.has:hover .dz-in { opacity: 1; } }
.dropzone:focus-within { border-color: var(--color-accent); outline: 2px solid var(--color-focus); outline-offset: 2px; } .dropzone.has:focus-within .dz-in { opacity: 1; }
.dropzone.over { border-color: var(--color-accent); border-style: solid; background-color: var(--color-accent-soft); } .dropzone.over .dz-in { opacity: 1; }
.adm-img > .btn { margin-top: var(--sp-2); }
.adm-imgs { grid-template-columns: 9rem minmax(0, 1fr); }
.adm-img.logo .dz-in small { display: none; }

/* round 7: scores coloured by who leads, neutral border, hill glow; taller tags than the row; more air between rows */
/* selected player: the row glows from under the score towards that player's edge */
/* phase caret next to the name; hover shows the whole phase row */
.t-ph-st::after { display: none; }
.t-caret { display: inline-block; width: .5rem; height: .5rem; border: solid var(--color-text-muted); border-width: 0 2px 2px 0; transform: rotate(45deg); margin: 0 0 .2rem .35rem; transition: transform var(--dur-fast) var(--ease-out); }
details[open] > summary .t-caret { transform: rotate(-135deg); margin-bottom: -.1rem; }
.t-phase > details > summary { margin: 0 -.5rem; padding: .35rem .5rem; } @media (hover: hover) { .t-phase > details > summary:hover, .grp > summary:hover { background: rgba(255,255,255,.04); } }
.t-phase.done .t-ph-st { color: var(--color-text-muted); }
/* group folds */
.grp > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); list-style: none; cursor: pointer; padding: .35rem .5rem; margin: 0 -.5rem var(--sp-3); border-radius: .4rem; }
.grp > summary::-webkit-details-marker { display: none; }
.grp > summary b { font-family: var(--display); font-style: italic; font-weight: 800; font-size: var(--text-xl); text-transform: uppercase; color: #fff; }
.grp > summary b::after { content: ""; display: inline-block; width: .55rem; height: .55rem; border: solid var(--color-text-muted); border-width: 0 2px 2px 0; transform: rotate(45deg); margin: 0 0 .3rem .5rem; transition: transform var(--dur-fast) var(--ease-out); }
.grp[open] > summary b::after { transform: rotate(-135deg); margin-bottom: -.1rem; }
.grp > summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* wizard: footer buttons keep their size; dropdowns can leave option panels */
.wiz-foot { flex: none; align-items: center; } .wiz-foot .btn { height: auto; min-height: 2.75rem; align-self: center; }
.wiz-body { flex: 1 0 auto; }
.opt-more.open > .opt-in { overflow: visible; }
.rr-stage { display: grid; gap: var(--sp-2); padding-top: var(--sp-2); border-top: 1px dashed var(--line); }
/* Tables page rhythm */

/* every page: the same space from the page head to the first content */
.main > .stack { gap: var(--sp-5); }
.main > .page-head { margin-bottom: var(--sp-4); }
.main > .page-head + .stack { margin-top: 0; }

/* round 8: match rows — one geometry everywhere */
/* full-width lists keep one status column, so names, scores and VS line up row to row */
/* timeline dots centred on the phase name */
.t-phase::after { top: .8rem; } .t-phase::before { top: 1.1rem; }
/* tournament setup: round-robin stage and race fields line up */
.rr-stage .check > span { display: grid; gap: .15rem; } .rr-stage .check .hint { display: block; font-size: var(--text-sm); }
.race-list > .race-adv { max-width: 12rem; } .race-list > .race-adv .xsel { width: 100%; }
.opt-pad > .race-row + .field, .opt-pad > .field + .opt-more { margin-top: 0; }

/* toasts in the top layer: above dialogs, clickable; up to three stacked, newest at the bottom */
#ptoast[popover] { position: fixed; inset: auto; left: 50%; bottom: 4.75rem; transform: translateX(-50%); z-index: 1200; margin: 0; padding: 0; border: 0; background: none; color: inherit; overflow: visible; display: flex; flex-direction: column; align-items: center; gap: .5rem; width: max-content; max-width: 90vw; pointer-events: none; }
#ptoast[popover]:not(.show) { display: none; }
#ptoast .toast { position: static; transform: none; opacity: 1; max-width: 100%; pointer-events: auto; }
@starting-style { #ptoast .toast { opacity: 0; transform: translateY(1.25rem); } }

/* sub-pages (tournament, profile): same distance from the breadcrumbs and between the title and the first block as list pages */
#tour > .stack, .main > section.stack[style*="margin-top"] { margin-top: var(--sp-2) !important; gap: var(--sp-4); }
#tour > .stack > .t-head { gap: var(--sp-4); }
.page-head { margin-top: var(--sp-2); }

.opt-more.inline { display: contents; } .opt-more.inline:not(.open) > .opt-in { display: none; } .opt-more.inline > .opt-in { display: contents; } .opt-more.inline > .opt-in > .opt-pad { display: contents; }
.rr-stage .row { gap: var(--sp-2) var(--sp-4); } .rr-stage .note { margin: 0; }
/* venue landing page */
.land { margin-top: var(--sp-2); gap: var(--sp-5); }
.land-hero { position: relative; display: grid; align-items: end; min-height: 9rem; border-radius: var(--r); overflow: hidden; }
.land-hero.has-cover { min-height: 15rem; } .land-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.land-hero.has-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,12,24,.9), transparent 70%); }
.land-id { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) 0; } .land-hero.has-cover .land-id { padding: var(--sp-5); }
.land-logo { width: 4.5rem; height: 4.5rem; border-radius: 1rem; object-fit: cover; border: 1px solid var(--line2); background: var(--bg2); }
.land-name { margin: 0; } .land-city { margin: .25rem 0 0; color: var(--color-text-muted); font-weight: 600; }
.land-contact { display: flex; flex-wrap: wrap; gap: .25rem var(--sp-4); margin: calc(-1 * var(--sp-3)) 0 0; color: var(--color-text-muted); font-weight: 600; } .land-contact a { color: var(--text); }
.land-sec { display: grid; gap: var(--sp-3); } .land-sec > .panel-title { margin: 0; } .land-sec > .stack { gap: var(--sp-4); }
.land-join { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; } .land-join .note { margin: .25rem 0 0; }

.s-scroll { overflow-y: hidden; }
.brand-t[tabindex="-1"]:focus, h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus { outline: none; }
.pin-float { z-index: 20; }
.rr-stage { gap: 0; } .rr-stage > .opt-more.open { margin-top: var(--sp-3); } .rr-stage > .opt-more.open + .opt-more.open { margin-top: var(--sp-3); }
.adm-grid { align-items: stretch; } .adm-grid > .panel { display: flex; flex-direction: column; } .adm-grid > .panel > .btn.sm { align-self: flex-start; margin-top: auto; }

/* ===== match rows (schedule, round robin, Live now, On the tables): VS in the exact centre, status floats right ===== */
.list:has(> .mr) { display: grid; gap: 1.25rem !important; padding: .625rem 0 !important; container-type: inline-size; }
.mr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 2.75rem 1.75rem 2.75rem minmax(0, 1fr); column-gap: .5rem; align-items: center; height: 3rem; padding: 0 .75rem; box-sizing: border-box; width: 100%; border: 1px solid var(--line); border-radius: .625rem; background: rgba(0,0,0,.18); color: inherit; font: inherit; text-align: start; }
.mr.act { cursor: pointer; } .mr:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (hover: hover) { .mr.act:hover { border-color: var(--color-accent); } }
.mr.live { border-color: var(--color-live); box-shadow: 0 0 .9rem rgba(158,206,106,.25); }
.mr.done { opacity: .6; } @media (hover: hover) { .mr.done:hover { opacity: 1; } } .mr.done:focus-visible, .mr.done:has(> .pin), .mr.done:has(> .hl) { opacity: 1; }
.mr > .bk-side { display: flex; align-items: center; align-self: stretch; min-width: 0; min-height: 0; margin: 0; padding: 0 0 1px; border: 0; background: none !important; box-shadow: none !important; font-size: var(--text-md); font-weight: 700; line-height: 1.2; }
.mr > .mr-a { justify-content: flex-end; text-align: end; } .mr > .mr-b { justify-content: flex-start; }
.mr:has(> .mr-st:not(:empty)) > .mr-b { padding-inline-end: 11.5rem; }
.mr .bk-n { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr > .bk-side.won .bk-n { color: var(--color-success); }
.mr > .bk-side.pin .bk-n, .mr > .bk-side.hl .bk-n { color: var(--color-highlight); }
.mr-sc { place-self: center; display: grid; place-items: center; box-sizing: border-box; width: 2.75rem; height: 3.75rem; margin: calc(-.375rem - 1px) 0; transform: skewX(-10deg); border-radius: .45rem; background: var(--bg1); border: 1px solid var(--line2); box-shadow: 0 .25rem .75rem rgba(10,12,28,.45); font-family: var(--display); font-weight: 900; font-size: 1.85rem; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; position: relative; z-index: 1; }
.mr-sc.w { color: var(--color-success); } .mr-sc.l { color: var(--red); } .mr-sc.empty { visibility: hidden; }
.mr-sc.hill { border-color: var(--amber); box-shadow: 0 0 1rem rgba(224,175,104,.6); }
.mr-vs { place-self: center; font-family: var(--display); font-style: italic; font-weight: 900; font-size: 1.15rem; line-height: 1; color: var(--blue); text-transform: uppercase; transform: skewX(-8deg); text-shadow: 0 .125rem .5rem rgba(0,0,0,.5); position: relative; z-index: 1; }
.mr-st { position: absolute; inset-inline-end: .75rem; top: 50%; translate: 0 -50%; display: flex; align-items: center; gap: .4rem; max-width: 11rem; }
.mr-st:empty { display: none; }
.mr-st .badge { display: inline-flex; align-items: center; line-height: 1.2; letter-spacing: .06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.mr-link { text-decoration: none; } @media (hover: hover) { .mr-link:hover { color: #fff; border-color: var(--color-live); } } .mr-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* selected player: amber glow from under that player's score out to the row's edge (the score tag hides where it starts) */
.mr:has(> .mr-a.pin) { background: linear-gradient(to right, rgba(255,199,119,0) 0, rgba(255,199,119,.07) 25%, rgba(255,199,119,.3) calc(50% - 2.75rem), rgba(255,199,119,0) calc(50% - 2.75rem + 1px)), rgba(0,0,0,.18); border-color: rgba(255,199,119,.45); }
.mr:has(> .mr-b.pin) { background: linear-gradient(to left, rgba(255,199,119,0) 0, rgba(255,199,119,.07) 25%, rgba(255,199,119,.3) calc(50% - 2.75rem), rgba(255,199,119,0) calc(50% - 2.75rem + 1px)), rgba(0,0,0,.18); border-color: rgba(255,199,119,.45); }
.mr:has(> .mr-a.hl):not(:has(> .pin)) { background: linear-gradient(to right, rgba(255,199,119,0) 0, rgba(255,199,119,.15) calc(50% - 2.75rem), rgba(255,199,119,0) calc(50% - 2.75rem + 1px)), rgba(0,0,0,.18); }
.mr:has(> .mr-b.hl):not(:has(> .pin)) { background: linear-gradient(to left, rgba(255,199,119,0) 0, rgba(255,199,119,.15) calc(50% - 2.75rem), rgba(255,199,119,0) calc(50% - 2.75rem + 1px)), rgba(0,0,0,.18); }
/* no score yet: the glow also fades out before VS */
.mr:has(> .mr-sc.empty):has(> .mr-a.pin) { background: linear-gradient(to right, rgba(255,199,119,0) 0, rgba(255,199,119,.07) 25%, rgba(255,199,119,.28) calc(50% - 3.5rem), rgba(255,199,119,0) calc(50% - 1rem)), rgba(0,0,0,.18); }
.mr:has(> .mr-sc.empty):has(> .mr-b.pin) { background: linear-gradient(to left, rgba(255,199,119,0) 0, rgba(255,199,119,.07) 25%, rgba(255,199,119,.28) calc(50% - 3.5rem), rgba(255,199,119,0) calc(50% - 1rem)), rgba(0,0,0,.18); }
/* narrow rows (half-width panels, phones): the status drops under the names */
@container (max-width: 34rem) {
  .mr:has(> .mr-st:not(:empty)) { height: auto; grid-template-rows: calc(3rem - 2px) auto; padding-bottom: .55rem; row-gap: .45rem; }
  .mr:has(> .mr-st:not(:empty)) > .mr-b { padding-inline-end: 0; }
  .mr-st { position: static; translate: none; grid-column: 1 / -1; grid-row: 2; justify-self: center; max-width: 100%; }
  .mr > .bk-side { font-size: var(--text-sm); }
}
/* ===== schedule timeline: thin line that meets the dots; done phases glow dimly, the live phase a little more ===== */
.t-phase::after { display: none; }
.t-phase::before { left: calc(.4rem - .5px); width: 1px; top: 1rem; bottom: calc(-1 * var(--sp-4) - 1rem); height: auto; background: var(--line2); box-shadow: none; }
.t-phase:last-child::before { display: none; }
.t-phase.done::before { background: rgba(158,206,106,.45); box-shadow: 0 0 .25rem rgba(158,206,106,.35); }
.t-phase.live::before { background: rgba(158,206,106,.85); box-shadow: 0 0 .45rem rgba(158,206,106,.6); }
.t-phase > details > summary { position: relative; }
.t-phase > details > summary::before { content: ""; position: absolute; left: -.35rem; top: 50%; width: .75rem; height: .75rem; box-sizing: border-box; translate: -50% -50%; border-radius: 50%; background: var(--bg2); border: 2px solid var(--line2); }
.t-phase.done > details > summary::before { background: var(--color-success); border-color: var(--color-success); box-shadow: 0 0 .35rem rgba(158,206,106,.45); }
.t-phase.live > details > summary::before { background: var(--color-live); border-color: var(--color-live); box-shadow: 0 0 .7rem rgba(158,206,106,.75); }
/* ===== table view: the match on a table ===== */
.tbv { margin-top: var(--sp-2); }
.tbv-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } .tbv-title { flex: 1; min-width: 0; display: grid; gap: .25rem; } .tbv-title .page-title { margin: 0; }
.tbv-title .live-eyebrow { display: flex; align-items: center; gap: .5rem; margin: 0; } .tbv-title .live-eyebrow a { color: inherit; text-decoration: none; } @media (hover: hover) { .tbv-title .live-eyebrow a:hover { color: #fff; } }
.tbv-match { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--sp-4); padding: 2.5rem var(--sp-5); }
.tbv-side { display: grid; justify-items: center; gap: var(--sp-3); text-align: center; min-width: 0; }
.tbv-sc { display: grid; place-items: center; min-width: 6rem; height: 7rem; padding: 0 1rem; box-sizing: border-box; transform: skewX(-10deg); border-radius: .75rem; background: var(--bg1); border: 1px solid var(--line2); box-shadow: 0 .5rem 1.5rem rgba(10,12,28,.5); font-family: var(--display); font-weight: 900; font-size: 4.5rem; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.tbv-sc.w { color: var(--color-success); } .tbv-sc.l { color: var(--red); } .tbv-side.hill .tbv-sc { border-color: var(--amber); box-shadow: 0 0 1.5rem rgba(224,175,104,.6); }
.tbv-n { font-size: var(--text-xl); font-weight: 800; color: #fff; max-width: 100%; overflow-wrap: anywhere; text-wrap: balance; }
.tbv-vs { font-family: var(--display); font-style: italic; font-weight: 900; font-size: 2.75rem; line-height: 1; color: var(--blue); text-transform: uppercase; transform: skewX(-8deg); text-shadow: 0 .125rem .5rem rgba(0,0,0,.5); }
.tbv-ctl { display: flex; gap: var(--sp-2); } .tbv-ctl .btn { min-width: 3rem; }
.tbv-race { text-align: center; margin: 0; }
@container app (max-width: 40rem) { .tbv-match { grid-template-columns: minmax(0, 1fr); } }
.t-phase > details > summary::before { top: calc(50% - .2rem); }
.grp-wrap { gap: var(--sp-3) !important; } .grp > summary { margin-bottom: 0 !important; } .grp[open] > summary { margin-bottom: var(--sp-3) !important; }
/* every page head is the same height (actions or not), title centred, so breadcrumb → title → content match on all pages */
.main > .page-head { min-height: 2.75rem; align-items: center !important; }
.rr-stage .opt-more:not(.open) { margin: 0 !important; padding: 0 !important; } .rr-stage .opt-more > .opt-in > .opt-pad { padding-block: 0 !important; }
.rr-stage > .opt-more.open { margin-top: var(--sp-3) !important; } .rr-stage .race-list { margin: 0; }
.rr-st-f { display: grid; gap: .5rem; } .rr-st-f .field-label { margin: 0; }

/* ===== round 10: one live rule, one row for sessions and tournaments ===== */
.mr.live { border-color: var(--line); box-shadow: none; }
.bk-m.live { border-color: var(--line); box-shadow: none; }
.mr[data-go] { cursor: pointer; } @media (hover: hover) { .mr[data-go]:hover { border-color: var(--color-accent); } }
.mr.mr-wait { display: flex; align-items: center; justify-content: center; }
.mr-wait-t { color: var(--dim); font-weight: 600; }
.mr-st .mr-tbl { color: var(--text); text-decoration: none; } @media (hover: hover) { .mr-st .mr-tbl:hover { border-color: var(--color-accent); color: #fff; } }
.mr-stream { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: .45rem; color: var(--dim); } .mr-stream svg { width: 1.1rem; height: 1.1rem; }
@media (hover: hover) { .mr-stream:hover { color: #fff; background: var(--bg2); } } .mr-stream:focus-visible, .mr-st .mr-tbl:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* ===== table screen: lag and tournament mode ===== */
#rsapp.rs-tour .timers .timer:first-child, #rsapp.rs-tour #settingsBtn, #rsapp.rs-tour .t-grip { display: none !important; }
#rsapp.rs-tour .score-tab.tour-tab { min-width: 6.5rem; justify-content: center; padding: .35rem 1.25rem .45rem; }
#rsapp.rs-tour .score-tab.tour-tab b { font-size: 4.5rem; color: #fff; position: relative; top: .046em; } /* digits have no descender: drop them by half the empty descender space so they sit in the middle of the tag */ #rsapp.rs-tour .score-tab.tour-tab.w b { color: var(--color-success); } #rsapp.rs-tour .score-tab.tour-tab.l b { color: var(--red); }
#rsapp.rs-tour .brand { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: .2rem; }
.tbv-eye { max-width: 100%; min-width: 0; } .tbv-eye > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbv-eye { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--text-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); text-decoration: none; }
@media (hover: hover) { .tbv-eye:hover { color: #fff; } }
.tbv-done { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); } .tbv-done .note { margin: .25rem 0 0; }
.bk-tag { max-width: none !important; width: auto !important; overflow: visible !important; text-overflow: clip !important; white-space: nowrap; }

/* ===== round 11: table screen header, pre-match, lag ===== */
#rsapp .match { grid-template-areas: "za vs zb" "xa . xb" "ba . bb" "msg msg msg"; padding-top: 2.75rem; }
@container app (max-width: 40rem) { #rsapp .match { grid-template-areas: "za za za" "xa xa xa" "ba ba ba" "vs vs vs" "zb zb zb" "xb xb xb" "bb bb bb" "msg msg msg"; } }
#rsapp.rs-tour .match { padding-top: 4rem; }
/* side by side, the queue's top edge is the team cards' top edge: the match's top padding, the empty timer row's gap and the card's margin (room for the score tab) */
@container app (min-width: 70rem) { #rsapp .queue-panel { margin-top: 4.75rem; } }
.timer.pre-msg { justify-content: center; text-align: center; white-space: nowrap; letter-spacing: .08em; color: var(--text); }
@container app (max-width: 22rem) { .timer.pre-msg { white-space: normal; } }
.mid .pre-btns { display: flex; gap: .5rem; }
.lag-btn svg { animation: none !important; }
.lag-btn[aria-pressed="true"] { color: var(--blue) !important; border-color: var(--blue) !important; box-shadow: 0 0 1rem rgba(122,162,247,.5) !important; animation: none !important; }
@container app (max-width: 40rem) { .mid .pre-btns { display: contents; } .mid .lag-btn { position: absolute; left: calc(50% + 2.5rem); top: 50%; transform: translateY(-50%); } }
#rsapp.rs-ro .mid .dice-btn, #rsapp.rs-ro .mid .lag-btn { visibility: hidden; pointer-events: none; }
.match.lag-pick .zone { cursor: pointer; animation: lagWiggle 2s ease-in-out infinite; }
@media (hover: hover) { .match.lag-pick .zone:hover { box-shadow: 0 0 0 2px var(--blue); } }
.match.lag-pick .zone:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-focus); }
@keyframes lagWiggle { 0%, 76%, 100% { rotate: 0deg; } 80% { rotate: -1.2deg; } 85% { rotate: 1.2deg; } 90% { rotate: -.7deg; } 95% { rotate: .35deg; } }
@media (prefers-reduced-motion: reduce) { .match.lag-pick .zone { animation: lagPulse 2s ease-in-out infinite; } }
@keyframes lagPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(122,162,247,0); } 50% { box-shadow: 0 0 0 3px rgba(122,162,247,.6); } }
#rsapp.rs-ro.rs-tour .acts, #rsapp.rs-ro.rs-tour .lose-btn { opacity: .3; pointer-events: none; }

/* platform admin: venue switcher + All venues in the header, invite/edit user and venue dialogs */
@container app (max-width: 72rem) { .shell-head .adm-back span { display: none; } }
.acc-rows { display: grid; gap: var(--sp-2); } .acc-rows:empty { display: none; }
.acc-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(8rem, 10rem) auto; gap: var(--sp-2); align-items: center; }
.acc-row > .n { font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-set { display: grid; gap: var(--sp-3); } .acc-set > .field { margin: 0; display: grid; gap: var(--sp-2); } .acc-set .btn svg { width: 1rem; height: 1rem; }
.addr-in { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .5rem; } .addr-pre { color: var(--dim); font-weight: 600; }
.ven-owners { display: grid; gap: .25rem; margin-bottom: var(--sp-2); } .ven-owner b { color: var(--text); }
.brk-field .stack.tight { gap: var(--sp-2); }
.acc-row > a.n { text-decoration: none; } @media (hover: hover) { .acc-row > a.n:hover { text-decoration: underline; } }
.check.is-off { cursor: not-allowed; opacity: .45; }
@media (hover: hover) { .check.is-off:hover .ctl { border-color: var(--color-border-strong); } }


/* 3a: face-off rows. Names are never cut (a pair takes two lines); the frame carries the state: green glow live, amber when a ready match needs a table */
.list:has(> .mr) { gap: 1rem !important; }
.mr { height: auto; min-height: 3.5rem; padding-block: .375rem; }
.mr .bk-n { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
.mr-pl { display: block; }
.mr > .bk-side { line-height: 1.25; }
.mr.st-live { border-color: rgba(158,206,106,.6); box-shadow: 0 0 .9rem rgba(158,206,106,.22), inset 0 0 1.25rem rgba(158,206,106,.05); }
.mr.st-need { border-color: rgba(224,175,104,.65); box-shadow: 0 0 .9rem rgba(224,175,104,.22), inset 0 0 1.25rem rgba(224,175,104,.05); }
.mr.st-need .mr-vs { color: var(--amber); }
.st-chip { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--display); font-style: italic; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.st-chip svg { width: .875rem; height: .875rem; flex: none; }
.st-chip.need { color: var(--amber); border-color: rgba(224,175,104,.6); box-shadow: 0 0 .6rem rgba(224,175,104,.22); }
.st-more { margin: 0; text-align: center; }
.mr-st .mr-tbl { font-family: var(--display); font-style: italic; font-weight: 800; letter-spacing: .08em; }
/* the table chip leaves side B's column: under ~700 px of row it drops below the names instead of squeezing them */
@container (max-width: 44rem) {
  .mr:has(> .mr-st:not(:empty)) { height: auto; grid-template-rows: auto auto; padding-bottom: .55rem; row-gap: .45rem; }
  .mr:has(> .mr-st:not(:empty)) > .mr-b { padding-inline-end: 0; }
  .mr-st { position: static; translate: none; grid-column: 1 / -1; grid-row: 2; justify-self: center; max-width: 100%; }
}
.page-sum { color: var(--dim); font-weight: 600; font-size: var(--text-sm); margin-inline-end: auto; align-self: center; }
.page-sum:empty { display: none; }
/* One focus ring for every control; components that draw their own ring keep it */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.menu-item:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.otp input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* dead ends: not found, no access */
.stop { text-align: center; } .stop h2 { text-wrap: balance; } .stop .muted { text-wrap: pretty; }
.stop-acts { justify-content: center; gap: .5rem; margin-top: 1.25rem; flex-wrap: wrap; }
/* account menu: text size */
.acct-ts { display: flex; align-items: center; gap: .25rem; padding: .25rem .25rem .25rem .75rem; margin: .25rem 0; border-block: 1px solid var(--line); }
.acct-ts-l { flex: 1; display: grid; font-weight: 600; } .acct-ts-l small { color: var(--dim); font-weight: 500; }
.acct-ts .ts-b { width: 2.75rem; min-height: 2.75rem; justify-content: center; padding: 0; font-weight: 800; flex: none; }
.acct-ts .ts-b:disabled { opacity: .4; cursor: default; }

/* Small links and the timer's pause button keep their look; their hit area grows to at least 44 × 44 */
.brand-link { display: inline-flex; align-items: center; min-height: 2.75rem; max-width: 100%; }
.crumbs a, a.live-tbl, a.mr-tbl, a.mr-stream, a.tbv-eye, .land-contact a, #rsapp .pause-btn, .pin-btn { position: relative; }
.crumbs a::after, a.live-tbl::after, a.mr-tbl::after, a.mr-stream::after, a.tbv-eye::after, .pin-btn::after, a.bk-tag::after, .land-contact a::after, #rsapp .pause-btn::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 2.75rem); height: max(100%, 2.75rem); translate: -50% -50%; }

/* Fields, buttons and wizard steps: at least 44 px tall at every width (H2, dialogs) */
.text-input, .btn, .wiz-step, .pick-row, .day-toggle { min-height: 2.75rem; box-sizing: border-box; }

/* Tournament page: names are never cut in bracket cards; lost sides and played round-robin matches are muted by colour, not opacity (H3, H5) */
.bk-side .bk-n, .t-li-side .bk-n { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.25; }
.bk-side.lost .bk-n { opacity: 1; color: var(--dim); }
.mr.done { opacity: 1; } .mr.done > .bk-side:not(.won) .bk-n { color: var(--dim); }
.shell-head .who .row { flex-wrap: nowrap; }
/* Wide tables and the bracket scroll inside their panel; nothing pushes the page sideways at 320 */
.panel, .stack > *, .rr-wrap, .sc-wrap { min-width: 0; } .s-scroll, .sc-wrap { max-width: 100%; }
.s-scroll, #bkScroll { position: relative; } /* absolutely placed children (screen-reader labels) stay inside the scroller instead of widening the page */
.t-viewbar { min-width: 0; max-width: 100%; } .t-viewbar .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; } .t-viewbar .seg > .btn { flex: none; }

/* v2 slice 5: calendar */
.cal-tbls { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding: .125rem; }
.cal-tbls::-webkit-scrollbar { display: none; }
.cal-tbls .btn { flex: none; min-height: 2.75rem; }
.cal-tbls .btn.on { border-color: var(--color-accent); background: var(--color-accent-soft); color: #fff; }
.cal.split { --colw: 5.5rem; }
.cal.fit { --colw: 2.875rem; grid-template-columns: 2.5rem repeat(var(--cols), minmax(var(--colw), 1fr)); min-width: calc(2.5rem + var(--cols) * var(--colw)); }
.cal-tools .cal-nav .btn { min-width: 2.75rem; } .cal-tools .seg .btn.sm { min-height: 2.75rem; }
.cal-day, .cal-bk { container-type: inline-size; }
.cal-bk, .cal-bk.other { background: hsl(228 18% 25%); border-color: hsl(228 16% 40%); box-shadow: none; }
.cal-bk.mine { background: linear-gradient(180deg, hsl(225 62% 44%), hsl(225 62% 35%)); border-color: hsl(225 75% 66%); box-shadow: 0 0 0 1px hsl(225 75% 66% / .5); }
.cal-bk.sys { background: linear-gradient(180deg, #252b45, #1e2238); border-color: rgba(122,162,247,.45); box-shadow: inset 3px 0 0 var(--color-accent); }
.cal-bk.tour { background: hsl(36 42% 23%); border-color: hsl(36 55% 45%); box-shadow: inset 3px 0 0 hsl(36 80% 60%); }
.cal-bk.block { background: repeating-linear-gradient(135deg, #252b45 0 6px, #1e2238 6px 12px); border-color: var(--line2); box-shadow: none; }
.cal-bk.ns { border-color: var(--color-danger); }
.cal-bk small { display: block; margin: .2rem -.45rem 0; padding: .05rem .45rem; background: var(--bg0); color: var(--text); opacity: 1; white-space: nowrap; overflow: hidden; }
@container (max-width: 5.25rem) { .bk-end { display: none; } }
@container (max-width: 4.5rem) { .lc-u { display: none; } .cal-lc { justify-content: center; padding: 0; } }
@container (max-width: 3rem) { .cal-bk b, .cal-bk small, .cal-rz { display: none; } }
.cal.fit .cal-hd { padding-inline: .1rem; }
.mbk i { background: hsl(228 16% 62%); } .mbk.mine i { background: var(--color-accent); } .mbk.tour i { background: hsl(36 80% 60%); }
.cal-key { display: flex; flex-wrap: wrap; gap: .4rem 1rem; list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.cal-key li { display: flex; align-items: center; gap: .45rem; }
.ck { width: 1rem; height: .75rem; border-radius: .2rem; border: 1px solid transparent; flex: none; }
.ck.other { background: hsl(228 18% 25%); border-color: hsl(228 16% 40%); }
.ck.mine { background: hsl(225 62% 44%); border-color: hsl(225 75% 66%); }
.ck.sys { background: #252b45; border-color: rgba(122,162,247,.45); box-shadow: inset 3px 0 0 var(--color-accent); }
.ck.tour { background: hsl(36 42% 23%); border-color: hsl(36 55% 45%); box-shadow: inset 3px 0 0 hsl(36 80% 60%); }
.ck.block { background: repeating-linear-gradient(135deg, #2f3656 0 3px, #1e2238 3px 6px); border-color: var(--line2); }
.ck.closed { background: repeating-linear-gradient(135deg, rgba(255,255,255,.14) 0 3px, transparent 3px 6px); border-color: var(--line); }
.ck.me { width: .5rem; height: .5rem; border-radius: 50%; background: var(--color-accent); }
.ck.busy { width: 1.5rem; background: linear-gradient(90deg, rgba(154,165,206,.04), rgba(154,165,206,.3)); border-color: var(--line); }
@container app (max-width: 48rem) { .mgrid { min-width: calc(7 * 2.875rem); } .mcell { padding: 0; } .mday { width: 100%; height: 100%; min-height: 2.75rem; border-radius: 0; } }
.cal.fit .cal-bk { left: 0; right: 0; }
/* month on touch: the whole cell opens the day; the bookings listed in it are a preview */
.mcell.tap { position: relative; display: block; padding: 0; }
.mcell.tap .mday { position: absolute; inset: 0; align-items: flex-start; padding: .5rem; border-radius: 0; }
.mcell.tap .mlist { position: relative; pointer-events: none; padding: 2.4rem .35rem .35rem; }

/* v2 slice 6: dashboard. Lead block, quiet counts, board of exceptions */
.adm-ok { display: flex; align-items: center; gap: .5rem; margin: 0; color: var(--color-text-muted); font-weight: 700; }
.adm-ok svg { width: 1.1rem; height: 1.1rem; color: var(--color-success); flex: none; }
.adm-lead .adm-needs { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.adm-strip { display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; list-style: none; margin: 0; padding: .75rem 1rem; border: 1px solid var(--line); border-radius: var(--r); background: rgba(255,255,255,.02); }
.adm-strip li { display: flex; align-items: baseline; gap: .4rem; min-width: 0; }
.adm-strip b { font-family: var(--display); font-style: italic; font-weight: 800; font-size: var(--text-lg); color: #fff; font-variant-numeric: tabular-nums; }
.adm-strip span { color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 600; }
.adm-grid > .adm-tables { grid-row: span 2; }
.adm-tables .adm-board .m { white-space: normal; }
.adm-free b { color: var(--text); margin-inline-end: .35rem; }
.adm-dot.play { background: var(--color-success); } .adm-dot.booked { background: var(--color-text-muted); } .adm-dot.off { background: none; box-shadow: inset 0 0 0 2px var(--line2); }
.adm-tables .adm-board li { grid-template-columns: auto minmax(6rem, 9rem) minmax(0, 1fr) auto; }
@container app (max-width: 40rem) { .adm-tables .adm-board li { grid-template-columns: auto minmax(0, 1fr); } }

/* v2 slice 7: lists. Phones get stacked rows (title, meta, status, edit); sort buttons stay above */
.th-sort i { opacity: 1; color: var(--color-text-muted); }
.pg-arrow { display: inline-flex; align-items: center; gap: .35rem; }
@container app (max-width: 40rem) {
  .lst, .lst tbody { display: block; }
  .lst thead tr { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.25rem; padding: .25rem 1rem; border-bottom: 1px solid var(--line); }
  .lst thead th { display: none; padding: 0; border: 0; }
  .lst thead { display: block; } .lst thead:not(:has(.th-sort)) { display: none; }
  .lst thead th:has(.th-sort) { display: block; } .lst thead th.hide-sm { display: none; }
  .lst .th-sort { min-height: 2.75rem; }
  .lst tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: .75rem; row-gap: .15rem; padding: .6rem .5rem .6rem 1rem; border-bottom: 1px solid rgba(59,66,97,.45); }
  .lst tbody tr:last-child { border-bottom: 0; }
  .lst td { display: block; padding: 0; border: 0; }
  .lst td.n { grid-column: 1; max-width: none; white-space: normal; overflow-wrap: break-word; }
  .lst td.m { grid-column: 1; white-space: normal; }
  .lst td:has(> .badge) { grid-column: 1; justify-self: start; margin-top: .2rem; }
  .lst td.act-cell { grid-column: 2; grid-row: 1 / span 3; width: auto; }
  .lst td.act-cell:empty { display: none; }
  .lst td.m:empty { display: none; }
  .lst-pg .pg-t { display: none; }
  .lst-pg .pg-arrow, .lst-pg .pg-n { min-width: 2.75rem; min-height: 2.75rem; justify-content: center; }
}
@media (pointer: coarse) { .lst td.n a { display: inline-flex; align-items: center; min-height: 2.75rem; } .lst .pcell-t > a { display: block; min-height: 0; } .lst .th-sort { min-height: 2.75rem; } }

/* v2 slice 8: insights */
.ins-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@container app (max-width: 40rem) { .ins-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ins-title { display: inline-flex; align-items: center; gap: .25rem; } .ins-title svg { width: .9rem; height: .9rem; color: var(--gold, #e0af68); }
.ins-kpis + .ins-grid { margin-top: var(--sp-4); }
.ins-lead .n { white-space: normal; overflow-wrap: break-word; text-overflow: clip; } /* names wrap instead of being cut */
.ins-lead .n .badge { white-space: nowrap; }
@container app (max-width: 40rem) { .ins-lead li { grid-template-columns: auto minmax(0, 1fr) minmax(3rem, 26%) auto auto; gap: .5rem; } .ins-lead li:not(:has(.ins-rank)) { grid-template-columns: minmax(0, 1fr) minmax(3rem, 26%) auto auto; } }

/* v2 slice 9: settings. Logo above the cover on phones; the cover keeps 3:1 without a minimum height that forced it wider than the screen */
@container app (max-width: 40rem) { .adm-imgs { grid-template-columns: minmax(0, 1fr); } .adm-img.logo .dropzone { width: 9rem; } .adm-img.cover .dropzone { min-height: 0; width: 100%; } }
.adm-img, .adm-img .dropzone { min-width: 0; max-width: 100%; }

/* v2 slice 10: public venue page. Signed-out header: one primary action and a link, one row on phones */
.who-out { display: flex; align-items: center; gap: .75rem; white-space: nowrap; }
.who-join { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .25rem; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 700; text-decoration: none; }
@media (hover: hover) { .who-join:hover { color: var(--text); text-decoration: underline; } }
.who-join:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: .25rem; }

/* v2 slice 13: the stream view fills the screen at every size (it was held to the page width: 1256 px of 1920) */
.stream { position: fixed; inset: 0; width: auto; height: auto; margin: 0; border-radius: 0; z-index: 1; }
.stream-bar { padding: max(.75rem, env(safe-area-inset-top)) max(.75rem, env(safe-area-inset-right)) .75rem max(.75rem, env(safe-area-inset-left)); }

/* status chips (M1): one meaning per colour and a shape for each, so status never rests on colour alone */
.badge.live, .badge.pending, .badge.done, .badge.draft, .badge.paused { display: inline-flex; align-items: center; gap: .35rem; }
.badge.live::before, .badge.pending::before, .badge.done::before, .badge.draft::before, .badge.paused::before { content: ""; flex: none; width: .5rem; height: .5rem; }
.badge.live::before { border-radius: 50%; background: currentColor; }
.badge.pending::before { border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; }
.badge.draft { color: var(--color-text-muted); border-style: dashed; } .badge.draft::before { border-radius: 50%; border: 1.5px dashed currentColor; width: .55rem; height: .55rem; box-sizing: border-box; }
.badge.done::before { width: .6rem; height: .6rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.badge.paused::before { width: .5rem; height: .55rem; background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%); }
.badge.invite { border-style: dashed; }
.badge.mr-link::before, .badge.mr-tbl::before { content: none; }
/* mid widths: the least-used columns go first so Status stays on screen */
@container app (max-width: 64rem) { .lst .hide-md { display: none; } }
@container app (max-width: 64rem) { .lst th, .lst td { padding-inline: .75rem; } .lst .act-cell { width: 3rem; } }
a.mr-link { position: relative; } a.mr-link::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 2.75rem); height: max(100%, 2.75rem); translate: -50% -50%; }

/* ---- v2 review round (6 Oct): consistency ---- */
/* top-level pages have no breadcrumb; the title row has one height on every page (44 px), so titles never shift */
.main > .page-head:first-child { margin-top: var(--sp-4); }
.main > .page-head .page-title { line-height: 2.75rem; }
/* nested pages (session, tournament, table): one head block. Back 44 px · eyebrow (status chip + kind) · title at --text-2xl */
.crumbs + #tour, .crumbs + section, .crumbs + #sess, .crumbs + .tbv { margin-top: var(--sp-3); }
.t-head-t .t-title, #rsapp header.sub-head #titleText, .tbv-title .page-title { font-size: var(--text-2xl) !important; line-height: 1.1; }
.tbv-eye, .t-head-t .live-eyebrow, .tbv-title .live-eyebrow { min-height: 1.4375rem; font-size: var(--text-xs); }
#rsapp header.sub-head { padding-top: 0; margin-top: 0; }

/* ---- variants for review (html[data-v-*], set by the preview) ---- */
/* Navigation at mid widths (47.5–66rem: phone landscape, tablet portrait) */
@container app (min-width: 47.51rem) and (max-width: 66rem) {
  .navrow, .shell-head > .nav-ind { display: none !important; }
  .tabbar { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); position: fixed; inset: auto 0 0 0; z-index: 900; padding: 0 .25rem env(safe-area-inset-bottom); background: rgba(22,22,30,.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); box-shadow: 0 -.5rem 1.5rem rgba(10,12,28,.55); }
  .tab-it { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; min-height: 4rem; background: none; border: 0; color: var(--dim); font-size: var(--text-xs); font-weight: 700; letter-spacing: .02em; cursor: pointer; }
  .tab-it svg { width: 1.375rem; height: 1.375rem; flex: none; }
  .tab-it.on { color: #fff; }
  .tab-it.on::before { content: ""; position: absolute; top: -1px; left: 24%; right: 24%; height: 3px; border-radius: 0 0 3px 3px; background: var(--color-accent); box-shadow: 0 0 .75rem rgba(122,162,247,.6); }
  .tab-it .side-dot { position: absolute; top: .6rem; left: calc(50% + .55rem); margin: 0; }
  .tab-it:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -4px; border-radius: .75rem; }
  .main { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
}

/* Match rows: one height everywhere (3rem); names up to two lines; the table / status label sits on the top border so it never wraps the row; score tabs bleed past the row */
.mr, .mr:has(> .mr-st:not(:empty)) { height: 3rem; min-height: 3rem; padding: 0 .75rem; grid-template-rows: none; row-gap: 0; margin-block: .5rem; overflow: visible; }
.mr:has(> .mr-st:not(:empty)) > .mr-b { padding-inline-end: 0; }
.mr > .bk-side { font-size: var(--text-md); line-height: 1.2; }
.mr .bk-n { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; overflow-wrap: break-word; }
.mr-st { position: absolute; top: 0; inset-inline-end: .75rem; translate: 0 -50%; grid-column: auto; grid-row: auto; justify-self: auto; max-width: 50%; z-index: 2; }
.mr-st .badge { background: var(--bg1); font-size: .6875rem; padding-block: .15rem; }
.mr-st .mr-stream { width: 1.5rem; height: 1.5rem; background: var(--bg1); border: 1px solid var(--line); }
@container app (max-width: 40rem) { .mr > .bk-side { font-size: var(--text-sm); } }
/* A: tabs 3.75rem on a 3rem row, bleeding 6 px above and below (the first design) */
/* B: scoreboard scale. Bigger tabs and numerals, bleeding 10 px */
.mr, .mr:has(> .mr-st:not(:empty)) { grid-template-columns: minmax(0, 1fr) 3.25rem 1.75rem 3.25rem minmax(0, 1fr); margin-block: .75rem; }
.mr-sc { width: 3.25rem; height: 4.25rem; margin-block: -.625rem; font-size: 2.25rem; box-shadow: 0 .5rem 1.25rem rgba(10,12,28,.6); }
.mr-vs { font-size: 1.35rem; }
/* C: one slanted plate holds both scores and VS, bleeding 8 px */
/* wide screens: rows sit two to a line instead of stretching across 1,700 px */
@container app (min-width: 64rem) { .list.t-now { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-4); } }

/* Lag / roll the dice on phones */
@container app (max-width: 40rem) {
}
@container app (max-width: 40rem) {
  .mr, .mr:has(> .mr-st:not(:empty)) { grid-template-columns: minmax(0, 1fr) 2.75rem 1.25rem 2.75rem minmax(0, 1fr); column-gap: .375rem; padding-inline: .5rem; }
  .mr, .mr:has(> .mr-st:not(:empty)) { grid-template-columns: minmax(0, 1fr) 3rem 1.25rem 3rem minmax(0, 1fr); }
  .mr-sc { width: 3rem; }
  .mr-vs { font-size: .95rem; }
}
.mr .bk-n { max-height: 2.4em; }
#rsapp header.sub-head .brand:has(> .tbv-eye) { flex-direction: column; align-items: flex-start; justify-content: center; gap: .25rem; }

/* Match rows (Rows B chosen): names always on one line, cut with … and the full name on hover */
.mr { container-type: inline-size; }
.mr .mr-pl { display: inline; }
.mr .bk-n { display: block; -webkit-line-clamp: unset; max-height: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container app (max-width: 40rem) {
  .mr-st { max-width: calc(50% - 5.5rem); } .mr-st .badge { font-size: .625rem; letter-spacing: .04em; } /* the label stops short of the score tab */
}
/* Before the break is decided: no score tabs or match actions; they come in once it is */
.rs-pre .score-tab, .rs-pre .acts, .rs-pre .lose-btn { visibility: hidden; }
@keyframes rsReveal { from { opacity: 0; translate: 0 .5rem; } } @keyframes rsFade { from { opacity: 0; } }
.rs-reveal .score-tab, .rs-reveal .lose-btn, .rs-reveal .acts { animation: rsReveal .45s var(--ease-out) both; } .rs-reveal .acts { animation-delay: .08s; }
@media (prefers-reduced-motion: reduce) { .rs-reveal .score-tab, .rs-reveal .lose-btn, .rs-reveal .acts { animation: rsFade .2s linear both; } }
/* phones: the free room holds two full-width buttons in place of VS */
@container app (max-width: 40rem) {
  .rs-pre .acts, .rs-pre .lose-btn, .rs-pre .mid .vs, .rs-pre .mid .dice-btn.gone { display: none; }
  .rs-pre .mid { width: 100%; }
  .rs-pre .mid .pre-btns { position: static; display: grid; gap: .5rem; width: 100%; }
  .rs-pre .mid .dice-btn:not(.gone) { position: static; left: auto; right: auto; transform: none; width: 100%; height: 3rem; display: flex; align-items: center; justify-content: center; gap: .625rem; border-radius: .75rem; }
  .rs-pre .mid .dice-btn svg { width: 1.5rem; height: 1.5rem; }
  .rs-pre .mid .dice-btn::after { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; }
  .rs-pre #diceBtn::after { content: "Roll the dice"; }
  .rs-pre #lagBtn::after { content: "Lag for the break"; }
  .rs-pre #lagBtn[aria-pressed="true"]::after { content: "Tap the side that won the lag"; }
}
.mr-vs { overflow: visible; text-overflow: clip; white-space: nowrap; }
@container app (max-width: 40rem) { .mr, .mr:has(> .mr-st:not(:empty)) { grid-template-columns: minmax(0, 1fr) 3rem 1.5rem 3rem minmax(0, 1fr); column-gap: .25rem; } }

/* Game screen on phones: less room between the timers and the first score tab (65 px → about 20 px) */
@container app (max-width: 40rem) { #rsapp #gameScreen { padding-top: .5rem; } #rsapp .match { padding-top: 2rem; } }
/* Unplayed rows (no score tabs): the empty tab columns collapse, so names sit next to VS */
.mr:has(> .mr-sc.empty) { grid-template-columns: minmax(0, 1fr) 0 1.75rem 0 minmax(0, 1fr) !important; column-gap: .375rem !important; }
.mr-sc.empty { width: 0 !important; overflow: hidden; }
/* Match rows on phones: options for review (preview menu "Match rows on phones") */
@container app (max-width: 40rem) {
  .mr > .bk-side { font-size: .8125rem; }
  .mr-sc { height: 3.75rem; margin-block: -.375rem; }
  .mr { margin-block: .5rem; }
  .mr > .mr-a { padding-inline-end: .5rem; } .mr > .mr-b { padding-inline-start: .5rem; }
}
.mr > .mr-vs { overflow: visible !important; text-overflow: clip !important; min-width: max-content; }
@container app (max-width: 40rem) {
  .mr > .mr-a { grid-column: 1; grid-row: 1; } .mr > .mr-a + .mr-sc { grid-column: 2; grid-row: 1; }
  .mr > .mr-vs { grid-column: 3; grid-row: 1; } .mr > .mr-vs + .mr-sc { grid-column: 4; grid-row: 1; } .mr > .mr-b { grid-column: 5; grid-row: 1; }
}
@container app (max-width: 40rem) { #rsapp #gameScreen .match { padding-top: 2rem; } #rsapp .timer.pre-msg { white-space: nowrap; } }
/* phones: the table label shows the table name only, cut after 10 characters; the green row border already says live */
@container app (max-width: 40rem) { .mr-st .badge .lv-pre { display: none; } .mr-st .badge.live::before { content: none; } .mr-st .badge .lv-tb, .mr-st .badge:not(:has(.lv-tb)) { display: inline-block; max-width: 10ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } }
/* Option 2 (chosen): on phones no VS between two scores; the tabs sit side by side and the names get the room */
@container app (max-width: 40rem) {
  .mr:not(:has(> .mr-sc.empty)) { grid-template-columns: minmax(0, 1fr) 3rem 0 3rem minmax(0, 1fr) !important; }
  .mr:not(:has(> .mr-sc.empty)) > .mr-vs { display: none; }
  .mr-st { max-width: calc(50% - 3.75rem); }
}
@container app (max-width: 40rem) { .mr-st .badge .lv-tb { max-width: 11.5ch; } .mr-st .badge:not(:has(.lv-tb)) { max-width: calc(11.5ch + 1.25rem); } } /* about 10 letters at this letter-spacing */
/* rows without scores ("Needs a table", unplayed): nothing to collide with, so the label shows in full */
@container app (max-width: 40rem) { .mr:has(> .mr-sc.empty) > .mr-st { max-width: calc(100% - 1.5rem); } .mr:has(> .mr-sc.empty) > .mr-st .badge, .mr-st .badge.st-chip { max-width: none !important; } }
@container app (max-width: 40rem) { .mr-st:has(> .st-chip) { width: max-content; max-width: calc(100% - 1.5rem) !important; } .mr-st .badge.st-chip { display: inline-flex !important; overflow: visible !important; text-overflow: clip !important; } .mr-st .badge.st-chip > span { white-space: nowrap; } }

/* Schedule timeline: the dot sits at a fixed point (--dot) of each header and the line runs dot to dot */
.t-phase::before { top: var(--dot); bottom: calc(-1 * var(--sp-4) - var(--dot)); }
.t-phase > details > summary::before { top: var(--dot); }
.t-ph-t .hint { line-height: 1rem; white-space: nowrap; min-height: 1rem; }
.t-ph-t b { line-height: 1.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.t-ph-st { line-height: 1.5rem; }
.t-caret { flex: none; margin: 0 0 .2rem 0; }
/* A: label above, name + arrow below; status on the name line */
.t-phase { --dot: 2.1rem; }
.t-phase > details > summary { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "hint hint . ." "name caret . st"; align-items: center; column-gap: .5rem; row-gap: 0; }
.t-ph-t { display: contents; } .t-ph-t .hint { grid-area: hint; } .t-ph-t b { grid-area: name; } .t-caret { grid-area: caret; } .t-ph-st { grid-area: st; }
/* B: one line; on phones the label goes when the name already says it ("Losers bracket · Losers round 2"); a name that still doesn't fit is cut */
/* C: two lines; status and arrow together at the right, centred on the header */
/* bracket tags read like row labels: on phones the table name only, cut after about 10 letters */
@container app (max-width: 40rem) { .bk-tag .lv-pre { display: none; } .bk-tag .lv-tb { display: inline-block; max-width: 11.5ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } }

/* N1 RackSync landing */
.rsl { display: grid; gap: var(--sp-6); padding-block: var(--sp-6) var(--sp-5); }
.rsl-hero { display: grid; gap: var(--sp-3); justify-items: start; }
.rsl-mark { margin: 0; font-family: var(--display); font-style: italic; font-weight: 900; font-size: clamp(2.5rem, 8vw, 4.5rem); line-height: .95; text-transform: uppercase; color: #fff; letter-spacing: -.01em; }
.rsl-sub { margin: 0; font-size: var(--text-lg); color: var(--color-text-muted); font-weight: 600; max-width: 34ch; text-wrap: pretty; }
.rsl-acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.rsl-pts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--sp-3); }
.rsl-pts li { display: grid; gap: .25rem; padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r); background: rgba(255,255,255,.02); }
.rsl-pts b { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #fff; }
.rsl-pts span { color: var(--color-text-muted); font-weight: 600; text-wrap: pretty; }
.rsl-form .auth { margin: 0; } .rsl-form .auth h2 { display: none; }
.rsl-foot { margin: 0; } .rsl-foot i { font-style: italic; }
.rsl-form { display: none; }
/* N2 venue home: "You" strip */
.you { display: grid; gap: var(--sp-3); } .you-t { margin: 0; }
.you-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--sp-3); }
.you-card { display: grid; gap: .3rem; min-height: 2.75rem; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: var(--r); background: rgba(255,255,255,.02); color: var(--text); text-decoration: none; }
.you-card b { font-weight: 700; text-wrap: pretty; } .you-k { font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 700; }
.you-card.live { border-color: var(--color-live); box-shadow: 0 0 .9rem rgba(158,206,106,.22); }
@media (hover: hover) { .you-card:hover { border-color: var(--color-accent); } } .you-card:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* B: one compact line instead of cards; Live now takes the lead */
.land-hero.has-cover::after { background: linear-gradient(to top, rgba(10,12,24,.96) 0, rgba(10,12,24,.75) 45%, rgba(10,12,24,.25) 100%); } /* the title always reads on a busy cover */
.home .land-hero .land-name { text-shadow: 0 2px 12px rgba(0,0,0,.6); }
/* card links (device join, your venues): a card, not underlined prose */
.card-link, .card-link:hover { text-decoration: none; } .card-link > b { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #fff; text-decoration: none; } .card-link > span { color: var(--color-text-muted); font-weight: 600; text-decoration: none; }

/* N4 player page */
.ps-id { display: flex; align-items: center; gap: var(--sp-3); }
.ps-avatar { width: 3rem; height: 3rem; border-radius: .9rem; object-fit: cover; flex: none; border: 1px solid var(--line2); background: var(--bg2); }
.ps-avatar.ini { display: grid; place-items: center; font-family: var(--display); font-style: italic; font-weight: 900; font-size: 1.25rem; color: #fff; background: hsl(var(--h) 45% 32%); border-color: hsl(var(--h) 55% 50%); }
.ps-kpis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.ps-kpis li { display: grid; gap: .15rem; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: var(--r); background: rgba(255,255,255,.02); }
.ps-kpis b { font-family: var(--display); font-style: italic; font-weight: 900; font-size: var(--text-2xl); color: #fff; font-variant-numeric: tabular-nums; line-height: 1; }
.ps-kpis span { color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 600; }
@container app (max-width: 40rem) { .ps-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--sp-4); align-items: start; }
.ps-list { list-style: none; margin: 0; padding: 0; display: grid; }
.ps-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 2.75rem; padding: .25rem 0; border-top: 1px solid rgba(59,66,97,.45); }
.ps-list li:first-child { border-top: 0; }
.ps-list a { color: var(--text); text-decoration: none; font-weight: 700; } @media (hover: hover) { .ps-list a:hover { color: #fff; text-decoration: underline; } }
.ins-lead .n a { color: inherit; text-decoration: none; } @media (hover: hover) { .ins-lead .n a:hover { text-decoration: underline; } }
.ps-list .n { flex: 1; min-width: 0; font-weight: 700; } .ps-list .m { color: var(--color-text-muted); font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
.ps-r { font-family: var(--display); font-style: italic; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); } .ps-r.up { color: var(--color-success); } .ps-r.down { color: var(--red); }
.ps-w { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: .45rem; font-family: var(--display); font-style: italic; font-weight: 900; flex: none; } .ps-w.won { background: rgba(158,206,106,.18); color: var(--color-success); } .ps-w.lost { background: rgba(247,118,142,.18); color: var(--red); }
.ps-months { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .5rem; height: 7rem; align-items: end; }
.ps-m { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; gap: .3rem; text-align: center; }
.ps-bar { display: flex; align-items: flex-end; min-height: 0; } .ps-bar i { display: flex; align-items: flex-end; width: 100%; border-radius: .3rem .3rem 0 0; background: rgba(122,162,247,.22); } .ps-bar b { display: block; width: 100%; border-radius: .3rem .3rem 0 0; background: var(--color-accent); }
.ps-m small { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 700; }
/* B: a single column with the trend first; lists side by side only on wide screens */

/* N5 Help */
.help-wrap { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.help-nav { position: sticky; top: var(--sp-4); } .help-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.help-nav a { display: grid; gap: .1rem; min-height: 2.75rem; padding: .5rem .75rem; border-radius: .6rem; color: var(--text); text-decoration: none; } .help-nav a b { font-weight: 700; } .help-nav a small { color: var(--color-text-muted); font-weight: 600; }
.help-nav a.on { background: var(--color-accent-soft); color: #fff; box-shadow: inset 0 0 0 1px rgba(122,162,247,.45); } @media (hover: hover) { .help-nav a:hover { background: rgba(255,255,255,.05); } } .help-nav a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.help-body { display: grid; gap: var(--sp-6); }
.help-ch { display: grid; gap: var(--sp-3); } .help-t { margin: 0; font-size: var(--text-xl); } .help-who { margin: calc(-1 * var(--sp-2)) 0 0; color: var(--color-text-muted); font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.help-q h3 { margin: 0 0 .35rem; font-size: var(--text-md); font-weight: 800; color: #fff; } .help-q p { margin: 0; color: var(--text); text-wrap: pretty; line-height: 1.5; } .help-q a { color: var(--color-accent); }
@container app (max-width: 47.5rem) { .help-wrap { grid-template-columns: minmax(0, 1fr); } .help-nav { position: static; } .help-nav ul { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding: .125rem; } .help-nav ul::-webkit-scrollbar { display: none; } .help-nav a { flex: none; white-space: nowrap; } .help-nav a small { display: none; } }

/* help chips on phones: the row fades at the edge it can still scroll to (same cue as the other sideways scrollers) */
@container app (max-width: 47.5rem) { .help-nav ul { padding: .125rem; } .help-nav ul.se-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); } .help-nav ul.se-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent); } .help-nav ul.se-l.se-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); } }

/* v2 N3: analytics */
.an-filters { flex-wrap: wrap; gap: .5rem 1rem; }
.an-lead { margin: 0; font-size: var(--text-lg); line-height: 1.4; color: var(--color-text-muted); text-wrap: pretty; } .an-lead b { color: var(--text); font-variant-numeric: tabular-nums; }
.an-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .an-grid .an-wide { grid-column: 1 / -1; }
@container app (max-width: 48rem) { .an-grid { grid-template-columns: minmax(0, 1fr); } }
.an-bar { flex: 1; height: .5rem; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; } .an-bar i { display: block; height: 100%; background: var(--color-accent); border-radius: inherit; }
.an-heat { display: grid; grid-template-columns: 2.25rem repeat(24, minmax(0, 1fr)); gap: 2px; align-items: center; }
.an-heat i { aspect-ratio: 1; border-radius: 2px; background: color-mix(in oklab, var(--color-accent) calc(var(--a) * 100%), rgba(255,255,255,.05)); }
.an-heat .an-hl, .an-heat small { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 700; } .an-heat small { text-align: start; }

/* v2 N5: the manual. Text column, then real screenshots at the size each task is done on */
.help-body { gap: var(--sp-7, 3rem); }
.help-ch { gap: var(--sp-5); }
.help-s { display: grid; gap: var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid rgba(59,66,97,.6); scroll-margin-top: 5.5rem; }
.help-ch > div + .help-s { border-top: 0; padding-top: 0; }
.help-s h3 { margin: 0; font-size: var(--text-lg); font-weight: 800; color: #fff; }
.help-txt { display: grid; gap: .6rem; max-width: 42rem; line-height: 1.55; text-wrap: pretty; }
.help-txt p, .help-txt ol, .help-txt ul { margin: 0; } .help-txt ol, .help-txt ul { padding-inline-start: 1.25rem; display: grid; gap: .3rem; }
.help-txt b { color: #fff; } .help-txt a { color: var(--color-accent); }
.help-figs { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: flex-start; margin-top: var(--sp-2); }
.help-fig { margin: 0; display: grid; gap: .5rem; width: min(100%, var(--fw)); min-width: 0; }
.help-fig.phone { width: min(100%, 17.5rem); } .help-fig.tablet, .help-fig.desk { width: 100%; }
.help-fig a { display: block; border-radius: .9rem; }
.help-fig a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.help-fig img { display: block; width: 100%; height: auto; border-radius: .75rem; border: 1px solid var(--line); background: var(--bg1); box-shadow: 0 .75rem 2rem rgba(0,0,0,.35); }
.help-fig.phone img { border-radius: 1.25rem; }
.help-fig figcaption { font-size: var(--text-sm); color: var(--color-text-muted); text-wrap: pretty; }
.help-dev { color: var(--text); font-weight: 700; } .help-dev::after { content: " · "; color: var(--color-text-muted); font-weight: 400; }
@container app (max-width: 40rem) { .help-fig.phone { width: calc(50% - var(--sp-4) / 2); } .help-fig.phone:only-child { width: min(100%, 15rem); } }
.help-ch > div:first-child { display: grid; gap: .35rem; } .help-ch > div:first-child .help-who { margin: 0; }
/* match header on tournament tables: the title block takes the free room left of the timer, so "Event · Race to 5" isn't cut by sub-pixel rounding */
#rsapp header.sub-head .brand:has(> .tbv-eye) { flex: 1 1 auto; }
#rsapp .brand > .tbv-eye { justify-self: stretch; } /* the line spans the block, so its text keeps its exact width */
#rsapp .brand > .tbv-eye > span:last-child { flex: 1 1 auto; }
/* table device: the game header is the top row; the game takes the rest of the screen, centred */
#app:has(.dev-live) { padding-block: 1rem; } /* no tab bar on a table tablet */
.dev-live { display: flex; flex-direction: column; min-height: calc(var(--dev-h, 100dvh) - 2rem); }
.dev-live > .tbv-live, .dev-live #sess { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; width: 100%; }
.dev-live #rsapp.app { flex: 1 1 auto; display: flex; flex-direction: column; margin-top: 0; width: 100%; }
.dev-live #rsapp > * { width: 100%; }
.dev-live #rsapp > header { flex: none; }

/* Markdown text: tournament details and staff notes (md.js) */
.mdx { overflow-wrap: break-word; line-height: 1.55; color: var(--text); }
.mdx > :first-child { margin-top: 0; } .mdx > :last-child { margin-bottom: 0; }
.mdx p, .mdx ul, .mdx ol, .mdx blockquote, .mdx pre { margin: 0 0 .75rem; }
.mdx h3, .mdx h4, .mdx h5, .mdx h6 { margin: 1.1rem 0 .4rem; color: #fff; font-weight: 800; line-height: 1.25; text-wrap: balance; }
.mdx h3 { font-size: 1.25rem; } .mdx h4 { font-size: 1.0625rem; } .mdx h5, .mdx h6 { font-size: 1rem; }
.mdx ul, .mdx ol { padding-inline-start: 1.35rem; } .mdx li + li { margin-top: .25rem; }
.mdx strong { color: #fff; }
.mdx a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
@media (hover: hover) { .mdx a:hover { color: #a9c1ff; } }
.mdx code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; padding: .05rem .3rem; border-radius: .3rem; background: var(--bg0); }
.mdx pre { padding: .75rem; border-radius: .5rem; background: var(--bg0); overflow-x: auto; } .mdx pre code { padding: 0; background: none; }
.mdx blockquote { margin-inline: 0; padding: .1rem 0 .1rem .9rem; border-inline-start: 3px solid var(--line2); color: var(--dim); }
.mdx hr { border: 0; border-top: 1px solid var(--line); margin: 1rem 0; }
.md-ed { display: grid; gap: .4rem; }
.md-bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; } .md-bar .field-label { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* one row in every width: the label shortens, the Write / Preview toggle keeps its place on the right */
.md-tabs { padding: 2px; flex: none; } .md-tabs .btn.sm { min-height: calc(2.75rem - 6px); }
.md-prev { padding: .7rem .9rem; border: 1px dashed var(--line2); border-radius: .625rem; overflow-y: auto; max-height: 24rem; }
.md-help { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); } .md-help span { white-space: nowrap; }
.md-empty { color: var(--color-text-muted); }
.td-md { font-size: 1.0625rem; }

/* staff notes and labels (migration 0030) */
.nt-chip { display: inline-flex; align-items: center; gap: .3rem; min-height: 1.75rem; padding: .1rem .65rem; border-radius: 999px; border: 1px solid hsl(var(--h) 60% 62% / .75); background: hsl(var(--h) 42% 23%); color: hsl(var(--h) 90% 88%); font-size: var(--text-sm); font-weight: 700; line-height: 1.2; white-space: nowrap; }
button.nt-chip { font: inherit; font-size: var(--text-sm); font-weight: 700; min-height: 2.75rem; cursor: pointer; }
@media (hover: hover) { button.nt-chip:hover { background: hsl(var(--h) 45% 30%); } }
.nt-chip .nt-x { position: relative; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; margin: -.2rem -.5rem -.2rem -.1rem; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.nt-chip .nt-x::after { content: ""; position: absolute; inset: -.625rem; }
.nt-x svg { width: .85rem; height: .85rem; }
@media (hover: hover) { .nt-chip .nt-x:hover { background: hsl(var(--h) 50% 35%); } }
.nt-chip .nt-x:focus-visible, button.nt-chip:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.nt-labels { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.nt-head h3 { margin: .2rem 0 0; text-wrap: balance; } .nt-head .note { margin: .2rem 0 0; }
.nt-priv { display: flex; align-items: center; gap: .4rem; margin: .5rem 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.nt-priv svg { width: .95rem; height: .95rem; flex: none; }
.nt-sec h4 { margin: 0 0 .6rem; font-size: 1rem; font-weight: 800; color: #fff; }
.nt-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .6rem; }
.nt-c { padding: .65rem .85rem .8rem; border: 1px solid var(--line); border-radius: .75rem; background: rgba(255,255,255,.02); }
.nt-c-h { display: flex; align-items: center; flex-wrap: wrap; gap: .1rem .6rem; margin-bottom: .3rem; min-height: 2.75rem; }
.nt-c-h .m { color: var(--color-text-muted); font-size: var(--text-sm); }
.nt-c-acts { margin-inline-start: auto; display: flex; gap: .15rem; }
.nt-form-acts { justify-content: flex-end; }
.nt-pick { margin-top: .75rem; padding: .85rem; border: 1px solid var(--line); border-radius: .75rem; display: grid; gap: .85rem; }
.nt-pick-l { display: flex; flex-wrap: wrap; gap: .4rem .75rem; } .nt-opt { display: inline-flex; align-items: center; }
.nt-new { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; } .nt-new .field { flex: 1 1 12rem; }
.nt-hues { display: flex; flex-wrap: wrap; border: 0; margin: 0; padding: 0; }
.nt-hue { position: relative; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; cursor: pointer; }
.nt-hue::before { content: ""; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: hsl(var(--h) 55% 52%); box-shadow: 0 0 0 2px var(--bg1); }
.nt-hue:has(input:checked)::before { box-shadow: 0 0 0 2px var(--bg1), 0 0 0 4px #fff; }
.nt-hue input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.nt-hue:has(input:focus-visible)::before { outline: 2px solid var(--color-focus); outline-offset: 5px; }
.nt-inm { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: .25rem 0 .75rem; }
.nt-inm .btn svg, .nt-mark svg { width: .95rem; height: .95rem; }
/* on match rows: label dots and the comment count, on the row's bottom edge */
.nt-mark { position: absolute; inset-inline-start: .6rem; bottom: -.6rem; z-index: 2; display: inline-flex; align-items: center; gap: .25rem; height: 1.2rem; padding: 0 .4rem; border-radius: 999px; background: var(--bg0); border: 1px solid var(--line2); color: var(--text); font-size: .6875rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; pointer-events: none; }
.nt-mark i { width: .55rem; height: .55rem; border-radius: 50%; background: hsl(var(--h) 65% 62%); }
.nt-mark svg { width: .75rem !important; height: .75rem !important; }
.bk-m.nt-able { cursor: pointer; }
.bk-m.nt-able:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* player page and people list */
.ps-staff { display: grid; gap: .75rem; justify-items: start; }
.ps-staff-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; width: 100%; } .ps-staff-h .panel-title { margin: 0; } .ps-staff-h .nt-priv { margin: 0; }
.nt-last { width: 100%; } .nt-last .m { margin: .35rem 0 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.nt-inl { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; } .nt-inl .nt-chip { min-height: 1.35rem; padding: 0 .45rem; font-size: .75rem; }
.md-ed textarea.md-ta { height: auto; min-height: 7.5rem; } .md-ed textarea.md-ta[rows="10"] { min-height: 14rem; } /* beats the one-line .dlg .text-input */
.nt-inm .btn { gap: .4rem; }

/* Page head → content: one rhythm on every page with a title row (table/match view excepted).
   The head is always one 44 px row; the first thing under it starts 16 px below, whether or not the page has a filter panel. */
.main > .page-head { flex-wrap: nowrap; margin-bottom: var(--sp-4); }
.main > .page-head .page-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.main > .page-head .page-acts { flex: none; flex-wrap: nowrap; margin-inline-start: auto; }
/* Filter panels: in a grid a closed panel still took a row plus the gap (24 px). The stack spaces its children with margins instead, so a closed panel takes nothing */
.main > .page-head + .stack:has(> .lst-tools-wrap:first-child) { gap: 0; }
.main > .page-head + .stack:has(> .lst-tools-wrap:first-child) > :not(dialog) + :not(dialog) { margin-top: var(--sp-5); }
.main > .page-head + .stack:has(> .lst-tools-wrap:first-child) > .lst-tools-wrap:first-child + :not(dialog) { margin-top: 0; }
.main > .page-head + .stack > .lst-tools-wrap:first-child { margin: -3px 0 0; } /* its controls carry 3 px for focus rings */
.main > .page-head + .stack > .lst-tools-wrap.open:first-child { margin-bottom: calc(var(--sp-4) - 3px); }
.page-sum-wide { display: contents; }
.pa-more { display: none; position: relative; }
.pa-more .menu { left: auto; right: 0; width: 16rem; transform-origin: top right; }
@container app (max-width: 40rem) {
  /* phones: icon buttons only, so title and actions always share one row */
  .main > .page-head .page-act { width: 2.75rem; padding: 0; justify-content: center; }
  .main > .page-head .page-act > span { display: none; }
  .main > .page-head .head-ic { display: none; }
  .main > .page-head .pa-more { display: inline-flex; }
  .main > .page-head .page-sum { display: none; }
}
@container app (max-width: 22rem) { .main > .page-head .page-title { font-size: 1.75rem; } }
/* "On the tables" with one match: centred, at the width of one column */
@container app (min-width: 64rem) { .list.t-now > :only-child { grid-column: 1 / -1; justify-self: center; width: calc((100% - var(--sp-4)) / 2); } }
@container app (max-width: 47.5rem) { .help-nav ul { margin: -.125rem -.125rem 0; } } /* its 2 px focus-ring padding no longer pushes the chips down */
/* "More actions" menu: anchored to the actions row (its right edge is the content edge), so it stays on screen at 320 */
.main > .page-head .page-acts { position: relative; } .pa-more { position: static; } .pa-more .menu { right: 0; max-width: calc(100cqi - 1.5rem); }
/* italic display titles: the last letter's slant overhangs its advance width, which tripped the ellipsis on "Analytics"; give it room */
.page-head .page-title { padding-inline-end: .14em; }
/* tablet portrait: tournaments drop Ends too, so Status stays on screen (it scrolled out at 820) */
@container app (max-width: 56rem) { .lst .hide-t { display: none; } }

/* ===== 8 Oct review fixes ===== */
/* F1 platform admin on phones: Venues / Users in the bottom tab bar, one header row */
@container app (max-width: 47.5rem) { .shell-head > .topnav { display: none; } .shell-head:has(> .vsel) { flex-wrap: nowrap; } .shell-head > .vsel { flex: 1 1 auto; min-width: 0; } } /* phones: the venue switcher shrinks instead of pushing the account menu to a row of its own */
@container app (max-width: 23rem) { .shell-head > .crumb.muted { display: none; } }
/* F2 analytics filters fill the row on phones (no sideways scroll) */
.an-sm { display: none; }
@container app (max-width: 40rem) {
  .an-filters { display: grid; gap: .5rem; } .an-filters .seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; }
  .an-filters .seg .btn { min-width: 0; padding-inline: .25rem; font-size: .8125rem; white-space: nowrap; }
  .an-lg { display: none; } .an-sm { display: inline; }
}
/* F4 the ⋯ button: icon centred like the other head buttons; on narrow phones the filter toggle moves into its menu */
.pa-more > .btn.icon-btn { display: grid; place-items: center; padding: 0; gap: 0; } .pa-more > .btn.icon-btn svg { margin: 0; width: 1.25rem; height: 1.25rem; }
.pa-filt { display: none !important; }
@container app (max-width: 22.5rem) { .page-acts:has(.pa-more) > .filt-btn { display: none; } .pa-filt { display: flex !important; } }
/* F5 code boxes share the row instead of overflowing it */
.otp { display: grid; grid-template-columns: repeat(6, minmax(0, 2.75rem)); justify-content: center; gap: clamp(.25rem, 1.6cqi, .4rem); }
.otp input { width: 100%; min-width: 0; box-sizing: border-box; padding: 0; }
/* F7 session and match timers on one row at 320 */
@container app (max-width: 22.5rem) { #rsapp .timers { flex-wrap: nowrap; gap: .3rem; } #rsapp .timer { padding-inline: .45rem; gap: .25rem; letter-spacing: .02em; } }
/* F8 logo and cover: two distinct slots, preview centred, actions under it */
.adm-imgs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--sp-4); }
.adm-img { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0; padding: var(--sp-4); border: 1px solid var(--line); border-radius: .875rem; background: rgba(255,255,255,.02); }
.ai-head { display: grid; gap: .2rem; } .ai-head .field-label { margin: 0; } .ai-hint { color: var(--color-text-muted); font-size: var(--text-sm); }
.ai-stage { flex: 1; display: grid; place-items: center; min-height: 0; }
.adm-img.logo .dropzone { width: min(100%, 9rem); aspect-ratio: 1; min-height: 0; }
.adm-img.cover .dropzone { width: 100%; aspect-ratio: 3 / 1; min-height: 0; }
.ai-acts { display: flex; justify-content: center; gap: var(--sp-2); flex-wrap: wrap; } .adm-img .ai-acts > .btn { margin: 0; }
@container app (max-width: 40rem) { .adm-imgs { grid-template-columns: minmax(0, 1fr); } .adm-img.logo .dropzone { width: 8rem; } }
/* F9 no row glows: a live row is marked by its table label (green dot); waiting rows by their amber label; only the hill score glows */
.mr.live, .mr.st-live, .mr.st-need, .bk-m.live, .you-card.live { border-color: var(--line); box-shadow: none; }
.mr.st-live .badge.mr-tbl { display: inline-flex; align-items: center; gap: .35rem; border-color: rgba(158,206,106,.55); }
.mr.st-live .badge.mr-tbl::before { content: ""; flex: none; width: .45rem; height: .45rem; border-radius: 50%; background: var(--color-live); box-shadow: 0 0 .45rem rgba(158,206,106,.85); }
/* F10 phones: back button, eyebrow and title share one row; actions go under it */
.t-head-t { flex: 1 1 0; min-width: min(9rem, 100%); } .t-head-t .t-title { overflow-wrap: break-word; text-wrap: balance; }
/* wizard on phones: five equal step numbers with the step's name under them; footer in two rows, the main pair at the bottom */
.wiz-cap { display: none; }
@media (max-width: 40rem) {
  .wiz-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); } .wiz-step { justify-content: center; padding-inline: 0; } .wiz-step .wiz-l { display: none !important; }
  .wiz-cap { display: block; margin: .5rem 0 0; color: var(--text); font-size: var(--text-sm); font-weight: 700; }
  .wiz-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; } .wiz-foot > .row { display: contents; }
  .wiz-foot [data-wz="draft"] { order: 1; } .wiz-foot [data-wz="cancel"] { order: 2; } .wiz-foot [data-wz="back"] { order: 3; } .wiz-foot .btn-primary { order: 4; }
  .wiz-foot:not(:has([data-wz="back"])) .btn-primary { grid-column: 1 / -1; } .wiz-foot .btn { width: 100%; }
}
@media (max-width: 40rem) { .wiz-long { display: none; } }
.dlg .grid2 > *, .dlg .field { min-width: 0; }
.nt-inm .btn { display: inline-flex; align-items: center; gap: .4rem; }
/* special buttons in narrow cards (tablet portrait): no icons, so "Šamar" and "Break & Run" keep their full names */
@container app (min-width: 40.01rem) and (max-width: 80rem) { #rsapp .acts .act svg { display: none; } #rsapp .acts .act { padding-inline: .35rem; gap: 0; } } /* tablets: text only (the three side by side are too narrow for icon + name); phones keep stacked icon + label, desktop icon + label */

/* ---- review round 9 Oct ---- */
/* G1 settings images: logo centred in its card, buttons clear of the picture */
.adm-img.logo .dropzone { align-self: center; }
.adm-img .ai-acts { margin-top: var(--sp-2); }
/* G2 Markdown preview never scrolls sideways */
.md-prev { overflow-x: hidden; overflow-wrap: anywhere; }
/* G3 race to: A boxed group with full labels; B one row per stage */
.race-row { border: 1px solid var(--line); border-radius: .75rem; padding: .5rem .875rem .875rem; margin: 0; min-width: 0; }
.race-row > legend { padding: 0 .35rem; margin-inline-start: -.35rem; }
.race-row .range-field .field-label { letter-spacing: normal; text-transform: none; font-size: 1rem; font-weight: 600; color: var(--text); }
/* G4/G7 dialog footers: dismiss on the left, the rest on the right; the footer stays in view and is set apart from the form */
.dlg-actions { justify-content: flex-end; }
.dlg-actions > .dlg-dismiss { margin-inline-end: auto; }

.dlg-body:has(> .dlg-actions:last-child) { padding-bottom: 0; }
.dlg-body > .dlg-actions:last-child { position: sticky; bottom: 0; z-index: 3; margin: .25rem -1.375rem 0; padding: .875rem 1.375rem; background: var(--bg2); border-top: 1px solid var(--line); }
.dlg-foot { align-items: center; } @container app (max-width: 28rem) { .dlg-foot > .row { flex: 1 1 auto; } }
/* G5 label combobox */
.nt-cb { position: relative; }
.nt-cb-list { overflow-x: hidden; position: absolute; z-index: 5; inset-inline: 0; top: calc(100% + .35rem); margin: 0; padding: .35rem; list-style: none; max-height: 15rem; overflow-y: auto; background: var(--bg1); border: 1px solid var(--line2); border-radius: .75rem; box-shadow: 0 .75rem 2rem rgba(0,0,0,.5); }
.nt-cb-o { display: flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 .6rem; border-radius: .5rem; cursor: pointer; color: var(--text); font-weight: 600; }
.nt-cb-o.on { background: rgba(122,162,247,.16); }
@media (hover: hover) { .nt-cb-o:hover { background: rgba(122,162,247,.1); } .nt-cb-o.on:hover { background: rgba(122,162,247,.16); } }
.nt-cb-new b { color: #fff; } .nt-cb-plus { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px dashed var(--line2); font-weight: 800; }
.nt-cb-empty { padding: .6rem; color: var(--color-text-muted); font-size: var(--text-sm); }
.nt-new { display: grid; gap: .6rem; padding: .875rem; border: 1px solid var(--line2); border-radius: .75rem; background: rgba(0,0,0,.15); }
.nt-new-h { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.nt-new .nt-hues { margin: 0 -.5rem; } .nt-new-acts { display: flex; justify-content: flex-end; gap: .5rem; }
.nt-manage { border-top: 1px solid var(--line); padding-top: .5rem; margin-top: .25rem; }
.nt-manage summary { display: inline-flex; align-items: center; min-height: 2.75rem; cursor: pointer; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 700; }
.nt-manage summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: .25rem; }
.nt-manage ul { list-style: none; margin: .25rem 0 0; padding: 0; display: grid; gap: .25rem; }
.nt-manage li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; }
.nt-manage .m { color: var(--color-text-muted); font-size: var(--text-sm); }
.nt-sec .nt-labels { margin-bottom: .6rem; }
/* comment composer: the button belongs to the box it sends */
.nt-compose { display: grid; gap: .5rem; padding: .75rem; border: 1px solid var(--line2); border-radius: .875rem; background: rgba(0,0,0,.15); }
.nt-compose-bar { display: flex; justify-content: flex-end; }
.nt-cnt { display: inline-flex; align-items: center; gap: .2rem; color: var(--color-text-muted); font-size: .75rem; font-weight: 800; } .nt-cnt svg { width: .8rem; height: .8rem; }
/* G6 match dialog */
.ms-who { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; } .ms-who b { overflow-wrap: anywhere; }
.ms-pl { position: relative; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: .4rem; color: var(--color-text-muted); flex: none; }
.ms-pl::after { content: ""; position: absolute; inset: -.5rem; } .ms-pl svg { width: 1rem; height: 1rem; }
@media (hover: hover) { .ms-pl:hover { color: #fff; background: var(--bg3); } }
.ms-pl:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.msrow { gap: .5rem; } .msrow .ms-ctl { margin-inline-start: auto; }
.ms-wo { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: .4rem; } .ms-wo .note { margin: 0; } .ms-wo .row { flex-wrap: wrap; gap: .5rem; }

/* G8 compact match rows (Live now cards): status as an icon in the corner; the name is in its tooltip and on the table page */
.live-table:not(.t-live) .mr-st .mr-tbl, .live-table:not(.t-live) .mr-st .st-chip.need { font-size: 0; gap: 0; width: 1.6rem; height: 1.6rem; min-height: 0; padding: 0; justify-content: center; border-radius: 50%; }
.live-table:not(.t-live) .mr.st-live .badge.mr-tbl::before { width: .55rem; height: .55rem; }
.live-table:not(.t-live) .mr-st .st-chip.need svg { width: .85rem; height: .85rem; margin: 0; }
.live-table:not(.t-live) .mr-st .st-chip.need > span { display: none; }
/* G9 sign-in and tablet join sit in the middle of the screen */
.shell-head + .auth, #main > .auth:only-child { min-height: calc(var(--app-h, 100dvh) - 9rem); display: grid; align-content: center; margin-top: 0; padding-block: 1.5rem; } /* the form is the only thing in <main> */
.g-ic { width: 1.15rem; height: 1.15rem; flex: none; }
.auth [data-act="google"] { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; }
/* G11 tablet: the scoreboard sits in the middle of the screen */
.dev-live #rsapp { min-height: 100dvh; display: flex; flex-direction: column; }
.dev-live #gameScreen:not(.hidden) { flex: 1; display: flex; flex-direction: column; }
/* G12 calendar: one dot on the now-line, by the hours */
.cal-now.nd::before { display: none; }
/* G13 analytics */
.an-chart { container-type: inline-size; }
.an-cols { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: .35rem; align-items: end; height: 12rem; }
.an-col { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) 1.1rem; height: 100%; min-width: 0; text-align: center; }
.an-col b { font-size: .75rem; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.4; }
.an-cb { display: flex; align-items: flex-end; min-height: 0; } .an-cb i { display: block; width: 100%; border-radius: .25rem .25rem 0 0; background: var(--color-accent); opacity: .75; }
.an-col.cur .an-cb i { opacity: 1; }
.an-col small { font-size: .6875rem; color: var(--color-text-muted); white-space: nowrap; overflow: visible; justify-self: center; }
@container (max-width: 30rem) { .an-col b { font-size: .625rem; letter-spacing: -.02em; } }
.an-chart.dense .an-cols { gap: 2px; }
@container (max-width: 40rem) { .an-chart.dense .an-col b { visibility: hidden; } .an-col:nth-child(even) small { visibility: hidden; } .an-chart.dense .an-col small { visibility: visible; } }
.an-sum { margin: .75rem 0 0; }
.an-trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--sp-4); }
/* G14 wizard tables */
.wz-tmode { gap: .5rem 1.25rem; }
.wz-tpick { display: grid; gap: .5rem; margin-top: .25rem; padding: .75rem; border: 1px solid var(--line); border-radius: .75rem; }
.wz-tlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); gap: 0 .75rem; max-height: 13rem; overflow-y: auto; }
.wz-tlist .check[hidden], .wz-tpick[hidden] { display: none; }
.wz-tfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; } .wz-tfoot .note { margin: 0; }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: .35rem; } fieldset.field > legend { padding: 0; margin-bottom: .35rem; }

/* walkover: one grid for both players, so the No-show buttons and the score controls line up; names wrap */
.mscore { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: .75rem; row-gap: .5rem; }
.mscore .msrow { display: contents; }
.mscore .ms-who { min-width: 0; } .mscore .ms-who b { overflow-wrap: break-word; min-width: 0; }
.msrow .btn.ms-ns { width: auto; min-height: 2.75rem; padding: 0 .85rem; white-space: nowrap; justify-self: end; font-size: var(--text-sm); }
.mscore .ms-ctl { margin: 0; }
/* staff notes: the new-label box is one row where it fits */
.nt-new { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; padding: .375rem .375rem .375rem .875rem; }
.nt-new .nt-hues { margin: 0; } .nt-new-acts { margin-left: auto; } .nt-new-h .field-label { margin: 0; line-height: 1; }
/* bars: every row shares the list's columns, so bars start and end at the same place whatever the numbers */
@supports (grid-template-columns: subgrid) {
  .ins-lead { grid-template-columns: minmax(0, 1fr) minmax(4rem, 34%) auto auto; column-gap: .6rem; }
  .ins-lead:has(.ins-rank) { grid-template-columns: auto minmax(0, 1fr) minmax(4rem, 34%) auto auto; }
  .ins-lead li, .ins-lead li:not(:has(.ins-rank)) { grid-column: 1 / -1; grid-template-columns: subgrid; }
  @container app (max-width: 40rem) { .ins-lead { grid-template-columns: minmax(0, 1fr) minmax(3rem, 26%) auto auto; column-gap: .5rem; } .ins-lead:has(.ins-rank) { grid-template-columns: auto minmax(0, 1fr) minmax(3rem, 26%) auto auto; } .ins-lead li, .ins-lead li:not(:has(.ins-rank)) { grid-template-columns: subgrid; } }
}
.ins-lead li > b, .ins-lead li > small { text-align: end; }
/* past days and times: visible, not pickable */
.dp-day.off, .tp-opt.off { color: var(--color-text-muted); opacity: .4; cursor: not-allowed; background: none; }
@media (hover: hover) { .dp-day.off:hover, .tp-opt.off:hover { background: none; } }
@media (max-width: 30rem) { .mscore { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: .35rem; } .mscore .ms-who { grid-column: 1 / -1; } .mscore .ms-ns { grid-column: 1; justify-self: start; } .mscore .msrow > span:empty { display: none; } .mscore .ms-ctl { grid-column: 3; } .mscore .msrow + .msrow .ms-who { margin-top: .5rem; } }
/* table picker: one inset for the search text, the ticks and the count, so they line up */
.wz-tpick { padding: .5rem; gap: .25rem; }
.wz-tlist { padding: .25rem .375rem; gap: 0 .5rem; }
.wz-tlist .check { min-height: 2.75rem; padding: 0 .625rem; border-radius: .5rem; }
@media (hover: hover) { .wz-tlist .check:hover { background: rgba(122,162,247,.08); } }
.wz-tfoot { padding: .125rem 0 0 1rem; border-top: 1px solid var(--line); padding-top: .5rem; }

/* table view on a staff device: only the game, like a paired tablet */
html.table-mode .shell-head, html.table-mode .crumbs, html.table-mode .tabbar, html.table-mode #app .back-btn { display: none !important; }
#tblModeBtn.on { border-color: var(--color-accent); background: var(--color-accent-soft); color: #fff; }
html.table-mode #app a { pointer-events: none; }
html.table-mode .main { padding-bottom: 0; margin-top: 0; }

/* Status labels on match rows and in the bracket: slanted like the score tabs (skew -10deg, italic display caps). Dark tab with the status colour on its edge and text (option A, 9 Oct) */
.mr-st .badge, .bk-tag { --tgc: 120, 130, 170; --tgt: var(--dim); }
.mr.st-live .badge.mr-tbl, .mr-st .badge.live, .bk-tag[title], .bk-tag.live-link { --tgc: 158, 206, 106; --tgt: #c6e6a5; }
.mr-st .badge.st-chip.need { --tgc: 224, 175, 104; --tgt: #f1c98d; }
.mr-st .badge, .bk-tag, .mr-st .mr-stream { transform: skewX(-10deg); border-radius: .3rem; }
.mr-st .badge, .bk-tag { font-family: var(--display); font-style: italic; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1.15; padding: .2rem .5rem; box-shadow: 0 .2rem .5rem rgba(10,12,28,.45);
  background: var(--bg0); border: 1px solid rgba(var(--tgc), .7); color: var(--tgt); }
.live-table:not(.t-live) .mr-st .mr-tbl, .live-table:not(.t-live) .mr-st .st-chip.need { border-radius: .3rem; width: 1.9rem; height: 1.5rem; }

/* Phones: table labels on match rows (T, chosen): the live dot, then the table name cut two letters shorter than in the bracket.
   "Needs a table", W/O and bye keep their words. The link also carries "Live on <table>" as its name and tooltip. */
@container app (max-width: 40rem) {
  .mr-st .badge.mr-tbl, .mr-st .badge.live, .mr-st .badge.mr-tbl-at { display: inline-flex !important; align-items: center; gap: .35rem; max-width: none !important; overflow: visible !important; }
  .mr-st .badge.live::before, .mr.st-live .badge.mr-tbl::before { content: "" !important; display: block; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--color-live); box-shadow: 0 0 .45rem rgba(158,206,106,.85); }
  .mr-st .badge .lv-tb { display: inline-block; max-width: 9.5ch !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
}

/* No-show: press and hold (fills like the game's loss button) */
.ms-ns.hold::after { background: rgba(247,118,142,.35); }
.ms-ns.holding { color: #fff; border-color: var(--red); }
.ms-ns.held { color: #16161e; background: linear-gradient(180deg, var(--pink), var(--red)); border-color: #ffb3c1; }
.ms-ns { min-width: 6.25rem; } .ms-ns[data-hint] { color: var(--amber); border-color: var(--amber); }
/* italic capitals lean past their box; the room keeps the last letter from tripping the ellipsis */
.mr-st .badge .lv-tb, .bk-tag .lv-tb { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; padding-inline-end: .25em; }
@container app (min-width: 40.0625rem) { .mr-st { width: max-content; } .mr-st .badge .lv-tb { flex-shrink: 0; max-width: 20ch; } }

/* staff notes on sessions and tournaments (migration 0032) */
.nt-cnt { display: inline-flex; align-items: center; gap: .2rem; font-size: .75rem; font-weight: 800; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.nt-cnt svg { width: .8rem; height: .8rem; }
.lst td.n .nt-inl { margin-top: .3rem; align-items: center; }
.nt-btn { gap: .4rem; } .nt-btn svg, .nt-eye svg { width: .95rem; height: .95rem; flex: none; }
.nt-dot { width: .5rem; height: .5rem; border-radius: 50%; background: hsl(var(--h) 65% 62%); flex: none; }
.nt-eye { position: relative; display: inline-flex; align-items: center; gap: .3rem; margin-inline-start: .5rem; padding: .15rem .55rem; border: 1px solid var(--line2); border-radius: 999px; background: none; color: var(--dim); font: inherit; font-size: .75rem; font-weight: 700; letter-spacing: 0; text-transform: none; cursor: pointer; }
.nt-eye::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 2.75rem); height: 2.75rem; translate: -50% -50%; }
@media (hover: hover) { .nt-eye:hover { color: var(--text); border-color: var(--color-accent); } }
.nt-eye:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.nt-eye, .nt-eye span { white-space: nowrap; display: inline-flex; align-items: center; flex: none; min-width: 0; overflow: visible; }
.tbv-eye:has(.nt-eye) > span:last-of-type { min-width: 0; }
.btn.nt-btn { display: inline-flex; align-items: center; gap: .45rem; }
/* a table waiting for its first players: a hollow dot (no glow) in the same slanted tab */
.mr-wait .badge.mr-tbl.idle { display: inline-flex; align-items: center; gap: .35rem; color: var(--color-text-muted); }
.mr-wait .badge.mr-tbl.idle::before { content: "" !important; display: block; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: none; box-shadow: inset 0 0 0 1.5px currentColor; }
.mr.mr-wait { flex-direction: row; } .mr-wait-t { flex: 1 1 0; max-width: 100%; text-align: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-inline: 2.25rem; } /* clears the corner tab, stays centred; ends with … on 320 px */
@container app (max-width: 22rem) { .mr-wait-t { font-size: var(--text-sm); } }
@container (max-width: 34rem) { .mr.mr-wait:has(> .mr-st) { display: flex; flex-direction: row; align-items: center; height: auto; min-height: 3rem; } } /* the narrow two-row layout is for score rows only */

/* point games on the player page and in analytics (migration 0033) */
.pg-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--sp-4); }
.pg-card { display: grid; gap: .65rem; align-content: start; padding: .9rem 1rem 1rem; border: 1px solid var(--line); border-radius: .875rem; background: rgba(255,255,255,.02); min-width: 0; }
.pg-hi { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; }
.pg-big { display: inline-grid; place-items: center; min-width: 3.75rem; padding: .1rem .7rem; transform: skewX(-12deg); border: 1px solid var(--line2); border-radius: .5rem; background: linear-gradient(180deg, #24283b, #1a1b26); font-family: var(--display); font-style: italic; font-weight: 900; font-size: 2.25rem; line-height: 1.15; color: #fff; font-variant-numeric: tabular-nums; box-shadow: 0 .4rem 1rem rgba(0,0,0,.35); }
.pg-big-l { display: grid; gap: .1rem; font-weight: 800; color: var(--text); } .pg-big-l small { font-weight: 600; color: var(--color-text-muted); font-size: var(--text-sm); }
.pg-rec { color: var(--gold, #e0af68); border-color: rgba(224,175,104,.55); }
.pg-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1rem; margin: 0; }
.pg-dl div { display: grid; gap: .1rem; min-width: 0; } .pg-dl dt { font-size: var(--text-sm); color: var(--color-text-muted); } .pg-dl dd { margin: 0; font-family: var(--display); font-style: italic; font-weight: 800; font-size: 1.25rem; color: #fff; font-variant-numeric: tabular-nums; }
.pg-sub { margin: .35rem 0 0; font-size: .9375rem; font-weight: 800; color: #fff; } .pg-sub .hint { font-weight: 600; }
.pg-top { margin: 0; }

/* open registration: public event pages (migration 0034). Layouts a · b · c (html[data-v-rg]) */
.rg { margin-top: 1rem; }
.rg-head { display: flex; align-items: flex-start; gap: .85rem; min-width: 0; }
.rg-head > div { min-width: 0; }
.rg-head .live-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.rg-title { margin: .25rem 0 0; text-wrap: balance; overflow-wrap: break-word; }
.rg-when { margin: .35rem 0 0; color: var(--text); font-weight: 700; }
.rg-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: .75rem 1.25rem; margin: 0; }
.rg-facts div { display: grid; gap: .15rem; min-width: 0; } .rg-facts dt { font-size: var(--text-sm); color: var(--color-text-muted); } .rg-facts dd { margin: 0; font-weight: 800; color: #fff; overflow-wrap: break-word; }
.rg-meter-w { display: grid; gap: .45rem; }
.rg-meter-t { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; } .rg-meter-t b { font-family: var(--display); font-style: italic; font-weight: 900; font-size: 1.75rem; color: #fff; font-variant-numeric: tabular-nums; } .rg-meter-t span { color: var(--color-text-muted); font-weight: 700; }
.rg-meter { height: .5rem; border-radius: 999px; background: var(--bg0); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); } .rg-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-accent), #a9c1ff); }
.rg-closes { margin: 0; }
.rg-ctl { display: grid; gap: .6rem; } .rg-cta { justify-self: start; min-width: 12rem; justify-content: center; }
.rg-form { gap: .75rem; } .rg-acts { justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
.rg-you { display: flex; align-items: flex-start; gap: .6rem; flex-wrap: wrap; color: var(--text); } .rg-you b { color: #fff; } .rg-you:focus { outline: none; }
.rg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; counter-reset: rg; }
.rg-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .65rem; min-height: 2.75rem; padding: .25rem .25rem; border-bottom: 1px solid rgba(59,66,97,.45); }
.rg-list li:last-child { border-bottom: 0; } .rg-list .n { overflow-wrap: break-word; font-weight: 700; color: var(--text); } .rg-list .m { color: var(--color-text-muted); font-weight: 600; }
.rg-list li.me .n { color: #fff; } .rg-list.wait .ins-rank { border-style: dashed; }
.rg-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.rg-cols > .panel:only-child { grid-column: 1 / -1; }
@container app (max-width: 48rem) { .rg-cols { grid-template-columns: minmax(0, 1fr); } }
/* a · poster: everything about the event in one block, the sign-up inside it */
.rg-hero { display: grid; gap: 1.25rem; }
.rg-a .rg-title { font-size: clamp(2rem, 6cqi, 3.25rem); }
.rg-hero-reg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1.25rem 2rem; align-items: start; padding-top: 1.1rem; border-top: 1px solid var(--line); }
@container app (max-width: 48rem) { .rg-hero-reg { grid-template-columns: minmax(0, 1fr); } }
/* b · details on the left, a sign-up card that stays in view on the right (on phones it comes first) */
.rg-b-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem); gap: var(--sp-5); align-items: start; }
.rg-card { position: sticky; top: 1rem; display: grid; gap: 1rem; }
@container app (max-width: 52rem) { .rg-b-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); } .rg-b .rg-card { position: static; order: -1; } }
/* c · the event page with a sign-up strip; Register opens a dialog */
.rg-strip { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem 2rem; }
.rg-strip .rg-ctl { justify-items: end; } .rg-strip .rg-ctl .note { text-align: end; max-width: 22rem; }
@container app (max-width: 40rem) { .rg-strip { grid-template-columns: minmax(0, 1fr); } .rg-strip .rg-ctl { justify-items: stretch; } .rg-strip .rg-ctl .note { text-align: start; } .rg-strip .rg-cta { justify-self: stretch; } }
.rg-head .back { flex: none; display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; } .rg-head .back svg { width: 1.25rem; height: 1.25rem; }
.rg-c .rg-facts { margin-bottom: 1rem; }
/* venue page: open events */
.rg-open { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--sp-3); }
.rg-open-i { display: grid; gap: .25rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg1); color: var(--text); text-decoration: none; min-height: 2.75rem; }
.rg-open-i b { color: #fff; font-size: 1.0625rem; overflow-wrap: break-word; } .rg-open-i .m { color: var(--color-text-muted); font-size: var(--text-sm); }
.rg-open-go { display: inline-flex; align-items: center; gap: .35rem; margin-top: .25rem; color: var(--color-accent); font-weight: 800; } .rg-open-go svg { width: 1rem; height: 1rem; }
@media (hover: hover) { .rg-open-i:hover { border-color: var(--color-accent); } }
.rg-open-i:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.rg-staff { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem 1rem; padding-block: .75rem; }
@container app (max-width: 40rem) { .rg-staff { grid-template-columns: minmax(0, 1fr); justify-items: start; } }
.auth-why { margin: -.25rem 0 1rem; text-align: center; color: var(--color-text-muted); line-height: 1.5; text-wrap: pretty; }

/* free play (no venue): journeys a · b · c (html[data-v-qp]) */
.fp-main { display: grid; gap: var(--sp-4); align-content: start; }
.fp-card, .fp-wiz { max-width: 44rem; width: 100%; }
.rsl .fp-card { justify-self: start; }
.fp-card-t { margin: 0; font-family: var(--display); font-style: italic; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; color: #fff; font-size: 1.5rem; }
.fp-card-t + .note { margin: .25rem 0 0; }
.fp-f { display: grid; gap: .5rem; min-width: 0; }
.fp-fs { border: 0; margin: 0; padding: 0; } .fp-fs legend { padding: 0; margin-bottom: .5rem; }
.fp-games { display: grid; gap: .6rem; }
.fp-gg { display: grid; gap: .35rem; } .fp-gg > .m { font-size: var(--text-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); }
.fp-gs { display: flex; flex-wrap: wrap; gap: .4rem; }
.fp-gs .btn, .fp-main .seg .btn.sm, .fp-card .seg .btn.sm, .fp-set .seg .btn.sm { min-height: 2.75rem; }
.fp-gs .btn.on, .fp-tile.on { border-color: var(--color-accent); background: var(--color-accent-soft); color: #fff; }
.fp-row { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); align-items: end; }
.fp-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.fp-chip { --h: 225; display: inline-flex; align-items: center; gap: .35rem; min-height: 2.25rem; padding: .15rem .45rem .15rem .75rem; border-radius: 999px; border: 1px solid var(--line2); background: var(--bg2); color: var(--text); font-weight: 700; }
.fp-chip.a { border-color: hsl(220 60% 60% / .7); background: hsl(220 40% 22%); } .fp-chip.b { border-color: hsl(20 60% 60% / .7); background: hsl(20 35% 21%); }
.fp-chip small, .fp-r small { color: var(--color-text-muted); font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.fp-chip .nt-x { position: relative; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.fp-chip .nt-x::after { content: ""; position: absolute; inset: -.625rem; } .fp-chip .nt-x svg { width: .8rem; height: .8rem; }
@media (hover: hover) { .fp-chip .nt-x:hover { background: rgba(255,255,255,.12); } } .fp-chip .nt-x:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.fp-add-row { display: flex; gap: .5rem; } .fp-add-row .text-input { flex: 1 1 auto; min-width: 0; } .fp-add-row .btn { min-height: 2.75rem; }
.fp-recent { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .4rem; } .fp-recent > .m { font-size: var(--text-sm); color: var(--color-text-muted); margin-inline-end: .25rem; }
.fp-recent .btn.sm { min-height: 2.75rem; }
.fp-hint { margin: 0; }
.fp-go { display: grid; gap: .5rem; justify-items: start; }
.fp-start { min-width: 12rem; }
.fp-guest { margin: 0; }
.fp-err { margin: 0; }
.rsl-acts2 { margin-top: 0; }
.fp-resume { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; max-width: 44rem; } .fp-resume p { margin: 0; }
/* B */
.fp-steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem; border-bottom: 1px solid var(--line); }
.fp-steps button { display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; min-height: 2.75rem; padding: .35rem .6rem; border: 0; border-radius: .6rem; background: none; color: var(--dim); font: inherit; font-weight: 700; cursor: pointer; }
.fp-steps button:disabled { cursor: default; opacity: 1; }
.fp-sn { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1.5px solid currentColor; font-variant-numeric: tabular-nums; flex: none; }
.fp-steps .on button { color: #fff; }
.fp-steps .done button { color: var(--text); } .fp-steps .done .fp-sn { background: var(--color-accent); border-color: var(--color-accent); color: var(--bg0); }
.fp-steps button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.fp-body { display: grid; gap: var(--sp-4); }
.fp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); gap: .6rem; }
.fp-tile { display: grid; gap: .2rem; align-content: start; text-align: start; padding: .85rem 1rem; min-height: 6.5rem; border: 1px solid var(--line); border-radius: .875rem; background: rgba(255,255,255,.02); color: var(--color-text-muted); font: inherit; cursor: pointer; }
.fp-tile b { font-family: var(--display); font-style: italic; font-weight: 900; font-size: 1.25rem; text-transform: uppercase; color: #fff; }
.fp-tk { font-size: var(--text-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
@media (hover: hover) { .fp-tile:hover { border-color: var(--line2); } }
.fp-tile:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.fp-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.fp-r { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto; align-items: center; gap: .75rem; min-height: 2.75rem; padding: .15rem .25rem .15rem .75rem; border: 1px solid var(--line); border-radius: .75rem; }
.fp-r .n { font-weight: 700; color: var(--text); overflow-wrap: break-word; }
.fp-r-acts { display: flex; }
.fp-team { font-size: var(--text-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }
.fp-team.a { color: hsl(220 85% 75%); } .fp-team.b { color: hsl(20 85% 72%); }
@container app (max-width: 40rem) { .fp-r { grid-template-columns: minmax(0, 1fr) auto; } .fp-r .fp-team { grid-column: 1 / -1; margin-bottom: -.35rem; } }
.fp-sum { margin: 0; display: grid; gap: .5rem; } .fp-sum div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: .75rem; } .fp-sum dt { color: var(--color-text-muted); font-weight: 700; } .fp-sum dd { margin: 0; color: var(--text); font-weight: 700; }
.fp-foot { display: flex; justify-content: space-between; align-items: end; gap: .75rem; padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.fp-foot-r { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem 1rem; } .fp-foot-r .fp-guest { text-align: end; }
/* the game: strip above, the RackSync app below */
.fp-strip { display: flex; align-items: center; gap: .75rem 1rem; flex-wrap: wrap; padding: .6rem .9rem; }
.fp-strip p { margin: 0; flex: 1 1 18rem; color: var(--text); }
.linkish { padding: 0; border: 0; background: none; font: inherit; color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.linkish:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: .2rem; }
.fp-rs .getting-started, .fp-rs #importJsonBtn { display: none; }
/* profile */
.fp-prof { margin-top: var(--sp-5); }
.fp-prof-h { display: flex; align-items: center; justify-content: space-between; gap: .75rem; } .fp-prof-h .panel-title { margin: 0; }
.fp-prof > .note { margin: 0; }
.fp-kpis { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; }
.fp-kpis li { display: flex; align-items: baseline; gap: .4rem; } .fp-kpis b { font-family: var(--display); font-style: italic; font-weight: 900; font-size: 1.75rem; color: #fff; font-variant-numeric: tabular-nums; } .fp-kpis span { color: var(--color-text-muted); font-weight: 700; }
.fp-hist { list-style: none; margin: 0; padding: 0; display: grid; }
.fp-hist li { display: grid; grid-template-columns: 9.5rem 7rem minmax(0, 1fr) auto; gap: .75rem; align-items: baseline; padding: .55rem 0; border-top: 1px solid rgba(59,66,97,.5); }
.fp-hist .m { color: var(--color-text-muted); font-size: var(--text-sm); } .fp-hist b { color: #fff; } .fp-hist .n { color: var(--text); overflow-wrap: break-word; }
.fp-wl { font-family: var(--display); font-style: italic; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }
@container app (max-width: 40rem) { .fp-hist li { grid-template-columns: minmax(0, 1fr) auto; row-gap: .1rem; } .fp-hist .m { grid-column: 1 / -1; } .fp-hist .n { grid-column: 1; } .fp-hist .fp-wl { grid-row: 2; grid-column: 2; } }
.fp-home { border-color: var(--color-accent); }
/* layout C shows RackSync's own setup screen (hidden everywhere else in the platform) */
.fp-rs #rsapp #setupScreen:not(.hidden) { display: grid !important; }
.fp-rs #rsapp #setupScreen { max-width: 44rem; }
.fp-prof { max-width: 45.75rem; }
/* B on phones: game tiles two to a row with the name only (the type is the group); step tabs fit three across at 320 */
@container app (max-width: 40rem) {
  .fp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .fp-tile { min-height: 3.5rem; padding: .5rem .7rem; gap: .05rem; align-content: center; border-radius: .75rem; }
  .fp-tile b { font-size: 1.125rem; line-height: 1.15; }
  .fp-tile .fp-tk { font-size: .625rem; letter-spacing: .08em; color: var(--color-text-muted); }
  .fp-tile > span:last-child:not(.fp-tk) { display: none; }
  .fp-steps button { gap: .4rem; padding: .3rem .5rem; justify-content: center; font-size: .875rem; font-weight: 700; min-width: 0; }
  .fp-steps button > span:last-child { min-width: 0; white-space: nowrap; }
  .fp-sn { width: 1.35rem; height: 1.35rem; font-size: .75rem; }
}
@container app (max-width: 22.5rem) { .fp-steps button { padding-inline: .25rem; font-size: .8125rem; } .fp-sn { display: none; } .fp-steps .done button > span:last-child::before { content: "✓ "; color: var(--color-accent); } .fp-tile b { font-size: 1rem; white-space: nowrap; letter-spacing: -.01em; } } /* 320: words only; done steps get a tick */
/* Free play B: centred column; the step tabs drawn like the app's top navigation (no box, accent bar under the current one) */
#main.fp-main:has(.fp-wiz) { justify-items: center; } #main.fp-main:has(.fp-wiz) > * { width: 100%; max-width: 44rem; } /* the title, strip and card share one centred column */
.fp-steps button:disabled { color: var(--color-text-muted); }
.fp-steps .on .fp-sn { border-color: var(--color-accent); color: #fff; }

/* Free play B, step 2: format full width; three player setups (html[data-v-fpp] a · b · c); step 3 rules */
.fp-wiz .fp-fmt, .fp-wiz .fp-fmt .fp-f, .fp-set .fp-fmt, .fp-set .fp-fmt .fp-f { display: block; width: 100%; }
.fp-wiz .fp-fmt .seg, .fp-set .fp-fmt .seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.fp-wiz .fp-fmt .seg .btn, .fp-set .fp-fmt .seg .btn { justify-content: center; min-height: 2.75rem; font-size: 1rem; }
.fp-ph { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 2.75rem; }
.fp-ph .btn.sm { min-height: 2.75rem; }
.fp-match { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: .5rem; }
.fp-mt { grid-column: 1 / -1; font-size: var(--text-sm); font-weight: 800; color: var(--color-text-muted); }
.fp-vs { align-self: center; font-family: var(--display); font-style: italic; font-weight: 900; color: var(--dim); font-size: 1.125rem; }
.fp-side { display: grid; align-content: start; gap: .4rem; min-width: 0; padding: .6rem; border: 1px solid var(--line); border-radius: .75rem; background: rgba(255,255,255,.02); }
.fp-side.a { border-color: rgba(122,162,247,.45); } .fp-side.b { border-color: rgba(187,154,247,.45); }
.fp-side-h { font-size: var(--text-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); }
.fp-side.a .fp-side-h { color: #a9c1ff; } .fp-side.b .fp-side-h { color: #cdb7fb; }
.fp-side .fp-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.fp-side .fp-r { display: flex; align-items: center; gap: .25rem; min-height: 2.75rem; padding: 0 .1rem 0 .6rem; border-radius: .5rem; background: var(--bg2); }
.fp-side .fp-r .n { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 700; }
.fp-side .fp-r .fp-r-acts { display: flex; flex: none; }
.fp-side .fp-r.empty { background: none; border: 1px dashed var(--line2); } .fp-side .fp-r.empty .n { color: var(--color-text-muted); font-weight: 600; font-size: var(--text-sm); }
.fp-side.wait { margin-top: .25rem; } .fp-side.wait .note { margin: 0; }
.fp-earlier { display: grid; gap: .4rem; margin-top: .25rem; }
.fp-plist { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.fp-prow { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 2.75rem; padding: 0 .75rem; border: 1px solid var(--line); border-radius: .625rem; background: none; color: var(--text); font: inherit; font-weight: 700; text-align: start; cursor: pointer; }
.fp-prow .n { flex: 1; min-width: 0; overflow-wrap: anywhere; }
@media (hover: hover) { .fp-prow:hover { background: rgba(255,255,255,.05); border-color: var(--line2); } }
.fp-prow:focus-visible, .fp-slot:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* adding a player (shared/ui/player-combobox): the highlighted row, rows that can't be added, the inline form */
.fp-prow[aria-selected="true"] { border-color: var(--color-accent); background: var(--color-accent-soft); color: #fff; }
.fp-prow[aria-disabled="true"] { cursor: default; color: var(--color-text-muted); }
.pcombo-new { color: var(--color-text-muted); font-weight: 700; }
.pcombo-m { flex: none; font-size: var(--text-xs); font-weight: 700; color: var(--color-text-muted); }
.pcombo .fp-plist { margin-top: .5rem; max-height: min(22rem, 50dvh); overflow-y: auto; } .pcombo .fp-plist[hidden] { display: none; }
.pcombo-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 .5rem; align-items: start; }
.pcombo-add > .pcombo { display: contents; } .pcombo-add .text-input { grid-area: 1 / 1; } .pcombo-add > .btn { grid-area: 1 / 2; }
.pcombo-add .fp-plist, .pcombo-add .fe { grid-column: 1 / -1; } .pcombo-add .fp-plist { max-height: min(16rem, 40dvh); }
/* B: slots */
.fp-slots { display: grid; gap: .35rem; }
.fp-slot { display: flex; align-items: center; gap: .5rem; width: 100%; min-height: 3rem; padding: 0 .75rem; border: 1px dashed var(--line2); border-radius: .625rem; background: none; color: var(--color-text-muted); font: inherit; font-weight: 700; text-align: start; cursor: pointer; }
.fp-slot svg { width: 1rem; height: 1rem; flex: none; }
.fp-slot.on { border-style: solid; border-color: var(--line); background: var(--bg2); color: #fff; }
.fp-slot .n { flex: 1; min-width: 0; overflow-wrap: anywhere; } .fp-slot-c { flex: none; font-size: var(--text-xs); font-weight: 700; color: var(--color-text-muted); }
.fp-slot:disabled { cursor: default; opacity: .7; }
@media (hover: hover) { .fp-slot:not(:disabled):hover { border-color: var(--color-accent); color: var(--text); } }
/* C: checklist */
.fp-check li { display: flex; align-items: center; gap: .25rem; }
.fp-check .fp-prow { flex: 1; }
.fp-check .fp-prow.on { border-color: rgba(122,162,247,.5); background: rgba(122,162,247,.1); }
.fp-tick { display: grid; place-items: center; width: 1.375rem; height: 1.375rem; flex: none; border: 2px solid var(--line2); border-radius: .375rem; color: #fff; }
.fp-tick svg { width: .85rem; height: .85rem; }
.fp-prow.on .fp-tick { background: var(--color-accent); border-color: var(--color-accent); color: var(--bg0); }
.fp-ord { min-width: 1.25rem; font-family: var(--display); font-style: italic; font-weight: 900; color: var(--dim); font-variant-numeric: tabular-nums; }
.fp-check .fp-team { flex: none; font-size: var(--text-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.fp-check .fp-team.a { color: #a9c1ff; } .fp-check .fp-team.b { color: #cdb7fb; }
.fp-check .m { flex: none; font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600; }
.fp-up-sp { width: 2.75rem; flex: none; }
/* step 1: other game */
.fp-tiles .fp-other { grid-column: 1 / -1; }
.fp-cname { margin-top: .25rem; }
/* step 3: rules */
.fp-opts { display: grid; gap: .5rem; }
.fp-opt { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: .75rem; cursor: pointer; }
.fp-opt input { width: 1.25rem; height: 1.25rem; margin: .1rem 0 0; flex: none; accent-color: var(--color-accent); }
.fp-opt span { display: grid; gap: .15rem; min-width: 0; } .fp-opt b { color: #fff; } .fp-opt small { color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.4; }
.fp-opt:has(input:checked) { border-color: rgba(122,162,247,.55); background: rgba(122,162,247,.08); }
.fp-opt:has(input:disabled) { cursor: default; opacity: .75; }
.fp-opt:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.fp-opt-w { display: grid; } /* Reshuffle partners: the win count slider sits inside the card */
.fp-opt-w:has(.range-field) { border: 1px solid rgba(122,162,247,.55); border-radius: .75rem; background: rgba(122,162,247,.08); }
.fp-opt-w:has(.range-field) > .fp-opt { border: 0; background: none; }
.fp-opt-w > .range-field { padding: 0 .9rem .6rem; }
@container app (max-width: 40rem) {
  .fp-match { grid-template-columns: minmax(0, 1fr); } .fp-vs { justify-self: center; line-height: 1; }
}
.fp-side .fp-r .icon-btn { border: 0; background: none; color: var(--dim); } @media (hover: hover) { .fp-side .fp-r .icon-btn:not(:disabled):hover { color: #fff; background: rgba(255,255,255,.07); } } .fp-side .fp-r .icon-btn:disabled { opacity: .35; }

/* free play: drag and drop players (grip on each filled place and queue row) */
.fp-grip { flex: none; display: grid; place-items: center; width: 1.75rem; height: 2.75rem; margin-inline-start: -.35rem; padding: 0; border: 0; border-radius: .375rem; background: none; color: var(--color-text-muted); cursor: grab; touch-action: none; }
.fp-grip svg { width: 1.1rem; height: 1.1rem; }
@media (hover: hover) { .fp-grip:hover { color: #fff; background: rgba(255,255,255,.07); } }
button.fp-grip:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.fp-slot.on { padding-inline-start: .4rem; }
.fp-dragging { opacity: .35; }
.fp-drop { outline: 2px dashed var(--color-accent); outline-offset: 2px; }
.fp-ghost { position: fixed; left: 0; top: 0; z-index: 2000; margin: 0; pointer-events: none; list-style: none; box-shadow: 0 .75rem 2rem rgba(0,0,0,.5); opacity: .95; }
html.fp-dnd, html.fp-dnd * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }

/* installed app (Add to Home Screen): the status bar sits over the page, so the header clears it and the notch */
@media (display-mode: standalone) {
  .shell-head { padding-top: max(.375rem, env(safe-area-inset-top)); }
  .app { padding-inline: max(clamp(.75rem, 3vw, 1.75rem), env(safe-area-inset-left)) max(clamp(.75rem, 3vw, 1.75rem), env(safe-area-inset-right)); }
}

/* ---- 12 Oct: table headers one height (sortable or not) ---- */
.lst thead th { height: 2.75rem; padding-top: 0; padding-bottom: 0; vertical-align: middle; }
.lst thead .th-sort { padding-block: 0; min-height: 0; height: 100%; }
/* profile colour around the account avatar (a game's colour still wins, with its glow) */
.icon-btn.avatar.hued { border: 2px solid hsl(var(--h) 70% 60%); }
/* ---- tab hover: one underline and glow that slides to the tab under the mouse in 100 ms (header tabs on the header line, Quick play steps on their bottom edge) ---- */
@media (hover: hover) { .nav-it:not(.on):hover, .fp-steps li:not(.on) button:not(:disabled):hover { color: #fff; } .nav-it:not(.on):hover svg, .fp-steps li:not(.on) button:not(:disabled):hover .fp-sn { color: var(--color-accent); border-color: var(--color-accent); } }
.nav-it, .fp-steps button { transition: color .18s var(--ease-out); }
.tab-hov { position: absolute; left: 0; bottom: -1px; height: 2.25rem; width: 0; z-index: 1; pointer-events: none; opacity: 0; background: radial-gradient(55% 100% at 50% 100%, rgba(122,162,247,.34), rgba(122,162,247,.1) 45%, transparent 75%); border-bottom: 3px solid rgba(122,162,247,.4); border-radius: 0 0 3px 3px; transition: transform .1s var(--ease-out), width .1s var(--ease-out), opacity .15s var(--ease-out); }
.tab-hov.show { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tab-hov { transition: opacity .15s; } }
/* ---- landing (13 Oct): the app's own screens in device frames; tournament formats as tabs that advance on their own ---- */
.lp { position: relative; isolation: isolate; overflow-x: clip; margin-inline: calc(-1 * clamp(.75rem, 3vw, 1.75rem)); padding-inline: clamp(.75rem, 3vw, 1.75rem); display: grid; gap: clamp(5rem, 10vw, 8rem); padding-block: clamp(1.25rem, 4vw, 3rem) 3rem; }
.lp-hero { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.lp-h { margin: 0; font-family: var(--display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: clamp(2.4rem, 5.2vw, 4.25rem); line-height: 1.08; padding-bottom: .12em; letter-spacing: .01em; color: #fff; text-wrap: balance; }
.lp-sub { margin: .75rem 0 0; max-width: 36ch; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.5; color: var(--text); text-wrap: pretty; }
.lp-acts { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; } .lp-acts .btn { min-height: 3rem; padding-inline: 1.25rem; }
.lp-sec { position: relative; display: grid; gap: 1.75rem; }
.lp-st { display: grid; gap: .25rem; max-width: 48rem; }
.lp-h2 { margin: 0 0 .5rem; font-family: var(--display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: clamp(1.75rem, 3.4vw, 2.6rem); line-height: 1.1; padding-bottom: .08em; color: #fff; text-wrap: balance; }
.lp-p, .lp-card p, .lp-cell p { margin: 0; max-width: 52ch; color: var(--text); line-height: 1.55; text-wrap: pretty; }
.lp-card h3, .lp-cell h3 { margin: 0 0 .35rem; font-family: var(--display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 1.35rem; line-height: 1.1; color: #fff; }
.lp-foot { margin: 0; } .lp-foot i { font-style: italic; }
/* device frames */
.lp-dev { position: relative; background: #0c0d14; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 1.5rem 4rem rgba(5,6,14,.65), 0 0 0 1px rgba(122,162,247,.08); }
.lp-scr { position: relative; overflow: hidden; background: var(--bg1); }
.lp-scr img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.lp-tablet { padding: .5rem; border-radius: 1.3rem; } .lp-tablet .lp-scr { aspect-ratio: 1180 / 820; border-radius: .8rem; }
.lp-phone { padding: .4rem; border-radius: 1.75rem; } .lp-phone .lp-scr { aspect-ratio: 390 / 844; border-radius: 1.4rem; }
.lp-desk { padding: 0 .3rem .3rem; border-radius: .85rem; } .lp-desk .lp-scr { aspect-ratio: 1440 / 900; border-radius: 0 0 .6rem .6rem; }
.lp-bar { display: flex; gap: .3rem; align-items: center; height: 1.4rem; padding-inline: .5rem; } .lp-bar i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--line2); }
/* hero: laptop at the back, tablet and phone in front */
.lp-stage { position: relative; padding-bottom: 20%; }
.lp-stage .lp-back { width: 86%; margin-inline: auto 3%; } /* the clip of .lp reaches into the page gutter, so the frames and their shadows show whole */
.lp-stage .lp-mid { position: absolute; width: 56%; right: 1%; bottom: 0; }
.lp-stage .lp-front { position: absolute; width: 19%; left: 2%; bottom: -4%; }
/* tournament formats */
.lp-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.lp-tab { position: relative; display: grid; gap: .1rem; justify-items: start; text-align: start; min-height: 3.5rem; padding: .6rem .75rem .8rem; border: 0; background: none; color: var(--color-text-muted); font: inherit; cursor: pointer; transition: color .18s var(--ease-out); }
.lp-tab b { font-family: var(--display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 1.1rem; letter-spacing: .02em; } .lp-tab span { font-weight: 700; font-size: var(--text-sm); }
.lp-tab.on { color: #fff; } .lp-tab.on span { color: var(--text); }
@media (hover: hover) { .lp-tab:not(.on):hover { color: #fff; } }
.lp-tab:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; border-radius: .5rem; }
.lp-prog { position: absolute; left: .75rem; right: .75rem; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--color-accent); transform-origin: left; transform: scaleX(0); will-change: transform; }
.lp-tab.on .lp-prog { transform: scaleX(1); box-shadow: 0 0 .75rem rgba(122,162,247,.55); }
.lp-tour:not(.held) .lp-tab.on .lp-prog { animation: lpProg 6s linear both; } .lp-tour.paused .lp-tab.on .lp-prog { animation-play-state: paused; }
@keyframes lpProg { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.lp-panes { display: grid; width: min(100%, 62rem); justify-self: center; }
.lp-pane { grid-area: 1 / 1; } .lp-pane[hidden] { display: block; visibility: hidden; opacity: 0; }
.lp-pane .lp-scr { aspect-ratio: 16 / 10; background: rgb(23, 24, 33); } .lp-pane .lp-scr img { object-fit: contain; object-position: center; padding: 2% 3%; }
.lp-pane:last-child .lp-scr img { object-fit: cover; object-position: top; padding: 0; }
#lpp1 .lp-scr img { padding: 2.5% 3%; }
@media (prefers-reduced-motion: no-preference) { .lp-pane { transition: opacity .45s var(--ease-out), transform .55s var(--ease-out), visibility 0s .45s; } .lp-pane[hidden] { transform: translateX(1.5rem); } .lp-pane.on { transition: opacity .45s var(--ease-out), transform .55s var(--ease-out); } }
/* game formats */
.lp-play { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); }
.lp-card { display: grid; align-content: start; gap: .5rem; } .lp-card .lp-dev { margin-bottom: .75rem; }
/* insights and the rest: cells with their screen */
.lp-ins { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
.lp-cell { display: grid; grid-template-rows: auto 1fr; gap: 1.1rem; padding: 1.4rem 1.4rem 0; border: 1px solid var(--line); border-radius: 1.25rem; background: rgba(255,255,255,.02); overflow: hidden; }
.lp-cimg { align-self: end; overflow: hidden; border-radius: .8rem .8rem 0 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); height: 21rem; }
.lp-cimg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.lp-i1 { grid-column: 1 / 4; background: linear-gradient(160deg, rgba(122,162,247,.14), rgba(122,162,247,.02) 55%); border-color: rgba(122,162,247,.32); }
.lp-i2 { grid-column: 4 / 7; }
.lp-i3 { grid-column: 1 / 4; } .lp-i3 .lp-cimg { width: min(20rem, 100%); }
.lp-i4 { grid-column: 4 / 7; background: linear-gradient(200deg, rgba(158,206,106,.1), transparent 55%); } .lp-i4 .lp-cimg { width: min(15rem, 100%); justify-self: center; border-radius: 1.4rem 1.4rem 0 0; }
@media (prefers-reduced-motion: no-preference) {
  [data-lp-in] .lp-dev, .lp-cell[data-lp-in], .lp-card[data-lp-in], .lp-games[data-lp-in] .lp-gl li { opacity: 0; transform: translateY(1.5rem); transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); }
  [data-lp-in].in .lp-dev, .lp-cell[data-lp-in].in, .lp-card[data-lp-in].in { opacity: 1; transform: none; }
  .lp-card[data-lp-in] .lp-dev { opacity: 1; transform: none; }
  .lp-stage .lp-mid { transition-delay: .12s !important; } .lp-stage .lp-front { transition-delay: .26s !important; }
  .lp-play .lp-card:nth-child(2) { transition-delay: .08s; } .lp-play .lp-card:nth-child(3) { transition-delay: .16s; }
  .lp-ins .lp-cell:nth-child(2), .lp-ins .lp-cell:nth-child(4) { transition-delay: .08s; }
  .lp-cell.in .lp-cimg img { animation: lpPan 16s ease-in-out 1s infinite alternate; }
  .lp-gl li:nth-child(2) { transition-delay: .05s !important; } .lp-gl li:nth-child(3) { transition-delay: .1s !important; } .lp-gl li:nth-child(4) { transition-delay: .15s !important; } .lp-gl li:nth-child(5) { transition-delay: .2s !important; } .lp-gl li:nth-child(6) { transition-delay: .25s !important; }
}
@keyframes lpPan { from { transform: scale(1.02) translateY(0); } to { transform: scale(1.02) translateY(-4%); } }
.lp-tour .lp-pane .lp-dev { opacity: 1 !important; transform: none !important; }
/* six games as slanted chips, like the score tabs */
.lp-games { gap: .25rem; }
.lp-gl { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.lp-gl li { padding: .55rem 1.1rem; border-radius: .45rem; background: linear-gradient(180deg, #2b3456, #1e2440); box-shadow: inset 0 0 0 1px rgba(122,162,247,.4); transform: skewX(-10deg); font-family: var(--display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 1.15rem; color: #fff; }
.lp-games[data-lp-in].in .lp-gl li { opacity: 1; transform: skewX(-10deg); }
@container app (max-width: 60rem) { .lp-play { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .lp-play .lp-card:last-child { grid-column: 1 / -1; max-width: calc(50% - .5rem); } }
@container app (max-width: 52rem) {
  .lp-hero { grid-template-columns: minmax(0, 1fr); }
  .lp-ins { grid-template-columns: minmax(0, 1fr); } .lp-ins .lp-cell { grid-column: auto; }
  .lp-tab { padding-inline: .4rem; } .lp-tab b { font-size: .95rem; } .lp-tab span { display: none; }
  .lp-pane .lp-scr { aspect-ratio: 4 / 3; }
}
@container app (max-width: 40rem) {
  .lp-acts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .lp-acts .btn-primary { grid-column: 1 / -1; } .lp-acts .btn { justify-content: center; }
  .lp-play { grid-template-columns: minmax(0, 1fr); } .lp-play .lp-card:last-child { max-width: none; }
}
.lp-or { display: block; margin-top: .35em; font-size: .42em; letter-spacing: .03em; color: var(--color-accent); text-decoration: none; text-underline-offset: .2em; } .lp-or:hover { color: #fff; text-decoration: underline; }
/* landing: isometric screens in the background */
.lp-iso { position: absolute; z-index: -1; top: -6rem; right: -18rem; width: min(56rem, 80vw); pointer-events: none; opacity: .22; -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent); mask-image: radial-gradient(closest-side, #000 45%, transparent); }
.lp-iso img { display: block; width: 100%; border-radius: 1rem; outline: 2px solid rgba(122,162,247,.6); transform: rotateX(55deg) rotateZ(-38deg); }
.lp-iso.l { right: auto; left: -20rem; } .lp-iso.l img { transform: rotateX(55deg) rotateZ(38deg); }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .lp-iso { animation: lpPar linear both; animation-timeline: view(); } .lp-iso.l { animation-name: lpPar2; } } }
@keyframes lpPar { from { translate: 0 10rem; } to { translate: 0 -12rem; } } @keyframes lpPar2 { from { translate: 0 4rem; } to { translate: 0 -18rem; } }
/* landing: stream */
.lp-tv { overflow: hidden; border-radius: 1.25rem; aspect-ratio: 16 / 9; background: #000; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 2rem 5rem rgba(5,6,14,.7), 0 0 6rem rgba(122,162,247,.14); }
.lp-tv img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) { .lp-tv[data-lp-in] { opacity: 0; transform: perspective(90rem) rotateX(14deg) scale(.94); transform-origin: 50% 100%; transition: opacity .8s var(--ease-out), transform 1.1s var(--ease-out); } .lp-tv[data-lp-in].in { opacity: 1; transform: none; } }
/* landing: bento cells with screens bleeding off the edge */
.lp-bento { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.lp-bx { position: relative; display: grid; grid-template-rows: auto 1fr; gap: 1.5rem; padding: 1.75rem 0 0 1.75rem; border: 1px solid var(--line); border-radius: 1.5rem; background: rgba(255,255,255,.02); overflow: hidden; }
.lp-bx .lp-ct { padding-right: 1.75rem; } .lp-bx h3 { margin: 0 0 .35rem; font-family: var(--display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 1.5rem; line-height: 1.1; color: #fff; } .lp-bx p { margin: 0; max-width: 44ch; color: var(--text); line-height: 1.55; text-wrap: pretty; }
.lp-shot { align-self: end; width: 125%; height: 22rem; overflow: hidden; border-radius: .9rem 0 0 0; box-shadow: 0 0 0 1px rgba(255,255,255,.09), 0 1rem 3rem rgba(5,6,14,.6); }
.lp-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.lp-g1 { grid-column: 1 / 8; background: linear-gradient(160deg, rgba(122,162,247,.16), rgba(122,162,247,.02) 60%); border-color: rgba(122,162,247,.32); } .lp-g1 .lp-shot { height: 27rem; width: 110%; }
.lp-g1 .lp-gph { position: absolute; right: 1.5rem; bottom: -5rem; width: 9.5rem; }
.lp-g2 { grid-column: 8 / 13; } .lp-g3 { grid-column: 1 / 6; background: linear-gradient(200deg, rgba(158,206,106,.11), transparent 60%); } .lp-g4 { grid-column: 6 / 13; }
.lp-g2 .lp-shot, .lp-g3 .lp-shot { width: 150%; }
.lp-b1 { grid-column: 1 / 9; } .lp-b1 .lp-shot { height: 28rem; width: 112%; }
.lp-b2 { grid-column: 9 / 13; background: linear-gradient(200deg, rgba(122,162,247,.14), transparent 60%); border-color: rgba(122,162,247,.32); padding-left: 0; } .lp-b2 .lp-ct { padding-left: 1.75rem; }
.lp-b2 .lp-bph { align-self: end; justify-self: center; width: min(15rem, 80%); margin-bottom: -9rem; }
@media (prefers-reduced-motion: no-preference) { .lp-bx[data-lp-in] { opacity: 0; transform: translateY(1.5rem); transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); } .lp-bx[data-lp-in].in { opacity: 1; transform: none; } .lp-bento .lp-bx:nth-child(even) { transition-delay: .08s; }
  .lp-bx.in .lp-shot img { animation: lpPan 18s ease-in-out 1s infinite alternate; } .lp-bx .lp-dev { opacity: 1 !important; transform: none !important; } }
@container app (max-width: 52rem) { .lp-bento { grid-template-columns: minmax(0, 1fr); } .lp-bento .lp-bx { grid-column: auto; } .lp-shot, .lp-g1 .lp-shot, .lp-b1 .lp-shot { height: 18rem; width: 140%; } .lp-g1 .lp-gph { width: 7rem; bottom: -4rem; } .lp-b2 .lp-bph { margin-bottom: -12rem; } .lp-iso { opacity: .1; width: 34rem; right: -16rem; } .lp-iso.l { left: -16rem; } }

/* 13 Oct: settings images. Each card is head / stage / actions: the logo sits in the middle of the space left, and both cards' Replace and Remove share one line at the bottom */
.adm-imgs > .field.adm-img { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; align-content: stretch; }
.adm-img .ai-stage { align-self: stretch; } .adm-img .ai-acts { align-self: end; }

/* ---- profile redesign (13 Oct): html[data-v-pf] a (card + two columns) · b (tabs) · c (summary + edit dialog) ---- */
.pf { display: grid; gap: var(--sp-5); min-width: 0; }
.pf .fp-prof { margin-top: 0; max-width: none; }
.pf-hero { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: clamp(1rem, 3vw, 1.75rem); padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: 1rem; overflow: hidden;
  background: radial-gradient(90% 160% at 0% 0%, hsl(var(--h) 65% 55% / .16), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); }
.pf-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 2px; background: linear-gradient(90deg, hsl(var(--h) 70% 60% / .8), transparent 70%); }
.prof-photo.lg { width: clamp(5rem, 12vw, 7rem); height: clamp(5rem, 12vw, 7rem); flex: none; }
.prof-photo.lg .ini { font-size: clamp(2.25rem, 5vw, 3rem); }
.pf-id { flex: 1 1 14rem; min-width: 0; display: grid; gap: .35rem; }
.pf-name { margin: 0; font-family: var(--display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.05; padding-bottom: .06em; color: #fff; overflow-wrap: anywhere; }
.pf-sub { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.pf-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: .4rem; }
.pf-in { color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 600; } .pf-in b { color: var(--text); }
.pf-tag { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.25rem; padding: 0 .85rem; border-radius: .6rem; border: 1px solid hsl(var(--h) 60% 58% / .6); background: hsl(var(--h) 45% 28% / .35); color: #fff; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.pf-tag i { width: .55rem; height: .55rem; border-radius: 50%; background: hsl(var(--h) 70% 62%); }
.pf-hero-acts { display: flex; flex-wrap: wrap; gap: .5rem; align-self: center; }
.pf-btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.pf-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
@container app (min-width: 60rem) { .pf-cols { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } .pf-b .pf-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pf-side { display: grid; gap: var(--sp-5); min-width: 0; }
.pf-form { gap: 0; }
.pf-sec { display: grid; gap: var(--sp-3); min-width: 0; }
.pf-sec + .pf-sec { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.pf-sec > .panel-title { margin: 0; }
.pf-look { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-4); } .pf-look .prof-photo { width: 4.5rem; height: 4.5rem; } .pf-look .prof-photo .ini { font-size: 1.9rem; }
.pf-look-b { display: grid; gap: .4rem; min-width: 0; } .pf-look-b .note { margin: 0; }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--sp-3) var(--sp-4); align-items: start; }
.pf-grid .field { margin: 0; min-width: 0; }
.pf-hint { display: block; margin-top: .35rem; color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.4; }
.pf-checks { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.pf-sec > .note { margin: 0; }
.pf-foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .75rem; margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line); } .pf-foot.start { justify-content: flex-start; margin-top: 0; }
/* venues */
.pf-vlist { list-style: none; margin: 0; padding: 0; display: grid; }
.pf-vrow { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .4rem .75rem; padding: .75rem 0; border-top: 1px solid rgba(59,66,97,.5); }
.pf-vrow:first-child { border-top: 0; padding-top: 0; }
.pf-vlogo { width: 2.5rem; height: 2.5rem; border-radius: .6rem; display: grid; place-items: center; overflow: hidden; background: var(--bg3); border: 1px solid var(--line2); font-family: var(--display); font-style: italic; font-weight: 900; color: #fff; font-size: .95rem; }
.pf-vlogo img { width: 100%; height: 100%; object-fit: cover; }
.pf-vmain { display: grid; gap: .1rem; min-width: 0; } .pf-vmain a { color: #fff; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; } .pf-vmain a:hover { color: var(--color-accent); }
.pf-vmain small { color: var(--color-text-muted); font-size: var(--text-sm); } .pf-vmain small b { color: var(--text); }
.pf-vacts { grid-column: 2; display: flex; flex-wrap: wrap; gap: .5rem; } .pf-vacts:empty { display: none; }
.pf-ven > .note { margin: 0; }
/* key-value lists (account, C details) */
.pf-list { margin: 0; display: grid; }
.pf-list > div { display: grid; grid-template-columns: minmax(7.5rem, 11rem) minmax(0, 1fr) auto; align-items: center; gap: .25rem 1rem; min-height: 3.25rem; padding: .5rem 0; border-top: 1px solid rgba(59,66,97,.5); }
.pf-list > div:first-child { border-top: 0; }
.pf-list dt { color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.pf-list dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--text); }
@container app (max-width: 30rem) { .pf-list > div { grid-template-columns: minmax(0, 1fr) auto; } .pf-list dt { grid-column: 1 / -1; } }
.pf-sw { display: inline-block; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: hsl(var(--h) 70% 55%); box-shadow: 0 0 .6rem hsl(var(--h) 70% 55% / .5); vertical-align: middle; }
/* B tabs: same look as the app's tabs (white label and accent underline when on; the shared hover glow) */
.pf-tabs { position: relative; display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid var(--line); }
.pf-tabs > button { position: relative; flex: none; min-height: 2.75rem; padding: 0 1rem; border: 0; background: none; color: var(--color-text-muted); font: inherit; font-weight: 700; cursor: pointer; transition: color .18s var(--ease-out); }
.pf-tabs > button[aria-selected="true"] { color: #fff; }
.pf-tabs > button[aria-selected="true"]::after { content: ""; position: absolute; left: .5rem; right: .5rem; bottom: -1px; height: 2px; border-radius: 2px; background: var(--color-accent); box-shadow: 0 0 .6rem rgba(122,162,247,.6); }
@media (hover: hover) { .pf-tabs > button:not([aria-selected="true"]):hover { color: #fff; } }
.pf-tabs > button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; border-radius: .5rem; }
.pf-tabs > .tab-hov { bottom: -1px; height: 2rem; }
.pf-list > div:first-child { padding-top: 0; min-height: 2.75rem; }
.pf-b .pf-form { max-width: 48rem; }
.pf-b .pf-acc { max-width: 40rem; }
/* C dialog */
.pf-dlg .dlg-body { width: min(40rem, 100%); }
.pf-ed { justify-self: end; }
.pf-btns > label.btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.pf-hero-acts .pf-btns { justify-content: flex-end; }
.pf-dlg .pf-sec + .pf-sec { margin-top: 0; } .pf-dlg .dlg-body > h3 { margin: 0; }
/* profile hero = a player card: the game's team-card recipe (colour gradient, diagonal stripes, coloured outline) in the player's colour; the colour glides when you pick another */
@property --pfh { syntax: "<number>"; inherits: true; initial-value: 225; }
.pf-hero { isolation: isolate; border: 2px solid hsl(var(--pfh) 60% 58% / .6);
  background: linear-gradient(115deg, hsl(var(--pfh) 50% 32% / .6) 0%, hsl(var(--pfh) 45% 24% / .35) 55%, hsl(var(--pfh) 40% 18% / .15) 100%);
  box-shadow: 0 0 2rem hsl(var(--pfh) 70% 50% / .12), inset 0 0 0 1px rgba(0,0,0,.25);
  transition: --pfh .6s ease; }
.pf-hero::after { display: none; }
.pf-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, hsl(var(--pfh) 75% 78%), hsl(var(--pfh) 75% 78% / .3) 70%); opacity: .14;
  -webkit-mask-image: repeating-linear-gradient(135deg, #000 0 2px, transparent 2px 11px); mask-image: repeating-linear-gradient(135deg, #000 0 2px, transparent 2px 11px); }
.pf-hero .prof-photo { border-color: hsl(var(--pfh) 70% 60%); box-shadow: 0 0 1.25rem hsl(var(--pfh) 70% 55% / .5); background: rgba(0,0,0,.35); }
.pf-hero .pf-tag { border-color: hsl(var(--pfh) 60% 58% / .7); background: hsl(var(--pfh) 45% 28% / .55); }
.pf-hero .pf-tag i { background: hsl(var(--pfh) 70% 62%); box-shadow: 0 0 .5rem hsl(var(--pfh) 70% 62% / .8); }
.pf-hero .pf-name { text-shadow: 0 0 1.5rem hsl(var(--pfh) 70% 60% / .35); }
@media (prefers-reduced-motion: reduce) { .pf-hero { transition: none; } }
/* Quick play panel: title, note, history; Start a game in the footer like the form's Save */
.fp-prof .panel-title { margin: 0; }
.fp-none { margin: 0; color: var(--text); font-weight: 600; }
.fp-prof-f { display: flex; justify-content: flex-end; padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.pf-sec > .field { margin: 0; padding-bottom: 0; min-height: 0; }
.vf .pf-sec > .field::after { display: none; }
/* email notifications: one switch, then a row per message with its lead times as chips */
.pf-nt-all > span { display: grid; gap: .1rem; } .pf-nt-all .pf-hint { margin: 0; }
.pf-nt-rows { display: grid; border: 1px solid var(--line); border-radius: .875rem; background: rgba(0,0,0,.14); }
.pf-nt-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; padding: .85rem 1rem; border-top: 1px solid rgba(59,66,97,.5); }
.pf-nt-row:first-child { border-top: 0; }
.pf-nt-t { display: grid; gap: .1rem; min-width: 0; } .pf-nt-t b { color: #fff; font-weight: 700; } .pf-nt-t small { color: var(--color-text-muted); font-size: var(--text-sm); }
.pf-leads { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding-left: 2.1rem; }
.pf-leads-l { color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 600; margin-right: .2rem; }
.pf-lead { position: relative; display: inline-flex; cursor: pointer; }
.pf-lead input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: inherit; }
.pf-lead span { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 .8rem; border-radius: .6rem; border: 1px solid var(--line2); background: var(--bg2); color: var(--text); font-size: var(--text-sm); font-weight: 700; transition: background-color .15s, border-color .15s, color .15s; }
@media (pointer: coarse) { .pf-lead span { min-height: 2.75rem; } }
.pf-lead input:checked + span { border-color: var(--color-accent); background: var(--color-accent-soft); color: #fff; }
.pf-lead input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (hover: hover) { .pf-lead:hover input:not(:disabled):not(:checked) + span { border-color: var(--color-accent); color: #fff; } }
.pf-nt-row.off .pf-leads { opacity: .45; } .pf-lead input:disabled { cursor: not-allowed; }
.pf-nt.off .pf-nt-rows { opacity: .5; }
@container app (min-width: 44rem) { .pf-dlg .pf-nt-row, .pf-b .pf-nt-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .pf-dlg .pf-leads, .pf-b .pf-leads { padding-left: 0; justify-content: flex-end; } }
.pf-leads-sep { width: 1px; align-self: stretch; margin: .3rem .3rem; background: var(--line2); }

/* ============ Polish 13 Oct: slider settings (RangeField) ============ */
.range-field { display: grid; gap: .25rem; }
.range-top { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.range-top .field-label { margin: 0; }
.range-count { color: var(--color-text-muted); font-weight: 700; white-space: nowrap; }
.range-count b { font-family: var(--display); font-stretch: condensed; font-style: italic; font-weight: 900; font-size: 1.75rem; color: var(--text); font-variant-numeric: tabular-nums; margin-inline: .15rem; }
.range-input { --p: 0%; -webkit-appearance: none; appearance: none; width: 100%; height: 2.75rem; margin: 0; background: none; cursor: pointer; }
.range-input:disabled { cursor: not-allowed; opacity: .5; }
.range-input::-webkit-slider-runnable-track { height: .5rem; border-radius: 999px; background: linear-gradient(90deg, var(--color-accent) 0 var(--p), var(--bg3) var(--p) 100%); border: 1px solid var(--line); }
.range-input::-moz-range-track { height: .5rem; border-radius: 999px; background: var(--bg3); border: 1px solid var(--line); }
.range-input::-moz-range-progress { height: .5rem; border-radius: 999px; background: var(--color-accent); }
.range-input::-webkit-slider-thumb { -webkit-appearance: none; width: 1.5rem; height: 1.5rem; margin-top: calc(-.5rem - 1px); border-radius: 50%; background: var(--text); border: 3px solid var(--color-accent); box-shadow: 0 .15rem .5rem rgba(0,0,0,.45); }
.range-input::-moz-range-thumb { width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--text); border: 3px solid var(--color-accent); box-shadow: 0 .15rem .5rem rgba(0,0,0,.45); }
.range-input:focus-visible { outline: none; }
.range-input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.range-input:focus-visible::-moz-range-thumb { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* ============ Polish 13 Oct: Quick play header, banner and settings ============ */
.shell-head .venue-back { display: inline-flex; align-items: center; gap: .5rem; flex: 0 1 auto; min-width: 0; max-width: 18rem; min-height: 2.75rem; white-space: nowrap; }
.shell-head .venue-back svg { width: 1.15rem; height: 1.15rem; flex: none; }
.shell-head .venue-back .vb-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@container app (max-width: 40rem) { .shell-head .venue-back { max-width: 11rem; } .shell-head .venue-back .vb-pre { display: none; } }
.fp-fin { display: grid; gap: .5rem; }
.fp-fin .btn { display: grid; justify-items: start; gap: .15rem; width: 100%; min-width: 0; white-space: normal; min-height: 3.5rem; padding: .6rem 1rem; text-align: start; }
.fp-fin .btn small { font-weight: 500; font-size: var(--text-sm); opacity: .8; }

/* ============ Polish 13 Oct: empty states (EmptyState) ============ */
.empty-card { display: grid; justify-items: start; gap: var(--sp-2); padding: var(--sp-5) var(--sp-4); border: 1px dashed var(--line2); border-radius: .875rem; background: var(--bg1); max-width: 40rem; }
.empty-card .empty-title { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--text); letter-spacing: normal; text-transform: none; }
.empty-card p { margin: 0; color: var(--color-text-muted); text-wrap: pretty; }
.empty-card .btn { margin-top: var(--sp-2); }

/* ============ Owner feedback 14 Oct: booking over bookings, opening hours note ============ */
.callout.warn { max-width: none; flex: none; background: rgba(224,175,104,.1); border-color: rgba(224,175,104,.5); }
.callout.warn svg { color: var(--color-warning); }
.callout.warn b { color: #fff; }
.callout .adm-list { margin: 0; }
.dlg-body .callout .adm-list li { padding-block: .35rem; }
.dlg-body p.fnote { margin: .25rem 0 0; color: var(--color-warning); font-size: var(--text-xs); font-weight: 700; line-height: 1rem; }

/* ============ 14 Oct: Help, Roles and permissions (one table) ============ */
/* The paragraph keeps the reading width; the table takes the whole column. */
.help-txt:has(> .lst-panel) { max-width: none; } .help-txt:has(> .lst-panel) > p { max-width: 42rem; }
.lst.perm th[scope="row"] { text-transform: none; letter-spacing: 0; font-size: var(--text-sm); color: var(--text); font-weight: 600; white-space: normal; min-width: 13rem; border-bottom: 1px solid rgba(59,66,97,.45); padding: .5rem 1rem; }
.lst.perm .perm-area th { color: var(--color-accent); padding-top: 1rem; }
.lst.perm td { white-space: nowrap; font-size: var(--text-sm); }
.lst.perm td.perm-y { color: var(--color-success); font-weight: 700; }
.lst.perm td.perm-n { color: var(--color-text-muted); }
.lst.perm td.perm-p { color: #fff; font-weight: 700; }
.lst.perm tbody tr:last-child td, .lst.perm tbody tr:last-child th { border-bottom: 1px solid rgba(59,66,97,.45); }
.lst.perm tbody:last-child tr:last-child td, .lst.perm tbody:last-child tr:last-child th { border-bottom: 0; }
/* Phones: .lst stacks its rows into cards below 40rem; this table keeps its columns and scrolls sideways. */
@container app (max-width: 40rem) {
  table.lst.perm { display: table; }
  .lst.perm thead { display: table-header-group; }
  .lst.perm tbody { display: table-row-group; }
  .lst.perm thead tr, .lst.perm tbody tr { display: table-row; padding: 0; }
  .lst.perm thead th { display: table-cell; padding: .75rem 1rem .5rem; border-bottom: 1px solid var(--line); }
  .lst.perm td, .lst.perm tbody th { display: table-cell; padding: .5rem 1rem; border-bottom: 1px solid rgba(59,66,97,.45); }
  .lst.perm th[scope="row"] { min-width: 10rem; }
}

/* ============ Owner feedback 14 Oct: RackSync home at the top of the venue switcher ============ */
.vsel .xsel-list { min-width: 15rem; }
.xsel-opt.vsel-home { display: flex; gap: .6rem; align-items: center; border-bottom: 1px solid var(--line); }
.xsel-opt.vsel-home svg { width: 1.1rem; height: 1.1rem; flex: none; }
.xsel-opt.vsel-home small { display: block; color: var(--dim); font-size: var(--text-xs); font-weight: 600; }

/* ============ Polish 14 Oct: public calendar (settings, Free tables card, visitors' calendar) ============ */
/* Settings: what the public calendar shows, under "The calendar"; greyed out while the calendar is off */
.pub-sub { padding-inline-start: 2rem; }
.pub-sub .check:has(input:disabled) { opacity: .45; cursor: not-allowed; }
/* Visitors' calendar: a tournament is a link to its page; other bookings do not open */
a.cal-bk.cal-bk-link { color: inherit; text-decoration: none; display: block; }
a.cal-bk.cal-bk-link:hover b { text-decoration: underline; }
a.cal-bk.cal-bk-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; z-index: 2; }
button.cal-bk.cal-bk-ro:disabled { cursor: default; opacity: 1; }
/* Free tables on the public venue page: one bar per table across the opening hours */
.avail-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.avail-head .panel-title { margin: 0; }
.avail-head .btn { display: inline-flex; align-items: center; gap: .35rem; }
.avail-head .btn svg { width: 1rem; height: 1rem; }
.avail { display: grid; gap: .75rem; }
.avail-sum { margin: 0; color: var(--dim); font-size: var(--text-sm); }
.avail-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.avail-row { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: .75rem; align-items: center; }
.avail-n { font-weight: 700; color: #fff; font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avail-bar { position: relative; height: 2.25rem; border-radius: .45rem; background: rgba(158,206,106,.16); border: 1px solid rgba(158,206,106,.4); overflow: hidden; }
.avail-bar.plain { background: var(--bg2); border-color: var(--line); } /* the venue hides its hours: no free times to show */
.avail-seg { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 .4rem; font-size: var(--text-xs); font-weight: 700; overflow: hidden; white-space: nowrap; border-inline: 1px solid var(--bg0); }
.avail-seg span { overflow: hidden; text-overflow: ellipsis; }
.avail-seg.bk { background: hsl(228 18% 25%); color: var(--dim); }
.avail-seg.tour { background: hsl(36 42% 23%); color: #fff; box-shadow: inset 3px 0 0 hsl(36 80% 60%); text-decoration: none; }
a.avail-seg.tour:hover span { text-decoration: underline; }
a.avail-seg.tour:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.avail-seg.closed { background: repeating-linear-gradient(135deg, #252b45 0 6px, #1e2238 6px 12px); color: var(--dim); }
.avail-scale { display: flex; justify-content: space-between; margin-inline-start: 6.75rem; color: var(--dim); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.avail .cal-key { margin: 0; }
.ck.free { background: rgba(158,206,106,.3); border: 1px solid rgba(158,206,106,.6); }
@container app (max-width: 30rem) {
  .avail-row { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  .avail-scale { margin-inline-start: 0; }
  .avail-scale span:nth-child(even) { visibility: hidden; }
}
/* Visitors' tab bar: the public venue page's <main> is not .main, so it gets the room under the bar here */
@container app (max-width: 66rem) { .shell-head:has(> .tabbar) ~ #main:not(.main) { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); } }
/* settings: the public calendar's sub-switches sit under their parent */
.pub-sub { padding-left: 2.1rem; }


/* ===== v3 bands (game screen, build spec §2–3; repo: src/widgets/scoreboard team.tsx + match.tsx, kit.css) =====
   One <section class="band band-l|band-r zone" style="--h1;--h2"> per team: .band-body (hatch, skewed layer with plate + strip,
   spacer, names) is rendered by rs.js bandHTML(); .band-keys (specials + hold-to-lose) is static markup.
   Geometry is by construction: the layer bleeds 12/40/20 px and is skewed −8°; the plate is its first 270 px, the strip starts at 270 px.
   Breakpoints (container app): desktop ≥ 64rem · tablet 40–64rem (keys under the names) · phone ≤ 40rem. */
:root { --band-font: "Barlow Condensed", var(--display); --band-mono: "JetBrains Mono", ui-monospace, Menlo, monospace; }
#rsapp #gameScreen .match, .rs-live #rsapp .match { container: match / inline-size; grid-template-columns: minmax(0, 1fr); grid-template-areas: "za" "vs" "zb" "msg"; row-gap: .625rem; padding-top: 0; }
#rsapp .match > .mid { grid-area: vs; flex-direction: row; justify-content: center; align-items: center; gap: .75rem; min-height: 1.5rem; position: static; }
#rsapp .match .vs { display: none; }
#rsapp .match .pre-btns { display: flex; gap: .75rem; position: static; }
#rsapp .mid .dice-btn, #rsapp .mid .lag-btn { position: static; transform: none; }
#rsapp .match .dice-btn.gone, #rsapp .match .lag-btn.gone { display: none; }
@property --h2 { syntax: "<number>"; inherits: true; initial-value: 250; }
#rsapp .band {
  --h1: 250; --h2: 250; --hue: oklch(.78 .13 var(--h1)); --hue2: oklch(.8 .12 var(--h2));
  position: relative; isolation: isolate; container-type: normal; overflow: hidden;
  display: grid; grid-template-columns: 230px minmax(0, 1fr) 400px; grid-template-areas: "sp nm ky"; gap: 24px; height: 214px; min-height: 0;
  padding: 0; border: 0; border-radius: 8px; background: #181b22; color: #eef1f6;
  transition: --h1 .7s ease, --h2 .7s ease, box-shadow .2s;
}
#rsapp .band.band-r { grid-template-columns: 400px minmax(0, 1fr) 230px; grid-template-areas: "ky nm sp"; }
#rsapp .band.drop-ok { box-shadow: inset 0 0 0 2px var(--cyan); background: #181b22; }
#rsapp .band.drop-hot { box-shadow: inset 0 0 0 2px var(--blue); background: #181b22; }
.band-body { display: contents; }
.band-spacer { grid-area: sp; }
/* hatch: one tile, drifted by exactly one period (hatch-drift, slice 2); masked to the plate side */
.band-hatch { position: absolute; inset: 0; z-index: 0; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, #000 15%, transparent 65%); mask-image: linear-gradient(90deg, #000 15%, transparent 65%); }
.band-r .band-hatch { -webkit-mask-image: linear-gradient(270deg, #000 15%, transparent 65%); mask-image: linear-gradient(270deg, #000 15%, transparent 65%); }
.band-hatch i { position: absolute; top: 0; bottom: 0; left: -16px; right: -16px; background: repeating-linear-gradient(135deg, oklch(.78 .13 var(--h1) / .18) 0 2px, transparent 2px 11px) 0 0 / 15.56px 15.56px; }
/* the skewed layer: plate + strip, nothing else is skewed */
.band-layer { position: absolute; top: -12px; right: -20px; bottom: -12px; left: -40px; z-index: 0; transform: skewX(-8deg); pointer-events: none; }
.band-r .band-layer { right: -40px; left: -20px; }
.band .plate { position: absolute; left: 0; top: 0; bottom: 0; width: 270px; display: flex; align-items: center; justify-content: center; color: #0b0c10; border-radius: 0 8px 8px 0; box-shadow: 12px 0 30px rgba(0,0,0,.35); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.32)), linear-gradient(180deg, var(--hue), var(--hue2)); }
.band-r .plate { left: auto; right: 0; border-radius: 8px 0 0 8px; box-shadow: -12px 0 30px rgba(0,0,0,.35); }
.band .plate-in { display: flex; flex-direction: column; align-items: center; gap: 6px; transform: skewX(8deg); margin-left: 30px; }
.band-r .plate-in { margin-left: 0; margin-right: 30px; }
.band .plate .score { font: italic 800 136px/.9 var(--band-font); font-variant-numeric: tabular-nums; }
.band .plate .score.two { letter-spacing: -.03em; }
.band .plate .cond { font: italic 800 15px/1 var(--band-font); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
#rsapp .band.hill .plate { background: #0b0c10; color: #f0c674; }
.band .strip { position: absolute; left: 270px; right: 0; bottom: 12px; height: 14px; display: flex; gap: 4px; padding-left: 6px; background: rgba(255,255,255,.05); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 50%, rgba(0,0,0,.35)); mask-image: linear-gradient(90deg, #000 50%, rgba(0,0,0,.35)); }
.band-r .strip { left: 0; right: 270px; flex-direction: row-reverse; padding-left: 0; padding-right: 6px; -webkit-mask-image: linear-gradient(270deg, #000 50%, rgba(0,0,0,.35)); mask-image: linear-gradient(270deg, #000 50%, rgba(0,0,0,.35)); }
.band .strip i { flex: 0 1 64px; min-width: 6px; }
.band .strip i.w { background: linear-gradient(180deg, #a7d97a, #7fb356); }
.band .strip i.l { background: linear-gradient(180deg, #f58aa0, #d1566c); }
.band .strip i.live { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); animation: live-seg 2.2s ease-in-out infinite; }
@keyframes live-seg { 0%, 100% { opacity: .3; } 50% { opacity: .9; } }
/* names column */
.band-names { grid-area: nm; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; min-width: 0; padding-bottom: 14px; }
.band-r .band-names { align-items: flex-end; text-align: end; }
.band .team-label { display: flex; align-items: center; gap: .5rem; min-width: 0; align-self: stretch; }
.band-r .team-label { flex-direction: row-reverse; }
#rsapp .band .act svg, #rsapp .band .act .short { display: none; }
#rsapp .band .team-label .tn-text { font: italic 800 22px/1 var(--band-font); font-size: 22px !important; font-weight: 800 !important; letter-spacing: .03em; text-transform: uppercase; color: var(--hue); font-stretch: normal; opacity: 1; overflow: visible; }
#rsapp .band .team-name { flex: 0 1 auto; min-height: 44px; padding: 0; margin: -.25rem 0; gap: 0; background: none; border: 0; }
#rsapp .band .team-name:hover .tn-text { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
#rsapp .band .t-grip { display: none; }
#rsapp .band .card, #rsapp .band .card:hover {
  display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 0; max-width: 100%;
  background: none; border: 0; box-shadow: none; border-radius: 4px; transform: none;
  font: italic 700 44px/1 var(--band-font) !important; color: #eef1f6;
}
.band-r .card { flex-direction: row-reverse; }
#rsapp .band .pdot { width: 14px; height: 14px; background: var(--hue); }
#rsapp .band .card + .card .pdot { background: var(--hue2); }
#rsapp .band .pav { width: 32px; height: 32px; border-width: 2px; }
#rsapp .band .pname { flex: 0 1 auto; }
#rsapp .band .role-badge { padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.08); border: 0; color: #eef1f6; font: italic 700 14px/1 var(--band-font); letter-spacing: .04em; text-transform: none; font-stretch: normal; }
#rsapp .band .rb-txt { display: inline; }
#rsapp .band .role-badge.rack svg { color: #7dcfff; }
#rsapp .band .role-badge.break svg { color: #e0af68; }
/* no keys (before the break is decided, viewers, Live now): the names take the keys' room */
.rs-pre .band .band-keys, #rsapp.rs-ro .band .band-keys, .rs-live .band .band-keys { display: none; }
.rs-pre #rsapp .band, #rsapp.rs-ro .band, .rs-live .band, .rs-pre #rsapp .band.band-r, #rsapp.rs-ro .band.band-r, .rs-live .band.band-r { grid-template-columns: 230px minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "sp nm"; }
.rs-pre #rsapp .band.band-r, #rsapp.rs-ro .band.band-r, .rs-live .band.band-r { grid-template-columns: minmax(0, 1fr) 230px; grid-template-areas: "nm sp"; }
.rs-pre .band .band-names, .rs-ro .band .band-names, .rs-live .band .band-names { justify-content: center; padding: 0 16px 14px 0; }
.rs-pre .band-r .band-names, .rs-ro .band-r .band-names, .rs-live .band-r .band-names { padding: 0 0 14px 16px; }
/* keys column: specials, then the hold-to-lose button ringed in the team hue */
.band-keys { grid-area: ky; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 0; padding: 0 18px 14px 0; }
.band-r .band-keys { padding: 0 0 14px 18px; }
#rsapp .band .acts, #rsapp.win-mode .band .acts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
#rsapp .band .act, #rsapp .band .act:not(.holding):not(:disabled) { min-height: 48px; padding: 0 6px; border-radius: 6px; border: 1px solid transparent !important; background: #20242d !important; color: #eef1f6 !important; font-size: 14px; font-weight: 600; flex-direction: row; gap: .4rem; box-shadow: none !important; }
#rsapp .band .act:disabled { border-style: dashed !important; border-color: var(--line2) !important; color: var(--dim) !important; }
#rsapp .band .act svg { width: 1.1rem; height: 1.1rem; }
#rsapp .band .lose-btn, #rsapp .band .lose-btn:not(.holding):not(:disabled) { min-height: 56px; padding: 0 12px; border: 0 !important; border-radius: 6px; background: #13161c !important; color: #eef1f6 !important; font: 700 20px/1.1 var(--band-font); text-transform: none; letter-spacing: 0; box-shadow: inset 0 0 0 1.5px oklch(.78 .13 var(--h1) / .6) !important; }
#rsapp .band .lose-btn.holding { color: #eef1f6 !important; box-shadow: inset 0 0 0 1.5px var(--hue) !important; }
#rsapp .band .lose-btn::after { background: oklch(.78 .13 var(--h1) / .45); }
#rsapp .band .lose-btn:disabled { background: transparent !important; color: var(--dim) !important; box-shadow: inset 0 0 0 1px transparent !important; outline: 1px dashed var(--line2); outline-offset: -1px; }
#rsapp.win-mode .band .act.win { min-height: 56px; border-radius: 6px; font: 700 20px/1.1 var(--band-font); text-transform: none; letter-spacing: 0; }
/* breakpoints follow the match block's own width (the queue may sit beside it): tablet < 56rem: plate column 170, keys under the names, band 276 */
@container match (max-width: 56rem) {
  #rsapp .band, #rsapp .band.band-r { grid-template-columns: 170px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "sp nm" "sp ky"; gap: 0 20px; height: 276px; }
  #rsapp .band.band-r { grid-template-columns: minmax(0, 1fr) 170px; grid-template-areas: "nm sp" "ky sp"; }
  .band-layer { left: -32px; } .band-r .band-layer { right: -32px; left: -20px; }
  .band .plate { width: 202px; } .band .plate-in { margin-left: 22px; } .band-r .plate-in { margin-right: 22px; }
  .band .plate .score { font-size: 110px; } .band .plate .cond { font-size: 14px; }
  .band .strip { left: 202px; } .band-r .strip { right: 202px; }
  .band-names { justify-content: flex-end; gap: 8px; padding: 6px 0 0; }
  #rsapp .band .team-name { min-height: 32px; margin: 0; }
  #rsapp .band .card, #rsapp .band .card:hover { font-size: 36px !important; min-height: 40px; }
  .band-keys, .band-r .band-keys { justify-content: flex-start; padding: 8px 16px 18px 0; }
  .band-r .band-keys { padding: 8px 0 18px 16px; }
  .rs-pre #rsapp .band, #rsapp.rs-ro .band, .rs-live .band { grid-template-columns: 170px minmax(0, 1fr); }
  .rs-pre #rsapp .band.band-r, #rsapp.rs-ro .band.band-r, .rs-live .band.band-r { grid-template-columns: minmax(0, 1fr) 170px; }
}
/* phone < 36rem: plate column 104, band 244, layer bleed 10/26/20, plate 130, strip 10 */
@container match (max-width: 36rem) {
  #rsapp .band, #rsapp .band.band-r { grid-template-columns: 104px minmax(0, 1fr); gap: 0 14px; height: 244px; }
  #rsapp .band.band-r { grid-template-columns: minmax(0, 1fr) 104px; }
  .band-layer { top: -10px; right: -20px; bottom: -10px; left: -26px; } .band-r .band-layer { right: -26px; left: -20px; }
  .band .plate { width: 130px; box-shadow: 10px 0 24px rgba(0,0,0,.35); } .band-r .plate { box-shadow: -10px 0 24px rgba(0,0,0,.35); }
  .band .plate-in { gap: 5px; margin-left: 18px; } .band-r .plate-in { margin-right: 18px; }
  .band .plate .score { font-size: 80px; } .band .plate .cond { font-size: 13px; letter-spacing: .06em; }
  .band .strip { left: 130px; bottom: 10px; height: 10px; gap: 3px; padding-left: 5px; } .band-r .strip { right: 130px; padding-right: 5px; }
  .band .strip i { flex-basis: 40px; min-width: 5px; }
  .band-names { gap: 7px; padding: 12px 10px 0 0; } .band-r .band-names { padding: 12px 0 0 10px; }
  #rsapp .band .team-label .tn-text { font-size: 16px !important; }
  #rsapp .band .card, #rsapp .band .card:hover { font-size: 28px !important; gap: 10px; min-height: 32px; }
  #rsapp .band .pdot { width: 10px; height: 10px; } #rsapp .band .pav { width: 24px; height: 24px; }
  #rsapp .band .role-badge { padding: 3px 7px; font-size: 13px; }
  .band-keys, .band-r .band-keys { gap: 4px; padding: 8px 8px 20px 0; } .band-r .band-keys { padding: 8px 0 20px 8px; }
  #rsapp .band .acts, #rsapp.win-mode .band .acts { gap: 4px; }
  #rsapp .band .acts, #rsapp.win-mode .band .acts { gap: 5px; }
  #rsapp .band .act, #rsapp .band .act:not(.holding):not(:disabled) { min-height: 44px; padding: 0 2px; font-size: 13px; letter-spacing: 0; }
  #rsapp .band .act span { overflow: visible; text-overflow: clip; }
  #rsapp .band .act.bnr .short { display: inline; } #rsapp .band .act.bnr span:not(.short) { display: none; }
  #rsapp .band .lose-btn, #rsapp .band .lose-btn:not(.holding):not(:disabled), #rsapp.win-mode .band .act.win { min-height: 48px; font-size: 16px; }
  .rs-pre #rsapp .band, #rsapp.rs-ro .band, .rs-live .band { grid-template-columns: 104px minmax(0, 1fr); }
  .rs-pre #rsapp .band.band-r, #rsapp.rs-ro .band.band-r, .rs-live .band.band-r { grid-template-columns: minmax(0, 1fr) 104px; }
}
@media (prefers-reduced-motion: reduce) { .band .strip i.live { animation: none; opacity: .7; } #rsapp .band { transition: none; } }


/* ===== v3 states (slice 2, build spec §3–4): at the table, dim, hill edge glow, pre-break rail, scotch-doubles shooter ===== */
/* the queue sits beside the match only from 90rem (the approved 1180 layout has full-width bands; the queue peek line / sheet comes with the queue slice) */
@container app (min-width: 70rem) and (max-width: 89.99rem) {
  #rsapp .layout.has-queue, #rsapp .layout.has-queue.q-collapsed { grid-template-columns: minmax(0, 1fr); column-gap: 1.5rem; }
  #rsapp .layout.has-queue .queue-panel { align-self: stretch; }
  #rsapp .q-collapsed .queue-panel { padding: 1rem; align-items: stretch; }
  #rsapp .q-collapsed .queue-toggle { flex-direction: row; min-height: 0; padding: .5rem 0; gap: .5rem; }
}
/* the rail between the bands: line 1 text (RACK n in the band face, the rest quiet sans; the team in its hue), then the keys */
#rsapp .match > .mid { flex-wrap: wrap; gap: 10px 18px; min-height: 24px; padding: 2px 8px; }
#rsapp .mid .rail-txt { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font: 500 15px/1.4 var(--sans, system-ui, sans-serif); color: var(--dim); text-align: center; justify-content: center; }
#rsapp .mid .rail-txt .rl.hot { font: italic 800 22px/1 var(--band-font); letter-spacing: .02em; text-transform: uppercase; color: #eef1f6; }
#rsapp .mid .rail-txt .rl .tm { color: oklch(.78 .13 var(--h1)); }
#rsapp .mid .rail-txt .rl-dot { opacity: .5; }
#rsapp .mid .rail-txt:empty { display: none; }
#rsapp .mid .rail-keys { display: flex; gap: 8px; }
#rsapp .mid .rail-keys.hidden { display: none; }
#rsapp .mid .rail-key { min-height: 44px; padding: 0 16px; border: 0; border-radius: 6px; background: #20242d; color: #eef1f6; font: 700 16px/1 var(--band-font); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: transform .18s var(--ease-out), background .18s; }
#rsapp .mid .rail-key:active { transform: scale(.97); }
#rsapp .mid .rail-key b { font-weight: 700; opacity: .8; }
#rsapp .mid .rail-key.primary { --hue: oklch(.78 .13 var(--h1)); background: var(--hue); color: #0b0c10; }
#rsapp .mid .rail-key.primary b { opacity: .75; }
.rs-pre #rsapp .mid .rail-txt { width: 100%; }
#rsapp.rs-ro .mid .rail-keys { display: none; }
/* at the table: ring + glow in the team hue, hatch drifts one period in 7 s (never background-position) */
@keyframes team-glow { 0%, 100% { box-shadow: inset 0 0 0 1.5px oklch(.78 .13 var(--h1) / .55), 0 0 0 0 oklch(.78 .13 var(--h1) / 0); } 50% { box-shadow: inset 0 0 0 1.5px oklch(.78 .13 var(--h1) / .95), 0 0 28px -4px oklch(.78 .13 var(--h1) / .35); } }
@keyframes hatch-drift { to { transform: translateX(15.56px); } }
#rsapp .band.at-table { animation: team-glow 3s ease-in-out infinite; }
#rsapp .band.at-table .band-hatch i { animation: hatch-drift 7s linear infinite; }
#rsapp .band.at-table.band-r .band-hatch i { animation-direction: reverse; }
#rsapp .band.break-glow { animation: team-glow 3s ease-in-out infinite; }
/* the other band while someone is at the table */
#rsapp .band.dim .band-names, #rsapp .band.dim .band-keys { opacity: .55; transition: opacity .4s ease; }
#rsapp .band.dim .band-layer { filter: brightness(.82) saturate(.8); transition: filter .4s ease; }
#rsapp .band.dim .band-hatch { opacity: .7; }
#rsapp .band .band-names, #rsapp .band .band-keys { transition: opacity .4s ease .15s; }
#rsapp .band .band-layer { transition: filter .4s ease .15s; }
#rsapp .band .at-tag { flex: 0 0 auto; font: italic 800 14px/1 var(--band-font); letter-spacing: .1em; text-transform: uppercase; color: #eef1f6; opacity: .8; }
#rsapp .band .at-tag::before { content: "·"; margin-right: .5rem; opacity: .5; }
.band-r .at-tag::before { content: none; } .band-r .at-tag::after { content: "·"; margin-left: .5rem; opacity: .5; }
/* shooter: cue ball instead of the dot, white Shooting pill; partner row at 55 % with "next" */
#rsapp .band .cue { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #d9dde6 60%, #aab0bd); box-shadow: 0 1px 3px rgba(0,0,0,.5); }
#rsapp .band .pill-shooting { padding: 5px 10px; border-radius: 999px; background: #eef1f6; color: #0b0c10; font: italic 700 14px/1 var(--band-font); letter-spacing: .04em; }
#rsapp .band .card.next { opacity: .55; }
#rsapp .band .next-txt { font: 600 14px/1 var(--sans, system-ui, sans-serif); color: #98a0ae; }
/* hill: gradient breathing 2.4 s, 3 px gold line with its shadow cast into the band, 48 px spark travelling down; ignition grows the line from the bottom in 500 ms */
.band .edge-glow { position: absolute; left: 270px; right: 0; top: 0; bottom: 0; overflow: hidden; pointer-events: none; }
.band-r .edge-glow { left: 0; right: 270px; }
.band .edge-glow i { position: absolute; top: 0; bottom: 0; }
.band .edge-glow i:nth-child(1) { left: 0; width: 80px; background: linear-gradient(90deg, rgba(240,198,116,.28), transparent); animation: hill-breathe 2.4s ease-in-out infinite; }
.band-r .edge-glow i:nth-child(1) { left: auto; right: 0; background: linear-gradient(270deg, rgba(240,198,116,.28), transparent); }
.band .edge-glow i:nth-child(2) { left: 0; width: 3px; background: #f0c674; box-shadow: 0 0 12px 2px rgba(240,198,116,.55), 0 0 36px 6px rgba(240,198,116,.25); transform-origin: bottom; animation: hill-ignite .5s var(--ease-out) both; }
.band-r .edge-glow i:nth-child(2) { left: auto; right: 0; }
.band .edge-glow i:nth-child(3) { left: -2px; width: 7px; height: 48px; bottom: auto; border-radius: 4px; background: linear-gradient(180deg, transparent, #fff6dc, transparent); filter: blur(.5px); animation: hill-spark 2.4s ease-in-out .5s infinite; opacity: 0; }
.band-r .edge-glow i:nth-child(3) { left: auto; right: -2px; }
@keyframes hill-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes hill-ignite { from { transform: scaleY(0); } }
@keyframes hill-spark { 0% { top: -48px; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
#rsapp .band.hill.at-table { animation: none; box-shadow: none; }
@container match (max-width: 56rem) { .band .edge-glow { left: 202px; } .band-r .edge-glow { left: 0; right: 202px; } }
@container match (max-width: 36rem) {
  .band .edge-glow { left: 130px; } .band-r .edge-glow { left: 0; right: 130px; }
  #rsapp .band .cue { width: 14px; height: 14px; } #rsapp .band .pill-shooting { padding: 3px 7px; font-size: 13px; }
  #rsapp .band .at-tag { font-size: 12px; }
  #rsapp .match > .mid { gap: 8px 12px; padding: 0 2px; }
  #rsapp .mid .rail-txt { font-size: 13px; } #rsapp .mid .rail-txt .rl.hot { font-size: 18px; }
  #rsapp .mid .rail-keys { width: 100%; } #rsapp .mid .rail-key { flex: 1 1 0; min-width: 0; padding: 0 8px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  #rsapp .band.at-table, #rsapp .band.break-glow { animation: none; box-shadow: inset 0 0 0 1.5px oklch(.78 .13 var(--h1) / .8); }
  #rsapp .band.at-table .band-hatch i, .band .edge-glow i { animation: none; }
  .band .edge-glow i:nth-child(3) { display: none; }
}

/* ===== v3 canvas (spec §7): neutral cloth behind the game screen; the band is the only hued surface ===== */
#rsapp #gameScreen:not(.hidden), .rs-live #rsapp { --canvas: #13161c; }
.dev-live, body:has(#rsapp #gameScreen:not(.hidden)) { background: radial-gradient(120% 80% at 50% 0%, #1d2029 0%, #13161c 60%, #0f1117 100%) fixed; }
body:has(#rsapp #gameScreen:not(.hidden))::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(rgba(255,255,255,.035) .6px, transparent .7px) 0 0 / 3px 3px, repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px), repeating-linear-gradient(-45deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px); }
body:has(#rsapp #gameScreen:not(.hidden)) #app { position: relative; z-index: 1; }
body:has(#rsapp #gameScreen:not(.hidden)) .bg-glow, body:has(#rsapp #gameScreen:not(.hidden)) #app::before { display: none; }

/* ===== v3 shot clock rail (slice 3, spec §4) ===== */
#rsapp .match > .mid:has(.clock-rail:not(.hidden)) { padding-bottom: 0; }
#rsapp .clock-rail { --hue: oklch(.78 .13 var(--h1)); position: relative; box-sizing: border-box; width: 100%; height: 108px; display: flex; align-items: center; gap: 14px; padding: 0 14px 16px 12px; border-radius: 12px; background: #13161c; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: box-shadow .3s; }
#rsapp .clock-rail.hidden { display: none; }
#rsapp .clock-rail.amber { box-shadow: inset 0 0 0 1.5px rgba(224,175,104,.7), 0 0 24px rgba(224,175,104,.2); }
#rsapp .clock-rail.red { animation: rail-red 1s ease-in-out infinite; }
#rsapp .clock-rail.expired { box-shadow: inset 0 0 0 1.5px rgba(247,118,142,.9), 0 0 40px rgba(247,118,142,.3); animation: none; }
@keyframes rail-red { 0%, 100% { box-shadow: inset 0 0 0 1.5px rgba(247,118,142,.35), 0 0 10px rgba(247,118,142,.1); } 50% { box-shadow: inset 0 0 0 1.5px rgba(247,118,142,1), 0 0 44px rgba(247,118,142,.4); } }
#rsapp .cr-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; border-radius: 0 0 12px 12px; background: rgba(255,255,255,.06); overflow: hidden; }
#rsapp .cr-bar i { position: absolute; inset: 0; transform-origin: left; background: var(--hue); transition: transform .1s linear, background .3s; }
#rsapp .clock-rail.amber .cr-bar i { background: #e0af68; } #rsapp .clock-rail.red .cr-bar i, #rsapp .clock-rail.expired .cr-bar i { background: #f7768e; }
#rsapp .cr-pause { position: relative; flex: none; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; gap: 4px; border: 0; border-radius: 8px; background: #20242d; color: #eef1f6; font: italic 800 14px/1 var(--band-font); letter-spacing: .04em; cursor: pointer; }
#rsapp .cr-pause i { width: 5px; height: 18px; border-radius: 1px; background: #eef1f6; } #rsapp .cr-pause span { display: none; }
#rsapp .cr-pause.txt i { display: none; } #rsapp .cr-pause.txt span { display: inline; }
#rsapp .cr-digits { flex: none; align-self: stretch; margin-bottom: -16px; display: flex; align-items: center; justify-content: center; min-width: 160px; }
#rsapp .cr-tile { position: relative; display: flex; align-items: center; justify-content: center; border-radius: 8px; transition: width .4s cubic-bezier(.2,.8,.2,1), height .4s cubic-bezier(.2,.8,.2,1), background .3s, box-shadow .3s; }
#rsapp .cr-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgba(224,175,104,.3); transition: height .1s linear, background .3s; }
#rsapp .cr-num { position: relative; display: inline-block; min-width: 96px; text-align: center; padding: 0 12px; font: italic 800 72px/.9 var(--band-font); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: #eef1f6; transition: font-size .4s cubic-bezier(.2,.8,.2,1), color .3s; }
#rsapp .clock-rail.paused:not(.tile) .cr-num { color: #98a0ae; }
#rsapp .clock-rail.tile .cr-tile { width: 96px; height: 96px; background: #20242d; overflow: hidden; transform: skewX(-8deg); box-shadow: 0 12px 36px rgba(224,175,104,.3); }
#rsapp .clock-rail.tile .cr-num { min-width: 0; font-size: 64px; transform: skewX(8deg); color: transparent; -webkit-text-fill-color: transparent; background-image: linear-gradient(180deg, #f0c674 0 var(--line, 0px), #0b0c10 var(--line, 0px) 100%); -webkit-background-clip: text; background-clip: text; }
#rsapp .clock-rail.big .cr-tile { width: 130px; height: 130px; box-shadow: 0 12px 40px rgba(247,118,142,.4); animation: tile-red 1s ease-in-out infinite; }
#rsapp .clock-rail.big .cr-num { font-size: 84px; background-image: linear-gradient(180deg, #f7768e 0 var(--line, 0px), #0b0c10 var(--line, 0px) 100%); }
#rsapp .clock-rail.big .cr-fill, #rsapp .clock-rail.expired .cr-fill { background: rgba(247,118,142,.3); }
#rsapp .clock-rail.expired .cr-tile { animation: none; } #rsapp .clock-rail.paused .cr-tile { animation-play-state: paused; }
@keyframes tile-red { 0%, 100% { box-shadow: 0 12px 36px rgba(247,118,142,.25); } 50% { box-shadow: 0 12px 48px rgba(247,118,142,.55); } }
#rsapp .cr-status { display: flex; flex-direction: column; gap: 4px; min-width: 150px; flex: 1; }
#rsapp .cr-st { font: 600 12px/1.2 var(--band-mono); letter-spacing: .06em; color: #98a0ae; }
#rsapp .clock-rail.expired .cr-st { color: #f7768e; }
#rsapp .cr-ext { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: #98a0ae; }
#rsapp .cr-ext::before { content: "Extension"; }
#rsapp .cr-ep { display: inline-flex; align-items: center; gap: 5px; color: #eef1f6; } #rsapp .cr-ep i { width: 8px; height: 8px; border-radius: 50%; background: oklch(.78 .13 var(--h)); }
#rsapp .cr-ep.used { color: #98a0ae; text-decoration: line-through; } #rsapp .cr-ep.used i { background: #3a3f4b; }
#rsapp .cr-key { flex: none; height: 56px; padding: 0 14px; border: 0; border-radius: 8px; background: #20242d; color: #eef1f6; font: italic 800 17px/1 var(--band-font); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: transform .18s var(--ease-out), opacity .2s; }
#rsapp .cr-key:active { transform: scale(.97); } #rsapp .cr-key:disabled { opacity: .45; cursor: default; }
#rsapp .cr-keys { display: flex; gap: 8px; } #rsapp .cr-keys .rail-key { height: 56px; padding: 0 18px; border-radius: 8px; font: italic 800 19px/1 var(--band-font); }
#rsapp .cr-keys .rail-key:not(.primary) { font-size: 17px; }
#rsapp .cr-snd { font-size: 14px; color: #98a0ae; } #rsapp .cr-snd[aria-pressed="true"] { color: #eef1f6; }
#rsapp .clock-rail.locked .cr-pause, #rsapp .clock-rail.locked .cr-extb { display: none; }
#rsapp .clock-rail.locked .cr-st::after { content: " · STAFF"; opacity: .6; }
@container match (max-width: 56rem) {
  #rsapp .clock-rail { flex-wrap: wrap; height: auto; min-height: 108px; gap: 10px 12px; padding: 12px 12px 24px; }
  #rsapp .cr-status { min-width: 120px; } #rsapp .cr-keys { width: 100%; order: 9; } #rsapp .cr-keys .rail-key { flex: 1 1 0; }
}
@container match (max-width: 36rem) {
  #rsapp .clock-rail { min-height: 56px; gap: 8px; padding: 8px 8px 14px; border-radius: 10px; }
  #rsapp .cr-bar { height: 6px; } #rsapp .cr-digits { margin-bottom: -6px; min-width: 72px; } #rsapp .cr-num { font-size: 32px; min-width: 56px; padding: 0 6px; }
  #rsapp .cr-pause { width: 44px; height: 44px; } #rsapp .cr-pause i { height: 14px; width: 4px; }
  #rsapp .clock-rail.tile .cr-tile { width: 56px; height: 56px; } #rsapp .clock-rail.tile .cr-num { font-size: 36px; }
  #rsapp .clock-rail.big .cr-tile { width: 72px; height: 72px; } #rsapp .clock-rail.big .cr-num { font-size: 48px; }
  #rsapp .cr-status { display: none; } #rsapp .cr-snd { display: none; }
  #rsapp .cr-key { height: 44px; padding: 0 10px; font-size: 15px; } #rsapp .cr-keys .rail-key { height: 44px; font-size: 15px; padding: 0 8px; }
}
/* settings: segmented rows */
#rsapp .seg-row { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 8px; background: var(--bg0, #13161c); }
#rsapp .seg-row .seg { min-height: 36px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--dim); font: 600 14px/1 var(--sans, system-ui, sans-serif); cursor: pointer; }
#rsapp .seg-row .seg.on { background: #20242d; color: #eef1f6; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
#rsapp .field-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: .75rem 0; font-size: 14px; color: var(--text); } #rsapp .field-sub small { color: var(--dim); }
#rsapp #clockMore.hidden, #rsapp #ballsField.hidden { display: none; }
@media (prefers-reduced-motion: reduce) { #rsapp .clock-rail.red, #rsapp .clock-rail.big .cr-tile { animation: none; } }

/* clock rail: short labels on phones; keys shrink (verifier fix) */
#rsapp .rk-short { display: none; }
#rsapp .cr-keys .rail-key b { font-weight: inherit; }
@container match (max-width: 36rem) {
  #rsapp .rk-long { display: none; } #rsapp .rk-short { display: inline; }
  #rsapp .clock-rail { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "p d e" "k k k"; align-items: center; min-height: 0; }
  #rsapp .cr-pause { grid-area: p; } #rsapp .cr-digits { grid-area: d; justify-self: center; } #rsapp .cr-extb { grid-area: e; min-width: 44px; padding: 0 8px; }
  #rsapp .cr-keys { grid-area: k; width: auto; order: 0; } #rsapp .cr-keys .rail-key { flex: 1 1 0; min-width: 0; padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #rsapp .cr-bar { height: 6px; }
}

/* ===== v3 motion (slice 5, spec §7): state changes 320–400 ms ease-out; score roll, segment grow, queue count pop ===== */
@keyframes score-roll { 0% { transform: translateY(.35em); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes score-out { to { transform: translateY(-.35em); opacity: 0; } }
@keyframes seg-grow { from { transform: scaleX(0); } }
@keyframes count-pop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
#rsapp .band .plate .score.roll { animation: score-roll .36s cubic-bezier(.2,.8,.2,1) both; }
#rsapp .band .strip i.grow { transform-origin: left center; animation: seg-grow .4s cubic-bezier(.2,.8,.2,1) both; } #rsapp .band-r .strip i.grow { transform-origin: right center; }
#rsapp .q-count.pop, #rsapp #queueCount.pop { display: inline-block; animation: count-pop .32s cubic-bezier(.2,.8,.2,1); }
#rsapp .band .keys button, #rsapp .band .act, #rsapp .mid .rail-key, #rsapp .cr-key { transition: transform .18s cubic-bezier(.2,.8,.2,1), background .18s, opacity .2s; }
#rsapp .band .keys button:active, #rsapp .band .act:active, #rsapp .mid .rail-key:active { transform: scale(.97); }
/* textures: cloth on app cards (panels) outside the game; dot grain on sheets and dialogs */
.panel, .card-link, .lp-card { background-image: radial-gradient(rgba(255,255,255,.028) .6px, transparent .7px), repeating-linear-gradient(45deg, rgba(255,255,255,.01) 0 1px, transparent 1px 4px); background-size: 3px 3px, auto; }
dialog.dlg, .sheet, .queue-sheet { background-image: radial-gradient(rgba(255,255,255,.04) .5px, transparent .6px); background-size: 3px 3px; }
@media (prefers-reduced-motion: reduce) {
  #rsapp .band .plate .score.roll, #rsapp .band .strip i.grow, #rsapp .q-count.pop, #rsapp #queueCount.pop { animation: none; }
  #rsapp .band .keys button, #rsapp .band .act, #rsapp .mid .rail-key, #rsapp .cr-key { transition: none; }
}

/* ===== v3 Board (Live now; review/D board D2, decisions 19 Oct) ===== */
.bd { --bd-cy: #7dcfff; --bd-am: #e0af68; --bd-gold: #f0c674; }
.main:has(> .bd) > .page-head { display: none; }
.bd-top { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.bd-title { margin: 0; font: italic 800 44px/.9 var(--band-font); text-transform: uppercase; color: #eef1f6; }
.bd-when { font-size: 14px; color: #98a0ae; padding-bottom: 4px; }
.bd-chips { margin-left: auto; display: flex; gap: 8px; padding-bottom: 2px; flex-wrap: wrap; }
.bd-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 6px; background: #181b22; font-size: 13px; font-weight: 500; color: #98a0ae; }
.bd-chip i { width: 8px; height: 8px; border-radius: 50%; background: #98a0ae; } .bd-chip.live i { background: var(--bd-cy); } .bd-chip.booked i { background: var(--bd-am); } .bd-chip.closed i { background: #3a4150; }
.bd-chip.on { font-weight: 600; color: #eef1f6; }
.bd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-auto-rows: 1fr; gap: 14px; }
.bd-tile { display: flex; flex-direction: column; gap: 12px; min-height: 196px; padding: 14px 16px 16px; border-radius: 8px; background: #181b22; box-shadow: inset 0 2px 0 #3a4150, 0 0 0 1px rgba(255,255,255,.06); color: inherit; text-decoration: none; transition: transform .18s var(--ease-out), box-shadow .18s; }
a.bd-tile:hover { transform: translateY(-1px); box-shadow: inset 0 2px 0 #3a4150, 0 0 0 1px rgba(255,255,255,.14); } a.bd-tile.live:hover { box-shadow: inset 0 2px 0 var(--bd-cy), 0 0 0 1px rgba(255,255,255,.14); } a.bd-tile.booked:hover { box-shadow: inset 0 2px 0 var(--bd-am), 0 0 0 1px rgba(255,255,255,.14); }
.bd-tile.live { box-shadow: inset 0 2px 0 var(--bd-cy), 0 0 0 1px rgba(255,255,255,.06); } .bd-tile.booked { box-shadow: inset 0 2px 0 var(--bd-am), 0 0 0 1px rgba(255,255,255,.06); } .bd-tile.closed { opacity: .7; }
.bd-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.bd-tbl { font: italic 800 20px/1 var(--band-font); text-transform: uppercase; color: #eef1f6; letter-spacing: .02em; }
.bd-time { display: inline-flex; align-items: center; gap: 6px; font: 600 13px var(--band-mono); color: var(--bd-cy); font-variant-numeric: tabular-nums; } .bd-time i { width: 7px; height: 7px; border-radius: 50%; background: var(--bd-cy); }
.bd-st { font-size: 13px; font-weight: 600; color: #98a0ae; } .bd-st.amber { color: var(--bd-am); }
.bd-sub { font-size: 13px; color: #98a0ae; margin-top: -6px; }
.bd-rows { display: flex; flex-direction: column; gap: 8px; }
.bd-row { display: flex; align-items: center; gap: 12px; } .bd-side { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.bd-name { font: 700 18px/1.1 var(--band-font); color: #eef1f6; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-pips { display: flex; gap: 3px; flex-wrap: wrap; } .bd-pips i { width: 14px; height: 4px; border-radius: 1px; background: #2a2f3a; } .bd-pips i.on { background: #c8ccd6; } .bd-row:has(.bd-score.hill) .bd-pips i.on { background: var(--bd-gold); }
.bd-score { font: italic 800 42px/1 var(--band-font); color: #eef1f6; min-width: 30px; text-align: right; font-variant-numeric: tabular-nums; } .bd-score.hill { color: var(--bd-gold); text-shadow: 0 0 16px rgba(240,198,116,.45); }
.bd-foot { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #98a0ae; margin-top: auto; } .bd-foot.warn { color: var(--bd-am); }
.bd-q { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 5px; background: #20242d; color: #eef1f6; font: 700 13px var(--band-mono); }
.bd-big { display: flex; flex-direction: column; gap: 4px; flex: 1; justify-content: center; }
.bd-h { font: italic 800 30px/1 var(--band-font); text-transform: uppercase; color: #eef1f6; } .bd-h.muted { color: #98a0ae; } .bd-mono { font: 600 26px var(--band-mono); font-style: normal; }
.bd-s { font-size: 13px; color: #98a0ae; }
.bd-cta { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 6px; background: #20242d; color: var(--bd-cy); font-size: 13px; font-weight: 600; align-self: flex-start; margin-top: auto; }
@container app (max-width: 40rem) { .bd-title { font-size: 36px; } .bd-chips { margin-left: 0; } .bd-grid { grid-template-columns: minmax(0, 1fr); } .bd-tile { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .bd-tile { transition: none; } a.bd-tile:hover { transform: none; } }

/* ===== v3 queue (review/D queue, decisions 19 Oct): one component, two states. Peek = one line (QUEUE · n · next · then …). Full = sheet on tablet, rail on desk ===== */
#rsapp .queue-panel { --qbg: #181b22; }
#rsapp .queue-panel .queue-toggle .panel-title { font: italic 800 16px/1 var(--band-font); text-transform: uppercase; letter-spacing: .04em; color: #eef1f6; margin: 0; }
#rsapp .queue-panel .q-count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 5px; background: #20242d; color: #eef1f6; font: 700 13px var(--band-mono); }
#rsapp .q-summary { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: #98a0ae; }
#rsapp .q-summary.hidden { display: none; }
#rsapp .qp-next { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 6px; background: #13161c; box-shadow: inset 0 0 0 1px #e0af68; color: #eef1f6; }
#rsapp .qp-next::before { content: "Next"; font-size: 13px; font-weight: 700; color: #e0af68; margin-right: 2px; }
#rsapp .qp-p { display: inline-flex; align-items: center; gap: 6px; font: 700 16px/1 var(--band-font); } #rsapp .qp-p i { width: 8px; height: 8px; border-radius: 50%; background: oklch(.78 .13 var(--h)); }
#rsapp .qp-plus { color: #98a0ae; }
#rsapp .qp-then { font-size: 13px; color: #98a0ae; }
/* phone + tablet (< 90rem): the queue is a bar at the bottom of the game; collapsed = the peek line, expanded = a sheet over the lower part of the screen */
@container app (max-width: 89.99rem) {
  #rsapp .layout.has-queue .queue-panel { position: sticky; bottom: 0; z-index: 5; order: 9; margin: 0 calc(-1 * var(--pad, 0px)); padding: 0; border-radius: 12px 12px 0 0; background: var(--qbg); box-shadow: 0 -1px 0 rgba(255,255,255,.1), 0 -12px 40px rgba(0,0,0,.4); background-image: radial-gradient(rgba(255,255,255,.04) .5px, transparent .6px); background-size: 3px 3px; }
  #rsapp .q-collapsed .queue-panel { padding: 0; align-items: stretch; }
  #rsapp .queue-panel .queue-toggle { display: flex; flex-direction: row; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 0 20px; border: 0; background: none; color: #eef1f6; text-align: left; }
  #rsapp .queue-panel .queue-toggle svg { margin-left: auto; width: 20px; height: 20px; transition: transform .3s var(--ease-out); }
  #rsapp .queue-panel.collapsed .queue-toggle svg { transform: rotate(180deg); }
  #rsapp .queue-panel .q-summary { order: -1; }
  #rsapp .queue-panel.collapsed { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  #rsapp .queue-panel.collapsed .queue-toggle { grid-column: 1 / -1; grid-row: 1; }
  #rsapp .queue-panel.collapsed .q-summary { grid-column: 1 / -1; grid-row: 1; margin-left: 140px; margin-right: 60px; pointer-events: none; }
  #rsapp .queue-panel:not(.collapsed) #queueList, #rsapp .queue-panel:not(.collapsed) #queueFoot { padding: 0 20px; }
  #rsapp .queue-panel:not(.collapsed) #queueList { max-height: min(52dvh, 480px); overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; align-content: start; }
  #rsapp .queue-panel:not(.collapsed) #queueFoot { padding-bottom: 16px; }
}
@container app (max-width: 40rem) { #rsapp .queue-panel.collapsed .q-summary { display: none; } #rsapp .queue-panel .queue-toggle { gap: 10px; padding: 0 14px; } #rsapp .queue-panel:not(.collapsed) #queueList { grid-template-columns: minmax(0, 1fr); } }
/* desk (≥ 90rem): the rail beside the match keeps the full list; the peek line is its header */
@container app (min-width: 90rem) {
  #rsapp .layout.has-queue .queue-panel { background: var(--qbg); border-radius: 8px; padding: 12px; }
  #rsapp .queue-panel .queue-toggle { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 4px; border: 0; background: none; color: #eef1f6; text-align: left; }
  #rsapp .queue-panel .queue-toggle svg { margin-left: auto; width: 20px; height: 20px; }
  #rsapp .queue-panel .q-summary { margin: 4px 0 8px; }
}
#rsapp .queue-panel .queue-item .card, #rsapp .queue-panel .tcard .card { min-height: 48px; border-radius: 6px; background: #13161c; font: 700 20px/1.1 var(--band-font); }
@media (prefers-reduced-motion: reduce) { #rsapp .queue-panel .queue-toggle svg { transition: none; } }
/* v3 queue: undo the kit's vertical collapsed rail (writing-mode, hidden summary, 70 % opacity) */
#rsapp .q-collapsed .queue-toggle .panel-title { writing-mode: horizontal-tb; transform: none; letter-spacing: .04em; }
#rsapp .q-collapsed .queue-toggle { flex-direction: row; min-height: 56px; }
#rsapp .q-collapsed .q-summary { display: flex !important; }
#rsapp .queue-panel { opacity: 1; }
#rsapp .queue-panel .queue-toggle svg, #rsapp .queue-panel.collapsed .queue-toggle svg { transform: rotate(0); } #rsapp .queue-panel.collapsed .queue-toggle svg { transform: rotate(180deg); }
@container app (max-width: 40rem) { #rsapp .q-collapsed .q-summary { display: none !important; } }

/* ===== v3 Phase A · hierarchy inside the current look (review §7, decisions 19 Oct) =====
   1 display font (Barlow Condensed) on page titles and panel titles · 2 three text tiers, one accent, tabular numerals · 3 de-box: one border level, shadows only on floating surfaces */
:root { --t1: #eef1f6; --t2: #c8ccd6; --t3: #98a0ae; }
.main .page-title, .t-title, .lp-h, .brand-t { font-family: var(--band-font); font-weight: 800; font-style: italic; letter-spacing: 0; color: var(--t1); }
.main .page-title { font-size: 44px; line-height: .9; }
.main .panel-title, .main .panel .panel-title, .you-t { font: 700 15px/1.2 var(--sans, system-ui, sans-serif); letter-spacing: 0; text-transform: none; color: var(--t1); }
.main .live-eyebrow, .main .field-label { font: 600 12px/1.2 var(--band-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--t3); }
.main .hint, .main .note, .main .muted { color: var(--t3); }
.main .panel { background: #181b22; border: 0; box-shadow: 0 0 0 1px rgba(255,255,255,.06); border-radius: 8px; }
.main .panel .panel { background: #13161c; box-shadow: none; }
.main .lst td, .main .lst th, .main .mr, .main .adm-kpis b, .main .ps-kpis b, .main .you-card b, .main .timer b { font-variant-numeric: tabular-nums; }
.main .lst th { font: 600 12px/1.2 var(--band-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--t3); }
.main .mr { border: 0; box-shadow: 0 0 0 1px rgba(255,255,255,.06); border-radius: 6px; }
dialog.dlg { box-shadow: 0 24px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); }
/* 5 tournament page: bracket | standings side by side from 1180 */
@container app (min-width: 73.75rem) {
  #tour .t-body:has(> .bracket-wrap):has(> .t-standings) { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--sp-4); align-items: start; }
  #tour .t-body > .t-standings { position: sticky; top: 1rem; }
}
#tour .t-list .t-phase.done > details:not([open]) > summary { opacity: .6; }
/* 7 lists: rows are the link */
.main .lst tbody tr[data-edit], .main .lst tbody tr[data-go] { cursor: pointer; } .main .lst tbody tr[data-edit]:hover td, .main .lst tbody tr[data-go]:hover td { background: rgba(255,255,255,.03); }
/* 8 empty states with one action */
.main .empty { display: grid; justify-items: start; gap: .75rem; padding: 2rem 1.25rem; border-radius: 8px; background: #181b22; box-shadow: 0 0 0 1px rgba(255,255,255,.06); color: var(--t2); font-size: 15px; }
.main .empty a { color: #7dcfff; font-weight: 600; }
/* settings with a section rail (build order item) */
.set-wrap { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.set-rail { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 2px; }
.set-rail a { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 6px; color: var(--t3); font-size: 14px; font-weight: 500; text-decoration: none; }
.set-rail a.on, .set-rail a:hover { background: #181b22; color: var(--t1); } .set-rail a.on { box-shadow: inset 2px 0 0 #7dcfff; }
.set-wrap > .stack > .panel { scroll-margin-top: 1rem; }
@container app (max-width: 56rem) { .set-wrap { grid-template-columns: minmax(0, 1fr); } .set-rail { position: static; flex-direction: row; flex-wrap: wrap; } }
@container app (max-width: 40rem) { .main .page-title { font-size: 36px; } }

/* ===== v3 canvas app-wide (decisions 19 Oct · texture): neutral dark with cloth; the kit's navy tokens are remapped here, kit.css stays untouched ===== */
:root { --bg0: #0f1117; --bg1: #13161c; --bg2: #1d2029; --bg3: #20242d; --line: rgba(255,255,255,.1); --line2: rgba(255,255,255,.18); --text: #eef1f6; --dim: #98a0ae; --text-quiet: #98a0ae; }
body { background: radial-gradient(120% 80% at 50% 0%, #1d2029 0%, #13161c 60%, #0f1117 100%) fixed; }
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5; background: radial-gradient(rgba(255,255,255,.035) .6px, transparent .7px) 0 0 / 3px 3px, repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px), repeating-linear-gradient(-45deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px); }
#app { position: relative; z-index: 1; }
.shell-head, .topnav { background: transparent; }

/* ===== review M (20 Oct): who-breaks overlay · phone band N6 · queue fixed to the bottom · game bar on phone · Board rows under 3 tables ===== */
#rsapp .who-breaks { position: absolute; left: 50%; top: 50%; z-index: 6; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(92%, 460px); padding: 22px 24px 20px; border-radius: 10px; background: #181b22; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 24px 70px rgba(0,0,0,.6); text-align: center; background-image: radial-gradient(rgba(255,255,255,.04) .5px, transparent .6px); background-size: 3px 3px; }
#rsapp .who-breaks.hidden { display: none; }
#rsapp .who-breaks b { font: italic 800 28px/1 var(--band-font); text-transform: uppercase; letter-spacing: .02em; color: #eef1f6; }
#rsapp .who-breaks > span:not(.wb-keys) { font-size: 14px; color: #98a0ae; }
#rsapp .wb-keys { display: flex; gap: 8px; margin-top: 6px; }
#rsapp .wb-key { min-height: 48px; padding: 0 18px; border: 0; border-radius: 6px; background: #20242d; color: #eef1f6; font: 600 15px var(--sans, system-ui, sans-serif); cursor: pointer; }
#rsapp .wb-key.primary { background: #7dcfff; color: #0b0c10; }
#rsapp .wb-cancel { min-height: 44px; padding: 0 14px; border: 0; border-radius: 6px; background: transparent; color: #98a0ae; font: 600 14px var(--sans, system-ui, sans-serif); cursor: pointer; }
#rsapp .match.wb-open .band { filter: saturate(.7) brightness(.72); transition: filter .32s var(--ease-out); }
#rsapp .match.lag-pick .band { filter: none; cursor: pointer; }
#rsapp .match.wb-open .mid .pre-btns, #rsapp .match.wb-open .mid .rail-txt { visibility: hidden; }
#rsapp .match { position: relative; }
#rsapp .pts-wb { position: static; transform: none; width: min(100%, 560px); margin: 0 auto; }
#rsapp .pts-wb .wb-keys { flex-wrap: wrap; justify-content: center; }
#rsapp .pts:has(.pts-wb) .band { filter: saturate(.7) brightness(.72); }
/* N6: on phones the partner row carries no pills; only the shooter shows Shooting + role */
@container app (max-width: 40rem) {
  #rsapp .band .card:not(.shooting) .role-badge, #rsapp .band .card:not(.shooting) .score-badge { display: none; }
  #rsapp .band .card:not(.shooting) .pname { opacity: .6; }
  #rsapp .band .card .pname { font-size: 30px; }
  #rsapp .band-names { gap: 6px; padding-top: 10px; }
  #rsapp .band .lose-btn { font-size: 16px; line-height: 1.15; }
}
/* queue: fixed to the bottom of the viewport on tablet and phone (user: it should always be reachable); the game gets room for it */
@container app (max-width: 89.99rem) {
  #rsapp .layout.has-queue .queue-panel { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; border-radius: 12px 12px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  #rsapp .layout.has-queue { padding-bottom: 72px; }
  #rsapp .layout.has-queue:not(.q-collapsed) { padding-bottom: 72px; }
  #rsapp .queue-panel:not(.collapsed)::before { content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(8,9,12,.55); }
}
/* phone: on the game screen the app's bottom nav gives way to the game's own bar (Queue · Stats · Undo · More); it returns when you leave the table */
#rsapp .game-bar { display: none; }
#app.in-game .tabbar { display: none !important; }
@container app (max-width: 47.5rem) {
  .shell.in-game .main { padding-bottom: calc(4rem + env(safe-area-inset-bottom)); }
  #rsapp .game-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: fixed; inset: auto 0 0 0; z-index: 900; padding: 0 .25rem env(safe-area-inset-bottom); background: rgba(19,22,28,.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid rgba(255,255,255,.1); }
  #rsapp .game-bar button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 4rem; background: none; border: 0; color: #98a0ae; font: 700 11px/1 var(--sans, system-ui, sans-serif); letter-spacing: .02em; cursor: pointer; }
  #rsapp .game-bar button svg { width: 22px; height: 22px; }
  #rsapp .game-bar button.on { color: #eef1f6; }
  #rsapp .game-bar .gb-n { position: absolute; top: 8px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e0af68; color: #0b0c10; font: 700 11px/18px var(--band-mono); }
  #rsapp .layout.has-queue .queue-panel { bottom: calc(4rem + env(safe-area-inset-bottom)); border-radius: 12px 12px 0 0; }
  #rsapp .layout.has-queue .queue-panel.collapsed { display: none; } /* the bar's Queue button is the peek on phones */
  #rsapp .layout.has-queue { padding-bottom: calc(4rem + 8px); }
  #rsapp header .toolbar { display: none; }
}
#rsapp .game-bar .gb-n.hidden { display: none; } #rsapp .game-bar button:disabled { opacity: .4; }
/* Board with 1–2 tables: wide rows, one per table */
.bd-grid.few { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
.bd-grid.few .bd-tile { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; grid-template-areas: "head rows foot" "sub rows foot"; align-items: center; column-gap: 28px; min-height: 150px; padding: 18px 24px; }
.bd-grid.few .bd-head { grid-area: head; flex-direction: column; align-items: flex-start; gap: 8px; align-self: end; }
.bd-grid.few .bd-tbl { font-size: 30px; }
.bd-grid.few .bd-sub { grid-area: sub; margin-top: 0; align-self: start; }
.bd-grid.few .bd-rows, .bd-grid.few .bd-big { grid-area: rows; }
.bd-grid.few .bd-rows { gap: 10px; } .bd-grid.few .bd-name { font-size: 26px; } .bd-grid.few .bd-score { font-size: 64px; min-width: 50px; }
.bd-grid.few .bd-h { font-size: 40px; }
.bd-grid.few .bd-foot, .bd-grid.few .bd-cta { grid-area: foot; margin: 0; align-self: center; justify-self: end; text-align: right; }
@container app (max-width: 56rem) { .bd-grid.few .bd-tile { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "sub" "rows" "foot"; row-gap: 10px; } .bd-grid.few .bd-head { flex-direction: row; align-items: baseline; } .bd-grid.few .bd-foot, .bd-grid.few .bd-cta { justify-self: start; text-align: left; } }

/* ===== review M picks (20 Oct): N3 deep plate + platinum numerals · N5 narrow phone plate with icon pills ===== */
#rsapp .band { --plate: oklch(.52 .15 var(--h1)); --plate2: oklch(.46 .14 var(--h2)); }
#rsapp .band .plate { color: #fff; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.28)), linear-gradient(180deg, var(--plate), var(--plate2)); }
#rsapp .band .plate .score { background: linear-gradient(170deg, #ffffff 0%, #eef1f6 38%, #b9c0cc 58%, #f4f6fa 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)) drop-shadow(0 10px 22px rgba(0,0,0,.35)); }
#rsapp .band .plate .cond { color: rgba(255,255,255,.85); }
#rsapp .band.hill .plate { background: #0b0c10; } #rsapp .band.hill .plate .score { background: linear-gradient(170deg, #fff3cf 0%, #f0c674 45%, #c99a3e 62%, #ffe4a3 100%); -webkit-background-clip: text; background-clip: text; } #rsapp .band.hill .plate .cond { color: #f0c674; }
#rsapp .mid .rail-key.primary, #rsapp .pts .band .pts-ball { background: var(--plate); color: #fff; }
#rsapp .pts .band .pts-ball:disabled { background: rgba(255,255,255,.06); color: #98a0ae; }
/* N5 on phones: plate 88 px, pills are glyphs only, the partner keeps its role glyph */
@container app (max-width: 40rem) {
  #rsapp .band, #rsapp .band.band-r { grid-template-columns: 88px minmax(0, 1fr); }
  #rsapp .band.band-r { grid-template-columns: minmax(0, 1fr) 88px; }
  .band .plate { width: 112px; } .band .plate-in { margin-left: 16px; gap: 4px; } .band-r .plate-in { margin-right: 16px; }
  .band .plate .score { font-size: 64px; } .band .plate .cond { font-size: 10px; letter-spacing: .08em; }
  .band .strip { left: 112px; } .band-r .strip { right: 112px; }
  #rsapp .band .card:not(.shooting) .role-badge { display: inline-flex; }
  #rsapp .band .card:not(.shooting) .pname { opacity: .55; }
  #rsapp .band .role-badge, #rsapp .band .pill-shooting { width: 30px; height: 30px; padding: 0; border-radius: 50%; justify-content: center; }
  #rsapp .band .role-badge .rb-txt, #rsapp .band .pill-shooting { font-size: 0; }
  #rsapp .band .pill-shooting::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #0b0c10; }
  #rsapp .band .role-badge svg { width: 15px; height: 15px; margin: 0; }
  #rsapp .band .card .pname { font-size: 30px; }
}
/* review M: no colour dots on the band rows (the plate carries the colour); the shooter is marked by the Shooting pill */
#rsapp .band .card .pdot, #rsapp .pts .band .card .cue, #rsapp .pts .band .card .pdot { display: none; }

/* ===== review M · round 2 (20 Oct) ===== */
/* A. compact game header (approved D/L frames): one 60 px row (back · eyebrow + title · table chips · tools), then a 40 px mono line: Session · Match · pause */
#rsapp header.sub-head { row-gap: 0; min-height: 60px; padding: 0; margin-bottom: 0; }
#rsapp header.sub-head > .timers, #rsapp header.sub-head:has(> #tableChips:not(.hidden)) > .timers { order: 9; flex: 1 0 100%; justify-content: flex-start; align-items: center; gap: 20px; height: 40px; margin: 6px 0 0; padding: 0 2px; border-top: 1px solid rgba(255,255,255,.08); font: 500 13px var(--band-mono); color: #98a0ae; font-variant-numeric: tabular-nums; }
#rsapp header.sub-head .timer { padding: 0; min-height: 0; border: 0; background: none; border-radius: 0; gap: 8px; font: inherit; letter-spacing: 0; text-transform: none; color: inherit; }
#rsapp header.sub-head .timer b { font: 600 13px var(--band-mono); color: #eef1f6; }
#rsapp header.sub-head .pause-btn { width: 28px; height: 28px; border-radius: 4px; background: #20242d; }
#rsapp header.sub-head .pause-btn svg { width: 12px; height: 12px; }
#rsapp header.sub-head .tchips { padding: 3px; border: 0; border-radius: 7px; background: #13161c; }
#rsapp header.sub-head .tchip { min-height: 38px; padding: 0 14px; border-radius: 5px; font-size: 13px; font-weight: 600; color: #98a0ae; }
#rsapp header.sub-head .tchip.on { background: #20242d; color: #eef1f6; box-shadow: inset 0 -2px 0 #7dcfff; }
#rsapp header.sub-head #titleText { font-size: 22px !important; line-height: 1; }
#rsapp #gameScreen { padding-top: 0; } #rsapp #gameScreen .match { padding-top: 12px; }
/* desk and tablet: the timers sit on the breadcrumb row, right-aligned */
@container app (min-width: 40.01rem) { .main:has(> .crumbs) #rsapp header.sub-head { position: relative; } .main:has(> .crumbs) #rsapp header.sub-head > .timers, .main:has(> .crumbs) #rsapp header.sub-head:has(> #tableChips:not(.hidden)) > .timers { position: absolute; right: 0; top: -30px; height: 24px; width: auto; flex: none; margin: 0; border: 0; justify-content: flex-end; } }
@container app (max-width: 40rem) { #rsapp header.sub-head > .timers, #rsapp header.sub-head:has(> #tableChips:not(.hidden)) > .timers { gap: 14px; height: 36px; justify-content: space-between; } #rsapp #gameScreen .match { row-gap: 14px; } }
/* B. plate: quieter overlay, brighter platinum numerals */
#rsapp .band .plate { background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.18)), linear-gradient(180deg, var(--plate), var(--plate2)); }
#rsapp .band .plate .score { background: linear-gradient(172deg, #ffffff 0%, #f6f8fb 40%, #d3d9e3 58%, #ffffff 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 2px 0 rgba(0,0,0,.3)) drop-shadow(0 8px 18px rgba(0,0,0,.3)); }
#rsapp .band .plate .cond { color: rgba(255,255,255,.92); }
/* C. point-game who-breaks overlay: its own layer, the cards don't move */
#rsapp .pts .match { position: relative; }
#rsapp .pts-wb { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92%, 560px); margin: 0; z-index: 6; }
#rsapp .pts:has(.pts-wb) .pts-tbl, #rsapp .pts:has(.pts-wb) .pts-balls { opacity: .35; }
/* E. shot clock: yesterday's tile geometry stays (skewed, overflowing the rail); only the digit ink is white now */
#rsapp .clock-rail.tile .cr-num, #rsapp .clock-rail.big .cr-num { color: #fff; -webkit-text-fill-color: #fff; background: none; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
#rsapp .clock-rail.tile .cr-fill { background: rgba(224,175,104,.55); }
#rsapp .clock-rail.big .cr-fill, #rsapp .clock-rail.expired .cr-fill { background: rgba(247,118,142,.55); }
#rsapp .clock-rail:not(.hidden) { margin-bottom: 34px; }
/* F. queue sheet / rail: the approved rows (#, who, tonight, state, remove), no team cards, no hatch */
#rsapp .queue-panel:not(.collapsed) #queueList { display: flex; flex-direction: column; gap: 0; max-height: min(52dvh, 480px); }
#rsapp .queue-panel .q-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 12px 0 4px; border-top: 1px solid rgba(255,255,255,.08); background: none !important; box-shadow: none !important; border-radius: 0; margin: 0; }
#rsapp .queue-panel .q-row.next { background: rgba(224,175,104,.08) !important; }
#rsapp .queue-panel .q-row::before, #rsapp .queue-panel .q-row .band-hatch, #rsapp .queue-panel .q-row .team-head .team-name, #rsapp .queue-panel .q-row .team-head .pair-score, #rsapp .queue-panel .q-row .team-head .score-badge { display: none !important; }
#rsapp .queue-panel .q-row .team-head { display: contents; }
#rsapp .queue-panel .q-row .t-grip { order: -2; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 44px; color: #98a0ae; font-size: 16px; cursor: grab; }
#rsapp .queue-panel .q-n { order: -1; font: italic 800 18px/1 var(--band-font); color: #98a0ae; min-width: 20px; }
#rsapp .queue-panel .q-row.next .q-n { color: #e0af68; }
#rsapp .queue-panel .q-row .card { display: inline-flex; align-items: center; gap: 6px; min-height: 0; padding: 0; background: none !important; box-shadow: none !important; border: 0; font: 700 17px/1.1 var(--band-font); color: #eef1f6; }
#rsapp .queue-panel .q-row .card .pdot, #rsapp .queue-panel .q-row .card .pav { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
#rsapp .queue-panel .q-row .card + .card::before { content: "+"; color: #98a0ae; font: 500 15px var(--sans, system-ui, sans-serif); margin-right: 6px; }
#rsapp .queue-panel .q-row .card .card-x { margin-left: 0; width: 32px; height: 32px; border-radius: 6px; color: #98a0ae; }
#rsapp .queue-panel .q-row .q-rec { margin-left: auto; font: 500 13px var(--band-mono); color: #eef1f6; font-variant-numeric: tabular-nums; }
#rsapp .queue-panel .q-row .q-state { display: none; }
#rsapp .queue-panel .q-row > .card, #rsapp .queue-panel .q-row .team-head { flex: none; width: auto; }
#rsapp .queue-panel .q-row .q-rec { min-width: 44px; text-align: right; }
#rsapp .queue-panel #queueFoot { padding-top: 10px; }
#rsapp .queue-panel #queueFoot .add-open { width: 100%; min-height: 44px; border: 0; border-radius: 6px; background: #7dcfff; color: #0b0c10; font-size: 13px; font-weight: 700; }
/* G. phone game bar: the More menu carries the toolbar's other actions */
#rsapp .game-bar { position: fixed; }
#rsapp .gb-menu { position: absolute; right: 8px; bottom: calc(100% + 8px); display: flex; flex-direction: column; width: 220px; padding: 6px; border-radius: 8px; background: #20242d; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 16px 40px rgba(0,0,0,.5); }
#rsapp .gb-menu.hidden { display: none; }
#rsapp .gb-menu button { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border: 0; border-radius: 6px; background: none; color: #eef1f6; font: 600 14px var(--sans, system-ui, sans-serif); text-align: left; cursor: pointer; }
#rsapp .gb-menu button:last-child { color: #f7768e; }
/* H. phone pills: 26 px glyphs, centred on the name line */
@container app (max-width: 40rem) {
  #rsapp .band .role-badge, #rsapp .band .pill-shooting { width: 26px; height: 26px; flex: none; align-self: center; margin: 0; padding: 0; line-height: 1; letter-spacing: 0; display: inline-grid; place-items: center; }
  #rsapp .band .pill-shooting::before { width: 9px; height: 9px; }
  #rsapp .band .role-badge svg { width: 14px; height: 14px; display: block; }
  #rsapp .band .role-badge .rb-txt { display: none; }
  #rsapp .band .card { align-items: center; gap: 8px; min-height: 32px; }
  #rsapp .band .card .pname { line-height: 1; display: block; padding-top: .04em; }
}
#rsapp .queue-panel .tcard.q-row { flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; border: 0 !important; outline: 0 !important; padding: 0 12px 0 4px; gap: 12px; min-height: 56px; }
#rsapp .queue-panel .tcard.q-row > .card, #rsapp .queue-panel .tcard.q-row .team-head { flex: none; width: auto; }
#rsapp .queue-panel .q-row .card .pname { font: inherit; opacity: 1; }
#rsapp .queue-panel .q-row .card-x { order: 9; }
.fp-strip { align-items: center; padding: .45rem .9rem; } .fp-strip > .btn { margin: 0 0 0 auto; } .fp-strip .fp-x { width: 36px; height: 36px; display: inline-grid; place-items: center; border: 0; border-radius: 6px; background: none; color: var(--dim); font-size: 18px; cursor: pointer; }
#rsapp .pts .band .pts-act, #rsapp .pts .band .pts-ball { position: relative; overflow: hidden; }
/* ===== review M round 4 (20 Oct) ===== */
/* statistics: the pair detail header is a small band (plate + names + strip), the old team card is gone */
#rsapp .md-band { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "plate names" "strip strip"; border-radius: 10px; background: #13161c; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); overflow: hidden; margin-bottom: 12px; }
#rsapp .md-plate { grid-area: plate; display: grid; grid-template-columns: auto auto auto; grid-template-areas: "w d l" "c c c"; align-content: center; align-items: baseline; column-gap: 2px; row-gap: 4px; padding: 12px 26px 12px 16px; background: linear-gradient(180deg, oklch(.52 .12 var(--h0)), oklch(.46 .12 var(--h1))); clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); font: italic 800 36px/1 var(--band-font); font-variant-numeric: tabular-nums; color: #fff; }
#rsapp .md-plate small { font-size: 22px; opacity: .8; } #rsapp .md-plate small.l { color: #ffd0d8; }
#rsapp .md-plate .md-cond { grid-area: c; font: 600 11px/1 var(--sans, system-ui); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.75); }
#rsapp .md-names { grid-area: names; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 14px; min-width: 0; }
#rsapp .md-names .md-title { flex: 0 0 100%; font: italic 800 15px/1 var(--band-font); letter-spacing: .04em; text-transform: uppercase; color: #98a0ae; }
#rsapp .md-p { display: inline-flex; align-items: center; gap: 8px; font: 600 17px/1.2 var(--sans, system-ui); color: #eef1f6; }
#rsapp .md-vs { font: italic 800 13px/1 var(--band-font); color: #98a0ae; }
#rsapp .md-strip { grid-area: strip; display: flex; gap: 2px; height: 8px; padding: 0 2px 2px; }
#rsapp .md-strip i { flex: 1 1 0; max-width: 28px; border-radius: 1px; background: rgba(255,255,255,.08); } #rsapp .md-strip i.w { background: #9ece6a; } #rsapp .md-strip i.l { background: #f7768e; }
/* shot clock: the > 10 s number sits on the rail's centre line (the rail has 16 px of bar padding at the bottom) */
#rsapp .clock-rail:not(.tile):not(.big) .cr-num { line-height: 1; padding-top: 0; }
/* quick play strip: one row, every child centred on it */
.fp-strip { display: flex; align-items: center; gap: 12px; padding: .45rem .9rem; } .fp-strip p { flex: 1 1 12rem; } .fp-strip .badge { line-height: 1.2; } .panel.fp-strip > .btn.sm, .panel.fp-strip > .btn, .fp-strip .fp-x { margin: 0; align-self: center; } .panel.fp-strip > .btn.sm { margin-left: auto; min-height: 36px; } .fp-strip .fp-x { position: relative; } .fp-strip .fp-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
/* phones: the pre-game line wraps instead of overflowing; the quick play strip stacks text over its keys */
@container app (max-width: 40rem) { .timer.pre-msg { white-space: normal; } #rsapp header.sub-head > .timers { flex-wrap: wrap; height: auto; min-height: 36px; row-gap: 4px; } .fp-strip { flex-wrap: wrap; } .fp-strip p { flex: 1 1 100%; order: 1; } .fp-strip .badge { order: 0; } .fp-strip > .btn { order: 2; margin-left: 0; } .fp-strip .fp-x { order: 3; margin-left: auto; } }
/* ===== review M · round 5 (20 Oct) ===== */
/* Shot clock, > 10 s: the digits box centres in the rail's content area (same line as the pause key), not in the full rail with the bar */
#rsapp .clock-rail:not(.tile):not(.big) .cr-digits { align-self: center; margin-bottom: 0; }
#rsapp .clock-rail:not(.tile):not(.big) .cr-tile { height: auto; }
#rsapp .clock-rail:not(.tile):not(.big) .cr-num { line-height: .8; padding: 0 12px; transform: translateY(-.02em); }
/* Shot clock, ≤ 10 s: the tile bleeds 12 px above and below the rail (18 px in the last five seconds); digits dead-centre in the tile */
#rsapp .clock-rail.tile .cr-digits, #rsapp .clock-rail.big .cr-digits { align-self: stretch; }
#rsapp .clock-rail.tile .cr-tile { height: calc(100% + 24px); margin: -12px 0; }
#rsapp .clock-rail.big .cr-tile { height: calc(100% + 36px); margin: -18px 0; }
#rsapp .clock-rail.tile .cr-num, #rsapp .clock-rail.big .cr-num { line-height: .8; padding: 0; transform: skewX(8deg) translate(-.04em, -.03em); }
#rsapp .match > .mid, #rsapp .match { overflow: visible; }
/* Bands: twice the air between the plate and the names/keys; three-digit scores (14.1) shrink to fit the plate */
/* the plate is wider than its grid column (it overhangs by 40/32/26/24 px, skew included), so the gap is overhang + clear air */
#rsapp .band, #rsapp .band.band-r { column-gap: 64px; }
@container app (max-width: 89.99rem) { #rsapp .band, #rsapp .band.band-r { column-gap: 60px; } }
@container app (max-width: 56rem) { #rsapp .band, #rsapp .band.band-r { column-gap: 52px; } }
@container app (max-width: 40rem) { #rsapp .band, #rsapp .band.band-r { column-gap: 26px; } }
#rsapp .band .plate .score.three { letter-spacing: -.04em; font-size: 104px; }
@container app (max-width: 89.99rem) { #rsapp .band .plate .score.three { font-size: 84px; } }
@container app (max-width: 56rem) { #rsapp .band .plate .score.three { font-size: 62px; } }
@container app (max-width: 40rem) { #rsapp .band .plate .score.three { font-size: 40px; letter-spacing: -.05em; } }
#rsapp .pts .band .score.neg.three { font-size: 84px; }
/* Point games: the balls tray sits on the centre line between the two cards */
#rsapp .pts .pts-mid { grid-template-rows: auto; align-content: center; }
#rsapp .pts .pts-mid > .pts-rk { margin: 0; }
/* ===== Match rows in the band language (tournament schedule, On the tables, session rows, table view) ===== */
.main .mr, .main .mr:has(> .mr-st:not(:empty)) { height: 56px; min-height: 56px; margin-block: 10px; padding: 0 14px; column-gap: 0; grid-template-columns: minmax(0, 1fr) 64px 6px 64px minmax(0, 1fr) !important; background: #181b22; border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); border-radius: 8px; overflow: visible; }
.main .mr:has(> .mr-sc.empty) { grid-template-columns: minmax(0, 1fr) 0 28px 0 minmax(0, 1fr) !important; }
.main .mr > .mr-vs { display: block !important; visibility: hidden; width: 0; min-width: 0; overflow: hidden; }
.main .mr > .mr-a { grid-column: 1; } .main .mr > .mr-a + .mr-sc { grid-column: 2; } .main .mr > .mr-vs { grid-column: 3; } .main .mr > .mr-vs + .mr-sc { grid-column: 4; } .main .mr > .mr-b { grid-column: 5; } .main .mr > .mr-st { grid-column: auto; }
.main .mr > .mr-a { padding-inline-end: 16px; } .main .mr > .mr-b { padding-inline-start: 16px; padding-inline-end: 0 !important; }
.main .mr .bk-n { display: block; -webkit-line-clamp: unset; max-height: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.main .mr .bk-n { font: italic 800 17px/1.15 var(--band-font); letter-spacing: .02em; text-transform: uppercase; color: #eef1f6; }
.main .mr > .bk-side.won .bk-n { color: #fff; } .main .mr > .bk-side.lost .bk-n, .main .mr.done > .bk-side:not(.won) .bk-n { color: #98a0ae; }
.main .mr > .bk-side.pin .bk-n, .main .mr > .bk-side.hl .bk-n { color: var(--color-highlight); }
.main .mr-sc, .main .mr-sc.w, .main .mr-sc.l { position: relative; width: 64px !important; height: 56px; margin: 0; padding: 0; transform: none; border: 0; border-radius: 0; box-shadow: none; display: grid; place-items: center; font: italic 800 30px/1 var(--band-font); font-variant-numeric: tabular-nums; letter-spacing: -.02em; background: linear-gradient(180deg, #2d323d, #22262e); }
.main .mr > .mr-a + .mr-sc { clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%); border-radius: 0; }
.main .mr > .mr-vs + .mr-sc { clip-path: polygon(9px 0, 100% 0, 100% 100%, 0 100%); }
/* digits: platinum on graphite, like the plates; the leader's plate is green, the loser's stays graphite with dim digits, the hill is gold */
.main .mr-sc { background-image: linear-gradient(180deg, #2d323d, #22262e); }
.main .mr-sc { color: #eef1f6; -webkit-text-fill-color: #eef1f6; }
.main .mr-sc.w { background-image: linear-gradient(180deg, oklch(.66 .15 135), oklch(.52 .14 135)); color: #fff; -webkit-text-fill-color: #fff; }
.main .mr-sc.l { color: #98a0ae; -webkit-text-fill-color: #98a0ae; }
.main .mr-sc.hill { background-image: linear-gradient(180deg, #e9c36a, #b98a37); color: #0b0c10; -webkit-text-fill-color: #0b0c10; box-shadow: none; }
.main .mr-sc.empty { width: 0 !important; }
.main .mr.st-live, .main .mr.live { box-shadow: inset 0 0 0 1px rgba(158,206,106,.45); }
.main .mr.st-need { box-shadow: inset 0 0 0 1px rgba(224,175,104,.5); }
.main .mr-st { top: 0; translate: 0 -50%; }
@container app (max-width: 40rem) {
  .main .mr, .main .mr:has(> .mr-st:not(:empty)) { height: 48px; min-height: 48px; padding: 0 10px; grid-template-columns: minmax(0, 1fr) 52px 4px 52px minmax(0, 1fr) !important; }
  .main .mr-sc, .main .mr-sc.w, .main .mr-sc.l { width: 52px !important; height: 48px; font-size: 26px; }
  .main .mr .bk-n { font-size: 15px; }
  .main .mr > .mr-a { padding-inline-end: 10px; } .main .mr > .mr-b { padding-inline-start: 10px; }
}
/* table view (the big score when a tournament match is open): same plates, large */
.tbv-sc, .tbv-sc.w, .tbv-sc.l { min-width: 7.5rem; height: 7rem; padding: 0 1.25rem; transform: none; border: 0; border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.35); background: linear-gradient(180deg, #2d323d, #22262e); font: italic 800 4.5rem/1 var(--band-font); font-variant-numeric: tabular-nums; color: #eef1f6; }
.tbv-side:first-child .tbv-sc { clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); } .tbv-side:last-child .tbv-sc { clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%); }
.tbv-sc.w { background: linear-gradient(180deg, oklch(.66 .15 135), oklch(.52 .14 135)); color: #fff; } .tbv-sc.l { color: #98a0ae; }
.tbv-side.hill .tbv-sc { background: linear-gradient(180deg, #e9c36a, #b98a37); color: #0b0c10; box-shadow: 0 12px 30px rgba(224,175,104,.3); }
.tbv-vs { display: none; }
.tbv-n { font: italic 800 var(--text-xl)/1.1 var(--band-font); text-transform: uppercase; letter-spacing: .02em; }
/* ===== review M · round 6 (20 Oct) ===== */
/* Shot clock: Reset key next to Pause (hold to confirm); hidden while the clock is expired (Pause already reads RESET then) */
#rsapp .cr-reset { height: 56px; padding: 0 12px; font-size: 15px; color: #98a0ae; }
#rsapp .clock-rail.locked .cr-reset { display: inline-grid; }
#rsapp .cr-pause:disabled { opacity: .35; cursor: default; }
@container match (max-width: 36rem) { #rsapp .clock-rail { grid-template-columns: 44px auto minmax(0, 1fr) auto; grid-template-areas: "p r d e" "k k k k"; } #rsapp .cr-reset { grid-area: r; height: 44px; padding: 0 8px; font-size: 13px; } }
/* Phones: no tile; the digits just change colour (amber ≤ 10 s, red ≤ 5 s) */
@container app (max-width: 40rem) {
  #rsapp .clock-rail.tile .cr-digits, #rsapp .clock-rail.big .cr-digits { align-self: center; }
  #rsapp .clock-rail.tile .cr-tile, #rsapp .clock-rail.big .cr-tile { width: auto; height: auto; margin: 0; background: none; box-shadow: none; transform: none; overflow: visible; animation: none; }
  #rsapp .clock-rail.tile .cr-fill, #rsapp .clock-rail.big .cr-fill { display: none; }
  #rsapp .clock-rail.tile .cr-num, #rsapp .clock-rail.big .cr-num { font-size: 32px; min-width: 56px; padding: 0 6px; transform: none; text-shadow: none; color: #e0af68; -webkit-text-fill-color: #e0af68; }
  #rsapp .clock-rail.big .cr-num, #rsapp .clock-rail.expired .cr-num { color: #f7768e; -webkit-text-fill-color: #f7768e; }
}
/* Motion for state changes: dialogs and the queue drawer ease in and out (320 ms ease-out), rows rise in when the drawer opens */
@keyframes rs-rise { from { opacity: 0; transform: translateY(8px); } }
dialog.dlg, .main dialog, #rsapp dialog { opacity: 0; transform: translateY(10px) scale(.985); transition: opacity .24s cubic-bezier(.2,.8,.2,1), transform .28s cubic-bezier(.2,.8,.2,1), overlay .28s allow-discrete, display .28s allow-discrete; }
dialog.dlg[open], .main dialog[open], #rsapp dialog[open] { opacity: 1; transform: none; }
@starting-style { dialog.dlg[open], .main dialog[open], #rsapp dialog[open] { opacity: 0; transform: translateY(10px) scale(.985); } }
dialog::backdrop { background: rgba(5,6,10,.6); transition: background .28s, overlay .28s allow-discrete, display .28s allow-discrete; }
@starting-style { dialog[open]::backdrop { background: rgba(5,6,10,0); } }
#rsapp .queue-panel .q-row, #rsapp .queue-panel #queueFoot, #rsapp .queue-panel .q-peek { animation: rs-rise .28s cubic-bezier(.2,.8,.2,1) both; }
#rsapp .queue-panel .q-row:nth-child(2) { animation-delay: .03s; } #rsapp .queue-panel .q-row:nth-child(3) { animation-delay: .06s; } #rsapp .queue-panel .q-row:nth-child(n+4) { animation-delay: .09s; }
#rsapp .queue-panel, #rsapp .layout { transition: grid-template-columns .3s cubic-bezier(.2,.8,.2,1), padding .3s cubic-bezier(.2,.8,.2,1); }
#rsapp #whoBreaks:not(.hidden), #rsapp .wb-ov:not(.hidden) { animation: rs-rise .3s cubic-bezier(.2,.8,.2,1) both; }
@media (prefers-reduced-motion: reduce) { dialog.dlg, .main dialog, #rsapp dialog, dialog::backdrop, #rsapp .queue-panel, #rsapp .layout { transition: none; } #rsapp .queue-panel .q-row, #rsapp .queue-panel #queueFoot, #rsapp .queue-panel .q-peek, #rsapp #whoBreaks, #rsapp .wb-ov { animation: none; } }
/* ===== Round P/Q/R motion (approved 20 Oct): P2 stamp, Q1 odometer, Q2 embers, Q3 sink, Q4 won, R1 swap, R2b toss, R3 hold ===== */
/* Q1 odometer: the old digit (.score-prev) rolls up with blur, the new one rolls in from below with a squash; soft inner pulse on the plate */
@keyframes q1-out { 0% { transform: translateY(0); opacity: 1; filter: blur(0); } 50% { filter: blur(3px); } 100% { transform: translateY(-70%); opacity: 0; filter: blur(4px); } }
@keyframes q1-in { 0% { transform: translateY(70%) scaleY(1.06); opacity: 0; filter: blur(4px); } 60% { filter: blur(1px); } 80% { transform: translateY(-2%) scaleY(.96); opacity: 1; filter: blur(0); } 100% { transform: translateY(0) scaleY(1); } }
@keyframes q1-pulse { 0%, 100% { box-shadow: 12px 0 30px rgba(0,0,0,.35), inset 0 0 0 0 rgba(255,255,255,0); } 40% { box-shadow: 12px 0 30px rgba(0,0,0,.35), inset 0 0 0 3px rgba(255,255,255,.35); } }
#rsapp .band .plate .score-wrap { display: grid; place-items: center; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); }
#rsapp .band .plate .score-wrap > .score, #rsapp .band .plate .score-wrap > .score-prev { grid-area: 1 / 1; }
#rsapp .band .plate .score-prev { pointer-events: none; animation: q1-out .5s cubic-bezier(.3,.7,.3,1) both; }
#rsapp .band .plate .score.roll { animation: q1-in .55s cubic-bezier(.3,.7,.3,1) both; transform-origin: 50% 100%; }
#rsapp .band .plate.pulse { animation: q1-pulse .7s ease-out both; }
/* P2 rack stamp: the new segment drops in like a stamp, earlier segments ripple once */
@keyframes p2-stamp { 0% { transform: scale(1.6); opacity: 0; filter: brightness(2); } 55% { transform: scale(.92); opacity: 1; } 100% { transform: scale(1); filter: none; } }
@keyframes p2-ripple { 0% { transform: translateY(0); } 40% { transform: translateY(-3px); } 100% { transform: translateY(0); } }
#rsapp .band .strip i.grow { transform-origin: center; animation: p2-stamp .45s cubic-bezier(.2,.8,.2,1) both; }
#rsapp .band-r .strip i.grow { transform-origin: center; }
#rsapp .band .strip.ripple i:not(.grow):not(.live) { animation: p2-ripple .4s ease-out both; }
#rsapp .band .strip.ripple i:nth-last-child(3) { animation-delay: .04s; } #rsapp .band .strip.ripple i:nth-last-child(4) { animation-delay: .08s; } #rsapp .band .strip.ripple i:nth-last-child(n+5) { animation-delay: .12s; }
/* Q2 hill embers: stronger flicker, six sparks rising from the plate, gold glow on the slanted edge bleeding into the names */
@keyframes q2-ember { 0%, 100% { filter: brightness(1); } 20% { filter: brightness(1.18); } 45% { filter: brightness(.94); } 65% { filter: brightness(1.12); } }
@keyframes q2-spark { 0% { transform: translateY(0) scale(1); opacity: 0; } 8% { opacity: 1; } 100% { transform: translateY(-120px) translateX(var(--dx)) scale(.2); opacity: 0; } }
@keyframes q2-edge { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
#rsapp .band.hill .plate { animation: q2-ember 3.2s ease-in-out infinite; box-shadow: 12px 0 30px rgba(0,0,0,.35), inset -3px 0 0 #f0c674, inset -6px 0 18px rgba(240,198,116,.45); }
#rsapp .band-r.hill .plate { box-shadow: -12px 0 30px rgba(0,0,0,.35), inset 3px 0 0 #f0c674, inset 6px 0 18px rgba(240,198,116,.45); }
#rsapp .band.hill .plate .score { filter: drop-shadow(0 0 14px rgba(240,198,116,.55)); }
#rsapp .band.hill .plate .spark { position: absolute; bottom: 30px; width: 4px; height: 4px; border-radius: 50%; background: #ffe4a3; box-shadow: 0 0 10px #f0c674; animation: q2-spark 2.6s ease-out infinite; pointer-events: none; }
#rsapp .band.hill .plate .spark:nth-child(1) { left: 55%; --dx: -18px; animation-duration: 2.4s; } #rsapp .band.hill .plate .spark:nth-child(2) { left: 72%; bottom: 60px; --dx: 12px; animation-duration: 2.9s; animation-delay: .7s; } #rsapp .band.hill .plate .spark:nth-child(3) { left: 44%; --dx: 22px; animation-duration: 2.1s; animation-delay: 1.3s; } #rsapp .band.hill .plate .spark:nth-child(4) { left: 85%; bottom: 44px; --dx: -10px; animation-duration: 2.7s; animation-delay: 1.9s; } #rsapp .band.hill .plate .spark:nth-child(5) { left: 63%; bottom: 20px; width: 3px; height: 3px; --dx: 6px; animation-duration: 3.3s; animation-delay: .3s; } #rsapp .band.hill .plate .spark:nth-child(6) { left: 90%; bottom: 80px; --dx: 26px; animation-duration: 2.5s; animation-delay: 2.4s; }
.band .edge-glow i:nth-child(1) { width: 220px; background: linear-gradient(90deg, rgba(240,198,116,.55), rgba(240,198,116,.18) 40%, transparent); filter: blur(6px); animation: q2-edge 2.8s ease-in-out infinite; }
.band-r .edge-glow i:nth-child(1) { background: linear-gradient(270deg, rgba(240,198,116,.55), rgba(240,198,116,.18) 40%, transparent); }
/* Q3 pocket drop: each ball sits in a fixed slot and sinks in place; the count flips */
@keyframes q3-sink { 0% { transform: translateY(0) scale(1); opacity: 1; filter: none; } 35% { transform: translateY(-5px) scale(1.08); } 100% { transform: translateY(0) scale(.7); opacity: .18; filter: grayscale(1); } }
@keyframes q3-count { 0% { transform: translateY(0); } 45% { transform: translateY(-100%); } 46% { transform: translateY(100%); } 100% { transform: translateY(0); } }
#rsapp .pts .balls-tray .ball.sink { animation: q3-sink .6s cubic-bezier(.2,.8,.2,1) both; }
#rsapp .pts .pts-on b { display: inline-block; overflow: hidden; } #rsapp .pts .pts-on b.flip { animation: q3-count .45s ease-out both; }
/* Q4 match won: the plate turns gold with a sheen pass, names lift, label rises */
@keyframes q4-gold { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes q4-sheen { 0% { transform: translateX(-140%) skewX(-20deg); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateX(300%) skewX(-20deg); opacity: 0; } }
@keyframes q4-lift { 0% { transform: translateY(0); } 45% { transform: translateY(-6px); } 100% { transform: translateY(0); } }
@keyframes q4-label { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
#rsapp .band.won .plate { background: linear-gradient(90deg, #f0c674 0%, #e2b65e 50%, var(--hue) 50%, var(--hue2) 100%) !important; background-size: 200% 100% !important; animation: q4-gold 1.2s cubic-bezier(.2,.8,.2,1) both; overflow: hidden; }
#rsapp .band.won .plate .sheen { position: absolute; top: 0; bottom: 0; left: 0; width: 90px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: q4-sheen 1.4s ease-in-out .3s both; pointer-events: none; }
#rsapp .band.won .card { animation: none; } #rsapp .band.won .card + .card { animation-delay: .58s; }
#rsapp .band.won .team-label { animation: none; }
/* R1 queue → table: cards out (slide under the plate), plate recolours, cards in (drawn out from under it). Timings driven by .swap-out / .swap-in on the band. */
@keyframes r1-out { to { transform: translateX(var(--ox, -170px)); opacity: 0; } }
@keyframes r1-in { from { transform: translateX(var(--ox, -170px)); opacity: 0; } }
#rsapp .band.swap-out .card, #rsapp .band.swap-out .team-label { animation: r1-out .5s cubic-bezier(.5,0,.3,1) both; } #rsapp .band.swap-out .card + .card { animation-delay: .06s; }
#rsapp .band-r.swap-out .card, #rsapp .band-r.swap-out .team-label, #rsapp .band-r.swap-in .card, #rsapp .band-r.swap-in .team-label { --ox: 170px; }
#rsapp .band.swap-in .card, #rsapp .band.swap-in .team-label { animation: r1-in .55s cubic-bezier(.2,.8,.2,1) both; } #rsapp .band.swap-in .card + .card { animation-delay: .06s; }
#rsapp .band .plate, #rsapp .band { transition: --h1 .7s ease, --h2 .7s ease, box-shadow .3s; }
/* R2b turn over: a loose cue ball (#cueToss) is tossed from the previous shooter's name to the new one; the band it leaves dims */
@keyframes r2b-toss { 0% { transform: translate(0, 0); } 25% { transform: translate(calc(var(--tx) * .22), calc(var(--ty) * .1 - 14px)); } 100% { transform: translate(var(--tx), var(--ty)); } }
#rsapp #cueToss { position: fixed; z-index: 60; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #d7dbe3 55%, #9aa1ad); box-shadow: 0 0 10px rgba(255,255,255,.35); pointer-events: none; animation: r2b-toss .55s cubic-bezier(.5,0,.3,1) both; }
#rsapp .band .card.shooting .pill-shooting, #rsapp .band .card.shooting .cue { opacity: 0; transition: opacity .15s; } #rsapp .band .card.shooting.landed .pill-shooting, #rsapp .band .card.shooting.landed .cue, #rsapp:not(.tossing) .band .card.shooting .pill-shooting, #rsapp:not(.tossing) .band .card.shooting .cue { opacity: 1; }
/* The cue ball glyph is the same disc on every width (phone pill becomes the disc) */
#rsapp .band .pill-shooting { width: 18px; height: 18px; padding: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #d7dbe3 55%, #9aa1ad); box-shadow: 0 0 10px rgba(255,255,255,.35); font-size: 0; flex: none; }
#rsapp .band .pill-shooting::before { display: none; }
@container app (max-width: 40rem) { #rsapp .band .pill-shooting { width: 16px; height: 16px; } }
/* R3 hold: every hold key. Press sinks 3%; fill sweeps left → right in the key's accent; label inverts under the fill; tick stamps in; key springs back */
@keyframes r3-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes r3-spring { 0% { transform: scale(.97); } 50% { transform: scale(1.03); } 100% { transform: scale(1); } }
@keyframes r3-tick { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.hold { position: relative; overflow: hidden; transition: transform .12s cubic-bezier(.2,.8,.2,1); }
.hold::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--hold-fill, var(--hue, #bb9af7)); transform: scaleX(0); transform-origin: left center; transition: none; }
.hold.holding { transform: scale(.97); box-shadow: none; }
.hold.holding::after { animation: r3-fill var(--hold, 1.5s) linear forwards; }
.hold.holding > *, .hold.held > * { position: relative; z-index: 2; }
.hold.held { animation: r3-spring .3s cubic-bezier(.2,.8,.2,1) both; color: #0b0c10 !important; }
.hold.held::after { transform: scaleX(1); background: var(--hold-fill, var(--hue, #bb9af7)); }
.hold.held::before { content: ""; position: absolute; right: 12px; top: 50%; z-index: 3; width: 18px; height: 18px; margin-top: -9px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0c10' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat; animation: r3-tick .3s cubic-bezier(.2,.8,.2,1) both; }
#rsapp .band .lose-btn.hold, #rsapp .ms-ns.hold, #rsapp .cr-reset.hold { --hold-fill: #f7768e !important; }
#rsapp .band .lose-btn.hold::after, #rsapp .band .act.hold::after, #rsapp .pts .band .hold::after, .hold::after { background: var(--hold-fill, var(--hue, #bb9af7)) !important; }
#rsapp .band .lose-btn.holding, #rsapp .band .act.holding { color: #eef1f6 !important; }
#rsapp .band .lose-btn.held, #rsapp .band .act.held, #rsapp .pts .band .held { color: #0b0c10 !important; }
#rsapp .band .act.hold { --hold-fill: var(--hue); } #rsapp .band .act.win.hold { --hold-fill: #9ece6a; }
#rsapp .pts .band .pts-act.hold, #rsapp .pts .band .pts-ball.hold { --hold-fill: var(--hue); }
#rsapp .pts .band .hold::after { inset: 0; height: auto; background: var(--hold-fill); }
@media (prefers-reduced-motion: reduce) {
  #rsapp .band .plate .score-prev, #rsapp .band .plate .score.roll, #rsapp .band .plate.pulse, #rsapp .band .strip i.grow, #rsapp .band .strip.ripple i, #rsapp .band.hill .plate, #rsapp .band.hill .plate .spark, .band .edge-glow i, #rsapp .pts .balls-tray .ball.sink, #rsapp .pts .pts-on b.flip, #rsapp .band.won .plate, #rsapp .band.won .plate .sheen, #rsapp .band.won .card, #rsapp .band.won .team-label, #rsapp .band.swap-out .card, #rsapp .band.swap-in .card, #rsapp .band.swap-out .team-label, #rsapp .band.swap-in .team-label, #rsapp #cueToss, .hold.held, .hold.held::before { animation: none; }
  .hold.holding { transform: none; }
}
/* fixes after verifier: sparks/sheen are absolute and hidden unless the band is on the hill / won; R3 hold rules win over kit.css */
#rsapp .band .plate { position: absolute; }
#rsapp .band .plate .spark, #rsapp .band .plate .sheen { position: absolute; display: none; margin: 0; }
#rsapp .band.hill .plate .spark { display: block; }
#rsapp .band.won .plate .sheen { display: block; }
#rsapp .hold.holding::after, .hold.holding::after { animation: r3-fill var(--hold, 1.5s) linear forwards !important; }
#rsapp .hold.holding, #rsapp .band .act.holding, #rsapp .band .lose-btn.holding { transform: scale(.97) !important; }
#rsapp .hold.held, #rsapp .band .act.held, #rsapp .band .lose-btn.held, #rsapp .pts .band .held { color: #0b0c10 !important; animation: r3-spring .3s cubic-bezier(.2,.8,.2,1) both; }
#rsapp .hold.held::before { content: ""; }
#rsapp .band .act.hold.held:not(.holding), #rsapp .band .lose-btn.hold.held:not(.holding), #rsapp .pts .band .hold.held:not(.holding), #rsapp .cr-reset.hold.held:not(.holding), #rsapp .hold.hold.held:not(.holding) { color: #0b0c10 !important; -webkit-text-fill-color: #0b0c10 !important; animation: r3-spring .3s cubic-bezier(.2,.8,.2,1) both !important; }
/* ===== Hold, authoritative (overrides kit.css .hold rules). Applies to every .hold key in every game type. ===== */
#rsapp .hold, #rsapp .band .act.hold, #rsapp .band .lose-btn.hold, #rsapp .pts .band .pts-act, #rsapp .pts .band .pts-ball, #rsapp .cr-reset, #rsapp .ms-ns { position: relative; overflow: hidden; isolation: isolate; }
#rsapp .hold::after, #rsapp .pts .band .pts-act::after, #rsapp .pts .band .pts-ball::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--hold-fill, var(--hue, #bb9af7)) !important; opacity: .92; transform: scaleX(0); transform-origin: left center; transition: none; height: auto; }
#rsapp .hold > *, #rsapp .pts .band .pts-act > *, #rsapp .pts .band .pts-ball > * { position: relative; z-index: 1; }
#rsapp .hold.holding::after, #rsapp .pts .band .holding::after { animation: r3-fill var(--hold, 1.5s) linear forwards !important; }
#rsapp .hold.held::after, #rsapp .pts .band .held::after { transform: scaleX(1) !important; }
#rsapp .hold.holding, #rsapp .pts .band .holding { transform: scale(.97) !important; box-shadow: none !important; }
#rsapp .hold.held::before, #rsapp .pts .band .held::before { z-index: 2; }
/* fill colours per key family */
#rsapp .band .act { --hold-fill: var(--hue); } #rsapp .band .act.win, #rsapp .band .act.runout { --hold-fill: #9ece6a; }
#rsapp .band .lose-btn, #rsapp .cr-reset, #rsapp .ms-ns, #rsapp .pts .band .pts-act[data-pe="foul"], #rsapp .pts .band .pts-act[data-pe="end"][data-how="foul"] { --hold-fill: #f7768e; }
#rsapp .pts .band .pts-act, #rsapp .pts .band .pts-ball { --hold-fill: var(--hue); }
/* the label stays legible: light while filling (fill is the team hue at .92, text #eef1f6 is 4.5:1 on all 12 hues at that lightness), inverts only once held */
#rsapp .hold.holding, #rsapp .band .act.hold.holding, #rsapp .band .lose-btn.hold.holding, #rsapp .pts .band .holding { color: #eef1f6 !important; -webkit-text-fill-color: #eef1f6 !important; }
/* ===== Felt: a subtle cloth weave on the score plates (and the plates in match rows) ===== */
#rsapp .band .plate::before, .main .mr-sc::before, .tbv-sc::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .22; mix-blend-mode: multiply; background: repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px), radial-gradient(120% 80% at 30% 20%, rgba(255,255,255,.18), transparent 60%); }
#rsapp .band .plate > * { position: relative; z-index: 1; }
#rsapp .band .plate .spark, #rsapp .band .plate .sheen { position: absolute; }
.main .mr-sc, .tbv-sc { position: relative; isolation: isolate; } .main .mr-sc > *, .tbv-sc > * { position: relative; z-index: 1; }
/* match rows: a faint hatch in the leader's hue and the same felt on the plates, so rows echo the bands */
.main .mr { position: relative; overflow: hidden; isolation: isolate; }
.main .mr::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .5; background: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 11px); -webkit-mask-image: linear-gradient(90deg, #000 20%, transparent 50%, transparent 50%, #000 80%); mask-image: linear-gradient(90deg, #000 20%, transparent 50%, transparent 50%, #000 80%); }
.main .mr > * { position: relative; z-index: 1; }
.main .mr-sc.w { background-image: linear-gradient(180deg, oklch(.66 .15 135), oklch(.52 .14 135)); }
#rsapp .hold::after, #rsapp .pts .band .pts-act::after, #rsapp .pts .band .pts-ball::after { z-index: -1; }
#rsapp.tossing .band .card.shooting .pill-shooting, #rsapp.tossing .band .card.shooting .cue { opacity: 0 !important; }
/* ===== Hold, universal (final). One rule for every hold key, every game type.
   The fill is a sweep of INK, not a colour: on dark keys it is light (rgba 255 at .28), on coloured keys (pts primary, win-mode, cyan/pink) it is dark (rgba 0 at .35).
   On completion the key inverts: light keys become the team hue with dark text, coloured keys become white with dark text. ===== */
#rsapp .hold::after, #rsapp .pts .band .pts-act::after, #rsapp .pts .band .pts-ball::after { background: rgba(255,255,255,.28) !important; opacity: 1 !important; z-index: -1; }
#rsapp .pts .band .pts-act.primary::after, #rsapp .pts .band .pts-act[style*="background"]::after, #rsapp .band .act.win::after, #rsapp.win-mode .band .act::after { background: rgba(0,0,0,.35) !important; }
#rsapp .hold.held, #rsapp .pts .band .held { background: var(--hue, #bb9af7) !important; color: #0b0c10 !important; -webkit-text-fill-color: #0b0c10 !important; }
#rsapp .pts .band .pts-act.primary.held { background: #fff !important; }
#rsapp .hold.held::after, #rsapp .pts .band .held::after { transform: scaleX(1) !important; background: transparent !important; }
#rsapp .hold.holding, #rsapp .pts .band .holding { transform: scale(.97) !important; }

/* ===== Match rows: the table/status badge sits at the row's top-right corner (one rule, replaces the earlier stack) ===== */
.main .mr, .main .mr:has(> .mr-st:not(:empty)), .main .mr.mr-wait:has(> .mr-st) { display: grid !important; height: 56px !important; min-height: 56px !important; grid-template-rows: none !important; row-gap: 0 !important; padding-bottom: 0 !important; overflow: visible !important; }
.main .mr > .mr-st { position: absolute !important; top: 0 !important; inset-inline-end: 12px !important; left: auto !important; bottom: auto !important; translate: 0 -50% !important; grid-column: auto !important; grid-row: auto !important; justify-self: auto !important; width: max-content !important; max-width: 50% !important; z-index: 3; }
.main .mr::before { z-index: 0; }
@container app (max-width: 40rem) { .main .mr, .main .mr:has(> .mr-st:not(:empty)) { height: 48px !important; min-height: 48px !important; } }
/* R1: the ghost of the leaving band sits over the new one; its plate is hidden so only the cards/label slide under the real plate. The new band's content is held invisible until the ghost is gone. */
#rsapp .band .ghost-band .band-layer, #rsapp .band .ghost-band .band-hatch, #rsapp .band .ghost-band .band-keys, #rsapp .band .ghost-band .edge-glow { visibility: hidden; }
#rsapp .band .ghost-band { background: none !important; box-shadow: none !important; animation: none !important; }
#rsapp .band.swap-hold > .band-body .card, #rsapp .band.swap-hold > .band-body .team-label { opacity: 0; }

/* ===== Hold, universal, LAST WORD. Selectors carry :not(.x):not(.y) to match the base rules' (1,4,0) specificity. ===== */
#rsapp .band .act.hold:not(.a1):not(.a2)::after, #rsapp .band .lose-btn.hold:not(.a1):not(.a2)::after, #rsapp .pts .band .pts-act.hold:not(.a1)::after, #rsapp .pts .band .pts-ball.hold:not(.a1)::after, #rsapp .cr-reset.hold:not(.a1):not(.a2):not(.a3)::after, #rsapp .ms-ns.hold:not(.a1):not(.a2):not(.a3)::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: rgba(255,255,255,.28) !important; opacity: 1 !important; transform: scaleX(0); transform-origin: left center; }
#rsapp .pts .band .pts-act.primary.hold:not(.a1)::after, #rsapp .pts .band .pts-ball.hold:not(.a1)::after, #rsapp.win-mode .band .act.hold:not(.a1):not(.a2)::after { background: rgba(0,0,0,.35) !important; }
#rsapp .band .act.hold.holding:not(.a1):not(.a2)::after, #rsapp .band .lose-btn.hold.holding:not(.a1):not(.a2)::after, #rsapp .pts .band .pts-act.hold.holding:not(.a1)::after, #rsapp .pts .band .pts-ball.hold.holding:not(.a1)::after, #rsapp .cr-reset.hold.holding:not(.a1):not(.a2):not(.a3)::after, #rsapp .ms-ns.hold.holding:not(.a1):not(.a2):not(.a3)::after { animation: r3-fill var(--hold, 1.5s) linear forwards !important; }
#rsapp .band .act.hold.holding:not(.a1):not(.a2), #rsapp .band .lose-btn.hold.holding:not(.a1):not(.a2), #rsapp .pts .band .pts-act.hold.holding:not(.a1), #rsapp .pts .band .pts-ball.hold.holding:not(.a1), #rsapp .cr-reset.hold.holding:not(.a1):not(.a2):not(.a3), #rsapp .ms-ns.hold.holding:not(.a1):not(.a2):not(.a3) { transform: scale(.97) !important; }
#rsapp .band .act.hold.held:not(.a1):not(.a2), #rsapp .band .lose-btn.hold.held:not(.a1):not(.a2), #rsapp .pts .band .pts-act.hold.held:not(.a1), #rsapp .pts .band .pts-ball.hold.held:not(.a1), #rsapp .cr-reset.hold.held:not(.a1):not(.a2):not(.a3), #rsapp .ms-ns.hold.held:not(.a1):not(.a2):not(.a3) { background: oklch(.78 .13 var(--h1, var(--h, 250))) !important; color: #0b0c10 !important; -webkit-text-fill-color: #0b0c10 !important; animation: r3-spring .3s cubic-bezier(.2,.8,.2,1) both !important; }
#rsapp .pts .band .pts-act.primary.hold.held:not(.a1), #rsapp .pts .band .pts-ball.hold.held:not(.a1), #rsapp.win-mode .band .act.hold.held:not(.a1):not(.a2) { background: #fff !important; }
#rsapp .band .act.hold.held:not(.a1):not(.a2)::after, #rsapp .band .lose-btn.hold.held:not(.a1):not(.a2)::after, #rsapp .pts .band .pts-act.hold.held:not(.a1)::after, #rsapp .pts .band .pts-ball.hold.held:not(.a1)::after { transform: scaleX(1); background: transparent !important; }
#rsapp .band .act.hold.held:not(.a1):not(.a2) *, #rsapp .band .lose-btn.hold.held:not(.a1):not(.a2) *, #rsapp .pts .band .pts-act.hold.held:not(.a1) *, #rsapp .pts .band .pts-ball.hold.held:not(.a1) * { color: #0b0c10 !important; -webkit-text-fill-color: #0b0c10 !important; }
@media (prefers-reduced-motion: reduce) { #rsapp .band .act.hold.holding:not(.a1):not(.a2), #rsapp .band .lose-btn.hold.holding:not(.a1):not(.a2), #rsapp .pts .band .pts-act.hold.holding:not(.a1), #rsapp .pts .band .pts-ball.hold.holding:not(.a1) { transform: none !important; } }
/* toss: the destination disc fades in on landing instead of popping */
#rsapp .band .card.shooting .pill-shooting, #rsapp .band .card.shooting .cue { transition: opacity .18s ease-out; }
#rsapp.tossing .band .card.shooting .pill-shooting, #rsapp.tossing .band .card.shooting .cue { transition: none; }
/* match rows: one hover language. Hovered row lifts; the same player's other rows get a soft name highlight only (no left bar, no fill). */
.main .mr:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 6px 18px rgba(0,0,0,.35); }
.main .mr > .bk-side.hl, .main .mr > .bk-side.pin, .main .mr > .bk-side.hl:not(.pin) { background: none !important; box-shadow: none !important; }
.main .mr > .bk-side.hl .bk-n, .main .mr > .bk-side.hl:not(.pin) .bk-n { color: #ffd68a !important; }
.main .mr > .bk-side.pin .bk-n { color: var(--color-highlight) !important; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,199,119,.6); }
.main .mr > .bk-side.hl-focus { outline-offset: 2px; border-radius: 4px; }
/* R1 ghost: always visible, always sliding out; never re-animated by the parent's swap-in */
#rsapp .band .ghost-band .card, #rsapp .band .ghost-band .team-label { opacity: 1 !important; animation: r1-out .5s cubic-bezier(.5,0,.3,1) both !important; }
#rsapp .band .ghost-band .card + .card { animation-delay: .06s !important; }
#rsapp .band-r .ghost-band .card, #rsapp .band-r .ghost-band .team-label { --ox: 170px; }
#rsapp .band.swap-in .ghost-band .card, #rsapp .band.swap-in .ghost-band .team-label { animation-name: r1-out !important; }
#cueToss { position: fixed; z-index: 60; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #d7dbe3 55%, #9aa1ad); box-shadow: 0 0 10px rgba(255,255,255,.35); pointer-events: none; animation: r2b-toss .55s cubic-bezier(.3,.7,.3,1) both; }
/* R1: the real plate paints above the ghost and above the in-flow cards, so leaving and arriving names pass UNDER the score */
#rsapp .band > .band-body > .band-layer { z-index: 2; }
#rsapp .band > .band-body > .band-layer .plate { z-index: 2; }
#rsapp .band .ghost-band { z-index: 0 !important; }
#rsapp .band .ghost-band .card, #rsapp .band .ghost-band .team-label { opacity: revert-layer; }
/* match rows: the old pin/peek gradients are retired; the row background never changes with hover/pin (names carry it) */
.main .mr:has(> .mr-a.pin), .main .mr:has(> .mr-b.pin), .main .mr:has(> .mr-a.hl), .main .mr:has(> .mr-b.hl), .main .mr:has(> .mr-sc.empty):has(> .mr-a.pin), .main .mr:has(> .mr-sc.empty):has(> .mr-b.pin) { background: #181b22 !important; border-color: transparent !important; }
/* pending rows (no plates yet): keep a centre gap so names don't touch */
.main .mr:has(> .mr-sc.empty) { grid-template-columns: minmax(0, 1fr) 0 48px 0 minmax(0, 1fr) !important; }
/* keys are fixed furniture: never fade, slide or flicker on re-render */
#rsapp .band .band-keys, #rsapp .band.swap-in .band-keys, #rsapp .band.swap-hold .band-keys { transition: none !important; animation: none !important; opacity: 1; }
/* toss landing: the destination disc appears in the same frame the ball is removed (no fade gap) */
#rsapp.toss-land .band .card.shooting .pill-shooting, #rsapp.toss-land .band .card.shooting .cue { opacity: 1 !important; transition: none !important; }
#rsapp .band .card.shooting .pill-shooting, #rsapp .band .card.shooting .cue { transition: none; }
/* match rows: hover peek = pinned style (one treatment). Gold wash from the outer edge to the plate edge on the player's side, gold underlined name. */
.main .mr { --mrc: 67px; }
.main .mr:has(> .mr-sc.empty) { --mrc: 24px; }
@container app (max-width: 40rem) { .main .mr { --mrc: 54px; } }
.main .mr:has(> .mr-a.pin), .main .mr:has(> .mr-a.hl) { background: linear-gradient(to right, rgba(255,199,119,0) 0, rgba(255,199,119,.07) 25%, rgba(255,199,119,.28) calc(50% - var(--mrc)), rgba(255,199,119,0) calc(50% - var(--mrc) + 1px)), #181b22 !important; border-color: rgba(255,199,119,.45) !important; }
.main .mr:has(> .mr-b.pin), .main .mr:has(> .mr-b.hl) { background: linear-gradient(to left, rgba(255,199,119,0) 0, rgba(255,199,119,.07) 25%, rgba(255,199,119,.28) calc(50% - var(--mrc)), rgba(255,199,119,0) calc(50% - var(--mrc) + 1px)), #181b22 !important; border-color: rgba(255,199,119,.45) !important; }
.main .mr:has(> .mr-sc.empty):has(> .mr-a.pin), .main .mr:has(> .mr-sc.empty):has(> .mr-a.hl) { background: linear-gradient(to right, rgba(255,199,119,0) 0, rgba(255,199,119,.07) 25%, rgba(255,199,119,.28) calc(50% - var(--mrc)), rgba(255,199,119,0) calc(50% - var(--mrc) + 1px)), #181b22 !important; }
.main .mr:has(> .mr-sc.empty):has(> .mr-b.pin), .main .mr:has(> .mr-sc.empty):has(> .mr-b.hl) { background: linear-gradient(to left, rgba(255,199,119,0) 0, rgba(255,199,119,.07) 25%, rgba(255,199,119,.28) calc(50% - var(--mrc)), rgba(255,199,119,0) calc(50% - var(--mrc) + 1px)), #181b22 !important; }
.main .mr > .bk-side.hl .bk-n, .main .mr > .bk-side.hl:not(.pin) .bk-n, .main .mr > .bk-side.pin .bk-n { color: var(--color-highlight) !important; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,199,119,.6); }
/* score digits: italic overhang must not be clipped (clip vertically only, for the odometer), and the ink is optically centred in the visible plate. band-r loses the outer overhang to the band edge, so it needs the larger inward nudge. */
#rsapp .band .plate .score-wrap { overflow-x: visible !important; overflow-y: clip !important; padding-inline: .06em; }
#rsapp .band .plate .score-wrap .score, #rsapp .band .plate .score-wrap .score-prev { overflow: visible; }
/* Plate centring by construction: the layer overhangs the band on the outer side by --ovh (same value as the layer's outer offset), that part is clipped, so the plate pads exactly that side and flex-centres the digits in what is visible. No per-side margins. */
#rsapp .band { --ovh: 40px; }
@container match (max-width: 56rem) { #rsapp .band { --ovh: 32px; } }
@container match (max-width: 36rem) { #rsapp .band { --ovh: 26px; } }
#rsapp .band .plate { box-sizing: border-box; padding-inline: var(--ovh) 0; }
#rsapp .band.band-r .plate { padding-inline: 0 var(--ovh); }
#rsapp .band .plate .plate-in, #rsapp .band.band-r .plate .plate-in { margin: 0 !important; }
/* italic optical centre: the ink leans right of the advance box by ~.05em on every digit */
#rsapp .band .plate .score-wrap > .score, #rsapp .band .plate .score-wrap > .score-prev { translate: -.05em 0; }
/* Shot clock keys, final: NEXT SHOT is a real key in the shooting team's hue (switches the shooter inside the team); Reset is a key like +EXT */
#rsapp .cr-keys .rail-key.primary, #rsapp .mid .rail-key.primary { --hue: oklch(.78 .13 var(--h1)); background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.18)), var(--hue); color: #0b0c10; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 4px 14px -6px oklch(.78 .13 var(--h1) / .6); }
#rsapp .cr-keys .rail-key.primary b, #rsapp .mid .rail-key.primary b { color: #0b0c10; opacity: .8; }
#rsapp .cr-keys .rail-key.primary:hover, #rsapp .mid .rail-key.primary:hover { filter: brightness(1.08); }
#rsapp .cr-reset { border: 0; border-radius: 8px; background: #20242d; color: #eef1f6; font: italic 800 15px/1 var(--band-font); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
/* One key height across all game types: every band key is 56 px (44 px on phones); the keys column sizes to its content and centres in the band */
#rsapp .band .band-keys { grid-template-rows: none !important; grid-auto-rows: auto; align-content: center !important; }
#rsapp .band .band-keys .act, #rsapp .band .band-keys .lose-btn, #rsapp .band .band-keys .pts-ball, #rsapp .band .band-keys .pts-act, #rsapp .band .band-keys button { height: 56px !important; min-height: 56px !important; max-height: 56px; padding-block: 0 !important; box-sizing: border-box; }
#rsapp .band .band-keys .pts-ball { font-size: 22px !important; }
@container app (max-width: 40rem) {
  #rsapp .band .band-keys .act, #rsapp .band .band-keys .lose-btn, #rsapp .band .band-keys .pts-ball, #rsapp .band .band-keys .pts-act, #rsapp .band .band-keys button { height: 44px !important; min-height: 44px !important; max-height: 44px; }
  #rsapp .band .band-keys .pts-ball { font-size: 18px !important; }
}

/* ===== Simplified scoreboard (CHANGES A12; owner's answer, 21 Oct): no result keys. The plate's top half adds a rack won
   by that side, the bottom half takes the last one back; both hold like every other key. ===== */
#rsapp.simple-mode .band-keys { display: none; }
#rsapp .plate-keys { grid-area: sp; position: relative; z-index: 2; display: grid; grid-template-rows: 1fr 1fr; min-width: 0; }
#rsapp .plate-keys .pk { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: flex-end; min-height: 44px; padding: 0 12px; border: 0; border-radius: 0; background: transparent; color: rgba(255,255,255,.5); font: italic 800 28px/1 var(--band-font); cursor: pointer; }
#rsapp .band-r .plate-keys .pk { justify-content: flex-start; }
#rsapp .plate-keys .pk:focus-visible { outline: 2px solid var(--color-focus, #7dcfff); outline-offset: -4px; }
#rsapp .plate-keys .pk:disabled { opacity: .3; cursor: default; }

/* ===== Touch targets and narrow screens (CHANGES "Check 320 · 390 · 820 · 1180 · 1440"; 21 Oct) =====
   The game setup's segmented keys wrap instead of overflowing (shot clock lengths at 320). On touch screens the small
   keys of the game screen and the settings rail get an invisible 44 px hit area; nothing moves or changes colour. */
.fp-f .seg { flex-wrap: wrap; max-width: 100%; }
@media (pointer: coarse) {
  #rsapp #pauseBtn, #rsapp .band .team-name, #rsapp .tchip, .set-rail a, .fp-f .seg .btn.sm { position: relative; }
  #rsapp #pauseBtn::after, #rsapp .band .team-name::after, #rsapp .tchip::after, .set-rail a::after, .fp-f .seg .btn.sm::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
  }
  /* the pause key sits at the right edge: its hit area grows to the left only, so the page never scrolls sideways */
  #rsapp #pauseBtn::after { left: auto; right: 0; transform: translateY(-50%); }
}

/* ===== Owner fixes (21 Oct, after review) ===== */
/* On phones the plate is 112 px (review M, N5): the hill's edge glow starts at its edge, as on wider screens */
@container app (max-width: 40rem) { .band .edge-glow { left: 112px; } .band-r .edge-glow { left: 0; right: 112px; } }
/* The balls count clips only vertically for its flip, so the italic digit keeps its right edge */
#rsapp .pts .pts-on b { overflow: visible; overflow-y: clip; padding-inline: .06em; }
/* A finished step keeps its dark number on hover (the hover colour matched the filled circle) */
@media (hover: hover) { .fp-steps li.done button:not(:disabled):hover .fp-sn { color: var(--bg0); } }
/* Golden break is a 9-ball shot (owner, 2 Nov 2026): other games hide the key, the row closes up like without Šamar */
#rsapp.no-golden .act.golden { display: none !important; }
#rsapp.no-golden .band .acts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#rsapp.no-golden.no-samar .band .acts { grid-template-columns: minmax(0, 1fr); }
/* The match sits in the middle of the free height under the game's header, on every game screen (owner, 2 Nov 2026):
   the scoreboard measures the gap above it (--match-gap), as the tablet page used to centre its whole layout */
#rsapp #layout > .match { margin-top: var(--match-gap, 0px); }
/* A game shows no app tab bar, so the page's padding for it goes and the match has room to sit in the middle: the
   layout keeps clear of the queue bar itself, and on phones the main keeps its room for the game's own bar */
#app.in-game { padding-bottom: 1rem; }
@container app (min-width: 47.51rem) { .shell.in-game .main { padding-bottom: 0; } }
/* The original RackSync app embedded in a platform page */
#rsapp.app { padding: 0; min-height: 0; margin-top: .5rem; }
#rsapp .setup, #rsapp #setupScreen { display: none !important; }
#rsapp .rs-ro, .rs-ro .lose-btn, .rs-ro .act, .rs-ro .undo-btn, .rs-ro .dice-btn, .rs-ro .card-x, .rs-ro #addPlayer, .rs-ro .team-name, .rs-ro #settingsBtn, .rs-ro .t-grip { pointer-events: none; }
/* 2a: viewers get the cards and the score, no controls */
#rsapp.rs-ro .acts, #rsapp.rs-ro .lose-btn, #rsapp.rs-ro .invalid-msg, #rsapp.rs-ro .dice-btn, #rsapp.rs-ro .card-x, #rsapp.rs-ro #addPlayer, #rsapp.rs-ro #settingsBtn, #rsapp.rs-ro .undo-btn, #rsapp.rs-ro .pause-btn, #rsapp.rs-ro .t-grip, #rsapp.rs-ro .team-name svg { display: none !important; }
#rsapp.rs-ro .team-name:has(.tn-empty) { display: none; }
#rsapp.rs-ro .match .team-head { min-height: 2rem; }

/* Live now: only the match block of the original stays visible */
.rs-live header, .rs-live .timers, .rs-live .acts, .rs-live .lose-btn, .rs-live .invalid-msg, .rs-live .queue-panel, .rs-live .solo-add, .rs-live #addPlayer, .rs-live #statsScreen, .rs-live #settingsScreen, .rs-live .dice-btn, .rs-live .t-grip, .rs-live .team-name svg, .rs-live .toast { display: none !important; }
.rs-live .layout { display: block; }
.rs-live .match { padding-top: 1rem; }
.rs-live .tn-empty { display: none; }
.rs-live .team-name { padding: 0; min-height: 0; }
.rs-live .team-name { pointer-events: none; }
.rs-live .card { pointer-events: none; }

/* table chips (several tables, one shared queue) */
#rsapp .tchips { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1rem; }
#rsapp .tchip.on { border-color: var(--blue); background: rgba(122,162,247,.15); color: #fff; }
#rsapp .tchip small { color: var(--dim); font-weight: 600; }
.rs-live .tchips { display: none !important; }

#rsapp .tchip-back { width: 2.75rem; padding: 0; display: inline-grid; place-items: center; }
#rsapp .tchip-back svg { width: 1.25rem; height: 1.25rem; }
#rsapp .tchip-solo { align-self: center; font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--dim); }

#rsapp .pav { width: 1.5rem; height: 1.5rem; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid hsl(var(--h) 70% 60%); box-shadow: 0 0 .4rem hsl(var(--h) 70% 60% / .6); }

/* venue settings: Win mode hides the Konstatujemo buttons; Šamar can be switched off */
#rsapp .act.win { display: none; }
#rsapp.win-mode .act.win { display: inline-flex; }
#rsapp.win-mode .act.win:hover:not(:disabled), #rsapp.win-mode .act.win.holding { opacity: 1; color: #16161e; background: var(--green); border-color: #d2f0b0; box-shadow: 0 0 1.1rem rgba(158,206,106,.55); }
#rsapp.win-mode .lose-btn, #rsapp.win-mode .invalid-msg:empty { display: none !important; }
#rsapp.win-mode .acts { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr) minmax(0, 1.3fr); }
#rsapp.no-samar .act.samar { display: none !important; }
#rsapp.no-samar .acts { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
#rsapp.win-mode.no-samar .acts { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }

/* read-only live blocks: no team name → no empty name row */
.rs-live .team-name:has(.tn-empty) { display: none; }
.rs-live .match .team-head { min-height: 2rem; }
.rs-live .match .tcard { margin-top: 1.1rem; }

/* session sub-header: ← title · table tabs · tools */
#rsapp header.sub-head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
#rsapp header.sub-head .brand { flex: 0 1 auto; min-width: 0; }
#rsapp header.sub-head #tableChips { margin: 0; flex: 1 1 auto; justify-content: flex-start; }
#rsapp header.sub-head .header-right { margin-inline-start: auto; }
/* timers sit between the title and the tools; they take their own row when table tabs share the title row or the screen is narrow */
#rsapp header.sub-head { justify-content: flex-start; border-bottom: 0; padding-bottom: 0; }
#rsapp header.sub-head > .timers { flex: 1 1 auto; justify-content: center; margin: 0; }
#rsapp header.sub-head:has(> #tableChips:not(.hidden)) > .timers { order: 9; flex: 1 0 100%; }
@container app (max-width: 52rem) { #rsapp header.sub-head > .timers { order: 9; flex: 1 0 100%; } }
@container app (max-width: 40rem) { #rsapp header.sub-head .brand { flex: 1 1 0; } }
#rsapp header.sub-head > .sub-lead { display: flex; align-items: center; gap: .75rem; min-width: 0; flex: 0 1 auto; }
@container app (max-width: 40rem) { #rsapp header.sub-head > .sub-lead { flex: 1 1 0; } }
/* one row: three columns with equal sides, so the timers sit on the centre line, which is where VS is */
@container app (min-width: 52.01rem) {
  #rsapp header.sub-head:not(:has(> #tableChips:not(.hidden))) { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: .75rem; }
  #rsapp header.sub-head:not(:has(> #tableChips:not(.hidden))) > .sub-lead { grid-column: 1; grid-row: 1; }
  #rsapp header.sub-head:not(:has(> #tableChips:not(.hidden))) > .timers { grid-column: 2; grid-row: 1; }
  #rsapp header.sub-head:not(:has(> #tableChips:not(.hidden))) > .header-right { grid-column: 3; grid-row: 1; justify-self: end; margin: 0; }
}
#rsapp .tchips { display: inline-flex; gap: .25rem; padding: .25rem; border: 1px solid var(--line); border-radius: .75rem; background: rgba(0,0,0,.25); }
#rsapp .tchip { min-height: 2.75rem; padding: .3rem .8rem; border: 0; background: none; border-radius: .5rem; color: var(--dim); font-weight: 700; }
#rsapp .tchip.on { background: var(--color-accent-soft); color: #fff; box-shadow: inset 0 0 0 1px rgba(122,162,247,.5); }
#rsapp .tchip-solo { display: none; }
#rsapp .tchips.hidden { display: none; }
@container app (max-width: 42rem) { #rsapp header.sub-head #tableChips { order: 3; flex-basis: 100%; } }

#rsapp header.sub-head #shareWrap, .rs-live #shareWrap, #rsapp header.sub-head .help-btn, #rsapp header.sub-head .fs-group { display: none !important; }

/* 2a: each team owns its column: card, then the result button, then the specials. In Win mode, Win is that full-width button */
#rsapp .match { grid-template-areas: "tm tm tm" "za vs zb" "ba . bb" "xa . xb" "msg msg msg"; }
@container app (max-width: 40rem) { #rsapp .match { grid-template-areas: "tm tm tm" "za za za" "ba ba ba" "xa xa xa" "vs vs vs" "zb zb zb" "bb bb bb" "xb xb xb" "msg msg msg"; } }
#rsapp.win-mode .act.win { grid-column: 1 / -1; min-height: 3.5rem; border-radius: .75rem; font-size: .875rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
#rsapp.win-mode .act.win svg { width: 1.25rem; height: 1.25rem; }
/* Point-scored games on the table view (pts.js): 14.1, One Pocket, Bank Pool. Same card, tab and button language as the rack games. */
#rsapp .match.pts-off { display: none !important; }
#rsapp .match.pts { align-items: start; grid-template-areas: "za vs zb" "xa vs xb" ". vs ."; grid-template-rows: auto auto 1fr; row-gap: .75rem; } /* the controls sit right under the cards; the centre column runs down beside both */
.pts .tcard.one { min-height: 0; }
.pts .card { font-size: 1.375rem; min-height: 3.875rem; }
.pts .card .role-badge + .role-badge { margin-inline-start: .35rem; }
.pts .role-badge { white-space: nowrap; }
.pts .card .pname { flex: 1 1 auto; min-width: 0; }
.pts .team-head { padding-inline-end: 8.5rem; }
.pts-meta { font-size: var(--text-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pts-meta b { font-family: var(--display); font-style: italic; font-stretch: condensed; font-size: 1.125rem; letter-spacing: .02em; color: #fff; }
.pts .score-tab b.neg { color: var(--red); }
.pts .score-tab b.bump { animation: ptsBump .32s var(--ease-out); }
@keyframes ptsBump { 40% { transform: scale(1.14); } }
.role-badge.pts-foul { color: var(--amber); border: 1px solid rgba(224,175,104,.5); background: rgba(224,175,104,.12); }
.role-badge.pts-foul.two { color: var(--red); border-color: rgba(247,118,142,.55); background: rgba(247,118,142,.12); }

/* the primary "+1" and the end-of-turn buttons */
.pts-ctl { display: grid; gap: .5rem; align-content: start; min-width: 0; }
#rsapp .pts .acts.pts-acts { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); } /* Miss, Safety and Foul on one row */
.pts-ball {
  display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 4.5rem; padding: .5rem 1rem; min-width: 0;
  border-radius: .75rem; border: 1px solid rgba(158,206,106,.5); background: linear-gradient(180deg, rgba(158,206,106,.17), rgba(158,206,106,.07));
  color: var(--green); font-family: var(--display); font-style: italic; font-stretch: condensed; font-weight: 900; font-size: 1.375rem; letter-spacing: .05em; text-transform: uppercase;
  box-shadow: 0 .2rem .6rem rgba(0,0,0,.4); cursor: pointer; touch-action: manipulation; transition: background .12s, border-color .12s, transform .12s;
}
.pts-ball > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pts-ball .pb-n { font-size: 2.125rem; line-height: 1; letter-spacing: 0; }
.pts-ball:active:not(:disabled) { background: rgba(158,206,106,.3); transform: scale(.985); }
@media (hover: hover) { .pts-ball:hover:not(:disabled) { border-color: rgba(158,206,106,.85); background: linear-gradient(180deg, rgba(158,206,106,.24), rgba(158,206,106,.1)); } }
.pts-ball:focus-visible, .pts-act:focus-visible, .pts-cell:focus-visible, .pts-link:focus-visible, .pts-tbl .pk:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.pts-ball:disabled { cursor: not-allowed; color: var(--dim); background: transparent; border: 1px dashed var(--line); box-shadow: none; opacity: .55; }
.pts-act { min-height: 3.25rem; font-size: .875rem; }
.pts-act[data-how="miss"] svg { color: var(--dim); }
.pts-act[data-how="safe"] svg { color: var(--cyan); }
.pts-act[data-how="foul"] svg, .pts-act[data-how="bfoul"] svg { color: var(--red); }
.pts-act[data-pe="spot"] svg, .pts-act[data-pe="ball"] svg { color: var(--amber); }
.pts-act[data-warn]:not(:disabled) { border-color: rgba(247,118,142,.65); color: #ffb3c1; }
@media (hover: hover) { .pts-act:hover:not(:disabled) { color: #fff; border-color: var(--line2); background: #2a3152; } }

/* centre column: VS, balls on the table, notices */
.pts .mid.pts-mid { grid-area: vs; gap: .875rem; width: 12rem; align-self: start; padding-top: 1.25rem; }
.pts-rack { display: grid; justify-items: center; gap: .125rem; }
.pr-row { display: flex; gap: .125rem; }
/* balls carry the score tab's outline and shadow, so the rack reads as part of the same set */
.pr-row i { width: .9375rem; height: .9375rem; border-radius: 50%; box-sizing: border-box; background: var(--bg1); border: 2px solid rgba(84,92,126,.45); }
.pr-row i.on { background: radial-gradient(circle at 35% 30%, #f2f4ff, #aab2d6 55%, #6d7499); border-color: rgba(84,92,126,.9); box-shadow: 0 .15rem .4rem rgba(0,0,0,.45); }
.pts-on { display: grid; justify-items: center; line-height: 1; text-align: center; }
.pts-on b { font-family: var(--display); font-style: italic; font-stretch: condensed; font-weight: 900; font-size: 2.25rem; color: #fff; }
.pts-on small, .pts-rackno { font-size: var(--text-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-top: .2rem; }
.pts-rackno { text-align: center; }
.pts-note { display: grid; gap: .2rem; justify-items: center; text-align: center; width: 100%; box-sizing: border-box; padding: .6rem .7rem; border-radius: .75rem; border: 1px solid rgba(125,207,255,.45); background: rgba(125,207,255,.09); font-size: var(--text-sm); line-height: 1.35; color: var(--text); text-wrap: pretty; }
.pts-note b { font-family: var(--display); font-style: italic; font-stretch: condensed; font-weight: 900; font-size: 1.125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cyan); }
.pts-note.bad { border-color: rgba(247,118,142,.5); background: rgba(247,118,142,.09); } .pts-note.bad b { color: var(--red); }
.pts-link { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .25rem; border: 0; background: none; color: var(--color-accent); font: inherit; font-size: var(--text-sm); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.pts-win { display: grid; gap: .5rem; justify-items: center; text-align: center; padding: 1rem .75rem; border-radius: var(--r); border: 1px solid rgba(224,175,104,.55); background: rgba(224,175,104,.08); box-shadow: 0 0 1.25rem rgba(224,175,104,.2); width: 100%; box-sizing: border-box; }
.pts-win b { font-family: var(--display); font-style: italic; font-stretch: condensed; font-weight: 900; font-size: 1.625rem; line-height: 1.05; text-transform: uppercase; color: #fff; text-wrap: balance; }
.pts-win-s { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 1.125rem; color: var(--amber); }

/* One Pocket table: head at the bottom (where the breaker stands), foot pockets at the top */
.pts-tbl { position: relative; width: 6.5rem; height: 10.5rem; box-sizing: border-box; border-radius: .75rem; border: .45rem solid #2a2f4a; background: radial-gradient(ellipse at 50% 40%, oklch(.36 .06 180), oklch(.27 .045 190)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 .4rem 1rem rgba(0,0,0,.45); }
.pts-tbl::before { content: ""; position: absolute; left: 50%; top: 25%; width: .3rem; height: .3rem; border-radius: 50%; background: rgba(255,255,255,.35); transform: translate(-50%, -50%); }
.pts-tbl::after { content: ""; position: absolute; left: 0; right: 0; top: 75%; border-top: 1px dashed rgba(255,255,255,.2); }
.pts-tbl .pk { position: absolute; width: 1.5rem; height: 1.5rem; border-radius: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; box-sizing: border-box; background: #0c0d14; border: 2px solid #3b4261; color: #fff; font-size: .75rem; font-weight: 900; z-index: 1; }
.pts-tbl .pk.own { background: oklch(.5 .13 var(--h)); border-color: oklch(.78 .12 var(--h)); }
.pts-tbl .p-fl { left: 0; top: 0; } .pts-tbl .p-fr { left: 100%; top: 0; } .pts-tbl .p-ml { left: 0; top: 50%; } .pts-tbl .p-mr { left: 100%; top: 50%; } .pts-tbl .p-hl { left: 0; top: 100%; } .pts-tbl .p-hr { left: 100%; top: 100%; }
.pts-tbl-c { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; line-height: 1; text-align: center; }
.pts-tbl-c b { font-family: var(--display); font-style: italic; font-weight: 900; font-size: 1.75rem; color: #fff; }
.pts-tbl-c small { font-size: .625rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-top: .15rem; max-width: 4.5rem; }

.pts-pick { grid-column: 1 / -1; display: grid; gap: .6rem; padding: .85rem 1rem; border-radius: .75rem; border: 1px solid rgba(125,207,255,.45); background: rgba(125,207,255,.08); }
.pts-pick p { margin: 0; color: var(--text); } .pts-pick-b { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; } .pts-pick-b .btn { min-height: 3.25rem; }

/* C: scoresheet */
.pts-sheet { margin-top: .5rem; display: grid; gap: .75rem; }
.pts-sh-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .pts-sh-head .panel-title { margin: 0; } .pts-sh-head .m { font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 700; }
.pts-sh-wrap { max-height: 15.5rem; overflow-y: auto; border: 1px solid var(--line); border-radius: .75rem; }
table.pts-sh { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pts-sh th { position: sticky; top: 0; z-index: 1; padding: .55rem .75rem; background: var(--bg1); border-bottom: 1px solid var(--line); text-align: start; font-size: var(--text-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.pts-sh tbody th { position: static; background: none; border: 0; width: 3.5rem; color: var(--color-text-muted); }
.pts-sh td { padding: .2rem .75rem; border-top: 1px solid rgba(59,66,97,.45); vertical-align: middle; }
.pts-sh tbody tr:first-child td, .pts-sh tbody tr:first-child th { border-top: 0; }
.pts-sh .pc-in { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; min-height: 2.75rem; }
.pts-sh td.pt { width: 5rem; font-family: var(--display); font-style: italic; font-weight: 800; font-size: 1.125rem; color: #fff; }
.pts-sh tr.cur td { background: rgba(122,162,247,.07); }
.pts-sh td.pc.open { box-shadow: inset 2px 0 0 var(--color-accent); }
.pts-cell { min-width: 2.75rem; min-height: 2.5rem; padding: 0 .5rem; border: 1px solid transparent; border-radius: .5rem; background: none; color: var(--text); font: inherit; font-weight: 800; font-size: 1.0625rem; cursor: pointer; text-align: start; }
@media (hover: hover) { .pts-cell:hover { border-color: var(--line2); background: rgba(255,255,255,.04); } }
.pts-step { display: inline-flex; align-items: center; gap: .5rem; } .pts-step .btn { min-width: 2.75rem; min-height: 2.75rem; font-size: 1.25rem; } .pts-step b { min-width: 2rem; text-align: center; font-family: var(--display); font-style: italic; font-weight: 900; font-size: 1.5rem; color: #fff; }
.pm { font-style: normal; font-size: .75rem; font-weight: 800; letter-spacing: .06em; padding: .1rem .4rem; border-radius: .35rem; white-space: nowrap; }
.pm.f { color: var(--red); background: rgba(247,118,142,.12); } .pm.s { color: var(--cyan); background: rgba(125,207,255,.12); } .pm.g { color: var(--amber); background: rgba(224,175,104,.12); }

/* Rules dialog */
.pts-rules .mdx section + section { margin-top: 1rem; }
.pts-rules .mdx h4 { margin-top: 0; }
.pts-rules .mdx section.hl { margin-inline: -.75rem; padding: .5rem .75rem; border-radius: .75rem; background: rgba(125,207,255,.08); box-shadow: inset 0 0 0 1px rgba(125,207,255,.35); }
.pts-src { margin: 0; }
@media (prefers-reduced-motion: reduce) { .pts .score-tab b.bump { animation: none; } .pts-ball { transition: none; } }
#rsapp .pts .acts .pts-act svg { display: inline-block; } #rsapp .pts .acts .pts-act { gap: .4rem; }
.pts-sh-wrap { overflow-x: hidden; }

/* scoresheet and game settings dialogs */
.pts-sheet-dlg .pts-sh-wrap { max-height: min(26rem, calc(100dvh - 19rem)); }
.pts-sh-head h3, .pts-cfg h3 { margin: .2rem 0 0; }
.pts-sh-racks { justify-self: start; }
.pts-cell.ro { display: inline-flex; align-items: center; cursor: default; }

/* centre column: VS and the rack only */
.pts-rk { display: grid; justify-items: center; gap: .875rem; }
/* tablets and computers: the rack sits lower than VS, level with the cards and their controls */
@container app (min-width: 40.01rem) { .pts-mid > .pts-rk { margin-top: 1.5rem; } }
.pts-other, .pts .pm2 { display: none; }
/* header: the game settings pill beside the match timer */
.timer.pts-goal { font: inherit; color: inherit; cursor: pointer; min-height: 2.75rem; gap: .4rem; text-transform: none; }
.timer.pts-goal b { font-size: 1.125rem; }
.pts-goal .pg-s { opacity: .6; }
.pts-goal .pg-ed { width: .9rem; height: .9rem; color: var(--dim); margin-inline-start: .15rem; }
@media (hover: hover) { .timer.pts-goal:hover { border-color: var(--line2); color: var(--text); } }
.timer.pts-goal:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* phones: the rack becomes a strip; three layouts to choose from (data-ph) */
@container app (max-width: 40rem) {
  #rsapp .match.pts { padding-top: 1rem; row-gap: .5rem; grid-template-rows: none; }
  .pts .mid.pts-mid { width: auto; padding-top: 0; gap: .5rem; align-self: stretch; }
  .pts .mid.pts-mid > .vs { display: none; }
  .pts-rk { display: flex; align-items: center; justify-content: center; gap: .75rem; }
  .pts .pts-tbl { display: none; }
  .pts[data-game="1p"] .pts-rk > .pts-on { display: flex; }
  .pts-on { display: flex; align-items: baseline; gap: .4rem; }
  .pts-on b { font-size: 1.75rem; } .pts-on small { margin: 0; }
  .pr-row i { width: .5625rem; height: .5625rem; } .pts-rack, .pr-row { gap: .125rem; }
  .pts-rackno { margin: 0; padding-inline-start: .75rem; border-inline-start: 1px solid var(--line); }
  .pts .team-head { padding-inline-end: 6rem; }
  .pts .card { font-size: 1.1875rem; min-height: 3.25rem; }
  .pts-ball { min-height: 3.75rem; font-size: 1.125rem; } .pts-ball .pb-n { font-size: 1.75rem; }
  .pts-act { min-height: 2.75rem; font-size: .8125rem; }

  /* P1: two columns, each card over its own controls */
  #rsapp .match.pts[data-ph="cols"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "vs vs" "za zb" "xa xb"; column-gap: .5rem; }
  .pts[data-ph="cols"] .team-head { padding-inline-end: 0; min-height: 1.5rem; }
  .pts[data-ph="cols"] .team-head > .pts-meta { display: none; }
  .pts[data-ph="cols"] .card { flex-wrap: wrap; row-gap: .15rem; font-size: 1.0625rem; padding-block: .5rem; }
  .pts[data-ph="cols"] .pm2 { display: block; font-size: .6875rem; }
  .pts[data-ph="cols"] .pm2 b { font-size: 1rem; }
  .pts[data-ph="cols"] .pb-who { display: none; }
  #rsapp .pts[data-ph="cols"] .acts.pts-acts { grid-template-columns: minmax(0, 1fr); gap: .375rem; }
  #rsapp .pts[data-ph="cols"] .pts-act { justify-content: flex-start; padding-inline: .75rem; }
  .pts[data-ph="cols"] .pts-ball { gap: .4rem; min-height: 3.5rem; padding-inline: .5rem; }
  .pts[data-ph="cols"] .pts-ball > span:last-child { font-size: 1rem; }
  .pts[data-ph="cols"] .pts-ball .pb-n { font-size: 1.5rem; }
  #rsapp .pts[data-ph="cols"] .acts .pts-act { flex-direction: row; gap: .5rem; }
  /* narrow columns: the score tab drops the "/100" (the target is in the header) */
  #rsapp .pts[data-ph="cols"] .score-tab small { display: none; }
  #rsapp .pts[data-ph="cols"] .score-tab { min-width: 0; padding: .1rem .9rem; }
  #rsapp .pts[data-ph="cols"] .score-tab b { font-size: 2.75rem; line-height: 1.05; }
  #rsapp .pts[data-ph="cols"] .tcard { padding: .5rem; margin-top: 2.25rem; }
  .pts[data-ph="cols"] .card { padding: .45rem .6rem; min-height: 0; }
  .pts[data-ph="cols"] .card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "dot name name" "meta meta badge"; align-items: center; column-gap: .5rem; }
  .pts[data-ph="cols"] .card .pdot { grid-area: dot; } .pts[data-ph="cols"] .card .pname { grid-area: name; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pts[data-ph="cols"] .card .pm2 { grid-area: meta; min-width: 0; } .pts[data-ph="cols"] .card .pts-foul { grid-area: badge; margin: 0; padding: .05rem .4rem; font-size: .625rem; }

  /* P2 and P3: one column, card then its controls; P3 shows only the shooter's controls */
  #rsapp .match.pts[data-ph="stack"], #rsapp .match.pts[data-ph="turn"] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "za" "xa" "vs" "zb" "xb"; }
  .pts[data-ph="turn"] .pts-ctl.off { display: none; }
  .pts[data-ph="turn"] .pts-other { display: flex; min-height: 3rem; font-size: 1rem; }
  .pts[data-ph="turn"] .pts-other .pb-n { font-size: 1.375rem; }
}
/* the game pill makes the header row long: below 74rem the timers take their own row (as they already do at tablet portrait) */
@container app (max-width: 74rem) { #rsapp header.sub-head:has(.pts-goal) > .timers { order: 9; flex: 1 0 100%; } }
.pts-rackno { white-space: nowrap; }
@container app (max-width: 40rem) {
  /* stacked: room for the next card's score tab, which rises above its card */
  .pts[data-ph="stack"] .mid.pts-mid, .pts[data-ph="turn"] .mid.pts-mid { padding-block: .5rem 2.25rem; }
}
.timer.pts-goal { white-space: nowrap; }
/* 52–74rem the header is a three-column grid with the timers in the middle; with the game pill the timers drop to a second row there */
@container app (min-width: 52.01rem) and (max-width: 74rem) {
  #rsapp header.sub-head:not(:has(> #tableChips:not(.hidden))):has(#ptsGoal) > .timers { grid-column: 1 / -1; grid-row: 2; margin-top: .5rem; }
  #rsapp header.sub-head:not(:has(> #tableChips:not(.hidden))):has(#ptsGoal) > .header-right { grid-column: 2 / 4; }
}

/* phones (all three games, two columns): the rack is a pill like the match timer, centred between the header and the score tabs */
@container app (max-width: 40rem) {
  #rsapp .match.pts { padding-top: 0; }
  .pts .mid.pts-mid { margin-block: -.375rem .75rem; } /* same space above (to the timers) and below (to the score tabs) */
  .pts-rk { justify-self: center; align-self: center; width: fit-content; margin-inline: auto; gap: .625rem; min-height: 2.75rem; padding: .3rem 1rem .3rem .75rem; border-radius: 999px; background: rgba(0,0,0,.22); border: 1px solid var(--line); }
  .pts-rk .pts-rack { gap: .09rem; } .pts-rk .pr-row { gap: .09rem; } .pts-rk .pr-row i { width: .3125rem; height: .3125rem; }
  .pts-rk .pts-on { align-items: center; gap: .35rem; } .pts-rk .pts-on b { font-size: 1.25rem; line-height: 1; } .pts-rk .pts-on small { margin: 0; letter-spacing: .1em; }
  .pts-rk .pts-rackno { padding-inline-start: .625rem; letter-spacing: .1em; }
}

/* phones: the rack is a little taller than its pill and spills over its edge, as the score tabs do over the cards; One Pocket shows it too */
@container app (max-width: 40rem) {
  .pts[data-game="1p"] .pts-rk > .pts-rack { display: grid; }
  .pts-rk .pts-rack { margin-block: -.6rem; gap: .06rem; } .pts-rk .pr-row { gap: .06rem; }
  .pts-rk .pr-row i { width: .625rem; height: .625rem; border-width: 1.5px; }
  .pts-rk .pr-row i.on { box-shadow: 0 .1rem .25rem rgba(0,0,0,.5); }
}
/* label too long beside the score tab (tablet widths): shown under the name instead of cut */
.pts-card.meta-low > .team-head > .pts-meta { visibility: hidden; }
.pts-card.meta-low .card { flex-wrap: wrap; row-gap: .15rem; height: auto; align-content: center; } /* the card grows for the second line instead of letting it spill over its edge */
.pts .pm3 { display: none; }
.pts-card.meta-low .pm3 { display: block; flex-basis: 100%; overflow: visible; white-space: normal; }
@container app (max-width: 40rem) { .pts .pm3 { display: none !important; } } /* phones keep their short line */
/* slack for the italic last digit (its slant overhangs the box and was clipped into an ellipsis) */
.pts .team-head > .pts-meta { padding-inline-end: .3rem; flex-shrink: 0; }
/* tablet portrait (narrow cards): Miss · Safety · Foul keep their words; the icons go first */
@container app (min-width: 40.01rem) and (max-width: 60rem) { .pts .pts-ball .pb-who { display: none; } #rsapp .pts .acts .pts-act svg { display: none; } #rsapp .pts .acts .pts-act { padding-inline: .4rem; } }

/* Statistics dialog (point games) */
.pts-st-t { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pts-st-t th, .pts-st-t td { padding: .55rem .5rem; border-bottom: 1px solid var(--line); text-align: end; }
.pts-st-t thead th { font-size: var(--text-sm); color: var(--text); font-weight: 800; white-space: nowrap; }
.pts-st-t thead th .pdot { display: inline-block; vertical-align: middle; margin-inline-end: .4rem; }
.pts-st-t tbody th { text-align: start; font-weight: 600; color: var(--dim); }
.pts-st-t td { width: 22%; font-family: var(--display); font-style: italic; font-weight: 800; font-size: 1.125rem; color: var(--text); }
.pts-st-t td.bt { color: #fff; } .pts-st-t td.bt::before { content: ""; display: inline-block; width: .4rem; height: .4rem; border-radius: 50%; background: var(--green); margin-inline-end: .45rem; vertical-align: middle; }
.pts-st-h { margin: .25rem 0 .5rem; font-size: 1rem; font-weight: 800; color: #fff; }
.pts-strip-w { overflow-x: auto; padding-bottom: .25rem; }
.pts-strip { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: 3px; height: 9rem; min-width: min-content; }
.pts-inn { position: relative; flex: 0 0 .875rem; }
.pts-inn i { position: absolute; left: 0; right: 0; height: max(2px, calc(var(--v) / 2)); background: oklch(.78 .13 var(--h)); border-radius: 2px; }
.pts-inn.up i { bottom: 50%; } .pts-inn.dn i { top: 50%; }
.pts-inn::after { content: ""; position: absolute; left: -1.5px; right: -1.5px; top: 50%; height: 1px; background: var(--line2); }
.pts-inn.fl i { box-shadow: inset 0 0 0 2px var(--red); background: oklch(.5 .09 var(--h)); }
.pts-inn.nr::before { content: ""; position: absolute; left: -2.5px; top: 0; bottom: 0; border-left: 1px dashed var(--dim); }
.pts-inn b { position: absolute; left: 50%; translate: -50% 0; font-size: .625rem; font-weight: 800; color: var(--dim); font-variant-numeric: tabular-nums; }
.pts-inn.up b { bottom: calc(50% + max(2px, calc(var(--v) / 2)) + 2px); } .pts-inn.dn b { top: calc(50% + max(2px, calc(var(--v) / 2)) + 2px); }
.pts-st-key { display: flex; flex-wrap: wrap; gap: .3rem 1rem; } .pts-st-key span { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.pts-st-key .k { width: .75rem; height: .75rem; border-radius: 2px; background: oklch(.78 .13 var(--h)); }
.pts-st-key .k.fl { background: transparent; box-shadow: inset 0 0 0 2px var(--red); } .pts-st-key .k.nr { width: 0; height: .9rem; border-left: 1px dashed var(--dim); border-radius: 0; background: none; }

/* One Pocket centre (tablets and computers): the foot half of the table, its two corner pockets carrying the players' initials, fading into the rack.
   The fade is on the felt layer only, so the pockets (which sit over the cushion) are never cut. */
@container app (min-width: 40.01rem) {
  .pts[data-game="1p"] .pts-rk { gap: .5rem; }
  .pts[data-game="1p"] .pts-tbl { width: 7.5rem; height: 9rem; border-color: transparent; border-bottom-width: 0; border-radius: .75rem .75rem 0 0; background: none; box-shadow: none; isolation: isolate; margin-top: .4rem; }
  .pts[data-game="1p"] .pts-tbl::after { content: ""; position: absolute; inset: -.45rem -.45rem 0; z-index: -1; border: .45rem solid #2a2f4a; border-bottom: 0; border-radius: .75rem .75rem 0 0; background: radial-gradient(ellipse at 50% 30%, oklch(.36 .06 180), oklch(.27 .045 190)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); -webkit-mask-image: linear-gradient(#000 0, #000 7.45rem, transparent 100%); mask-image: linear-gradient(#000 0, #000 7.45rem, transparent 100%); }
  .pts[data-game="1p"] .pts-tbl::before { top: 3.1rem; }
  .pts[data-game="1p"] .pts-tbl .p-hl, .pts[data-game="1p"] .pts-tbl .p-hr, .pts[data-game="1p"] .pts-tbl-c { display: none; }
  .pts[data-game="1p"] .pts-tbl .p-ml, .pts[data-game="1p"] .pts-tbl .p-mr { top: 6.25rem; }
  .pts[data-game="1p"] .pts-tbl .p-fl, .pts[data-game="1p"] .pts-tbl .p-fr { width: 1.75rem; height: 1.75rem; font-size: .8125rem; }
  .pts[data-game="1p"] .pts-rk > .pts-rack { position: relative; z-index: 1; margin-top: -2.75rem; }
}

/* who breaks (a new game) */
.pts-lagb { width: 100%; min-height: 3.25rem; font-size: 1rem; }
.pts-lagn .btn { justify-self: center; margin-top: .35rem; }
/* One Pocket: choosing a foot pocket on the table */
.pts-tbl .pk.pick { padding: 0; font: inherit; cursor: pointer; border: 2px dashed var(--cyan); background: rgba(125,207,255,.16); }
.pts-tbl .pk.pick::after { content: ""; position: absolute; inset: -.6rem; border-radius: 50%; }
@media (hover: hover) { .pts-tbl .pk.pick:hover { background: rgba(125,207,255,.32); border-style: solid; } }
/* the pocket choice slides each card (and its controls) to its side */
html.pts-vt::view-transition-old(root), html.pts-vt::view-transition-new(root) { animation: none; }
html.pts-vt .pts-card[data-side="A"] { view-transition-name: pts-card-a; } html.pts-vt .pts-card[data-side="B"] { view-transition-name: pts-card-b; }
html.pts-vt .pts-ctl[data-side="A"] { view-transition-name: pts-ctl-a; } html.pts-vt .pts-ctl[data-side="B"] { view-transition-name: pts-ctl-b; }
::view-transition-group(pts-card-a), ::view-transition-group(pts-card-b), ::view-transition-group(pts-ctl-a), ::view-transition-group(pts-ctl-b) { animation-duration: .4s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
/* phones (two columns): the pocket choice spans both columns (the inline grid-area names one column, so !important), buttons side by side, labels wrap */
@container app (max-width: 40rem) {
  .pts[data-ph="cols"] .pts-ctl.pick { grid-column: 1 / -1 !important; grid-row: 3 !important; }
  .pts[data-ph="cols"] .pts-ctl.pick-off { display: none; }
  .pts-pick, .pts-pick-b .btn { min-width: 0; }
  .pts-pick-b { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pts-pick-b .btn { white-space: normal; text-wrap: balance; }
}
/* 2v2 (scotch doubles): a team card with one row per partner, as in the rack games; the side's line and fouls sit in the head and wrap there, clear of the score tab */
.pts-duo > .team-head > .pts-meta { flex-shrink: 1; white-space: normal; line-height: 1.6; padding-inline-end: .3rem; }
.pts-duo .pts-meta .pts-foul { margin-inline-start: .5rem; vertical-align: middle; }
/* phones (two columns): the head holds only the score tab, so the side's short line starts the card, one fixed line high */
@container app (max-width: 40rem) {
  .pts[data-ph="cols"] .pts-duo > .team-head { min-height: 0; }
  .pts[data-ph="cols"] .pts-duo > .pm2 { line-height: 1.25rem; }
  .pts[data-ph="cols"] .pts-duo .pm2 .pts-foul { margin-inline-start: .35rem; padding: .05rem .4rem; font-size: .625rem; }
}
/* point games have no queue: no "+ Add player" under the cards */
#rsapp:has(.match.pts[data-game]) #addPlayer, #rsapp:has(.match.pts[data-game]) #soloAdd { display: none; }
/* the lag buttons carry team names: they wrap inside their column */
.pts-ctl { min-width: 0; } .pts-lagb { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-wrap: balance; line-height: 1.2; padding-block: .5rem; }

/* ===== v3 point-game bands (slice 4, spec §5): the band CSS from app.css applies; this file only adds the point-game pieces ===== */
#rsapp .match.pts { grid-template-columns: minmax(0, 1fr); grid-template-areas: "za" "vs" "zb"; grid-template-rows: auto; row-gap: .625rem; }
#rsapp .match.pts[data-ph] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "za" "vs" "zb"; }
#rsapp .pts .band.pts-card { height: 214px; min-height: 0; }
#rsapp .pts .band .band-keys { display: grid; grid-template-rows: 1fr auto; gap: 8px; padding: 16px 16px 16px 0; }
#rsapp .pts .band.band-r .band-keys { padding: 16px 0 16px 16px; }
#rsapp .pts .band .pts-ctl { display: grid; grid-template-rows: 1fr auto; gap: 8px; height: 100%; }
#rsapp .pts .band .pts-ball { min-height: 0; height: 100%; border: 0; border-radius: 8px; background: var(--hue); color: #0b0c10; font: italic 800 26px/1 var(--band-font); letter-spacing: .02em; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset; }
#rsapp .pts .band .pts-ball .pb-n { font-size: 40px; font-weight: 800; }
#rsapp .pts .band .pts-ball:disabled { background: rgba(255,255,255,.06); color: #98a0ae; }
#rsapp .pts .band .pts-other { height: 48px; background: rgba(255,255,255,.08); color: #eef1f6; font-size: 17px; } #rsapp .pts .band .pts-other .pb-n { font-size: 20px; }
#rsapp .pts .band .acts.pts-acts { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; }
#rsapp .pts .band .acts.pts-acts .act { height: 48px; min-height: 0; border: 0; border-radius: 8px; background: rgba(255,255,255,.08); color: #eef1f6; font: italic 800 17px/1 var(--band-font); letter-spacing: .04em; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 6px; }
#rsapp .pts .band .acts.pts-acts .act svg { width: 18px; height: 18px; } #rsapp .pts .band .acts.pts-acts .act:disabled { opacity: .35; }
#rsapp .pts .band .acts.pts-acts .act[data-warn] { box-shadow: inset 0 0 0 1.5px #f7768e; color: #f7768e; }
#rsapp .pts .band .pts-lagb { height: 100%; border: 0; border-radius: 8px; background: rgba(255,255,255,.08); color: #eef1f6; font: italic 800 22px/1.1 var(--band-font); text-transform: uppercase; }
#rsapp .pts .band .pts-ctl.pick { display: block; } #rsapp .pts .band .pts-pick { color: #eef1f6; font-size: 15px; } #rsapp .pts .band .pts-pick-b { display: flex; gap: 8px; margin-top: 8px; }
#rsapp .pts .band .pill.foul { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 13px; background: rgba(247,118,142,.18); color: #f7768e; font: 700 13px/1 var(--band-font); letter-spacing: .06em; text-transform: uppercase; }
#rsapp .pts .band .pill.foul.two { background: #f7768e; color: #0b0c10; }
#rsapp .pts .band .score.neg { font-size: 110px; }
#rsapp .pts .band .strip i.n { background: rgba(255,255,255,.22); }
#rsapp .pts .band .team-label { text-transform: uppercase; }
/* balls tray between the bands */
#rsapp .pts .pts-mid { grid-area: vs; display: grid; justify-items: center; justify-self: stretch; align-self: center; width: 100%; max-width: none; gap: 10px; padding: 0; margin: 22px 0; }
#rsapp .pts .pts-mid .vs, #rsapp .pts .pts-rack { display: none; }
#rsapp .pts .pts-rk { display: grid; grid-auto-flow: column; align-items: center; gap: 18px; }
.balls-tray { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 100%; }
.balls-tray .ball { position: relative; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: radial-gradient(circle at 35% 30%, oklch(.9 .16 var(--bh)) 0, oklch(.7 .19 var(--bh)) 45%, oklch(.42 .14 var(--bh)) 100%); box-shadow: inset -3px -4px 8px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.4); transition: opacity .3s, filter .3s; }
.balls-tray .ball b { width: 18px; height: 18px; border-radius: 50%; background: #f2f2ee; color: #111; font: 800 11px/18px var(--band-font); text-align: center; }
.balls-tray .ball.stripe { background: radial-gradient(circle at 35% 30%, #fff 0, #e8e8e2 45%, #b9b9b2 100%); }
.balls-tray .ball.stripe::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; bottom: 10px; background: linear-gradient(180deg, oklch(.75 .19 var(--bh)), oklch(.55 .17 var(--bh))); border-radius: 50% / 100%; }
.balls-tray .ball.stripe b { position: relative; }
.balls-tray .ball.eight { background: radial-gradient(circle at 35% 30%, #4a4a4a 0, #1a1a1a 55%, #000 100%); }
.balls-tray .ball.plain { background: radial-gradient(circle at 35% 30%, #fff 0, #ddd 50%, #9a9a94 100%); }
.balls-tray .ball.off { opacity: .22; filter: grayscale(1); }
#rsapp .pts .pts-on { display: grid; justify-items: center; align-content: center; gap: 2px; color: #eef1f6; } #rsapp .pts .pts-on b { font: italic 800 44px/.9 var(--band-font); } #rsapp .pts .pts-on small { font: 600 12px/1 var(--band-mono); letter-spacing: .08em; text-transform: uppercase; color: #98a0ae; }
#rsapp .pts .pts-rackno { font: italic 800 15px/1 var(--band-font); letter-spacing: .1em; text-transform: uppercase; color: #98a0ae; }
#rsapp .pts .pts-note { max-width: 620px; padding: 10px 14px; border-radius: 10px; background: #1c2029; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); color: #eef1f6; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
#rsapp .pts .pts-note b { font: italic 800 17px/1 var(--band-font); text-transform: uppercase; letter-spacing: .04em; } #rsapp .pts .pts-note.bad { box-shadow: inset 0 0 0 1.5px #f7768e; }
#rsapp .pts .pts-win { display: grid; justify-items: center; gap: 8px; padding: 16px; color: #eef1f6; } #rsapp .pts .pts-win b { font: italic 800 40px/1 var(--band-font); text-transform: uppercase; }
@container match (max-width: 56rem) {
  #rsapp .pts .band.pts-card { height: 276px; }
  #rsapp .pts .band .band-keys { grid-area: ky; padding: 0 16px 14px; } #rsapp .pts .band .pts-ctl { grid-template-rows: 64px auto; height: auto; } #rsapp .pts .band .pts-ball .pb-n { font-size: 30px; }
  .balls-tray .ball { width: 36px; height: 36px; }
}
@container match (max-width: 36rem) {
  #rsapp .pts .band.pts-card { height: auto; min-height: 244px; }
  #rsapp .pts .band .pts-ctl { grid-template-rows: 56px auto; } #rsapp .pts .band .acts.pts-acts .act { height: 44px; font-size: 15px; } #rsapp .pts .band .pts-ball { font-size: 20px; }
  .balls-tray { gap: 8px 4px; padding: 8px 10px; } .balls-tray.exact { display: grid; grid-template-columns: repeat(8, 40px); } .balls-tray.count .ball { width: 11px; height: 11px; }
  #rsapp .pts .pts-rk { display: grid; grid-auto-flow: row; justify-items: center; gap: 8px; } #rsapp .pts .pts-tbl { display: none; }
  #rsapp .pts .pts-on { display: flex; align-items: baseline; gap: 6px; } #rsapp .pts .pts-on b { font-size: 24px; }
  .balls-tray { background: none; border-radius: 0; padding: 0; } .balls-tray.exact { grid-template-columns: repeat(8, 34px); gap: 6px 2px; } .balls-tray .ball { width: 32px; height: 32px; } .balls-tray .ball b { width: 15px; height: 15px; font-size: 9px; line-height: 15px; }
  #rsapp .pts .pts-mid { margin: 14px 0; }
  /* phone bands: keys take the full width under the body; the plate column stays clear */
  #rsapp .pts .band.pts-card, #rsapp .pts .band.pts-card.band-r { grid-template-columns: 104px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "sp nm" "sp ky"; }
  #rsapp .pts .band.pts-card.band-r { grid-template-columns: minmax(0, 1fr) 104px; grid-template-areas: "nm sp" "ky sp"; }
  #rsapp .pts .band .band-keys { grid-area: ky; padding: 0 12px 14px 0; } #rsapp .pts .band.band-r .band-keys { padding: 0 0 14px 12px; }
  #rsapp .pts .band .pts-ctl { grid-template-rows: 52px auto; } #rsapp .pts .band .acts.pts-acts .act { font-size: 13px; padding: 0 4px; } #rsapp .pts .band .acts.pts-acts .act svg { width: 14px; height: 14px; }
  #rsapp .pts .pts-rk, #rsapp .pts[data-game] .pts-rk { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; justify-items: center; width: 100%; min-height: 0; padding: 0; border-radius: 0; background: none; border: 0; box-shadow: none; }
  #rsapp .pts .pts-mid { padding: 0 10px; }
}
#rsapp.rs-pre .pts .acts, #rsapp.rs-pre .pts .pts-acts { visibility: visible; }
#rsapp .pts .pts-rk { grid-template-columns: minmax(0, 1fr) auto; width: 100%; max-width: 1000px; justify-items: center; }
.balls-tray.exact { flex-wrap: nowrap; }
@container match (max-width: 56rem) { .balls-tray.exact { flex-wrap: wrap; max-width: 420px; } }
#rsapp .pts .band .acts.pts-acts .act, #rsapp .pts .band .acts.pts-acts .act span { overflow: visible; text-overflow: clip; white-space: nowrap; max-width: none; width: auto; padding: 0 6px; }
#rsapp .pts .band .acts.pts-acts .act span { padding: 0; }
#rsapp .pts .band .pts-ctl.off .pts-ball, #rsapp .pts .band .pts-ctl.off .act { box-shadow: none; }

/* ===== 14.1 balls left + re-rack (review/T, picks S3 + S2 keypad, S5) ===== */
/* stepper in the key column: [−] [n LEFT] [+]; − and + hold like every band key, the count is a plain tap that opens the keypad */
#rsapp .pts .band .pts-step3 { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; gap: 6px; min-height: 0; }
#rsapp .pts .band .pts-step3 .pts-ball { height: auto; min-height: 0; padding: 0; gap: 0; }
#rsapp .pts .band .pts-step3 .pts-ball .pb-n { font-size: 36px; line-height: 1; }
#rsapp .pts .band .pts-left-btn { min-width: 0; border: 0; border-radius: 8px; background: rgba(255,255,255,.08); color: #eef1f6; display: grid; align-content: center; justify-items: center; gap: 3px; padding: 0; cursor: pointer; font: inherit; box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset; transition: background .12s; }
#rsapp .pts .band .pts-left-btn b { font: italic 800 42px/.9 var(--band-font); letter-spacing: -.02em; }
#rsapp .pts .band .pts-left-btn small { font: 600 11px/1 var(--band-mono); letter-spacing: .14em; text-transform: uppercase; color: #98a0ae; }
#rsapp .pts .band .pts-left-btn:disabled { opacity: .35; cursor: default; }
#rsapp .pts .band .pts-left-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (hover: hover) { #rsapp .pts .band .pts-left-btn:not(:disabled):hover { background: rgba(255,255,255,.14); } }
@container match (max-width: 56rem) { #rsapp .pts .band .pts-left-btn b { font-size: 30px; } #rsapp .pts .band .pts-step3 .pts-ball .pb-n { font-size: 30px; } }
@container match (max-width: 36rem) { #rsapp .pts .band .pts-step3 { grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 4px; } #rsapp .pts .band .pts-left-btn { grid-auto-flow: column; align-items: baseline; gap: 6px; } #rsapp .pts .band .pts-left-btn b { font-size: 26px; } #rsapp .pts .band .pts-left-btn small { font-size: 10px; } #rsapp .pts .band .pts-step3 .pts-ball .pb-n { font-size: 26px; } }

/* re-rack key beside the tray (S5): scores all but the break ball, racks 14, the shooter keeps the table; lit when one ball from the rack */
#rsapp .pts .pts-rerack { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px 0 12px; border: 0; border-radius: 8px; background: rgba(255,255,255,.08); color: #eef1f6; font: italic 800 17px/1 var(--band-font); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; white-space: nowrap; --hold-fill: var(--hue); box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset; }
#rsapp .pts .pts-rerack svg { width: 18px; height: 18px; flex: none; }
#rsapp .pts .pts-rerack b { font: italic 800 24px/1 var(--band-font); color: var(--hue); }
#rsapp .pts .pts-rerack small { font: 600 11px/1 var(--band-mono); letter-spacing: .1em; color: #98a0ae; text-transform: uppercase; max-width: 12ch; overflow: hidden; text-overflow: ellipsis; }
#rsapp .pts .pts-rerack.ready { background: var(--hue); color: #0b0c10; animation: lp-pulse 2.4s ease-in-out infinite; }
#rsapp .pts .pts-rerack.ready b, #rsapp .pts .pts-rerack.ready small { color: #0b0c10; }
#rsapp .pts .pts-rerack:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (hover: hover) { #rsapp .pts .pts-rerack:not(.ready):hover { background: rgba(255,255,255,.14); } }
@keyframes lp-pulse { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 26px -4px var(--hue); } }
@container match (min-width: 36.01rem) { #rsapp .pts[data-game="141"] .pts-rk { grid-template-columns: minmax(0, 1fr) auto auto; } }
@container match (max-width: 36rem) { #rsapp .pts .pts-rerack { height: 44px; font-size: 15px; } }

/* the keypad: centred over the game, the bands dim behind it (same shell as "who breaks") */
#rsapp .pts .lp-scrim { position: fixed; inset: 0; z-index: 950; background: rgba(6,7,10,.6); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
#rsapp .pts .who-breaks.pts-left { position: fixed; z-index: 951; width: min(92vw, 440px); padding: 22px 22px 18px; gap: 12px; }
#rsapp .pts .pts-left > span:not(.wb-keys) { font: 600 12px/1.3 var(--band-mono); letter-spacing: .1em; text-transform: uppercase; color: #98a0ae; }
#rsapp .pts .lp-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; width: 100%; margin-top: 4px; }
#rsapp .pts .lp-n { height: 60px; min-width: 0; border: 0; border-radius: 8px; background: #20242d; color: #eef1f6; font: italic 800 26px/1 var(--band-font); cursor: pointer; transition: background .12s, transform .12s; }
#rsapp .pts .lp-n:disabled { opacity: .22; cursor: default; }
#rsapp .pts .lp-n.on { background: var(--hue); color: #0b0c10; }
#rsapp .pts .lp-n:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (hover: hover) { #rsapp .pts .lp-n:not(:disabled):not(.on):hover { background: #2a3040; } }
#rsapp .pts .lp-res { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; width: 100%; padding: 0 12px; border-radius: 8px; background: rgba(255,255,255,.05); color: #eef1f6; font-size: 14px; }
#rsapp .pts .lp-res b { font: italic 800 34px/1 var(--band-font); color: var(--hue); }
#rsapp .pts .lp-res .lp-hint { color: #98a0ae; }
#rsapp .pts .lp-ends { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
#rsapp .pts .pts-left .lp-k { min-height: 52px; padding: 0 8px; font: italic 800 17px/1 var(--band-font); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
#rsapp .pts .pts-left .lp-k:disabled { opacity: .35; cursor: default; }
#rsapp .pts .pts-left .lp-k.warn { box-shadow: inset 0 0 0 1.5px #f7768e; color: #f7768e; }
#rsapp .pts .pts-left .lp-keep { width: 100%; background: rgba(255,255,255,.06); }
#rsapp .pts .pts-left .wb-cancel { margin-top: -4px; }
#rsapp .match.lp-open .band, #rsapp .match.lp-open .pts-rk, #rsapp .match.lp-open .pts-note { filter: saturate(.7) brightness(.7); transition: filter .32s var(--ease-out); }
@media (max-width: 480px) { #rsapp .pts .lp-n { height: 52px; font-size: 24px; } #rsapp .pts .who-breaks.pts-left { padding: 18px 16px 14px; } #rsapp .pts .pts-left .lp-k { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { #rsapp .pts .pts-rerack.ready { animation: none; } }
/* point games decide the break in their own overlay: the rack engine's "Lag or roll the dice" line stays hidden */
#rsapp:has(.match.pts[data-game]) #preMsg { display: none !important; }
/* tablet (≤56rem): the keys sit under the names and take that column's width (capped), flush with the names' edge: left in band-l, right in band-r */
@container match (max-width: 56rem) {
  #rsapp .pts .band .band-keys, #rsapp .pts .band.band-r .band-keys { display: flex; align-items: stretch; justify-content: flex-start; padding: 0 16px 14px 0; }
  #rsapp .pts .band.band-r .band-keys { justify-content: flex-end; padding: 0 0 14px 16px; }
  #rsapp .pts .band .pts-ctl { width: 100%; max-width: 480px; min-width: 0; }
  #rsapp .pts .band.band-r .pts-ctl { margin-left: auto; }
}
/* 2 Nov: balls tray dropped on every screen; the centre holds the re-rack key (14.1), the pocket table (One Pocket) or the count (Bank) */
#rsapp .pts .pts-rk { grid-template-columns: none; grid-auto-flow: column; justify-content: center; justify-items: center; max-width: none; }
#rsapp .pts .pts-mid { margin: 18px 0; }
@container match (max-width: 36rem) { #rsapp .pts .pts-mid { margin: 12px 0; } }
/* 16 keys (15…0): the 0 key fills the last row's remaining cell; it means every ball down, break ball too → auto re-rack */
#rsapp .pts-left .lp-n[data-n="0"] { grid-column: 1 / -1; height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; line-height: 1; }
#rsapp .pts-left .lp-n[data-n="0"] small { position: relative; top: 1px; font: 600 12px/1 var(--mono, ui-monospace, monospace); letter-spacing: .1em; text-transform: uppercase; color: inherit; opacity: .75; }

/* ===== Owner fixes (21 Oct, after review): on phones the tray's rows centre on each other, and the band's keys keep
   clear of the strip ===== */
@container match (max-width: 36rem) {
  .balls-tray.exact { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 4px; max-width: 284px; }
  #rsapp .pts .band .band-keys, #rsapp .pts .band.band-r .band-keys { padding-bottom: 26px; }
}
/* Narrow phones (owner, 2 Nov 2026): Miss, Safety and Foul do not fit with their icons, so only the words show */
@container match (max-width: 21rem) { #rsapp .pts .band .acts.pts-acts .act svg { display: none; } }