/* ── Components ───────────────────────────────────────────────────────────
   Primitives shared by every screen. Each uses semantic tokens only, so a
   component never knows which theme it is in.

   Open css/styleguide.html to see all of them at once, in both themes.     */

/* ── typographic roles ────────────────────────────────────────────────── */

.eyebrow {
  font-family: var(--font-mono); font-weight: 400;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  font-size: var(--text-xs); color: var(--accent);
}

.caption {
  font-family: var(--font-mono);
  font-size: var(--text-2xs); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--mute);
}

.numeral { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ── icon button ──────────────────────────────────────────────────────────
   The whole rail is made of these. Square, hairline, quiet until hovered.  */

.icon-btn {
  width: var(--control); height: var(--control); flex: none;
  display: grid; place-items: center;
  border-radius: var(--radius);
  border: var(--hairline) solid var(--line);
  color: var(--dim);
  transition: var(--t);
}
.icon-btn:hover:not(:disabled) {
  color: var(--text); border-color: var(--line-2); background: var(--surface);
}
.icon-btn:disabled { opacity: 0.3; }
.icon-btn.active { color: var(--accent); border-color: var(--accent-line); }
.icon-btn.sm { width: var(--control-sm); height: var(--control-sm); }
.icon-btn.sm svg { width: var(--icon-sm); height: var(--icon-sm); }
.icon-btn.ghost { border-color: transparent; }

.icon-btn svg {
  width: var(--icon); height: var(--icon);
  fill: none; stroke: currentColor; stroke-width: var(--stroke);
  stroke-linecap: round; stroke-linejoin: round;
}

/* The leading back / hub button in a top bar reads a touch larger and bolder —
   a proper phone-navbar back arrow, easy to hit and clearly the way out. */
.nav > .icon-btn[data-back],
.nav > .icon-btn[data-hub],
.q-chrome > .icon-btn[data-home],
.topbar > .icon-btn[data-back],
.title-back {
  width: var(--control-lg); height: var(--control-lg);
  color: var(--text);
}
.nav > .icon-btn[data-back] svg,
.nav > .icon-btn[data-hub] svg,
.q-chrome > .icon-btn[data-home] svg,
.topbar > .icon-btn[data-back] svg,
.title-back svg { width: var(--icon-lg); height: var(--icon-lg); stroke-width: 2; }

/* ── pill ─────────────────────────────────────────────────────────────────
   The only text button. `solid` is reserved for the one action a sheet wants
   you to take; there is never more than one on screen.                     */

.pill {
  padding: var(--space-4) var(--space-6);
  border: var(--hairline) solid var(--line-2);
  border-radius: var(--radius);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  transition: var(--t);
}
.pill:hover { border-color: var(--dim); background: var(--surface-2); }
.pill.solid { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pill.solid:hover { background: var(--accent-hi); border-color: var(--accent-hi); }
.pill:disabled { opacity: 0.4; pointer-events: none; }

/* ── surfaces ─────────────────────────────────────────────────────────────
   A panel sits on the field. A sheet sits over it, behind a veil.          */

.panel {
  border: var(--hairline) solid var(--line-2);
  border-radius: var(--radius);
  background: var(--bg);
}

.veil {
  position: fixed; inset: 0; z-index: var(--z-veil);
  display: grid; place-items: center; padding: var(--space-8);
  background: var(--veil);
  animation: fade var(--duration-1) var(--ease) both;
}

.sheet {
  width: min(520px, 100%);
  max-height: 82vh; overflow-y: auto;
  padding: 28px;
  border: var(--hairline) solid var(--line-2);
  border-radius: var(--radius-lg);
  background: var(--surface);
  animation: pop var(--duration-2) var(--ease) both;
}

/* The problem intro is a sheet that, on Start, collapses to wherever the problem
   lives from then on (see game.js showIntro) — hint the compositor for that. */
.game-intro { will-change: transform, opacity; }
.game-intro .btn-row { margin-top: var(--space-7); }
.intro-start { padding: var(--space-5) var(--space-9); }

.sheet .eyebrow { margin-bottom: var(--space-5); }
.sheet h2 {
  font-size: var(--text-2xl); font-weight: 400;
  letter-spacing: -0.01em; margin-bottom: var(--space-5);
}
.sheet p { color: var(--dim); line-height: var(--leading-prose); font-size: var(--text-base); }
.sheet p + p { margin-top: var(--space-5); }
.sheet .close-row { display: flex; justify-content: flex-end; margin-top: var(--space-8); }

/* ── the forced-update gate ─────────────────────────────────────────────────
   Above EVERY other layer (sheets, the tutorial, the pet, the tab bar) and
   opaque, not a veil: there is nothing behind it to look at, because there is
   nothing behind it the player may use. See src/ui/appupdate.js. */
.upd-gate {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  padding: max(20px, var(--sat)) var(--space-7) max(20px, var(--sab));
  background: var(--bg);
  animation: fade var(--duration-2) var(--ease) both;
  user-select: none; -webkit-user-select: none;
  touch-action: none;
}
.upd-card { width: min(420px, 100%); text-align: center; }
.upd-card .aw-fig { margin: 0 auto var(--space-6); }
.upd-card h2 { font-size: var(--text-2xl); font-weight: 500; margin-bottom: var(--space-4); }
.upd-card p { color: var(--dim); line-height: var(--leading-prose); }
.upd-card .btn-row { margin-top: var(--space-8); }
.upd-card .pill { min-width: 132px; justify-content: center; }
/* nothing else on the page may take a tap while the gate is up — belt to the
   gate's own braces, since a stray fixed element could otherwise sit above it */
body.upd-blocked > *:not(#overlay-root) { pointer-events: none !important; }

.upd-bar {
  margin-top: var(--space-8); height: 6px; border-radius: var(--radius-full);
  background: var(--surface-2); overflow: hidden;
}
.upd-bar i {
  display: block; height: 100%; border-radius: inherit;
  background: var(--accent); transition: width var(--duration-2) var(--ease);
}
.upd-bar.indet i { animation: upd-indet 1.2s var(--ease) infinite; width: 40% !important; }
@keyframes upd-indet {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
  .upd-bar.indet i { animation: none; width: 100% !important; opacity: 0.5; }
}
/* a sheet may put its close FIRST (top-right, where a dismiss is expected)
   instead of orphaned below the content — settings does */
.sheet .close-row.top { margin: -8px -8px 0 0; float: right; }

.btn-row { display: flex; gap: var(--space-4); justify-content: center; margin-top: var(--space-8); }

/* the leave-the-app confirmation */
.exit-confirm { text-align: center; }
.exit-confirm h2 { font-size: var(--text-xl); }
.exit-confirm p { margin-top: var(--space-4); color: var(--mute); font-size: var(--text-base); line-height: var(--leading-body); }

/* ── stars ────────────────────────────────────────────────────────────────
   Three per level: solved, at-or-under card par, at-or-under wire par.     */

.stars { display: flex; gap: var(--space-1); }
.stars svg { width: 10px; height: 10px; }
.stars .on  { fill: var(--accent); stroke: none; }
.stars .off { fill: var(--line-2); stroke: none; }

/* ── truth table ──────────────────────────────────────────────────────────
   A row of the table is a row of hardware: switches in, lamps out.         */

.ttable {
  margin-top: var(--space-7); width: 100%; border-collapse: collapse;
  font-family: var(--font-mono); font-size: var(--text-md);
}
.ttable th {
  padding: var(--space-3) var(--space-4);
  text-align: center; color: var(--mute); font-weight: 400;
  border-bottom: var(--hairline) solid var(--line-2);
}
.ttable th.sep, .ttable td.sep { border-left: var(--hairline) solid var(--line-2); }
.ttable td {
  padding: var(--space-3) var(--space-4);
  text-align: center; color: var(--mute);
  border-bottom: var(--hairline) solid var(--line);
}
.ttable td.hi { color: var(--accent); }
.ttable td svg { display: inline-block; vertical-align: middle; }

/* ── hardware cells ───────────────────────────────────────────────────────
   The board's own vocabulary, shrunk to fit a table cell. In maths notation
   the same cell becomes the digit it always stood for.                     */

.cell-switch { height: 19px; }
.cell-switch rect { fill: none; stroke: var(--line-2); stroke-width: 1.2; }
.cell-switch circle { fill: var(--mute); }
.cell-switch.on rect { stroke: var(--accent-line); }
.cell-switch.on circle { fill: var(--accent); }

.cell-led { height: 19px; }
.cell-led .lens { fill: none; stroke: var(--line-2); stroke-width: 1.2; }
.cell-led .flange, .cell-led .legs {
  fill: none; stroke: var(--line-2); stroke-width: 1.2; stroke-linecap: round;
}
.cell-led .ray { fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-linecap: round; }
.cell-led.on .lens { fill: var(--accent); stroke: var(--accent); }
.cell-led.on .flange, .cell-led.on .legs { stroke: var(--mute); }

.cell-digit {
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px;
  border: var(--hairline) solid var(--line-2); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1;
  color: var(--mute);
}
.cell-digit.on {
  border-color: var(--accent-line); background: var(--accent-dim); color: var(--accent);
}

/* ── notice ───────────────────────────────────────────────────────────────
   An accented block, used when the game gives you something.               */

.unlock-note {
  margin-top: var(--space-7); padding: var(--space-5) var(--space-6);
  border: var(--hairline) solid var(--accent-line); border-radius: var(--radius);
  font-size: var(--text-base); color: var(--accent); text-align: left;
  line-height: var(--leading-body);
}
.unlock-note strong { font-family: var(--font-mono); font-weight: 500; }
.unlock-note + .unlock-note { margin-top: var(--space-5); }

/* ── toast ────────────────────────────────────────────────────────────── */

.toast {
  position: fixed; left: 50%; bottom: 128px; z-index: var(--z-toast);
  transform: translateX(-50%);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius);
  border: var(--hairline) solid var(--line-2);
  background: var(--surface);
  font-size: var(--text-base);
  max-width: min(520px, 90vw); text-align: center;
  animation: toast-in var(--duration-1) var(--ease) both;
}
.toast.err { border-color: var(--danger-line); color: var(--danger-text); }
.toast.ok  { border-color: var(--success-line); color: var(--success-text); }
.toast.leaving { animation: toast-out var(--duration-1) var(--ease) both; }

@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 6px); } }
@keyframes toast-out { to { opacity: 0; } }

