/**
 * DS4K Play Skin — Stage 1 visual language for all worksheets
 * Include after workbook.css / module styles.css
 */
:root {
  --play-coral: #ff6b4a;
  --play-ink: #1a2b49;
  --play-glow: rgba(255, 186, 120, 0.22);
}

/* Warm layered backdrop (additive; keeps subject --bg) */
body.ds4k-play {
  background:
    radial-gradient(ellipse 80% 50% at 50% -8%, rgba(255, 214, 120, 0.42), transparent 55%),
    radial-gradient(circle at 8% 18%, rgba(255, 160, 122, 0.22), transparent 36%),
    radial-gradient(circle at 92% 14%, rgba(125, 211, 252, 0.28), transparent 38%),
    radial-gradient(circle at 50% 100%, rgba(74, 222, 128, 0.18), transparent 42%),
    radial-gradient(ellipse 70% 45% at 15% -5%, var(--bg-glow-1, #cdeee0) 0%, transparent 60%),
    radial-gradient(ellipse 55% 40% at 95% 5%, var(--bg-glow-2, #d8f0fa) 0%, transparent 55%),
    var(--bg, #dff3ec) !important;
}

/* Floating décor */
.ds4k-decor {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.ds4k-decor span {
  position: absolute;
  font-size: clamp(1.25rem, 3.5vw, 2rem);
  opacity: 0.48;
  animation: ds4k-drift 9.5s ease-in-out infinite;
  filter: drop-shadow(0 6px 10px rgba(26, 43, 73, 0.12));
}

.ds4k-decor span:nth-child(1) { left: 4%; top: 12%; animation-delay: 0s; }
.ds4k-decor span:nth-child(2) { left: 88%; top: 16%; animation-delay: -2s; }
.ds4k-decor span:nth-child(3) { left: 10%; top: 74%; animation-delay: -3.5s; }
.ds4k-decor span:nth-child(4) { left: 80%; top: 70%; animation-delay: -1.2s; }
.ds4k-decor span:nth-child(5) { left: 48%; top: 6%; animation-delay: -4.5s; font-size: 1.4rem; }
.ds4k-decor span:nth-child(6) { left: 62%; top: 84%; animation-delay: -5.5s; }

.app,
.s1-wrap,
.s2-wrap,
.s3-wrap,
.s4-wrap {
  position: relative;
  z-index: 1;
}

/* Hero / badge punch */
body.ds4k-play .hero {
  box-shadow:
    0 14px 36px rgba(26, 43, 73, 0.1),
    0 0 0 5px var(--play-glow) !important;
  border: 3px solid #fff !important;
}

body.ds4k-play .hero-kicker {
  background: linear-gradient(135deg, #fff7ed, #ffedd5) !important;
  border: 2px solid #fb923c !important;
  color: #c2410c !important;
  border-radius: 999px;
  padding: 6px 12px;
  display: inline-block;
}

body.ds4k-play .chip {
  box-shadow: 0 6px 14px rgba(26, 43, 73, 0.08);
  border-width: 2px !important;
  transition: transform 0.15s ease;
}

body.ds4k-play .chip:hover {
  transform: translateY(-2px);
}

/* Cards / problems */
body.ds4k-play .site-nav,
body.ds4k-play .card,
body.ds4k-play .problem-card,
body.ds4k-play .work-card,
body.ds4k-play .quiz-card,
body.ds4k-play .set-card,
body.ds4k-play .unit-card,
body.ds4k-play .filter-bar,
body.ds4k-play .filters {
  box-shadow:
    0 12px 32px rgba(26, 43, 73, 0.1),
    0 0 0 4px rgba(255, 255, 255, 0.7) !important;
}

body.ds4k-play .btn-primary,
body.ds4k-play .btn-start,
body.ds4k-play .cta-btn {
  box-shadow: 0 10px 24px rgba(255, 107, 74, 0.28) !important;
}

/* Soft entrance for interactive tiles */
body.ds4k-play .set-card,
body.ds4k-play .unit-card,
body.ds4k-play .choice-btn,
body.ds4k-play .mc-btn,
body.ds4k-play .option-btn {
  animation: ds4k-item-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

body.ds4k-play .set-card:nth-child(1),
body.ds4k-play .unit-card:nth-child(1) { animation-delay: 0.02s; }
body.ds4k-play .set-card:nth-child(2),
body.ds4k-play .unit-card:nth-child(2) { animation-delay: 0.05s; }
body.ds4k-play .set-card:nth-child(3),
body.ds4k-play .unit-card:nth-child(3) { animation-delay: 0.08s; }
body.ds4k-play .set-card:nth-child(4),
body.ds4k-play .unit-card:nth-child(4) { animation-delay: 0.11s; }

@keyframes ds4k-drift {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-14px) rotate(7deg); }
}

@keyframes ds4k-item-pop {
  from { opacity: 0; transform: scale(0.92) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ds4k-decor span,
  body.ds4k-play .set-card,
  body.ds4k-play .unit-card,
  body.ds4k-play .choice-btn,
  body.ds4k-play .mc-btn,
  body.ds4k-play .option-btn {
    animation: none !important;
  }
}

@media print {
  .ds4k-decor { display: none !important; }
  body.ds4k-play {
    background: #fff !important;
  }
}