/* Tour public results. The same house look as the Cup and the Clash boards:
 * the dark red to black backdrop, Anton for anything read from across a room,
 * Poppins for everything else, the Corner Pin Standings purple rule under the
 * banner, banded rows, a squad tint rail on each row, the cut as a drawn
 * purple ribbon. Built for a phone first, then opened up for a desktop.
 * Everything is prefixed tr- so no other page can be restyled by it.
 */
:root {
  --tr-bg: #0a0a0d;
  --tr-panel: rgba(255, 255, 255, 0.04);
  --tr-panel-2: rgba(255, 255, 255, 0.075);
  --tr-line: rgba(255, 255, 255, 0.10);
  --tr-text: #f4f4f6;
  --tr-muted: #9a9aa4;
  --tr-brand: #6d28d9;
  --tr-brand-light: #7c3aed;
  --tr-cut: #8b5cf6;
  --tr-live: #a855f7;
  --tr-green: #22c55e;
  --tr-red: #dc2626;
  --tr-gold: #f5c542;
  --tr-display: 'Anton', 'Poppins', Impact, sans-serif;
  --tr-body: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --tr-sq-1: #6d28d9; --tr-sq-2: #dc2626; --tr-sq-3: #0ea5e9; --tr-sq-4: #16a34a; --tr-sq-5: #f59e0b; --tr-sq-6: #db2777;
}
* { box-sizing: border-box; }
html { background: var(--tr-bg); }
body.tr-body {
  margin: 0; min-height: 100vh; color: var(--tr-text); font-family: var(--tr-body); font-size: 15px; line-height: 1.4;
  position: relative; isolation: isolate;
  background:
    radial-gradient(ellipse 90% 520px at 12% -6%, rgba(109, 40, 217, 0.42) 0%, transparent 60%),
    radial-gradient(ellipse 70% 460px at 100% 8%, rgba(220, 38, 38, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 120% 900px at 50% 0%, #15080f 0%, var(--tr-bg) 70%),
    var(--tr-bg);
  background-attachment: fixed;
}
/* The grain: a fixed film of fine noise over the whole backdrop, and a faint
   diagonal brushed weave under it, so the black reads as a surface. */
body.tr-body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px; opacity: 0.26; mix-blend-mode: overlay;
}
body.tr-body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.022) 0 2px, transparent 2px 9px), repeating-linear-gradient(25deg, rgba(0, 0, 0, 0.35) 0 1px, transparent 1px 7px);
  opacity: 0.7;
}
a { color: inherit; }

/* ---- Banner -------------------------------------------------------------- */
.tr-head { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: linear-gradient(to bottom, rgba(8, 8, 12, 0.97), rgba(8, 8, 12, 0.86)); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(124, 58, 237, 0.55), 0 10px 30px rgba(0, 0, 0, 0.45); }
.tr-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: linear-gradient(90deg, var(--tr-brand), var(--tr-live) 45%, var(--tr-red) 100%); opacity: 0.9; }
.tr-head-logo { filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.45)); }
.tr-head-logo { height: 34px; width: auto; flex: 0 0 auto; }
.tr-head-title { min-width: 0; flex: 1 1 auto; font-family: var(--tr-display); font-size: clamp(1rem, 4.8vw, 1.6rem); letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.05; overflow-wrap: anywhere; }
.tr-head-link { flex: 0 0 auto; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tr-muted); text-decoration: none; padding: 6px 10px; border: 1px solid var(--tr-line); border-radius: 999px; }
.tr-head-link:hover { color: var(--tr-text); border-color: var(--tr-brand-light); }
.tr-head-links { display: flex; gap: 6px; flex: 0 0 auto; margin-left: auto; }

