/* Score It — dark, typographic, phone-first, and it grows with the screen. */

:root {
  color-scheme: dark;   /* native range, colour picker and scrollbars come up dark too */

  --bg: #000;
  --surface: #131315;
  --surface-2: #1d1d20;
  --track: #1f1f22;
  --line: #2a2a2e;
  --text: #f2f2f5;
  --muted: #8b8b92;
  --danger: #ff453a;
  --gold:#ffc03b;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --sheet-r: 26px;

  /* Set from JS, per player count and screen. */
  --dot-pct: 16;
  --app-w: 560px;      /* the column's width; follows the height it has to fill */
  --label-span: 108px; /* a label's height — capped when the window is short */
  --label-w: 108px;    /* a label's width — never capped, so names don't clip */
  --score-fs: 40px;
  --name-fs: 15px;
}

* { box-sizing: border-box; }

/* .picker and .sheet set their own display, which would otherwise beat the UA rule for [hidden]. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  overscroll-behavior: none;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---------- shell ---------- */

.app {
  position: fixed;
  inset: 0;
  /* A centred column, not a giant donut: JS grows --app-w with the screen and stops
     at 920px, past which a bigger ring is a longer reach rather than an easier one. */
  width: min(100%, var(--app-w, 560px));
  margin-inline: auto;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding:
    calc(env(safe-area-inset-top) + 6px)
    calc(env(safe-area-inset-right) + 14px)
    calc(env(safe-area-inset-bottom) + 8px)
    calc(env(safe-area-inset-left) + 14px);
  gap: 6px;
}

