/* Game Theme only. Palette: COMMON/roomplay-palettes.html / wavelength («Длина волны»).
   bg #193E47 (petrol, white text), surface #F0E4C9 (cream cards, ink #17191F), accent #ED755B (coral, ink on it),
   secondary #72B8B0 (teal). Text tints for cream cards: teal #2A6F68, coral #A8442F, success #1B6E42, warning #8A5A00.
   Team colours (inline per team) and success/warning meanings are unchanged. */
:root {
  /* Answer and gender tones: COMMON/roomplay-palettes.html / wavelength (correct, wrong, male, female). */
  --rp-correct: #027347;
  --rp-correct-ink: #ffffff;
  --rp-wrong: #b03d25;
  --rp-wrong-ink: #ffffff;
  --rp-male: #0d77ca;
  --rp-female: #b64679;
  --bg-primary: #193e47;
  --bg-secondary: #224e58;
  --bg-card: #224e58;
  --text-primary: #ffffff;
  --text-secondary: #c9dcd8;
  --text-placeholder: #8fb0ab;
  --accent-purple: #ed755b;
  --accent-purple-dark: #ed755b;
  --accent-blue: #72b8b0;
  --accent-cyan: #72b8b0;
  --accent-cyan-dark: #72b8b0;
  --accent-pink: #ed755b;
  --accent-pink-dark: #ed755b;
  --warning: #f2c14e;
  --onboarding-accent: #ed755b;
  --onboarding-accent-dark: #ed755b;
  --onboarding-shadow: transparent;
  --onboarding-shadow-hover: transparent;
  --settings-accent: #ed755b;
  --settings-accent-dark: #ed755b;
  --packs-accent: #ed755b;
  --packs-feedback-rgb: 237, 117, 91;
  --ps-accent: #ed755b;
  --wl-ink: #17191f;
  --wl-ink-muted: #4a4a42;
  --wl-cream: #f0e4c9;
  --wl-cream-2: #e4d5b3;
  --wl-coral: #ed755b;
  --wl-coral-light: #f59a84;
  --wl-coral-text: #a8442f;
  --wl-teal: #72b8b0;
  --wl-teal-text: #2a6f68;
  --wl-success-text: #1b6e42;
  --wl-warning-text: #8a5a00;
}
html, body, .page-loader { background: var(--bg-primary); }
.loader-spinner { border-color: rgba(255, 255, 255, .14); border-top-color: var(--wl-coral); }