.tr-wrap { max-width: 1180px; margin: 0 auto; padding: 10px 10px 40px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* ---- Hero ---------------------------------------------------------------- */
.tr-hero { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: linear-gradient(135deg, rgba(109, 40, 217, 0.26), rgba(220, 38, 38, 0.10) 60%, rgba(0, 0, 0, 0.3)); border: 1px solid var(--tr-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 34px rgba(0, 0, 0, 0.4); overflow: hidden; }
.tr-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.08), transparent 45%); }
.tr-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 0.8rem; color: var(--tr-muted); }
.tr-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.tr-status-live { background: rgba(168, 85, 247, 0.18); color: var(--tr-live); }
.tr-status-final { background: rgba(34, 197, 94, 0.16); color: var(--tr-green); }
.tr-status-draft { background: var(--tr-panel-2); color: var(--tr-muted); }
.tr-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.tr-status-live .tr-dot { animation: tr-pulse 1.6s ease-in-out infinite; }
@keyframes tr-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } }

.tr-champ { display: flex; align-items: center; gap: 10px; }
.tr-champ-label { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tr-gold); }
.tr-champ-name { font-family: var(--tr-display); font-size: clamp(1.6rem, 8vw, 3rem); line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; overflow-wrap: anywhere; }
.tr-champ-block { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.tr-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.tr-fact { position: relative; display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 7px 9px; border-radius: 10px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.42) 70%); border: 1px solid rgba(255, 255, 255, 0.07); border-left: 3px solid var(--tr-brand); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 -8px 16px rgba(0, 0, 0, 0.35); }
.tr-fact-label { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tr-muted); }
.tr-fact-value { font-family: var(--tr-display); font-size: clamp(1rem, 5vw, 1.5rem); letter-spacing: 0.02em; line-height: 1.1; overflow-wrap: anywhere; background: linear-gradient(180deg, #ffffff 0%, #d9d6e6 55%, #a9a3c4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tr-fact-sub { font-size: 0.64rem; color: var(--tr-muted); overflow-wrap: anywhere; }

/* ---- Stage switcher ------------------------------------------------------ */
.tr-stagebar { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; scrollbar-width: none; }
.tr-stagebar::-webkit-scrollbar { display: none; }
.tr-stagepill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--tr-line); background: var(--tr-panel); text-decoration: none; font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.tr-stagepill b { font-family: var(--tr-display); font-weight: 400; font-size: 0.95rem; color: var(--tr-brand-light); }
.tr-stagepill.is-current { border-color: var(--tr-brand-light); background: rgba(109, 40, 217, 0.25); }
.tr-stagepill.is-done { color: var(--tr-muted); }

/* ---- Section title ------------------------------------------------------- */
.tr-section { display: flex; flex-direction: column; gap: 6px; scroll-margin-top: 64px; min-width: 0; }
.tr-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tr-section-title { margin: 0; font-family: var(--tr-display); font-weight: 400; font-size: clamp(1.25rem, 6vw, 2rem); letter-spacing: 0.035em; text-transform: uppercase; line-height: 1; }
.tr-section-sub { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tr-muted); }