/* ── theme switch ─────────────────────────────────────────────────────────
   Both glyphs ride along; the stylesheet shows whichever the theme is not.  */

.theme-btn .ic-sun, .theme-btn .ic-moon { display: none; }
:root[data-theme="dark"]  .theme-btn .ic-sun  { display: inline-flex; }
:root[data-theme="light"] .theme-btn .ic-moon { display: inline-flex; }


/* ── install ──────────────────────────────────────────────────────────────
   The offer to keep the game. It is a store listing that happens to be inside
   the thing it is selling: an icon, four facts, real screenshots of the real
   board, and one button.                                                    */

/* The title screen's own button: the one place the offer can always be found. */
.install-btn { color: var(--accent); border-color: var(--accent-line); }
.install-btn:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-dim); }

.install-head {
  display: flex; align-items: center; gap: var(--space-6);
  margin-bottom: var(--space-6);
}
.install-tile {
  flex: none; width: 56px; height: 56px;
  display: grid; place-items: center;
  border: var(--hairline) solid var(--line-2);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}
.install-tile svg {
  width: 34px; height: 34px; overflow: visible;
  fill: none; stroke: var(--accent); stroke-width: 5;
  stroke-linecap: round; stroke-linejoin: round;
}
.install-head h2 { margin: 0; font-size: var(--text-2xl); font-weight: 400; }
.install-sub { font-size: var(--text-base); color: var(--dim); }

.install-facts { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-7); }
.chip {
  padding: var(--space-2) var(--space-4);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--dim);
}

/* A gallery that scrolls sideways, and snaps, the way every store's does. */
.install-shots {
  display: flex; gap: var(--space-5);
  margin: 0 calc(-1 * var(--space-7)) var(--space-7);
  padding: 0 var(--space-7) var(--space-2);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.install-shots figure { flex: none; scroll-snap-align: center; width: 148px; }
.install-shots img {
  display: block; width: 100%; height: auto;
  border: var(--hairline) solid var(--line-2);
  border-radius: var(--radius);
  background: var(--bg);
}
.install-shots figcaption {
  margin-top: var(--space-3);
  font-size: var(--text-2xs); line-height: var(--leading-tight); color: var(--mute);
}

.install-features { list-style: none; display: grid; gap: var(--space-5); }
.install-features li { display: flex; gap: var(--space-5); align-items: flex-start; }
.install-features .ic {
  flex: none; width: var(--space-8); height: var(--space-8);
  display: grid; place-items: center;
  border: var(--hairline) solid var(--line-2); border-radius: var(--radius-sm);
  color: var(--accent);
}
.install-features .ic svg {
  width: var(--icon-sm); height: var(--icon-sm);
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.install-features strong { display: block; font-size: var(--text-lg); font-weight: 500; }
.install-features span span,
.install-features div > span { font-size: var(--text-base); color: var(--dim); line-height: var(--leading-body); }

/* Safari has no prompt to defer, so it gets instructions instead. */
.ios-steps {
  list-style: none; counter-reset: none;
  margin-top: var(--space-7); padding: var(--space-5) var(--space-6);
  border: var(--hairline) solid var(--line); border-radius: var(--radius);
  background: var(--surface-2);
  display: grid; gap: var(--space-5);
}
.ios-steps li { display: flex; align-items: center; gap: var(--space-5); }
.ios-steps .n {
  flex: none; width: var(--space-8); height: var(--space-8);
  display: grid; place-items: center; color: var(--accent);
}
.ios-steps .n svg {
  width: var(--icon); height: var(--icon);
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.ios-steps p { font-size: var(--text-base); color: var(--dim); }
.ios-steps strong { color: var(--text); font-weight: 500; }

.install-actions { display: flex; gap: var(--space-4); justify-content: flex-end; margin-top: var(--space-8); }
.install-actions .pill { display: flex; align-items: center; gap: var(--space-3); }
.install-actions .pill svg {
  width: var(--icon-sm); height: var(--icon-sm);
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

.install-never {
  display: block; margin: var(--space-6) auto 0;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--mute); transition: color var(--t);
}
.install-never:hover { color: var(--danger-text); }

/* ── update bar ───────────────────────────────────────────────────────────
   A new worker is waiting. A half-built circuit is not worth interrupting, so
   this asks from the corner and can be waved away.                          */

.updatebar {
  position: fixed; z-index: var(--z-toast);
  left: var(--space-5); bottom: var(--space-5);
  display: flex; align-items: center; gap: var(--space-5);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-6);
  border: var(--hairline) solid var(--line-2); border-radius: var(--radius);
  background: var(--surface);
  font-size: var(--text-base); color: var(--text);
  animation: pop var(--duration-2) var(--ease) both;
}
.updatebar .icon-btn { width: var(--control-sm); height: var(--control-sm); border-color: transparent; }
.updatebar .icon-btn svg { width: var(--icon-sm); height: var(--icon-sm); }

@media (max-width: 760px) {
  .updatebar { left: var(--space-4); right: var(--space-4); bottom: var(--space-4); }
  .install-shots figure { width: 128px; }
  .install-actions .pill { flex: 1; justify-content: center; }
}

/* ── form field (chip name / label) ─────────────────────────────────────── */

.field { display: block; margin-top: var(--space-5); }
.field span {
  display: block; margin-bottom: var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--mute);
}
.field input {
  width: 100%; padding: var(--space-4) var(--space-5);
  border: var(--hairline) solid var(--line-2); border-radius: var(--radius);
  background: var(--surface-2); color: var(--text);
  font-family: var(--font-mono); font-size: var(--text-base);
}
.field input:focus { outline: none; border-color: var(--accent-line); }
.field input::placeholder { color: var(--mute); }

/* ── chip manager list ──────────────────────────────────────────────────── */

.chip-list { list-style: none; display: grid; gap: var(--space-4); margin: var(--space-6) 0; }
.chip-empty { color: var(--mute); font-size: var(--text-base); padding: var(--space-5) 0; }
.chip-row {
  display: flex; align-items: center; gap: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: var(--hairline) solid var(--line); border-radius: var(--radius);
}
.chip-tag {
  flex: none; min-width: 44px; text-align: center;
  padding: var(--space-3) var(--space-3);
  border: var(--hairline) solid var(--line-2); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text);
}
.chip-tag.warned { border-color: var(--danger-line); color: var(--danger-text); }
.chip-meta { flex: 1; min-width: 0; }
.chip-meta strong { display: block; font-weight: 500; font-size: var(--text-base); }
.chip-meta span { font-size: var(--text-md); color: var(--mute); }
.chip-ord { display: flex; gap: var(--space-2); }
.chip-ord .icon-btn { width: var(--control-sm); height: var(--control-sm); }
.chip-ord .icon-btn svg { width: var(--icon-sm); height: var(--icon-sm); }
.chip-ord [data-up] svg { transform: rotate(180deg); }
.chip-row [data-edit] { width: var(--control-sm); height: var(--control-sm); }
.chip-row [data-edit] svg { width: var(--icon-sm); height: var(--icon-sm); }

