/* Game Theme only. Palette: COMMON/roomplay-palettes.html / 5seconds («Ответь за 5 секунд»).
   bg #C3262E red (white text 5.8:1), surface #FFF9E8 cream (dark ink #17191F 16.7:1), accent #F6CF35 yellow
   (dark ink 11.6:1; as large glyphs on red 3.8:1), secondary #225BA7 blue (6.4:1 on cream, white on blue 6.7:1).
   Muted page text #FFE6E3 4.9:1 on red. Cards are cream with dark ink, so text inside them is set explicitly.
   Success/error keep their stock green/red, shown on dark ink pills or with dark ink labels. */
:root {
  /* Answer and gender tones: COMMON/roomplay-palettes.html / 5seconds (correct, wrong, male, female). */
  --rp-correct: #37830f;
  --rp-correct-ink: #ffffff;
  --rp-wrong: #c04732;
  --rp-wrong-ink: #ffffff;
  --rp-male: #225ba7;
  --rp-female: #a3245f;
  --bg-primary: #c3262e;
  --bg-secondary: #f2e7c9;
  --bg-card: #fff9e8;
  --text-primary: #ffffff;
  --text-secondary: #ffe6e3;
  --text-placeholder: #6f6a5c;
  --accent-pink: #f6cf35;
  --accent-pink-dark: #f6cf35;
  --accent-purple: #f6cf35;
  --accent-purple-dark: #f6cf35;
  --accent-blue: #225ba7;
  --accent-orange: #f6cf35;
  --accent-orange-dark: #f6cf35;
  --fs-ink: #17191f;
  --fs-ink-muted: #4a4636;
  --fs-cream: #fff9e8;
  --fs-cream-deep: #f2e7c9;
  --fs-yellow: #f6cf35;
  --fs-blue: #225ba7;
  --fs-red: #c3262e;
  --fs-red-deep: #8e1820;
  --onboarding-accent: #f6cf35;
  --onboarding-accent-dark: #f6cf35;
  --onboarding-shadow: transparent;
  --onboarding-shadow-hover: transparent;
  --settings-accent: #f6cf35;
  --settings-accent-dark: #f6cf35;
  --packs-accent: #f6cf35;
  --packs-feedback-rgb: 246, 207, 53;
  --ps-accent: #f6cf35;
}
html, body[data-rp-game="5seconds"], .page-loader { background: var(--bg-primary); }
.loader-spinner { border-color: rgba(255, 255, 255, .25); border-top-color: var(--fs-yellow); }

