/* Game Theme only. Palette: COMMON/roomplay-palettes.html / werewords («Слово волка»).
   bg #2E2930 (charcoal, white text), surface #EFE4C4 (cream cards, ink #17191F), accent #9F302D (red banner, white text),
   secondary #E6C75D (yellow, ink on it; also the highlight text colour on charcoal because red is too dark as text there).
   Role colours (Mayor green, Werewolf red, Seer blue, Villager grey) and Yes/No/Maybe/Stop meanings are unchanged;
   role badges use the darker end of their own gradients for white-text contrast.
   The RU illustrated eight-page onboarding and the non-RU Remotion wolf (slides 1–2) are kept as they are. */
:root {
  /* Answer and gender tones: COMMON/roomplay-palettes.html / werewords (correct, wrong, male, female). */
  --rp-correct: #7ac061;
  --rp-correct-ink: #17191f;
  --rp-wrong: #f67f76;
  --rp-wrong-ink: #17191f;
  --rp-male: #62b0fe;
  --rp-female: #f280af;
  --bg-primary: #2e2930;
  --bg-secondary: #3e3740;
  --bg-card: #3e3740;
  --text-primary: #ffffff;
  --text-secondary: #c9c0c6;
  --text-placeholder: #a89fa6;
  --accent-purple: #e6c75d;
  --accent-purple-dark: #e6c75d;
  --accent-blue: #1d4ed8;
  --accent-pink: #9f302d;
  --accent-pink-dark: #9f302d;
  --accent-gray: #9ca3af;
  --onboarding-accent: #9f302d;
  --onboarding-accent-dark: #9f302d;
  --onboarding-shadow: transparent;
  --onboarding-shadow-hover: transparent;
  --settings-accent: #9f302d;
  --settings-accent-dark: #9f302d;
  --packs-accent: #e6c75d;
  --packs-feedback-rgb: 230, 199, 93;
  --ps-accent: #9f302d;
  --ww-ink: #17191f;
  --ww-ink-muted: #5e5a57;
  --ww-cream: #efe4c4;
  --ww-red: #9f302d;
  --ww-red-text: #f07a6e;
  --ww-yellow: #e6c75d;
}
html, body, .page-loader { background: var(--bg-primary); }
.loader-spinner { border-color: rgba(255, 255, 255, .14); border-top-color: var(--ww-yellow); }

