/* Game Theme only. Palette: COMMON/roomplay-palettes.html / decoder («Декодер»), a LIGHT analog-console palette.
   bg #EAE5D9 (cream, ink #17191F), surface #FCFAF2, accent #B62F35 (red, white text), secondary #266A8B (blue, white text).
   Team A stays red and team B stays blue (palette red/blue); intercept green and miscommunication red are darkened
   (#1B7A3E / #B3261E) so they keep their meaning and stay readable on cream. */
:root {
  /* Answer and gender tones: COMMON/roomplay-palettes.html / decoder (correct, wrong, male, female). */
  --rp-correct: #1b7a3e;
  --rp-correct-ink: #ffffff;
  --rp-wrong: #b3261e;
  --rp-wrong-ink: #ffffff;
  --rp-male: #276b8c;
  --rp-female: #ab366e;
  --bg-primary: #eae5d9;
  --bg-secondary: #ddd6c6;
  --bg-card: #fcfaf2;
  --text-primary: #17191f;
  --text-secondary: #5a5446;
  --text-placeholder: #6b6455;
  --accent-purple: #b62f35;
  --accent-purple-dark: #b62f35;
  --accent-blue: #266a8b;
  --accent-pink: #b62f35;
  --accent-pink-dark: #b62f35;
  --team-a: #b62f35;
  --team-a-dark: #8f2328;
  --team-b: #266a8b;
  --team-b-dark: #1d526c;
  --intercept-green: #1b7a3e;
  --miscom-red: #b3261e;
  --success: #1b7a3e;
  --error: #b3261e;
  --onboarding-accent: #b62f35;
  --onboarding-accent-dark: #b62f35;
  --onboarding-shadow: transparent;
  --onboarding-shadow-hover: transparent;
  --settings-accent: #b62f35;
  --settings-accent-dark: #b62f35;
  --packs-accent: #b62f35;
  --packs-feedback-rgb: 182, 47, 53;
  --ps-accent: #b62f35;
  --dc-ink: #17191f;
  --dc-line: rgba(23, 25, 31, .16);
  --dc-line-strong: rgba(23, 25, 31, .38);
  --dc-red: #b62f35;
  --dc-blue: #266a8b;
  --dc-ochre: #e0a43a;
}
html, body, .page-loader { background: var(--bg-primary); }
body { color: var(--dc-ink); }
.loader-spinner { border-color: rgba(23, 25, 31, .14); border-top-color: var(--dc-red); }

