/* Game Theme only. Palette: COMMON/roomplay-palettes.html / truthordare («Правда или действие»), owner palette
   2026-10-19: red #FF2350, crimson #9E153D, plum #5C0D3E, navy #002149.
   bg #002149 navy, surface #5C0D3E plum (alt #7A1A4F), accent #FF2350 red = truth side (fills carry dark ink #17191F:
   4.7:1; red text on dark uses the tint #FF7A93: 6.4:1 on bg, 5.4:1 on surface), secondary #9E153D crimson = dare side
   (fills carry white: 8.0:1; dare text on dark #FFC2CE). Muted text #C4B5CC: 8.2:1 on bg, 6.8:1 on surface. */
:root {
  --rp-correct: #8bdcad;
  --rp-correct-ink: #17191f;
  --rp-wrong: #feaeb7;
  --rp-wrong-ink: #17191f;
  --rp-male: #9eccfd;
  --rp-female: #ff9eb1;
  color-scheme: dark;
  --bg-primary: #002149;
  --bg-secondary: #5c0d3e;
  --bg-card: #5c0d3e;
  --text-primary: #ffffff;
  --text-secondary: #c4b5cc;
  --text-placeholder: #9a8fb0;
  --accent-pink: #ff2350;
  --accent-pink-dark: #9e153d;
  --accent-purple: #ff2350;
  --accent-purple-dark: #9e153d;
  --accent-blue: #ff2350;
  --accent-orange: #ff2350;
  --tod-accent: #ff2350;
  --tod-accent-deep: #9e153d;
  --tod-lilac: #9e153d;
  --tod-accent-text: #ff7a93;
  --tod-dare-ink: #ffffff;
  --tod-dare-text: #ffc2ce;
  --tod-surface: #5c0d3e;
  --tod-surface-alt: #7a1a4f;
  --tod-ink: #17191f;
  --onboarding-accent: #ff2350;
  --onboarding-accent-dark: #9e153d;
  --onboarding-shadow: transparent;
  --onboarding-shadow-hover: transparent;
  --settings-accent: #ff2350;
  --settings-accent-dark: #9e153d;
  --packs-accent: #ff2350;
  --packs-feedback-rgb: 255, 35, 80;
  --ps-accent: #ff2350;
}
html, body[data-rp-game="truthordare"], .page-loader { background: var(--bg-primary); }
.loader-spinner { border-color: rgba(255, 255, 255, .12); border-top-color: var(--tod-accent); }
.btn-back { color: #fff; }

/* Actions: pink primary with dark ink, lilac outline secondary. */
.btn-play,
.btn-next-slide { color: var(--tod-ink); background: var(--tod-accent); box-shadow: none; }
@media (hover: hover) {
  .btn-play:hover,
  .btn-next-slide:hover { background: var(--tod-accent-deep); box-shadow: none; }
}
.btn-play:disabled { color: var(--text-secondary); background: #7a1a4f; opacity: 1; }
.btn-skip,
.btn-additional-settings,
.btn-secondary { color: #fff; border-color: rgba(255, 122, 147, .6); background: transparent; }
@media (hover: hover) { .btn-secondary:hover { background: rgba(255, 122, 147, .08); } }
.dot { background: rgba(255, 122, 147, .25); }
.dot.active { background: var(--tod-accent); }
.slide-title,
.title { color: #fff; }
.slide-text,
.subtitle,
#question-counter,
.card-instruction,
.gameover-subtitle { color: var(--text-secondary); }

/* Player setup: dark surface rows. */
.ps-add-btn { color: #fff; border-color: var(--tod-accent); }
@media (hover: hover) { .ps-add-btn:hover { color: var(--tod-ink); background: var(--tod-accent); } }
.ps-entry { background: var(--tod-surface); }
.ps-icon--filled { background: var(--tod-accent); color: var(--tod-ink); }
.ps-icon--avatar { background: #7a1a4f; }
.ps-gender { background: #7a1a4f; }

/* Packs: illustrated covers stay; frame, selection and the bottom fade follow the palette. */
/* packs.js sets these inline from the game's accentColor, so they need !important. */
.packs-illustrated-grid { --packs-accent: #ff2350 !important; --packs-feedback-rgb: 255, 35, 80 !important; }
.packs-illustrated-actions { background: linear-gradient(180deg, rgba(0, 33, 73, 0) 0%, var(--bg-primary) 14px); }

#packs-screen .bottom-section { background: linear-gradient(180deg, rgba(0, 33, 73, 0) 0, rgba(0, 33, 73, .96) 18px, #002149 100%); }
.packs-summary { color: var(--text-secondary); background: var(--tod-surface); }
.packs-summary .summary-text { color: var(--text-secondary); }
.packs-summary .summary-text strong { color: var(--tod-accent-text); }

/* Settings popup and exit confirmation: surface sheets, pink action.
   Colours go through the shared --rp-dialog-* tokens (assets/css/confirm-dialog.css). */
:root {
  --rp-dialog-overlay: rgba(10, 10, 12, .8);
  --rp-dialog-bg: var(--tod-surface);
  --rp-dialog-border: 1px solid rgba(255, 122, 147, .12);
  --rp-dialog-text: var(--text-secondary);
  --rp-dialog-primary-bg: var(--tod-accent);
  --rp-dialog-primary-text: var(--tod-ink);
  --rp-dialog-secondary-border: rgba(255, 122, 147, .6);
  --rp-dialog-secondary-text: #fff;
  --rp-dialog-control-btn-bg: rgba(255, 122, 147, .12);
  --rp-dialog-toggle-bg: rgba(255, 122, 147, .1);
}

/* 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; off under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  :root { --tod-press: 100ms; --tod-settle: 240ms; --tod-spring: cubic-bezier(.2, .9, .3, 1.25); }
  button:not(:disabled) {
    transition: scale var(--tod-settle) var(--tod-spring), translate var(--tod-settle) var(--tod-spring),
      background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  }
  button:not(:disabled):active { scale: .96; translate: 0 2px; transition-duration: var(--tod-press); }
  .btn-back:active { scale: .88; }
  .dot { transition: background-color 180ms ease, width 300ms ease, scale 180ms var(--tod-spring); }
  .dot.active { scale: 1.12; }
  .onboarding-slide.active .slide-icon { animation: tod-character-arrive 380ms var(--tod-spring) both; }

  .pack-card.packs-touch-press:not(.locked) { transform: scale(.965); transition-duration: var(--tod-press); }
  .pack-card.packs-touch-pop:not(.locked) { animation: tod-pop 320ms var(--tod-spring); }
  .pack-card.packs-touch-pop:not(.locked) .pack-art { animation: tod-nod 360ms ease-out; }

  #players-screen.active .ps-entry { animation: tod-paper-arrive 280ms var(--tod-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; }

  #card-screen.active .statement-card { animation: tod-paper-arrive 280ms var(--tod-spring) both; }
  #card-screen.active .statement-card::after { animation: tod-mark-in 360ms var(--tod-spring) 120ms both; }
  .statement-card.tod-swap-out .card-text { animation: tod-text-out 130ms ease-in both; }
  .statement-card.tod-swap-in .card-text { animation: tod-text-in 240ms var(--tod-spring) both; }
  #card-screen.active .card-instruction { animation: tod-paper-arrive 280ms var(--tod-spring) 120ms both; }

  #gameover-screen.active .gameover-icon { animation: tod-nod 420ms ease-out 200ms both; }
  #gameover-screen.active .title { animation: tod-stamp-in 360ms var(--tod-spring) both; }
  .confirm-dialog-overlay.active .confirm-dialog-modal,
  .settings-popup-overlay.active .settings-popup-modal { animation: tod-paper-arrive 280ms var(--tod-spring); }
}
@keyframes tod-character-arrive { from { opacity: 0; scale: .82; rotate: -8deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes tod-pop { 0% { transform: scale(.965); } 55% { transform: scale(1.018); } 100% { transform: scale(1); } }
@keyframes tod-nod { 0%, 100% { rotate: 0deg; } 35% { rotate: -8deg; } 70% { rotate: 5deg; } }
@keyframes tod-paper-arrive { from { opacity: 0; translate: 0 12px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes tod-text-out { to { opacity: 0; translate: -18px 0; } }
@keyframes tod-text-in { from { opacity: 0; translate: 22px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes tod-stamp-in { from { opacity: 0; scale: 1.3; } to { opacity: 1; scale: 1; } }
@keyframes tod-mark-in { from { opacity: 0; scale: 1.3; rotate: -12deg; } to { opacity: .4; scale: 1; rotate: 0deg; } }

/* Pack choice arrow: the light red tint #FF7A93 (the crimson secondary is too dark for the ink outline). */
:root {
    --packs-cue-color: #ff7a93;
}

/* «Сообщить об ошибке»: flag in the card's top-right corner, report sheet in the game palette. */
:root {
  --rp-report-surface: var(--tod-surface);
  --rp-report-text: #fff;
  --rp-report-muted: var(--text-secondary);
  --rp-report-line: rgba(255, 122, 147, .2);
  --rp-report-chip: rgba(255, 122, 147, .08);
  --rp-report-accent: var(--tod-accent);
  --rp-report-accent-ink: var(--tod-ink);
  --rp-report-error: var(--rp-wrong);
  --rp-report-flag: rgba(255, 122, 147, .45);
}
.tod-report-flag { position: absolute; top: 4px; right: 4px; z-index: 2; }
.statement-card:has(.tod-card-vote) { padding-bottom: 56px; }
.tod-card-vote { position: absolute; left: 0; right: 0; bottom: 4px; z-index: 2; }

/* Players: a short hint about the sex badge, the cards use it. */
.tod-gender-hint { margin: -6px 0 14px; font-size: 14px; }

/* Turn screen: whose turn, two big choices. Truth is red, dare is crimson. */
.tod-turn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: 100%; max-width: 440px; margin: 0 auto; padding: 0 4px 24px; text-align: center; }
.tod-turn-kicker { margin: 0; color: var(--tod-accent-text); font-size: 14px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.tod-turn-player { color: #fff; font-size: 34px; font-weight: 900; line-height: 1.15; overflow-wrap: anywhere; }
.tod-turn-player .rp-player { gap: .3em; }
.tod-turn-hint { margin: 0 0 8px; color: var(--text-secondary); font-size: 16px; }
.tod-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.tod-choice-btn { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; min-height: 172px; padding: 18px 10px; border: 0; border-radius: 24px; color: var(--tod-ink); font: inherit; font-size: 21px; font-weight: 900; cursor: pointer; }
.tod-choice-btn--truth { background: var(--tod-accent); }
.tod-choice-btn--dare { background: var(--tod-lilac); color: var(--tod-dare-ink); }
.tod-choice-mark { font-size: 76px; line-height: .9; font-weight: 900; opacity: .9; }
.tod-random { width: 100%; }

/* The card: kind on top, the player, the text; flag and votes inside the card. */
.tod-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; min-height: 260px; padding: 26px 22px 64px; background: var(--tod-surface); border: 1px solid rgba(255, 122, 147, .12); border-top: 6px solid var(--tod-accent); border-radius: 24px; box-shadow: 0 14px 36px rgba(0, 0, 0, .4); text-align: left; align-items: stretch; justify-content: center; }
.tod-card.tod-card--dare { background: var(--tod-lilac); border-top-color: var(--tod-accent); }
.tod-card::after { content: "?"; position: absolute; right: 14px; bottom: -22px; font-size: 120px; font-weight: 900; line-height: 1; color: var(--tod-accent-text); opacity: .22; pointer-events: none; }
.tod-card.tod-card--dare::after { content: '!'; color: var(--tod-dare-text); }
.tod-card-kind { position: relative; z-index: 1; margin: 0; color: var(--tod-accent-text); font-size: 14px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.tod-card--dare .tod-card-kind { color: var(--tod-dare-text); }
/* Premium sample card: a small dark chip with a crown names the pack; the card gets a soft pink glow. */
.tod-card-teaser { position: relative; z-index: 1; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin: 0; padding: 6px 12px 6px 9px; border-radius: 999px; background: rgba(23, 25, 31, .3); border: 1px solid rgba(255, 255, 255, .14); color: #fff; font-size: 13px; font-weight: 750; line-height: 1.25; }
.tod-card-teaser::before { content: ""; flex: none; width: 15px; height: 15px; background: var(--tod-accent-text); -webkit-mask: var(--rp-icon-crown) center / contain no-repeat; mask: var(--rp-icon-crown) center / contain no-repeat; }
.tod-card-teaser[hidden], .tod-upgrade[hidden] { display: none; }
/* «Хотите перейти на уровень выше?» uses the shared pearlescent premium button (premium-cta.css). */
#card-screen .tod-upgrade { margin: 14px 0 0; }
#card-screen .tod-card.tod-card--teaser { box-shadow: 0 0 0 2px rgba(255, 122, 147, .5), 0 0 34px rgba(255, 35, 80, .35), 0 22px 44px rgba(0, 0, 0, .45); }

.tod-card-player { position: relative; z-index: 1; color: var(--text-secondary); font-size: 16px; font-weight: 700; }
.tod-card .card-text { position: relative; z-index: 1; color: #fff; font-size: 24px; font-weight: 800; line-height: 1.3; text-align: left; height: auto; }
.tod-card .card-text .rp-player { gap: .25em; }
.tod-card--empty .card-text { color: var(--text-secondary); font-size: 18px; font-weight: 600; }
.tod-pairs { display: block; margin-bottom: 6px; color: var(--tod-accent-text); font-size: .78em; }
.tod-report-flag { position: absolute; top: 4px; right: 4px; z-index: 2; }
.tod-card-vote { position: absolute; left: 0; right: 0; bottom: 4px; z-index: 2; }
.tod-card--empty .tod-card-vote, .tod-card--empty .tod-report-flag { visibility: hidden; }
#card-screen .bottom-section { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
/* Card actions in the shape of the cards and the Правда / Действие buttons, not generic pills. */
#card-screen .bottom-section .btn-secondary,
#card-screen .bottom-section .btn-play { min-height: 64px; margin: 0; padding: 10px 12px; border-radius: 20px; font-size: 16px; font-weight: 900; line-height: 1.15; letter-spacing: 0; }
#card-screen .bottom-section .btn-secondary { color: #fff; background: var(--tod-surface); border: 1px solid rgba(255, 122, 147, .22); }
@media (hover: hover) { #card-screen .bottom-section .btn-secondary:hover { background: var(--tod-surface-alt); } }
/* The display font of the screen titles («Наборы») on the game's own buttons and the player's name. */
.tod-choice-btn, .tod-random, #card-screen .bottom-section .btn-secondary, #card-screen .bottom-section .btn-play, .tod-turn-player {
  font-family: Unbounded, Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 800; letter-spacing: -.02em;
}
@media (max-width: 360px) {
  .tod-choice-btn { min-height: 140px; font-size: 18px; }
  .tod-choice-mark { font-size: 60px; }
  .tod-card .card-text { font-size: 21px; }
}
@media (max-height: 640px) {
  .tod-choice-btn { min-height: 120px; }
  .tod-turn-player { font-size: 28px; }
}

/* «Случайно»: every player is shown and a highlight runs over them; the big name and the choice appear when it stops. */
.tod-roulette { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; padding: 6px 0; }
.tod-roulette[hidden] { display: none; }
.tod-roulette-chip { display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 999px; background: var(--tod-surface); border: 2px solid rgba(255, 122, 147, .14); color: var(--text-secondary); font-size: 18px; font-weight: 800; transition: background-color 90ms ease, color 90ms ease, border-color 90ms ease, scale 120ms var(--tod-spring, ease); }
.tod-roulette-chip .rp-player { gap: .35em; }
.tod-roulette-chip--out { opacity: .35; }
.tod-roulette-chip--on { background: var(--tod-accent); border-color: var(--tod-accent); color: var(--tod-ink); scale: 1.08; box-shadow: 0 0 22px rgba(255, 35, 80, .45); }
.tod-roulette--done .tod-roulette-chip:not(.tod-roulette-chip--on) { opacity: .2; transition: opacity 300ms ease; }
.tod-roulette--done .tod-roulette-chip--on { animation: tod-roulette-stop 520ms var(--tod-spring, ease) both; }
.tod-turn .tod-turn-hint, .tod-turn .tod-choice, .tod-turn .tod-random { transition: opacity 220ms ease, translate 260ms var(--tod-spring, ease); }
.tod-turn.tod-spinning .tod-turn-player { display: none; }
.tod-turn.tod-spinning .tod-turn-hint, .tod-turn.tod-spinning .tod-choice, .tod-turn.tod-spinning .tod-random { opacity: 0; translate: 0 14px; pointer-events: none; }
.tod-turn.tod-spinning { cursor: pointer; }
@keyframes tod-roulette-stop { 0% { scale: 1.08; } 40% { scale: 1.3; } 100% { scale: 1.12; } }

@media (prefers-reduced-motion: no-preference) {
  #turn-screen.active .tod-turn-player { animation: tod-stamp-in 360ms var(--tod-spring) both; }
  #turn-screen.active .tod-choice-btn { animation: tod-paper-arrive 280ms var(--tod-spring) both; }
  #turn-screen.active .tod-choice-btn--dare { animation-delay: 60ms; }
  #turn-screen.active .tod-choice-mark { animation: tod-nod 420ms ease-out 240ms both; }
  #card-screen.active .tod-card { animation: tod-paper-arrive 280ms var(--tod-spring) both; }
  .tod-card.tod-swap-out .card-text { animation: tod-text-out 130ms ease-in both; }
  .tod-card.tod-swap-in .card-text { animation: tod-text-in 240ms var(--tod-spring) both; }
}

/* Depth (owner 2026-10-19: «не хватает глубины, мб градиентов»): a plum glow over the navy
   background, lit gradients with an inner top highlight and a coloured glow on the filled
   buttons, cards lifted with a soft shadow. Ends stay #002149 so the screens' bottom fades match. */
html, body[data-rp-game="truthordare"] {
  background:
    radial-gradient(120% 55% at 50% -12%, rgba(158, 21, 61, .55) 0%, rgba(92, 13, 62, .35) 38%, transparent 70%),
    radial-gradient(80% 40% at 110% 100%, rgba(255, 35, 80, .14) 0%, transparent 70%),
    var(--bg-primary);
  background-attachment: fixed;
}
.btn-play,
.btn-next-slide,
.tod-choice-btn--truth {
  background: linear-gradient(165deg, #ff5c7d 0%, #ff2350 48%, #e0103f 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .32), inset 0 -4px 0 rgba(0, 0, 0, .14), 0 12px 26px rgba(255, 35, 80, .32);
}
@media (hover: hover) {
  .btn-play:hover,
  .btn-next-slide:hover { background: linear-gradient(165deg, #ff6d8a 0%, #ff3a62 48%, #ea1a48 100%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .32), inset 0 -4px 0 rgba(0, 0, 0, .14), 0 14px 30px rgba(255, 35, 80, .4); }
}
.btn-play:disabled { background: #7a1a4f; box-shadow: none; }
.tod-choice-btn--dare {
  background: linear-gradient(165deg, #c62652 0%, #9e153d 50%, #7a0e2f 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .22), inset 0 -4px 0 rgba(0, 0, 0, .2), 0 12px 26px rgba(158, 21, 61, .45);
}
.tod-choice-mark { text-shadow: 0 4px 0 rgba(0, 0, 0, .14); }
.tod-card {
  background: linear-gradient(165deg, #761a52 0%, #5c0d3e 52%, #470a30 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 22px 44px rgba(0, 0, 0, .45), 0 4px 0 rgba(0, 0, 0, .18);
}
.tod-card.tod-card--dare { background: linear-gradient(165deg, #c62652 0%, #9e153d 55%, #7a0e2f 100%); }
#card-screen .bottom-section .btn-secondary {
  background: linear-gradient(165deg, #761a52 0%, #5c0d3e 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 10px 22px rgba(0, 0, 0, .3);
}

.tod-roulette-chip { background: linear-gradient(165deg, #6a1448, #5c0d3e); box-shadow: 0 6px 14px rgba(0, 0, 0, .3); }
.tod-roulette-chip--on { background: linear-gradient(165deg, #ff5c7d, #ff2350 55%, #e0103f); }
.tod-turn-player { text-shadow: 0 4px 18px rgba(255, 35, 80, .35); }
.ps-entry { background: linear-gradient(165deg, #6a1448 0%, #5c0d3e 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 18px rgba(0, 0, 0, .28); }

/* Fonts (owner 2026-10-20): the card text takes the display font, the card actions the body font. */
#card-screen .tod-card .card-text { font-family: Unbounded, Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.28; }
#card-screen.screen .bottom-section .btn-secondary, #card-screen.screen .bottom-section .btn-play { font-family: inherit; font-size: 17px; font-weight: 800; letter-spacing: 0; }