/* Game Theme only. Palette: COMMON/roomplay-palettes.html / fibbage (Fibbage XL adaptation).
   bg #70292C maroon banner (white text), surface #F0E5C6 cream (ink #17191F), accent #EBA332 ochre (ink text),
   secondary #9BA592 sage (decorative only). Cream cards carry dark ink; darker maroon panels (#5A2023/#4E1A1D)
   carry light text and the stock green/red success/error tokens. */
:root {
  /* Answer and gender tones: COMMON/roomplay-palettes.html / fibbage (correct, wrong, male, female). */
  --rp-correct: #83ca6a;
  --rp-correct-ink: #17191f;
  --rp-wrong: #b14330;
  --rp-wrong-ink: #ffffff;
  --rp-male: #78bafc;
  --rp-female: #fc8ab9;
  --bg-primary: #70292c;
  --bg-secondary: #5a2023;
  --bg-card: #5a2023;
  --text-primary: #ffffff;
  --text-secondary: #e9d3d0;
  --text-placeholder: #6b5a48;
  --accent-purple: #eba332;
  --accent-purple-dark: #d68f1f;
  --accent-blue: #eba332;
  --accent-pink: #eba332;
  --accent-pink-dark: #d68f1f;
  --accent-primary: #eba332;
  --accent-primary-dark: #d68f1f;
  --accent-secondary: #9ba592;
  --fb-ink: #17191f;
  --fb-ink-muted: #5c4a3a;
  --fb-cream: #f0e5c6;
  --fb-ochre: #eba332;
  --fb-ochre-tint: #f6dca6;
  --fb-maroon: #70292c;
  --fb-panel: #5a2023;
  --fb-panel-deep: #4e1a1d;
  --fb-sage: #9ba592;
  --onboarding-accent: #eba332;
  --onboarding-accent-dark: #eba332;
  --onboarding-shadow: transparent;
  --onboarding-shadow-hover: transparent;
  --settings-accent: #eba332;
  --settings-accent-dark: #d68f1f;
  --packs-accent: #eba332;
  --packs-feedback-rgb: 235, 163, 50;
  --ps-accent: #eba332;
  --game-accent: #eba332;
}
html, body[data-rp-game="fibbage"], .page-loader { background: var(--bg-primary); }
body[data-rp-game="fibbage"] { color: #fff; }
[data-rp-game="fibbage"] .loader-spinner,
[data-rp-game="fibbage"] .connection-spinner,
[data-rp-game="fibbage"] .rp-waiting-spinner { border-color: rgba(240, 229, 198, .2); border-top-color: var(--fb-ochre); }

/* Actions: ochre primary with ink text (8.2:1), cream outline secondary. */
[data-rp-game="fibbage"] .btn-play,
[data-rp-game="fibbage"] .btn-next-slide,
[data-rp-game="fibbage"] .btn-join.active { color: var(--fb-ink); background: var(--fb-ochre); border-color: transparent; box-shadow: none; }
[data-rp-game="fibbage"] .btn-play:disabled { color: var(--text-secondary); background: var(--fb-panel); opacity: 1; }
[data-rp-game="fibbage"] .btn-join,
[data-rp-game="fibbage"] .btn-play.outlined { color: var(--fb-ochre); border-color: var(--fb-ochre); background: transparent; box-shadow: none; }
[data-rp-game="fibbage"] .btn-skip { color: var(--fb-cream); border-color: var(--fb-cream); }
[data-rp-game="fibbage"] .btn-copy { color: var(--fb-cream); background: var(--fb-panel); border-color: rgba(240, 229, 198, .25); }
[data-rp-game="fibbage"] .dot { background: rgba(240, 229, 198, .3); }
[data-rp-game="fibbage"] .dot.active { background: var(--fb-ochre); }
[data-rp-game="fibbage"] .input { color: var(--fb-ink); background: var(--fb-cream); border-color: transparent; }
[data-rp-game="fibbage"] .input:focus { border-color: var(--fb-ochre); }
[data-rp-game="fibbage"] .input:disabled { opacity: .7; }
[data-rp-game="fibbage"] .subtitle,
[data-rp-game="fibbage"] .lobby-hint,
[data-rp-game="fibbage"] .lobby-status { color: var(--text-secondary); }

/* Lobby. */
[data-rp-game="fibbage"] .room-code-display { color: var(--fb-ochre); background: var(--fb-panel); }
[data-rp-game="fibbage"] .player-item { color: var(--fb-ink); background: var(--fb-cream); }
[data-rp-game="fibbage"] .player-name { color: var(--fb-ink); }
[data-rp-game="fibbage"] .player-avatar:not(.has-photo) { color: var(--fb-ink); background: var(--fb-ochre); }
[data-rp-game="fibbage"] .player-host { color: var(--fb-maroon); }
[data-rp-game="fibbage"] .rounds-btn { color: var(--fb-ochre); border-color: var(--fb-ochre); }
[data-rp-game="fibbage"] .rounds-value { color: #fff; }
[data-rp-game="fibbage"] .rounds-label { color: var(--text-secondary); }

/* Round: cream fact card with an ochre blank, ochre timer. */
[data-rp-game="fibbage"] .round-badge { color: var(--text-secondary); background: var(--fb-panel); }
[data-rp-game="fibbage"] .timer-badge { color: var(--fb-ink); background: var(--fb-ochre); }
[data-rp-game="fibbage"] .timer-badge.warning { color: var(--fb-ink); background: var(--error); }
[data-rp-game="fibbage"] .question-card { background: var(--fb-cream); border: 0; box-shadow: 0 6px 0 var(--fb-panel-deep); }
[data-rp-game="fibbage"] .question-card .question-text { color: var(--fb-ink); }
[data-rp-game="fibbage"] .question-blank { display: inline-block; padding: 0 4px; border-radius: 4px; color: var(--fb-ink); background: var(--fb-ochre); }
[data-rp-game="fibbage"] .rr-question-blank { color: var(--fb-ochre); border-bottom-color: var(--fb-ochre); }
[data-rp-game="fibbage"] .error-text:not(:empty) { display: inline-block; margin-top: 10px; padding: 6px 14px; border-radius: 999px; color: var(--error); background: var(--fb-panel-deep); }
[data-rp-game="fibbage"] .submitted-overlay { background: rgba(78, 26, 29, .9); }
[data-rp-game="fibbage"] .submitted-icon { color: var(--success); }
[data-rp-game="fibbage"] .submitted-hint { color: var(--text-secondary); }

/* Voting: cream answer cards, ochre letters, maroon selection ring. */
[data-rp-game="fibbage"] .vote-option { color: var(--fb-ink); background: var(--fb-cream); border-color: transparent; }
[data-rp-game="fibbage"] .option-letter { color: var(--fb-ink); background: var(--fb-ochre); }
[data-rp-game="fibbage"] .vote-option.selected { border-color: var(--fb-ochre); background: var(--fb-ochre-tint); box-shadow: 0 0 0 2px var(--fb-ochre); }
[data-rp-game="fibbage"] .vote-option.selected .option-letter { color: var(--fb-ochre); background: var(--fb-maroon); }
@media (hover: hover) {
  [data-rp-game="fibbage"] .vote-option:hover:not(.selected):not(.disabled):not(.excluded) { border-color: var(--fb-ochre); }
}
[data-rp-game="fibbage"] .vote-confirmed { display: flex; width: fit-content; margin-inline: auto; padding: 8px 16px; border-radius: 999px; background: var(--fb-panel-deep); }

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

/* Final results. */
[data-rp-game="fibbage"] .winner-name { color: var(--fb-ochre); }
[data-rp-game="fibbage"] .score-item { color: var(--fb-ink); background: var(--fb-cream); border: 2px solid transparent; }
[data-rp-game="fibbage"] .score-item.leading { border-color: var(--fb-ochre); background: var(--fb-cream); }
[data-rp-game="fibbage"] .score-name { color: var(--fb-ink); }
[data-rp-game="fibbage"] .score-value { color: var(--fb-maroon); }
[data-rp-game="fibbage"] .score-position:not(.gold):not(.silver):not(.bronze) { color: var(--fb-ink); background: rgba(23, 25, 31, .1); }
[data-rp-game="fibbage"] .mini-score-item { color: #fff; background: var(--fb-panel); }
[data-rp-game="fibbage"] .mini-score-value { color: var(--fb-ochre); }
[data-rp-game="fibbage"] .mini-score-avatar-letter { color: var(--fb-ink); background: var(--fb-ochre); }
[data-rp-game="fibbage"] #roomplay-party-finale { border: 0; background: var(--fb-panel); }
[data-rp-game="fibbage"] #roomplay-party-finale p { color: var(--text-secondary); }
[data-rp-game="fibbage"] #roomplay-party-finale .rpf-kicker { color: var(--fb-ochre); }
[data-rp-game="fibbage"] #roomplay-party-finale :is(.rpf-share, .rpf-premium) { color: var(--fb-ink); background: var(--fb-ochre); }
[data-rp-game="fibbage"] #roomplay-party-finale .rpf-next { color: var(--fb-cream); background: transparent; box-shadow: inset 0 0 0 2px var(--fb-cream); }

/* Overlays and popups: cream sheet, ochre confirm, ink outline cancel. */
[data-rp-game="fibbage"] .connection-overlay { background: rgba(112, 41, 44, .96); }
[data-rp-game="fibbage"] .connection-text { color: var(--text-secondary); }
/* Exit confirmation and settings popups: colours go through the shared --rp-dialog-* tokens
   (assets/css/confirm-dialog.css). */
[data-rp-game="fibbage"] {
  --rp-dialog-overlay: rgba(40, 12, 14, .8);
  --rp-dialog-bg: var(--fb-cream);
  --rp-dialog-shadow: 0 8px 0 var(--fb-panel-deep);
  --rp-dialog-title: var(--fb-ink);
  --rp-dialog-text: var(--fb-ink-muted);
  --rp-dialog-primary-bg: var(--fb-ochre);
  --rp-dialog-primary-text: var(--fb-ink);
  --rp-dialog-secondary-border: var(--fb-ink);
  --rp-dialog-secondary-text: var(--fb-ink);
}

/* Onboarding: animated flat SVG characters (static copies via <picture> for reduced motion). */
[data-rp-game="fibbage"] #onboarding-screen .slide-icon { width: min(240px, 55vw); margin-bottom: 18px; font-size: 0; line-height: 0; }
[data-rp-game="fibbage"] #onboarding-screen .slide-icon picture,
[data-rp-game="fibbage"] #onboarding-screen .slide-icon img { display: block; width: 100%; height: auto; }
[data-rp-game="fibbage"] .slide-title { color: #fff; }
[data-rp-game="fibbage"] .slide-text { color: var(--text-secondary); }
@media (max-height: 600px) {
  [data-rp-game="fibbage"] #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="fibbage"] #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="fibbage"] #onboarding-screen .slide-icon { grid-row: 1 / span 2; width: 120px; margin: 0; }
  [data-rp-game="fibbage"] #onboarding-screen .slide-title { align-self: end; margin-bottom: 6px; }
  [data-rp-game="fibbage"] #onboarding-screen .slide-text { align-self: start; max-width: none; }
}

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

  [data-rp-game="fibbage"] .onboarding-slide.active .slide-icon { animation: fb-character-arrive 380ms var(--fb-spring) both; }
  [data-rp-game="fibbage"] #lobby-screen.active .room-code-display { animation: fb-stamp-in 360ms var(--fb-spring) both; }

  /* Writing: the fact card slides in, its blank stamps into place. */
  [data-rp-game="fibbage"] #writing-screen.active .question-card,
  [data-rp-game="fibbage"] #voting-screen.active .question-card { animation: fb-paper-arrive 280ms var(--fb-spring) both; }
  [data-rp-game="fibbage"] #writing-screen.active .question-blank { animation: fb-stamp-in 360ms var(--fb-spring) 160ms both; }
  [data-rp-game="fibbage"] .submitted-overlay.visible .submitted-icon { animation: fb-stamp-in 360ms var(--fb-spring) both; }
  [data-rp-game="fibbage"] .error-text:not(:empty) { animation: fb-nod 360ms ease-out; }

  /* Voting: answers deal in one after another; the chosen one stamps. */
  [data-rp-game="fibbage"] #voting-screen.active .vote-option { animation: fb-paper-arrive 280ms var(--fb-spring) both; }
  [data-rp-game="fibbage"] #voting-screen.active .vote-option:nth-child(2) { animation-delay: 40ms; }
  [data-rp-game="fibbage"] #voting-screen.active .vote-option:nth-child(3) { animation-delay: 80ms; }
  [data-rp-game="fibbage"] #voting-screen.active .vote-option:nth-child(4) { animation-delay: 120ms; }
  [data-rp-game="fibbage"] #voting-screen.active .vote-option:nth-child(n+5) { animation-delay: 160ms; }
  [data-rp-game="fibbage"] #voting-screen.active .vote-option.selected { animation: fb-answer-stamp 260ms var(--fb-spring); }
  [data-rp-game="fibbage"] .vote-option.selected .option-letter { animation: fb-nod 360ms ease-out; }
  [data-rp-game="fibbage"] .vote-confirmed { animation: fb-stamp-in 360ms var(--fb-spring); }

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

/* Like / dislike / report under the question (shared content-report.css), shown after this phone
   votes and on the round's reveal. */
:root {
  --rp-report-surface: var(--fb-panel-deep);
  --rp-report-text: #ffffff;
  --rp-report-muted: var(--text-secondary);
  --rp-report-accent: var(--fb-ochre);
  --rp-report-accent-ink: var(--fb-ink);
}
/* Thumbs centred on the question card's bottom edge, flag in its bottom-right corner; the reveal's
   question block becomes the same cream card while it holds them. */
[data-rp-game="fibbage"] :is(#voting-question-card, .fibbage-reveal-question) { position: relative; }
[data-rp-game="fibbage"] #voting-question-card:has(> .fibbage-card-vote:not([hidden])) { padding-bottom: 56px; }
[data-rp-game="fibbage"] #reveal-container .rr-context.fibbage-reveal-question {
  padding: 18px 20px 56px; border-radius: 16px; background: var(--fb-cream); box-shadow: 0 6px 0 var(--fb-panel-deep);
}
[data-rp-game="fibbage"] .fibbage-reveal-question .rr-context-text { color: var(--fb-ink); }
[data-rp-game="fibbage"] .fibbage-reveal-question .rr-context-subtext { color: var(--fb-ink-muted); }
.fibbage-card-vote { position: absolute; left: 50%; bottom: 6px; z-index: 2; margin: 0; transform: translateX(-50%); }
.fibbage-report-flag { position: absolute; right: 6px; bottom: 6px; z-index: 2; }
.fibbage-card-vote[hidden], .fibbage-report-flag[hidden] { display: none; }
:is(.fibbage-card-vote .rp-card-vote__btn, .fibbage-report-flag) { color: rgb(23 25 31 / 55%); }
.fibbage-card-vote .rp-card-vote__btn[aria-pressed="true"] { color: var(--fb-maroon); }
@media (hover: hover) {
  :is(.fibbage-card-vote .rp-card-vote__btn:not([aria-pressed="true"]), .fibbage-report-flag):hover { color: var(--fb-ink); }
}
:is(.fibbage-card-vote .rp-card-vote__btn, .fibbage-report-flag):active { background: rgb(23 25 31 / 8%); }