/* Game Theme only. Palette: COMMON/roomplay-palettes.html / taboo.
   bg #54277B (purple, white text), surface #FFFFFF (ink #17191F), accent #CF4525 (onAccent #FFFFFF), secondary #F8CA34.
   Accent red is 2.3:1 on the purple, so it is used only as a fill (white text on it) or as text on white cards;
   highlight text on the purple uses the yellow secondary. Panels are a deep purple #3E1C5C. */
:root {
  /* Answer and gender tones: COMMON/roomplay-palettes.html / taboo (correct, wrong, male, female). */
  --rp-correct: #75c259;
  --rp-correct-ink: #17191f;
  --rp-wrong: #fe876c;
  --rp-wrong-ink: #17191f;
  --rp-male: #0a77cb;
  --rp-female: #b84379;
  --bg-primary: #54277b;
  --bg-secondary: #4a2270;
  --bg-card: #3e1c5c;
  --text-primary: #ffffff;
  --text-secondary: #d9c6ea;
  --text-placeholder: #b39bcb;
  --accent-purple: #cf4525;
  --accent-purple-dark: #cf4525;
  --accent-blue: #cf4525;
  --accent-pink: #f8ca34;
  --accent-pink-dark: #f8ca34;
  --accent-red: #cf4525;
  --accent-red-dark: #cf4525;
  --onboarding-accent: #cf4525;
  --onboarding-accent-dark: #cf4525;
  --onboarding-shadow: transparent;
  --onboarding-shadow-hover: transparent;
  --settings-accent: #cf4525;
  --settings-accent-dark: #cf4525;
  --packs-accent: #f8ca34;
  --packs-feedback-rgb: 248, 202, 52;
  --ps-accent: #cf4525;
  --warning: #f8ca34;
  --error: #ff8a80;
  --tabu-white: #ffffff;
  --tabu-ink: #17191f;
  --tabu-red: #cf4525;
  --tabu-yellow: #f8ca34;
  --tabu-panel: #3e1c5c;
  --tabu-lavender: #d9c6ea;
}
html, body[data-rp-game="taboo"], .page-loader { background: var(--bg-primary); }
body[data-rp-game="taboo"] { color: var(--text-primary); }
[data-rp-game="taboo"] .loader-spinner { border-color: rgba(255, 255, 255, .18); border-top-color: var(--tabu-yellow); }

