/* Game Theme only. Palette: COMMON/roomplay-palettes.html / codenames («Кодовые имена»).
   bg gradient #9F265C -> #BD345D -> #D2553F -> #E47630 (white text; text stays in the upper, darker part),
   surface #FFF7E8 (cream word cards, ink #17191F), accent #252329 (dark, white text), secondary #F29A37 (orange).
   Red/blue team cards, neutral, the black card and Premium gold keep their meanings and colours. */
:root {
  /* Answer and gender tones: COMMON/roomplay-palettes.html / codenames (correct, wrong, male, female). */
  --rp-correct: #286902;
  --rp-correct-ink: #ffffff;
  --rp-wrong: #9a2b18;
  --rp-wrong-ink: #ffffff;
  --rp-male: #095a9b;
  --rp-female: #93285c;
  --bg-primary: #9f265c;
  --bg-secondary: #252329;
  --bg-card: #252329;
  --text-primary: #ffffff;
  --text-secondary: #ffe3ec;
  --text-placeholder: #c9a9b8;
  --accent-purple: #252329;
  --accent-purple-dark: #252329;
  --accent-blue: #f29a37;
  --accent-pink: #f29a37;
  --accent-pink-dark: #f29a37;
  --onboarding-accent: #252329;
  --onboarding-accent-dark: #252329;
  --onboarding-shadow: transparent;
  --onboarding-shadow-hover: transparent;
  --settings-accent: #252329;
  --settings-accent-dark: #252329;
  --packs-accent: #f29a37;
  --packs-feedback-rgb: 242, 154, 55;
  --ps-accent: #f29a37;
  --cn-ink: #17191f;
  --cn-ink-muted: #5e5a57;
  --cn-cream: #fff7e8;
  --cn-dark: #252329;
  --cn-orange: #f29a37;
  --cn-berry: #9f265c;
  --cn-red-text: #ff6b66;
  --cn-blue-text: #64b5f6;
  --cn-gradient: linear-gradient(180deg, #9f265c 0%, #bd345d 55%, #d2553f 85%, #e47630 100%);
}
html, .page-loader { background: #9f265c; }
body { background: var(--cn-gradient); background-color: #9f265c; }
.loader-spinner { border-color: rgba(255, 255, 255, .2); border-top-color: var(--cn-orange); }

/* Actions: dark primary with white text (box silhouettes), light outline secondary. */
.btn-play,
.btn-next-slide { color: #fff; background: var(--cn-dark); box-shadow: none; }
.btn-play:disabled { color: #fff; background: rgba(37, 35, 41, .5); opacity: 1; }
.btn-skip { color: #fff; border-color: rgba(255, 255, 255, .6); }
@media (hover: hover) { .btn-skip:hover { color: #fff; border-color: #fff; } }
.dot { background: rgba(255, 255, 255, .32); }
.dot.active { background: var(--cn-dark); }

/* Setup cards: cream like the word cards, ink text. */
.gamemode-card,
.role-card { color: var(--cn-ink); background: var(--cn-cream); border-color: transparent; }
@media (hover: hover) {
  .gamemode-card:hover,
  .role-card:hover { border-color: var(--cn-dark); }
}
.gamemode-title,
.role-title { color: var(--cn-berry); }
.gamemode-desc,
.role-desc { color: var(--cn-ink-muted); }
.code-digit { color: var(--cn-ink); background: var(--cn-cream); border-color: transparent; caret-color: var(--cn-berry); }
.code-digit:focus { border-color: var(--cn-dark); box-shadow: 0 0 0 3px rgba(37, 35, 41, .25); }
.btn-random-code { color: #fff; border-color: rgba(255, 255, 255, .55); }
@media (hover: hover) { .btn-random-code:hover { color: #fff; border-color: #fff; } }
.btn-random-code { --rp-icon-before: var(--rp-icon-dice); }
.btn-new-board { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--text-primary); font-size: 22px; }

/* Packs: dark summary pill, orange count; selected border orange (Premium stays gold). */
.packs-summary { background: var(--cn-dark); }
.summary-text { color: #e9e3ec; }
.summary-text strong { color: var(--cn-orange); }
.packs-illustrated-actions { background: transparent; }
.packs-illustrated-grid { --packs-accent: #f29a37; --packs-feedback-rgb: 242, 154, 55; }

/* Board: dark sidebar like the box silhouettes; unrevealed word cards are cream with ink words. */
#game-screen { background: var(--cn-gradient); }
.game-sidebar { background: var(--cn-dark); }
.score-red { color: var(--cn-red-text); }
.score-blue { color: var(--cn-blue-text); }
.first-team-indicator.red { color: var(--cn-red-text); background: rgba(229, 57, 53, .2); }
.first-team-indicator.blue { color: var(--cn-blue-text); background: rgba(30, 136, 229, .2); }
.player-mode .cell-front { background: var(--cn-cream); border: 1px solid rgba(37, 35, 41, .18); }
.player-mode .cell-front .cell-word { color: var(--cn-ink); }
.game-over-overlay { background: rgba(37, 35, 41, .9); }
.game-over-text { color: #e9e3ec; }
.game-over-content .btn-play { color: var(--cn-ink); background: var(--cn-orange); }
.landscape-prompt p { color: var(--text-secondary); }

/* RU party finale card (injected by ru-party-finale.js). */
body #roomplay-local-finale { color: var(--cn-ink); background: var(--cn-cream); border-color: transparent; }
body #roomplay-local-finale p { color: var(--cn-ink-muted); }
body #roomplay-local-finale .rplf-kicker { color: var(--cn-berry); }
body #roomplay-local-finale .rplf-primary { color: #fff; background: var(--cn-dark); }
body #roomplay-local-finale .rplf-secondary { color: var(--cn-ink); background: rgba(37, 35, 41, .1); }

/* Onboarding: animated flat SVG characters (static copies via <picture> for reduced motion). */
#onboarding-screen .slide-icon { width: min(240px, 55vw); margin-bottom: 8px; 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: 120px; margin-bottom: 8px; }
}

/* Light motion, same rhythm as «Я никогда не» (cutout-theme.css). Decorative only; never delays taps. */
@media (prefers-reduced-motion: no-preference) {
  :root { --cn-press: 100ms; --cn-settle: 240ms; --cn-spring: cubic-bezier(.2, .9, .3, 1.25); }
  button:not(:disabled) {
    transition: scale var(--cn-settle) var(--cn-spring), translate var(--cn-settle) var(--cn-spring),
      background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  }
  button:not(:disabled):active { scale: .96; translate: 0 2px; transition-duration: var(--cn-press); }
  :is(.btn-back, .btn-back-game, .btn-new-board):active { scale: .88; }
  .dot { transition: background-color 180ms ease, scale 180ms var(--cn-spring); }
  .dot.active { scale: 1.12; }
  .onboarding-slide.active .slide-icon { animation: cn-character-arrive 380ms var(--cn-spring) both; }

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

  /* Mode / role cards deal in like word cards; the code boxes stamp in. */
  #gamemode-screen.active .gamemode-card,
  #role-screen.active .role-card { animation: cn-paper-arrive 280ms var(--cn-spring) both; }
  #gamemode-screen.active .gamemode-card:nth-child(2),
  #role-screen.active .role-card:nth-child(2) { animation-delay: 70ms; }
  #code-screen.active .code-digit { animation: cn-stamp-in 320ms var(--cn-spring) both; }
  #code-screen.active .code-digit:nth-child(2) { animation-delay: 40ms; }
  #code-screen.active .code-digit:nth-child(3) { animation-delay: 80ms; }
  #code-screen.active .code-digit:nth-child(4) { animation-delay: 120ms; }

  /* Board: cards are dealt column by column (<=160 ms), revealed cards flip on a spring. */
  #game-screen.active .board .cell { animation: cn-paper-arrive 280ms var(--cn-spring) both; }
  #game-screen.active .board .cell:nth-child(5n+2) { animation-delay: 40ms; }
  #game-screen.active .board .cell:nth-child(5n+3) { animation-delay: 80ms; }
  #game-screen.active .board .cell:nth-child(5n+4) { animation-delay: 120ms; }
  #game-screen.active .board .cell:nth-child(5n) { animation-delay: 160ms; }
  .player-mode .cell-inner { transition: transform 560ms var(--cn-spring); }
  .captain-mode .cell .cell-front { transition: opacity 200ms ease; }
  .captain-mode .cell.toggled::after { animation: cn-check-in 300ms var(--cn-spring); }
  .game-over-overlay.active .game-over-content { animation: cn-paper-arrive 300ms var(--cn-spring) both; }
  .game-over-overlay.active .game-over-icon { animation: cn-nod 420ms ease-out 200ms both; }
}
@keyframes cn-character-arrive { from { opacity: 0; scale: .82; rotate: -10deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes cn-pop { 0% { transform: scale(.965); } 55% { transform: scale(1.018); } 100% { transform: scale(1); } }
@keyframes cn-nod { 0%, 100% { rotate: 0deg; } 35% { rotate: -8deg; } 70% { rotate: 5deg; } }
@keyframes cn-paper-arrive { from { opacity: 0; translate: 0 12px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes cn-stamp-in { from { opacity: 0; scale: 1.3; } to { opacity: 1; scale: 1; } }
@keyframes cn-check-in { from { opacity: 0; scale: 1.8; } to { opacity: 1; scale: 1; } }

/* Board words never break mid-word: each cell is a size container and the word shrinks to fit its
   longest token (--cn-len / --cn-words are set per word in renderBoard; height bound covers multi-word phrases). 0.82em ≈ widest uppercase per-letter average across all word lists. */
#game-screen.words-mode .board .cell { container-type: size; }
#game-screen .cell-word {
  --cn-word-base: clamp(14px, 4.4vw, 24px);
  max-width: 100%;
  overflow-wrap: anywhere; /* last resort only: the font already shrinks so normal words fit unbroken */
  word-break: keep-all;
  /* Never shrink below a readable 9px; words still too long then hyphenate by syllable instead of breaking at random. */
  -webkit-hyphens: auto;
  hyphens: auto;
  font-size: max(9px, min(var(--cn-word-base), calc((100cqw - 14px) / (var(--cn-len, 8) * .82)), calc((100cqh - 14px) / (var(--cn-words, 1) * 1.2))));
}
@media (orientation: landscape) {
  #game-screen .cell-word { --cn-word-base: clamp(14px, 3.6vh, 24px); }
}

/* Game-over overlay + finale card. In portrait the whole #game-screen is rotated 90°, and the overlay
   (position: fixed inside a transformed ancestor) rotated with it, so the finale card read sideways.
   Counter-rotate the overlay so it covers the viewport upright, and stack content above the card. */
.game-over-overlay.active { gap: 16px; padding: 16px; box-sizing: border-box; overflow-y: auto; }
.game-over-overlay .game-over-content { flex: 0 1 auto; max-width: 100%; box-sizing: border-box; }
.game-over-overlay #roomplay-local-finale { flex: 0 1 420px; max-width: 420px; margin: 0; }
@media (orientation: portrait) {
  #game-screen .game-over-overlay {
    top: 100vw; left: 0;
    width: 100vw; height: 100vh;
    transform: rotate(-90deg); transform-origin: top left;
  }
  #game-screen .game-over-overlay.active { flex-direction: column; justify-content: safe center; }
  #game-screen .game-over-overlay .game-over-content { padding: 8px 16px; }
  #game-screen .game-over-overlay #roomplay-local-finale { flex: 0 0 auto; width: 100%; }
}

/* Pack choice arrow: COMMON/roomplay-palettes.html / codenames secondary #F29A37 (the accent is too dark for the ink outline). */
:root {
    --packs-cue-color: #F29A37;
}

/* Exit confirmation (online room) on the dark accent surface instead of the stock navy and pink.
   Colours go through the shared --rp-dialog-* tokens (assets/css/confirm-dialog.css). */
body {
  --rp-dialog-overlay: rgba(23, 10, 18, .72);
  --rp-dialog-bg: var(--bg-card);
  --rp-dialog-border: 1px solid rgba(255, 255, 255, .14);
  --rp-dialog-text: var(--text-secondary);
  --rp-dialog-primary-bg: #f29a37;
  --rp-dialog-primary-text: #17191f;
  --rp-dialog-secondary-border: rgba(255, 255, 255, .7);
  --rp-dialog-secondary-text: #fff;
}