/* Actions: yellow primary with dark ink, white outline secondary. */
.btn-play,
.btn-next-slide,
.btn-start-timer { color: var(--fs-ink); background: var(--fs-yellow); box-shadow: none; }
/* Same pill shape as Play and «Следующий ход». */
.btn-start-timer { border-radius: 999px; }
@media (hover: hover) {
  .btn-play:hover,
  .btn-next-slide:hover,
  .btn-start-timer:hover { box-shadow: none; }
}
.btn-play:disabled { color: var(--fs-ink); background: rgba(255, 249, 232, .55); opacity: 1; }
.btn-skip,
.btn-additional-settings { color: #fff; border-color: rgba(255, 255, 255, .8); background: transparent; }
.btn-back { color: #fff; }
.dot { background: rgba(255, 255, 255, .38); }
.dot.active { background: var(--fs-yellow); }
.slide-title,
.title { color: #fff; }
.slide-text,
.subtitle,
.turn-hint,
.result-team { color: var(--text-secondary); }

/* Player setup: cream rows with dark ink. */
.ps-add-btn { color: #fff; border-color: var(--fs-yellow); }
@media (hover: hover) { .ps-add-btn:hover { color: var(--fs-ink); background: var(--fs-yellow); } }
.ps-entry { background: var(--fs-cream); --ps-card-ink: var(--fs-ink); --ps-card-muted: var(--fs-ink-muted); }
.ps-input { color: var(--fs-ink); }
.ps-input::placeholder { color: var(--text-placeholder); }
.ps-remove { color: var(--fs-ink-muted); }
@media (hover: hover) { .ps-remove:hover { color: var(--fs-red); } }
.ps-icon--avatar { color: var(--fs-ink); background: var(--fs-cream-deep); }
.ps-icon--filled { background: var(--fs-yellow); }
.ps-icon--empty { background: var(--fs-cream-deep); border-color: var(--fs-ink-muted); }
.ps-gender { background: var(--fs-cream-deep); color: var(--fs-ink-muted); }

/* Packs: the illustrated cards stay dark (art), the frame and the bottom fade follow the red page. */
#packs-screen .subtitle { color: var(--text-secondary); }
#packs-screen .pack-card,
#packs-screen .pack-card.premium.selected,
#packs-screen .pack-card.selected { background: #5e1015; }
#packs-screen .pack-card { border-color: rgba(255, 255, 255, .22); box-shadow: 0 10px 22px rgba(80, 8, 12, .3); }
#packs-screen .pack-card.selected,
#packs-screen .pack-card.premium.selected:not(.locked) { border-color: var(--fs-yellow); box-shadow: 0 0 0 2px rgba(246, 207, 53, .35); }
#packs-screen .pack-card.packs-touch-press:not(.locked) { box-shadow: 0 0 0 3px rgba(246, 207, 53, .4); }
#packs-screen .bottom-section { background: linear-gradient(180deg, rgba(195, 38, 46, 0) 0, rgba(195, 38, 46, .96) 18px, #c3262e 100%); }
.packs-summary { background: var(--fs-cream); }
.packs-summary .summary-text { color: var(--fs-ink-muted); }
.packs-summary .summary-text strong { color: var(--fs-blue); }

/* Turn: the player's name on a yellow card. */
.team-turn-card { background: var(--fs-yellow); box-shadow: none; }
.team-turn-name { color: var(--fs-ink); }

/* Round: blue player pill, cream question card, yellow timer balls and the blue «5» on a cream disc. */
.team-indicator { color: #fff; background: var(--fs-blue); }
.question-card { background: var(--fs-cream); box-shadow: none; }
.question-prefix { color: var(--fs-blue); font-weight: 700; }
.question-text { color: var(--fs-ink); }
.timer-ball { background: var(--fs-yellow); box-shadow: none; }
.timer-ball.empty { background: rgba(80, 8, 12, .32); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }
.timer-text { display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; line-height: 1; color: var(--fs-blue); background: var(--fs-cream); }
.timer-text.urgent { color: var(--fs-red); }
.btn-success { color: var(--fs-ink); background: var(--success); }
.btn-fail { color: var(--fs-ink); background: var(--error); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7); }

/* Result: stock green/red stay, placed on dark ink so they read on the red page. */
.result-icon.success,
.result-icon.fail { display: grid; place-items: center; width: 120px; height: 120px; margin: 20px auto; border-radius: 50%; font-size: 64px; line-height: 1; background: var(--fs-ink); }
.result-title.success,
.result-title.fail { display: table; margin: 0 auto 10px; padding: 6px 22px; border-radius: 999px; background: var(--fs-ink); }
.scoreboard { background: var(--fs-cream); }
.scoreboard-title { color: var(--fs-ink-muted); }
.score-item { color: var(--fs-ink); background: var(--fs-cream-deep); }
.score-item.leading { background: var(--fs-yellow); border-color: var(--fs-ink); }
.score-team-name { color: var(--fs-ink); }
.score-points { color: var(--fs-blue); }
.score-item.leading .score-points { color: var(--fs-ink); }

/* Final. */
.winner-name { color: var(--fs-yellow); }
.final-score-item { color: var(--fs-ink); background: var(--fs-cream); }
.final-team-name { color: var(--fs-ink); }
.final-score { color: var(--fs-blue); }
.final-position.other { color: var(--fs-ink); background: var(--fs-cream-deep); }
body[data-rp-game="5seconds"] #roomplay-local-finale { color: var(--fs-ink); background: var(--fs-cream); border: 0; }
body[data-rp-game="5seconds"] #roomplay-local-finale p { color: var(--fs-ink-muted); }
body[data-rp-game="5seconds"] #roomplay-local-finale .rplf-kicker { color: var(--fs-red); }
body[data-rp-game="5seconds"] #roomplay-local-finale .rplf-primary { color: #fff; background: var(--fs-blue); }
body[data-rp-game="5seconds"] #roomplay-local-finale .rplf-secondary { color: var(--fs-ink); background: var(--fs-cream-deep); }

/* Settings popup and exit confirmation: cream sheets with dark ink, yellow primary.
   Colours go through the shared --rp-dialog-* tokens (assets/css/confirm-dialog.css). */
body {
  --rp-dialog-overlay: rgba(60, 6, 10, .78);
  --rp-dialog-bg: var(--fs-cream);
  --rp-dialog-title: var(--fs-ink);
  --rp-dialog-text: var(--fs-ink-muted);
  --rp-dialog-primary-bg: var(--fs-yellow);
  --rp-dialog-primary-text: var(--fs-ink);
  --rp-dialog-secondary-border: var(--fs-ink);
  --rp-dialog-secondary-text: var(--fs-ink);
  --rp-dialog-control-btn-bg: rgba(23, 25, 31, .1);
  --rp-dialog-toggle-bg: rgba(23, 25, 31, .1);
}
.settings-popup-toggle:focus-visible { outline-color: var(--fs-ink); }
/* The exit confirmation keeps its red «Да, выйти» (the settings «Готово» is yellow). */
.confirm-dialog-btn-confirm { color: #fff; background: var(--fs-red); }

/* Onboarding: animated flat SVG scenes (static copies via <picture> for reduced motion). */
#onboarding-screen .slide-icon { width: min(240px, 55vw); margin: 0 auto 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: 700px) {
  #onboarding-screen .slide-icon { width: min(196px, 52vw); margin-bottom: 12px; }
}
@media (max-height: 600px) {
  #onboarding-screen .slide-icon { width: 120px; margin-bottom: 8px; }
}
/* Landscape phones: smaller scene and no reserved text height, so copy never runs into the dots. */
@media (max-height: 430px) {
  #onboarding-screen .slide-icon { width: 92px; margin-bottom: 4px; }
  #onboarding-screen .slide-text { min-height: 0; }
}

/* Light motion, same rhythm as «Я никогда не» (cutout-theme.css). Decorative only; never delays the 5-second timer. */
@media (prefers-reduced-motion: no-preference) {
  :root { --fs-press: 100ms; --fs-settle: 240ms; --fs-spring: cubic-bezier(.2, .9, .3, 1.25); }
  button:not(:disabled) {
    transition: scale var(--fs-settle) var(--fs-spring), translate var(--fs-settle) var(--fs-spring),
      background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  }
  button:not(:disabled):active { scale: .96; translate: 0 2px; transition-duration: var(--fs-press); }
  .btn-back:active { scale: .88; }
  .dot { transition: background-color 180ms ease, width 300ms ease, scale 180ms var(--fs-spring); }
  .dot.active { scale: 1.12; }
  .onboarding-slide.active .slide-icon { animation: fs-character-arrive 380ms var(--fs-spring) both; }

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

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

  #turn-screen.active .team-turn-card { animation: fs-stamp-in 360ms var(--fs-spring) both; }
  #game-screen.active .team-indicator { animation: fs-stamp-in 360ms var(--fs-spring) both; }
  #game-screen.active .question-card { animation: fs-paper-arrive 280ms var(--fs-spring) 60ms both; }
  .timer-ball { transition: background-color 300ms ease, scale 240ms var(--fs-spring); }
  .timer-ball.empty { scale: .82; }
  #game-screen.active .game-buttons .btn-success,
  #game-screen.active .game-buttons .btn-fail { animation: fs-pop-in 260ms var(--fs-spring) both; }
  #game-screen.active .game-buttons .btn-success { animation-delay: 40ms; }

  #result-screen.active .result-icon { animation: fs-stamp-in 360ms var(--fs-spring) both; }
  #result-screen.active .result-title { animation: fs-paper-arrive 280ms var(--fs-spring) 80ms both; }
  #result-screen.active .score-item { animation: fs-paper-arrive 280ms var(--fs-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: fs-nod 420ms ease-out 200ms both; }
  #final-screen.active .final-score-item { animation: fs-paper-arrive 280ms var(--fs-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: fs-paper-arrive 280ms var(--fs-spring); }
}
@media (prefers-reduced-motion: reduce) {
  .particles { display: none; }
}
@keyframes fs-character-arrive { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
@keyframes fs-pop { 0% { transform: scale(.965); } 55% { transform: scale(1.018); } 100% { transform: scale(1); } }
@keyframes fs-pop-in { from { opacity: 0; scale: .7; } to { opacity: 1; scale: 1; } }
@keyframes fs-nod { 0%, 100% { rotate: 0deg; } 35% { rotate: -8deg; } 70% { rotate: 5deg; } }
@keyframes fs-paper-arrive { from { opacity: 0; translate: 0 12px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes fs-stamp-in { from { opacity: 0; scale: 1.3; } to { opacity: 1; scale: 1; } }

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

/* Flat character pack covers (20261008-pack-art): premium covers stay full colour,
   the small flat lock sits in the top-right corner instead of the centred lock. */
#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)); }

/* Mode choice: cream paper cards with the flat blob cast (red player, blue/yellow team). */
.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; }
.mode-card { display: grid; grid-template-columns: 88px 1fr; column-gap: 16px; align-items: center; padding: 20px; border-radius: 20px; border: 2px solid transparent; background: var(--fs-cream); color: var(--fs-ink); cursor: pointer; text-align: left; transition: transform 160ms ease-out, border-color 160ms ease-out; }
.mode-card:active { transform: scale(.98); }
.mode-card:focus-visible { outline: 3px solid var(--fs-yellow); outline-offset: 3px; }
@media (hover: hover) { .mode-card:hover { border-color: var(--fs-yellow); } }
.mode-card-icon { grid-row: 1 / 3; width: 88px; height: 88px; }
.mode-card-icon .mode-art { display: block; width: 88px; height: 88px; overflow: visible; }
.mode-card-title { align-self: end; font-size: 20px; font-weight: 800; color: var(--fs-ink); overflow-wrap: anywhere; }
.mode-card-desc { align-self: start; margin-top: 4px; font-size: 16px; line-height: 1.4; color: var(--fs-ink-muted); }
.mode-fill-a { fill: var(--fs-red); }
.mode-fill-b { fill: var(--fs-blue); }
#mode-team .mode-fill-a { fill: var(--fs-yellow); }
.mode-pupil { fill: var(--fs-ink); }
.mode-mouth { stroke: var(--fs-ink); }
#mode-solo .mode-mouth { stroke: #fff; }
@media (max-width: 360px) {
  .mode-card { grid-template-columns: 64px 1fr; column-gap: 12px; padding: 16px; }
  .mode-card-icon, .mode-card-icon .mode-art { width: 64px; height: 64px; }
}
@media (prefers-reduced-motion: no-preference) {
  /* Whole blob breathes, eyes included, from its feet. */
  .mode-blob { transform-box: fill-box; transform-origin: 50% 100%; animation: fs-mode-breathe 2.4s ease-in-out infinite; }
  .mode-blob--late { animation-delay: -1.2s; }
  .mode-blob--side { animation-delay: -.6s; }
  @keyframes fs-mode-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.04, .95); } }
  .mode-card:active .mode-blob { animation: fs-mode-hop 320ms ease-out; }
  @keyframes fs-mode-hop { 0% { transform: scale(1.08, .88); } 55% { transform: translateY(-8%) scale(.96, 1.06); } 100% { transform: none; } }
}