/* Game Theme only. Palette: COMMON/roomplay-palettes.html / erotic-dice («Кубики», 18+).
   bg #301E28, surface #482F3B, accent #F0B9BA dusty rose (dark ink #17191F on it, 10.3:1),
   secondary #E7CCA6 champagne (dark ink 11.4:1), text #FFFFFF (15.7:1 on bg, 12.0:1 on surface).
   Muted text #D9C3CC: 9.4:1 on bg, 7.2:1 on surface. Rose as text on bg 9.2:1, champagne 10.1:1. */
:root {
  /* Answer and gender tones: COMMON/roomplay-palettes.html / erotic-dice (correct, wrong, male, female). */
  --rp-correct: #b1d7a5;
  --rp-correct-ink: #17191f;
  --rp-wrong: #fab8aa;
  --rp-wrong-ink: #17191f;
  --rp-male: #a3cffd;
  --rp-female: #f6b5cd;
  --bg-primary: #301e28;
  --bg-secondary: #482f3b;
  --bg-card: #482f3b;
  --text-primary: #ffffff;
  --text-secondary: #d9c3cc;
  --text-placeholder: #a98f9b;
  --accent-pink: #f0b9ba;
  --accent-pink-dark: #f0b9ba;
  --accent-purple: #f0b9ba;
  --accent-purple-dark: #f0b9ba;
  --accent-blue: #e7cca6;
  --accent-orange: #e7cca6;
  --accent-orange-dark: #e7cca6;
  --ed-ink: #17191f;
  --ed-rose: #f0b9ba;
  --ed-rose-deep: #d98f95;
  --ed-champagne: #e7cca6;
  --ed-champagne-deep: #c9a877;
  --ed-surface: #482f3b;
  --onboarding-accent: #f0b9ba;
  --onboarding-accent-dark: #f0b9ba;
  --onboarding-shadow: transparent;
  --onboarding-shadow-hover: transparent;
  --settings-accent: #f0b9ba;
  --settings-accent-dark: #f0b9ba;
  --packs-accent: #f0b9ba;
  --packs-feedback-rgb: 240, 185, 186;
  --ps-accent: #f0b9ba;
}
html, body, .page-loader { background: var(--bg-primary); }
.loader-spinner { border-color: rgba(255, 255, 255, .12); border-top-color: var(--ed-rose); }

/* Titles: solid rose instead of the old pink gradient text. */
.title { background: none; -webkit-text-fill-color: currentColor; color: var(--ed-rose); }

/* Actions: rose primary with dark ink, light outline secondary. */
.btn-next-slide,
.btn-roll { color: var(--ed-ink); background: var(--ed-rose); box-shadow: none; }
@media (hover: hover) {
  .btn-next-slide:hover,
  .btn-roll:hover { box-shadow: none; }
}
.btn-roll::after { background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); }
.btn-skip { color: #fff; border-color: rgba(255, 255, 255, .55); }
.dot { background: rgba(255, 255, 255, .22); }
.dot.active { background: var(--ed-rose); }
.slide-title { color: #fff; }
.slide-text { color: var(--text-secondary); }

/* Dice: rose action die, champagne body-part die, both with dark ink labels. */
.dice-label { color: var(--text-secondary); }
#dice-action .dice-face { color: var(--ed-ink); background: var(--ed-rose); border: 2px solid var(--ed-rose-deep); box-shadow: inset 0 -6px 0 rgba(217, 143, 149, .55); }
#dice-body .dice-face { color: var(--ed-ink); background: var(--ed-champagne); border: 2px solid var(--ed-champagne-deep); box-shadow: inset 0 -6px 0 rgba(201, 168, 119, .55); }
.dice-scene.glow-pink { filter: drop-shadow(0 0 18px rgba(240, 185, 186, .55)); }
.dice-scene.glow-purple { filter: drop-shadow(0 0 18px rgba(231, 204, 166, .55)); }

/* Result card on the surface. */
.result-card { background: var(--ed-surface); border: 1px solid rgba(240, 185, 186, .28); box-shadow: none; }
.result-action { background: none; -webkit-text-fill-color: currentColor; color: var(--ed-rose); }
.result-body { color: var(--ed-champagne); }
.hint-text { color: var(--text-secondary); }

/* Onboarding: animated flat SVG characters (static copies via <picture> for reduced motion). */
#onboarding-screen .slide-icon { width: min(240px, 55vw); margin-bottom: 18px; font-size: 0; line-height: 0; animation: none; }
#onboarding-screen .slide-icon picture,
#onboarding-screen .slide-icon img { display: block; width: 100%; height: auto; }
@media (max-height: 600px) {
  #onboarding-screen .slide-icon { width: 120px; margin-bottom: 8px; }
}

/* Light motion, same rhythm as «Я никогда не» (cutout-theme.css). Decorative only; off under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  :root { --ed-press: 100ms; --ed-settle: 240ms; --ed-spring: cubic-bezier(.2, .9, .3, 1.25); }
  button:not(:disabled) {
    transition: scale var(--ed-settle) var(--ed-spring), translate var(--ed-settle) var(--ed-spring),
      background-color 150ms ease, border-color 150ms ease, color 150ms ease, opacity 300ms ease;
  }
  button:not(:disabled):active { scale: .96; translate: 0 2px; transition-duration: var(--ed-press); }
  .btn-back:active { scale: .88; }
  .dot { transition: background-color 180ms ease, width 300ms ease, scale 180ms var(--ed-spring); }
  .dot.active { scale: 1.12; }
  #onboarding-screen .onboarding-slide.active .slide-icon { animation: ed-character-arrive 380ms var(--ed-spring) both; }

  /* Game screen: dice land one after the other, the result card stamps in after a roll. */
  #game-screen.active .title { animation: ed-stamp-in 360ms var(--ed-spring) both; }
  #game-screen.active .dice-wrapper { animation: ed-paper-arrive 280ms var(--ed-spring) both; }
  #game-screen.active .dice-wrapper:nth-child(2) { animation-delay: 80ms; }
  .result-card.visible .result-action { animation: ed-stamp-in 360ms var(--ed-spring) both; }
  .result-card.visible .result-body { animation: ed-paper-arrive 280ms var(--ed-spring) 80ms both; }
  .btn-roll.rolling { scale: .98; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-roll::after { animation: none; }
  .particles { display: none; }
}
@keyframes ed-character-arrive { from { opacity: 0; scale: .82; rotate: -10deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes ed-paper-arrive { from { opacity: 0; translate: 0 12px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes ed-stamp-in { from { opacity: 0; scale: 1.3; } to { opacity: 1; scale: 1; } }