/* Game Theme: flat paper characters, using the existing RoomPlay screen contract. */
:root {
    /* Answer and gender tones: COMMON/roomplay-palettes.html / neverhaveiever (correct, wrong, male, female). */
    --rp-correct: #75c259;
    --rp-correct-ink: #17191f;
    --rp-wrong: #fd7276;
    --rp-wrong-ink: #17191f;
    --rp-male: #63b0fc;
    --rp-female: #f77cb0;
    --game-accent: #bc2438;
    --game-accent-strong: #bc2438;
    --game-yellow: #f1dadd;
    --game-leaf: #f1dadd;
    --game-ink: #171316;
    --game-paper: #f1dadd;
    --game-line: #2a1d24;
    --packs-feedback-rgb: 188, 36, 56;
    --bg-primary: #171316;
    --bg-secondary: #2a1d24;
    --bg-card: #2a1d24;
    --text-primary: #f1dadd;
    --text-secondary: #f1dadd;
    --onboarding-accent: var(--game-accent);
    --onboarding-accent-dark: var(--game-accent-strong);
    --onboarding-shadow: transparent;
    --onboarding-shadow-hover: transparent;
}

body, .page-loader { background: var(--bg-primary); }
.loader-spinner { border-top-color: var(--game-accent); }
.multiplayer-brand-mark span { background: var(--game-accent); }
.multiplayer-screen {
    --rp-bg: var(--bg-primary);
    --rp-panel: var(--bg-card);
    --rp-surface: var(--bg-secondary);
    --rp-line: var(--game-line);
    --rp-muted: var(--text-secondary);
    --game-accent: inherit;
    --game-accent-soft: var(--game-paper);
    --game-secondary: var(--game-paper);
    --game-positive: var(--game-accent);
    --game-warning: var(--game-paper);
    background: var(--bg-primary);
}
.title, .slide-title,
.multiplayer-screen h1, .modal-title {
    font-family: Unbounded, Manrope, sans-serif;
    font-style: normal;
    font-weight: 800;
    letter-spacing: -.035em;
}
.slide-title { color: var(--game-paper); }
/* Rules cast: animated SVG scenes, static copies under reduced motion (see index.html <picture>). */
.slide-icon {
    width: min(240px, 60vw);
    margin-bottom: 18px;
    font-size: 0;
    line-height: 0;
}
.slide-icon picture,
.slide-icon img { display: block; width: 100%; height: auto; }
.btn-next-slide, .btn-play, .btn-close-modal {
    color: var(--game-ink);
    background: var(--game-accent);
    border-radius: 16px;
    box-shadow: none;
    font-weight: 800;
    min-height: 48px;
}
.btn-skip { color: var(--text-secondary); border-radius: 16px; }
.dot.active { background: var(--game-accent); box-shadow: none; }
.btn-back { min-width: 48px; min-height: 48px; }

/* Cover art stays in the original square gallery and keeps all text/locks. */
#packs-screen .pack-card,
#packs-screen .pack-card.premium {
    background: var(--bg-secondary);
    border: 2px solid var(--game-line);
    border-radius: 16px;
    box-shadow: none;
}
#packs-screen .pack-art { opacity: 1; object-fit: contain; object-position: top center; height: 64%; }
#packs-screen .pack-card::before {
    background: none;
}
#packs-screen .pack-art-shade { background: none; }
#packs-screen .pack-card.selected,
#packs-screen .pack-card.premium.selected:not(.locked) {
    border-color: var(--game-accent);
    background-color: var(--bg-secondary);
    box-shadow: inset 0 -4px var(--game-accent);
}
#packs-screen .pack-card.locked::after { background: transparent; }
#packs-screen .pack-name { color: var(--game-paper); text-shadow: none; }
#packs-screen .pack-count { color: var(--text-secondary); }
#packs-screen .bottom-section { background: var(--bg-primary); }
#packs-screen .packs-summary { margin-bottom: 4px; }
#packs-screen .packs-summary[hidden] { display: none; }
#packs-screen:has(#packs-summary[hidden]) .packs-container {
    flex-grow: 0;
    padding-bottom: 8px;
}
#packs-screen .bottom-section:has(#packs-summary[hidden]) { padding-top: 8px; }
#packs-screen .bottom-section:has(#packs-summary[hidden]) .packs-room-error:empty { display: none; }
#packs-screen .summary-text strong { color: var(--game-accent); }

