/* Shared styles for every game: full-screen, touch-first, no accidental zoom/scroll/selection. */
:root {
  --ink: #3a2e5c;
  --paper: #fff8e7;
  --shadow: 0 5px 0 rgba(0, 0, 0, .15);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --font: "Fredoka", ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", system-ui, sans-serif;
}

/* Fredoka (SIL Open Font License), bundled so it works offline. */
@font-face {
  font-family: "Fredoka";
  src: url(fonts/fredoka.woff2) format("woff2");
  font-weight: 300 700;
  font-display: block;
}

/* Twinkling sparkles used in Art.meadow() scenes. */
.twinkle { animation: kg-twinkle 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes kg-twinkle { 0%, 100% { opacity: .15; transform: scale(.5); } 50% { opacity: 1; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .twinkle { animation: none; } }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
  touch-action: none;
}

button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }


.confetti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
}

@keyframes kg-bounce {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.25); }
  70% { transform: scale(.92); }
}
@keyframes kg-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-10px); }
  40%, 80% { transform: translateX(10px); }
}