/* Game Theme only. Palette: COMMON/roomplay-palettes.html / knowme (party box adaptation).
   bg #B64035 terracotta (white text 5.6:1), surface #FFF2DC cream label (ink #17191F), accent #822D29 brick
   (white text 8.9:1), secondary #313555 navy for small decorations, badges and dark cards. Stock green/red
   success/error keep their meaning on navy cards (6.8:1 / 4.3:1 large). */
:root {
  /* Answer and gender tones: COMMON/roomplay-palettes.html / knowme (correct, wrong, male, female). */
  --rp-correct: #9bd387;
  --rp-correct-ink: #17191f;
  --rp-wrong: #88322e;
  --rp-wrong-ink: #ffffff;
  --rp-male: #6eb0f3;
  --rp-female: #e58aaf;
  --bg-primary: #b64035;
  --bg-secondary: #313555;
  --bg-card: #313555;
  --text-primary: #ffffff;
  --text-secondary: #fff2dc;
  --text-placeholder: #6b5040;
  --accent-purple: #822d29;
  --accent-purple-dark: #6a2420;
  --accent-blue: #822d29;
  --accent-pink: #822d29;
  --accent-pink-dark: #6a2420;
  --accent-teal: #822d29;
  --accent-teal-dark: #6a2420;
  --warning: #fff2dc;
  --km-ink: #17191f;
  --km-ink-muted: #5c4a3a;
  --km-cream: #fff2dc;
  --km-brick: #822d29;
  --km-brick-dark: #6a2420;
  --km-navy: #313555;
  --onboarding-accent: #822d29;
  --onboarding-accent-dark: #822d29;
  --onboarding-shadow: transparent;
  --onboarding-shadow-hover: transparent;
  --settings-accent: #822d29;
  --settings-accent-dark: #6a2420;
  --packs-accent: #fff2dc;
  --packs-feedback-rgb: 255, 242, 220;
  --ps-accent: #822d29;
  --game-accent: #fff2dc;
}
html, body[data-rp-game="knowme"], .page-loader { background: var(--bg-primary); }
body[data-rp-game="knowme"] { color: #fff; }
[data-rp-game="knowme"] .loader-spinner,
[data-rp-game="knowme"] .connection-spinner,
[data-rp-game="knowme"] .rp-waiting-spinner { border-color: rgba(255, 242, 220, .25); border-top-color: var(--km-cream); }

/* Actions: brick primary with a pressed-edge shadow so it reads on terracotta; cream outline secondary. */
[data-rp-game="knowme"] .btn-play,
[data-rp-game="knowme"] .btn-next-slide,
[data-rp-game="knowme"] .btn-join.active { color: #fff; background: var(--km-brick); border-color: transparent; box-shadow: 0 4px 0 var(--km-brick-dark); }
[data-rp-game="knowme"] .btn-play:disabled { color: var(--km-cream); background: rgba(49, 53, 85, .55); box-shadow: none; opacity: 1; }
[data-rp-game="knowme"] .btn-join,
[data-rp-game="knowme"] .btn-play.outlined,
[data-rp-game="knowme"] .btn-skip,
[data-rp-game="knowme"] .btn-additional-settings { color: #fff; border-color: var(--km-cream); background: transparent; box-shadow: none; }
[data-rp-game="knowme"] .btn-copy { color: var(--km-cream); background: var(--km-navy); border-color: rgba(255, 242, 220, .25); }
[data-rp-game="knowme"] .dot { background: rgba(255, 242, 220, .35); }
[data-rp-game="knowme"] .dot.active { background: var(--km-cream); }
[data-rp-game="knowme"] .input { color: var(--km-ink); background: var(--km-cream); }
[data-rp-game="knowme"] .subtitle,
[data-rp-game="knowme"] .lobby-hint,
[data-rp-game="knowme"] .lobby-status { color: var(--km-cream); }

/* Packs (shared packs.css) and summary. */
/* main.ts sets a teal --packs-accent inline on the grid; the palette cream wins here. */
[data-rp-game="knowme"] #packs-grid { --packs-accent: #fff2dc !important; --packs-feedback-rgb: 255, 242, 220 !important; }
[data-rp-game="knowme"] .packs-summary { color: var(--km-cream); background: var(--km-navy); }
[data-rp-game="knowme"] .packs-summary .summary-text { color: var(--km-cream); }
[data-rp-game="knowme"] .packs-summary strong { color: #fff; }

/* Lobby. */
[data-rp-game="knowme"] .room-code-display { color: var(--km-cream); background: var(--km-navy); }
[data-rp-game="knowme"] .player-item { color: var(--km-ink); background: var(--km-cream); }
[data-rp-game="knowme"] .player-name { color: var(--km-ink); }
[data-rp-game="knowme"] .player-avatar:not(.has-photo),
[data-rp-game="knowme"] .mini-score-avatar-letter { color: #fff; background: var(--km-navy); }
[data-rp-game="knowme"] .player-host { color: var(--km-brick); }

/* Round: navy badges, cream answer labels, brick selection. */
[data-rp-game="knowme"] .round-badge { color: var(--km-cream); background: var(--km-navy); }
[data-rp-game="knowme"] .timer-badge { color: #fff; background: var(--km-navy); }
[data-rp-game="knowme"] .timer-badge.warning { color: var(--km-ink); background: var(--error); }
[data-rp-game="knowme"] .respondent-badge { color: #fff; background: var(--km-navy); border-color: transparent; }
[data-rp-game="knowme"] .respondent-badge .name { color: var(--km-cream); }
[data-rp-game="knowme"] .question-text { color: #fff; }
[data-rp-game="knowme"] .phase-hint,
[data-rp-game="knowme"] .waiting-text { color: var(--km-cream); }
[data-rp-game="knowme"] .waiting-dots span { background: var(--km-cream); }
[data-rp-game="knowme"] .option-btn,
[data-rp-game="knowme"] .yesno-btn.yes-btn,
[data-rp-game="knowme"] .yesno-btn.no-btn { color: var(--km-ink); background: var(--km-cream); border-color: transparent; }
[data-rp-game="knowme"] .option-btn.selected,
[data-rp-game="knowme"] .yesno-btn.yes-btn.selected,
[data-rp-game="knowme"] .yesno-btn.no-btn.selected { color: #fff; background: var(--km-brick); border-color: var(--km-cream); box-shadow: 0 0 0 2px var(--km-cream); }
[data-rp-game="knowme"] .option-btn.correct { color: #fff; background: var(--km-navy); border-color: var(--rp-correct); }
[data-rp-game="knowme"] .option-btn.wrong { color: #fff; background: var(--km-navy); border-color: var(--rp-wrong); }
@media (hover: hover) {
  [data-rp-game="knowme"] .option-btn:hover:not(:disabled) { border-color: var(--km-brick); }
}

/* Round reveal (shared RevealResults): cream labels; the respondent's answer on a navy card keeps the stock green. */
[data-rp-game="knowme"] .rr-context-subtext,
[data-rp-game="knowme"] .rr-leaderboard-title { color: var(--km-cream); }
[data-rp-game="knowme"] .rr-option { background: var(--km-cream); border: 2px solid transparent; }
[data-rp-game="knowme"] .rr-option.rr-type-wrong { border-color: rgba(23, 25, 31, .16); }
[data-rp-game="knowme"] .rr-option-text { color: var(--km-ink); }
[data-rp-game="knowme"] .rr-vote-count,
[data-rp-game="knowme"] .rr-voters-label { color: var(--km-ink-muted); }
[data-rp-game="knowme"] .rr-voter { color: var(--km-ink); background: rgba(23, 25, 31, .08); }
[data-rp-game="knowme"] .rr-voter-points,
[data-rp-game="knowme"] .rr-lb-delta:not(.rr-zero) { padding: 1px 6px; border-radius: 6px; background: var(--km-navy); }
[data-rp-game="knowme"] .rr-option.rr-type-correct { background: var(--km-navy); border-color: var(--rp-correct); }
[data-rp-game="knowme"] .rr-option.rr-type-correct .rr-vote-count,
[data-rp-game="knowme"] .rr-option.rr-type-correct .rr-voters-label { color: var(--km-cream); }
[data-rp-game="knowme"] .rr-option.rr-type-correct .rr-voter { color: #fff; background: rgba(255, 255, 255, .12); }
[data-rp-game="knowme"] .rr-option.rr-type-correct .rr-voter-points { padding: 0; background: none; }
[data-rp-game="knowme"] .rr-lb-row { background: var(--km-cream); border: 2px solid transparent; }
[data-rp-game="knowme"] .rr-lb-row.rr-leading { border-color: var(--km-navy); background: var(--km-cream); }
[data-rp-game="knowme"] .rr-lb-name,
[data-rp-game="knowme"] .rr-lb-score { color: var(--km-ink); }
[data-rp-game="knowme"] .rr-lb-pos { color: var(--km-ink-muted); background: rgba(23, 25, 31, .08); }
[data-rp-game="knowme"] .rr-lb-delta.rr-zero { color: var(--km-ink-muted); }

/* Final results. */
[data-rp-game="knowme"] .winner-name { color: #fff; }
[data-rp-game="knowme"] .score-item { color: var(--km-ink); background: var(--km-cream); border: 2px solid transparent; }
[data-rp-game="knowme"] .score-item.leading { border-color: var(--km-navy); background: var(--km-cream); }
[data-rp-game="knowme"] .score-name { color: var(--km-ink); }
[data-rp-game="knowme"] .score-value { color: var(--km-brick); }
[data-rp-game="knowme"] .score-position:not(.gold):not(.silver):not(.bronze) { color: var(--km-ink); background: rgba(23, 25, 31, .1); }
[data-rp-game="knowme"] #roomplay-party-finale { border: 0; background: var(--km-navy); }
[data-rp-game="knowme"] #roomplay-party-finale p { color: var(--km-cream); }
[data-rp-game="knowme"] #roomplay-party-finale .rpf-kicker { color: var(--km-cream); }
[data-rp-game="knowme"] #roomplay-party-finale :is(.rpf-share, .rpf-premium) { color: #fff; background: var(--km-brick); }
[data-rp-game="knowme"] #roomplay-party-finale .rpf-next { color: #fff; background: rgba(255, 255, 255, .12); }

/* Overlays and popups: navy sheet, brick confirm, cream outline cancel. */
[data-rp-game="knowme"] .connection-overlay { background: rgba(182, 64, 53, .96); }
[data-rp-game="knowme"] .connection-text { color: var(--km-cream); }
/* Exit confirmation and settings popups: colours go through the shared --rp-dialog-* tokens
   (assets/css/confirm-dialog.css). */
[data-rp-game="knowme"] {
  --rp-dialog-overlay: rgba(40, 18, 16, .78);
  --rp-dialog-bg: var(--km-navy);
  --rp-dialog-text: var(--km-cream);
  --rp-dialog-primary-bg: var(--km-brick);
  --rp-dialog-secondary-border: var(--km-cream);
  --rp-dialog-secondary-text: #fff;
  --rp-dialog-control-btn-bg: rgba(255, 255, 255, .14);
  --rp-dialog-control-btn-active: rgba(255, 255, 255, .14);
  --rp-dialog-toggle-bg: rgba(255, 255, 255, .14);
}

/* Onboarding: animated flat SVG characters (static copies via <picture> for reduced motion). */
[data-rp-game="knowme"] #onboarding-screen .slide-icon { width: min(240px, 55vw); margin-bottom: 18px; font-size: 0; line-height: 0; }
[data-rp-game="knowme"] #onboarding-screen .slide-icon picture,
[data-rp-game="knowme"] #onboarding-screen .slide-icon img { display: block; width: 100%; height: auto; }
[data-rp-game="knowme"] .slide-title { color: #fff; }
[data-rp-game="knowme"] .slide-text { color: var(--km-cream); }
@media (max-height: 600px) {
  [data-rp-game="knowme"] #onboarding-screen .slide-icon { width: 120px; margin-bottom: 8px; }
}
/* Short landscape phones: character beside the copy so the text never runs under the dots/buttons. */
@media (max-height: 500px) and (min-width: 560px) {
  [data-rp-game="knowme"] #onboarding-screen .onboarding-slide.active { display: grid; grid-template-columns: auto minmax(0, 340px); grid-template-rows: auto auto; column-gap: 24px; align-items: center; padding-top: 0; text-align: left; }
  [data-rp-game="knowme"] #onboarding-screen .slide-icon { grid-row: 1 / span 2; width: 120px; margin: 0; }
  [data-rp-game="knowme"] #onboarding-screen .slide-title { align-self: end; margin-bottom: 6px; }
  [data-rp-game="knowme"] #onboarding-screen .slide-text { align-self: start; max-width: none; }
}

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

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

  /* Packs: shared touch classes from packs.js. */
  [data-rp-game="knowme"] .pack-card { transition: transform var(--km-settle) var(--km-spring), border-color 150ms ease; }
  [data-rp-game="knowme"] .pack-card.packs-touch-press:not(.locked) { transform: scale(.965); transition-duration: var(--km-press); }
  [data-rp-game="knowme"] .pack-card.packs-touch-pop:not(.locked) { animation: km-pop 320ms var(--km-spring); }
  [data-rp-game="knowme"] .pack-card.packs-touch-pop:not(.locked) .pack-art { animation: km-nod 360ms ease-out; }

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

  /* Round: the respondent badge stamps, the question card arrives, answer labels deal in. */
  [data-rp-game="knowme"] #game-screen.active .respondent-badge { animation: km-stamp-in 360ms var(--km-spring) both; }
  [data-rp-game="knowme"] #game-screen.active .question-text { animation: km-paper-arrive 280ms var(--km-spring) both; }
  [data-rp-game="knowme"] #answer-phase,
  [data-rp-game="knowme"] #guess-phase,
  [data-rp-game="knowme"] #waiting-phase,
  [data-rp-game="knowme"] #guess-waiting-phase { animation: km-paper-arrive 280ms var(--km-spring) both; }
  [data-rp-game="knowme"] .options-grid .option-btn { animation: km-pop-in 260ms var(--km-spring) both; }
  [data-rp-game="knowme"] .options-grid .option-btn:nth-child(2) { animation-delay: 40ms; }
  [data-rp-game="knowme"] .options-grid .option-btn:nth-child(3) { animation-delay: 80ms; }
  [data-rp-game="knowme"] .options-grid .option-btn:nth-child(n+4) { animation-delay: 120ms; }
  [data-rp-game="knowme"] .options-grid .option-btn.selected,
  [data-rp-game="knowme"] .yesno-btn.selected { animation: km-answer-stamp 260ms var(--km-spring); }

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

/* Pack choice arrow: COMMON/roomplay-palettes.html / knowme accent #822D29, outlined in surface #FFF2DC because the accent is too dark for an ink outline. */
:root {
    --packs-cue-color: #822D29;
    --packs-cue-stroke: #FFF2DC;
}

/* Like / dislike / report under the question (shared content-report.css), shown after this phone answers. */
:root {
  --rp-report-surface: var(--km-navy);
  --rp-report-text: var(--km-cream);
  --rp-report-muted: rgb(255 242 220 / 72%);
  --rp-report-accent: var(--km-cream);
  --rp-report-accent-ink: var(--km-ink);
}
.knowme-card-vote { margin-top: 12px; }
#reveal-container .knowme-card-vote { margin: 0 0 12px; }