/* Traditional Indian Games: design system and app styles.
   Two token layers:
   1. Theme tokens (--c-*, type, space, radius, shadow, motion): light and dark, used by the shell, the landing page and the
      leaderboard (CONTRACT-LB section 4).
   2. Stage tokens (--bg, --panel, --p0 ... the original names): the lacquered game table. The table stays dark in both
      themes, so every board, 3D stage and tutorial picture keeps its contrast.
   Colour values live only in the token blocks below. No px font sizes: rem and clamp only. */

@font-face {
  font-family: "Baloo 2";
  src: url("/fonts/baloo2-latin-wght.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- type ---------- */
  --font-display: "Baloo 2", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --font-body: "Baloo 2", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 0.8125rem;
  --fs-s: 0.9375rem;
  --fs-m: 1.0625rem;
  --fs-l: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: clamp(2.1rem, 1.5rem + 3vw, 3.4rem);
  /* ---------- space, radius, size ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.25rem;
  --radius-s: 0.625rem;
  --radius-m: 1rem;
  --radius-l: 1.5rem;
  --radius-pill: 999px;
  --tap: 3rem;
  /* ---------- motion ---------- */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-bounce: cubic-bezier(0.3, 1.5, 0.5, 1);
  --dur: 180ms;
  --dur-slow: 420ms;

  /* ---------- theme: dark (indigo night) is the default ---------- */
  --c-bg: #110e24;
  --c-bg-2: #1a1533;
  --c-surface: #1e1940;
  --c-surface-2: #2c2257;
  --c-text: #f3ecdc;
  --c-text-muted: #c6bfdc;
  --c-primary: #f6a723;
  --c-primary-2: #ff7a3d;
  --c-on-primary: #2b1602;
  --c-accent: #3cc4b4;
  --c-on-accent: #110e24;
  --c-success: #5fd08f;
  --c-danger: #ff7d66;
  --c-gold: #f5c642;
  --c-silver: #cdd2e0;
  --c-bronze: #d39360;
  --c-border: rgba(255, 255, 255, 0.12);
  --c-link: #ffc65c;
  --c-focus: #ffd66b;
  --c-glow-1: #4b3fb0;
  --c-glow-2: #d9653f;
  --shadow-1: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.3), 0 0.5rem 1.25rem rgba(0, 0, 0, 0.28);
  --shadow-2: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3), 0 1.25rem 2.75rem rgba(0, 0, 0, 0.45);
  --glass: rgba(255, 255, 255, 0.06);

  /* ---------- game art tiles (same in both themes) ---------- */
  --art-1a: #f6a723; --art-1b: #c27b12;
  --art-2a: #d9653f; --art-2b: #9b3b22;
  --art-3a: #116b72; --art-3b: #064a52;
  --art-4a: #e2873a; --art-4b: #b4522f;
  --art-5a: #5a3fc0; --art-5b: #2c2257;
  --art-6a: #8a3d7a; --art-6b: #5c2556;
  --art-7a: #2a6fd6; --art-7b: #1d4fb0;

  /* ---------- stage tokens: the dark lacquered game table (unchanged names; views and 3D use these) ---------- */
  --bg: #16132b;
  --bg-2: #1f1b3c;
  --panel: #2c2357;
  --panel-2: #302a63;
  --text: #f3ecdc;
  --muted: #c3bcd9;
  --line-soft: rgba(243, 236, 220, 0.2);
  --accent: #efb12f;
  --accent-ink: #261a07;
  --focus: #ffd980;
  --ok: #43bda0;
  --wood: #4b2b45;
  --wood-2: #351f38;
  --line: #e7c070;
  --line-dim: #8b7498;
  --ink: #1d1409;
  --p0: #f8c33a;
  --p0-hi: #ffe49c;
  --p0-ink: #261a07;
  --p1: #9ca6ef;
  --p1-ink: #15183c;
  --p2: #e4724f;
  --p2-ink: #2b1008;
  --p3: #43bda0;
  --p3-ink: #062219;
  --font: var(--font-body);
  --radius: 1rem;
  color-scheme: dark;
}