/* ── board-size picker ──────────────────────────────────────────────────── */

.size-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin: var(--space-6) 0; }
.size-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-5) var(--space-6);
  border: var(--hairline) solid var(--line); border-radius: var(--radius);
  text-align: left; transition: var(--t);
}
.size-opt:hover { border-color: var(--line-2); background: var(--surface-2); }
.size-opt.active { border-color: var(--accent-line); background: var(--accent-dim); }
.size-name { font-size: var(--text-lg); font-weight: 500; }
.size-opt.active .size-name { color: var(--accent); }
.size-dim { font-family: var(--font-mono); font-size: var(--text-md); color: var(--mute); }

/* ── pill danger (delete a chip) ────────────────────────────────────────── */

.pill.danger { border-color: var(--danger-line); color: var(--danger-text); }
.pill.danger:hover { background: var(--danger-line); color: var(--on-accent); }

/* ── settings & terms ─────────────────────────────────────────────────────── */

.linkish {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--accent); font: inherit; text-decoration: underline;
  text-underline-offset: 2px;
}
.linkish:hover { color: var(--accent-hi); }
.linkish.danger { color: var(--danger-text); }
.linkish.danger:hover { color: var(--danger-text); opacity: .82; }

.set-group { margin-top: var(--space-7); }

/* Language dropdown: a native <select> dressed to match the app's controls,
   with a chevron overlaid on the right (the SVG sits after the select). */
.set-select { position: relative; margin-top: var(--space-3); }
.set-select select {
  width: 100%; appearance: none; -webkit-appearance: none;
  padding: var(--space-3) var(--space-9) var(--space-3) var(--space-4);
  font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); cursor: pointer;
}
.set-select select:focus-visible { outline: var(--focus); }
.set-select svg {
  position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; pointer-events: none; color: var(--mute);
}
[dir="rtl"] .set-select select { padding: var(--space-3) var(--space-4) var(--space-3) var(--space-9); }
[dir="rtl"] .set-select svg { right: auto; left: var(--space-4); }
.set-label {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--mute);
  margin-bottom: var(--space-4);
}
.set-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
/* consecutive rows in one group breathe — without this, SOUND/HAPTICS/TIMER
   touch and each eyebrow reads as belonging to the row above it */
.set-group .set-row + .set-row { margin-top: var(--space-6); }
.set-copy p { margin: var(--space-1) 0 0; font-size: var(--text-md); color: var(--mute); }

/* segmented control (theme) */
.segmented { display: flex; gap: var(--space-2); padding: var(--space-1);
  border: var(--hairline) solid var(--line); border-radius: var(--radius); }
.seg {
  flex: 1; padding: var(--space-3) var(--space-4); background: none; border: none; cursor: pointer;
  border-radius: var(--radius-sm); font-size: var(--text-md); color: var(--dim); transition: var(--t);
}
.seg:hover { color: var(--text); }
.seg.on { background: var(--accent-dim); color: var(--accent); }

