/* Shared tokens and primitives for the site and the game. Palette from the app's Theme.swift. */
:root {
  --accent: #6E5BFF;
  --accent-soft: #EEEBFF;
  --warm: #FF8A5B;
  --warm-soft: #FFE9DF;
  --bg: #FAF6F1;
  --bg-2: #F3EDE5;
  --card: #FFFFFF;
  --card-pressed: #F1ECE6;
  --text: #1D1A22;
  --muted: rgba(60, 60, 67, .66);
  --faint: rgba(60, 60, 67, .32);
  --sep: rgba(0, 0, 0, .08);
  --success: #2FA36B;
  --danger: #E5484D;
  --shadow: 0 1px 2px rgba(30, 20, 40, .05), 0 8px 24px rgba(30, 20, 40, .07);
  --radius: 22px;
  --font: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #8B7BFF;
    --accent-soft: #2A2547;
    --warm: #FF9D74;
    --warm-soft: #3A251C;
    --bg: #121214;
    --bg-2: #18181B;
    --card: #1E1E22;
    --card-pressed: #2A2A30;
    --text: #F4F2F7;
    --muted: rgba(235, 235, 245, .62);
    --faint: rgba(235, 235, 245, .3);
    --sep: rgba(255, 255, 255, .1);
    --success: #4CC98A;
    --danger: #FF6369;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --accent: #8B7BFF; --accent-soft: #2A2547; --warm: #FF9D74; --warm-soft: #3A251C;
  --bg: #121214; --bg-2: #18181B; --card: #1E1E22; --card-pressed: #2A2A30; --text: #F4F2F7;
  --muted: rgba(235, 235, 245, .62); --faint: rgba(235, 235, 245, .3); --sep: rgba(255, 255, 255, .1);
  --success: #4CC98A; --danger: #FF6369; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1.15; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img { max-width: 100%; height: auto; }
.muted { color: var(--muted); }
.center { text-align: center; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

.icon { display: inline-flex; width: 24px; height: 24px; flex: none; }
.icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon svg circle[r="1.6"], .icon svg circle[r=".6"] { fill: currentColor; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 22px; border-radius: 16px; border: 0;
  font-weight: 800; font-size: 17px; cursor: pointer; white-space: nowrap;
  transition: transform .12s ease, filter .12s ease, background .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); }
.btn:hover { filter: brightness(1.04); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn .icon { width: 20px; height: 20px; }
.btn.primary { background: var(--accent); color: #fff; }
.btn.warm { background: var(--warm); color: #fff; }
.btn.soft { background: var(--accent-soft); color: var(--accent); }
.btn.ghost { background: var(--card-pressed); color: var(--text); }
.btn.danger { background: transparent; color: var(--danger); box-shadow: inset 0 0 0 1.5px currentColor; }
.btn.small { min-height: 40px; padding: 0 16px; font-size: 15px; border-radius: 12px; }
.btn.white { background: #fff; color: #1D1A22; }

.sticker { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); }
.sticker.big { width: 56px; height: 56px; }

.paw svg { width: 100%; height: 100%; fill: currentColor; }

/* Board (shared with the landing page demo) */
.board { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; cursor: pointer; outline: none; }
.board .border { stroke: var(--border); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .board .border { stroke: var(--border-dark); } }
:root[data-theme="dark"] .board .border { stroke: var(--border-dark); }
.board .x { stroke: var(--mark); stroke-linecap: round; fill: none; }
.board .x.auto { opacity: .55; }
.board .x.flag { stroke: var(--conflict); opacity: 1; }
.board .halo { fill: var(--conflict-fill); stroke: var(--conflict-stroke); stroke-width: 3.5; }
.board .x-wrap, .board .pet-wrap { transform-box: fill-box; transform-origin: center; }
.board .grow { animation: grow .14s ease-out; }
.board .pop { animation: pop .42s cubic-bezier(.3, 1.6, .5, 1); }
.board .hop { animation: hop .55s ease-in-out both; }
.board .dim { fill: rgba(20, 10, 30, .26); pointer-events: none; }
.board .focus { fill: none; stroke: var(--highlight); stroke-width: 5; pointer-events: none; }
.board .target { fill: none; stroke: var(--highlight); stroke-width: 4.5; stroke-dasharray: 7 7; pointer-events: none; animation: spin 6s linear infinite; transform-box: fill-box; transform-origin: center; }
.board .cursor { fill: none; stroke: var(--accent); stroke-width: 6; pointer-events: none; }
@keyframes grow { from { transform: scale(.5); } to { transform: scale(1); } }
@keyframes pop { from { transform: scale(.45); } to { transform: scale(1); } }
@keyframes hop { 0% { transform: scale(1); } 30% { transform: scale(1.28); } 60% { transform: scale(.92); } 82% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }
.mini-board { display: block; width: 100%; height: auto; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}