/* ---------- theme: light (marigold morning). System light unless the player picked dark; or picked light. ---------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --c-bg: #f5f3fc;
    --c-bg-2: #eeeaf9;
    --c-surface: rgba(255, 255, 255, 0.94);
    --c-surface-2: #eeeaf9;
    --c-text: #1b1736;
    --c-text-muted: #514b70;
    --c-primary: #f6a723;
    --c-primary-2: #ff7a3d;
    --c-on-primary: #2b1602;
    --c-accent: #0f8577;
    --c-on-accent: rgba(255, 255, 255, 1);
    --c-success: #1e8a52;
    --c-danger: #c4442b;
    --c-gold: #d9a21b;
    --c-silver: #8d94a8;
    --c-bronze: #b26b35;
    --c-border: rgba(0, 0, 0, 0.1);
    --c-link: #a14b06;
    --c-focus: #4436a0;
    --c-glow-1: #f6a723;
    --c-glow-2: #3cc4b4;
    --shadow-1: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.06), 0 0.5rem 1.25rem rgba(0, 0, 0, 0.08);
    --shadow-2: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.06), 0 1.25rem 2.75rem rgba(0, 0, 0, 0.14);
    --glass: rgba(255, 255, 255, 0.7);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --c-bg: #f5f3fc;
  --c-bg-2: #eeeaf9;
  --c-surface: rgba(255, 255, 255, 0.94);
  --c-surface-2: #eeeaf9;
  --c-text: #1b1736;
  --c-text-muted: #514b70;
  --c-primary: #f6a723;
  --c-primary-2: #ff7a3d;
  --c-on-primary: #2b1602;
  --c-accent: #0f8577;
  --c-on-accent: rgba(255, 255, 255, 1);
  --c-success: #1e8a52;
  --c-danger: #c4442b;
  --c-gold: #d9a21b;
  --c-silver: #8d94a8;
  --c-bronze: #b26b35;
  --c-border: rgba(0, 0, 0, 0.1);
  --c-link: #a14b06;
  --c-focus: #4436a0;
  --c-glow-1: #f6a723;
  --c-glow-2: #3cc4b4;
  --shadow-1: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.06), 0 0.5rem 1.25rem rgba(0, 0, 0, 0.08);
  --shadow-2: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.06), 0 1.25rem 2.75rem rgba(0, 0, 0, 0.14);
  --glass: rgba(255, 255, 255, 0.7);
  color-scheme: light;
}
@media (prefers-reduced-motion: reduce) { :root { --dur: 0ms; --dur-slow: 0ms; } }

/* ---------- base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100svh; font-family: var(--font-body); color: var(--c-text); font-size: 1rem; line-height: 1.5;
  background:
    radial-gradient(48rem 26rem at 8% -6rem, color-mix(in srgb, var(--c-glow-1) 30%, transparent), transparent 70%),
    radial-gradient(42rem 24rem at 100% 2rem, color-mix(in srgb, var(--c-glow-2) 18%, transparent), transparent 70%),
    var(--c-bg);
  background-repeat: no-repeat; -webkit-tap-highlight-color: transparent; overflow-wrap: anywhere;
}
a { color: var(--c-link); }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.12; margin: 0; letter-spacing: -0.005em; }
:focus-visible { outline: 0.2rem solid var(--c-focus); outline-offset: 0.15rem; }
main:focus, h1:focus { outline: none; }
.skip { position: absolute; left: 0.5rem; top: -4rem; z-index: 10; padding: 0.7rem 1rem; background: var(--c-primary); color: var(--c-on-primary); border-radius: var(--radius-s); font-weight: 700; }
.skip:focus { top: 0.5rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ico { display: inline-grid; place-items: center; flex: none; }
.ico svg { display: block; }
.noscript { padding: 1rem; }

.shell {
  max-width: 46rem; margin: 0 auto; min-height: 100svh;
  padding: max(0.6rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}
body[data-route="home"] .shell { max-width: 76rem; }
#main { display: block; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: var(--tap); min-width: var(--tap); padding: 0.5rem 1.15rem;
  font: inherit; font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; line-height: 1.1; color: var(--c-on-primary);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-primary) 82%, rgba(255, 255, 255, 1)), var(--c-primary) 55%, color-mix(in srgb, var(--c-primary) 80%, var(--c-primary-2)));
  border: 0.125rem solid transparent; border-radius: var(--radius-pill); text-decoration: none; cursor: pointer; touch-action: manipulation;
  -webkit-user-select: none; user-select: none; box-shadow: 0 0.25rem 0 color-mix(in srgb, var(--c-primary-2) 55%, rgba(0, 0, 0, 1)), 0 0.5rem 1rem rgba(0, 0, 0, 0.18);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(0.15rem); box-shadow: 0 0.08rem 0 color-mix(in srgb, var(--c-primary-2) 55%, rgba(0, 0, 0, 1)), 0 0.2rem 0.5rem rgba(0, 0, 0, 0.18); }
.btn.ghost, .btn.sec {
  background: var(--glass); color: var(--c-text); border-color: var(--c-border); box-shadow: none;
  -webkit-backdrop-filter: blur(0.5rem); backdrop-filter: blur(0.5rem);
}
.btn.ghost:hover, .btn.sec:hover { background: color-mix(in srgb, var(--c-text) 8%, transparent); filter: none; }
.btn.ghost:active, .btn.sec:active { transform: translateY(0.08rem); box-shadow: none; background: color-mix(in srgb, var(--c-text) 12%, transparent); }
.btn.teal { background: var(--c-accent); color: var(--c-on-accent); box-shadow: 0 0.25rem 0 color-mix(in srgb, var(--c-accent) 55%, rgba(0, 0, 0, 1)), 0 0.5rem 1rem rgba(0, 0, 0, 0.18); }
.btn.big { min-height: 3.5rem; padding-inline: 1.5rem; font-size: 1.25rem; }
.btn[disabled], .btn[aria-disabled="true"] { cursor: default; background: color-mix(in srgb, var(--c-text) 12%, transparent); color: var(--c-text-muted); box-shadow: none; filter: none; transform: none; }
.board-host .btn[disabled], .board-host .btn[aria-disabled="true"] { background: var(--panel); color: var(--muted); border-color: var(--line-soft); }
.icon-btn { padding: 0; flex: none; width: var(--tap); }
.round { border-radius: 50%; }
.row { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }

/* ---------- header ---------- */
.top { display: flex; align-items: center; gap: 0.4rem; padding: 0.15rem 0 0.75rem; flex-wrap: wrap; }
.top h1 { flex: 1 1 0; min-width: 0; font-size: clamp(1.15rem, 4.8vw, 1.55rem); font-weight: 800; line-height: 1.05; }
.top .icon-btn { color: var(--c-text); }
.top .logo { display: none; width: 2.75rem; height: 2.75rem; flex: none; border-radius: 0.9rem; place-items: center; color: var(--c-on-primary);
  background: linear-gradient(145deg, var(--c-primary), var(--c-primary-2)); box-shadow: var(--shadow-1); }
.top .logo svg { width: 70%; height: 70%; display: block; }
.top-tools { display: contents; }
#back { background: var(--c-surface); color: var(--c-text); border-color: var(--c-border); box-shadow: var(--shadow-1); }
#sound-btn .snd-off { display: none; }
#sound-btn.off .snd-on { display: none; }
#sound-btn.off .snd-off { display: block; }
#sound-btn.off { color: var(--c-text-muted); }
.theme-btn .t-sun { display: none; }
:root[data-theme-now="light"] .theme-btn .t-sun { display: block; }
:root[data-theme-now="light"] .theme-btn .t-moon { display: none; }
.top .ask { font-size: 1.5rem; font-weight: 800; background: var(--c-accent); color: var(--c-on-accent); border-color: transparent;
  box-shadow: 0 0.2rem 0 color-mix(in srgb, var(--c-accent) 50%, rgba(0, 0, 0, 1)); }