/* Onboarding: existing flat cast (recoloured SVGs) and CSS props switched to the palette. */
[data-rp-game="taboo"] .taboo-reference.taboo-onboarding,
[data-rp-game="taboo"].taboo-illustrated-ru .taboo-reference.taboo-onboarding {
  --tb-coral: #ff7a5c;
  --tb-yellow: #f8ca34;
  --tb-pink: #ffb199;
  --tb-paper: #ffffff;
  --tb-blue: #d9c6ea;
  --tb-lime: #bfd775;
  --tb-cream: #ffffff;
  --tb-ink: #17191f;
}
[data-rp-game="taboo"] .slide-title { color: var(--tabu-white); }
[data-rp-game="taboo"] .slide-text { color: var(--tabu-lavender); }
[data-rp-game="taboo"] .dot,
[data-rp-game="taboo"] .taboo-onboarding .dot { background: rgba(255, 255, 255, .28); }
[data-rp-game="taboo"] .dot.active,
[data-rp-game="taboo"] .taboo-onboarding .dot.active::after { background: var(--tabu-yellow); }
[data-rp-game="taboo"] .btn-next-slide { color: #fff; background: var(--tabu-red); box-shadow: none; }
[data-rp-game="taboo"] .btn-skip { color: #fff; border-color: rgba(255, 255, 255, .7); }
[data-rp-game="taboo"] .btn-back { color: #fff; }

/* Primary actions: accent fill with white text. Secondary: white outline. */
[data-rp-game="taboo"] .btn-play { color: #fff; background: var(--tabu-red); box-shadow: none; }
[data-rp-game="taboo"] .btn-play:disabled { color: var(--tabu-lavender); background: var(--tabu-panel); opacity: 1; }
[data-rp-game="taboo"] .btn-additional-settings { color: #fff; border-color: #fff; background: transparent; }
[data-rp-game="taboo"] .title { color: #fff; }
[data-rp-game="taboo"] .subtitle { color: var(--tabu-lavender); }

/* Teams (shared player-setup). */
[data-rp-game="taboo"] .ps-add-btn { color: #fff; border-color: var(--tabu-yellow); }
[data-rp-game="taboo"] .settings-label { color: var(--tabu-lavender); }
[data-rp-game="taboo"] .score-btn { color: var(--tabu-yellow); border-color: var(--tabu-yellow); }

/* Packs (shared packs.css). */
[data-rp-game="taboo"] .packs-summary { color: #fff; background: var(--tabu-panel); }
[data-rp-game="taboo"] .packs-summary .summary-text { color: var(--tabu-lavender); }
[data-rp-game="taboo"] .packs-summary strong { color: var(--tabu-yellow); }
[data-rp-game="taboo"] .packs-illustrated-actions { background: linear-gradient(180deg, rgba(84, 39, 123, 0) 0%, var(--bg-primary) 14px); }
/* Premium covers stay at full colour; a flat corner lock in the Taboo palette replaces the centred glossy lock. */
[data-rp-game="taboo"] .packs-illustrated-grid .pack-card.locked .pack-art { filter: none; }
[data-rp-game="taboo"] .packs-illustrated-grid .pack-lock-image { top: 10px; left: auto; right: 10px; width: 34px; height: 34px; transform: none; filter: drop-shadow(0 2px 6px rgba(23, 25, 31, .35)); }

/* Turn. */
[data-rp-game="taboo"] .team-turn-card { background: var(--tabu-red); box-shadow: none; }
[data-rp-game="taboo"] .turn-hint { color: var(--tabu-lavender); }
[data-rp-game="taboo"] .turn-hint.secondary { color: var(--tabu-yellow); }

/* Game: the white Taboo card with red forbidden words. */
[data-rp-game="taboo"] .team-indicator { color: #fff; background: var(--tabu-red); }
[data-rp-game="taboo"] .timer-display { background: var(--tabu-panel); }
[data-rp-game="taboo"] .btn-pause { color: #fff; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .4); }
[data-rp-game="taboo"] .taboo-card { background: var(--tabu-white); box-shadow: 0 10px 0 rgba(23, 25, 31, .18); }
[data-rp-game="taboo"] .main-word { color: var(--tabu-ink); }
[data-rp-game="taboo"] .taboo-divider::after { background: var(--tabu-red); }
[data-rp-game="taboo"] .taboo-label { color: #fff; background: var(--tabu-red); }
[data-rp-game="taboo"] .taboo-word { color: var(--tabu-red); }
[data-rp-game="taboo"] .round-score-label { color: var(--tabu-lavender); }
[data-rp-game="taboo"] .btn-taboo { color: #fff; background: var(--tabu-red); }
[data-rp-game="taboo"] .btn-correct { color: var(--tabu-ink); background: var(--rp-correct); }
/* Answer buttons use the same pill shape and height as Play and «Следующий ход». */
[data-rp-game="taboo"] :is(.btn-taboo, .btn-correct) { min-height: 52px; border-radius: 999px; font-size: 15px; font-weight: 700; }
[data-rp-game="taboo"] .pause-overlay { background: rgba(62, 28, 92, .96); }
[data-rp-game="taboo"] .pause-overlay-text { color: #fff; }

/* Round result, scoreboard and final. */
[data-rp-game="taboo"] .result-summary,
[data-rp-game="taboo"] .scoreboard,
[data-rp-game="taboo"] .round-word-item,
[data-rp-game="taboo"] .final-score-item { color: #fff; background: var(--tabu-panel); }
[data-rp-game="taboo"] .result-team-name,
[data-rp-game="taboo"] .score-points,
[data-rp-game="taboo"] .final-score,
[data-rp-game="taboo"] .winner-name { color: var(--tabu-yellow); }
[data-rp-game="taboo"] .scoreboard-title { color: var(--tabu-lavender); }
[data-rp-game="taboo"] .score-item.leading { background: rgba(248, 202, 52, .14); border-color: var(--tabu-yellow); }
[data-rp-game="taboo"] .final-position.other { color: var(--tabu-lavender); background: rgba(255, 255, 255, .12); }
/* Shared local finale card (ru-party-finale.js injects its own <style>). */
[data-rp-game="taboo"] #roomplay-local-finale { border-color: rgba(255, 255, 255, .16); background: var(--tabu-panel); }
[data-rp-game="taboo"] #roomplay-local-finale p { color: var(--tabu-lavender); }
[data-rp-game="taboo"] #roomplay-local-finale .rplf-kicker { color: var(--tabu-yellow); }
[data-rp-game="taboo"] #roomplay-local-finale .rplf-primary { color: #fff; background: var(--tabu-red); }

/* Popups.
   Colours go through the shared --rp-dialog-* tokens (assets/css/confirm-dialog.css). */
[data-rp-game="taboo"] {
  --rp-dialog-overlay: rgba(36, 14, 56, .82);
  --rp-dialog-bg: var(--tabu-panel);
  --rp-dialog-border: 1px solid rgba(255, 255, 255, .14);
  --rp-dialog-text: var(--tabu-lavender);
  --rp-dialog-primary-bg: var(--tabu-red);
  --rp-dialog-secondary-border: #fff;
  --rp-dialog-secondary-text: #fff;
  --rp-dialog-control-bg: rgba(255, 255, 255, .1);
  --rp-dialog-control-btn-bg: rgba(255, 255, 255, .16);
  --rp-dialog-toggle-bg: rgba(255, 255, 255, .14);
}

/* Light motion, same rhythm as «Я никогда не» (cutout-theme.css). The onboarding props keep their own
   entrance choreography from styles.css. Never delays the timer, scoring or buttons; off under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  [data-rp-game="taboo"] {
    --tabu-press: 100ms;
    --tabu-settle: 240ms;
    --tabu-spring: cubic-bezier(.2, .9, .3, 1.25);
  }
  [data-rp-game="taboo"] button:not(:disabled) {
    transition: scale var(--tabu-settle) var(--tabu-spring), translate var(--tabu-settle) var(--tabu-spring),
      background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  }
  [data-rp-game="taboo"] button:not(:disabled):active { scale: .96; translate: 0 2px; transition-duration: var(--tabu-press); }
  [data-rp-game="taboo"] .btn-back:active { scale: .88; }
  [data-rp-game="taboo"] .dot { transition: background-color 180ms ease, scale 180ms var(--tabu-spring); }
  [data-rp-game="taboo"] .dot.active { scale: 1.12; }
  [data-rp-game="taboo"] .onboarding-slide.active .tb-character { animation: tabu-character-arrive 380ms var(--tabu-spring) both; }

  [data-rp-game="taboo"] .pack-card { transition: transform var(--tabu-settle) var(--tabu-spring), border-color 150ms ease; }
  [data-rp-game="taboo"] .pack-card.packs-touch-press:not(.locked) { transform: scale(.965); transition-duration: var(--tabu-press); }
  [data-rp-game="taboo"] .pack-card.packs-touch-pop:not(.locked) { animation: tabu-pop 320ms var(--tabu-spring); }
  [data-rp-game="taboo"] .pack-card.packs-touch-pop:not(.locked) :is(.pack-art, .pack-icon) { animation: tabu-nod 360ms ease-out; }

  [data-rp-game="taboo"] #turn-screen.active .team-turn-card { animation: tabu-stamp-in 360ms var(--tabu-spring) both; }
  [data-rp-game="taboo"] #game-screen.active .taboo-card { animation: tabu-paper-arrive 280ms var(--tabu-spring) both; }
  [data-rp-game="taboo"] #game-screen.active .taboo-word { animation: tabu-paper-arrive 280ms var(--tabu-spring) both; }
  [data-rp-game="taboo"] #game-screen.active .taboo-word:nth-child(2) { animation-delay: 30ms; }
  [data-rp-game="taboo"] #game-screen.active .taboo-word:nth-child(3) { animation-delay: 60ms; }
  [data-rp-game="taboo"] #game-screen.active .taboo-word:nth-child(4) { animation-delay: 90ms; }
  [data-rp-game="taboo"] #game-screen.active .taboo-word:nth-child(n+5) { animation-delay: 120ms; }

  [data-rp-game="taboo"] #result-screen.active .result-summary { animation: tabu-stamp-in 360ms var(--tabu-spring) both; }
  [data-rp-game="taboo"] #result-screen.active .round-word-item { animation: tabu-paper-arrive 280ms var(--tabu-spring) both; }
  [data-rp-game="taboo"] #result-screen.active .round-word-item:nth-child(2) { animation-delay: 40ms; }
  [data-rp-game="taboo"] #result-screen.active .round-word-item:nth-child(3) { animation-delay: 80ms; }
  [data-rp-game="taboo"] #result-screen.active .round-word-item:nth-child(4) { animation-delay: 120ms; }
  [data-rp-game="taboo"] #result-screen.active .round-word-item:nth-child(n+5) { animation-delay: 160ms; }
  [data-rp-game="taboo"] #result-screen.active .score-item { animation: tabu-paper-arrive 280ms var(--tabu-spring) both; }
  [data-rp-game="taboo"] #final-screen.active .winner-icon { animation: tabu-nod 420ms ease-out 200ms both; }
  [data-rp-game="taboo"] #final-screen.active .final-score-item { animation: tabu-paper-arrive 280ms var(--tabu-spring) both; }
  [data-rp-game="taboo"] #final-screen.active .final-score-item:nth-child(2) { animation-delay: 60ms; }
  [data-rp-game="taboo"] #final-screen.active .final-score-item:nth-child(3) { animation-delay: 120ms; }
  [data-rp-game="taboo"] #final-screen.active .final-score-item:nth-child(n+4) { animation-delay: 160ms; }
  [data-rp-game="taboo"] .confirm-dialog-overlay.active .confirm-dialog-modal,
  [data-rp-game="taboo"] .settings-popup-overlay.active .settings-popup-modal { animation: tabu-paper-arrive 280ms var(--tabu-spring); }
}
@keyframes tabu-character-arrive { from { opacity: 0; scale: .82; rotate: -10deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes tabu-pop { 0% { transform: scale(.965); } 55% { transform: scale(1.018); } 100% { transform: scale(1); } }
@keyframes tabu-nod { 0%, 100% { rotate: 0deg; } 35% { rotate: -8deg; } 70% { rotate: 5deg; } }
@keyframes tabu-paper-arrive { from { opacity: 0; translate: 0 12px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes tabu-stamp-in { from { opacity: 0; scale: 1.45; } to { opacity: 1; scale: 1; } }

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

/* Mode choice: deep purple panels with the flat blob cast (yellow player, red/yellow team). */
[data-rp-game="taboo"] .mode-cards { display: flex; flex-direction: column; justify-content: center; gap: 16px; flex: 1; width: 100%; max-width: 420px; margin: 0 auto; padding: 16px 0; }
[data-rp-game="taboo"] .mode-card { display: grid; grid-template-columns: 88px 1fr; column-gap: 16px; align-items: center; padding: 20px; border-radius: 20px; border: 2px solid rgba(255, 255, 255, .12); background: var(--tabu-panel); color: var(--tabu-white); cursor: pointer; text-align: left; transition: transform 160ms ease-out, border-color 160ms ease-out; }
[data-rp-game="taboo"] .mode-card:active { transform: scale(.98); }
[data-rp-game="taboo"] .mode-card:focus-visible { outline: 3px solid var(--tabu-yellow); outline-offset: 3px; }
@media (hover: hover) { [data-rp-game="taboo"] .mode-card:hover { border-color: var(--tabu-yellow); } }
[data-rp-game="taboo"] .mode-card-icon { grid-row: 1 / 3; width: 88px; height: 88px; }
[data-rp-game="taboo"] .mode-card-icon .mode-art { display: block; width: 88px; height: 88px; overflow: visible; }
[data-rp-game="taboo"] .mode-card-title { align-self: end; font-size: 20px; font-weight: 800; color: var(--tabu-white); overflow-wrap: anywhere; }
[data-rp-game="taboo"] .mode-card-desc { align-self: start; margin-top: 4px; font-size: 16px; line-height: 1.4; color: var(--tabu-lavender); }
[data-rp-game="taboo"] .mode-fill-a { fill: var(--tabu-yellow); }
[data-rp-game="taboo"] .mode-fill-b { fill: var(--tabu-red); }
[data-rp-game="taboo"] .mode-pupil { fill: var(--tabu-ink); }
[data-rp-game="taboo"] .mode-mouth { stroke: var(--tabu-ink); }
@media (max-width: 360px) {
  [data-rp-game="taboo"] .mode-card { grid-template-columns: 64px 1fr; column-gap: 12px; padding: 16px; }
  [data-rp-game="taboo"] .mode-card-icon, [data-rp-game="taboo"] .mode-card-icon .mode-art { width: 64px; height: 64px; }
}
@media (prefers-reduced-motion: no-preference) {
  /* Whole blob breathes, eyes included, from its feet. */
  [data-rp-game="taboo"] .mode-blob { transform-box: fill-box; transform-origin: 50% 100%; animation: tb-mode-breathe 2.4s ease-in-out infinite; }
  [data-rp-game="taboo"] .mode-blob--late { animation-delay: -1.2s; }
  [data-rp-game="taboo"] .mode-blob--side { animation-delay: -.6s; }
  @keyframes tb-mode-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.04, .95); } }
  [data-rp-game="taboo"] .mode-card:active .mode-blob { animation: tb-mode-hop 320ms ease-out; }
  @keyframes tb-mode-hop { 0% { transform: scale(1.08, .88); } 55% { transform: translateY(-8%) scale(.96, 1.06); } 100% { transform: none; } }
}