/* Kid kit: the shared look for root pages (home button, big tap targets).
 *
 * Load it with a content-hash cache-buster, never a bare URL:
 *   <link rel="stylesheet" href="/kid-kit.css?v=<sha256[:12]>">
 * Never type the ?v= by hand: `python3 tools/hash_assets.py` stamps it, and must
 * be rerun (then the offline manifest) after any edit to this file.
 * Pages are html (max-age=0) but css is cached for 4 hours, so a new URL per
 * version is what keeps a fresh page from pairing with a stale kit (AGENTS §5).
 * tools/test_kid_kit.cjs fails when a page's ?v= no longer matches this file.
 *
 * Every rule is class-scoped (.kk-*): including the kit changes nothing on a
 * page until an element opts in.
 */

/* 🏠 Home: fixed top-left, translucent white pill. Same look as the hand-copied
   `a.home` in checkers/chess; the inset max() only moves it on a notched
   screen in a page that opts into viewport-fit=cover. */
.kk-home {
  position: fixed;
  top: max(14px, env(safe-area-inset-top, 0px));
  left: max(14px, env(safe-area-inset-left, 0px));
  z-index: 20;
  background: #ffffffcc;
  border-radius: 14px;
  padding: 10px 18px;
  font-size: 20px;
  font-weight: 700;
  color: #333;
  text-decoration: none;
}

/* Big tap target for small fingers: at least 64x64 CSS px, no double-tap zoom. */
.kk-tap {
  min-width: 64px;
  min-height: 64px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Keep content clear of notches/home indicator (needs viewport-fit=cover). */
.kk-safe {
  padding-top: max(var(--kk-pad, 0px), env(safe-area-inset-top, 0px));
  padding-right: max(var(--kk-pad, 0px), env(safe-area-inset-right, 0px));
  padding-bottom: max(var(--kk-pad, 0px), env(safe-area-inset-bottom, 0px));
  padding-left: max(var(--kk-pad, 0px), env(safe-area-inset-left, 0px));
}

/* Pass-and-play cover (KidKit.passTo): hides the screen while the tablet
   changes hands. --kk-pass is the next player's color. */
.kk-pass {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  background: var(--kk-pass, #4a4e69);
  color: #fff;
  text-align: center;
  font-family: system-ui, sans-serif;
}
.kk-pass-icon { font-size: 72px; }
.kk-pass-title { font-size: 44px; font-weight: 800; }
.kk-pass-note { font-size: 24px; font-weight: 700; max-width: 520px; opacity: .95; }
.kk-pass-go {
  margin-top: 12px;
  padding: 18px 36px;
  border: 0;
  border-radius: 22px;
  background: #fff;
  color: var(--kk-pass, #4a4e69);
  font-size: 30px;
  font-weight: 800;
  cursor: pointer;
}