/* Game Theme only. Palette: COMMON/roomplay-palettes.html / quiplash.
   bg #542580 (white text), surface #F4EFF8 (ink #17191F) for the joke cards, accent #743CAE (white onAccent),
   secondary teal #73C3B6 (ink on teal; teal as highlight text on the purple, 5.2:1).
   Accent #743CAE is only 1.5:1 against the page, so it is used as a fill with white text or as text on the light surface.
   Panels (rosters, scores, reveal) are deep purple #3C1A5E so the shared success/error colours keep their meaning.
   Onboarding uses animated flat SVG scenes in assets/onboarding (static copies for reduced motion). */
:root {
  /* Answer and gender tones: COMMON/roomplay-palettes.html / quiplash (correct, wrong, male, female). */
  --rp-correct: #30c883;
  --rp-correct-ink: #17191f;
  --rp-wrong: #fd8295;
  --rp-wrong-ink: #17191f;
  --rp-male: #63b0fc;
  --rp-female: #f77cb0;
  --bg-primary: #542580;
  --bg-secondary: #46206b;
  --bg-card: #3c1a5e;
  --text-primary: #ffffff;
  --text-secondary: #d8c8e8;
  --text-placeholder: #a88fc4;
  --accent-purple: #743cae;
  --accent-purple-dark: #743cae;
  --accent-blue: #743cae;
  --accent-pink: #73c3b6;
  --accent-pink-dark: #73c3b6;
  --accent-amber: #73c3b6;
  --accent-amber-dark: #73c3b6;
  --accent-red: #743cae;
  --onboarding-accent: #743cae;
  --onboarding-accent-dark: #743cae;
  --onboarding-shadow: transparent;
  --onboarding-shadow-hover: transparent;
  --settings-accent: #743cae;
  --settings-accent-dark: #743cae;
  --packs-accent: #73c3b6;
  --packs-feedback-rgb: 115, 195, 182;
  --ps-accent: #743cae;
  --qp-surface: #f4eff8;
  --qp-ink: #17191f;
  --qp-ink-accent: #5e3a86;
  --qp-accent: #743cae;
  --qp-teal: #73c3b6;
  --qp-panel: #3c1a5e;
  --qp-lavender: #d8c8e8;
}
html, body[data-rp-game="quiplash"], .page-loader { background: var(--bg-primary); }
body[data-rp-game="quiplash"] { color: #fff; }
[data-rp-game="quiplash"] .loader-spinner { border-color: rgba(255, 255, 255, .18); border-top-color: var(--qp-teal); }

/* Actions: accent fill with white text, a light inner ring separates it from the purple page. */
[data-rp-game="quiplash"] .btn-play,
[data-rp-game="quiplash"] .btn-next-slide,
[data-rp-game="quiplash"] .btn-join.active { color: #fff; background: var(--qp-accent); border-color: transparent; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .3); }
[data-rp-game="quiplash"] .btn-play:disabled { color: #c9b6dd; background: var(--qp-panel); box-shadow: none; opacity: 1; }
[data-rp-game="quiplash"] .btn-skip { color: #fff; border-color: rgba(255, 255, 255, .7); }
[data-rp-game="quiplash"] .btn-join,
[data-rp-game="quiplash"] .btn-play.outlined { color: #fff; border-color: var(--qp-teal); background: transparent; }
[data-rp-game="quiplash"] .btn-back { color: #fff; }
[data-rp-game="quiplash"] .dot { background: rgba(255, 255, 255, .28); }
[data-rp-game="quiplash"] .dot.active { background: var(--qp-teal); }
[data-rp-game="quiplash"] .slide-title { color: #fff; }
[data-rp-game="quiplash"] .slide-text { color: var(--qp-lavender); }

/* Lobby. */
[data-rp-game="quiplash"] .room-code-display { color: var(--qp-teal); background: var(--qp-panel); }
[data-rp-game="quiplash"] .player-item { color: #fff; background: var(--qp-panel); }
[data-rp-game="quiplash"] .player-avatar:not(.has-photo) { color: #fff; background: var(--qp-accent); }
[data-rp-game="quiplash"] .player-host { color: var(--qp-teal); }
[data-rp-game="quiplash"] .lobby-hint,
[data-rp-game="quiplash"] .lobby-status { color: var(--qp-lavender); }
[data-rp-game="quiplash"] .rp-waiting-spinner { border-color: rgba(255, 255, 255, .18); border-top-color: var(--qp-teal); }

/* Round header. */
[data-rp-game="quiplash"] .round-badge { color: var(--qp-lavender); background: var(--qp-panel); }
[data-rp-game="quiplash"] .timer-badge { color: var(--qp-ink); background: var(--qp-teal); }
[data-rp-game="quiplash"] .timer-badge.warning { color: var(--qp-ink); background: #f87171; }

/* Answering: prompts on light joke cards. */
[data-rp-game="quiplash"] .prompt-card { color: var(--qp-ink); background: var(--qp-surface); }
[data-rp-game="quiplash"] .prompt-text { color: var(--qp-ink-accent); }
[data-rp-game="quiplash"] .prompt-card .input { color: var(--qp-ink); background: #fff; border-color: #d8c8e8; }
[data-rp-game="quiplash"] .prompt-card .input:focus { border-color: var(--qp-accent); }
[data-rp-game="quiplash"] .prompt-card .input::placeholder { color: #6b4a8a; }
[data-rp-game="quiplash"] .prompt-card .input:disabled { color: #4a3a5c; background: #ebe3f3; }
[data-rp-game="quiplash"] .submitted-overlay { background: rgba(84, 37, 128, .92); }
[data-rp-game="quiplash"] .submitted-hint { color: var(--qp-lavender); }

/* Voting: two light answer cards. */
[data-rp-game="quiplash"] .voting-prompt,
[data-rp-game="quiplash"] .voting-hint { color: var(--qp-teal); }
[data-rp-game="quiplash"] .player-answer-card { color: var(--qp-ink); background: var(--qp-surface); border-color: var(--qp-surface); }
[data-rp-game="quiplash"] .player-answer-text { color: var(--qp-ink); }
[data-rp-game="quiplash"] .player-answer-letter,
[data-rp-game="quiplash"] .answer-letter { color: #fff; background: var(--qp-accent); }
[data-rp-game="quiplash"] .player-answer-card.votable { border-color: #c9b6dd; }
@media (hover: hover) {
  [data-rp-game="quiplash"] .player-answer-card.votable:hover { border-color: var(--qp-accent); }
}
[data-rp-game="quiplash"] .player-answer-card.selected { border-color: var(--qp-teal); background: #fff; box-shadow: 0 0 0 3px var(--qp-teal); }
[data-rp-game="quiplash"] .player-answer-card.voted-disabled { opacity: .62; }
[data-rp-game="quiplash"] .player-answer-card.winner { border-color: var(--qp-teal); background: #e3f4f1; }
[data-rp-game="quiplash"] .answer-option { color: var(--qp-ink); background: var(--qp-surface); }
[data-rp-game="quiplash"] .answer-option.selected { border-color: var(--qp-teal); background: #fff; }
[data-rp-game="quiplash"] .author-notice { color: var(--qp-lavender); background: var(--qp-panel); }
[data-rp-game="quiplash"] .dash-tts-toggle { color: #fff; background: var(--qp-panel); }

/* Reveal (shared RevealResults) on deep purple panels; green keeps meaning "most votes". */
[data-rp-game="quiplash"] .rr-context-subtext { color: var(--qp-lavender); }
[data-rp-game="quiplash"] .rr-option,
[data-rp-game="quiplash"] .rr-lb-row { background: var(--qp-panel); border-color: rgba(255, 255, 255, .12); }
[data-rp-game="quiplash"] .rr-option.rr-type-correct { background: var(--qp-panel); border-color: color-mix(in srgb, var(--rp-correct) 70%, transparent); }
[data-rp-game="quiplash"] .rr-lb-row.rr-leading { border-color: var(--qp-teal); }
[data-rp-game="quiplash"] .rr-vote-count,
[data-rp-game="quiplash"] .rr-leaderboard-title { color: var(--qp-lavender); }
[data-rp-game="quiplash"] .rr-author,
[data-rp-game="quiplash"] .rr-author-label,
[data-rp-game="quiplash"] .rr-voters-label { color: #c9b6dd; }
[data-rp-game="quiplash"] .rr-author-name { color: var(--qp-teal); }
[data-rp-game="quiplash"] .rr-voter { color: #fff; background: rgba(255, 255, 255, .12); }
[data-rp-game="quiplash"] .rr-lb-pos { color: var(--qp-lavender); background: rgba(255, 255, 255, .12); }
[data-rp-game="quiplash"] .rr-badge-quiplash,
[data-rp-game="quiplash"] .quiplash-badge { color: var(--qp-ink) !important; background: var(--qp-teal) !important; box-shadow: none; }

/* Final results. */
[data-rp-game="quiplash"] .winner-name { color: var(--qp-teal); }
[data-rp-game="quiplash"] .score-item { color: #fff; background: var(--qp-panel); border-color: var(--qp-panel); }
[data-rp-game="quiplash"] .score-item.leading { background: var(--qp-panel); border-color: var(--qp-teal); }
[data-rp-game="quiplash"] .score-name { color: #fff; }
[data-rp-game="quiplash"] .score-value { color: var(--qp-teal); }
[data-rp-game="quiplash"] .score-position:not(.gold):not(.silver):not(.bronze) { color: #fff; background: rgba(255, 255, 255, .12); }
/* Shared RU finale card (main.ts injects its own <style>); Premium link keeps its own colours. */
[data-rp-game="quiplash"] #roomplay-party-finale { border-color: rgba(255, 255, 255, .16); background: var(--qp-panel); }
[data-rp-game="quiplash"] #roomplay-party-finale p { color: var(--qp-lavender); }
[data-rp-game="quiplash"] #roomplay-party-finale .rpf-kicker { color: var(--qp-teal); }
[data-rp-game="quiplash"] #roomplay-party-finale .rpf-share { color: #fff; background: var(--qp-accent); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .3); }

/* Overlays and popups. */
[data-rp-game="quiplash"] .connection-overlay { background: rgba(84, 37, 128, .95); }
[data-rp-game="quiplash"] .connection-text { color: var(--qp-lavender); }
[data-rp-game="quiplash"] .connection-spinner { border-color: rgba(255, 255, 255, .18); border-top-color: var(--qp-teal); }
/* Exit confirmation and settings popups: colours go through the shared --rp-dialog-* tokens
   (assets/css/confirm-dialog.css). */
[data-rp-game="quiplash"] {
  --rp-dialog-overlay: rgba(38, 14, 60, .82);
  --rp-dialog-bg: var(--qp-panel);
  --rp-dialog-border: 1px solid rgba(255, 255, 255, .14);
  --rp-dialog-text: var(--qp-lavender);
  --rp-dialog-primary-bg: var(--qp-accent);
  --rp-dialog-primary-shadow: inset 0 0 0 2px rgba(255, 255, 255, .3);
  --rp-dialog-secondary-border: #fff;
  --rp-dialog-secondary-text: #fff;
}

/* Onboarding: animated flat SVG scenes (static copies via <picture> for reduced motion). */
[data-rp-game="quiplash"] #onboarding-screen .slide-icon { width: min(240px, 55vw); margin: 0 auto 18px; font-size: 0; line-height: 0; }
[data-rp-game="quiplash"] #onboarding-screen .slide-icon picture,
[data-rp-game="quiplash"] #onboarding-screen .slide-icon img { display: block; width: 100%; height: auto; }
@media (max-height: 700px) {
  [data-rp-game="quiplash"] #onboarding-screen .slide-icon { width: min(196px, 52vw); margin-bottom: 12px; }
}
@media (max-height: 600px) {
  [data-rp-game="quiplash"] #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) {
  [data-rp-game="quiplash"] #onboarding-screen .slide-icon { width: 92px; margin-bottom: 4px; }
  [data-rp-game="quiplash"] #onboarding-screen .slide-text { min-height: 0; }
}

/* Light motion, same rhythm as «Я никогда не» (cutout-theme.css).
   Never delays answering, voting timers or scoring; fully off under prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  [data-rp-game="quiplash"] {
    --qp-press: 100ms;
    --qp-settle: 240ms;
    --qp-spring: cubic-bezier(.2, .9, .3, 1.25);
  }
  [data-rp-game="quiplash"] button:not(:disabled) {
    transition: scale var(--qp-settle) var(--qp-spring), translate var(--qp-settle) var(--qp-spring),
      background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  }
  [data-rp-game="quiplash"] button:not(:disabled):active { scale: .96; translate: 0 2px; transition-duration: var(--qp-press); }
  [data-rp-game="quiplash"] .btn-back:active { scale: .88; }
  [data-rp-game="quiplash"] .dot { transition: background-color 180ms ease, scale 180ms var(--qp-spring), width 300ms ease; }
  [data-rp-game="quiplash"] .dot.active { scale: 1.12; }
  [data-rp-game="quiplash"] .onboarding-slide.active .slide-icon { animation: qp-character-arrive 380ms var(--qp-spring) both; }

  [data-rp-game="quiplash"] #lobby-screen.active .room-code-display { animation: qp-stamp-in 360ms var(--qp-spring) both; }
  [data-rp-game="quiplash"] #answering-screen.active .prompt-card { animation: qp-paper-arrive 280ms var(--qp-spring) both; }
  [data-rp-game="quiplash"] #answering-screen.active .prompt-card:nth-child(2) { animation-delay: 80ms; }
  [data-rp-game="quiplash"] #answering-screen.active .prompt-card:nth-child(n+3) { animation-delay: 160ms; }
  [data-rp-game="quiplash"] .submitted-overlay.visible .submitted-icon { animation: qp-stamp-in 360ms var(--qp-spring) both; }
  [data-rp-game="quiplash"] #voting-screen.active .voting-prompt-card { animation: qp-paper-arrive 280ms var(--qp-spring) both; }
  [data-rp-game="quiplash"] .player-answer-card.votable:active { scale: .97; transition: scale var(--qp-press) ease; }
  [data-rp-game="quiplash"] .player-answer-card.selected { animation: qp-answer-stamp 260ms var(--qp-spring); }

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

/* Here "correct" marks the round winner, not a right answer: no ✓ mark. */
[data-rp-game="quiplash"] .rr-option.rr-type-correct .rr-option-text::before { content: none; }

/* Like / dislike / report under the matchup prompt (shared content-report.css), shown after this
   phone votes and on the matchup's reveal. */
:root {
  --rp-report-surface: var(--qp-panel);
  --rp-report-text: #ffffff;
  --rp-report-muted: var(--qp-lavender);
  --rp-report-accent: var(--qp-teal);
  --rp-report-accent-ink: var(--qp-ink);
}
/* The matchup prompt on a light joke card (like the answering screen's prompt cards); after this
   phone votes the thumbs sit centred on its bottom edge and the flag in its bottom-right corner.
   The reveal's prompt block becomes the same card while it holds them. */
[data-rp-game="quiplash"] .voting-prompt-card {
  position: relative; width: 100%; margin-bottom: 24px; padding: 16px; border-radius: 16px; background: var(--qp-surface);
}
[data-rp-game="quiplash"] .voting-prompt-card .voting-prompt { margin: 0; padding: 0; color: var(--qp-ink-accent); }
[data-rp-game="quiplash"] .voting-prompt-card:has(> .quiplash-card-vote:not([hidden])) { padding-bottom: 56px; }
[data-rp-game="quiplash"] #reveal-container .rr-context.quiplash-reveal-prompt {
  position: relative; padding: 16px 16px 56px; border-radius: 16px; background: var(--qp-surface);
}
[data-rp-game="quiplash"] .quiplash-reveal-prompt .rr-context-text { color: var(--qp-ink-accent); }
[data-rp-game="quiplash"] .quiplash-reveal-prompt .rr-context-subtext { color: #5e4a72; }
.quiplash-card-vote { position: absolute; left: 50%; bottom: 6px; z-index: 2; margin: 0; transform: translateX(-50%); }
.quiplash-report-flag { position: absolute; right: 6px; bottom: 6px; z-index: 2; }
.quiplash-card-vote[hidden], .quiplash-report-flag[hidden] { display: none; }
:is(.quiplash-card-vote .rp-card-vote__btn, .quiplash-report-flag) { color: rgb(23 25 31 / 55%); }
.quiplash-card-vote .rp-card-vote__btn[aria-pressed="true"] { color: var(--qp-accent); }
@media (hover: hover) {
  :is(.quiplash-card-vote .rp-card-vote__btn:not([aria-pressed="true"]), .quiplash-report-flag):hover { color: var(--qp-ink); }
}
:is(.quiplash-card-vote .rp-card-vote__btn, .quiplash-report-flag):active { background: rgb(23 25 31 / 8%); }