/* toggle switch */
.switch {
  position: relative; width: 42px; height: 24px; flex: none; cursor: pointer;
  border: var(--hairline) solid var(--line-2); border-radius: 999px;
  background: var(--surface-2); transition: var(--t);
}
.switch .knob {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--mute); transition: var(--t);
}
.switch.on { background: var(--accent-dim); border-color: var(--accent-line); }
.switch.on .knob { left: 21px; background: var(--accent); }

.set-account .set-row { align-items: center; }
.set-who { display: inline-flex; align-items: center; gap: var(--space-4); min-width: 0; }
.set-who .ava { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none;
  display: inline-flex; align-items: center; justify-content: center; }
.set-who .ava--txt { background: var(--accent-dim); color: var(--accent);
  font-family: var(--font-mono); font-weight: 500; }
.set-who-txt { min-width: 0; }
.set-who-txt strong { display: block; font-weight: 500; font-size: var(--text-base); }
.set-who-txt span { display: block; font-size: var(--text-md); color: var(--mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22ch; }
.set-account .pill { display: inline-flex; align-items: center; gap: var(--space-3); flex: none; }
.set-group .pill svg { width: var(--icon-sm); height: var(--icon-sm); flex: none; }

.set-foot { margin-top: var(--space-8); text-align: center; font-size: var(--text-md); }

.terms-body { max-height: 56vh; overflow-y: auto; margin-top: var(--space-4); padding-right: var(--space-3); }
.terms-body h3 { margin: var(--space-6) 0 var(--space-3); font-size: var(--text-base); font-weight: 500; color: var(--text); }
.terms-body p { font-size: var(--text-base); }

/* account chip is now a button that opens settings */
.acct-chip { background: none; cursor: pointer; transition: var(--t); }
.acct-chip:hover { border-color: var(--line-2); }
.acct-gear { display: grid; place-items: center; color: var(--mute); }
.acct-gear svg { width: var(--icon-sm); height: var(--icon-sm);
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.auth-legal { margin-top: var(--space-6); font-size: var(--text-md); color: var(--mute); }

/* ── Competitive timer ───────────────────────────────────────────────────────
   The live clock + pause button injected into a game's `.q-chrome`, and the
   opaque pause/start overlay (a child of the play node, so it covers the board
   and is torn down with the screen). */
.cmp-host { position: relative; }

.q-clock {
  font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums; color: var(--text);
  padding: 3px 9px; border: 1px solid var(--line); border-radius: var(--radius-full, 999px);
  min-width: 3.2em; text-align: center;
}
.q-pause svg { fill: none; }

.cmp-pause {
  position: absolute; inset: 0; z-index: 40;
  display: grid; place-items: center; padding: var(--space-6);
  background: var(--bg);
  animation: fade var(--duration-1) var(--ease) both;
}
.cmp-card {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-5);
  width: 100%; max-width: 320px; text-align: center;
}
.cmp-eyebrow {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--mute);
}
.cmp-clock-big {
  display: flex; align-items: center; gap: 10px; line-height: 1;
  font-family: var(--font-mono); font-size: clamp(40px, 14vw, 58px);
  font-variant-numeric: tabular-nums; color: var(--text);
}
.cmp-clock-big svg {
  width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; opacity: 0.55;
}
.cmp-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.cmp-stat {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 66px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.cmp-stat b { font-family: var(--font-mono); font-size: var(--text-lg); color: var(--text); font-weight: 700; }
.cmp-stat span { font-size: var(--text-xs); color: var(--mute); }
.cmp-resume {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px 20px; margin-top: var(--space-1);
  background: var(--accent); color: var(--on-accent); border: none;
  border-radius: var(--radius); cursor: pointer; font-size: var(--text-md); font-weight: 700;
  -webkit-tap-highlight-color: transparent;
}
.cmp-resume:hover { background: var(--accent-hi); }
.cmp-resume:active { transform: scale(0.98); }
.cmp-resume svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.cmp-leave {
  background: none; border: none; cursor: pointer; padding: 4px 12px;
  color: var(--mute); font-size: var(--text-sm);
}
.cmp-leave:hover { color: var(--text); }