/* Tournament Clock — felt-green ink with brass, condensed display numerals.
   Dark is the default (good on TVs); light follows the device setting. */
:root {
  --bg: #0e1517; --panel: #152024; --panel-2: #1a282d; --line: #23343a; --fg: #e8eeec; --muted: #8fa3a3;
  --brass: #d9a441; --brass-ink: #1a1305; --felt: #1f6b57; --felt-ink: #ffffff;
  --ok: #4caf7d; --warn: #f0a43a; --crit: #ef5350;
  --display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 10px;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #eef2f0; --panel: #ffffff; --panel-2: #f5f8f7; --line: #d3dcd9; --fg: #14201f; --muted: #5b6d6b;
    --brass: #a8741a; --brass-ink: #fffaf0; --felt: #1f6b57; --ok: #2e7d4f; --warn: #b86a00; --crit: #c62828;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #eef2f0; --panel: #ffffff; --panel-2: #f5f8f7; --line: #d3dcd9; --fg: #14201f; --muted: #5b6d6b;
  --brass: #a8741a; --brass-ink: #fffaf0; --felt: #1f6b57; --ok: #2e7d4f; --warn: #b86a00; --crit: #c62828;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
body { font-family: var(--body); font-size: 15px; line-height: 1.45; -webkit-text-size-adjust: 100%; }
a { color: var(--brass); }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: .01em; margin: 0; text-wrap: balance; }
h1 { font-size: 32px; } h2 { font-size: 24px; } h3 { font-size: 19px; }
p { margin: 0; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.label { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }

/* Shell */
.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 21; background: var(--bg); }
.topbar-in { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 12px; min-height: 56px; flex-wrap: wrap; padding-block: 6px; }
.brand { font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--fg); text-decoration: none; display: flex; align-items: center; gap: 8px; }
.brand-mark { width: 26px; height: 26px; border-radius: 50%; border: 3px dashed var(--brass); display: inline-block; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; align-items: center; }
.nav a { color: var(--muted); text-decoration: none; padding: 8px 10px; border-radius: 8px; font-weight: 500; }
.nav a.on, .nav a:hover { color: var(--fg); background: var(--panel); }
main {
  max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px;
  padding-block: 22px 60px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
main.narrow { max-width: 460px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* Surfaces */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row.end { justify-content: flex-end; }
.spread { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }

/* Controls */
button, .btn {
  font: inherit; font-size: 14px; font-weight: 500; color: var(--fg); background: transparent;
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 14px; cursor: pointer; min-height: 42px;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
button:hover, .btn:hover { border-color: var(--muted); }
button:disabled { opacity: .5; cursor: default; }
button.primary, .btn.primary { background: var(--brass); color: var(--brass-ink); border-color: var(--brass); font-weight: 600; }
button.danger { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 45%, var(--line)); }
button.link { border: 0; background: none; color: var(--brass); padding: 0; min-height: 0; text-decoration: underline; }
button.wide, .btn.wide { width: 100%; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

label.field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); min-width: 0; }
label.field > span.hint { font-size: 12px; }
input, select, textarea {
  font: inherit; font-size: 16px; color: var(--fg); background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 12px; min-width: 0; width: 100%;
}
input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--brass); }
label.check { display: flex; gap: 10px; align-items: center; font-size: 15px; color: var(--fg); }
input.num { text-align: right; }

.msg { padding: 10px 12px; border-radius: 8px; font-size: 14px; border: 1px solid var(--line); }
.msg.error { border-color: color-mix(in srgb, var(--crit) 55%, var(--line)); color: var(--crit); background: color-mix(in srgb, var(--crit) 8%, transparent); }
.msg.ok { border-color: color-mix(in srgb, var(--ok) 55%, var(--line)); color: var(--ok); background: color-mix(in srgb, var(--ok) 8%, transparent); }
.msg.warn { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); color: var(--warn); }

.pill { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 99px; background: var(--line); color: var(--muted); white-space: nowrap; }
.pill.felt { background: var(--felt); color: var(--felt-ink); }
.pill.brass { background: color-mix(in srgb, var(--brass) 22%, transparent); color: var(--brass); }
.pill.crit { background: color-mix(in srgb, var(--crit) 18%, transparent); color: var(--crit); }

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--muted); padding: 10px 14px; white-space: nowrap; }
.tabs button.on { color: var(--fg); border-bottom-color: var(--brass); }
.tabs .count { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12px; }