/* Actions: red primary with white text, ink outline secondary. */
.btn-play,
.btn-next-slide,
.btn-next-round { color: #fff; background: var(--dc-red); box-shadow: none; }
.btn-play:disabled { color: var(--text-secondary); background: var(--bg-secondary); opacity: 1; }
.btn-skip { color: var(--dc-ink); border-color: var(--dc-line-strong); }
@media (hover: hover) {
  .btn-skip:hover { color: var(--dc-ink); border-color: var(--dc-ink); }
  .btn-next-round:hover { box-shadow: none; }
}
.dot { background: rgba(23, 25, 31, .2); }
.dot.active { background: var(--dc-red); }
.decoder-dot::after { background: rgba(23, 25, 31, .2); }
.decoder-dot.active::after { background: var(--dc-red); }
.decoder-dot:focus-visible { outline-color: var(--dc-blue); }

/* Packs. */
.packs-summary { background: var(--bg-card); border: 1px solid var(--dc-line); }
.summary-text strong { color: var(--dc-red); }
.packs-illustrated-grid { --packs-accent: #b62f35; --packs-feedback-rgb: 182, 47, 53; }

/* Team and code setup. */
.team-card { background: var(--bg-card); border-color: var(--dc-line); }
.team-card-desc { color: var(--text-secondary); }
.code-digit { color: var(--dc-ink); background: var(--bg-card); border-color: var(--dc-line-strong); caret-color: var(--dc-red); }
.code-digit:focus { border-color: var(--dc-red); box-shadow: 0 0 0 3px rgba(182, 47, 53, .18); }
.btn-random-code { color: var(--dc-ink); border-color: var(--dc-line-strong); }
@media (hover: hover) { .btn-random-code:hover { color: var(--dc-ink); border-color: var(--dc-ink); } }

/* Round screen: paper cards with hairlines like printed console panels. */
.score-block { background: var(--bg-card); }
.score-block.our-score { border-color: var(--dc-line-strong); }
.score-block.enemy-score { border-color: var(--dc-line); background: var(--bg-secondary); opacity: 1; }
.word-card .word-number { opacity: 1; }
.opponent-clues .clue-section-title { opacity: 1; }
.word-card { background: var(--bg-card); }
.team-A .word-card { border-color: rgba(182, 47, 53, .45); }
.team-B .word-card { border-color: rgba(38, 106, 139, .45); }
.btn-show-code { color: var(--dc-ink); background: var(--bg-secondary); border-color: var(--dc-line-strong); }
@media (hover: hover) { .btn-show-code:hover { background: var(--bg-card); border-color: var(--dc-ink); } }
/* Icons instead of emoji (ui-icons.css, answer-marks.css): team dot, dice, eye, list, ✓ / ✕ tokens. */
.team-card-dot { display: block; width: 1em; height: 1em; margin: 0 auto; border-radius: 50%; background: var(--team-a); }
.team-b-card .team-card-dot { background: var(--team-b); }
.btn-random-code { --rp-icon-before: var(--rp-icon-dice); }
.btn-show-code { --rp-icon-before: var(--rp-icon-eye); }
.btn-history-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--dc-ink); font-size: 24px; }
.btn-score.btn-intercept { --rp-icon-before: var(--rp-icon-check); }
.btn-score.btn-miscom { --rp-icon-before: var(--rp-icon-cross); }
.btn-score.rp-icon-before::before { width: 1em; height: 1em; margin-right: .3em; vertical-align: -.14em; }
.token, .gameover-score-value { display: inline-flex; align-items: center; gap: 4px; }
.token .rp-mark, .gameover-score-value .rp-mark { width: .95em; height: .95em; }
.gameover-score-value .rp-mark { color: var(--intercept-green); }
.gameover-score-value .rp-mark--wrong { color: var(--miscom-red); }
.gameover-icon .rp-icon--sad, .gameover-icon .rp-icon--users { color: var(--dc-ink); }
.clue-input { color: var(--dc-ink); background: var(--bg-card); border-color: var(--dc-line-strong); }
.clue-input:focus { border-color: var(--dc-red); }
.clue-input::placeholder { color: var(--text-placeholder); }
.btn-save-clues,
.btn-open-scoring { color: var(--dc-ink); background: var(--bg-card); border-color: var(--dc-line-strong); }
@media (hover: hover) {
  .btn-save-clues:hover,
  .btn-open-scoring:hover { background: var(--bg-secondary); border-color: var(--dc-red); }
}
.scoring-overlay { background: rgba(23, 25, 31, .72); }
.scoring-overlay-content { background: var(--bg-card); border: 0; box-shadow: none; }
.btn-intercept { background: rgba(27, 122, 62, .12); }
.btn-miscom { background: rgba(179, 38, 30, .1); }
.btn-close-scoring { color: var(--dc-ink); border-color: var(--dc-line-strong); }
@media (hover: hover) { .btn-close-scoring:hover { color: var(--dc-ink); border-color: var(--dc-red); } }
.code-overlay { background: rgba(234, 229, 217, .97); }
.code-digit-display { color: var(--dc-red); background: var(--bg-card); border-color: var(--dc-red); box-shadow: none; }

/* History table. */
.history-table thead tr { background: var(--bg-secondary); }
.history-table th { border-bottom-color: var(--dc-line); }
.history-table tbody tr { border-bottom-color: var(--dc-line); }
.history-table tbody tr:nth-child(even) { background: rgba(23, 25, 31, .035); }
.history-td-empty { color: rgba(23, 25, 31, .35); }

/* RU party finale card (injected by ru-party-finale.js). */
body #roomplay-local-finale { color: var(--dc-ink); background: var(--bg-card); border-color: var(--dc-line); }
body #roomplay-local-finale p { color: var(--text-secondary); }
body #roomplay-local-finale .rplf-kicker { color: var(--dc-red); }
body #roomplay-local-finale .rplf-primary { color: #fff; background: var(--dc-red); }
body #roomplay-local-finale .rplf-secondary { color: var(--dc-ink); background: var(--bg-secondary); }