.top .trophy { color: var(--c-gold); }
/* home: the header becomes the hero title row */
body[data-route="home"] .top { padding-top: 0.4rem; }
body[data-route="home"] .top .logo { display: inline-grid; }
body[data-route="home"] .top .spacer { flex: 1; }
body[data-route="home"] .top h1 { order: 10; flex: 1 0 100%; font-size: var(--fs-2xl); line-height: 1; margin-top: 1.1rem; letter-spacing: -0.02em; }
body[data-route="home"] .top h1 .hl { background: linear-gradient(100deg, var(--c-primary), var(--c-primary-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.top .spacer { display: none; }
body[data-route="home"] .top .spacer { display: block; }
body:not([data-route="home"]) #theme-btn { display: none; }

/* ---------- home ---------- */
.hero { margin: 0 0 var(--space-5); }
.by { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0.35rem 0 0; font-weight: 700; font-size: var(--fs-s); color: var(--c-text-muted); }
.by i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--c-primary-2); display: inline-block; }
.lede { font-size: var(--fs-m); color: var(--c-text-muted); max-width: 34rem; margin: 0.5rem 0 1.1rem; line-height: 1.4; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.lb-home-btn { min-height: 3.5rem; padding-inline: 1.3rem 1.5rem; font-size: 1.2rem; }
.lb-home-btn .ico { color: var(--c-on-primary); }
[data-lb-home]:empty { display: none; }
.section-h { font-size: var(--fs-l); margin: 0 0 0.75rem; display: flex; align-items: baseline; gap: 0.6rem; }
.section-h small { font-family: var(--font-body); font-size: var(--fs-s); font-weight: 600; color: var(--c-text-muted); }

.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19.5rem), 1fr)); gap: 1rem; }
.grid > li { display: flex; }
.card {
  position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0.75rem 0.75rem 0.85rem; gap: 0.6rem; color: var(--c-text); text-decoration: none;
  background: var(--c-surface); border: 0.0625rem solid var(--c-border); border-radius: var(--radius-l); box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
@media (hover: hover) {
  .card:hover { transform: translateY(-0.2rem); box-shadow: var(--shadow-2); border-color: color-mix(in srgb, var(--c-primary) 55%, transparent); }
  .card:hover .art svg { transform: scale(1.06) rotate(-2deg); }
}
.card:active { transform: translateY(0.05rem) scale(0.995); }
.art {
  --a: var(--art-1a); --b: var(--art-1b);
  position: relative; display: grid; place-items: center; height: 7.5rem; border-radius: calc(var(--radius-l) - 0.4rem); overflow: hidden; color: rgba(255, 255, 255, 0.95);
  background:
    radial-gradient(circle at 1rem 1rem, rgba(255, 255, 255, 0.16) 0.12rem, transparent 0.14rem) 0 0 / 1.25rem 1.25rem,
    radial-gradient(120% 140% at 20% 0%, rgba(255, 255, 255, 0.28), transparent 55%),
    linear-gradient(150deg, var(--a), var(--b));
  box-shadow: inset 0 -0.6rem 1.4rem rgba(0, 0, 0, 0.22), inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.18);
}
.art::after { content: ""; position: absolute; inset: auto -10% -45% -10%; height: 70%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.25), transparent); }
.art .motif { display: grid; place-items: center; position: relative; z-index: 1; }
.art svg { position: relative; z-index: 1; width: 6.2rem; height: 6.2rem; display: block; filter: drop-shadow(0 0.35rem 0.4rem rgba(0, 0, 0, 0.35)); transition: transform var(--dur-slow) var(--ease-bounce); }
.art[data-art="2"] { --a: var(--art-2a); --b: var(--art-2b); }
.art[data-art="3"] { --a: var(--art-3a); --b: var(--art-3b); }
.art[data-art="4"] { --a: var(--art-4a); --b: var(--art-4b); }
.art[data-art="5"] { --a: var(--art-5a); --b: var(--art-5b); }
.art[data-art="6"] { --a: var(--art-6a); --b: var(--art-6b); }
.art[data-art="7"] { --a: var(--art-7a); --b: var(--art-7b); }
.art .region-tag { position: absolute; z-index: 2; left: 0.6rem; bottom: 0.55rem; padding: 0.1rem 0.6rem; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 700;
  color: rgba(255, 255, 255, 0.96); background: rgba(0, 0, 0, 0.28); -webkit-backdrop-filter: blur(0.3rem); backdrop-filter: blur(0.3rem); }
.card-body { display: grid; gap: 0.15rem; padding: 0 0.2rem; }
.card-name { font-family: var(--font-display); font-size: var(--fs-l); font-weight: 800; line-height: 1.1; }
.hook { color: var(--c-text-muted); font-size: var(--fs-m); line-height: 1.3; }
.chips-row { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 0.2rem; }
.chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.65rem; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 700;
  color: var(--c-text); background: color-mix(in srgb, var(--c-text) 7%, transparent); border: 0.0625rem solid var(--c-border); }
.chip .ico svg { width: 0.95rem; height: 0.95rem; }
.chip.lv-easy { color: var(--c-success); border-color: color-mix(in srgb, var(--c-success) 45%, transparent); background: color-mix(in srgb, var(--c-success) 12%, transparent); }
.chip.lv-tricky { color: var(--c-link); border-color: color-mix(in srgb, var(--c-primary) 50%, transparent); background: color-mix(in srgb, var(--c-primary) 12%, transparent); }
.chip.lv-strategy { color: var(--c-accent); border-color: color-mix(in srgb, var(--c-accent) 50%, transparent); background: color-mix(in srgb, var(--c-accent) 12%, transparent); }
.card-actions { display: flex; gap: 0.6rem; margin-top: auto; padding-top: 0.2rem; }
.card-actions .play { flex: 1; min-height: 3.5rem; font-size: 1.35rem; }
.card-actions .play .ico { transition: transform var(--dur) var(--ease); }
@media (hover: hover) { .card-actions .play:hover .ico { transform: translateX(0.15rem) scale(1.1); } }
.card-actions .gear { flex: none; width: 3.5rem; min-height: 3.5rem; padding: 0; color: var(--c-text-muted); }

.foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.2rem 1rem; margin-top: 2rem; padding-top: 1rem; border-top: 0.0625rem solid var(--c-border); color: var(--c-text-muted); font-size: var(--fs-s); text-align: center; }
.foot a, .foot-link { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 0.4rem; font-weight: 700; color: var(--c-text); }
.foot .made { display: inline-flex; align-items: center; gap: 0.35rem; min-height: var(--tap); }
.foot .made i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--c-primary-2); display: inline-block; }

/* ---------- game screen ---------- */
.game { display: flex; flex-direction: column; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; color: var(--c-text-muted); font-size: var(--fs-s); font-weight: 700; margin: 0 0 0.55rem; }
.chips .chip { font-size: var(--fs-s); padding: 0.2rem 0.75rem; }
.status {
  --side: var(--c-primary);
  position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.15rem 0.8rem; min-height: 4.2rem; margin: 0 0 0.7rem; padding: 0.65rem 0.95rem 0.7rem 0.8rem;
  font-size: 1.25rem; font-weight: 700; line-height: 1.25;
  background: linear-gradient(100deg, color-mix(in srgb, var(--side) 22%, var(--c-surface)), var(--c-surface) 70%);
  border: 0.0625rem solid color-mix(in srgb, var(--side) 45%, var(--c-border)); border-radius: var(--radius-m); box-shadow: var(--shadow-1);
  transition: background var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease);
}
.status[data-side="0"] { --side: var(--p0); }
.status[data-side="1"] { --side: var(--p1); }
.status[data-kind="over"], .status[data-kind="info"] { --side: var(--c-accent); }
.status .who-tok { grid-row: 1 / span 3; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; }
.status .who-tok i { display: block; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--p0-hi), var(--p0) 55%); box-shadow: inset 0 -0.2rem 0 rgba(0, 0, 0, 0.25), 0 0.2rem 0.45rem rgba(0, 0, 0, 0.35); }
.status[data-side="1"] .who-tok i { border-radius: 28%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--p1) 55%, rgba(255, 255, 255, 1)), var(--p1) 60%); }
.status[data-kind="cpu"] .who-tok i { animation: ig-think 1.1s var(--ease) infinite alternate; }
.status:not([data-side]) .who-tok i { border-radius: 30%; background: var(--c-accent); }
@keyframes ig-think { from { transform: translateY(0) rotate(0); } to { transform: translateY(-0.2rem) rotate(8deg); } }
.status .ev { grid-column: 2; font-size: var(--fs-s); font-weight: 600; color: var(--c-text-muted); line-height: 1.25; }
.status .head { grid-column: 2; font-family: var(--font-display); font-size: 1.45rem; font-weight: 800; line-height: 1.1; }
.status .say { grid-column: 2; font-size: var(--fs-m); font-weight: 600; line-height: 1.3; }
.status .ev:empty, .status .say:empty, .status .head:empty { display: none; }
.notice-wrap { position: relative; height: 0; z-index: 8; }
.notice { position: absolute; left: 50%; top: -1.6rem; margin: 0; padding: 0.35rem 1rem; white-space: nowrap; max-width: calc(100vw - 2rem); overflow: hidden; text-overflow: ellipsis;
  border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: 800; font-size: var(--fs-m);
  color: var(--c-on-primary); background: linear-gradient(100deg, var(--c-primary), var(--c-primary-2)); box-shadow: var(--shadow-2);
  transform: translate(-50%, 0.6rem) scale(0.9); opacity: 0; pointer-events: none; transition: transform var(--dur-slow) var(--ease-bounce), opacity var(--dur) var(--ease); }
