/* Game Theme only. Palette: COMMON/roomplay-palettes.html / bunny («Импостер»).
   bg #090719, surface #19162F, accent #7735D5 (white text 6.5:1), secondary #5F87E6, glow edge #9D63E3.
   Accent text uses lighter tints (#B58CF0 lilac 6.7:1, #8EA9F0 blue 7.6:1 on the surface). */
:root {
  /* Answer and gender tones: COMMON/roomplay-palettes.html / bunny (correct, wrong, male, female). */
  --rp-correct: #30c883;
  --rp-correct-ink: #17191f;
  --rp-wrong: #fe7b90;
  --rp-wrong-ink: #17191f;
  --rp-male: #78a1ff;
  --rp-female: #f77cb0;
  --bg-primary: #090719;
  --bg-secondary: #19162f;
  --bg-card: #19162f;
  --text-primary: #ffffff;
  --text-secondary: #b7b2d1;
  --text-placeholder: #8a84aa;
  --accent-purple: #7735d5;
  --accent-purple-dark: #7735d5;
  --accent-blue: #5f87e6;
  --accent-pink: #7735d5;
  --accent-pink-dark: #7735d5;
  --accent-green: #7735d5;
  --bn-violet: #7735d5;
  --bn-blue: #5f87e6;
  --bn-edge: #9d63e3;
  --bn-lilac: #b58cf0;
  --bn-sky: #8ea9f0;
  --bn-glow: 0 0 20px rgba(119, 53, 213, .3);
  --onboarding-accent: #7735d5;
  --onboarding-accent-dark: #7735d5;
  --onboarding-shadow: transparent;
  --onboarding-shadow-hover: transparent;
  --settings-accent: #7735d5;
  --settings-accent-dark: #7735d5;
  --ps-accent: #7735d5;
}
html, body, .page-loader { background: var(--bg-primary); }
.loader-spinner { border-color: rgba(255, 255, 255, .1); border-top-color: var(--bn-edge); }

/* Actions: violet primary with white text, light outline secondary. */
.btn-play,
.btn-next-slide,
.btn-show-role,
.btn-next-player { color: #fff; background: var(--bn-violet); box-shadow: none; }
.btn-skip,
.btn-secondary { color: #fff; border-color: rgba(255, 255, 255, .5); }
.dot { background: rgba(255, 255, 255, .2); }
.dot.active { background: var(--bn-edge); }

/* Cards with the palette's violet edge glow. */
.cards-topic-header,
.instructions-card,
.topic-reminder { border: 1px solid rgba(157, 99, 227, .45); }
.cards-topic-name,
.topic-reminder-value,
.card-player-name,
.instructions-text.highlight { color: var(--bn-lilac); }
@media (hover: hover) { .cards-topic-refresh:hover:not(:disabled) { background: var(--bn-violet); } }
.card-front { background: var(--bg-card); border-color: var(--bn-edge); box-shadow: var(--bn-glow); }
.card-back { background: linear-gradient(135deg, var(--bn-violet) 0%, #4a2a9a 100%); border: 2px solid var(--bn-edge); box-shadow: var(--bn-glow); }
.word-item { border: 1px solid rgba(157, 99, 227, .35); }
.order-number { color: #fff; background: var(--bn-violet); }
.order-item { border: 1px solid rgba(95, 135, 230, .3); }

/* Exit confirmation: glowing card, violet confirm, white outline cancel.
   Colours go through the shared --rp-dialog-* tokens (assets/css/confirm-dialog.css). */
body {
  --rp-dialog-overlay: rgba(9, 7, 25, .86);
  --rp-dialog-bg: var(--bg-card);
  --rp-dialog-border: 1px solid var(--bn-edge);
  --rp-dialog-shadow: var(--bn-glow);
  --rp-dialog-text: var(--text-secondary);
  --rp-dialog-primary-bg: var(--bn-violet);
  --rp-dialog-secondary-border: rgba(255, 255, 255, .5);
  --rp-dialog-secondary-text: #fff;
}

/* 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; off under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  :root { --bn-press: 100ms; --bn-settle: 240ms; --bn-spring: cubic-bezier(.2, .9, .3, 1.25); }
  button:not(:disabled) {
    transition: scale var(--bn-settle) var(--bn-spring), translate var(--bn-settle) var(--bn-spring),
      background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  }
  button:not(:disabled):active { scale: .96; translate: 0 2px; transition-duration: var(--bn-press); }
  .btn-back:active { scale: .88; }
  .dot { transition: background-color 180ms ease, scale 180ms var(--bn-spring); }
  .dot.active { scale: 1.12; }
  .onboarding-slide.active .slide-icon { animation: bn-character-arrive 380ms var(--bn-spring) both; }

  #cards-screen.active .cards-topic-header { animation: bn-paper-arrive 280ms var(--bn-spring) both; }
  #cards-screen.active .card-container { animation: bn-paper-arrive 280ms var(--bn-spring) 60ms both; }
  .card-inner { transition-timing-function: var(--bn-spring); }
  .game-card.flipped .card-role { animation: bn-stamp-in 360ms var(--bn-spring) 260ms both; }

  #associations-screen.active .instructions-card,
  #voting-screen.active .instructions-card { animation: bn-paper-arrive 280ms var(--bn-spring) both; }
  #associations-screen.active .instructions-icon,
  #voting-screen.active .instructions-icon { animation: bn-nod 420ms ease-out 200ms both; }
  #associations-screen.active .order-item,
  #voting-screen.active .word-item { animation: bn-paper-arrive 280ms var(--bn-spring) both; }
  #associations-screen.active .order-item:nth-child(2), #voting-screen.active .word-item:nth-child(2) { animation-delay: 40ms; }
  #associations-screen.active .order-item:nth-child(3), #voting-screen.active .word-item:nth-child(3) { animation-delay: 80ms; }
  #associations-screen.active .order-item:nth-child(4), #voting-screen.active .word-item:nth-child(4) { animation-delay: 120ms; }
  #associations-screen.active .order-item:nth-child(n+5), #voting-screen.active .word-item:nth-child(n+5) { animation-delay: 160ms; }
  .confirm-dialog-overlay.active .confirm-dialog-modal { animation: bn-paper-arrive 280ms var(--bn-spring); }
}
@keyframes bn-character-arrive { from { opacity: 0; scale: .82; rotate: -10deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes bn-nod { 0%, 100% { rotate: 0deg; } 35% { rotate: -8deg; } 70% { rotate: 5deg; } }
@keyframes bn-paper-arrive { from { opacity: 0; translate: 0 12px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes bn-stamp-in { from { opacity: 0; scale: 1.3; } to { opacity: 1; scale: 1; } }

/* Voting list: same violet edge as the other cards on the screen. */
.vote-item { border-color: rgba(95, 135, 230, .3); }
@media (hover: hover) { .vote-item:not(.checked):hover { border-color: var(--bn-edge); } }
.vote-item:focus-visible { outline: 2px solid var(--bn-edge); outline-offset: 2px; }
/* Mode screen: violet and blue blobs, lilac edge on hover/focus. */
.mode-card { border-color: rgba(95, 135, 230, .3); }
.mode-card:focus-visible { outline: 2px solid var(--bn-edge); outline-offset: 3px; }
@media (hover: hover) { .mode-card:hover { border-color: var(--bn-edge); } }
.mode-fill-a { fill: var(--bn-violet); }
.mode-fill-b { fill: var(--bn-blue); }
#mode-question .mode-fill-a { fill: var(--bn-blue); }
#mode-question .mode-fill-b { fill: var(--bn-violet); }
.mode-pupil, .mode-mouth-fill { fill: #17132e; }
.mode-mouth { stroke: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .mode-blob { transform-box: fill-box; transform-origin: 50% 100%; animation: bn-mode-breathe 2.4s ease-in-out infinite; }
  .mode-prop { transform-box: fill-box; transform-origin: 0% 100%; animation: bn-mode-bob 2.4s ease-in-out -1.2s infinite; }
  @keyframes bn-mode-breathe { 0%, 100% { transform: none; } 50% { transform: scale(1.04, .96); } }
  @keyframes bn-mode-bob { 0%, 100% { transform: none; } 50% { transform: translateY(-4px) rotate(-4deg); } }
}
.answers-question { border: 2px solid var(--bn-edge); box-shadow: var(--bn-glow); background: linear-gradient(135deg, #2a1757 0%, var(--bg-card) 100%); }
.order-answer { color: var(--bn-sky); }