/* Game Theme only. Palette: COMMON/roomplay-palettes.html / secrethitler.
   bg #EF6347 (coral, ink #17191F), surface #F3E2B8 (cream paper, ink), accent #343431 (charcoal print, white onAccent),
   secondary #79AEB7 (liberal blue, ink text on it). Fascist meaning keeps a red: deep oxblood #7A1F14 (cream text),
   because stock red disappears on the coral page. President/Hitler gold becomes #7A5600 text on cream.
   Onboarding: same CSS characters and layout, recoloured; a charcoal print outline keeps light shapes readable on coral. */
:root {
  /* Answer and gender tones: COMMON/roomplay-palettes.html / secrethitler (correct, wrong, male, female). */
  --rp-correct: #416335;
  --rp-correct-ink: #ffffff;
  --rp-wrong: #7f463b;
  --rp-wrong-ink: #ffffff;
  --rp-male: #335b83;
  --rp-female: #7b445a;
  --bg-primary: #ef6347;
  --bg-secondary: #e8d29e;
  --bg-card: #f3e2b8;
  --text-primary: #17191f;
  --text-secondary: #3a1410;
  --text-placeholder: #7a5a4a;
  --accent-purple: #343431;
  --accent-purple-dark: #343431;
  --accent-pink: #343431;
  --accent-pink-dark: #343431;
  --accent-red: #7a1f14;
  --accent-red-dark: #7a1f14;
  --accent-blue: #79aeb7;
  --accent-blue-dark: #79aeb7;
  --accent-yellow: #7a5600;
  --accent-yellow-dark: #7a5600;
  --onboarding-accent: #343431;
  --onboarding-accent-dark: #343431;
  --onboarding-shadow: transparent;
  --onboarding-shadow-hover: transparent;
  --settings-accent: #343431;
  --settings-accent-dark: #343431;
  --packs-accent: #343431;
  --packs-feedback-rgb: 52, 52, 49;
  --ps-accent: #343431;
  --sh-coral: #ef6347;
  --sh-cream: #f3e2b8;
  --sh-paper: #fff8e8;
  --sh-charcoal: #343431;
  --sh-blue: #79aeb7;
  --sh-blue-tint: #b9d6db;
  --sh-gold-cream: #e9cf8e;
  --sh-oxblood: #7a1f14;
  --sh-ink: #17191f;
  --sh-blue-ink: #2e6670;
  --sh-gold-ink: #7a5600;
}
html, body[data-rp-game="secrethitler"], .page-loader { background: var(--bg-primary); }
body[data-rp-game="secrethitler"] { color: var(--sh-ink); }
[data-rp-game="secrethitler"] .loader-spinner { border-color: rgba(52, 52, 49, .2); border-top-color: var(--sh-charcoal); }