.notice.bad { color: var(--c-text); background: var(--c-surface-2); border: 0.0625rem solid var(--c-border); }
.notice.on { transform: translate(-50%, 0) scale(1); opacity: 1; }
.notice:empty { display: none; }

.tools { display: flex; gap: 0.6rem; align-items: stretch; }
.tools .btn { min-height: 3.25rem; white-space: nowrap; padding-inline: 0.9rem; gap: 0.35rem; }
.tools .hint-btn { flex: 1 1 auto; }
.hint-btn { background: var(--c-accent); color: var(--c-on-accent); box-shadow: 0 0.25rem 0 color-mix(in srgb, var(--c-accent) 55%, rgba(0, 0, 0, 1)); }
.hint-btn:active { box-shadow: 0 0.08rem 0 color-mix(in srgb, var(--c-accent) 55%, rgba(0, 0, 0, 1)); }
.hint-tip { min-height: 1.5rem; margin: 0.35rem 0; color: var(--c-accent); font-weight: 800; text-align: center; line-height: 1.3; }

/* the game table: dark lacquer in both themes */
.board-wrap { position: relative; display: flex; justify-content: center; padding: 0.75rem 0.5rem; border-radius: var(--radius-l); color: var(--text);
  background: radial-gradient(120% 90% at 50% 0%, var(--panel-2), var(--bg) 75%); box-shadow: var(--shadow-2), inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.06); }
@media (max-width: 30rem) { .board-wrap { margin-inline: -0.6rem; padding-inline: 0.35rem; } }
/* F06/F07 (fix1): on very narrow phones (320 px class) the board takes most of the page margin, so neighbouring points and pits keep 44 px. */
@media (max-width: 22rem) { .board-wrap { margin-inline: -0.875rem; padding-inline: 0; border-radius: var(--radius-m); } }
.board-host { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; touch-action: manipulation; color: var(--text); }
.game-foot { display: flex; gap: 0.6rem; margin-top: 1rem; flex-wrap: wrap; }
.game-foot .btn { flex: 1 1 8rem; }
.game-foot .gear, .game-foot .icon-btn { flex: 0 0 3.5rem; padding: 0; min-height: 3.25rem; }
.game-foot .small-text { flex-basis: 100%; font-size: var(--fs-m); font-weight: 600; color: var(--c-text-muted); border-color: transparent; background: transparent; }

