/* ═══════════════════════════════════════════════════════════
   DO ANYTHING — do-anything.css
   @layer: reset → tokens → base → layout → components → animations → utilities
   ═══════════════════════════════════════════════════════════ */
@layer reset, tokens, base, layout, components, animations, utilities;

/* ── TOKENS ──────────────────────────────────────────────── */
@layer tokens {
  :root {
    /* Rainbow palette — all 10 used for random picks */
    --c1:  #FF1744;
    --c2:  #FF6D00;
    --c3:  #FFD600;
    --c4:  #00E676;
    --c5:  #2979FF;
    --c6:  #D500F9;
    --c7:  #FF4081;
    --c8:  #00E5FF;
    --c9:  #AEEA00;
    --c10: #FF6F00;

    /* UI chrome */
    --ui-bg:     rgba(255,255,255,0.90);
    --ui-border: rgba(0,0,0,0.10);
    --ui-shadow: 0 4px 20px rgba(0,0,0,0.18);

    /* Typography */
    --font-display: 'Fredoka One', 'Arial Rounded MT Bold', Arial, sans-serif;
    --font-letter:  'Fredoka One', 'Arial Rounded MT Bold', Arial, sans-serif;

    /* Sizing */
    --back-size:    60px;
    --letter-size:  clamp(5rem, 18vw, 10rem);
    --ripple-max:   280px;
    --emoji-size:   clamp(3rem, 12vw, 7rem);

    /* Easing */
    --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
    --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Z layers */
    --z-bg:       0;
    --z-particles:10;
    --z-ui:       20;
    --z-skip:    999;
  }
}

/* ── RESET ───────────────────────────────────────────────── */
@layer reset {
  *, *::before, *::after {
    margin: 0; padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
  }
  html, body {
    width: 100%; height: 100%;
    overflow: hidden;
    -webkit-text-size-adjust: 100%;
  }
  button, a { font: inherit; cursor: pointer; -webkit-appearance: none; }
}