.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.iconbtn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  transition: transform .18s var(--ease), background .18s var(--ease);
}
.iconbtn:active { transform: scale(.9); background: var(--surface-2); }
.iconbtn svg { width: 21px; height: 21px; fill: none; stroke: #9a9aa2; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- score labels ---------- */

.labels {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 2px 0;
}

.label {
  flex: 0 0 calc(var(--col, 33.333%) - 1px);   /* -1px so sub-pixel rounding never wraps a full row */
  min-width: 0;                                /* content must not floor the column width */
  height: var(--label-span);
  display: grid;
  place-items: center;
  overflow: visible;   /* the crown overhangs the top of the button box */
  padding: 0;
  touch-action: manipulation;
  user-select: none;             /* a long-press types a score; it must not select text or pop a callout */
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: opacity .26s var(--ease);
}
.label.is-pressing { opacity: .55; transition-duration: .45s; }

/* Mid-swipe the board belongs to one player: everybody else steps back. */
.app.is-dragging .label { opacity: 0; }
.app.is-dragging .label.is-active { opacity: 1; }

.label-inner {
  position: relative;   /* the crown hangs off the top of this box */
  width: var(--label-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform .42s var(--ease);
  will-change: transform;
}

.label .name {
  font-size: var(--name-fs);
  font-weight: 600;
  letter-spacing: .01em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: .92;
}

/* The running total sits in flow and sets the height; the swipe value is laid over it,
   so the two always share one position. Digits are set solid (line-height = cap height),
   which makes the box hug the ink — every gap below is then a real optical gap, and the
   stack's own margin and padding are what space and re-centre the three lines. */
.score-stack {
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
  text-align: center;
  margin-top: calc(var(--score-fs) * .181);      /* name baseline -> digit cap: .243em */
  padding-bottom: calc(var(--score-fs) * .069);  /* balances the name's own top bearing */
  transition: margin-top .34s var(--ease), padding-bottom .34s var(--ease);
}

.label .score,
.label .delta {
  font-size: var(--score-fs);
  font-weight: 800;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: .72;   /* set solid: the box hugs the digits */
  transform-origin: 50% 0;
}

.label .score { transition: transform .34s var(--ease), opacity .18s linear; }

.label .delta {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transform: scale(.5);
  transition: opacity 0s linear;   /* leaving: at once — two big numbers in one spot only ever read as mush */
  pointer-events: none;
}

/* The swipe value takes the total's place, big; the total shrinks and fades beneath it.
   Name, swipe value and total end up one equal gap apart, centred in the label as a group. */
.label.is-active .delta { opacity: 1; transform: scale(1); transition: transform .34s var(--ease), opacity .2s linear; }
.label.is-active .score { opacity: .42; transform: translateY(.873em) scale(.28); }
.label.is-active .score-stack {
  margin-top: calc(var(--score-fs) * .078);      /* both gaps land on .14em of ink */
  padding-bottom: calc(var(--score-fs) * .385);  /* ...and the trio centres itself in the label */
}

.label .score.pop { transform-origin: 50% 50%; animation: pop .42s var(--ease); }

@keyframes pop {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* ---------- target progress ---------- */

/* Out of flow, like the crown, so it never moves the tuned name/score metrics; it hangs
   just under the total and turns with the label. */
.label .bar {
  position: absolute;
  top: calc(100% + var(--score-fs) * .1);
  left: 50%;
  width: min(72%, calc(var(--score-fs) * 1.7));
  height: max(3px, calc(var(--score-fs) * .075));
  border-radius: 99px;
  overflow: hidden;
  transform: translateX(-50%);
  background: color-mix(in srgb, currentColor 18%, transparent);
  display: none;
  transition: opacity .2s linear;
}
.has-target .label .bar { display: block; }
.label .bar span {
  display: block;
  height: 100%;
  background: currentColor;
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .5s var(--ease);
}
.app.is-dragging .label .bar { opacity: 0; }

/* ---------- crown ---------- */

/* Out of flow on purpose: the leader changing must never nudge the name/score metrics
   below, which are tuned to the pixel. It rides inside .label-inner, so it turns with
   the name when a seat is rotated toward whoever is sitting there. */
.crown {
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: calc(var(--name-fs) * 1.1);
  margin-bottom: calc(var(--name-fs) * .06);
  color: var(--gold);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 22%) scale(.5) rotate(-8deg);
  transform-origin: 50% 100%;
  filter: drop-shadow(0 1px 6px rgba(255, 221, 157, .5));
  transition: opacity .18s linear, transform .3s var(--ease);
}

.crown svg { display: block; width: 100%; height: auto; fill: currentColor; transform: scaleX(1.8); }
.crown path { stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }

/* The delay lets the dragged label's score-stack finish settling before the crown
   lands, so a crown arriving on release doesn't drift with the anchor beneath it. */
.label.is-crowned .crown {
  opacity: 1;
  transform: translate(-50%, 0) scale(1) rotate(0deg);
  transition: opacity .26s linear .16s, transform .44s var(--ease) .16s;
}

/* Mid-swipe the standings are stale by definition, so the crown steps off the board —
   whoever is wearing it. The short delay keeps a tap-to-score from flickering it. */
.app.is-dragging .crown {
  opacity: 0;
  transform: translate(-50%, 14%) scale(.72) rotate(-4deg);
  transition: opacity .16s linear .09s, transform .24s var(--ease) .09s;
}

/* ---------- dial ---------- */

.stage {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  container-type: size;   /* lets the dial take the smaller of the two axes */
}

.dial {
  position: relative;
  width: min(100cqw, 100cqh);
  height: min(100cqw, 100cqh);
  container-type: size;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* Both widths are lengths so the transition can interpolate between them; in an SVG
   with a viewBox, 1px is one user unit, which is what --dot-pct is measured in. */
.ring-track {
  fill: none;
  stroke: var(--track);
  stroke-width: calc(var(--dot-pct) * 1px);
  transition: stroke-width .22s var(--ease);
}

.dial.is-dragging .ring-track {
  stroke-width: calc(var(--dot-pct) * 1.24px);
}

/* The swept trail. A conic gradient carved into the track band by a radial mask:
   full-strength where the dot is, easing back a shade over the tail behind it. */
.trail {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  /* half the track's stroke width, as a percentage of the dial's radius */
  --band: calc(var(--dot-pct) * 1.24%);
  -webkit-mask: radial-gradient(closest-side, #0000 calc(76% - var(--band)), #000 calc(76% - var(--band)), #000 calc(76% + var(--band)), #0000 calc(76% + var(--band)));
  mask: radial-gradient(closest-side, #0000 calc(76% - var(--band)), #000 calc(76% - var(--band)), #000 calc(76% + var(--band)), #0000 calc(76% + var(--band)));
}

.dots { position: absolute; inset: 0; }

.dot {
  position: absolute;
  width: max(44px, calc(var(--dot-pct) * 1cqw));
  height: max(44px, calc(var(--dot-pct) * 1cqw));
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: opacity .22s var(--ease);
  touch-action: none;
}

.dot-fill {
  width: calc(var(--dot-pct) * 1cqw);
  height: calc(var(--dot-pct) * 1cqw);
  border-radius: 50%;
  background: var(--c);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), opacity .3s var(--ease);
}

.dot:active .dot-fill { transform: scale(.9); }
/* With the round counter on, whoever has already scored this round steps back. */
.dot.is-done .dot-fill { opacity: .35; }
.dial.is-dragging .dot.is-active .dot-fill { opacity: 1; }
.dial.is-dragging .dot { opacity: 0; }   /* the ring belongs to one player mid-swipe */
.dial.is-dragging .dot.is-active { opacity: 1; }
.dial.is-dragging .dot.is-active .dot-fill { transform: scale(1.225); box-shadow: 0 0 5px color-mix(in srgb, var(--c) 75%, transparent); }

/* ---------- round hub ---------- */

.hub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40cqw;
  height: 40cqw;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: opacity .22s var(--ease);
}
.hub-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.2cqw;
  transition: transform .42s var(--ease);
}

/* Progress: one segment per round. It turns with the number, so the fill always
   starts at the top for whoever the round is facing. */
.hub-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hub-ring circle { fill: none; stroke-width: 3.2; stroke-linecap: round; }
.hub-ring .track { stroke: var(--track); }
.hub-ring .fill {
  stroke: var(--text);
  transition: stroke-dasharray .5s var(--ease), opacity .2s linear, stroke .4s var(--ease);
}
.hub.is-over .hub-ring .fill { stroke: var(--gold); }
.hub.is-final #hub-k { color: var(--gold); }

/* Game over: the number makes way for the crown and whoever is wearing it. */
.hub.is-over #hub-k, .hub.is-over .hub-n, .hub.is-over #hub-of { display: none; }
.hub-win { display: flex; flex-direction: column; align-items: center; gap: 2cqw; }
.hub-win.pop { animation: pop .42s var(--ease); }
.hub-crown {
  width: 8cqw;
  color: var(--gold);
  filter: drop-shadow(0 1px 6px rgba(255, 221, 157, .5));
}
.hub-crown svg { display: block; width: 100%; height: auto; fill: currentColor; transform: scaleX(1.8); }
.hub-crown path { stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.hub-who {
  max-width: 28cqw;
  font-size: max(12px, 4.6cqw);
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hub-k {
  font-size: max(10px, 2.8cqw);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.hub-n {
  font-size: 15cqw;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: .72;
  font-variant-numeric: tabular-nums;
  transition: transform .18s var(--ease);
}
.hub-n.pop { animation: pop .42s var(--ease); }
.hub:active .hub-n { transform: scale(.94); }
.dial.is-dragging .hub { opacity: 0; }

/* The starting player's marker: a small white disc just inside the ring, by their dot,
   like a dealer button. It hangs off an arm the size of the dial, so turning the arm
   carries it round the ring from one seat to the next. */
.starter {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: transform .7s var(--ease), opacity .22s var(--ease);
}
.starter::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(12% + var(--dot-pct) * .5% + max(8px, 3.4cqw));
  width: max(12px, 3.6cqw);
  height: max(12px, 3.6cqw);
  border-radius: 50%;
  background: var(--text);
  box-shadow: 0 0 max(8px, 2.4cqw) rgba(255, 255, 255, .35);
  transform: translate(-50%, -50%);
}
.dial.is-dragging .starter { opacity: 0; }

/* ---------- sheets ---------- */

.scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .3s var(--ease);
  z-index: 20;
}
.scrim.open { opacity: 1; }

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--kb, 0px);          /* rides above the on-screen keyboard, set from JS */
  width: min(100%, 640px, var(--app-w, 560px));
  margin-inline: auto;
  z-index: 21;
  max-height: calc(min(92dvh, 720px) - var(--kb, 0px));   /* twelve players must not become a 1300px wall */
  display: flex;
  flex-direction: column;
  background: #0c0c0e;
  border-radius: var(--sheet-r) var(--sheet-r) 0 0;
  border-top: 1px solid #232327;
  transform: translateY(101%);
  transition: transform .42s var(--ease);
  padding-bottom: env(safe-area-inset-bottom);
}
.sheet.open { transform: translateY(var(--drag-y, 0px)); }
/* Mid-drag the sheet is pinned to the finger, not the .42s ease. */
.sheet.dragging { transition: none; }

.sheet-grab {
  width: 38px;
  height: 5px;
  border-radius: 3px;
  background: #34343a;
  margin: 9px auto 2px;
  flex: 0 0 auto;
  touch-action: none;   /* always draggable, never a scroll/zoom gesture */
}

.sheet-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 18px 10px;
}
.sheet-head h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.textbtn { font-size: 16px; font-weight: 600; color: #0a84ff; padding: 6px 2px; }

.sheet-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 2px 16px 18px;
}

