/* Game Theme only. Palette: COMMON/roomplay-palettes.html / yesno («Данетки»).
   bg #20251E, surface #30372A, accent #9ED332 (dark ink #17191F on it), secondary #52772D (card frame), text #FFFFFF.
   Premium (gold) and success/error meanings are unchanged. */
:root {
  /* Answer and gender tones: COMMON/roomplay-palettes.html / yesno (correct, wrong, male, female). */
  --rp-correct: #9ed231;
  --rp-correct-ink: #17191f;
  --rp-wrong: #fe9eaa;
  --rp-wrong-ink: #17191f;
  --rp-male: #8cc3fc;
  --rp-female: #fd9bc2;
  --bg-primary: #20251e;
  --bg-secondary: #30372a;
  --bg-card: #30372a;
  --text-primary: #ffffff;
  --text-secondary: #b9c4ae;
  --text-placeholder: #8c9682;
  --accent-pink: #9ed332;
  --accent-pink-dark: #9ed332;
  --accent-purple: #9ed332;
  --accent-purple-dark: #9ed332;
  --accent-blue: #52772d;
  --yn-ink: #17191f;
  --yn-lime: #9ed332;
  --yn-moss: #52772d;
  --yn-surface: #30372a;
  --onboarding-accent: #9ed332;
  --onboarding-accent-dark: #9ed332;
  --onboarding-shadow: transparent;
  --onboarding-shadow-hover: transparent;
  --settings-accent: #9ed332;
  --settings-accent-dark: #9ed332;
  --packs-accent: #9ed332;
  --packs-feedback-rgb: 158, 211, 50;
}
html, body, .page-loader { background: var(--bg-primary); }
.loader-spinner { border-color: rgba(255, 255, 255, .12); border-top-color: var(--yn-lime); }

