/* /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); }
/* /premium-cta.css */
/* Premium upsell button (owner 2026-10-20): a pearlescent foil that slowly wobbles in 3D, like the
 * cards in Balatro, so it never blends into a game's own palette. Shared: any game puts
 * class="rp-premium-cta" on its upsell button and links /premium-cta.css. The glare moves with the tilt;
 * with prefers-reduced-motion the button stays flat and still. No emoji: the optional crown is
 * --rp-icon-crown from ui-icons.css (class rp-premium-cta--crown). */

.rp-premium-cta {
    --rp-pearl-ink: #2b1236;
    position: relative;
    isolation: isolate;
    display: block;
    width: 100%;
    min-height: 58px;
    padding: 12px 18px;
    border: 0;
    border-radius: 20px;
    overflow: hidden;
    color: var(--rp-pearl-ink);
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
    cursor: pointer;
    background:
        linear-gradient(115deg, #fde7f1 0%, #e4d4ff 18%, #cdf3ee 34%, #fff3c9 50%, #ffd6e6 66%, #d9d1ff 82%, #fde7f1 100%);
    background-size: 280% 100%;
    background-position: 0% 50%;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        inset 0 -3px 0 rgba(120, 70, 140, .22),
        0 0 0 1px rgba(255, 255, 255, .55),
        0 12px 28px rgba(190, 140, 255, .35),
        0 4px 12px rgba(0, 0, 0, .25);
    transform-style: preserve-3d;
    -webkit-tap-highlight-color: transparent;
}

/* Fine foil grain and the moving glare. */
.rp-premium-cta::before,
.rp-premium-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}
.rp-premium-cta::before {
    z-index: -1;
    background:
        repeating-linear-gradient(115deg, rgba(255, 255, 255, 0) 0 6px, rgba(255, 255, 255, .22) 6px 7px),
        radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, .55), transparent 55%);
    mix-blend-mode: soft-light;
}
.rp-premium-cta::after {
    z-index: 1;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .75) 46%, rgba(255, 255, 255, .15) 54%, transparent 70%);
    background-size: 250% 100%;
    background-position: 100% 0;
    mix-blend-mode: overlay;
}

.rp-premium-cta--crown .rp-premium-cta-label::before {
    content: "";
    display: inline-block;
    width: 19px;
    height: 19px;
    margin-right: 8px;
    vertical-align: -3px;
    background: linear-gradient(135deg, #b0487a, #6d3fbf);
    -webkit-mask: var(--rp-icon-crown) center / contain no-repeat;
    mask: var(--rp-icon-crown) center / contain no-repeat;
}
.rp-premium-cta-label { position: relative; z-index: 2; }

.rp-premium-cta:active { filter: brightness(.96); }
.rp-premium-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
    .rp-premium-cta {
        animation: rp-pearl-tilt 4.8s ease-in-out infinite, rp-pearl-shift 4.8s ease-in-out infinite;
    }
    .rp-premium-cta::after { animation: rp-pearl-glare 4.8s ease-in-out infinite; }
    .rp-premium-cta:active { animation-play-state: paused; }
}

/* A slow circle: the tilt goes round the four edges, the colour band and the glare follow it. */
@keyframes rp-pearl-tilt {
    0%, 100% { transform: perspective(520px) rotateX(5deg) rotateY(0deg); }
    25% { transform: perspective(520px) rotateX(0deg) rotateY(-9deg); }
    50% { transform: perspective(520px) rotateX(-5deg) rotateY(0deg); }
    75% { transform: perspective(520px) rotateX(0deg) rotateY(9deg); }
}
@keyframes rp-pearl-shift {
    0%, 100% { background-position: 50% 50%; }
    25% { background-position: 100% 50%; }
    50% { background-position: 50% 50%; }
    75% { background-position: 0% 50%; }
}
@keyframes rp-pearl-glare {
    0%, 100% { background-position: 55% 0; opacity: .7; }
    25% { background-position: 0% 0; opacity: 1; }
    50% { background-position: 45% 0; opacity: .7; }
    75% { background-position: 100% 0; opacity: 1; }
}

/* Premium sample card (premium-teasers.js): the chip «Из премиум-набора «…»» on the card and a
 * pink glow around it. The same in every game; the chip sits on any card colour. */
.rp-premium-teaser {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    margin: 6px auto;
    padding: 6px 12px 6px 9px;
    border-radius: 999px;
    background: rgba(23, 25, 31, .82);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.25;
    text-align: left;
    text-shadow: none;
}
.rp-premium-teaser::before {
    content: "";
    flex: none;
    width: 15px;
    height: 15px;
    background: #ff8fa6;
    -webkit-mask: var(--rp-icon-crown) center / contain no-repeat;
    mask: var(--rp-icon-crown) center / contain no-repeat;
}
.rp-premium-teaser[hidden], .rp-premium-teaser-cta[hidden] { display: none; }
.rp-premium-teaser-card {
    box-shadow: 0 0 0 2px rgba(255, 122, 147, .55), 0 0 34px rgba(255, 35, 80, .38), 0 18px 40px rgba(0, 0, 0, .35) !important;
}
.rp-premium-teaser-cta { max-width: 420px; margin: 14px auto 0; }
/* A sample adds the chip and the button: on a short phone (or a low PC window) the game screen can get taller than the
 * window, and game screens clip (overflow: hidden), so the last answers were cut off with no way to reach them
 * (owner 2026-10-29, «Как хорошо ты меня знаешь?»). While a sample is on, its screen scrolls instead; a short window
 * also takes a little air out of the button. No overscroll-behavior here: in games whose screen grows with its content
 * and the page scrolls («Кто из нас», «Что бы ты выбрал?») `contain` on the screen stopped a finger's scroll from
 * reaching the page, so nothing scrolled at all (owner 2026-10-30, «контент в телефоне не влазит но и не скроллится»). */