/* ---- Standings ----------------------------------------------------------- */
.tr-board { border-radius: 10px; overflow: hidden; border: 1px solid var(--tr-line); background: rgba(0, 0, 0, 0.3); }
.tr-row { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 0 8px; min-height: 46px; padding: 5px 10px 5px 14px; border-bottom: 1px solid var(--tr-line); }
.tr-row:last-child { border-bottom: 0; }
.tr-row.is-even { background: var(--tr-panel); }
.tr-row::before { content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 5px; border-radius: 3px; background: var(--row-tint, transparent); }
.tr-row.tr-sq-1 { --row-tint: var(--tr-sq-1); } .tr-row.tr-sq-2 { --row-tint: var(--tr-sq-2); } .tr-row.tr-sq-3 { --row-tint: var(--tr-sq-3); }
.tr-row.tr-sq-4 { --row-tint: var(--tr-sq-4); } .tr-row.tr-sq-5 { --row-tint: var(--tr-sq-5); } .tr-row.tr-sq-6 { --row-tint: var(--tr-sq-6); }
.tr-row.is-squad-lead { background-image: linear-gradient(90deg, color-mix(in srgb, var(--row-tint, transparent) 40%, transparent) 0%, color-mix(in srgb, var(--row-tint, transparent) 12%, transparent) 45%, transparent 85%); }
.tr-row.is-squad-lead::before { width: 9px; }
.tr-row-head { min-height: 32px; background: rgba(0, 0, 0, 0.45); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tr-muted); }
.tr-row-head::before { display: none; }
.tr-rank { font-family: var(--tr-display); font-size: 1.4rem; line-height: 1; color: var(--tr-muted); text-align: center; }
.tr-row.is-in .tr-rank { color: var(--tr-brand-light); }
.tr-row.is-first .tr-rank { color: var(--tr-gold); }
.tr-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tr-name { font-weight: 600; font-size: 0.95rem; line-height: 1.15; overflow-wrap: anywhere; text-decoration: none; }
.tr-nameline { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.tr-ave { flex: none; font-size: 0.72rem; font-weight: 600; color: var(--tr-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tr-ave::before { content: 'avg '; font-weight: 400; }
a.tr-name:hover { color: var(--tr-brand-light); }
.tr-sub { font-size: 0.68rem; color: var(--tr-muted); overflow-wrap: anywhere; }
.tr-games { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.tr-g { font-size: 0.66rem; font-weight: 600; font-variant-numeric: tabular-nums; padding: 0 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); color: #d4d4dc; }
.tr-g.is-high { background: rgba(245, 197, 66, 0.2); color: var(--tr-gold); }
.tr-g.is-200 { color: #fff; }
.tr-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 5px; border-radius: 7px; background: var(--row-tint, var(--tr-panel-2)); color: #fff; font-weight: 800; font-size: 0.72rem; }
.tr-avg { font-size: 0.72rem; color: var(--tr-muted); font-variant-numeric: tabular-nums; text-align: right; }
.tr-total { display: flex; flex-direction: column; align-items: flex-end; min-width: 54px; }
.tr-total b { font-family: var(--tr-display); font-weight: 400; font-size: 1.35rem; line-height: 1; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.tr-total span { font-size: 0.6rem; color: var(--tr-muted); font-variant-numeric: tabular-nums; }
.tr-row.is-out .tr-name, .tr-row.is-out .tr-rank { opacity: 0.5; }
.tr-row.is-withdrawn .tr-name { opacity: 0.42; font-style: italic; }
.tr-pts { font-family: var(--tr-display); font-size: 1.1rem; color: var(--tr-brand-light); }
.tr-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: middle; background: var(--tr-panel-2); color: var(--tr-muted); }
.tr-tag-out { background: rgba(220, 38, 38, 0.18); color: #f87171; }

/* The cut: a purple rule drawn across with the count sitting in it. */
.tr-cut { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: rgba(139, 92, 246, 0.06); border-bottom: 1px solid var(--tr-line); }
.tr-cut-rule { flex: 1 1 auto; height: 2px; background: linear-gradient(90deg, transparent, var(--tr-cut), transparent); }
.tr-cut-label { display: inline-flex; align-items: baseline; gap: 6px; color: var(--tr-cut); white-space: nowrap; }
.tr-cut-count { font-family: var(--tr-display); font-size: 1.15rem; }
.tr-cut-to { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }

.tr-more { display: block; }
.tr-more > summary { cursor: pointer; list-style: none; padding: 10px; text-align: center; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tr-brand-light); border-top: 1px solid var(--tr-line); }
.tr-more > summary::-webkit-details-marker { display: none; }
.tr-more[open] > summary { display: none; }

/* ---- Matches ------------------------------------------------------------- */
.tr-matches { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.tr-match { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--tr-line); }
.tr-match-round { grid-column: 1 / -1; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tr-muted); }
.tr-side { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tr-side-b { justify-content: flex-end; text-align: right; }
.tr-side-name { font-weight: 600; font-size: 0.85rem; overflow-wrap: anywhere; min-width: 0; }
.tr-side-score { font-family: var(--tr-display); font-size: 1.5rem; line-height: 1; color: var(--tr-muted); }
.tr-side.is-win .tr-side-score { color: var(--tr-green); }
.tr-side.is-win .tr-side-name { color: #fff; }
.tr-side:not(.is-win) .tr-side-name { color: var(--tr-muted); }
.tr-vs { font-size: 0.62rem; font-weight: 800; color: var(--tr-muted); letter-spacing: 0.1em; }

/* ---- High games ---------------------------------------------------------- */
.tr-highs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.tr-high { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--tr-line); text-decoration: none; min-width: 0; }
.tr-high-pins { font-family: var(--tr-display); font-size: 1.6rem; line-height: 1; color: var(--tr-gold); }
.tr-high:nth-child(n+4) .tr-high-pins { color: var(--tr-text); }
.tr-high-who { display: flex; flex-direction: column; min-width: 0; }
.tr-high-name { font-weight: 600; font-size: 0.8rem; overflow-wrap: anywhere; }

/* ---- Payouts ------------------------------------------------------------- */
.tr-pay { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--tr-line); font-size: 0.85rem; }
.tr-pay:last-child { border-bottom: 0; }
.tr-pay b { font-family: var(--tr-display); font-weight: 400; font-size: 1.05rem; }

/* ---- Event list ---------------------------------------------------------- */
.tr-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.tr-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--tr-line); border-left: 4px solid var(--tr-brand); text-decoration: none; }
.tr-card:hover { border-color: var(--tr-brand-light); }
.tr-card-name { font-family: var(--tr-display); font-size: 1.2rem; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.05; overflow-wrap: anywhere; }
.tr-card-meta { grid-column: 1; font-size: 0.72rem; color: var(--tr-muted); }
.tr-card-win { grid-row: 1 / span 2; grid-column: 2; display: flex; flex-direction: column; align-items: flex-end; text-align: right; max-width: 150px; }
.tr-card-win b { font-weight: 700; font-size: 0.85rem; overflow-wrap: anywhere; }
.tr-card-win span { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tr-gold); }

/* ---- Athlete ------------------------------------------------------------- */
.tr-frames { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); border: 1px solid var(--tr-line); border-radius: 8px; overflow: hidden; }
.tr-frame { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 1px; border-right: 1px solid var(--tr-line); min-width: 0; background: rgba(0, 0, 0, 0.3); }
.tr-frame:last-child { border-right: 0; }
.tr-frame-n { font-size: 0.55rem; color: var(--tr-muted); }
.tr-frame-m { font-weight: 800; font-size: 0.8rem; white-space: nowrap; }
.tr-frame-t { font-family: var(--tr-display); font-size: 0.85rem; }
.tr-frame-s { font-size: 0.5rem; color: var(--tr-brand-light); }
.tr-gamehead { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 2px; font-size: 0.72rem; color: var(--tr-muted); }
.tr-gamehead b { font-family: var(--tr-display); font-weight: 400; font-size: 1.2rem; color: var(--tr-text); }

.tr-foot { text-align: center; font-size: 0.72rem; color: var(--tr-muted); }
.tr-foot a { color: var(--tr-muted); }

/* ---- Wider screens ------------------------------------------------------- */
@media (min-width: 720px) {
  .tr-wrap { padding: 16px 20px 48px; gap: 18px; }
  .tr-head { padding: 10px 20px; }
  .tr-head-logo { height: 44px; }
  .tr-hero { padding: 18px 20px; }
  .tr-row { grid-template-columns: 56px minmax(180px, 1.4fr) 40px minmax(0, 2fr) 70px 90px; min-height: 52px; padding: 6px 14px 6px 18px; }
  .tr-row.no-squad { grid-template-columns: 56px minmax(180px, 1.4fr) minmax(0, 2fr) 70px 90px; }
  .tr-rank { font-size: 1.7rem; }
  .tr-name { font-size: 1.05rem; }
  .tr-games { margin-top: 0; justify-content: flex-start; }
  .tr-g { font-size: 0.8rem; padding: 2px 6px; }
  .tr-total b { font-size: 1.7rem; }
  .tr-avg { font-size: 0.85rem; }
  .tr-matches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-highs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-phone { display: none !important; }
}
@media (max-width: 719px) {
  .tr-desk { display: none !important; }
}