/* The two original statement layouts retain their sizes and reading order. */
.statement-card, .split-statement-card {
    position: relative;
    border: 2px solid var(--game-ink);
    border-radius: 24px;
    color: var(--game-ink);
    background: var(--game-accent);
    box-shadow: 5px 5px 0 var(--game-leaf);
}
.statement-card::before, .split-statement-card::before {
    content: '';
    position: absolute;
    top: 8px;
    right: 12px;
    width: 48px;
    height: 32px;
    background:
        radial-gradient(ellipse at 37% 60%, var(--game-ink) 0 12%, transparent 14%),
        radial-gradient(ellipse at 79% 60%, var(--game-ink) 0 12%, transparent 14%),
        radial-gradient(ellipse at 26% 50%, var(--game-paper) 0 25%, transparent 27%),
        radial-gradient(ellipse at 73% 50%, var(--game-paper) 0 25%, transparent 27%);
    transform: rotate(8deg);
    pointer-events: none;
}
.split-statement-card::after { background: none; }
.card-header, .card-text, .split-statement-lead, .split-statement-text { color: var(--game-ink); }
.card-header { font-weight: 800; letter-spacing: .06em; }
.split-statement-divider span { height: 3px; background: var(--game-ink); box-shadow: none; }
.swipe-stamp.happened, .swipe-stamp.never {
    color: var(--game-ink);
    background: var(--game-paper);
    filter: none;
}
.round-pill { color: var(--game-yellow); background: var(--bg-secondary); border-color: var(--game-line); }
.life-player { background: var(--bg-secondary); }
.life-player.current { border-color: var(--game-accent); background: var(--bg-card); }
.life-avatar { color: var(--game-ink); background: var(--game-leaf); }
.life-heart.active { filter: none; }
.multiplayer-answer-button { border: 2px solid var(--game-accent); background: var(--bg-secondary); color: var(--game-accent); border-radius: 16px; }
.multiplayer-answer-button.never { border-color: var(--game-positive); color: var(--game-positive); }
.multiplayer-answer-button.selected { color: var(--game-ink); background: var(--game-accent); box-shadow: 0 3px 0 var(--game-paper); }
.multiplayer-answer-button.never.selected { color: var(--game-ink); background: var(--game-positive); }
.reveal-statement { background: var(--game-accent); color: var(--game-ink); border: 0; border-radius: 16px; }
.reveal-statement span { color: var(--game-ink); }
.choice-column.happened { background: var(--game-accent); }
.choice-column.never { background: var(--game-positive); }
.choice-column { border-radius: 16px; }
.choice-avatar { background: var(--game-ink); }
.next-round-track span { background: var(--game-accent); }
.btn-punishment, .punishment-complete-button { background: var(--game-yellow); color: var(--game-ink); border-radius: 16px; box-shadow: none; }
.punishment-task-card { border-radius: 16px; background: var(--bg-secondary); box-shadow: none; }
.punishment-task-card.current { box-shadow: none; }
.punishment-timebar span { background: var(--game-warning); }
.modal-content { background: var(--bg-secondary); border: 2px solid var(--game-accent); box-shadow: 6px 6px 0 var(--game-accent); border-radius: 24px; }
.modal-title { color: var(--game-accent); }
.ended-icon { color: var(--game-ink); background: var(--game-yellow); box-shadow: none; }
.connection-overlay { background: #171316; color: var(--text-secondary); }

button:focus-visible, [role="button"]:focus-visible, .pack-card:focus-visible {
    outline: 3px solid var(--game-paper);
    outline-offset: 4px;
}
.btn-play:disabled, .btn-next-slide:disabled, .punishment-complete-button:disabled {
    color: var(--text-secondary); background: var(--bg-card); box-shadow: none;
}
@media (hover: hover) {
    .btn-play:hover:not(:disabled), .btn-next-slide:hover:not(:disabled), .btn-close-modal:hover {
        color: var(--game-ink); background: var(--game-accent-strong); box-shadow: none;
    }
    .btn-punishment:hover { background: var(--game-yellow); box-shadow: 0 4px 0 var(--game-ink); }
    .statement-card:hover { box-shadow: 7px 7px 0 var(--game-leaf); }
    .multiplayer-answer-button:hover:not(:disabled):not(.selected) { background: var(--bg-card); }
}
@media (max-height: 700px) {
    .slide-icon { width: 140px; margin-bottom: 10px; }
}
/* Keep the existing two-column landscape board inside its visible shell. */
@media (orientation: landscape) and (max-height: 620px) and (min-width: 620px) {
    #multiplayer-game-screen { width: 100%; max-width: 920px; }
    #multiplayer-game-screen.active { grid-template-columns: minmax(200px, .85fr) minmax(280px, 1.25fr); }
    #multiplayer-game-screen .split-statement-card { min-height: 200px; grid-template-rows: minmax(64px, .85fr) 16px minmax(90px, 1.15fr); }
    #multiplayer-game-screen .split-statement-lead,
    #multiplayer-game-screen .split-statement-text { font-size: 24px; padding: 16px 24px; }
}
/* Interaction motion follows existing classes; no extra timers or input locks. */
#packs-screen {
    --packs-cue-color: var(--game-yellow);
    --packs-cue-shadow: var(--game-paper);
}
.life-avatar img, .choice-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* Button answers need the same visible confirmation as dragging the card. */
#multiplayer-game-screen:has(#multiplayer-happened.selected) .swipe-stamp.happened,
#multiplayer-game-screen:has(#multiplayer-never.selected) .swipe-stamp.never {
    opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
    :root {
        --game-press-duration: 100ms;
        --game-settle-duration: 240ms;
        --game-spring: cubic-bezier(.2, .9, .3, 1.25);
    }
    button:not(:disabled) {
        transition: scale var(--game-settle-duration) var(--game-spring),
            translate var(--game-settle-duration) var(--game-spring),
            background-color 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
    }
    button:not(:disabled):active {
        scale: .96;
        translate: 0 2px;
        transition-duration: var(--game-press-duration);
    }
    .btn-back:active, .multiplayer-icon-button:active { scale: .88; }
    .dot { transition: background-color 180ms ease, scale 180ms var(--game-spring); }
    .dot.active { scale: 1.12; }

    #packs-screen .pack-card {
        transition: transform var(--game-settle-duration) var(--game-spring),
            border-color 150ms ease, box-shadow 150ms ease;
    }
    #packs-screen .pack-card .pack-art {
        transform-origin: 50% 60%;
        transition: transform var(--game-settle-duration) var(--game-spring);
    }
    #packs-screen .pack-card:active,
    #packs-screen .pack-card.packs-touch-press:not(.locked) {
        transform: scale(.965);
        transition-duration: var(--game-press-duration);
    }
    #packs-screen .pack-card.packs-touch-pop:not(.locked) {
        animation: nhie-pack-pop 320ms var(--game-spring);
    }
    #packs-screen .pack-card.selected:not(.locked) .pack-art,
    #packs-screen .pack-card.packs-touch-pop:not(.locked) .pack-art {
        animation: nhie-character-nod 360ms ease-out;
    }
    .onboarding-slide.active .slide-icon {
        animation: nhie-character-arrive 380ms var(--game-spring) both;
    }
    .statement-card { transition: transform 180ms var(--game-spring), box-shadow 180ms ease; }
    .statement-card:active { transform: translate(3px, 3px) scale(.985); box-shadow: 2px 2px 0 var(--game-leaf); }
    /* Existing controller swaps copy at 200ms and removes .flip at 400ms. */
    .statement-card.flip { animation: nhie-paper-turn 400ms ease-in-out; }
    .multiplayer-answer-button.selected { animation: nhie-answer-stamp 260ms var(--game-spring); }
    #multiplayer-game-screen:has(.multiplayer-answer-button.selected) .split-statement-card:not(.dragging):not(.swipe-out-left):not(.swipe-out-right):not(.answered) {
        animation: nhie-card-answer 440ms ease-out;
    }
    #multiplayer-game-screen:has(#multiplayer-happened.selected) .split-statement-card { --answer-direction: 1; }
    #multiplayer-game-screen:has(#multiplayer-never.selected) .split-statement-card { --answer-direction: -1; }
    #multiplayer-game-screen:has(#multiplayer-happened.selected) .swipe-stamp.happened,
    #multiplayer-game-screen:has(#multiplayer-never.selected) .swipe-stamp.never {
        animation: nhie-visible-stamp 360ms var(--game-spring);
    }
    #multiplayer-reveal-screen.active .reveal-statement,
    #multiplayer-reveal-screen.active .choice-column,
    #multiplayer-punishment-screen.active .punishment-task-card {
        animation: nhie-paper-arrive 280ms var(--game-spring) both;
    }
    #multiplayer-reveal-screen.active .choice-column.never { animation-delay: 60ms; }
    .modal.active .modal-content { animation: nhie-paper-arrive 280ms var(--game-spring); }
    .modal.active .modal-icon { animation: nhie-character-nod 360ms ease-out; }
    @media (hover: hover) {
        .btn-play:hover:not(:disabled), .btn-next-slide:hover:not(:disabled),
        .btn-punishment:hover, .btn-close-modal:hover { translate: 0 -2px; }
        #packs-screen .pack-card:not(.locked):hover .pack-art { transform: rotate(-4deg) scale(1.04); }
        .statement-card:not(.flip):hover::before { animation: nhie-eye-glance 420ms ease-in-out; }
    }
}
@keyframes nhie-pack-pop {
    0% { transform: scale(calc(1 - .035 * var(--rp-motion-pack-intensity, 1))); }
    55% { transform: scale(calc(1 + .018 * var(--rp-motion-pack-intensity, 1))); }
    100% { transform: scale(1); }
}
@keyframes nhie-card-answer {
    0%, 100% { transform: translateX(0) rotate(0); }
    35% { transform: translateX(calc(var(--answer-direction) * calc(12px * var(--rp-motion-answer-intensity, 1)))) rotate(calc(var(--answer-direction) * calc(3deg * var(--rp-motion-answer-intensity, 1)))); }
    70% { transform: translateX(calc(var(--answer-direction) * calc(-3px * var(--rp-motion-answer-intensity, 1)))) rotate(calc(var(--answer-direction) * -.5deg * var(--rp-motion-answer-intensity, 1))); }
}
@keyframes nhie-visible-stamp {
    from { opacity: 0; scale: calc(1 + .45 * var(--rp-motion-answer-intensity, 1)); }
    to { opacity: 1; scale: 1; }
}
@keyframes nhie-character-nod {
    0%, 100% { rotate: calc(0deg * var(--rp-motion-artwork-intensity, 1)); }
    35% { rotate: calc(-8deg * var(--rp-motion-artwork-intensity, 1)); }
    70% { rotate: calc(5deg * var(--rp-motion-artwork-intensity, 1)); }
}
@keyframes nhie-character-arrive {
    from { opacity: 0; scale: calc(1 - .18 * var(--rp-motion-artwork-intensity, 1)); rotate: calc(-10deg * var(--rp-motion-artwork-intensity, 1)); }
    to { opacity: 1; scale: 1; rotate: calc(0deg * var(--rp-motion-artwork-intensity, 1)); }
}
@keyframes nhie-paper-turn {
    0%, 100% { transform: translateY(0) rotate(0); opacity: 1; }
    45% { transform: translateY(-8px) rotate(-2deg) scale(.97); opacity: 0; }
    50% { transform: translateY(8px) rotate(2deg) scale(.97); opacity: 0; }
}
@keyframes nhie-answer-stamp {
    0% { scale: calc(1 - .06 * var(--rp-motion-answer-intensity, 1)); }
    65% { scale: calc(1 + .025 * var(--rp-motion-answer-intensity, 1)); }
    100% { scale: 1; }
}
@keyframes nhie-paper-arrive {
    from { opacity: 0; translate: 0 calc(12px * var(--rp-motion-screen-intensity, 1)); scale: calc(1 - .03 * var(--rp-motion-screen-intensity, 1)); }
    to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes nhie-eye-glance {
    0%, 100% { translate: 0 0; }
    40%, 65% { translate: -4px 2px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
}

/* Approved dark/red palette and RoomPlay type roles. */
:root {
    --nhie-font-body: Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --nhie-font-display: Unbounded, Manrope, sans-serif;
    --nhie-on-accent: #f1dadd;
    --nhie-accent-text: #f1dadd;
    --accent-pink: var(--game-accent);
    --accent-pink-dark: var(--game-accent-strong);
}
body, .multiplayer-screen, button, input, select, textarea,
.card-text, .split-statement-text, .multiplayer-answer-button,
.punishment-task-card p, .reveal-statement strong, .reveal-statement span {
    font-family: var(--nhie-font-body);
}
.title, .slide-title, .multiplayer-screen h1, .modal-title,
.split-statement-lead, .waiting-orbit span {
    font-family: var(--nhie-font-display);
    overflow-wrap: anywhere;
}
.btn-next-slide, .btn-play, .btn-close-modal,
.multiplayer-answer-button.selected:not(.never) { color: var(--nhie-on-accent); }
@media (hover: hover) {
    .btn-play:hover:not(:disabled), .btn-next-slide:hover:not(:disabled),
    .btn-close-modal:hover { color: var(--nhie-on-accent); }
}
.statement-card, .split-statement-card {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--game-line);
    box-shadow: 5px 5px 0 var(--game-accent);
}
.statement-card:hover { box-shadow: 7px 7px 0 var(--game-accent); }
.card-header, .card-text, .split-statement-lead, .split-statement-text {
    color: var(--text-primary);
}
.split-statement-divider span { background: var(--game-accent); }
.reveal-statement { background: var(--bg-secondary); color: var(--text-primary); }
.reveal-statement span, .modal-title, #packs-screen .summary-text strong {
    color: var(--nhie-accent-text);
}
.multiplayer-answer-button:not(.never):not(.selected) { color: var(--nhie-accent-text); }
.choice-column.happened { color: var(--nhie-on-accent); }
.choice-column.happened .choice-empty { color: var(--nhie-on-accent); }
.connection-overlay { background: var(--bg-primary); }
.btn-play:disabled, .btn-next-slide:disabled { color: var(--text-secondary); }

