/* /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); } }
/* 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;
}
/* /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-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-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-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-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--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--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--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; }

/* 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) */
html.i18n-pending [data-i18n] {
    visibility: hidden;
}

/* 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;
}