/* Adam 15 [Pong], paper and ink, and nothing else.
   The court is the product, so the page gets out of its way. */

:root {
  /* These override main.css so the shared nav shell renders in the paper
     palette instead of the dark site one. */
  --bg: #f4f4f2;
  --panel: #ffffff;
  --faint: #a3a39b;
  --line-strong: rgba(17, 17, 19, 0.25);
  --accent: #111113;
  --paper: #f4f4f2;
  --ink: #111113;
  --dim: #77776f;
  --line: rgba(17, 17, 19, 0.16);
  --line-soft: rgba(17, 17, 19, 0.08);
  --sans: "Geist", system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
a { color: inherit; text-decoration: none; }

.mono-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}

.shell { max-width: 1120px; margin: 0 auto; padding: 0 20px 56px; }
/* main.css reserves 78px for the fixed nav; the app bar sits under it */
.bar { padding: 10px 0 20px; }

/* ── the shared Clovermind nav ────────────────────────────────────────
   The page is paper but the nav keeps the site's dark chrome. Setting the
   palette on the nav's own subtree is enough, because custom properties
   inherit. This is also what makes the clover mark visible again: dots.js
   draws it in #ededf0, which vanishes against cream. */
.nav-shell, .nav-panel, .nav-veil {
  --bg: #0a0a0b;
  --ink: #ededf0;
  --dim: #85858e;
  --faint: #4a4a52;
  --line: rgba(237, 237, 240, 0.12);
  --line-strong: rgba(237, 237, 240, 0.25);
}
.nav-shell { background: #0a0a0b; color: #ededf0; }
.nav-shell .site-nav .nv-links a { color: #85858e; }
.nav-shell .site-nav .nv-links a:hover { color: #ededf0; }
.nav-shell .site-nav .nv-links a[style*="--ink"] { color: #ededf0; }

/* ── bar ─────────────────────────────────────────────────────────────── */
.bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px 0 20px;
}
.bar .mark { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.bar .mark .sub { color: var(--dim); font-weight: 400; }
.back { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--dim); }
.back:hover { color: var(--ink); }

/* ── the switch ──────────────────────────────────────────────────────── */
.switch-row {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin: 4px 0 18px; flex-wrap: wrap;
}
.sw-lbl {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--dim);
  transition: color 160ms ease; user-select: none;
}
.sw-lbl.on { color: var(--ink); }
.switch {
  position: relative; width: 62px; height: 30px; flex: none;
  border: 1.5px solid var(--ink); border-radius: 999px;
  background: transparent; cursor: pointer; padding: 0;
  transition: background 180ms ease;
}
.switch .knob {
  position: absolute; top: 3px; left: 3px;
  width: 21px; height: 21px; border-radius: 50%; background: var(--ink);
  transition: transform 220ms cubic-bezier(0.33, 1, 0.68, 1);
  will-change: transform;
}
.switch[data-mode="alone"] .knob { transform: translateX(32px); }
.switch:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ── the court ───────────────────────────────────────────────────────── */
.court-outer { display: flex; justify-content: center; }
.court-wrap {
  position: relative;
  border: 1px solid var(--line);
  background: var(--paper);
  touch-action: none;
  overflow: hidden;
  line-height: 0;
}
#court { display: block; }

.start-btn {
  position: absolute; inset: 0; margin: auto;
  width: 84px; height: 84px; border-radius: 50%;
  border: 1.5px solid var(--ink); background: var(--paper);
  cursor: pointer; display: grid; place-items: center;
  transition: transform 160ms ease, background 160ms ease;
}
.start-btn:hover { transform: scale(1.06); }
.start-btn:active { transform: scale(0.97); }
.start-btn::before {
  content: ''; width: 0; height: 0; margin-left: 6px;
  border-left: 24px solid var(--ink);
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}
.start-btn[hidden] { display: none; }

/* ── the readout under the court ─────────────────────────────────────── */
.score {
  display: flex; align-items: baseline; justify-content: center; gap: 26px;
  font-family: var(--mono); font-size: 34px; font-weight: 500;
  letter-spacing: 0.04em; padding: 16px 0 4px;
}
.score .who { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dim); display: block; text-align: center; margin-top: 4px; }
.score .col { min-width: 84px; text-align: center; }
.score .vs { color: var(--dim); font-size: 15px; }

.stats {
  display: flex; justify-content: center; gap: 30px; flex-wrap: wrap;
  padding: 10px 0 0; border-top: 1px solid var(--line-soft); margin-top: 14px;
}
.stat { text-align: center; }
.stat b { display: block; font-family: var(--mono); font-size: 17px; font-weight: 500; }
.stat span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--dim); }

.prov { text-align: center; margin-top: 14px; font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.06em; color: var(--dim); }
.prov.warn { color: #a1332b; }

.hint { text-align: center; margin-top: 8px; font-size: 12.5px; color: var(--dim); }
body.watching .hint .h-play { display: none; }
body:not(.watching) .hint .h-watch { display: none; }


/* ── the note ────────────────────────────────────────────────────────── */
.note { max-width: 620px; margin: 40px auto 0; }
.note h2 { font-size: 15px; font-weight: 600; margin-bottom: 10px; }
.note p { font-size: 14px; line-height: 1.65; color: #3d3d42; margin-bottom: 12px; }
.note .rows { margin-top: 20px; border-top: 1px solid var(--line); }
.note .row { display: flex; gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.note .row .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--dim); flex: 0 0 148px; padding-top: 2px; }
.note .row .v { font-size: 13.5px; line-height: 1.6; }

@media (max-width: 620px) {
  .score { font-size: 27px; gap: 16px; }
  .note .row { flex-direction: column; gap: 3px; }
  .note .row .k { flex: none; }
  .start-btn { width: 66px; height: 66px; }
  .start-btn::before { border-left-width: 19px; border-top-width: 12px; border-bottom-width: 12px; }
}