/* /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); }
/* /content-report.css */
/*
 * Content report sheet (client/assets/js/content-report.js) and the small flag button
 * games put on their card. Shared component: games only set the --rp-report-* tokens.
 * Defaults sit in :where(:root) (zero specificity), so a game theme's :root tokens win whether
 * its stylesheet loads before or after this one.
 */
:where(:root) {
    --rp-report-surface: #1f2438;
    --rp-report-text: #ffffff;
    --rp-report-muted: #a7aec8;
    --rp-report-line: rgba(255, 255, 255, 0.14);
    --rp-report-chip: rgba(255, 255, 255, 0.08);
    --rp-report-accent: #ff3b6f;
    --rp-report-accent-ink: #ffffff;
    --rp-report-error: var(--rp-wrong, #ff8a9a);
    --rp-report-radius: 24px;
    --rp-report-button-radius: 30px;
    --rp-report-flag: rgba(255, 255, 255, 0.55);
}

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

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

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

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

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

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

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

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

.rp-mark--wrong {
    -webkit-mask-image: var(--rp-icon-cross);
    mask-image: var(--rp-icon-cross);
}
/* /reveal-results.css */
/* ========================================
   Reveal Results — Shared Module Styles
   2-screen round-end reveal with animations

   Colours default to a dark game. A light Game Theme sets the component tokens on its page
   instead of restyling each class: --rr-ink / --rr-muted (text on the page),
   --rr-card-ink / --rr-card-muted (text on cards and rows, default to the page ones),
   --rr-surface / --rr-border (cards and rows), --rr-leading-surface / --rr-leading-border
   (the leader's row), --rr-correct-surface / --rr-wrong-surface / --rr-correct-text (answer
   cards; default to tints of --rp-correct / --rp-wrong).
   ======================================== */

/* Container */
.rr-container {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 5;
}

/* In-flow variant (container with .rr-flow, e.g. Геоугадайка under its results map): the reveal
   follows the content above it and the page's screen scrolls, instead of covering the screen.
   The shown screen stays in flow; the hidden one leaves it so it adds no empty space. */
.rr-flow > .rr-container {
  position: relative;
  inset: auto;
  flex: none;
}

.rr-flow > .rr-container > .rr-screen1,
.rr-flow > .rr-container > .rr-screen2 {
  position: absolute;
  inset: 0 0 auto;
  overflow: visible;
  padding-top: 8px;
}

.rr-flow > .rr-container > .rr-screen1:not(.rr-hidden),
.rr-flow > .rr-container > .rr-screen2.rr-visible {
  position: relative;
}

/* ========== Screen 1: Votes Reveal ========== */

.rr-screen1,
.rr-screen2 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 20px;
  padding-top: calc(56px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.rr-screen1.rr-hidden {
  opacity: 0;
  transform: translateX(-30px);
  pointer-events: none;
}

.rr-screen2 {
  opacity: 0;
  transform: translateX(30px);
  pointer-events: none;
}

.rr-screen2.rr-visible {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* Context area (question / image) */
.rr-context {
  text-align: center;
  margin-bottom: 20px;
  opacity: 0;
  animation: rrFadeIn 0.4s ease forwards;
}

.rr-context-text {
  font-size: 18px;
  font-weight: 600;
  color: var(--rr-ink, #fff);
  line-height: 1.4;
}

.rr-context-subtext {
  font-size: 14px;
  color: var(--rr-muted, rgba(255, 255, 255, 0.6));
  margin-top: 8px;
}

.rr-context-image {
  max-width: 200px;
  max-height: 150px;
  border-radius: 12px;
  margin: 0 auto 8px;
  display: block;
  object-fit: cover;
}

.rr-context-fourphoto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  width: 200px;
  margin: 0 auto 8px;
  border-radius: 10px;
  overflow: hidden;
}

.rr-context-fourphoto img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  display: block;
  background: var(--bg-card, #252b4a);
}

.rr-context-drawing {
  max-width: 240px;
  max-height: 200px;
  border-radius: 12px;
  margin: 0 auto 8px;
  display: block;
  background: #fff;
  object-fit: contain;
}

/* Options list */
.rr-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

/* Single option card */
.rr-option {
  background: var(--rr-surface, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--rr-border, rgba(255, 255, 255, 0.1));
  border-radius: 14px;
  padding: 14px 16px;
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.rr-option.rr-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Correct option styling: tone comes from the game's --rp-correct; the ✓ mark carries the meaning without colour. */
.rr-option.rr-type-correct {
  background: var(--rr-correct-surface, color-mix(in srgb, var(--rp-correct, #4ade80) 12%, transparent));
  border-color: color-mix(in srgb, var(--rp-correct, #4ade80) 45%, transparent);
}

.rr-option.rr-type-correct .rr-option-text {
  color: var(--rr-correct-text, var(--rp-correct, #4ade80));
}

/* Wrong option styling */
.rr-option.rr-type-wrong {
  background: var(--rr-wrong-surface, color-mix(in srgb, var(--rp-wrong, #f87171) 8%, transparent));
  border-color: color-mix(in srgb, var(--rp-wrong, #f87171) 22%, transparent);
}

/* Answer marks: shared upright ✓ / ✕ from answer-marks.css (shape, not only colour). */
.rr-option.rr-type-correct .rr-option-text::before,
.rr-option.rr-type-wrong .rr-option-text::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  vertical-align: -5px;
  -webkit-mask: var(--rp-icon-check-badge) center / contain no-repeat;
  mask: var(--rp-icon-check-badge) center / contain no-repeat;
}

.rr-option.rr-type-correct .rr-option-text::before {
  background-color: var(--rr-correct-text, var(--rp-correct, #4ade80));
}

.rr-option.rr-type-wrong .rr-option-text::before {
  -webkit-mask-image: var(--rp-icon-cross-badge);
  mask-image: var(--rp-icon-cross-badge);
  background-color: var(--rp-wrong, #f87171);
}

.rr-option-text:empty::before {
  display: none !important;
}

/* Neutral option (Quiplash loser, etc.) */
.rr-option.rr-type-neutral {
  background: var(--rr-surface, rgba(255, 255, 255, 0.04));
  border-color: var(--rr-border, rgba(255, 255, 255, 0.08));
}

/* Option header */
.rr-option-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.rr-option-text {
  font-size: 17px;
  font-weight: 600;
  color: var(--rr-card-ink, var(--rr-ink, #fff));
  flex: 1;
  word-break: break-word;
}

.rr-option-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

.rr-option.rr-type-correct .rr-option-badge {
  background: color-mix(in srgb, var(--rp-correct, #4ade80) 20%, transparent);
  color: var(--rp-correct, #4ade80);
}

.rr-badge-quiplash {
  background: linear-gradient(135deg, #f59e0b, #ef4444) !important;
  color: #fff !important;
  font-size: 12px !important;
  padding: 3px 10px !important;
  animation: rrPulse 0.6s ease;
}

/* Vote count (Quiplash) */
.rr-vote-count {
  font-size: 14px;
  font-weight: 700;
  color: var(--rr-muted, rgba(255, 255, 255, 0.7));
  margin-left: auto;
  flex-shrink: 0;
}

/* Option image (Imaginarium cards) */
.rr-option-image-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 4px 0;
}

.rr-option-image-card {
  width: calc(33.333% - 8px);
  min-width: 90px;
  max-width: 120px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--rr-surface, rgba(255, 255, 255, 0.06));
  border: 2px solid var(--rr-border, rgba(255, 255, 255, 0.1));
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.rr-option-image-card.rr-visible {
  opacity: 1;
  transform: scale(1);
}

.rr-option-image-card.rr-type-correct {
  position: relative;
  border-color: color-mix(in srgb, var(--rp-correct, #4ade80) 70%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--rp-correct, #4ade80) 30%, transparent);
}

.rr-option-image-card.rr-type-correct::before,
.rr-option-image-card.rr-type-correct::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  width: 24px;
  height: 24px;
}

.rr-option-image-card.rr-type-correct::before {
  border-radius: 50%;
  background: var(--rp-correct, #4ade80);
}

.rr-option-image-card.rr-type-correct::after {
  z-index: 2;
  background-color: var(--rp-correct-ink, #17191f);
  -webkit-mask: var(--rp-icon-check) center / 15px no-repeat;
  mask: var(--rp-icon-check) center / 15px no-repeat;
}

.rr-option-image-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

/* Three-panel comic option (Joking Hazard). It stays readable on phones
   instead of shrinking all panels into a single narrow thumbnail. */
.rr-option-image-card.rr-option-comic {
  width: 100%;
  min-width: 0;
  max-width: 620px;
}

.rr-option-comic-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.rr-option-comic-strip img {
  aspect-ratio: 295 / 420;
  border-radius: 8px;
}

.rr-option-image-info {
  padding: 6px 8px;
}

.rr-option-image-owner {
  font-size: 11px;
  font-weight: 600;
  color: var(--rr-card-ink, var(--rr-ink, #fff));
}

.rr-option-image-voters {
  font-size: 10px;
  color: var(--rr-muted, rgba(255, 255, 255, 0.5));
  margin-top: 2px;
}

/* Author label */
.rr-author {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--rr-muted, rgba(255, 255, 255, 0.5));
  margin-top: 8px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

.rr-author.rr-visible {
  opacity: 1;
  transform: translateY(0);
}

.rr-author-label {
  color: var(--rr-muted, rgba(255, 255, 255, 0.4));
}

.rr-author-name {
  color: #ff9f43;
  font-weight: 600;
}

.rr-author-points {
  color: var(--rp-correct, #4ade80);
  font-weight: 600;
  margin-left: 4px;
}

/* Voters list */
.rr-voters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  align-items: center;
}

.rr-voters-label {
  font-size: 13px;
  color: var(--rr-muted, rgba(255, 255, 255, 0.4));
  font-weight: 500;
}

.rr-voter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 10px;
  background: var(--rr-surface, rgba(255, 255, 255, 0.08));
  color: var(--rr-muted, rgba(255, 255, 255, 0.8));
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.rr-voter.rr-visible {
  opacity: 1;
  transform: scale(1);
}

/* Player avatar (reveal-results.js _playerAvatar): photo, or the name's first letter on an accent tile. */
.rr-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-purple, #8b5cf6) 45%, transparent);
  color: #fff;
  font-weight: 700;
  line-height: 1;
}

.rr-avatar.has-photo {
  background: none;
}

.rr-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.5);
}

.rr-voter-avatar,
.rr-author-avatar {
  width: 18px;
  height: 18px;
  font-size: 10px;
}

.rr-owner-avatar {
  width: 14px;
  height: 14px;
  font-size: 8px;
  margin-right: 4px;
  vertical-align: middle;
}

.rr-option-image-voter {
  display: inline-flex;
  align-items: center;
}

.rr-voter-points {
  color: var(--rp-correct, #4ade80);
  font-weight: 700;
  font-size: 12px;
}

/* ========== Screen 2: Leaderboard ========== */

.rr-leaderboard-title {
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  color: var(--rr-muted, rgba(255, 255, 255, 0.6));
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
  opacity: 0;
  animation: rrFadeIn 0.3s ease forwards;
}

.rr-leaderboard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.rr-lb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--rr-surface, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--rr-border, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease, border-color 0.3s ease;
  position: relative;
}

.rr-lb-row.rr-leading {
  background: var(--rr-leading-surface, rgba(255, 255, 255, 0.1));
  border-color: var(--rr-leading-border, rgba(255, 255, 255, 0.15));
}

.rr-lb-pos {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--rr-muted, rgba(255, 255, 255, 0.5));
  background: var(--rr-surface, rgba(255, 255, 255, 0.08));
  flex-shrink: 0;
}

.rr-lb-pos.rr-gold { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; }
.rr-lb-pos.rr-silver { background: linear-gradient(135deg, #9ca3af, #6b7280); color: #fff; }
.rr-lb-pos.rr-bronze { background: linear-gradient(135deg, #d97706, #92400e); color: #fff; }

.rr-lb-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: contain;
  flex-shrink: 0;
  transform: scale(1.5);
}

.rr-lb-name {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  color: var(--rr-card-ink, var(--rr-ink, #fff));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rr-lb-score-area {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.rr-lb-score {
  font-size: 17px;
  font-weight: 700;
  color: var(--rr-card-ink, var(--rr-ink, #fff));
  min-width: 40px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.rr-lb-delta {
  font-size: 13px;
  font-weight: 700;
  color: var(--rr-correct-text, var(--rp-correct, #4ade80));
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  white-space: nowrap;
}

.rr-lb-delta.rr-visible {
  opacity: 1;
  transform: translateY(0);
}

.rr-lb-delta.rr-zero {
  color: var(--rr-card-muted, var(--rr-muted, rgba(255, 255, 255, 0.3)));
}

/* Row swap animation */
.rr-lb-row.rr-swapping {
  z-index: 2;
}

/* ========== Keyframes ========== */

@keyframes rrFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes rrPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@keyframes rrFloatUp {
  0% { opacity: 0; transform: translateY(8px); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-20px); }
}

/* ========== Dashboard wide layout ========== */

.rr-container.rr-dashboard .rr-screen1,
.rr-container.rr-dashboard .rr-screen2 {
  padding: 32px 40px;
}

.rr-container.rr-dashboard .rr-context-text {
  font-size: 24px;
}

.rr-container.rr-dashboard .rr-option {
  padding: 18px 22px;
}

.rr-container.rr-dashboard .rr-option-text {
  font-size: 20px;
}

.rr-container.rr-dashboard .rr-voter {
  font-size: 15px;
  padding: 5px 12px;
}

.rr-container.rr-dashboard .rr-author {
  font-size: 15px;
}

.rr-container.rr-dashboard .rr-lb-row {
  padding: 16px 22px;
}

.rr-container.rr-dashboard .rr-lb-name {
  font-size: 19px;
}

.rr-container.rr-dashboard .rr-lb-score {
  font-size: 20px;
}

.rr-container.rr-dashboard .rr-lb-delta {
  font-size: 15px;
}

.rr-container.rr-dashboard .rr-leaderboard-title {
  font-size: 20px;
}

.rr-container.rr-dashboard .rr-option-image-card {
  max-width: 160px;
}

.rr-container.rr-dashboard .rr-option-image-card.rr-option-comic {
  max-width: 760px;
}

@media (max-width: 480px) {
  .rr-option-comic-strip {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(72vw, 260px);
    justify-content: start;
    scroll-snap-type: x mandatory;
  }

  .rr-option-comic-strip img {
    scroll-snap-align: center;
  }
}

/* Question blank highlight (for Fibbage) */
.rr-question-blank {
  color: var(--accent-pink, #ff3b6f);
  font-weight: 700;
  border-bottom: 2px solid var(--accent-pink, #ff3b6f);
  padding: 0 2px;
}

/* ========== One-phone turn results (quick mode) ========== */

/* Inline host: the reveal fills the space between the screen header and the game's own
   «Продолжить» button instead of covering the whole screen. */
.rr-host {
  position: relative;
  flex: 1 1 auto;
  min-height: 240px;
  width: 100%;
  /* One-phone games take the page's own text and card tokens (game-ui.css + the Game Theme). */
  --rr-ink: var(--text-primary, #fff);
  --rr-muted: var(--text-secondary, rgba(255, 255, 255, 0.6));
  --rr-surface: var(--bg-card, rgba(255, 255, 255, 0.06));
  --rr-border: color-mix(in srgb, var(--text-primary, #fff) 14%, transparent);
  --rr-leading-surface: var(--bg-card, rgba(255, 255, 255, 0.1));
  --rr-leading-border: color-mix(in srgb, var(--text-primary, #fff) 55%, transparent);
}

.rr-host .rr-screen1,
.rr-host .rr-screen2 {
  padding: 4px 2px 12px;
}

.rr-container.rr-quick .rr-screen1 {
  cursor: pointer;
}

.rr-container.rr-quick .rr-options {
  gap: 8px;
  flex: 0 0 auto;
}

.rr-container.rr-quick .rr-option {
  padding: 11px 14px;
  transition-duration: 0.45s;
}

.rr-container.rr-quick .rr-option-text {
  font-size: 16px;
}

/* Skipped answer (word games): shared skip icon instead of ✓ / ✕. */
.rr-option.rr-type-skipped .rr-option-text {
  color: var(--rr-card-muted, var(--rr-muted, rgba(255, 255, 255, 0.65)));
}

.rr-option.rr-type-skipped .rr-option-text::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 0 10px 0 2px;
  vertical-align: -3px;
  background-color: currentColor;
  -webkit-mask: var(--rp-icon-skip) center / contain no-repeat;
  mask: var(--rp-icon-skip) center / contain no-repeat;
}

/* Leaderboard name with a team colour dot or a player chip (PlayerAvatar.html). */
.rr-lb-name--rich {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.rr-lb-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.rr-lb-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Flow host: the leaderboard sits in a scrolling page and takes the height of its rows. */
.rr-host.rr-host--flow {
  flex: 0 0 auto;
  min-height: 0;
}

.rr-host--flow .rr-container,
.rr-host--flow .rr-screen2 {
  position: relative;
  inset: auto;
  overflow: visible;
  padding: 0;
}
/* /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;
    }
}