/* Game Theme only. Palette: COMMON/roomplay-palettes.html / whosmostlikelyto («Кто из нас»).
   bg #171719 near-black, surface #262629, accent #A51043 crimson (white text 7.6:1; fills only — as text on bg it is 2.4:1,
   so text accents use #FF7AA2: 7.3:1 on bg, 6.2:1 on surface; outlines/borders use #E0336E: 4.2:1 on bg, 3.5:1 on surface),
   secondary #E4E3E5 light grey (14.0:1 on bg, 11.8:1 on surface). Muted text #B4B3B8: 8.6:1 on bg, 7.2:1 on surface.
   The statement card stays dark (surface) with crimson used for the action and the «?» mark. Premium gold is unchanged. */
:root {
  /* Answer and gender tones: COMMON/roomplay-palettes.html / whosmostlikelyto (correct, wrong, male, female). */
  --rp-correct: #30c883;
  --rp-correct-ink: #17191f;
  --rp-wrong: #fe7b90;
  --rp-wrong-ink: #17191f;
  --rp-male: #63b0fc;
  --rp-female: #f77cb0;
  color-scheme: dark;
  --bg-primary: #171719;
  --bg-secondary: #262629;
  --bg-card: #262629;
  --text-primary: #ffffff;
  --text-secondary: #b4b3b8;
  --text-placeholder: #8e8d93;
  --accent-pink: #a51043;
  --accent-pink-dark: #a51043;
  --accent-purple: #a51043;
  --accent-purple-dark: #a51043;
  --accent-blue: #a51043;
  --accent-orange: #a51043;
  --wm-crimson: #a51043;
  --wm-crimson-deep: #7d0c33;
  --wm-rose: #e0336e;
  --wm-rose-text: #ff7aa2;
  --wm-grey: #e4e3e5;
  --wm-surface: #262629;
  --wm-ink: #17191f;
  --onboarding-accent: #a51043;
  --onboarding-accent-dark: #a51043;
  --onboarding-shadow: transparent;
  --onboarding-shadow-hover: transparent;
  --settings-accent: #a51043;
  --settings-accent-dark: #a51043;
  --packs-accent: #a51043;
  --packs-feedback-rgb: 224, 51, 110;
  --ps-accent: #a51043;
}
html, body[data-rp-game="whosmostlikelyto"], .page-loader { background: var(--bg-primary); }
.loader-spinner { border-color: rgba(255, 255, 255, .12); border-top-color: var(--wm-rose); }
.btn-back { color: #fff; }

/* Actions: crimson primary with white text, light-grey outline secondary. */
.btn-play,
.btn-next-slide { color: #fff; background: var(--wm-crimson); box-shadow: none; }
@media (hover: hover) {
  .btn-play:hover,
  .btn-next-slide:hover { background: var(--wm-crimson-deep); box-shadow: none; }
}
.btn-play:disabled { color: var(--text-secondary); background: #3a3a3e; opacity: 1; }
.btn-skip,
.btn-additional-settings,
.btn-secondary { color: #fff; border-color: rgba(228, 227, 229, .6); background: transparent; }
@media (hover: hover) { .btn-secondary:hover { background: rgba(228, 227, 229, .08); } }
.dot { background: rgba(228, 227, 229, .25); }
.dot.active { background: var(--wm-rose); }
.slide-title,
.title { color: #fff; }
.slide-text,
.subtitle,
#question-counter,
.card-instruction,
.gameover-subtitle { color: var(--text-secondary); }

/* Player setup: dark surface rows. */
.ps-add-btn { color: #fff; border-color: var(--wm-rose); }
@media (hover: hover) { .ps-add-btn:hover { color: #fff; background: var(--wm-crimson); } }
.ps-entry { background: var(--wm-surface); }
.ps-icon--filled { background: var(--wm-crimson); }
.ps-icon--avatar { background: #333337; }
.ps-gender { background: #333337; }

/* Packs: illustrated covers stay; frame, selection and the bottom fade follow the palette. */
/* packs.js sets these inline from the game's accentColor, so they need !important. */
.packs-illustrated-grid { --packs-accent: #e0336e !important; --packs-feedback-rgb: 224, 51, 110 !important; }
.packs-illustrated-actions { background: linear-gradient(180deg, rgba(23, 23, 25, 0) 0%, var(--bg-primary) 14px); }
#packs-screen .pack-card,
#packs-screen .pack-card.selected,
#packs-screen .pack-card.premium,
#packs-screen .pack-card.premium.selected { background: var(--wm-surface); }
#packs-screen .pack-card { border-color: rgba(228, 227, 229, .14); box-shadow: 0 12px 28px rgba(0, 0, 0, .35); }
#packs-screen .pack-card.selected,
#packs-screen .pack-card.premium.selected:not(.locked) { border-color: var(--wm-rose); box-shadow: 0 0 0 2px rgba(224, 51, 110, .35); }
#packs-screen .pack-card::before { background: linear-gradient(180deg, rgba(23, 23, 25, .02) 34%, rgba(23, 23, 25, .9) 100%); }
#packs-screen .pack-card::after { background: rgba(23, 23, 25, .5); }
#packs-screen .premium-badge { background: rgba(23, 23, 25, .78); }
#packs-screen .bottom-section { background: linear-gradient(180deg, rgba(23, 23, 25, 0) 0, rgba(23, 23, 25, .96) 18px, #171719 100%); }
.packs-summary { color: var(--text-secondary); background: var(--wm-surface); }
.packs-summary .summary-text { color: var(--text-secondary); }
.packs-summary .summary-text strong { color: var(--wm-rose-text); }

/* Statement card: dark surface, crimson rail, a big crimson «?» in the corner, light-grey type. */
.statement-card {
  position: relative;
  overflow: hidden;
  background: var(--wm-surface);
  border: 1px solid rgba(228, 227, 229, .1);
  border-top: 6px solid var(--wm-crimson);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .4);
}
.statement-card::after {
  content: '?';
  position: absolute;
  right: 14px;
  bottom: -26px;
  font-size: 150px;
  font-weight: 900;
  line-height: 1;
  color: var(--wm-crimson);
  opacity: .4;
  pointer-events: none;
}
.card-header { position: relative; z-index: 1; color: var(--wm-rose-text); letter-spacing: .06em; }
.card-text { position: relative; z-index: 1; color: var(--wm-grey); }

/* Finale panel (shared ru-party-finale.js). */
body[data-rp-game="whosmostlikelyto"] #roomplay-local-finale { color: #fff; background: var(--wm-surface); border: 1px solid rgba(228, 227, 229, .12); }
body[data-rp-game="whosmostlikelyto"] #roomplay-local-finale p { color: var(--text-secondary); }
body[data-rp-game="whosmostlikelyto"] #roomplay-local-finale .rplf-kicker { color: var(--wm-rose-text); }
body[data-rp-game="whosmostlikelyto"] #roomplay-local-finale .rplf-primary { color: #fff; background: var(--wm-crimson); }
body[data-rp-game="whosmostlikelyto"] #roomplay-local-finale .rplf-secondary { color: #fff; background: rgba(228, 227, 229, .12); }

/* Settings popup and exit confirmation: surface sheets, crimson action.
   Colours go through the shared --rp-dialog-* tokens (assets/css/confirm-dialog.css). */
:root {
  --rp-dialog-overlay: rgba(10, 10, 12, .8);
  --rp-dialog-bg: var(--wm-surface);
  --rp-dialog-border: 1px solid rgba(228, 227, 229, .12);
  --rp-dialog-text: var(--text-secondary);
  --rp-dialog-primary-bg: var(--wm-crimson);
  --rp-dialog-secondary-border: rgba(228, 227, 229, .6);
  --rp-dialog-secondary-text: #fff;
  --rp-dialog-control-btn-bg: rgba(228, 227, 229, .12);
  --rp-dialog-toggle-bg: rgba(228, 227, 229, .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; off under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  :root { --wm-press: 100ms; --wm-settle: 240ms; --wm-spring: cubic-bezier(.2, .9, .3, 1.25); }
  button:not(:disabled) {
    transition: scale var(--wm-settle) var(--wm-spring), translate var(--wm-settle) var(--wm-spring),
      background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  }
  button:not(:disabled):active { scale: .96; translate: 0 2px; transition-duration: var(--wm-press); }
  .btn-back:active { scale: .88; }
  .dot { transition: background-color 180ms ease, width 300ms ease, scale 180ms var(--wm-spring); }
  .dot.active { scale: 1.12; }
  .onboarding-slide.active .slide-icon { animation: wm-character-arrive 380ms var(--wm-spring) both; }

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

  #players-screen.active .ps-entry { animation: wm-paper-arrive 280ms var(--wm-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; }

  #card-screen.active .statement-card { animation: wm-paper-arrive 280ms var(--wm-spring) both; }
  #card-screen.active .statement-card::after { animation: wm-mark-in 360ms var(--wm-spring) 120ms both; }
  .statement-card.wm-swap-out .card-text { animation: wm-text-out 130ms ease-in both; }
  .statement-card.wm-swap-in .card-text { animation: wm-text-in 240ms var(--wm-spring) both; }
  #card-screen.active .card-instruction { animation: wm-paper-arrive 280ms var(--wm-spring) 120ms both; }

  #gameover-screen.active .gameover-icon { animation: wm-nod 420ms ease-out 200ms both; }
  #gameover-screen.active .title { animation: wm-stamp-in 360ms var(--wm-spring) both; }
  .confirm-dialog-overlay.active .confirm-dialog-modal,
  .settings-popup-overlay.active .settings-popup-modal { animation: wm-paper-arrive 280ms var(--wm-spring); }
}
@keyframes wm-character-arrive { from { opacity: 0; scale: .82; rotate: -8deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes wm-pop { 0% { transform: scale(.965); } 55% { transform: scale(1.018); } 100% { transform: scale(1); } }
@keyframes wm-nod { 0%, 100% { rotate: 0deg; } 35% { rotate: -8deg; } 70% { rotate: 5deg; } }
@keyframes wm-paper-arrive { from { opacity: 0; translate: 0 12px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes wm-text-out { to { opacity: 0; translate: -18px 0; } }
@keyframes wm-text-in { from { opacity: 0; translate: 22px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes wm-stamp-in { from { opacity: 0; scale: 1.3; } to { opacity: 1; scale: 1; } }
@keyframes wm-mark-in { from { opacity: 0; scale: 1.3; rotate: -12deg; } to { opacity: .4; scale: 1; rotate: 0deg; } }

/* Pack choice arrow: COMMON/roomplay-palettes.html / whosmostlikelyto secondary #E4E3E5 (the accent is too dark for the ink outline). */
:root {
    --packs-cue-color: #E4E3E5;
}

/* Flat character covers (pack.activeImage): premium art stays full colour, small lock in the top-right corner. */
#packs-screen .pack-card.pack-card--flat-art.locked::after { opacity: 0; }
#packs-screen .pack-card.pack-card--flat-art.locked .pack-art { filter: none; }
#packs-screen .pack-card.pack-card--flat-art .pack-lock-image { top: 10px; right: 10px; left: auto; width: 34px; height: 34px; filter: drop-shadow(0 2px 6px rgba(23, 25, 31, .35)); }

/* «Сообщить об ошибке»: flag in the card's top-right corner, report sheet in the game palette. */
:root {
  --rp-report-surface: var(--wm-surface);
  --rp-report-text: #fff;
  --rp-report-muted: var(--text-secondary);
  --rp-report-line: rgba(228, 227, 229, .2);
  --rp-report-chip: rgba(228, 227, 229, .08);
  --rp-report-accent: var(--wm-crimson);
  --rp-report-accent-ink: #fff;
  --rp-report-error: var(--rp-wrong);
  --rp-report-flag: rgba(228, 227, 229, .45);
}
.wm-report-flag { position: absolute; top: 4px; right: 4px; z-index: 2; }
.statement-card:has(.wm-card-vote) { padding-bottom: 56px; }
.wm-card-vote { position: absolute; left: 0; right: 0; bottom: 4px; z-index: 2; }