/* Piper — "Stage Light" theme. K-pop concert poster meets storybook. */

[data-theme="piper"] {
  --bg: #2d1b4e;
  --surface: #382560;
  --surface-2: #432b73;
  --reading-surface: #fff6ec;

  --ink: #fff6ec;
  --ink-2: #d4c9e8;
  --ink-3: #9b8bbd;
  --ink-on-reading: #1a0e2e;

  --accent: #ff3d9a;       /* hot magenta */
  --accent-2: #00e5ff;     /* electric cyan */
  --accent-3: #ffd166;     /* warm star-yellow */

  --border: rgba(255, 246, 236, 0.10);
  --border-strong: rgba(255, 246, 236, 0.25);

  --font-display: "Fraunces", "Playfair Display", Georgia, serif;
  --font-body: "Atkinson Hyperlegible", "Verdana", system-ui, sans-serif;
  --font-num: "Atkinson Hyperlegible", ui-monospace, monospace;

  /* Larger body size for emerging reader */
  --body-size: 20px;
}

[data-theme="piper"] body {
  background:
    radial-gradient(800px 500px at 10% 0%, rgba(255,61,154,0.25), transparent 55%),
    radial-gradient(700px 600px at 100% 100%, rgba(0,229,255,0.18), transparent 60%),
    linear-gradient(180deg, #2d1b4e 0%, #1b1030 100%);
}

[data-theme="piper"] h1,
[data-theme="piper"] h2,
[data-theme="piper"] h3,
[data-theme="piper"] .kid-tile__name {
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-weight: 600;
  letter-spacing: -0.015em;
}

[data-theme="piper"] .picker__title em {
  color: var(--accent);
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Piper's tile */
.kid-tile--piper {
  background:
    radial-gradient(400px 300px at 80% 20%, rgba(0,229,255,0.30), transparent 60%),
    radial-gradient(500px 400px at 0% 100%, rgba(255,61,154,0.35), transparent 60%),
    linear-gradient(180deg, #3b2168 0%, #261540 100%);
  border-color: rgba(255, 61, 154, 0.45);
}
.kid-tile--piper::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(255,246,236,0.7), transparent 50%),
    radial-gradient(2px 2px at 70% 60%, rgba(0,229,255,0.8), transparent 50%),
    radial-gradient(2px 2px at 40% 80%, rgba(255,209,102,0.7), transparent 50%),
    radial-gradient(2px 2px at 85% 25%, rgba(255,61,154,0.8), transparent 50%);
  pointer-events: none;
  z-index: -1;
}
.kid-tile--piper .kid-tile__name {
  background: linear-gradient(90deg, #fff6ec 0%, #ff3d9a 60%, #00e5ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Piper task CTA — magenta-to-cyan gradient */
[data-theme="piper"] .task__cta {
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #1a0e2e;
}

/* Piper scoreboard */
[data-theme="piper"] .scoreboard {
  background: linear-gradient(180deg, rgba(255,246,236,0.06) 0%, rgba(255,246,236,0.02) 100%);
  border-color: rgba(255, 246, 236, 0.18);
}
[data-theme="piper"] .scoreboard__value { color: var(--accent); }
[data-theme="piper"] .scoreboard__cell:nth-child(2) .scoreboard__value { color: var(--accent-2); }
[data-theme="piper"] .scoreboard__cell:nth-child(3) .scoreboard__value { color: var(--accent-3); }

/* Sparkle hook for future TTS word-spotlight */
[data-theme="piper"] .spotlight {
  background: linear-gradient(180deg, transparent 60%, rgba(255,209,102,0.55) 60%);
  border-radius: 4px;
  padding: 0 2px;
}