/* ============================================================================
   Baby Keyboard Game — styles
   A full-bleed, mash-proof playfield with big bouncy emoji, ripples, confetti,
   a shifting rainbow backdrop, and a toddler-proof settings panel.
   ========================================================================== */

:root {
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial,
    "Hind Siliguri", "Noto Sans Bengali", "Kohinoor Bangla", "Bangla Sangam MN", "Nirmala UI", sans-serif;
  /* Emoji rendered as system glyphs use this stack as a fallback before Twemoji. */
  --emoji-font: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
  --accent: #7c4dff;
  --accent-dark: #5b2bd6;
  --ink: #2b2240;
  --card-bg: rgba(255, 255, 255, 0.96);
}

/* ---- Reset / global lockdown ------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  /* Lock the page: no scroll, no rubber-band, no pull-to-refresh, no zoom gaps. */
  position: fixed;
  inset: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  /* Stop a toddler selecting text or triggering the iOS long-press callout. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font);
  color: var(--ink);
  background: #1b1030;
}

body { cursor: default; }
/* In play mode the cursor is hidden so taps don't reveal a clickable pointer. */
body.playing { cursor: none; }

/* ---- The animated rainbow stage -------------------------------------------- */
#stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  /* Soft, saturated (not neon) gradient that slowly drifts through the rainbow. */
  background: linear-gradient(
    135deg,
    #ff9aa2, #ffb7b2, #ffdac1, #e2f0cb, #b5ead7, #c7ceea, #f8b8e6, #ff9aa2
  );
  background-size: 400% 400%;
  animation: drift 30s ease infinite;
}

@keyframes drift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

#fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none; /* Spawned items never intercept the next press. */
}

/* ---- Full-screen colour flash on each press -------------------------------- */
#flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
  background: #fff;
}

/* ============================================================================
   Spawned items (the big emoji / animal)
   ========================================================================== */
.item {
  position: absolute;
  /* Centred on its (left, top) anchor point. */
  transform: translate(-50%, -50%);
  font-family: var(--emoji-font);
  /* HUGE: roughly a third of the screen, clamped for tiny and giant displays. */
  font-size: clamp(110px, 34vmin, 420px);
  line-height: 1;
  user-select: none;
  will-change: transform, opacity;
  /* Pop in with spring overshoot, give a little wiggle, then fade away. */
  animation:
    pop-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both,
    wiggle 0.6s ease-in-out 0.55s 1,
    fade-out 0.6s ease-in 2.3s forwards;
}

/* Twemoji swaps the glyph for an <img>; size it to match the font. */
.item img.emoji {
  height: 1em;
  width: 1em;
  margin: 0;
  vertical-align: -0.1em;
  display: block;
  /* A friendly drop shadow so light emoji pop against light backgrounds. */
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.25));
}
/* Same shadow for the native-glyph fallback (when Twemoji is unavailable). */
.item:not(:has(img.emoji)) {
  text-shadow: 0 8px 14px rgba(0, 0, 0, 0.25);
}

@keyframes pop-in {
  0%   { transform: translate(-50%, -50%) scale(0)    rotate(-18deg); opacity: 0; }
  60%  { transform: translate(-50%, -50%) scale(1.25) rotate(8deg);  opacity: 1; }
  80%  { transform: translate(-50%, -50%) scale(0.92) rotate(-3deg); }
  100% { transform: translate(-50%, -50%) scale(1)    rotate(0deg);  opacity: 1; }
}

@keyframes wiggle {
  0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
  25%      { transform: translate(-50%, -50%) rotate(-5deg); }
  75%      { transform: translate(-50%, -50%) rotate(5deg); }
}

@keyframes fade-out {
  0%   { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.35); opacity: 0; }
}

/* ---- Ripple ring ----------------------------------------------------------- */
.ripple {
  position: absolute;
  width: 24vmin;
  height: 24vmin;
  margin: -12vmin 0 0 -12vmin; /* centre on anchor */
  border-radius: 50%;
  border: 0.8vmin solid rgba(255, 255, 255, 0.85);
  will-change: transform, opacity;
}

/* ---- CSS confetti fallback (used only if canvas-confetti is unavailable) ---- */
.particle {
  position: absolute;
  width: 1.4vmin;
  height: 1.4vmin;
  border-radius: 30%;
  will-change: transform, opacity;
}

/* ============================================================================
   Hold-to-open gear button
   ========================================================================== */
#gear {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: 56px;
  height: 56px;
  z-index: 30;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.15s ease, background 0.2s ease;
  touch-action: none;
}
#gear:hover { background: rgba(255, 255, 255, 0.55); }
#gear.holding { transform: scale(1.12); background: rgba(255, 255, 255, 0.7); }
/* Keep play mode pointer-free even when hovering the corner gear. */
body.playing #gear { cursor: none; }

.gear-ico {
  font-size: 26px;
  line-height: 1;
  font-family: var(--emoji-font);
}