/* A titled group that opens and closes (matchplay games, payout ladders). */
.tr-group { display: block; }
.tr-group > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; padding: 6px 10px; margin-bottom: 6px; border-radius: 8px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--tr-line); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.tr-group > summary::-webkit-details-marker { display: none; }
.tr-group > summary::after { content: '+'; color: var(--tr-brand-light); font-size: 1.1rem; }
.tr-group[open] > summary::after { content: '-'; }

/* ---- Low man out: the groups, read like a cup match --------------------- */
.tr-lmo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.tr-lmo-group { border-radius: 10px; overflow: hidden; border: 1px solid var(--tr-line); background: rgba(0, 0, 0, 0.3); }
.tr-lmo-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 7px 10px; background: rgba(0, 0, 0, 0.45); font-family: var(--tr-display); font-size: 1.05rem; letter-spacing: 0.03em; color: var(--tr-brand-light); }
.tr-lmo-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 84px; align-items: center; gap: 0 8px; min-height: 44px; padding: 4px 10px; border-top: 1px solid var(--tr-line); }
.tr-lmo-row .tr-rank { font-size: 1.15rem; }
.tr-lmo-row .tr-total { min-width: 40px; }
.tr-lmo-row.is-out .tr-name, .tr-lmo-row.is-out .tr-rank { opacity: 0.5; }
.tr-g.is-won { background: rgba(34, 197, 94, 0.28); color: #b7f7cd; }
.tr-g.is-lost { background: rgba(220, 38, 38, 0.30); color: #ffc9c9; }
.tr-g.is-drawn { background: rgba(168, 85, 247, 0.30); color: #e9d5ff; }
.tr-lp { justify-self: end; padding: 3px 7px; border-radius: 999px; font-size: 0.66rem; font-weight: 800; white-space: nowrap; text-align: center; min-width: 64px; }
.tr-lp.is-W { background: rgba(34, 197, 94, 0.22); color: #b7f7cd; }
.tr-lp.is-L { background: rgba(220, 38, 38, 0.24); color: #ffc9c9; }
.tr-lp.is-D { background: rgba(168, 85, 247, 0.26); color: #e9d5ff; }
.tr-lp.is-idle { background: transparent; }
.tr-series-label { margin: 0 0 6px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tr-muted); }
.tr-series-more { margin-top: 8px; }
.tr-series-more[open] > summary { display: block; }
@media (min-width: 720px) {
  .tr-lmo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The game on the lanes now, before Computerscore stores it. */
/* A game of the series still to come: its number in a faint dashed box. */
.tr-g.is-gap { background: transparent; border: 1px dashed rgba(255, 255, 255, 0.18); color: var(--tr-muted); font-weight: 500; }
.tr-g.is-live { background: rgba(220, 38, 38, 0.32); color: #fff; animation: tr-live-pulse 1.6s ease-in-out infinite; }
@keyframes tr-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .tr-g.is-live { animation: none; } }

/* How to read the page: tap on a phone, click with a mouse. */
.tr-how { margin: 10px 0 4px; padding: 10px 12px; border: 1px solid var(--tr-line); border-radius: 10px; background: var(--tr-panel); font-size: 0.8rem; line-height: 1.4; color: var(--tr-muted); }
.tr-how p { margin: 0; }
.tr-how p + p { margin-top: 6px; }
.tr-how strong { color: #fff; font-weight: 700; }
.tr-click { display: none; }
@media (hover: hover) and (pointer: fine) { .tr-click { display: inline; } .tr-tap { display: none; } }

/* The handicap figure (the ladies' pins): the scratch stays the large figure,
   the ranked figure sits small and purple above it where a power would. It
   takes no line height, so no row grows. The purple figure is what ranks. */
.tr-hcp { color: #c084fc; font-size: 0.58em; font-weight: 800; line-height: 0; vertical-align: super; margin-left: 0.1em; letter-spacing: 0; }
.tr-g { position: relative; }
.tr-g .tr-hcp { position: absolute; top: -0.25em; right: -0.35em; font-size: 0.66em; line-height: 1; margin: 0; text-shadow: 0 0 3px #000, 0 0 2px #000; }

/* Handicap division: the places it pays carry a gold edge. */
.tr-hcpdiv-paid { box-shadow: inset 3px 0 0 #facc15; }