/* Legacy (non-RU) 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 { --dc-press: 100ms; --dc-settle: 240ms; --dc-spring: cubic-bezier(.2, .9, .3, 1.25); }
  button:not(:disabled) {
    transition: scale var(--dc-settle) var(--dc-spring), translate var(--dc-settle) var(--dc-spring),
      background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  }
  button:not(:disabled):active { scale: .96; translate: 0 2px; transition-duration: var(--dc-press); }
  :is(.btn-back, .btn-back-game, .btn-history-toggle):active { scale: .88; }
  .dot { transition: background-color 180ms ease, scale 180ms var(--dc-spring); }
  .dot.active { scale: 1.12; }
  .onboarding-slide.active .slide-icon { animation: dc-character-arrive 380ms var(--dc-spring) both; }

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

  #team-screen.active .team-card { animation: dc-paper-arrive 280ms var(--dc-spring) both; }
  #team-screen.active .team-card:nth-child(2) { animation-delay: 70ms; }
  #code-screen.active .code-digit { animation: dc-stamp-in 320ms var(--dc-spring) both; }
  #code-screen.active .code-digit:nth-child(2) { animation-delay: 40ms; }
  #code-screen.active .code-digit:nth-child(3) { animation-delay: 80ms; }
  #code-screen.active .code-digit:nth-child(4) { animation-delay: 120ms; }

  /* Round: the four secret words are dealt like cards, the clue panels slide in. */
  #game-screen.active .word-card { animation: dc-paper-arrive 280ms var(--dc-spring) both; }
  #game-screen.active .word-card:nth-child(2) { animation-delay: 40ms; }
  #game-screen.active .word-card:nth-child(3) { animation-delay: 80ms; }
  #game-screen.active .word-card:nth-child(4) { animation-delay: 120ms; }
  #game-screen.active .clue-section { animation: dc-paper-arrive 280ms var(--dc-spring) 60ms both; }
  #game-screen.active .opponent-clues { animation-delay: 120ms; }
  .scoring-overlay.active .scoring-overlay-content { animation: dc-paper-arrive 280ms var(--dc-spring); }
  .code-overlay.active .code-digit-display { animation: dc-stamp-in 360ms var(--dc-spring) both; }
  .code-overlay.active .code-digit-display:nth-child(3) { animation-delay: 60ms; }
  .code-overlay.active .code-digit-display:nth-child(5) { animation-delay: 120ms; }

  #history-screen.active .history-team-section { animation: dc-paper-arrive 280ms var(--dc-spring) both; }
  #history-screen.active .history-team-section:nth-child(2) { animation-delay: 80ms; }
  #gameover-screen.active .gameover-icon { animation: dc-nod 420ms ease-out 200ms both; }
  #gameover-screen.active .gameover-title { animation: dc-stamp-in 360ms var(--dc-spring) both; }
  #gameover-screen.active .gameover-score-item { animation: dc-paper-arrive 280ms var(--dc-spring) 80ms both; }
}
@keyframes dc-character-arrive { from { opacity: 0; scale: .82; rotate: -10deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes dc-pop { 0% { transform: scale(.965); } 55% { transform: scale(1.018); } 100% { transform: scale(1); } }
@keyframes dc-nod { 0%, 100% { rotate: 0deg; } 35% { rotate: -8deg; } 70% { rotate: 5deg; } }
@keyframes dc-paper-arrive { from { opacity: 0; translate: 0 12px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes dc-stamp-in { from { opacity: 0; scale: 1.3; } to { opacity: 1; scale: 1; } }

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

/* Shared dialogs (back confirmation, «Дополнительные настройки») on the cream console sheet
   instead of the default dark navy: ink text, red confirm/done, ink-outlined cancel.
   Colours go through the shared --rp-dialog-* tokens (assets/css/confirm-dialog.css). */
[data-rp-game="decoder"] {
  --rp-dialog-overlay: rgba(23, 25, 31, .55);
  --rp-dialog-bg: var(--bg-card);
  --rp-dialog-border: 1px solid #cfc6b2;
  --rp-dialog-shadow: 0 18px 48px rgba(23, 25, 31, .22);
  --rp-dialog-title: var(--text-primary);
  --rp-dialog-text: var(--text-secondary);
  --rp-dialog-primary-bg: var(--team-a);
  --rp-dialog-secondary-border: var(--text-primary);
  --rp-dialog-secondary-text: var(--text-primary);
  --rp-dialog-control-bg: var(--bg-primary);
  --rp-dialog-control-btn-bg: var(--bg-card);
  --rp-dialog-toggle-bg: var(--bg-primary);
}
[data-rp-game="decoder"] :is(.confirm-dialog-overlay, .settings-popup-overlay) { color-scheme: light; }
[data-rp-game="decoder"] .settings-popup-btn { border: 1px solid #cfc6b2; }
[data-rp-game="decoder"] .settings-popup-toggle:focus-visible { outline-color: var(--text-primary); }

/* Game-screen buttons use the same pill shape as Play and the other Decoder buttons (they had 14/16 px corners). */
[data-rp-game="decoder"] :is(.btn-save-clues, .btn-open-scoring, .btn-show-code) { border-radius: 999px; }