/* Shared base: a pool hall at night (same palette as the quick draw). */
:root {
  --ink: #0b1311;
  --ink-2: #121d1a;
  --ink-3: #1a2824;
  --line: #2a3b36;
  --felt: #0f5a3f;
  --felt-hi: #1b7a56;
  --felt-dark: #0a3d2b;
  --rail: #4a2716;
  --rail-hi: #6e3d22;
  --brass: #d8b25a;
  --chalk: #5fb3e8;
  --ivory: #f3ede0;
  --muted: #94aaa1;
  --ok: #5fd39a;
  --warn: #f0c050;
  --danger: #ef7a6a;
  --f-display: "Bowlby One", "Arial Black", Impact, sans-serif;
  --f-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-label: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--ink); color: var(--ivory); }
body { font-family: var(--f-body); font-size: 16px; line-height: 1.45; -webkit-text-size-adjust: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--chalk); outline-offset: 2px; }
.label {
  font-family: var(--f-label); font-weight: 600; text-transform: uppercase;
  letter-spacing: .12em; font-size: 13px; color: var(--muted);
}

/* Balls */
.ball {
  --size: 40px; --c: #f2c230;
  width: var(--size); height: var(--size); flex: none; border-radius: 50%;
  display: inline-grid; place-items: center; position: relative; vertical-align: middle;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.6), rgba(255,255,255,0) 30%),
    radial-gradient(circle at 70% 75%, rgba(0,0,0,.35), rgba(0,0,0,0) 60%),
    var(--c);
  box-shadow: 0 calc(var(--size) * .1) calc(var(--size) * .22) rgba(0,0,0,.55);
}
.ball.stripe {
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.6), rgba(255,255,255,0) 30%),
    radial-gradient(circle at 70% 75%, rgba(0,0,0,.35), rgba(0,0,0,0) 60%),
    linear-gradient(#f6f1e6 0 23%, var(--c) 23% 77%, #f6f1e6 77%);
}
.ball.cue {
  background:
    radial-gradient(circle at 32% 28%, #fff, rgba(255,255,255,0) 35%),
    radial-gradient(circle at 70% 75%, rgba(0,0,0,.28), rgba(0,0,0,0) 60%),
    #efe9db;
}
.ball .num {
  width: 46%; height: 46%; border-radius: 50%; background: #f8f4ea; color: #121212;
  display: grid; place-items: center;
  font-family: var(--f-display); font-size: calc(var(--size) * .2); line-height: 1;
}
.ball.cue .num { display: none; }

/* Connection status */
.conn {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: var(--f-label); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  font-size: 13px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--ink-2);
}
.conn::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.conn[data-s="online"]::before { background: var(--ok); box-shadow: 0 0 0 3px rgba(95,211,154,.2); }
.conn[data-s="reconnecting"]::before, .conn[data-s="connecting"]::before { background: var(--warn); animation: blink 1s infinite; }
.conn[data-s="offline"] { border-color: rgba(239,122,106,.6); color: #ffd0c8; }
.conn[data-s="offline"]::before { background: var(--danger); }
@keyframes blink { 50% { opacity: .3; } }

/* Bracket (shared by the TV and the phone) */
.bracket { display: flex; gap: var(--gap, 28px); height: 100%; }
.bracket .col { flex: 1 1 0; min-width: var(--col-min, 0); display: flex; flex-direction: column; }
.bracket .col h3 {
  margin: 0 0 .5em; font-family: var(--f-label); font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--brass); font-size: var(--h-size, 14px); text-align: center;
}
.bracket .col-body { flex: 1; display: flex; flex-direction: column; }
.bracket .pair { flex: 1; display: flex; flex-direction: column; position: relative; }
.bracket .slot { flex: 1; display: flex; align-items: center; position: relative; padding: 4px 0; }
/* Connectors: a line to the right of each match, joined vertically per pair. */
.bracket .pair.join::after {
  content: ""; position: absolute; right: calc(var(--gap, 28px) / -2); top: 25%; bottom: 25%;
  border-right: 2px solid var(--line);
}
.bracket .pair.join .slot::after {
  content: ""; position: absolute; right: calc(var(--gap, 28px) / -2); width: calc(var(--gap, 28px) / 2);
  top: 50%; border-top: 2px solid var(--line);
}
.bracket .col.fed .slot::before {
  content: ""; position: absolute; left: calc(var(--gap, 28px) / -2); width: calc(var(--gap, 28px) / 2);
  top: 50%; border-top: 2px solid var(--line);
}
.m {
  width: 100%; background: var(--ink-2); border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  font-size: var(--m-size, 15px);
}
.m { display: flex; }
.m .rows { flex: 1; min-width: 0; }
.m .rail { flex: none; width: 2.3em; display: grid; place-content: center; text-align: center; line-height: 1; border-right: 1px solid var(--line); color: var(--muted); }
.m .rail small { font-family: var(--f-label); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .55em; }
.m .rail b { font-family: var(--f-display); font-weight: 400; font-size: 1em; margin-top: .1em; }
.m .rail.live { background: var(--felt); color: var(--ivory); border-right-color: var(--felt-hi); }
.m .ps { display: flex; justify-content: space-between; align-items: center; gap: .5em; padding: .16em .6em; min-height: 1.6em; }
.m .ps + .ps { border-top: 1px solid var(--line); }
.m .nm { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
/* Trophy to the right of the player who won the match */
.wi { flex: none; display: inline-grid; place-items: center; width: 1.05em; height: 1.05em; color: var(--brass); }
.wi svg { width: 100%; height: 100%; display: block; }
/* Podium trophies */
.wi.gold { color: #f5c542; filter: drop-shadow(0 0 .25em rgba(245,197,66,.45)); }
.wi.silver { color: #cfd6dc; }
.wi.bronze { color: #c9803d; }
/* The 3rd place match shares the final's column, with its own label */
.m .mlab { font-family: var(--f-label); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .62em; color: #e3a86a; padding: .2em .9em 0; }
.m.third { border-color: rgba(201,128,61,.55); }
.m .sc { font-family: var(--f-display); min-width: 1.4em; text-align: right; }
.m .sc.pass { font-family: var(--f-body); color: var(--muted); }
.m .ps.win { background: linear-gradient(90deg, rgba(216,178,90,.22), rgba(216,178,90,.05)); }
.m .ps.win .nm, .m .ps.win .sc { color: #ffe5a3; }
.m .ps.lose .nm, .m .ps.lose .sc { color: var(--muted); font-weight: 500; }
/* No-show: the player didn't come to the match */
.ns { flex: none; font-family: var(--f-label); font-weight: 700; font-size: .78em; letter-spacing: .06em; text-transform: uppercase; color: var(--danger); white-space: nowrap; }
/* "Waiting": drawn, not here yet */
.wt { flex: none; font-family: var(--f-label); font-weight: 700; font-size: .78em; letter-spacing: .06em; text-transform: uppercase; color: var(--warn); white-space: nowrap; }
.m .ps .ns { margin-left: auto; padding-left: 4px; }
.m .ps.empty .nm { color: var(--muted); font-weight: 500; font-style: italic; }
.m.s-ready { border-color: rgba(95,211,154,.45); }
.m.s-bye { opacity: .78; border-style: dashed; }
.bracket .slot.gone { visibility: hidden; }
.bracket .col.next .col-body { justify-content: center; }
.bracket .col-note { border: 2px dashed var(--line); border-radius: 10px; padding: 1em .8em; text-align: center; color: var(--muted); font-size: var(--m-size, 15px); font-style: italic; }

/* Promotion logos: a strip that scrolls on its own (landing page and TV) */
.promos { --promo-h: 64px; overflow: hidden; position: relative; height: calc(var(--promo-h) + 20px); display: flex; align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.promo-track { display: flex; align-items: center; width: max-content; animation: promo-scroll var(--promo-s, 30s) linear infinite; }
/* Spacing as a margin (not gap) so both halves are exactly the same width: a seamless loop. */
.promo-track img { height: var(--promo-h); width: auto; max-width: calc(var(--promo-h) * 4); object-fit: contain; display: block; margin-right: calc(var(--promo-h) * .8); }
@keyframes promo-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .promo-track { animation-duration: calc(var(--promo-s, 30s) * 3); } }
.m.s-off { opacity: .5; border-style: dashed; }
/* Big screens (4K TVs and monitors): everything scales up. The TV page sizes itself and opts out. */
@media (min-width: 2200px) { body { zoom: 1.5; } }
@media (min-width: 3000px) { body { zoom: 2; } }
/* Championship Match (gold) and 3rd place (bronze): titles and trophies */
.m.final { border-color: rgba(245,197,66,.75); box-shadow: 0 0 0 1px rgba(245,197,66,.3); }
.m .mlab.gold { color: #f5c542; }
.m .mlab.bronze { color: #e3a86a; }
.m .rail.cup .wi { width: 1.35em; height: 1.35em; }
.mt { display: inline-flex; align-items: center; gap: .35em; }
.mt .wi { width: 1.25em; height: 1.25em; }
.mt.gold { color: #f5c542; }
.mt.bronze { color: #e3a86a; }
/* The score so far of a match being played */
.m .sc.live, .ms.live, .mcard .row .s.live { color: var(--chalk); }