/* ── BASE ────────────────────────────────────────────────── */
@layer base {
  body {
    font-family: var(--font-display);
    /* Soft animated gradient background — calm enough not to compete */
    background: linear-gradient(135deg, #e0f7ff 0%, #fff9e6 50%, #ffe0f0 100%);
    background-size: 400% 400%;
    animation: bgShift 12s ease-in-out infinite;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    overflow: hidden;
  }

  :focus-visible {
    outline: 4px solid var(--c3);
    outline-offset: 4px;
    border-radius: 12px;
  }
}

/* ── LAYOUT ──────────────────────────────────────────────── */
@layer layout {

  .playground {
    position: fixed;
    inset: 0;
    z-index: var(--z-bg);
    cursor: crosshair;
    /* Ensure it can receive keyboard focus */
    outline: none;
  }

  .particle-layer {
    position: fixed;
    inset: 0;
    z-index: var(--z-particles);
    pointer-events: none;
    overflow: hidden;
  }

  /* Back button — top left, always visible */
  .back-btn {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: var(--z-ui);
    width:  var(--back-size);
    height: var(--back-size);
    border-radius: 50%;
    background: var(--ui-bg);
    border: 3px solid var(--ui-border);
    box-shadow: var(--ui-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #333;
    text-decoration: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 120ms var(--ease-bounce);
  }
  .back-btn:hover  { transform: scale(1.12); }
  .back-btn:active { transform: scale(0.88); }

  /* Fullscreen button — top right */
  .fullscreen-btn {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: var(--z-ui);
    width:  var(--back-size);
    height: var(--back-size);
    border-radius: 50%;
    background: var(--ui-bg);
    border: 3px solid var(--ui-border);
    box-shadow: var(--ui-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #333;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 120ms var(--ease-bounce);
  }
  .fullscreen-btn:hover  { transform: scale(1.12); }
  .fullscreen-btn:active { transform: scale(0.88); }

  /* In fullscreen — hide both nav buttons so toddler can't escape.
     Triple-ESC is the only exit. */
  :fullscreen .back-btn,
  :-webkit-full-screen .back-btn,
  :fullscreen .fullscreen-btn,
  :-webkit-full-screen .fullscreen-btn {
    display: none;
  }

  /* ESC hint toast — bottom centre */
  .esc-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    z-index: var(--z-ui);
    background: rgba(20, 20, 30, 0.88);
    color: #fff;
    font-size: 1.4rem;
    padding: 10px 28px;
    border-radius: 40px;
    border: 2px solid rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    pointer-events: none;
    opacity: 0;
    transition: opacity 200ms ease, transform 200ms var(--ease-bounce);
  }
  .esc-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  .esc-dots {
    letter-spacing: 6px;
    font-size: 1.3rem;
  }

/* ── COMPONENTS ──────────────────────────────────────────── */
@layer components {

  /* ── Skip link */
  .skip-link {
    position: fixed; top: -200%; left: 16px;
    z-index: var(--z-skip);
    background: var(--c3); color: #111; font-weight: 800;
    padding: 8px 20px; border-radius: 40px; border: 3px solid #111;
    transition: top 100ms;
  }
  .skip-link:focus { top: 16px; }

  /* ── Idle hint — wiggles to invite interaction */
  .idle-hint {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: calc(var(--z-particles) - 1);
    opacity: 0;
    transition: opacity 600ms ease;
  }
  .idle-hint.visible { opacity: 1; }

  .idle-hand {
    font-size: clamp(5rem, 20vw, 10rem);
    display: block;
    animation: idleBounce 1.4s ease-in-out infinite;
    filter: drop-shadow(0 8px 24px rgba(0,0,0,0.15));
  }

  /* ── Letter burst — typed character flying up ── */
  .letter-burst {
    position: fixed;
    font-family: var(--font-letter);
    font-size: var(--letter-size);
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
    z-index: var(--z-particles);
    /* colour set by JS via inline style */
    /* position set by JS */
    text-shadow:
      4px 4px 0 rgba(0,0,0,0.12),
      0 0 40px currentColor;
    animation: letterFly 1.2s var(--ease-out) forwards;
    transform-origin: center bottom;
  }

  /* ── Tap burst — emoji explosion on touch/click ── */
  .tap-burst {
    position: fixed;
    font-size: var(--emoji-size);
    pointer-events: none;
    z-index: var(--z-particles);
    transform: translate(-50%, -50%) scale(0);
    animation: tapPop 0.7s var(--ease-bounce) forwards;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.20));
  }

  /* ── Ripple ring on touch ── */
  .ripple {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: calc(var(--z-particles) - 1);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.7;
    /* width/height/border-color set by JS */
    animation: rippleOut 0.8s var(--ease-out) forwards;
  }

  /* ── Firework particle ── */
  .firework {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: var(--z-particles);
    /* size/color/position set by JS; --tx --ty for direction */
    animation: fireworkFly 0.8s var(--ease-out) forwards;
    opacity: 0;
  }

  /* ── Screen flash on Enter ── */
  .screen-flash {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: calc(var(--z-ui) - 1);
    opacity: 0;
    animation: screenFlash 0.5s var(--ease-out) forwards;
  }

  /* ── Confetti piece ── */
  .confetti-piece {
    position: fixed;
    top: -30px;
    pointer-events: none;
    z-index: var(--z-particles);
    opacity: 0;
    border-radius: 3px;
    animation: confettiFall var(--cf-dur, 2.5s) var(--cf-delay, 0s) ease-in forwards;
  }
  .confetti-piece.circle  { border-radius: 50%; }
  .confetti-piece.diamond { border-radius: 2px; transform: rotate(45deg); }

  /* ── Squiggle trail on drag ── */
  .trail-dot {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: calc(var(--z-particles) - 1);
    transform: translate(-50%, -50%) scale(0);
    animation: trailFade 0.6s var(--ease-out) forwards;
  }
}

/* ── ANIMATIONS ──────────────────────────────────────────── */
@layer animations {

  /* Background slow colour shift */
  @keyframes bgShift {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
  }

  /* Idle hand bounce */
  @keyframes idleBounce {
    0%, 100% { transform: translateY(0)    rotate(-10deg) scale(1.0); }
    25%       { transform: translateY(-20px) rotate(10deg)  scale(1.05); }
    75%       { transform: translateY(8px)  rotate(-5deg)  scale(0.97); }
  }

  /* Letter flies up from bottom and fades out */
  @keyframes letterFly {
    0%   { opacity: 1;   transform: translateY(0)     scale(0.4) rotate(var(--rot, -5deg)); }
    15%  { opacity: 1;   transform: translateY(-30px)  scale(1.2) rotate(calc(var(--rot, -5deg) * -1)); }
    60%  { opacity: 1;   transform: translateY(-120px) scale(1.0) rotate(var(--rot, -5deg)); }
    100% { opacity: 0;   transform: translateY(-320px) scale(0.7) rotate(0deg); }
  }

  /* Tap emoji pops in and fades */
  @keyframes tapPop {
    0%   { transform: translate(-50%, -50%) scale(0)   rotate(-15deg); opacity: 0; }
    30%  { transform: translate(-50%, -50%) scale(1.35) rotate(8deg);  opacity: 1; }
    60%  { transform: translate(-50%, -50%) scale(0.95) rotate(-3deg); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.7)  rotate(0deg);  opacity: 0; }
  }

  /* Ripple expands outward */
  @keyframes rippleOut {
    0%   { transform: translate(-50%, -50%) scale(0);   opacity: 0.75; }
    100% { transform: translate(-50%, -50%) scale(1);   opacity: 0; }
  }

  /* Firework particle shoots outward */
  @keyframes fireworkFly {
    0%   { opacity: 1; transform: translate(0, 0) scale(1); }
    70%  { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(0.2); }
  }

  /* Screen flash */
  @keyframes screenFlash {
    0%   { opacity: 0.55; }
    100% { opacity: 0; }
  }

  /* Confetti falls */
  @keyframes confettiFall {
    0%   { opacity: 1; transform: translateY(0)    rotate(0deg)             scale(1); }
    70%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(calc(100vh + 50px)) rotate(var(--cf-spin, 480deg)) scale(0.5); }
  }

  /* Trail dot appears and fades */
  @keyframes trailFade {
    0%   { transform: translate(-50%, -50%) scale(0);   opacity: 0.9; }
    30%  { transform: translate(-50%, -50%) scale(1);   opacity: 0.7; }
    100% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

/* ── UTILITIES ───────────────────────────────────────────── */
@layer utilities {
  .sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
}