/* Game Theme palette layer, loaded after scribble-theme.css. Palette: COMMON/roomplay-palettes.html / crocodile («Нарисуй и угадай»).
   bg #93DCEB sky (ink #17191F 11.4:1), surface #FFFFFF, accent #487B18 croc green (white text 5.1:1; fills only on the sky,
   as text it is 3.3:1 so text uses #2F5410: 5.7:1 on sky, 8.8:1 on white), secondary #B4D846 lime (ink 10.8:1).
   Muted text #33404A: 6.9:1 on sky, 10.6:1 on white. Error text #9A1F35 5.2:1 on sky; success #14704E with white 6.1:1.
   The scribble characters and the Remotion/fallback onboarding scenes are unchanged; only colours move to the palette. */
:root {
  /* Answer and gender tones: COMMON/roomplay-palettes.html / crocodile (correct, wrong, male, female). */
  --rp-correct: #487b18;
  --rp-correct-ink: #ffffff;
  --rp-wrong: #9a1f35;
  --rp-wrong-ink: #ffffff;
  --rp-male: #1d5a94;
  --rp-female: #ae3a70;
  color-scheme: light;
  --bg-primary: #93dceb;
  --bg-secondary: #c4ecf5;
  --bg-card: #ffffff;
  --text-primary: #17191f;
  --text-secondary: #33404a;
  --text-placeholder: #4f5d66;
  --game-accent: #487b18;
  --game-accent-strong: #487b18;
  --accent-cyan: #2f5410;
  --accent-cyan-dark: #2f5410;
  --accent-pink: #487b18;
  --accent-pink-dark: #487b18;
  --accent-purple: #487b18;
  --accent-purple-dark: #487b18;
  --accent-blue: #487b18;
  --error: #9a1f35;
  --scribble-line: #5fb3c8;
  --cr-ink: #17191f;
  --cr-green: #487b18;
  --cr-green-text: #2f5410;
  --cr-lime: #b4d846;
  --cr-lime-soft: #eef7d6;
  --onboarding-accent: #487b18;
  --onboarding-accent-dark: #487b18;
  --onboarding-shadow: transparent;
  --onboarding-shadow-hover: transparent;
  --settings-accent: #487b18;
  --settings-accent-dark: #487b18;
  --packs-accent: #487b18;
  --packs-feedback-rgb: 72, 123, 24;
  --ps-accent: #487b18;
}
html, body[data-rp-game="crocodile"], .page-loader { background: var(--bg-primary); }
.loader-spinner { border-color: rgba(23, 25, 31, .14); border-top-color: var(--cr-green); }
.btn-back { color: var(--cr-ink); }