/* Actions: coral primary with ink, light outline secondary. */
.btn-play,
.btn-next-slide { color: var(--wl-ink); background: var(--wl-coral); box-shadow: none; }
.btn-play:disabled { color: var(--text-secondary); background: var(--bg-secondary); opacity: 1; }
.btn-skip { color: #fff; border-color: rgba(255, 255, 255, .55); }
.btn-additional-settings { color: #fff; border-color: var(--wl-coral); }
.ps-add-btn { color: #fff; border-color: var(--wl-coral); }
@media (hover: hover) {
  .ps-add-btn:hover { color: var(--wl-ink); background: var(--wl-coral); }
  .btn-additional-settings:hover { background: rgba(237, 117, 91, .14); }
}
.dot { background: rgba(255, 255, 255, .24); }
.dot.active { background: var(--wl-coral); }

/* Teams setup: cream entries with ink text (team colour chips stay). */
.ps-entry { background: var(--wl-cream); --ps-card-ink: var(--wl-ink); --ps-card-muted: var(--wl-ink-muted); }
.ps-input { color: var(--wl-ink); }
.ps-input::placeholder { color: var(--wl-ink-muted); }
.ps-remove { color: var(--wl-ink-muted); }
.ps-gender { color: var(--wl-ink-muted); background: var(--wl-cream-2); }

/* Turn and in-round chrome on petrol. */
.turn-hint.secondary { color: color-mix(in srgb, var(--team-color-start) 45%, #ffffff); }
.clue-instruction p,
.guess-instruction p { color: var(--text-secondary); }

/* Cream cards: spectrum, round result, scoreboard, final standings. */
.spectrum-card,
.result-spectrum-card,
.result-summary,
.scoreboard,
.final-score-item { color: var(--wl-ink); background: var(--wl-cream); }
.spectrum-label { color: var(--wl-ink-muted); }
.spectrum-label.left { color: var(--wl-teal-text); }
.spectrum-label.right { color: var(--wl-coral-text); }
.spectrum-track { background: linear-gradient(90deg, var(--wl-teal) 0%, #d9cba9 50%, var(--wl-coral) 100%); }
.spectrum-marker { border-color: var(--wl-ink); box-shadow: none; }
.spectrum-numbers span { color: var(--wl-ink-muted); }
.target-number { color: var(--wl-success-text); }
.guess-btn { color: var(--wl-ink); border-color: rgba(23, 25, 31, .45); }
@media (hover: hover) {
  .guess-btn:not(.selected):hover { color: var(--wl-ink); border-color: var(--wl-ink); }
}
.guess-btn.selected { box-shadow: none; }
.result-team-name { color: color-mix(in srgb, var(--team-color-start) 70%, #17191f); }
.result-points { color: var(--wl-success-text); }
.result-points.zero { color: var(--wl-ink-muted); }
.result-target-value { color: var(--wl-success-text); }
.result-guess-value { color: var(--wl-warning-text); }
.scoreboard-title { color: var(--wl-ink-muted); }
.score-item,
.score-item.leading { color: var(--wl-ink); background: var(--wl-cream-2); }
.score-team-name { color: var(--wl-ink); }
.score-points { color: color-mix(in srgb, var(--team-color-start) 65%, #17191f); }
.winner-name { color: var(--wl-coral); }
.final-team-name { color: var(--wl-ink); }
.final-score { color: var(--wl-coral-text); }
.final-position.other { color: var(--wl-ink); background: var(--wl-cream-2); }

/* Shared popups: cream sheets with ink text.
   Colours go through the shared --rp-dialog-* tokens (assets/css/confirm-dialog.css). */
:root {
  --rp-dialog-overlay: rgba(10, 30, 35, .82);
  --rp-dialog-bg: var(--wl-cream);
  --rp-dialog-title: var(--wl-ink);
  --rp-dialog-text: var(--wl-ink-muted);
  --rp-dialog-primary-bg: var(--wl-coral);
  --rp-dialog-primary-text: var(--wl-ink);
  --rp-dialog-secondary-border: var(--wl-ink);
  --rp-dialog-secondary-text: var(--wl-ink);
  --rp-dialog-control-bg: rgba(23, 25, 31, .06);
  --rp-dialog-control-btn-bg: rgba(23, 25, 31, .1);
  --rp-dialog-toggle-bg: rgba(23, 25, 31, .1);
}
.settings-popup-toggle:focus-visible { outline-color: var(--wl-ink); }

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

/* 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; never delays input or scoring. */
@media (prefers-reduced-motion: no-preference) {
  :root { --wl-press: 100ms; --wl-settle: 240ms; --wl-spring: cubic-bezier(.2, .9, .3, 1.25); }
  button:not(:disabled) {
    transition: scale var(--wl-settle) var(--wl-spring), translate var(--wl-settle) var(--wl-spring),
      background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  }
  button:not(:disabled):active { scale: .96; translate: 0 2px; transition-duration: var(--wl-press); }
  .btn-back:active { scale: .88; }
  .dot { transition: background-color 180ms ease, scale 180ms var(--wl-spring); }
  .dot.active { scale: 1.12; }
  .onboarding-slide.active .slide-icon { animation: wl-character-arrive 380ms var(--wl-spring) both; }

  /* Turn: the team card lands like a stamp. */
  #turn-screen.active .team-turn-card { animation: wl-stamp-in 360ms var(--wl-spring) both; }

  /* Clue and guess: the spectrum card arrives, the secret number stamps, number buttons pop in a wave. */
  #clue-screen.active .spectrum-card,
  #guess-screen.active .spectrum-card { animation: wl-paper-arrive 280ms var(--wl-spring) both; }
  #clue-screen.active .spectrum-marker { animation: wl-pop-in 300ms var(--wl-spring) 120ms both; }
  #clue-screen.active .target-number { animation: wl-stamp-in 360ms var(--wl-spring) 80ms both; }
  #guess-screen.active .guess-btn { animation: wl-pop-in 260ms var(--wl-spring) both; }
  #guess-screen.active .guess-btn:nth-child(2) { animation-delay: 15ms; }
  #guess-screen.active .guess-btn:nth-child(3) { animation-delay: 30ms; }
  #guess-screen.active .guess-btn:nth-child(4) { animation-delay: 45ms; }
  #guess-screen.active .guess-btn:nth-child(5) { animation-delay: 60ms; }
  #guess-screen.active .guess-btn:nth-child(6) { animation-delay: 75ms; }
  #guess-screen.active .guess-btn:nth-child(7) { animation-delay: 90ms; }
  #guess-screen.active .guess-btn:nth-child(8) { animation-delay: 105ms; }
  #guess-screen.active .guess-btn:nth-child(9) { animation-delay: 120ms; }
  #guess-screen.active .guess-btn:nth-child(10) { animation-delay: 135ms; }
  #guess-screen.active .guess-btn:nth-child(n+11) { animation-delay: 150ms; }
  #guess-screen.active .guess-btn.selected { animation: wl-answer-stamp 260ms var(--wl-spring); }

  /* Round result: points stamp, both markers pop onto the scale, scores slide in. */
  #result-screen.active .result-summary { animation: wl-paper-arrive 280ms var(--wl-spring) both; }
  #result-screen.active .result-points { animation: wl-stamp-in 360ms var(--wl-spring) 80ms both; }
  #result-screen.active .result-spectrum-card { animation: wl-paper-arrive 280ms var(--wl-spring) 40ms both; }
  #result-screen.active .spectrum-marker.target { animation: wl-pop-in 300ms var(--wl-spring) 140ms both; }
  #result-screen.active .spectrum-marker.guess { animation: wl-pop-in 300ms var(--wl-spring) 200ms both; }
  #result-screen.active .score-item { animation: wl-paper-arrive 280ms var(--wl-spring) both; }
  #result-screen.active .score-item:nth-child(2) { animation-delay: 40ms; }
  #result-screen.active .score-item:nth-child(3) { animation-delay: 80ms; }
  #result-screen.active .score-item:nth-child(4) { animation-delay: 120ms; }
  #result-screen.active .score-item:nth-child(n+5) { animation-delay: 160ms; }

  /* Final standings and popups. */
  #final-screen.active .winner-icon { animation: wl-nod 420ms ease-out 200ms both; }
  #final-screen.active .winner-name { animation: wl-stamp-in 360ms var(--wl-spring) 80ms both; }
  #final-screen.active .final-score-item { animation: wl-paper-arrive 280ms var(--wl-spring) both; }
  #final-screen.active .final-score-item:nth-child(2) { animation-delay: 50ms; }
  #final-screen.active .final-score-item:nth-child(3) { animation-delay: 100ms; }
  #final-screen.active .final-score-item:nth-child(n+4) { animation-delay: 150ms; }
  .confirm-dialog-overlay.active .confirm-dialog-modal,
  .settings-popup-overlay.active .settings-popup-modal { animation: wl-paper-arrive 280ms var(--wl-spring); }
}
@keyframes wl-character-arrive { from { opacity: 0; scale: .82; rotate: -10deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes wl-pop-in { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
@keyframes wl-nod { 0%, 100% { rotate: 0deg; } 35% { rotate: -8deg; } 70% { rotate: 5deg; } }
@keyframes wl-paper-arrive { from { opacity: 0; translate: 0 12px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes wl-stamp-in { from { opacity: 0; scale: 1.3; } to { opacity: 1; scale: 1; } }
@keyframes wl-answer-stamp { 0% { scale: .94; } 65% { scale: 1.025; } 100% { scale: 1; } }