/* Shared actions: charcoal print with white text, charcoal outline secondary. */
[data-rp-game="secrethitler"] .btn-play,
[data-rp-game="secrethitler"] .btn-next-slide,
[data-rp-game="secrethitler"] .btn-show-role,
[data-rp-game="secrethitler"] .btn-next-player { color: #fff; background: var(--sh-charcoal); border-color: transparent; box-shadow: none; }
[data-rp-game="secrethitler"] .btn-play:disabled { color: var(--sh-ink); background: rgba(52, 52, 49, .2); opacity: 1; }
[data-rp-game="secrethitler"] .btn-skip,
[data-rp-game="secrethitler"] .btn-secondary { color: var(--sh-ink); border-color: var(--sh-charcoal); background: transparent; }
[data-rp-game="secrethitler"] .btn-veto { color: var(--sh-ink); border-color: var(--sh-charcoal); }
[data-rp-game="secrethitler"] .btn-back { color: var(--sh-ink); }
[data-rp-game="secrethitler"] .dot { background: rgba(52, 52, 49, .28); }
[data-rp-game="secrethitler"] .dot.active { background: var(--sh-charcoal); }
[data-rp-game="secrethitler"] .secret-hitler-onboarding .dot:focus-visible { outline-color: var(--sh-charcoal); }
[data-rp-game="secrethitler"] .slide-title,
[data-rp-game="secrethitler"] .title { color: var(--sh-ink); }
[data-rp-game="secrethitler"] .slide-text { color: var(--text-secondary); }

/* Players (shared player-setup) on cream cards. */
[data-rp-game="secrethitler"] .ps-add-btn { color: var(--sh-ink); border-color: var(--sh-charcoal); }

/* Role cards. */
[data-rp-game="secrethitler"] .card-front { background: var(--sh-cream); border-color: var(--sh-charcoal); }
[data-rp-game="secrethitler"] .card-title,
[data-rp-game="secrethitler"] .card-hint { color: var(--text-secondary); }
[data-rp-game="secrethitler"] .card-player-name { color: var(--sh-oxblood); }
[data-rp-game="secrethitler"] .card-back { background: var(--sh-cream); }
[data-rp-game="secrethitler"] .card-back.liberal { background: var(--sh-blue); }
[data-rp-game="secrethitler"] .card-back.liberal .card-role,
[data-rp-game="secrethitler"] .card-back.liberal .card-team-info { color: var(--sh-ink); }
[data-rp-game="secrethitler"] .card-back.fascist { background: var(--sh-oxblood); }
[data-rp-game="secrethitler"] .card-back.fascist .card-role,
[data-rp-game="secrethitler"] .card-back.fascist .card-team-info,
[data-rp-game="secrethitler"] .card-back.hitler .card-role,
[data-rp-game="secrethitler"] .card-back.hitler .card-team-info { color: var(--sh-cream); }
[data-rp-game="secrethitler"] .card-back.hitler { background: var(--sh-charcoal); border-color: var(--sh-oxblood); box-shadow: inset 0 0 0 4px var(--sh-oxblood); }
[data-rp-game="secrethitler"] .swipe-hint { color: var(--text-secondary); }

/* Board: faction labels as pills, slots with charcoal print edges. */
[data-rp-game="secrethitler"] .deck-counter { color: var(--text-secondary); background: var(--sh-cream); }
[data-rp-game="secrethitler"] .liberal-label,
[data-rp-game="secrethitler"] .fascist-label { display: inline-block; padding: 3px 8px; border-radius: 6px; }
[data-rp-game="secrethitler"] .liberal-label { color: var(--sh-ink); background: var(--sh-blue); }
[data-rp-game="secrethitler"] .fascist-label { color: var(--sh-cream); background: var(--sh-oxblood); }
[data-rp-game="secrethitler"] .policy-slot { color: rgba(23, 25, 31, .55); }
[data-rp-game="secrethitler"] .liberal-slot,
[data-rp-game="secrethitler"] .fascist-slot { background: rgba(243, 226, 184, .45); border-color: rgba(52, 52, 49, .55); }
[data-rp-game="secrethitler"] .liberal-slot.filled { color: var(--sh-ink); background: var(--sh-blue); border-color: var(--sh-charcoal); }
[data-rp-game="secrethitler"] .fascist-slot.filled { color: var(--sh-cream); background: var(--sh-oxblood); border-color: var(--sh-charcoal); }
[data-rp-game="secrethitler"] .tracker-label { color: var(--text-secondary); }
[data-rp-game="secrethitler"] .election-dot { background: var(--sh-cream); border-color: var(--sh-charcoal); }
[data-rp-game="secrethitler"] .election-dot.filled { background: var(--sh-charcoal); border-color: var(--sh-charcoal); }
[data-rp-game="secrethitler"] .board-player-item,
[data-rp-game="secrethitler"] .candidate-item,
[data-rp-game="secrethitler"] .power-player-item,
[data-rp-game="secrethitler"] .vote-result-item,
[data-rp-game="secrethitler"] .role-reveal-item,
[data-rp-game="secrethitler"] .president-badge,
[data-rp-game="secrethitler"] .vote-government { color: var(--sh-ink); background: var(--sh-cream); }
[data-rp-game="secrethitler"] .board-player-item.president .board-player-icon { background: var(--sh-gold-cream); }
[data-rp-game="secrethitler"] .board-player-item.chancellor .board-player-icon { background: var(--sh-blue); }
[data-rp-game="secrethitler"] .badge-president { color: var(--sh-gold-ink); background: rgba(122, 86, 0, .14); }
[data-rp-game="secrethitler"] .badge-chancellor { color: var(--sh-oxblood); background: rgba(122, 31, 20, .12); }
[data-rp-game="secrethitler"] .badge-dead { color: var(--text-secondary); background: rgba(52, 52, 49, .12); }
[data-rp-game="secrethitler"] .badge-label { color: var(--sh-gold-ink); }
[data-rp-game="secrethitler"] .nomination-hint,
[data-rp-game="secrethitler"] .power-description,
[data-rp-game="secrethitler"] .legislative-instruction,
[data-rp-game="secrethitler"] .gameover-reason { color: var(--text-secondary); }
[data-rp-game="secrethitler"] .candidate-item.selected,
[data-rp-game="secrethitler"] .power-player-item.selected { background: var(--sh-paper); border-color: var(--sh-charcoal); }
[data-rp-game="secrethitler"] .candidate-item.selected .candidate-icon,
[data-rp-game="secrethitler"] .power-player-item.selected .power-player-icon { background: var(--sh-charcoal); }

/* Pass phone and vote. */
[data-rp-game="secrethitler"] .pass-phone-title,
[data-rp-game="secrethitler"] .pass-phone-description,
[data-rp-game="secrethitler"] .vote-player-name,
[data-rp-game="secrethitler"] .gov-label { color: var(--text-secondary); }
[data-rp-game="secrethitler"] .pass-phone-name { color: var(--sh-ink); }
[data-rp-game="secrethitler"] .vote-gov-row + .vote-gov-row { border-top-color: rgba(52, 52, 49, .18); }
[data-rp-game="secrethitler"] .btn-vote-ja { color: var(--sh-ink); }
[data-rp-game="secrethitler"] .vote-result-item.ja .vote-result-badge { color: #166534; background: rgba(22, 101, 52, .12); }
[data-rp-game="secrethitler"] .vote-result-item.nein .vote-result-badge { color: #991b1b; background: rgba(153, 27, 27, .1); }
[data-rp-game="secrethitler"] .vote-outcome { background: var(--sh-charcoal) !important; }

/* Policies, powers, game over. */
[data-rp-game="secrethitler"] .policy-card.liberal,
[data-rp-game="secrethitler"] .enacted-card.liberal,
[data-rp-game="secrethitler"] .peek-card.liberal { color: var(--sh-ink); background: var(--sh-blue); box-shadow: none; }
[data-rp-game="secrethitler"] .policy-card.fascist,
[data-rp-game="secrethitler"] .enacted-card.fascist,
[data-rp-game="secrethitler"] .peek-card.fascist { color: var(--sh-cream); background: var(--sh-oxblood); box-shadow: none; }
[data-rp-game="secrethitler"] .enacted-card.liberal .enacted-text { color: var(--sh-ink); }
[data-rp-game="secrethitler"] .enacted-card.fascist .enacted-text { color: var(--sh-cream); }
[data-rp-game="secrethitler"] .policy-card.selected { border-color: var(--sh-charcoal); box-shadow: 0 0 0 3px var(--sh-cream); }
[data-rp-game="secrethitler"] .enacted-power-hint { display: inline-block; padding: 6px 12px; border-radius: 10px; color: var(--sh-cream); background: var(--sh-charcoal); }
[data-rp-game="secrethitler"] .power-result { background: var(--sh-cream); }
[data-rp-game="secrethitler"] .power-result.liberal { border-color: var(--sh-blue-ink); }
[data-rp-game="secrethitler"] .power-result.fascist { border-color: var(--sh-oxblood); }
[data-rp-game="secrethitler"] .power-result-label { color: var(--text-secondary); }
[data-rp-game="secrethitler"] .power-result.liberal .power-result-party { color: var(--sh-blue-ink); }
[data-rp-game="secrethitler"] .power-result.fascist .power-result-party { color: var(--sh-oxblood); }
[data-rp-game="secrethitler"] .gameover-title { display: inline-block; padding: 6px 16px; border-radius: 12px; }
[data-rp-game="secrethitler"] .gameover-title.liberal-win { color: var(--sh-ink); background: var(--sh-blue); }
[data-rp-game="secrethitler"] .gameover-title.fascist-win { color: var(--sh-cream); background: var(--sh-oxblood); }
/* Side icons (ui-icons.css): dove for liberals, skull for fascists, in the side colours. */
[data-rp-game="secrethitler"] .gameover-icon .rp-icon--dove { color: var(--sh-blue-ink); }
[data-rp-game="secrethitler"] .gameover-icon .rp-icon--skull { color: var(--sh-oxblood); }
[data-rp-game="secrethitler"] .role-liberal .role-reveal-badge { color: var(--sh-blue-ink); background: rgba(46, 102, 112, .14); }
[data-rp-game="secrethitler"] .role-fascist .role-reveal-badge { color: var(--sh-oxblood); background: rgba(122, 31, 20, .12); }
[data-rp-game="secrethitler"] .role-hitler .role-reveal-badge { color: var(--sh-cream); background: var(--sh-oxblood); }
[data-rp-game="secrethitler"] .veto-overlay { background: rgba(52, 52, 49, .86); }
[data-rp-game="secrethitler"] .veto-modal { color: var(--sh-ink); background: var(--sh-cream); }
[data-rp-game="secrethitler"] .veto-title { color: var(--sh-oxblood); }
[data-rp-game="secrethitler"] .veto-text { color: var(--text-secondary); }

/* Shared finale card (ru-party-finale.js) and popups. */
[data-rp-game="secrethitler"] #roomplay-local-finale { color: #fff; border-color: transparent; background: var(--sh-charcoal); }
[data-rp-game="secrethitler"] #roomplay-local-finale p { color: #d8d6cc; }
[data-rp-game="secrethitler"] #roomplay-local-finale .rplf-kicker { color: var(--sh-cream); }
[data-rp-game="secrethitler"] #roomplay-local-finale .rplf-primary { color: var(--sh-ink); background: var(--sh-cream); }
/* Exit confirmation and settings popups: cream sheet, charcoal primary.
   Colours go through the shared --rp-dialog-* tokens (assets/css/confirm-dialog.css). */
[data-rp-game="secrethitler"] {
  --rp-dialog-overlay: rgba(52, 52, 49, .72);
  --rp-dialog-bg: var(--sh-cream);
  --rp-dialog-title: var(--sh-ink);
  --rp-dialog-text: var(--text-secondary);
  --rp-dialog-primary-bg: var(--sh-charcoal);
  --rp-dialog-secondary-border: var(--sh-charcoal);
  --rp-dialog-secondary-text: var(--sh-ink);
}

/* Light motion, same rhythm as «Я никогда не» (cutout-theme.css). Onboarding characters keep their own
   choreography from styles.css. Decorative only; fully off under prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  [data-rp-game="secrethitler"] {
    --sh-press: 100ms;
    --sh-settle: 240ms;
    --sh-spring: cubic-bezier(.2, .9, .3, 1.25);
  }
  [data-rp-game="secrethitler"] button:not(:disabled) {
    transition: scale var(--sh-settle) var(--sh-spring), translate var(--sh-settle) var(--sh-spring),
      background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  }
  [data-rp-game="secrethitler"] button:not(:disabled):active { scale: .96; translate: 0 2px; transition-duration: var(--sh-press); }
  [data-rp-game="secrethitler"] .btn-back:active { scale: .88; }
  [data-rp-game="secrethitler"] .dot { transition: background-color 180ms ease, scale 180ms var(--sh-spring), width 300ms ease; }
  [data-rp-game="secrethitler"] .dot.active { scale: 1.12; }

  [data-rp-game="secrethitler"] #board-screen.active .policy-slot.filled { animation: sh-stamp-in 360ms var(--sh-spring) both; }
  [data-rp-game="secrethitler"] #board-screen.active .board-player-item,
  [data-rp-game="secrethitler"] #nomination-screen.active .candidate-item,
  [data-rp-game="secrethitler"] #power-screen.active .power-player-item,
  [data-rp-game="secrethitler"] #vote-results-screen.active .vote-result-item,
  [data-rp-game="secrethitler"] #gameover-screen.active .role-reveal-item { animation: sh-paper-arrive 280ms var(--sh-spring) both; }
  [data-rp-game="secrethitler"] .screen.active :is(.board-player-item, .candidate-item, .power-player-item, .vote-result-item, .role-reveal-item):nth-child(2) { animation-delay: 30ms; }
  [data-rp-game="secrethitler"] .screen.active :is(.board-player-item, .candidate-item, .power-player-item, .vote-result-item, .role-reveal-item):nth-child(3) { animation-delay: 60ms; }
  [data-rp-game="secrethitler"] .screen.active :is(.board-player-item, .candidate-item, .power-player-item, .vote-result-item, .role-reveal-item):nth-child(4) { animation-delay: 90ms; }
  [data-rp-game="secrethitler"] .screen.active :is(.board-player-item, .candidate-item, .power-player-item, .vote-result-item, .role-reveal-item):nth-child(5) { animation-delay: 120ms; }
  [data-rp-game="secrethitler"] .screen.active :is(.board-player-item, .candidate-item, .power-player-item, .vote-result-item, .role-reveal-item):nth-child(n+6) { animation-delay: 150ms; }
  [data-rp-game="secrethitler"] #vote-results-screen.active .vote-outcome,
  [data-rp-game="secrethitler"] #policy-enacted-screen.active .enacted-card,
  [data-rp-game="secrethitler"] #power-screen.active .power-result,
  [data-rp-game="secrethitler"] #gameover-screen.active .gameover-title { animation: sh-stamp-in 360ms var(--sh-spring) both; }
  [data-rp-game="secrethitler"] #legislative-screen.active .policy-card { animation: sh-paper-arrive 280ms var(--sh-spring) both; }
  [data-rp-game="secrethitler"] #legislative-screen.active .policy-card:nth-child(2) { animation-delay: 50ms; }
  [data-rp-game="secrethitler"] #legislative-screen.active .policy-card:nth-child(3) { animation-delay: 100ms; }
  [data-rp-game="secrethitler"] #power-screen.active .peek-card { animation: sh-paper-arrive 280ms var(--sh-spring) both; }
  [data-rp-game="secrethitler"] #power-screen.active .peek-card:nth-child(2) { animation-delay: 50ms; }
  [data-rp-game="secrethitler"] #power-screen.active .peek-card:nth-child(3) { animation-delay: 100ms; }
  [data-rp-game="secrethitler"] #nomination-screen.active .candidate-item.selected,
  [data-rp-game="secrethitler"] #power-screen.active .power-player-item.selected,
  [data-rp-game="secrethitler"] #legislative-screen.active .policy-card.selected { animation: sh-answer-stamp 260ms var(--sh-spring); }
  [data-rp-game="secrethitler"] #gameover-screen.active .gameover-icon { animation: sh-nod 420ms ease-out 200ms both; }
  [data-rp-game="secrethitler"] .veto-overlay.active .veto-modal,
  [data-rp-game="secrethitler"] .confirm-dialog-overlay.active .confirm-dialog-modal,
  [data-rp-game="secrethitler"] .settings-popup-overlay.active .settings-popup-modal { animation: sh-paper-arrive 280ms var(--sh-spring); }
}
@keyframes sh-nod { 0%, 100% { rotate: 0deg; } 35% { rotate: -8deg; } 70% { rotate: 5deg; } }
@keyframes sh-paper-arrive { from { opacity: 0; translate: 0 12px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes sh-stamp-in { from { opacity: 0; scale: 1.45; } to { opacity: 1; scale: 1; } }
@keyframes sh-answer-stamp { 0% { scale: .94; } 65% { scale: 1.025; } 100% { scale: 1; } }

/* Landscape phones (e.g. 844×390): the scaled illustration kept its full 336px layout box, so the
   title/text were pushed below the slides area and the dots sat on top of the slide text.
   Collapse the art's layout box to its visual size and stack art/title/text from the top. */
@media (orientation: landscape) and (max-height: 560px) {
  [data-rp-game="secrethitler"] .secret-hitler-onboarding .onboarding-slide { grid-template-rows: auto auto auto; align-content: start; }
  [data-rp-game="secrethitler"] .secret-hitler-onboarding .sh-art {
    width: 328px; height: 336px; align-self: start;
    transform: scale(.34); transform-origin: center top;
    margin: 0 auto calc(336px * -.66);
  }
  [data-rp-game="secrethitler"] .secret-hitler-onboarding .slide-title { margin: 4px auto 4px; font-size: 18px; }
  [data-rp-game="secrethitler"] .secret-hitler-onboarding .slide-text { max-width: 420px; font-size: 15px; }
}