/* ---------- board kit used by views (stage tokens) ---------- */
.board {
  position: relative; width: min(100%, 36rem); aspect-ratio: var(--ar, 1);
  background: radial-gradient(120% 120% at 30% 15%, var(--wood), var(--wood-2));
  border-radius: 1.1rem; box-shadow: 0 0.7rem 1.6rem rgba(0, 0, 0, 0.45), inset 0 0 0 0.125rem color-mix(in srgb, var(--line) 30%, transparent);
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.board-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.board-art .ln { stroke: var(--line); stroke-width: 0.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.board-art .ln.dim { stroke: var(--line-dim); }
.board-art .pt { fill: var(--line); }
.board-art text { fill: var(--line); font-family: var(--font); font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.cell {
  position: absolute; transform: translate(-50%, -50%); width: max(2.75rem, calc(var(--sz, 10) * 1%)); aspect-ratio: 1; min-height: 2.75rem; padding: 0; margin: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--text); font: inherit; cursor: pointer; touch-action: manipulation;
}
.cell[disabled], .cell[aria-disabled="true"] { cursor: default; }
.cell:focus-visible { outline: 0.2rem solid var(--focus); outline-offset: 0; z-index: 2; }
.cell-in { position: relative; width: 72%; height: 72%; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: clamp(0.7rem, 3.4vw, 1.1rem); line-height: 1; }
.cell-in.piece { background: var(--c, var(--p0)); color: var(--on, var(--p0-ink)); box-shadow: inset 0 -0.18rem 0 rgba(0, 0, 0, 0.28), inset 0 0.15rem 0.2rem rgba(255, 255, 255, 0.35), 0 0.12rem 0.3rem rgba(0, 0, 0, 0.55); }
.cell-in.piece.s0 { background: radial-gradient(circle at 34% 28%, var(--p0-hi), var(--p0) 58%); }
.s0 { --c: var(--p0); --on: var(--p0-ink); }
.s1 { --c: var(--p1); --on: var(--p1-ink); }
.s2 { --c: var(--p2); --on: var(--p2-ink); }
.s3 { --c: var(--p3); --on: var(--p3-ink); }
.cell-in.s1.piece, .cell-in.s3.piece { border-radius: 28%; }

/* dice */
.die { display: inline-grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 0.15rem; width: 3rem; height: 3rem; padding: 0.35rem; border-radius: 0.6rem; background: var(--text); box-shadow: 0 0.12rem 0.3rem rgba(0, 0, 0, 0.5); }
.die i { border-radius: 50%; }
.die i.on { background: var(--ink); }
.tray { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; width: 100%; }

/* legal moves: a strong friendly glow; pieces you can tap pulse; targets are bright dots; the picked piece lifts and shines */
.cell-in.hl-move.piece { outline: 0.22rem solid var(--focus); outline-offset: 0.14rem; box-shadow: 0 0 0.9rem color-mix(in srgb, var(--focus) 70%, transparent), inset 0 -0.18rem 0 rgba(0, 0, 0, 0.28); }
.cell-in.hl-move.piece::before { content: ""; position: absolute; inset: -0.45rem; border-radius: inherit; border: 0.2rem solid var(--focus); opacity: 0; pointer-events: none; animation: ig-ring 1.5s ease-out infinite; }
.cell-in.hl-move:not(.piece) { width: 42%; height: 42%; background: var(--focus); box-shadow: 0 0 0 0.32rem color-mix(in srgb, var(--focus) 32%, transparent), 0 0 0.9rem var(--focus); animation: ig-dot 1.3s ease-in-out infinite; }
.cell-in.hl-sel { outline: 0.3rem solid var(--focus); outline-offset: 0.18rem; box-shadow: 0 0 1.2rem var(--focus), 0 0.45rem 0.6rem rgba(0, 0, 0, 0.45); transform: translateY(-0.12rem) scale(1.08); transition: transform var(--dur) var(--ease-bounce); }
.cell-in.hl-last { box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.9), 0 0 0.9rem rgba(255, 255, 255, 0.45); }
.cell-in.hl-cap { outline: 0.22rem dashed var(--p2); outline-offset: 0.14rem; }
@keyframes ig-ring { 0% { transform: scale(0.85); opacity: 0.9; } 100% { transform: scale(1.45); opacity: 0; } }
@keyframes ig-dot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.pit.hl-move::after { content: ""; position: absolute; inset: -0.12rem; border-radius: inherit; border: 0.22rem solid var(--focus); box-shadow: 0 0 0.8rem color-mix(in srgb, var(--focus) 60%, transparent); pointer-events: none; animation: ig-breathe 1.5s ease-in-out infinite; }
@keyframes ig-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* hint: the suggested cells flash and a hand points at them; nothing is played */
[data-cell].hint-on { z-index: 4; outline: 0.3rem solid var(--ok) !important; outline-offset: 0.12rem; animation: ig-hint 0.55s ease-in-out infinite alternate; }
.cell.hint-on { border-radius: 50%; }
@keyframes ig-hint { from { outline-offset: 0.05rem; } to { outline-offset: 0.45rem; } }
.hint-hand { position: absolute; z-index: 6; width: 2.5rem; height: 2.5rem; margin: -0.3rem 0 0 -0.94rem; pointer-events: none; transition: left 0.6s ease, top 0.6s ease; filter: drop-shadow(0 0.2rem 0.3rem rgba(0, 0, 0, 0.6)); }
.hint-hand svg { width: 100%; height: 100%; display: block; animation: ig-bob 0.5s ease-in-out infinite alternate; }
.hint-hand path { fill: var(--text); stroke: var(--ink); stroke-width: 1.1; }
@keyframes ig-bob { from { transform: translateY(0); } to { transform: translateY(0.35rem); } }

/* ---------- dialogs ---------- */
dialog.dlg {
  width: min(30rem, calc(100% - 1.5rem)); max-height: calc(100svh - 1.5rem); overflow: auto; padding: 1.25rem; color: var(--c-text);
  background: var(--c-bg-2); border: 0.0625rem solid var(--c-border); border-radius: var(--radius-l); box-shadow: var(--shadow-2);
}
dialog.dlg[open] { animation: ig-pop var(--dur-slow) var(--ease-bounce); }
@keyframes ig-pop { from { transform: translateY(0.8rem); opacity: 0; } to { transform: none; opacity: 1; } }
dialog.dlg::backdrop { background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(0.2rem); backdrop-filter: blur(0.2rem); }
dialog.dlg h2 { font-size: var(--fs-xl); margin-bottom: 0.75rem; }
dialog.dlg h3 { font-size: var(--fs-m); margin: 1rem 0 0.3rem; color: var(--c-link); }
.rules { padding-left: 1.25rem; margin: 0; display: grid; gap: 0.45rem; }
.sources { color: var(--c-text-muted); font-size: var(--fs-s); }
.sources a { display: inline-block; padding: 0.75rem 0.2rem; min-height: var(--tap); }
fieldset.seg { border: 0; padding: 0; margin: 0 0 0.6rem; min-width: 0; }
fieldset.seg legend { font-size: var(--fs-s); color: var(--c-text-muted); font-weight: 700; padding: 0; margin-bottom: 0.35rem; }
.seg-item { display: inline-block; margin: 0 0.4rem 0.4rem 0; position: relative; }
.seg-item input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.seg-item label {
  display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); padding: 0.4rem 1rem; font-size: 1.0625rem; font-weight: 700; color: var(--c-text);
  border: 0.125rem solid var(--c-border); border-radius: var(--radius-pill); touch-action: manipulation; transition: background var(--dur) var(--ease);
}
.seg-item input:checked + label { background: var(--c-primary); color: var(--c-on-primary); border-color: var(--c-primary); }
.seg-item input:focus-visible + label { outline: 0.2rem solid var(--c-focus); outline-offset: 0.15rem; }
.help { color: var(--c-text-muted); font-size: var(--fs-s); margin: 0 0 1rem; }
.dlg .row { justify-content: flex-end; margin-top: 1.1rem; }

/* ---------- picture tutorial ---------- */
dialog.tut { width: min(30rem, calc(100% - 1rem)); padding: 0.85rem 0.9rem 0.9rem; overscroll-behavior: contain; }
.tut-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.6rem; }
dialog.tut .tut-head h2 { font-size: var(--fs-l); margin: 0; }
.tut-skip { flex: none; min-width: 5.5rem; }
.tut-pic { position: relative; aspect-ratio: 200 / 130; border-radius: var(--radius-m); padding: 0.4rem; touch-action: pan-y;
  background: radial-gradient(120% 120% at 30% 10%, var(--panel-2), var(--bg)); box-shadow: inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.08), var(--shadow-1); }