.choice-column.happened .choice-player { background: #2a1d24; }
.choice-column.never .choice-empty { color: var(--game-ink); }
.life-heart.active { color: var(--nhie-accent-text); }

/* Both answers are peers: only the selected state changes their presentation. */
.multiplayer-answer-button.happened, .multiplayer-answer-button.never {
    color: var(--game-paper);
    border-color: var(--game-accent);
    background: var(--bg-secondary);
}
.multiplayer-answer-button.happened.selected, .multiplayer-answer-button.never.selected {
    color: var(--game-paper);
    background: var(--game-accent);
}
.choice-column.happened, .choice-column.never {
    background: var(--game-accent);
    color: var(--game-paper);
}
.choice-column.happened .choice-player, .choice-column.never .choice-player {
    background: var(--bg-secondary);
    color: var(--game-paper);
}
.choice-column.happened .choice-empty, .choice-column.never .choice-empty {
    color: var(--game-paper);
}
:root {
    --success: var(--game-paper);
    --error: var(--game-paper);
    --text-placeholder: var(--game-paper);
    --accent-purple: var(--game-accent);
    --accent-purple-dark: var(--game-accent);
}
.multiplayer-screen, .punishment-phase-screen, .multiplayer-icon-button,
.modal-overlay { background: var(--bg-primary); }
.multiplayer-brand-mark strong, .answer-progress, .next-round-label,
.punishment-phase-copy, .punishment-task-status, .life-name,
.multiplayer-center p, .multiplayer-eyebrow, .ended-copy {
    color: var(--game-paper);
}
.waiting-orbit { background: var(--bg-secondary); border-color: var(--game-accent); box-shadow: none; }
.waiting-orbit::before { border-top-color: var(--game-accent); border-right-color: var(--game-accent); }
.multiplayer-room-code, .punishment-timebar, .next-round-track,
.punishment-task-card.done { background: var(--bg-secondary); color: var(--game-paper); border-color: var(--game-paper); }
.punishment-task-card, .punishment-task-card.current { border-color: var(--game-accent); }
.multiplayer-icon-button:focus-visible { outline-color: var(--game-paper); }
.life-heart { color: var(--bg-secondary); }
.life-heart.active { color: var(--game-paper); }
.choice-avatar { color: var(--game-paper); background: var(--game-ink); }
#packs-screen .pack-lock, #packs-screen .pack-check { color: var(--game-paper); background: var(--game-accent); border-color: var(--game-paper); }

.multiplayer-brand-mark { color: var(--game-paper); }
.play-icon, .btn-punishment, .ended-icon { font-variant-emoji: text; }
.modal-icon {
    font-size: 0;
    height: 80px;
    background: url('assets/cutout-flower.svg?v=20260914-strict-palette') center / contain no-repeat;
}

.punishment-phase-status, .punishment-time-label { color: var(--game-paper); }

/* The shared exit dialog adopts this game's surface and typography.
   Colours go through the shared --rp-dialog-* tokens (assets/css/confirm-dialog.css). */
body {
    --rp-dialog-overlay: var(--bg-primary);
    --rp-dialog-bg: var(--bg-secondary);
    --rp-dialog-border: 2px solid var(--game-accent);
    --rp-dialog-shadow: 6px 6px 0 var(--game-accent);
    --rp-dialog-title: var(--game-paper);
    --rp-dialog-text: var(--game-paper);
    --rp-dialog-primary-bg: var(--game-accent);
    --rp-dialog-primary-text: var(--game-paper);
    --rp-dialog-btn-radius: 16px;
    --rp-dialog-secondary-bg: var(--bg-secondary);
    --rp-dialog-secondary-border: var(--game-paper);
}
.confirm-dialog-modal {
    color: var(--game-paper);
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    font-family: var(--nhie-font-body);
}
.confirm-dialog-title {
    font-family: var(--nhie-font-display);
    font-size: clamp(16px, 5vw, 20px);
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.confirm-dialog-subtitle { font-size: 16px; }
.confirm-dialog-btn {
    min-height: 48px;
    font-family: var(--nhie-font-body);
    font-weight: 800;
}

/* The premium marker stays separate from the pack illustration. */
#packs-screen .pack-lock-image {
    top: 8px;
    right: 8px;
    left: auto;
    width: 28px;
    height: 28px;
    filter: none;
}
#packs-screen .pack-card.premium.locked { border-color: var(--game-line); opacity: 1; }
#packs-screen .pack-card.locked .pack-art { filter: none; }

/* Studio motion controls preserve gesture input and immediate game actions. */
[data-rp-motion] button:not(:disabled) { transition-duration: var(--rp-motion-button-active-duration) !important; }
[data-rp-motion] button:not(:disabled):active {
    transform: none !important;
    scale: var(--rp-motion-button-scale);
    translate: 0 var(--rp-motion-button-offset);
}
[data-rp-motion] .dot { transition-duration: var(--rp-motion-onboarding-active-duration); }
[data-rp-motion] #packs-screen .pack-card,
[data-rp-motion] #packs-screen .pack-card .pack-art { transition-duration: var(--rp-motion-pack-active-duration); }
[data-rp-motion] #multiplayer-reveal-screen.active .reveal-statement,
[data-rp-motion] #multiplayer-reveal-screen.active .choice-column,
[data-rp-motion] #multiplayer-punishment-screen.active .punishment-task-card {
    animation-name: var(--rp-motion-screen-name, nhie-paper-arrive);
    animation-duration: var(--rp-motion-screen-duration);
    animation-timing-function: var(--rp-motion-screen-easing, var(--game-spring));
}
[data-rp-motion] .split-statement-card:not(.dragging) { transition-duration: var(--rp-motion-answer-active-duration); }
@media (hover:hover) {
    [data-rp-motion] .btn-play:hover:not(:disabled), [data-rp-motion] .btn-next-slide:hover:not(:disabled),
    [data-rp-motion] .btn-punishment:hover, [data-rp-motion] .btn-close-modal:hover { translate: 0 calc(-1 * var(--rp-motion-button-offset)); }
    [data-rp-motion] #packs-screen .pack-card:not(.locked):hover .pack-art { transform: rotate(calc(-4deg * var(--rp-motion-pack-intensity))) scale(calc(1 + .04 * var(--rp-motion-pack-intensity))); }
    [data-rp-motion] .statement-card:not(.flip):hover::before { animation: none; }
}
/* Short landscape phones (e.g. 844×390): fit rules art, text and Skip/Next inside the viewport;
   the online room shell's 64px top offset otherwise pushes the buttons below the fold. */
