/* ============================================================
   Called Out! — design tokens ("Purple Play", Direction A)
   Source of truth: design_handoff/CLAUDE.md + *.dc.html prototypes.
   Values are lifted verbatim from the prototypes — do not invent.

   Brand rules that shape everything below:
   - Purple is the world (backgrounds/chrome); candy colors are the
     toys, used sparingly as pops.
   - NEVER thin lines/stripes — always round and soft (big blurred
     radial glow spots, generous radii).
   - Fredoka 700 for display, Nunito for body/UI. White chunky
     titles, hard offset text-shadow.
   - No emoji in UI (players' chosen avatars are the only exception).

   Fonts — every page that uses these tokens should load:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700;800;900&display=swap" rel="stylesheet">
   ============================================================ */

:root {
  /* ---- Purple world ---- */
  --dd-purple-deep: #2E1A55;
  --dd-purple-brand: #7B5BFF;
  --dd-purple-light: #B9A3FF;
  --dd-hero-dark: #3A1D6E;      /* hero darks / room-code pill text */
  --dd-hero-glow: #4A2585;      /* top radial glow color */

  /* Stage gradient stack (page backgrounds):
     radial-gradient(1000px 620px at 50% -220px, var(--dd-hero-glow) …, transparent)
     over linear-gradient(180deg, --dd-stage-1, --dd-stage-2 ~40%, --dd-stage-3) */
  --dd-stage-1: #2A1650;        /* also the mascot-loop.mp4 flat bg (keyer relies on it) */
  --dd-stage-2: #1E0E3E;
  --dd-stage-3: #1B0C38;
  --dd-footer-dark: #160A2E;

  /* ---- Candy pops (the toys — use sparingly) ---- */
  --dd-pink: #FF4D9D;
  --dd-pink-soft: #ff7ab8;      /* gradient top of pink vinyl buttons */
  --dd-pink-tint: #FFB3D4;      /* 18+ pill text */
  --dd-cyan: #34C6FF;
  --dd-mint: #25E0A4;
  --dd-yellow: #FFD23F;
  --dd-red: #ff5a5a;            /* Disagree / Kill accents */
  --dd-red-deep: #e02626;       /* Cancelled dot */
  --dd-lineup-never: #b98cff;   /* "I'd never" bucket */

  /* ---- Text tints ---- */
  --dd-text: #ffffff;
  --dd-text-soft: #D9CBFF;      /* body copy on purple */
  --dd-text-link: #C9B8FF;      /* quiet links ("Back to home") */
  --dd-text-strong: #EADFFF;    /* <strong> highlights in body copy */
  --dd-text-dim: #9d8ecb;       /* date lines, secondary meta */
  --dd-text-fine: #8f7fbf;      /* fine print */
  --dd-text-kicker: #B9A3FF;    /* uppercase section kickers */
  --dd-text-copyright: #6a5f96;

  /* ---- Fonts ---- */
  --dd-font-display: 'Fredoka', sans-serif;
  --dd-font-body: 'Nunito', sans-serif;

  /* ---- Surfaces (soft, never hairline-thin) ---- */
  --dd-card-bg: rgba(255,255,255,.045);
  --dd-card-bg-soft: rgba(255,255,255,.035);
  --dd-card-border: 1.5px solid rgba(255,255,255,.1);
  --dd-divider: 1px solid rgba(255,255,255,.09); /* section separators only */
  --dd-overlay: rgba(18,7,38,.9);                /* modal backdrop (+ blur(7px)) */
  --dd-radius-modal: 32px;
  --dd-radius-card: 26px;
  --dd-radius-tile: 20px;
  --dd-radius-pill: 999px;

  /* ---- Shadows / glows ---- */
  --dd-shadow-card: 0 20px 40px -22px rgba(10,2,30,.8);
  --dd-shadow-mascot: 0 4px 6px rgba(20,5,50,.5);
  --dd-shadow-float: 0 14px 16px rgba(20,5,50,.5);
  --dd-title-shadow: 0 4px 0 rgba(0,0,0,.2);     /* hard offset, chunky titles */
  --dd-title-shadow-sm: 0 3px 0 rgba(0,0,0,.16);

  /* ---- Motion (springy, squishy — moderate ~4/10) ---- */
  --dd-ease-spring: cubic-bezier(.34,1.58,.6,1); /* entrance reveals */
  --dd-ease-wobble: cubic-bezier(.28,.72,.28,1); /* press squash */
  --dd-ease-cta: cubic-bezier(.34,1.7,.5,1);     /* CTA hover/active */
  --dd-ease-screen: cubic-bezier(.34,1.4,.6,1);  /* mobile screen slide-in */
}