.screen:has(.rp-premium-teaser-cta:not([hidden])) { overflow-y: auto; }
@media (max-height: 740px) {
    .rp-premium-teaser-cta:not(.rp-premium-cta--compact) { min-height: 48px; margin-top: 8px; padding-top: 10px; padding-bottom: 10px; }
}

/* Compact size for a tight game screen (a card, answer buttons and a player row on one phone screen):
 * the same pearl button one line high and the chip in smaller type, so the sample does not squeeze the card.
 * Used by the online «Я никогда не» card screen. */
.rp-premium-cta--compact {
    min-height: 44px;
    padding: 8px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.2;
}
.rp-premium-cta--compact.rp-premium-cta--crown .rp-premium-cta-label::before {
    width: 16px;
    height: 16px;
    margin-right: 6px;
}
.rp-premium-teaser--compact {
    gap: 5px;
    margin: 4px auto;
    padding: 4px 10px 4px 8px;
    font-size: 12px;
}
.rp-premium-teaser--compact::before { width: 13px; height: 13px; }
/* /video-task.css */
/* «Сними ролик» (video-task.js, owner 2026-10-22): the quiet button «Получи до 7 500 ₽ за это видео. Как?»
 * inside the task card, right under the task text, and the sheet with two ways to be paid.
 * Calm on purpose (owner: it must not look like an ad banner): no shine, no pulse, it takes the
 * card's own ink (currentColor) on a light tint, «Как?» underlined like a link.
 * No emoji: icons from ui-icons.css. With prefers-reduced-motion nothing moves. */

.rp-video-task-cta[hidden] { display: none; }

.rp-video-task-cta {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    margin: 16px 0 0;
    padding: 10px 14px;
    border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, currentColor 10%, transparent);
    color: inherit;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: none;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease;
    -webkit-tap-highlight-color: transparent;
}
.rp-video-task-cta .rp-icon { flex: none; width: 20px; height: 20px; }
.rp-video-task-cta-how { font-weight: 800; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.rp-video-task-cta:hover { background: color-mix(in srgb, currentColor 16%, transparent); }
.rp-video-task-cta:active { transform: scale(.98); }
.rp-video-task-cta:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.rp-video-task-card {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .45), 0 18px 40px rgba(0, 0, 0, .35) !important;
}
/* The video task is not a card of the deck: no thumbs and no report flag on it. */
.rp-video-task-card .rp-card-vote,
.rp-video-task-card .rp-report-flag { visibility: hidden; }

/* The sheet: RoomPlay core surfaces, like «Час Premium за репост» (share-pass.js). */
.rp-video-task-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(10, 15, 31, .72);
    opacity: 0;
    transition: opacity .2s ease;
}
.rp-video-task-overlay.visible { opacity: 1; }
.rp-video-task-sheet {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 480px;
    max-height: 100%;
    overflow-y: auto;
    padding: 24px 16px calc(20px + env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0;
    background: #1a2140;
    color: #fff;
    font-family: inherit;
    text-align: center;
    transform: translateY(24px);
    transition: transform .2s ease;
}
.rp-video-task-overlay.visible .rp-video-task-sheet { transform: none; }
.rp-video-task-sheet:focus { outline: none; }
.rp-video-task-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 20px;
    opacity: .75;
    cursor: pointer;
}
.rp-video-task-title { margin: 8px 40px 8px; font-size: 22px; font-weight: 800; line-height: 1.25; }
.rp-video-task-lead { margin: 0 0 16px; font-size: 16px; line-height: 1.45; color: #c9cfe6; }
.rp-video-task-option {
    margin: 0 0 12px;
    padding: 18px 16px 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    text-align: left;
}
.rp-video-task-option-icon { display: block; width: 28px; height: 28px; margin: 0 0 8px; }
.rp-video-task-option--premium .rp-video-task-option-icon { color: #ffd166; }
.rp-video-task-option--money .rp-video-task-option-icon { color: #6ee7b7; }
.rp-video-task-option-title { margin: 0 0 6px; font-size: 18px; font-weight: 800; line-height: 1.25; }
.rp-video-task-option-text { margin: 0 0 14px; font-size: 15px; line-height: 1.45; color: #c9cfe6; }
.rp-video-task-option-cta {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 10px 16px;
    border: 0;
    border-radius: 30px;
    background: var(--settings-accent, #7c3aed);
    color: var(--rp-video-cta-ink, #fff);
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}
.rp-video-task-option--money .rp-video-task-option-cta {
    background: transparent;
    color: #fff;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35);
}
.rp-video-task-close:focus-visible, .rp-video-task-option-cta:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .rp-video-task-cta { transition: none; }
    .rp-video-task-overlay, .rp-video-task-sheet { transition: none; }
}
/* /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;
    }
}
/* /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;
}