@media (orientation: landscape) and (max-height: 500px) {
    #onboarding-screen,
    .nhie-online #onboarding-screen { padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
    #onboarding-screen .onboarding-container { padding-top: 0; gap: 8px; }
    #onboarding-screen .onboarding-slides { padding-top: 0; min-height: 0; }
    #onboarding-screen .onboarding-slide { padding: 4px 72px; }
    #onboarding-screen .slide-icon { width: 96px; margin-bottom: 4px; }
    #onboarding-screen .slide-title { font-size: 19px; margin-bottom: 6px; }
    #onboarding-screen .slide-text { font-size: 14px; line-height: 1.35; max-width: 520px; }
    #onboarding-screen .onboarding-buttons { margin-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}

/* Flat character covers (pack.activeImage) fill the whole card; their dark lower band keeps the name legible. */
#packs-screen .pack-card.pack-card--flat-art .pack-art { object-fit: cover; object-position: center; height: 100%; }

/* One button shape in every Я никогда не screen: 16 px corners, 800 weight for main actions
   (the online waiting «Присоединиться», the punishment «Выполнено» and the ended-screen Play drifted). */
body[data-rp-game] :is(.btn-join, .punishment-complete-button, #multiplayer-ended-screen .btn-play) { border-radius: 16px; }
body[data-rp-game] .punishment-complete-button { font-weight: 800; }

/* One-phone like / dislike / report on the statement card (shared content-report.css). */
.nhie-card-vote { margin-top: 14px; }
.nhie-card-vote .rp-card-vote__btn { color: rgb(241 218 221 / 50%); }
.nhie-card-vote .rp-card-vote__btn[aria-pressed="true"] { color: var(--game-paper); }
.nhie-card-vote .rp-card-vote__btn:active { background: rgb(241 218 221 / 10%); }
/* «Сообщить об ошибке» in the card's bottom-right corner (the top-right one holds the eyes). */
.nhie-report-flag { position: absolute; right: 6px; bottom: 6px; z-index: 3; color: rgb(241 218 221 / 55%); }
.nhie-report-flag[hidden] { display: none; }
/* Like / dislike / «Сообщить об ошибке» inside the punishment card: the one-phone «Наказание!»
   modal and every online punishment card. Online: thumbs centred at the bottom, flag bottom-right. */
.punishment-task-card { position: relative; padding-bottom: 56px; }
/* In the «Наказание!» modal the thumbs sit right under the task, above «Понятно!», and the flag in the
   top-right corner. */
#punishment-modal .modal-content { position: relative; }
#punishment-modal .punishment-card-vote { position: static; transform: none; margin: -6px auto 14px; }
#punishment-modal .punishment-report-flag { top: 6px; bottom: auto; }
.punishment-card-vote { position: absolute; left: 50%; bottom: 4px; z-index: 2; margin: 0; transform: translateX(-50%); }
.punishment-report-flag { position: absolute; right: 6px; bottom: 6px; z-index: 2; }
.punishment-card-vote[hidden], .punishment-report-flag[hidden] { display: none; }
.punishment-card-vote .rp-card-vote__btn, .punishment-report-flag { color: rgb(241 218 221 / 55%); }
.punishment-card-vote .rp-card-vote__btn[aria-pressed="true"] { color: var(--game-paper); }
/* «Дополнительные настройки» shares «Начать игру»'s shape (one button shape per game). */
.btn-additional-settings { border-radius: 16px; border-width: 2px; }