::selection { background: var(--dd-pink); color: #fff; }

/* ============================================================
   Keyframes — lifted verbatim from the prototypes.
   Where surfaces genuinely differ, variants get suffixed names;
   micro-drift (±1px dot bounce) is standardized on the TV values.
   ============================================================ */

/* Press feedback: squash-and-stretch on anything clickable.
   Apply by re-triggering the .dd-wobble class (remove → reflow → add). */
@keyframes ddwobble {
  0%   { transform: scale(1); }
  16%  { transform: scale(.86,.82); }
  38%  { transform: scale(1.1,1.06) rotate(-1.4deg); }
  58%  { transform: scale(.96,.985) rotate(.9deg); }
  76%  { transform: scale(1.035,1.015) rotate(-.4deg); }
  90%  { transform: scale(.99,1) rotate(.15deg); }
  100% { transform: scale(1); }
}
.dd-wobble { animation: ddwobble .56s var(--dd-ease-wobble); }

/* Pop-in: entering chips / the reveal bubble when the gate opens. */
@keyframes ddpop {
  0%   { transform: scale(.4);  opacity: 0; }
  68%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}
/* Softer mobile variant (lock-in check discs). */
@keyframes ddpop-soft {
  0%   { transform: scale(.7);  opacity: 0; }
  60%  { transform: scale(1.08); }
  100% { transform: scale(1);   opacity: 1; }
}

/* Idle float — per-surface amplitudes preserved. */
@keyframes ddfloat {          /* base (mobile/suggest): gentle bob */
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-9px); }
}
@keyframes ddfloat-tv {       /* Host TV capsules: bob + slight tilt */
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-8px) rotate(.8deg); }
}
@keyframes ddfloat-lobby {    /* Host Lobby: deeper bob */
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-10px); }
}
@keyframes ddfloat-hero {     /* Landing hero mascot: big lazy sway */
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50%     { transform: translateY(-16px) rotate(1deg); }
}

/* Ambient glow blobs (the soft round glows that replace all lines). */
@keyframes ddglow {
  0%,100% { opacity: .6;  transform: scale(1); }
  50%     { opacity: .95; transform: scale(1.08); }
}

/* Waiting-state bouncing dots (stagger delays 0 / .18s / .36s). */
@keyframes ddwaitdot {
  0%,80%,100% { transform: translateY(0);    opacity: .5; }
  40%         { transform: translateY(-8px); opacity: 1; }
}

/* Pulsing green "live" dot next to the room code. */
@keyframes ddlivedot {
  0%,100% { opacity: 1;  transform: scale(1); }
  50%     { opacity: .4; transform: scale(.8); }
}

/* Mobile: avatar idle micro-motion (join preview). */
@keyframes ddavataridle {
  0%,100% { transform: translateY(0)    scale(1,1)        rotate(0deg); }
  24%     { transform: translateY(-3px) scale(1.025,.975) rotate(-1.6deg); }
  52%     { transform: translateY(1px)  scale(.98,1.02)   rotate(1.3deg); }
  78%     { transform: translateY(-1px) scale(1.012,.988) rotate(-.6deg); }
}

/* Mobile: screen entrance slide. */
@keyframes ddscreenin {
  0%   { transform: translateY(12px) scale(.98); }
  100% { transform: none; }
}

/* Mobile: drag-clone idle wiggle while a pill follows the finger. */
@keyframes ddwiggle {
  0%,100% { transform: rotate(-4.5deg) scale(1.015); }
  50%     { transform: rotate(4.5deg)  scale(1.045); }
}

/* Generic spinner. */
@keyframes ddspin { to { transform: rotate(360deg); } }

/* Lobby: empty "Waiting…" roster slot pulse. */
@keyframes ddslotpulse {
  0%,100% { opacity: .5; }
  50%     { opacity: .9; }
}

/* Landing: decorative glow-blob bobbing (two phases). */
@keyframes ddbobA {
  0%,100% { transform: translateY(0)     rotate(-6deg); }
  50%     { transform: translateY(-22px) rotate(6deg); }
}
@keyframes ddbobB {
  0%,100% { transform: translateY(0)     rotate(8deg); }
  50%     { transform: translateY(-18px) rotate(-4deg); }
}

/* ============================================================
   Motion accessibility — prototypes skip entrance reveals under
   reduced motion; extend the courtesy to all decorative loops.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .dd-wobble { animation: none; }
}