/* Game Theme only. Palette: COMMON/roomplay-palettes.html / wouldyourather.
   bg #006BCB, surface #FFFFFF, accent #CA003D, secondary #00BCE9; side A = blue/cyan, side B = crimson/orange.
   Side colours are equal choices, never right/wrong; success/error tokens are unchanged. */
:root {
  /* Answer and gender tones: COMMON/roomplay-palettes.html / wouldyourather (correct, wrong, male, female). */
  --rp-correct: #72feb5;
  --rp-correct-ink: #17191f;
  --rp-wrong: #fdd2d3;
  --rp-wrong-ink: #17191f;
  --rp-male: #03bdea;
  --rp-female: #f77cb0;
  --bg-primary: #006bcb;
  --bg-secondary: #004e99;
  --bg-card: #004e99;
  --text-primary: #ffffff;
  --text-secondary: #e8f3ff;
  --text-placeholder: #b8d8f5;
  --accent-purple: #ca003d;
  --accent-purple-dark: #a30031;
  --accent-blue: #ca003d;
  --wyr-ink: #17191f;
  --wyr-surface: #ffffff;
  --wyr-a: #00bce9;
  --wyr-a-strong: #006bcb;
  --wyr-b: #ca003d;
  --wyr-b-hot: #f5004c;
  --wyr-b-warm: #ff5a00;
  --navy: #006bcb;
  --navy-2: #004e99;
  --panel: #004e99;
  --line: rgba(255, 255, 255, .22);
  --muted: #e8f3ff;
  --cyan: var(--wyr-a);
  --cyan-deep: #0096ba;
  --coral: var(--wyr-b);
  --coral-deep: #a30031;
  --settings-accent: #ca003d;
  --settings-accent-dark: #a30031;
  --onboarding-accent: #ca003d;
  --onboarding-accent-dark: #ca003d;
  --onboarding-shadow: transparent;
  --onboarding-shadow-hover: transparent;
  --packs-accent: #ffffff;
  --packs-feedback-rgb: 255, 255, 255;
}
html, body[data-rp-game="wouldyourather"], .page-loader { background: var(--bg-primary); }

