/* Shared by every kids game: the child lock, its grown-up check, no selectable text, calm motion only.
   Each game keeps its own look in its own style.css. Rules: docs/22-kids-games.md in RightPlace. */
@font-face {
  font-family: 'Fredoka';
  font-weight: 300 700;
  font-display: swap;
  src: url(fredoka.woff2) format('woff2');
}

/* No game text selects or highlights, taps don't flash, pictures don't drag. */
html, body, body * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
input, textarea { -webkit-user-select: text; user-select: text; }
img, svg, a { -webkit-user-drag: none; }
[hidden] { display: none !important; }

/* Child lock: locked hides every way out the game marks. */
body.locked [data-unlocked-only] { display: none !important; }
/* Links to the own site's pages for grown-ups hide inside RightPlace's frame (kit.js adds html.framed). */
.framed [data-own-site] { display: none !important; }
.lock-btn { position: relative; touch-action: none; }
.lock-btn[aria-pressed='true'] { background: #fde7b0; }
.lock-btn .hold-ring { position: absolute; inset: -6px; border-radius: 20px; border: 4px solid transparent; pointer-events: none; }
/* Holding to unlock: the ring fills slowly over the 3 seconds (one smooth change, no flashing). */
.lock-btn.holding .hold-ring { border-color: #3fa34d; transition: border-color 3s linear; }

.kid-dialog { position: fixed; inset: 0; z-index: 60; background: #2b201699; display: grid; place-items: center; padding: 16px; }
.kid-dialog .card {
  width: min(440px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: #fffdf7; color: #3b2a1a;
  border: 3px solid #3b2a1a; border-radius: 22px; padding: 22px; display: grid; gap: 12px; font: 500 18px/1.4 'Fredoka', system-ui, sans-serif;
}
.kid-dialog h2 { margin: 0; font-size: 26px; }
.kid-dialog p, .kid-dialog ol { margin: 0; }
.kid-dialog ol { padding-left: 22px; display: grid; gap: 6px; }
.kid-dialog button { min-height: 56px; border: 3px solid #3b2a1a; border-radius: 16px; background: #fffdf7; font: 700 20px 'Fredoka', sans-serif; color: #3b2a1a; cursor: pointer; }
.kid-dialog .ok { background: #3fa34d; color: #fff; }
.sum-opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sum-opts button { font-size: 26px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}