/* Colours. Light is the default; dark follows the phone's setting unless the
   organiser picks a theme with the button in the top bar. The light set is in
   :root, the dark set twice below (the phone's setting, and the button's
   choice), so change both when you change one. Never hard-code colours in rules. */
:root {
  color-scheme: light;
  --bg: #f1eee8;
  --card: #ffffff;
  --text: #141821;
  --muted: #5d6472;
  --line: #dedad2;
  --green: #1a6b45; /* felt green, the accent */
  --on-green: #ffffff;
  --green-soft: #def0e5;
  --gold: #8a6200; /* money */
  --gold-soft: #fbefcc;
  --red: #b3261e;
  --red-soft: #fce4e2;
  --amber: #7d5200;
  --amber-soft: #fff1d1;
  --toast-bg: #141821;
  --toast-text: #ffffff;
  --shadow: 0 1px 1px rgb(20 24 33 / 0.04), 0 10px 30px rgb(20 24 33 / 0.08);
  --backdrop: rgb(10 14 24 / 0.45);
  --glass: rgb(255 255 255 / 0.62);
  --glass-strong: rgb(255 255 255 / 0.82);
  --glass-edge: rgb(255 255 255 / 0.9);
  --glass-line: rgb(20 24 33 / 0.08);
  --glass-shine: rgb(255 255 255 / 0.95);
  --glow-a: rgb(40 160 100 / 0.3); /* felt green */
  --glow-b: rgb(230 180 60 / 0.26); /* gold */
  --glow-c: rgb(56 140 255 / 0.2); /* blue */
  --felt: rgb(22 98 62 / 0.92); /* the big clock: green felt glass */
  --felt-text: #ffffff;
  --felt-muted: rgb(255 255 255 / 0.72);
  --felt-gold: #ffe08a;
  --felt-edge: rgb(255 255 255 / 0.5);
  --well: rgb(20 24 33 / 0.04); /* input boxes: a faint recess, not glass */
  --well-line: rgb(20 24 33 / 0.13);
  --rail: rgb(70 44 26 / 0.9); /* the drawn table's padded edge */
  --rail-line: rgb(255 255 255 / 0.18);
  --rail-text: #3a2614;
  --seat: rgb(8 40 24 / 0.68); /* a player's marker on the drawn table */
  --seat-edge: rgb(255 255 255 / 0.55);
  --seat-move: #ffb547;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0a0f1c;
    --card: #161e30;
    --text: #eef1f6;
    --muted: #97a0b3;
    --line: #26304a;
    --green: #3fbf7a;
    --on-green: #06180e;
    --green-soft: #15322a;
    --gold: #e8c35a;
    --gold-soft: #3a2f12;
    --red: #ff8a80;
    --red-soft: #3b1f26;
    --amber: #f3c46f;
    --amber-soft: #3a2d12;
    --toast-bg: #eef1f6;
    --toast-text: #0a0f1c;
    --shadow: 0 12px 34px rgb(0 0 0 / 0.35);
    --backdrop: rgb(0 0 0 / 0.55);
    --glass: rgb(30 40 64 / 0.5);
    --glass-strong: rgb(34 45 72 / 0.88);
    --glass-edge: rgb(255 255 255 / 0.1);
    --glass-line: rgb(255 255 255 / 0.06);
    --glass-shine: rgb(255 255 255 / 0.16);
    --glow-a: rgb(40 170 100 / 0.22);
    --glow-b: rgb(230 180 60 / 0.14);
    --glow-c: rgb(56 140 255 / 0.22);
    --felt: rgb(26 104 66 / 0.5);
    --felt-text: #ffffff;
    --felt-muted: rgb(255 255 255 / 0.66);
    --felt-gold: #f3d27a;
    --felt-edge: rgb(255 255 255 / 0.22);
  --well: rgb(0 0 0 / 0.18);
  --well-line: rgb(255 255 255 / 0.1);
  --rail: rgb(52 34 22 / 0.85);
  --rail-line: rgb(255 255 255 / 0.1);
  --rail-text: #2a1a0c;
  --seat: rgb(4 22 12 / 0.78);
  --seat-edge: rgb(255 255 255 / 0.3);
  --seat-move: #f3b55a;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0f1c;
  --card: #161e30;
  --text: #eef1f6;
  --muted: #97a0b3;
  --line: #26304a;
  --green: #3fbf7a;
  --on-green: #06180e;
  --green-soft: #15322a;
  --gold: #e8c35a;
  --gold-soft: #3a2f12;
  --red: #ff8a80;
  --red-soft: #3b1f26;
  --amber: #f3c46f;
  --amber-soft: #3a2d12;
  --toast-bg: #eef1f6;
  --toast-text: #0a0f1c;
  --shadow: 0 12px 34px rgb(0 0 0 / 0.35);
  --backdrop: rgb(0 0 0 / 0.55);
  --glass: rgb(30 40 64 / 0.5);
  --glass-strong: rgb(34 45 72 / 0.88);
  --glass-edge: rgb(255 255 255 / 0.1);
  --glass-line: rgb(255 255 255 / 0.06);
  --glass-shine: rgb(255 255 255 / 0.16);
  --glow-a: rgb(40 170 100 / 0.22);
  --glow-b: rgb(230 180 60 / 0.14);
  --glow-c: rgb(56 140 255 / 0.22);
  --felt: rgb(26 104 66 / 0.5);
  --felt-text: #ffffff;
  --felt-muted: rgb(255 255 255 / 0.66);
  --felt-gold: #f3d27a;
  --felt-edge: rgb(255 255 255 / 0.22);
  --well: rgb(0 0 0 / 0.18);
  --well-line: rgb(255 255 255 / 0.1);
  --rail: rgb(52 34 22 / 0.85);
  --rail-line: rgb(255 255 255 / 0.1);
  --rail-text: #2a1a0c;
  --seat: rgb(4 22 12 / 0.78);
  --seat-edge: rgb(255 255 255 / 0.3);
  --seat-move: #f3b55a;
}

/* Fonts are stored with the app, so they work offline. */
@font-face { font-family: Inter; src: url("./fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("./fonts/barlow-condensed-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  margin: 0;
  font: 17px/1.45 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}
/* Soft colour glow behind the see-through glass panels. It stays still, to save battery. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(55% 40% at 15% 10%, var(--glow-a), transparent 72%),
    radial-gradient(50% 38% at 92% 22%, var(--glow-b), transparent 72%),
    radial-gradient(55% 40% at 85% 85%, var(--glow-c), transparent 72%),
    radial-gradient(45% 35% at 10% 75%, var(--glow-a), transparent 72%);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 560px;
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 16px 0;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo { width: 34px; height: 34px; border-radius: 9px; box-shadow: 0 4px 14px color-mix(in srgb, var(--green) 35%, transparent); }
.topbar h1 { margin: 0; font: 700 30px/1 "Barlow Condensed", system-ui, sans-serif; letter-spacing: 0.01em; } /* "ProPoker" as written, not in capitals (owner's wish) */
.tagline { max-width: 560px; margin: 6px auto 0; padding: 0 16px; color: var(--muted); }
body:has(#screen-game:not([hidden])) .tagline { display: none; }
.top-actions { display: flex; align-items: center; gap: 4px; }
.topbar button.cog, .topbar button.home { display: grid; place-items: center; min-width: 40px; min-height: 44px; box-shadow: none; }
.topbar button.cog svg, .topbar button.home svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.topbar button.theme {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}
.topbar .theme-icon { font-size: 21px; line-height: 1; }
.topbar button.theme.theme { background: transparent; border-color: transparent; box-shadow: none; color: var(--muted); }
/* During the tournament the theme button shows only its icon, and the flag makes room for the cog. */
body:has(#screen-game:not([hidden])) .topbar button.theme { justify-content: center; width: 44px; padding: 0; }
body:has(#screen-game:not([hidden])) .theme-label { display: none; }
body:has(#screen-game:not([hidden])) .lang-toggle { display: none; }

main { max-width: 560px; margin: 0 auto; padding: 16px; }
@supports (-webkit-touch-callout: none) {
  main { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}
h2 { margin: 4px 0 16px; font: 700 28px/1.1 "Barlow Condensed", system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.01em; }
h3 {
  margin: 24px 0 8px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.muted { color: var(--muted); }
.small { font-size: 14px; }

/* Controls */
button, input {
  font: inherit;
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
}
button {
  padding: 0 16px;
  cursor: pointer;
  font-weight: 500;
  transition: transform 0.08s ease, background-color 0.15s ease, filter 0.15s ease;
}
button:active:not(:disabled) { transform: scale(0.97); filter: brightness(0.95); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
input:focus { border-color: var(--green); }
button.primary { background: var(--green); border-color: var(--green); color: var(--on-green); font-weight: 700; box-shadow: var(--shadow); }
button.big { width: 100%; min-height: 56px; font-size: 18px; margin-top: 16px; }
button.danger { width: 100%; margin-top: 24px; background: transparent; color: var(--red); border-color: currentColor; }
button.icon { min-width: 48px; padding: 0; background: transparent; border-color: transparent; color: var(--muted); font-size: 20px; }
button.link { background: transparent; border: 0; color: var(--green); font-weight: 600; padding: 0; }
button.edit-link { min-height: 44px; margin: 4px 0 8px; }
button.danger-fill { background-color: var(--red); border-color: var(--red); color: var(--card); }
input { width: 100%; padding: 0 12px; }
/* Number boxes (text boxes with the number keyboard): right-aligned, digits the same width */
input[inputmode="numeric"], input[inputmode="decimal"] { font-variant-numeric: tabular-nums; text-align: right; padding-right: 14px; }

.row { display: flex; gap: 8px; margin: 12px 0; }
.row input { flex: 1; min-width: 0; }
.grow { flex: 1; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.row.link-row { justify-content: space-between; margin: 0; }
.share-links { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; }
.share-links button.link { min-height: 44px; }
.share-links button.reset { color: var(--muted); }

/* Lists */
.list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
}
.list:empty { display: none; }
.list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 52px;
  padding: 0 4px 0 16px;
  border-top: 1px solid var(--line);
}
.list li:first-child { border-top: 0; }
.list li.plain { padding-right: 16px; }
.list li.player { padding: 0; }
.list li .name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.player > button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 6px 16px;
  border: 0;
  border-radius: 0;
  text-align: left;
  background: transparent;
  box-shadow: none;
}
.player > button:active:not(:disabled) { transform: none; background: var(--green-soft); }
.player .name { font-weight: 600; }
.list li .sub, .player .sub { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }
.player.out .name { color: var(--muted); font-weight: 500; }
.list.inner { box-shadow: none; margin: 4px 0 12px; }
.place { flex: none; min-width: 30px; font: 700 20px/1 "Barlow Condensed", system-ui, sans-serif; color: var(--muted); text-align: center; }
.amount { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.amount.gold { color: var(--gold); }
.amount.plus { color: var(--green); }
.amount.minus { color: var(--red); }
.moves .arrow { color: var(--muted); font-weight: 400; }
#sum-moves .name { font-weight: 600; }

.badge {
  display: inline-block;
  flex: none;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  vertical-align: middle;
}
.badge.seat { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--muted); font-variant-numeric: tabular-nums; }
.badge.rebuy { background: var(--gold-soft); color: var(--gold); }
.badge.addon { background: var(--green-soft); color: var(--green); }
.badge.owes { background: var(--red-soft); color: var(--red); }
.badge.late { background: var(--amber-soft); color: var(--amber); }
.badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin-left: auto; }

/* Setup form */
label.field { display: block; margin: 16px 0; font-weight: 500; }
label.field input { margin-top: 6px; }
/* A number: the words on the left, a short box on the right */
label.field.inline { display: grid; grid-template-columns: 1fr 104px; align-items: center; gap: 12px; margin: 12px 0; }
label.field.inline input { margin: 0; }
.field .sub, .choices .sub { display: block; margin-top: 2px; color: var(--muted); font-size: 14px; font-weight: 400; }
/* Words on the left, a picker button on the right */
.field.inline-picker { display: grid; grid-template-columns: 1fr minmax(104px, auto); align-items: center; gap: 12px; margin: 12px 0; font-weight: 500; }
/* The picker as wide as the number boxes (at least), its right edge in line with theirs */
.field.inline-picker > span:last-child { display: flex; justify-content: flex-end; }
.field.inline-picker button.picker { width: 100%; min-width: 104px; }
fieldset {
  min-width: 0;
  margin: 16px 0;
  padding: 0 16px 8px;
  border-radius: 14px;
}
legend { float: left; width: 100%; padding: 14px 0 2px; font-weight: 700; }
legend + * { clear: both; }
.count { color: var(--muted); font-weight: 500; }
.style-label { margin: 16px 0 8px; font-size: 14px; font-weight: 600; color: var(--muted); }

/* On/off boxes */
.choices label {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 4px 0;
  border-top: 1px solid var(--line);
  cursor: pointer;
}
.choices:first-child label:first-child, legend + .choices label:first-child { border-top: 0; }
.choices input {
  flex: none;
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 2px solid var(--muted);
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.choices input:checked { border-color: var(--green); background-color: var(--green); }
.choices input::after { content: ""; width: 7px; height: 13px; margin-top: -3px; border: solid var(--on-green); border-width: 0 3px 3px 0; transform: rotate(45deg); opacity: 0; transition: opacity 0.15s ease; }
.choices input:checked::after { opacity: 1; }
.indent { padding-left: 38px; }

/* A row of choices: one is chosen (Turbo / Standard / Deep, antes, payout modes) */
.seg { display: grid; gap: 6px; padding: 4px; border-radius: 14px; background: color-mix(in srgb, var(--text) 6%, transparent); }
.seg.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.seg button { min-height: 44px; padding: 0 4px; border-radius: 10px; font-size: 15px; font-weight: 600; background: transparent !important; border-color: transparent !important; box-shadow: none !important; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--glass-strong) !important; color: var(--text); box-shadow: inset 0 1px 0 var(--glass-shine), 0 2px 8px rgb(0 0 0 / 0.12) !important; }
.seg button .seg-sub { display: block; font-size: 11px; font-weight: 500; color: var(--muted); line-height: 1.1; }

/* The list of levels */
.levels { list-style: none; margin: 12px 0 0; padding: 0; }
.levels li button {
  display: grid;
  grid-template-columns: 34px 1fr auto auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.levels li { border-top: 1px solid var(--line); }
.levels li:first-child, .levels li.dragging, .levels li.dragging + li { border-top-color: transparent; }
.levels .lv-n { font: 700 18px/1 "Barlow Condensed", system-ui, sans-serif; color: var(--muted); }
.levels .lv-blinds { font-weight: 600; }
/* Expected clock time, under the blinds (cog): it moves with pauses and ±1 min */
.levels .lv-time { display: block; font-size: 13px; font-weight: 500; font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; }
.levels .lv-ante, .levels .lv-min { color: var(--muted); font-size: 14px; }
.levels li.break { background: var(--amber-soft); border-radius: 10px; border-top-color: transparent; }
.levels li.break + li { border-top-color: transparent; }
.levels li.break button { color: var(--amber); }
/* Breaks can be dragged by a handle on the right */
.levels li { position: relative; display: flex; align-items: center; }
.levels li button { flex: 1; min-width: 0; }
/* The handle sits first in the row, where a break has no level number, so the times and minutes line up */
.levels .drag { position: absolute; left: 0; top: 0; bottom: 0; z-index: 1; display: grid; place-items: center; width: 46px; color: var(--amber); cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.levels .drag svg { width: 22px; height: 22px; fill: currentColor; }
.levels li:has(.lv-time) button { padding-top: 6px; padding-bottom: 6px; }
.levels li.dragging { z-index: 2; border-radius: 10px; background: var(--glass-strong); box-shadow: var(--shadow); cursor: grabbing; }
.levels li.dragging .drag { cursor: grabbing; }
.levels li.break .lv-blinds { font-weight: 600; }
.levels li.now { background: var(--green-soft); border-radius: 10px; }
.levels li.done { opacity: 0.45; }

/* Names from last time: tap to add */
.known { display: flex; flex-wrap: wrap; gap: 8px; }
.known:empty { display: none; }
.known button { min-height: 40px; padding: 0 14px; border-radius: 999px; font-size: 15px; }
.known button::before { content: "+ "; color: var(--green); font-weight: 700; }
.known button.forget::before { content: "✕ "; color: var(--red); }
.known button.link { padding: 0 6px; }
.known button.link::before { content: none; }

.error { color: var(--red); min-height: 1.4em; margin: 8px 0; }
.note { margin: 4px 0 8px; color: var(--green); font-weight: 500; }
.tip { margin: 0 0 10px; }
.status { margin: 12px 0 0; text-align: center; color: var(--muted); font-size: 15px; }
.status strong { color: var(--text); }

/* Home: your tournaments */
.tournaments { margin-top: 16px; }
.tournaments h3 { margin: 0 0 8px; }
.list li.entry > button.open { flex: 1; min-width: 0; }
.list li.entry > button.more { flex: none; width: 52px; padding: 0; justify-content: center; color: var(--muted); }
.list li.entry > button.more svg { width: 22px; height: 22px; fill: currentColor; }
.sub-action { margin: 8px 0 0; text-align: center; }
.sub-action button.link { min-height: 44px; color: var(--muted); }
.intro { margin: 20px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
/* The promise, like PrimeTime's: keep it true (no analytics, cookies or ad scripts, ever) */
.promise { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 14px 0 0; padding: 0; font-size: 15px; font-weight: 600; }
.promise li { white-space: nowrap; }
.promise li::before { content: "✓"; margin-right: 5px; color: var(--green); }
/* The tour: pictures of the app, swiped sideways */
.tour { margin-top: 20px; }
.tour h3 { margin-top: 0; }
.tour-row { display: flex; gap: 12px; margin: 0 -16px; padding: 4px 16px 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.tour-row::-webkit-scrollbar { display: none; }
.tour figure { flex: 0 0 auto; width: min(44vw, 190px); margin: 0; scroll-snap-align: start; }
.tour img { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--glass-line); box-shadow: var(--shadow); background: var(--card); }
.tour .dark-pic { display: none; }
:root[data-theme="dark"] .tour .light-pic { display: none; }
:root[data-theme="dark"] .tour .dark-pic { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tour .light-pic { display: none; }
  :root:not([data-theme="light"]) .tour .dark-pic { display: block; }
}
.tour figcaption { margin-top: 8px; font-size: 14px; font-weight: 600; text-align: center; white-space: nowrap; color: var(--muted); }

/* ---------- The clock: green felt glass with white text ---------- */
.clock {
  position: relative;
  text-align: center;
  padding: 14px 18px 16px;
  border-radius: 20px;
  color: var(--felt-text);
  background-color: var(--felt);
  background-image: linear-gradient(160deg, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0.04) 35%, transparent 60%);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 var(--felt-edge), inset 0 0 0 1px rgb(255 255 255 / 0.1), var(--shadow);
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
}
.c-level { font: 700 22px/1 "Barlow Condensed", system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--felt-muted); }
.countdown { font: 700 84px/1 "Barlow Condensed", system-ui, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: 0; margin: 6px 0 2px; }
.clock.paused .countdown { opacity: 0.55; }
.clock.warn .countdown { color: var(--felt-gold); }
.c-blinds { font: 700 36px/1.05 "Barlow Condensed", system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.c-ante { font: 700 22px/1.2 "Barlow Condensed", system-ui, sans-serif; color: var(--felt-gold); }
.c-ante:empty { display: none; }
.c-next { margin-top: 6px; font-size: 15px; color: var(--felt-muted) !important; }
.clock.on-break .c-blinds { color: var(--felt-gold); }
.progress { height: 6px; margin: 10px 0 12px; border-radius: 999px; background: rgb(255 255 255 / 0.18); overflow: hidden; }
.progress > div { height: 100%; width: 0; border-radius: inherit; background: var(--felt-text); transition: width 0.5s linear; }
.clock.warn .progress > div { background: var(--felt-gold); }
.clock.paused .progress > div { opacity: 0.5; }

.controls { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 8px; margin: 12px 0 0; }
.controls button { padding: 0 8px; font-weight: 600; display: grid; place-items: center; }
.controls button svg { width: 24px; height: 24px; fill: currentColor; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.controls #c-pause { min-height: 56px; font-size: 18px; }
.small-controls { grid-template-columns: repeat(3, 1fr); }
.small-controls button { min-height: 44px; font-size: 15px; }

/* Small facts in tiles: players left, average stack, prize pool… */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.fact { padding: 10px 12px; border-radius: 14px; min-width: 0; }
.fact-label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.fact-value { font: 700 26px/1.1 "Barlow Condensed", system-ui, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fact-value.gold { color: var(--gold); }
.fact-sub { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The compact clock above the other pages on a phone */
.clock.mini { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 8px 16px; text-align: left; }
.clock.mini .countdown { font-size: 44px; margin: 0; }
.mini-level { font: 700 15px/1 "Barlow Condensed", system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--felt-muted); }
.mini-blinds { font: 700 26px/1.1 "Barlow Condensed", system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.clock.mini.paused .countdown { opacity: 0.55; }

/* The big announcement: a new level, a break */
.overlay { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 16px; background: var(--backdrop); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade-in 0.2s ease-out; }
.overlay-box { width: min(560px, 100%); padding: 28px 20px; text-align: center; border-radius: 24px; color: var(--felt-text); background-color: var(--felt); background-image: linear-gradient(160deg, rgb(255 255 255 / 0.22), transparent 60%); box-shadow: inset 0 1px 0 var(--felt-edge), 0 24px 60px rgb(0 0 0 / 0.35); animation: pop-in 0.25s ease-out; }
:root[data-theme="dark"] .overlay-box { background-color: var(--felt-solid, rgb(20 80 52 / 0.92)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .overlay-box { background-color: var(--felt-solid, rgb(20 80 52 / 0.92)); } }
.ov-title { font: 700 26px/1 "Barlow Condensed", system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--felt-muted); }
.ov-main { margin: 10px 0 6px; font: 700 72px/1 "Barlow Condensed", system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.ov-sub { font: 700 24px/1.2 "Barlow Condensed", system-ui, sans-serif; color: var(--felt-gold); }
.ov-sub:empty { display: none; }
@keyframes fade-in { from { opacity: 0; } }

/* Tables: one card per table, seats in a grid */
.tables-grid { display: grid; gap: 12px; }
.table-card { padding: 12px 12px 14px; border-radius: 16px; }
.table-card.closed { display: none; }
.table-head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 4px 10px; }
.table-name { font: 700 22px/1 "Barlow Condensed", system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.02em; }
.seats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.seats button { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; min-height: 52px; padding: 4px 10px; text-align: left; line-height: 1.15; }
.seats .seat-no { font-size: 11px; font-weight: 700; color: var(--muted); }
.seats .seat-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; }
.seats button.empty { opacity: 0.5; box-shadow: none !important; background: transparent !important; border-style: dashed !important; border-color: var(--line) !important; }
.seats button.selected { outline: 3px solid var(--green); outline-offset: 1px; }
.seats button.moving .seat-name { color: var(--amber); }

/* Chip counts */
.count-btn { margin-top: 12px; }
.list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.list-head button.link { min-height: 44px; font-size: 15px; }
.badge.leader { background: var(--gold-soft); color: var(--gold); }
.player .name .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player .sub.stack { color: var(--text); font-variant-numeric: tabular-nums; }
.count-table { margin: 16px 0 4px; }
.count-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 112px 52px; align-items: center; gap: 8px; min-height: 56px; border-top: 1px solid var(--line); }
#count-rows > .count-row:first-child, .count-table + .count-row { border-top: 0; }
.count-row .name { font-weight: 600; overflow-wrap: anywhere; line-height: 1.2; }
.count-row .sub { display: block; font-size: 12px; font-weight: 400; color: var(--muted); white-space: nowrap; }
.count-row input { padding: 0 12px 0 6px; }
.count-seat { font: 700 20px/1 "Barlow Condensed", system-ui, sans-serif; color: var(--muted); text-align: center; }
.count-bb { font-variant-numeric: tabular-nums; white-space: nowrap; }
.count-sum { padding: 10px 20px 0; border-top: 1px solid var(--line); }
.count-totals { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--muted); }
.count-totals span { display: flex; flex-direction: column; }
.count-totals span:last-child { text-align: right; }
.count-totals strong { color: var(--text); font: 700 22px/1.1 "Barlow Condensed", system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.count-diff { margin-top: 6px; font-weight: 700; }
.count-diff.good { color: var(--green); }
.count-diff.bad { color: var(--amber); }
.count-sum + .dialog-buttons { border-top: 0 !important; }
.ov-note { margin-top: 10px; font-size: 17px; color: var(--felt-muted); }
.ov-note:empty { display: none; }

/* Tables: the drawn view (owner's wish): a poker table seen from above, like Substitutor's field.
   The felt is a stadium shape inset as in seatPositions() (14% of the height), the seats sit on its rail. */
.tables-head { display: flex; flex-direction: column-reverse; gap: 8px; margin-bottom: 10px; }
.tables-head .tip { margin: 0; text-align: center; }
.seg.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.view-toggle { padding: 3px; }
.view-toggle button { min-height: 36px; font-size: 14px; }
.tables-grid.drawn { gap: 20px; }
.drawn-table { min-width: 0; }
.poker-table { position: relative; aspect-ratio: 3 / 2; }
.felt {
  position: absolute;
  inset: 14% calc(14% / 1.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--felt-text);
  background-color: var(--felt);
  background-image: radial-gradient(70% 80% at 50% 35%, rgb(255 255 255 / 0.16), transparent 70%);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: inset 0 0 0 2px var(--rail-line), inset 0 0 0 7px var(--felt), inset 0 0 0 8px var(--felt-edge), 0 0 0 14px var(--rail), 0 0 0 15px var(--rail-line), var(--shadow);
}
.felt-name { font: 700 24px/1 "Barlow Condensed", system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.55; }
.felt-count { font-size: 13px; color: var(--felt-muted); opacity: 0.8; }
.seat-marker {
  position: absolute;
  z-index: 1;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  max-width: 23%;
  min-height: 48px;
  padding: 3px 8px 4px;
  border: 1px solid var(--seat-edge) !important;
  border-radius: 16px;
  background-color: var(--seat) !important;
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0.03) 55%, transparent) !important;
  color: var(--felt-text);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), 0 4px 14px rgb(0 0 0 / 0.25) !important;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
  line-height: 1.12;
  text-align: center;
  transition: scale 0.15s ease, opacity 0.15s ease;
}
.seat-marker:active:not(:disabled) { transform: translate(-50%, -50%); }
.seat-marker .marker-seat { font-size: 10px; font-weight: 700; color: var(--felt-muted); }
.seat-marker .marker-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; }
.seat-marker .marker-stack { font-size: 11px; font-weight: 600; color: var(--felt-gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.seat-marker .marker-move { font-size: 11px; font-weight: 800; color: var(--seat-move); white-space: nowrap; }
.seat-marker.empty { min-width: 36px; min-height: 36px; width: 36px; padding: 0; border-radius: 50%; border-style: dashed !important; background: transparent !important; box-shadow: none !important; }
.seat-marker.empty .marker-seat { font-size: 13px; }
/* Where the dealer stands: a gold pill on the rail, top middle. Not a button */
.dealer-spot { position: absolute; z-index: 1; transform: translate(-50%, -50%); padding: 3px 10px; border-radius: 999px; background: var(--felt-gold); color: var(--rail-text); font: 700 13px/1.2 "Barlow Condensed", system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 2px 8px rgb(0 0 0 / 0.3); pointer-events: none; }
.seat-marker.leader { outline: 2px solid var(--felt-gold); outline-offset: 1px; }
@keyframes move-pulse { from { box-shadow: 0 0 0 0 var(--seat-move); } to { box-shadow: 0 0 0 5px transparent; } }
.seat-marker.moving { border-color: var(--seat-move) !important; animation: move-pulse 1s ease-out infinite; }
/* Moving by hand: the tapped player lifts, every other seat is ringed */
@keyframes swap-pulse { from { outline-offset: 1px; } to { outline-offset: 4px; } }
.seat-marker.selected { scale: 1.12; z-index: 2; outline: 3px solid var(--felt-text); outline-offset: 2px; }
.seat-marker.target { outline: 2px solid var(--felt-text); outline-offset: 1px; animation: swap-pulse 0.7s ease-in-out infinite alternate; }
.seat-marker.empty.target { border-style: solid !important; }

/* Seat moves waiting to be done */
.banner { margin-bottom: 12px; padding: 12px 14px; border-radius: 14px; background: var(--amber-soft); color: var(--amber); }
.banner strong { display: block; margin-bottom: 4px; }
.banner button { margin-top: 8px; min-height: 40px; }
.move { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; }
.move-wrap { flex: 1; min-width: 0; }
.list li button.link { flex: none; white-space: nowrap; min-height: 44px; padding: 0 8px; }
.move .from-to { font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
.move-row { display: flex; align-items: center; gap: 8px; }
.move-row .name { font-weight: 700; }

/* Payouts editor */
.pay-row { display: grid; grid-template-columns: 1fr 104px auto; align-items: center; gap: 10px; margin: 8px 0; }
.pay-row .pay-unit { min-width: 24px; color: var(--muted); font-size: 14px; }
.pay-row .pay-fixed { justify-self: end; font-weight: 700; }
/* Money boxes: the currency code goes before the amount, as everywhere (NOK 500) */
.pay-row.money, .pay-row:has(.pay-fixed) { grid-template-columns: 1fr auto 104px; }
.pay-row.money .pay-unit { text-align: right; }

/* Dialogs */
dialog {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 20px;
  border: 0;
  border-radius: 18px;
  color: var(--text);
}
dialog[open] { animation: pop-in 0.18s ease-out; }
dialog::backdrop { background: var(--backdrop); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@keyframes pop-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
dialog h2 { margin-top: 0; }
/* Long popups: the content scrolls, the buttons stay at the bottom */
dialog.scrolling { padding: 0; }
dialog.scrolling[open] { display: flex; flex-direction: column; }
dialog.scrolling .dialog-body { flex: 0 1 auto; min-height: 0; overflow-y: auto; padding: 20px 20px 4px; }
dialog.scrolling .dialog-buttons { margin: 0; padding: 12px 20px 20px; border-top: 1px solid var(--line); }
#pick-list { margin-top: 4px; max-height: 60dvh; overflow-y: auto; }
#pick-list button.chosen { background: var(--green-soft); box-shadow: inset 5px 0 var(--green); font-weight: 700; }
#ask-dialog input { margin: 4px 0 8px; }
#ask-text { margin: 0 0 8px; white-space: pre-line; }
#action-text:empty { display: none; }
#action-title { display: flex; align-items: center; gap: 4px; }
#action-title button.rename { min-width: 44px; min-height: 44px; margin: -8px 0; }
#action-title button.rename svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
#action-buttons button { min-height: 52px; text-align: left; }
/* A button that opens a list to pick from (instead of the phone's own dropdown) */
button.picker { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 0 12px; text-align: left; }
button.picker::after { content: ""; flex: none; width: 8px; height: 8px; margin: -4px 2px 0 0; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg); }

.toast {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 8px 8px 8px 16px;
  min-height: 48px;
  border-radius: 12px;
  background: var(--toast-bg);
  color: var(--toast-text);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.25);
  animation: pop-in 0.18s ease-out;
}
.toast:not(:has(#toast-action:not([hidden]))) { padding-right: 16px; }
.toast button { min-height: 36px; padding: 0 12px; border: 0; background: transparent; color: var(--toast-text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; box-shadow: none; }

/* ---------- Glass (like PrimeTime and Substitutor) ----------
   Frosted, see-through panels with a bright top edge, a rim light and a fine outer line, over a soft glow.
   Real blur only on the big panels and the popups; buttons and inputs fake it. */
.list, fieldset, dialog, .fact, .table-card, .install-card {
  background-color: var(--glass);
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.03) 40%, transparent 75%);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-shine), inset 0 0 0 1px var(--glass-edge), var(--shadow);
}
/* Small tiles fake the blur too, to spare the phone */
.fact { -webkit-backdrop-filter: none; backdrop-filter: none; }
.list.inner { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--line); box-shadow: none; }
dialog { background-color: var(--glass-strong); box-shadow: inset 0 1px 0 var(--glass-shine), inset 0 0 0 1px var(--glass-edge), 0 24px 60px rgb(0 0 0 / 0.3); }
button:not(.primary, .danger, .icon, .link, .danger-fill) {
  background-color: var(--glass);
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.12), transparent 60%);
  border-color: var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-shine), inset 0 0 0 1px var(--glass-edge), var(--shadow);
}
/* Boxes you type in are recessed wells, so they read differently from the glass buttons you tap */
input {
  background-color: var(--well);
  background-image: none;
  border-color: var(--well-line);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.06);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus-visible { outline: none; }
input:focus { border-color: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent); }
.list .player > button, .list li button.icon { box-shadow: none; background: transparent; }
button.primary {
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.22), transparent 60%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 6px 18px color-mix(in srgb, var(--green) 35%, transparent);
}
.choices input { box-shadow: none; background-image: none; }
.choices input:not(:checked) { background-color: transparent; }

