/* /game-ui.css */
/* Shared RoomPlay defaults. Load BEFORE game styles. */
:where(body:not([data-rp-game="neverhaveiever"])) { margin: 0; }
[data-rp-game] [tabindex="-1"]:focus { outline: none; }
.rp-waiting-spinner { display: block; width: 24px; height: 24px; margin: 0 auto 8px; border: 2px solid var(--bg-card); border-top-color: var(--accent-purple); border-radius: 50%; animation: rp-spin .8s linear infinite; }
@keyframes rp-spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(calc(10px * var(--rp-motion-screen-intensity, 1))); } to { opacity: 1; transform: translateY(0); } }
/* A PC (owner 2026-11-06 «пк комната нажатие на Играть - появляется полоса прокрутки справа»): a screen that comes in
   10px low (fadeIn, onboardingSlideIn) sticks out under a full-height page for ~0.3 s, and a window with classic
   scrollbars (Windows) shows a scrollbar on the right meanwhile. With a mouse the screens only fade in, as the shared
   motion layer does (game-motion.css rp-m-fade); phones keep the slide (no scrollbar there). The :not(#rp) outranks
   the games' own `.screen.active` rules, which load after this file. */
@keyframes rp-screen-fade { from { opacity: 0; } to { opacity: 1; } }
@media (hover: hover) and (pointer: fine) {
    html:not(#rp) body :is(.screen.active, .onboarding-screen) { animation-name: rp-screen-fade; }
}
/* Direct-content games share gutters without a redundant wrapper. */
.rp-local .screen { height: auto; overflow: visible; }
.screen.rp-scroll-screen { overflow-y: auto; }
.rp-direct .screen {
    height: auto; min-height: var(--app-height, 100dvh); overflow: visible;
    padding: calc(40px + env(safe-area-inset-top, 0px)) 24px calc(24px + env(safe-area-inset-bottom, 0px));
}
.rp-topbar .topbar {
    position: absolute; z-index: 30; top: 0; left: 0; width: 100%;
    height: calc(64px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 16px 0;
    display: flex; align-items: center; gap: 12px; background: transparent; transform: none;
}
.rp-topbar .topbar .btn-back { position: static; flex-shrink: 0; }
.rp-topbar .topbar .timer-badge { margin-left: auto; }
.rp-topbar .screen { padding-top: calc(80px + env(safe-area-inset-top, 0px)); }
.rp-setup-actions { flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; }
.rp-setup-actions .btn-additional-settings { margin: 0; }
.rp-mode-field { display: grid; gap: 8px; margin: 24px 0; color: var(--text-secondary); }
[data-rp-game] button, [data-rp-game] input, [data-rp-game] select { font-family: inherit; }
[data-rp-game] button { touch-action: manipulation; }
[data-rp-game] button:focus-visible, [data-rp-game] input:focus-visible, [data-rp-game] select:focus-visible {
    outline: 3px solid var(--text-primary, #fff); outline-offset: 3px;
}
[data-rp-activate]:focus-visible { outline: 3px solid var(--text-primary); outline-offset: 3px; }
/* RoomPlay display font (as in «Я никогда не»): screen, rules, result, section and dialog headings in every game. */
[data-rp-game] :is(.title, .slide-title, .modal-title, .join-title, .scoreboard-title, .gameover-title, .game-over-title, .result-title, .ready-title, .cn-result-title, .sh-phase-title, .multiplayer-screen h1, .confirm-dialog-title, .settings-popup-title, .landscape-prompt h2, .phase-copy h2, .cn-team h2, .scoreboard h2, .vote-ledger h2, .question-ledger h2) {
    font-family: Unbounded, Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-style: normal !important; font-weight: 800 !important; letter-spacing: -.035em !important;
    hyphens: auto; overflow-wrap: break-word; text-wrap: balance;
}
[data-rp-game] [hidden] { display: none !important; }
[data-rp-game] .player-name, [data-rp-game] .score-name { min-width: 0; overflow-wrap: anywhere; }
[data-rp-game] .btn-play, [data-rp-game] .btn-join { min-height: 48px; white-space: normal; }
[data-rp-game] .btn-back { min-width: 44px; min-height: 44px; }
@media (prefers-reduced-motion: reduce) {
    [data-rp-game] *, [data-rp-game] *::before, [data-rp-game] *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        transition-duration: .01ms !important; scroll-behavior: auto !important;
    }
}
:root {
    --bg-primary: #0d1329;
    --bg-secondary: #1a2140;
    --bg-card: #252b4a;
    --accent-purple: #7c3aed;
    --accent-purple-dark: #6025c0;
    --accent-blue: #4a6cf7;
    --text-primary: #ffffff;
    --text-secondary: #8892b0;
    --text-placeholder: #5a6380;
    --success: #4ade80;
    --error: #f87171;
    /* Answer and gender semantics keep one meaning product-wide (green = correct, red = wrong, blue = male, pink = female).
       A Game Theme may only retune their tone from COMMON/roomplay-palettes.html (fields correct, wrong, male, female). */
    --rp-correct: var(--success);
    --rp-wrong: var(--error);
    --rp-correct-ink: #17191f;
    --rp-wrong-ink: #17191f;
    --rp-male: #68a8ff;
    --rp-female: #ff7aaa;
    --settings-accent: var(--accent-purple);
    --settings-accent-dark: var(--accent-purple-dark);
}

:where(body:not([data-rp-game="neverhaveiever"])) {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    background: linear-gradient(180deg, var(--bg-primary) 0%, #0a0f1f 100%);
    min-height: 100vh;
    min-height: var(--app-height, 100dvh);
    color: var(--text-primary);
    overflow-x: hidden;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .app {
    max-width: 430px;
    margin: 0 auto;
    min-height: 100vh;
    min-height: var(--app-height, 100dvh);
    position: relative;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .screen {
    display: none;
    height: 100vh;
    height: var(--app-height, 100dvh);
    overflow: hidden;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .screen.active {
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.3s ease;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .screen-content {
    padding: 40px 24px;
    padding-top: calc(40px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .title {
    overflow-wrap: anywhere;
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 8px;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .subtitle {
    font-size: 16px;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 32px;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .btn-play {
    width: 100%;
    padding: 18px;
    background: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-purple-dark) 100%);
    border: none;
    border-radius: 30px;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.3);
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .btn-play:active {
    transform: translateY(0);
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .btn-play:disabled {
    background: var(--bg-card);
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.6;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .btn-back {
    position: absolute;
    top: calc(16px + env(safe-area-inset-top, 0px));
    left: 16px;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
    padding: 8px;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .btn-join {
    padding: 16px 32px;
    background: transparent;
    border: 2px solid var(--accent-purple);
    border-radius: 30px;
    color: var(--accent-purple);
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .btn-join.active {
    background: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-purple-dark) 100%);
    border-color: transparent;
    color: var(--text-primary);
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.3);
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .btn-play.outlined {
    background: transparent;
    border: 2px solid var(--accent-purple);
    color: var(--accent-purple);
    box-shadow: none;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .btn-copy {
    padding: 10px 20px;
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: var(--text-secondary);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .btn-copy.copied {
    background: var(--success);
    color: #000;
    border-color: var(--success);
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .input {
    width: 100%;
    padding: 16px 20px;
    background: var(--bg-card);
    border: 2px solid transparent;
    border-radius: 16px;
    color: var(--text-primary);
    font-size: 16px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s ease;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .input:focus {
    border-color: var(--accent-purple);
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .input::placeholder {
    color: var(--text-placeholder);
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .lobby-content {
    align-items: center;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .room-code-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .room-code-display {
    font-size: 48px;
    font-weight: 800;
    letter-spacing: 12px;
    color: var(--accent-purple);
    background: var(--bg-card);
    padding: 16px 32px;
    border-radius: 20px;
    font-family: 'Courier New', monospace;
    user-select: all;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .lobby-hint {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 24px;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .players-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    overflow-y: auto;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .player-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-card);
    border-radius: 12px;
    animation: slideIn 0.3s ease;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .player-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-blue) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .player-avatar.has-photo {
    padding: 0;
    background: none;
    overflow: visible;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .player-avatar.has-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(1.5);
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .player-avatar.clickable {
    cursor: pointer;
    position: relative;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .player-avatar.clickable::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px dashed rgba(139, 92, 246, 0.5);
    opacity: 0;
    transition: opacity 0.2s;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .player-avatar.clickable:not(.has-photo)::after {
    opacity: 1;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .player-name {
    text-align: left;
    flex: 1;
    font-size: 16px;
    font-weight: 500;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .player-host {
    font-size: 14px;
    color: var(--accent-purple);
    font-weight: 600;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .player-disconnected {
    opacity: 0.4;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .bottom-section {
    width: 100%;
    margin-top: auto;
    padding-top: 20px;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .lobby-status {
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
    margin-top: 12px;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .quiz-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
    flex-shrink: 0;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .quiz-option {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    background: var(--bg-card);
    border: 2px solid transparent;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    color: var(--text-primary);
    text-align: left;
    width: 100%;
    font-size: 16px;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .quiz-option:active:not(:disabled) {
    transform: scale(0.98);
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .quiz-option:disabled {
    cursor: default;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .quiz-option.selected {
    border-color: var(--accent-blue);
    background: rgba(74, 108, 247, 0.15);
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .quiz-option.correct {
    border-color: var(--success);
    background: rgba(74, 222, 128, 0.15);
    animation: correctPulse 0.5s ease;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .quiz-option.wrong {
    border-color: var(--error);
    background: rgba(248, 113, 113, 0.15);
    animation: wrongShake 0.4s ease;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .option-letter {
    width: 40px;
    height: 40px;
    background: var(--accent-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    margin-right: 16px;
    flex-shrink: 0;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .option-text {
    font-size: 16px;
    font-weight: 500;
    flex: 1;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .mini-scoreboard {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 8px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-top: auto;
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: linear-gradient(to top, var(--bg-primary) 60%, transparent);
    flex-shrink: 0;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .mini-score-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-card);
    padding: 8px 12px;
    border-radius: 20px;
    flex-shrink: 0;
    font-size: 13px;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .mini-score-name {
    font-weight: 500;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .mini-score-value {
    font-weight: 700;
    color: var(--accent-purple);
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .mini-score-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: contain;
    flex-shrink: 0;
    transform: scale(1.5);
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .mini-score-avatar-letter {
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .scoreboard-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    margin-top: 20px;
    color: var(--text-secondary);
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .scoreboard {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .score-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: 12px;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .score-item.leading {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.2) 0%, rgba(124, 58, 237, 0.1) 100%);
    border: 1px solid var(--accent-purple);
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .score-position {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    margin-right: 12px;
    background: var(--bg-card);
    flex-shrink: 0;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .score-position.gold {
    background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
    color: #000;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .score-position.silver {
    background: linear-gradient(135deg, #c0c0c0 0%, #a0a0a0 100%);
    color: #000;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .score-position.bronze {
    background: linear-gradient(135deg, #cd7f32 0%, #a05a20 100%);
    color: #000;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .score-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: contain;
    flex-shrink: 0;
    transform: scale(1.5);
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .score-name {
    text-align: left;
    flex: 1;
    font-size: 16px;
    font-weight: 500;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .score-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--accent-purple);
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .results-content {
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 auto;
    min-height: 100%;
    padding-top: calc(68px + env(safe-area-inset-top, 0px));
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .winner-icon {
    font-size: 64px;
    margin-bottom: 12px;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .winner-name {
    font-size: 24px;
    font-weight: 700;
    color: var(--accent-purple);
    margin-bottom: 22px;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .final-results {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}

/* One header geometry on the setup screens of one-phone games (mode choice, players, teams) and on
   the mode screen of online games (ГеоГессер),
   the same as every pack screen (packs.css .packs-screen-shell): back button and title share the
   first 44px row 20px below the safe area, content starts 16px under it. Each game used to place
   them itself (back at 12–40px from the top, title at 20–88px). Themes keep their fonts and
   colours; only position and spacing are pinned, hence !important against per-game rules. */
:is(body.rp-local .screen:is(#mode-screen, #players-screen, #teams-screen), .screen#mode-screen) {
    position: relative;
    padding-top: calc(20px + env(safe-area-inset-top, 0px)) !important;
}

:is(body.rp-local .screen:is(#mode-screen, #players-screen, #teams-screen), .screen#mode-screen) > .btn-back {
    position: absolute !important;
    z-index: 6;
    top: calc(20px + env(safe-area-inset-top, 0px)) !important;
    left: 12px !important;
    right: auto !important;
    width: 44px;
    height: 44px;
    min-height: 44px;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: none !important;
}

:is(body.rp-local .screen:is(#mode-screen, #players-screen, #teams-screen), .screen#mode-screen) > .title {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    margin: 0 0 16px !important;
    /* Clears the back button's arrow (left 12px) on screens with 12–24px side padding; a title
       still too long for one line (a few long locales) wraps evenly. */
    padding: 0 36px !important;
    line-height: 1.1;
    text-align: center;
    text-wrap: balance;
}

:is(body.rp-local .screen:is(#mode-screen, #players-screen, #teams-screen), .screen#mode-screen) > .title + .subtitle {
    margin-top: -8px !important;
}
/* «Подключаемся к комнате…» (owner 2026-11-07 «на онб мигает надпись»): a game opened from the room connects in a
   fraction of a second, and the overlay flashed over the rules for that moment. Every connection overlay of a game page
   (shared .connection-overlay, Крокодил's .cro-connection) now shows only when the wait lasts longer than 0.8 s; until
   then it is invisible and lets taps through (visibility). A real disconnect still shows it, 0.8 s later. */
.connection-overlay.visible, .cro-connection.visible { animation: rp-connection-appear 200ms ease-out 800ms both; }
@keyframes rp-connection-appear { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
/* The rules need no room (owner 2026-11-07 «во время онб мелькает», ЧБТВ on a PC): from a far server the first connect
   (UI texts + handshake + rejoin) takes longer than 0.8 s, so the overlay still came up over the slides. While the
   onboarding screen is on, no connection overlay is shown at all; if the room is still not there when the player leaves
   the rules, it appears then (display comes back, so the 0.8 s grace starts again). */
body:has(#onboarding-screen.active) :is(.connection-overlay, .cro-connection).visible { display: none; }
/* /ui-icons.css */
/*
 * UI icons: one flat SVG icon family for interface chrome instead of emoji.
 * Emoji look different on every platform (Apple, Google, Samsung, Windows), ignore the
 * game palette and break the "one vector family" rule in docs/ROOMPLAY_DESIGN_RULES.md.
 * These are 24x24 shapes on a 2.1 round stroke (or solid fills), used as SVG masks, so
 * the icon is 1em and takes currentColor: size and colour always come from the context.
 *
 * Markup:  <span class="rp-icon rp-icon--pause" aria-hidden="true"></span>
 * Pseudo-elements reuse the shapes through --rp-icon-<name>, e.g.
 *   .btn::before { content: ""; width: 1em; height: 1em; background: currentColor;
 *                  -webkit-mask: var(--rp-icon-dice) center / contain no-repeat;
 *                  mask: var(--rp-icon-dice) center / contain no-repeat; }
 * Right/wrong marks stay in answer-marks.css (.rp-mark); gender signs in player-gender.css.
 */
:root {
    --rp-icon-pause: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='4.5' width='4.2' height='15' rx='1.6' fill='%23000' stroke='none'/%3E%3Crect x='13.8' y='4.5' width='4.2' height='15' rx='1.6' fill='%23000' stroke='none'/%3E%3C/svg%3E");
    --rp-icon-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5.6v12.8a1.1 1.1 0 0 0 1.7.93l10-6.4a1.1 1.1 0 0 0 0-1.86l-10-6.4A1.1 1.1 0 0 0 8 5.6Z' fill='%23000' stroke='none'/%3E%3C/svg%3E");
    --rp-icon-video: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.8' y='6.3' width='12.6' height='11.4' rx='2.4'/%3E%3Cpath d='M15.4 10.4l4.5-2.7a.8.8 0 0 1 1.2.7v7.2a.8.8 0 0 1-1.2.7l-4.5-2.7Z' fill='%23000'/%3E%3C/svg%3E");
    --rp-icon-skip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 6.3v11.4a1 1 0 0 0 1.55.83L15 12.83a1 1 0 0 0 0-1.66L6.55 5.47A1 1 0 0 0 5 6.3Z' fill='%23000' stroke='none'/%3E%3Cpath d='M18.6 5.5v13'/%3E%3C/svg%3E");
    --rp-icon-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7.5l4.6 4.2L12 5l3.9 6.7 4.6-4.2-1.7 10.3a1 1 0 0 1-1 .8H6.2a1 1 0 0 1-1-.8Z' fill='%23000' stroke='none'/%3E%3C/svg%3E");
    --rp-icon-card: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2.6'/%3E%3Cpath d='M3 10h18M7 14.8h3.5'/%3E%3C/svg%3E");
    --rp-icon-sound: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 9.6v4.8a1 1 0 0 0 1 1h3l4.3 3.6a.7.7 0 0 0 1.2-.54V5.54a.7.7 0 0 0-1.2-.54L7.5 8.6h-3a1 1 0 0 0-1 1Z' fill='%23000' stroke='none'/%3E%3Cpath d='M16 9a4.2 4.2 0 0 1 0 6M18.8 6.3a8 8 0 0 1 0 11.4'/%3E%3C/svg%3E");
    --rp-icon-sound-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 9.6v4.8a1 1 0 0 0 1 1h3l4.3 3.6a.7.7 0 0 0 1.2-.54V5.54a.7.7 0 0 0-1.2-.54L7.5 8.6h-3a1 1 0 0 0-1 1Z' fill='%23000' stroke='none'/%3E%3Cpath d='M16.5 9.5l5 5M21.5 9.5l-5 5'/%3E%3C/svg%3E");
    --rp-icon-vibrate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='3.5' width='8' height='17' rx='2.2'/%3E%3Cpath d='M4.8 8.5v7M19.2 8.5v7M2 10.5v3M22 10.5v3'/%3E%3C/svg%3E");
    --rp-icon-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2l2.7 5.5 6 .9-4.35 4.25 1.03 6L12 17l-5.38 2.85 1.03-6L3.3 9.6l6-.9Z' fill='%23000' stroke='none' stroke-linejoin='round'/%3E%3C/svg%3E");
    --rp-icon-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.8' y='10.3' width='14.4' height='10.2' rx='2.6' fill='%23000' stroke='none'/%3E%3Cpath d='M8 10.3V8a4 4 0 0 1 8 0v2.3'/%3E%3C/svg%3E");
    --rp-icon-dice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.8' y='3.8' width='16.4' height='16.4' rx='4.2'/%3E%3Ccircle cx='8.6' cy='8.6' r='1.5' fill='%23000' stroke='none'/%3E%3Ccircle cx='12' cy='12' r='1.5' fill='%23000' stroke='none'/%3E%3Ccircle cx='15.4' cy='15.4' r='1.5' fill='%23000' stroke='none'/%3E%3C/svg%3E");
    --rp-icon-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3.1' fill='%23000' stroke='none'/%3E%3C/svg%3E");
    --rp-icon-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='3.5' width='15' height='17' rx='2.6'/%3E%3Cpath d='M8.5 8.5h7M8.5 12.5h7M8.5 16.5h4'/%3E%3C/svg%3E");
    --rp-icon-refresh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 10.5A7.8 7.8 0 0 0 5.7 7.2L4.3 8.8'/%3E%3Cpath d='M4.3 4.3v4.5h4.5'/%3E%3Cpath d='M4.5 13.5a7.8 7.8 0 0 0 13.8 3.3l1.4-1.6'/%3E%3Cpath d='M19.7 19.7v-4.5h-4.5'/%3E%3C/svg%3E");
    --rp-icon-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.3s-8.3-4.9-8.3-11a4.6 4.6 0 0 1 8.3-2.7 4.6 4.6 0 0 1 8.3 2.7c0 6.1-8.3 11-8.3 11Z' fill='%23000' stroke='none'/%3E%3C/svg%3E");
    --rp-icon-heart-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.3s-8.3-4.9-8.3-11a4.6 4.6 0 0 1 8.3-2.7 4.6 4.6 0 0 1 8.3 2.7c0 6.1-8.3 11-8.3 11Z'/%3E%3C/svg%3E");
    --rp-icon-skull: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill-rule='evenodd' d='M12 2.8a8.3 8.3 0 0 0-8.3 8.3c0 2.7 1.25 4.6 3.1 5.7v2.4a1.6 1.6 0 0 0 1.6 1.6h7.2a1.6 1.6 0 0 0 1.6-1.6v-2.4c1.85-1.1 3.1-3 3.1-5.7A8.3 8.3 0 0 0 12 2.8ZM6.9 11.3a2.2 2.2 0 1 0 4.4 0a2.2 2.2 0 1 0-4.4 0ZM12.7 11.3a2.2 2.2 0 1 0 4.4 0a2.2 2.2 0 1 0-4.4 0ZM12 13.9l-1.2 2h2.4Z' fill='%23000' stroke='none'/%3E%3C/svg%3E");
    --rp-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 5.5l6.5 6.5-6.5 6.5'/%3E%3C/svg%3E");
    --rp-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E");
    --rp-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.2'/%3E%3Cpath d='M15.2 15.2l5 5'/%3E%3C/svg%3E");
    --rp-icon-ballot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 11V4.5h9V11'/%3E%3Cpath d='M9.8 7.9l1.5 1.5 2.9-2.9'/%3E%3Cpath d='M3.8 11h16.4v8a1.5 1.5 0 0 1-1.5 1.5H5.3A1.5 1.5 0 0 1 3.8 19Z'/%3E%3Cpath d='M8.5 15h7'/%3E%3C/svg%3E");
    --rp-icon-bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.4 2.6L5.2 13.4h6.1l-1 8 8.5-11h-6.2Z' fill='%23000' stroke='none' stroke-linejoin='round'/%3E%3C/svg%3E");
    --rp-icon-dove: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 6.2c-1.1-.9-2.9-1-4.1 0-1.2.9-1.6 2.3-2.7 3.5L9.5 4.2C8.3 7.1 8.6 9.6 10.1 11.5L3 12.4c1.2 3.8 4.6 6.4 8.7 6.4 4.6 0 7.4-3.4 7.4-7.4V9.2l1.9-.9Z' fill='%23000' stroke='none' stroke-linejoin='round'/%3E%3C/svg%3E");
    --rp-icon-radiation: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2.2' fill='%23000' stroke='none'/%3E%3Cpath d='M10.20 8.88L7.25 3.77A9.5 9.5 0 0 1 16.75 3.77L13.80 8.88A3.6 3.6 0 0 0 10.20 8.88ZM15.60 12.00L21.50 12.00A9.5 9.5 0 0 1 16.75 20.23L13.80 15.12A3.6 3.6 0 0 0 15.60 12.00ZM10.20 15.12L7.25 20.23A9.5 9.5 0 0 1 2.50 12.00L8.40 12.00A3.6 3.6 0 0 0 10.20 15.12Z' fill='%23000' stroke='none'/%3E%3C/svg%3E");
    --rp-icon-stop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill-rule='evenodd' d='M12 2.8a9.2 9.2 0 1 0 0 18.4a9.2 9.2 0 1 0 0-18.4ZM6.8 10.4h10.4v3.2H6.8Z' fill='%23000' stroke='none'/%3E%3C/svg%3E");
    --rp-icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6.8' y='2.5' width='10.4' height='19' rx='2.6'/%3E%3Cpath d='M10.5 18.3h3'/%3E%3C/svg%3E");
    --rp-icon-bug: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7.2' y='8' width='9.6' height='12.5' rx='4.8'/%3E%3Cpath d='M9.4 8a2.6 2.6 0 0 1 5.2 0M10.2 5.6L8.8 3.6M13.8 5.6l1.4-2M7.2 11.2L4 9.4M7.2 14.4H3.6M7.6 17.6l-3.2 1.8M16.8 11.2L20 9.4M16.8 14.4h3.6M16.4 17.6l3.2 1.8'/%3E%3C/svg%3E");
    --rp-icon-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h7.6l4.4 4.4v11.2a1.4 1.4 0 0 1-1.4 1.4H6.5a1.4 1.4 0 0 1-1.4-1.4V4.9a1.4 1.4 0 0 1 1.4-1.4Z'/%3E%3Cpath d='M13.8 3.7v4.5h4.5M8.6 12.6h6.8M8.6 16.4h6.8'/%3E%3C/svg%3E");
    --rp-icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.2' y='4.5' width='17.6' height='15' rx='2.6'/%3E%3Ccircle cx='8.8' cy='9.6' r='1.7' fill='%23000' stroke='none'/%3E%3Cpath d='M3.8 17.2l5-4.9 3.8 3.7 2.6-2.5 5 4.4'/%3E%3C/svg%3E");
    --rp-icon-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8.2' r='3.6' fill='%23000' stroke='none'/%3E%3Cpath d='M2.3 19.8c.8-3.6 3.4-5.6 6.7-5.6s5.9 2 6.7 5.6Z' fill='%23000' stroke='none'/%3E%3Ccircle cx='16.8' cy='7.4' r='3' fill='%23000' stroke='none'/%3E%3Cpath d='M16.9 12.6c2.6.2 4.3 2.2 4.9 5.2h-3.9' fill='%23000' stroke='none'/%3E%3C/svg%3E");
    --rp-icon-spy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.4h16M6.6 10.4l1.5-5.2a1.2 1.2 0 0 1 1.6-.8l2.3.9 2.3-.9a1.2 1.2 0 0 1 1.6.8l1.5 5.2Z' stroke-linejoin='round'/%3E%3Ccircle cx='8.4' cy='15.6' r='2.8'/%3E%3Ccircle cx='15.6' cy='15.6' r='2.8'/%3E%3Cpath d='M11.2 15.4a1.6 1.6 0 0 1 1.6 0'/%3E%3C/svg%3E");
    --rp-icon-check-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M7.8 12.4l2.9 2.9 5.5-5.8'/%3E%3C/svg%3E");
    --rp-icon-sad: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M8.4 16.4c2-1.9 5.2-1.9 7.2 0'/%3E%3Ccircle cx='9' cy='10' r='1.3' fill='%23000' stroke='none'/%3E%3Ccircle cx='15' cy='10' r='1.3' fill='%23000' stroke='none'/%3E%3C/svg%3E");
    --rp-icon-hourglass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h11M6.5 20.5h11'/%3E%3Cpath d='M8 3.5c0 4.4 4 5 4 8.5s-4 4.1-4 8.5M16 3.5c0 4.4-4 5-4 8.5s4 4.1 4 8.5'/%3E%3C/svg%3E");
    --rp-icon-gear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill-rule='evenodd' d='M12.72 4.74L14.76 2.91L16.48 3.62L16.63 6.36L17.64 7.37L20.38 7.52L21.09 9.24L19.26 11.28L19.26 12.72L21.09 14.76L20.38 16.48L17.64 16.63L16.63 17.64L16.48 20.38L14.76 21.09L12.72 19.26L11.28 19.26L9.24 21.09L7.52 20.38L7.37 17.64L6.36 16.63L3.62 16.48L2.91 14.76L4.74 12.72L4.74 11.28L2.91 9.24L3.62 7.52L6.36 7.37L7.37 6.36L7.52 3.62L9.24 2.91L11.28 4.74ZM12 8.8a3.2 3.2 0 1 0 0 6.4a3.2 3.2 0 1 0 0-6.4Z' fill='%23000' stroke='none'/%3E%3C/svg%3E");
    --rp-icon-laugh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M7.6 13.2h8.8a4.4 4.4 0 0 1-8.8 0Z' fill='%23000' stroke='none'/%3E%3Cpath d='M8 9.6l1.6-1.2M16 9.6l-1.6-1.2'/%3E%3C/svg%3E");
    --rp-icon-palette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4a8.6 8.6 0 0 0 0 17.2c1.3 0 2-.8 2-1.8 0-1.3-1.2-1.7-1.2-2.9 0-1.1.9-1.9 2-1.9h1.9a3.9 3.9 0 0 0 3.9-3.9c0-3.8-3.8-6.7-8.6-6.7Z'/%3E%3Ccircle cx='7.6' cy='11.4' r='1.4' fill='%23000' stroke='none'/%3E%3Ccircle cx='10.2' cy='7.4' r='1.4' fill='%23000' stroke='none'/%3E%3Ccircle cx='15' cy='7.6' r='1.4' fill='%23000' stroke='none'/%3E%3C/svg%3E");
    --rp-icon-puzzle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8h3.7a2.3 2.3 0 1 1 4.6 0h3.7v3.7a2.3 2.3 0 1 1 0 4.6V20h-12Z' stroke-linejoin='round'/%3E%3C/svg%3E");
    --rp-icon-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v8a2.5 2.5 0 0 1-2.5 2.5H11l-4.6 3.6V17h0A2.4 2.4 0 0 1 4 14.5Z' stroke-linejoin='round'/%3E%3Cpath d='M8.5 9.4h7M8.5 12.6h4.5'/%3E%3C/svg%3E");
    --rp-icon-masks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 4.6c5-1.7 10-1.7 15 0v6.2c0 5-3.3 9-7.5 9s-7.5-4-7.5-9Z'/%3E%3Cpath d='M7.6 9.6c.9-.8 2.1-.8 3 0M13.4 9.6c.9-.8 2.1-.8 3 0'/%3E%3Cpath d='M8.4 13.2h7.2a3.6 3.6 0 0 1-7.2 0Z' fill='%23000' stroke='none'/%3E%3C/svg%3E");
    --rp-icon-question: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M9.4 9.5a2.7 2.7 0 1 1 3.9 2.4c-.8.4-1.3 1-1.3 1.9v.4'/%3E%3Ccircle cx='12' cy='17.1' r='1.35' fill='%23000' stroke='none'/%3E%3C/svg%3E");
    --rp-icon-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M2.8 12h18.4M12 2.8c2.6 2.6 3.8 5.7 3.8 9.2s-1.2 6.6-3.8 9.2c-2.6-2.6-3.8-5.7-3.8-9.2S9.4 5.4 12 2.8Z'/%3E%3C/svg%3E");
    --rp-icon-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.8v11M7.4 10.6 12 15.2l4.6-4.6M4.5 19.6h15'/%3E%3C/svg%3E");
    --rp-icon-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 20.5V3.8'/%3E%3Cpath d='M5.5 4.6h12.2l-2.7 4.3 2.7 4.3H5.5Z' fill='%23000'/%3E%3C/svg%3E");
    --rp-icon-thumb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.2 10.6V20H4.4a1.1 1.1 0 0 1-1.1-1.1v-7.2a1.1 1.1 0 0 1 1.1-1.1Z'/%3E%3Cpath d='M7.2 10.6l3.7-6.6a1.9 1.9 0 0 1 3.5 1.3l-.8 4.1h5a2 2 0 0 1 2 2.4l-1.3 6.6A2.2 2.2 0 0 1 17.1 20H7.2'/%3E%3C/svg%3E");
    --rp-icon-thumb-filled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.2 10.6V20H4.4a1.1 1.1 0 0 1-1.1-1.1v-7.2a1.1 1.1 0 0 1 1.1-1.1Z'/%3E%3Cpath d='M7.2 10.6l3.7-6.6a1.9 1.9 0 0 1 3.5 1.3l-.8 4.1h5a2 2 0 0 1 2 2.4l-1.3 6.6A2.2 2.2 0 0 1 17.1 20H7.2'/%3E%3C/svg%3E");
    --rp-icon-fullscreen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V5.5A1.5 1.5 0 0 1 5.5 4H9M15 4h3.5A1.5 1.5 0 0 1 20 5.5V9M20 15v3.5a1.5 1.5 0 0 1-1.5 1.5H15M9 20H5.5A1.5 1.5 0 0 1 4 18.5V15'/%3E%3C/svg%3E");
    --rp-icon-fullscreen-exit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4v3.5A1.5 1.5 0 0 1 7.5 9H4M20 9h-3.5A1.5 1.5 0 0 1 15 7.5V4M15 20v-3.5a1.5 1.5 0 0 1 1.5-1.5H20M4 15h3.5A1.5 1.5 0 0 1 9 16.5V20'/%3E%3C/svg%3E");
    --rp-icon-move: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='14.6' cy='4.4' r='2.2' fill='%23000' stroke='none'/%3E%3Cpath d='M13.6 8.6l-2.4 5.6 3.8 2.7-1 4.6'/%3E%3Cpath d='M11.2 14.2l-2.4 3.5-4.3.6'/%3E%3Cpath d='M6.3 10.6l3.4-2.6 3.9.6 2.6 3.2 3 .5'/%3E%3C/svg%3E");
    --rp-icon-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.6' y='3.6' width='7' height='7' rx='1.9'/%3E%3Crect x='13.4' y='3.6' width='7' height='7' rx='1.9'/%3E%3Crect x='3.6' y='13.4' width='7' height='7' rx='1.9'/%3E%3Crect x='13.4' y='13.4' width='7' height='7' rx='1.9'/%3E%3C/svg%3E");
    --rp-icon-funnel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4.5h16a.9.9 0 0 1 .7 1.5l-6.2 7.3v5.5a.9.9 0 0 1-.5.8l-2.7 1.4a.7.7 0 0 1-1-.6v-7.1L3.3 6a.9.9 0 0 1 .7-1.5Z'/%3E%3C/svg%3E");
    --rp-icon-split: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21v-6.2a3 3 0 0 0-.9-2.1L5.5 7.1M12 14.8a3 3 0 0 1 .9-2.1l5.6-5.6'/%3E%3Cpath d='M4.6 11.4V6.2h5.2M19.4 11.4V6.2h-5.2'/%3E%3C/svg%3E");
    --rp-icon-stack: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.3l8.6 4.3L12 11.9 3.4 7.6Z' fill='%23000' stroke='none'/%3E%3Cpath d='M3.4 12.1 12 16.4l8.6-4.3M3.4 16.4 12 20.7l8.6-4.3'/%3E%3C/svg%3E");
    --rp-icon-flow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3.5' width='7.5' height='6.5' rx='1.8' fill='%23000' stroke='none'/%3E%3Crect x='14.6' y='14' width='6.4' height='6.5' rx='1.8'/%3E%3Cpath d='M6.8 10v4.2a3 3 0 0 0 3 3h2.4M10 14.6l2.6 2.6-2.6 2.6'/%3E%3C/svg%3E");
    --rp-icon-mic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8.8' y='2.8' width='6.4' height='11.4' rx='3.2' fill='%23000' stroke='none'/%3E%3Cpath d='M5.4 11.2a6.6 6.6 0 0 0 13.2 0M12 17.8v3.4M8.6 21.2h6.8'/%3E%3C/svg%3E");
    --rp-icon-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4v16h16'/%3E%3Cpath d='M8 15.5l3.6-4.2 3 2.6L19.5 8'/%3E%3Cpath d='M15.6 8h3.9v3.9'/%3E%3C/svg%3E");
    --rp-icon-coins: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M12 5.9v12.2M14.9 9.3c-.4-1-1.5-1.6-2.9-1.6-1.6 0-2.8.8-2.8 2 0 2.8 5.7 1.5 5.7 4.4 0 1.2-1.2 2.1-2.9 2.1-1.4 0-2.6-.6-3-1.7' stroke-width='1.8'/%3E%3C/svg%3E");
    --rp-icon-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 7h15M4.5 12h15M4.5 17h15' stroke-width='2.4'/%3E%3C/svg%3E");
    --rp-icon-exit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 4.5H7a1.5 1.5 0 0 0-1.5 1.5v12A1.5 1.5 0 0 0 7 19.5h6.5'/%3E%3Cpath d='M11 12h9.5M17 8.5l3.5 3.5-3.5 3.5'/%3E%3C/svg%3E");
    --rp-icon-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3.2c.7 4 2.8 6.1 6.8 6.8-4 .7-6.1 2.8-6.8 6.8-.7-4-2.8-6.1-6.8-6.8 4-.7 6.1-2.8 6.8-6.8Z' fill='%23000' stroke='none'/%3E%3Cpath d='M18 13.6c.35 1.9 1.3 2.85 3.2 3.2-1.9.35-2.85 1.3-3.2 3.2-.35-1.9-1.3-2.85-3.2-3.2 1.9-.35 2.85-1.3 3.2-3.2Z' fill='%23000' stroke='none'/%3E%3C/svg%3E");
    --rp-icon-more: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5.5' cy='12' r='2' fill='%23000' stroke='none'/%3E%3Ccircle cx='12' cy='12' r='2' fill='%23000' stroke='none'/%3E%3Ccircle cx='18.5' cy='12' r='2' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}

.rp-icon {
    display: inline-block;
    flex: none;
    width: 1em;
    height: 1em;
    vertical-align: -0.14em;
    background-color: currentColor;
    -webkit-mask: var(--rp-icon-star) center / contain no-repeat;
    mask: var(--rp-icon-star) center / contain no-repeat;
}

/*
 * Icon drawn in front of a label whose text is set by i18n (textContent), so the icon
 * cannot live in the markup: <button class="rp-icon-before">, and the game CSS picks
 * the shape with --rp-icon-before: var(--rp-icon-dice).
 */
.rp-icon-before::before {
    content: "";
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    margin-right: 0.4em;
    vertical-align: -0.2em;
    background-color: currentColor;
    -webkit-mask: var(--rp-icon-before, var(--rp-icon-star)) center / contain no-repeat;
    mask: var(--rp-icon-before, var(--rp-icon-star)) center / contain no-repeat;
}

.rp-icon--pause { -webkit-mask-image: var(--rp-icon-pause); mask-image: var(--rp-icon-pause); }
.rp-icon--fullscreen { -webkit-mask-image: var(--rp-icon-fullscreen); mask-image: var(--rp-icon-fullscreen); }
.rp-icon--fullscreen-exit { -webkit-mask-image: var(--rp-icon-fullscreen-exit); mask-image: var(--rp-icon-fullscreen-exit); }
.rp-icon--play { -webkit-mask-image: var(--rp-icon-play); mask-image: var(--rp-icon-play); }
.rp-icon--video { -webkit-mask-image: var(--rp-icon-video); mask-image: var(--rp-icon-video); }
.rp-icon--skip { -webkit-mask-image: var(--rp-icon-skip); mask-image: var(--rp-icon-skip); }
.rp-icon--crown { -webkit-mask-image: var(--rp-icon-crown); mask-image: var(--rp-icon-crown); }
.rp-icon--card { -webkit-mask-image: var(--rp-icon-card); mask-image: var(--rp-icon-card); }
.rp-icon--sound { -webkit-mask-image: var(--rp-icon-sound); mask-image: var(--rp-icon-sound); }
.rp-icon--sound-off { -webkit-mask-image: var(--rp-icon-sound-off); mask-image: var(--rp-icon-sound-off); }
.rp-icon--vibrate { -webkit-mask-image: var(--rp-icon-vibrate); mask-image: var(--rp-icon-vibrate); }
.rp-icon--star { -webkit-mask-image: var(--rp-icon-star); mask-image: var(--rp-icon-star); }
.rp-icon--lock { -webkit-mask-image: var(--rp-icon-lock); mask-image: var(--rp-icon-lock); }
.rp-icon--dice { -webkit-mask-image: var(--rp-icon-dice); mask-image: var(--rp-icon-dice); }
.rp-icon--eye { -webkit-mask-image: var(--rp-icon-eye); mask-image: var(--rp-icon-eye); }
.rp-icon--list { -webkit-mask-image: var(--rp-icon-list); mask-image: var(--rp-icon-list); }
.rp-icon--refresh { -webkit-mask-image: var(--rp-icon-refresh); mask-image: var(--rp-icon-refresh); }
.rp-icon--skull { -webkit-mask-image: var(--rp-icon-skull); mask-image: var(--rp-icon-skull); }
.rp-icon--heart { -webkit-mask-image: var(--rp-icon-heart); mask-image: var(--rp-icon-heart); }
.rp-icon--heart-outline { -webkit-mask-image: var(--rp-icon-heart-outline); mask-image: var(--rp-icon-heart-outline); }
.rp-icon--chevron { -webkit-mask-image: var(--rp-icon-chevron); mask-image: var(--rp-icon-chevron); }
/* Points right; add .rp-icon--flip for left («назад»). */
.rp-icon--flip { scale: -1 1; }
.rp-icon--close { -webkit-mask-image: var(--rp-icon-close); mask-image: var(--rp-icon-close); }
.rp-icon--search { -webkit-mask-image: var(--rp-icon-search); mask-image: var(--rp-icon-search); }
.rp-icon--ballot { -webkit-mask-image: var(--rp-icon-ballot); mask-image: var(--rp-icon-ballot); }
.rp-icon--bolt { -webkit-mask-image: var(--rp-icon-bolt); mask-image: var(--rp-icon-bolt); }
.rp-icon--dove { -webkit-mask-image: var(--rp-icon-dove); mask-image: var(--rp-icon-dove); }
.rp-icon--radiation { -webkit-mask-image: var(--rp-icon-radiation); mask-image: var(--rp-icon-radiation); }
.rp-icon--stop { -webkit-mask-image: var(--rp-icon-stop); mask-image: var(--rp-icon-stop); }
.rp-icon--phone { -webkit-mask-image: var(--rp-icon-phone); mask-image: var(--rp-icon-phone); }
.rp-icon--doc { -webkit-mask-image: var(--rp-icon-doc); mask-image: var(--rp-icon-doc); }
.rp-icon--bug { -webkit-mask-image: var(--rp-icon-bug); mask-image: var(--rp-icon-bug); }
.rp-icon--image { -webkit-mask-image: var(--rp-icon-image); mask-image: var(--rp-icon-image); }
.rp-icon--users { -webkit-mask-image: var(--rp-icon-users); mask-image: var(--rp-icon-users); }
.rp-icon--spy { -webkit-mask-image: var(--rp-icon-spy); mask-image: var(--rp-icon-spy); }
.rp-icon--check-circle { -webkit-mask-image: var(--rp-icon-check-circle); mask-image: var(--rp-icon-check-circle); }
.rp-icon--sad { -webkit-mask-image: var(--rp-icon-sad); mask-image: var(--rp-icon-sad); }
.rp-icon--hourglass { -webkit-mask-image: var(--rp-icon-hourglass); mask-image: var(--rp-icon-hourglass); }
.rp-icon--gear { -webkit-mask-image: var(--rp-icon-gear); mask-image: var(--rp-icon-gear); }
.rp-icon--laugh { -webkit-mask-image: var(--rp-icon-laugh); mask-image: var(--rp-icon-laugh); }
.rp-icon--palette { -webkit-mask-image: var(--rp-icon-palette); mask-image: var(--rp-icon-palette); }
.rp-icon--puzzle { -webkit-mask-image: var(--rp-icon-puzzle); mask-image: var(--rp-icon-puzzle); }
.rp-icon--chat { -webkit-mask-image: var(--rp-icon-chat); mask-image: var(--rp-icon-chat); }
.rp-icon--masks { -webkit-mask-image: var(--rp-icon-masks); mask-image: var(--rp-icon-masks); }
.rp-icon--question { -webkit-mask-image: var(--rp-icon-question); mask-image: var(--rp-icon-question); }
.rp-icon--globe { -webkit-mask-image: var(--rp-icon-globe); mask-image: var(--rp-icon-globe); }
.rp-icon--download { -webkit-mask-image: var(--rp-icon-download); mask-image: var(--rp-icon-download); }
.rp-icon--flag { -webkit-mask-image: var(--rp-icon-flag); mask-image: var(--rp-icon-flag); }
.rp-icon--thumb { -webkit-mask-image: var(--rp-icon-thumb); mask-image: var(--rp-icon-thumb); }
.rp-icon--thumb-filled { -webkit-mask-image: var(--rp-icon-thumb-filled); mask-image: var(--rp-icon-thumb-filled); }
.rp-icon--move { -webkit-mask-image: var(--rp-icon-move); mask-image: var(--rp-icon-move); }
.rp-icon--grid { -webkit-mask-image: var(--rp-icon-grid); mask-image: var(--rp-icon-grid); }
.rp-icon--funnel { -webkit-mask-image: var(--rp-icon-funnel); mask-image: var(--rp-icon-funnel); }
.rp-icon--split { -webkit-mask-image: var(--rp-icon-split); mask-image: var(--rp-icon-split); }
.rp-icon--stack { -webkit-mask-image: var(--rp-icon-stack); mask-image: var(--rp-icon-stack); }
.rp-icon--flow { -webkit-mask-image: var(--rp-icon-flow); mask-image: var(--rp-icon-flow); }
.rp-icon--mic { -webkit-mask-image: var(--rp-icon-mic); mask-image: var(--rp-icon-mic); }
.rp-icon--chart { -webkit-mask-image: var(--rp-icon-chart); mask-image: var(--rp-icon-chart); }
.rp-icon--coins { -webkit-mask-image: var(--rp-icon-coins); mask-image: var(--rp-icon-coins); }
.rp-icon--menu { -webkit-mask-image: var(--rp-icon-menu); mask-image: var(--rp-icon-menu); }
.rp-icon--exit { -webkit-mask-image: var(--rp-icon-exit); mask-image: var(--rp-icon-exit); }
.rp-icon--sparkle { -webkit-mask-image: var(--rp-icon-sparkle); mask-image: var(--rp-icon-sparkle); }
.rp-icon--more { -webkit-mask-image: var(--rp-icon-more); mask-image: var(--rp-icon-more); }
/* /content-report.css */
/*
 * Content report sheet (client/assets/js/content-report.js) and the small flag button
 * games put on their card. Shared component: games only set the --rp-report-* tokens.
 * Defaults sit in :where(:root) (zero specificity), so a game theme's :root tokens win whether
 * its stylesheet loads before or after this one.
 */
:where(:root) {
    --rp-report-surface: #1f2438;
    --rp-report-text: #ffffff;
    --rp-report-muted: #a7aec8;
    --rp-report-line: rgba(255, 255, 255, 0.14);
    --rp-report-chip: rgba(255, 255, 255, 0.08);
    --rp-report-accent: #ff3b6f;
    --rp-report-accent-ink: #ffffff;
    --rp-report-error: var(--rp-wrong, #ff8a9a);
    --rp-report-radius: 24px;
    --rp-report-button-radius: 30px;
    --rp-report-flag: rgba(255, 255, 255, 0.55);
}

/* Flag button on the card: 44 px hit area, quiet until pressed. */
.rp-report-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--rp-report-flag);
    font-size: 18px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 150ms ease, background-color 150ms ease, transform 150ms ease;
}
.rp-report-flag:active { transform: scale(0.9); background: rgba(255, 255, 255, 0.08); }
.rp-report-flag:focus-visible { outline: 2px solid var(--rp-report-accent); outline-offset: 2px; }
@media (hover: hover) { .rp-report-flag:hover { color: var(--rp-report-text); } }

.rp-report {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
}
.rp-report.is-open { pointer-events: auto; }
.rp-report__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: opacity 200ms ease;
}
.rp-report.is-open .rp-report__backdrop { opacity: 1; }

.rp-report__sheet {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    padding: 24px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius: var(--rp-report-radius) var(--rp-report-radius) 0 0;
    background: var(--rp-report-surface);
    color: var(--rp-report-text);
    font-family: inherit;
    transform: translateY(100%);
    transition: transform 240ms cubic-bezier(.2, .9, .3, 1);
}
.rp-report.is-open .rp-report__sheet { transform: none; }
@media (min-width: 600px) and (min-height: 560px) {
    .rp-report { align-items: center; padding: 24px; }
    .rp-report__sheet { border-radius: var(--rp-report-radius); padding-bottom: 20px; }
}

.rp-report__title {
    margin: 0 0 8px;
    font-family: Unbounded, Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.2;
    text-wrap: balance;
}
.rp-report__card {
    margin: 0 0 16px;
    padding: 8px 12px;
    border-left: 3px solid var(--rp-report-accent);
    border-radius: 4px;
    background: var(--rp-report-chip);
    color: var(--rp-report-muted);
    font-size: 15px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.rp-report__reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.rp-report__chip {
    min-height: 44px;
    padding: 8px 16px;
    border: 1px solid var(--rp-report-line);
    border-radius: 999px;
    background: var(--rp-report-chip);
    color: var(--rp-report-text);
    font: inherit;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.rp-report__chip:active { transform: scale(0.96); }
.rp-report__chip[aria-pressed="true"] {
    border-color: var(--rp-report-accent);
    background: var(--rp-report-accent);
    color: var(--rp-report-accent-ink);
}
.rp-report__comment {
    display: block;
    width: 100%;
    min-height: 64px;
    padding: 12px;
    border: 1px solid var(--rp-report-line);
    border-radius: 16px;
    background: transparent;
    color: var(--rp-report-text);
    font: inherit;
    font-size: 16px;
    resize: vertical;
    box-sizing: border-box;
}
.rp-report__comment::placeholder { color: var(--rp-report-muted); opacity: 1; }
.rp-report__status {
    min-height: 20px;
    margin: 8px 0;
    color: var(--rp-report-error);
    font-size: 14px;
}
.rp-report__actions {
    display: flex;
    gap: 8px;
}
.rp-report__button {
    flex: 1;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: var(--rp-report-button-radius);
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 150ms ease, transform 150ms ease;
}
.rp-report__button:active:not(:disabled) { transform: scale(0.97); }
.rp-report__button--primary { background: var(--rp-report-accent); color: var(--rp-report-accent-ink); }
.rp-report__button--secondary { border-color: var(--rp-report-line); background: transparent; color: var(--rp-report-text); }
.rp-report__button:disabled { opacity: 0.45; cursor: default; }
.rp-report__chip:focus-visible,
.rp-report__button:focus-visible,
.rp-report__comment:focus-visible { outline: 2px solid var(--rp-report-accent); outline-offset: 2px; }

.rp-report__sheet.is-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding-top: 32px;
    text-align: center;
}
.rp-report__sheet.is-done .rp-report__button { flex: none; width: 100%; }
.rp-report__done-mark {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--rp-report-accent);
    position: relative;
}
.rp-report__done-mark::after {
    content: "";
    position: absolute;
    inset: 14px;
    background: var(--rp-report-accent-ink);
    -webkit-mask: var(--rp-icon-check, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")) center / contain no-repeat;
    mask: var(--rp-icon-check, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")) center / contain no-repeat;
}
.rp-report__done-text { margin: 0; font-size: 17px; line-height: 1.4; }

@media (prefers-reduced-motion: reduce) {
    .rp-report__backdrop,
    .rp-report__sheet,
    .rp-report-flag,
    .rp-report__chip,
    .rp-report__button { transition: none; }
}

/* Like / dislike under the card (ContentReport.attachVotes): quiet thumbs, filled when chosen. */
.rp-card-vote[hidden] { display: none; }
.rp-card-vote {
    display: flex;
    justify-content: center;
    gap: 6px;
}
.rp-card-vote__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--rp-report-flag);
    font-size: 20px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 150ms ease, background-color 150ms ease, transform 150ms ease;
}
.rp-card-vote__btn--dislike .rp-icon { transform: rotate(180deg); }
.rp-card-vote__btn--report { margin-left: 6px; color: var(--rp-report-flag); font-size: 18px; }
.rp-card-vote__btn[aria-pressed="true"] { color: var(--rp-report-accent); }
.rp-card-vote__btn:active { transform: scale(0.88); background: rgba(255, 255, 255, 0.08); }
.rp-card-vote__btn:focus-visible { outline: 2px solid var(--rp-report-accent); outline-offset: 2px; }
@media (hover: hover) { .rp-card-vote__btn:hover:not([aria-pressed="true"]) { color: var(--rp-report-text); } }
/* Thumbs + flag as the last row inside a content card (word, task, location): one look in every game.
   The game sets --rp-report-flag on its card to a muted tone of the card's ink (light cards need a dark one). */
.rp-card-vote--in-card { margin: 14px -8px -14px; }
.rp-card-vote--in-card .rp-card-vote__btn--report { margin-left: 0; }
@media (prefers-reduced-motion: no-preference) {
    .rp-card-vote__btn[aria-pressed="true"] .rp-icon { animation: rp-card-vote-pop 260ms ease-out; }
    .rp-card-vote__btn--dislike[aria-pressed="true"] .rp-icon { animation-name: rp-card-vote-pop-down; }
}
@keyframes rp-card-vote-pop { 0% { transform: scale(0.7); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes rp-card-vote-pop-down { 0% { transform: rotate(180deg) scale(0.7); } 60% { transform: rotate(180deg) scale(1.18); } 100% { transform: rotate(180deg) scale(1); } }
/* /answer-marks.css */
/*
 * Answer marks: the one upright ✓ / ✕ pair for right and wrong answers in every game.
 * SVG masks instead of font glyphs, so the shape never depends on the game font
 * (no italic or slanted checks) and the colour always comes from the theme
 * (--rp-correct / --rp-wrong / --rp-*-ink, see COMMON/roomplay-palettes.html).
 *
 * Markup:  <span class="rp-mark rp-mark--correct" aria-hidden="true"></span>
 *          <span class="rp-mark rp-mark--wrong" aria-hidden="true"></span>
 * The mark is 1em and takes currentColor; size and colour come from the context.
 * Pseudo-elements reuse the same shapes through --rp-icon-check / --rp-icon-cross
 * (bare glyph) and --rp-icon-check-badge / --rp-icon-cross-badge (glyph in a circle).
 */
:root {
    --rp-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E");
    --rp-icon-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6.8 6.8l10.4 10.4M17.2 6.8L6.8 17.2'/%3E%3C/svg%3E");
    /* Filled circle with the check cut out, and a ring around the cross. */
    --rp-icon-check-badge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='%23fff'/%3E%3Cpath d='M7.2 12.4l3.2 3.2 6.4-6.6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Ccircle cx='12' cy='12' r='12' mask='url(%23m)'/%3E%3C/svg%3E");
    --rp-icon-cross-badge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10.8' stroke-width='2.4'/%3E%3Cpath d='M8.4 8.4l7.2 7.2M15.6 8.4l-7.2 7.2' stroke-width='2.4'/%3E%3C/svg%3E");
}

.rp-mark {
    display: inline-block;
    flex: none;
    width: 1em;
    height: 1em;
    vertical-align: -0.14em;
    background-color: currentColor;
    -webkit-mask: var(--rp-icon-check) center / contain no-repeat;
    mask: var(--rp-icon-check) center / contain no-repeat;
}

.rp-mark--wrong {
    -webkit-mask-image: var(--rp-icon-cross);
    mask-image: var(--rp-icon-cross);
}
/* /onboarding.css */
/* ==================== */
/* Onboarding Module    */
/* Shared carousel for  */
/* client-only games    */
/* ==================== */

:root {
    --onboarding-accent: var(--accent-pink, #ff3b6f);
    --onboarding-accent-dark: var(--accent-pink-dark, #cc2f59);
    --onboarding-shadow: rgba(255, 59, 111, 0.3);
    --onboarding-shadow-hover: rgba(255, 59, 111, 0.4);
}

#onboarding-screen {
    position: relative;
    height: 100vh;
    height: var(--app-height, 100dvh);
    overflow: hidden;
}

#onboarding-screen > .btn-back {
    z-index: 30;
    pointer-events: auto;
    touch-action: manipulation;
}

.onboarding-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-start;
    align-items: center;
    padding-top: 40px;
}

.onboarding-slides {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 5vh;
    width: 100%;
    position: relative;
}

.onboarding-slide {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
    animation: fadeIn 0.4s ease;
    user-select: none;
    -webkit-user-select: none;
}

.onboarding-slide.active {
    display: flex;
}

/* Short or landscape screens: centre the active slide in the space above the dots.
   Auto margins fall back to 0 when the slide is taller than that space, so it never runs off the top. */
.onboarding-slides > .onboarding-slide.active {
    margin-top: auto;
    margin-bottom: auto;
}

/* Portrait screens: one geometry for every game.
   Buttons and dots sit at the same distance from the bottom, the title always starts at the
   middle of the screen, and the art fills the zone above it, anchored to its bottom.
   Games with their own half-screen art layout keep their slides but share the bottom rows. */
@media (min-height: 610px) and (max-aspect-ratio: 4/5) {
    #onboarding-screen.screen {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    #onboarding-screen.screen .onboarding-container {
        padding-bottom: 0;
        gap: 0;
    }

    #onboarding-screen.screen :is(.onboarding-dots, .ww-pagination-row, .decoder-pagination-row) {
        height: 10px;
        margin: 0 0 30px;
    }

    #onboarding-screen.screen .onboarding-buttons {
        height: 56px;
        margin: 0 0 20px;
        align-items: stretch;
    }

    #onboarding-screen.screen .onboarding-buttons > button {
        min-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    #onboarding-screen.screen .onboarding-container:not(.taboo-onboarding):not(.secret-hitler-onboarding):not(.ww-ru-onboarding):not(.decoder-ru-onboarding) .onboarding-slides {
        align-items: stretch;
        padding-top: 0;
        padding-bottom: 0;
        min-height: 0;
    }

    /* Title line = screen height minus the bottom rows (116 px) minus this text zone = 50 %;
       below ~652 px the 210 px floor lifts it a little so long rule texts keep a gap above the dots. */
    #onboarding-screen {
        --onboarding-text-zone: max(210px, calc(var(--app-height, 100dvh) * 0.5 - 116px));
    }

    #onboarding-screen :is(.taboo-onboarding .onboarding-slide, .secret-hitler-onboarding .onboarding-slide, .ww-ru-onboarding .ww-page, .decoder-ru-onboarding .decoder-page) {
        grid-template-rows: minmax(0, calc(100% - var(--onboarding-text-zone))) auto 1fr;
    }

    #onboarding-screen :is(.taboo-onboarding, .secret-hitler-onboarding, .ww-ru-onboarding, .decoder-ru-onboarding) .slide-title {
        margin-top: 0;
    }

    #onboarding-screen .onboarding-container:not(.taboo-onboarding):not(.secret-hitler-onboarding):not(.ww-ru-onboarding):not(.decoder-ru-onboarding) .onboarding-slides > .onboarding-slide.active {
        display: grid;
        row-gap: 0;
        grid-template-rows: minmax(0, calc(100% - var(--onboarding-text-zone))) auto 1fr;
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        align-content: stretch;
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    #onboarding-screen .onboarding-container:not(.taboo-onboarding):not(.secret-hitler-onboarding):not(.ww-ru-onboarding):not(.decoder-ru-onboarding) .onboarding-slide.active > :first-child {
        align-self: end;
    }

    /* Same breathing room between the art and the title in every game. */
    #onboarding-screen.screen :is(.onboarding-slide, .ww-page, .decoder-page) > :is(.slide-icon, .rule-remotion-stage, .taboo-art, .sh-art, .ww-art, .decoder-art) {
        margin-bottom: var(--onboarding-art-gap, 32px);
    }

    #onboarding-screen .onboarding-container:not(.taboo-onboarding):not(.secret-hitler-onboarding):not(.ww-ru-onboarding):not(.decoder-ru-onboarding) .onboarding-slide.active > .slide-title {
        align-self: start;
        margin-top: 0;
    }

    #onboarding-screen .onboarding-container:not(.taboo-onboarding):not(.secret-hitler-onboarding):not(.ww-ru-onboarding):not(.decoder-ru-onboarding) .onboarding-slide.active > .slide-text {
        align-self: start;
        min-height: 0;
    }
}

.onboarding-slide.active.slide-in-left {
    animation: slideInLeft 0.3s ease;
}

.onboarding-slide.active.slide-in-right {
    animation: slideInRight 0.3s ease;
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(60px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(-60px); }
    to   { opacity: 1; transform: translateX(0); }
}

.slide-icon {
    font-size: 80px;
    margin-bottom: 30px;
}

.slide-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--text-primary);
}

.slide-text {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 300px;
}

.onboarding-dots {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bg-card);
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background: var(--onboarding-accent);
    width: 30px;
    border-radius: 5px;
}

.onboarding-buttons {
    display: flex;
    gap: 16px;
    width: 100%;
    max-width: 320px;
    margin-bottom: 20px;
}

.btn-skip {
    flex: 1;
    background: transparent;
    border: 2px solid var(--text-secondary);
    color: var(--text-secondary);
    padding: 16px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

@media (hover: hover) {
    .btn-skip:hover {
        border-color: var(--text-primary);
        color: var(--text-primary);
    }
}

.btn-next-slide {
    flex: 1.5;
    background: linear-gradient(135deg, var(--onboarding-accent) 0%, var(--onboarding-accent-dark) 100%);
    border: none;
    color: white;
    padding: 16px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px var(--onboarding-shadow);
}

@media (hover: hover) {
    .btn-next-slide:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 25px var(--onboarding-shadow-hover);
    }
}

/* ==================== */
/* Rule Animation Stage */
/* ==================== */

.rule-animated-onboarding .onboarding-slides {
    align-items: stretch;
    padding-top: 0;
}

.rule-animated-onboarding .onboarding-slide {
    width: 100%;
    max-width: 360px;
    padding: 4px 4px 0;
    animation: none;
}

.rule-animated-onboarding .onboarding-slide.active.slide-in-left,
.rule-animated-onboarding .onboarding-slide.active.slide-in-right {
    animation: none;
}

.rule-remotion-stage {
    position: relative;
    width: min(100%, 320px);
    height: 244px;
    margin: 0 auto 18px;
    overflow: visible;
    background: transparent;
    box-shadow: none;
    isolation: isolate;
}

.rule-remotion-stage > div,
.rule-remotion-fill {
    width: 100%;
    height: 100%;
}

.rule-motion-layer {
    position: absolute;
    inset: 0;
}

.rule-motion-asset {
    position: absolute;
    display: block;
    height: auto;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    transform-origin: center;
    will-change: transform, opacity;
    filter: drop-shadow(0 14px 18px rgba(0,0,0,0.28));
}

.rule-motion-asset-word-card,
.rule-motion-asset-question-card,
.rule-motion-asset-canvas,
.rule-motion-asset-score {
    filter: drop-shadow(0 10px 14px rgba(0,0,0,0.22));
}

.rule-animated-onboarding .slide-title {
    font-size: 22px;
    line-height: 1.16;
    max-width: 340px;
    margin-bottom: 12px;
}

.rule-animated-onboarding .slide-text {
    max-width: 340px;
    min-height: 94px;
    line-height: 1.48;
}

@media (max-width: 380px) {
    .rule-remotion-stage {
        width: min(100%, 294px);
        height: 224px;
    }
}

@media (max-height: 700px) {
    .rule-animated-onboarding {
        padding-top: 6px;
    }

    .rule-remotion-stage {
        width: min(100%, 284px);
        height: 216px;
        margin-bottom: 12px;
    }

    .rule-animated-onboarding .slide-title {
        font-size: 19px;
        margin-bottom: 8px;
    }

    .rule-animated-onboarding .slide-text {
        min-height: 78px;
        font-size: 14px;
        line-height: 1.36;
    }
}

/* ==================== */
/* Responsive           */
/* ==================== */
@media (max-width: 480px) {
    .slide-icon {
        font-size: 60px;
        margin-bottom: 20px;
    }

    .slide-title {
        font-size: 20px;
        margin-bottom: 16px;
    }

    .slide-text {
        font-size: 14px;
        max-width: 280px;
    }

    .onboarding-buttons {
        gap: 12px;
    }

    .btn-skip,
    .btn-next-slide {
        padding: 14px;
        font-size: 14px;
    }
}

@media (max-height: 600px) {
    .onboarding-slides {
        min-height: 200px;
    }

    .slide-icon {
        font-size: 40px;
        margin-bottom: 16px;
    }

    .onboarding-container {
        gap: 16px;
    }
}

/* Question-mark glyph inside animated onboarding art.
   The host shape is a size container, so the «?» scales with the shape and always fits inside it.
   Put .onboarding-qmark-host on the shape (it needs a fixed width/height) and wrap the «?» in .onboarding-qmark.
   A host can shrink its glyph further with --onboarding-qmark-size (e.g. a star with a small inner area). */
.onboarding-qmark {
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
}

@supports (width: 1cqmin) {
    .onboarding-qmark-host {
        container-type: size;
    }

    .onboarding-qmark {
        font-size: var(--onboarding-qmark-size, 44cqmin);
    }
}

/* Scenes whose animation reaches past the 320 box use viewBox="-24 -24 368 368" and
   <img data-art-bleed>: drawn 115% wide with -7.5% margins, so the art keeps its size and
   layout box while the extra edge stays visible instead of being clipped. */
#onboarding-screen .slide-icon picture > img[data-art-bleed],
#onboarding-screen .slide-icon > img[data-art-bleed] {
    width: 115%;
    max-width: none;
    height: auto;
    max-height: none;
    margin: -7.5%;
}
/* /pwa-overrides.css */
/* Hide i18n text until translations are applied (non-Russian only). The hidden Russian
   placeholder text still takes part in layout, so it also gets a system font: otherwise an
   English page downloads the Cyrillic Unbounded/Manrope files (≈45 KB) for text nobody sees. */
html.i18n-pending [data-i18n] {
    visibility: hidden;
    font-family: sans-serif !important;
}

/* PWA Browser Behavior Overrides */

html {
    overscroll-behavior: none;
    --rp-promo-countdown-bg: #c62828;
}

body {
    overscroll-behavior-y: contain;
    -webkit-touch-callout: none;
}

* {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

input,
textarea,
[contenteditable="true"] {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}

.room-code-display {
    -webkit-user-select: all;
    user-select: all;
}

/* Full-height fix for all browsers (--app-height set by pwa-overrides.js via window.innerHeight) */
html {
    height: var(--app-height, 100dvh);
}

body {
    min-height: var(--app-height, 100dvh);
}

.app {
    min-height: var(--app-height, 100dvh);
}

.screen {
    min-height: var(--app-height, 100dvh);
}

.menu-screen {
    min-height: var(--app-height, 100dvh);
}

#onboarding-screen {
    height: var(--app-height, 100dvh);
}

/* Introductory discount stays visible from the catalog into Settings. */
.menu-settings-button {
    position: relative;
    overflow: visible;
}

.roomplay-discount-countdown {
    display: inline-flex;
    min-width: 42px;
    height: 20px;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--rp-promo-countdown-bg);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.32);
    color: #fff;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
}

.roomplay-discount-countdown[hidden],
.roomplay-premium-offer-meta[hidden] {
    display: none !important;
}

.roomplay-discount-countdown-settings {
    position: absolute;
    top: -8px;
    right: -10px;
    z-index: 2;
    min-width: 38px;
    height: 17px;
    padding: 0 4px;
    font-size: 9px;
    pointer-events: none;
}

.roomplay-premium-offer-meta {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
}

.roomplay-premium-offer-copy {
    min-width: 0;
    flex: 1 1 150px;
}

.roomplay-discount-countdown-premium {
    flex: 0 0 auto;
}

html.roomplay-onboarding-discount-active #settings-premium-description {
    display: none;
}

/* Android WebView extra overrides */
.android-webview .screen {
    height: var(--app-height, 100dvh) !important;
    overflow-y: auto !important;
}

.android-webview .screen.active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
    height: var(--app-height, 100dvh) !important;
    overflow-y: auto !important;
}

.android-webview #onboarding-screen {
    overflow: visible !important;
}

/* Focus management: hide on mouse/touch, show on keyboard */
button,
a,
[role="button"],
select,
summary {
    outline: none;
}

button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
select:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--accent-pink, #ff3b6f);
    outline-offset: 2px;
}

/* Same-origin page changes cross-fade instead of flashing blank (Chrome/Android
   WebView 126+, Safari/WKWebView 18.2+; others navigate as before). Kept short
   so the new page becomes interactive right away. */
@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 180ms;
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
}
/* /confirm-dialog.css */
/*
 * Back/exit confirmation dialog. Game Themes recolour it through the --rp-dialog-* tokens
 * (shared with settings-popup.css), set once on :root or [data-rp-game] in the theme:
 *   --rp-dialog-overlay, --rp-dialog-bg, --rp-dialog-border, --rp-dialog-shadow, --rp-dialog-radius,
 *   --rp-dialog-title, --rp-dialog-text, --rp-dialog-primary-bg, --rp-dialog-primary-text,
 *   --rp-dialog-primary-shadow, --rp-dialog-btn-radius, --rp-dialog-secondary-bg,
 *   --rp-dialog-secondary-border, --rp-dialog-secondary-text.
 * Fallbacks are the original navy look, so a game without tokens is unchanged. Unset tokens
 * follow related ones: secondary text = --rp-dialog-text; in the settings popup the value and
 * −/+ text = --rp-dialog-title, the toggle text = --rp-dialog-text and the «on» toggle = the primary button.
 */
.confirm-dialog-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--rp-dialog-overlay, rgba(0, 0, 0, 0.85));
    z-index: 1000;
    justify-content: center;
    align-items: center;
    padding: 24px;
}

.confirm-dialog-overlay.active {
    display: flex;
}

.confirm-dialog-modal {
    background: var(--rp-dialog-bg, linear-gradient(135deg, #252b4a 0%, #1a2140 100%));
    border: var(--rp-dialog-border, none);
    box-shadow: var(--rp-dialog-shadow, none);
    border-radius: var(--rp-dialog-radius, 24px);
    padding: 32px 24px;
    max-width: 340px;
    width: 100%;
    text-align: center;
}

.confirm-dialog-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--rp-dialog-title, #ffffff);
    margin-bottom: 8px;
}

.confirm-dialog-subtitle {
    font-size: 14px;
    color: var(--rp-dialog-text, #8892b0);
    margin-bottom: 24px;
}

.confirm-dialog-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.confirm-dialog-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: var(--rp-dialog-btn-radius, 30px);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.confirm-dialog-btn-confirm {
    background: var(--rp-dialog-primary-bg, linear-gradient(135deg, #ff3b6f, #cc2f59));
    color: var(--rp-dialog-primary-text, white);
    box-shadow: var(--rp-dialog-primary-shadow, none);
}

.confirm-dialog-btn-cancel,
.confirm-dialog-btn-extra {
    background: var(--rp-dialog-secondary-bg, transparent);
    border: 2px solid var(--rp-dialog-secondary-border, #3a4167);
    color: var(--rp-dialog-secondary-text, var(--rp-dialog-text, #8892b0));
}

/* A second choice (ConfirmDialog.show(..., { extra })), same look as cancel. */
.confirm-dialog-btn-extra[hidden] { display: none; }

/* Optional «why are you leaving» chips (ConfirmDialog.show(..., { reasons: true })). */
.confirm-dialog-reasons {
    margin: -8px 0 20px;
}
.confirm-dialog-reasons[hidden] { display: none; }
.confirm-dialog-reasons-title {
    font-size: 13px;
    color: var(--rp-dialog-text, #8892b0);
    margin-bottom: 10px;
}
.confirm-dialog-reason-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.confirm-dialog-reason {
    min-height: 36px;
    padding: 7px 14px;
    border: 1.5px solid var(--rp-dialog-secondary-border, #3a4167);
    border-radius: 18px;
    background: transparent;
    color: var(--rp-dialog-title, #ffffff);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.confirm-dialog-reason:active { transform: scale(0.95); }
.confirm-dialog-reason[aria-pressed="true"] {
    background: var(--rp-dialog-primary-bg, linear-gradient(135deg, #ff3b6f, #cc2f59));
    border-color: transparent;
    color: var(--rp-dialog-primary-text, #ffffff);
}
.confirm-dialog-reason:focus-visible { outline: 2px solid var(--rp-dialog-primary-text, #ffffff); outline-offset: 2px; }
/* /pause-overlay.css */
/*
 * Shared round pause button + overlay (see pause-overlay.js). Load before the game's styles.css;
 * game themes keep overriding .btn-pause / .pause-overlay / .pause-overlay-text directly.
 * Per-game differences go through custom properties (fallbacks are the common look):
 *   --pause-btn-bg, --pause-btn-border, --pause-btn-color, --pause-btn-padding,
 *   --pause-btn-font-size, --pause-btn-hover-bg, --pause-btn-hover-color,
 *   --pause-overlay-bg, --pause-overlay-text-color.
 * Layout-only properties (align-self, flex-shrink, min-height, z-index) stay in the game.
 * The overlay is position:absolute — the game's screen must be its positioned ancestor.
 */
.btn-pause {
    background: var(--pause-btn-bg, rgba(255, 255, 255, 0.1));
    border: 1px solid var(--pause-btn-border, rgba(255, 255, 255, 0.2));
    color: var(--pause-btn-color, var(--text-secondary));
    padding: var(--pause-btn-padding, 6px 16px);
    border-radius: 16px;
    font-size: var(--pause-btn-font-size, 13px);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

@media (hover: hover) {
    .btn-pause:hover {
        background: var(--pause-btn-hover-bg, rgba(255, 255, 255, 0.2));
        color: var(--pause-btn-hover-color, var(--text-primary));
    }
}

.pause-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--pause-overlay-bg, rgba(13, 19, 41, 0.95));
    z-index: 50;
    align-items: center;
    justify-content: center;
}

.pause-overlay.active {
    display: flex;
    cursor: pointer;
}

.pause-overlay-text {
    font-size: 32px;
    font-weight: 700;
    color: var(--pause-overlay-text-color, var(--text-secondary));
}

/*
 * Online games (shared/client/online-pause.ts): the host's «Пауза» button (in the round's header, else in the top right corner) and
 * the «Пауза» / «Ждём хоста…» screen every phone sees over the game. Same tokens as above.
 */
.rp-online-pause-btn {
    position: fixed;
    top: calc(20px + env(safe-area-inset-top, 0px));
    right: 16px;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.rp-online-pause-btn[hidden] { display: none; }
/* Inside the round's .game-header: between the round title and the timer. */
.rp-online-pause-btn--inline {
    position: static;
    flex-shrink: 0;
    margin: 0 8px;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

#online-pause-overlay.pause-overlay--online,
#pause-overlay.pause-overlay--local,
.pause-overlay.pause-overlay--local.pause-overlay--local {
    /* One palette in every game (owner 2026-10-21: game themes made the title unreadable): a dark
       scrim with white text, whatever the game's own --text-* and --pause-* tokens are. */
    --rp-pause-ink: #ffffff;
    --rp-pause-muted: rgba(255, 255, 255, 0.74);
    --rp-pause-chip: rgba(255, 255, 255, 0.12);
    --rp-pause-line: rgba(255, 255, 255, 0.26);
    background: rgba(9, 11, 20, 0.9);
    color: var(--rp-pause-ink);
    position: fixed;
    z-index: 980;
    padding: 24px 16px;
    box-sizing: border-box;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.pause-overlay--online.active {
    cursor: default;
    animation: rp-pause-in 220ms ease-out;
}
.rp-pause-card {
    /* The badge sits in one line before the title (owner 2026-11-06: with «Похожие игры» below, the big round
       badge did not fit at the top). A grid, so every other row stays centred at its own width as before. */
    display: grid;
    grid-template-columns: 1fr auto auto 1fr;
    align-items: center;
    gap: 12px 0;
    width: 100%;
    max-width: 340px;
    text-align: center;
}
.rp-pause-card > * { grid-column: 1 / -1; justify-self: center; max-width: 100%; }
.rp-pause-card > .rp-pause-badge { grid-column: 2; justify-self: end; margin-right: 10px; }
.rp-pause-card > .rp-pause-badge + .pause-overlay-text { grid-column: 3; justify-self: start; min-width: 0; }
.rp-pause-badge {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin-bottom: 4px;
    border-radius: 50%;
    background: var(--rp-pause-chip);
    border: 1px solid var(--rp-pause-line);
    color: var(--rp-pause-ink);
    font-size: 30px;
}
/* On the pause card: a small badge in the title's line (the bug report keeps the big one). */
.rp-pause-card > .rp-pause-badge { width: 40px; height: 40px; margin-bottom: 0; font-size: 18px; }
.pause-overlay--away .rp-pause-badge .rp-icon { animation: rp-pause-wait 1.6s ease-in-out infinite; }
#online-pause-overlay .pause-overlay-text,
.pause-overlay--local .pause-overlay-text { color: var(--rp-pause-ink); }
/* One-phone games (pause-overlay.js): the same card; a tap anywhere still resumes. */
.pause-overlay--local.active { animation: rp-pause-in 220ms ease-out; }
/* «Ждём игрока…»: the player the game waits on, as an avatar chip. */
.rp-pause-player {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 4px 14px 4px 4px;
    border-radius: 999px;
    background: var(--rp-pause-chip);
    border: 1px solid var(--rp-pause-line);
    color: var(--rp-pause-ink);
    font-weight: 600;
}
.rp-pause-player[hidden] { display: none; }
.rp-pause-player-avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--rp-pause-line);
    font-size: 13px;
    font-weight: 700;
}
.rp-pause-player-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rp-pause-player-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-pause-hint {
    font-size: 15px;
    line-height: 1.4;
    color: var(--rp-pause-muted);
}
/* Room code and join QR on the network pause (owner 2026-11-02: «добавь qr и код комнаты в паузу телефона»):
   the room screen's invite card (client/create-room .invite-card) in the pause palette. Tap on the code copies
   the invite. Not on the /tv/ screen, which shows its own code. */
.rp-pause-invite {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 10px 12px;
    box-sizing: border-box;
    border-radius: 18px;
    background: var(--rp-pause-chip);
    border: 1px solid var(--rp-pause-line);
    text-align: left;
}
.rp-pause-invite-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rp-pause-invite-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rp-pause-muted);
}
.rp-pause-invite-code {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 42px;
    padding: 4px 12px 4px 14px;
    background: transparent;
    color: var(--rp-pause-ink);
    border: 1.5px solid var(--rp-pause-line);
    border-radius: 12px;
    font: 800 24px/1.1 monospace;
    letter-spacing: 5px;
    cursor: pointer;
    transition: transform 0.12s ease;
}
.rp-pause-invite-code:active { transform: scale(0.97); }
.rp-pause-invite-copy {
    width: 20px; height: 20px; flex-shrink: 0; opacity: 0.8;
    fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
    transition: opacity 0.2s ease;
}
.rp-pause-invite-code.is-copied .rp-pause-invite-copy { opacity: 0; }
.rp-pause-invite-qr {
    width: 84px;
    height: 84px;
    flex-shrink: 0;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 12px;
    background: #ffffff;
    image-rendering: pixelated;
}
#online-pause-overlay.tv-pause .rp-pause-invite { display: none; }
#online-pause-overlay .rp-pause-resume,
.pause-overlay--local .rp-pause-resume.rp-pause-resume {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 12px;
    /* The same light pill in every game, not the game's .btn-play colours. */
    background: var(--rp-pause-ink);
    color: #12131a;
    border: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.rp-pause-exit {
    margin-top: 4px;
    padding: 10px 16px;
    background: none;
    border: none;
    color: var(--rp-pause-muted);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.pause-overlay--online [hidden] { display: none; }
/* The host's «Убрать игрока» (shared/client/online-pause.ts): an outlined action on the card, like «Завершить
   игру»; it swaps the card for the list (avatar chips with the room screen's quiet ✕, client/create-room
   .player-remove), which scrolls for any number of players; «Назад» brings the card back. */
.rp-pause-roster-open,
.rp-pause-shot,
.rp-pause-roster-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 52px;
    padding: 0 18px;
    border-radius: 30px;
    border: 2px solid var(--rp-pause-line, rgba(255, 255, 255, 0.26));
    background: transparent;
    color: var(--rp-pause-ink, #ffffff);
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.12s ease;
}
.rp-pause-roster-open:active,
.rp-pause-shot:active,
.rp-pause-roster-back:active { transform: scale(0.97); }
/* «Скриншот в альбом» (album-screenshot.ts): the same outlined action; greyed while it saves. */
.rp-pause-shot:disabled { opacity: 0.7; cursor: default; transform: none; }
.rp-pause-card--roster > :not(.rp-pause-roster) { display: none !important; }
.rp-pause-roster {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    width: 100%;
}
.rp-pause-roster-title { text-align: center; }
.rp-pause-roster-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Ten and more players scroll here; the title and «Назад» stay on screen. */
    max-height: calc(100vh - 240px);
    max-height: calc(100dvh - 240px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* The ✕'s enlarged tap area (inset: -4px) stays inside the list: without this room the list overflowed
       by 4px and PC browsers drew both scrollbars around a single player (owner 2026-11-05). */
    padding: 4px;
    margin: -4px;
    /* When ten and more players do scroll: a thin bar in the pause palette, not the system one. */
    scrollbar-width: thin;
    scrollbar-color: var(--rp-pause-line, rgba(255, 255, 255, 0.26)) transparent;
}
.rp-pause-roster-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.rp-pause-roster-chip { min-width: 0; }
.rp-pause-roster-row--offline .rp-pause-roster-chip { opacity: 0.45; }
/* «Ушёл»: quiet, like the room screen's «Не в сети», between the chip and the ✕. */
.rp-pause-roster-status {
    margin-left: auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--rp-pause-muted);
    white-space: nowrap;
}
.rp-pause-remove {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--rp-pause-muted);
    cursor: pointer;
    transition: transform 0.12s ease;
}
.rp-pause-remove::after { content: ''; position: absolute; inset: -4px; }
.rp-pause-remove:active { color: #f43f5e; background: rgba(244, 63, 94, 0.13); transform: scale(0.92); }
.rp-pause-remove svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

/* The game behind the pause stops on the spot: its animations hold until the game goes on. */
html.rp-game-paused .screen,
html.rp-game-paused .screen *,
html.rp-game-paused .screen *::before,
html.rp-game-paused .screen *::after {
    animation-play-state: paused !important;
}

@keyframes rp-pause-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes rp-pause-wait {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) {
    .pause-overlay--online.active,
    .pause-overlay--away .rp-pause-badge .rp-icon { animation: none; }
}
/* /connection-overlay.css */
/* RoomPlay shared connection overlay («Переподключение…» / «Нет соединения») for online games.
   Markup: <div class="connection-overlay" id="connection-overlay"> with an optional
   .connection-spinner and a .connection-text / [data-connection-text] / #connection-copy element.
   Toggled by shared/client/connection-overlay.ts (adds/removes .visible).
   Link it BEFORE the game's stylesheet and *-theme.css: games tune it through the custom
   properties below or override these rules directly (theme selectors stay more specific). */

.connection-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--rp-connection-z, 100);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--rp-connection-gap, 16px);
    color: var(--rp-connection-color, inherit);
    background: var(--rp-connection-bg, rgba(13, 19, 41, 0.9));
}

.connection-overlay.visible {
    display: flex;
}

.connection-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--rp-connection-track, var(--bg-card, rgba(255, 255, 255, 0.1)));
    border-top-color: var(--rp-connection-arc, var(--accent-primary, #fff));
    border-radius: 50%;
    animation: rp-connection-spin 0.8s linear infinite;
}

@keyframes rp-connection-spin {
    to { transform: rotate(360deg); }
}

.connection-text {
    color: var(--rp-connection-text, var(--text-secondary));
    font-size: 16px;
}
/* /toast.css */
/*
 * RoomPlay toast: a short, non-blocking message near the bottom of the screen (validation hints,
 * server errors, "link copied"). Driven by toast.js (window.RoomPlayToast.show) in plain-JS games
 * and by shared/client/toast.ts (showToast) in bundled games; both toggle .rp-toast.is-visible.
 *
 * Game Themes tune it through custom properties, set once on :root or [data-rp-game]:
 *   --rp-toast-bg, --rp-toast-color, --rp-toast-border, --rp-toast-radius, --rp-toast-shadow,
 *   --rp-toast-padding, --rp-toast-font-size, --rp-toast-font-weight, --rp-toast-bottom,
 *   --rp-toast-line-height, --rp-toast-max-width, --rp-toast-z.
 * Defaults: the theme's card colour (--bg-card) with black or white text picked from its lightness
 * (--text-primary is page text in most themes, so it is not paired with the card); browsers without
 * relative colours get dark ink on white. It sits above the bottom action bar so it does not hide
 * the button that was just pressed.
 */
.rp-toast {
    position: fixed;
    z-index: var(--rp-toast-z, 1100);
    left: 50%;
    /* --rp-toast-lift is set by toast.js/toast.ts to clear the buttons at the bottom of the screen. */
    bottom: var(--rp-toast-bottom, max(calc(112px + env(safe-area-inset-bottom, 0px)), var(--rp-toast-lift, 0px)));
    box-sizing: border-box;
    width: max-content;
    max-width: var(--rp-toast-max-width, min(calc(100vw - 32px), 480px));
    padding: var(--rp-toast-padding, 12px 18px);
    border: var(--rp-toast-border, 1px solid rgba(23, 25, 31, 0.12));
    border-radius: var(--rp-toast-radius, 16px);
    background: var(--rp-toast-bg, #ffffff);
    color: var(--rp-toast-color, #17191f);
    box-shadow: var(--rp-toast-shadow, 0 10px 30px rgba(0, 0, 0, 0.3));
    font-family: inherit;
    font-size: var(--rp-toast-font-size, 15px);
    font-weight: var(--rp-toast-font-weight, 600);
    line-height: var(--rp-toast-line-height, 1.25);
    text-align: center;
    overflow-wrap: anywhere;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 16px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

@supports (color: oklch(from white l c h)) {
    .rp-toast {
        background: var(--rp-toast-bg, var(--bg-card, #ffffff));
        color: var(--rp-toast-color, oklch(from var(--rp-toast-bg, var(--bg-card, #ffffff)) calc(1 - clamp(0, (l - 0.62) * 1000, 1) * 0.79) 0 0));
    }
}

.rp-toast.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
    .rp-toast,
    .rp-toast.is-visible {
        transform: translate(-50%, 0);
        transition: opacity 0.15s linear, visibility 0s linear 0.15s;
    }
    .rp-toast.is-visible { transition: opacity 0.15s linear, visibility 0s; }
}
/* /fonts.css */
/* Self-hosted Manrope and Unbounded (variable, SIL OFL 1.1, license in assets/vendor/fonts-OFL.txt),
   split by script like Google Fonts so a page downloads only the subsets it uses.
   Served at /fonts.css; the .woff2 files live in assets/vendor and resolve from the root. */

/* manrope-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/manrope-cyrillic-ext-wght-normal.woff2?v=5.3.0) format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* manrope-cyrillic-wght-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/manrope-cyrillic-wght-normal.woff2?v=5.3.0) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* manrope-greek-wght-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/manrope-greek-wght-normal.woff2?v=5.3.0) format('woff2');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* manrope-vietnamese-wght-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/manrope-vietnamese-wght-normal.woff2?v=5.3.0) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* manrope-latin-ext-wght-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/manrope-latin-ext-wght-normal.woff2?v=5.3.0) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* manrope-latin-wght-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/manrope-latin-wght-normal.woff2?v=5.3.0) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* unbounded-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(/unbounded-cyrillic-ext-wght-normal.woff2?v=5.3.0) format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* unbounded-cyrillic-wght-normal */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(/unbounded-cyrillic-wght-normal.woff2?v=5.3.0) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* unbounded-vietnamese-wght-normal */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(/unbounded-vietnamese-wght-normal.woff2?v=5.3.0) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* unbounded-latin-ext-wght-normal */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(/unbounded-latin-ext-wght-normal.woff2?v=5.3.0) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* unbounded-latin-wght-normal */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(/unbounded-latin-wght-normal.woff2?v=5.3.0) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* /detective/dt-theme.css */
/* 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; }
}

/* «Сообщить об ошибке» sheet (../content-report.css) in the game palette; thumbs + flag inside the question card. */
:root {
  --rp-report-surface: var(--dt-panel);
  --rp-report-text: #f7eedc;
  --rp-report-muted: #cfc2a8;
  --rp-report-line: var(--dt-line);
  --rp-report-chip: rgb(247 238 220 / 8%);
  --rp-report-accent: var(--dt-amber);
  --rp-report-accent-ink: var(--dt-ink);
}
.dt-question { --rp-report-flag: var(--dt-ink-muted); --rp-report-text: var(--dt-ink); --rp-report-accent: var(--dt-orchid); }
/* /detective/style.css */
/* «Расследование» — online game layout. Loaded after dt-theme.css (Game Theme tokens). */
.dt-online *, .dt-online *::before, .dt-online *::after { box-sizing: border-box; }
html:has(body.dt-online) { background: #17363c; }
body.dt-online { min-height: 100dvh; background-attachment: fixed; overscroll-behavior: none; }
.dt-online .app { max-width: 560px; }
.dt-online { --particle-rgb: 247, 238, 220; }

/* Top bar: back, title, room code. */

.dt-kicker { display: block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dt-amber); }
.dt-section { margin: 20px 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.dt-empty { margin: 0 0 8px; font-size: 15px; color: var(--text-secondary); }

.dt-avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: var(--dt-amber); color: var(--dt-ink); font-size: 14px; font-weight: 800; }
.dt-avatar.has-photo { background: var(--dt-paper); }
.dt-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dt-avatar--sm { width: 24px; height: 24px; font-size: 11px; }

/* Story pictures: the image, or a quiet paper-and-lamp placeholder while the art is missing. */
.dt-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dt-img.missing { visibility: hidden; }
.dt-art { position: relative; overflow: hidden; background: radial-gradient(90% 90% at 30% 20%, #2c5961 0%, #1c4047 60%, #132e33 100%); }
.dt-art::after { content: ""; position: absolute; inset: 0; margin: auto; width: 34%; max-width: 64px; aspect-ratio: 1; opacity: .35; background: var(--dt-paper);
  -webkit-mask: var(--rp-icon-search) center / contain no-repeat; mask: var(--rp-icon-search) center / contain no-repeat; pointer-events: none; }
.dt-art:has(.dt-img:not(.missing))::after { display: none; }

/* ---------- Waiting room ---------- */
/* Shared lobby list and status from game-ui.css (lobby-ui.ts renders the players); only the palette here. */
#lobby-screen { padding-left: 16px; padding-right: 16px; }
#lobby-screen .lobby-content { width: 100%; }
#lobby-screen .player-item { background: var(--dt-paper); color: var(--dt-ink); }
#lobby-screen .player-host { color: var(--dt-ink); }
.dt-free-note { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; color: var(--text-secondary); }
.dt-free-note[hidden] { display: none; }
.dt-free-note .rp-icon { flex-shrink: 0; color: var(--dt-amber); }
.dt-player-name { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Game ---------- */
#game-screen { position: relative; padding: calc(64px + env(safe-area-inset-top, 0px)) 0 0; }
.dt-chapter-bar { padding: 0 16px 8px; }
.dt-chapter-bar strong { display: block; font-size: 22px; line-height: 1.15; color: var(--text-primary); }
.dt-tabs { display: flex; gap: 4px; margin: 0 16px; padding: 4px; border-radius: 999px; background: rgba(247, 238, 220, .1); overflow-x: auto; scrollbar-width: none; }
.dt-tabs::-webkit-scrollbar { display: none; }
.dt-tab { flex: 1 0 auto; min-height: 40px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--text-secondary); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.dt-tab[aria-selected="true"] { background: var(--dt-paper); color: var(--dt-ink); }
.dt-tab .dt-tab-dot { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--dt-amber); vertical-align: 1px; }
.dt-tab:focus-visible { outline: 2px solid var(--dt-amber); outline-offset: 2px; }
.dt-views { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 16px; -webkit-overflow-scrolling: touch; }
.dt-view { display: none; }
.dt-view.active { display: block; animation: dt-fade .2s ease both; }
@keyframes dt-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Clue cards: paper with a picture on the left. */
.dt-clues { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dt-clue { display: flex; gap: 12px; padding: 10px; border-radius: 16px; background: var(--dt-paper); color: var(--dt-ink); }
.dt-clue.fresh { animation: dt-land .35s ease both; }
@keyframes dt-land { from { opacity: 0; transform: translateY(-10px) rotate(-1.5deg); } to { opacity: 1; transform: none; } }
.dt-clue-art { flex-shrink: 0; width: 76px; height: 76px; border-radius: 12px; }
.dt-clue-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dt-clue-title { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.2; }
.dt-clue-text { margin: 0; font-size: 15px; line-height: 1.4; color: #3a2f24; }
.dt-clue-by { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--dt-ink-muted); }
.dt-clue-share { align-self: flex-start; margin-top: 4px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--dt-ink); color: var(--dt-paper); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.dt-clue-share:disabled { opacity: .5; }
.dt-clue.text-only .dt-clue-art { display: none; }

/* Suspects */
.dt-suspects { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dt-suspect { display: flex; gap: 12px; padding: 10px; border-radius: 16px; background: rgba(247, 238, 220, .08); border: 1px solid var(--dt-line); }
.dt-suspect-art { flex-shrink: 0; width: 72px; height: 72px; border-radius: 50%; }
.dt-suspect-body { min-width: 0; }
.dt-suspect-name { margin: 0; font-size: 17px; font-weight: 800; color: var(--text-primary); }
.dt-suspect-role { margin: 2px 0 4px; font-size: 13px; font-weight: 700; color: var(--dt-amber); }
.dt-suspect-bio { margin: 0; font-size: 15px; line-height: 1.4; color: var(--text-secondary); }

/* Case file */
.dt-scene { aspect-ratio: 16 / 9; margin-top: 8px; border-radius: 18px; }
.dt-intro { margin-top: 12px; font-size: 16px; line-height: 1.5; color: var(--text-primary); }
.dt-intro p { margin: 0 0 12px; }

/* Question and answer */
.dt-question { padding: 16px; border-radius: 20px; background: var(--dt-paper); color: var(--dt-ink); }
.dt-question-kicker { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dt-ink-muted); }
.dt-question-kicker.final { color: var(--rp-wrong); }
.dt-question-prompt { margin: 6px 0 12px; font-size: 21px; line-height: 1.2; }
.dt-options { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dt-option { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; border: 2px solid rgba(27, 22, 18, .2); border-radius: 14px; background: #fffaf0; color: var(--dt-ink); font: inherit; font-size: 16px; font-weight: 600; line-height: 1.3; text-align: left; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, transform .15s ease; }
.dt-option:active { transform: scale(.985); }
.dt-option[aria-pressed="true"] { border-color: var(--dt-ink); background: var(--dt-amber); }
.dt-option:disabled { cursor: default; transform: none; }
.dt-option-text { flex: 1; min-width: 0; }
.dt-option-voters { display: flex; flex-shrink: 0; }
.dt-option-voters .dt-avatar { margin-left: -6px; border: 2px solid #fffaf0; }
.dt-option.correct { border-color: var(--rp-correct); background: var(--rp-correct); color: var(--rp-correct-ink); }
.dt-option.wrong { border-color: var(--rp-wrong); background: rgba(163, 39, 31, .1); }
.dt-option.correct .rp-mark { color: var(--rp-correct-ink); }
.dt-option.wrong .rp-mark { color: var(--rp-wrong); }
.dt-votes-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--dt-ink-muted); }
.dt-votes-line .dt-avatar { opacity: .35; }
.dt-votes-line .dt-avatar.voted { opacity: 1; }
.dt-verdict { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 17px; font-weight: 800; }
.dt-verdict.ok { color: var(--rp-correct); }
.dt-verdict.bad { color: var(--rp-wrong); }
.dt-explain { margin: 8px 0 0; font-size: 15px; line-height: 1.45; color: #3a2f24; }
.dt-score-line { margin: 12px 0 0; font-size: 14px; color: var(--text-secondary); text-align: center; }

/* Bottom dock: the host's next step, everyone else's hint. */
.dt-dock { display: flex; flex-direction: column; gap: 8px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--dt-line); background: rgba(16, 40, 45, .92); }
.dt-dock-note { margin: 0; text-align: center; font-size: 14px; color: var(--text-secondary); }
.dt-dock-note:empty { display: none; }

/* ---------- Locked (free part over) ---------- */
#locked-screen, #result-screen { padding-left: 16px; padding-right: 16px; }
.dt-locked { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 12px; text-align: center; }
.dt-lock-badge { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: var(--dt-amber); color: var(--dt-ink); font-size: 34px; animation: dt-lock 2.4s ease-in-out infinite; }
@keyframes dt-lock { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-10deg); } 84% { transform: rotate(8deg); } 92% { transform: rotate(-4deg); } }
.dt-locked-title { margin: 0; font-size: 26px; color: var(--text-primary); }
.dt-locked-text { margin: 0; font-size: 16px; line-height: 1.45; color: var(--text-secondary); max-width: 34ch; }
.dt-locked-score { margin: 0; font-size: 15px; font-weight: 700; color: var(--dt-amber); }
.dt-locked-actions { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 8px; }

/* ---------- Result ---------- */
.dt-result { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; overflow-y: auto; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.dt-stars { display: flex; justify-content: center; gap: 6px; margin-top: 8px; font-size: 32px; color: rgba(247, 238, 220, .25); }
.dt-stars .on { color: var(--dt-amber); }
.dt-result .result-title { margin: 0; font-size: 26px; text-align: center; color: var(--text-primary); }
.dt-result-text { margin: 0; text-align: center; font-size: 16px; color: var(--text-secondary); }
.dt-epilogue { padding: 16px; border-radius: 18px; background: var(--dt-paper); color: var(--dt-ink); font-size: 16px; line-height: 1.5; }
.dt-epilogue p { margin: 0 0 10px; }
.dt-epilogue p:last-child { margin-bottom: 0; }
.dt-board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.dt-board-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 12px 4px 4px; border-radius: 12px; background: rgba(247, 238, 220, .08); color: var(--text-primary); }
.dt-board-value { flex-shrink: 0; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--dt-amber); }
.dt-result-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
  .dt-view.active, .dt-clue.fresh, .dt-lock-badge { animation: none; }
}
/* /game-motion.css */
/*
 * Shared RoomPlay game motion layer (docs/NEW_GAME_GUIDELINES.md, «Анимации»).
 * The same light motion the older games carry in their own theme files (fs-, td-, wm-, hk-…):
 * springy button press/settle, active dot, onboarding character arrive, pack pop/nod, dialogs
 * arriving, plus utility classes for game blocks. Blocks that the game re-renders on every state
 * update get the classes from shared/client/motion-once.ts, so they play once per round, not on
 * every vote. Everything sits inside prefers-reduced-motion: no-preference.
 * Non-game screens (room, join by code, payment) set body[data-rp-press] instead: they get only the
 * button press and the dialog arrival, not the game screen/onboarding/pack rules.
 *
 * Utility classes (added by motionOnce() or written in the markup of a block shown once):
 *   .rp-m-arrive   card/panel slides up into place («paper arrive»)
 *   .rp-m-stagger  its children pop in one after another (answers, options, board rows)
 *   .rp-m-stamp    lands like a stamp (verdicts, room code, «верно/неверно»)
 *   .rp-m-nod      a short nod (winner art, an icon that just changed)
 *   .rp-m-answer   a chosen answer button gives a small bounce
 */
@media (prefers-reduced-motion: no-preference) {
  :root {
    --rp-m-press: 100ms;
    --rp-m-settle: 240ms;
    --rp-m-spring: cubic-bezier(.2, .9, .3, 1.25);
  }

  /* Buttons: press in, spring back. */
  :is(body[data-rp-game], body[data-rp-press]) button:not(:disabled) {
    transition: scale var(--rp-m-settle) var(--rp-m-spring), translate var(--rp-m-settle) var(--rp-m-spring), transform var(--rp-m-settle) var(--rp-m-spring),
      background-color 150ms ease, border-color 150ms ease, color 150ms ease, opacity 150ms ease;
  }
  :is(body[data-rp-game], body[data-rp-press]) button:not(:disabled):active { scale: .96; translate: 0 2px; transition-duration: var(--rp-m-press); }
  :is(body[data-rp-game], body[data-rp-press]) .btn-back:not(:disabled):active { scale: .88; translate: none; }
  body[data-rp-game] .dot { transition: background-color 180ms ease, width 300ms ease, scale 180ms var(--rp-m-spring); }
  body[data-rp-game] .dot.active { scale: 1.12; }

  /* Onboarding: the scene arrives on every slide change. */
  body[data-rp-game] .onboarding-slide.active .slide-icon { animation: rp-m-character-arrive 380ms var(--rp-m-spring) both; }

  /* Packs: the touch classes from packs.js. */
  body[data-rp-game] .pack-card { transition: transform var(--rp-m-settle) var(--rp-m-spring), border-color 150ms ease; }
  body[data-rp-game] .pack-card.packs-touch-press:not(.locked) { transform: scale(.965); transition-duration: var(--rp-m-press); }
  body[data-rp-game] .pack-card.packs-touch-pop:not(.locked) { animation: rp-m-pop 320ms var(--rp-m-spring); }
  body[data-rp-game] .pack-card.packs-touch-pop:not(.locked) .pack-art { animation: rp-m-nod 360ms ease-out; }

  /* Screens and dialogs. */
  body[data-rp-game] .screen.active { animation: rp-m-fade 220ms ease-out both; }
  :is(body[data-rp-game], body[data-rp-press]) .confirm-dialog-overlay.active .confirm-dialog-modal,
  :is(body[data-rp-game], body[data-rp-press]) .settings-popup-overlay.active .settings-popup-modal { animation: rp-m-paper-arrive 280ms var(--rp-m-spring); }

  /* Utility classes. */
  .rp-m-arrive { animation: rp-m-paper-arrive 300ms var(--rp-m-spring) both; }
  .rp-m-stamp { animation: rp-m-stamp-in 360ms var(--rp-m-spring) both; }
  .rp-m-nod { animation: rp-m-nod 420ms ease-out both; }
  .rp-m-answer { animation: rp-m-answer-stamp 260ms var(--rp-m-spring); }
  .rp-m-stagger > * { animation: rp-m-pop-in 280ms var(--rp-m-spring) both; }
  .rp-m-stagger > :nth-child(2) { animation-delay: 50ms; }
  .rp-m-stagger > :nth-child(3) { animation-delay: 100ms; }
  .rp-m-stagger > :nth-child(4) { animation-delay: 150ms; }
  .rp-m-stagger > :nth-child(5) { animation-delay: 200ms; }
  .rp-m-stagger > :nth-child(n+6) { animation-delay: 250ms; }
}

@keyframes rp-m-character-arrive { from { opacity: 0; scale: .82; rotate: -10deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes rp-m-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rp-m-pop { 0% { transform: scale(.965); } 55% { transform: scale(1.018); } 100% { transform: scale(1); } }
@keyframes rp-m-pop-in { from { opacity: 0; scale: .8; translate: 0 6px; } to { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes rp-m-nod { 0%, 100% { rotate: 0deg; } 35% { rotate: -8deg; } 70% { rotate: 5deg; } }
@keyframes rp-m-paper-arrive { from { opacity: 0; translate: 0 14px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes rp-m-stamp-in { from { opacity: 0; scale: 1.45; } to { opacity: 1; scale: 1; } }
@keyframes rp-m-answer-stamp { 0% { scale: .94; } 65% { scale: 1.025; } 100% { scale: 1; } }