.tm-manager[data-site="dark"] {
    --tm-bg:#171717; --tm-surface:#222; --tm-surface-2:#2b2b2b; --tm-border:#3a3a3a;
    --tm-text:#f2f2f2; --tm-muted:#a3a3a3; --tm-soft:#767676;
    --tm-accent:#ff8c00; --tm-blue:#2f7dd3; --tm-green:#259b55; --tm-red:#bf3d3d; --tm-yellow:#ffc247;
    --tm-input-bg:#151515; --tm-match-bg:#191919; --tm-row-bg:rgba(255,255,255,.035);
    --tm-line:#555;
    color-scheme: dark;
}
.tm-manager[data-site="dark"] input[type="date"],
.tm-manager[data-site="dark"] input[type="time"],
.tm-manager[data-site="dark"] input[type="datetime-local"] { color-scheme: dark; }
.tm-manager[data-site="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
.tm-manager[data-site="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
.tm-manager[data-site="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23f2f2f2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:center; background-size:18px 18px;
    filter:none !important; opacity:1 !important; cursor:pointer;
}
.tm-manager[data-site="dark"] input:-webkit-autofill,
.tm-manager[data-site="dark"] textarea:-webkit-autofill,
.tm-manager[data-site="dark"] select:-webkit-autofill { -webkit-text-fill-color:#f2f2f2 !important; caret-color:#f2f2f2 !important; box-shadow:0 0 0 1000px #151515 inset !important; border-color:#3a3a3a !important; transition:background-color 9999s ease-out 0s !important; }
.tm-manager[data-site="light"] {
    --tm-bg:transparent; --tm-surface:rgba(255,255,255,.2); --tm-surface-2:rgba(255,255,255,.2); --tm-border:rgba(255,255,255,.35);
    --tm-text:#1d2330; --tm-muted:#5a6370; --tm-soft:#8a92a0;
    --tm-accent:#ff8c00; --tm-blue:#2f7dd3; --tm-green:#1f8b48; --tm-red:#c64141; --tm-yellow:#d99500;
    --tm-input-bg:rgba(255,255,255,.2); --tm-match-bg:rgba(255,255,255,.2); --tm-row-bg:rgba(255,255,255,.12);
    --tm-line:rgba(0,0,0,.22);
}
.tm-manager[data-site="light"][data-default-theme="dark"] {
    --tm-bg:#ffffff !important;
    background:#ffffff !important;
}
.tm-manager { color: var(--tm-text); text-align:left; background: var(--tm-bg); }
.tm-manager * { box-sizing:border-box; }
.tm-shell { max-width:none; width:99%; margin:0 auto; padding:30px 0px 28px; }
.tm-head { display:flex; justify-content:flex-end; align-items:center; gap:12px; margin:6px 0 16px; }
.tm-head.tm-head-viewer { justify-content:flex-end; }
.tm-head.tm-head-viewer .tm-head-main { display:none; }
/* detail views move Back + theme into the card, leaving the top bar empty */
.tm-head.tm-head-empty { display:none; }
/* Back + theme row pinned to the top-right of the public tournament hero card */
.tm-public-hero-actions { margin:0 0 10px; }
.tm-manager .tm-public-manage-link { color:#fff !important; white-space:nowrap; }
.tm-manager .tm-public-manage-link:hover { color:#fff !important; }
.tm-title { display:flex; align-items:center; gap:10px; font-size:24px; font-weight:800; }
.tm-title .material-symbols-outlined { color:var(--tm-accent); font-size:28px; }
.tm-title-actions { display:inline-flex; align-items:center; gap:6px; margin-left:6px; }
.tm-subtitle { color:var(--tm-muted); font-size:13px; margin-top:4px; }
.tm-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.tm-publish-options { display:flex; flex-direction:column; align-items:stretch; gap:8px; padding:5px 8px; border:1px solid var(--tm-border); border-radius:7px; background:var(--tm-surface-2); }
.tm-publish-options > span,
.tm-publish-same > span,
.tm-publish-mode-select span,
.tm-publish-stage-group-title { color:var(--tm-muted); font-size:11px; font-weight:800; text-transform:uppercase; }
.tm-publish-options input, .tm-group-tools input { min-height:28px; border:1px solid var(--tm-border) !important; border-radius:6px; background:var(--tm-input-bg) !important; color:var(--tm-text) !important; -webkit-text-fill-color:var(--tm-text) !important; caret-color:var(--tm-text) !important; text-align:center; font-weight:900; }
.tm-publish-options input { width:70px; }
.tm-publish-options select { min-height:28px; border:1px solid var(--tm-border) !important; border-radius:6px; background:var(--tm-input-bg) !important; color:var(--tm-text) !important; -webkit-text-fill-color:var(--tm-text) !important; caret-color:var(--tm-text) !important; font-weight:900; }
.tm-publish-options .tm-publish-target-mode { width:auto !important; min-width:180px; }
.tm-publish-options .tm-publish-stage-value { width:78px; }
.tm-publish-options-head { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.tm-publish-mode-select { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tm-publish-same { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tm-publish-stage-list { display:none; gap:10px; }
.tm-publish-options[data-tm-publish-mode="stages"] .tm-publish-same { display:none; }
.tm-publish-options[data-tm-publish-mode="stages"] .tm-publish-stage-list { display:grid; }
.tm-publish-stage-group { display:grid; gap:6px; }
.tm-publish-stage-row { display:grid; grid-template-columns:minmax(0, 1fr) 78px; gap:8px; align-items:center; }
.tm-publish-stage-label { min-width:0; color:var(--tm-text); font-size:12px; font-weight:700; text-transform:none; line-height:1.2; }
.tm-btn { min-height:36px; border:0; border-radius:7px; padding:0 14px; color:#fff; background:var(--tm-blue); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:6px; font-weight:700; text-decoration:none; line-height:1; }
.tm-btn .material-symbols-outlined { font-size:19px; }
.tm-btn:hover { opacity:.9; }
.tm-btn:disabled { opacity:.55; cursor:default; }
.tm-replace-btn-locked { opacity:.5; }
.tm-btn-primary { background:var(--tm-blue); }
.tm-btn-success { background:var(--tm-green); }
.tm-btn-danger { background:var(--tm-red); }
.tm-btn-warning { background:#d77900; }
.tm-btn-ghost { background:transparent; border:1px solid var(--tm-border); color:var(--tm-text); }
.tm-btn-sm { min-height:30px; padding:0 10px; font-size:12px; }
.tm-finish-banner { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin:0 0 16px; padding:14px 16px; border:1px solid rgba(35,180,110,.55); border-radius:12px; background:linear-gradient(90deg,rgba(35,180,110,.18),rgba(35,180,110,.06)); }
.tm-finish-banner-text { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:var(--tm-text); }
.tm-finish-banner-text .material-symbols-outlined { font-size:26px; color:var(--tm-green); }
.tm-finish-banner .tm-btn { white-space:nowrap; }
.tm-theme-toggle { min-width:92px; }
.tm-panel { background:var(--tm-surface); border:1px solid var(--tm-border); border-radius:8px; padding:16px; margin-bottom:14px; }
/* The create/edit form renders inside the same .tm-panel chrome as any read-only card (#tmEditPanel
   only adds the id for JS targeting), so nothing marked "this is now open for editing" versus just
   looking. An accent wash + left bar does, in both themes: the id selector only touches
   background-image and border-left, so .tm-panel's own background-color/border keep applying
   underneath everything else. --tm-accent is the same orange in both [data-site] themes, so this
   needs no light/dark branch.
   !important on both: [data-site="light"] .tm-panel (below) sets the WHOLE `background` and
   `border-color` shorthand !important, which resets background-image to none and repaints
   border-left-color, on every .tm-panel including this one. An id beats that rule's two classes on
   specificity alone, but only once both sides are !important - otherwise the plain declaration
   loses regardless of the id, and the wash silently stopped existing in the light theme only
   (dark theme has no such blanket panel override, so it looked fine and hid the bug). */
#tmEditPanel { background-image:linear-gradient(165deg, rgba(255,140,0,.09), rgba(255,140,0,.015) 55%) !important; border-left:3px solid var(--tm-accent) !important; }
.tm-panel-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:12px; }
/* keep the card's Back/Share/Theme/Edit/End/Delete buttons on a single row (title shrinks to fit) */
.tm-panel-head > .tm-actions { flex-wrap:nowrap; flex-shrink:0; }
.tm-panel-title { font-size:17px; font-weight:800; }
/* Fallback value on purpose: this class is also used in myAlert() bodies (the auto-assign
   explainer, the out-of-credits notice), which render in the site's alert box OUTSIDE #tmManager -
   where --tm-muted is not defined at all. An undefined var makes the whole declaration invalid at
   computed-value time, so `color` silently fell back to inherit and the note came out as the
   alert's plain white instead of a muted second line. Readable either way, but not what it should
   look like; the fallback is a mid grey that works on both the dark alert box and either theme. */
.tm-panel-note { color:var(--tm-muted, #a3a3a3); font-size:13px; margin-top:4px; }
.tm-tournament-logo { margin:12px 0; padding:0; border:0; background:transparent; display:block; cursor:zoom-in; text-align:left; }
.tm-tournament-logo img { width:100%; max-height:540px; object-fit:contain; border-radius:8px; border:1px solid var(--tm-border); background:var(--tm-surface-2); display:block; }
.tm-tournament-logo-compact { margin:0; width:104px; flex:0 0 104px; }
.tm-tournament-logo-compact img { width:104px; height:auto; max-height:none; object-fit:contain; }
.tm-tournament-head-copy { display:flex; align-items:flex-start; gap:12px; min-width:0; flex:1; }
.tm-tournament-head-text { min-width:0; flex:1; }
.tm-details-toggle { margin-top:4px; }
.tm-logo-preview { display:flex; align-items:center; gap:10px; margin-top:8px; color:var(--tm-muted); font-size:12px; }
.tm-logo-preview img { width:76px; height:52px; border-radius:6px; object-fit:cover; border:1px solid var(--tm-border); background:var(--tm-surface-2); }
.tm-grid { display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:12px; }
.tm-field { display:block; grid-column:span 4; }
.tm-field-wide { grid-column:span 12; }
.tm-field-half { grid-column:span 6; }
.tm-field-third { grid-column:span 4; }
.tm-inline-fields { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.tm-inline-fields .tm-select, .tm-inline-fields .tm-input { flex:1 1 220px; }
.tm-field label, .tm-field > span { display:block; font-size:12px; color:var(--tm-muted); text-transform:uppercase; margin-bottom:5px; font-weight:700; }
.tm-input, .tm-select, .tm-textarea { width:100%; min-height:38px; padding:8px 10px; border-radius:7px; border:1px solid var(--tm-border); background:var(--tm-input-bg); color:var(--tm-text); font-size:14px; outline:none; }
.tm-input:focus, .tm-select:focus, .tm-textarea:focus { border-color:var(--tm-blue); }
.tm-input.invalid, .tm-select.invalid, .tm-textarea.invalid { border-color:var(--tm-red); }
.tm-textarea { min-height:74px; resize:vertical; }
.tm-manager[data-site="dark"] .tm-input,
.tm-manager[data-site="dark"] .tm-select,
.tm-manager[data-site="dark"] .tm-textarea {
    background:#151515 !important;
    border-color:#3a3a3a !important;
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    caret-color:#ffffff !important;
}
.tm-manager[data-site="dark"] .tm-input::placeholder,
.tm-manager[data-site="dark"] .tm-textarea::placeholder { color:#a3a3a3 !important; -webkit-text-fill-color:#a3a3a3 !important; }
.tm-manager[data-site="dark"] .tm-select option { background:#151515 !important; color:#ffffff !important; }
.tm-manager[data-site="dark"] .tm-publish-options input,
.tm-manager[data-site="dark"] .tm-group-tools input { background:#151515 !important; border-color:#3a3a3a !important; color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; caret-color:#ffffff !important; }
/* Billiardon (light theme) - force dark text against white inputs */
.tm-manager[data-site="light"] { color:#111827 !important; color-scheme:light; }
.tm-manager[data-site="light"] .tm-input,
.tm-manager[data-site="light"] .tm-select,
.tm-manager[data-site="light"] .tm-textarea { color:#111827 !important; -webkit-text-fill-color:#111827 !important; caret-color:#111827 !important; background:#ffffff !important; border-color:rgba(17,24,39,.28) !important; }
.tm-manager[data-site="light"] .tm-input::placeholder,
.tm-manager[data-site="light"] .tm-textarea::placeholder { color:#6b7280 !important; -webkit-text-fill-color:#6b7280 !important; }
.tm-manager[data-site="light"] .tm-select option { background:#ffffff !important; color:#111827 !important; }
.tm-manager[data-site="light"] .tm-publish-options input,
.tm-manager[data-site="light"] .tm-group-tools input { color:#111827 !important; -webkit-text-fill-color:#111827 !important; caret-color:#111827 !important; background:#ffffff !important; border-color:rgba(17,24,39,.28) !important; }
.tm-manager[data-site="light"] .tm-panel,
.tm-manager[data-site="light"] .tm-public-hero,
.tm-manager[data-site="light"] .tm-stat,
.tm-manager[data-site="light"] .tm-empty,
.tm-manager[data-site="light"] .tm-view-tabs,
.tm-manager[data-site="light"] .tm-tournament-card,
.tm-manager[data-site="light"] .tm-player-row,
.tm-manager[data-site="light"] .tm-group-card,
.tm-manager[data-site="light"] .tm-group-stage-card,
.tm-manager[data-site="light"] .tm-bracket-panel,
.tm-manager[data-site="light"] .tm-match-list-panel,
.tm-manager[data-site="light"] .tm-rr-match,
.tm-manager[data-site="light"] .tm-sched-row,
.tm-manager[data-site="light"] .tm-sort-slot { background:rgba(255,255,255,.96) !important; border-color:rgba(17,24,39,.16) !important; color:#111827 !important; }
.tm-manager[data-site="light"] .tm-manual-match-list > .tm-sort-slot.tm-manual-row-alt { background:rgba(255,140,0,.16) !important; }
.tm-manager[data-site="light"] .tm-bracket-match,
.tm-manager[data-site="light"] .tm-match-list-row,
.tm-manager[data-site="light"] .tm-bracket-side,
.tm-manager[data-site="light"] .tm-side-score,
.tm-manager[data-site="light"] .tm-sort-pos,
.tm-manager[data-site="light"] .tm-player-number,
.tm-manager[data-site="light"] .tm-icon-tile { background:#f8fafc !important; border-color:rgba(17,24,39,.14) !important; color:#111827 !important; }
.tm-manager[data-site="light"] .tm-table-chip { color:#111827 !important; background:#ffffff !important; border-color:rgba(17,24,39,.18) !important; }
.tm-manager[data-site="light"] .tm-player-link,
.tm-manager[data-site="light"] .tm-player-name-inline,
.tm-manager[data-site="light"] .tm-bracket-side,
.tm-manager[data-site="light"] .tm-match-list-side,
.tm-manager[data-site="light"] .tm-sched-players,
.tm-manager[data-site="light"] .tm-card-title,
.tm-manager[data-site="light"] .tm-panel-title { color:#111 !important; }
.tm-manager[data-site="light"] .tm-player-meta,
.tm-manager[data-site="light"] .tm-panel-note,
.tm-manager[data-site="light"] .tm-match-list-meta,
.tm-manager[data-site="light"] .tm-sched-time,
.tm-manager[data-site="light"] .tm-sched-table,
.tm-manager[data-site="light"] .tm-public-meta,
.tm-manager[data-site="light"] .tm-bracket-round-title,
.tm-manager[data-site="light"] .tm-match-list-round-title,
.tm-manager[data-site="light"] .tm-bracket-match-head,
.tm-manager[data-site="light"] .tm-rr-match-head,
.tm-manager[data-site="light"] .tm-standings-table th,
.tm-manager[data-site="light"] .tm-sort-handle,
.tm-manager[data-site="light"] .tm-sched-num,
.tm-manager[data-site="light"] .tm-match-status-line,
.tm-manager[data-site="light"] .tm-inline-status { color:#4b5563 !important; }
.tm-manager[data-site="light"] .tm-standings-table td { color:#111827 !important; }
/* The minimal side paints its highlight through a ::before pseudo-element (its own layout needs the
   element background to stay clear), so keep it transparent and colour the pseudo-element instead. */
.tm-manager[data-site="light"] .tm-match-list-panel .tm-minimal-side.tm-player-marked {
    background:transparent !important;
    box-shadow:none !important;
}
.tm-manager[data-site="light"] .tm-match-list-panel .tm-minimal-side.tm-player-marked::before {
    background:rgba(255,230,120,.62);
    box-shadow:inset 0 0 0 1px rgba(194,134,0,.22);
}
/* Bracket + match-list sides get a visible amber highlight directly (they have no ::before). The
   earlier rule blanked these to transparent on light, leaving only a faint text tint that read as
   "no highlight". Uses the brighter standings-style yellow so it stands out on the light glass. */
.tm-manager[data-site="light"] .tm-bracket-side.tm-player-marked,
.tm-manager[data-site="light"] .tm-match-list-side.tm-player-marked {
    background:rgba(255,230,120,.62) !important;
    box-shadow:inset 0 0 0 1px rgba(194,134,0,.22) !important;
    border-radius:6px !important;
}
.tm-manager[data-site="light"] .tm-bracket-side.tm-player-marked .tm-player-link,
.tm-manager[data-site="light"] .tm-match-list-side.tm-player-marked .tm-player-link,
.tm-manager[data-site="light"] .tm-match-list-panel .tm-minimal-side.tm-player-marked .tm-minimal-name-text {
    color:#9f6a00 !important;
}
/* Readability safety net. The small status pills/boxes colour their TEXT with an accent over a
   same-hue tint. On the LIGHT theme that tint sits on white, so a bright accent (e.g. the orange
   live-points box, or the blue/green score pills) drops below a readable contrast — the earlier
   light-theme block never covered these. Force darker accent text on light; the dark theme keeps
   the bright accents (bright-on-dark stays legible). Also lift the light "soft" token so faint
   secondary text (byes, hints) is legible. */
.tm-manager[data-site="light"] { --tm-soft:#6b7280; }
.tm-manager[data-site="light"] .tm-score-pill { color:#1a5aa8 !important; }
.tm-manager[data-site="light"] .tm-score-pill.live,
.tm-manager[data-site="light"] .tm-live-chip { color:#157a3d !important; }
.tm-manager[data-site="light"] .tm-side-points.live { color:#b45309 !important; }
.tm-manager[data-site="light"] .tm-side-points,
.tm-manager[data-site="light"] .tm-side-points.finished,
.tm-manager[data-site="light"] .tm-score-pill.finished,
.tm-manager[data-site="light"] .tm-finished-chip,
.tm-manager[data-site="light"] .tm-rr-head-status { color:#4b5563 !important; }
/* Score/points numerals always fall back to the theme text colour so a status tint can never
   render them (near-)invisible on either theme. */
.tm-manager .tm-side-score, .tm-manager .tm-tv-score { color:var(--tm-text) !important; }
/* LIVE highlight must survive the light-theme background overrides (those use
   [data-site=light] .tm-bracket-match etc. which out-specify the base .live
   rules and were flattening the green wash to plain white in light mode). */
.tm-manager[data-site="light"] .tm-bracket-match.live,
.tm-manager[data-site="light"] .tm-rr-match.live,
.tm-manager[data-site="light"] .tm-match-list-row.live { background:linear-gradient(90deg, rgba(37,155,85,.30), #ffffff 52%) !important; border-color:rgba(37,155,85,.6) !important; box-shadow:0 0 0 1px rgba(37,155,85,.26), 0 0 16px rgba(37,155,85,.20) !important; }
.tm-manager[data-site="light"] .tm-sched-row.live { background:#e3f6ea !important; border-color:#2d9355 !important; box-shadow:inset 4px 0 0 #45b96e !important; }
.tm-manager[data-site="light"] .tm-sched-row.finished { background:#dce3eb !important; border-color:#8794a4 !important; box-shadow:inset 4px 0 0 #64748b !important; }
.tm-manager[data-site="light"] .tm-match-list-row:hover { background:#eef4fb !important; border-color:rgba(47,125,211,.48) !important; box-shadow:0 8px 18px rgba(17,24,39,.08) !important; }
.tm-manager[data-site="light"] .tm-match-list-row.tm-minimal-row:hover { background:rgba(47,125,211,.10) !important; border-color:rgba(47,125,211,.46) !important; }
.tm-manager[data-site="light"] .tm-match-list-row.tm-minimal-row.live { background:rgba(37,155,85,.14) !important; box-shadow:none !important; }
/* DARK theme text enforcement (mirror of the light block above). The host-site stylesheets that
   wrap the embedded manager colour global text with !important — billiardon.css sets
   `body`, `a` and `td` to `#000 !important` — which leaks BLACK text onto the dark surfaces when the
   dark theme is active (most visibly the rankings table cells `td` and player-name links `a` on
   billiardon in dark mode). Force readable light text so nothing disappears on the dark background;
   secondary/muted text keeps the theme's muted tone. */
.tm-manager[data-site="dark"] { color:#f2f2f2 !important; }
.tm-manager[data-site="dark"] td,
.tm-manager[data-site="dark"] .tm-standings-table td,
.tm-manager[data-site="dark"] .tm-standings-name,
.tm-manager[data-site="dark"] .tm-player-link,
.tm-manager[data-site="dark"] .tm-player-name-inline,
.tm-manager[data-site="dark"] .tm-minimal-name-text,
.tm-manager[data-site="dark"] .tm-bracket-side,
.tm-manager[data-site="dark"] .tm-match-list-side,
.tm-manager[data-site="dark"] .tm-sched-players,
.tm-manager[data-site="dark"] .tm-panel-title,
.tm-manager[data-site="dark"] .tm-card-title { color:#f2f2f2 !important; }
.tm-manager[data-site="dark"] .tm-player-link:hover { color:var(--tm-accent) !important; }
.tm-manager[data-site="dark"] .tm-standings-table th,
.tm-manager[data-site="dark"] .tm-standings-rank,
.tm-manager[data-site="dark"] .tm-panel-note,
.tm-manager[data-site="dark"] .tm-player-meta,
.tm-manager[data-site="dark"] .tm-sched-time,
.tm-manager[data-site="dark"] .tm-sched-table,
.tm-manager[data-site="dark"] .tm-sched-num,
.tm-manager[data-site="dark"] .tm-bracket-round-title,
.tm-manager[data-site="dark"] .tm-match-list-round-title,
.tm-manager[data-site="dark"] .tm-bracket-match-head,
.tm-manager[data-site="dark"] .tm-rr-match-head { color:#a3a3a3 !important; }
.tm-check-row { display:flex; flex-wrap:wrap; gap:10px; }
.tm-check { display:inline-flex; align-items:center; gap:7px; min-height:34px; color:var(--tm-text); font-size:13px; }
.tm-check-help { display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; }
.tm-check-help label { display:inline-flex; align-items:center; gap:7px; min-height:34px; }
.tm-check-help .tm-match-icon-btn { width:20px; height:20px; flex:0 0 auto; }
.tm-check-help .tm-match-icon-btn .material-symbols-outlined { font-size:14px; }
.tm-check input { width:17px; height:17px; accent-color:var(--tm-accent); }
.tm-tables-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:8px; }
.tm-table-chip { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--tm-border); border-radius:7px; background:var(--tm-input-bg); cursor:pointer; font-weight:700; font-size:13px; }
.tm-table-chip input { width:16px; height:16px; accent-color:var(--tm-accent); }
.tm-table-chip.checked { border-color:var(--tm-accent); background:rgba(255,140,0,.08); }
/* Virtual tables: each grid cell stacks the selectable chip above its PIN / edit row. */
.tm-table-chip-wrap { display:flex; flex-direction:column; gap:6px; min-width:0; }
.tm-table-chip-wrap .tm-table-chip { width:100%; box-sizing:border-box; }
.tm-table-chip-virtual .tm-table-chip { border-style:dashed; }
.tm-vt-icon { font-size:16px; color:var(--tm-accent); }
.tm-vt-meta { display:flex; align-items:center; gap:6px; padding:0 2px; font-size:11px; color:var(--tm-muted); flex-wrap:wrap; }
.tm-vt-pin { font-weight:800; letter-spacing:.3px; }
.tm-vt-locked { display:inline-flex; align-items:center; color:var(--tm-muted); }
.tm-vt-locked .material-symbols-outlined { font-size:15px; }
.tm-mini-btn { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0; border:1px solid var(--tm-border); border-radius:6px; background:transparent; color:var(--tm-text); cursor:pointer; }
.tm-mini-btn:hover { border-color:var(--tm-accent); }
.tm-mini-btn .material-symbols-outlined { font-size:15px; }
.tm-vt-edit-number, .tm-vt-create-number { width:90px; min-height:28px; padding:4px 6px; font-size:12px; border:1px solid var(--tm-border); border-radius:6px; background:var(--tm-input-bg); color:var(--tm-text); font-weight:700; }
.tm-vt-create { display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap; }
.tm-vt-create-btn .material-symbols-outlined { font-size:16px; }
.tm-error { color:var(--tm-red); font-size:12px; margin-top:6px; display:none; }
.tm-error.show { display:block; }
.tm-list { display:grid; gap:16px; }
/* The full listing card is rendered by tournaments/list_card.php on both pages. Keep its
   compact three-line layout in TM; these rules are scoped so other TM cards are untouched. */
.tm-manager .tm-list.tm-shared-list { display:flex !important; flex-direction:column !important; gap:8px !important; }
.tm-manager .tm-list:not(.tm-shared-list) { display:grid !important; }
.tm-manager .tm-shared-tournament-card { --tc-title:#fff; --tc-text:#c5ccd8; --tc-accent:#ffb454; --tc-icon:#ff9d2e;
    position:relative; display:grid; grid-template-columns:50px minmax(0,1fr); gap:1px 12px; align-items:center;
    padding:11px 16px; border:1px solid #2a2f3a; border-radius:13px; background:#1b1f27; color:var(--tc-text);
    box-shadow:0 4px 14px rgba(0,0,0,.25); box-sizing:border-box; transition:transform .15s ease,border-color .15s ease; cursor:pointer; }
.tm-manager .tm-shared-tournament-card:hover { transform:translateY(-1px); border-color:var(--tm-accent); }
.tm-manager .tm-shared-tournament-card .tcard-open-link { position:absolute; inset:0; z-index:1; display:block; border-radius:inherit; }
.tm-manager .tm-shared-tournament-card .tcard-open-link:focus-visible { outline:3px solid #ff8c00; outline-offset:-3px; }
.tm-manager .tm-shared-tournament-card .tcard-meta a,
.tm-manager .tm-shared-tournament-card .tcard-meta button { position:relative; z-index:2; }
.tm-manager .tm-shared-tournament-card .tcard-more { position:absolute; z-index:2; }
.tm-manager .tm-shared-tournament-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:5px; border-radius:13px 0 0 13px; background:#cf6a00; }
.tm-manager .tm-shared-tournament-card[data-status="LIVE"]::before { background:#158f43; }
.tm-manager .tm-shared-tournament-card[data-status="ENDED"]::before { background:#5b6270; }
.tm-manager[data-site="light"] .tm-shared-tournament-card { --tc-title:#111726; --tc-text:#404a5c; --tc-accent:#a1521e; --tc-icon:#b35c00;
    background:#fff; border-color:rgba(20,40,80,.18); box-shadow:0 3px 12px rgba(20,40,80,.06); }
.tm-manager .tm-shared-tournament-card .tcard-logo { grid-column:1; grid-row:1 / span 3; width:50px; height:50px; align-self:center;
    display:flex; align-items:center; justify-content:center; border-radius:10px; overflow:hidden; background:var(--tm-input-bg); color:var(--tm-accent); }
.tm-manager .tm-shared-tournament-card .tcard-logo img { width:100%; height:100%; object-fit:cover; }
.tm-manager .tm-shared-tournament-card .tcard-eyebrow { grid-column:2; grid-row:1; display:flex; align-items:center; flex-wrap:wrap; gap:7px; min-width:0; }
.tm-manager .tm-shared-tournament-card .tm-chip { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; color:#fff; font-size:11px; font-weight:800; line-height:1; }
.tm-manager .tm-shared-tournament-card .tm-chip-status-LIVE { background:#158f43; }
.tm-manager .tm-shared-tournament-card .tm-chip-status-UPCOMING { background:#cf6a00; }
.tm-manager .tm-shared-tournament-card .tm-chip-status-ENDED { background:#5b6270; }
.tm-manager .tm-shared-tournament-card .tcard-when { color:var(--tc-text); font-size:12px; font-weight:800; }
.tm-manager .tm-shared-tournament-card .tcard-title-link { grid-column:2; grid-row:2; min-width:0; text-decoration:none; margin:2px 0 1px; }
.tm-manager .tm-shared-tournament-card .tcard-title { margin:0; color:var(--tc-title); font-size:16px; line-height:1.25; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tm-manager .tm-shared-tournament-card .tcard-open-link:hover ~ .tcard-title-link .tcard-title,
.tm-manager .tm-shared-tournament-card .tcard-open-link:focus-visible ~ .tcard-title-link .tcard-title { text-decoration:underline; }
.tm-manager .tm-shared-tournament-card .tcard-meta { grid-column:2; grid-row:3; display:flex; align-items:center; flex-wrap:wrap; gap:2px 7px; min-width:0; color:var(--tc-text); font-size:12.5px; line-height:1.35; }
.tm-manager .tm-shared-tournament-card .tcard-meta > span { display:inline-flex; align-items:center; gap:5px; min-width:0; }
.tm-manager .tm-shared-tournament-card .tcard-meta .fa { color:var(--tc-icon); font-size:11px; }
.tm-manager .tm-shared-tournament-card .tcard-dot { opacity:.4; }
.tm-manager .tm-shared-tournament-card .tcard-club { color:var(--tc-accent); font-weight:700; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px; }
.tm-manager .tm-shared-tournament-card .tcard-club:hover { text-decoration:underline; }
.tm-manager .tm-shared-tournament-card .tcard-disc img { width:14px; height:14px; object-fit:contain; }
.tm-manager .tm-shared-tournament-card .tcard-rank,.tm-manager .tm-shared-tournament-card .tcard-league,.tm-manager .tm-shared-tournament-card .tcard-manage { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; font-family:inherit; font-size:11.5px; font-weight:800; line-height:1.5; white-space:nowrap; text-decoration:none; cursor:pointer; }
.tm-manager .tm-shared-tournament-card .tcard-rank { border:1px solid #ef6c00; background:#ef6c00; color:#fff; }
.tm-manager .tm-shared-tournament-card .tcard-league { border:1px solid rgba(255,140,0,.4); background:rgba(255,140,0,.13); color:var(--tc-accent); }
.tm-manager .tm-shared-tournament-card .tcard-manage-wrap { margin-left:auto; }
.tm-manager .tm-shared-tournament-card .tcard-manage { border:1px solid #ff8c00; background:#ff8c00; color:#fff; }
.tm-manager .tm-shared-tournament-card .tcard-rank:hover,.tm-manager .tm-shared-tournament-card .tcard-league:hover,.tm-manager .tm-shared-tournament-card .tcard-manage:hover { filter:brightness(1.1); }
@media (max-width:680px) { .tm-manager .tm-shared-tournament-card { grid-template-columns:44px minmax(0,1fr); gap:1px 11px; padding:10px 14px; } .tm-manager .tm-shared-tournament-card .tcard-logo { width:44px; height:44px; } .tm-manager .tm-shared-tournament-card .tcard-title { white-space:normal; font-size:15.5px; } }
.tm-list-switch { display:inline-flex; gap:3px; padding:3px; border:1px solid var(--tm-border); border-radius:8px; background:var(--tm-surface); }
.tm-list-switch button { min-height:32px; border:0; border-radius:6px; padding:0 12px; background:transparent; color:var(--tm-muted); font-weight:800; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.tm-list-switch button.active { background:var(--tm-input-bg); color:var(--tm-accent); }
.tm-manager[data-site="light"] .tm-list-switch button.active { color:var(--tm-blue) !important; }
.tm-inline-count { display:inline-flex; align-items:center; gap:0px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.tm-inline-count .material-symbols-outlined { font-size:14px; line-height:1; }
.tm-inline-count-unlimited { color:var(--tm-accent); }
.tm-tournament-card { display:grid; grid-template-columns:minmax(64px, max-content) minmax(0, 1fr) auto; gap:14px; align-items:stretch; background:var(--tm-surface); border:1px solid var(--tm-border); border-left:4px solid var(--tm-accent); border-radius:10px; padding:12px 14px; transition:background .15s ease, border-color .15s ease; }
.tm-tournament-card:hover { background:var(--tm-surface-2, var(--tm-input-bg)); }
.tm-tournament-card .tm-card-body { min-width:0; display:flex; flex-direction:column; gap:6px; }
.tm-tournament-card .tm-card-title-row { display:block; }
.tm-tournament-card .tm-card-title { display:block; font-weight:800; font-size:16px; color:var(--tm-text); overflow-wrap:anywhere; text-align:left; line-height:1.25; }
.tm-tournament-card .tm-card-meta { display:flex; flex-wrap:wrap; gap:8px; color:var(--tm-muted); font-size:12px; }
.tm-tournament-card .tm-actions { justify-content:flex-end; align-self:end; margin-top:auto; }
.tm-tournament-card.tm-league-card { cursor:pointer; }
.tm-tournament-card.tm-league-card-deleted { cursor:default; }
.tm-tournament-card.tm-league-card .tm-actions { pointer-events:auto; }
.tm-league-detail-head { display:grid; grid-template-columns:80px minmax(0, 1fr) auto; gap:14px; align-items:center; }
.tm-league-player-tools { position:relative; z-index:25; margin-bottom:12px; }
.tm-league-ranking-panel { padding:0; overflow:hidden; }
.tm-league-ranking-head { display:grid; grid-template-columns:48px minmax(0, 1fr) auto; gap:13px; align-items:center; padding:16px; border-bottom:1px solid var(--tm-border); background:rgba(255,140,0,.08); }
.tm-league-ranking-icon { width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:var(--tm-accent); color:#fff; box-shadow:0 7px 18px rgba(0,0,0,.18); }
.tm-league-ranking-icon .material-symbols-outlined { font-size:27px; }
.tm-league-ranking-copy { min-width:0; }
.tm-league-ranking-copy h3 { margin:2px 0 4px; color:var(--tm-text); font-size:19px; line-height:1.2; }
.tm-league-ranking-league { color:var(--tm-accent); font-size:10px; line-height:1.2; font-weight:900; letter-spacing:.08em; text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tm-league-ranking-count { min-width:76px; padding:8px 11px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid var(--tm-border); border-radius:11px; background:var(--tm-surface); color:var(--tm-text); }
.tm-league-ranking-count strong { font-size:20px; line-height:1; }
.tm-league-ranking-count span { margin-top:4px; color:var(--tm-muted); font-size:9px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.tm-league-ranking-table-wrap { padding:6px 16px 12px; }
/* --tm-lr-min is written inline per table: 650px plus one column per league tournament (see
   tmLeagueRankingPanelHtml). It is a variable rather than a plain inline min-width so the mobile
   pinch-zoom scale can still be applied to it from the stylesheet. */
.tm-league-ranking-table { min-width:calc(var(--tm-lr-min, 650px) * var(--tm-standings-scale, 1)); }
.tm-league-ranking-table tbody tr:nth-child(even) td { background:var(--tm-row-bg); }
.tm-league-rank-badge { width:calc(26px * var(--tm-standings-scale, 1)); height:calc(26px * var(--tm-standings-scale, 1)); display:inline-flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--tm-border); background:var(--tm-surface-2); color:var(--tm-muted); font-size:calc(11px * var(--tm-standings-scale, 1)); font-weight:900; }
.tm-league-ranking-podium-1 .tm-league-rank-badge { border-color:#c18b12; background:#d8a72a; color:#1f1705; }
.tm-league-ranking-podium-2 .tm-league-rank-badge { border-color:#9aa4b1; background:#cbd2da; color:#1f2937; }
.tm-league-ranking-podium-3 .tm-league-rank-badge { border-color:#a46632; background:#bd7d46; color:#21150d; }
.tm-league-ranking-points strong { display:inline-flex; min-width:calc(42px * var(--tm-standings-scale, 1)); min-height:calc(27px * var(--tm-standings-scale, 1)); align-items:center; justify-content:center; padding:0 calc(9px * var(--tm-standings-scale, 1)); border-radius:999px; background:rgba(255,140,0,.14); color:var(--tm-accent); font-size:calc(13px * var(--tm-standings-scale, 1)); font-variant-numeric:tabular-nums; }
/* One column per league tournament. The header keeps a fixed narrow width (the title is clipped and
   repeated in full in the tooltip) so ten events still fit inside one horizontal scroll. */
.tm-lr-columns-note { padding:10px 16px 0; }
.tm-league-ranking-table th.tm-lr-evt { width:calc(74px * var(--tm-standings-scale, 1)); min-width:calc(74px * var(--tm-standings-scale, 1)); max-width:calc(74px * var(--tm-standings-scale, 1)); padding:calc(6px * var(--tm-standings-scale, 1)); text-align:center; vertical-align:bottom; }
.tm-lr-evt-idx { display:block; color:var(--tm-accent); font-size:calc(10px * var(--tm-standings-scale, 1)); font-weight:900; letter-spacing:.04em; }
/* The head of a column opens the tournament it stands for. */
.tm-lr-evt-open { display:block; cursor:pointer; border-radius:6px; padding:2px 1px; }
.tm-lr-evt-open:hover, .tm-lr-evt-open:focus-visible { background:rgba(255,140,0,.14); outline:none; }
.tm-lr-evt-open:hover .tm-lr-evt-name, .tm-lr-evt-open:focus-visible .tm-lr-evt-name { color:var(--tm-accent); text-decoration:underline; }
.tm-lr-evt-name { display:block; max-width:calc(62px * var(--tm-standings-scale, 1)); margin:2px auto 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:calc(9px * var(--tm-standings-scale, 1)); font-weight:700; text-transform:none; letter-spacing:0; }
/* Seen from inside one of the league's tournaments, its own column is picked out down the table. */
.tm-league-ranking-table th.tm-lr-evt.tm-lr-current { background:rgba(255,140,0,.12); border-bottom-color:var(--tm-accent); }
.tm-league-ranking-table td.tm-lr-cell.tm-lr-current { background:rgba(255,140,0,.07); }
.tm-league-ranking-table th.tm-lr-first, .tm-league-ranking-table td.tm-lr-cell.tm-lr-first { border-left:1px solid var(--tm-border); }
.tm-league-ranking-table td.tm-lr-cell { text-align:center; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tm-lr-cell-pts { font-weight:800; }
.tm-lr-cell-zero .tm-lr-cell-pts { color:var(--tm-muted); font-weight:700; }
.tm-lr-cell-win .tm-lr-cell-pts { color:#d8a72a; }
.tm-lr-cell-place { margin-left:calc(3px * var(--tm-standings-scale, 1)); color:var(--tm-muted); font-size:calc(9px * var(--tm-standings-scale, 1)); font-weight:700; vertical-align:super; }
.tm-league-ranking-table td.tm-lr-cell-empty { color:var(--tm-muted); opacity:.55; }
/* A result left out of the total by the league's "best N results count" rule: still shown, crossed out. */
.tm-league-ranking-table td.tm-lr-cell-dropped { opacity:.6; }
.tm-lr-cell-dropped .tm-lr-cell-pts { color:var(--tm-muted); font-weight:700; text-decoration:line-through; text-decoration-thickness:2px; }
.tm-league-ranking-table tfoot td { padding:calc(9px * var(--tm-standings-scale, 1)) calc(8px * var(--tm-standings-scale, 1)); border-top:2px solid var(--tm-border); border-bottom:0; background:var(--tm-surface-2); color:var(--tm-text); font-size:calc(11px * var(--tm-standings-scale, 1)); font-variant-numeric:tabular-nums; }
.tm-lr-participants-row > td:first-child { text-align:left; color:var(--tm-muted); font-weight:800; text-transform:uppercase; letter-spacing:.035em; }
.tm-lr-participants-row > td:first-child .material-symbols-outlined { margin-right:calc(7px * var(--tm-standings-scale, 1)); color:var(--tm-accent); font-size:calc(17px * var(--tm-standings-scale, 1)); vertical-align:-4px; }
.tm-league-ranking-table tfoot td.tm-lr-participant-count { text-align:center; }
.tm-lr-participant-count strong { display:inline-flex; min-width:calc(26px * var(--tm-standings-scale, 1)); min-height:calc(24px * var(--tm-standings-scale, 1)); align-items:center; justify-content:center; border-radius:999px; background:var(--tm-input-bg); color:var(--tm-text); }
.tm-league-ranking-table tfoot td.tm-lr-participant-total { text-align:center; white-space:nowrap; }
.tm-lr-participant-total strong { color:var(--tm-accent); font-size:calc(14px * var(--tm-standings-scale, 1)); }
.tm-lr-participant-total span { display:block; margin-top:1px; color:var(--tm-muted); font-size:calc(8px * var(--tm-standings-scale, 1)); font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.tm-migration-sql { width:100%; min-height:210px; border-radius:8px; border:1px solid var(--tm-border) !important; background:var(--tm-input-bg) !important; color:var(--tm-text) !important; padding:10px; font-family:monospace; font-size:12px; line-height:1.45; }
/* Logo tile: flexible box that shows the WHOLE logo (wide or portrait) without cropping,
   bounded by max-width/height. Falls back to a square for the placeholder icon. */
.tm-icon-tile { width:auto; min-width:64px; max-width:130px; height:64px; border-radius:10px; background:var(--tm-input-bg); border:1px solid var(--tm-border); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.tm-icon-tile .material-symbols-outlined { color:var(--tm-accent); font-size:30px; }
.tm-icon-tile img { width:auto; height:100%; max-width:130px; max-height:64px; object-fit:contain; display:block; }
.tm-card-title { font-weight:800; font-size:16px; color:var(--tm-text); overflow-wrap:anywhere; }
.tm-card-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; color:var(--tm-muted); font-size:12px; }
.tm-badge { display:inline-flex; align-items:center; justify-content:center; min-height:20px; border-radius:999px; padding:0 8px; font-size:10px; font-weight:800; text-transform:uppercase; }
.tm-badge-live { background:rgba(37,155,85,.18); color:var(--tm-green); }
.tm-badge-upcoming { background:rgba(255,194,71,.16); color:var(--tm-yellow); }
.tm-badge-ended { background:rgba(150,150,150,.18); color:var(--tm-muted); }
.tm-badge-paid { background:rgba(37,155,85,.18); color:var(--tm-green); cursor:pointer; }
.tm-badge-unpaid { background:rgba(191,61,61,.18); color:var(--tm-red); cursor:pointer; }
.tm-badge-ff { background:rgba(255,140,0,.16); color:var(--tm-yellow); }
.tm-badge-bye { background:rgba(150,150,150,.18); color:var(--tm-soft); }
.tm-badge-published { background:rgba(47,125,211,.18); color:var(--tm-blue); }
.tm-toolbar { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.tm-sched-toolbar { align-items:flex-start; }
.tm-sched-toolbar-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-left:auto; }

/* Timezone picker: shows which clock the times on screen use, and lets the viewer change it. */
.tm-tz-pick { display:inline-flex; align-items:center; gap:6px; padding:0 10px 0 8px; min-height:36px;
    border:1px solid var(--tm-border); border-radius:12px; background:var(--tm-surface); cursor:pointer; }
.tm-tz-pick .material-symbols-outlined { font-size:18px; opacity:.7; flex:0 0 auto; }
.tm-tz-pick .tm-tz-now { font-size:12px; font-weight:800; letter-spacing:.4px; opacity:.85; white-space:nowrap; }
.tm-tz-pick .tm-select { border:0; background:transparent; min-height:34px; padding:0 2px; max-width:150px;
    font-size:12px; font-weight:700; cursor:pointer; }
.tm-tz-pick .tm-select:focus { outline:none; }
.tm-toast { position:fixed; left:16px; bottom:16px; z-index:2200; display:flex; align-items:flex-start; gap:8px; min-width:180px; max-width:min(360px, calc(100vw - 32px)); padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.08); background:rgba(17,24,39,.96); color:#fff; box-shadow:0 12px 28px rgba(0,0,0,.32); opacity:0; visibility:hidden; transform:translateY(10px); pointer-events:none; transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s; backdrop-filter:blur(4px); }
.tm-manager[data-site="light"] .tm-toast { background:rgba(255,255,255,.97); color:var(--tm-text); border-color:rgba(0,0,0,.08); box-shadow:0 12px 28px rgba(0,0,0,.16); }
.tm-toast.show { opacity:1; visibility:visible; transform:translateY(0); transition-delay:0s; }
.tm-toast.ok { border-color:var(--tm-green); box-shadow:0 12px 28px rgba(37,155,85,.18); }
.tm-toast.error { border-color:var(--tm-red); box-shadow:0 12px 28px rgba(191,61,61,.18); }
.tm-toast .tm-toast-icon { flex:0 0 auto; font-size:16px; line-height:1; margin-top:1px; }
.tm-toast .tm-toast-msg { min-width:0; font-size:12px; font-weight:800; line-height:1.25; white-space:pre-wrap; word-break:break-word; }
/* Connection-lost banner. Top-centre, above everything including the TV board and the fullscreen
   overlays - if the connection is gone while the board is on the wall, that is exactly when it
   most needs saying. Deliberately not dismissible: it clears itself the moment a request works. */
.tm-offline { position:fixed; top:12px; left:50%; z-index:2400; display:flex; align-items:center; gap:8px; max-width:min(420px, calc(100vw - 24px)); padding:9px 14px; border-radius:999px; border:1px solid var(--tm-red); background:rgba(17,24,39,.97); color:#fff; font-size:12px; font-weight:800; box-shadow:0 12px 28px rgba(0,0,0,.34); opacity:0; visibility:hidden; transform:translate(-50%, -12px); pointer-events:none; transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s; backdrop-filter:blur(4px); }
.tm-offline.show { opacity:1; visibility:visible; transform:translate(-50%, 0); transition-delay:0s; }
.tm-offline .material-symbols-outlined { font-size:17px; line-height:1; }
.tm-manager[data-site="light"] .tm-offline { background:rgba(255,255,255,.98); color:var(--tm-text); box-shadow:0 12px 28px rgba(0,0,0,.18); }

/* History (audit trail). Newest first, one line per change, the action as a fixed-width tag on the
   left so the eye can scan down for "Score" without reading every row. */
.tm-history { display:flex; flex-direction:column; gap:2px; }
.tm-history-row { display:flex; align-items:flex-start; gap:10px; padding:8px 6px; border-bottom:1px solid var(--tm-border); }
.tm-history-row:last-child { border-bottom:0; }
/* Fixed column so the summaries line up and the eye can scan down for one kind of change. It wraps
   rather than truncating: the tag is the only thing saying WHAT happened, and "ОБЈАВАТА П…" says
   nothing. Translations are kept terse for the same reason - the summary beside it carries the
   detail, so the chip only has to name the category. */
.tm-history-tag { flex:0 0 112px; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  color:var(--tm-accent); border:1px solid var(--tm-accent); border-radius:20px; padding:2px 6px; text-align:center;
  white-space:normal; line-height:1.3; word-break:break-word; }
.tm-history-main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.tm-history-summary { font-size:13px; font-weight:600; color:var(--tm-text); word-break:break-word; }
.tm-history-meta { font-size:11px; color:var(--tm-muted); }

.tm-empty { border:1px dashed var(--tm-border); border-radius:8px; padding:22px; text-align:center; color:var(--tm-muted); background:var(--tm-surface); }
/* Tabs as eye-catching pill buttons with a filled, glowing active state (both themes). */
.tm-tabs { display:flex; gap:8px; margin-bottom:16px; overflow-x:auto; padding:2px 0 6px; }
.tm-tab { min-height:40px; padding:0 16px; border:1px solid var(--tm-border); background:var(--tm-surface); color:var(--tm-muted); border-radius:999px; display:inline-flex; align-items:center; gap:7px; cursor:pointer; white-space:nowrap; font-size:13px; font-weight:800; letter-spacing:.01em; box-shadow:0 1px 2px rgba(0,0,0,.06); transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; }
.tm-tab .material-symbols-outlined { font-size:20px; }
.tm-tab:hover { color:var(--tm-text); border-color:var(--tm-accent); transform:translateY(-1px); }
.tm-tab.active { color:#fff; border-color:transparent; background:linear-gradient(135deg, var(--tm-accent), color-mix(in srgb, var(--tm-accent) 72%, #000)); box-shadow:0 5px 14px color-mix(in srgb, var(--tm-accent) 42%, transparent); }
.tm-tab.active:hover { transform:translateY(-1px); filter:brightness(1.04); }
.tm-tab.active .material-symbols-outlined { color:#fff; }
.tm-manager[data-site="light"] .tm-tab { background:#ffffff; border-color:rgba(0,0,0,.12); color:#5a6370; box-shadow:0 1px 3px rgba(30,40,60,.08); }
.tm-manager[data-site="light"] .tm-tab:hover { color:#1d2330; border-color:var(--tm-blue); }
.tm-manager[data-site="light"] .tm-tab.active { color:#fff !important; border-color:transparent !important; background:linear-gradient(135deg, #3a8ee6, #2f7dd3) !important; box-shadow:0 5px 14px rgba(47,125,211,.30); }
.tm-manager[data-site="light"] .tm-tab.active .material-symbols-outlined { color:#fff; }

/* Print-draw (bracket) button hidden for now - re-enable by removing this rule when we bring it back. */
.tm-draw-print-btn { display:none !important; }
.tm-view-tabs { display:inline-flex; gap:2px; padding:3px; border:1px solid var(--tm-border); border-radius:8px; background:var(--tm-surface); }
.tm-draw-switch-actions { display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tm-draw-print-btn .material-symbols-outlined { font-size:18px; }
.tm-view-tab { min-height:30px; border:0; border-radius:6px; background:transparent; color:var(--tm-muted); padding:0 10px; display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:12px; cursor:pointer; }
.tm-view-tab.active { background:var(--tm-input-bg); color:var(--tm-accent); }
.tm-bracket-zoom-controls { display:none; align-items:center; gap:8px; flex-wrap:wrap; }
.tm-bracket-zoom-value { min-width:64px; justify-content:center; font-weight:900; }
.tm-stat-row { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; margin-bottom:14px; }
.tm-stat { background:var(--tm-surface); border:1px solid var(--tm-border); border-radius:8px; padding:12px; }
.tm-stat-value { font-size:20px; font-weight:800; }
.tm-stat-label { color:var(--tm-muted); font-size:12px; margin-top:3px; }
/* The viewer's own registration, in a card of its own under the main card (tmRegistrationCardHtml):
   the status on the left, its button on the right. */
.tm-register-card { padding:12px 14px; }
.tm-register-row { justify-content:space-between; align-items:center; }
.tm-register-row .tm-badge { min-height:30px; padding:0 12px; gap:5px; font-size:12px; }
.tm-register-row .tm-badge .material-symbols-outlined { font-size:17px; }
.tm-register-note { display:inline-flex; align-items:center; gap:6px; font-weight:700; color:var(--tm-text); }
.tm-register-note .material-symbols-outlined { font-size:19px; color:var(--tm-green); }
.tm-register-card .tm-register-extra { justify-content:flex-start; margin-top:10px; padding-top:10px; border-top:1px solid var(--tm-border); }
.tm-register-card .tm-register-extra:first-child { margin-top:0; padding-top:0; border-top:0; }
.tm-player-tools { position:relative; margin-bottom:12px; }
.tm-player-search-wrap { position:relative; }
.tm-search-results { display:none; position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:1000; background:#222; border:1px solid var(--tm-border); border-radius:8px; max-height:260px; overflow-y:auto; box-shadow:0 16px 38px rgba(0,0,0,.38); }
.tm-manager[data-site="light"] .tm-search-results { background:rgba(255,255,255,.97); border-color:rgba(0,0,0,.18); box-shadow:0 16px 38px rgba(0,0,0,.22); }
.tm-manager[data-site="dark"] .tm-search-results { background:#222; }
.tm-player-filter-bar { display:flex; align-items:center; gap:10px; margin:0 0 12px; padding:12px; border:1px solid var(--tm-border); border-radius:8px; background:var(--tm-surface); flex-wrap:wrap; }
.tm-player-filter-input { flex:1 1 260px; min-width:0; max-width:420px; display:flex; align-items:center; gap:10px; }
.tm-player-filter-input .tm-input { flex:1 1 auto; min-width:0; width:auto; }
/* Roster size, permanently at the head of the bar (it used to be a small note inside the collapsed
   filter box). Deliberately large: it is the number a manager checks most often, usually from a
   phone on a busy table, and it carries the filtered "12 / 45 players shown" wording too. */
.tm-player-count { flex:0 0 auto; white-space:nowrap; margin:0; font-size:19px; font-weight:800; line-height:1.15; color:var(--tm-text); letter-spacing:.2px; }
.tm-player-print-btn { margin-left:auto; flex:0 0 auto; }
.tm-player-print-btn .material-symbols-outlined { font-size:18px; }
.tm-player-filter-empty { flex:1 0 100%; margin-top:10px; }
.tm-player-filter-hidden { display:none !important; }
.tm-search-option { display:flex; justify-content:space-between; gap:10px; padding:10px 12px; cursor:pointer; border-bottom:1px solid var(--tm-border); transition:background .16s ease, transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.tm-search-option:last-child { border-bottom:0; }
.tm-search-option:hover { background:var(--tm-surface-2); border-color:var(--tm-accent); transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.12); }
.tm-search-option.is-disabled { cursor:default; opacity:.68; pointer-events:none; }
.tm-search-option.is-disabled:hover { background:transparent; border-color:var(--tm-border); transform:none; box-shadow:none; }
.tm-player-list { display:grid; gap:8px; }
.tm-player-row { display:grid; grid-template-columns:34px minmax(0, 1fr) auto; gap:10px; align-items:center; background:var(--tm-surface); border:1px solid var(--tm-border); border-radius:8px; padding:10px; transition:transform .16s ease, opacity .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.tm-player-row:hover { transform:translateY(-1px); border-color:var(--tm-accent); background:var(--tm-surface-2); box-shadow:0 10px 20px rgba(0,0,0,.12); }
.tm-player-row.removing { transform:translateX(8px); opacity:.35; }
.tm-player-picker-panel { margin-top:10px; padding:12px; border:1px solid var(--tm-border); border-radius:8px; background:var(--tm-input-bg); }
.tm-league-picker-search-wrap { margin-top:10px; }
.tm-player-picker-controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; }
.tm-player-picker-controls .tm-panel-note { margin-left:auto; }
.tm-player-picker-list { display:grid; gap:8px; margin-top:10px; }
.tm-player-pick-row { grid-template-columns:26px minmax(0, 1fr) auto; cursor:pointer; }
.tm-player-pick-check { display:flex; align-items:center; justify-content:center; }
.tm-player-pick-check input { width:17px; height:17px; accent-color:var(--tm-accent); }
.tm-player-pick-note { color:var(--tm-muted); font-size:11px; font-weight:800; text-transform:uppercase; }
.tm-player-pick-row.is-disabled { opacity:.72; cursor:default; }
.tm-player-pick-row.is-disabled:hover { transform:none; box-shadow:none; border-color:var(--tm-border); background:var(--tm-surface); }
.tm-player-number { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--tm-input-bg); color:var(--tm-muted); font-weight:800; font-size:12px; }
.tm-player-name { color:var(--tm-text); font-weight:800; }
.tm-player-meta { color:var(--tm-muted); font-size:12px; margin-top:3px; }
.tm-checkin-meta { color:var(--tm-green); font-weight:700; }
.tm-player-username { color:var(--tm-blue); font-size:12px; font-weight:600; margin-top:1px; }
/* Doubles roster: both team members side by side, each with their name and @username stacked. */
.tm-roster-team { display:flex; flex-wrap:wrap; align-items:flex-start; gap:6px 22px; }
.tm-roster-member { display:flex; flex-direction:column; gap:1px; min-width:0; }
.tm-activity-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; vertical-align:middle; }
.tm-activity-recent { background:var(--tm-green); box-shadow:0 0 4px rgba(37,155,85,.65); }
.tm-activity-past { background:var(--tm-accent); }
.tm-player-checkin { color:var(--tm-green); font-size:12px; font-weight:700; margin-top:2px; }
.tm-player-actions { display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
.tm-player-actions .tm-btn .material-symbols-outlined { font-size:16px; }
.tm-player-row.is-checked-in { border-color:rgba(37,155,85,.45); }
.tm-player-row.is-checked-in:hover { border-color:rgba(37,155,85,.7); }
/* Public players list (non-logged + regular logged users only): photo grid, first name then last
   name on two lines under the photo, sorted by first name. 3 per row on mobile, as many as fit on
   desktop. The tournament manager keeps the detailed list view above; these rules only apply inside
   .tm-public-players-grid so the manager layout is unaffected. */
.tm-public-players-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
@media (min-width:640px) { .tm-public-players-grid { grid-template-columns:repeat(auto-fill, minmax(112px, 1fr)); } }
.tm-public-players-grid .tm-player-row { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:12px 8px; }
.tm-public-players-grid .tm-player-row:hover { transform:translateY(-2px); }
.tm-public-player-card > .tm-verified-badge { position:absolute; top:6px; right:6px; font-size:16px; }
.tm-public-player-link { display:flex; flex-direction:column; align-items:center; gap:8px; width:100%; min-width:0; text-decoration:none; color:inherit; }
.tm-public-player-photo { position:relative; display:inline-flex; }
.tm-public-player-photo .tm-player-avatar { width:72px; height:72px; }
.tm-public-player-photo .tm-player-avatar .material-symbols-outlined { font-size:40px; }
.tm-public-player-photo .tm-player-flag { left:-4px; top:-4px; width:20px; height:14px; }
.tm-public-player-names { display:flex; flex-direction:column; align-items:center; line-height:1.2; width:100%; min-width:0; }
.tm-public-player-first { display:inline-flex; align-items:center; justify-content:center; gap:3px; font-weight:800; font-size:13px; color:var(--tm-text); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tm-public-player-first .tm-verified-badge { font-size:15px; }
.tm-public-player-last { font-weight:600; font-size:12px; color:var(--tm-muted); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Doubles team card: both members (photo + "Firstname L.") side by side in one grid card,
   joined by "&". The card spans two grid tracks so the two photos have room. */
.tm-public-team-card { grid-column:span 2; }
.tm-public-team-players { display:flex; align-items:flex-start; justify-content:center; gap:8px; width:100%; min-width:0; }
.tm-public-team-member { display:flex; flex-direction:column; align-items:center; gap:6px; flex:1 1 0; min-width:0; text-decoration:none; color:inherit; }
.tm-public-team-member:hover { transform:translateY(-2px); }
.tm-public-team-member .tm-public-player-photo .tm-player-avatar { width:56px; height:56px; }
.tm-public-team-member .tm-public-player-photo .tm-player-avatar .material-symbols-outlined { font-size:32px; }
.tm-public-team-member-name { display:inline-flex; align-items:center; justify-content:center; gap:3px; font-weight:800; font-size:12px; color:var(--tm-text); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tm-public-team-member-name .tm-verified-badge { font-size:14px; }
.tm-public-team-amp { align-self:center; padding-top:20px; color:var(--tm-muted); font-weight:800; font-size:15px; }
/* On mobile a doubles grid packs two team cards per row (each card holds both members),
   so the member photos/text shrink to fit half the screen width. */
@media (max-width:639px) {
    .tm-public-players-grid--doubles { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
    .tm-public-players-grid--doubles .tm-public-team-card { grid-column:auto; padding:10px 4px; }
    .tm-public-team-card .tm-public-team-players { gap:4px; }
    .tm-public-team-card .tm-public-team-member { gap:4px; }
    .tm-public-team-card .tm-public-team-member .tm-public-player-photo .tm-player-avatar { width:40px; height:40px; }
    .tm-public-team-card .tm-public-team-member .tm-public-player-photo .tm-player-avatar .material-symbols-outlined { font-size:24px; }
    .tm-public-team-card .tm-public-team-member .tm-public-player-flag { width:16px; height:11px; }
    .tm-public-team-card .tm-public-team-member-name { font-size:10px; gap:2px; }
    .tm-public-team-card .tm-public-team-amp { padding-top:12px; font-size:12px; }
}
/* Help button + user-manual language menu (top bar / detail card) */
.tm-help-wrap { position:relative; display:inline-flex; }
.tm-help-menu { position:absolute; top:calc(100% + 6px); right:0; z-index:60; min-width:210px;
  background:var(--tm-surface); border:1px solid var(--tm-border); border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.28); padding:6px; animation:tmReplacePanelIn .14s ease; }
/* The dropdown must be fully opaque - the light theme's --tm-surface is a translucent glass
   colour, which made this menu see-through and unreadable. Force a solid surface per theme. */
.tm-manager[data-site="dark"] .tm-help-menu { background:#222; }
.tm-manager[data-site="light"] .tm-help-menu { background:#ffffff; border-color:rgba(0,0,0,.14); box-shadow:0 10px 30px rgba(0,0,0,.18); }
.tm-manager[data-site="light"] .tm-help-lang:hover,
.tm-manager[data-site="light"] .tm-help-lang-pref { background:#eef2f7; }
.tm-help-menu[hidden] { display:none; }
.tm-help-menu-title { display:block; font-size:10px; font-weight:800; text-transform:uppercase;
  letter-spacing:.05em; color:var(--tm-muted); padding:5px 8px 6px; }
/* Help's rows are <a> (they open a PDF) and the language picker's rows are <button> (they change a
   setting). That difference is correct in the markup but must not show: without the reset below the
   picker inherited the browser/site button chrome - its own border, grey fill, centred text and a
   different font - and sat next to the Help menu looking like a different component. */
/* color needs !important here specifically because these rows are real <a> elements (they open a
   PDF) - and snookeron.css carries a global `a { color:#fff !important; }`. A plain declaration
   loses to ANY !important rule regardless of how much more specific it is, so on snookeron this
   would win outright and force the label white even in the TM's light theme, on a light dropdown -
   invisible. Same trap as the .tm-share-* fields above, different mechanism (a bare type selector
   here rather than a background fight). */
.tm-help-lang { display:flex; align-items:center; gap:9px; width:100%; box-sizing:border-box;
  padding:8px 8px; border-radius:8px; color:var(--tm-text) !important; text-decoration:none;
  font-family:inherit; font-size:13px; font-weight:600; line-height:1.3; text-align:left;
  background:none; border:0; margin:0; cursor:pointer; -webkit-appearance:none; appearance:none; }
.tm-help-lang .material-symbols-outlined { font-size:18px; color:#d8232a; }
/* The red belongs to the PDF icon. A radio mark is not a document, so the language rows follow the
   accent when chosen and stay quiet when not. */
.tm-ui-lang .material-symbols-outlined { color:var(--tm-muted); }
.tm-ui-lang.tm-help-lang-pref .material-symbols-outlined { color:var(--tm-accent); }
.tm-ui-lang.tm-help-lang-pref .tm-help-lang-name { font-weight:800; }
.tm-help-lang .tm-help-lang-name { flex:1 1 auto; min-width:0; }
.tm-help-lang:hover { background:var(--tm-surface-2); }
.tm-help-lang-pref { background:var(--tm-surface-2); }
.tm-help-lang-tag { font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  color:var(--tm-accent); border:1px solid var(--tm-accent); border-radius:20px; padding:1px 7px; }
/* The quick tutorial: first in the Help menu, then a 16:9 player as large as the popup allows (the
   site popup is nearly the full width and caps its content at 84vh, so the height decides). */
.tm-help-video .material-symbols-outlined { color:var(--tm-accent); }
.tm-help-video-len { font-size:11px; font-weight:700; color:var(--tm-muted); font-variant-numeric:tabular-nums; }
.tm-help-menu-sep { display:block; height:1px; margin:6px 4px; background:var(--tm-border); }
.tm-sheet.tm-sheet-video { max-width:1100px; }
.tm-tutorial-video { display:block; width:min(100%, calc((84vh - 150px) * 16 / 9)); aspect-ratio:16 / 9; height:auto;
  margin:0 auto; background:#000; border-radius:12px; }
.tm-tutorial-foot { margin:10px 0 0; font-size:13px; line-height:1.4; color:var(--tm-muted); text-align:center; }
/* ---- One menu, one primary action --------------------------------------------------------------
   The tournament card carries Back, the primary (next-step) button and one "More" menu; the Draw
   tab and every roster row carry the same menu for their rarer actions. All of it is the Help
   popover above with a different item list, so it opens, closes and stacks exactly like Help does. */
.tm-more-menu { min-width:250px; max-width:min(92vw, 320px); }
.tm-menu-item .material-symbols-outlined { color:var(--tm-muted); }
.tm-menu-item:hover:not(:disabled) .material-symbols-outlined { color:var(--tm-accent); }
.tm-menu-item:disabled { opacity:.45; cursor:not-allowed; }
.tm-menu-item-danger, .tm-menu-item-danger .material-symbols-outlined { color:var(--tm-red) !important; }
.tm-menu-sep { display:block; height:1px; background:var(--tm-border); margin:6px 4px; }
.tm-manager .tm-more-btn { width:36px; min-width:36px; padding:0; gap:0; }
.tm-manager .tm-btn-sm.tm-more-btn,
.tm-manager .tm-panel-head > .tm-actions .tm-btn-sm.tm-more-btn { width:32px; min-width:32px; padding:0; }
.tm-manager .tm-primary-action { font-weight:800; }
.tm-row-menu .tm-more-menu { min-width:220px; }
/* An open row menu must paint ABOVE the rows below it. .tm-player-row:hover's transform makes each
   row its own stacking context, so the popover's z-index:60 only ranks INSIDE its row, and the next
   row - painted later - drew its switch and its own ⋯ button straight over the open menu. The row
   (and the wrap) that owns the open menu is lifted above its siblings for as long as it is open:
   tournament.js toggles .tm-menu-open together with the menu, and the :has() twin (its own rule, so
   an engine without :has() drops only that line) covers a menu opened by anything else. */
.tm-help-wrap.tm-menu-open { z-index:70; }
.tm-player-row.tm-menu-open { position:relative; z-index:70; }
.tm-player-row:has(.tm-help-menu:not([hidden])) { position:relative; z-index:70; }
.tm-player-row.is-withdrawn > div:nth-child(2) { opacity:.65; }
.tm-player-meta .tm-badge { margin-left:6px; vertical-align:middle; }
/* The publish sheet: the Best-Of block on top, the button full width beneath it. */
.tm-publish-sheet { flex-direction:column; align-items:stretch; gap:12px; }
.tm-publish-sheet .tm-publish-options { width:100%; box-sizing:border-box; }
/* Automatic table assignment off: "assign the tables now?" - two answers, neither preselected. Kept
   outside .tm-publish-options on purpose: its input rules would give the radios a 70px number box. */
.tm-publish-tables { margin:0; min-width:0; padding:10px; display:flex; flex-direction:column; gap:8px; border:1px solid var(--tm-border); border-radius:7px; background:var(--tm-surface-2); transition:border-color .15s ease, box-shadow .15s ease; }
.tm-publish-tables-q { font-size:13px; font-weight:900; line-height:1.35; color:var(--tm-text); }
.tm-publish-tables-note { margin-top:-4px; font-size:12px; line-height:1.35; color:var(--tm-muted); }
.tm-publish-tables-option { display:flex; align-items:flex-start; gap:10px; padding:8px 10px; border:1px solid var(--tm-border); border-radius:8px; color:var(--tm-text); cursor:pointer; }
.tm-publish-tables-option:has(input:checked) { border-color:var(--tm-blue); background:rgba(47,125,211,.1); }
.tm-publish-tables-option input { flex:0 0 auto; width:auto; min-height:0; margin:3px 0 0; accent-color:var(--tm-blue); }
.tm-publish-tables-option > span { display:flex; flex-direction:column; gap:2px; min-width:0; }
.tm-publish-tables-option b { font-size:14px; font-weight:800; }
.tm-publish-tables-option em { font-size:12px; font-style:normal; line-height:1.35; color:var(--tm-muted); }
.tm-publish-tables.tm-publish-tables-missing { border-color:var(--tm-red); box-shadow:0 0 0 2px rgba(217,83,79,.28); }
/* Generic inline text link (e.g. the ranking-set note's "Edit values"). Same !important reason as
   .tm-help-lang above: it is a real <a>, and snookeron.css's global `a { color:#fff !important; }`
   otherwise wins over any plain declaration no matter how specific, forcing the label white even
   inside a light-theme panel. Reach for this class on any future bare inline <a> instead of
   re-discovering the trap. */
.tm-inline-link { color:var(--tm-accent) !important; font-weight:700; text-decoration:underline; cursor:pointer; }
.tm-inline-link:hover { color:var(--tm-text) !important; }
/* Replace-player inline picker (sibling row injected under the player) */
.tm-player-replace-panel { margin:2px 0 6px; padding:12px; background:var(--tm-surface-2); border:1px solid var(--tm-accent); border-radius:10px; animation:tmReplacePanelIn .16s ease; }
@keyframes tmReplacePanelIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
.tm-replace-head { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; margin-bottom:8px; color:var(--tm-text); }
.tm-replace-head .material-symbols-outlined { font-size:18px; color:var(--tm-accent); }
.tm-player-replace-panel .tm-replace-search { width:100%; }
.tm-replace-results { position:static; margin-top:6px; max-height:240px; box-shadow:none; }
.tm-replace-note { display:flex; align-items:center; gap:6px; margin-top:8px; color:var(--tm-muted); font-size:12px; }
.tm-replace-note .material-symbols-outlined { font-size:16px; }
.tm-search-empty { color:var(--tm-muted); cursor:default; justify-content:center; }
.tm-search-empty:hover { background:transparent; transform:none; box-shadow:none; border-color:var(--tm-border); }
.tm-paid-online-switch { position:relative; display:inline-flex; align-items:center; width:36px; height:20px; flex:0 0 auto; cursor:pointer; user-select:none; }
.tm-paid-online-switch-input { position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.tm-paid-online-switch-track { width:100%; height:100%; border-radius:999px; background:rgba(148,163,184,.28); border:1px solid var(--tm-border); position:relative; transition:background .16s ease, border-color .16s ease, box-shadow .16s ease; box-shadow:inset 0 1px 0 rgba(255,255,255,.05); }
.tm-paid-online-switch-track::after { content:''; position:absolute; top:50%; left:2px; width:14px; height:14px; border-radius:50%; background:#ffffff; transform:translateY(-50%); box-shadow:0 1px 2px rgba(0,0,0,.18); transition:transform .16s ease, background .16s ease; }
.tm-paid-online-switch-input:checked + .tm-paid-online-switch-track { background:rgba(37,155,85,.22); border-color:rgba(37,155,85,.5); box-shadow:0 0 0 1px rgba(37,155,85,.08), inset 0 1px 0 rgba(255,255,255,.08); }
.tm-paid-online-switch-input:checked + .tm-paid-online-switch-track::after { transform:translate(16px, -50%); background:#ffffff; }
.tm-paid-online-switch-input:focus-visible + .tm-paid-online-switch-track { outline:2px solid var(--tm-accent); outline-offset:2px; }
.tm-player-summary { margin-top:10px; padding:0 2px; display:flex; justify-content:flex-end; gap:12px 16px; flex-wrap:wrap; color:var(--tm-muted); font-size:12px; font-weight:700; }
.tm-player-summary strong { color:var(--tm-text); font-weight:900; }
.tm-groups-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(245px, 1fr)); gap:10px; margin-bottom:14px; }
.tm-group-card { background:var(--tm-surface); border:1px solid var(--tm-border); border-radius:8px; padding:12px; min-width:0; }
.tm-group-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px; }
.tm-group-title { font-weight:900; color:var(--tm-text); display:flex; align-items:center; gap:7px; }
.tm-group-count { color:var(--tm-muted); font-size:19px; font-weight:800; text-transform:uppercase; }
.tm-group-player { display:grid; grid-template-columns:minmax(0, 1fr) 82px; gap:8px; align-items:center; padding:7px 0; border-top:1px solid var(--tm-border); }
.tm-group-player:first-of-type { border-top:0; }
.tm-group-player .tm-select { min-height:30px; padding:4px 7px; font-size:12px; }
.tm-group-empty { color:var(--tm-muted); font-size:12px; padding:8px 0; border-top:1px solid var(--tm-border); }
.tm-group-tools { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tm-group-tools input { width:78px; }
.tm-group-status { display:flex; align-items:center; gap:8px; color:var(--tm-muted); font-size:12px; font-weight:700; }
.tm-group-stage-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:18px; margin-bottom:18px; }
.tm-group-stage-card { background:var(--tm-surface); border:1px solid var(--tm-border); border-radius:8px; padding:14px; overflow:hidden; }
.tm-group-stage-card .tm-standings-table { min-width:calc(620px * var(--tm-standings-scale, 1)); }
.tm-group-stage-card .tm-standings-table.tm-standings-breaks { min-width:calc(720px * var(--tm-standings-scale, 1)); }
.tm-group-stage-card .tm-rr-grid { grid-template-columns:1fr; margin-bottom:12px; }
.tm-player-identity { display:flex; align-items:center; gap:8px; min-width:0; width:100%; }
.tm-player-visual { position:relative; width:26px; height:26px; flex:0 0 26px; border:0 !important; padding:0 !important; margin:0; border-radius:50%; background:transparent !important; cursor:pointer; overflow:visible; font:inherit; appearance:none; }
.tm-player-avatar { width:26px; height:26px; border-radius:50%; object-fit:cover; background:var(--tm-input-bg); border:1px solid var(--tm-border); display:inline-flex; align-items:center; justify-content:center; color:var(--tm-muted); overflow:hidden; }
.tm-player-avatar .material-symbols-outlined { font-size:18px; }
.tm-player-flag { position:absolute; left:-3px; top:-3px; width:14px; height:10px; object-fit:cover; border-radius:2px; border:1px solid var(--tm-surface); box-shadow:0 1px 3px rgba(0,0,0,.35); background:var(--tm-surface); z-index:1; }
.tm-player-flag-code { position:absolute; left:-5px; top:-5px; min-width:18px; height:12px; border-radius:3px; background:var(--tm-blue); color:#fff; font-size:7px; line-height:12px; font-weight:900; text-align:center; z-index:1; }
.tm-player-popover { display:none; }
.tm-player-floating-popover { position:fixed; z-index:2147483000; width:430px; max-width:calc(100vw - 18px); border:1px solid var(--tm-border); border-radius:8px; background:var(--tm-surface); color:var(--tm-text); box-shadow:0 18px 46px rgba(0,0,0,.42); text-align:left; pointer-events:auto; overflow:hidden; }
.tm-manager[data-site="light"] .tm-player-floating-popover { background:#fff; }
.tm-manager[data-site="dark"] .tm-player-floating-popover { background:#1f232c; }
.tm-player-popover-link { display:flex; gap:18px; align-items:center; padding:18px; color:inherit; text-decoration:none; }
.tm-player-popover-link:hover .tm-player-popover-name { color:var(--tm-accent); }
.tm-player-popover-photo { width:162px; height:162px; border-radius:50%; object-fit:cover; background:var(--tm-input-bg); border:1px solid var(--tm-border); display:flex; align-items:center; justify-content:center; flex:0 0 162px; color:var(--tm-muted); overflow:hidden; }
.tm-player-popover-photo .tm-player-avatar { width:162px; height:162px; border:0; flex:0 0 162px; }
.tm-player-popover-photo .material-symbols-outlined { font-size:82px; }
.tm-player-popover-name { font-size:22px; font-weight:900; color:var(--tm-text); line-height:1.18; }
.tm-player-popover-country { display:flex; align-items:center; gap:8px; margin-top:9px; color:var(--tm-muted); font-size:15px; line-height:1.3; }
.tm-player-popover-country img { width:32px; height:22px; object-fit:cover; border-radius:3px; border:1px solid var(--tm-border); }
.tm-player-popover-meta { color:var(--tm-muted); font-size:11px; margin-top:5px; line-height:1.25; }
.tm-player-link { color:var(--tm-text); font-weight:800; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.tm-player-link:hover { color:var(--tm-accent); }
.tm-player-name-inline { color:var(--tm-text); font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.tm-bracket-panel .tm-player-link, .tm-match-list-panel .tm-player-link, .tm-rr-match .tm-player-link, .tm-sched-players .tm-player-link, .tm-standings-panel .tm-player-link, .tm-bracket-panel .tm-player-name-inline, .tm-match-list-panel .tm-player-name-inline, .tm-rr-match .tm-player-name-inline, .tm-sched-players .tm-player-name-inline, .tm-standings-panel .tm-player-name-inline { cursor:pointer; }
.tm-match-list-panel .tm-minimal-player.tm-player-identity { cursor:pointer; }
.tm-manager .tm-bracket-side.tm-player-marked, .tm-manager .tm-match-list-side.tm-player-marked { background:rgba(255,194,71,.26) !important; border-radius:6px !important; }
.tm-manager .tm-bracket-side.tm-player-marked .tm-player-identity, .tm-manager .tm-match-list-side.tm-player-marked .tm-player-identity { background:transparent !important; }
.tm-match-list-panel .tm-minimal-side { display:flex; flex-direction:column; align-items:stretch; gap:calc(1px * var(--tm-bracket-scale, 1)); min-width:0; min-height:0; padding:0 calc(2px * var(--tm-bracket-scale, 1)); border-radius:calc(6px * var(--tm-bracket-scale, 1)); overflow:visible; white-space:normal; text-overflow:clip; }
/* Name + score box are centre-aligned with each other (the badge is on its own row above). */
.tm-match-list-panel .tm-minimal-side-main { display:flex; align-items:center; gap:calc(3px * var(--tm-bracket-scale, 1)); min-width:0; }
.tm-match-list-panel .tm-minimal-side.left .tm-minimal-side-main { justify-content:flex-end; }
.tm-match-list-panel .tm-minimal-side.right .tm-minimal-side-main { justify-content:flex-start; }
.tm-match-list-panel .tm-minimal-side .tm-minimal-name { flex:1 1 auto; min-width:0; line-height:1.15; }
.tm-match-list-panel .tm-minimal-side .tm-minimal-name-text { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Touch screens: pressing and holding a name opens the player card (tournament.js, "name card").
   The same hold would otherwise start selecting the text or open the browser's callout menu. */
@media (hover: none) {
    .tm-match-list-panel .tm-minimal-side .tm-minimal-name-text { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
}
/* Badge label row (M-number left / match time right), sits above the name + score line. */
.tm-match-list-panel .tm-minimal-badge-row { display:flex; align-items:center; min-width:0; line-height:1; margin-bottom:calc(1px * var(--tm-bracket-scale, 1)); }
.tm-match-list-panel .tm-minimal-badge-row.tm-minimal-badge-left { justify-content:flex-start; }
.tm-match-list-panel .tm-minimal-badge-row.tm-minimal-badge-right { justify-content:flex-end; }
.tm-match-list-panel .tm-minimal-badge-row .tm-minimal-num { position:static; }
.tm-match-list-panel .tm-minimal-badge-row .tm-minimal-time-cell { position:static; display:flex; align-items:center; gap:calc(4px * var(--tm-bracket-scale, 1)); min-width:0; max-width:100%; white-space:nowrap; }
.tm-match-list-panel .tm-minimal-badge-row .tm-minimal-time-cell .tm-match-icon-btn { width:calc(18px * var(--tm-bracket-scale, 1)); height:calc(18px * var(--tm-bracket-scale, 1)); }
.tm-match-list-panel .tm-minimal-badge-row .tm-minimal-time-cell .tm-match-icon-btn .material-symbols-outlined { font-size:calc(14px * var(--tm-bracket-scale, 1)); }
.tm-match-list-panel .tm-minimal-side .tm-minimal-start-time { min-width:0; text-align:right; color:var(--tm-muted); font-size:calc(10px * var(--tm-bracket-scale, 1)); font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; line-height:1; }
.tm-match-list-panel .tm-minimal-side-inline { width:100%; }
/* Marking a player highlights their WHOLE side container (the full left half for the left
   player, the full right half for the right player): stretch it to the row height and keep
   the content bottom-aligned so it reads as one solid block. */
/* The highlight is painted by a pseudo-element that is absolutely positioned so it can cover the
   ENTIRE half of the row - out through the row's own padding to the row edge, and part-way across
   the centre gap - without shifting any content. (Negative margins on the grid item left the row's
   padding uncoloured.) The offsets are the row's padding VARIABLES, not copies of their values:
   copies went stale the moment the padding changed (the bottom strip was left unpainted when the
   row gained its extra bottom space, and the desktop breakpoint never matched at all). */
.tm-manager .tm-match-list-panel .tm-minimal-side.tm-player-marked { background:transparent !important; box-shadow:none !important; align-self:stretch; justify-content:flex-end; position:relative; }
.tm-manager .tm-match-list-panel .tm-minimal-side.tm-player-marked::before { content:''; position:absolute; top:calc(-1 * var(--tm-mrow-pt, 4px)); bottom:calc(-1 * var(--tm-mrow-pb, 7px)); z-index:0; background:rgba(255,194,71,.26); border-radius:calc(6px * var(--tm-bracket-scale, 1)); box-shadow:inset 0 0 0 1px rgba(255,194,71,.18); pointer-events:none; }
.tm-manager .tm-match-list-panel .tm-minimal-side.left.tm-player-marked::before { left:calc(-1 * var(--tm-mrow-px, 6px)); right:calc(-3px * var(--tm-bracket-scale, 1)); }
.tm-manager .tm-match-list-panel .tm-minimal-side.right.tm-player-marked::before { right:calc(-1 * var(--tm-mrow-px, 6px)); left:calc(-3px * var(--tm-bracket-scale, 1)); }
.tm-manager .tm-match-list-panel .tm-minimal-side.tm-player-marked > * { position:relative; z-index:1; }
.tm-verified-badge { color:var(--tm-blue); font-size:17px; flex:0 0 auto; }
.tm-privacy-note { display:none; margin-top:8px; padding:9px 10px; border-radius:7px; border:1px solid rgba(255,140,0,.35); background:rgba(255,140,0,.09); color:var(--tm-text); font-size:12px; line-height:1.35; }
.tm-privacy-note.show { display:block; }
.tm-public-hero { background:var(--tm-surface); border:1px solid var(--tm-border); border-left:4px solid var(--tm-accent); border-radius:8px; padding:16px; margin-bottom:14px; }
.tm-public-hero-main { display:flex; align-items:flex-start; gap:12px; min-width:0; }
.tm-public-hero-copy { min-width:0; flex:1; }
.tm-public-meta { display:flex; flex-wrap:wrap; gap:8px; color:var(--tm-muted); font-size:12px; margin-top:8px; }
/* ---------- modern share popup ---------- */
.tm-share-modal { position:relative; text-align:left; max-width:440px; width:100%; margin:0 auto; }
.tm-share-close { position:absolute; top:-6px; right:-6px; width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border:none; border-radius:50%; background:rgba(255,255,255,.10); color:#fff !important; cursor:pointer; transition:background .15s ease, transform .15s ease; }
.tm-share-close:hover { background:rgba(255,255,255,.20); transform:rotate(90deg); }
.tm-share-close .material-symbols-outlined { font-size:20px; line-height:1; }
.tm-share-head { display:flex; align-items:center; gap:12px; margin-bottom:18px; padding-right:30px; }
.tm-share-head-icon { width:42px; height:42px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; border-radius:12px; background:linear-gradient(135deg,#2f7dd3,#1f5fa8); color:#fff !important; font-size:22px; box-shadow:0 8px 18px rgba(31,95,168,.35); }
.tm-share-title { font-size:18px; font-weight:800; color:#fff !important; line-height:1.2; }
.tm-share-sub { font-size:12.5px; color:#b8c0cc !important; margin-top:2px; }
.tm-share-section { margin-bottom:16px; }
.tm-share-label { font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:#9aa4b2 !important; margin-bottom:7px; }
/* This modal is a plain child of the SITE's global alert box (#alerter), not of .tm-manager, so it
   gets none of this file's [data-site] theming - it follows the ALERT BOX (dark glass on snookeron
   and dartsgameon, light glass on billiardon - see .tm-share-light below), never the TM's own
   light/dark toggle. That box has its own global CSS safety-net
   (cfginc/libraries/main.css: ".alerter input:not(...), .alerter textarea, .alerter select") that
   forces a WHITE background on any field inside it, for OTHER popups that sit on a bare dark
   backdrop. Its selector out-specifies a single class here, so background-color always loses to
   it even with !important - but it never touches box-shadow, so an opaque inset one repaints over
   that forced white without fighting it, which is what actually keeps this field dark. Without it,
   these fields ended up white-on-white: forced white background, text still white because
   -webkit-text-fill-color (unlike color) is nothing the site rule sets either. */
.tm-share-link { width:100%; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.14) !important; background:rgba(255,255,255,.05) !important; box-shadow:0 0 0 1000px #151515 inset !important; color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; caret-color:#ffffff !important; font-size:13px; }
.tm-share-row { display:flex; gap:8px; align-items:stretch; }
.tm-share-row .tm-share-link { flex:1; min-width:0; }
.tm-share-copy { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 16px; border-radius:10px; border:none; background:linear-gradient(135deg,#2f7dd3,#1f5fa8); color:#fff !important; font-weight:700; font-size:13px; cursor:pointer; white-space:nowrap; transition:filter .15s ease, transform .05s ease; }
.tm-share-copy .material-symbols-outlined { font-size:18px; line-height:1; }
.tm-share-copy:hover { filter:brightness(1.08); }
.tm-share-copy:active { transform:translateY(1px); }
.tm-share-email-form { margin-top:18px; padding-top:18px; border-top:1px solid rgba(255,255,255,.12); display:grid; gap:10px; }
.tm-share-send-row { align-items:center; }
.tm-share-email-title { color:#ffffff !important; font-size:12px; font-weight:900; text-transform:uppercase; }
.tm-share-email-input, .tm-share-email-textarea { width:100%; box-sizing:border-box; border-radius:10px; border:1px solid rgba(255,255,255,.14) !important; background:rgba(255,255,255,.05) !important; box-shadow:0 0 0 1000px #151515 inset !important; color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; caret-color:#ffffff !important; padding:10px 12px; font-size:13px; font-weight:600; transition:border-color .15s ease, background .15s ease; }
/* The site's forced background-color (see above) applies on :focus too, so lightening `background`
   here would be invisible - the box-shadow fill is what has to lighten to show a focus state. */
.tm-share-email-input:focus, .tm-share-email-textarea:focus, .tm-share-link:focus { outline:none; border-color:rgba(47,125,211,.7) !important; box-shadow:0 0 0 1000px #1c252e inset !important; }
.tm-share-email-textarea { min-height:74px; resize:vertical; line-height:1.4; }
.tm-share-email-input::placeholder, .tm-share-email-textarea::placeholder { color:#b8c0cc !important; -webkit-text-fill-color:#b8c0cc !important; opacity:1; }
.tm-share-link:-webkit-autofill, .tm-share-email-input:-webkit-autofill, .tm-share-email-textarea:-webkit-autofill,
.tm-share-link:-webkit-autofill:hover, .tm-share-email-input:-webkit-autofill:hover, .tm-share-email-textarea:-webkit-autofill:hover,
.tm-share-link:-webkit-autofill:focus, .tm-share-email-input:-webkit-autofill:focus, .tm-share-email-textarea:-webkit-autofill:focus { -webkit-text-fill-color:#ffffff !important; caret-color:#ffffff !important; box-shadow:0 0 0 1000px #151515 inset !important; border-color:rgba(255,255,255,.28) !important; transition:background-color 9999s ease-out 0s !important; }
.tm-share-email-status { min-height:18px; color:#ffd166 !important; font-size:12px; font-weight:700; }
.tm-share-email-status.ok { color:#3bd47a !important; }
.tm-share-email-status.error { color:#ff8a8a !important; }
/* billiardon: the site alert box is LIGHT glass there (billiardon.css), so the card flips to dark
   text on white fields. tournament.js adds .tm-share-light on that site only. The doubled class
   out-ranks every single-class rule above, and the inset box-shadow trick is unchanged - it is still
   the only thing that can repaint the site's forced field background. */
.tm-share-modal.tm-share-light .tm-share-close { background:rgba(17,24,39,.08); color:#111827 !important; }
.tm-share-modal.tm-share-light .tm-share-close:hover { background:rgba(17,24,39,.16); }
.tm-share-modal.tm-share-light .tm-share-title { color:#111827 !important; }
.tm-share-modal.tm-share-light .tm-share-sub { color:#4b5563 !important; }
.tm-share-modal.tm-share-light .tm-share-label, .tm-share-modal.tm-share-light .tm-share-email-title { color:#4b5563 !important; }
.tm-share-modal.tm-share-light .tm-share-email-form { border-top-color:rgba(17,24,39,.12); }
.tm-share-modal.tm-share-light .tm-share-link, .tm-share-modal.tm-share-light .tm-share-email-input, .tm-share-modal.tm-share-light .tm-share-email-textarea { border-color:rgba(17,24,39,.22) !important; box-shadow:0 0 0 1000px #ffffff inset !important; color:#111827 !important; -webkit-text-fill-color:#111827 !important; caret-color:#111827 !important; }
.tm-share-modal.tm-share-light .tm-share-link:focus, .tm-share-modal.tm-share-light .tm-share-email-input:focus, .tm-share-modal.tm-share-light .tm-share-email-textarea:focus { border-color:rgba(47,125,211,.7) !important; box-shadow:0 0 0 1000px #f3f6fa inset !important; }
.tm-share-modal.tm-share-light .tm-share-email-input::placeholder, .tm-share-modal.tm-share-light .tm-share-email-textarea::placeholder { color:#6b7280 !important; -webkit-text-fill-color:#6b7280 !important; }
.tm-share-modal.tm-share-light .tm-share-link:-webkit-autofill, .tm-share-modal.tm-share-light .tm-share-email-input:-webkit-autofill, .tm-share-modal.tm-share-light .tm-share-email-textarea:-webkit-autofill,
.tm-share-modal.tm-share-light .tm-share-link:-webkit-autofill:hover, .tm-share-modal.tm-share-light .tm-share-email-input:-webkit-autofill:hover, .tm-share-modal.tm-share-light .tm-share-email-textarea:-webkit-autofill:hover,
.tm-share-modal.tm-share-light .tm-share-link:-webkit-autofill:focus, .tm-share-modal.tm-share-light .tm-share-email-input:-webkit-autofill:focus, .tm-share-modal.tm-share-light .tm-share-email-textarea:-webkit-autofill:focus { -webkit-text-fill-color:#111827 !important; caret-color:#111827 !important; box-shadow:0 0 0 1000px #ffffff inset !important; border-color:rgba(17,24,39,.22) !important; }
.tm-share-modal.tm-share-light .tm-share-email-status { color:#a35400 !important; }
.tm-share-modal.tm-share-light .tm-share-email-status.ok { color:#15803d !important; }
.tm-share-modal.tm-share-light .tm-share-email-status.error { color:#b91c1c !important; }
.tm-bracket-match-time { font-size:11px; color:var(--tm-muted,#888); margin-left:6px; }
#blurerAlerter { z-index:2147483001 !important; }
#alerter { z-index:2147483002 !important; }

/* Visual bracket */
.tm-bracket-panel { background:var(--tm-surface); border:1px solid var(--tm-border); border-radius:8px; padding:14px; margin-bottom:14px; overflow-x:auto; -webkit-overflow-scrolling:touch; --tm-bracket-scale:1; }
.tm-bracket-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:10px; }
.tm-bracket-panel-head .tm-bracket-title { margin-bottom:0; min-width:0; flex:1 1 auto; }
.tm-bracket-title { font-size:15px; font-weight:800; color:var(--tm-text); display:flex; align-items:center; gap:8px; }
.tm-bracket {
    --tm-mh: calc(120px * var(--tm-bracket-scale));  /* match box height */
    --tm-gap: calc(10px * var(--tm-bracket-scale));  /* base vertical half-gap for round 1 */
    --tm-hgap: calc(48px * var(--tm-bracket-scale)); /* horizontal gap between rounds */
    display:flex; gap:var(--tm-hgap); align-items:flex-start; min-width:max-content; padding:calc(6px * var(--tm-bracket-scale)) 0; position:relative;
}
.tm-bracket-links { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; overflow:visible; }
.tm-bracket-link-path { fill:none; stroke:var(--tm-line); stroke-width:max(1px, calc(1.4px * var(--tm-bracket-scale))); stroke-linecap:round; stroke-linejoin:round; opacity:.95; }
.tm-bracket-round { display:flex; flex-direction:column; min-width:calc(220px * var(--tm-bracket-scale)); position:relative; z-index:1; }
.tm-bracket-round-title { color:var(--tm-muted); font-size:calc(11px * var(--tm-bracket-scale)); text-transform:uppercase; font-weight:800; text-align:center; margin-bottom:calc(8px * var(--tm-bracket-scale)); }
.tm-bracket-round-title.tm-round-has-controls, .tm-minimal-round-title.tm-round-has-controls { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:8px; text-align:left; }
.tm-round-title-text { min-width:0; }
.tm-round-mobile-controls { display:inline-flex; align-items:center; justify-content:flex-end; gap:6px; flex-wrap:wrap; }
.tm-round-race { display:inline-flex; align-items:center; justify-content:center; min-height:calc(18px * var(--tm-bracket-scale)); margin-left:calc(6px * var(--tm-bracket-scale)); padding:0 calc(7px * var(--tm-bracket-scale)); border-radius:999px; background:rgba(255,140,0,.16); color:var(--tm-accent); border:1px solid rgba(255,140,0,.28); font-size:calc(9px * var(--tm-bracket-scale)); font-weight:900; vertical-align:middle; white-space:nowrap; }
.tm-bracket-match {
    background:var(--tm-match-bg); border:1px solid var(--tm-border); border-left-style:solid; border-left-width:max(1px, calc(3px * var(--tm-bracket-scale))); border-left-color:var(--tm-blue);
    border-radius:calc(7px * var(--tm-bracket-scale)); padding:calc(8px * var(--tm-bracket-scale)) calc(10px * var(--tm-bracket-scale)); position:relative; min-width:calc(210px * var(--tm-bracket-scale));
    height:var(--tm-mh); box-sizing:border-box;
    margin-top:var(--tm-mt, var(--tm-gap)); margin-bottom:var(--tm-mt, var(--tm-gap));
    display:flex; flex-direction:column; justify-content:flex-start;
}
.tm-bracket-match.ff { border-left-color:var(--tm-accent); }
.tm-bracket-match.empty { border-left-color:var(--tm-soft); opacity:.6; }
.tm-bracket-match.live { border-color:rgba(37,155,85,.78); border-left-color:var(--tm-green); background:linear-gradient(90deg, rgba(37,155,85,.18), var(--tm-match-bg) 42%) !important; box-shadow:0 0 0 1px rgba(37,155,85,.22), 0 0 22px rgba(37,155,85,.22); animation:tmLiveMatchPulse 2.4s ease-in-out infinite; }
.tm-bracket-match-head { display:flex; justify-content:space-between; align-items:flex-start; gap:calc(12px * var(--tm-bracket-scale)); color:var(--tm-muted); font-size:calc(10px * var(--tm-bracket-scale)); margin-bottom:calc(5px * var(--tm-bracket-scale)); text-transform:uppercase; font-weight:800; }
.tm-bracket-match-head > span:first-child { display:flex; align-items:center; gap:calc(5px * var(--tm-bracket-scale)); min-width:0; flex-wrap:wrap; }
.tm-bracket-match-head > span:last-child { flex:0 1 auto; min-width:0; text-align:right; }
/* Bracket-box corner chips: table number and match tools (edit/video) sit half-out in the very corners, freeing the head row for text. */
.tm-bracket-table-chip { position:absolute; top:calc(-13px * var(--tm-bracket-scale)); left:calc(-11px * var(--tm-bracket-scale)); z-index:3; font-size:calc(10px * var(--tm-bracket-scale)); font-weight:900; line-height:calc(14px * var(--tm-bracket-scale)); padding:calc(1px * var(--tm-bracket-scale)) calc(6px * var(--tm-bracket-scale)); border-radius:calc(5px * var(--tm-bracket-scale)); background:var(--tm-green); color:#fff; border:1px solid rgba(0,0,0,.25); letter-spacing:.3px; box-shadow:0 1px 4px rgba(0,0,0,.35); }
/* YouTube icon sits at the top, right AFTER the table number (T1..) chip. When there is no table
   chip it takes that chip's top-left spot; when there is one, it shifts right to sit just after it. */
.tm-bracket-video-chip { position:absolute; top:calc(-9px * var(--tm-bracket-scale)); left:calc(-11px * var(--tm-bracket-scale)); z-index:3; display:inline-flex; align-items:center; justify-content:center; width:auto; height:auto; padding:0; background:transparent; border:0; box-shadow:none; line-height:0; color:var(--tm-red) !important; text-decoration:none; }
.tm-bracket-match.tm-has-table-chip .tm-bracket-video-chip { left:calc(26px * var(--tm-bracket-scale)); }
.tm-bracket-youtube-icon { width:auto; height:calc(15px * var(--tm-bracket-scale)); display:block; }
.tm-bracket-video-chip:hover { background:transparent; color:var(--tm-red) !important; opacity:.84; }
.tm-bracket-options-chip { position:absolute; bottom:calc(0px * var(--tm-bracket-scale)); right:calc(2px * var(--tm-bracket-scale)); z-index:3; display:inline-flex; align-items:center; justify-content:center; width:auto; height:auto; padding:0; background:transparent; border:0; box-shadow:none; color:#989898; cursor:pointer; font-size:calc(18px * var(--tm-bracket-scale)); line-height:1; text-decoration:none; }
.tm-bracket-options-chip:hover { color:var(--tm-text); }
.tm-bracket-match > .tm-match-tools { position:absolute; top:calc(-13px * var(--tm-bracket-scale)); right:calc(-11px * var(--tm-bracket-scale)); z-index:3; margin:0; }
.tm-bracket-side { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:calc(10px * var(--tm-bracket-scale)); width:100%; box-sizing:border-box; min-height:calc(32px * var(--tm-bracket-scale)); padding:calc(5px * var(--tm-bracket-scale)) calc(6px * var(--tm-bracket-scale)); border-radius:calc(6px * var(--tm-bracket-scale)); background:var(--tm-row-bg); color:var(--tm-text); font-size:calc(12px * var(--tm-bracket-scale)); }
.tm-bracket-side .tm-player-identity, .tm-match-list-side .tm-player-identity { flex:1 1 auto; min-width:0; }
.tm-bracket-side + .tm-bracket-side { margin-top:calc(4px * var(--tm-bracket-scale)); }
.tm-bracket-side.bye { color:var(--tm-soft); }
.tm-bracket-final-only .tm-bracket-round { align-items:center; }
.tm-bracket-match-time { font-size:calc(11px * var(--tm-bracket-scale)); color:var(--tm-muted,#888); margin-left:calc(6px * var(--tm-bracket-scale)); }
.tm-bracket-panel .tm-match-tools { gap:calc(4px * var(--tm-bracket-scale)); margin-left:calc(2px * var(--tm-bracket-scale)); }
.tm-bracket-panel .tm-match-icon-btn { width:calc(22px * var(--tm-bracket-scale)); height:calc(22px * var(--tm-bracket-scale)); }
.tm-bracket-panel .tm-match-icon-btn .material-symbols-outlined { font-size:calc(15px * var(--tm-bracket-scale)); }
.tm-bracket-panel .tm-player-visual { width:calc(26px * var(--tm-bracket-scale)); height:calc(26px * var(--tm-bracket-scale)); flex:0 0 calc(26px * var(--tm-bracket-scale)); }
.tm-bracket-panel .tm-player-avatar { width:calc(26px * var(--tm-bracket-scale)); height:calc(26px * var(--tm-bracket-scale)); }
.tm-bracket-panel .tm-player-avatar .material-symbols-outlined { font-size:calc(18px * var(--tm-bracket-scale)); }
.tm-bracket-panel .tm-player-flag { left:calc(-3px * var(--tm-bracket-scale)); top:calc(-3px * var(--tm-bracket-scale)); width:calc(14px * var(--tm-bracket-scale)); height:calc(10px * var(--tm-bracket-scale)); border-radius:calc(2px * var(--tm-bracket-scale)); }
.tm-bracket-panel .tm-player-flag-code { left:calc(-5px * var(--tm-bracket-scale)); top:calc(-5px * var(--tm-bracket-scale)); min-width:calc(18px * var(--tm-bracket-scale)); height:calc(12px * var(--tm-bracket-scale)); border-radius:calc(3px * var(--tm-bracket-scale)); font-size:calc(7px * var(--tm-bracket-scale)); line-height:calc(12px * var(--tm-bracket-scale)); }
.tm-bracket-panel .tm-side-scores { gap:calc(5px * var(--tm-bracket-scale)); }
.tm-bracket-panel .tm-side-score { flex:0 0 calc(36px * var(--tm-bracket-scale)); width:calc(36px * var(--tm-bracket-scale)); min-height:calc(28px * var(--tm-bracket-scale)); border-radius:calc(7px * var(--tm-bracket-scale)); font-size:calc(13px * var(--tm-bracket-scale)); }
.tm-bracket-panel .tm-side-score.tm-side-ff { font-size:calc(11px * var(--tm-bracket-scale)); }
.tm-bracket-panel .tm-side-score.tm-side-advance .material-symbols-outlined { font-size:calc(15px * var(--tm-bracket-scale)); }
.tm-bracket-panel .tm-side-points { min-width:calc(20px * var(--tm-bracket-scale)); height:calc(22px * var(--tm-bracket-scale)); padding:0 calc(5px * var(--tm-bracket-scale)); border-radius:calc(6px * var(--tm-bracket-scale)); font-size:calc(10px * var(--tm-bracket-scale)); }

/* Round Robin grid */
.tm-rr-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:8px; }
.tm-rr-match { background:var(--tm-match-bg); border:1px solid var(--tm-border); border-radius:7px; padding:8px 10px; }
.tm-rr-match.live { border-color:rgba(37,155,85,.72); background:linear-gradient(90deg, rgba(37,155,85,.16), var(--tm-match-bg) 46%) !important; box-shadow:0 0 0 1px rgba(37,155,85,.18), 0 0 18px rgba(37,155,85,.18); animation:tmLiveMatchPulse 2.4s ease-in-out infinite; }
.tm-rr-match-head { font-size:11px; color:var(--tm-muted); margin-bottom:4px; }
/* Round-robin / group match cards live outside .tm-bracket-panel, so the shared
   bracket styles' --tm-bracket-scale is undefined here and their scaled gaps
   collapse to 0. Restore breathing room explicitly:
   - space the match number (M1) from the schedule date so it isn't "M1SAT"
   - keep the YouTube chip inline and small
   - separate the two player rows so the frame scores don't sit on top of each other */
.tm-rr-match .tm-bracket-match-head > span:first-child { gap:7px; row-gap:4px; }
.tm-rr-match .tm-bracket-match-time { margin-left:0; }
/* Group/round-robin match: taller head row with the table number pinned top-right. */
.tm-rr-match .tm-bracket-match-head { min-height:24px; align-items:center; margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid var(--tm-border); }
.tm-rr-match .tm-bracket-match-head > span:last-child { display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.tm-rr-table-chip { font-size:10px; font-weight:900; line-height:1; padding:3px 8px; border-radius:6px; background:var(--tm-green); color:#fff; border:1px solid rgba(0,0,0,.22); letter-spacing:.3px; box-shadow:0 1px 3px rgba(0,0,0,.3); white-space:nowrap; }
.tm-rr-head-status { color:var(--tm-muted); }
.tm-manager[data-site="light"] .tm-rr-table-chip { border-color:rgba(0,0,0,.12); }
.tm-rr-match .tm-bracket-video-chip { position:static; top:auto; bottom:auto; left:auto; }
.tm-rr-match .tm-bracket-youtube-icon { height:14px; }
.tm-rr-match .tm-bracket-side + .tm-bracket-side { margin-top:6px; }
.tm-rr-match .tm-side-scores { gap:5px; }

.tm-match-list-panel { background:var(--tm-surface); border:1px solid var(--tm-border); border-radius:8px; padding:14px; margin-bottom:14px; }
.tm-match-list-title { font-size:15px; font-weight:800; display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.tm-match-list-round { margin-top:16px; }
.tm-match-list-round:first-child { margin-top:0; }
.tm-match-list-round-title { color:var(--tm-muted); font-size:11px; text-transform:uppercase; font-weight:800; margin-bottom:7px; padding-top:4px; }
.tm-match-list-row { display:grid; grid-template-columns:48px minmax(0, 1fr); gap:8px 10px; align-items:start; background:var(--tm-match-bg); border:1px solid var(--tm-border); border-radius:7px; padding:8px 10px; margin-bottom:6px; transition:background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.tm-match-list-row:hover { background:rgba(47,125,211,.14); border-color:rgba(47,125,211,.42); box-shadow:0 8px 18px rgba(0,0,0,.14); }
.tm-match-list-row.live { border-color:rgba(37,155,85,.72); background:linear-gradient(90deg, rgba(37,155,85,.16), var(--tm-match-bg) 46%) !important; box-shadow:0 0 0 1px rgba(37,155,85,.18), 0 0 18px rgba(37,155,85,.18); animation:tmLiveMatchPulse 2.4s ease-in-out infinite; }
.tm-match-list-row.live:hover { border-color:rgba(37,155,85,.82); background:linear-gradient(90deg, rgba(37,155,85,.3), var(--tm-match-bg) 52%) !important; box-shadow:0 0 0 1px rgba(37,155,85,.24), 0 10px 20px rgba(0,0,0,.14), 0 0 18px rgba(37,155,85,.18); }
.tm-match-list-num { color:var(--tm-muted); font-weight:800; text-align:center; }
.tm-match-list-players { min-width:0; display:grid; gap:4px; }
.tm-match-list-side { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:10px; width:100%; box-sizing:border-box; min-width:0; min-height:32px; padding:3px 6px; border-radius:6px; }
.tm-match-list-meta { grid-column:2; display:flex; align-items:center; justify-content:flex-end; gap:6px; flex-wrap:wrap; color:var(--tm-muted); font-size:11px; }
.tm-match-list-panel.tm-minimal-list-panel { padding:10px 12px; overflow-x:auto; -webkit-overflow-scrolling:touch; --tm-bracket-scale:1; }
.tm-match-list-panel.tm-minimal-list-panel .tm-match-list-title { font-size:13px; margin-bottom:8px; }
.tm-match-list-panel.tm-minimal-list-panel .tm-match-list-round { margin-top:14px; }
.tm-match-list-panel.tm-minimal-list-panel .tm-match-list-round-title { margin-bottom:4px; padding-top:0; font-size:10px; }
.tm-match-list-round .tm-match-list-row.tm-minimal-row:first-of-type { border-top:1px solid var(--tm-border); }
.tm-minimal-stage { margin:0 0 calc(30px * var(--tm-bracket-scale, 1)); padding:0 calc(8px * var(--tm-bracket-scale, 1)) calc(8px * var(--tm-bracket-scale, 1)); overflow:hidden; border:1px solid var(--tm-border); border-radius:calc(12px * var(--tm-bracket-scale, 1)); background:var(--tm-surface-2); box-shadow:0 8px 20px rgba(0,0,0,.10); }
.tm-minimal-stage:last-child { margin-bottom:0; }
.tm-manager[data-site="dark"] .tm-minimal-stage { border-color:#484848; background:#1c1c1c; }
.tm-manager[data-site="light"] .tm-minimal-stage { border-color:rgba(17,24,39,.22); background:#fff; box-shadow:0 8px 20px rgba(17,24,39,.07); }
/* Two columns, not three: the stage name takes the room and the Race To / Best Of chip sits hard
   right. A third empty column for the mobile controls would still contribute its grid gap, leaving
   the chip floating a gap's width short of the edge - so the controls column only exists on the
   variant that actually has controls. */
.tm-minimal-round-title { grid-template-columns:minmax(0, 1fr) auto; }
.tm-minimal-round-title.tm-round-has-controls { grid-template-columns:minmax(0, 1fr) auto auto; }
.tm-minimal-round-title,
.tm-minimal-round-title.tm-round-has-controls { display:grid; align-items:center; gap:calc(10px * var(--tm-bracket-scale)); color:var(--tm-text); font-size:calc(19px * var(--tm-bracket-scale)); line-height:1.15; text-transform:uppercase; letter-spacing:.7px; font-weight:900; text-align:left; margin:0 calc(-8px * var(--tm-bracket-scale, 1)) calc(8px * var(--tm-bracket-scale, 1)); padding:calc(12px * var(--tm-bracket-scale, 1)) calc(14px * var(--tm-bracket-scale, 1)); border-bottom:1px solid var(--tm-border); background:rgba(255,140,0,.09); }
.tm-manager[data-site="light"] .tm-minimal-round-title { background:#fff4e5; border-bottom-color:rgba(176,96,0,.24); color:#202733; }
.tm-manager[data-site="dark"] .tm-minimal-round-title { background:#2a241d; border-bottom-color:#574633; color:#fff; }
.tm-minimal-round-title .tm-round-title-text { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tm-minimal-round-title .tm-round-race { grid-column:2; min-height:calc(24px * var(--tm-bracket-scale)); margin-left:0; padding:0 calc(10px * var(--tm-bracket-scale)); font-size:calc(12px * var(--tm-bracket-scale)); justify-self:end; }
.tm-minimal-round-title .tm-round-race-placeholder { grid-column:2; }
/* Pen inside the Race To / Best Of chip: editable only while the round is untouched, so it lives
   with the value it changes rather than in a toolbar somewhere else. It borrows the chip's accent
   colour instead of the icon button's own border, so the chip still reads as one object. */
.tm-round-race .tm-round-race-edit { width:calc(19px * var(--tm-bracket-scale, 1)); height:calc(19px * var(--tm-bracket-scale, 1)); margin-left:calc(5px * var(--tm-bracket-scale, 1)); margin-right:calc(-3px * var(--tm-bracket-scale, 1)); flex:0 0 auto; border-color:transparent; background:transparent; color:inherit; opacity:.8; }
.tm-round-race .tm-round-race-edit .material-symbols-outlined { font-size:calc(14px * var(--tm-bracket-scale, 1)); }
.tm-round-race .tm-round-race-edit:hover { background:rgba(255,140,0,.22); color:inherit; opacity:1; }
.tm-round-race.tm-round-race-empty { padding:0 calc(4px * var(--tm-bracket-scale, 1)); }
.tm-round-race.tm-round-race-empty .tm-round-race-edit { margin-left:0; margin-right:0; }
.tm-minimal-round-title .tm-round-mobile-controls { grid-column:3; justify-self:end; }
.tm-minimal-round-title-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tm-minimal-round-title-text { min-width:0; }
.tm-minimal-bye-toggle { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; cursor:pointer; border:1px solid var(--tm-border); border-radius:999px; padding:3px 8px; background:rgba(255,255,255,.02); color:var(--tm-muted); font-size:10px; font-weight:800; line-height:1; transition:background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease; }
.tm-minimal-bye-toggle:hover { background:rgba(47,125,211,.2); border-color:rgba(47,125,211,.52); color:var(--tm-text); box-shadow:0 6px 14px rgba(0,0,0,.12); }
.tm-minimal-bye-toggle.active { background:rgba(47,125,211,.18); border-color:rgba(47,125,211,.5); color:var(--tm-text); }
.tm-minimal-bye-toggle.active:hover { background:rgba(47,125,211,.26); border-color:rgba(47,125,211,.64); }
.tm-match-list-row.tm-minimal-row { position:relative; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); gap:0 calc(5px * var(--tm-bracket-scale)); align-items:end; --tm-mrow-pt:calc(4px * var(--tm-bracket-scale, 1)); --tm-mrow-px:calc(6px * var(--tm-bracket-scale, 1)); --tm-mrow-pb:calc(7px * var(--tm-bracket-scale, 1)); padding:var(--tm-mrow-pt) var(--tm-mrow-px) var(--tm-mrow-pb); margin-bottom:0; background:transparent; border-radius:0; border-left:0; border-right:0; border-top:0; transition:background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.tm-match-list-row.tm-minimal-row:hover { background:rgba(47,125,211,.16); border-color:rgba(47,125,211,.4); }
.tm-match-list-row.tm-minimal-row.live { background:rgba(37,155,85,.08) !important; border-color:rgba(37,155,85,.5); border-bottom-width:1px; --tm-mrow-pb:calc(8px * var(--tm-bracket-scale, 1)); box-shadow:none; animation:none; }
.tm-match-list-row.tm-minimal-row.live:hover { background:rgba(37,155,85,.22) !important; border-color:rgba(37,155,85,.74); }
/* Billiardon: make a playing (live) match in the Minimalistic View stand out with a stronger green
   fill, a solid green left bar and a soft glow (snookeron keeps its lighter highlight). */
.tm-manager[data-tm-site="billiardon"] .tm-match-list-row.tm-minimal-row.live { background:linear-gradient(90deg, rgba(37,155,85,.32), rgba(37,155,85,.13)) !important; border-color:rgba(37,155,85,.85); box-shadow:inset 3px 0 0 var(--tm-green), 0 0 14px rgba(37,155,85,.24); }
.tm-manager[data-tm-site="billiardon"] .tm-match-list-row.tm-minimal-row.live:hover { background:linear-gradient(90deg, rgba(37,155,85,.42), rgba(37,155,85,.2)) !important; border-color:rgba(37,155,85,.95); }
.tm-manager[data-tm-site="billiardon"] .tm-minimal-row.live .tm-side-score.live,
.tm-manager[data-tm-site="billiardon"] .tm-minimal-row.live .tm-minimal-box.live { background:linear-gradient(180deg, rgba(37,155,85,.42), rgba(37,155,85,.24)); border-color:rgba(37,155,85,.72); }
.tm-match-list-row.tm-minimal-row.finished { background:rgba(128,128,128,.34) !important; border-color:rgba(128,128,128,.6); box-shadow:inset 3px 0 0 rgba(128,128,128,.85); animation:none; }
.tm-match-list-row.tm-minimal-row.finished:hover { background:rgba(128,128,128,.44) !important; border-color:rgba(128,128,128,.72); }
.tm-minimal-row.finished .tm-side-score.finished,
.tm-minimal-row.finished .tm-minimal-box.finished { background:linear-gradient(180deg, rgba(140,140,140,.36), rgba(140,140,140,.2)); border-color:rgba(140,140,140,.52); }
/* FINISHED rows step AWAY from the page: darker than the white upcoming rows on the light theme,
   lighter than the near-black ones on the dark theme. A faint tint in the same direction as the
   rows around it (the old 12% grey on light) left a finished match reading like one still to come.
   Slate rather than neutral grey, matching the Schedule tab's finished rows. */
.tm-manager[data-site="light"] .tm-match-list-row.tm-minimal-row.finished { background:rgba(71,85,105,.2) !important; border-color:rgba(71,85,105,.3) !important; box-shadow:inset 3px 0 0 #64748b !important; }
.tm-manager[data-site="light"] .tm-match-list-row.tm-minimal-row.finished:hover { background:rgba(71,85,105,.28) !important; border-color:rgba(71,85,105,.42) !important; }
/* Dark theme: a light lift, with the neutral score boxes sunk darker so they do not melt into it. */
.tm-manager[data-site="dark"] .tm-match-list-row.tm-minimal-row.finished { background:rgba(255,255,255,.24) !important; border-color:rgba(255,255,255,.26) !important; box-shadow:inset 3px 0 0 #cbd5e1 !important; }
.tm-manager[data-site="dark"] .tm-match-list-row.tm-minimal-row.finished:hover { background:rgba(255,255,255,.3) !important; border-color:rgba(255,255,255,.34) !important; }
.tm-manager[data-site="dark"] .tm-minimal-row.finished .tm-side-score.finished:not(.winner),
.tm-manager[data-site="dark"] .tm-minimal-row.finished .tm-minimal-box.finished:not(.winner) { background:rgba(0,0,0,.38); border-color:rgba(255,255,255,.22); }
/* The theme's muted grey (#a3a3a3) is tuned for the near-black rows and goes faint on the lift. */
.tm-manager[data-site="dark"] .tm-minimal-row.finished .tm-minimal-start-time { color:#d4d4d4; }
/* Dark theme: brighter lime highlight for live (playing) matches. */
.tm-manager[data-site="dark"] .tm-match-list-row.tm-minimal-row.live { background:linear-gradient(90deg, rgba(163,230,53,.22), rgba(163,230,53,.05)) !important; border-color:rgba(163,230,53,.6) !important; box-shadow:inset 3px 0 0 #a3e635, 0 0 12px rgba(163,230,53,.22) !important; }
.tm-manager[data-site="dark"] .tm-match-list-row.tm-minimal-row.live:hover { background:linear-gradient(90deg, rgba(163,230,53,.32), rgba(163,230,53,.10)) !important; border-color:rgba(163,230,53,.85) !important; }
.tm-minimal-num { position:absolute; top:0; left:0; z-index:1; color:var(--tm-muted); font-size:calc(10px * var(--tm-bracket-scale, 1)); font-weight:900; font-variant-numeric:tabular-nums; line-height:1; pointer-events:none; }
.tm-minimal-player { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:calc(10px * var(--tm-bracket-scale, 1)); line-height:1.05; font-weight:400; }
.tm-minimal-player.left { justify-content:flex-end; text-align:right; }
.tm-minimal-player.right { text-align:left; }
.tm-minimal-player.muted { color:var(--tm-muted); font-weight:400; }
.tm-minimal-player.winner { font-weight:600; }
/* Don't dim the whole loser side (that faded the score too) - dim only the name so the
   loser's SCORE stays crisp and legible. */
.tm-minimal-player.loser { opacity:1; }
.tm-minimal-player.loser .tm-minimal-name-text { opacity:.72; }
/* The logged-in player's own name stands out (accent colour) so they can spot their matches at a glance. */
.tm-minimal-player.tm-minimal-me { opacity:1; }
.tm-minimal-player.tm-minimal-me .tm-minimal-name-text { color:var(--tm-accent); font-weight:600; }
/* On dark the orange accent blends with the other accent UI, so the logged player's own name
   gets its own distinct, high-legibility colour (light theme keeps the orange accent above). */
.tm-manager[data-site="dark"] .tm-minimal-player.tm-minimal-me .tm-minimal-name-text { color:#38bdf8 !important; }
.tm-minimal-center { display:flex; align-items:center; justify-content:center; gap:calc(4px * var(--tm-bracket-scale, 1)); white-space:nowrap; }
.tm-minimal-time-cell { position:absolute; top:0; right:0; z-index:1; display:flex; align-items:center; gap:calc(4px * var(--tm-bracket-scale, 1)); min-width:0; white-space:nowrap; }
.tm-minimal-match-no { color:var(--tm-muted); font-size:calc(10px * var(--tm-bracket-scale, 1)); font-weight:800; }
.tm-minimal-start-time { justify-self:end; min-width:calc(44px * var(--tm-bracket-scale, 1)); text-align:right; color:var(--tm-muted); font-size:calc(10px * var(--tm-bracket-scale, 1)); font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; line-height:1.1; }
.tm-minimal-start-time.empty { opacity:.4; }
/* "Sat" before the clock: the same muted label, a touch lighter so the time stays the figure. */
.tm-minimal-day { font-weight:600; opacity:.8; }
/* Table number (right) and match number (left) as chips, so "T1" can never be read as part of the
   time next to it. The negative block margins cancel the padding and border, so a chip is exactly
   as tall as the label text in layout: without them every row with a chip grew taller. */
.tm-minimal-table,
.tm-minimal-badge-row .tm-minimal-num { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; box-sizing:border-box; margin:calc(-3px * var(--tm-bracket-scale, 1)) 0; padding:calc(2px * var(--tm-bracket-scale, 1)) calc(5px * var(--tm-bracket-scale, 1)); border:1px solid rgba(96,165,250,.45); border-radius:calc(4px * var(--tm-bracket-scale, 1)); background:rgba(47,125,211,.28); color:#dbeafe; font-size:calc(10px * var(--tm-bracket-scale, 1)); font-weight:800; font-variant-numeric:tabular-nums; line-height:1; white-space:nowrap; }
.tm-manager[data-site="light"] .tm-minimal-table,
.tm-manager[data-site="light"] .tm-minimal-badge-row .tm-minimal-num { background:#e3eefb; border-color:rgba(47,125,211,.4); color:#1a5aa8; }
.tm-minimal-score { min-width:calc(38px * var(--tm-bracket-scale, 1)); text-align:center; font-size:calc(11px * var(--tm-bracket-scale, 1)); font-weight:900; font-variant-numeric:tabular-nums; }
.tm-minimal-score.live { color:var(--tm-green); }
.tm-minimal-score.finished { color:var(--tm-muted); }
.tm-minimal-box { display:inline-flex; align-items:center; justify-content:center; min-width:calc(24px * var(--tm-bracket-scale, 1)); min-height:calc(18px * var(--tm-bracket-scale, 1)); box-sizing:border-box; padding:0 calc(5px * var(--tm-bracket-scale, 1)); border-radius:calc(6px * var(--tm-bracket-scale, 1)); background:linear-gradient(180deg, rgba(47,125,211,.2), rgba(47,125,211,.1)); border:1px solid rgba(47,125,211,.32); color:var(--tm-text); font-size:calc(11px * var(--tm-bracket-scale, 1)); font-weight:900; font-variant-numeric:tabular-nums; box-shadow:inset 0 1px 0 rgba(255,255,255,.07); }
.tm-minimal-box-single { min-width:calc(42px * var(--tm-bracket-scale, 1)); letter-spacing:.5px; }
.tm-minimal-box-sep { color:var(--tm-muted); font-size:calc(11px * var(--tm-bracket-scale, 1)); font-weight:900; opacity:.6; }
/* The minimal row is bottom-aligned (names line up with the score boxes); keep the centre
   separator / options chip (and, when the match has one, the YouTube icon beside it) on the
   same line as the score-box digits. */
.tm-match-list-row.tm-minimal-row > .tm-minimal-box-sep,
.tm-match-list-row.tm-minimal-row > .tm-minimal-mid { align-self:end; min-height:calc(20px * var(--tm-bracket-scale, 1)); display:inline-flex; align-items:center; justify-content:center; }
/* The options chip sits on the SCORE BOXES' centre line: its column is exactly as tall as a score
   box and bottom-aligned like one, so centring the chip in it centres it on the boxes. Only when
   the chip is there - a ":" separator keeps the short column, because the placeholder "-" boxes
   beside it are shorter than real score boxes on small screens. */
.tm-match-list-row.tm-minimal-row > .tm-minimal-mid.tm-minimal-mid-options { min-height:calc(28px * var(--tm-bracket-scale, 1)); }
.tm-minimal-options-chip { display:inline-flex; align-items:center; justify-content:center; width:auto; height:auto; padding:0; border:0; background:transparent; color:var(--tm-muted); cursor:pointer; font-size:calc(20px * var(--tm-bracket-scale, 1)); line-height:1; opacity:.75; text-decoration:none; }
.tm-minimal-options-chip:hover { color:var(--tm-text); opacity:1; }
/* The YouTube icon floats at the TOP-centre of the row (well clear of the more_vert
   dots, which stay down on the score baseline). It's absolute so it never adds row
   height or nudges the name/score alignment; the free centre-top gap between the
   corner match-number and start-time keeps it from colliding with either. */
.tm-minimal-video-btn { display:inline-flex; align-items:center; justify-content:center; line-height:0; opacity:.9; text-decoration:none; }
/* The YouTube icon now sits inline inside the right side's time cell (just before the
   start time + table), so it no longer adds any height to the row. */
.tm-match-list-panel .tm-minimal-badge-row .tm-minimal-time-cell .tm-minimal-video-btn { flex:0 0 auto; }
.tm-minimal-video-btn:hover { opacity:1; }
.tm-minimal-youtube-icon { width:auto; height:calc(12px * var(--tm-bracket-scale, 1)); display:block; }
.tm-minimal-box-empty { min-width:calc(26px * var(--tm-bracket-scale, 1)); background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)); border-color:rgba(255,255,255,.14); color:var(--tm-muted); }
.tm-minimal-box.live { background:linear-gradient(180deg, rgba(37,155,85,.26), rgba(37,155,85,.13)); border-color:rgba(37,155,85,.46); color:var(--tm-green); }
.tm-minimal-box.finished { background:linear-gradient(180deg, rgba(150,150,150,.2), rgba(150,150,150,.1)); border-color:rgba(150,150,150,.3); color:var(--tm-muted); }
.tm-minimal-box.tm-minimal-box-ff { color:var(--tm-red) !important; }
.tm-minimal-box.tm-minimal-box-advance { background:linear-gradient(180deg, rgba(37,155,85,.28), rgba(37,155,85,.14)); border-color:rgba(37,155,85,.5); color:var(--tm-green); }
.tm-minimal-box.tm-minimal-box-advance .material-symbols-outlined { font-size:calc(14px * var(--tm-bracket-scale, 1)); font-weight:900; }
.tm-manager .tm-minimal-box.tm-minimal-box-ff { color:var(--tm-red) !important; opacity:.85; }
.tm-manager .tm-minimal-box.tm-minimal-box-advance { color:var(--tm-text) !important; border-color:rgba(37,155,85,.52) !important; background:linear-gradient(180deg, rgba(37,155,85,.3), rgba(37,155,85,.15)) !important; }
.tm-manager .tm-minimal-box.winner { color:var(--tm-text) !important; border-color:rgba(37,155,85,.52) !important; background:linear-gradient(180deg, rgba(37,155,85,.3), rgba(37,155,85,.15)) !important; }
.tm-manager .tm-minimal-box.loser { color:var(--tm-text) !important; opacity:1 !important; }
.tm-minimal-box.tm-shootout { background:linear-gradient(180deg, rgba(191,61,61,.24), rgba(191,61,61,.12)); border-color:rgba(191,61,61,.42); color:var(--tm-text); }
.tm-minimal-box.tm-shootout.live { background:linear-gradient(180deg, rgba(191,61,61,.3), rgba(191,61,61,.16)); border-color:rgba(191,61,61,.5); color:var(--tm-red); }
.tm-manager .tm-minimal-box.tm-shootout.winner { border-color:rgba(191,61,61,.55) !important; background:linear-gradient(180deg, rgba(191,61,61,.32), rgba(191,61,61,.16)) !important; color:var(--tm-text) !important; }
.tm-score-pill { display:inline-flex; align-items:center; justify-content:center; min-height:20px; border-radius:999px; padding:0 8px; background:rgba(47,125,211,.16); color:var(--tm-blue); font-size:10px; font-weight:900; white-space:nowrap; }
.tm-score-pill.live { background:rgba(37,155,85,.18); color:var(--tm-green); }
.tm-score-pill.finished { background:rgba(150,150,150,.18); color:var(--tm-muted); }
.tm-side-score { justify-self:end; align-self:center; margin-left:auto; flex:0 0 36px; width:36px; min-height:28px; box-sizing:border-box; border-radius:7px; display:inline-flex; align-items:center; justify-content:center; text-align:center; background:linear-gradient(180deg, rgba(47,125,211,.22), rgba(47,125,211,.12)); border:1px solid rgba(47,125,211,.34); color:var(--tm-text); font-size:13px; font-weight:900; font-variant-numeric:tabular-nums; box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
.tm-side-scores { justify-self:end; display:inline-flex; align-items:center; justify-content:flex-end; gap:5px; }
.tm-side-score.live { background:linear-gradient(180deg, rgba(37,155,85,.26), rgba(37,155,85,.13)); border-color:rgba(37,155,85,.45); color:var(--tm-green); }
.tm-side-score.finished { background:linear-gradient(180deg, rgba(150,150,150,.22), rgba(150,150,150,.12)); border-color:rgba(150,150,150,.32); color:var(--tm-muted); }
.tm-manager .tm-side-score.winner { color:var(--tm-text) !important; border-color:rgba(37,155,85,.52) !important; background:linear-gradient(180deg, rgba(37,155,85,.28), rgba(37,155,85,.14)) !important; }
.tm-manager .tm-side-score.loser { color:var(--tm-text) !important; opacity:1 !important; }
.tm-side-points { align-self:center; flex:0 0 auto; min-width:20px; height:22px; box-sizing:border-box; padding:0 5px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; text-align:center; background:rgba(150,150,150,.12); border:1px solid rgba(150,150,150,.22); color:var(--tm-muted); font-size:10px; font-weight:800; font-variant-numeric:tabular-nums; }
.tm-minimal-list-panel .tm-side-points { min-width:calc(20px * var(--tm-bracket-scale, 1)); height:calc(22px * var(--tm-bracket-scale, 1)); padding:0 calc(5px * var(--tm-bracket-scale, 1)); border-radius:calc(6px * var(--tm-bracket-scale, 1)); font-size:calc(10px * var(--tm-bracket-scale, 1)); }
/* The score box is what a player pinches the Minimalistic View to read, and it was the one thing
   that did not answer: --tm-bracket-scale reached it ONLY through the min-width:761px block far
   below, i.e. only on the desktop where pinch-zoom is switched off entirely. Everywhere under
   761px it fell back to the unscaled `.tm-side-score` base and sat at a flat 36x28px while the
   names, the round title and the match number all grew around it. Scaled here, in the base, so it
   moves with the rest at every width; the desktop block still overrides with its larger figures. */
.tm-minimal-list-panel .tm-side-scores { gap:calc(5px * var(--tm-bracket-scale, 1)); }
.tm-minimal-list-panel .tm-side-score { flex:0 0 calc(36px * var(--tm-bracket-scale, 1)); width:calc(36px * var(--tm-bracket-scale, 1)); min-height:calc(28px * var(--tm-bracket-scale, 1)); border-radius:calc(7px * var(--tm-bracket-scale, 1)); font-size:calc(13px * var(--tm-bracket-scale, 1)); }
.tm-minimal-list-panel .tm-side-score.tm-side-ff { font-size:calc(11px * var(--tm-bracket-scale, 1)); }
.tm-minimal-list-panel .tm-side-score.tm-side-advance .material-symbols-outlined { font-size:calc(15px * var(--tm-bracket-scale, 1)); }
.tm-side-points.live { background:rgba(255,140,0,.16); border-color:rgba(255,140,0,.34); color:var(--tm-accent); }
.tm-side-points.finished { background:rgba(150,150,150,.14); border-color:rgba(150,150,150,.24); color:var(--tm-muted); }
.tm-bracket-side.tm-side-winner .tm-player-link, .tm-bracket-side.tm-side-winner .tm-player-name-inline, .tm-match-list-side.tm-side-winner .tm-player-link, .tm-match-list-side.tm-side-winner .tm-player-name-inline { font-weight:950; }
.tm-bracket-side.tm-side-loser .tm-player-link, .tm-bracket-side.tm-side-loser .tm-player-name-inline, .tm-match-list-side.tm-side-loser .tm-player-link, .tm-match-list-side.tm-side-loser .tm-player-name-inline { font-weight:500; opacity:.72; }
.tm-countdown-pill { display:inline-flex; align-items:center; gap:4px; min-height:20px; border-radius:999px; padding:0 8px; background:rgba(255,140,0,.16); color:var(--tm-accent); font-size:10px; font-weight:900; white-space:nowrap; }
.tm-countdown-pill.soon { background:rgba(37,155,85,.18); color:var(--tm-green); }
.tm-countdown-pill.overdue { background:rgba(191,61,61,.16); color:var(--tm-red); }
.tm-live-chip { display:inline-flex; align-items:center; justify-content:center; gap:4px; min-height:20px; border-radius:999px; padding:0 8px; background:rgba(37,155,85,.2); color:var(--tm-green); border:1px solid rgba(37,155,85,.36); font-size:10px; font-weight:900; text-transform:uppercase; }
.tm-live-chip::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--tm-green); box-shadow:0 0 0 3px rgba(37,155,85,.18); }
.tm-finished-chip { display:inline-flex; align-items:center; justify-content:center; min-height:20px; border-radius:999px; padding:0 8px; background:rgba(150,150,150,.18); color:var(--tm-muted); font-size:10px; font-weight:900; text-transform:uppercase; }
.tm-ff-chip { display:inline-flex; align-items:center; justify-content:center; min-height:20px; border-radius:999px; padding:0 8px; background:rgba(191,61,61,.18); color:var(--tm-red); border:1px solid rgba(191,61,61,.36); font-size:10px; font-weight:900; text-transform:uppercase; }
/* ---- TV "Now Playing / Up Next" board ---- */
.tm-tv-board { position:relative; border:1px solid var(--tm-border); border-radius:18px; background:var(--tm-surface); padding:18px; }
.tm-tv-board:fullscreen { padding:34px 38px; overflow-y:auto; background:var(--tm-bg, #0b1018); }
.tm-tv-now { position:relative; }
/* Right column stacks Up Next and the check-in QR card beneath it. */
.tm-tv-col-right { display:flex; flex-direction:column; gap:20px; min-width:0; }
/* Check-in QR: its own card under Up Next, shown only while the TV Board is fullscreen (rule below). */
.tm-tv-checkin { display:none; flex-direction:column; align-items:center; gap:8px; padding:14px; border-radius:16px; background:#ffffff; border:1px solid var(--tm-border); box-shadow:0 8px 22px rgba(0,0,0,0.22); }
.tm-tv-checkin-title { display:flex; align-items:center; gap:5px; font-size:13px; font-weight:800; letter-spacing:.01em; color:#0b1018; text-transform:uppercase; }
.tm-tv-checkin-title .material-symbols-outlined { font-size:18px; }
.tm-tv-checkin-qr { display:block; width:92px; height:92px; image-rendering:pixelated; }
.tm-tv-checkin-note { font-size:11px; font-weight:600; color:#43506a; text-align:center; max-width:140px; }
.tm-tv-board:fullscreen .tm-tv-col-right { gap:10px; }
.tm-tv-board:fullscreen .tm-tv-checkin { display:flex; padding:12px 13px 11px; gap:7px; border-radius:14px; }
.tm-tv-board:fullscreen .tm-tv-checkin-title { font-size:13px; }
.tm-tv-board:fullscreen .tm-tv-checkin-qr { width:112px; height:112px; }
.tm-tv-board:fullscreen .tm-tv-checkin-note { font-size:15px; max-width:200px; }
/* Fullscreen: keep the whole right column inside the viewport so the QR card is always visible.
   Up Next fills the available height and scrolls internally; the QR stays pinned beneath it. */
.tm-manager[data-site] .tm-tv-board:fullscreen .tm-tv-col-right { min-height:0; overflow:hidden; }
.tm-manager[data-site] .tm-tv-board:fullscreen .tm-tv-col-right .tm-tv-next { flex:1 1 auto; min-height:0; }
.tm-manager[data-site] .tm-tv-board:fullscreen .tm-tv-col-right .tm-tv-next-list { flex:1 1 auto; min-height:0; overflow:hidden; }
.tm-manager[data-site] .tm-tv-board:fullscreen .tm-tv-checkin { flex:0 0 auto; }
.tm-tv-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.tm-tv-brand { display:flex; align-items:center; gap:12px; min-width:0; }
.tm-tv-brand-text { min-width:0; display:flex; flex-direction:column; gap:2px; }
.tm-tv-bar-title { display:block; min-width:0; font-size:22px; font-weight:900; line-height:1.08; color:var(--tm-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tm-tv-bar-subtitle { min-width:0; font-size:13px; font-weight:700; line-height:1.15; color:var(--tm-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tm-tv-brand .tm-tournament-logo { margin:0; width:64px; flex:0 0 64px; }
.tm-tv-brand .tm-tournament-logo img { width:64px; height:64px; object-fit:contain; max-height:none; border-radius:10px; }
.tm-tv-board:fullscreen .tm-tv-bar-title { font-size:40px; }
.tm-tv-board:fullscreen .tm-tv-brand .tm-tournament-logo { width:88px; flex-basis:88px; }
.tm-tv-board:fullscreen .tm-tv-brand .tm-tournament-logo img { width:88px; height:88px; }
/* "Powered by [site logo]" — only shown in fullscreen, sits at the far right of the bar. */
.tm-tv-powered { display:none; }
.tm-tv-board:fullscreen .tm-tv-powered { display:flex; align-items:center; gap:12px; flex:0 0 auto; margin-left:auto; }
.tm-tv-powered-label { font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:.14em; color:var(--tm-muted); white-space:nowrap; }
.tm-tv-powered-logo { height:34px; width:auto; max-width:200px; object-fit:contain; display:block; }
.tm-tv-grid { display:grid; grid-template-columns:2.4fr 1fr; gap:20px; align-items:start; }
@media (max-width:760px) { .tm-tv-grid { grid-template-columns:1fr; } }
.tm-tv-section { border:1px solid var(--tm-border); border-radius:16px; background:var(--tm-match-bg); padding:15px; }
.tm-tv-section-head { display:flex; align-items:center; gap:10px; font-size:15px; font-weight:900; text-transform:uppercase; letter-spacing:.6px; color:var(--tm-muted); margin-bottom:14px; }
.tm-tv-board:fullscreen .tm-tv-section-head { font-size:22px; }
.tm-tv-count { margin-left:auto; min-width:28px; height:26px; padding:0 9px; border-radius:999px; background:var(--tm-input-bg); color:var(--tm-text); font-size:13px; display:inline-flex; align-items:center; justify-content:center; }
.tm-tv-live-dot { width:13px; height:13px; border-radius:50%; background:var(--tm-green); box-shadow:0 0 0 4px rgba(37,155,85,.2); animation:tmLiveMatchPulse 2s ease-in-out infinite; }
.tm-tv-empty { color:var(--tm-muted); font-size:15px; padding:22px 10px; text-align:center; }
.tm-tv-now-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }
.tm-tv-now-card { position:relative; border:1px solid rgba(37,155,85,.4); border-radius:16px; background:linear-gradient(180deg, rgba(37,155,85,.1), var(--tm-match-bg)); padding:14px 15px 12px; box-shadow:0 0 16px rgba(37,155,85,.12); }
.tm-tv-now-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; gap:10px; }
.tm-tv-now-match { min-width:0; font-size:18px; font-weight:900; color:var(--tm-text); letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tm-tv-live-chip { font-size:11px; font-weight:900; color:#fff; background:var(--tm-green); border-radius:999px; padding:3px 9px; letter-spacing:.6px; flex:0 0 auto; }
.tm-tv-now-side { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 0; border-top:1px solid var(--tm-border); }
.tm-tv-now-side:first-of-type { border-top:0; }
.tm-tv-name { min-width:0; font-size:18px; font-weight:800; color:var(--tm-text); white-space:normal; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tm-tv-board:fullscreen .tm-tv-name { font-size:30px; }
.tm-tv-now-side.lead .tm-tv-name { color:var(--tm-green); }
.tm-tv-side-scores { margin-left:auto; display:inline-flex; align-items:center; justify-content:flex-end; gap:6px; }
.tm-tv-side-scores .tm-side-points { min-width:24px; height:26px; padding:0 7px; border-radius:7px; font-size:11px; }
.tm-tv-score { flex:0 0 auto; min-width:40px; text-align:center; border-radius:9px; padding:4px 10px; background:linear-gradient(180deg, rgba(37,155,85,.28), rgba(37,155,85,.14)); border:1px solid rgba(37,155,85,.45); color:var(--tm-text); font-size:20px; font-weight:900; font-variant-numeric:tabular-nums; }
.tm-tv-board:fullscreen .tm-tv-score { font-size:34px; min-width:56px; }
.tm-tv-score.tm-shootout { background:linear-gradient(180deg, rgba(191,61,61,.28), rgba(191,61,61,.14)); border-color:rgba(191,61,61,.45); }
.tm-tv-now-card.tm-shootout { border-color:rgba(191,61,61,.4); background:linear-gradient(180deg, rgba(191,61,61,.1), var(--tm-match-bg)); box-shadow:0 0 16px rgba(191,61,61,.12); }
.tm-tv-now-stage { margin-top:8px; text-align:right; font-size:12px; font-weight:800; color:var(--tm-muted); line-height:1.1; letter-spacing:.04em; }
.tm-tv-board:fullscreen .tm-tv-now-stage { font-size:15px; }
.tm-tv-next-list { display:flex; flex-direction:column; gap:8px; }
.tm-tv-next-row { display:flex; flex-direction:column; gap:8px; padding:12px 14px 11px; border:1px solid var(--tm-border); border-radius:12px; background:var(--tm-surface); }
.tm-tv-next-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; min-width:0; }
.tm-tv-next-num { font-size:15px; font-weight:900; color:var(--tm-muted); font-variant-numeric:tabular-nums; padding-top:1px; white-space:nowrap; }
.tm-tv-next-top-meta { display:flex; align-items:center; justify-content:flex-end; gap:6px; flex-wrap:wrap; min-width:0; }
.tm-tv-next-matchline { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:baseline; gap:12px; min-width:0; }
.tm-tv-next-p { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; font-size:17px; font-weight:800; color:var(--tm-text); }
.tm-tv-vs { flex:0 0 auto; color:var(--tm-accent); font-size:12px; font-weight:900; line-height:1; text-transform:none; letter-spacing:.08em; padding:0 2px; transform:translateY(-1px); white-space:nowrap; }
.tm-tv-next-stage { font-size:9px; font-weight:800; color:var(--tm-muted); line-height:1.05; letter-spacing:.04em; text-align:center; }
.tm-tv-board:fullscreen .tm-tv-next-stage { font-size:11px; text-align:center; }
.tm-tv-next-table { font-size:12px; font-weight:900; color:var(--tm-text); background:var(--tm-input-bg); border-radius:999px; padding:4px 9px; white-space:nowrap; }
.tm-tv-when { font-size:12px; font-weight:800; color:var(--tm-muted); white-space:nowrap; }

.tm-manager[data-site="light"] .tm-tv-board:fullscreen {
    --tm-bg:#eef3f9;
    --tm-surface:rgba(255,255,255,.88);
    --tm-match-bg:rgba(255,255,255,.96);
    --tm-border:rgba(15,23,42,.08);
    --tm-input-bg:#e6edf5;
    --tm-text:#0f172a;
    --tm-muted:#64748b;
    --tm-soft:#94a3b8;
    --tm-green:#15803d;
    --tm-red:#b42318;
    --tm-blue:#1d4ed8;
    --tm-accent:#b45309;
    padding:24px 28px 30px;
    overflow-y:auto;
    background:
        radial-gradient(circle at top left, rgba(29,78,216,.14), transparent 28%),
        radial-gradient(circle at top right, rgba(21,128,61,.10), transparent 26%),
        linear-gradient(180deg, #f8fbff 0%, #eef3f9 100%);
    color:var(--tm-text);
}
.tm-manager[data-site="light"] .tm-tv-board:fullscreen .tm-tv-bar {
    position:sticky;
    top:0;
    z-index:4;
    margin-bottom:18px;
    padding:18px 20px;
    border:1px solid rgba(15,23,42,.08);
    border-radius:18px;
    background:rgba(255,255,255,.84);
    box-shadow:0 18px 44px rgba(15,23,42,.08);
    backdrop-filter:blur(14px);
}
.tm-manager[data-site="light"] .tm-tv-board:fullscreen .tm-tv-bar-title { font-size:clamp(28px, 2.3vw, 40px); color:var(--tm-text); }
.tm-manager[data-site="light"] .tm-tv-board:fullscreen .tm-tv-section { border-color:rgba(15,23,42,.08); border-radius:24px; background:rgba(255,255,255,.82); padding:20px; box-shadow:0 16px 40px rgba(15,23,42,.06); backdrop-filter:blur(12px); }
.tm-manager[data-site="light"] .tm-tv-board:fullscreen .tm-tv-section-head { font-size:16px; letter-spacing:.14em; color:var(--tm-muted); margin-bottom:16px; }
.tm-manager[data-site="light"] .tm-tv-board:fullscreen .tm-tv-count { background:rgba(15,23,42,.06); color:var(--tm-text); min-width:32px; height:28px; font-size:14px; }
.tm-manager[data-site="light"] .tm-tv-board:fullscreen .tm-tv-live-dot { width:12px; height:12px; box-shadow:0 0 0 4px rgba(21,128,61,.12); }
.tm-manager[data-site="light"] .tm-tv-board:fullscreen .tm-tv-empty { color:var(--tm-muted); font-size:18px; padding:24px 12px; }
.tm-manager[data-site="light"] .tm-tv-board:fullscreen .tm-tv-now-grid { grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:18px; }
.tm-manager[data-site="light"] .tm-tv-board:fullscreen .tm-tv-now-card {
    border-color:rgba(15,23,42,.08);
    border-radius:22px;
    background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
    box-shadow:0 12px 30px rgba(15,23,42,.08);
    padding:18px 20px 16px;
}
.tm-manager[data-site="light"] .tm-tv-board:fullscreen .tm-tv-now-card.tm-shootout {
    border-color:rgba(180,35,24,.18);
    background:linear-gradient(180deg, rgba(255,247,247,.98), rgba(255,241,241,.95));
    box-shadow:0 12px 30px rgba(180,35,24,.08);
}
.tm-manager[data-site="light"] .tm-tv-board:fullscreen .tm-tv-now-top { margin-bottom:10px; }
.tm-manager[data-site="light"] .tm-tv-board:fullscreen .tm-tv-table {
    font-size:11px;
    color:var(--tm-text);
    background:rgba(15,23,42,.06);
    border-radius:999px;
    padding:4px 10px;
    letter-spacing:.2px;
}
.tm-manager[data-site="light"] .tm-tv-board:fullscreen .tm-tv-now-top { margin-bottom:12px; }
.tm-manager[data-site="light"] .tm-tv-board:fullscreen .tm-tv-now-match {
    font-size:24px;
    letter-spacing:.1px;
}
.tm-manager[data-site="light"] .tm-tv-board:fullscreen .tm-tv-live-chip {
    background:linear-gradient(180deg, #16a34a, #15803d);
    box-shadow:0 8px 16px rgba(21,128,61,.16);
    font-size:12px;
    padding:4px 11px;
}
.tm-manager[data-site="light"] .tm-tv-board:fullscreen .tm-tv-now-side {
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:center;
    gap:14px;
    padding:10px 0;
    border-top-color:rgba(15,23,42,.06);
}
.tm-manager[data-site="light"] .tm-tv-board:fullscreen .tm-tv-side-scores { gap:8px; }
.tm-manager[data-site="light"] .tm-tv-board:fullscreen .tm-tv-side-scores .tm-side-points { min-width:30px; height:28px; font-size:12px; }
.tm-manager[data-site="light"] .tm-tv-board:fullscreen .tm-tv-now-side.lead .tm-tv-name { color:var(--tm-green); }
.tm-manager[data-site="light"] .tm-tv-board:fullscreen .tm-tv-name {
    font-size:clamp(18px, 1.25vw, 26px);
    font-weight:800;
    line-height:1.12;
    letter-spacing:.1px;
}
.tm-manager[data-site="light"] .tm-tv-board:fullscreen .tm-tv-score {
    min-width:52px;
    padding:6px 12px;
    font-size:clamp(18px, 1.15vw, 26px);
    color:var(--tm-text);
    background:linear-gradient(180deg, rgba(29,78,216,.16), rgba(29,78,216,.08));
    border-color:rgba(29,78,216,.22);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.tm-manager[data-site="light"] .tm-tv-board:fullscreen .tm-tv-score.tm-shootout {
    background:linear-gradient(180deg, rgba(180,35,24,.18), rgba(180,35,24,.10));
    border-color:rgba(180,35,24,.22);
    color:#7f1d1d;
}
.tm-manager[data-site="light"] .tm-tv-board:fullscreen .tm-tv-now-stage { margin-top:10px; font-size:15px; }
.tm-manager[data-site="light"] .tm-tv-board:fullscreen .tm-tv-next-list { gap:12px; }
.tm-manager[data-site="light"] .tm-tv-board:fullscreen .tm-tv-next-row {
    border-color:rgba(15,23,42,.08);
    border-radius:18px;
    background:rgba(255,255,255,.94);
    box-shadow:0 10px 24px rgba(15,23,42,.05);
    padding:14px 16px 13px;
}
.tm-manager[data-site="light"] .tm-tv-board:fullscreen .tm-tv-next-num { color:var(--tm-muted); font-size:14px; }
.tm-manager[data-site="light"] .tm-tv-board:fullscreen .tm-tv-next-players {
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
    font-size:clamp(17px, 1.1vw, 24px);
    font-weight:800;
    color:var(--tm-text);
}
.tm-manager[data-site="light"] .tm-tv-board:fullscreen .tm-tv-next-p-left, .tm-manager[data-site="light"] .tm-tv-board:fullscreen .tm-tv-next-p-right { text-align:left; }
.tm-manager[data-site="light"] .tm-tv-board:fullscreen .tm-tv-vs { color:var(--tm-accent); font-size:12px; line-height:1; letter-spacing:.06em; transform:translateY(1px); }
.tm-manager[data-site="light"] .tm-tv-board:fullscreen .tm-tv-next-top { align-items:flex-start; }
.tm-manager[data-site="light"] .tm-tv-board:fullscreen .tm-tv-next-top-meta { font-size:12px; }
.tm-manager[data-site="light"] .tm-tv-board:fullscreen .tm-tv-next-matchline { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:18px; font-size:clamp(17px, 1.1vw, 24px); font-weight:800; color:var(--tm-text); }
.tm-manager[data-site="light"] .tm-tv-board:fullscreen .tm-tv-next-p { text-align:left; }
.tm-manager[data-site="light"] .tm-tv-board:fullscreen .tm-vs { color:var(--tm-accent); font-size:12px; line-height:1; letter-spacing:.08em; transform:translateY(-1px); }
.tm-manager[data-site="light"] .tm-tv-board:fullscreen .tm-tv-next-stage { font-size:11px; }
.tm-manager[data-site="light"] .tm-tv-board:fullscreen .tm-tv-next-meta { gap:10px; }
.tm-manager[data-site="light"] .tm-tv-board:fullscreen .tm-tv-next-table {
    background:rgba(15,23,42,.06);
    color:var(--tm-text);
    border-radius:999px;
    padding:5px 10px;
    font-size:13px;
}
.tm-manager[data-site="light"] .tm-tv-board:fullscreen .tm-tv-when { color:var(--tm-muted); font-size:13px; }
.tm-manager[data-site="dark"] .tm-tv-board:fullscreen {
    --tm-bg:#0b111b;
    --tm-surface:rgba(17,24,39,.88);
    --tm-match-bg:rgba(11,17,27,.96);
    --tm-border:rgba(148,163,184,.12);
    --tm-input-bg:#182030;
    --tm-text:#edf4ff;
    --tm-muted:#9aa8bb;
    --tm-soft:#64748b;
    --tm-green:#4ade80;
    --tm-red:#f87171;
    --tm-blue:#7aa2ff;
    --tm-accent:#fbbf24;
    padding:28px 32px 34px;
    overflow-y:auto;
    background:
        radial-gradient(circle at top left, rgba(59,130,246,.16), transparent 28%),
        radial-gradient(circle at top right, rgba(34,197,94,.10), transparent 26%),
        linear-gradient(180deg, #0b111b 0%, #111827 100%);
    color:var(--tm-text);
}
.tm-manager[data-site="dark"] .tm-tv-board:fullscreen .tm-tv-bar {
    position:sticky;
    top:0;
    z-index:4;
    margin-bottom:18px;
    padding:14px 16px 13px;
    border:1px solid rgba(148,163,184,.12);
    border-radius:18px;
    background:rgba(11,17,27,.84);
    box-shadow:0 18px 44px rgba(0,0,0,.36);
    backdrop-filter:blur(14px);
}
.tm-manager[data-site="dark"] .tm-tv-board:fullscreen .tm-tv-bar-title { font-size:clamp(28px, 2.3vw, 40px); color:var(--tm-text); }
.tm-manager[data-site="dark"] .tm-tv-board:fullscreen .tm-tv-section { border-color:rgba(148,163,184,.12); border-radius:24px; background:rgba(17,24,39,.82); padding:20px; box-shadow:0 16px 40px rgba(0,0,0,.24); backdrop-filter:blur(12px); }
.tm-manager[data-site="dark"] .tm-tv-board:fullscreen .tm-tv-section-head { font-size:16px; letter-spacing:.14em; color:var(--tm-muted); margin-bottom:16px; }
.tm-manager[data-site="dark"] .tm-tv-board:fullscreen .tm-tv-count { background:rgba(255,255,255,.06); color:var(--tm-text); min-width:32px; height:28px; font-size:14px; }
.tm-manager[data-site="dark"] .tm-tv-board:fullscreen .tm-tv-live-dot { width:12px; height:12px; box-shadow:0 0 0 4px rgba(34,197,94,.12); }
.tm-manager[data-site="dark"] .tm-tv-board:fullscreen .tm-tv-empty { color:var(--tm-muted); font-size:18px; padding:24px 10px; }
.tm-manager[data-site="dark"] .tm-tv-board:fullscreen .tm-tv-now-grid { grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:18px; }
.tm-manager[data-site="dark"] .tm-tv-board:fullscreen .tm-tv-now-card {
.tm-manager[data-site="dark"] .tm-tv-board:fullscreen .tm-tv-next-top { align-items:flex-start; }
.tm-manager[data-site="dark"] .tm-tv-board:fullscreen .tm-tv-next-top-meta { font-size:12px; }
.tm-manager[data-site="dark"] .tm-tv-board:fullscreen .tm-tv-next-matchline { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:18px; font-size:clamp(17px, 1.1vw, 24px); font-weight:800; color:var(--tm-text); }
.tm-manager[data-site="dark"] .tm-tv-board:fullscreen .tm-tv-next-p { text-align:left; }
.tm-manager[data-site="dark"] .tm-tv-board:fullscreen .tm-vs { color:var(--tm-accent); font-size:12px; line-height:1; letter-spacing:.08em; transform:translateY(-1px); }
    border-color:rgba(148,163,184,.12);
    border-radius:22px;
    background:linear-gradient(180deg, rgba(17,24,39,.98), rgba(11,17,27,.96));
    box-shadow:0 12px 30px rgba(0,0,0,.28);
    padding:18px 20px 16px;
}
.tm-manager[data-site="dark"] .tm-tv-board:fullscreen .tm-tv-now-card.tm-shootout {
    border-color:rgba(248,113,113,.18);
    background:linear-gradient(180deg, rgba(39,15,15,.96), rgba(24,12,12,.94));
    box-shadow:0 12px 30px rgba(0,0,0,.3);
}
.tm-manager[data-site="dark"] .tm-tv-board:fullscreen .tm-tv-now-top { margin-bottom:10px; }
.tm-manager[data-site="dark"] .tm-tv-board:fullscreen .tm-tv-now-top { margin-bottom:12px; }
.tm-manager[data-site="dark"] .tm-tv-board:fullscreen .tm-tv-now-match {
    font-size:24px;
    letter-spacing:.1px;
    color:var(--tm-text);
}
.tm-manager[data-site="dark"] .tm-tv-board:fullscreen .tm-tv-live-chip {
    background:linear-gradient(180deg, #22c55e, #15803d);
    box-shadow:0 8px 16px rgba(34,197,94,.18);
    font-size:12px;
    padding:4px 11px;
}
.tm-manager[data-site="dark"] .tm-tv-board:fullscreen .tm-tv-now-side {
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:center;
    gap:14px;
    padding:10px 0;
    border-top-color:rgba(148,163,184,.12);
}
.tm-manager[data-site="dark"] .tm-tv-board:fullscreen .tm-tv-side-scores { gap:8px; }
.tm-manager[data-site="dark"] .tm-tv-board:fullscreen .tm-tv-side-scores .tm-side-points { min-width:30px; height:28px; font-size:12px; }
.tm-manager[data-site="dark"] .tm-tv-board:fullscreen .tm-tv-now-side.lead .tm-tv-name { color:var(--tm-green); }
.tm-manager[data-site="dark"] .tm-tv-board:fullscreen .tm-tv-name {
    font-size:clamp(18px, 1.25vw, 26px);
    font-weight:800;
    line-height:1.12;
    letter-spacing:.1px;
}
.tm-manager[data-site="dark"] .tm-tv-board:fullscreen .tm-tv-score {
    min-width:52px;
    padding:6px 12px;
    font-size:clamp(18px, 1.15vw, 26px);
    color:var(--tm-text);
    background:linear-gradient(180deg, rgba(29,78,216,.16), rgba(29,78,216,.08));
    border-color:rgba(29,78,216,.22);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.tm-manager[data-site="dark"] .tm-tv-board:fullscreen .tm-tv-score.tm-shootout {
    background:linear-gradient(180deg, rgba(180,35,24,.18), rgba(180,35,24,.10));
    border-color:rgba(180,35,24,.22);
    color:#fca5a5;
}
.tm-manager[data-site="dark"] .tm-tv-board:fullscreen .tm-tv-now-stage { margin-top:10px; font-size:15px; }
.tm-manager[data-site="dark"] .tm-tv-board:fullscreen .tm-tv-next-list { gap:12px; }
.tm-manager[data-site="dark"] .tm-tv-board:fullscreen .tm-tv-next-row {
    border-color:rgba(148,163,184,.12);
    border-radius:18px;
    background:rgba(17,24,39,.94);
    box-shadow:0 10px 24px rgba(0,0,0,.18);
    padding:14px 16px;
}
.tm-manager[data-site="dark"] .tm-tv-board:fullscreen .tm-tv-next-num { color:var(--tm-muted); font-size:14px; }
.tm-manager[data-site="dark"] .tm-tv-board:fullscreen .tm-tv-next-center { gap:5px; }
.tm-manager[data-site="dark"] .tm-tv-board:fullscreen .tm-tv-next-players {
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
    font-size:clamp(17px, 1.1vw, 24px);
    font-weight:800;
    color:var(--tm-text);
}
.tm-manager[data-site="dark"] .tm-tv-board:fullscreen .tm-tv-next-p-left, .tm-manager[data-site="dark"] .tm-tv-board:fullscreen .tm-tv-next-p-right { text-align:left; }
.tm-manager[data-site="dark"] .tm-tv-board:fullscreen .tm-tv-vs { color:var(--tm-accent); font-size:12px; line-height:1; letter-spacing:.06em; transform:translateY(1px); }
.tm-manager[data-site="dark"] .tm-tv-board:fullscreen .tm-tv-next-stage { font-size:11px; }
.tm-manager[data-site="dark"] .tm-tv-board:fullscreen .tm-tv-next-meta { gap:10px; }
.tm-manager[data-site="dark"] .tm-tv-board:fullscreen .tm-tv-next-table {
    background:rgba(255,255,255,.06);
    color:var(--tm-text);
    border-radius:999px;
    padding:5px 10px;
    font-size:13px;
}
.tm-manager[data-site="dark"] .tm-tv-board:fullscreen .tm-tv-when { color:var(--tm-muted); font-size:13px; }
.tm-manager[data-site="dark"] .tm-tv-board:fullscreen .tm-btn.tm-btn-ghost {
    background:rgba(17,24,39,.84);
    border-color:rgba(148,163,184,.12);
    color:var(--tm-text);
    box-shadow:0 8px 20px rgba(0,0,0,.22);
}
.tm-manager[data-site="dark"] .tm-tv-board:fullscreen .tm-btn.tm-btn-ghost:hover {
    background:rgba(17,24,39,.96);
    border-color:rgba(148,163,184,.18);
}

.tm-manager[data-site] .tm-tv-board:fullscreen {
    padding:12px 14px 14px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    box-sizing:border-box;
}
.tm-manager[data-site] .tm-tv-board:fullscreen .tm-tv-bar {
    margin-bottom:8px;
    padding:10px 12px;
    flex:0 0 auto;
}
.tm-manager[data-site] .tm-tv-board:fullscreen .tm-tv-bar .tm-btn[data-tm-act="tv-fullscreen"],
.tm-manager[data-site] .tm-tv-board:fullscreen .tm-tv-bar .tm-btn[data-tm-act="tv-fullscreen"]:hover,
.tm-manager[data-site] .tm-tv-board:-webkit-full-screen .tm-tv-bar .tm-btn[data-tm-act="tv-fullscreen"],
.tm-manager[data-site] .tm-tv-board:-webkit-full-screen .tm-tv-bar .tm-btn[data-tm-act="tv-fullscreen"]:hover {
    display:none;
}
.tm-manager[data-site] .tm-tv-board:fullscreen .tm-tv-bar-title { font-size:clamp(14px, 1vw, 18px); }
.tm-manager[data-site] .tm-tv-board:fullscreen .tm-tv-bar-subtitle { font-size:clamp(9px, .7vw, 11px); }
.tm-manager[data-site] .tm-tv-board:fullscreen .tm-tv-grid {
    flex:1 1 auto;
    min-height:0;
    grid-template-columns:minmax(0, 2.1fr) minmax(0, 1fr);
    gap:10px;
    align-items:stretch;
}
.tm-manager[data-site] .tm-tv-board:fullscreen .tm-tv-section {
    min-height:0;
    padding:10px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}
.tm-manager[data-site] .tm-tv-board:fullscreen .tm-tv-section-head { font-size:9px; letter-spacing:.14em; margin-bottom:8px; }
.tm-manager[data-site] .tm-tv-board:fullscreen .tm-tv-count { min-width:18px; height:18px; padding:0 6px; font-size:9px; }
.tm-manager[data-site] .tm-tv-board:fullscreen .tm-tv-live-dot { width:8px; height:8px; box-shadow:0 0 0 3px rgba(37,155,85,.14); }
.tm-manager[data-site] .tm-tv-board:fullscreen .tm-tv-empty { font-size:11px; padding:12px 6px; }
.tm-manager[data-site] .tm-tv-board:fullscreen .tm-tv-now-grid {
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:8px;
}
.tm-manager[data-site] .tm-tv-board:fullscreen .tm-tv-now-card {
    border-radius:12px;
    padding:8px 9px 7px;
    box-shadow:0 8px 18px rgba(0,0,0,.10);
}
.tm-manager[data-site] .tm-tv-board:fullscreen .tm-tv-now-card.tm-shootout { box-shadow:0 8px 18px rgba(0,0,0,.12); }
.tm-manager[data-site] .tm-tv-board:fullscreen .tm-tv-now-top { margin-bottom:5px; }
.tm-manager[data-site] .tm-tv-board:fullscreen .tm-tv-table { font-size:9px; padding:3px 7px; }
.tm-manager[data-site] .tm-tv-board:fullscreen .tm-tv-live-chip { font-size:8px; padding:1px 6px; letter-spacing:.4px; }
.tm-manager[data-site] .tm-tv-board:fullscreen .tm-tv-now-side { gap:6px; padding:3px 0; }
.tm-manager[data-site] .tm-tv-board:fullscreen .tm-tv-name { font-size:clamp(11px, .82vw, 14px); font-weight:800; line-height:1.08; }
.tm-manager[data-site] .tm-tv-board:fullscreen .tm-tv-score {
    min-width:30px;
    padding:1px 6px;
    font-size:clamp(11px, .9vw, 15px);
    border-radius:6px;
}
.tm-manager[data-site] .tm-tv-board:fullscreen .tm-tv-now-foot { margin-top:4px; font-size:9px; }
.tm-manager[data-site] .tm-tv-board:fullscreen .tm-tv-next-list {
    display:grid;
    grid-template-columns:1fr;
    gap:6px;
}
.tm-manager[data-site] .tm-tv-board:fullscreen .tm-tv-next-row {
    width:100%;
    border-radius:18px;
    padding:14px 16px 13px;
    gap:8px;
}
.tm-manager[data-site] .tm-tv-board:fullscreen .tm-tv-next-num { font-size:14px; }
.tm-manager[data-site] .tm-tv-board:fullscreen .tm-tv-next-matchline { gap:18px; font-size:clamp(17px, 1.1vw, 24px); font-weight:800; }
.tm-manager[data-site] .tm-tv-board:fullscreen .tm-tv-next-p {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    line-height:1.05;
    text-align:center;
}
.tm-manager[data-site] .tm-tv-board:fullscreen .tm-tv-vs { color:var(--tm-accent); font-size:12px; line-height:1; letter-spacing:.08em; transform:translateY(-1px); }
.tm-manager[data-site] .tm-tv-board:fullscreen .tm-tv-next-meta { gap:6px; }
.tm-manager[data-site] .tm-tv-board:fullscreen .tm-tv-next-table { font-size:12px; padding:4px 9px; }
.tm-manager[data-site] .tm-tv-board:fullscreen .tm-tv-when { font-size:12px; }
.tm-manager[data-site] .tm-tv-board:fullscreen .tm-tv-next-stage { text-align:center; }
.tm-manager[data-site] .tm-tv-board:fullscreen .tm-btn.tm-btn-ghost { font-size:11px; min-height:28px; padding:0 8px; }
.tm-manager[data-site] .tm-tv-board:fullscreen .tm-btn.tm-btn-ghost .material-symbols-outlined { font-size:16px; }

.tm-side-score.tm-side-ff { font-size:11px; font-weight:900; letter-spacing:.5px; }
/* A retirement keeps its score, so the marker sits beside the number rather than replacing it. */
.tm-side-ret { margin-left:4px; font-size:9px; font-weight:900; letter-spacing:.5px; opacity:.75; vertical-align:super; }
/* A group row nothing can separate, waiting on a drawn lot. */
.tm-standings-lot { margin-left:6px; font-size:10px; font-weight:800; letter-spacing:.4px; opacity:.8; }
.tm-tiebreak-panel { border-top:2px solid var(--tm-border); }
.tm-tiebreak-lots .tm-hint { font-size:12px; opacity:.75; line-height:1.45; }

/* Seeds: the number a draw sheet prints beside a seeded player. */
.tm-seed-tag { display:inline-block; min-width:16px; padding:0 4px; margin-right:5px; border-radius:6px; background:var(--tm-accent, #3bd47a); color:#0b1220; font-size:10px; font-weight:900; line-height:16px; text-align:center; vertical-align:middle; }
/* A seeded side on a match card: the tag and the identity share the card's first grid cell. */
.tm-side-who { display:inline-flex; align-items:center; gap:5px; min-width:0; }
.tm-side-who .tm-seed-tag { flex:0 0 auto; margin-right:0; }
.tm-side-who .tm-player-identity, .tm-side-who .tm-team-identity { flex:1 1 auto; min-width:0; }
.tm-seed-field { display:inline-flex; align-items:center; gap:4px; }
.tm-seed-field .material-symbols-outlined { font-size:16px; opacity:.7; }
.tm-seed-input { width:58px; padding:4px 6px; text-align:center; }
.tm-seed-tools .tm-inline-fields { flex-wrap:wrap; align-items:center; gap:8px; }

/* What officials and the players said about a match. */
.tm-match-marks { display:flex; flex-wrap:wrap; gap:6px; padding:4px 8px 6px; }
.tm-match-mark { display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:800; letter-spacing:.3px; opacity:.85; }
.tm-match-mark .material-symbols-outlined { font-size:14px; }
.tm-match-ref { opacity:.75; }
.tm-match-confirmed { color:var(--tm-accent, #3bd47a); }
.tm-match-confirmed-half { opacity:.6; }
.tm-match-disputed { color:#ffb347; }
.tm-my-results { margin-top:8px; }
.tm-my-result-row { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; padding:6px 0; border-top:1px solid var(--tm-border); font-size:13px; }

/* Swiss rounds: a round not yet paired is toned down. */
.tm-swiss-round-pending { opacity:.72; }

/* The prize fund. */
.tm-prize-panel .tm-panel-title { display:flex; align-items:center; gap:6px; }
.tm-prize-total { margin-left:auto; font-size:13px; opacity:.8; }
.tm-prize-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:6px 14px; margin-top:8px; }
.tm-prize-row { display:flex; justify-content:space-between; gap:8px; padding:4px 0; border-bottom:1px solid var(--tm-border); font-size:13px; }
.tm-prize-place { opacity:.75; }
.tm-prize-amount { font-weight:800; }
.tm-podium-prize { margin-top:4px; font-size:12px; font-weight:800; opacity:.85; }
.tm-prize-edit-row { align-items:center; gap:8px; }
.tm-tiebreak-ladder { list-style:none; margin:8px 0 0; padding:0; }
.tm-tiebreak-ladder li { display:flex; align-items:center; gap:8px; padding:6px 8px; border:1px solid var(--tm-border); border-radius:8px; margin-bottom:6px; }
.tm-tiebreak-ladder li .tm-tiebreak-rank { min-width:20px; font-weight:800; opacity:.7; }
.tm-tiebreak-ladder li .tm-tiebreak-name { flex:1 1 auto; }
.tm-side-score.tm-side-advance { background:linear-gradient(180deg, rgba(37,155,85,.28), rgba(37,155,85,.14)); border-color:rgba(37,155,85,.5); color:var(--tm-green); }
.tm-side-score.tm-side-advance .material-symbols-outlined { font-size:15px; font-weight:900; }
/* Shoot-Out: red-themed score boxes (override the blue/green base, live and winner states). */
.tm-side-score.tm-shootout { background:linear-gradient(180deg, rgba(191,61,61,.22), rgba(191,61,61,.12)); border-color:rgba(191,61,61,.4); color:var(--tm-text); }
.tm-side-score.tm-shootout.live { background:linear-gradient(180deg, rgba(191,61,61,.3), rgba(191,61,61,.16)); border-color:rgba(191,61,61,.5); color:var(--tm-red); }
.tm-manager .tm-side-score.tm-shootout.winner { border-color:rgba(191,61,61,.55) !important; background:linear-gradient(180deg, rgba(191,61,61,.32), rgba(191,61,61,.16)) !important; color:var(--tm-text) !important; }
.tm-side-score.tm-shootout.tm-side-advance { background:linear-gradient(180deg, rgba(191,61,61,.3), rgba(191,61,61,.16)); border-color:rgba(191,61,61,.5); color:var(--tm-red); }
.tm-minimal-score.tm-shootout { color:var(--tm-red); }
.tm-minimal-score.tm-shootout.live { color:var(--tm-red); }
.tm-match-status-line { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:4px; color:var(--tm-muted); font-size:11px; font-weight:600; }
.tm-match-tools { display:inline-flex; align-items:center; gap:4px; margin-left:2px; }
.tm-match-icon-btn { width:22px; height:22px; border-radius:50%; border:1px solid var(--tm-border); background:rgba(255,255,255,.04); color:var(--tm-muted); display:inline-flex; align-items:center; justify-content:center; padding:0; cursor:pointer; text-decoration:none; vertical-align:middle; }
.tm-match-icon-btn .material-symbols-outlined { font-size:15px; line-height:1; }
.tm-match-icon-btn:hover { background:rgba(47,125,211,.14); color:var(--tm-blue); }
.tm-match-video-btn { border-color:rgba(191,61,61,.38); background:rgba(191,61,61,.14); color:var(--tm-red); }
.tm-match-video-btn:hover { background:rgba(191,61,61,.22); color:var(--tm-red); }
.tm-referee-active { border-color:rgba(255,140,0,.42); background:rgba(255,140,0,.14); color:var(--tm-accent); animation:tmRefereePulse 1.2s ease-in-out infinite; cursor:default; pointer-events:none; }
.tm-referee-clear-btn { border-color:rgba(191,61,61,.38); background:rgba(191,61,61,.14); color:var(--tm-red); }
.tm-referee-clear-btn:hover { background:rgba(191,61,61,.22); color:var(--tm-red); }
.tm-scheme3-seed-panel { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; width:100%; margin:14px 0 16px; padding:9px 10px; border:1px solid var(--tm-border); border-radius:8px; background:var(--tm-surface); }

/* ---- scheme 5: the knockout field, and swapping a qualifier who is not continuing --------------
   A list rather than a grid: it is read top to bottom as "who is actually playing", and every row
   answers the same three things in the same three places - which seed, which group position won it,
   and who is in it now. */
/* The Play Off is a stage of its own, not another panel in the same run: in scheme 5 it sits between
   the group tables and the Last N, and without a boundary its seeding panel reads as if it belonged
   to the Last N below it. Everything inside reuses the seeding/seat/bracket panels unchanged. */
.tm-playoff-stage { width:100%; margin:18px 0; padding:2px 0 0; border-top:2px solid var(--tm-border); }
.tm-playoff-stage > .tm-toolbar { margin-top:10px; }

.tm-scheme5-seats-panel { width:100%; margin:14px 0 16px; padding:10px 12px; border:1px solid var(--tm-border); border-radius:8px; background:var(--tm-surface); }
.tm-scheme5-seats { display:flex; flex-direction:column; gap:4px; margin-top:9px; }
/* 120px so "Best of the Rest" - the longest slot label, and the one on every wildcard seat - fits
   in its uppercase 11px without an ellipsis; at 92px it read "BEST OF THE...". Translations that
   run longer still ellipsise, and carry the full label in the title attribute. */
/* 136px holds "BEST OF THE REST" - the longest slot label - in full at 11px uppercase; at 120 it
   ellipsised. The title attribute still carries it for translations that run longer. */
.tm-scheme5-seat { display:grid; grid-template-columns:26px 136px minmax(0, 1fr) auto; align-items:center; gap:9px; padding:6px 8px; border:1px solid transparent; border-radius:7px; background:var(--tm-surface-2); }
.tm-scheme5-seat-no { font-size:12px; font-weight:900; color:var(--tm-muted); font-variant-numeric:tabular-nums; text-align:center; }
.tm-scheme5-seat-slot { font-size:11px; font-weight:800; color:var(--tm-muted); text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tm-scheme5-seat-name { min-width:0; display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:14px; font-weight:800; color:var(--tm-text); }
.tm-scheme5-seat-pending { color:var(--tm-muted); font-weight:700; font-style:italic; }
.tm-scheme5-seat-action { justify-self:end; }
/* An open seat is a job still to do, so it is the one row that shouts. */
.tm-scheme5-seat-open { border-color:rgba(255,140,0,.45); background:rgba(255,140,0,.10); }
.tm-scheme5-seat-sub, .tm-scheme5-seat-vacant { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:800; }
.tm-scheme5-seat-sub { color:var(--tm-green); }
.tm-scheme5-seat-vacant { color:var(--tm-accent); }
.tm-scheme5-seat-sub .material-symbols-outlined,
.tm-scheme5-seat-vacant .material-symbols-outlined,
.tm-scheme5-seat-locked .material-symbols-outlined { font-size:15px; }
.tm-scheme5-seat-locked { display:inline-flex; align-items:center; color:var(--tm-muted); opacity:.75; }
.tm-scheme5-pick-head { margin:14px 0 6px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--tm-muted); }
@media (max-width: 560px) {
    .tm-scheme5-seat { grid-template-columns:22px minmax(0, 1fr) auto; row-gap:2px; }
    /* The group position moves under the name instead of squeezing it off the row. */
    .tm-scheme5-seat-slot { grid-column:2; grid-row:2; font-size:10px; }
    .tm-scheme5-seat-name { grid-column:2; grid-row:1; font-size:13px; }
    .tm-scheme5-seat-no { grid-row:1 / span 2; }
    .tm-scheme5-seat-action { grid-column:3; grid-row:1 / span 2; }
}
.tm-scheme3-seed-panel.tm-scheme3-seed-disabled { opacity:.62; }
.tm-scheme3-seed-title { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:900; color:var(--tm-text); }
.tm-scheme3-seed-note { color:var(--tm-muted); font-size:11px; margin-top:3px; }
.tm-scheme3-seed-actions { display:flex; gap:6px; flex-wrap:wrap; }
.tm-scheme3-inline-publish { display:flex; align-items:center; gap:6px; flex-wrap:wrap; width:100%; margin-top:6px; }
.tm-scheme3-inline-publish .tm-select { min-width: 170px; flex:1 1 170px; }
.tm-scheme3-inline-publish .tm-btn { white-space:nowrap; }
.tm-minimal-player.tm-scheme3-inline-slot { white-space:normal; overflow:visible; text-overflow:clip; flex-direction:column; align-items:stretch; gap:6px; }
@keyframes tmLiveMatchPulse { 0%,100%{ box-shadow:0 0 0 1px rgba(37,155,85,.12), 0 0 10px rgba(37,155,85,.10); } 50%{ box-shadow:0 0 0 1px rgba(37,155,85,.28), 0 0 22px rgba(37,155,85,.24); } }
@keyframes tmRefereePulse { 0%,100%{ box-shadow:0 0 0 1px rgba(255,140,0,.12), 0 0 0 rgba(255,140,0,0); } 50%{ box-shadow:0 0 0 1px rgba(255,140,0,.28), 0 0 16px rgba(255,140,0,.22); } }
.tm-standings-panel { overflow:hidden; }
.tm-standings-scroll { overflow-x:auto; margin:0 -4px; padding:0 4px; }
/* Ranking / standings pinch-zoom (mobile) --------------------------------------------------------
   Same idea as the bracket's --tm-bracket-scale: every size the table's WIDTH is built from - the
   min-widths, the cell padding, the text and the avatars - is a calc() off --tm-standings-scale, so
   pinching re-lays the table out rather than blurring a transform over it, and the wrapper's own
   scroll geometry stays honest. The variable is set on .tm-manager (see tmApplyStandingsZoom) and
   inherits down, so it survives the live-poll re-render; unset it is 1 and every calc below
   collapses to the value it always had. Desktop never sets it. */
.tm-standings-table { width:100%; min-width:calc(760px * var(--tm-standings-scale, 1)); border-collapse:separate; border-spacing:0; }
.tm-standings-table th { padding:calc(8px * var(--tm-standings-scale, 1)) calc(9px * var(--tm-standings-scale, 1)); color:var(--tm-muted); font-size:calc(10px * var(--tm-standings-scale, 1)); text-transform:uppercase; text-align:right; border-bottom:1px solid var(--tm-border); white-space:nowrap; }
.tm-standings-table th:nth-child(2), .tm-standings-table td:nth-child(2) { text-align:left; }
.tm-standings-table td { padding:calc(9px * var(--tm-standings-scale, 1)); border-bottom:1px solid var(--tm-border); text-align:right; font-size:calc(12px * var(--tm-standings-scale, 1)); color:var(--tm-text); vertical-align:middle; }
.tm-standings-scroll .tm-player-identity { gap:calc(8px * var(--tm-standings-scale, 1)); }
.tm-standings-scroll .tm-verified-badge { font-size:calc(17px * var(--tm-standings-scale, 1)); }
.tm-standings-scroll .tm-player-visual { width:calc(26px * var(--tm-standings-scale, 1)); height:calc(26px * var(--tm-standings-scale, 1)); flex:0 0 calc(26px * var(--tm-standings-scale, 1)); }
.tm-standings-scroll .tm-player-avatar { width:calc(26px * var(--tm-standings-scale, 1)); height:calc(26px * var(--tm-standings-scale, 1)); }
.tm-standings-scroll .tm-player-avatar .material-symbols-outlined { font-size:calc(18px * var(--tm-standings-scale, 1)); }
.tm-standings-scroll .tm-player-flag { left:calc(-3px * var(--tm-standings-scale, 1)); top:calc(-3px * var(--tm-standings-scale, 1)); width:calc(14px * var(--tm-standings-scale, 1)); height:calc(10px * var(--tm-standings-scale, 1)); }
.tm-standings-scroll .tm-player-flag-code { left:calc(-5px * var(--tm-standings-scale, 1)); top:calc(-5px * var(--tm-standings-scale, 1)); min-width:calc(18px * var(--tm-standings-scale, 1)); height:calc(12px * var(--tm-standings-scale, 1)); font-size:calc(7px * var(--tm-standings-scale, 1)); line-height:calc(12px * var(--tm-standings-scale, 1)); }
.tm-standings-table tbody tr:last-child td { border-bottom:0; }
/* Tournament and League ranking tables: highlight the complete row under the pointer. Explicit
   solid theme colours keep the hover readable and prevent striped/current-event cell backgrounds
   from breaking the row into differently coloured pieces. */
.tm-ranking-table tbody td, .tm-league-ranking-table tbody td { transition:background-color .14s ease; }
.tm-manager[data-site="dark"] .tm-ranking-table tbody tr:hover > td,
.tm-manager[data-site="dark"] .tm-league-ranking-table tbody tr:hover > td { background:#30261a !important; }
.tm-manager[data-site="light"] .tm-ranking-table tbody tr:hover > td,
.tm-manager[data-site="light"] .tm-league-ranking-table tbody tr:hover > td { background:#fff0dc !important; }
.tm-standings-rank { font-weight:900; color:var(--tm-muted); }
/* "=3" - a position two or more players share because nothing was played to separate them
   (both beaten semi-finalists are 3rd unless a 3rd place match is played). The "=" is part of
   the number, so it must not be dimmed away from it. */
.tm-standings-rank-shared { color:var(--tm-text); letter-spacing:-0.5px; cursor:help; }
.tm-standings-table.tm-standings-breaks { min-width:calc(860px * var(--tm-standings-scale, 1)); }
.tm-standings-break { font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tm-standings-break-empty { color:var(--tm-muted); font-weight:600; }
.tm-standings-name { min-width:calc(190px * var(--tm-standings-scale, 1)); }
.tm-standings-name .tm-player-identity.tm-player-marked { background:rgba(255,194,71,.26); border-radius:6px; box-shadow:inset 0 0 0 1px rgba(255,194,71,.12); padding:1px 5px; margin:-1px -5px; }
.tm-standings-name .tm-player-identity.tm-player-marked .tm-player-link,
.tm-standings-name .tm-player-identity.tm-player-marked .tm-player-name-inline { color:var(--tm-text); }
.tm-manager[data-site="light"] .tm-standings-name .tm-player-identity.tm-player-marked { background:rgba(255,230,120,.62); box-shadow:inset 0 0 0 1px rgba(194,134,0,.16); }
.tm-manager[data-site="light"] .tm-standings-name .tm-player-identity.tm-player-marked .tm-player-link,
.tm-manager[data-site="light"] .tm-standings-name .tm-player-identity.tm-player-marked .tm-player-name-inline { color:#9f6a00; }
.tm-standings-form { display:flex; justify-content:flex-end; gap:calc(3px * var(--tm-standings-scale, 1)); }
.tm-form-chip { display:inline-flex; align-items:center; justify-content:center; width:calc(18px * var(--tm-standings-scale, 1)); height:calc(18px * var(--tm-standings-scale, 1)); border-radius:50%; font-size:calc(9px * var(--tm-standings-scale, 1)); font-weight:900; }
.tm-form-chip.win { background:rgba(37,155,85,.18); color:var(--tm-green); }
.tm-form-chip.loss { background:rgba(191,61,61,.18); color:var(--tm-red); }
.tm-form-chip.empty { background:rgba(150,150,150,.14); color:var(--tm-muted); }
.tm-form-chip.forfeit { background:rgba(191,61,61,.28); color:var(--tm-red); border:1px dashed rgba(191,61,61,.6); }

/* Scheduled matches */
.tm-sched-list { display:block; }
.tm-sched-stage { margin:0 0 28px; }
.tm-sched-stage:last-child { margin-bottom:0; }
.tm-sched-stage-title { display:flex; align-items:center; gap:10px; min-height:42px; margin:0 0 10px; padding:8px 13px; border:1px solid var(--tm-border); border-left:4px solid var(--tm-accent); border-radius:8px; background:var(--tm-surface-2); color:var(--tm-text); font-size:17px; line-height:1.15; font-weight:900; letter-spacing:.65px; text-transform:uppercase; }
/* The stage name shrinks; the Race To / Best Of chip is pushed to the far right of the bar and
   never shrinks, so a long stage name ellipsises instead of squeezing the value out of view. */
.tm-sched-stage-title-text { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tm-sched-stage-title .tm-round-race { flex:0 0 auto; margin-left:auto; min-height:24px; padding:0 10px; font-size:12px; letter-spacing:.4px; }
.tm-manager[data-site="dark"] .tm-sched-stage-title { background:#26221d; border-color:#4a4034; border-left-color:var(--tm-accent); color:#fff; }
.tm-manager[data-site="light"] .tm-sched-stage-title { background:#fff4e5; border-color:rgba(176,96,0,.22); border-left-color:var(--tm-accent); color:#202733; }
.tm-sched-row { display:grid; grid-template-columns:40px 1fr minmax(300px,350px) 120px 48px; gap:10px; align-items:center; background:var(--tm-surface); border:1px solid var(--tm-border); border-radius:8px; padding:10px; margin-bottom:6px; }
.tm-sched-stage > .tm-sched-row:last-child { margin-bottom:0; }
.tm-sched-row.live { border-color:#2e9b5b; background:#153d29 !important; box-shadow:inset 4px 0 0 #57d687; animation:none; }
.tm-sched-row.finished { background:#3a4350 !important; border-color:#738195; box-shadow:inset 4px 0 0 #b1bcc9; animation:none; }
.tm-sched-row .tm-input, .tm-sched-row .tm-select { min-height:32px; padding:4px 8px; font-size:13px; }
.tm-sched-num { font-weight:800; color:var(--tm-muted); text-align:center; display:flex; flex-direction:column; align-items:center; gap:3px; }
.tm-sched-video-btn { display:inline-flex; line-height:0; opacity:.9; text-decoration:none; }
.tm-sched-video-btn:hover { opacity:1; }
.tm-sched-youtube-icon { width:auto; height:13px; display:block; }
.tm-sched-players { display:flex; align-items:center; gap:6px; flex-wrap:nowrap; min-width:0; overflow:hidden; font-weight:700; color:var(--tm-text); font-size:13px; }
.tm-sched-players .tm-player-identity { width:auto; min-width:0; flex:0 1 auto; }
.tm-sched-players .tm-side-score { margin-left:0; flex:0 0 30px; width:30px; min-height:22px; padding:0 4px; font-size:11px; }
/* Table dropdown of a manually-unassigned (held) match: tint it so the "No table — Unassigned
   manually" state stands out from matches that simply have no table yet. */
.tm-sched-actions .tm-select.tm-select-held { color:#d97700; border-color:rgba(217,119,0,.55); background:rgba(217,119,0,.10); font-weight:700; }
.tm-manager[data-site="light"] .tm-sched-actions .tm-select.tm-select-held { color:#9f5800; border-color:rgba(159,88,0,.5); background:rgba(217,119,0,.12); }
.tm-sched-players .tm-player-link,
.tm-sched-players .tm-player-name-inline { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tm-sched-players .tm-player-identity.tm-player-marked { background:rgba(255,194,71,.26); border-radius:6px; box-shadow:inset 0 0 0 1px rgba(255,194,71,.12); padding:1px 4px; margin:-1px -4px; }
.tm-sched-players .tm-player-identity.tm-player-marked .tm-player-link,
.tm-sched-players .tm-player-identity.tm-player-marked .tm-player-name-inline { color:var(--tm-text); }
.tm-manager[data-site="light"] .tm-sched-players .tm-player-identity.tm-player-marked { background:rgba(255,230,120,.62); border-color:rgba(194,134,0,.38); box-shadow:inset 0 0 0 1px rgba(194,134,0,.16); }
.tm-manager[data-site="light"] .tm-sched-players .tm-player-identity.tm-player-marked .tm-player-link,
.tm-manager[data-site="light"] .tm-sched-players .tm-player-identity.tm-player-marked .tm-player-name-inline { color:#9f6a00; }
.tm-sched-vs { color:var(--tm-muted); margin:0; }
.tm-sched-unscheduled { opacity:.55; }
.tm-sched-unscheduled.tm-sched-time-only { opacity:1; }
.tm-sched-time-only .tm-sched-time-cell .tm-input { border-color:rgba(87,164,255,.48); }
.tm-manager[data-site="light"] .tm-sched-time-only .tm-sched-time-cell .tm-input { border-color:rgba(42,112,192,.48); }
.tm-sched-time-cell { display:flex; align-items:center; flex-wrap:nowrap; gap:6px; min-width:0; }
.tm-sched-time-cell .tm-match-icon-btn { width:34px; height:34px; border-radius:6px; flex:0 0 auto; border-color:transparent; background:transparent; color:var(--tm-muted); }
.tm-sched-time-cell .tm-match-icon-btn .material-symbols-outlined { font-size:18px; }
.tm-sched-time-cell .tm-match-icon-btn:hover { background:rgba(255,255,255,0.02); border-color:var(--tm-border); color:var(--tm-text); }
.tm-sched-time-cell .tm-sched-notify-btn:hover { color:var(--tm-green); border-color:var(--tm-green); }
.tm-sched-time-cell .tm-sched-cancel-btn:hover { background:rgba(191,61,61,.14); border-color:rgba(191,61,61,.4); color:var(--tm-red); }
/* The time column is wide enough (below) to keep all icons + the field on one row on desktop;
   the field grows to fill but never shrinks below a readable width. */
.tm-sched-time-cell .tm-input { flex:1 1 auto; min-width:155px; width:auto; }
.tm-sched-actions { grid-column:4 / -1; display:flex; align-items:center; gap:8px; min-width:0; }
.tm-sched-actions .tm-select { flex:1 1 auto; min-width:0; }
.tm-sched-row .tm-btn[data-tm-act="save-sched"] { padding:6px; width:40px; min-width:40px; display:inline-flex; align-items:center; justify-content:center; }
.tm-sched-clock { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:6px; cursor:pointer; color:var(--tm-muted); border:1px solid transparent; background:transparent; padding:4px; flex:0 0 auto; }
.tm-sched-clock[aria-disabled="1"] { opacity:.45; cursor:default; pointer-events:none; }
.tm-sched-clock:hover { background:rgba(255,255,255,0.02); border-color:var(--tm-border); color:var(--tm-text); }
.tm-sched-public-row { grid-template-columns:40px minmax(0, 1fr) 160px 110px; }

/* Inline add-player status (reserves height so layout doesn't jump) */
.tm-inline-status { min-height:22px; margin-top:8px; font-size:12px; color:var(--tm-muted); display:flex; align-items:center; gap:7px; }
.tm-inline-status.ok    { color:var(--tm-green); }
.tm-inline-status.error { color:var(--tm-red); }

/* Manual draw sortable */
.tm-sort-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:8px; margin-top:10px; }
.tm-sort-slot { display:flex; align-items:center; gap:8px; background:var(--tm-match-bg); border:1px solid var(--tm-border); border-left:3px solid var(--tm-accent); border-radius:7px; padding:8px 10px; cursor:grab; }
.tm-sort-slot.tm-bye  { border-left-color:var(--tm-soft); opacity:.7; cursor:default; }
.tm-sort-slot.ui-sortable-helper { box-shadow:0 12px 24px rgba(0,0,0,.25); }
.tm-sort-slot.ui-sortable-placeholder { visibility:visible !important; background:rgba(255,140,0,.08); border:1px dashed var(--tm-accent); }
.tm-sort-list.tm-touch-sorting { touch-action:none; }
.tm-sort-slot.tm-touch-dragging { opacity:.72; transform:scale(.985); box-shadow:0 10px 24px rgba(0,0,0,.25); }
.tm-sort-handle { color:var(--tm-muted); font-size:18px; touch-action:none; user-select:none; }
/* The grip: the position number and the handle as one thumb-sized target a finger can lift the
   row by (touch-action none here only, so the rest of the row still scrolls the page). */
.tm-sort-grip { display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; margin:-6px 0; padding:6px 2px; border-radius:8px; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; cursor:grab; }
.tm-sort-slot.tm-touch-dragging .tm-sort-grip, .tm-sort-grip:active { background:rgba(255,140,0,.14); }
/* Tap-to-swap: the picked row waits for its partner */
.tm-sort-slot.tm-sort-picked { border-color:var(--tm-accent); box-shadow:0 0 0 2px rgba(255,140,0,.45); background:rgba(255,140,0,.12); }
.tm-sort-hint { margin:8px 0 2px; font-size:12px; }
.tm-sort-hint.tm-sort-hint-on { color:var(--tm-accent); font-weight:800; }
.tm-sheet-search { width:100%; margin:12px 0 0; }
/* One place up or down, one-handed */
.tm-sort-arrows { display:inline-flex; flex-direction:column; gap:2px; flex:0 0 auto; margin:-4px -4px -4px 0; }
.tm-sort-arrow { width:26px; height:18px; padding:0; border:1px solid var(--tm-border); border-radius:5px; background:var(--tm-input-bg); color:var(--tm-muted); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.tm-sort-arrow .material-symbols-outlined { font-size:16px; }
.tm-sort-arrow:hover { color:var(--tm-text); border-color:var(--tm-accent); }
/* The tie at the wildcard cut, on the seat row */
.tm-scheme5-seat-tie { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:800; color:#f0b429; }
.tm-scheme5-seat-tie.is-settled { color:var(--tm-muted); }
.tm-scheme5-seat-tie .material-symbols-outlined { font-size:15px; }
.tm-sheet-option.is-in { border-color:rgba(52,211,153,.55); }
/* The bracket's tap-to-swap: a small swap button in the scores cell of a first-round seat */
.tm-seat-swap-btn { width:22px; height:22px; margin-left:4px; padding:0; border:1px solid var(--tm-border); border-radius:6px; background:var(--tm-input-bg); color:var(--tm-muted); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.tm-seat-swap-btn .material-symbols-outlined { font-size:15px; }
.tm-seat-swap-btn:hover { color:var(--tm-text); border-color:var(--tm-accent); }
.tm-bracket-side.tm-seat-picked, .tm-minimal-side.tm-seat-picked { box-shadow:inset 0 0 0 2px var(--tm-accent); background:rgba(255,140,0,.12); border-radius:8px; }
.tm-seat-picked .tm-seat-swap-btn { color:var(--tm-accent); border-color:var(--tm-accent); }
.tm-minimal-side-main .tm-seat-swap-btn { margin:0 4px; }
/* Reserves */
.tm-badge-reserve { background:rgba(47,125,211,.18); color:var(--tm-blue); }
.tm-reserve-add { margin-top:8px; }
.tm-reserve-add [data-tm-reserve-results] { margin-top:8px; }
.tm-sort-pos { display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:22px; border-radius:5px; background:var(--tm-input-bg); color:var(--tm-muted); font-weight:800; font-size:11px; padding:0 6px; }
.tm-sort-section { grid-column:1 / -1; list-style:none; margin:6px 0 2px; padding:4px 2px; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--tm-accent); border-bottom:1px solid var(--tm-border); }
.tm-sort-section:first-child { margin-top:0; }
/* Manual draw order is intentionally a match grid: the two sortable slots on each
   row are the exact pair that will be published for the match number at left. */
.tm-sort-list.tm-manual-match-list { grid-template-columns:52px minmax(0, 1fr) minmax(0, 1fr); align-items:stretch; }
.tm-manual-match-list > .tm-manual-match-no { grid-column:1; display:flex; align-items:center; justify-content:center; min-width:0; padding:6px 2px; color:var(--tm-accent); font-size:12px; font-weight:900; white-space:nowrap; list-style:none; }
.tm-manual-match-list > .tm-sort-slot { position:relative; min-width:0; overflow:visible; }
.tm-manual-match-list > .tm-sort-slot.tm-manual-row-alt,
.tm-manual-match-list > .tm-manual-opponent-placeholder.tm-manual-row-alt { background:rgba(255,140,0,.16); }
.tm-manual-match-list > .tm-manual-match-no.tm-manual-row-alt { border-radius:7px; background:rgba(255,140,0,.16); }
.tm-manual-match-list > .tm-sort-slot.tm-manual-slot-picker-open { z-index:2147483646 !important; }
.tm-manual-match-list > .tm-manual-pair-first { grid-column:2; }
.tm-manual-match-list > .tm-manual-pair-second,
.tm-manual-match-list > .tm-manual-opponent-placeholder { grid-column:3; }
.tm-manual-match-list > .tm-manual-direct-slot { grid-column:2; }
.tm-manual-match-list > .tm-manual-opponent-placeholder { display:flex; align-items:center; min-width:0; padding:8px 10px; border:1px dashed var(--tm-border); border-radius:7px; color:var(--tm-muted); font-size:12px; font-style:italic; list-style:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tm-manual-slot-replace { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; flex:0 0 28px; margin:-3px -4px -3px 0; padding:0; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--tm-muted); cursor:pointer; }
.tm-manual-slot-replace:hover { border-color:var(--tm-border); background:var(--tm-input-bg); color:var(--tm-accent); }
.tm-manual-slot-replace .material-symbols-outlined { font-size:18px; }
.tm-manual-slot-picker { position:absolute; z-index:2147483647 !important; isolation:isolate; top:calc(100% + 7px); left:0; width:min(340px, calc(100vw - 24px)); margin:0; padding:12px; box-sizing:border-box; border:1px solid rgba(17,24,39,.26); border-radius:8px; background:#fff; color:#111827; box-shadow:0 18px 38px rgba(0,0,0,.42); }
.tm-manual-slot-picker.tm-manual-slot-picker-align-right { right:0; left:auto; }
.tm-manual-slot-picker-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; font-size:13px; }
.tm-manual-slot-picker-head > span { display:inline-flex; align-items:center; gap:6px; min-width:0; }
.tm-manual-slot-picker-head .material-symbols-outlined { color:var(--tm-accent); font-size:19px; }
.tm-manual-slot-picker-head .tm-btn { min-width:34px; padding:5px; }
.tm-manual-slot-picker .tm-input { background:#fff; color:#111827; border-color:rgba(17,24,39,.28); }
.tm-manual-slot-picker .tm-panel-note { color:#4b5563; }
.tm-manual-slot-options { max-height:250px; margin-top:7px; overflow-y:auto; border:1px solid rgba(17,24,39,.22); border-radius:7px; background:#fff; }
.tm-manual-slot-option { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 10px; border:0; border-bottom:1px solid rgba(17,24,39,.12); background:#fff; color:#111827; text-align:left; cursor:pointer; }
.tm-manual-slot-option:last-child { border-bottom:0; }
.tm-manual-slot-option:hover { background:#fff7ed; color:#9a4d00; }
.tm-manual-slot-option > span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tm-manual-slot-option .tm-panel-note { flex:0 0 auto; }

/* Scheme 3 Last N seeding: the qualified players stay fixed on the left while
   the manager assigns them into the editable Last N seed slots on the right. */
.tm-scheme3-seed-assignment { display:grid; grid-template-columns:minmax(220px, .9fr) minmax(0, 1.35fr); gap:12px; margin-top:10px; }
.tm-scheme3-qualified-panel,.tm-scheme3-seed-slots-panel { min-width:0; border:1px solid var(--tm-border); border-radius:8px; background:var(--tm-match-bg); padding:10px; }
.tm-scheme3-seed-slots-panel { position:relative; z-index:998; overflow:visible; }
.tm-scheme3-seed-column-title { color:var(--tm-text); font-size:13px; font-weight:900; }
.tm-scheme3-seed-column-note { margin:3px 0 9px; color:var(--tm-muted); font-size:11px; line-height:1.35; }
.tm-scheme3-qualified-list { display:flex; flex-direction:column; gap:6px; }
.tm-scheme3-qualified-player { display:flex; align-items:center; gap:7px; min-width:0; min-height:56px; box-sizing:border-box; padding:8px 9px; border:1px solid var(--tm-border); border-left:3px solid var(--tm-accent); border-radius:7px; background:var(--tm-input-bg); }
.tm-scheme3-qualified-player > span:last-child { min-width:0; }
.tm-scheme3-qualified-player strong,.tm-scheme3-qualified-player small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tm-scheme3-qualified-player strong { color:var(--tm-text); font-size:12px; }
.tm-scheme3-qualified-player small { margin-top:2px; color:var(--tm-muted); font-size:10px; }
.tm-scheme3-seed-slots { display:flex; flex-direction:column; gap:6px; }
.tm-scheme3-seed-slot { display:grid; grid-template-columns:28px minmax(0, 1fr) minmax(160px, 1.25fr); align-items:center; gap:8px; min-width:0; min-height:56px; box-sizing:border-box; padding:8px 9px; }
.tm-scheme3-qualified-list > .tm-scheme3-qualified-player:nth-child(even),
.tm-scheme3-seed-slots > .tm-scheme3-seed-slot:nth-child(even) { background:rgba(255,140,0,.12); }
.tm-manager[data-site="light"] .tm-scheme3-seed-slots > .tm-scheme3-seed-slot:nth-child(even) { background:rgba(255,140,0,.14) !important; }
.tm-scheme3-seed-slot strong { min-width:0; color:var(--tm-text); font-size:12px; }
.tm-scheme3-assign-search-wrap { position:relative; min-width:0; }
.tm-scheme3-assign-search { width:100%; min-width:0; }
.tm-scheme3-seed-slot:focus-within { position:relative; z-index:999 !important; isolation:isolate; }
.tm-scheme3-assign-results { position:absolute; z-index:1000 !important; top:calc(100% + 4px); right:0; left:0; max-height:210px; overflow-y:auto; border:1px solid rgba(17,24,39,.28); border-radius:7px; background:#fff !important; color:#111827 !important; box-shadow:0 16px 34px rgba(0,0,0,.42); }
.tm-scheme3-assign-option { display:block; width:100%; padding:8px 9px; border:0; border-bottom:1px solid rgba(17,24,39,.13); background:#fff !important; color:#111827 !important; text-align:left; cursor:pointer; }
.tm-scheme3-assign-option:last-child { border-bottom:0; }
.tm-scheme3-assign-option:hover { background:rgba(255,140,0,.12); }
.tm-scheme3-assign-option:disabled { opacity:.42; cursor:not-allowed; }
.tm-scheme3-assign-option span,.tm-scheme3-assign-option small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tm-scheme3-assign-option span { font-size:12px; font-weight:800; }
.tm-scheme3-assign-option small,.tm-scheme3-assign-empty { margin:2px 0; color:#4b5563; font-size:10px; }
.tm-scheme3-assign-empty { padding:8px 9px; }

/* Register dialog (inside popupWindow) */
.tm-register-form { padding:8px 4px; color:#f4f6fa; }
.tm-register-form h3 { margin:0 0 10px; font-size:18px; color:#ffffff; }
.tm-register-form p  { margin:6px 0; font-size:13px; color:#e6eaf2; }
.tm-register-form p strong { color:#ffffff; }
.tm-register-form .tm-register-fine { font-size:12px; color:#b8c0cc; }
.tm-register-form .tm-actions { justify-content:flex-end; margin-top:14px; }

.tm-loading { display:inline-flex; align-items:center; gap:7px; color:var(--tm-muted); }
.tm-loading::before { content:''; width:14px; height:14px; border-radius:50%; border:2px solid var(--tm-border); border-top-color:var(--tm-accent); animation:tmSpin .8s linear infinite; }
@keyframes tmSpin { to { transform:rotate(360deg); } }

/* Shuffle Draw animation overlay */
.tm-shuffle-overlay { position:fixed; inset:0; z-index:60; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; background:rgba(7, 12, 20, .82); backdrop-filter:blur(4px); opacity:0; animation:tmShuffleFade .2s ease forwards; }
.tm-shuffle-overlay.tm-shuffle-out { animation:tmShuffleFadeOut .28s ease forwards; }
.tm-shuffle-stage { position:relative; width:240px; height:150px; }
.tm-shuffle-card { position:absolute; top:50%; left:50%; width:58px; height:84px; margin:-42px 0 0 -29px; border-radius:11px; background:linear-gradient(150deg, var(--tm-green, #259b55), #1f7d44); border:1px solid rgba(255,255,255,.28); box-shadow:0 10px 26px rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; color:#fff; font-size:26px; will-change:transform; }
.tm-shuffle-card .material-symbols-outlined { font-size:26px; }
.tm-shuffle-card.c0 { animation:tmShuffleA 1.05s cubic-bezier(.5,.05,.3,1) infinite; }
.tm-shuffle-card.c1 { animation:tmShuffleB 1.05s cubic-bezier(.5,.05,.3,1) infinite; background:linear-gradient(150deg, #3a6df0, #2a4fd0); }
.tm-shuffle-card.c2 { animation:tmShuffleC 1.05s cubic-bezier(.5,.05,.3,1) infinite; background:linear-gradient(150deg, #e0a32e, #c4801c); }
.tm-shuffle-card.c3 { animation:tmShuffleD 1.05s cubic-bezier(.5,.05,.3,1) infinite; background:linear-gradient(150deg, #bf3d3d, #9e2a2a); }
.tm-shuffle-label { color:#fff; font-weight:800; font-size:17px; letter-spacing:.4px; display:flex; align-items:center; gap:10px; }
.tm-shuffle-label .material-symbols-outlined { animation:tmSpin 1s linear infinite; }
@keyframes tmShuffleFade { to { opacity:1; } }
@keyframes tmShuffleFadeOut { to { opacity:0; } }
@keyframes tmShuffleA { 0%,100%{ transform:translate(-78px,0) rotate(-10deg); z-index:4; } 50%{ transform:translate(78px,-8px) rotate(10deg); z-index:1; } }
@keyframes tmShuffleB { 0%,100%{ transform:translate(-26px,6px) rotate(6deg); z-index:3; } 50%{ transform:translate(26px,2px) rotate(-8deg); z-index:2; } }
@keyframes tmShuffleC { 0%,100%{ transform:translate(26px,-6px) rotate(-6deg); z-index:2; } 50%{ transform:translate(-26px,4px) rotate(8deg); z-index:3; } }
@keyframes tmShuffleD { 0%,100%{ transform:translate(78px,0) rotate(10deg); z-index:1; } 50%{ transform:translate(-78px,-8px) rotate(-10deg); z-index:4; } }
@media(prefers-reduced-motion: reduce) {
    .tm-shuffle-card { animation:none !important; }
    .tm-shuffle-label .material-symbols-outlined { animation:none !important; }
}

/* The shuffle show (tmShowShuffleOverlay): player cards whirl round a lottery drum, then are dealt
 * onto their seats in the real draw. Always dark, whatever the TM theme - it is a stage, not a
 * panel - so every color here is its own, not a --tm-* variable that flips with the theme. The
 * backdrop is a separate layer so it can fade away while the cards land and the draw shows through. */
.tm-shuffle-overlay.tm-shuffle-show { display:block; z-index:9990; background:transparent; backdrop-filter:none; overflow:hidden; }
.tm-shuffle-backdrop { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 44%, rgba(24, 44, 74, .86) 0%, rgba(8, 14, 24, .94) 58%, rgba(3, 6, 12, .97) 100%); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:opacity .7s ease; }
.tm-shuffle-rays { position:absolute; left:50%; top:44%; width:170vmax; height:170vmax; margin:-85vmax 0 0 -85vmax; pointer-events:none; background:repeating-conic-gradient(from 0deg, rgba(255, 196, 92, .07) 0deg 5deg, transparent 5deg 15deg); -webkit-mask-image:radial-gradient(circle, #000 0%, transparent 55%); mask-image:radial-gradient(circle, #000 0%, transparent 55%); animation:tmShuffleRays 16s linear infinite; transition:opacity .5s ease; }
.tm-shuffle-field { position:absolute; inset:0; pointer-events:none; }
.tm-shuffle-chip { position:absolute; left:0; top:0; display:flex; align-items:center; gap:8px; max-width:200px; padding:4px 13px 4px 4px; border-radius:999px; background:linear-gradient(135deg, hsla(var(--tm-chip-hue, 200), 72%, 52%, .97), hsla(calc(var(--tm-chip-hue, 200) + 38), 74%, 36%, .97)); color:#fff !important; font-weight:800; font-size:13px; line-height:1.15; white-space:nowrap; box-shadow:0 8px 22px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .3); transform-origin:50% 50%; will-change:transform, opacity; opacity:0; }
.tm-shuffle-chip-photo { position:relative; flex:0 0 30px; width:30px; height:30px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; background:rgba(0, 0, 0, .28); box-shadow:0 0 0 2px rgba(255, 255, 255, .9); }
.tm-shuffle-chip-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.tm-shuffle-chip-initials { font-size:11px; font-weight:900; letter-spacing:.3px; color:#fff; }
.tm-shuffle-chip-name { overflow:hidden; text-overflow:ellipsis; text-shadow:0 1px 2px rgba(0, 0, 0, .35); }
.tm-shuffle-hud { position:absolute; left:0; right:0; bottom:calc(26px + env(safe-area-inset-bottom, 0px)); z-index:1000; display:flex; flex-direction:column; align-items:center; gap:8px; padding:0 16px; pointer-events:none; text-align:center; }
.tm-shuffle-show .tm-shuffle-label { font-size:clamp(18px, 3.4vw, 26px); text-shadow:0 2px 18px rgba(0, 0, 0, .7); }
.tm-shuffle-count { color:rgba(255, 255, 255, .72); font-weight:800; font-size:12px; letter-spacing:.9px; text-transform:uppercase; transition:opacity .4s ease; }
.tm-shuffle-skip { pointer-events:auto; margin-top:4px; min-height:32px; padding:0 18px; border-radius:999px; border:1px solid rgba(255, 255, 255, .35) !important; background:rgba(255, 255, 255, .1) !important; color:#fff !important; font-family:inherit; font-weight:800; font-size:12px; line-height:1; letter-spacing:.6px; text-transform:uppercase; cursor:pointer; transition:background .2s ease, opacity .3s ease; }
.tm-shuffle-skip:hover, .tm-shuffle-skip:focus-visible { background:rgba(255, 255, 255, .22) !important; outline:none; }
/* Landing: the drum dims away so the seats show through, and the label says it is done. */
.tm-shuffle-landing .tm-shuffle-backdrop { opacity:.14; }
.tm-shuffle-landing .tm-shuffle-rays { opacity:0; }
.tm-shuffle-landing .tm-shuffle-count { opacity:0; }
.tm-shuffle-landing .tm-shuffle-label .material-symbols-outlined { animation:none; }
.tm-shuffle-landing .tm-shuffle-hud { bottom:auto; top:calc(18px + env(safe-area-inset-top, 0px)); }
.tm-shuffle-landing .tm-shuffle-label { background:rgba(8, 14, 24, .78); padding:8px 16px; border-radius:999px; font-size:clamp(15px, 2.6vw, 20px); }
/* The seat a card has just landed on. */
.tm-shuffle-seat-hit { animation:tmShuffleSeatHit 1.3s ease-out; position:relative; z-index:2; }
@keyframes tmShuffleSeatHit {
    0% { box-shadow:0 0 0 0 rgba(255, 196, 92, .95), 0 0 24px 6px rgba(255, 196, 92, .75); background-color:rgba(255, 196, 92, .35); }
    60% { box-shadow:0 0 0 7px rgba(255, 196, 92, 0), 0 0 18px 2px rgba(255, 196, 92, .2); }
    100% { box-shadow:0 0 0 0 rgba(255, 196, 92, 0); background-color:transparent; }
}
@keyframes tmShuffleRays { to { transform:rotate(360deg); } }
@media(max-width: 560px) {
    .tm-shuffle-chip { max-width:140px; font-size:11px; gap:6px; padding:3px 10px 3px 3px; }
    .tm-shuffle-chip-photo { flex-basis:24px; width:24px; height:24px; }
    .tm-shuffle-chip-initials { font-size:9px; }
}
@media(prefers-reduced-motion: reduce) {
    .tm-shuffle-rays, .tm-shuffle-seat-hit { animation:none !important; }
}

@media(max-width: 760px) {
    .tm-shell { padding:10px 6px 22px; }
    .tm-head { display:flex; justify-content:flex-end; align-items:center; gap:8px; margin:4px 0 14px; }
    .tm-head > .tm-actions { justify-content:flex-end; align-items:center; gap:4px; flex-wrap:nowrap; margin-top:0; min-width:0; }
    .tm-head > .tm-actions .tm-btn { min-height:28px; padding:0 6px; font-size:11px; gap:4px; white-space:nowrap; }
    .tm-head > .tm-actions .tm-btn .material-symbols-outlined { font-size:15px; }
    .tm-head > .tm-actions .tm-theme-toggle { min-width:0; padding:0 8px; }
    .tm-head > .tm-actions .tm-theme-toggle [data-tm-theme-label] { display:none; }
    .tm-panel-head, .tm-toolbar { display:block; }
    /* Give the tournament title's action buttons breathing room from the details text. */
    .tm-panel-head > .tm-actions { margin-top:16px; flex-wrap:wrap; }
    .tm-list { gap:20px !important; row-gap:20px !important; }
    /* Guarantee visible separation between tournament/league cards on mobile. */
    .tm-list > .tm-tournament-card { margin-bottom:14px !important; }
    .tm-list > .tm-tournament-card:last-child { margin-bottom:0 !important; }
    .tm-tournament-head-copy, .tm-public-hero-main { gap:10px; }
    .tm-tournament-logo-compact { width:88px; flex-basis:88px; }
    .tm-tournament-logo-compact img { width:88px; height:auto; }
    .tm-title { font-size:20px; }
    .tm-field, .tm-field-half, .tm-field-third { grid-column:span 12; }
    /* All four detail tiles stay on one row on a phone: compact, centred, the label free to wrap. */
    .tm-stat-row { grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px; }
    .tm-stat { padding:9px 5px; text-align:center; min-width:0; }
    .tm-tournament-card { grid-template-columns:minmax(50px, max-content) minmax(0, 1fr); }
    .tm-tournament-card .tm-actions { grid-column:1 / -1; margin-top:6px; justify-content:flex-end; }
    .tm-icon-tile { width:auto; min-width:50px; max-width:104px; height:50px; }
    .tm-icon-tile img { max-width:104px; max-height:50px; }
    .tm-player-row { grid-template-columns:28px minmax(0, 1fr); }
    .tm-player-actions { grid-column:1 / -1; justify-content:flex-start; padding-left:38px; }
    .tm-draw-switch-toolbar { display:flex; flex-direction:column; align-items:stretch; gap:12px; padding:10px 12px 12px; }
    .tm-draw-switch-toolbar .tm-view-tabs { width:100%; flex-wrap:wrap; }
    .tm-bracket-panel-head { align-items:flex-start; }
    .tm-tabs { justify-content:center; }
    .tm-sched-toolbar { display:flex; flex-direction:column; align-items:stretch; gap:12px; padding:12px 14px 14px; margin-bottom:16px; border:1px solid var(--tm-border); border-radius:10px; background:var(--tm-surface); }
    .tm-sched-toolbar .tm-panel-note { margin-top:0; }
    .tm-sched-toolbar-actions { width:100%; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; margin-left:0; }
    .tm-sched-toolbar-actions .tm-minimal-bye-toggle { width:100%; min-height:42px; padding:0 14px; font-size:12px; border-radius:12px; letter-spacing:0; text-transform:none; justify-content:center; font-weight:800; }
    .tm-sched-row { grid-template-columns:32px minmax(0, 1fr); gap:6px 7px; padding:8px 8px 9px; margin-bottom:7px; border-radius:12px; }
    /* Read-only schedule (viewers): keep rows compact on mobile so more matches fit - players on
       the first line, then the day/date/hour and the table number together on ONE line below. */
    .tm-sched-row.tm-sched-public-row { grid-template-columns:26px 1fr auto; align-items:center; row-gap:2px; padding:7px 9px; }
    .tm-sched-public-row .tm-sched-num { grid-column:1; grid-row:1; }
    .tm-sched-public-row .tm-sched-players { grid-column:2 / -1; grid-row:1; }
    .tm-sched-public-row .tm-sched-time { grid-column:1 / 3; grid-row:2; justify-self:start; text-align:left; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
    .tm-sched-public-row .tm-sched-table { grid-column:3; grid-row:2; justify-self:end; text-align:right; font-size:11px; white-space:nowrap; }
    .tm-sched-num { text-align:left; font-size:9px; padding-top:2px; }
    /* Keep both player names on a single row: each side shares the space and ellipsis-clips. */
    .tm-sched-players { font-size:12px; line-height:1.15; gap:4px 6px; flex-wrap:nowrap; }
    .tm-sched-players .tm-player-identity { flex:1 1 0; min-width:0; }
    .tm-sched-players .tm-side-score { flex:0 0 26px; width:26px; min-height:20px; padding:0 3px; font-size:10px; }
    .tm-sched-time-cell { grid-column:1 / -1; gap:7px; margin-top:3px; }
    .tm-sched-actions { grid-column:1 / -1; gap:8px; margin-top:1px; }
    /* Larger, more tappable scheduling controls on mobile. */
    .tm-sched-row .tm-input, .tm-sched-row .tm-select { min-height:44px; padding:10px 12px; font-size:16px; font-weight:600; border-radius:11px; }
    .tm-sched-actions .tm-select { font-size:16px; font-weight:600; }
    .tm-sched-time-cell .tm-input { flex:1 1 auto; font-weight:700; }
    .tm-sched-time-cell .tm-match-icon-btn, .tm-sched-time-cell .tm-sched-clock { width:42px; height:42px; border-radius:11px; flex:0 0 auto; }
    .tm-sched-time-cell .tm-match-icon-btn .material-symbols-outlined, .tm-sched-time-cell .tm-sched-clock .material-symbols-outlined { font-size:21px; }
    .tm-sched-actions .tm-select { flex:1 1 auto; min-width:0; }
    .tm-sched-row .tm-btn[data-tm-act="save-sched"] { width:auto; min-width:70px; height:44px; padding:0 18px; border-radius:11px; }
    .tm-sched-row .tm-btn[data-tm-act="save-sched"] .material-symbols-outlined { font-size:22px; }
    .tm-sort-list { grid-template-columns:1fr; }
    .tm-sort-list.tm-manual-match-list { grid-template-columns:42px minmax(0, 1fr) minmax(0, 1fr); gap:6px; }
    .tm-manual-match-list > .tm-manual-match-no { padding:5px 0; font-size:11px; }
    .tm-manual-match-list > .tm-sort-slot { gap:5px; padding:8px 6px; }
    .tm-manual-match-list > .tm-sort-slot .tm-sort-pos { min-width:22px; padding:0 4px; }
    /* a finger's target: the grip grows to 40px, the handle icon with it */
    .tm-manual-match-list > .tm-sort-slot .tm-sort-handle { font-size:22px; }
    .tm-manual-match-list > .tm-sort-slot .tm-sort-grip { min-height:40px; gap:3px; margin:-8px 0 -8px -4px; padding:4px 2px 4px 4px; }
    .tm-manual-match-list > .tm-manual-opponent-placeholder { padding:8px 6px; font-size:11px; }
    .tm-manual-slot-replace { width:26px; height:26px; flex-basis:26px; margin-right:-2px; }
    .tm-manual-slot-replace .material-symbols-outlined { font-size:17px; }
    .tm-manual-match-list > .tm-manual-pair-first .tm-manual-slot-picker,
    .tm-manual-match-list > .tm-manual-direct-slot .tm-manual-slot-picker { left:-42px; }
    .tm-manual-match-list > .tm-manual-pair-second .tm-manual-slot-picker { right:-2px; }
    .tm-scheme3-seed-assignment { grid-template-columns:1fr; }
    .tm-scheme3-seed-slot { grid-template-columns:26px minmax(0, 1fr) minmax(135px, 1.15fr); }
}
@media(max-width: 560px) {
    .tm-scheme3-seed-slot { grid-template-columns:25px minmax(0, 1fr); }
    .tm-scheme3-seed-slot .tm-select { grid-column:2; }
    /* Minimalist view: each match is one full-width row, so scale the text up with the
       viewport so it fills the screen with the largest readable font without overflowing.
       Names ellipsis-clip, so they never push the row wider than the screen. */
    .tm-match-list-panel.tm-minimal-list-panel { padding:9px 6px; }
    .tm-minimal-stage { margin-bottom:22px; padding-right:5px; padding-bottom:5px; padding-left:5px; border-radius:10px; }
    .tm-minimal-round-title,
    .tm-minimal-round-title.tm-round-has-controls { margin-right:-5px; margin-left:-5px; padding:10px 9px; font-size:calc(17px * var(--tm-bracket-scale, 1)); letter-spacing:.45px; }
    .tm-minimal-round-title-row { gap:6px; }
    .tm-minimal-bye-toggle { padding:2px 6px; font-size:9px; }
    .tm-bracket-panel-head { gap:8px; }
    .tm-sched-toolbar-actions { grid-template-columns:1fr; gap:12px; }
    .tm-sched-toolbar-actions .tm-minimal-bye-toggle { min-height:44px; padding:0 16px; font-size:12px; }
    .tm-match-list-row.tm-minimal-row { gap:0 calc(4px * var(--tm-bracket-scale, 1)); --tm-mrow-pt:calc(4px * var(--tm-bracket-scale, 1)); --tm-mrow-px:calc(4px * var(--tm-bracket-scale, 1)); --tm-mrow-pb:calc(7px * var(--tm-bracket-scale, 1)); }
    .tm-minimal-player { font-size:clamp(calc(10px * var(--tm-bracket-scale, 1)), calc(2.8vw * var(--tm-bracket-scale, 1)), calc(15px * var(--tm-bracket-scale, 1))); line-height:1.2; }
    .tm-minimal-center { gap:calc(5px * var(--tm-bracket-scale, 1)); }
    .tm-minimal-time-cell { gap:calc(3px * var(--tm-bracket-scale, 1)); }
    .tm-minimal-score { font-size:clamp(calc(13px * var(--tm-bracket-scale, 1)), calc(3.9vw * var(--tm-bracket-scale, 1)), calc(21px * var(--tm-bracket-scale, 1))); min-width:auto; }
    .tm-minimal-match-no { font-size:clamp(calc(10px * var(--tm-bracket-scale, 1)), calc(2.7vw * var(--tm-bracket-scale, 1)), calc(15px * var(--tm-bracket-scale, 1))); }
    .tm-sched-stage { margin-bottom:22px; }
    .tm-sched-stage-title { min-height:39px; margin-bottom:8px; padding:7px 10px; font-size:16px; letter-spacing:.45px; }
}
@media print {
    @page { size:landscape; margin:10mm; }
    body.tm-printing-tournament * { visibility:hidden !important; }
    body.tm-printing-tournament #tmManager, body.tm-printing-tournament #tmManager * { visibility:visible !important; }
    body.tm-printing-tournament #tmManager { position:absolute !important; left:0 !important; top:0 !important; width:100% !important; color:#111 !important; background:#fff !important; }
    body.tm-printing-tournament .tm-head, body.tm-printing-tournament .tm-actions, body.tm-printing-tournament .tm-tabs, body.tm-printing-tournament .tm-toolbar, body.tm-printing-tournament .tm-match-tools, body.tm-printing-tournament button, body.tm-printing-tournament input, body.tm-printing-tournament select, body.tm-printing-tournament textarea { display:none !important; }
    body.tm-printing-tournament .tm-tab-page { display:block !important; }
    body.tm-printing-tournament .tm-tab-page:not([data-tm-page="draw"]) { display:none !important; }
    body.tm-printing-tournament .tm-panel, body.tm-printing-tournament .tm-bracket-panel, body.tm-printing-tournament .tm-match-list-panel, body.tm-printing-tournament .tm-bracket-match, body.tm-printing-tournament .tm-match-list-row, body.tm-printing-tournament .tm-rr-match { background:#fff !important; color:#111 !important; border-color:#bbb !important; box-shadow:none !important; animation:none !important; break-inside:avoid; }
    body.tm-printing-tournament .tm-bracket-panel { overflow:visible !important; padding:0 !important; }
    body.tm-printing-tournament .tm-bracket-side, body.tm-printing-tournament .tm-match-list-side { background:#f5f5f5 !important; color:#111 !important; }
    body.tm-printing-tournament .tm-player-link, body.tm-printing-tournament .tm-player-name-inline, body.tm-printing-tournament .tm-bracket-title, body.tm-printing-tournament .tm-match-list-title { color:#111 !important; }
    body.tm-printing-tournament .tm-player-flag, body.tm-printing-tournament .tm-player-avatar { print-color-adjust:exact; -webkit-print-color-adjust:exact; }
}
/* Larger fonts for Minimalistic View on desktop screens */
@media (min-width: 1024px) {
    .tm-match-list-panel.tm-minimal-list-panel { padding:12px 16px; }
    .tm-match-list-panel.tm-minimal-list-panel .tm-match-list-title { font-size:16px; }
    .tm-match-list-panel.tm-minimal-list-panel .tm-match-list-round-title { font-size:12px; }
    .tm-minimal-player { font-size:calc(14px * var(--tm-bracket-scale, 1)); }
    .tm-minimal-score { font-size:calc(14px * var(--tm-bracket-scale, 1)); min-width:calc(44px * var(--tm-bracket-scale, 1)); }
    .tm-minimal-match-no { font-size:calc(12px * var(--tm-bracket-scale, 1)); }
    .tm-score-pill { font-size:12px; }
}

/* ---------------------------------------------------------------------------
   Adaptive TV Board fullscreen layout (JS-driven).
   tmTvFitFullscreen() picks the column count (--tm-tv-cols) and a font scale
   (--tm-tv-scale) so a few live matches become large readable boxes while many
   shrink to fit on a single screen. Rules below win on source order over the
   earlier fixed 3-column fullscreen styles (equal specificity).
   --------------------------------------------------------------------------- */
.tm-manager .tm-tv-board:fullscreen.tm-tv-fit .tm-tv-grid { grid-auto-rows:1fr; align-content:stretch; }
.tm-manager .tm-tv-board:fullscreen.tm-tv-fit .tm-tv-section.tm-tv-now { display:flex; flex-direction:column; min-height:0; }
.tm-manager .tm-tv-board:fullscreen.tm-tv-fit .tm-tv-next-list { overflow-y:auto; min-height:0; }
.tm-manager .tm-tv-board:fullscreen.tm-tv-fit .tm-tv-now-grid {
    flex:1 1 auto;
    min-height:0;
    grid-template-columns:repeat(var(--tm-tv-cols, 2), minmax(0, 1fr));
    grid-template-rows:repeat(var(--tm-tv-rows, 2), minmax(0, 1fr));
    grid-auto-rows:1fr;
    align-content:stretch;
    justify-content:start;
    gap:calc(10px * var(--tm-tv-scale, 1));
}
.tm-manager .tm-tv-board:fullscreen.tm-tv-fit .tm-tv-now-card {
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:0;
    overflow:hidden;
    padding:calc(8px * var(--tm-tv-scale, 1)) calc(11px * var(--tm-tv-scale, 1));
    border-radius:calc(10px * var(--tm-tv-scale, 1));
}
.tm-manager .tm-tv-board:fullscreen.tm-tv-fit .tm-tv-now-top { margin-bottom:calc(5px * var(--tm-tv-scale, 1)); }
.tm-manager .tm-tv-board:fullscreen.tm-tv-fit .tm-tv-now-match { font-size:calc(18px * var(--tm-tv-scale, 1)); }
.tm-manager .tm-tv-board:fullscreen.tm-tv-fit .tm-tv-live-chip { font-size:calc(9px * var(--tm-tv-scale, 1)); padding:calc(2px * var(--tm-tv-scale, 1)) calc(7px * var(--tm-tv-scale, 1)); }
.tm-manager .tm-tv-board:fullscreen.tm-tv-fit .tm-tv-now-side { gap:calc(8px * var(--tm-tv-scale, 1)); padding:calc(4px * var(--tm-tv-scale, 1)) 0; }
.tm-manager .tm-tv-board:fullscreen.tm-tv-fit .tm-tv-name { font-size:calc(24px * var(--tm-tv-scale, 1)); line-height:1.08; }
.tm-manager .tm-tv-board:fullscreen.tm-tv-fit .tm-tv-score {
    font-size:calc(30px * var(--tm-tv-scale, 1));
    min-width:calc(42px * var(--tm-tv-scale, 1));
    padding:calc(3px * var(--tm-tv-scale, 1)) calc(10px * var(--tm-tv-scale, 1));
    border-radius:calc(8px * var(--tm-tv-scale, 1));
}
.tm-manager .tm-tv-board:fullscreen.tm-tv-fit .tm-tv-side-scores { gap:calc(5px * var(--tm-tv-scale, 1)); }
.tm-manager .tm-tv-board:fullscreen.tm-tv-fit .tm-tv-side-scores .tm-side-points { font-size:calc(9px * var(--tm-tv-scale, 1)); }
.tm-manager .tm-tv-board:fullscreen.tm-tv-fit .tm-tv-now-stage { margin-top:calc(5px * var(--tm-tv-scale, 1)); font-size:calc(14px * var(--tm-tv-scale, 1)); }

/* The stream card (tmTvSyncVideoCard): the full-screen TV Board's first cell plays the YouTube stream
   of the match closest to finishing. Same cell as a live match card; the picture fills it and a slim
   bar under it says which match and why. Always dark - it is a screen, whatever the board theme -
   hence the [data-site] selectors, which outrank the light and dark full-screen card rules. */
.tm-manager[data-site] .tm-tv-board:fullscreen .tm-tv-now-card.tm-tv-video-card,
.tm-manager[data-site] .tm-tv-board:fullscreen.tm-tv-fit .tm-tv-now-card.tm-tv-video-card {
    display:flex; flex-direction:column; justify-content:stretch; padding:0; overflow:hidden;
    background:#000; border:0;
    box-shadow:0 12px 30px rgba(0,0,0,.35);
}
/* Four live cards' worth: two columns by two rows, top left (tmTvFitFullscreen counts it as 4 cells). */
.tm-manager[data-site] .tm-tv-board:fullscreen .tm-tv-now-grid > .tm-tv-video-card { grid-column:span 2; grid-row:span 2; }
.tm-tv-video-frame { position:relative; flex:1 1 auto; min-height:0; background:#000; }
.tm-tv-video-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.tm-tv-video-bar { flex:0 0 auto; display:flex; align-items:center; gap:calc(8px * var(--tm-tv-scale, 1)); padding:calc(5px * var(--tm-tv-scale, 1)) calc(8px * var(--tm-tv-scale, 1)); background:rgba(8, 12, 20, .96); color:#fff; }
.tm-tv-video-info { flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:calc(8px * var(--tm-tv-scale, 1)); overflow:hidden; white-space:nowrap; font-size:calc(13px * var(--tm-tv-scale, 1)); font-weight:800; }
.tm-tv-video-line { overflow:hidden; text-overflow:ellipsis; }
.tm-tv-video-score { color:var(--tm-yellow, #ffc247); letter-spacing:.5px; }
.tm-tv-video-why { color:rgba(255, 255, 255, .7); font-weight:700; overflow:hidden; text-overflow:ellipsis; }
.tm-tv-video-sound { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:calc(30px * var(--tm-tv-scale, 1)); height:calc(30px * var(--tm-tv-scale, 1)); min-width:26px; min-height:26px; padding:0; border-radius:50%; border:1px solid rgba(255, 255, 255, .35) !important; background:rgba(255, 255, 255, .12) !important; color:#fff !important; cursor:pointer; }
.tm-tv-video-sound[aria-pressed="true"] { background:var(--tm-accent, #ff8c00) !important; border-color:var(--tm-accent, #ff8c00) !important; }
.tm-tv-video-sound .material-symbols-outlined { font-size:calc(18px * var(--tm-tv-scale, 1)); }

/* ---------------------------------------------------------------------------
   Larger, easier-to-read text for the Tournament Manager on phones.
   Name/title elements clip with ellipsis (white-space:nowrap) so a bigger font
   never widens a row into a second line; fixed-size pills are widened in step
   so the larger digits never overflow or overlap. Appended last so these win
   on source order over the earlier mobile rules of equal specificity.
   --------------------------------------------------------------------------- */
@media (max-width: 760px) {
    .tm-tab { font-size:14px; min-height:42px; padding:0 11px; gap:5px; }
    .tm-tab .material-symbols-outlined { font-size:19px; }
    .tm-title { font-size:21px; }
    .tm-panel-title { font-size:18px; }
    .tm-panel-note { font-size:13.5px; }
    .tm-stat-value { font-size:clamp(15px, 4.6vw, 20px); white-space:nowrap; letter-spacing:-.01em; }
    /* Est. Duration is a range ("4:15–4:50"): a touch smaller, and free to break after its dash. */
    .tm-stat-value.tm-stat-range { white-space:normal; font-size:clamp(14px, 4.1vw, 19px); line-height:1.15; }
    .tm-stat-label { font-size:11px; line-height:1.25; }
    .tm-player-number { font-size:13px; }
    .tm-player-name, .tm-player-link, .tm-player-name-inline { font-size:15px; }
    .tm-player-meta { font-size:12.5px; }
    .tm-badge { font-size:11px; }
    .tm-field label, .tm-field > span { font-size:12.5px; }
    .tm-input, .tm-select, .tm-textarea { font-size:16px; }
    .tm-group-title { font-size:15px; }
    .tm-group-count { font-size:19px; }
    .tm-public-meta { font-size:12.5px; }
    /* Schedule rows are dense; keep them compact but a notch more legible. */
    .tm-sched-num { font-size:11px; }
    .tm-sched-players { font-size:13px; }
    .tm-sched-players .tm-side-score { flex:0 0 30px; width:30px; min-height:22px; font-size:12px; }
    .tm-sched-row .tm-input, .tm-sched-row .tm-select { min-height:30px; font-size:13px; }
    /* Bracket View pinch-zoom: names must track --tm-bracket-scale like everything else in the
       row (avatar, score box, padding), not the fixed 15px above. Otherwise the name stays a
       constant size while the row/score box shrink or grow, so it overflows or shrinks the row
       inconsistently between match cards - looking "distorted" and throwing the score boxes out
       of vertical alignment from one match to the next as the zoom level changes. Higher
       specificity than the plain .tm-player-link rule above wins regardless of source order. */
    .tm-bracket-panel .tm-player-link,
    .tm-bracket-panel .tm-player-name-inline { font-size:inherit; }
    /* And the same for the ranking / standings tables, which pinch-zoom on --tm-standings-scale -
       otherwise zooming moves the numbers and leaves the names where they were. Scaled from the
       15px above rather than set to `inherit` (the bracket's answer): a name in a table is meant to
       read a notch larger than its row of figures, so at 100% this has to stay exactly 15px. */
    .tm-standings-scroll .tm-player-link,
    .tm-standings-scroll .tm-player-name-inline { font-size:calc(15px * var(--tm-standings-scale, 1)); }
}
@media (max-width: 560px) {
    /* Minimalist match rows scale with the viewport (clamp); lift the floor and
       ceiling a little so small phones still get readable names and scores. */
    .tm-minimal-player { font-size:clamp(calc(12px * var(--tm-bracket-scale, 1)), calc(3.2vw * var(--tm-bracket-scale, 1)), calc(16px * var(--tm-bracket-scale, 1))); }
    .tm-minimal-score { font-size:clamp(calc(15px * var(--tm-bracket-scale, 1)), calc(4.3vw * var(--tm-bracket-scale, 1)), calc(22px * var(--tm-bracket-scale, 1))); }
    .tm-minimal-match-no { font-size:clamp(calc(11px * var(--tm-bracket-scale, 1)), calc(3vw * var(--tm-bracket-scale, 1)), calc(15px * var(--tm-bracket-scale, 1))); }
}
/* ---- Minimalistic View: DESKTOP typography ------------------------------------------------
 *
 * The base sizes above are built for a phone, where the whole panel pinch-zooms on
 * --tm-bracket-scale. On a desktop the scale is pinned at 1 (see tmMobileZoomEnabled()), so those
 * 10-11px labels read far too small on a wide screen. From the 761px breakpoint up - the same
 * boundary the pinch-zoom uses - the row gets a much bigger type scale: player names, the match
 * number, the start time + table number, and the scores/boxes that have to stay aligned with them.
 * Names still clip with ellipsis, so nothing wraps a row onto a second line.
 * -------------------------------------------------------------------------------------------- */
@media (min-width: 761px) {
    .tm-match-list-row.tm-minimal-row { --tm-mrow-pt:calc(7px * var(--tm-bracket-scale, 1)); --tm-mrow-px:calc(10px * var(--tm-bracket-scale, 1)); --tm-mrow-pb:calc(10px * var(--tm-bracket-scale, 1)); }
    .tm-match-list-row.tm-minimal-row.live { --tm-mrow-pb:calc(11px * var(--tm-bracket-scale, 1)); }
    /* Player names. */
    .tm-match-list-panel .tm-minimal-player { font-size:calc(17px * var(--tm-bracket-scale, 1)); }
    /* Match number (top-left corner badge) and the centred match-no label. */
    .tm-match-list-panel .tm-minimal-num { font-size:calc(14px * var(--tm-bracket-scale, 1)); }
    .tm-match-list-panel .tm-minimal-match-no { font-size:calc(14px * var(--tm-bracket-scale, 1)); }
    /* Match time + table number (top-right corner badge). */
    .tm-match-list-panel .tm-minimal-side .tm-minimal-start-time { font-size:calc(14px * var(--tm-bracket-scale, 1)); min-width:calc(58px * var(--tm-bracket-scale, 1)); }
    .tm-match-list-panel .tm-minimal-table,
    .tm-match-list-panel .tm-minimal-badge-row .tm-minimal-num { margin:calc(-4px * var(--tm-bracket-scale, 1)) 0; padding:calc(3px * var(--tm-bracket-scale, 1)) calc(7px * var(--tm-bracket-scale, 1)); border-radius:calc(5px * var(--tm-bracket-scale, 1)); font-size:calc(13px * var(--tm-bracket-scale, 1)); }
    /* The score boxes grow with the names - otherwise the 13px figures would end up SMALLER than
       the names they belong to and the row would read upside down. */
    .tm-minimal-list-panel .tm-side-score { flex:0 0 calc(44px * var(--tm-bracket-scale, 1)); width:calc(44px * var(--tm-bracket-scale, 1)); min-height:calc(32px * var(--tm-bracket-scale, 1)); border-radius:calc(8px * var(--tm-bracket-scale, 1)); font-size:calc(18px * var(--tm-bracket-scale, 1)); }
    .tm-minimal-list-panel .tm-side-score.tm-side-ff { font-size:calc(15px * var(--tm-bracket-scale, 1)); }
    .tm-minimal-list-panel .tm-side-score.tm-side-advance .material-symbols-outlined { font-size:calc(20px * var(--tm-bracket-scale, 1)); }
    .tm-minimal-list-panel .tm-side-points { min-width:calc(26px * var(--tm-bracket-scale, 1)); height:calc(28px * var(--tm-bracket-scale, 1)); font-size:calc(13px * var(--tm-bracket-scale, 1)); }
    /* Placeholder "-" box on rows with no scheduled match, and the centre ":" separator. */
    .tm-match-list-panel .tm-minimal-box { min-height:calc(32px * var(--tm-bracket-scale, 1)); padding:0 calc(7px * var(--tm-bracket-scale, 1)); border-radius:calc(8px * var(--tm-bracket-scale, 1)); font-size:calc(18px * var(--tm-bracket-scale, 1)); }
    .tm-match-list-panel .tm-minimal-box-empty { min-width:calc(44px * var(--tm-bracket-scale, 1)); }
    .tm-match-list-panel .tm-minimal-box-sep { font-size:calc(16px * var(--tm-bracket-scale, 1)); }
    /* Centre column controls (pen + more_vert) and the YouTube icon keep pace. */
    .tm-match-list-row.tm-minimal-row > .tm-minimal-box-sep,
    .tm-match-list-row.tm-minimal-row > .tm-minimal-mid { min-height:calc(26px * var(--tm-bracket-scale, 1)); }
    .tm-match-list-row.tm-minimal-row > .tm-minimal-mid.tm-minimal-mid-options { min-height:calc(32px * var(--tm-bracket-scale, 1)); }
    .tm-match-list-panel .tm-minimal-options-chip { font-size:calc(26px * var(--tm-bracket-scale, 1)); }
    .tm-match-list-panel .tm-minimal-youtube-icon { height:calc(16px * var(--tm-bracket-scale, 1)); }
}

/* ---------------- Doubles: Add Team form + team identity ---------------- */
.tm-team-add { display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-top:10px; }
.tm-team-slot { flex:1 1 240px; min-width:0; position:relative; }
.tm-team-slot-label { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--tm-muted); margin-bottom:4px; }
.tm-team-amp-big { align-self:center; font-size:22px; font-weight:800; color:var(--tm-muted); padding:20px 2px 0; }
.tm-team-selected { margin-top:6px; }
.tm-team-chip { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:8px; background:rgba(120,140,180,.16); font-weight:700; max-width:100%; }
.tm-team-chip .tm-team-clear { border:none; background:transparent; color:inherit; cursor:pointer; font-size:16px; line-height:1; padding:0 2px; }
.tm-team-identity { display:inline-flex; align-items:center; flex-wrap:wrap; gap:2px; }
.tm-team-amp { color:var(--tm-muted); font-weight:700; padding:0 2px; }
/* Doubles inside a bracket / match-list cell: show the whole team on ONE line as
   "Firstname L. & Firstname L.". The generic inline-flex wrap above breaks raggedly
   here (each .tm-player-identity is width:100%, so the two players and the "&" land
   on separate lines). The cell is narrow (~150px for names beside the score box),
   so the per-partner avatars are dropped in this compact context - otherwise the
   second name is forced to truncate. Names sit inline and only ellipsis if the
   combined team name is still too long. */
.tm-bracket-side .tm-team-identity,
.tm-match-list-side .tm-team-identity { display:inline-flex; flex-direction:row; align-items:center; flex-wrap:nowrap; width:100%; min-width:0; gap:0; overflow:hidden; }
.tm-bracket-side .tm-team-identity > .tm-player-identity,
.tm-match-list-side .tm-team-identity > .tm-player-identity { width:auto; min-width:0; flex:0 1 auto; gap:0; }
.tm-bracket-side .tm-team-identity > .tm-team-amp,
.tm-match-list-side .tm-team-identity > .tm-team-amp { flex:0 0 auto; }
.tm-bracket-side .tm-team-identity .tm-player-visual,
.tm-match-list-side .tm-team-identity .tm-player-visual { display:none; }
/* Doubles in the ranking / standings table: keep the whole team on ONE line
   ("Firstname L. & Firstname L."). The name column is wide (and the table scrolls),
   so avatars stay - only the wrap needs disabling. */
.tm-standings-name .tm-team-identity { flex-wrap:nowrap; min-width:0; }
.tm-standings-name .tm-team-identity > .tm-player-identity { width:auto; min-width:0; flex:0 1 auto; }
.tm-standings-name .tm-team-identity > .tm-team-amp { flex:0 0 auto; }

/* ---------------- Winner podium (ended tournaments) ---------------- */
/* The podium sits inside a card matching the other TM panels. */
.tm-podium-card { background:var(--tm-surface); border:1px solid var(--tm-border); border-radius:8px; padding:14px; margin-bottom:14px; }
.tm-manager[data-site="light"] .tm-podium-card { background:#ffffff; }
.tm-podium-card-title { font-size:15px; font-weight:800; display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:10px; color:var(--tm-text); }
.tm-podium-card-title .material-symbols-outlined { font-size:20px; color:var(--tm-gold, #f6c445); }
.tm-podium-card .tm-podium { margin:0; }
/* Winner podium as a pyramid: champion on top, runner-up centred right beneath it,
   and the two shared-3rd cards spread wider + lower on the sides (not a flat row). */
.tm-podium { display:flex; flex-direction:column; align-items:center; gap:12px; margin:16px 0; }
.tm-podium-tiers { display:flex; flex-direction:column; align-items:center; gap:10px; }
.tm-podium-thirds { display:flex; justify-content:space-between; gap:16px; width:100%; max-width:460px; }
.tm-podium-thirds .tm-podium-step { flex:1 1 0; }
.tm-podium-step { position:relative; overflow:hidden; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:6px; min-width:130px; max-width:260px; padding:18px 16px 15px; border-radius:16px; border:1px solid var(--tm-border); background:var(--tm-surface); text-align:center; box-shadow:0 3px 8px rgba(0,0,0,.12); transition:transform .18s ease, box-shadow .18s ease; }
.tm-podium-step:hover { transform:translateY(-3px); box-shadow:0 6px 14px rgba(0,0,0,.16); }
/* When a player is marked (clicked anywhere), highlight the whole podium card that holds them. */
.tm-manager .tm-podium-step.tm-player-marked { border-color:rgba(255,194,71,.9) !important; background:linear-gradient(180deg, rgba(255,194,71,.18), rgba(255,194,71,.05)) !important; box-shadow:0 0 0 2px rgba(255,194,71,.6), 0 8px 18px rgba(255,194,71,.22) !important; }
.tm-manager .tm-podium-step.tm-player-marked::before { background:linear-gradient(90deg, #ffcf5a, #f4a51c) !important; }
.tm-manager[data-site="light"] .tm-podium-step.tm-player-marked { border-color:rgba(194,134,0,.65) !important; background:linear-gradient(180deg, rgba(255,236,170,.95), rgba(255,247,224,.95)) !important; box-shadow:0 0 0 2px rgba(240,180,40,.85), 0 8px 18px rgba(194,134,0,.18) !important; }
/* coloured accent bar across the top of every card (per-rank gradient below) */
.tm-podium-step::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--tm-border); }
.tm-podium-medal { font-size:30px; line-height:1; filter:drop-shadow(0 2px 3px rgba(0,0,0,.30)); }
.tm-podium-name { font-size:14px; font-weight:900; color:var(--tm-text); line-height:1.25; overflow-wrap:anywhere; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 6px; }
.tm-podium-amp { color:var(--tm-muted); font-weight:700; }
.tm-podium-person { display:inline-flex; align-items:center; gap:7px; cursor:pointer; border-radius:8px; padding:3px 7px; }
.tm-podium-photo { display:inline-flex; flex:0 0 auto; }
.tm-podium-photo .tm-player-visual { width:34px; height:34px; flex:0 0 34px; }
.tm-podium-photo .tm-player-avatar { width:34px; height:34px; box-shadow:0 0 0 2px var(--tm-surface), 0 0 0 3px var(--tm-border); }
.tm-podium-photo .tm-player-avatar .material-symbols-outlined { font-size:22px; }
.tm-podium-person-name { min-width:0; }
.tm-podium-person.tm-player-marked { background:rgba(255,194,71,.26); box-shadow:inset 0 0 0 1px rgba(255,194,71,.4); }
.tm-manager[data-site="light"] .tm-podium-person.tm-player-marked { background:rgba(255,230,120,.62); box-shadow:inset 0 0 0 1px rgba(194,134,0,.2); }
.tm-podium-1 .tm-podium-photo .tm-player-visual { width:42px; height:42px; flex:0 0 42px; }
.tm-podium-1 .tm-podium-photo .tm-player-avatar { width:42px; height:42px; }
.tm-podium-label { font-size:10.5px; font-weight:900; text-transform:uppercase; letter-spacing:.09em; color:var(--tm-muted); }

/* ---- Gold / Champion ---- */
.tm-podium-1 { min-width:204px; border-color:rgba(255,193,64,.72); background:linear-gradient(165deg, rgba(255,201,71,.30), rgba(255,170,20,.06) 58%, var(--tm-surface)); box-shadow:0 4px 10px rgba(255,168,20,.16); }
.tm-podium-1::before { background:linear-gradient(90deg, #ffe27a, #f5a300); }
.tm-podium-1 .tm-podium-medal { font-size:46px; }
.tm-podium-1 .tm-podium-name { font-size:17px; }
.tm-podium-1 .tm-podium-label { color:#e0930a; }
.tm-podium-1 .tm-podium-photo .tm-player-avatar { box-shadow:0 0 0 2px var(--tm-surface), 0 0 0 4px #f5b301, 0 2px 6px rgba(245,163,0,.24); }

/* ---- Silver / Runner-up ---- */
.tm-podium-2 { min-width:174px; border-color:rgba(190,201,216,.72); background:linear-gradient(165deg, rgba(206,216,229,.26), rgba(160,172,190,.05) 58%, var(--tm-surface)); box-shadow:0 4px 10px rgba(150,165,185,.16); }
.tm-podium-2::before { background:linear-gradient(90deg, #eef2f7, #a9b6c7); }
.tm-podium-2 .tm-podium-medal { font-size:36px; }
.tm-podium-2 .tm-podium-label { color:#8895a8; }
.tm-podium-2 .tm-podium-photo .tm-player-avatar { box-shadow:0 0 0 2px var(--tm-surface), 0 0 0 4px #bcc7d6; }

/* ---- Bronze / Third ---- */
.tm-podium-3 { min-width:0; border-color:rgba(216,140,74,.66); background:linear-gradient(165deg, rgba(221,150,88,.24), rgba(180,110,55,.05) 58%, var(--tm-surface)); box-shadow:0 4px 10px rgba(190,110,50,.16); }
.tm-podium-3::before { background:linear-gradient(90deg, #f0b07a, #c07a37); }
.tm-podium-3 .tm-podium-medal { font-size:30px; }
.tm-podium-3 .tm-podium-name { font-size:13px; }
.tm-podium-3 .tm-podium-label { color:#c07f43; }
.tm-podium-3 .tm-podium-photo .tm-player-avatar { box-shadow:0 0 0 2px var(--tm-surface), 0 0 0 4px #d68c4a; }
/* 4th place (only shown when a 3rd/4th place match was played): a cool slate card, clearly not a medal. */
.tm-podium-4 { min-width:0; border-color:rgba(120,132,148,.55); background:linear-gradient(165deg, rgba(120,132,148,.20), rgba(120,132,148,.04) 58%, var(--tm-surface)); box-shadow:0 4px 10px rgba(90,100,115,.14); }
.tm-podium-4::before { background:linear-gradient(90deg, #aab3c0, #6b7686); }
.tm-podium-4 .tm-podium-medal { font-size:26px; }
.tm-podium-4 .tm-podium-name { font-size:13px; }
.tm-podium-4 .tm-podium-label { color:#7b8494; }
.tm-podium-4 .tm-podium-photo .tm-player-avatar { box-shadow:0 0 0 2px var(--tm-surface), 0 0 0 4px #97a0af; }

/* Light theme: stronger metallic tints over the white card + matching soft shadows/rings. */
.tm-manager[data-site="light"] .tm-podium-step { box-shadow:0 3px 8px rgba(30,40,60,.10); }
.tm-manager[data-site="light"] .tm-podium-step:hover { box-shadow:0 6px 14px rgba(30,40,60,.14); }
.tm-manager[data-site="light"] .tm-podium-1 { background:linear-gradient(165deg, rgba(255,193,40,.44), rgba(255,214,120,.14) 58%, #fff); box-shadow:0 4px 10px rgba(240,160,20,.18); }
.tm-manager[data-site="light"] .tm-podium-2 { background:linear-gradient(165deg, rgba(176,190,208,.42), rgba(214,222,232,.16) 58%, #fff); box-shadow:0 4px 10px rgba(150,165,185,.18); }
.tm-manager[data-site="light"] .tm-podium-3 { background:linear-gradient(165deg, rgba(214,140,74,.40), rgba(230,180,140,.14) 58%, #fff); box-shadow:0 4px 10px rgba(190,110,50,.16); }
.tm-manager[data-site="light"] .tm-podium-4 { background:linear-gradient(165deg, rgba(120,132,148,.34), rgba(200,208,218,.16) 58%, #fff); box-shadow:0 4px 10px rgba(90,100,115,.14); }
.tm-manager[data-site="light"] .tm-podium-4 .tm-podium-photo .tm-player-avatar { box-shadow:0 0 0 2px #fff, 0 0 0 4px #97a0af; }
.tm-manager[data-site="light"] .tm-podium-photo .tm-player-avatar { box-shadow:0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,.12); }
.tm-manager[data-site="light"] .tm-podium-1 .tm-podium-photo .tm-player-avatar { box-shadow:0 0 0 2px #fff, 0 0 0 4px #f5b301, 0 2px 6px rgba(245,163,0,.22); }
.tm-manager[data-site="light"] .tm-podium-2 .tm-podium-photo .tm-player-avatar { box-shadow:0 0 0 2px #fff, 0 0 0 4px #aab6c6; }
.tm-manager[data-site="light"] .tm-podium-3 .tm-podium-photo .tm-player-avatar { box-shadow:0 0 0 2px #fff, 0 0 0 4px #cd7f32; }
@media (max-width: 560px) {
    .tm-podium-thirds { gap:10px; }
    .tm-podium-step { min-width:0; padding:10px 10px 8px; }
    .tm-podium-1 { min-width:160px; }
    .tm-podium-1 .tm-podium-name { font-size:15px; }
    .tm-podium-name { font-size:12.5px; }
}
/* Desktop / tablet: all four cards (1st, 2nd, 3rd, 3rd) in a single equal-width row with the
   SAME gap between every card. display:contents dissolves the tiers/thirds wrappers so the four
   steps become direct, equal flex siblings of .tm-podium (otherwise each wrapper takes half the
   width and spaces its own two cards, which left uneven gaps). Mobile (<=560px) keeps the pyramid. */
@media (min-width: 561px) {
    .tm-podium { flex-direction:row; flex-wrap:nowrap; align-items:stretch; justify-content:center; gap:14px; }
    .tm-podium-tiers, .tm-podium-thirds { display:contents; }
    /* cards stretch to equal height, so push each card's medal/name/label to the bottom */
    .tm-podium-step { min-width:0; flex:1 1 0; max-width:240px; justify-content:flex-end; }
    .tm-podium-1, .tm-podium-2 { min-width:0; }
}

/* ---------------- "Starting soon" badge on scheduled matches ---------------- */
.tm-sched-soon { display:inline-flex; align-items:center; gap:5px; margin-left:8px; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.03em; white-space:nowrap; color:#8a5600; background:rgba(255,190,60,.22); border:1px solid rgba(255,170,20,.45); }
.tm-manager[data-site="dark"] .tm-sched-soon { color:#ffc247; }
.tm-sched-soon-dot { width:7px; height:7px; border-radius:50%; background:#ff9d00; animation:tmSoonPulse 1.2s ease-in-out infinite; }
.tm-sched-soon-row { border-color:rgba(255,170,20,.5) !important; }
@keyframes tmSoonPulse { 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.35; transform:scale(.72);} }

/* ---------------- Check-in progress (Players tab) ---------------- */
.tm-checkin-progress { display:flex; align-items:center; gap:12px; margin:10px 0; padding:9px 13px; border:1px solid var(--tm-border); border-radius:12px; background:var(--tm-surface); }
.tm-checkin-progress-label { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:800; color:var(--tm-text); white-space:nowrap; }
.tm-checkin-progress-label .material-symbols-outlined { font-size:17px; color:var(--tm-green); }
.tm-checkin-bar { flex:1 1 auto; height:8px; border-radius:999px; background:var(--tm-row-bg); overflow:hidden; }
.tm-checkin-bar-fill { height:100%; border-radius:999px; background:linear-gradient(90deg, var(--tm-green), #4dc97a); transition:width .35s ease; }
.tm-checkin-bar-done { background:linear-gradient(90deg, #1f8b48, #34d058); }

/* ---------------- Announcement composer (Players tab) ---------------- */
.tm-announce-panel { margin:10px 0; }
.tm-announce-panel textarea.tm-input { width:100%; resize:vertical; min-height:64px; }

/* ---------------- "More Info" popup (replaces Show Details + Info tab) ---------------- */
.tm-info-modal-desc { white-space:normal; margin-bottom:12px; line-height:1.5; opacity:.92; }
.tm-info-modal-meta { margin-bottom:12px; }
/* Club / Arena card: the venue, given the weight of a card rather than one more row in the grid,
   because it answers "where do I go" - the question the grid of format settings never did. */
.tm-venue-card { display:flex; align-items:center; gap:12px; margin:0 0 12px; padding:11px 12px; border:1px solid var(--tm-border); border-radius:12px; background:var(--tm-surface-2); }
.tm-venue-figure { flex:0 0 auto; width:52px; height:52px; display:inline-flex; align-items:center; justify-content:center; overflow:hidden; border-radius:10px; background:rgba(255,255,255,.06); border:1px solid var(--tm-border); }
.tm-venue-figure img { width:100%; height:100%; object-fit:cover; display:block; }
.tm-venue-figure .material-symbols-outlined { font-size:26px; color:var(--tm-muted); }
.tm-venue-copy { min-width:0; display:flex; flex-direction:column; gap:2px; }
.tm-venue-label { color:var(--tm-muted); font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.tm-venue-name { font-size:16px; font-weight:900; line-height:1.2; word-break:break-word; }
.tm-venue-name .tm-venue-link { color:inherit; text-decoration:none; }
.tm-venue-name .tm-venue-link:hover { text-decoration:underline; }
.tm-venue-meta { display:flex; align-items:center; gap:6px; color:var(--tm-muted); font-size:12px; font-weight:700; }
.tm-venue-meta .tm-player-flag { flex:0 0 auto; }
.tm-venue-type { color:var(--tm-muted); font-size:11px; font-weight:700; opacity:.85; }
/* "Directions" / "Find on map". A chip rather than a plain link: it is the one thing in this popup
   a reader ACTS on, and on a phone it hands straight over to the Maps app. */
.tm-venue-map { align-self:flex-start; display:inline-flex; align-items:center; gap:5px; margin-top:6px; padding:5px 11px; border:1px solid rgba(47,125,211,.5); border-radius:999px; background:rgba(47,125,211,.16); color:var(--tm-text); font-size:12px; font-weight:800; line-height:16px; text-decoration:none; }
.tm-venue-map:hover { background:rgba(47,125,211,.28); border-color:rgba(47,125,211,.7); }
.tm-venue-map .material-symbols-outlined { font-size:16px; line-height:16px; }

/* ---------------- Ranking points set editor (league / tournament forms) ---------------- */
.tm-ranking-tier-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; }
.tm-ranking-tier { display:block; }
.tm-ranking-tier span { display:block; font-size:11px; color:var(--tm-muted); font-weight:700; margin-bottom:3px; text-transform:none; }
.tm-ranking-tier .tm-input, .tm-ranking-tier .tm-select { width:100%; box-sizing:border-box; }
/* Points per stage vs points per finishing place */
.tm-ranking-mode { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:10px; }
.tm-ranking-mode label { display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--tm-text); cursor:pointer; }
.tm-ranking-mode input { accent-color:var(--tm-accent); }
.tm-ranking-place-controls { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:8px; margin-bottom:10px; }
/* Narrower than the stage grid: these are numbered boxes, and a long draw needs a lot of them. */
.tm-ranking-place-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); gap:6px; max-height:280px; overflow-y:auto; padding-right:4px; }
.tm-ranking-place { display:block; }
.tm-ranking-place span { display:block; font-size:11px; color:var(--tm-muted); font-weight:800; margin-bottom:2px; }
.tm-ranking-place .tm-input { width:100%; box-sizing:border-box; padding:6px 8px; font-size:13px; }
[data-tm-ranking-note] a { color:var(--tm-green); font-weight:700; }
.tm-rankings-set-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; font-size:12.5px; font-weight:700; color:var(--tm-muted); }
.tm-rankings-set-row .tm-select { width:auto; min-width:180px; padding:6px 10px; font-size:13px; }
.tm-rankings-overall-link { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin:12px 0 16px; padding:11px 13px; border:1px solid var(--tm-border); border-radius:10px; background:var(--tm-surface); color:var(--tm-muted); font-size:12px; font-weight:700; }
.tm-rankings-overall-link > div, .tm-rankings-overall-link .tm-btn { display:flex; align-items:center; gap:7px; }
.tm-rankings-overall-link > div > .material-symbols-outlined { color:var(--tm-accent); font-size:20px; }
.tm-rankings-overall-link .tm-btn { margin-left:auto; }
.tm-rankings-overall-link .tm-btn .material-symbols-outlined { font-size:16px; }

/* Leaders — fix players in place (kept by Shuffle Draw / group Shuffle) */
.tm-leaders-panel { margin:10px 0 4px; border:1px solid var(--tm-border); border-radius:10px; background:var(--tm-surface-2); overflow:hidden; }
.tm-leaders-summary { display:flex; align-items:center; gap:8px; cursor:pointer; padding:10px 12px; font-size:13.5px; font-weight:800; color:var(--tm-text); user-select:none; list-style:none; }
.tm-leaders-summary::-webkit-details-marker { display:none; }
.tm-leaders-summary .material-symbols-outlined { color:var(--tm-accent); font-size:19px; }
.tm-leaders-count { margin-left:auto; font-size:11.5px; font-weight:800; color:var(--tm-accent); background:rgba(255,140,0,.14); border-radius:999px; padding:2px 9px; }
.tm-leaders-body { padding:0 12px 12px; }
.tm-leaders-note { font-size:12px; color:var(--tm-muted); line-height:1.5; margin-bottom:9px; }
.tm-leaders-list { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.tm-leader-item { display:inline-flex; align-items:center; gap:6px; padding:5px 10px 5px 8px; border:1px solid var(--tm-border); border-radius:999px; background:var(--tm-input-bg); font-size:12.5px; font-weight:700; color:var(--tm-text); cursor:pointer; user-select:none; }
.tm-leader-item input { accent-color:var(--tm-accent); width:15px; height:15px; margin:0; }
.tm-leader-item.is-fixed { border-color:var(--tm-accent); background:rgba(255,140,0,.12); }
.tm-leader-lock { font-size:15px; color:var(--tm-soft); }
.tm-leader-item.is-fixed .tm-leader-lock { color:var(--tm-accent); }
.tm-leaders-actions { display:flex; gap:8px; flex-wrap:wrap; }
.tm-group-lock { font-size:16px; color:var(--tm-accent); margin:0 2px; vertical-align:middle; }
.tm-sort-lock { font-size:16px; color:var(--tm-accent); margin-left:6px; flex:0 0 auto; }
.tm-sort-slot.is-fixed { border-color:var(--tm-accent); box-shadow:inset 3px 0 0 var(--tm-accent); }

/* =================================================================================================
   APP SHELL / TOP CHROME
   -------------------------------------------------------------------------------------------------
   index_tournament.php is nearly always included inside some other page's <div> (site page, app
   browse tab, popup). These rules make it read as a self-contained application anyway: one centred
   column with symmetric gutters, a persistent header bar carrying the app identity on the left and
   the actions on the right, and buttons with real (44px) tap targets and visible keyboard focus.

   MULTI-INSTANCE SAFE: every selector hangs off .tm-manager / .tm-head - never an id - so two or
   more TM instances embedded in different divs of the SAME page each style themselves. (Only one
   instance is ever *driven* by tournament.js; that is unchanged here.)

   Appended last on purpose: this file's convention is that late blocks win on source order over the
   equal-specificity rules above, and the .tm-manager prefix lifts specificity over the plain
   .tm-shell / .tm-head / .tm-btn rules inside the earlier @media blocks (media queries add none).
   ================================================================================================= */

/* ---- Shell ------------------------------------------------------------------------------------
   Was width:99% + 0px side padding, i.e. a ragged half-percent margin that lined up with nothing on
   the host page and let content run edge to edge on wide monitors. Now: a real centred column. */
.tm-manager .tm-shell {
    width:100%;
    max-width:1520px;
    margin:0 auto;
    padding:22px 18px 30px;
}

/* ---- Persistent header bar --------------------------------------------------------------------
   .tm-head-empty no longer means "hide the bar" - it means "no action buttons", so the bar collapses
   to the brand alone. tournament.js keeps toggling that class exactly as before; only what the class
   *does* changed, so detail views (which move Back/Share/Theme into the card) still look right. */
.tm-manager .tm-head,
.tm-manager .tm-head.tm-head-viewer,
.tm-manager .tm-head.tm-head-empty {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    min-height:54px;
    margin:0 0 18px;
    padding:0 0 12px;
    border-bottom:1px solid var(--tm-border);
}
.tm-manager .tm-head-brand {
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    margin-right:auto;   /* pins the identity left, everything else right */
}
/* App-icon tile: the single strongest "this is an application" cue in the whole layout. */
.tm-manager .tm-head-brand-mark {
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    border-radius:10px;
    font-size:20px;
    line-height:1;
    color:#fff;
    background:linear-gradient(135deg, var(--tm-accent), color-mix(in srgb, var(--tm-accent) 68%, #000));
    box-shadow:0 2px 7px color-mix(in srgb, var(--tm-accent) 38%, transparent);
}
.tm-manager .tm-head-brand-name {
    min-width:0;
    font-size:14.5px;
    font-weight:800;
    letter-spacing:.015em;
    line-height:1.15;
    color:var(--tm-text);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.tm-manager .tm-head > .tm-actions { align-items:center; min-width:0; }

/* ---- Buttons ----------------------------------------------------------------------------------
   Same geometry as before (min-height 36 keeps every dense row that depends on it intact) - what is
   added is the finish: a press state, a hover that does not wash the label out, and a focus ring. */
.tm-manager .tm-btn {
    border-radius:9px;
    font-size:13px;
    letter-spacing:.012em;
    white-space:nowrap;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    box-shadow:0 1px 2px rgba(0,0,0,.14);
    transition:filter .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
/* .tm-btn-sm is declared earlier with a lower specificity than the block above, so restate its
   font size here - otherwise every small button would silently grow to the 13px set above. */
.tm-manager .tm-btn-sm { font-size:12px; border-radius:8px; }
.tm-manager .tm-btn:hover:not(:disabled) { opacity:1; filter:brightness(1.09); }
.tm-manager .tm-btn:active:not(:disabled) { transform:translateY(1px); box-shadow:0 0 0 rgba(0,0,0,0); }
.tm-manager .tm-btn:disabled { box-shadow:none; filter:none; transform:none; }
/* Ghost buttons were fully transparent, so on busy backgrounds they read as plain text rather than
   as something you can press. Give them the surface colour and keep the outline. */
.tm-manager .tm-btn-ghost { background:var(--tm-surface); box-shadow:0 1px 2px rgba(0,0,0,.10); }
.tm-manager .tm-btn-ghost:hover:not(:disabled) { filter:none; background:var(--tm-surface-2); border-color:var(--tm-accent); color:var(--tm-text); }
.tm-manager[data-site="light"] .tm-btn-ghost { background:#ffffff; border-color:rgba(17,24,39,.16); color:#1d2330; }
.tm-manager[data-site="light"] .tm-btn-ghost:hover:not(:disabled) { background:#f1f5fa; border-color:var(--tm-blue); }
/* Square icon button. Opt-in via the class - CSS cannot tell an icon-only button from an icon+label
   one (:only-child counts elements, not the bare text node that carries the label), so anything
   automatic here silently crushes every labelled button in the row. */
.tm-manager .tm-head-icon-btn {
    flex:0 0 auto;
    width:36px;
    min-width:36px;
    padding:0;
    gap:0;
}

/* ---- Keyboard focus ---------------------------------------------------------------------------
   There was no focus styling anywhere in the TM (and .tm-input even sets outline:none), so keyboard
   and switch-control users had no idea where they were. :focus-visible only shows for keyboard use,
   so pointer users see no change. */
.tm-manager .tm-btn:focus-visible,
.tm-manager .tm-tab:focus-visible,
.tm-manager .tm-view-tab:focus-visible,
.tm-manager .tm-input:focus-visible,
.tm-manager .tm-select:focus-visible,
.tm-manager .tm-textarea:focus-visible,
.tm-manager .tm-help-lang:focus-visible {
    outline:2px solid var(--tm-accent);
    outline-offset:2px;
}

/* ---- Tab strip --------------------------------------------------------------------------------
   Centre the tabs when they fit, but stay fully scrollable when they do not. The mobile rule above
   used justify-content:center on an overflowing flex row, which makes the leading tabs unreachable
   in Chrome/Safari (overflow is clipped on the start side) - auto margins centre without that bug. */
.tm-manager .tm-tabs {
    justify-content:flex-start;
    scroll-snap-type:x proximity;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
}
.tm-manager .tm-tabs::-webkit-scrollbar { display:none; }
.tm-manager .tm-tabs > :first-child { margin-left:auto; }
.tm-manager .tm-tabs > :last-child { margin-right:auto; }
.tm-manager .tm-tab { scroll-snap-align:center; }

/* ---- Empty / loading state --------------------------------------------------------------------- */
.tm-manager .tm-empty { border-radius:12px; padding:26px 20px; font-weight:600; }

/* ---- Mobile ------------------------------------------------------------------------------------
   The header used to squash its buttons to 28px tall with 11px labels to fit them all on one row -
   well under the 44px minimum tap target, and it looked cramped. Instead: full-height buttons, and
   everything after the leading (primary) control collapses to a 44px icon square. Nothing is hidden
   or unreachable - if it still does not fit, .tm-actions wraps to a second right-aligned row. */
@media (max-width:760px) {
    .tm-manager .tm-shell { padding:12px 12px 24px; }
    .tm-league-ranking-head { grid-template-columns:42px minmax(0, 1fr); gap:10px; padding:13px; }
    .tm-league-ranking-icon { width:42px; height:42px; border-radius:10px; }
    .tm-league-ranking-icon .material-symbols-outlined { font-size:24px; }
    .tm-league-ranking-copy h3 { font-size:17px; }
    .tm-league-ranking-count { grid-column:1 / -1; min-width:0; padding:7px 10px; flex-direction:row; gap:6px; justify-content:flex-start; }
    .tm-league-ranking-count strong { font-size:15px; }
    .tm-league-ranking-count span { margin:0; }
    .tm-league-ranking-table-wrap { padding:4px 10px 10px; }
    .tm-manager .tm-head,
    .tm-manager .tm-head.tm-head-viewer,
    .tm-manager .tm-head.tm-head-empty {
        min-height:0;
        gap:8px;
        margin:0 0 14px;
        padding:0 0 10px;
        flex-wrap:wrap;
    }
    .tm-manager .tm-head-brand { gap:8px; }
    .tm-manager .tm-head-brand-mark { width:30px; height:30px; border-radius:9px; font-size:19px; }
    .tm-manager .tm-head-brand-name { font-size:13.5px; }
    .tm-manager .tm-head > .tm-actions {
        flex:1 1 auto;
        min-width:0;
        gap:6px;
        flex-wrap:wrap;
        justify-content:flex-end;
        margin-top:0;
    }
    .tm-manager .tm-head > .tm-actions .tm-btn,
    .tm-manager .tm-head > .tm-head-icon-btn { min-height:44px; font-size:13px; gap:6px; padding:0 14px; border-radius:11px; }
    .tm-manager .tm-head > .tm-actions .tm-btn .material-symbols-outlined,
    .tm-manager .tm-head > .tm-head-icon-btn .material-symbols-outlined { font-size:21px; }
    /* Icon-first: the first control keeps its label (it is the primary action - "+ Tournament" on
       the list, "Back" elsewhere), every following one becomes a 44px square. font-size:0 hides the
       bare text node next to the icon; the icon size is restored right after. */
    .tm-manager .tm-head > .tm-actions > .tm-btn:not(:first-child),
    .tm-manager .tm-head > .tm-actions > :not(:first-child) .tm-btn,
    .tm-manager .tm-head > .tm-head-icon-btn {
        width:44px;
        min-width:44px;
        padding:0;
        gap:0;
        font-size:0;
        letter-spacing:0;
    }
    .tm-manager .tm-head > .tm-actions > .tm-btn:not(:first-child) > *,
    .tm-manager .tm-head > .tm-actions > :not(:first-child) .tm-btn > * { font-size:0; }
    .tm-manager .tm-head > .tm-actions > .tm-btn:not(:first-child) .material-symbols-outlined,
    .tm-manager .tm-head > .tm-actions > :not(:first-child) .tm-btn .material-symbols-outlined,
    .tm-manager .tm-head > .tm-head-icon-btn .material-symbols-outlined { font-size:21px; }
    /* The detail views move Back/Share/Help/Theme/Edit/End/Delete into the card head; those are
       tm-btn-sm (30px). Lift them to a comfortable target and space the wrapped rows evenly. */
    .tm-manager .tm-panel-head > .tm-actions,
    .tm-manager .tm-public-hero-actions { gap:8px; row-gap:8px; justify-content:flex-end; }
    .tm-manager .tm-panel-head > .tm-actions .tm-btn-sm,
    .tm-manager .tm-public-hero-actions .tm-btn-sm { min-height:40px; padding:0 13px; font-size:12.5px; border-radius:10px; }
    .tm-manager .tm-panel-head > .tm-actions .tm-btn-sm .material-symbols-outlined,
    .tm-manager .tm-public-hero-actions .tm-btn-sm .material-symbols-outlined { font-size:19px; }
    /* The card's More button and every row's menu button stay square at a full tap size. */
    .tm-manager .tm-panel-head > .tm-actions .tm-btn-sm.tm-more-btn,
    .tm-manager .tm-player-actions .tm-btn-sm.tm-more-btn { width:40px; min-width:40px; padding:0; }
    .tm-manager .tm-head > .tm-head-icon-btn { width:44px; min-width:44px; }
    /* The list-mode switch stacks on mobile (.tm-toolbar is display:block above); keep the pieces
       aligned to the same gutter as the cards underneath instead of butting together. */
    .tm-manager .tm-toolbar > * + * { margin-top:10px; }
}
@media (max-width:560px) {
    /* The icon tile alone carries the identity; the wordmark would force the buttons to wrap. */
    .tm-manager .tm-head-brand-name { display:none; }
    /* Four tabs do not fit one narrow row, and a horizontally scrolled strip gives no hint that
       "TV Board" is off-screen. Wrapping to two centred rows shows every tab at once instead - and
       once the row cannot overflow, justify-content:center is safe to use. */
    .tm-manager .tm-tabs {
        flex-wrap:wrap;
        overflow-x:visible;
        justify-content:center;
        scroll-snap-type:none;
    }
    .tm-manager .tm-tabs > :first-child { margin-left:0; }
    .tm-manager .tm-tabs > :last-child { margin-right:0; }
}
@media (prefers-reduced-motion: reduce) {
    .tm-manager .tm-btn { transition:none; }
    .tm-manager .tm-btn:active:not(:disabled) { transform:none; }
    .tm-manager .tm-tabs { scroll-snap-type:none; }
}

/* =================================================================================================
   CONTRAST / READABILITY PASS  (appended last so these win on source order)
   -------------------------------------------------------------------------------------------------
   Every rule below was derived from a measured audit, not from eyeballing: the TM's components were
   rendered in three scenarios - dark (snookeron), light (billiardon), and light-theme-on-snookeron
   (the [data-default-theme="dark"] case, which forces a white --tm-bg) - and the painted text colour
   of every text node was scored against its COMPOSITED effective background (translucent tints
   composited, gradient colour stops resolved and scored at their worst stop) using the WCAG formula.
   Anything under 4.5:1 for normal text / 3:1 for large text is corrected here.

   Two rules of thumb this pass encodes, both learned the hard way:
     1. Never set `color` on a control without also pinning `-webkit-text-fill-color`. In Blink/WebKit
        text-fill-color wins when the glyphs are painted, so a third-party rule that overrides only
        `color` leaves the old fill in place - that is exactly how the score popup ended up painting
        white text on the white field main.css forced underneath it.
     2. A translucent tint over a surface is NOT the colour you picked. --tm-green on
        rgba(37,155,85,.18) over #222 lands at 3.5:1, not the ~7:1 the raw pair suggests.

   !important throughout, per request, so nothing downstream can quietly undo a legibility fix.
   ================================================================================================= */

/* ---- Status badges -------------------------------------------------------------------------------
   10-11px uppercase on a translucent tint of their own hue - the worst-case combination in the whole
   UI, and every one of them was failing. The tints stay (they carry the meaning); the text is pushed
   away from the background until it clears 4.5:1 in each theme. */
.tm-manager[data-site="dark"] .tm-badge-live,
.tm-manager[data-site="dark"] .tm-badge-paid       { color:#5fd98d !important; }
.tm-manager[data-site="dark"] .tm-badge-unpaid     { color:#ff9b9b !important; }
.tm-manager[data-site="dark"] .tm-badge-bye        { color:#c2c2c2 !important; }
.tm-manager[data-site="dark"] .tm-badge-published  { color:#8ec5ff !important; }
.tm-manager[data-site="light"] .tm-badge-live,
.tm-manager[data-site="light"] .tm-badge-paid      { color:#0d6a33 !important; }
.tm-manager[data-site="light"] .tm-badge-unpaid    { color:#971d1d !important; }
.tm-manager[data-site="light"] .tm-badge-bye       { color:#454b57 !important; }
.tm-manager[data-site="light"] .tm-badge-published { color:#14508f !important; }
.tm-manager[data-site="light"] .tm-badge-upcoming,
.tm-manager[data-site="light"] .tm-badge-ff        { color:#7a5000 !important; }

/* ---- Live / score chips -------------------------------------------------------------------------- */
.tm-manager[data-site="dark"] .tm-score-pill        { color:#8ec5ff !important; }
.tm-manager[data-site="dark"] .tm-score-pill.live,
.tm-manager[data-site="dark"] .tm-live-chip         { color:#5fd98d !important; }
.tm-manager[data-site="dark"] .tm-side-points.live  { color:#ffb04d !important; }
/* the light live-row gradient peaks around rgb(159,211,180), so the green has to go a shade
   deeper than the badge green to clear 4.5:1 at the lightest point of the ramp */
.tm-manager[data-site="light"] .tm-score-pill.live,
.tm-manager[data-site="light"] .tm-live-chip        { color:#0a5b2b !important; }
.tm-manager[data-site="light"] .tm-side-points.live { color:#8a3f06 !important; }

/* ---- Accent-on-white ----------------------------------------------------------------------------
   --tm-accent (#ff8c00) is a fine accent on a dark surface but only reaches ~2.3:1 on white, so the
   light theme needs a darker shade for anything that is TEXT rather than decoration. */
.tm-manager[data-site="light"] .tm-view-tab.active  { color:#9a5200 !important; }
.tm-manager[data-site="light"] .tm-help-lang-tag    { color:#9a5200 !important; }

/* ---- Winner podium labels -----------------------------------------------------------------------
   10.5px uppercase sitting on each rank's metallic gradient; the per-rank hues were all too close to
   their own backdrop in both themes. */
.tm-manager[data-site="dark"] .tm-podium-1 .tm-podium-label { color:#ffd479 !important; }
.tm-manager[data-site="dark"] .tm-podium-2 .tm-podium-label { color:#cfd8e3 !important; }
.tm-manager[data-site="dark"] .tm-podium-3 .tm-podium-label { color:#edb184 !important; }
.tm-manager[data-site="dark"] .tm-podium-4 .tm-podium-label { color:#b6bfcc !important; }
.tm-manager[data-site="light"] .tm-podium-1 .tm-podium-label { color:#7a5000 !important; }
.tm-manager[data-site="light"] .tm-podium-2 .tm-podium-label { color:#41495a !important; }
.tm-manager[data-site="light"] .tm-podium-3 .tm-podium-label { color:#7d431c !important; }
.tm-manager[data-site="light"] .tm-podium-4 .tm-podium-label { color:#464e5c !important; }

/* ---- Solid buttons ------------------------------------------------------------------------------
   White 13px bold on the brand fills was 3.2-4.3:1 - under the 4.5 needed at this size. The blue and
   green are darkened just enough to clear it (the hue is unchanged, the shift is ~1 step).
   The orange is the exception: reaching 4.5 against white would have required darkening it into
   brown, so it keeps its colour and takes near-black text instead, which reads at ~5.6:1. */
.tm-manager .tm-btn-primary { background:#2a70c0 !important; }
.tm-manager .tm-btn-success { background:#1c8043 !important; }
.tm-manager .tm-btn-warning { background:#d77900 !important; color:#14181f !important; -webkit-text-fill-color:#14181f !important; }
.tm-manager .tm-btn-warning .material-symbols-outlined { color:#14181f !important; }
/* the credits pill rides inside the green Create button, so it inherits that darker fill */
.tm-manager .tm-btn-success .tm-inline-count,
.tm-manager .tm-btn-success .tm-inline-count-number { color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; }

/* ---- Active pill tabs ---------------------------------------------------------------------------
   .tm-tab.active paints white on a gradient. In dark theme that ramp starts at --tm-accent (#ff8c00)
   where white is only 2.3:1, so the dark active tab gets near-black text on its orange; the light
   theme's blue ramp is darkened instead so white stays legible across the whole gradient. */
.tm-manager[data-site="dark"] .tm-tab.active { color:#14181f !important; -webkit-text-fill-color:#14181f !important; }
.tm-manager[data-site="dark"] .tm-tab.active .material-symbols-outlined { color:#14181f !important; }
/* both stops must clear 4.5:1 against white, not just the darker end of the ramp */
.tm-manager[data-site="light"] .tm-tab.active { background:linear-gradient(135deg, #2a70c0, #1f5590) !important; }

/* ---- Form controls: pin the fill alongside the colour, in both themes -------------------------- */
.tm-manager[data-site="dark"] .tm-input,
.tm-manager[data-site="dark"] .tm-select,
.tm-manager[data-site="dark"] .tm-textarea { color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; caret-color:#ffffff !important; }
.tm-manager[data-site="light"] .tm-input,
.tm-manager[data-site="light"] .tm-select,
.tm-manager[data-site="light"] .tm-textarea { color:#111827 !important; -webkit-text-fill-color:#111827 !important; caret-color:#111827 !important; }
/* A disabled field must stay readable, just visibly inert - the UA default washes it under 4.5:1. */
.tm-manager .tm-input:disabled,
.tm-manager .tm-select:disabled,
.tm-manager .tm-textarea:disabled { opacity:.75 !important; }

/* ---------------------------------------------------------------------------------------------
 * Table reservations ("next match on this table") + swap
 *
 * A reservation is a match queued on a table that is still playing. Everything below exists to
 * make that state readable at a glance: on the Schedule row, in the table dropdown, on the TV
 * board, and in the two small sheets used to set it up.
 * ------------------------------------------------------------------------------------------- */

/* Schedule row: the "choose what plays here next" button, and the badge on the match that is it. */
.tm-sched-reserve-btn.has-reservation { color:var(--tm-blue); }
.tm-sched-upnext { display:inline-flex; align-items:center; gap:5px; margin-left:8px; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.03em; white-space:nowrap; color:#1c5893; background:rgba(47,125,211,.16); border:1px solid rgba(47,125,211,.42); }
.tm-manager[data-site="dark"] .tm-sched-upnext { color:#8ec0f5; }
.tm-sched-upnext .material-symbols-outlined { font-size:14px; }
.tm-sched-reserved-row { border-color:rgba(47,125,211,.45) !important; }

/* Sheets: small modal panels rendered inside .tm-manager so they inherit its theme variables. */
.tm-sheet-overlay { position:fixed; inset:0; z-index:70; display:flex; align-items:center; justify-content:center; padding:18px; background:rgba(7,12,20,.62); backdrop-filter:blur(3px); }
.tm-sheet { width:100%; max-width:560px; max-height:86vh; display:flex; flex-direction:column; border:1px solid var(--tm-border); border-radius:14px; background:var(--tm-surface); box-shadow:0 24px 60px rgba(0,0,0,.45); overflow:hidden; }
.tm-sheet-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:14px 16px 12px; border-bottom:1px solid var(--tm-border); background:var(--tm-surface-2); }
.tm-sheet-title { font-size:16px; font-weight:900; letter-spacing:.01em; color:var(--tm-text); }
.tm-sheet-body { padding:14px 16px 16px; overflow-y:auto; }

.tm-sheet-current { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:10px 12px; border:1px solid rgba(47,125,211,.42); border-radius:10px; background:rgba(47,125,211,.1); }
.tm-sheet-current-text { display:flex; align-items:center; gap:8px; min-width:0; font-size:13px; color:var(--tm-text); }
.tm-sheet-current-text .material-symbols-outlined { font-size:18px; color:var(--tm-blue); flex:0 0 auto; }

.tm-sheet-list { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.tm-sheet-option { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:11px 12px; border:1px solid var(--tm-border); border-radius:10px; background:var(--tm-surface-2); color:var(--tm-text); cursor:pointer; transition:border-color .15s ease, background .15s ease; }
.tm-sheet-option:hover { border-color:var(--tm-blue); background:rgba(47,125,211,.1); }
.tm-sheet-option-num { flex:0 0 auto; font-weight:900; font-size:13px; color:var(--tm-muted); font-variant-numeric:tabular-nums; }
.tm-sheet-option-main { display:flex; flex-direction:column; gap:3px; min-width:0; flex:1 1 auto; }
.tm-sheet-option-names { font-weight:800; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tm-sheet-option-meta { font-size:11px; color:var(--tm-muted); }
.tm-sheet-option-warn { display:flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:#b06a00; }
.tm-manager[data-site="dark"] .tm-sheet-option-warn { color:var(--tm-yellow); }
.tm-sheet-option-warn .material-symbols-outlined { font-size:14px; flex:0 0 auto; }
.tm-sheet-option-go { flex:0 0 auto; color:var(--tm-muted); font-size:20px; }

/* Exactly the trap documented on .tm-help-menu above, and it bit the History sheet the same way:
   the light theme's --tm-surface / --tm-surface-2 are 20%-white GLASS colours that only read as
   "white" because the page behind them is light. Floating on the sheet's own dark backdrop they
   let it through, so the panel came out dark while the light theme's near-black --tm-text stayed
   near-black - unreadable. Anything that floats over a backdrop needs a solid surface per theme,
   never the raw variable. (Only reachable on the fallback path now that sheets are hosted by the
   site popup shell, but the standalone overlay must not be broken where it is still used.) */
.tm-manager[data-site="dark"] .tm-sheet      { background:#222; }
.tm-manager[data-site="dark"] .tm-sheet-head { background:#2b2b2b; }
.tm-manager[data-site="light"] .tm-sheet      { background:#ffffff; border-color:rgba(17,24,39,.16); }
.tm-manager[data-site="light"] .tm-sheet-head { background:#f1f4f8; border-bottom-color:rgba(17,24,39,.12); }

/* ---- sheet hosted inside the site's popup shell (#popupWindowContent) ----
   The shell already draws the card, the backdrop and the close X, so the sheet renders flat and
   fills it. .tm-sheet-host carries data-site = the SHELL's theme (tournament.js: "light" on
   billiardon, whose popups are light glass, "dark" on snookeron and dartsgameon) - never the TM's
   own theme toggle, because the sheet sits on the shell, not on the page. */
.tm-sheet-host { display:block; }
.tm-sheet-host .tm-sheet { max-width:none; max-height:none; border:0; border-radius:0; box-shadow:none; overflow:visible; }
.tm-sheet-host .tm-sheet-head { padding:0 0 12px; border-bottom:1px solid var(--tm-border); }
.tm-sheet-host .tm-sheet-body { padding:14px 0 0; overflow:visible; }
/* GLASS palette for EVERY hosted sheet. The solid palettes above paint a #171717 host and a #222
   card (or white on white) INSIDE the shell - the grey box the Export & archive sheet used to be
   on billiardon's petrol, and a black box on snookeron's near-black. Here the host and the sheet are
   transparent and every surface is a translucent wash of the text colour, so the shell's own glass
   shows through and the sheet reads as part of the popup. [data-site] is written into the selector
   on purpose: it out-ranks the solid `.tm-manager[data-site] .tm-sheet` rules above (0,4,0 against
   0,3,0). .tm-sheet-glass remains as a harmless marker on the More Info sheet. */
.tm-manager.tm-sheet-host[data-site="dark"] {
    --tm-bg:transparent; --tm-surface:rgba(255,255,255,.07); --tm-surface-2:rgba(255,255,255,.11); --tm-border:rgba(255,255,255,.2);
    --tm-text:#ffffff; --tm-muted:rgba(255,255,255,.78); --tm-soft:rgba(255,255,255,.6);
    --tm-row-bg:rgba(255,255,255,.05); --tm-match-bg:rgba(255,255,255,.06); --tm-line:rgba(255,255,255,.3);
    background:transparent; color:#ffffff;
}
.tm-manager.tm-sheet-host[data-site="light"] {
    --tm-bg:transparent; --tm-surface:rgba(17,24,39,.045); --tm-surface-2:rgba(17,24,39,.075); --tm-border:rgba(17,24,39,.16);
    --tm-text:#111827; --tm-muted:#4b5563; --tm-soft:#6b7280;
    --tm-input-bg:#ffffff; --tm-row-bg:rgba(17,24,39,.035); --tm-match-bg:rgba(17,24,39,.045); --tm-line:rgba(17,24,39,.3);
    background:transparent; color:#111827;
}
.tm-manager.tm-sheet-host[data-site="dark"] .tm-sheet, .tm-manager.tm-sheet-host[data-site="dark"] .tm-sheet-head,
.tm-manager.tm-sheet-host[data-site="light"] .tm-sheet, .tm-manager.tm-sheet-host[data-site="light"] .tm-sheet-head { background:transparent; }
.tm-manager.tm-sheet-host[data-site="light"] .tm-sheet-head { border-bottom-color:rgba(17,24,39,.14); }
/* More Info content: the site shell sets a 20px / 100% line-height on everything inside it. */
.tm-more-info-sheet { font-size:14px; line-height:1.4; }
.tm-more-info-sheet .tm-sheet-title { font-size:18px; line-height:1.25; }
.tm-more-info-sheet .tm-info-modal-desc { color:var(--tm-text); }
.tm-more-info-sheet .tm-panel { margin-bottom:0; }
/* Fields inside the shell are a THREE-way specificity fight, and the middle rule is the one that
   makes it lethal:
     main.css   `.popupWindow input:not(...x5)`            (0,6,1) !important  background-color:#fff
     this file  `.tm-manager[data-site="dark"] .tm-input`  (0,3,0) !important  background + text #fff
   The site rule wins the background, the dark-theme rule still wins -webkit-text-fill-color (the
   site never sets it, and it is what WebKit paints from once present) - so the field lands on
   white-on-white, the exact defect reported in the Share modal.
   Scoped by the shell's ID on purpose: an id is (1,0,0) and beats any pile of classes, whereas
   `.tm-sheet-host .tm-input` (0,2,0) loses to BOTH rules above and silently changes nothing.
   Background and colour are both pinned so the pair agrees on its own rather than being correct
   only for as long as some other stylesheet forces the half this one omits.
   The publish sheet's Best Of / Race To boxes are plain inputs (no .tm-input), so they are named
   here too: without them the number a manager types was white on white on the dark site. */
#popupWindowContent .tm-sheet-host .tm-input,
#popupWindowContent .tm-sheet-host .tm-select,
#popupWindowContent .tm-sheet-host .tm-textarea,
#popupWindowContent .tm-sheet-host .tm-publish-options input { background:#ffffff !important; color:#111827 !important; -webkit-text-fill-color:#111827 !important; caret-color:#111827 !important; border-color:rgba(17,24,39,.25) !important; }
#popupWindowContent .tm-sheet-host .tm-input::placeholder,
#popupWindowContent .tm-sheet-host .tm-textarea::placeholder { color:#6b7280 !important; -webkit-text-fill-color:#6b7280 !important; }
#popupWindowContent .tm-sheet-host .tm-select option { background:#ffffff !important; color:#111827 !important; }

.tm-sheet-swap { display:flex; flex-direction:column; gap:6px; }
.tm-sheet-swap-icon { display:flex; justify-content:center; color:var(--tm-muted); }

/* TV board: the reservation on the live card, and the per-table grouping of Up Next. */
.tm-tv-now-upnext { display:flex; align-items:baseline; gap:8px; margin-top:9px; padding-top:8px; border-top:1px dashed var(--tm-border); min-width:0; }
.tm-tv-now-upnext-label { flex:0 0 auto; font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:var(--tm-muted); }
.tm-tv-now-upnext-names { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:800; color:var(--tm-text); }
.tm-tv-board:fullscreen .tm-tv-now-upnext-label { font-size:12px; }
.tm-tv-board:fullscreen .tm-tv-now-upnext-names { font-size:17px; }

.tm-tv-next-group { display:flex; flex-direction:column; gap:8px; }
.tm-tv-next-group + .tm-tv-next-group { margin-top:6px; }
.tm-tv-next-group-head { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:900; letter-spacing:.09em; text-transform:uppercase; color:var(--tm-muted); padding:2px 2px 0; }
.tm-tv-next-group-head .material-symbols-outlined { font-size:15px; }
.tm-tv-board:fullscreen .tm-tv-next-group-head { font-size:14px; }

@media (max-width: 640px) {
    .tm-sheet { max-width:none; max-height:92vh; }
    .tm-sheet-overlay { padding:10px; align-items:flex-end; }
}
.tm-tv-now-reserve { margin-top:10px; width:100%; justify-content:center; }
.tm-tv-board:fullscreen .tm-tv-now-reserve { display:none; }

/* ---------------------------------------------------------------------------------------------
 * Tournament-day tools: schedule filter, running-late badge, time-shift sheet
 * ------------------------------------------------------------------------------------------- */
.tm-sched-filter { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 10px; padding:8px 10px; border:1px solid var(--tm-border); border-radius:10px; background:var(--tm-surface); }
.tm-sched-filter-icon { color:var(--tm-muted); font-size:18px; flex:0 0 auto; }
.tm-sched-filter-input { flex:1 1 220px; min-width:0; }
.tm-sched-filter-chips { display:flex; gap:4px; flex:0 0 auto; }
.tm-sched-filter-chip { min-height:30px; padding:0 11px; border:1px solid var(--tm-border); border-radius:999px; background:var(--tm-surface-2); color:var(--tm-muted); font-size:12px; font-weight:800; cursor:pointer; }
.tm-sched-filter-chip.active { border-color:var(--tm-accent); color:var(--tm-text); background:color-mix(in srgb, var(--tm-accent) 16%, transparent); }
.tm-sched-filter-count { flex:0 0 auto; font-size:11px; font-weight:800; color:var(--tm-muted); font-variant-numeric:tabular-nums; }
/* The Minimalistic View reuses the schedule filter's bar (same job, same controls). It only sits in
   a panel that already has its own padding, so it loses the outer card and keeps the divider. */
.tm-minimal-list-panel .tm-minimal-filter { margin:0 0 10px; padding:0 0 10px; border:0; border-bottom:1px solid var(--tm-border); border-radius:0; background:transparent; }
.tm-minimal-list-panel .tm-minimal-filter .tm-sched-filter-input { min-height:34px; }
.tm-minimal-list-panel [data-tm-minimal-filter-empty] { margin-bottom:10px; }

/* A live match that has passed the tournament's planned match length. Amber, not red: it is
   information for the manager, not an error. */
.tm-sched-overrun { display:inline-flex; align-items:center; gap:5px; margin-left:8px; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.03em; white-space:nowrap; color:#8a4a00; background:rgba(255,140,0,.18); border:1px solid rgba(255,140,0,.5); }
.tm-manager[data-site="dark"] .tm-sched-overrun { color:#ffb057; }
.tm-sched-overrun .material-symbols-outlined { font-size:14px; }
/* An overrunning match is STILL a live match, so this must not touch border-color: doing that
   overrode .tm-sched-row.live and the row stopped reading as live in the Schedule tab while the
   Draw tab still showed it green. The overrun is marked with an amber stripe down the left edge
   instead, on top of the green live styling.
   The stripe is absolutely positioned, so it stays out of the row's grid flow. */
.tm-sched-overrun-row { position:relative; }
.tm-sched-overrun-row::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; border-radius:8px 0 0 8px; background:var(--tm-accent); pointer-events:none; }

.tm-sheet-shift { display:flex; flex-direction:column; gap:12px; }
.tm-sheet-shift-row { display:flex; align-items:center; gap:8px; }
.tm-sheet-shift-row .tm-input { width:110px; text-align:center; font-weight:800; }
.tm-sheet-shift-unit { color:var(--tm-muted); font-size:12px; font-weight:700; }

/* ---- round match-length sheet (the pen in a Minimalistic View stage title) --------------------
   The manager is setting ONE number, so the number is the sheet: a big centred readout with a
   button either side, the frames-to-win answer under it, and the values they actually use one tap
   away. The ± buttons carry .tm-btn/.tm-btn-ghost rather than styling a bare <button>, because the
   sheet also renders inside the site's popup shell where global button rules would reach it - and
   .tm-btn is the class that shell is already known to leave alone. */
.tm-target-sheet { display:flex; flex-direction:column; gap:14px; }
.tm-target-stepper {
    display:flex; flex-direction:column; align-items:center; gap:11px; padding:16px 14px;
    border:1px solid var(--tm-border); border-radius:14px; background:var(--tm-surface-2);
    background-image:linear-gradient(165deg, rgba(255,140,0,.11), rgba(255,140,0,.015) 62%);
}
.tm-target-kind { font-size:11px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:var(--tm-accent); }
.tm-target-stepper-row { display:flex; align-items:center; gap:14px; }
/* .tm-manager-prefixed on purpose: `.tm-manager .tm-btn` (0,2,0) two rules up sets border-radius,
   font-size and more on every button in here, and a bare `.tm-target-step` (0,1,0) loses to it - the
   stepper came out as a 9px-radius rounded square with the wrong digit size. Same reason for the
   presets below. */
.tm-manager .tm-target-step { width:46px; height:46px; min-height:46px; padding:0; border-radius:50%; flex:0 0 auto; }
.tm-manager .tm-target-step .material-symbols-outlined { font-size:24px; }
.tm-manager .tm-target-step:hover:not(:disabled) { border-color:var(--tm-accent); color:var(--tm-accent); }
/* The native spinners would sit on top of a 34px digit and are redundant next to the ± buttons. */
.tm-target-value.tm-input {
    width:108px; height:64px; min-height:64px; padding:0; border-radius:12px;
    text-align:center; font-size:34px; font-weight:900; line-height:1; font-variant-numeric:tabular-nums;
    -moz-appearance:textfield; appearance:textfield;
}
.tm-target-value.tm-input::-webkit-outer-spin-button,
.tm-target-value.tm-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.tm-target-wins { display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--tm-muted); }
.tm-target-wins b { font-size:17px; font-weight:900; letter-spacing:0; color:var(--tm-text); font-variant-numeric:tabular-nums; }
.tm-target-presets { display:flex; flex-direction:column; gap:7px; }
.tm-target-presets-label { font-size:12px; font-weight:700; text-transform:uppercase; color:var(--tm-muted); }
.tm-target-presets-row { display:flex; gap:7px; flex-wrap:wrap; }
.tm-manager .tm-target-preset { min-width:48px; min-height:36px; font-size:14px; font-weight:900; font-variant-numeric:tabular-nums; }
.tm-manager .tm-target-preset.active { background:var(--tm-accent); border-color:var(--tm-accent); color:#fff; }
.tm-target-scope { margin:0; }
.tm-target-scope-count { font-size:17px; font-weight:900; color:var(--tm-text); font-variant-numeric:tabular-nums; }

@media (max-width: 640px) {
    .tm-sched-filter { gap:6px; }
    .tm-sched-filter-input { flex-basis:100%; order:-1; }
    /* The Minimalistic view's filter has no chips, so it stays one line: the magnifier in front of
       the box and the count after it. Stacking the box on a row of its own (above) is for the
       schedule filter, whose chips need the second row - here it left the icon alone underneath. */
    .tm-minimal-filter { flex-wrap:nowrap; }
    .tm-minimal-filter .tm-sched-filter-input { flex:1 1 0; order:0; }
}
/* Running-late chip on the TV board: sits beside the LIVE chip, never replaces it. */
.tm-tv-now-chips { display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; }
.tm-tv-over-chip { display:inline-flex; align-items:center; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:900; letter-spacing:.06em; white-space:nowrap; color:#8a4a00; background:rgba(255,140,0,.2); border:1px solid rgba(255,140,0,.55); }
.tm-manager[data-site="dark"] .tm-tv-over-chip { color:#ffb057; }
.tm-tv-board:fullscreen .tm-tv-over-chip { font-size:15px; padding:3px 12px; }

/* Tournament-day readiness and the ordered waiting list. */
.tm-readiness-panel { margin:0 0 12px; padding:12px; border:1px solid var(--tm-border); border-radius:12px; background:var(--tm-surface); }
.tm-readiness-panel .tm-panel-title { display:flex; align-items:center; gap:7px; }
.tm-readiness-panel .tm-panel-title .material-symbols-outlined { color:var(--tm-accent); }
.tm-readiness-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin-top:10px; }
.tm-readiness-item { display:flex; gap:8px; align-items:flex-start; min-width:0; padding:8px; border:1px solid var(--tm-border); border-radius:9px; background:var(--tm-surface-2); }
.tm-readiness-item > .material-symbols-outlined { font-size:19px; }
.tm-readiness-item strong,.tm-readiness-item small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tm-readiness-item strong { font-size:12px; }
.tm-readiness-item small { margin-top:2px; color:var(--tm-muted); font-size:11px; }
.tm-readiness-item.is-ok > .material-symbols-outlined { color:#25a65a; }
.tm-readiness-item.is-warn > .material-symbols-outlined { color:var(--tm-accent); }
.tm-waitlist-panel { margin-top:12px; }
.tm-waitlist-panel .tm-panel-title { display:flex; align-items:center; gap:7px; }
.tm-waitlist-panel .tm-panel-title .material-symbols-outlined { color:var(--tm-muted); }
.tm-waitlist-list { margin-top:8px; }
.tm-undo-bar { position:fixed; z-index:9999; left:50%; bottom:20px; transform:translateX(-50%); display:flex; align-items:center; gap:14px; padding:10px 12px 10px 16px; border:1px solid var(--tm-border); border-radius:999px; background:var(--tm-surface); color:var(--tm-text); box-shadow:0 10px 28px rgba(0,0,0,.28); font-size:13px; font-weight:700; }
.tm-undo-bar button { border:0; border-radius:999px; padding:6px 12px; background:var(--tm-accent); color:#fff; font:inherit; font-weight:900; cursor:pointer; }
.tm-my-tournament { margin-top:12px; padding:10px; border:1px solid var(--tm-border); border-radius:10px; background:var(--tm-surface-2); }
.tm-my-tournament-title,.tm-my-tournament-status { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:900; }
.tm-my-tournament-title .material-symbols-outlined { color:var(--tm-accent); font-size:17px; }
.tm-my-tournament-status { margin-top:7px; color:#2c9b54; }
.tm-my-tournament-status .material-symbols-outlined { font-size:16px; }
.tm-my-tournament-next { display:flex; flex-direction:column; gap:2px; margin-top:8px; font-size:12px; }
.tm-my-tournament-next span { color:var(--tm-muted); }
/* "Waiting for M54: Ana vs Bo · Live 3–2 · Table 4" - under Next match while the opponent is undecided. */
/* Last N first-round rematch warning (tmLastNRematchHtml), above the Last N seeding controls. */
.tm-rematch-warning { display:flex; align-items:center; gap:12px; margin:0 0 10px; padding:10px 12px; border-radius:12px; border:1px solid rgba(255,194,71,.55); background:rgba(255,194,71,.12); color:var(--tm-text); }
.tm-rematch-warning > .material-symbols-outlined { flex:0 0 auto; color:var(--tm-yellow, #ffc247); font-size:24px; }
.tm-rematch-text { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; font-size:13px; line-height:1.35; }
.tm-rematch-text strong { font-size:14px; }
.tm-rematch-warning .tm-btn { flex:0 0 auto; }
@media(max-width: 560px) { .tm-rematch-warning { flex-wrap:wrap; } .tm-rematch-warning .tm-btn { width:100%; justify-content:center; } }
/* Another tournament books the same tables at an overlapping time (tmTableOverlapsHtml): under Tables
 * Used in the tournament form, and at the top of the publish sheet. Same colours as the rematch warning. */
.tm-overlap-warn { display:flex; align-items:flex-start; gap:10px; margin:8px 0 0; padding:10px 12px; border-radius:12px; border:1px solid rgba(255,194,71,.55); background:rgba(255,194,71,.12); color:var(--tm-text); font-size:13px; line-height:1.4; }
.tm-overlap-warn > .material-symbols-outlined { flex:0 0 auto; color:var(--tm-yellow, #ffc247); font-size:22px; }
.tm-overlap-warn > div { flex:1 1 auto; min-width:0; }
.tm-overlap-warn-head { font-weight:700; }
.tm-overlap-warn ul { margin:4px 0 4px 18px; padding:0; }
.tm-overlap-warn li { margin:2px 0; overflow-wrap:anywhere; }
.tm-overlap-warn-foot { font-size:12px; color:var(--tm-muted); }
.tm-publish-sheet .tm-overlap-warn { margin:0; }
.tm-my-tournament-waiting { display:flex; align-items:center; gap:6px; margin-top:4px; font-size:12px; color:var(--tm-muted); }
.tm-my-tournament-waiting .material-symbols-outlined { font-size:15px; color:var(--tm-accent); }

@media (max-width: 720px) { .tm-readiness-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .tm-readiness-grid { grid-template-columns:1fr; } }

/* Plate (consolation) bracket: present, but visibly not the main event. */
.tm-bracket-plate { border-style:dashed; }
.tm-bracket-plate .tm-bracket-title { color:var(--tm-muted); }
.tm-bracket-plate-tag { margin-left:8px; padding:2px 8px; border-radius:999px; font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:var(--tm-muted); background:var(--tm-surface-2); border:1px solid var(--tm-border); }
.tm-playing-sessions {
    border: 1px solid var(--tm-border);
    border-radius: 12px;
    padding: 14px;
    background: var(--tm-surface-2);
}
.tm-playing-sessions-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.tm-playing-session {
    display: grid;
    grid-template-columns: minmax(130px, .75fr) minmax(210px, 1fr) minmax(210px, 1fr) 36px;
    align-items: end;
    gap: 9px;
    padding: 9px;
    border-radius: 9px;
}
.tm-playing-session:nth-child(even) { background: var(--tm-surface); }
.tm-playing-session label { display: grid; gap: 4px; }
.tm-playing-session small { color: var(--tm-muted); font-size: 11px; font-weight: 700; }
.tm-settings-sessions { margin-top:14px; padding-top:14px; border-top:1px solid var(--tm-border); }
.tm-settings-session { display:flex; justify-content:space-between; gap:14px; padding:9px 10px; border-radius:8px; }
.tm-settings-session:nth-child(odd) { background:var(--tm-surface-2); }
.tm-settings-session span { color:var(--tm-muted); text-align:right; }
.tm-sched-fixed { display:inline-flex; align-items:center; color:var(--tm-accent); }
.tm-sched-fixed .material-symbols-outlined { font-size:15px; }
@media (max-width: 760px) {
    .tm-playing-sessions-head { align-items: stretch; flex-direction: column; }
    .tm-playing-session { grid-template-columns: 1fr 1fr 34px; }
    .tm-playing-session > [data-tm-session-label] { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
    .tm-playing-session { grid-template-columns: 1fr 34px; }
    .tm-playing-session label { grid-column: 1; }
    .tm-playing-session > .tm-match-icon-btn { grid-column: 2; grid-row: 2; }
}

/* ---- Teams format: settings, roster squads, tie sheet, rubber rows ------------------------ */
.tm-team-settings-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:10px 14px; margin-top:6px; }
.tm-team-setting { display:grid; gap:4px; }
.tm-team-setting > small { color:var(--tm-muted); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.tm-team-setting > small.tm-panel-note { text-transform:none; font-weight:400; letter-spacing:0; }
.tm-team-setting-wide { grid-column:span 2; }
.tm-team-custom { margin-top:10px; padding:10px; border:1px dashed var(--tm-border); border-radius:10px; }
.tm-team-custom-row { display:grid; grid-template-columns:26px 110px 1fr 20px 1fr 70px 34px; align-items:center; gap:6px; margin-top:6px; }
.tm-team-custom-num { color:var(--tm-muted); font-weight:800; font-size:12px; text-align:center; }
.tm-team-entry-identity { display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tm-team-short { display:inline-flex; align-items:center; padding:1px 7px; border-radius:999px; background:var(--tm-surface-2); border:1px solid var(--tm-border); color:var(--tm-muted); font-size:11px; font-weight:800; letter-spacing:.04em; }
.tm-player-row .tm-squad { flex-basis:100%; width:100%; margin-top:8px; padding:8px 10px; border-radius:10px; background:var(--tm-surface-2); border:1px solid var(--tm-border); }
.tm-squad-head { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--tm-muted); }
.tm-squad-head .material-symbols-outlined { font-size:16px; }
.tm-squad-count { color:var(--tm-text); }
.tm-squad-count.is-short { color:var(--tm-danger, #d9534f); }
.tm-squad-list { list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:4px; }
.tm-squad-member { display:flex; align-items:center; gap:8px; padding:4px 6px; border-radius:8px; }
.tm-squad-member.is-captain { background:var(--tm-surface); }
.tm-squad-seat { width:20px; flex:0 0 20px; text-align:center; font-size:11px; font-weight:800; color:var(--tm-muted); }
.tm-squad-who { display:flex; flex-direction:column; min-width:0; flex:1 1 auto; }
.tm-squad-captain { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:var(--tm-accent); color:#fff; font-size:11px; font-weight:800; }
.tm-squad-played { display:inline-flex; color:var(--tm-muted); }
.tm-squad-played .material-symbols-outlined { font-size:16px; }
.tm-squad-actions { display:inline-flex; gap:2px; margin-left:auto; }
.tm-squad-add { margin-top:8px; max-width:360px; }
.tm-team-add-panel { margin-top:10px; }
.tm-team-mode { display:flex; gap:6px; margin-bottom:8px; }
.tm-squad-picker { margin-top:10px; }
.tm-squad-picked { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.tm-team-chip { display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:999px; background:var(--tm-surface-2); border:1px solid var(--tm-border); font-size:13px; cursor:pointer; }
.tm-team-chip.is-captain { border-color:var(--tm-accent); }
.tm-team-chip .tm-team-clear { border:0; background:transparent; color:var(--tm-muted); cursor:pointer; font-size:16px; line-height:1; padding:0; }
.tm-input-short { max-width:120px; }
.tm-team-edit-panel { padding:10px; margin:4px 0 8px; border-radius:10px; background:var(--tm-surface-2); border:1px solid var(--tm-border); }
.tm-team-edit-panel .tm-inline-fields { flex-wrap:wrap; gap:8px; }
.tm-sched-rubber { margin-left:26px; border-left:3px solid var(--tm-border); background:var(--tm-surface-2); }
.tm-sched-rubber.tm-live { border-left-color:var(--tm-live, #2e9c4a); }
.tm-sched-rubber.tm-sched-dead { opacity:.55; }
.tm-rubber-tag { display:inline-block; padding:1px 6px; border-radius:6px; background:var(--tm-surface); border:1px solid var(--tm-border); font-size:11px; font-weight:800; }
.tm-rubber-type { display:block; font-size:10px; color:var(--tm-muted); text-transform:uppercase; letter-spacing:.04em; }
.tm-rubber-side { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.tm-tie-chip { color:var(--tm-accent); }
.tm-tie-sheet { display:flex; flex-direction:column; gap:10px; }
.tm-tie-score { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; background:var(--tm-surface-2); }
.tm-tie-score > span:last-child { text-align:right; }
.tm-tie-score strong { font-size:22px; letter-spacing:.06em; }
.tm-tie-rubber { padding:8px 10px; border-radius:10px; border:1px solid var(--tm-border); }
.tm-tie-rubber.is-dead { opacity:.55; }
.tm-tie-rubber-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; }
.tm-tie-rubber-score { margin-left:auto; font-weight:800; }
.tm-tie-lineup { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; margin-top:8px; }
.tm-tie-lineup-side { display:flex; flex-direction:column; gap:4px; min-width:0; }
.tm-tie-lineup > .tm-btn { grid-column:1 / -1; justify-self:end; }
.tm-tie-lineup-static { display:flex; align-items:center; gap:8px; margin-top:6px; font-size:13px; }
.tm-public-team-card--squad { flex-direction:column; align-items:stretch; }
.tm-public-team-head { display:flex; align-items:center; gap:8px; }
.tm-public-squad { display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:6px; }
.tm-public-squad-member { display:inline-flex; align-items:center; gap:4px; }
@media (max-width: 640px) {
    .tm-team-setting-wide { grid-column:span 1; }
    .tm-team-custom-row { grid-template-columns:22px 1fr 1fr 1fr; }
    .tm-team-custom-row > .tm-sched-vs { display:none; }
    .tm-sched-rubber { margin-left:10px; }
    .tm-tie-lineup { grid-template-columns:1fr; }
    .tm-tie-lineup > .tm-sched-vs { display:none; }
}

/* Phones: the manager card keeps Back, Share, the primary action and the menu on one row. Back shows
   only its arrow, and on the narrowest screens Share only its icon (both keep their name in
   title/aria-label). The registration card keeps its status and its button side by side. */
@media (max-width: 480px) {
    .tm-manager .tm-panel-head > .tm-manage-head-actions { gap:6px; row-gap:6px; }
    .tm-manager .tm-panel-head > .tm-manage-head-actions .tm-btn-sm { padding:0 11px; }
    .tm-manager .tm-panel-head > .tm-manage-head-actions .tm-btn-back { width:40px; min-width:40px; padding:0; }
    .tm-manage-head-actions .tm-btn-back .tm-btn-label { display:none; }
    .tm-register-row { flex-wrap:nowrap; gap:8px; }
    .tm-register-row .tm-badge { min-width:0; padding:4px 9px; font-size:10.5px; line-height:1.2; text-align:left; white-space:normal; }
    .tm-register-row .tm-btn { flex:0 0 auto; padding:0 12px; font-size:13px; }
    .tm-register-note { font-size:14px; min-width:0; }
}
@media (max-width: 374px) {
    .tm-manager .tm-panel-head > .tm-manage-head-actions .tm-btn-share { width:40px; min-width:40px; padding:0; }
    .tm-manage-head-actions .tm-btn-share .tm-btn-label { display:none; }
}