/* Install card */
.install-card { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding: 12px 4px 12px 14px; border-radius: 14px; }
.install-card img { flex: none; width: 44px; height: 44px; border-radius: 11px; }
.install-card .grow { min-width: 0; line-height: 1.3; }
.install-card .icon { min-width: 40px; font-size: 16px; }
.steps { margin: 0 0 8px; padding-left: 22px; }
.steps li { margin: 10px 0; padding-left: 4px; }
.share-icon { display: inline-block; position: relative; width: 14px; height: 14px; margin: 0 2px -1px; border: 2px solid var(--green); border-top-color: transparent; border-radius: 2px; }
.share-icon::before { content: ""; position: absolute; left: 4px; top: -8px; width: 2px; height: 12px; background: var(--green); }
.share-icon::after { content: ""; position: absolute; left: 1px; top: -8px; width: 6px; height: 6px; border: solid var(--green); border-width: 2px 0 0 2px; transform: rotate(45deg); }

/* Language: a small round flag in the top bar */
.topbar button.lang-toggle { display: grid; place-items: center; min-width: 40px; min-height: 44px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.lang-toggle .flag { position: relative; width: 22px; height: 22px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px var(--glass-line), 0 2px 6px rgb(0 0 0 / 0.25); }
.lang-toggle .flag svg { display: block; width: 100%; height: 100%; }
.lang-toggle .flag::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(165deg, rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.12) 42%, transparent 55%, rgb(0 0 0 / 0.12)); box-shadow: inset 0 1px 1px rgb(255 255 255 / 0.75), inset 0 0 0 1px rgb(255 255 255 / 0.35); }

