/* Kidoville design tokens + reset. Self-hosted fonts: no third-party requests. */
@font-face { font-family: "Fredoka"; src: url("/fonts/fredoka-latin-wght-normal.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/fonts/nunito-latin-wght-normal.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }

:root {
  --bg: #0b0a24; --bg2: #14133a; --surface: #1a1948; --surface2: #23225c; --surface3: #2d2c70;
  --line: rgba(255, 255, 255, .09); --line2: rgba(255, 255, 255, .16);
  --ink: #f5f5ff; --muted: #a9aadf; --faint: #7c7dc2;
  --coral: #ff5d73; --sun: #ffc933; --mint: #2be3b0; --sky: #38b6ff; --grape: #8b5cf6; --pink: #ff7bd5; --orange: #ff8a3d;
  --r-sm: 12px; --r: 20px; --r-lg: 28px; --r-xl: 38px;
  --font: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Fredoka", "Nunito", ui-rounded, system-ui, sans-serif;
  --shadow: 0 18px 50px rgba(4, 3, 28, .55);
  --topbar-h: 68px; --tabbar-h: 66px;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --ease: cubic-bezier(.2, .8, .2, 1); --spring: cubic-bezier(.2, 1.5, .4, 1);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100dvh; color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(900px 600px at 8% -8%, rgba(139, 92, 246, .30), transparent 60%),
    radial-gradient(800px 560px at 100% 0%, rgba(255, 93, 115, .16), transparent 55%),
    radial-gradient(700px 500px at 50% 110%, rgba(56, 182, 255, .12), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  overflow-x: hidden;
}
body.in-game { position: fixed; inset: 0; width: 100%; overflow: hidden; overscroll-behavior: none; touch-action: none; }
h1, h2, h3, h4 { font-family: var(--display); margin: 0; line-height: 1.1; letter-spacing: .005em; font-weight: 600; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; border-radius: 10px; }
::selection { background: var(--grape); color: #fff; }
.hidden { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.row { display: flex; align-items: center; gap: 10px; }
.spacer { flex: 1; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }