/* Game Theme only. Palette: COMMON/roomplay-palettes.html / soobrazhariy («Соображарий»).
   bg #125CA5 blue (white 6.8:1), surface #123D71 navy (white 10.9:1), accent #FFCF39 gold (dark ink #17191F on it 11.9:1;
   as text/large glyphs 4.6:1 on the blue, 7.4:1 on navy), secondary #F3E8BE cream (5.5:1 on blue, 8.9:1 on navy).
   Muted text #D6E4F5: 5.3:1 on blue, 8.4:1 on navy. Success/error keep stock green/red, shown on navy chips. */
:root {
  /* Answer and gender tones: COMMON/roomplay-palettes.html / soobrazhariy (correct, wrong, male, female). */
  --rp-correct: #5feda5;
  --rp-correct-ink: #17191f;
  --rp-wrong: #fcc8cd;
  --rp-wrong-ink: #17191f;
  --rp-male: #a9d4ff;
  --rp-female: #ffb0cc;
  color-scheme: dark;
  --bg-primary: #125ca5;
  --bg-secondary: #1a4c88;
  --bg-card: #123d71;
  --text-primary: #ffffff;
  --text-secondary: #d6e4f5;
  --text-placeholder: #a9c2e2;
  --accent-pink: #ffcf39;
  --accent-pink-dark: #ffcf39;
  --accent-purple: #ffcf39;
  --accent-purple-dark: #ffcf39;
  --accent-blue: #123d71;
  --accent-green: #ffcf39;
  --accent-green-dark: #ffcf39;
  --accent-yellow: #ffcf39;
  --accent-yellow-dark: #ffcf39;
  --sb-ink: #17191f;
  --sb-blue: #125ca5;
  --sb-navy: #123d71;
  --sb-navy-2: #1a4c88;
  --sb-gold: #ffcf39;
  --sb-cream: #f3e8be;
  --onboarding-accent: #ffcf39;
  --onboarding-accent-dark: #ffcf39;
  --onboarding-shadow: transparent;
  --onboarding-shadow-hover: transparent;
  --settings-accent: #ffcf39;
  --settings-accent-dark: #ffcf39;
  --packs-accent: #ffcf39;
  --packs-feedback-rgb: 255, 207, 57;
  --ps-accent: #ffcf39;
}
html, body[data-rp-game="soobrazhariy"], .page-loader { background: var(--bg-primary); }
.loader-spinner { border-color: rgba(255, 255, 255, .2); border-top-color: var(--sb-gold); }
.btn-back { color: #fff; }

/* Actions: gold primary with dark ink, cream outline secondary. */
.btn-play,
.btn-next-slide { color: var(--sb-ink); background: var(--sb-gold); box-shadow: none; }
@media (hover: hover) {
  .btn-play:hover,
  .btn-next-slide:hover { color: var(--sb-ink); background: #ffdb6b; box-shadow: none; }
}
.btn-play:disabled { color: var(--text-secondary); background: var(--sb-navy); opacity: 1; }
.btn-skip,
.btn-additional-settings { color: #fff; border-color: rgba(243, 232, 190, .75); background: transparent; }
.dot { background: rgba(255, 255, 255, .3); }
.dot.active { background: var(--sb-gold); }
.slide-title, .title, .result-title { color: #fff; }
.slide-text, .subtitle { color: var(--text-secondary); }

/* Player setup: navy rows. */
.ps-add-btn { color: #fff; border-color: var(--sb-gold); }
@media (hover: hover) { .ps-add-btn:hover { color: var(--sb-ink); background: var(--sb-gold); } }
.ps-entry { background: var(--sb-navy); }
.ps-icon--filled { background: var(--sb-gold); }
.ps-icon--avatar { background: var(--sb-navy-2); }
.ps-gender { background: var(--sb-navy-2); }

/* Packs: illustrated covers stay; gold selection frame and a navy summary. */
/* packs.js sets these inline from the game's accentColor, so they need !important. */
.packs-illustrated-grid { --packs-accent: #ffcf39 !important; --packs-feedback-rgb: 255, 207, 57 !important; }
.packs-illustrated-actions { background: linear-gradient(180deg, rgba(18, 92, 165, 0) 0%, var(--bg-primary) 14px); }
.packs-illustrated-grid .pack-card,
.packs-illustrated-grid .pack-card.premium,
.packs-illustrated-grid .pack-card.locked { border-color: rgba(243, 232, 190, .5); }
.packs-summary { color: var(--text-secondary); background: var(--sb-navy); }
.packs-summary .summary-text { color: var(--text-secondary); }
.packs-summary .summary-text strong { color: var(--sb-gold); }

/* Round: navy pill, the gold letter (shown on a navy tile so it reads at any size), a cream-ruled category card. */
.round-indicator { color: var(--text-secondary); background: var(--sb-navy); }
.letter-display {
  display: grid;
  place-items: center;
  min-width: 1.45em;
  min-height: 1.45em;
  padding: 0 .12em;
  border-radius: 28px;
  color: var(--sb-gold);
  background: var(--sb-navy);
  text-shadow: none;
  box-shadow: inset 0 0 0 4px rgba(255, 207, 57, .35);
}
.category-display { color: #fff; background: var(--sb-navy); border-left-color: var(--sb-gold); }
.timer-bar-track { background: var(--sb-navy); }
.timer-bar-fill { background: var(--sb-gold); }
.timer-bar-fill.urgent { background: var(--error); }
.timer-text { min-width: 64px; padding: 2px 16px; border-radius: 999px; color: var(--sb-gold); background: var(--sb-navy); }
.timer-text.urgent { color: var(--error); }
.btn-pause { color: #fff; background: var(--sb-navy); border-color: rgba(255, 255, 255, .35); }
@media (hover: hover) { .btn-pause:hover { color: #fff; background: var(--sb-navy-2); } }
.pause-overlay { background: rgba(18, 61, 113, .97); }
.pause-overlay-text { color: #fff; }
.player-answer-btn { color: #fff; background: var(--sb-navy); border-color: var(--sb-gold); }
@media (hover: hover) { .player-answer-btn:hover { color: var(--sb-ink); background: var(--sb-gold); } }
.btn-skip-round { color: var(--sb-cream); border-color: rgba(243, 232, 190, .75); }
@media (hover: hover) { .btn-skip-round:hover { color: var(--sb-ink); background: var(--sb-cream); border-color: var(--sb-cream); } }

/* Result: the stock green tick / muted cross on a navy disc; gold winner name. */
.result-icon { display: grid; place-items: center; width: 120px; height: 120px; margin: 16px auto; border-radius: 50%; line-height: 1; background: var(--sb-navy); }
.result-icon.neutral { color: var(--text-secondary); }
.result-player { color: var(--sb-gold); }
.result-word-hint { color: var(--text-secondary); }
.result-word-hint strong { color: var(--sb-gold); }
.scoreboard { background: var(--sb-navy); }
.scoreboard-title { color: var(--text-secondary); }
.score-item { color: #fff; background: var(--sb-navy-2); }
.score-item.leading { background: var(--sb-navy-2); border: 2px solid var(--sb-gold); }
.score-points { color: var(--sb-gold); }

/* Final. */
.winner-name { color: var(--sb-gold); }
.final-score-item { background: var(--sb-navy); }
.final-score { color: var(--sb-gold); }
.final-position.other { color: #fff; background: var(--sb-navy-2); }
body[data-rp-game="soobrazhariy"] #roomplay-local-finale { color: #fff; background: var(--sb-navy); border: 1px solid rgba(243, 232, 190, .3); }
body[data-rp-game="soobrazhariy"] #roomplay-local-finale p { color: var(--text-secondary); }
body[data-rp-game="soobrazhariy"] #roomplay-local-finale .rplf-kicker { color: var(--sb-gold); }
body[data-rp-game="soobrazhariy"] #roomplay-local-finale .rplf-primary { color: var(--sb-ink); background: var(--sb-gold); }
body[data-rp-game="soobrazhariy"] #roomplay-local-finale .rplf-secondary { color: #fff; background: var(--sb-navy-2); }

/* Settings popup and exit confirmation: navy sheets with a gold action.
   Colours go through the shared --rp-dialog-* tokens (assets/css/confirm-dialog.css). */
:root {
  --rp-dialog-overlay: rgba(8, 30, 58, .8);
  --rp-dialog-bg: var(--sb-navy);
  --rp-dialog-border: 1px solid rgba(243, 232, 190, .25);
  --rp-dialog-text: var(--text-secondary);
  --rp-dialog-primary-bg: var(--sb-gold);
  --rp-dialog-primary-text: var(--sb-ink);
  --rp-dialog-secondary-border: rgba(243, 232, 190, .75);
  --rp-dialog-secondary-text: #fff;
  --rp-dialog-control-btn-bg: rgba(255, 255, 255, .14);
  --rp-dialog-toggle-bg: rgba(255, 255, 255, .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: 110px; margin-bottom: 8px; }
}
@media (max-height: 430px) {
  #onboarding-screen .slide-icon { width: 60px; margin-bottom: 4px; }
}

/* Light motion, same rhythm as «Я никогда не» (cutout-theme.css). Decorative only: the round timer, answer buttons
   and scoring are untouched (the letter keeps the game's own reveal); off under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  :root { --sb-press: 100ms; --sb-settle: 240ms; --sb-spring: cubic-bezier(.2, .9, .3, 1.25); }
  button:not(:disabled) {
    transition: scale var(--sb-settle) var(--sb-spring), translate var(--sb-settle) var(--sb-spring),
      background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  }
  button:not(:disabled):active { scale: .96; translate: 0 2px; transition-duration: var(--sb-press); }
  .player-answer-btn:active { transform: none; }
  .btn-back:active { scale: .88; }
  .dot { transition: background-color 180ms ease, width 300ms ease, scale 180ms var(--sb-spring); }
  .dot.active { scale: 1.12; }
  .onboarding-slide.active .slide-icon { animation: sb-character-arrive 380ms var(--sb-spring) both; }

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

  #players-screen.active .ps-entry { animation: sb-paper-arrive 280ms var(--sb-spring) both; }
  #players-screen.active .ps-entry:nth-child(2) { animation-delay: 40ms; }
  #players-screen.active .ps-entry:nth-child(3) { animation-delay: 80ms; }
  #players-screen.active .ps-entry:nth-child(4) { animation-delay: 120ms; }
  #players-screen.active .ps-entry:nth-child(n+5) { animation-delay: 160ms; }

  #round-screen.active .player-answer-btn { animation: sb-pop-in 260ms var(--sb-spring) both; }
  #round-screen.active .player-answer-btn:nth-child(2) { animation-delay: 40ms; }
  #round-screen.active .player-answer-btn:nth-child(3) { animation-delay: 80ms; }
  #round-screen.active .player-answer-btn:nth-child(n+4) { animation-delay: 120ms; }
  .timer-text { transition: color 200ms ease; }

  #result-screen.active .result-icon { animation: sb-stamp-in 360ms var(--sb-spring) both; }
  #result-screen.active .result-player { animation: sb-stamp-in 360ms var(--sb-spring) 120ms both; }
  #result-screen.active .score-item { animation: sb-paper-arrive 280ms var(--sb-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-screen.active .winner-icon { animation: sb-nod 420ms ease-out 200ms both; }
  #final-screen.active .final-score-item { animation: sb-paper-arrive 280ms var(--sb-spring) both; }
  #final-screen.active .final-score-item:nth-child(2) { animation-delay: 60ms; }
  #final-screen.active .final-score-item:nth-child(3) { animation-delay: 120ms; }
  #final-screen.active .final-score-item:nth-child(n+4) { animation-delay: 160ms; }
  .confirm-dialog-overlay.active .confirm-dialog-modal,
  .settings-popup-overlay.active .settings-popup-modal { animation: sb-paper-arrive 280ms var(--sb-spring); }
}
@keyframes sb-character-arrive { from { opacity: 0; scale: .82; rotate: -8deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes sb-pop { 0% { transform: scale(.965); } 55% { transform: scale(1.018); } 100% { transform: scale(1); } }
@keyframes sb-pop-in { from { opacity: 0; scale: .7; } to { opacity: 1; scale: 1; } }
@keyframes sb-nod { 0%, 100% { rotate: 0deg; } 35% { rotate: -8deg; } 70% { rotate: 5deg; } }
@keyframes sb-paper-arrive { from { opacity: 0; translate: 0 12px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes sb-stamp-in { from { opacity: 0; scale: 1.3; } to { opacity: 1; scale: 1; } }

/* Pack choice arrow: COMMON/roomplay-palettes.html / soobrazhariy accent #FFCF39. */
:root {
    --packs-cue-color: #FFCF39;
}