/* Game Theme only. Palette: COMMON/roomplay-palettes.html / tower («Башня»).
   bg gradient #F2782A -> #E4572E (dark ink text #1D1B1A, 6:1), surface #FFF4E2 (cream panels),
   accent #1D1B1A (near-black, white text), secondary #8A5A32 (walnut, the wood of the blocks).
   Answer/gender tones are for the cream surface. */
:root {
  --rp-correct: #1e5b27;
  --rp-correct-ink: #ffffff;
  --rp-wrong: #8e1f17;
  --rp-wrong-ink: #ffffff;
  --rp-male: #1b4c86;
  --rp-female: #8a2457;
  --bg-primary: #f2782a;
  --bg-secondary: #1d1b1a;
  --bg-card: #1d1b1a;
  --text-primary: #1d1b1a;
  --text-secondary: #3d2a1c;
  --text-placeholder: #7a5a40;
  --accent-purple: #1d1b1a;
  --accent-purple-dark: #1d1b1a;
  --accent-blue: #8a5a32;
  --accent-pink: #8a5a32;
  --accent-pink-dark: #8a5a32;
  --onboarding-accent: #1d1b1a;
  --onboarding-accent-dark: #1d1b1a;
  --onboarding-shadow: transparent;
  --onboarding-shadow-hover: transparent;
  --settings-accent: #1d1b1a;
  --settings-accent-dark: #1d1b1a;
  --tw-ink: #1d1b1a;
  --tw-ink-muted: #5b3f2a;
  --tw-cream: #fff4e2;
  --tw-wood: #8a5a32;
  --tw-wood-light: #e9c28c;
  --tw-orange: #f2782a;
  --tw-gradient: linear-gradient(180deg, #f58a3a 0%, #f2782a 45%, #e4572e 100%);
  /* Shared dialogs (confirm, settings): cream card, ink text, dark primary. */
  --rp-dialog-bg: #fff4e2;
  --rp-dialog-border: transparent;
  --rp-dialog-title: #1d1b1a;
  --rp-dialog-text: #3d2a1c;
  --rp-dialog-primary-bg: #1d1b1a;
  --rp-dialog-primary-text: #ffffff;
  --rp-dialog-primary-shadow: none;
  --rp-dialog-secondary-bg: transparent;
  --rp-dialog-secondary-border: rgba(29, 27, 26, .35);
  --rp-dialog-secondary-text: #1d1b1a;
  --rp-dialog-control-bg: rgba(29, 27, 26, .08);
}
html, .page-loader { background: #f2782a; }
body { background: var(--tw-gradient); background-color: #f2782a; color: var(--tw-ink); }

/* Actions: dark primary with white text, ink outline secondary. */
.btn-play,
.btn-next-slide { color: #fff; background: var(--tw-ink); box-shadow: none; }
.btn-play:disabled { color: #fff; background: rgba(29, 27, 26, .45); opacity: 1; }
.btn-join { color: var(--tw-ink); background: transparent; border: 2px solid rgba(29, 27, 26, .55); }
.btn-skip { color: var(--tw-ink); border-color: rgba(29, 27, 26, .5); }
@media (hover: hover) { .btn-skip:hover { color: var(--tw-ink); border-color: var(--tw-ink); } }
.dot { padding: 0; border: 0; background: rgba(29, 27, 26, .25); }
.dot.active { background: var(--tw-ink); }
.slide-title { color: var(--tw-ink); }
.slide-text { color: #3d2a1c; }
.btn-back { color: var(--tw-ink); }
.connection-overlay { color: var(--tw-ink); }
.rp-waiting-spinner { border-color: rgba(29, 27, 26, .2); border-top-color: var(--tw-ink); }

/* 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; }