/* Actions: lime primary with dark ink, light outline secondary. */
.btn-next-slide,
.btn-reveal,
.btn-play { color: var(--yn-ink); background: var(--yn-lime); box-shadow: none; }
@media (hover: hover) { .btn-reveal:hover { box-shadow: none; } }
.btn-skip,
.btn-hint { color: #fff; border-color: rgba(255, 255, 255, .55); }
.dot { background: rgba(255, 255, 255, .22); }
.dot.active { background: var(--yn-lime); }

/* Packs and riddle list. */
.pack-card { background: var(--yn-surface); }
@media (hover: hover) { .pack-card:hover { border-color: var(--yn-lime); } }
.riddle-item { background: var(--yn-surface); border: 1px solid transparent; }
@media (hover: hover) { .riddle-item:hover { border-color: var(--yn-moss); } }
.riddle-number { color: var(--yn-ink); background: var(--yn-lime); }
.riddle-arrow { color: var(--yn-lime); }

/* Riddle card: dark mystery card in the moss frame; the answer side is lime with dark ink. */
.riddle-card-title { color: var(--yn-lime); }
.flip-card-front { background: var(--yn-surface); border: 2px solid var(--yn-moss); box-shadow: none; }
.flip-card-front .card-label { color: var(--yn-lime); }
.flip-card-back { background: var(--yn-lime); box-shadow: none; }
.flip-card-back .card-label { color: rgba(23, 25, 31, .7); }
.flip-card-back .card-text { color: var(--yn-ink); }
.card-hint-img { border: 2px solid var(--yn-moss); }

/* 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; }
#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 { --yn-press: 100ms; --yn-settle: 240ms; --yn-spring: cubic-bezier(.2, .9, .3, 1.25); }
  button:not(:disabled) {
    transition: scale var(--yn-settle) var(--yn-spring), translate var(--yn-settle) var(--yn-spring),
      background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  }
  button:not(:disabled):active { scale: .96; translate: 0 2px; transition-duration: var(--yn-press); }
  .btn-back:active { scale: .88; }
  .dot { transition: background-color 180ms ease, scale 180ms var(--yn-spring); }
  .dot.active { scale: 1.12; }
  .onboarding-slide.active .slide-icon { animation: yn-character-arrive 380ms var(--yn-spring) both; }

  .pack-card.packs-touch-press:not(.locked) { transform: scale(.965); transition-duration: var(--yn-press); }
  .pack-card.packs-touch-pop:not(.locked) { animation: yn-pop 320ms var(--yn-spring); }
  .pack-card.packs-touch-pop:not(.locked) :is(.pack-art, .pack-icon) { animation: yn-nod 360ms ease-out; }

  #riddle-list-screen.active .riddle-item { animation: yn-paper-arrive 280ms var(--yn-spring) both; }
  #riddle-list-screen.active .riddle-item:nth-child(2) { animation-delay: 30ms; }
  #riddle-list-screen.active .riddle-item:nth-child(3) { animation-delay: 60ms; }
  #riddle-list-screen.active .riddle-item:nth-child(4) { animation-delay: 90ms; }
  #riddle-list-screen.active .riddle-item:nth-child(5) { animation-delay: 120ms; }
  #riddle-list-screen.active .riddle-item:nth-child(n+6) { animation-delay: 150ms; }
  .riddle-item:active { scale: .98; transition: scale var(--yn-press) ease; }

  #riddle-card-screen.active .riddle-card-title { animation: yn-stamp-in 360ms var(--yn-spring) both; }
  #riddle-card-screen.active .card-scene { animation: yn-paper-arrive 280ms var(--yn-spring) 60ms both; }
  .flip-card { transition: transform 600ms var(--yn-spring); }
  .flip-card.flipped .flip-card-back .card-text { animation: yn-paper-arrive 280ms var(--yn-spring) 320ms both; }
  .flip-card:not(.flipped) .flip-card-front .card-label { animation: yn-nod 420ms ease-out 200ms; }
}
@keyframes yn-character-arrive { from { opacity: 0; scale: .82; rotate: -10deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes yn-pop { 0% { transform: scale(.965); } 55% { transform: scale(1.018); } 100% { transform: scale(1); } }
@keyframes yn-nod { 0%, 100% { rotate: 0deg; } 35% { rotate: -8deg; } 70% { rotate: 5deg; } }
@keyframes yn-paper-arrive { from { opacity: 0; translate: 0 12px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes yn-stamp-in { from { opacity: 0; scale: 1.3; } to { opacity: 1; scale: 1; } }

/* Like / dislike / report under the riddle (shared content-report.css), shown once the answer is open. */
:root {
  --rp-report-surface: var(--yn-surface);
  --rp-report-text: #fff;
  --rp-report-muted: var(--text-secondary);
  --rp-report-line: rgba(255, 255, 255, .16);
  --rp-report-chip: rgba(255, 255, 255, .08);
  --rp-report-accent: var(--yn-lime);
  --rp-report-accent-ink: var(--yn-ink);
  --rp-report-error: var(--rp-wrong);
  --rp-report-flag: rgba(185, 196, 174, .7);
}
/* Both live on the answer side of the flip card: thumbs centred at its bottom edge, the flag in
   its top-right corner; dark ink on the lime face, the pressed thumb turns filled ink. */
.flip-card .flip-card-back { position: relative; padding-bottom: 60px; }
.yn-card-vote { position: absolute; left: 50%; bottom: 6px; z-index: 2; margin: 0; transform: translateX(-50%); }
.yn-card-vote .rp-card-vote__btn,
.yn-report-flag { color: rgba(23, 25, 31, .55); }
.yn-card-vote .rp-card-vote__btn[aria-pressed="true"] { color: var(--yn-ink); }
.yn-card-vote .rp-card-vote__btn:active,
.yn-report-flag:active { background: rgba(23, 25, 31, .1); }
.yn-report-flag { position: absolute; top: 4px; right: 4px; z-index: 2; }
.yn-report-flag[hidden] { display: none; }