.tut-svg { width: 100%; height: 100%; display: block; }
.tut-kicker { display: flex; align-items: center; gap: 0.5rem; margin: 0.8rem 0.2rem 0; font-size: var(--fs-s); font-weight: 800; color: var(--c-link); text-transform: uppercase; letter-spacing: 0.06em; }
.tut-kicker b { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--c-primary); color: var(--c-on-primary); letter-spacing: 0; }
.tut-text { margin: 0.35rem 0.2rem 0.6rem; min-height: 3.6em; font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; line-height: 1.25; }
.tut-dots { display: flex; justify-content: center; gap: 0.45rem; margin: 0 0 0.85rem; }
.tut-dots i { width: 0.7rem; height: 0.7rem; border-radius: 1rem; background: var(--c-border); transition: width var(--dur) var(--ease), background var(--dur) var(--ease); }
.tut-dots i.on { width: 1.9rem; background: var(--c-primary); }
.tut-nav { display: flex; gap: 0.6rem; }
.tut-nav .btn { flex: 1 1 0; min-height: 3.5rem; font-size: 1.25rem; }
.tut-back[aria-disabled="true"] { opacity: 0.4; }
.tut-rules { width: 100%; margin-top: 0.5rem; font-size: var(--fs-m); font-weight: 600; color: var(--c-text-muted); border-color: transparent !important; background: transparent !important; }
.tut-svg .tb { fill: var(--wood); stroke: var(--line-dim); stroke-width: 1.5; }
.tut-svg .tb.soft { fill: var(--wood-2); }
.tut-svg .tl, .tut-svg .tline { stroke: var(--line); stroke-width: 1.6; fill: none; stroke-linecap: round; }
.tut-svg .tstud { fill: var(--line); }
.tut-svg .tpit { fill: rgba(0, 0, 0, 0.45); stroke: rgba(255, 255, 255, 0.1); }
.tut-svg .tempty { fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-dasharray: 3 2.5; }
.tut-svg .tseed0 { fill: var(--p0); }
.tut-svg .tseed1 { fill: var(--p1); }
.tut-svg .tp0 { fill: var(--p0); stroke: var(--p0-ink); stroke-width: 1.4; }
.tut-svg .tp1 { fill: var(--p1); stroke: var(--p1-ink); stroke-width: 1.4; }
.tut-svg .tpin { fill: rgba(0, 0, 0, 0.25); }
.tut-svg .tgl { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tut-svg .tglow { fill: none; stroke: var(--focus); stroke-width: 2.6; }
.tut-svg .tcap { fill: none; stroke: var(--p2); stroke-width: 2.4; stroke-dasharray: 4 3; }
.tut-svg .tdot { fill: var(--focus); }
.tut-svg .tarrow { fill: none; stroke: var(--ok); stroke-width: 3.2; stroke-linecap: round; }
.tut-svg .tarrowhead { fill: var(--ok); }
.tut-svg .thand path { fill: var(--text); stroke: var(--ink); stroke-width: 0.9; stroke-linejoin: round; }
.tut-svg .tripple { fill: color-mix(in srgb, var(--focus) 35%, transparent); }
.tut-svg .tstar { fill: var(--accent); stroke: var(--accent-ink); stroke-width: 1; }
.tut-svg .tpill { fill: var(--accent); }
.tut-svg .tpill-t, .tut-svg .tnum, .tut-svg .tbig, .tut-svg .tbadge, .tut-svg .tstore-t, .tut-svg .tsmall { font-family: var(--font); font-weight: 800; text-anchor: middle; dominant-baseline: central; }
.tut-svg .tpill-t { fill: var(--accent-ink); font-size: 0.75rem; }
.tut-svg .tbig { fill: var(--focus); font-size: 1.6rem; }
.tut-svg .tbadge { fill: var(--focus); font-size: 0.95rem; }
.tut-svg .tsmall { fill: var(--text); font-size: 0.55rem; }
.tut-svg .tnum { fill: var(--text); font-size: 0.8rem; }
.tut-svg .tstore { fill: rgba(0, 0, 0, 0.35); stroke: var(--p0); stroke-width: 1.4; }
.tut-svg .tstore-t { fill: var(--p0); font-size: 0.6rem; }
.tut-svg .tmill { fill: color-mix(in srgb, var(--ok) 30%, transparent); stroke: var(--ok); stroke-width: 1.5; }
.tut-svg .tsq { fill: rgba(0, 0, 0, 0.25); stroke: var(--line-dim); stroke-width: 0.8; }
.tut-svg .tsq.out { fill: rgba(255, 255, 255, 0.06); }
.tut-svg .tsq.h0 { fill: color-mix(in srgb, var(--p0) 35%, transparent); }
.tut-svg .tsq.h1 { fill: color-mix(in srgb, var(--p1) 35%, transparent); }
.tut-svg .tcentre { fill: rgba(0, 0, 0, 0.35); stroke: var(--line); stroke-width: 1; }
.tut-svg .tlotus { fill: none; stroke: var(--accent); stroke-width: 1.6; }
.tut-svg .tx { stroke: var(--line); stroke-width: 1.4; stroke-linecap: round; }
.tut-svg .tdie { fill: var(--text); stroke: rgba(0, 0, 0, 0.4); stroke-width: 1; }
.tut-svg .tdie.off { opacity: 0.35; }
.tut-svg .tpip { fill: var(--ink); }
.tut-svg .tdiesel { fill: none; stroke: var(--focus); stroke-width: 2.6; }
.tut-svg .tshell { fill: var(--text); stroke: rgba(0, 0, 0, 0.45); stroke-width: 1; }
.tut-svg .tslit { fill: var(--ink); }
.tut-svg .tridge { stroke: rgba(0, 0, 0, 0.35); stroke-width: 1.2; }
.tut-svg .tgy { fill: rgba(255, 255, 255, 0.07); stroke: var(--line-dim); stroke-width: 0.6; }
.tut-svg .tgy.v { fill: rgba(255, 255, 255, 0.12); }
.tut-svg .tgy.x { fill: rgba(255, 255, 255, 0.12); }
.tut-svg .tgoal { fill: color-mix(in srgb, var(--accent) 25%, transparent); stroke: var(--accent); stroke-width: 1.8; }
.tut-svg .trail { stroke: var(--ok); stroke-width: 2.2; stroke-linecap: round; }
.tut-svg .trung { stroke: var(--ok); stroke-width: 1.5; }
.tut-svg .tsnake { fill: none; stroke: var(--p2); stroke-width: 4; stroke-linecap: round; }
.tut-svg .tsnake-h { fill: var(--p2); stroke: var(--ink); stroke-width: 1; }
.tut-svg .tcrown { fill: var(--p0); stroke: var(--p0-ink); stroke-width: 1; }

/* ---------- end of game ---------- */
.result.celebrate { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--c-bg) 82%, transparent); -webkit-backdrop-filter: blur(0.45rem); backdrop-filter: blur(0.45rem); overflow: auto; }
.result.celebrate[hidden] { display: none !important; }
.result-card { position: relative; z-index: 1; width: min(26rem, 100%); padding: 1.2rem 1.2rem 1rem; text-align: center; color: var(--c-text);
  background: var(--c-bg-2); border: 0.0625rem solid var(--c-border); border-radius: 1.75rem; box-shadow: var(--shadow-2); overflow: hidden; }
.result-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 9rem; z-index: -1;
  background: radial-gradient(80% 100% at 50% 0%, color-mix(in srgb, var(--c-primary) 38%, transparent), transparent 75%); }