/* Actions: red banner primary with white text, light outline secondary. */
.btn-play,
.btn-next-slide,
.btn-show-role,
.btn-next-player { color: #fff; background: var(--ww-red); box-shadow: none; }
.btn-play:disabled { color: var(--text-secondary); background: var(--bg-secondary); opacity: 1; }
.btn-skip,
.btn-secondary { color: #fff; border-color: rgba(255, 255, 255, .5); }
.ps-add-btn { color: #fff; border-color: var(--ww-yellow); }
@media (hover: hover) { .ps-add-btn:hover { color: var(--ww-ink); background: var(--ww-yellow); } }
.dot { background: rgba(255, 255, 255, .22); }
.dot.active { background: var(--ww-yellow); }
.ww-dot::after { background: rgba(255, 255, 255, .22); }
.ww-dot.active::after { background: var(--ww-yellow); }
.ww-dot:focus-visible { outline-color: var(--ww-yellow); }

/* Role cards: cream front with a red frame; role backs keep their role colours. */
.card-front { background: var(--ww-cream); border-color: var(--ww-red); }
.card-front .card-title,
.card-front .card-hint { color: var(--ww-ink-muted); }
.card-player-name { color: var(--ww-red); }
.card-back { background: linear-gradient(135deg, #4a424c 0%, var(--bg-secondary) 100%); }

/* Round: yellow «guessed» action with ink, yellow names; mark buttons keep their meanings. */
.btn-word-guessed { color: var(--ww-ink); background: var(--ww-yellow); box-shadow: none; }
@media (hover: hover) { .btn-word-guessed:hover { box-shadow: none; } }
.timer-display.urgent { color: var(--ww-red-text); }
.seer-hunt-title,
.times-up-title { color: var(--ww-red-text); }
.bottom-hint,
.find-werewolf-text { color: var(--ww-yellow); }

/* Word reveal: cream card with the secret word in the red banner colour. */
.word-reveal { background: var(--ww-cream); }
.word-reveal-label { color: var(--ww-ink-muted); }
.word-reveal-value { color: var(--ww-red); }
.player-mark-symbol.mark-symbol-stop { color: #9ca3af; }
.vote-player-option { background: var(--bg-secondary); }
.vote-player-option.selected { background: rgba(230, 199, 93, .16); border-color: var(--ww-yellow); box-shadow: none; }
@media (hover: hover) { .vote-player-option:hover { border-color: rgba(230, 199, 93, .55); } }
.vote-player-check { color: var(--ww-ink); background: var(--ww-yellow); }

/* Results: role badges on the dark end of each role colour. */
.role-badge.badge-mayor { background: #047857; }
.role-badge.badge-werewolf { background: #b91c1c; }
.role-badge.badge-seer { background: #1d4ed8; }
.role-badge.badge-villager { background: #4b5563; }

/* Confirm dialog.
   Colours go through the shared --rp-dialog-* tokens (assets/css/confirm-dialog.css). */
:root {
  --rp-dialog-overlay: rgba(20, 17, 21, .85);
  --rp-dialog-bg: var(--bg-secondary);
  --rp-dialog-text: var(--text-secondary);
  --rp-dialog-primary-bg: var(--ww-red);
  --rp-dialog-secondary-border: rgba(255, 255, 255, .5);
  --rp-dialog-secondary-text: #fff;
}

/* RU party finale card (injected by ru-party-finale.js). */
body #roomplay-local-finale { color: var(--ww-ink); background: var(--ww-cream); border-color: transparent; }
body #roomplay-local-finale p { color: var(--ww-ink-muted); }
body #roomplay-local-finale .rplf-kicker { color: var(--ww-red); }
body #roomplay-local-finale .rplf-primary { color: #fff; background: var(--ww-red); }
body #roomplay-local-finale .rplf-secondary { color: var(--ww-ink); background: rgba(23, 25, 31, .1); }

/* Non-RU slides 1–4: animated flat SVG scenes (static copies via <picture> for reduced motion). */
#onboarding-screen .slide-icon { width: min(240px, 55vw); margin: 0 auto 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; }
}
/* Landscape phones: keep Skip/Next on screen under the scene (non-RU carousel only). */
@media (max-height: 430px) {
  #werewords-legacy-onboarding { padding-top: 0; }
  #werewords-legacy-onboarding .slide-icon { width: 104px; margin-bottom: 4px; }
  #werewords-legacy-onboarding .slide-text { min-height: 0; margin-bottom: 8px; }
}

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

  /* Cards: the role card arrives like paper; the flip uses the spring. */
  #cards-screen.active .card-container { animation: ww-paper-arrive 280ms var(--ww-spring) both; }
  .card-inner { transition: transform 600ms var(--ww-spring); }
  .game-card.flipped .card-role-title { animation: ww-stamp-in 360ms var(--ww-spring) 300ms both; }

  /* Round: the timer stamps in, mark buttons pop in a wave, the questioner name nods on change. */
  #game-screen.active .timer-display:not(.urgent) { animation: ww-stamp-in 360ms var(--ww-spring) both; }
  #game-screen.active .mark-btn { animation: ww-pop-in 260ms var(--ww-spring) both; }
  #game-screen.active .mark-btn:nth-child(2) { animation-delay: 40ms; }
  #game-screen.active .mark-btn:nth-child(3) { animation-delay: 80ms; }
  #game-screen.active .mark-btn:nth-child(4) { animation-delay: 120ms; }
  #seer-hunt-screen.active .seer-hunt-title,
  #times-up-screen.active .times-up-title { animation: ww-stamp-in 360ms var(--ww-spring) both; }
  #seer-hunt-screen.active .timer-display:not(.urgent) { animation: ww-paper-arrive 280ms var(--ww-spring) 80ms both; }
  #times-up-screen.active .word-reveal-value,
  #results-screen.active .word-reveal-value { animation: ww-stamp-in 360ms var(--ww-spring) 80ms both; }
  .vote-player-option.selected { animation: ww-answer-stamp 260ms var(--ww-spring); }

  /* Results: roles are dealt one by one (<=160 ms). */
  #results-screen.active .role-item { animation: ww-paper-arrive 280ms var(--ww-spring) both; }
  #results-screen.active .role-item:nth-child(2) { animation-delay: 40ms; }
  #results-screen.active .role-item:nth-child(3) { animation-delay: 80ms; }
  #results-screen.active .role-item:nth-child(4) { animation-delay: 120ms; }
  #results-screen.active .role-item:nth-child(n+5) { animation-delay: 160ms; }
  .confirm-dialog-overlay.active .confirm-dialog-modal { animation: ww-paper-arrive 280ms var(--ww-spring); }
}
@keyframes ww-character-arrive { from { opacity: 0; scale: .82; rotate: -10deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes ww-pop-in { from { opacity: 0; scale: .7; } to { opacity: 1; scale: 1; } }
@keyframes ww-paper-arrive { from { opacity: 0; translate: 0 12px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes ww-stamp-in { from { opacity: 0; scale: 1.3; } to { opacity: 1; scale: 1; } }
@keyframes ww-answer-stamp { 0% { scale: .94; } 65% { scale: 1.025; } 100% { scale: 1; } }