/* Game Theme only. Palette: COMMON/roomplay-palettes.html / imaginarium (amber box).
   bg #DE781B (ink #17191F text 5.7:1), surface #FFF0CA (cream, ink text), accent #422C35 (dark ink, white text 12.8:1), secondary #72B3D9 (sky, small details, ink text).
   Lists (players, scores, reveal rows) sit on ink panels like the box title plate, so stock success/error stay readable. Card artwork is never recoloured. */
:root {
  /* Answer and gender tones: COMMON/roomplay-palettes.html / imaginarium (correct, wrong, male, female). */
  --rp-correct: #a0c892;
  --rp-correct-ink: #17191f;
  --rp-wrong: #dc9789;
  --rp-wrong-ink: #17191f;
  --rp-male: #05405a;
  --rp-female: #622a42;
  --bg-primary: #de781b;
  --bg-secondary: #422c35;
  --bg-card: #fff0ca;
  --text-primary: #17191f;
  --text-secondary: #2b1e14;
  --text-placeholder: #7a6650;
  --accent-purple: #422c35;
  --accent-purple-dark: #422c35;
  --accent-blue: #422c35;
  --accent-pink: #422c35;
  --accent-pink-dark: #422c35;
  --accent-primary: #422c35;
  --accent-primary-dark: #422c35;
  --accent-secondary: #422c35;
  --im-ink: #422c35;
  --im-text: #17191f;
  --im-cream: #fff0ca;
  --im-sky: #72b3d9;
  --im-on-ink: #ffffff;
  --im-on-ink-muted: #e6dcc9;
  --settings-accent: #422c35;
  --settings-accent-dark: #422c35;
  --onboarding-accent: #422c35;
  --onboarding-accent-dark: #422c35;
  --onboarding-shadow: transparent;
  --onboarding-shadow-hover: transparent;
  --packs-accent: #422c35;
  --packs-feedback-rgb: 66, 44, 53;
  --ps-accent: #422c35;
}
html, body[data-rp-game="imaginarium"], .page-loader { background: var(--bg-primary); }
body[data-rp-game="imaginarium"] { color: var(--im-text); }
[data-rp-game="imaginarium"] .loader-spinner { border-color: rgba(66, 44, 53, .2); border-top-color: var(--im-ink); }

/* Actions: ink primary with white text, ink outline secondary. */
[data-rp-game="imaginarium"] .btn-play,
[data-rp-game="imaginarium"] .btn-next-slide,
[data-rp-game="imaginarium"] .btn-join.active { color: var(--im-on-ink); background: var(--im-ink); border-color: transparent; box-shadow: none; }
[data-rp-game="imaginarium"] .btn-play:hover { box-shadow: none; }
[data-rp-game="imaginarium"] .btn-play:disabled { color: var(--im-ink); background: rgba(66, 44, 53, .2); opacity: 1; }
[data-rp-game="imaginarium"] .btn-skip,
[data-rp-game="imaginarium"] .btn-join,
[data-rp-game="imaginarium"] .btn-play.outlined { color: var(--im-text); border-color: var(--im-ink); background: transparent; }
[data-rp-game="imaginarium"] .btn-back { color: var(--im-text); }
[data-rp-game="imaginarium"] .btn-copy { color: var(--im-ink); background: var(--im-cream); border-color: transparent; }
[data-rp-game="imaginarium"] .btn-additional-settings { color: var(--im-text); border-color: var(--im-ink); }
[data-rp-game="imaginarium"] .btn-additional-settings:hover { background: rgba(66, 44, 53, .1); }
[data-rp-game="imaginarium"] .dot { background: rgba(66, 44, 53, .28); }
[data-rp-game="imaginarium"] .dot.active { background: var(--im-ink); }
[data-rp-game="imaginarium"] .input { color: var(--im-text); background: var(--im-cream); }
[data-rp-game="imaginarium"] .input::placeholder { color: var(--text-placeholder); }
[data-rp-game="imaginarium"] .input:focus { border-color: var(--im-ink); }

/* Packs (illustrated grid): art untouched. */
[data-rp-game="imaginarium"] #packs-grid { --packs-accent: #422c35 !important; --packs-feedback-rgb: 66, 44, 53 !important; }
[data-rp-game="imaginarium"] .packs-illustrated-grid .pack-card { border-color: rgba(255, 240, 202, .7); background: var(--im-ink); box-shadow: 0 10px 22px rgba(66, 44, 53, .28); }
[data-rp-game="imaginarium"] .packs-illustrated-grid .pack-card.selected { border-color: var(--im-ink); box-shadow: 0 0 0 3px var(--im-cream), 0 10px 22px rgba(66, 44, 53, .28); }
[data-rp-game="imaginarium"] .packs-illustrated-actions { background: linear-gradient(180deg, rgba(222, 120, 27, 0) 0%, var(--bg-primary) 14px); }
[data-rp-game="imaginarium"] .packs-summary { color: var(--text-secondary); background: var(--im-cream); }
[data-rp-game="imaginarium"] .summary-text { color: var(--text-secondary); }
[data-rp-game="imaginarium"] .packs-summary strong,
[data-rp-game="imaginarium"] .summary-text strong { color: var(--im-ink); }

/* Lobby. */
[data-rp-game="imaginarium"] .room-code-display { color: var(--im-ink); background: var(--im-cream); }
[data-rp-game="imaginarium"] .lobby-hint,
[data-rp-game="imaginarium"] .lobby-status { color: var(--text-secondary); }
[data-rp-game="imaginarium"] .player-item { color: var(--im-on-ink); background: var(--im-ink); }
[data-rp-game="imaginarium"] .player-avatar { color: var(--im-text); background: var(--im-sky); }
[data-rp-game="imaginarium"] .player-avatar.has-photo { background: none; }
[data-rp-game="imaginarium"] .player-host { color: var(--im-sky); }
[data-rp-game="imaginarium"] .rounds-btn { color: var(--im-ink); border-color: var(--im-ink); }
[data-rp-game="imaginarium"] .rounds-value { color: var(--im-text); }
[data-rp-game="imaginarium"] .rounds-label { color: var(--text-secondary); }
[data-rp-game="imaginarium"] .rp-waiting-spinner { border-color: rgba(66, 44, 53, .2); border-top-color: var(--im-ink); }

/* Round: association plate, hand and table. */
[data-rp-game="imaginarium"] .round-badge { color: var(--im-ink); background: var(--im-cream); }
[data-rp-game="imaginarium"] .timer-badge { color: var(--im-text); background: var(--im-sky); }
[data-rp-game="imaginarium"] .timer-badge.warning { color: var(--im-text); background: var(--error); }
[data-rp-game="imaginarium"] .subtitle { color: var(--text-secondary); }
[data-rp-game="imaginarium"] .storyteller-label { width: fit-content; margin-inline: auto; padding: 5px 14px; border-radius: 999px; color: var(--im-cream); background: var(--im-ink); }
[data-rp-game="imaginarium"] .association-card { background: var(--im-cream); border: 2px solid var(--im-ink); }
[data-rp-game="imaginarium"] .association-text { color: var(--im-ink); }
[data-rp-game="imaginarium"] .association-subtitle { color: var(--text-secondary); }
[data-rp-game="imaginarium"] .waiting-text { color: var(--text-secondary); }
[data-rp-game="imaginarium"] .waiting-spinner { border-color: rgba(66, 44, 53, .2); border-top-color: var(--im-ink); }
[data-rp-game="imaginarium"] .card,
[data-rp-game="imaginarium"] .table-card { background: var(--im-ink); border-color: var(--im-cream); }
[data-rp-game="imaginarium"] .card.selected { border-color: var(--im-ink); box-shadow: 0 0 0 3px var(--im-cream); }
[data-rp-game="imaginarium"] .card-check { color: var(--im-on-ink); background: var(--im-ink); }
[data-rp-game="imaginarium"] .table-card.voted { border-color: var(--im-ink); box-shadow: 0 0 0 3px var(--im-sky); }
[data-rp-game="imaginarium"] .table-card.own-card { border-color: rgba(66, 44, 53, .45); }
[data-rp-game="imaginarium"] .table-card-letter { color: var(--im-on-ink); background: var(--im-ink); }
[data-rp-game="imaginarium"] .table-card-label { color: var(--im-on-ink); background: rgba(66, 44, 53, .88); }
[data-rp-game="imaginarium"] .submitted-overlay { background: rgba(66, 44, 53, .88); }
[data-rp-game="imaginarium"] .submitted-icon { color: var(--im-on-ink); }
[data-rp-game="imaginarium"] .submitted-hint { color: var(--im-on-ink-muted); }
[data-rp-game="imaginarium"] .deck-info { color: var(--text-secondary); }

/* Card preview: dark ink viewer. */
[data-rp-game="imaginarium"] .card-preview-overlay { background: rgba(43, 28, 34, .95); }
[data-rp-game="imaginarium"] .card-preview-close { color: var(--im-on-ink); background: rgba(255, 255, 255, .14); }
[data-rp-game="imaginarium"] .card-preview-actions .btn-play { color: var(--im-ink); background: var(--im-cream); }

/* Round reveal (shared RevealResults): ink heading on amber, ink panels for cards and scores. */
[data-rp-game="imaginarium"] .rr-context-text { color: var(--im-text); }
[data-rp-game="imaginarium"] .rr-context-subtext { display: block; width: fit-content; margin: 8px auto 0; padding: 4px 12px; border-radius: 999px; color: var(--im-cream); background: var(--im-ink); }
[data-rp-game="imaginarium"] .rr-option { background: var(--im-ink); border-color: transparent; }
[data-rp-game="imaginarium"] .rr-option.rr-type-correct { border-color: color-mix(in srgb, var(--rp-correct) 60%, transparent); background: linear-gradient(color-mix(in srgb, var(--rp-correct) 10%, transparent), color-mix(in srgb, var(--rp-correct) 10%, transparent)), var(--im-ink); }
[data-rp-game="imaginarium"] .rr-option.rr-type-wrong { background: var(--im-ink); }
[data-rp-game="imaginarium"] .rr-option-image-card { background: var(--im-ink); border-color: rgba(255, 240, 202, .35); }
[data-rp-game="imaginarium"] .rr-option-image-card.rr-type-correct { border-color: var(--rp-correct); box-shadow: 0 0 0 3px var(--im-ink); }
[data-rp-game="imaginarium"] .rr-option-image-owner { color: var(--im-on-ink); }
[data-rp-game="imaginarium"] .rr-option-image-voters,
[data-rp-game="imaginarium"] .rr-voters-label,
[data-rp-game="imaginarium"] .rr-author-label,
[data-rp-game="imaginarium"] .rr-vote-count { color: var(--im-on-ink-muted); }
[data-rp-game="imaginarium"] .rr-voter { color: var(--im-on-ink); background: rgba(255, 255, 255, .12); }
[data-rp-game="imaginarium"] .rr-leaderboard-title { color: var(--im-text); }
[data-rp-game="imaginarium"] .rr-lb-row { background: var(--im-ink); border-color: transparent; }
[data-rp-game="imaginarium"] .rr-lb-row.rr-leading { border-color: var(--im-cream); background: var(--im-ink); }
[data-rp-game="imaginarium"] .rr-lb-name,
[data-rp-game="imaginarium"] .rr-lb-score { color: var(--im-on-ink); }
[data-rp-game="imaginarium"] .rr-lb-pos { color: var(--im-on-ink-muted); background: rgba(255, 255, 255, .12); }
[data-rp-game="imaginarium"] .rr-lb-delta.rr-zero { color: #c8b9a0; }

/* Final results and party finale. */
[data-rp-game="imaginarium"] .winner-name { color: var(--im-text); }
[data-rp-game="imaginarium"] .score-item { color: var(--im-on-ink); background: var(--im-ink); }
[data-rp-game="imaginarium"] .score-item.leading { border: 2px solid var(--im-cream); background: var(--im-ink); }
[data-rp-game="imaginarium"] .score-name { color: var(--im-on-ink); }
[data-rp-game="imaginarium"] .score-value { color: var(--im-sky); }
[data-rp-game="imaginarium"] .score-position:not(.gold):not(.silver):not(.bronze) { color: var(--im-on-ink); background: rgba(255, 255, 255, .14); }
[data-rp-game="imaginarium"] #roomplay-party-finale { color: var(--im-on-ink); border-color: transparent; background: var(--im-ink); }
[data-rp-game="imaginarium"] #roomplay-party-finale p { color: var(--im-on-ink-muted); }
[data-rp-game="imaginarium"] #roomplay-party-finale .rpf-kicker { color: var(--im-sky); }
[data-rp-game="imaginarium"] #roomplay-party-finale :is(.rpf-share, .rpf-premium) { color: var(--im-ink); background: var(--im-cream); }
[data-rp-game="imaginarium"] #roomplay-party-finale .rpf-next { color: var(--im-on-ink); background: rgba(255, 255, 255, .14); }

/* Overlays and popups. */
[data-rp-game="imaginarium"] .connection-overlay { background: rgba(222, 120, 27, .96); }
[data-rp-game="imaginarium"] .connection-text { color: var(--im-text); }
[data-rp-game="imaginarium"] .connection-spinner { border-color: rgba(66, 44, 53, .2); border-top-color: var(--im-ink); }

/* Exit confirmation and shared settings popup: ink sheet, cream action.
   Colours go through the shared --rp-dialog-* tokens (assets/css/confirm-dialog.css);
   the toggles keep their stock text and settings-accent «on» colours. */
[data-rp-game="imaginarium"] {
  --rp-dialog-overlay: rgba(43, 28, 34, .72);
  --rp-dialog-bg: var(--im-ink);
  --rp-dialog-title: var(--im-on-ink);
  --rp-dialog-text: var(--im-on-ink-muted);
  --rp-dialog-primary-bg: var(--im-cream);
  --rp-dialog-primary-text: var(--im-ink);
  --rp-dialog-secondary-border: var(--im-cream);
  --rp-dialog-secondary-text: var(--im-on-ink);
  --rp-dialog-control-btn-bg: rgba(255, 255, 255, .14);
  --rp-dialog-control-btn-active: rgba(255, 255, 255, .14);
}

/* Onboarding: animated flat SVG characters (static copies via <picture> for reduced motion). */
[data-rp-game="imaginarium"] #onboarding-screen .slide-icon { width: min(240px, 55vw); margin-bottom: 18px; font-size: 0; line-height: 0; }
[data-rp-game="imaginarium"] #onboarding-screen .slide-icon picture,
[data-rp-game="imaginarium"] #onboarding-screen .slide-icon img { display: block; width: 100%; height: auto; }
[data-rp-game="imaginarium"] .slide-title { color: var(--im-text); }
[data-rp-game="imaginarium"] .slide-text { color: var(--text-secondary); }
@media (max-height: 600px) {
  [data-rp-game="imaginarium"] #onboarding-screen .slide-icon { width: 120px; margin-bottom: 8px; }
}

/* Light motion, same rhythm as «Я никогда не» (cutout-theme.css): spring press/settle, 260–440 ms one-shots.
   Decorative only: never delays answers, timer or scoring; fully off under prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  [data-rp-game="imaginarium"] {
    --im-press: 100ms;
    --im-settle: 240ms;
    --im-spring: cubic-bezier(.2, .9, .3, 1.25);
  }
  [data-rp-game="imaginarium"] button:not(:disabled) {
    transition: scale var(--im-settle) var(--im-spring), translate var(--im-settle) var(--im-spring),
      background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  }
  [data-rp-game="imaginarium"] button:not(:disabled):active { scale: .96; translate: 0 2px; transition-duration: var(--im-press); }
  [data-rp-game="imaginarium"] .btn-back:active { scale: .88; }
  [data-rp-game="imaginarium"] .dot { transition: background-color 180ms ease, width 240ms var(--im-spring), scale 180ms var(--im-spring); }
  [data-rp-game="imaginarium"] .dot.active { scale: 1.12; }

  [data-rp-game="imaginarium"] .onboarding-slide.active .slide-icon { animation: im-character-arrive 380ms var(--im-spring) both; }

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

  [data-rp-game="imaginarium"] #lobby-screen.active .room-code-display { animation: im-stamp-in 360ms var(--im-spring) both; }

  /* Round: association plate lands, cards deal in with a short stagger, the voting table flips face up. */
  [data-rp-game="imaginarium"] .screen.active .association-card { animation: im-paper-arrive 280ms var(--im-spring) both; }
  [data-rp-game="imaginarium"] .screen.active .storyteller-label { animation: im-stamp-in 360ms var(--im-spring) both; }
  [data-rp-game="imaginarium"] .screen.active .cards-grid .card { animation: im-pop-in 260ms var(--im-spring) both; }
  [data-rp-game="imaginarium"] .screen.active .cards-grid .card:nth-child(2) { animation-delay: 30ms; }
  [data-rp-game="imaginarium"] .screen.active .cards-grid .card:nth-child(3) { animation-delay: 60ms; }
  [data-rp-game="imaginarium"] .screen.active .cards-grid .card:nth-child(4) { animation-delay: 90ms; }
  [data-rp-game="imaginarium"] .screen.active .cards-grid .card:nth-child(5) { animation-delay: 120ms; }
  [data-rp-game="imaginarium"] .screen.active .cards-grid .card:nth-child(n+6) { animation-delay: 150ms; }
  [data-rp-game="imaginarium"] #voting-screen.active .table-card { animation: im-flip 420ms var(--im-spring) both; }
  [data-rp-game="imaginarium"] #voting-screen.active .table-card:nth-child(2) { animation-delay: 50ms; }
  [data-rp-game="imaginarium"] #voting-screen.active .table-card:nth-child(3) { animation-delay: 100ms; }
  [data-rp-game="imaginarium"] #voting-screen.active .table-card:nth-child(n+4) { animation-delay: 150ms; }
  [data-rp-game="imaginarium"] .submitted-overlay.visible .submitted-icon { animation: im-stamp-in 360ms var(--im-spring) both; }
  [data-rp-game="imaginarium"] .card-preview-overlay.visible .card-preview-image { animation: im-paper-arrive 280ms var(--im-spring) both; }
  [data-rp-game="imaginarium"] .rr-option-image-card.rr-visible { animation: im-flip 420ms var(--im-spring) both; }

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

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