.kind-lose .result-card::before, .kind-draw .result-card::before { background: radial-gradient(80% 100% at 50% 0%, color-mix(in srgb, var(--p1) 30%, transparent), transparent 75%); }
.result-kicker { margin: 0 0 0.1rem; font-size: var(--fs-s); font-weight: 800; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.badge { width: 8.5rem; height: 8.5rem; margin: 0 auto 0.3rem; }
.badge svg { width: 100%; height: 100%; display: block; overflow: visible; }
.kind-win .badge { animation: ig-badge 0.9s cubic-bezier(0.2, 1.4, 0.4, 1) 1; }
.kind-win .bd-ray { animation: ig-spin 6s linear infinite; transform-origin: 50% 50%; transform-box: view-box; }
@keyframes ig-badge { 0% { transform: scale(0.3) rotate(-20deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes ig-spin { to { transform: rotate(360deg); } }
.bd-sun { fill: color-mix(in srgb, var(--c-gold) 45%, transparent); }
.bd-ray { stroke: var(--c-gold); stroke-width: 5; stroke-linecap: round; }
.bd-cup { fill: var(--c-gold); stroke: var(--accent-ink); stroke-width: 2.5; stroke-linejoin: round; }
.bd-cup-hi { fill: rgba(255, 255, 255, 0.45); }
.bd-star { fill: var(--accent-ink); }
.bd-face { fill: var(--focus); stroke: var(--accent-ink); stroke-width: 2; }
.bd-face.soft { fill: var(--p1); stroke: var(--p1-ink); }
.bd-eye { fill: var(--ink); }
.bd-mouth { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.bd-cheek { fill: var(--p2); opacity: 0.55; }
.bd-heart { fill: var(--p2); }
.bd-hands { stroke: var(--c-text-muted); stroke-width: 5; stroke-linecap: round; }
.result-card h2 { font-size: 2.3rem; line-height: 1.05; color: var(--c-text); }
.kind-win .result-card h2 { background: linear-gradient(100deg, var(--c-primary), var(--c-primary-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kind-lose .result-card h2, .kind-draw .result-card h2 { font-size: 1.9rem; }
.result-detail { color: var(--c-text-muted); margin: 0.45rem 0 0.8rem; font-size: var(--fs-m); line-height: 1.35; }
.result-stats { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin: 0 0 1rem; padding: 0; }
.result-stats li { display: grid; gap: 0.05rem; padding: 0.5rem 0.3rem; border-radius: var(--radius-m); background: var(--c-surface); border: 0.0625rem solid var(--c-border); }
.result-stats b { font-family: var(--font-display); font-size: var(--fs-l); line-height: 1.1; }
.result-stats span { font-size: var(--fs-xs); font-weight: 700; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.result-actions { display: grid; gap: 0.6rem; }
.result-actions .btn { width: 100%; }
.lb-slot { margin-top: 0.75rem; text-align: left; }
/* with the points card in the slot, the badge shrinks so the card and Play again both fit a phone screen */
.result-card:has(.lb-slot:not(:empty)) .badge { width: 5.5rem; height: 5.5rem; margin-bottom: 0; }
.result-card:has(.lb-slot:not(:empty)) .result-detail { margin-bottom: 0.6rem; }
.lb-slot:empty { display: none; }
.result-look { width: 100%; margin-top: 0.4rem; font-size: var(--fs-m); font-weight: 600; color: var(--c-text-muted); border-color: transparent !important; background: transparent !important; }
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }

/* ---------- leaderboard screen (the shell part; lb.js fills .lb-host) ---------- */
.lb-page { display: block; }
.lb-host { display: block; min-height: 12rem; }
/* the board gets the wide shell on laptops (two columns from 64rem: board left, You panel right) */
body[data-route="leaderboard"] .shell { max-width: 76rem; }

/* ---------- share toast and copy box ---------- */
.toast { position: fixed; left: 50%; bottom: max(1.5rem, env(safe-area-inset-bottom)); z-index: 70; margin: 0; padding: 0.85rem 1.5rem; border-radius: var(--radius-pill);
  background: var(--c-accent); color: var(--c-on-accent); font-weight: 800; font-size: 1.125rem; box-shadow: var(--shadow-2);
  transform: translate(-50%, 160%); opacity: 0; transition: transform var(--dur-slow) var(--ease), opacity var(--dur) var(--ease); pointer-events: none; }
.toast.on { transform: translate(-50%, 0); opacity: 1; }
.copy-input { width: 100%; min-height: var(--tap); padding: 0.5rem 0.8rem; font: inherit; font-size: 1rem; color: var(--c-text); background: var(--c-bg); border: 0.125rem solid var(--c-border); border-radius: 0.7rem; }

/* ---------- wide screens ---------- */
@media (min-width: 40rem) {
  .art { height: 8.5rem; }
  .art svg { width: 7rem; height: 7rem; }
}
@media (min-width: 64rem) {
  .grid { gap: 1.25rem; }
  body[data-route="home"] .top h1 { margin-top: 1.6rem; }
  .hero .lede { font-size: var(--fs-l); }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* A game table with a compact turn card and one place for every action. */
.game { display: grid; gap: 0.65rem; grid-template-areas: "status" "players" "board" "notice" "actions" "controls" "tip" "footer"; }
.game-panel, .game-summary { display: contents; }
.game .status { grid-area: status; margin: 0; min-height: 6.25rem; padding: 0.65rem 0.8rem; }
.game .chips { grid-area: players; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.game .player-chip { border-radius: 1rem; min-height: 2.75rem; padding: 0.4rem 0.65rem; font-size: 0.9375rem; line-height: 1.15; transition: transform 200ms var(--ease), background 200ms var(--ease), border-color 200ms var(--ease); }
.player-piece { display: inline-block; flex: none; width: 0.9rem; height: 0.9rem; background: var(--c); border-radius: 50%; box-shadow: inset 0 -0.12rem 0 rgba(0, 0, 0, 0.3); }
.s1 .player-piece { border-radius: 25%; }
.game .player-chip.is-active { border-color: var(--c); background: color-mix(in srgb, var(--c) 15%, var(--c-surface)); transform: scale(1.02); box-shadow: 0 0.2rem 0.65rem color-mix(in srgb, var(--c) 15%, transparent); }
.game .status .head { font-size: 1.35rem; }
.game .status .ev { display: block; }
.game .status .ev:empty { display: none; }
.game .status .say { font-size: 1rem; }
.game .status[data-kind="cpu"] .head::after { content: ""; display: inline-block; width: 1.5rem; height: 0.35rem; margin-left: 0.4rem; background: radial-gradient(circle, currentColor 45%, transparent 50%) 0 0 / 0.5rem 0.35rem repeat-x; animation: thinking-dots 900ms ease-out infinite alternate; }
@keyframes thinking-dots { to { opacity: 0.25; } }
.game .notice-wrap { grid-area: notice; }
.game .board-wrap { grid-area: board; min-width: 0; align-self: start; padding-block: 0.5rem; }
.game-controls { grid-area: controls; min-width: 0; color: var(--text); }
.game-controls:empty { display: none; }
.game .actions { grid-area: actions; flex-wrap: wrap; }
.game .hint-tip { grid-area: tip; min-height: 0; margin: 0; }
.game .hint-tip:empty { display: none; }
.game .game-foot { grid-area: footer; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.game .game-foot .gear, .game .game-foot .icon-btn { width: auto; padding: 0.5rem 0.8rem; }
.game .game-foot .small-text { grid-column: 1 / -1; }
.game .btn { min-height: 3rem; }
.game .race-controls { display: grid; gap: 0.65rem; padding: 0.8rem; border-radius: 1.25rem; background: var(--bg-2); }
.game .race-controls .rk-roll { order: -2; }
.game .race-controls .cp-dice, .game .race-controls .cp-pool { order: -1; }
.game .race-controls .rk-tray { padding: 0.5rem 0.65rem; }
.game .rk-col { width: 100%; }
.game .board-host .board { width: 100%; max-width: 40rem; }
.game .rk-roll .roll-button { flex: 1 1 100%; gap: 0.5rem; }
.roll-button::before { content: ""; display: inline-block; width: 1.15rem; height: 1.15rem; border: 0.12rem solid currentColor; border-radius: 0.3rem; background: radial-gradient(circle, currentColor 0.12rem, transparent 0.14rem) center / 0.45rem 0.45rem; transform: rotate(-12deg); }
.game .rk-val { font-size: 1.25rem; }
.game .rk-diebtn, .game .rk-chip { min-height: 3rem; min-width: 3rem; }
/* Shared move language; existing views keep their contract classes as aliases. */
.is-legal { --move-ring: var(--focus); }
.is-legal:not(svg *) { outline: 0.125rem solid var(--move-ring); outline-offset: -0.125rem; }
.is-legal .cp-ring, .is-legal .ck-ring { border-style: solid; box-shadow: none; animation: legal-ring 1400ms ease-out infinite; }
.is-selected, .pit.is-selected { transform: translateY(-0.12rem) scale(1.06); }
.is-target { filter: drop-shadow(0 0 0.12rem var(--focus)); }
.is-last-move { stroke: var(--text); }
@keyframes legal-ring { 50% { opacity: 0.5; scale: 1.08; } }
.score-pop { animation: score-pop 240ms var(--ease); }
@keyframes score-pop { 50% { transform: scale(1.16); } }
.result-card { border-radius: 2rem; }
.result-card .badge { width: 8rem; height: 8rem; margin: 0 auto 0.4rem; }
.result-card .result-kicker { text-transform: none; letter-spacing: 0; color: var(--c-text-muted); font-size: 1.0625rem; font-weight: 600; margin: 0.6rem 0 1.2rem; }
.result-actions .btn { min-height: 3.5rem; }
::selection { color: var(--c-on-primary); background: var(--c-primary); }
@media (min-width: 64rem) {
  body[data-route="game"] .shell { max-width: 76rem; }
  .game { grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem); grid-template-areas: "board summary" "board panel"; grid-template-rows: auto 1fr; gap: 1.5rem; align-items: start; }
  .game-summary { grid-area: summary; display: flex; flex-direction: column; gap: 0.8rem; position: sticky; top: 1rem; }
  .game-panel { grid-area: panel; display: flex; flex-direction: column; gap: 0.8rem; position: sticky; top: calc(1rem + var(--summary-height, 12rem) + 0.8rem); min-width: 0; }
  .game .board-wrap { min-height: min(40rem, calc(100svh - 7rem)); padding: 0.75rem; align-items: center; }
  .game .board-host .board { max-width: min(100%, calc(100svh - 9rem), 40rem); }
  .game .status { min-height: 7rem; }
  .game .race-controls { padding: 0.7rem; gap: 0.5rem; }
  .game .race-controls .rk-tray { gap: 0.2rem 0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .game *, .game *::before, .game *::after, .result * { animation: none !important; transition: none !important; }
}
.game .player-chip { flex-wrap: wrap; }
.player-progress { flex-basis: 100%; font-size: 0.8125rem; font-weight: 600; color: var(--c-text-muted); padding-left: 1.2rem; }
.player-progress:empty { display: none; }
/* Progress lives with each player; keep a tray only when it offers a move. */
.game .race-controls .rk-tray:not(:has(button)) { display: none; }
.game .player-chip { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; }
.player-progress { grid-column: 2; padding-left: 0; }
.game #share-btn { gap: 0.45rem; border-radius: var(--radius-pill); }
@media (max-width: 63.999rem) { .game .status { min-height: 5.5rem; } }
/* Celebrate around the result while keeping its title and buttons clear. */
.result .confetti { z-index: 0; }
/* Short windows need normal scrolling so the two panel sections stay together. */
@media (min-width: 64rem) and (max-height: 48rem) {
  .game .game-summary, .game .game-panel { position: static; }
}

/* The turn action stays in reach even inside a short phone iframe. */
.primary-action:empty { display: none; }
.primary-action { display: flex; gap: 0.5rem; flex: 1; min-width: 0; }
.primary-action > .btn { flex: 1; min-width: 0; }
.game .game-foot .small-text { grid-column: auto; }
.game .rk-roll:not(:has(button)) { min-height: 0; }
.game .rk-roll:empty { display: none; }
@media (max-width: 63.999rem) {
  .game { padding-bottom: calc(var(--action-height, 5rem) + 1rem); }
  .game .actions { position: fixed; inset: auto 0 0; z-index: 20; margin: 0; padding: 0.6rem max(0.75rem, env(safe-area-inset-right)) max(0.6rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left)); background: var(--bg); border-top: 0.0625rem solid var(--line-soft); box-shadow: 0 -0.3rem 1rem rgba(0,0,0,0.2); flex-wrap: nowrap; gap: 0.5rem; }
  .game .actions .btn { font-size: 1rem; padding-inline: 0.75rem; }
  .game .actions .ig3d-toggle { margin-left: auto; }
  .game .actions .ig3d-toggle span { min-width: 2.25rem; padding-inline: 0.3rem; }
  .game .board-wrap { scroll-margin-bottom: calc(var(--action-height, 5rem) + 1rem); }
}
/* Point games share the same move language as the race and pit boards. */
.hunt-board .cell-in, .lv-board .cell-in { transition: transform 200ms var(--ease), box-shadow 200ms var(--ease); }
.hunt-board .cell-in.piece, .lv-board .cell-in.piece { width: 80%; height: 80%; }
.cell-in.is-legal.piece::before { animation-duration: 1400ms; }
.cell-in.is-jump:not(.piece) { background: var(--p2); outline: 0.15rem dashed var(--text); outline-offset: 0.2rem; }
.cell-in.is-jump:not(.piece)::after { content: ""; width: 40%; height: 40%; border: solid var(--p2-ink); border-width: 0.15rem 0.15rem 0 0; transform: rotate(-45deg) translate(-10%, 10%); }
.cell-in.is-last-move::before { content: ""; position: absolute; inset: -0.22rem; border: 0.12rem solid var(--text); border-radius: inherit; pointer-events: none; }
.point-ghost { position: absolute; pointer-events: none; z-index: 4; }
.game .hunt-tally { display: none; }

.cell-in.is-legal.piece:not(.hl-move)::before { content: ""; position: absolute; inset: -0.35rem; border: 0.15rem solid var(--focus); border-radius: inherit; pointer-events: none; animation: legal-ring 1400ms ease-out infinite; }
.lv-board .cell-in.hl-sel:not(.is-selected) { transform: none; outline-width: 0.12rem; box-shadow: none; }
.lv-board .cell-in.s1.is-selected { transform: translateY(-0.12rem) rotate(45deg) scale(0.94); }
.game .actions:has(.primary-action:not(:empty)) .hint-btn { flex: 0 0 auto; }
.game .primary-action > .btn { white-space: normal; }
@media (max-width: 22rem) { .game .actions .roll-button::before { display: none; } }

/* Phones: a slimmer turn card and player row leave more room for the board above the action bar. */
@media (max-width: 63.999rem) {
  .game { gap: 0.5rem; }
  .game .status { min-height: 0; padding: 0.5rem 0.75rem; }
  .game .status .head { font-size: 1.15rem; }
  .game .status .say { font-size: 0.9375rem; }
  .game .player-chip { padding: 0.3rem 0.6rem; font-size: 0.875rem; }
  .game .board-wrap { padding-block: 0.25rem; }
}