/* Game Theme only. Palette: COMMON/roomplay-palettes.html / detective («Расследование»).
   bg #17363C deep night teal (text #F7EEDC, 11:1), surface #F2E6CE case-file paper (ink #1B1612, 14:1),
   accent #E9A23B lamp amber (ink text 8:1, 6:1 on the teal), secondary #C9577F orchid (decorative only).
   Answer/gender tones are for the paper surface. */
:root {
  --rp-correct: #1e6b3e;
  --rp-correct-ink: #ffffff;
  --rp-wrong: #a3271f;
  --rp-wrong-ink: #ffffff;
  --rp-male: #1f5b8a;
  --rp-female: #9a2e63;
  --bg-primary: #17363c;
  --bg-secondary: #10282d;
  --bg-card: #10282d;
  --text-primary: #f7eedc;
  --text-secondary: #c9dad6;
  --text-placeholder: #6f8e8a;
  --accent-purple: #e9a23b;
  --accent-purple-dark: #d48f2b;
  --accent-blue: #e9a23b;
  --accent-pink: #e9a23b;
  --accent-pink-dark: #d48f2b;
  --accent-primary: #e9a23b;
  --accent-primary-dark: #d48f2b;
  --accent-secondary: #c9577f;
  --game-accent: #e9a23b;
  --onboarding-accent: #e9a23b;
  --onboarding-accent-dark: #d48f2b;
  --onboarding-shadow: transparent;
  --onboarding-shadow-hover: transparent;
  --settings-accent: #e9a23b;
  --settings-accent-dark: #d48f2b;
  --dt-ink: #1b1612;
  --dt-ink-muted: #5a4a36;
  --dt-paper: #f2e6ce;
  --dt-paper-deep: #e6d6b6;
  --dt-amber: #e9a23b;
  --dt-orchid: #c9577f;
  --dt-orchid-soft: #e58aa9;
  --dt-teal: #17363c;
  --dt-panel: #10282d;
  --dt-line: rgba(247, 238, 220, .16);
  --dt-gradient: radial-gradient(120% 70% at 50% 0%, #22474e 0%, #17363c 55%, #10282d 100%);
  /* Shared dialogs (confirm, settings): paper card, ink text, amber primary. */
  --rp-dialog-bg: #f2e6ce;
  --rp-dialog-border: transparent;
  --rp-dialog-title: #1b1612;
  --rp-dialog-text: #5a4a36;
  --rp-dialog-primary-bg: #e9a23b;
  --rp-dialog-primary-text: #1b1612;
  --rp-dialog-primary-shadow: none;
  --rp-dialog-secondary-bg: transparent;
  --rp-dialog-secondary-border: rgba(27, 22, 18, .35);
  --rp-dialog-secondary-text: #1b1612;
  --rp-dialog-control-bg: rgba(27, 22, 18, .08);
}
html, .page-loader { background: #17363c; }
body { background: var(--dt-gradient); background-color: #17363c; color: var(--text-primary); }

/* Actions: amber primary with ink text, paper outline secondary. */
.btn-play,
.btn-next-slide { color: var(--dt-ink); background: var(--dt-amber); box-shadow: none; }
.btn-play:disabled { color: var(--text-secondary); background: rgba(247, 238, 220, .14); opacity: 1; }
.btn-join { color: var(--text-primary); background: transparent; border: 2px solid rgba(247, 238, 220, .55); }
.btn-skip { color: var(--text-primary); border-color: rgba(247, 238, 220, .5); }
@media (hover: hover) { .btn-skip:hover { color: var(--text-primary); border-color: var(--text-primary); } }
.dot { padding: 0; border: 0; background: rgba(247, 238, 220, .25); }
.dot.active { background: var(--dt-amber); }
.slide-title { color: var(--text-primary); }
.slide-text { color: var(--text-secondary); }
.btn-back { color: var(--text-primary); }
.connection-overlay { color: var(--text-primary); }
.rp-waiting-spinner { border-color: rgba(247, 238, 220, .2); border-top-color: var(--dt-amber); }

/* Onboarding art size: same as Alias / 5 секунд / Нарисуй и угадай (the SVG's own 320px is too big). */
#onboarding-screen .slide-icon { width: min(240px, 55vw); margin: 0 auto 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: 700px) {
  #onboarding-screen .slide-icon { width: min(196px, 52vw); margin-bottom: 12px; }
}
@media (max-height: 600px) {
  #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) {
  #onboarding-screen .slide-icon { width: 92px; margin-bottom: 4px; }
  #onboarding-screen .slide-text { min-height: 0; }