/* Actions: croc-green primary with white text; white-filled secondary with an ink outline. */
.btn-play, .btn-next-slide, .btn-show-canvas { color: #fff; background: var(--cr-green); }
.btn-play:hover, .btn-next-slide:hover, .btn-show-canvas:hover { background: var(--cr-green-text); }
.btn-play:disabled, .btn-show-canvas:disabled { color: var(--text-secondary); background: var(--bg-secondary); }
.btn-skip { color: var(--cr-ink); background: #fff; border: 1px solid rgba(23, 25, 31, .35); }
.btn-additional-settings { color: var(--cr-ink); background: transparent; border-color: var(--cr-ink); }
.ps-add-btn { color: var(--cr-ink); background: #fff; border-color: var(--cr-green); }
@media (hover: hover) { .ps-add-btn:hover { color: #fff; background: var(--cr-green); } }
.dot { background: rgba(23, 25, 31, .22); }
.dot.active { background: var(--cr-green); }

/* Mode, player rows, packs. */
.mode-card { border-color: var(--scribble-line); }
.mode-card:hover { border-color: var(--cr-green); }
.ps-entry { background: #fff; border-color: var(--scribble-line); }
.ps-icon--filled { background: var(--cr-lime); }
#packs-screen .pack-card.selected,
#packs-screen .pack-card.premium.selected { background: var(--cr-lime-soft); border-color: var(--cr-green); }
#packs-screen .pack-card.selected::before { color: #fff; background: var(--cr-green); }
.packs-summary { background: #fff; }
.packs-summary .summary-text strong { color: var(--cr-green-text); }

/* Word card: white front, lime back with dark ink. */
.word-flip-card-back { background: var(--cr-lime); color: var(--cr-ink); }
.word-flip-card-back .word-text { color: var(--cr-ink); }

/* Canvas: green timer bar, ink tools on white; drawing colours are untouched. */
.timer-progress-bar { background: var(--cr-green); }
.timer-progress-bar.timer-warning { background: var(--error); }
.tool-btn { color: var(--cr-ink); background: #fff; }
.tool-btn.active { color: #fff; background: var(--cr-green); border-color: var(--cr-green); }
.brush-size-btn { background: #fff; }
.brush-size-btn.active { border-color: var(--cr-green); }
.color-btn.active { outline-color: var(--cr-green); }
.btn-pause { color: var(--cr-ink); background: #fff; border-color: rgba(23, 25, 31, .35); }

/* Results. */
.score-item.leading { background: var(--cr-lime-soft); border-color: var(--cr-green); }
.stat { background: #fff; }

/* Finale panel (shared ru-party-finale.js) on a white sheet. */
body[data-rp-game="crocodile"] #roomplay-local-finale { color: var(--cr-ink); background: #fff; border: 1px solid var(--scribble-line); }
body[data-rp-game="crocodile"] #roomplay-local-finale p { color: var(--text-secondary); }
body[data-rp-game="crocodile"] #roomplay-local-finale .rplf-kicker { color: var(--cr-green-text); }
body[data-rp-game="crocodile"] #roomplay-local-finale .rplf-primary { color: #fff; background: var(--cr-green); }
body[data-rp-game="crocodile"] #roomplay-local-finale .rplf-secondary { color: var(--cr-ink); background: var(--cr-lime-soft); }

/* Settings popup and exit confirmation: white sheets with dark ink, green primary
   (replaces the dark modal override). Colours go through the shared --rp-dialog-* tokens
   (assets/css/confirm-dialog.css); dialog buttons share the 16 px corners of every other Crocodile button. */
:root {
  --rp-dialog-overlay: rgba(23, 25, 31, .55);
  --rp-dialog-bg: #fff;
  --rp-dialog-title: var(--cr-ink);
  --rp-dialog-text: var(--text-secondary);
  --rp-dialog-primary-bg: var(--cr-green);
  --rp-dialog-btn-radius: 16px;
  --rp-dialog-secondary-border: var(--cr-ink);
  --rp-dialog-secondary-text: var(--cr-ink);
  --rp-dialog-control-btn-bg: rgba(23, 25, 31, .08);
  --rp-dialog-toggle-bg: rgba(23, 25, 31, .1);
}
.settings-popup-toggle:focus-visible { outline-color: var(--cr-ink); }
/* The exit confirmation keeps its red «Да, выйти» (the settings «Готово» is green). */
.confirm-dialog-btn-confirm { background: var(--error); }

/* Light motion, same rhythm as «Я никогда не» (cutout-theme.css); adds to scribble-theme's arrivals.
   Never on the drawing canvas (stable geometry); off under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  :root { --cr-press: 100ms; --cr-settle: 240ms; --cr-spring: cubic-bezier(.2, .9, .3, 1.25); }
  button:not(:disabled) {
    transition: scale var(--cr-settle) var(--cr-spring), translate var(--cr-settle) var(--cr-spring),
      background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  }
  button:not(:disabled):active { scale: .96; translate: 0 2px; transition-duration: var(--cr-press); }
  .btn-play:not(:disabled):active, .btn-show-canvas:not(:disabled):active, .btn-next-slide:active, .tool-btn:active { transform: none; }
  .btn-back:active { scale: .88; }
  .dot { transition: background-color 180ms ease, width 300ms ease, scale 180ms var(--cr-spring); }
  .dot.active { scale: 1.12; }
  .onboarding-slide.active .slide-icon { animation: cr-character-arrive 380ms var(--cr-spring) both; }

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

  #players-screen.active .ps-entry, #teams-screen.active .ps-entry { animation: cr-paper-arrive 280ms var(--cr-spring) both; }
  #players-screen.active .ps-entry:nth-child(2), #teams-screen.active .ps-entry:nth-child(2) { animation-delay: 40ms; }
  #players-screen.active .ps-entry:nth-child(3), #teams-screen.active .ps-entry:nth-child(3) { animation-delay: 80ms; }
  #players-screen.active .ps-entry:nth-child(4), #teams-screen.active .ps-entry:nth-child(4) { animation-delay: 120ms; }
  #players-screen.active .ps-entry:nth-child(n+5), #teams-screen.active .ps-entry:nth-child(n+5) { animation-delay: 160ms; }
  #ready-screen.active .drawer-name, #turn-screen.active .team-turn-name { animation: cr-stamp-in 360ms var(--cr-spring) 120ms both; }
  .word-flip-card { transition-timing-function: var(--cr-spring); }
  .word-flip-card.flipped .word-text { animation: cr-stamp-in 360ms var(--cr-spring) 200ms both; }
  #round-results-screen.active .stat-value { animation: cr-stamp-in 360ms var(--cr-spring) 120ms both; }
  #final-screen.active .result-item { animation: cr-paper-arrive 280ms var(--cr-spring) both; }
  #final-screen.active .result-item:nth-child(2) { animation-delay: 60ms; }
  #final-screen.active .result-item:nth-child(3) { animation-delay: 120ms; }
  #final-screen.active .result-item:nth-child(n+4) { animation-delay: 160ms; }
  .confirm-dialog-overlay.active .confirm-dialog-modal,
  .settings-popup-overlay.active .settings-popup-modal { animation: cr-paper-arrive 280ms var(--cr-spring); }
}
@keyframes cr-character-arrive { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
@keyframes cr-pop { 0% { transform: scale(.965); } 55% { transform: scale(1.018); } 100% { transform: scale(1); } }
@keyframes cr-nod { 0%, 100% { rotate: 0deg; } 35% { rotate: -8deg; } 70% { rotate: 5deg; } }
@keyframes cr-paper-arrive { from { opacity: 0; translate: 0 12px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes cr-stamp-in { from { opacity: 0; scale: 1.3; } to { opacity: 1; scale: 1; } }

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

/* Flat character pack covers (20261008-pack-art): the square scene fills the top of the card edge to edge. */
#packs-screen .pack-card.pack-card--flat-art .pack-art { inset: 0 0 auto; width: 100%; height: 112px; object-fit: cover; object-position: 50% 50%; border-radius: 23px 15px 0 0; }
#packs-screen .pack-card.pack-card--flat-art .pack-lock-image { top: 8px; right: 8px; left: auto; width: 28px; height: 28px; filter: drop-shadow(0 2px 6px rgba(23, 25, 31, .35)); }