.source-link { margin: 24px 0 0; text-align: center; font-size: 13px; }
.source-link a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; transition: none !important; }
}

/* ---------- The tournament's pages: swipe sideways on a phone ---------- */
.pages {
  display: flex;
  align-items: flex-start;
  margin: 0 -16px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.pages::-webkit-scrollbar { display: none; }
.page { flex: 0 0 100%; min-width: 0; padding: 0 16px 4px; scroll-snap-align: start; }
.page > h3:first-child { margin-top: 4px; }
/* The page bar stays at the top while you scroll (owner's wish) */
.page-dots { position: sticky; top: max(8px, env(safe-area-inset-top)); z-index: 3; display: flex; justify-content: center; gap: 2px; width: max-content; max-width: 100%; margin: 0 auto 12px; padding: 2px 4px; border-radius: 999px; background-color: var(--glass-strong); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-shine), var(--shadow); }
.page-dots button { min-height: 32px; min-width: auto; padding: 0 10px; border: 0; border-radius: 999px; background: transparent !important; box-shadow: none !important; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.page-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: background-color 0.2s ease, width 0.2s ease; }
.page-dots button.active { color: var(--text); }
.page-dots button.active::before { width: 20px; border-radius: 4px; background: var(--green); }
.panel-tabs { display: none; }