/* Lists */
.list { display: flex; flex-direction: column; }
.item { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.item:last-child { border-bottom: 0; }
.item-main { min-width: 0; flex: 1 1 260px; display: flex; flex-direction: column; gap: 3px; }
.item-title { font-weight: 600; font-size: 16px; }
.item a.item-title { color: var(--fg); text-decoration: none; }
.item a.item-title:hover { color: var(--brass); }
.empty { text-align: center; padding: 34px 12px; color: var(--muted); display: flex; flex-direction: column; gap: 12px; align-items: center; }

/* Tables */
.scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.data th { text-align: left; font-weight: 500; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.data td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data td.r, table.data th.r { text-align: right; }

/* Wizard */
.steps { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.steps button { min-height: 34px; padding: 6px 10px; font-size: 13px; white-space: nowrap; color: var(--muted); }
.steps button .n { font-family: var(--display); font-weight: 700; margin-right: 4px; }
.steps button.on { color: var(--brass-ink); background: var(--brass); border-color: var(--brass); }
.steps button.done { color: var(--fg); }
.wizard-foot { display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.choice button { flex-direction: column; align-items: flex-start; text-align: left; padding: 16px; min-height: 96px; gap: 6px; }
.choice button strong { font-family: var(--display); font-size: 21px; font-weight: 600; }
.choice button.on { border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); }
.split { font-family: var(--display); font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }

table.levels { min-width: 560px; }
table.levels input { padding: 6px 8px; font-size: 15px; text-align: right; max-width: 120px; }
table.levels tr.brk td { color: var(--muted); }
table.levels td.edited input { border-color: var(--brass); }
table.levels .act { white-space: nowrap; text-align: right; }
table.levels .act button { min-height: 32px; padding: 4px 8px; font-size: 12px; }

/* Landing */
.landing { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; max-width: 1060px; margin: 0 auto; padding-block: 40px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (max-width: 820px) { .landing { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 28px; } }
.hero h1 { font-size: clamp(44px, 7vw, 76px); line-height: .95; font-weight: 700; }
.hero p.lead { font-size: 18px; color: var(--muted); max-width: 32em; margin-top: 16px; }
.hero .clockface { font-family: var(--display); font-weight: 700; font-size: clamp(64px, 11vw, 120px); line-height: 1; color: var(--brass); font-variant-numeric: tabular-nums; margin-top: 22px; }
.hero .blinds { font-family: var(--display); font-size: 26px; color: var(--muted); font-variant-numeric: tabular-nums; }
.qrcard { display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; }
.qrbox { background: #fff; border-radius: 14px; padding: 14px; width: min(280px, 100%); aspect-ratio: 1; max-width: 100%; display: grid; place-items: center; }
.qrbox svg { width: 100%; height: 100%; display: block; }
.qrbox.dim svg { opacity: .2; }

/* Display placeholder */
.tv { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 24px; }
.tv .big { font-family: var(--display); font-weight: 700; font-size: clamp(48px, 10vw, 140px); line-height: 1; }

.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-weight: 500; z-index: 50; max-width: calc(100% - 32px); }

.dialog-back { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 40; display: grid; place-items: center; padding: 16px; }
.dialog { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px; width: min(440px, 100%); display: flex; flex-direction: column; gap: 14px; }
.grow { flex: 1 1 220px; min-width: 0; }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; overflow-wrap: anywhere; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 6px 0 0; font-family: ui-monospace, Menlo, Consolas, monospace; }
details summary { cursor: pointer; font-weight: 600; }
table.data td.muted { width: 40%; }

/* ---- TV display (blueprint: Display screen) — readable from 8 m, countdown ~40% of height ---- */
.tvscreen { position: fixed; inset: 0; background: var(--bg); color: var(--fg); display: grid; grid-template-rows: auto 1fr auto; gap: 1.5vh;
  padding: max(2vh, env(safe-area-inset-top, 0px)) max(3vw, env(safe-area-inset-right, 0px)) max(2vh, env(safe-area-inset-bottom, 0px)) max(3vw, env(safe-area-inset-left, 0px)); overflow: hidden; cursor: default; }
.tv-top { display: flex; justify-content: space-between; align-items: center; gap: 2vw; font-family: var(--display); font-weight: 600; font-size: clamp(18px, 2.8vw, 46px); }
.tv-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-topright { display: flex; align-items: center; gap: 1.5vw; }
.tv-now { color: var(--muted); font-variant-numeric: tabular-nums; }
.tv-sound { font-size: clamp(12px, 1.1vw, 18px); min-height: 0; padding: .4em .8em; opacity: .55; }
.tv-sound.on { opacity: .9; border-color: var(--brass); color: var(--brass); }
.tv-sound:hover, .tv-sound:focus-visible { opacity: 1; }
.tv-main { display: grid; grid-template-columns: 1fr 2.4fr 1fr; gap: 3vw; align-items: center; min-height: 0; }
@media (max-aspect-ratio: 1/1) { .tv-main { grid-template-columns: 1fr; } .tv-side { display: none !important; } }
.tv-center { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .6vh; min-width: 0; overflow: hidden; }
.tv-level { font-family: var(--display); font-weight: 600; color: var(--brass); text-transform: uppercase; letter-spacing: .06em; font-size: clamp(22px, 3.4vw, 60px); }
.tv-time { font-family: var(--display); font-weight: 700; line-height: .88; font-variant-numeric: tabular-nums; font-size: min(38vh, 17vw); letter-spacing: .01em; white-space: nowrap; }
.tv-time.warn { color: var(--warn); } .tv-time.crit { color: var(--crit); }
.tv-time.idle { color: var(--muted); font-size: min(30vh, 20vw); }
.tv-blinds { font-family: var(--display); font-weight: 600; font-variant-numeric: tabular-nums; font-size: clamp(40px, 7vw, 130px); line-height: 1; }
.tv-ante { color: var(--muted); font-size: clamp(18px, 2.6vw, 44px); font-variant-numeric: tabular-nums; }
.tv-next { color: var(--muted); font-size: clamp(16px, 2.1vw, 36px); font-variant-numeric: tabular-nums; }
.tv-side { display: flex; flex-direction: column; gap: 3vh; min-width: 0; }
.tv-label { display: block; font-size: clamp(11px, 1.1vw, 20px); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.tv-stat b { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(22px, 3.2vw, 58px); font-variant-numeric: tabular-nums; line-height: 1.05; }
.tv-up { display: flex; flex-direction: column; gap: .35em; font-family: var(--display); font-size: clamp(16px, 2.1vw, 38px); font-variant-numeric: tabular-nums; }
.tv-uprow { display: flex; justify-content: space-between; gap: 1em; border-bottom: 1px solid var(--line); padding-bottom: .2em; }
.tv-uprow span:first-child { color: var(--muted); }
.tv-uprow.brk { color: var(--brass); }
.tv-banner { text-align: center; font-family: var(--display); font-weight: 700; letter-spacing: .14em; font-size: clamp(22px, 3.6vw, 64px); padding: .25em; border-radius: 12px; background: var(--brass); color: var(--brass-ink); }
.tv-banner.paused { background: var(--panel-2); color: var(--fg); border: 2px solid var(--brass); }

/* ---- pairing screen at /tv ---- */
.pair { position: fixed; inset: 0; background: var(--bg); color: var(--fg); display: grid; place-items: center; text-align: center; padding: 4vh 4vw; }
.pair-in { display: flex; flex-direction: column; align-items: center; gap: 3vh; }
.pair-code { font-family: var(--display); font-weight: 700; font-size: min(22vh, 16vw); letter-spacing: .08em; line-height: 1; color: var(--brass); font-variant-numeric: tabular-nums; }
.pair-big { font-family: var(--display); font-size: clamp(24px, 4vw, 64px); font-weight: 600; }
.pair-small { color: var(--muted); font-size: clamp(14px, 1.8vw, 30px); max-width: 40em; }

/* ---- TD clock panel ---- */
.td-clock { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 820px) { .td-clock { grid-template-columns: minmax(0, 1fr); } }
.td-face { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.td-face .lvl { font-family: var(--display); font-weight: 600; font-size: 22px; color: var(--brass); letter-spacing: .05em; text-transform: uppercase; }
.td-face .time { font-family: var(--display); font-weight: 700; font-size: clamp(76px, 15vw, 150px); line-height: .9; font-variant-numeric: tabular-nums; }
.td-face .time.warn { color: var(--warn); } .td-face .time.crit { color: var(--crit); }
.td-face .blinds { font-family: var(--display); font-weight: 600; font-size: clamp(28px, 5vw, 44px); font-variant-numeric: tabular-nums; }
.td-controls { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.td-controls .big { min-width: 150px; font-size: 17px; min-height: 52px; }
.td-controls button { min-height: 46px; }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--crit); margin-right: 6px; vertical-align: middle; }
.live-dot.on { background: var(--ok); }
table.data tr.cur td { background: color-mix(in srgb, var(--brass) 16%, transparent); font-weight: 600; }
table.data tr.past td { opacity: .5; }
table.data tr.brk td { color: var(--muted); }
.codebox { font-family: var(--display); font-size: 30px; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }