/* Game Theme only. Palette: COMMON/roomplay-palettes.html / spy («Шпион»), light dossier look.
   bg #F8F7F2 paper (ink #17191F 16.4:1), surface #FFFFFF with a #D8D5CB hairline and a 6px red #B9232E left stripe,
   accent #B9232E (white text 6.3:1; as text 5.9:1 on paper, 6.3:1 on white), secondary #25262A charcoal (white 15.1:1).
   Muted text #55554F: 7.0:1 on paper, 7.5:1 on white. Placeholder #6B6A62: 5.4:1 on white.
   The revealed role card is charcoal with white type; the spy role is a red stamp with white text. */
:root {
  /* Answer and gender tones: COMMON/roomplay-palettes.html / spy (correct, wrong, male, female). */
  --rp-correct: #317905;
  --rp-correct-ink: #ffffff;
  --rp-wrong: #b8222d;
  --rp-wrong-ink: #ffffff;
  --rp-male: #1d5a94;
  --rp-female: #a3245f;
  color-scheme: light;
  --bg-primary: #f8f7f2;
  --bg-secondary: #f1efe7;
  --bg-card: #ffffff;
  --text-primary: #17191f;
  --text-secondary: #55554f;
  --text-placeholder: #6b6a62;
  --accent-orange: #b9232e;
  --accent-orange-dark: #b9232e;
  --accent-pink: #b9232e;
  --accent-pink-dark: #b9232e;
  --accent-purple: #b9232e;
  --accent-purple-dark: #b9232e;
  --accent-blue: #25262a;
  --sp-ink: #17191f;
  --sp-red: #b9232e;
  --sp-red-deep: #9a1d26;
  --sp-charcoal: #25262a;
  --sp-line: #d8d5cb;
  --sp-paper: #f8f7f2;
  --sp-paper-deep: #f1efe7;
  --onboarding-accent: #b9232e;
  --onboarding-accent-dark: #b9232e;
  --onboarding-shadow: transparent;
  --onboarding-shadow-hover: transparent;
  --settings-accent: #b9232e;
  --settings-accent-dark: #b9232e;
  --packs-accent: #b9232e;
  --packs-feedback-rgb: 185, 35, 46;
  --ps-accent: #b9232e;
}
html, body[data-rp-game="spy"], .page-loader { background: var(--bg-primary); }
body[data-rp-game="spy"] { color: var(--sp-ink); }
.loader-spinner { border-color: rgba(23, 25, 31, .14); border-top-color: var(--sp-red); }
.btn-back { color: var(--sp-ink); }

/* Actions: red primary with white text; charcoal outline secondary. */
.btn-play,
.btn-next-slide,
.btn-show-role,
.btn-next-player { color: #fff; background: var(--sp-red); box-shadow: none; }
@media (hover: hover) {
  .btn-play:hover,
  .btn-next-slide:hover { background: var(--sp-red-deep); box-shadow: none; }
}
.btn-play:disabled { color: var(--text-secondary); background: var(--sp-paper-deep); opacity: 1; }
.btn-skip,
.btn-secondary { color: var(--sp-ink); border-color: var(--sp-charcoal); background: transparent; }
@media (hover: hover) { .btn-secondary:hover { color: #fff; background: var(--sp-charcoal); border-color: var(--sp-charcoal); } }
.dot { background: rgba(23, 25, 31, .2); }
.dot.active { background: var(--sp-red); }
.slide-title,
.title { color: var(--sp-ink); }
.slide-text,
.swipe-hint,
.order-label { color: var(--text-secondary); }

/* Player setup: white dossier rows. */
.ps-add-btn { color: var(--sp-ink); border-color: var(--sp-red); background: #fff; }
@media (hover: hover) { .ps-add-btn:hover { color: #fff; background: var(--sp-red); } }
.ps-entry { background: #fff; border: 1px solid var(--sp-line); box-shadow: inset 4px 0 0 var(--sp-red); }
.ps-input { color: var(--sp-ink); }
.ps-remove { color: var(--text-secondary); }
@media (hover: hover) { .ps-remove:hover { color: var(--sp-red); } }
.ps-icon--avatar { color: var(--sp-ink); background: var(--sp-paper-deep); }
.ps-icon--filled { background: var(--sp-red); }
.ps-icon--empty { background: var(--sp-paper-deep); border-color: var(--text-secondary); }
.ps-gender { color: var(--text-secondary); background: var(--sp-paper-deep); }

/* Role cards: the front is a dossier sheet with a red stripe, the back is the charcoal secret. */
.card-front { background: #fff; border: 1px solid var(--sp-line); border-left: 6px solid var(--sp-red); box-shadow: 0 10px 28px rgba(37, 38, 42, .12); }
.card-title { color: var(--text-secondary); text-transform: uppercase; letter-spacing: .08em; font-size: 13px; font-weight: 700; }
.card-player-name { color: var(--sp-red); }
.card-hint { color: var(--text-secondary); }
.card-back { background: var(--sp-charcoal); border-left: 6px solid var(--sp-red); box-shadow: 0 10px 28px rgba(37, 38, 42, .2); }
.card-location { color: #c9c8c2; }
.card-role { color: #fff; }
.card-role.spy { padding: 10px 18px; border: 3px solid #fff; border-radius: 10px; color: #fff; background: var(--sp-red); rotate: -4deg; text-transform: uppercase; letter-spacing: .04em; }

/* Instructions and the speaking order: dossier sheets. */
.instructions-card { background: #fff; border: 1px solid var(--sp-line); border-left: 6px solid var(--sp-red); }
.instructions-text { color: var(--text-secondary); }
.instructions-text.highlight { color: var(--sp-red); }
.order-item { background: #fff; border: 1px solid var(--sp-line); }
.order-number { color: #fff; background: var(--sp-charcoal); }
.order-name { color: var(--sp-ink); }
.btn-show-locations { color: var(--sp-red); background: #fff; border-color: var(--sp-red); }
@media (hover: hover) { .btn-show-locations:hover { color: #fff; background: var(--sp-red); } }

/* Locations overlay: paper sheet. */
.locations-overlay { background: rgba(248, 247, 242, .98); }
.overlay-title,
.overlay-close { color: var(--sp-ink); }
.location-card img { background: #fff; border: 1px solid var(--sp-line); }
.location-card span { color: var(--text-secondary); }

/* Finale panel (shared ru-party-finale.js): dossier sheet. */
body[data-rp-game="spy"] #roomplay-local-finale { color: var(--sp-ink); background: #fff; border: 1px solid var(--sp-line); border-left: 6px solid var(--sp-red); }
body[data-rp-game="spy"] #roomplay-local-finale p { color: var(--text-secondary); }
body[data-rp-game="spy"] #roomplay-local-finale .rplf-kicker { color: var(--sp-red); }
body[data-rp-game="spy"] #roomplay-local-finale .rplf-primary { color: #fff; background: var(--sp-red); }
body[data-rp-game="spy"] #roomplay-local-finale .rplf-secondary { color: var(--sp-ink); background: var(--sp-paper-deep); }

/* Exit confirmation (and the settings popup if a host page opens one): white sheets with dark ink.
   Colours go through the shared --rp-dialog-* tokens (assets/css/confirm-dialog.css). */
:root {
  --rp-dialog-overlay: rgba(23, 25, 31, .55);
  --rp-dialog-bg: #fff;
  --rp-dialog-title: var(--sp-ink);
  --rp-dialog-text: var(--text-secondary);
  --rp-dialog-primary-bg: var(--sp-red);
  --rp-dialog-secondary-border: var(--sp-charcoal);
  --rp-dialog-secondary-text: var(--sp-ink);
  --rp-dialog-control-btn-bg: rgba(23, 25, 31, .08);
  --rp-dialog-toggle-bg: rgba(23, 25, 31, .08);
}
.settings-popup-modal,
.confirm-dialog-modal { border-left: 6px solid var(--sp-red); }

/* 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: 110px; margin-bottom: 8px; }
}
@media (max-height: 430px) {
  #onboarding-screen .slide-icon { width: 60px; margin-bottom: 4px; }
}

/* Light motion, same rhythm as «Я никогда не» (cutout-theme.css). Decorative only: never delays the role
   reveal or the swipe; the card flip keeps the game's transform and only gets a spring curve. Off under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  :root { --sp-press: 100ms; --sp-settle: 240ms; --sp-spring: cubic-bezier(.2, .9, .3, 1.25); }
  button:not(:disabled) {
    transition: scale var(--sp-settle) var(--sp-spring), translate var(--sp-settle) var(--sp-spring),
      background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  }
  button:not(:disabled):active { scale: .96; translate: 0 2px; transition-duration: var(--sp-press); }
  .btn-show-role:active, .btn-next-player:active { transform: none; }
  .btn-back:active { scale: .88; }
  .dot { transition: background-color 180ms ease, width 300ms ease, scale 180ms var(--sp-spring); }
  .dot.active { scale: 1.12; }
  .onboarding-slide.active .slide-icon { animation: sp-character-arrive 380ms var(--sp-spring) both; }

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

  #cards-screen.active .card-container { animation: sp-paper-arrive 280ms var(--sp-spring) both; }
  .card-inner { transition: transform 600ms var(--sp-spring); }
  .game-card.flipped .card-role { animation: sp-stamp-in 360ms var(--sp-spring) 260ms both; }

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

/* Back arrow: styles.css pins it at top:40px/left:24px, but on phones (≤480px wide or ≤700px tall)
   the screen padding drops to 20px, so the title moved up while the arrow stayed and landed on the
   instruction card (questions/voting). Put the arrow in the title row instead. */
@media (max-width: 480px), (max-height: 700px) {
  .screen > .btn-back { top: calc(12px + env(safe-area-inset-top, 0px)); left: 8px; }
}
@media (min-width: 768px) {
  .screen > .btn-back { top: calc(40px + env(safe-area-inset-top, 0px)); left: 24px; }
}