/* Radial progress ring that fills during the 1.5s hold. */
.gear-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg); /* start the fill at 12 o'clock */
}
.gear-ring__track,
.gear-ring__fill {
  fill: none;
  stroke-width: 4;
}
.gear-ring__track { stroke: rgba(255, 255, 255, 0.4); }
.gear-ring__fill {
  stroke: var(--accent);
  stroke-linecap: round;
  /* 2 * PI * r(21) ≈ 131.95 — fully "empty" by default. */
  stroke-dasharray: 132;
  stroke-dashoffset: 132;
}
#gear.holding .gear-ring__fill {
  animation: gear-fill 1.5s linear forwards;
}
@keyframes gear-fill {
  to { stroke-dashoffset: 0; }
}

/* ============================================================================
   Overlays: welcome + settings
   ========================================================================== */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(circle at 50% 30%, rgba(124, 77, 255, 0.55), rgba(20, 12, 40, 0.82));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: overlay-in 0.25s ease both;
}
.overlay.hidden { display: none; }

@keyframes overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.card {
  width: min(440px, 100%);
  max-height: 100%;
  overflow: auto;
  background: var(--card-bg);
  border-radius: 28px;
  padding: 28px 26px 30px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  animation: card-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes card-pop {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.welcome-emojis {
  font-size: 40px;
  letter-spacing: 4px;
  margin-bottom: 6px;
  font-family: var(--emoji-font);
}
.card h1 {
  margin: 6px 0 4px;
  font-size: clamp(26px, 6vw, 34px);
  color: var(--accent-dark);
}
.card h2 {
  margin: 0 0 18px;
  font-size: 26px;
  color: var(--accent-dark);
}
.lead { margin: 0 0 22px; font-size: 18px; color: var(--ink); }
.hint {
  margin: 18px 0 0;
  font-size: 13px;
  color: #6b6280;
  line-height: 1.5;
}

/* ---- Buttons --------------------------------------------------------------- */
.btn {
  font: inherit;
  font-weight: 700;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn:active { transform: translateY(2px) scale(0.98); }

.btn--big {
  display: block;
  width: 100%;
  padding: 18px;
  margin: 0 auto 12px;
  font-size: 22px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), #b388ff);
  box-shadow: 0 10px 24px rgba(124, 77, 255, 0.45);
}
.btn--big:hover { box-shadow: 0 14px 30px rgba(124, 77, 255, 0.55); }

.btn--ghost {
  display: inline-block;
  padding: 12px 18px;
  font-size: 16px;
  color: var(--accent-dark);
  background: rgba(124, 77, 255, 0.1);
}
.btn--ghost:hover { background: rgba(124, 77, 255, 0.18); }

/* ---- Settings fields ------------------------------------------------------- */
.field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  text-align: left;
}
.field__label { font-size: 17px; font-weight: 600; }

/* A field whose control sits BELOW its label (used by the category grid). */
.field--stack { flex-direction: column; align-items: stretch; }
.field--stack .field__label { margin-bottom: 2px; }

.segmented {
  display: flex;
  gap: 6px;
  background: rgba(124, 77, 255, 0.1);
  padding: 5px;
  border-radius: 14px;
}

/* The category picker: many chips that wrap onto multiple rows. */
.segmented--wrap { flex-wrap: wrap; justify-content: center; gap: 7px; }
.segmented--wrap .seg { padding: 8px 12px; font-size: 14px; }
.seg {
  font: inherit;
  font-weight: 700;
  border: none;
  background: transparent;
  color: var(--accent-dark);
  padding: 9px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}
.seg[aria-checked="true"] {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 10px rgba(124, 77, 255, 0.4);
}

/* ---- On/off toggle switch -------------------------------------------------- */
.toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: #cfc7e6;
  border-radius: 999px;
  padding: 4px;
  width: 86px;
  height: 36px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.toggle[aria-checked="true"] { background: var(--accent); }
.toggle__knob {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 28px;
  height: 28px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.toggle[aria-checked="true"] .toggle__knob { transform: translateX(50px); }
.toggle__text {
  position: absolute;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  left: 12px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.toggle[aria-checked="true"] .toggle__text { opacity: 1; }
.toggle[aria-checked="false"] .toggle__text {
  opacity: 1;
  color: #6b6280;
  left: auto;
  right: 12px;
}

.settings-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}
.settings-actions .btn--big { margin-bottom: 0; flex: 1; }
.settings-actions .btn--ghost { flex-shrink: 0; }

/* ============================================================================
   Accessibility: respect reduced-motion. Keep the core pop, calm everything else.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  #stage { animation: none; }
  .item {
    animation:
      gentle-in 0.3s ease both,
      fade-out 0.5s ease-in 2.3s forwards;
  }
  .ripple { display: none; }
  @keyframes gentle-in {
    from { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
    to   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  }
  /* Calm the chrome too: no overlay/card/gear motion, no UI transitions. */
  .overlay,
  .card,
  #gear.holding .gear-ring__fill { animation: none; }
  .btn,
  .seg,
  .toggle,
  .toggle__knob,
  .toggle__text,
  #gear { transition: none; }
}