/* 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 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.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; }
.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; }