/* Dartivo · Browser-Anzeige – "Ringlicht": brass on graphite, a dark room with one lit board.
   Sizes in vmin / vh so the same page fills a 1080p / 4K TV, a PC monitor and a tablet. */

:root {
  --night: #0A0D13;
  --dusk: #121823;
  --steel: #1B2230;
  --raised: #232B3A;
  --ice: #EEF3FA;
  --fog: #9AA6B8;
  --haze: #6E7A8C;
  --brass: #F5C04E;
  --brass-text: #FFCF6B;
  --green: #55E39A;
  --red: #FF7A84;
  --amber: #FFB36B;
  --hair: rgba(255, 255, 255, 0.10);
  --glass: rgba(255, 255, 255, 0.055);
  --glass-strong: rgba(255, 255, 255, 0.09);
  --radius: 1.6vmin;
  --pad: 2.2vmin;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--night);
  /* the ring light: a soft warm glow from the top */
  background-image: radial-gradient(ellipse at 50% -20%, rgba(245, 192, 78, 0.10), rgba(10, 13, 19, 0) 60%);
  background-attachment: fixed;
  color: var(--ice);
  font-family: var(--font);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
body.idle-cursor, body.idle-cursor * { cursor: none !important; }
#app { height: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
.noscript { padding: 2rem; text-align: center; }

.brand { font-weight: 900; letter-spacing: 0.04em; color: var(--brass); font-size: 6vmin; }
.brand.small { font-size: 3.6vmin; }

/* ---- screens: code entry, waiting, errors ---- */
.screen {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 4vmin; gap: 2.4vmin;
}
.screen h1 { margin: 0; font-size: 5vmin; font-weight: 800; }
.screen p { margin: 0; font-size: 2.6vmin; color: var(--fog); max-width: 70ch; }
.screen .error { color: var(--red); min-height: 1.2em; }
.screen .hint { color: var(--haze); }
.code-form { display: flex; gap: 2vmin; flex-wrap: wrap; justify-content: center; }
.code-input {
  width: 9.5ch; font: 800 8vmin/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; text-align: center;
  color: var(--ice); background: var(--steel); border: 0.35vmin solid var(--hair); border-radius: var(--radius);
  padding: 1.6vmin 2vmin; outline: none;
}
.code-input:focus { border-color: var(--brass); box-shadow: 0 0 0 0.6vmin rgba(245, 192, 78, 0.25); }
.primary {
  background: linear-gradient(135deg, #FFE08A, #F5C04E 55%, #D99A1E); color: #1A1200;
  border: 0; border-radius: var(--radius); padding: 1.6vmin 4vmin; font-size: 4vmin; font-weight: 800;
}
.primary:focus { outline: 0.5vmin solid var(--ice); outline-offset: 0.4vmin; }
.message .ring {
  width: 14vmin; height: 14vmin; border-radius: 50%;
  border: 1.2vmin solid rgba(245, 192, 78, 0.25); border-top-color: var(--brass);
  animation: spin 1.6s linear infinite;
}
.message.warn h1 { color: var(--amber); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .message .ring { animation: none; } }

/* ---- scoreboard frame ---- */
.tv { height: 100%; display: flex; flex-direction: column; padding: var(--pad); gap: calc(var(--pad) * 0.8); }
.top { display: flex; align-items: center; gap: 2.4vmin; min-height: 7vmin; }
.titles { min-width: 0; flex: 1 1 auto; }
.leg-title { font-size: 4.2vmin; font-weight: 900; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sub-title { font: 600 2.2vmin var(--mono); color: var(--fog); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result { font-size: 3.6vmin; font-weight: 900; color: var(--green); white-space: nowrap; }
.result.match { color: var(--brass-text); }
.controls { display: flex; align-items: center; gap: 1.4vmin; flex: 0 0 auto; }
.pill {
  display: inline-flex; align-items: center; gap: 0.9vmin; padding: 0.6vmin 1.6vmin; border-radius: 99px;
  background: var(--glass); border: 1px solid var(--hair); font-size: 1.9vmin; font-weight: 700; color: var(--fog);
}
.pill .dot { width: 1.3vmin; height: 1.3vmin; border-radius: 50%; background: var(--amber); }
.pill.live .dot { background: #2FD37E; box-shadow: 0 0 1vmin #2FD37E; }
.pill.unknown .dot, .pill.ended .dot { background: #FF4D5A; }
.code { font: 800 2.2vmin var(--mono); letter-spacing: 0.1em; color: var(--haze); }
.icon {
  width: 5vmin; height: 5vmin; min-width: 36px; min-height: 36px; border-radius: 1.2vmin;
  background: var(--glass); border: 1px solid var(--hair); font-size: 2.8vmin; line-height: 1;
  transition: opacity 0.3s;
}
.icon:focus { outline: 0.4vmin solid var(--brass); }
body.idle-cursor .icon { opacity: 0; }

.board { flex: 1 1 auto; min-height: 0; display: flex; gap: var(--pad); }
.board.wide { flex-direction: row; }
.board.narrow { flex-direction: column; }
.players { display: grid; gap: 1.8vmin; flex: 1 1 auto; min-height: 0; min-width: 0; }

/* ---- player card ---- */
.card {
  --pc: #5B9BFF;
  position: relative; min-width: 0; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 2vmin 2.4vmin 1.6vmin 3.4vmin;
  border-radius: var(--radius);
  background: rgba(27, 34, 48, 0.85);
  border: 1px solid var(--hair);
}
.card::before { /* fixed colour edge */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1.1vmin; background: var(--pc);
}
.card.active {
  border: 0.7vmin solid var(--pc);
  background: #18202d; /* older TV browsers without color-mix() */
  box-shadow: 0 0 3vmin var(--pc);
  box-shadow: 0 0 3vmin color-mix(in srgb, var(--pc) 45%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 16%, #121823), color-mix(in srgb, var(--pc) 8%, #121823));
}
.card.waiting .score { opacity: 0.82; }
.name-row { display: flex; align-items: center; gap: 1.2vmin; min-width: 0; }
.name { font-size: 4.2vmin; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bot { color: var(--pc); font-size: 3.4vmin; }
.starter { width: 1.6vmin; height: 1.6vmin; border-radius: 50%; background: var(--pc); flex: 0 0 auto; }
.spacer { flex: 1 1 auto; }
.at-oche {
  flex: 0 0 auto; background: var(--pc); color: var(--night); border-radius: 99px;
  font: 900 2.2vmin var(--mono); padding: 0.5vmin 1.5vmin; letter-spacing: 0.06em;
}
.trophy { font-size: 3.4vmin; }
.place { font-size: 3.6vmin; font-weight: 900; color: var(--brass-text); }
.badge {
  flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 0.4vmin;
  background: var(--glass-strong); border-radius: 0.8vmin; padding: 0.3vmin 1.1vmin;
}
.badge small { font: 700 2vmin var(--mono); color: var(--fog); }
.badge b { font-size: 3.8vmin; font-weight: 900; font-variant-numeric: tabular-nums; }
.score {
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 18vmin; font-weight: 900; line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #FFFFFF, #C9D3E2);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.checkout, .note {
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 800 3vmin var(--mono); color: var(--green); min-height: 1.2em;
}
.card.active .checkout { font-size: 5vmin; }
.checkout .scope { margin-right: 1.2vmin; font-size: 0.8em; }
.note { color: var(--amber); font-family: var(--font); font-weight: 600; font-size: 2.6vmin; }
.stats { display: flex; gap: 3vmin; font: 600 2.4vmin var(--mono); white-space: nowrap; overflow: hidden; margin-top: 0.6vmin; }
.stat small { color: var(--fog); margin-right: 0.8vmin; font-size: 1em; }
.stat b { font-weight: 700; font-variant-numeric: tabular-nums; }
.bust { color: var(--red) !important; }
.out { color: var(--green) !important; }

/* ---- visit: sidebar (wide) / strip (narrow) ---- */
.eyebrow {
  display: flex; align-items: center; gap: 1vmin;
  font: 700 1.9vmin var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fog);
  white-space: nowrap; overflow: hidden;
}
.pdot { width: 1.4vmin; height: 1.4vmin; border-radius: 50%; flex: 0 0 auto; display: inline-block; background: var(--pc, #9AA6B8); }
.pdot.big { width: 3vmin; height: 3vmin; }
.darts { display: flex; gap: 1.2vmin; align-items: stretch; }
.dart {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 0.4vmin;
  border-radius: 1.2vmin; background: var(--glass-strong); border: 1px solid var(--hair);
  font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dart.empty { background: var(--glass); border: 1px dashed var(--hair); color: var(--haze); }
.dart.next { background: var(--glass); border: 0.3vmin solid var(--brass); color: var(--brass-text); }
.dart.uncertain { border: 0.3vmin solid #FF9A3C; }
.dart .q { color: var(--amber); }
.dart .hot { color: var(--brass-text); }
.dart .bust { text-decoration: line-through; }

.side {
  flex: 0 0 27%; min-width: 0; display: flex; flex-direction: column; gap: 1.6vmin;
  padding: 2.4vmin; border-radius: var(--radius); background: rgba(27, 34, 48, 0.7); border: 1px solid var(--hair);
  overflow: hidden;
}
.side .darts { height: 11vmin; }
.side .dart { font-size: 4.6vmin; }
.sum { display: flex; align-items: baseline; justify-content: space-between; }
.sum b { font-size: 7vmin; font-weight: 900; font-variant-numeric: tabular-nums; }
.side hr { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.07); width: 100%; margin: 0.4vmin 0; }
.history { display: flex; flex-direction: column; gap: 0.6vmin; overflow: hidden; min-height: 0; }
.hrow { display: flex; align-items: center; gap: 1.2vmin; min-height: 4.6vmin; }
.hname { flex: 1 1 auto; min-width: 0; font-size: 2.2vmin; font-weight: 600; color: var(--fog); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdarts { font: 500 2vmin var(--mono); color: var(--haze); white-space: nowrap; }
.hrow b { min-width: 7vmin; text-align: right; font-size: 3.2vmin; font-weight: 900; font-variant-numeric: tabular-nums; }

.strip { flex: 0 0 auto; height: 19vh; display: flex; gap: 2vmin; }
.strip-visit { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.8vmin; }
.strip-prev { flex: 0 0 38%; min-width: 0; display: flex; flex-direction: column; gap: 0.8vmin; opacity: 0.85; }
.strip .darts { flex: 1 1 auto; min-height: 0; }
.strip .dart { font-size: 6.5vmin; }
.strip-prev .dart { font-size: 4.4vmin; }
.strip .total { flex: 0 0 auto; min-width: 14vmin; display: flex; align-items: center; justify-content: center; font-size: 8vmin; font-weight: 900; font-variant-numeric: tabular-nums; }
.strip-prev .total { font-size: 5.4vmin; min-width: 10vmin; }

/* ---- other games: names + whose turn ---- */
.other { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 2vmin; padding: 0 4vmin; }
.orow {
  --pc: #5B9BFF; display: flex; align-items: center; gap: 2vmin; padding: 2vmin 3vmin;
  border-radius: var(--radius); background: rgba(27, 34, 48, 0.8); border: 1px solid var(--hair);
}
.orow .pdot { background: var(--pc); }
.orow .name { font-size: 6vmin; }
.orow.active { border: 0.6vmin solid var(--pc); background: #18202d; background: color-mix(in srgb, var(--pc) 14%, #121823); }
.orow .at-oche { font-size: 3vmin; }
.onote { text-align: center; color: var(--fog); font-size: 2.6vmin; }

/* portrait (tablet upright, phone): bigger type relative to the short side */
@media (orientation: portrait) {
  .strip { height: 16vh; }
  .name { font-size: 5vmin; }
  .strip .dart { font-size: 5.6vmin; }
  .strip .total { font-size: 7vmin; }
  .strip-prev .dart { font-size: 3vmin; }
  .strip-prev .total { font-size: 4vmin; min-width: 8vmin; }
  .strip-prev .darts { gap: 0.8vmin; }
}