.sheet-foot {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}

.rows { background: var(--surface); border-radius: 16px; overflow: hidden; margin-bottom: 12px; }
.row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  min-height: 56px;
  border-bottom: 1px solid var(--line);
}
.row:last-child { border-bottom: 0; }

.swatch {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  transition: transform .18s var(--ease);
}
.swatch:active { transform: scale(.88); }

.name-input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--c, var(--text));
  background: none;
  border: 0;
  padding: 6px 0;
  outline: none;
}
.name-input::placeholder { color: #55555c; font-weight: 500; }

.row .tally { font-size: 15px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; padding: 6px 10px; margin: -6px -4px; border-radius: 10px; background: var(--surface-2); }
.row .tally:active { transform: scale(.94); }

.grip {
  flex: 0 0 auto;
  width: 24px;
  height: 36px;
  margin: -4px -6px -4px -4px;
  display: grid;
  place-items: center;
  touch-action: none;   /* the drag is ours, not a scroll */
  cursor: grab;
}
.grip svg { width: 18px; height: 18px; stroke: #5c5c63; stroke-width: 2; stroke-linecap: round; fill: none; }
.reordering .grip { cursor: grabbing; }

/* While one row is dragged, the rest glide aside; the lifted row tracks the finger exactly. */
.rows.reordering { overflow: visible; }
.reordering .row { transition: transform .18s var(--ease); }
.row.lifted {
  position: relative;
  z-index: 1;
  transition: none;
  background: var(--surface-2);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}

.del {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
}
.del svg { width: 15px; height: 15px; stroke: #8b8b92; stroke-width: 2; stroke-linecap: round; fill: none; }
.del:active { background: var(--danger); }
.del:active svg { stroke: #fff; }

.rowbtn {
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--surface);
  border-radius: 16px;
  font-size: 16px;
  font-weight: 600;
  color: #0a84ff;
  margin-bottom: 12px;
  transition: transform .16s var(--ease), background .16s var(--ease);
}
.rowbtn:active { transform: scale(.985); background: var(--surface-2); }
.rowbtn[disabled] { color: #4a4a50; pointer-events: none; }
.rowbtn.danger { color: var(--danger); margin-top: 24px; }

.group {
  margin: 22px 16px 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.plus { width: 19px; height: 19px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; }

.switch-row span, .range-row span, .seg-row > span, .stepper-row > span, .input-row > span { flex: 1 1 auto; font-size: 16px; font-weight: 500; }

.seg-row { flex-direction: column; align-items: stretch; gap: 11px; padding-top: 13px; padding-bottom: 13px; }

.seg {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
  background: #0c0c0e;
}
.seg button {
  flex: 1 1 0;
  min-height: 38px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  transition: background .2s var(--ease), color .2s var(--ease), transform .16s var(--ease);
}
.seg button:active { transform: scale(.93); }

.input-row input {
  width: 92px;
  padding: 7px 10px;
  border: 0;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 16px;   /* 16px or iOS zooms the page on focus */
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  outline: none;
}
.input-row input::placeholder { color: var(--muted); font-weight: 500; }

.stepper { display: flex; align-items: center; gap: 3px; padding: 3px; border-radius: 12px; background: #0c0c0e; }
.stepper button {
  width: 38px;
  height: 32px;
  border-radius: 9px;
  font-size: 19px;
  font-weight: 500;
  color: var(--text);
  background: var(--surface-2);
  transition: transform .16s var(--ease), opacity .2s var(--ease);
}
.stepper button:active { transform: scale(.93); }
.stepper button:disabled { opacity: .35; pointer-events: none; }
.stepper em { min-width: 40px; text-align: center; font-style: normal; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.seg button.on { background: var(--surface-2); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.range-row em { font-style: normal; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 62px; text-align: right; }
.range-row input[type=range] { flex: 0 0 130px; accent-color: #0a84ff; }
.switch { appearance: none; -webkit-appearance: none; width: 50px; height: 30px; border-radius: 15px; background: #3a3a40; position: relative; transition: background .22s var(--ease); flex: 0 0 auto; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .24s var(--ease); }
.switch:checked { background: #30d158; }
.switch:checked::after { transform: translateX(20px); }

.hint { color: #55555c; font-size: 13px; line-height: 1.5; text-align: center; margin: 16px 8px 4px; }

.bigbtn {
  flex: 1 1 0;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--surface);
  border-radius: 16px;
  font-size: 16px;
  font-weight: 600;
  transition: transform .16s var(--ease), opacity .16s linear;
}
.bigbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.bigbtn:active { transform: scale(.97); }
.bigbtn[disabled] { opacity: .34; pointer-events: none; }
.bigbtn.primary { background: #0a84ff; color: #fff; }

#sheet-score .sheet-head h2 { color: var(--c, var(--text)); }
#score-mode { background: var(--surface); margin-bottom: 12px; }
.score-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface);
  border-radius: 16px;
}
.sign {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 24px;
  font-weight: 600;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.sign[aria-pressed="true"] { color: var(--c, var(--text)); box-shadow: inset 0 0 0 2px var(--c, var(--text)); }
.score-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 54px 0 0;   /* the sign button's width again, so the number sits centred */
  font-size: 44px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--c, var(--text));
  background: none;
  border: 0;
  outline: none;
}
.score-input::placeholder { color: #3a3a40; }
.score-preview { margin: 12px 4px 0; min-height: 1.5em; text-align: center; font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* history */
.standings { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 0; padding: 16px 0 16px; }
.standings .s {
  flex: 0 0 calc(33.333% - 1px);
  min-width: 0;
  text-align: center;
}
.standings .s b { position: relative; display: block; font-size: 13px; font-weight: 600; }
/* The board's crown, small, hung above the leader's name so it never moves the row. */
.standings .lead {
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 15px;
  margin-bottom: 3px;
  transform: translateX(-50%);
  color: var(--gold);
  filter: drop-shadow(0 1px 5px rgba(255, 221, 157, .5));
}
.standings .lead svg { display: block; width: 100%; height: auto; fill: currentColor; transform: scaleX(1.8); }
.standings .lead path { stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.standings .s i { display: block; font-style: normal; font-size: 27px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

.hist-view { margin: 4px 0 6px; }

.rt-wrap { overflow-x: auto; margin: 10px -16px 0; padding: 0 16px; -webkit-overflow-scrolling: touch; }
.rt { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rt th, .rt td { padding: 11px 6px; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; }
.rt td { min-width: 52px; font-size: 16px; font-weight: 700; }
.rt thead th { max-width: 80px; overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 600; }
/* The round column stays put while a wide table scrolls under it. */
.rt th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 1%;
  padding-left: 2px;
  text-align: left;
  background: #0c0c0e;   /* the sheet's own, so scrolled cells pass under it */
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.rt td.none { opacity: .35; font-weight: 600; }
.rt tr.live th:first-child { color: var(--text); }
.rt tfoot td { font-size: 20px; font-weight: 800; letter-spacing: -.02em; border-bottom: 0; padding-top: 22px; }
.rt tfoot td, .rt tfoot th { position: relative; }
.rt tfoot th { padding-top: 22px; border-bottom: 0; }
.rt .lead {
  position: absolute;
  top: 5px;
  left: 50%;
  width: 14px;
  transform: translateX(-50%);
  color: var(--gold);
  filter: drop-shadow(0 1px 5px rgba(255, 221, 157, .5));
}
.rt .lead svg { display: block; width: 100%; height: auto; fill: currentColor; transform: scaleX(1.8); }
.rt .lead path { stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.rt .disc {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  vertical-align: middle;
  border-radius: 50%;
  background: var(--text);
  box-shadow: 0 0 6px rgba(255, 255, 255, .35);
}
.rt-note { margin: 12px 0 0; font-size: 12px; color: #55555c; text-align: center; }

.log { border-top: 1px solid var(--line); }
.log .entry {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 17px;
  animation: fadein .3s var(--ease);
}
@keyframes fadein { from { opacity: 0; transform: translateY(-4px); } }
.log .entry.undone { opacity: .28; }
.log .entry .who { flex: 1 1 auto; font-weight: 600; font-size: 15px; }
.log .entry .delta { font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.log .entry .bead { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: 0 0 auto; }
.log .round {
  padding: 16px 4px 8px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.log .round { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* The round's first player, marked with the same disc as on the board. */
.log .round .by { display: flex; align-items: center; gap: 7px; min-width: 0; letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log .round .by i { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--text); box-shadow: 0 0 6px rgba(255, 255, 255, .35); }
.log .round.undone { opacity: .28; }
.log .empty { padding: 30px 0; text-align: center; color: #55555c; font-size: 14px; }

/* ---------- color picker ---------- */

.picker {
  position: fixed;
  z-index: 30;
  width: min(310px, calc(100vw - 28px));
  padding: 14px;
  border-radius: 22px;
  background: rgba(38, 38, 42, .82);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 11px;
  transform-origin: top center;
  animation: pickin .26s var(--ease);
}
@keyframes pickin { from { opacity: 0; transform: scale(.9) translateY(-6px); } }

.picker .chip {
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c);
  position: relative;
  transition: transform .16s var(--ease);
}
.picker .chip:active { transform: scale(.85); }
.picker .chip.sel { box-shadow: 0 0 0 2.5px #fff; }
.picker .custom { overflow: hidden; background: conic-gradient(#ff3b30, #ffd60a, #30d158, #40c8e0, #0a84ff, #bf5af2, #ff3b30); }
.picker .custom input { position: absolute; inset: -20%; width: 140%; height: 140%; opacity: 0; border: 0; padding: 0; cursor: pointer; }
.picker .custom::after {
  content: "";
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
  pointer-events: none;
}

/* ---------- larger screens ---------- */

/* The top bar is the one piece that isn't driven by --app-w, so it gets its own step. */
@media (min-width: 700px) {
  .iconbtn { width: 46px; height: 46px; }
  .iconbtn svg { width: 24px; height: 24px; }
}

/* With room to spare the sheet stops being a drawer welded to the bottom bezel and
   floats, all four corners rounded. It still slides up from below, so the gesture
   and the grab handle keep meaning what they meant. */
@media (min-width: 700px) and (min-height: 640px) {
  .sheet {
    bottom: calc(20px + var(--kb, 0px));
    border: 1px solid #232327;
    border-radius: var(--sheet-r);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .62);
    transform: translateY(calc(101% + 20px));
  }
  .sheet.open { transform: translateY(var(--drag-y, 0px)); }
}

/* Mice and trackpads only: on a touch screen these stick after a tap. */
@media (hover: hover) and (pointer: fine) {
  .dot { cursor: grab; }
  .dot:active { cursor: grabbing; }
  .dot:hover:not(:active) .dot-fill { transform: scale(1.08); }
  .label:hover .name { opacity: 1; }
  .iconbtn:hover:not(:active) { background: var(--surface-2); }
  .rowbtn:hover:not(:active),
  .bigbtn:hover:not(:active) { background: var(--surface-2); }
  .textbtn:hover { opacity: .72; }
  .del:hover:not(:active) { background: #33333a; }
  .swatch:hover:not(:active) { transform: scale(1.08); }
  .seg button:hover:not(.on):not(:active) { color: var(--text); }
  .picker .chip:hover:not(:active) { transform: scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}