/* ---------- Tablets and wide screens ---------- */
@media (min-width: 600px) {
  .topbar, .tagline, main { max-width: 680px; }
  .countdown { font-size: 112px; }
  .c-blinds { font-size: 46px; }
  .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .seats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* Tablet upright: two drawn tables side by side; one table alone is centred */
@media (min-width: 680px) {
  .tables-grid.drawn { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .tables-grid.drawn > :only-child { grid-column: 1 / -1; width: min(100%, 520px); justify-self: center; }
}
/* Sideways (body.wide, set in app.js): the clock fills the left like a TV, and
   the right is a panel with tabs (Players / Tables / Money) that scrolls on its own. */
body.wide { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
body.wide :is(.topbar, main) { max-width: 1400px; width: 100%; }
body.wide main { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
body.wide #screen-game { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "clock tabs" "clock panel"; column-gap: 24px; row-gap: 12px; }
body.wide .pages { display: contents; }
body.wide .page { padding: 0; }
body.wide #page-clock { grid-area: clock; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
body.wide #page-clock .clock { flex: 1; display: flex; flex-direction: column; justify-content: center; }
body.wide #page-clock .countdown { font-size: min(160px, 19vh); }
body.wide #page-clock .c-blinds { font-size: min(64px, 8vh); }
body.wide #page-clock .c-level { font-size: 30px; }
body.wide #page-clock .c-ante { font-size: 32px; }
body.wide #page-clock .c-next { font-size: 20px; }
body.wide .panel-tabs { display: grid; grid-area: tabs; }
body.wide .page:not(#page-clock) { grid-area: panel; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -8px; padding: 0 8px 8px; }
body.wide .page:not(#page-clock, .tab-active) { display: none; }
body.wide :is(#page-dots, #mini-clock) { display: none !important; }
body.wide .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.wide .page:not(#page-clock) .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* the side panel is narrower */
body.wide .seats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.wide .tables-grid.drawn { grid-template-columns: minmax(0, 1fr); }
body.wide .tables-grid.drawn > :only-child { width: 100%; }

.levels-more { width: 100%; min-height: 44px; margin-top: 4px; }
.levels li button.levels-more { display: block; padding: 0; text-align: center; color: var(--green); font-weight: 600; font-style: normal; }

/* Chips: a round chip in its real colour with white edge spots (the colour comes from the chip set, like a flag) */
.chip-dot { flex: none; display: inline-block; width: 22px; height: 22px; vertical-align: middle; }
.chip-dot svg { display: block; width: 100%; height: 100%; }
/* "Own colour…" in the colour list: a rainbow chip until a colour is chosen (like the flags, fixed colours) */
.chip-dot.own { border-radius: 50%; background: conic-gradient(#e53935, #fdd835, #43a047, #1e88e5, #8e24aa, #e53935); box-shadow: inset 0 0 0 1.5px rgb(0 0 0 / 0.3); }
.color-input { position: fixed; left: 50%; bottom: 0; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.chip-dot.big { width: 30px; height: 30px; }
.chip-head, .chip-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1fr) 40px; gap: 8px; align-items: center; }
.chip-head { margin: 8px 0 4px; }
.chip-row { margin: 6px 0; }
.chip-row input { padding: 0 12px 0 6px; }
.chip-row button.picker { gap: 6px; padding: 0 8px; }
.chip-row button.picker > span { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-row button.icon { min-width: 40px; }
.stacks { display: grid; gap: 6px; margin: 4px 0 8px; }
.stack-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--text) 5%, transparent); }
.stack-choose { width: 100%; }
.stack-choose button.link { min-height: 36px; font-size: 15px; }
.pay-row.stack-row { grid-template-columns: 1fr auto 104px; }
.stack-row .pick-dot { font-weight: 600; font-variant-numeric: tabular-nums; }
.stack-total { margin: 12px 0 0; font-weight: 700; }
.field-action { display: flex; justify-content: flex-end; margin: -4px 0 8px; }
.field-action button.link { min-height: 40px; font-size: 15px; }
.stack-line .stack-label { width: 100%; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.stack-chip { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stack-line.bad { background: var(--red-soft); color: var(--red); }
.enough { margin: 4px 0 8px; font-weight: 500; color: var(--green); }
.enough.bad { color: var(--red); }
/* The chip values under the clock, for the players */
.chip-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin-top: 14px; }
.chip-legend .stack-chip { font-size: 15px; }
.chip-legend .gone { opacity: 0.4; text-decoration: line-through; }
.pick-dot { display: inline-flex; align-items: center; gap: 10px; }

/* ---------- Your logo (in place of the ProPoker name) ---------- */
body.has-logo .topbar .brand .logo, body.has-logo .topbar .brand h1 { display: none; }
.brand-logo { display: block; height: 38px; max-width: 200px; object-fit: contain; }
img.plate { padding: 4px 8px; border-radius: 10px; background: #ffffff; }
.look-link { margin: 0; text-align: center; }
.look-link button.link { min-height: 44px; }
.look-preview { display: grid; place-items: center; min-height: 96px; margin: 12px 0; padding: 12px; border-radius: 14px; background: var(--well); border: 1px solid var(--well-line); }
.look-preview img { max-height: 80px; max-width: 100%; object-fit: contain; }
/* The accent swatches, like ProQuiz: gradient discs, a ring round the chosen one */
.accent-name { font-weight: 400; }
.accent-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.accent { position: relative; width: 48px; height: 48px; cursor: pointer; }
.accent input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.accent span { position: absolute; inset: 5px; border-radius: 50%; background: linear-gradient(135deg, var(--a) 35%, var(--b)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 2px 8px rgb(0 0 0 / 0.3); pointer-events: none; transition: transform 120ms; }
.accent:hover span { transform: scale(1.08); }
.accent input:checked + span, .accent.custom.on span { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--text); }
.accent input:focus-visible + span, button.accent:focus-visible span { outline: 3px solid var(--green); outline-offset: 4px; }
/* Your own colour: a colour wheel until one is chosen, then that colour */
.accent.custom span { background: conic-gradient(from 90deg, #ff4d4d, #ffd23f, #2ee59d, #38c8ff, #6f55ff, #ff5fa2, #ff4d4d); }
.accent.custom.on span { background: var(--a); }
button.accent { min-height: 0; padding: 0; border: 0; background: none !important; box-shadow: none !important; }

/* The colour box: a big swatch, the colour code, and sliders whose tracks show the colours */
.colour-box { display: flex; flex-direction: column; gap: 6px; }
.colour-top { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.colour-swatch { flex: none; width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--glass-edge), 0 8px 24px rgb(0 0 0 / 0.3); }
.colour-hex { flex: 1; min-width: 0; font: 700 22px/1 "Barlow Condensed", system-ui, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; }
.colour-row { display: flex; flex-direction: column; gap: 2px; font-size: 14px; font-weight: 600; color: var(--muted); }
.colour-range { -webkit-appearance: none; appearance: none; width: 100%; height: 48px; margin: 0; padding: 0; border: 0; background: transparent !important; box-shadow: none !important; cursor: pointer; }
.colour-range.hue { --track: linear-gradient(to right, hsl(0 var(--s) var(--l)), hsl(60 var(--s) var(--l)), hsl(120 var(--s) var(--l)), hsl(180 var(--s) var(--l)), hsl(240 var(--s) var(--l)), hsl(300 var(--s) var(--l)), hsl(360 var(--s) var(--l))); }
.colour-range.sat { --track: linear-gradient(to right, hsl(var(--h) 0% var(--l)), hsl(var(--h) 100% var(--l))); }
.colour-range.light { --track: linear-gradient(to right, hsl(var(--h) var(--s) 10%), hsl(var(--h) var(--s) 50%), hsl(var(--h) var(--s) 90%)); }
.colour-range::-webkit-slider-runnable-track { height: 22px; border-radius: 999px; background: var(--track); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12); }
.colour-range::-moz-range-track { height: 22px; border-radius: 999px; background: var(--track); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12); }
.colour-range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -4px; border-radius: 50%; background: #ffffff; border: 0; box-shadow: 0 2px 8px rgb(0 0 0 / 0.45), inset 0 0 0 2px rgb(0 0 0 / 0.08); }
.colour-range::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: #ffffff; border: 0; box-shadow: 0 2px 8px rgb(0 0 0 / 0.45); }
.colour-range:focus-visible { outline: none; }
.colour-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--green), 0 2px 8px rgb(0 0 0 / 0.45); }
.seg.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* ---------- The TV view (?tv): sized by the screen, readable across the room ---------- */
body.tv-mode { overflow: hidden; }
body.tv-mode .topbar, body.tv-mode .tagline { display: none; }
body.tv-mode main { max-width: none; margin: 0; padding: 0; }
.tv:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2vw; height: 100vh; padding: 3vh 2.5vw; box-sizing: border-box; }
.tv.with-side { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); }
.tv-main { display: flex; flex-direction: column; justify-content: center; gap: 3vh; min-height: 0; }
.tv-clock { flex: none; display: flex; flex-direction: column; justify-content: center; min-height: 0; overflow: hidden; padding: 2.5vh 2vw; border-radius: 3vh; }
.tv-brand { display: flex; align-items: center; justify-content: center; gap: 1.5vw; min-height: 0; margin-bottom: 1vh; font: 700 min(2.2vw, 4vh)/1.1 "Barlow Condensed", system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.04em; }
.tv-brand:empty { display: none; }
.tv-brand img { max-height: 8vh; max-width: 40%; object-fit: contain; }
.tv-clock .c-level { font-size: min(3.4vw, 6vh); }
.tv-clock .countdown { font-size: min(17vw, 28vh); margin: 0.5vh 0; }
.tv.with-side .tv-clock .countdown { font-size: min(11vw, 21vh); }
.tv-clock .progress { height: 1vh; margin: 1vh 6%; }
.tv-clock .c-blinds { font-size: min(6vw, 10vh); }
.tv.with-side .tv-clock .c-blinds { font-size: min(4.2vw, 7.5vh); }
.tv-clock .c-ante { font-size: min(3vw, 5.5vh); }
.tv-clock .c-next { margin-top: 1vh; font-size: min(2.2vw, 4vh); }
.tv-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1vw; margin: 0; }
.tv-facts .fact { padding: 2vh 1.2vw; border-radius: 2vh; }
.tv-facts .fact-label { font-size: min(1.05vw, 2vh); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-facts .fact-value { font-size: min(3vw, 6vh); }
.tv-facts .fact-sub { font-size: min(1.2vw, 2.3vh); }
.tv-chips { margin: 0; gap: 1vh 2vw; }
.tv-chips .stack-chip { font-size: min(1.9vw, 3.6vh); }
.tv-status { margin: 0; font-size: min(1.8vw, 3.4vh); }
.tv-status:empty { display: none; }
.tv-side { display: none; flex-direction: column; min-height: 0; padding: 3vh 2vw; border-radius: 3vh; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--shadow); }
.tv.with-side .tv-side { display: flex; }
.tv-panel-title { margin: 0 0 2vh; font: 700 min(3vw, 5.5vh)/1 "Barlow Condensed", system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.04em; }
.tv-panel { flex: 1; min-height: 0; overflow: hidden; font-size: min(1.9vw, 3.6vh); animation: fade-in 0.4s ease-out; }
.tv-rows { list-style: none; margin: 0; padding: 0; }
.tv-rows li { display: flex; align-items: baseline; gap: 1.2vw; padding: 1vh 0; border-top: 1px solid var(--line); break-inside: avoid; }
.tv-rows li:first-child { border-top: 0; }
.tv-rows.two-cols { columns: 2; column-gap: 2.5vw; font-size: 0.85em; }
.tv-rows.two-cols.many { font-size: 0.7em; }
.tv-rows.two-cols.many li { padding: 0.6vh 0; }
.tv-rows li.out { color: var(--muted); }
.tv-rows li.out .tv-name { font-weight: 500; }
.tv-rows.two-cols li { border-top: 0; border-bottom: 1px solid var(--line); }
.tv-rows li.now { color: var(--green); font-weight: 700; }
.tv-rows li.break { color: var(--muted); }
.tv-rows li.leader .tv-name { color: var(--gold); }
.tv-lv { flex: none; min-width: 2.6em; font-weight: 700; font-variant-numeric: tabular-nums; }
.tv-name { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-time, .tv-amount { flex: none; font-variant-numeric: tabular-nums; color: var(--muted); }
.tv-amount { color: var(--gold); font-weight: 700; }
.tv-pool { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.5vh; font-size: 1.1em; }
.tv-pool strong { color: var(--gold); font: 700 1.6em/1 "Barlow Condensed", system-ui, sans-serif; }
.tv-empty { color: var(--muted); }
.tv-tables { display: grid; grid-auto-rows: minmax(0, 1fr); gap: 2vh; height: 100%; }
.tv-tables.two-cols { grid-template-columns: 1fr 1fr; }
.tv-tables .drawn-table { display: flex; justify-content: center; align-items: center; min-height: 0; height: 100%; margin: 0; container-type: size; }
/* As big as fits, always 3:2 (lying down), with room for the rail and the seats */
.tv-tables .poker-table { width: min(88cqw, 132cqh); height: auto; }
.tv-panel .seat-marker { pointer-events: none; }
.tv-dots { display: flex; justify-content: center; gap: 1vw; margin-top: 1.5vh; }
.tv-dots span { width: 1.2vh; height: 1.2vh; border-radius: 50%; background: var(--line); }
.tv-dots span.on { background: var(--green); }
.tv-start { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: var(--backdrop); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tv-start[hidden] { display: none; }
.tv-start-box { max-width: 460px; text-align: center; }
.tv-corner { position: fixed; top: 2vh; right: 2vw; z-index: 15; display: flex; gap: 8px; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
body.pointer .tv-corner { opacity: 1; pointer-events: auto; }
body.tv-mode .overlay-box { width: min(70vw, 1200px); padding: 6vh 4vw; }
body.tv-mode .ov-title { font-size: min(4vw, 7vh); }
body.tv-mode .ov-main { font-size: min(12vw, 22vh); }
body.tv-mode .ov-sub, body.tv-mode .ov-note { font-size: min(2.6vw, 4.6vh); }