@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
/* Selected motion tokens adapted from Jakub Antalik's transitions.dev.
   Source: https://github.com/Jakubantalik/transitions.dev/blob/main/skills/transitions-dev/_root.css
   Product-use terms: https://transitions.dev/terms.html */
:root {
  --duration-stagger:40ms; --duration-micro:80ms; --duration-quick:150ms;
  --duration-fast:250ms; --duration-medium:350ms; --duration-slow:400ms;
  --duration-very-slow:500ms;
  --ease-smooth-out:cubic-bezier(0.22,1,0.36,1);
  --ease-in-out:ease-in-out;
  --distance-micro:4px; --distance-base:8px; --distance-medium:12px;
  --scale-large:0.96;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#101411; --panel:#191e1a; --text:#f2f4ed; --ink:#f2f4ed;
  --muted:#a2aca2; --line:#354035; --green:#c3f477; --green2:#c3f477;
  --accent-ink:#182116; --soft:#283326; --gold:#c3f477;
  --red:#ffaaa4; --danger-bg:#422a2a; --winner-bg:#23321c;
  --shadow:0 8px 26px #0002;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg:#f5f7f3; --panel:#ffffff; --text:#202a20; --ink:#202a20;
  --muted:#5e6b5d; --line:#d6dfd2; --green:#36631c; --green2:#36631c;
  --accent-ink:#ffffff; --soft:#eaf0e5; --gold:#497d28;
  --red:#96322d; --danger-bg:#fbe9e6; --winner-bg:#eff9e7;
  --shadow:0 8px 26px #25351a08;
}
html,body {background:var(--bg);color:var(--text)}
.theme-toggle {font:500 14px 'DM Sans',sans-serif;min-height:44px;padding:10px 14px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--text);cursor:pointer;white-space:nowrap}
.theme-toggle:hover {background:var(--soft)}
.theme-toggle:focus-visible {outline:2px solid var(--green);outline-offset:3px}
.header-controls {display:flex;align-items:center;gap:24px}
.brandmark,.filters button[aria-pressed=true],.empty button {color:var(--accent-ink)}
.view-toggle button[aria-pressed=true] {background:var(--soft)}
.search input::placeholder {color:var(--muted);opacity:1}
@media(max-width:600px){.header-controls{gap:8px}.personal{display:none}.theme-toggle{padding:9px 11px}}

/* Fast feedback; explicitly scoped so games keep control of their own motion. */
.theme-toggle, [data-motion-control] {
  transition:background-color var(--duration-quick) var(--ease-smooth-out),
    color var(--duration-quick) var(--ease-smooth-out),
    border-color var(--duration-quick) var(--ease-smooth-out);
}
/* Sliding selection pill; JS measures existing controls without changing semantics. */
[data-motion-tabs] {position:relative;isolation:isolate}
[data-motion-tabs][data-motion-ready]::before {
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:0;top:var(--tab-y);height:var(--tab-height);width:var(--tab-width);
  transform:translateX(var(--tab-x));border-radius:6px;
  background:var(--tab-fill,var(--green));
  transition:transform var(--duration-fast) var(--ease-smooth-out),
    width var(--duration-fast) var(--ease-smooth-out),
    height var(--duration-fast) var(--ease-smooth-out),
    top var(--duration-fast) var(--ease-smooth-out);
}
[data-motion-tabs][data-motion-ready] button[aria-pressed="true"] {background:transparent}

/* Modal open/close: native dialog retains Escape, focus trapping and restoration.
   Browsers without discrete transitions retain immediate native open/close. */
dialog {
  opacity:0;transform:scale(var(--scale-large));
  transition:opacity var(--duration-quick) var(--ease-smooth-out),
    transform var(--duration-quick) var(--ease-smooth-out),
    display var(--duration-quick) allow-discrete,
    overlay var(--duration-quick) allow-discrete;
}
dialog[open] {opacity:1;transform:scale(1);transition-duration:var(--duration-fast)}
dialog::backdrop {
  opacity:0;
  transition:opacity var(--duration-quick) var(--ease-smooth-out),
    display var(--duration-quick) allow-discrete,
    overlay var(--duration-quick) allow-discrete;
}
dialog[open]::backdrop {opacity:1;transition-duration:var(--duration-fast)}
@starting-style {
  dialog[open] {opacity:0;transform:scale(var(--scale-large))}
  dialog[open]::backdrop {opacity:0}
}
@media(prefers-reduced-motion:reduce) {
  .theme-toggle, [data-motion-control], [data-motion-tabs]::before, dialog, dialog::backdrop {
    transition:none!important;animation:none!important;
  }
  dialog[open] {transform:none}
}