/* Shared actions: crimson primary, white outline secondary (crimson text would vanish on blue). */
[data-rp-game="wouldyourather"] .btn-play,
[data-rp-game="wouldyourather"] .btn-next-slide { background: var(--wyr-b); color: #fff; box-shadow: none; }
[data-rp-game="wouldyourather"] .btn-play:disabled { background: var(--bg-secondary); color: var(--text-secondary); }
[data-rp-game="wouldyourather"] .btn-join,
[data-rp-game="wouldyourather"] .btn-skip,
[data-rp-game="wouldyourather"] .btn-additional-settings { border-color: #fff; color: #fff; background: transparent; }
/* Same one-line label as the other games; the rounds summary stays for screen readers. */
[data-rp-game="wouldyourather"] #rounds-settings-value { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-rp-game="wouldyourather"] .dot { background: rgba(255, 255, 255, .38); }
[data-rp-game="wouldyourather"] .dot.active { background: #fff; }
[data-rp-game="wouldyourather"] .player-avatar { background: var(--wyr-a); color: var(--wyr-ink); }
[data-rp-game="wouldyourather"] .packs-summary,
[data-rp-game="wouldyourather"] .input { background: var(--bg-secondary); color: #fff; }
[data-rp-game="wouldyourather"] .packs-summary strong { color: #fff; }
[data-rp-game="wouldyourather"] .form-message { color: #ffd2dc; }

/* Labels and badges on cyan need dark ink (white on #00BCE9 is only 2.2:1). */
[data-rp-game="wouldyourather"] .eyebrow { color: #fff; }
[data-rp-game="wouldyourather"] .eyebrow.danger { display: inline-block; padding: 4px 10px; border-radius: 999px; color: #fff; background: var(--wyr-b); }
[data-rp-game="wouldyourather"] .timer-badge:not(.urgent) { color: var(--wyr-ink); background: var(--wyr-a); }
[data-rp-game="wouldyourather"] .role-symbol { color: var(--wyr-ink); background: var(--wyr-a); border-color: transparent; }
[data-rp-game="wouldyourather"] .role-panel.imposter .role-symbol { color: #fff; background: var(--wyr-b); }
[data-rp-game="wouldyourather"] .privacy-note { color: var(--text-secondary); }

/* Decision: white cards joined by the two colour fields from the palette preview. */
[data-rp-game="wouldyourather"] .phase-line strong { color: #fff; }
[data-rp-game="wouldyourather"] .choice-side { color: var(--wyr-ink); background: var(--wyr-surface); border: 0; position: relative; overflow: hidden; }
[data-rp-game="wouldyourather"] .choice-side::before { content: ""; position: absolute; inset: 0 0 auto; height: 10px; }
[data-rp-game="wouldyourather"] .choice-side.left,
[data-rp-game="wouldyourather"] .choice-side.right { color: var(--wyr-ink); background: var(--wyr-surface); }
[data-rp-game="wouldyourather"] .choice-side.left::before { background: linear-gradient(90deg, var(--wyr-a-strong), var(--wyr-a)); }
[data-rp-game="wouldyourather"] .choice-side.right::before { background: linear-gradient(90deg, var(--wyr-b-hot), var(--wyr-b-warm)); }
[data-rp-game="wouldyourather"] .side-label { width: auto; height: auto; min-height: 32px; padding: 7px 14px; border-radius: 999px; color: var(--wyr-ink); background: var(--wyr-a); font-size: 12px; letter-spacing: .06em; white-space: nowrap; }
[data-rp-game="wouldyourather"] .choice-side.right .side-label { color: #fff; background: var(--wyr-b); }
[data-rp-game="wouldyourather"] .stamp-left { color: var(--wyr-a-strong); border-color: var(--wyr-a-strong); }
[data-rp-game="wouldyourather"] .stamp-right { color: var(--wyr-b); border-color: var(--wyr-b); }
[data-rp-game="wouldyourather"] .swipe-hint { color: var(--text-secondary); }
[data-rp-game="wouldyourather"] .choice-button { color: var(--wyr-ink); background: var(--wyr-surface); border: 2px solid transparent; }
[data-rp-game="wouldyourather"] .choice-button.left span { color: var(--wyr-ink); background: var(--wyr-a); }
[data-rp-game="wouldyourather"] .choice-button.right span { color: #fff; background: var(--wyr-b); }
[data-rp-game="wouldyourather"] .choice-button.selected { border-color: var(--wyr-ink); background: var(--wyr-surface); box-shadow: 0 0 0 3px #fff; }

/* Round reveal and imposter screens on the darker blue panel. */
[data-rp-game="wouldyourather"] .wyr-round-reveal .rr-context-subtext { background: rgba(0, 0, 0, .18); }
[data-rp-game="wouldyourather"] .wyr-round-reveal .rr-badge-majority { color: var(--wyr-ink); background: var(--wyr-a); }
[data-rp-game="wouldyourather"] .wyr-round-reveal .rr-lb-row.rr-leading { border-color: #fff; background: rgba(255, 255, 255, .16); }
[data-rp-game="wouldyourather"] .candidate-button.selected { color: #fff; border-color: #fff; background: var(--wyr-b); }
[data-rp-game="wouldyourather"] .reveal-identity { border-color: var(--wyr-b); background: var(--wyr-b); }
[data-rp-game="wouldyourather"] .reveal-identity p { color: #ffe3ea; }
[data-rp-game="wouldyourather"] .reveal-identity .avatar { color: var(--wyr-ink); background: #fff; }
[data-rp-game="wouldyourather"] .avatar { background: var(--bg-primary); }
[data-rp-game="wouldyourather"] .question-pair { background: rgba(0, 0, 0, .12); }
[data-rp-game="wouldyourather"] .question-version { border-left-color: #fff; }
[data-rp-game="wouldyourather"] .question-version.imposter { border-left-color: var(--wyr-b-warm); }
[data-rp-game="wouldyourather"] .final-symbol { color: #fff; background: linear-gradient(105deg, var(--wyr-a-strong) 0%, var(--wyr-a) 49.5%, var(--wyr-b-hot) 50%, var(--wyr-b-warm) 100%); }
[data-rp-game="wouldyourather"] .final-scoreboard .score-item:first-child { border-color: #fff; }
[data-rp-game="wouldyourather"] .connection-overlay { color: #fff; background: rgba(0, 78, 153, .96); }
[data-rp-game="wouldyourather"] .spinner { border-color: rgba(255, 255, 255, .25); border-top-color: #fff; }

/* Exit confirmation and settings popups: same blue panel, crimson primary, white outline secondary.
   Colours go through the shared --rp-dialog-* tokens (assets/css/confirm-dialog.css). */
[data-rp-game="wouldyourather"] {
  --rp-dialog-overlay: rgba(0, 40, 82, .86);
  --rp-dialog-bg: var(--bg-secondary);
  --rp-dialog-border: 1px solid var(--line);
  --rp-dialog-title: #fff;
  --rp-dialog-text: var(--text-secondary);
  --rp-dialog-primary-bg: var(--wyr-b);
  --rp-dialog-primary-text: #fff;
  --rp-dialog-secondary-border: #fff;
  --rp-dialog-secondary-text: #fff;
  --rp-dialog-control-bg: rgba(255, 255, 255, .1);
  --rp-dialog-control-btn-bg: rgba(255, 255, 255, .16);
  --rp-dialog-control-btn-active: rgba(255, 255, 255, .26);
  --rp-dialog-toggle-bg: rgba(255, 255, 255, .16);
}

/* Pack choice arrow: COMMON/roomplay-palettes.html / wouldyourather accent #CA003D. */
:root {
    --packs-cue-color: #CA003D;
}

/* Like / dislike / report under the dilemma (shared content-report.css), shown after this phone answered.
   White on the blue field; the pressed thumb turns filled white. */
:root {
  --rp-report-text: #fff;
  --rp-report-muted: var(--text-secondary);
  --rp-report-accent: #fff;
  --rp-report-accent-ink: var(--wyr-ink);
  --rp-report-surface: var(--bg-secondary);
  --rp-report-line: rgba(255, 255, 255, .22);
  --rp-report-chip: rgba(255, 255, 255, .1);
  --rp-report-flag: rgb(255 255 255 / 62%);
  --rp-report-error: var(--rp-wrong);
}
/* Thumbs sit in a white pill on the bottom seam of the two option halves, the flag in the
   bottom-right corner of the dilemma card. The answered card fades only its halves, so the
   thumbs and the flag stay crisp and tappable (the card itself stops taking presses). */
[data-rp-game="wouldyourather"] .choice-card.submitted { opacity: 1; }
[data-rp-game="wouldyourather"] .choice-card.submitted > .choice-side { opacity: .55; }
[data-rp-game="wouldyourather"] .choice-card:has(.wyr-card-vote:not([hidden])) > .choice-side { padding-bottom: 64px; }
[data-rp-game="wouldyourather"] .wyr-card-vote { position: absolute; left: 50%; bottom: 10px; z-index: 6; margin: 0; padding: 0 4px; gap: 2px; transform: translateX(-50%); border-radius: 999px; background: var(--wyr-surface); box-shadow: 0 4px 14px rgb(0 40 120 / 28%); pointer-events: auto; }
[data-rp-game="wouldyourather"] .wyr-card-vote .rp-card-vote__btn { color: rgb(23 25 31 / 50%); }
[data-rp-game="wouldyourather"] .wyr-card-vote .rp-card-vote__btn[aria-pressed="true"] { color: var(--wyr-a-strong); }
[data-rp-game="wouldyourather"] .wyr-card-vote .rp-card-vote__btn:active { background: rgb(23 25 31 / 8%); }
[data-rp-game="wouldyourather"] .wyr-report-flag { position: absolute; right: 4px; bottom: 6px; z-index: 6; color: rgb(23 25 31 / 55%); pointer-events: auto; }
[data-rp-game="wouldyourather"] .wyr-report-flag[hidden] { display: none; }