/* /packs.css */
/* ==================== */
/* Shared Pack Styles   */
/* ==================== */

.packs-container {
    flex: 1;
    overflow-y: auto;
    padding-top: 4px;
    padding-bottom: 20px;
}

/* Layout: List (row cards, e.g. ALIAS) */
.packs-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Layout: Grid (2 columns, e.g. yesno) */
.packs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

/* Layout: Illustrated square gallery */
/* `.screen.` outranks the `.rp-local/.rp-direct .screen { height: auto }` reset, so the
   gallery scrolls inside a screen-tall layout and Play stays pinned at the bottom. */
.screen.packs-illustrated-screen {
    height: 100vh;
    height: var(--app-height, 100dvh);
    min-height: 0;
    overflow: hidden;
}

.packs-illustrated-content {
    min-height: 0;
    overflow: hidden;
}

.packs-illustrated-scroll {
    width: 100%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* Room for the selected card's glow and tap pop, so its top edge is never cut. */
    padding: 8px 4px 18px;
    /* Soft edge above the action bar instead of a hard cut, hinting there is more below. */
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 16px), transparent);
    mask-image: linear-gradient(180deg, #000 calc(100% - 16px), transparent);
}

.packs-illustrated-actions {
    position: relative;
    z-index: 5;
    flex: 0 0 auto;
    width: 100%;
    margin-top: 0;
    /* No plate behind the bar (owner 2026-10-31: «вокруг круглой кнопки квадратный background»): the round
       «Правила», «Дополнительные настройки» and «Играть» sit straight on the page background. The gallery
       scrolls in its own box above (.packs-illustrated-scroll, soft masked edge), so nothing runs under them. */
    background: none;
}

/* One header geometry on every pack screen (the NHIE layout): back button and title share
   the first 44px row at the same height, subtitle right under it. Themes keep their own
   fonts and colours; only position and spacing are pinned, hence the !important against
   per-game margins and absolute offsets. */
.screen.packs-screen-shell {
    position: relative;
    padding-top: calc(20px + env(safe-area-inset-top, 0px)) !important;
}

.screen.packs-screen-shell > .screen-content {
    padding-top: 0 !important;
}

.screen.packs-screen-shell > .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;
    margin: 0 !important;
    transform: none !important;
}

.screen.packs-screen-shell .title {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    margin: 0 0 2px !important;
    padding: 0 48px !important;
    line-height: 1.1;
    text-align: center;
}

.screen.packs-screen-shell .title + .subtitle {
    margin: 0 0 16px !important;
    text-align: center;
}

.screen.packs-screen-shell .packs-container {
    margin-top: 0 !important;
}

.screen.packs-screen-shell .subtitle + .subtitle {
    margin-top: -10px !important;
}

/* Compact action bar on every pack screen (any layout): on short phones the stacked
   summary card + settings + Play took ~240px and left the gallery a ~300px window. The
   settings button shares one row with Play, so the gallery keeps most of the screen.
   `.screen .bottom-section` lifts specificity above per-game theme rules. */
.screen .bottom-section.packs-compact-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px 10px;
    padding-top: 10px;
}

.screen .bottom-section.packs-compact-actions > * {
    flex: 1 1 100%;
    min-width: 0;
    margin: 0;
}

.screen .bottom-section.packs-compact-actions > .packs-summary {
    order: -2;
    padding: 6px 12px;
    line-height: 20px;
}

/* The count lives inside Play (packs.js `_mirrorCountIntoPlay`); the summary card stays
   in the DOM as the games' data source. */
.screen .bottom-section.packs-count-in-play > .packs-summary {
    display: none;
}

.screen .bottom-section.packs-count-in-play > .btn-play {
    flex-wrap: wrap;
    align-content: center;
    row-gap: 1px;
    line-height: 1.15;
}

.packs-play-count {
    display: block;
    flex-basis: 100%;
    font-size: 12px;
    font-weight: 600;
    opacity: 0.82;
}

.packs-play-count:empty {
    display: none;
}

.screen .bottom-section.packs-compact-actions > .form-message {
    order: -1;
}

.screen .bottom-section.packs-compact-actions > :is(.btn-additional-settings, .btn-settings-link) {
    flex: 1 1 0;
    min-height: 54px;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.15;
}

.screen .bottom-section.packs-compact-actions > .btn-play {
    flex: 1.35 1 0;
    min-height: 54px;
    padding: 8px 16px;
}

@media (max-width: 380px) {
    .screen .bottom-section.packs-compact-actions > :is(.btn-additional-settings, .btn-settings-link) {
        padding: 6px 8px;
        font-size: 13px;
    }

    .screen .bottom-section.packs-compact-actions > .btn-play {
        flex-grow: 1;
    }
}

.packs-illustrated-grid {
    --packs-accent: var(--accent-pink);
    --packs-feedback-rgb: 255, 59, 111;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 12px;
    width: 100%;
}

.packs-illustrated-grid .pack-card {
    isolation: isolate;
    aspect-ratio: 1;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 2px solid rgba(148, 163, 184, 0.72);
    border-radius: 18px;
    background: var(--bg-card);
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.28);
    transform: translateZ(0);
}

.packs-illustrated-grid .pack-card.premium,
.packs-illustrated-grid .pack-card.locked {
    border-color: rgba(148, 163, 184, 0.72);
    background: var(--bg-card);
}

.packs-illustrated-grid .pack-card.selected,
.packs-illustrated-grid .pack-card.premium.selected {
    border-color: var(--packs-accent);
    background: var(--bg-card);
    box-shadow: 0 0 0 2px rgba(var(--packs-feedback-rgb), 0.28),
                0 14px 30px rgba(var(--packs-feedback-rgb), 0.24);
}

.packs-illustrated-grid .pack-card.locked {
    opacity: 1;
}

.packs-illustrated-grid .pack-art {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
    transition: transform 0.35s cubic-bezier(0.18, 0.82, 0.22, 1), filter 0.25s ease;
}

.packs-illustrated-grid .pack-card.locked .pack-art {
    filter: brightness(0.66) saturate(0.78);
}

.packs-illustrated-grid .pack-art-shade {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,
        rgba(7, 11, 25, 0.02) 28%,
        rgba(7, 11, 25, 0.38) 58%,
        rgba(7, 11, 25, 0.94) 100%);
}

.packs-illustrated-grid .pack-copy {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 11px;
    text-align: left;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

.packs-illustrated-grid .pack-name {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: clamp(13px, 3.8vw, 16px);
    font-weight: 800;
    line-height: 1.08;
    color: #fff;
}

.packs-illustrated-grid .pack-count {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.1;
}

.packs-illustrated-grid .premium-badge {
    position: absolute;
    top: 9px;
    right: 9px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: rgba(10, 15, 31, 0.74);
    font-size: 14px;
    line-height: 1;
    backdrop-filter: blur(6px);
}

.packs-illustrated-grid .pack-lock-image {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 68px;
    height: 68px;
    object-fit: contain;
    transform: translate(-50%, -58%);
    filter: drop-shadow(0 8px 13px rgba(0, 0, 0, 0.55));
}

@media (hover: hover) {
    .packs-illustrated-grid .pack-card:not(.locked):hover {
        border-color: var(--packs-accent);
        transform: translateY(-3px);
        box-shadow: 0 0 0 2px rgba(var(--packs-feedback-rgb), 0.2),
                    0 16px 34px rgba(var(--packs-feedback-rgb), 0.22);
    }

    .packs-illustrated-grid .pack-card:not(.locked):hover .pack-art {
        transform: scale(1.045);
    }
}

/* ---- Pack Card (common) ---- */
.pack-card {
    background: var(--bg-card);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    position: relative;
    display: flex;
    align-items: center;
}

@media (hover: hover) {
    .pack-card:hover {
        transform: translateY(-2px);
        border-color: var(--accent-pink);
    }
}

.pack-card:active {
    transform: scale(0.98);
}

/* List layout card */
.packs-list .pack-card {
    flex-direction: row;
    gap: 16px;
    padding: 16px 20px;
    width: 100%;
}

/* Grid layout card */
.packs-grid .pack-card {
    flex-direction: column;
    gap: 8px;
    padding: 20px 16px;
    text-align: center;
}

.packs-grid .pack-card:active {
    transform: scale(0.97);
}

/* ---- State Styles ---- */
.pack-card.selected {
    border-color: var(--accent-pink);
    background: linear-gradient(135deg, rgba(255, 59, 111, 0.15) 0%, rgba(74, 108, 247, 0.15) 100%);
}

.pack-card.premium {
    border-color: rgba(255, 215, 0, 0.3);
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(255, 215, 0, 0.08) 100%);
}

.pack-card.premium.selected {
    border-color: #ffd700;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 59, 111, 0.1) 100%);
}

.pack-card.locked {
    opacity: 0.7;
    cursor: not-allowed;
}

@media (hover: hover) {
    .pack-card.locked:hover {
        transform: none;
        border-color: rgba(255, 215, 0, 0.3);
    }
}

.pack-card.locked:active {
    transform: none;
}

/* Opt-in press feedback plus a CSS fallback for selection animation. */
.pack-card.packs-touch-press:not(.locked) {
    transform: scale(0.965);
    box-shadow: 0 0 0 3px rgba(255, 92, 138, 0.26), 0 8px 22px rgba(233, 30, 99, 0.24);
}

.pack-card.packs-touch-press:not(.locked) .pack-art {
    transform: scale(1.09);
    transition-duration: 0.12s;
}

.pack-card.packs-touch-pop:not(.locked) {
    animation: packsTouchPop 0.68s cubic-bezier(0.18, 0.82, 0.22, 1);
}

.pack-card.packs-touch-pop:not(.locked) .pack-art {
    animation: packsArtTouchPop 0.68s cubic-bezier(0.18, 0.82, 0.22, 1);
}

@keyframes packsTouchPop {
    0% { transform: scale(calc(1 - .06 * var(--rp-motion-pack-intensity, 1))); }
    55% { transform: scale(calc(1 + .035 * var(--rp-motion-pack-intensity, 1))); }
    100% { transform: scale(1); }
}

@keyframes packsArtTouchPop {
    0% { transform: scale(calc(1 + .12 * var(--rp-motion-pack-intensity, 1))); }
    100% { transform: scale(calc(1 + .01 * var(--rp-motion-pack-intensity, 1))); }
}

@media (prefers-reduced-motion: reduce) {
    .pack-card.packs-touch-press,
    .pack-card.packs-touch-pop,
    .pack-card.packs-touch-pop .pack-art {
        animation: none;
        transform: none;
    }

    /* Native WebViews can report reduced motion by default. The opt-in illustrated
       gallery keeps its short selection feedback so taps never feel unresponsive. */
    .packs-illustrated-grid .pack-card.packs-touch-press:not(.locked) {
        transform: scale(0.965);
    }

    .packs-illustrated-grid .pack-card.packs-touch-pop:not(.locked) {
        animation: packsTouchPop 0.68s cubic-bezier(0.18, 0.82, 0.22, 1);
    }

    .packs-illustrated-grid .pack-card.packs-touch-pop:not(.locked) .pack-art {
        animation: packsArtTouchPop 0.68s cubic-bezier(0.18, 0.82, 0.22, 1);
    }
}

/* ---- Elements ---- */
.pack-icon {
    font-size: 36px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.pack-art {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 14px;
    object-fit: cover;
}

.pack-art-progressive {
    opacity: 0.9;
}

.pack-art-progressive.is-full-res {
    opacity: 1;
    transition: opacity 0.2s ease;
}

.packs-list .pack-art {
    width: 56px;
    height: 56px;
    border-radius: 12px;
}

.pack-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pack-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.pack-count {
    font-size: 13px;
    color: var(--text-secondary);
}

.pack-status {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Premium badge — inline in list, absolute in grid. Crown and lock are SVG (pack-glyph), not emoji. */
.premium-badge {
    font-size: 18px;
    color: #ffd166;
}

.pack-glyph {
    display: block;
    flex: none;
}

/* Premium pack the test sites open to everyone: the crown badge widens into a pill with «Тест». */
.premium-badge--test {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.premium-badge-test-label {
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
}

.packs-illustrated-grid .premium-badge.premium-badge--test,
.packs-illustrated-grid--3 .premium-badge.premium-badge--test {
    display: flex;
    width: auto;
    padding: 0 8px 0 6px;
    border-radius: 999px;
}

.packs-illustrated-grid--3 .premium-badge.premium-badge--test {
    padding: 0 6px 0 5px;
}

.packs-illustrated-grid--3 .premium-badge-test-label {
    font-size: 9px;
}

.packs-grid .premium-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 14px;
}

.pack-lock {
    font-size: 20px;
}

.pack-lock-image {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.packs-grid .pack-lock {
    margin-top: 4px;
}

.pack-check {
    width: 26px;
    height: 26px;
    background: var(--accent-pink);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: white;
    font-weight: 700;
}

/* ---- Shake Animation ---- */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.pack-card.shake {
    animation: shake 0.3s ease;
}

/* ---- Summary Bar ---- */
.packs-summary {
    text-align: center;
    margin-bottom: 12px;
    padding: 12px;
    background: var(--bg-card);
    border-radius: 12px;
}

.summary-text {
    color: var(--text-secondary);
    font-size: 14px;
}

.summary-text strong {
    color: var(--accent-pink);
    font-size: 18px;
}

/* ---- Responsive: Small screens ---- */
@media (max-width: 480px) {
    .packs-list,
    .packs-grid {
        gap: 10px;
    }

    .packs-illustrated-grid {
        gap: 10px;
    }

    .packs-illustrated-grid .pack-card {
        border-radius: 14px;
    }

    .pack-card {
        border-radius: 12px;
    }

    .packs-list .pack-card {
        padding: 14px 16px;
        gap: 12px;
    }

    .packs-grid .pack-card {
        padding: 16px 12px;
    }

    .pack-icon {
        font-size: 30px;
    }

    .pack-name {
        font-size: 14px;
    }

    .pack-count {
        font-size: 12px;
    }

    .premium-badge {
        font-size: 14px;
    }

    .pack-check {
        width: 22px;
        height: 22px;
        font-size: 12px;
    }

    .packs-summary {
        padding: 10px;
    }

    .summary-text {
        font-size: 13px;
    }

    .summary-text strong {
        font-size: 16px;
    }
}

/* ---- Responsive: Large screens ---- */
@media (min-width: 768px) {
    .packs-list,
    .packs-grid {
        gap: 16px;
    }

    .packs-illustrated-grid {
        gap: 16px;
    }

    .packs-illustrated-grid .pack-name {
        font-size: 17px;
    }

    .packs-list .pack-card {
        padding: 18px 24px;
    }

    .pack-icon {
        font-size: 42px;
    }

    .pack-name {
        font-size: 18px;
    }

    .pack-count {
        font-size: 14px;
    }
}

/* ==================== */
/* Choice gate          */
/* ==================== */

/* Until a pack is picked, the screen's actions are removed and the action bar
   loses its backdrop, so the gallery uses the whole screen with nothing covering it. */
.packs-awaiting-choice .bottom-section :is(.btn-play, .btn-additional-settings, .btn-settings-link, .packs-summary),
.packs-awaiting-choice .bottom-section .rp-setup-actions:not(:has(> :not(.btn-play, .btn-additional-settings, .btn-settings-link, .packs-summary))) {
    display: none !important;
}

.packs-awaiting-choice .bottom-section {
    padding-top: 0;
    background: none;
}

.packs-choice-cue {
    position: absolute;
    z-index: 6;
    top: 8px;
    right: 8px;
    width: 64px;
    height: 56px;
    color: var(--packs-cue-color, var(--packs-accent, var(--accent-pink, #ff3b6f)));
    pointer-events: none;
    filter: drop-shadow(0 3px 0 var(--packs-cue-shadow, rgba(255, 255, 255, 0.92)));
}

.packs-choice-cue svg {
    display: block;
    width: 100%;
    height: 100%;
}

.packs-list .packs-choice-cue {
    top: 50%;
    right: 12px;
    width: 46px;
    height: 40px;
    margin-top: -20px;
}

@media (prefers-reduced-motion: no-preference) {
    .packs-choice-cue {
        animation: packs-choice-point 800ms ease-in-out infinite alternate;
    }

    .packs-choice-revealed .bottom-section :is(.btn-play, .btn-additional-settings, .btn-settings-link, .packs-summary) {
        animation: packs-choice-reveal 420ms cubic-bezier(0.2, 0.9, 0.3, 1.25) both;
    }

    .packs-choice-revealed .bottom-section .btn-play {
        animation-delay: 60ms;
    }
}

@keyframes packs-choice-point {
    from { transform: translate(calc(3px * var(--rp-motion-artwork-intensity, 1)), calc(-3px * var(--rp-motion-artwork-intensity, 1))); }
    to { transform: translate(calc(-8px * var(--rp-motion-artwork-intensity, 1)), calc(8px * var(--rp-motion-artwork-intensity, 1))); }
}

@keyframes packs-choice-reveal {
    from { opacity: 0; transform: translateY(12px) scale(0.96); }
    to { opacity: 1; transform: none; }
}

/* ==================== */
/* Flat character covers */
/* ==================== */

/* Packs with an animated cover (pack.activeImage) use the flat character art:
   premium covers stay at full colour and a small flat lock sits in the top-right
   corner instead of the centred glossy lock, in every layout. */
.pack-card.pack-card--flat-art.locked {
    opacity: 1;
}

.pack-card.pack-card--flat-art.locked .pack-art {
    filter: none;
}

.pack-card.pack-card--flat-art .pack-lock-image {
    position: absolute;
    top: 10px;
    right: 10px;
    left: auto;
    z-index: 2;
    width: 34px;
    height: 34px;
    margin: 0;
    transform: none;
    filter: drop-shadow(0 2px 6px rgba(23, 25, 31, 0.35));
}

/* ==================== */
/* Selected state       */
/* ==================== */

/* Every game marks a picked pack the same clear way: a thick ring in the game's cue
   colour (palette atlas, checked for contrast with the ink outline) plus a check badge
   in the top-left corner (the lock sits top-right, and a picked pack is never locked).
   `.screen` + `!important` win over per-game theme borders that were too subtle. */
.screen .pack-card {
    --packs-select: var(--packs-cue-color, var(--packs-accent, var(--accent-pink, #ff3b6f)));
}

.screen .pack-card.selected:not(.locked),
.screen .pack-card.premium.selected:not(.locked) {
    border-color: var(--packs-select) !important;
    border-width: 4px !important;
    border-style: solid !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16), 0 10px 26px rgba(0, 0, 0, 0.32) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--packs-select) 45%, transparent),
                0 10px 26px rgba(0, 0, 0, 0.32) !important;
}

.pack-selected-mark {
    position: absolute;
    z-index: 7;
    top: 8px;
    left: 8px;
    display: none;
    width: 32px;
    height: 32px;
    border: 2.5px solid #fff;
    border-radius: 50%;
    background-color: var(--packs-select);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23111211' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.pack-card.selected:not(.locked) > .pack-selected-mark {
    display: block;
}

@media (prefers-reduced-motion: no-preference) {
    .pack-card.selected:not(.locked) > .pack-selected-mark {
        animation: packs-mark-pop 260ms cubic-bezier(0.2, 0.9, 0.3, 1.4) both;
    }
}

@keyframes packs-mark-pop {
    from { transform: scale(0.4); opacity: 0; }
    to { transform: none; opacity: 1; }
}

/* Long single words (German, Scandinavian) hyphenate where the browser can; otherwise
   packs.js `_fitPackText` shrinks the name so whole words fit. */
.pack-card .pack-name {
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* The shared badge replaces the old list-layout ✓. */
.pack-card .pack-check {
    display: none;
}


/* «Выбрать все» tile (packs.js adds it first when no pack is premium): a flat card fan on
   the game's cue colour instead of cover art; selected when every pack is picked. */
.pack-card.pack-select-all {
    cursor: pointer;
}

/* `.screen` beats theme rules sized for cover images (Quiz shrinks .pack-art to 72%). */
.screen .packs-illustrated-grid .pack-select-all-art {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
    padding: 14% 0 0;
    box-sizing: border-box;
    background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--packs-select) 34%, transparent) 0 38%, transparent 62%);
}

.packs-illustrated-grid .pack-select-all-art .pack-select-all-icon {
    width: 64%;
    height: auto;
    transition: transform 0.35s cubic-bezier(0.18, 0.82, 0.22, 1);
}

.packs-illustrated-grid .pack-select-all.selected .pack-select-all-icon {
    transform: scale(1.06) rotate(-3deg);
}

.packs-grid .pack-select-all > .pack-select-all-icon,
.packs-list .pack-select-all > .pack-select-all-icon {
    flex-shrink: 0;
    width: 56px;
    height: auto;
}

/* Plain grid with cover art: the fan fills the cover box (`.pack-art`, sized by the game
   theme) instead of a 56px icon in the corner. */
.screen .packs-grid .pack-select-all-art {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--packs-select) 34%, transparent) 0 42%, transparent 66%);
}

.packs-grid .pack-select-all-art .pack-select-all-icon {
    width: 82%;
    max-height: 100%;
    height: auto;
    transition: transform 0.35s cubic-bezier(0.18, 0.82, 0.22, 1);
}

.packs-grid .pack-select-all.selected .pack-select-all-art .pack-select-all-icon {
    transform: scale(1.06) rotate(-3deg);
}

/* Illustrated grid, three in a row (Packs.render `columns: 3`): for games with many packs.
   Smaller covers, so the name, count, lock and «selected» mark shrink with them. */
.packs-illustrated-grid.packs-illustrated-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.packs-illustrated-grid--3 .pack-card {
    border-radius: 14px;
}

.packs-illustrated-grid--3 .pack-copy {
    left: 7px;
    right: 7px;
    bottom: 7px;
}

.packs-illustrated-grid--3 .pack-name {
    font-size: clamp(11px, 3vw, 14px);
}

.packs-illustrated-grid--3 .pack-count {
    margin-top: 2px;
    font-size: 10px;
}

.packs-illustrated-grid--3 .premium-badge {
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    font-size: 12px;
}

.packs-illustrated-grid--3 .pack-lock-image {
    width: 46px;
    height: 46px;
}

.packs-illustrated-grid--3 .pack-card > .pack-selected-mark {
    top: 6px;
    left: 6px;
    width: 24px;
    height: 24px;
    border-width: 2px;
    background-size: 15px 15px;
}

@media (min-width: 768px) {
    .packs-illustrated-grid.packs-illustrated-grid--3 {
        gap: 12px;
    }

    .packs-illustrated-grid--3 .pack-name {
        font-size: 15px;
    }
}

/* Section heading inside a pack list (a pack's `section`, e.g. Melody «Режимы» / «Наборы»): spans the
   whole row of any layout, so modes and packs read as two groups. */
.packs-section-title {
    grid-column: 1 / -1;
    margin: 10px 2px 0;
    font-family: var(--font-display, inherit);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: var(--text-secondary, rgba(255, 255, 255, 0.72));
}

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

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

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

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

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

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

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

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

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

/* Optional «why are you leaving» chips (ConfirmDialog.show(..., { reasons: true })). */
.confirm-dialog-reasons {
    margin: -8px 0 20px;
}
.confirm-dialog-reasons[hidden] { display: none; }
.confirm-dialog-reasons-title {
    font-size: 13px;
    color: var(--rp-dialog-text, #8892b0);
    margin-bottom: 10px;
}
.confirm-dialog-reason-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.confirm-dialog-reason {
    min-height: 36px;
    padding: 7px 14px;
    border: 1.5px solid var(--rp-dialog-secondary-border, #3a4167);
    border-radius: 18px;
    background: transparent;
    color: var(--rp-dialog-title, #ffffff);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.confirm-dialog-reason:active { transform: scale(0.95); }
.confirm-dialog-reason[aria-pressed="true"] {
    background: var(--rp-dialog-primary-bg, linear-gradient(135deg, #ff3b6f, #cc2f59));
    border-color: transparent;
    color: var(--rp-dialog-primary-text, #ffffff);
}
.confirm-dialog-reason:focus-visible { outline: 2px solid var(--rp-dialog-primary-text, #ffffff); outline-offset: 2px; }
/* /ui-icons.css */
/*
 * UI icons: one flat SVG icon family for interface chrome instead of emoji.
 * Emoji look different on every platform (Apple, Google, Samsung, Windows), ignore the
 * game palette and break the "one vector family" rule in docs/ROOMPLAY_DESIGN_RULES.md.
 * These are 24x24 shapes on a 2.1 round stroke (or solid fills), used as SVG masks, so
 * the icon is 1em and takes currentColor: size and colour always come from the context.
 *
 * Markup:  <span class="rp-icon rp-icon--pause" aria-hidden="true"></span>
 * Pseudo-elements reuse the shapes through --rp-icon-<name>, e.g.
 *   .btn::before { content: ""; width: 1em; height: 1em; background: currentColor;
 *                  -webkit-mask: var(--rp-icon-dice) center / contain no-repeat;
 *                  mask: var(--rp-icon-dice) center / contain no-repeat; }
 * Right/wrong marks stay in answer-marks.css (.rp-mark); gender signs in player-gender.css.
 */
:root {
    --rp-icon-pause: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='4.5' width='4.2' height='15' rx='1.6' fill='%23000' stroke='none'/%3E%3Crect x='13.8' y='4.5' width='4.2' height='15' rx='1.6' fill='%23000' stroke='none'/%3E%3C/svg%3E");
    --rp-icon-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5.6v12.8a1.1 1.1 0 0 0 1.7.93l10-6.4a1.1 1.1 0 0 0 0-1.86l-10-6.4A1.1 1.1 0 0 0 8 5.6Z' fill='%23000' stroke='none'/%3E%3C/svg%3E");
    --rp-icon-video: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.8' y='6.3' width='12.6' height='11.4' rx='2.4'/%3E%3Cpath d='M15.4 10.4l4.5-2.7a.8.8 0 0 1 1.2.7v7.2a.8.8 0 0 1-1.2.7l-4.5-2.7Z' fill='%23000'/%3E%3C/svg%3E");
    --rp-icon-skip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 6.3v11.4a1 1 0 0 0 1.55.83L15 12.83a1 1 0 0 0 0-1.66L6.55 5.47A1 1 0 0 0 5 6.3Z' fill='%23000' stroke='none'/%3E%3Cpath d='M18.6 5.5v13'/%3E%3C/svg%3E");
    --rp-icon-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7.5l4.6 4.2L12 5l3.9 6.7 4.6-4.2-1.7 10.3a1 1 0 0 1-1 .8H6.2a1 1 0 0 1-1-.8Z' fill='%23000' stroke='none'/%3E%3C/svg%3E");
    --rp-icon-card: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2.6'/%3E%3Cpath d='M3 10h18M7 14.8h3.5'/%3E%3C/svg%3E");
    --rp-icon-sound: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 9.6v4.8a1 1 0 0 0 1 1h3l4.3 3.6a.7.7 0 0 0 1.2-.54V5.54a.7.7 0 0 0-1.2-.54L7.5 8.6h-3a1 1 0 0 0-1 1Z' fill='%23000' stroke='none'/%3E%3Cpath d='M16 9a4.2 4.2 0 0 1 0 6M18.8 6.3a8 8 0 0 1 0 11.4'/%3E%3C/svg%3E");
    --rp-icon-sound-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 9.6v4.8a1 1 0 0 0 1 1h3l4.3 3.6a.7.7 0 0 0 1.2-.54V5.54a.7.7 0 0 0-1.2-.54L7.5 8.6h-3a1 1 0 0 0-1 1Z' fill='%23000' stroke='none'/%3E%3Cpath d='M16.5 9.5l5 5M21.5 9.5l-5 5'/%3E%3C/svg%3E");
    --rp-icon-vibrate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='3.5' width='8' height='17' rx='2.2'/%3E%3Cpath d='M4.8 8.5v7M19.2 8.5v7M2 10.5v3M22 10.5v3'/%3E%3C/svg%3E");
    --rp-icon-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2l2.7 5.5 6 .9-4.35 4.25 1.03 6L12 17l-5.38 2.85 1.03-6L3.3 9.6l6-.9Z' fill='%23000' stroke='none' stroke-linejoin='round'/%3E%3C/svg%3E");
    --rp-icon-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.8' y='10.3' width='14.4' height='10.2' rx='2.6' fill='%23000' stroke='none'/%3E%3Cpath d='M8 10.3V8a4 4 0 0 1 8 0v2.3'/%3E%3C/svg%3E");
    --rp-icon-dice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.8' y='3.8' width='16.4' height='16.4' rx='4.2'/%3E%3Ccircle cx='8.6' cy='8.6' r='1.5' fill='%23000' stroke='none'/%3E%3Ccircle cx='12' cy='12' r='1.5' fill='%23000' stroke='none'/%3E%3Ccircle cx='15.4' cy='15.4' r='1.5' fill='%23000' stroke='none'/%3E%3C/svg%3E");
    --rp-icon-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3.1' fill='%23000' stroke='none'/%3E%3C/svg%3E");
    --rp-icon-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='3.5' width='15' height='17' rx='2.6'/%3E%3Cpath d='M8.5 8.5h7M8.5 12.5h7M8.5 16.5h4'/%3E%3C/svg%3E");
    --rp-icon-refresh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 10.5A7.8 7.8 0 0 0 5.7 7.2L4.3 8.8'/%3E%3Cpath d='M4.3 4.3v4.5h4.5'/%3E%3Cpath d='M4.5 13.5a7.8 7.8 0 0 0 13.8 3.3l1.4-1.6'/%3E%3Cpath d='M19.7 19.7v-4.5h-4.5'/%3E%3C/svg%3E");
    --rp-icon-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.3s-8.3-4.9-8.3-11a4.6 4.6 0 0 1 8.3-2.7 4.6 4.6 0 0 1 8.3 2.7c0 6.1-8.3 11-8.3 11Z' fill='%23000' stroke='none'/%3E%3C/svg%3E");
    --rp-icon-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-fullscreen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V5.5A1.5 1.5 0 0 1 5.5 4H9M15 4h3.5A1.5 1.5 0 0 1 20 5.5V9M20 15v3.5a1.5 1.5 0 0 1-1.5 1.5H15M9 20H5.5A1.5 1.5 0 0 1 4 18.5V15'/%3E%3C/svg%3E");
    --rp-icon-fullscreen-exit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4v3.5A1.5 1.5 0 0 1 7.5 9H4M20 9h-3.5A1.5 1.5 0 0 1 15 7.5V4M15 20v-3.5a1.5 1.5 0 0 1 1.5-1.5H20M4 15h3.5A1.5 1.5 0 0 1 9 16.5V20'/%3E%3C/svg%3E");
    --rp-icon-move: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='14.6' cy='4.4' r='2.2' fill='%23000' stroke='none'/%3E%3Cpath d='M13.6 8.6l-2.4 5.6 3.8 2.7-1 4.6'/%3E%3Cpath d='M11.2 14.2l-2.4 3.5-4.3.6'/%3E%3Cpath d='M6.3 10.6l3.4-2.6 3.9.6 2.6 3.2 3 .5'/%3E%3C/svg%3E");
    --rp-icon-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.6' y='3.6' width='7' height='7' rx='1.9'/%3E%3Crect x='13.4' y='3.6' width='7' height='7' rx='1.9'/%3E%3Crect x='3.6' y='13.4' width='7' height='7' rx='1.9'/%3E%3Crect x='13.4' y='13.4' width='7' height='7' rx='1.9'/%3E%3C/svg%3E");
    --rp-icon-funnel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4.5h16a.9.9 0 0 1 .7 1.5l-6.2 7.3v5.5a.9.9 0 0 1-.5.8l-2.7 1.4a.7.7 0 0 1-1-.6v-7.1L3.3 6a.9.9 0 0 1 .7-1.5Z'/%3E%3C/svg%3E");
    --rp-icon-split: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21v-6.2a3 3 0 0 0-.9-2.1L5.5 7.1M12 14.8a3 3 0 0 1 .9-2.1l5.6-5.6'/%3E%3Cpath d='M4.6 11.4V6.2h5.2M19.4 11.4V6.2h-5.2'/%3E%3C/svg%3E");
    --rp-icon-stack: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.3l8.6 4.3L12 11.9 3.4 7.6Z' fill='%23000' stroke='none'/%3E%3Cpath d='M3.4 12.1 12 16.4l8.6-4.3M3.4 16.4 12 20.7l8.6-4.3'/%3E%3C/svg%3E");
    --rp-icon-flow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3.5' width='7.5' height='6.5' rx='1.8' fill='%23000' stroke='none'/%3E%3Crect x='14.6' y='14' width='6.4' height='6.5' rx='1.8'/%3E%3Cpath d='M6.8 10v4.2a3 3 0 0 0 3 3h2.4M10 14.6l2.6 2.6-2.6 2.6'/%3E%3C/svg%3E");
    --rp-icon-mic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8.8' y='2.8' width='6.4' height='11.4' rx='3.2' fill='%23000' stroke='none'/%3E%3Cpath d='M5.4 11.2a6.6 6.6 0 0 0 13.2 0M12 17.8v3.4M8.6 21.2h6.8'/%3E%3C/svg%3E");
    --rp-icon-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4v16h16'/%3E%3Cpath d='M8 15.5l3.6-4.2 3 2.6L19.5 8'/%3E%3Cpath d='M15.6 8h3.9v3.9'/%3E%3C/svg%3E");
    --rp-icon-coins: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M12 5.9v12.2M14.9 9.3c-.4-1-1.5-1.6-2.9-1.6-1.6 0-2.8.8-2.8 2 0 2.8 5.7 1.5 5.7 4.4 0 1.2-1.2 2.1-2.9 2.1-1.4 0-2.6-.6-3-1.7' stroke-width='1.8'/%3E%3C/svg%3E");
    --rp-icon-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 7h15M4.5 12h15M4.5 17h15' stroke-width='2.4'/%3E%3C/svg%3E");
    --rp-icon-exit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 4.5H7a1.5 1.5 0 0 0-1.5 1.5v12A1.5 1.5 0 0 0 7 19.5h6.5'/%3E%3Cpath d='M11 12h9.5M17 8.5l3.5 3.5-3.5 3.5'/%3E%3C/svg%3E");
    --rp-icon-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3.2c.7 4 2.8 6.1 6.8 6.8-4 .7-6.1 2.8-6.8 6.8-.7-4-2.8-6.1-6.8-6.8 4-.7 6.1-2.8 6.8-6.8Z' fill='%23000' stroke='none'/%3E%3Cpath d='M18 13.6c.35 1.9 1.3 2.85 3.2 3.2-1.9.35-2.85 1.3-3.2 3.2-.35-1.9-1.3-2.85-3.2-3.2 1.9-.35 2.85-1.3 3.2-3.2Z' fill='%23000' stroke='none'/%3E%3C/svg%3E");
    --rp-icon-more: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5.5' cy='12' r='2' fill='%23000' stroke='none'/%3E%3Ccircle cx='12' cy='12' r='2' fill='%23000' stroke='none'/%3E%3Ccircle cx='18.5' cy='12' r='2' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}

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

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

.rp-icon--pause { -webkit-mask-image: var(--rp-icon-pause); mask-image: var(--rp-icon-pause); }
.rp-icon--fullscreen { -webkit-mask-image: var(--rp-icon-fullscreen); mask-image: var(--rp-icon-fullscreen); }
.rp-icon--fullscreen-exit { -webkit-mask-image: var(--rp-icon-fullscreen-exit); mask-image: var(--rp-icon-fullscreen-exit); }
.rp-icon--play { -webkit-mask-image: var(--rp-icon-play); mask-image: var(--rp-icon-play); }
.rp-icon--video { -webkit-mask-image: var(--rp-icon-video); mask-image: var(--rp-icon-video); }
.rp-icon--skip { -webkit-mask-image: var(--rp-icon-skip); mask-image: var(--rp-icon-skip); }
.rp-icon--crown { -webkit-mask-image: var(--rp-icon-crown); mask-image: var(--rp-icon-crown); }
.rp-icon--card { -webkit-mask-image: var(--rp-icon-card); mask-image: var(--rp-icon-card); }
.rp-icon--sound { -webkit-mask-image: var(--rp-icon-sound); mask-image: var(--rp-icon-sound); }
.rp-icon--sound-off { -webkit-mask-image: var(--rp-icon-sound-off); mask-image: var(--rp-icon-sound-off); }
.rp-icon--vibrate { -webkit-mask-image: var(--rp-icon-vibrate); mask-image: var(--rp-icon-vibrate); }
.rp-icon--star { -webkit-mask-image: var(--rp-icon-star); mask-image: var(--rp-icon-star); }
.rp-icon--lock { -webkit-mask-image: var(--rp-icon-lock); mask-image: var(--rp-icon-lock); }
.rp-icon--dice { -webkit-mask-image: var(--rp-icon-dice); mask-image: var(--rp-icon-dice); }
.rp-icon--eye { -webkit-mask-image: var(--rp-icon-eye); mask-image: var(--rp-icon-eye); }
.rp-icon--list { -webkit-mask-image: var(--rp-icon-list); mask-image: var(--rp-icon-list); }
.rp-icon--refresh { -webkit-mask-image: var(--rp-icon-refresh); mask-image: var(--rp-icon-refresh); }
.rp-icon--skull { -webkit-mask-image: var(--rp-icon-skull); mask-image: var(--rp-icon-skull); }
.rp-icon--heart { -webkit-mask-image: var(--rp-icon-heart); mask-image: var(--rp-icon-heart); }
.rp-icon--close { -webkit-mask-image: var(--rp-icon-close); mask-image: var(--rp-icon-close); }
.rp-icon--search { -webkit-mask-image: var(--rp-icon-search); mask-image: var(--rp-icon-search); }
.rp-icon--ballot { -webkit-mask-image: var(--rp-icon-ballot); mask-image: var(--rp-icon-ballot); }
.rp-icon--bolt { -webkit-mask-image: var(--rp-icon-bolt); mask-image: var(--rp-icon-bolt); }
.rp-icon--dove { -webkit-mask-image: var(--rp-icon-dove); mask-image: var(--rp-icon-dove); }
.rp-icon--radiation { -webkit-mask-image: var(--rp-icon-radiation); mask-image: var(--rp-icon-radiation); }
.rp-icon--stop { -webkit-mask-image: var(--rp-icon-stop); mask-image: var(--rp-icon-stop); }
.rp-icon--phone { -webkit-mask-image: var(--rp-icon-phone); mask-image: var(--rp-icon-phone); }
.rp-icon--doc { -webkit-mask-image: var(--rp-icon-doc); mask-image: var(--rp-icon-doc); }
.rp-icon--bug { -webkit-mask-image: var(--rp-icon-bug); mask-image: var(--rp-icon-bug); }
.rp-icon--image { -webkit-mask-image: var(--rp-icon-image); mask-image: var(--rp-icon-image); }
.rp-icon--users { -webkit-mask-image: var(--rp-icon-users); mask-image: var(--rp-icon-users); }
.rp-icon--spy { -webkit-mask-image: var(--rp-icon-spy); mask-image: var(--rp-icon-spy); }
.rp-icon--check-circle { -webkit-mask-image: var(--rp-icon-check-circle); mask-image: var(--rp-icon-check-circle); }
.rp-icon--sad { -webkit-mask-image: var(--rp-icon-sad); mask-image: var(--rp-icon-sad); }
.rp-icon--hourglass { -webkit-mask-image: var(--rp-icon-hourglass); mask-image: var(--rp-icon-hourglass); }
.rp-icon--gear { -webkit-mask-image: var(--rp-icon-gear); mask-image: var(--rp-icon-gear); }
.rp-icon--laugh { -webkit-mask-image: var(--rp-icon-laugh); mask-image: var(--rp-icon-laugh); }
.rp-icon--palette { -webkit-mask-image: var(--rp-icon-palette); mask-image: var(--rp-icon-palette); }
.rp-icon--puzzle { -webkit-mask-image: var(--rp-icon-puzzle); mask-image: var(--rp-icon-puzzle); }
.rp-icon--chat { -webkit-mask-image: var(--rp-icon-chat); mask-image: var(--rp-icon-chat); }
.rp-icon--masks { -webkit-mask-image: var(--rp-icon-masks); mask-image: var(--rp-icon-masks); }
.rp-icon--question { -webkit-mask-image: var(--rp-icon-question); mask-image: var(--rp-icon-question); }
.rp-icon--globe { -webkit-mask-image: var(--rp-icon-globe); mask-image: var(--rp-icon-globe); }
.rp-icon--download { -webkit-mask-image: var(--rp-icon-download); mask-image: var(--rp-icon-download); }
.rp-icon--flag { -webkit-mask-image: var(--rp-icon-flag); mask-image: var(--rp-icon-flag); }
.rp-icon--thumb { -webkit-mask-image: var(--rp-icon-thumb); mask-image: var(--rp-icon-thumb); }
.rp-icon--thumb-filled { -webkit-mask-image: var(--rp-icon-thumb-filled); mask-image: var(--rp-icon-thumb-filled); }
.rp-icon--move { -webkit-mask-image: var(--rp-icon-move); mask-image: var(--rp-icon-move); }
.rp-icon--grid { -webkit-mask-image: var(--rp-icon-grid); mask-image: var(--rp-icon-grid); }
.rp-icon--funnel { -webkit-mask-image: var(--rp-icon-funnel); mask-image: var(--rp-icon-funnel); }
.rp-icon--split { -webkit-mask-image: var(--rp-icon-split); mask-image: var(--rp-icon-split); }
.rp-icon--stack { -webkit-mask-image: var(--rp-icon-stack); mask-image: var(--rp-icon-stack); }
.rp-icon--flow { -webkit-mask-image: var(--rp-icon-flow); mask-image: var(--rp-icon-flow); }
.rp-icon--mic { -webkit-mask-image: var(--rp-icon-mic); mask-image: var(--rp-icon-mic); }
.rp-icon--chart { -webkit-mask-image: var(--rp-icon-chart); mask-image: var(--rp-icon-chart); }
.rp-icon--coins { -webkit-mask-image: var(--rp-icon-coins); mask-image: var(--rp-icon-coins); }
.rp-icon--menu { -webkit-mask-image: var(--rp-icon-menu); mask-image: var(--rp-icon-menu); }
.rp-icon--exit { -webkit-mask-image: var(--rp-icon-exit); mask-image: var(--rp-icon-exit); }
.rp-icon--sparkle { -webkit-mask-image: var(--rp-icon-sparkle); mask-image: var(--rp-icon-sparkle); }
.rp-icon--more { -webkit-mask-image: var(--rp-icon-more); mask-image: var(--rp-icon-more); }
/* /premium-cta.css */
/* Premium upsell button (owner 2026-10-20): a pearlescent foil that slowly wobbles in 3D, like the
 * cards in Balatro, so it never blends into a game's own palette. Shared: any game puts
 * class="rp-premium-cta" on its upsell button and links /premium-cta.css. The glare moves with the tilt;
 * with prefers-reduced-motion the button stays flat and still. No emoji: the optional crown is
 * --rp-icon-crown from ui-icons.css (class rp-premium-cta--crown). */

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

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

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

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

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

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

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

/* Compact size for a tight game screen (a card, answer buttons and a player row on one phone screen):
 * the same pearl button one line high and the chip in smaller type, so the sample does not squeeze the card.
 * Used by the online «Я никогда не» card screen. */
.rp-premium-cta--compact {
    min-height: 44px;
    padding: 8px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.2;
}
.rp-premium-cta--compact.rp-premium-cta--crown .rp-premium-cta-label::before {
    width: 16px;
    height: 16px;
    margin-right: 6px;
}
.rp-premium-teaser--compact {
    gap: 5px;
    margin: 4px auto;
    padding: 4px 10px 4px 8px;
    font-size: 12px;
}
.rp-premium-teaser--compact::before { width: 13px; height: 13px; }
/* /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); } }
/* /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; }
}
/* /settings-popup.css */
/*
 * Settings popup. Game Themes recolour it through the --rp-dialog-* tokens shared with
 * confirm-dialog.css (see there), plus the controls:
 *   --rp-dialog-control-bg (selector track), --rp-dialog-control-btn-bg / -text / -active / -radius (−/+),
 *   --rp-dialog-value, --rp-dialog-toggle-bg / -text, --rp-dialog-toggle-on-bg / -on-text.
 * The primary «Готово» falls back to --settings-accent; fallbacks keep the original navy look.
 */
.settings-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--rp-dialog-overlay, rgba(0, 0, 0, 0.85));
    z-index: 1000;
    justify-content: center;
    align-items: center;
    padding: 24px;
}

.settings-popup-overlay.active {
    display: flex;
}

.settings-popup-modal {
    background: var(--rp-dialog-bg, linear-gradient(135deg, #252b4a 0%, #1a2140 100%));
    /* Base text colour for currentColor parts such as «Предложить идею». */
    color: var(--rp-dialog-title, #ffffff);
    border: var(--rp-dialog-border, none);
    box-shadow: var(--rp-dialog-shadow, none);
    border-radius: var(--rp-dialog-radius, 24px);
    padding: 32px 24px;
    max-width: 380px;
    width: 100%;
    /* A tall sheet (many rows, a short phone): the title and «Готово» stay put and only the rows
       scroll; a fade at the bottom edge (.settings-popup-content--more) shows there is more below. */
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.settings-popup-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--rp-dialog-title, #ffffff);
    margin-bottom: 24px;
    text-align: center;
}

.settings-popup-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Room for focus outlines at the clipped edges. */
    margin-inline: -4px;
    padding: 2px 4px;
}
.settings-popup-content > * { flex: none; }
.settings-popup-title,
.settings-popup-done { flex: none; }
.settings-popup-content--more {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent);
}

.settings-popup-row {
    /* Rows sit directly on the modal surface: Game Themes recolour the modal,
       controls and text, never the row itself (a tinted row reads as a stray strip). */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* App-wide «Звуки» / «Вибрация» rows (ui-feedback.js) follow the game's own settings,
   separated by a thin divider in the label colour; when they are the only rows, no divider. */
.settings-popup-row-app-first:not(:first-child) {
    padding-top: 16px;
    border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}

.settings-popup-label {
    font-size: 15px;
    color: var(--rp-dialog-text, #c0c8e0);
    flex: 1;
    min-width: 0;
}

.settings-popup-selector {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--rp-dialog-control-bg, rgba(255, 255, 255, 0.06));
    border-radius: 14px;
    padding: 4px;
    flex-shrink: 0;
}

.settings-popup-btn {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--rp-dialog-control-btn-radius, 12px);
    background: var(--rp-dialog-control-btn-bg, rgba(255, 255, 255, 0.08));
    color: var(--rp-dialog-control-btn-text, var(--rp-dialog-title, #ffffff));
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    font-family: inherit;
}

.settings-popup-btn:active {
    background: var(--rp-dialog-control-btn-active, rgba(255, 255, 255, 0.15));
}

/* Hit areas. The shared press animation (game-motion.css: scale .96 + 2px down) moves a button
   away from the finger, so a tap on its top edge was lifted outside it and lost, and the 4px
   track padding around −/+ never counted. An invisible ::before larger than the button moves
   with it and keeps those taps; −/+ also cover the track padding. Choice options touch each
   other (4px gap), so they only grow into half the gap. */
.settings-popup-btn,
.settings-popup-toggle,
.settings-popup-link {
    position: relative;
    touch-action: manipulation;
}

.settings-popup-btn::before,
.settings-popup-toggle::before,
.settings-popup-link::before {
    content: '';
    position: absolute;
    inset: -8px -6px;
}

.settings-popup-choice-option::before {
    inset: -2px;
}

.settings-popup-link::before {
    inset: -4px;
}

.settings-popup-value {
    min-width: 60px;
    padding: 0 8px;
    white-space: nowrap;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--rp-dialog-value, var(--rp-dialog-title, #ffffff));
}

.settings-popup-row-choice {
    flex-wrap: wrap;
    gap: 8px;
}

.settings-popup-row-choice .settings-popup-label {
    flex-basis: 100%;
}

/* Segmented control for `type: 'choice'`: equal options, the chosen one in the primary colour. */
.settings-popup-choice {
    flex: 1 1 100%;
    flex-wrap: wrap;
    min-width: 0;
    gap: 4px;
}

.settings-popup-choice-option {
    /* Sized by their labels, so a short «Классика» leaves room for «Большинство»; a label set
       too long for one row wraps onto a second line instead of splitting a word. */
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: 44px;
    height: auto;
    padding: 6px 4px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: anywhere;
    background: transparent;
    color: var(--rp-dialog-text, #c0c8e0);
}

.settings-popup-choice-option.active {
    color: var(--rp-dialog-toggle-on-text, var(--rp-dialog-primary-text, #ffffff));
    background: var(--rp-dialog-toggle-on-bg, var(--rp-dialog-primary-bg, var(--settings-accent, #ff3b6f)));
}

/* Phones narrower than ~380 px can't fit three or more labels in a row: list them one under another. */
@media (max-width: 380px) {
    .settings-popup-choice:has(> :nth-child(3)) { flex-direction: column; align-items: stretch; }
    .settings-popup-choice:has(> :nth-child(3)) .settings-popup-choice-option { min-height: 40px; }
}

.settings-popup-choice-option:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

.settings-popup-choice-hint {
    flex-basis: 100%;
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
    color: var(--rp-dialog-text, #c0c8e0);
    opacity: 0.8;
}

.settings-popup-toggle {
    min-width: 104px;
    min-height: 48px;
    padding: 4px 6px 4px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 0;
    border-radius: 24px;
    color: var(--rp-dialog-toggle-text, var(--rp-dialog-text, #c0c8e0));
    background: var(--rp-dialog-toggle-bg, rgba(255, 255, 255, 0.08));
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}

.settings-popup-toggle::after {
    content: '';
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
    transition: transform 0.2s ease;
}

.settings-popup-toggle.active {
    color: var(--rp-dialog-toggle-on-text, var(--rp-dialog-primary-text, #ffffff));
    background: var(--rp-dialog-toggle-on-bg, var(--rp-dialog-primary-bg, var(--settings-accent, #ff3b6f)));
}

.settings-popup-toggle.active::after {
    transform: scale(0.78);
}

.settings-popup-toggle:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

.settings-popup-done {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: var(--rp-dialog-btn-radius, 30px);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    background: var(--rp-dialog-primary-bg, linear-gradient(135deg, var(--settings-accent, #ff3b6f), var(--settings-accent-dark, #cc2f59)));
    color: var(--rp-dialog-primary-text, white);
    box-shadow: var(--rp-dialog-primary-shadow, none);
}

.btn-additional-settings {
    width: 100%;
    background: transparent;
    border: 2px solid var(--settings-accent, #ff3b6f);
    color: var(--text-primary, #ffffff);
    padding: 16px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    font-family: inherit;
    margin-bottom: 12px;
}

.btn-additional-settings:hover {
    background: color-mix(in srgb, var(--settings-accent, #ff3b6f) 10%, transparent);
}

.btn-additional-settings:active {
    transform: scale(0.98);
}

/* «Предложить идею»: a quiet text button under the app rows, and the idea form drawn in the
   same modal. Colours come from currentColor so every Game Theme's modal palette applies. */
.settings-popup-row-idea { justify-content: center; }
.settings-popup-idea,
.settings-popup-idea-back {
    min-height: 44px;
    padding: 8px 12px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    opacity: 0.8;
    cursor: pointer;
}
.settings-popup-idea-back { align-self: center; }
.settings-popup-idea:focus-visible,
.settings-popup-idea-back:focus-visible,
.settings-popup-idea-text:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.settings-popup-idea-hint,
.settings-popup-idea-thanks {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
    opacity: 0.85;
}
.settings-popup-idea-thanks { font-size: 17px; opacity: 1; padding: 16px 0; }
.settings-popup-idea-text {
    width: 100%;
    min-height: 112px;
    padding: 12px;
    box-sizing: border-box;
    border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, currentColor 6%, transparent);
    color: inherit;
    font: inherit;
    font-size: 16px;
    resize: vertical;
}
.settings-popup-idea-text::placeholder { color: inherit; opacity: 0.55; }
.settings-popup-idea-status { margin: 0; min-height: 18px; font-size: 14px; color: var(--rp-wrong, #ff8a9a); text-align: center; }
.settings-popup-done:disabled { opacity: 0.5; cursor: default; }

/* `type: 'link'` row: opens a game's own sub-screen. Summary text + chevron, same control
   surface as the steppers so it reads as part of the same sheet. */
.settings-popup-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    max-width: 55%;
    min-height: 48px;
    padding: 4px 12px 4px 16px;
    border: 0;
    border-radius: 14px;
    background: var(--rp-dialog-control-bg, rgba(255, 255, 255, 0.06));
    color: var(--rp-dialog-value, var(--rp-dialog-title, #ffffff));
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.settings-popup-link-value {
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: right;
}

.settings-popup-link::after {
    content: '';
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-right: 2.1px solid currentColor;
    border-top: 2.1px solid currentColor;
    border-radius: 1px;
    transform: rotate(45deg);
    margin-right: 4px;
}

.settings-popup-link:active {
    background: var(--rp-dialog-control-btn-active, rgba(255, 255, 255, 0.15));
}

.settings-popup-link:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 2px;
}

/* «Получи до 7 500 ₽ за рекомендацию RoomPlay. Как?»: the video task's quiet button (video-task.css) as a settings row. */
.settings-popup-row-earn { justify-content: center; }
.settings-popup-earn.rp-video-task-cta { margin: 0; justify-content: center; }
/* /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;
}

/* A part that gives the round away (ctx.atEnd in reveal-results.js) keeps its place and fades in with the last answer. */
.rr-context .rr-held,
.rr-context .rr-held-done {
  transition: opacity 0.5s ease;
}

.rr-context .rr-held {
  opacity: 0;
  visibility: hidden;
}

.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;
}

/* «Автор:» / «Голосовали:» before the names on an image card (option.whoLabels, «Что за мем» 2026-11-02). */
.rr-option-image-label {
  font-weight: 500;
  color: var(--rr-muted, rgba(255, 255, 255, 0.5));
  margin-right: 4px;
}

.rr-option-image-owner .rr-author-points {
  margin-left: auto;
}

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

/* A player named in the question or the line under it («Что выбрал [нмг]?», «[Тата] +500: тебя знают!»): the
   «Аватарка с именем» chip as a pill, like the voters below. */
.rr-context :is(.rr-context-text, .rr-context-subtext) .rp-player {
  padding: .1em .6em .1em .1em;
  border-radius: 999px;
  background: var(--rr-surface, rgba(255, 255, 255, 0.1));
  white-space: nowrap;
}

/* Host's «Дальше» on the round reveal (shared/client/reveal-next.ts: every /tv/ game; Квиз has the same pill as
   .quiz-reveal-next). Fixed at the bottom; the reveal keeps room for it. */
.rr-next-btn:not([hidden]) {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  /* Above a game's own layers (Рисовач cards), below pause (980) and popups (1000). */
  z-index: 900;
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--bg-primary);
  box-shadow: 0 4px 14px rgb(0 0 0 / 25%);
  font-weight: 700;
}

body:has(.rr-next-btn:not([hidden])) :is(#round-results-screen, #reveal-screen) { padding-bottom: 84px; }
/* PC stage: the /tv/ reveal (dashboard, Геоугадайка map) keeps a strip for the pill, so it never sits on a card. */
html.rp-stage body:has(.rr-next-btn:not([hidden])) :is(.qs-reveal > .rr-container, #round-results-screen > .gss-root) { bottom: 80px; }
/* Phone: the answers scroll inside the reveal, so the last one can be scrolled above the pill (Рисовач). */
body:has(.rr-next-btn:not([hidden])) .rr-container:not(.rr-dashboard) .rr-options { padding-bottom: 76px; }
body:has(.rr-next-btn:not([hidden])) .rr-container:not(.rr-dashboard) .rr-option { scroll-margin-bottom: 84px; }
/* A game theme's outlined .btn-skip (Рисовач, Геоугадайка: transparent) must not let the reveal show through the pill. */
body .rr-next-btn.btn-skip:not([hidden]) { background: var(--bg-primary, #fff); }
/* /pause-overlay.css */
/*
 * Shared round pause button + overlay (see pause-overlay.js). Load before the game's styles.css;
 * game themes keep overriding .btn-pause / .pause-overlay / .pause-overlay-text directly.
 * Per-game differences go through custom properties (fallbacks are the common look):
 *   --pause-btn-bg, --pause-btn-border, --pause-btn-color, --pause-btn-padding,
 *   --pause-btn-font-size, --pause-btn-hover-bg, --pause-btn-hover-color,
 *   --pause-overlay-bg, --pause-overlay-text-color.
 * Layout-only properties (align-self, flex-shrink, min-height, z-index) stay in the game.
 * The overlay is position:absolute — the game's screen must be its positioned ancestor.
 */
.btn-pause {
    background: var(--pause-btn-bg, rgba(255, 255, 255, 0.1));
    border: 1px solid var(--pause-btn-border, rgba(255, 255, 255, 0.2));
    color: var(--pause-btn-color, var(--text-secondary));
    padding: var(--pause-btn-padding, 6px 16px);
    border-radius: 16px;
    font-size: var(--pause-btn-font-size, 13px);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (prefers-reduced-motion: reduce) {
    .rp-toast,
    .rp-toast.is-visible {
        transform: translate(-50%, 0);
        transition: opacity 0.15s linear, visibility 0s linear 0.15s;
    }
    .rp-toast.is-visible { transition: opacity 0.15s linear, visibility 0s; }
}
/* /wouldyourather/styles.css */
:root {
  --navy: var(--bg-primary);
  --navy-2: var(--bg-secondary);
  --panel: var(--bg-card);
  --line: rgba(255, 255, 255, .1);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --cyan: var(--accent-purple);
  --cyan-deep: var(--accent-purple-dark);
  --coral: var(--accent-blue);
  --coral-deep: #3651c5;
  --lime: var(--success);
  --danger: var(--error);
  --radius: 24px;
  --settings-accent: var(--cyan);
  --settings-accent-dark: var(--cyan-deep);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible,
input:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }
.topbar-spacer { min-width: 1px; min-height: 1px; }
.timer-badge { justify-self: end; width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--cyan); font-size: 18px; font-weight: 700; }
.timer-badge.urgent { color: #fff; background: var(--danger); animation: pulse .5s ease infinite alternate; }
.screen-scroll { width: 100%; margin: 0 auto; padding-bottom: 30px; }
.center-panel { min-height: calc(100dvh - 130px); width: 100%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
h1, h2, p { margin-top: 0; }
h2 { font-size: 18px; line-height: 1.2; font-weight: 700; }
.eyebrow { margin-bottom: 12px; color: var(--cyan); font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.eyebrow.danger { color: var(--danger); }
.lead { max-width: 580px; color: var(--muted); font-size: 16px; line-height: 1.55; }

.player-count, .phase-progress { margin-top: 14px; padding: 10px 14px; border-radius: 999px; color: #d9e4f8; background: rgba(255,255,255,.06); font-size: 13px; font-weight: 700; }

.form-message { min-height: 19px; margin: 0 0 6px; color: #ff9cb4; font-size: 13px; }

.role-panel { position: relative; }
.role-panel.imposter::before, .role-panel.imposter::after { content: "IMPOSTER"; position: absolute; top: 25%; left: 50%; transform: translate(-50%,-50%) rotate(-8deg); color: rgba(248,113,113,.08); font-size: clamp(45px, 16vw, 82px); font-weight: 800; letter-spacing: -.08em; pointer-events: none; }
.role-panel.imposter::after { transform: translate(-48%,-47%) rotate(-8deg); color: rgba(34,211,238,.05); }
.role-symbol { width: 116px; height: 116px; margin-bottom: 24px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 38px; color: white; background: var(--cyan); font-size: 54px; font-weight: 800; }
.role-panel.imposter .role-symbol { color: #2c0714; background: var(--coral); animation: glitch .8s steps(2,end) 2; }
.privacy-note { margin: 10px 0 24px; color: #71809c; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }

.decision-layout { min-height: calc(100dvh - 120px); width: 100%; margin: 0 auto; display: flex; flex-direction: column; }
.phase-line { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .09em; }
.phase-line strong { color: white; letter-spacing: 0; }
.decision-heading { margin: 22px 0 14px; text-align: center; }
.decision-heading h1 { font-size: clamp(24px, 6vw, 32px); }
.choice-card { min-height: clamp(300px, 45dvh, 430px); position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border: 0; border-radius: 0; overflow: visible; box-shadow: none; touch-action: pan-y; user-select: none; transition: transform .25s ease, opacity .25s ease; }
.choice-card.dragging { transition: none; }
.choice-card.swipe-demo { animation: swipe-cue 1.55s cubic-bezier(.45, 0, .2, 1) .3s both; }
.choice-card.swipe-demo .stamp-right { animation: swipe-cue-right 1.55s ease .3s both; }
.choice-card.swipe-demo .stamp-left { animation: swipe-cue-left 1.55s ease .3s both; }
.choice-card.submitted { opacity: .55; pointer-events: none; }
.choice-side { padding: clamp(20px, 5vw, 30px) clamp(14px, 4vw, 22px); display: flex; flex-direction: column; justify-content: center; align-items: center; border: 2px solid transparent; border-radius: 20px; color: var(--text); background: var(--panel); text-align: center; transition: border-color .2s, background .2s, transform .2s; }
.choice-side.left { color: var(--text); border-color: rgba(124,58,237,.42); background: var(--panel); }
.choice-side.right { color: var(--text); border-color: rgba(74,108,247,.42); background: var(--panel); }
.side-label { width: 40px; height: 40px; margin-bottom: 18px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--cyan); font-size: 12px; font-weight: 700; letter-spacing: 0; }
.choice-side.right .side-label { background: var(--coral); }
.choice-side p { max-width: 290px; margin: 0; font-size: clamp(16px, 4.3vw, 20px); line-height: 1.35; font-weight: 600; overflow-wrap: anywhere; }
.fork-divider { display: none; }
.swipe-stamp { position: absolute; z-index: 5; top: 18px; width: 58px; height: 58px; display: grid; place-items: center; border: 4px solid; border-radius: 17px; opacity: 0; font-size: 26px; font-weight: 800; }
.stamp-left { left: 18px; color: var(--cyan); border-color: var(--cyan); transform: rotate(-8deg); }
.stamp-right { right: 18px; color: var(--coral); border-color: var(--coral); transform: rotate(8deg); }
.swipe-hint { margin: 15px 0 11px; text-align: center; color: var(--muted); font-size: 12px; }
.swipe-hint span { color: white; }
.choice-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice-button { min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--line); border-radius: 18px; color: white; background: var(--panel); cursor: pointer; }
.choice-button span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: white; font-weight: 800; }
.choice-button.left span { background: var(--cyan); }
.choice-button.right span { background: var(--coral); }
.choice-button:disabled { opacity: .35; }
.choice-button.selected { opacity: 1; border-color: var(--coral); background: rgba(74,108,247,.15); box-shadow: none; }

#round-results-screen { padding: 0; overflow: hidden; }
.wyr-round-reveal { position: absolute; inset: 0; }
.wyr-round-reveal .rr-screen1,
.wyr-round-reveal .rr-screen2 { padding: calc(82px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom)); }
.wyr-round-reveal .rr-context-text { color: var(--muted); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.wyr-round-reveal .rr-context-subtext { margin-top: 12px; padding: 12px 14px; border-radius: 14px; color: white; background: rgba(124,58,237,.14); font-size: 14px; }
.wyr-round-reveal .rr-option { padding: 16px; border-radius: 18px; background: var(--panel); border-color: var(--line); }
.wyr-round-reveal .rr-option-text { font-size: 16px; line-height: 1.4; }
.wyr-round-reveal .rr-vote-count { color: var(--muted); }
.wyr-round-reveal .rr-badge-majority { color: white; background: var(--cyan); }
.wyr-round-reveal .rr-voter { background: var(--navy-2); }
.wyr-round-reveal .rr-lb-row { background: var(--panel); }
.wyr-round-reveal .rr-lb-row.rr-leading { border-color: var(--cyan); background: rgba(124,58,237,.18); }
.wyr-round-reveal .rr-lb-delta { color: var(--lime); }

.vote-scroll > h1, .reveal-scroll > h1, .final-scroll > h1 { font-size: clamp(28px, 7vw, 38px); }
.personal-result { margin: 20px 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.05); font-weight: 700; }
.personal-result.correct { color: #11230a; border-color: var(--lime); background: var(--lime); }
.personal-result.wrong { color: #ffe8ed; border-color: rgba(255,107,104,.45); background: rgba(185,54,82,.35); }
.avatar { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; color: white; background: #111d38; font-size: 10px; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.scoreboard, .vote-ledger, .question-ledger { margin-top: 22px; }
.scoreboard h2, .vote-ledger h2, .question-ledger h2 { font-size: 16px; }





.vote-scroll { text-align: center; }
.vote-scroll .lead { margin-left: auto; margin-right: auto; }
.phase-progress { display: inline-block; margin: 4px auto 18px; }
.candidate-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.candidate-button { min-height: 70px; display: flex; align-items: center; gap: 11px; padding: 10px; border: 1px solid var(--line); border-radius: 18px; color: white; background: var(--panel); text-align: left; cursor: pointer; }
.candidate-button .avatar { width: 42px; height: 42px; border-radius: 14px; }
.candidate-button.selected { color: #2c0714; border-color: var(--coral); background: var(--coral); }
.candidate-button:disabled { cursor: default; opacity: .55; }

.reveal-identity { margin: 8px 0 18px; display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid rgba(255,107,104,.45); border-radius: 22px; background: rgba(185,54,82,.2); }
.reveal-identity .avatar { width: 58px; height: 58px; border-radius: 18px; background: var(--coral-deep); }
.reveal-identity h1 { margin: 0; font-size: clamp(22px, 6vw, 36px); }
.reveal-identity p { margin: 5px 0 0; color: #ffbdc9; }
.vote-item { padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.vote-item strong { color: white; }
.question-pair { margin-bottom: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.035); }
.question-pair > span { color: var(--muted); font-size: 11px; font-weight: 800; }
.question-version { margin-top: 10px; padding-left: 10px; border-left: 3px solid var(--cyan); }
.question-version.imposter { border-left-color: var(--coral); }
.question-version b { display: block; margin-bottom: 3px; color: var(--muted); font-size: 10px; letter-spacing: .08em; }
.question-version p { margin: 0; font-size: 13px; line-height: 1.45; }

.final-scroll { text-align: center; padding-top: 4dvh; }
.final-symbol { width: 92px; height: 92px; margin: 0 auto 22px; display: grid; place-items: center; border-radius: 30px; color: var(--navy); background: linear-gradient(135deg,var(--cyan),var(--coral)); font-size: 46px; }
.final-scoreboard { margin: 24px 0; text-align: left; }
.final-scoreboard .score-item:first-child { border-color: var(--cyan); }

.connection-overlay { --rp-connection-z: 80; --rp-connection-gap: 12px; --rp-connection-color: var(--muted); --rp-connection-bg: rgba(7,17,38,.94); text-align: center; } /* base: ../connection-overlay.css */
.spinner { width: 42px; height: 42px; border: 3px solid rgba(255,255,255,.1); border-top-color: var(--cyan); border-radius: 50%; animation: spin .8s linear infinite; }
/* Shared toast (../toast.css), keeping this game's crimson pill. */
.rp-toast { --rp-toast-bg: #a42f4a; --rp-toast-color: #fff; --rp-toast-border: 0; --rp-toast-radius: 14px; --rp-toast-padding: 12px 16px; --rp-toast-shadow: none; --rp-toast-font-size: 16px; --rp-toast-font-weight: 700; --rp-toast-max-width: calc(100% - 36px); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes screen-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.1); } }
@keyframes orbit { to { transform: translate(92px, 95px) rotate(180deg); } }
@keyframes glitch { 20% { transform: translate(3px,-2px) skewX(5deg); } 40% { transform: translate(-4px,2px); } 70% { transform: translate(2px,1px) skewX(-4deg); } }
/* Same cue as «Я никогда не»: right, back, left, back, with the matching stamp. */
@keyframes swipe-cue { 0%,43%,88%,100% { transform: translate3d(0,0,0) rotate(0); } 24% { transform: translate3d(34px,0,0) rotate(2.6deg); } 69% { transform: translate3d(-34px,0,0) rotate(-2.6deg); } }
@keyframes swipe-cue-right { 0%,8%,43%,100% { opacity: 0; } 24%,31% { opacity: .92; } }
@keyframes swipe-cue-left { 0%,49%,88%,100% { opacity: 0; } 69%,76% { opacity: .92; } }

@media (max-width: 520px) {
  .choice-card { min-height: 330px; }
  .choice-side { padding: 24px 13px; }
  .choice-side p { font-size: 17px; }
  .choice-button strong { font-size: 12px; }
  .candidate-grid { grid-template-columns: 1fr; }
}

@media (orientation: landscape) and (max-height: 620px) {
  .screen { padding-top: calc(64px + env(safe-area-inset-top)); }
  .decision-layout { min-height: auto; }
  .choice-card { min-height: 260px; }
  .role-symbol { width: 76px; height: 76px; border-radius: 24px; font-size: 38px; margin-bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .choice-card.swipe-demo, .choice-card.swipe-demo .swipe-stamp { animation: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
/* Explicit gameplay overrides: swipe choices, private role, full-screen reveal. */
.screen { position: relative; }
#round-results-screen { height: var(--app-height, 100dvh); }
/* Shared preparation geometry; only game content below keeps special layouts. */
#onboarding-screen { padding: 0; height: auto; overflow: visible; }
#onboarding-screen .onboarding-container { min-height: 100dvh; padding: calc(64px + env(safe-area-inset-top, 0px)) 24px calc(24px + env(safe-area-inset-bottom, 0px)); }
#onboarding-screen .onboarding-dots { margin-top: 24px; }
#onboarding-screen .dot { border: 0; padding: 0; position: relative; }
#onboarding-screen .dot::before { content: ""; position: absolute; inset: -19px -5px; }
#config-screen, #waiting-screen { padding: 0; height: auto; min-height: 100dvh; }
/* Pack gallery: screen-tall, the gallery scrolls and Play stays pinned at the bottom. */
#config-screen.packs-illustrated-screen { height: 100vh; height: var(--app-height, 100dvh); min-height: 0; overflow: hidden; }
#config-screen .screen-content, #waiting-screen .screen-content { padding-top: calc(80px + env(safe-area-inset-top, 0px)); }
#waiting-copy { text-align: center; color: var(--text-secondary); margin: 24px 0; }

/* Onboarding: animated flat SVG characters (static copies via <picture> for reduced motion). */
#onboarding-screen .slide-icon { width: min(240px, 55vw); margin-bottom: 18px; font-size: 0; line-height: 0; }
#onboarding-screen .slide-icon picture,
#onboarding-screen .slide-icon img { display: block; width: 100%; height: auto; }
@media (max-height: 600px) {
  #onboarding-screen .slide-icon { width: 120px; margin-bottom: 8px; }
}

/* Premium sample (shared .rp-premium-teaser chip and .rp-premium-cta button): placement only. */
.decision-layout > .wyr-teaser-chip { align-self: center; margin: 0 auto 10px; }
.decision-layout > .wyr-teaser-cta { width: 100%; }
/* /wouldyourather/wyr-theme.css */
/* Game Theme only. Palette: COMMON/roomplay-palettes.html / wouldyourather.
   bg #006BCB, surface #FFFFFF, accent #CA003D, secondary #00BCE9; side A = blue/cyan, side B = crimson/orange.
   Side colours are equal choices, never right/wrong; success/error tokens are unchanged. */
:root {
  /* Answer and gender tones: COMMON/roomplay-palettes.html / wouldyourather (correct, wrong, male, female). */
  --rp-correct: #72feb5;
  --rp-correct-ink: #17191f;
  --rp-wrong: #fdd2d3;
  --rp-wrong-ink: #17191f;
  --rp-male: #03bdea;
  --rp-female: #f77cb0;
  --bg-primary: #006bcb;
  --bg-secondary: #004e99;
  --bg-card: #004e99;
  --text-primary: #ffffff;
  --text-secondary: #e8f3ff;
  --text-placeholder: #b8d8f5;
  --accent-purple: #ca003d;
  --accent-purple-dark: #a30031;
  --accent-blue: #ca003d;
  --wyr-ink: #17191f;
  --wyr-surface: #ffffff;
  --wyr-a: #00bce9;
  --wyr-a-strong: #006bcb;
  --wyr-b: #ca003d;
  --wyr-b-hot: #f5004c;
  --wyr-b-warm: #ff5a00;
  --navy: #006bcb;
  --navy-2: #004e99;
  --panel: #004e99;
  --line: rgba(255, 255, 255, .22);
  --muted: #e8f3ff;
  --cyan: var(--wyr-a);
  --cyan-deep: #0096ba;
  --coral: var(--wyr-b);
  --coral-deep: #a30031;
  --settings-accent: #ca003d;
  --settings-accent-dark: #a30031;
  --onboarding-accent: #ca003d;
  --onboarding-accent-dark: #ca003d;
  --onboarding-shadow: transparent;
  --onboarding-shadow-hover: transparent;
  --packs-accent: #ffffff;
  --packs-feedback-rgb: 255, 255, 255;
}
html, body[data-rp-game="wouldyourather"], .page-loader { background: var(--bg-primary); }

/* Shared actions: crimson primary, white outline secondary (crimson text would vanish on blue). */
[data-rp-game="wouldyourather"] .btn-play,
[data-rp-game="wouldyourather"] .btn-next-slide { background: var(--wyr-b); color: #fff; box-shadow: none; }
[data-rp-game="wouldyourather"] .btn-play:disabled { background: var(--bg-secondary); color: var(--text-secondary); }
[data-rp-game="wouldyourather"] .btn-join,
[data-rp-game="wouldyourather"] .btn-skip,
[data-rp-game="wouldyourather"] .btn-additional-settings { border-color: #fff; color: #fff; background: transparent; }
/* Same one-line label as the other games; the rounds summary stays for screen readers. */
[data-rp-game="wouldyourather"] #rounds-settings-value { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-rp-game="wouldyourather"] .dot { background: rgba(255, 255, 255, .38); }
[data-rp-game="wouldyourather"] .dot.active { background: #fff; }
[data-rp-game="wouldyourather"] .player-avatar { background: var(--wyr-a); color: var(--wyr-ink); }
[data-rp-game="wouldyourather"] .packs-summary,
[data-rp-game="wouldyourather"] .input { background: var(--bg-secondary); color: #fff; }
[data-rp-game="wouldyourather"] .packs-summary strong { color: #fff; }
[data-rp-game="wouldyourather"] .form-message { color: #ffd2dc; }

/* Labels and badges on cyan need dark ink (white on #00BCE9 is only 2.2:1). */
[data-rp-game="wouldyourather"] .eyebrow { color: #fff; }
[data-rp-game="wouldyourather"] .eyebrow.danger { display: inline-block; padding: 4px 10px; border-radius: 999px; color: #fff; background: var(--wyr-b); }
[data-rp-game="wouldyourather"] .timer-badge:not(.urgent) { color: var(--wyr-ink); background: var(--wyr-a); }
[data-rp-game="wouldyourather"] .role-symbol { color: var(--wyr-ink); background: var(--wyr-a); border-color: transparent; }
[data-rp-game="wouldyourather"] .role-panel.imposter .role-symbol { color: #fff; background: var(--wyr-b); }
[data-rp-game="wouldyourather"] .privacy-note { color: var(--text-secondary); }

/* Decision: white cards joined by the two colour fields from the palette preview. */
[data-rp-game="wouldyourather"] .phase-line strong { color: #fff; }
[data-rp-game="wouldyourather"] .choice-side { color: var(--wyr-ink); background: var(--wyr-surface); border: 0; position: relative; overflow: hidden; }
[data-rp-game="wouldyourather"] .choice-side::before { content: ""; position: absolute; inset: 0 0 auto; height: 10px; }
[data-rp-game="wouldyourather"] .choice-side.left,
[data-rp-game="wouldyourather"] .choice-side.right { color: var(--wyr-ink); background: var(--wyr-surface); }
[data-rp-game="wouldyourather"] .choice-side.left::before { background: linear-gradient(90deg, var(--wyr-a-strong), var(--wyr-a)); }
[data-rp-game="wouldyourather"] .choice-side.right::before { background: linear-gradient(90deg, var(--wyr-b-hot), var(--wyr-b-warm)); }
[data-rp-game="wouldyourather"] .side-label { width: auto; height: auto; min-height: 32px; padding: 7px 14px; border-radius: 999px; color: var(--wyr-ink); background: var(--wyr-a); font-size: 12px; letter-spacing: .06em; white-space: nowrap; }
[data-rp-game="wouldyourather"] .choice-side.right .side-label { color: #fff; background: var(--wyr-b); }
[data-rp-game="wouldyourather"] .stamp-left { color: var(--wyr-a-strong); border-color: var(--wyr-a-strong); }
[data-rp-game="wouldyourather"] .stamp-right { color: var(--wyr-b); border-color: var(--wyr-b); }
[data-rp-game="wouldyourather"] .swipe-hint { color: var(--text-secondary); }
[data-rp-game="wouldyourather"] .choice-button { color: var(--wyr-ink); background: var(--wyr-surface); border: 2px solid transparent; }
[data-rp-game="wouldyourather"] .choice-button.left span { color: var(--wyr-ink); background: var(--wyr-a); }
[data-rp-game="wouldyourather"] .choice-button.right span { color: #fff; background: var(--wyr-b); }
[data-rp-game="wouldyourather"] .choice-button.selected { border-color: var(--wyr-ink); background: var(--wyr-surface); box-shadow: 0 0 0 3px #fff; }

/* Round reveal and imposter screens on the darker blue panel. */
[data-rp-game="wouldyourather"] .wyr-round-reveal .rr-context-subtext { background: rgba(0, 0, 0, .18); }
[data-rp-game="wouldyourather"] .wyr-round-reveal .rr-badge-majority { color: var(--wyr-ink); background: var(--wyr-a); }
/* The leader's tilted card (cut-paper.css ::before): colours only, a background on the row doubles the card. */
[data-rp-game="wouldyourather"] .wyr-round-reveal .rr-lb-row.rr-leading { --paper-lead-line: #fff; --paper-lead-surface: rgba(255, 255, 255, .16); }
[data-rp-game="wouldyourather"] .candidate-button.selected { color: #fff; border-color: #fff; background: var(--wyr-b); }
[data-rp-game="wouldyourather"] .reveal-identity { border-color: var(--wyr-b); background: var(--wyr-b); }
[data-rp-game="wouldyourather"] .reveal-identity p { color: #ffe3ea; }
[data-rp-game="wouldyourather"] .reveal-identity .avatar { color: var(--wyr-ink); background: #fff; }
[data-rp-game="wouldyourather"] .avatar { background: var(--bg-primary); }
[data-rp-game="wouldyourather"] .question-pair { background: rgba(0, 0, 0, .12); }
[data-rp-game="wouldyourather"] .question-version { border-left-color: #fff; }
[data-rp-game="wouldyourather"] .question-version.imposter { border-left-color: var(--wyr-b-warm); }
[data-rp-game="wouldyourather"] .final-symbol { color: #fff; background: linear-gradient(105deg, var(--wyr-a-strong) 0%, var(--wyr-a) 49.5%, var(--wyr-b-hot) 50%, var(--wyr-b-warm) 100%); }
[data-rp-game="wouldyourather"] .final-scoreboard .score-item:first-child { border-color: #fff; }
[data-rp-game="wouldyourather"] .connection-overlay { color: #fff; background: rgba(0, 78, 153, .96); }
[data-rp-game="wouldyourather"] .spinner { border-color: rgba(255, 255, 255, .25); border-top-color: #fff; }

/* Exit confirmation and settings popups: same blue panel, crimson primary, white outline secondary.
   Colours go through the shared --rp-dialog-* tokens (assets/css/confirm-dialog.css). */
[data-rp-game="wouldyourather"] {
  --rp-dialog-overlay: rgba(0, 40, 82, .86);
  --rp-dialog-bg: var(--bg-secondary);
  --rp-dialog-border: 1px solid var(--line);
  --rp-dialog-title: #fff;
  --rp-dialog-text: var(--text-secondary);
  --rp-dialog-primary-bg: var(--wyr-b);
  --rp-dialog-primary-text: #fff;
  --rp-dialog-secondary-border: #fff;
  --rp-dialog-secondary-text: #fff;
  --rp-dialog-control-bg: rgba(255, 255, 255, .1);
  --rp-dialog-control-btn-bg: rgba(255, 255, 255, .16);
  --rp-dialog-control-btn-active: rgba(255, 255, 255, .26);
  --rp-dialog-toggle-bg: rgba(255, 255, 255, .16);
}

/* Pack choice arrow: COMMON/roomplay-palettes.html / wouldyourather accent #CA003D. */
:root {
    --packs-cue-color: #CA003D;
}

/* Like / dislike / report under the dilemma (shared content-report.css), shown after this phone answered.
   White on the blue field; the pressed thumb turns filled white. */
:root {
  --rp-report-text: #fff;
  --rp-report-muted: var(--text-secondary);
  --rp-report-accent: #fff;
  --rp-report-accent-ink: var(--wyr-ink);
  --rp-report-surface: var(--bg-secondary);
  --rp-report-line: rgba(255, 255, 255, .22);
  --rp-report-chip: rgba(255, 255, 255, .1);
  --rp-report-flag: rgb(255 255 255 / 62%);
  --rp-report-error: var(--rp-wrong);
}
/* Thumbs sit in a white pill on the bottom seam of the two option halves, the flag in the
   bottom-right corner of the dilemma card. The answered card fades only its halves, so the
   thumbs and the flag stay crisp and tappable (the card itself stops taking presses). */
[data-rp-game="wouldyourather"] .choice-card.submitted { opacity: 1; }
[data-rp-game="wouldyourather"] .choice-card.submitted > .choice-side { opacity: .55; }
[data-rp-game="wouldyourather"] .choice-card:has(.wyr-card-vote:not([hidden])) > .choice-side { padding-bottom: 64px; }
[data-rp-game="wouldyourather"] .wyr-card-vote { position: absolute; left: 50%; bottom: 10px; z-index: 6; margin: 0; padding: 0 4px; gap: 2px; transform: translateX(-50%); border-radius: 999px; background: var(--wyr-surface); box-shadow: 0 4px 14px rgb(0 40 120 / 28%); pointer-events: auto; }
[data-rp-game="wouldyourather"] .wyr-card-vote .rp-card-vote__btn { color: rgb(23 25 31 / 50%); }
[data-rp-game="wouldyourather"] .wyr-card-vote .rp-card-vote__btn[aria-pressed="true"] { color: var(--wyr-a-strong); }
[data-rp-game="wouldyourather"] .wyr-card-vote .rp-card-vote__btn:active { background: rgb(23 25 31 / 8%); }
[data-rp-game="wouldyourather"] .wyr-report-flag { position: absolute; right: 4px; bottom: 6px; z-index: 6; color: rgb(23 25 31 / 55%); pointer-events: auto; }
[data-rp-game="wouldyourather"] .wyr-report-flag[hidden] { display: none; }

/* ── The /tv/ look on the phones (owner 2026-10-29: «на 1 игре применить оформление с tv на мобайл», after the
   Квиз of Black#729) ──
   Background: the big soft spheres drifting at the edges (particles.js, body[data-rp-spheres]); their colours and
   fading come from the shared rule in particles.js (the game's palette, scripts/generate-sphere-colors.js). */

/* Cut paper: the two sides, the buttons and the boards are hand-cut pieces with uneven corners, a slight tilt
   and a hard shadow without blur. Tilt and shift use the separate `rotate` / `translate` properties, so the swipe
   (`transform` on the card) and the press still work. Round leaderboard rows stay straight boxes:
   reveal-results.js measures them to slide overtakes (Black#722), so their card is a ::before. */
body[data-rp-game="wouldyourather"] {
  /* The shared cut paper (cut-paper.css, <body data-rp-paper>) in the game's colours: the /tv/ «gold» is side A. */
  --paper-gold: var(--wyr-a);
  --paper-surface: var(--rr-surface, rgb(255 255 255 / 10%));
  --paper-line: rgb(255 255 255 / 22%);
  --paper-lead-surface: rgb(255 255 255 / 18%);
  --paper-lead-line: #fff;
  --paper-lead-shadow: 5px 6px 0 color-mix(in srgb, var(--wyr-a) 55%, #000);
  --cut-shadow: 4px 5px 0 rgb(0 0 0 / 30%);
}
/* The sides as on /tv/: A cyan with ink text, B crimson with white text (equal choices, never right or wrong). */
[data-rp-game="wouldyourather"] .choice-side::before { display: none; }
[data-rp-game="wouldyourather"] .choice-side { overflow: visible; box-shadow: var(--cut-shadow); }
[data-rp-game="wouldyourather"] .choice-side.left { color: var(--wyr-ink); background: var(--wyr-a); border-radius: var(--cut-1); rotate: -1.4deg; }
[data-rp-game="wouldyourather"] .choice-side.right { color: #fff; background: var(--wyr-b); border-radius: var(--cut-3); rotate: 1.3deg; translate: 0 8px; }
[data-rp-game="wouldyourather"] .choice-side p { font-weight: 700; text-wrap: balance; }
[data-rp-game="wouldyourather"] .side-label,
[data-rp-game="wouldyourather"] .choice-side.right .side-label { color: var(--wyr-ink); background: #fff; border-radius: 12px 8px 13px 7px / 8px 12px 7px 13px; rotate: -3deg; box-shadow: 2px 3px 0 rgb(0 0 0 / 22%); }
[data-rp-game="wouldyourather"] .choice-side.right .side-label { color: var(--wyr-b); rotate: 3deg; }
[data-rp-game="wouldyourather"] .fork-divider { display: grid; place-items: center; position: absolute; z-index: 4; left: 50%; top: 50%; translate: -50% -50%; pointer-events: none; }
[data-rp-game="wouldyourather"] .choice-card.submitted .fork-divider { opacity: .55; }
[data-rp-game="wouldyourather"] .fork-divider span { display: block; padding: 8px 11px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; font-family: var(--font-display); font-weight: 800; color: var(--wyr-ink); background: #fff; border-radius: 46% 54% 50% 50% / 54% 46% 54% 46%; rotate: -6deg; box-shadow: 2px 3px 0 rgb(0 0 0 / 26%); }
[data-rp-game="wouldyourather"] .swipe-stamp { background: #fff; }
[data-rp-game="wouldyourather"] .choice-button { border-radius: var(--cut-2); box-shadow: var(--cut-shadow); rotate: -.8deg; }
[data-rp-game="wouldyourather"] .choice-button.right { border-radius: var(--cut-4); rotate: .8deg; }
[data-rp-game="wouldyourather"] .choice-button span { border-radius: 46% 54% 50% 50% / 54% 46% 54% 46%; rotate: -6deg; font-family: var(--font-display); font-weight: 800; }
[data-rp-game="wouldyourather"] .choice-button.selected { box-shadow: 0 0 0 3px #fff, 5px 6px 0 rgb(0 0 0 / 34%); }
/* A new dilemma deals its two sides: each drops from a little above with a turn and settles with a bounce
   (main.ts restarts it per dilemma and plays a «tok» as each lands, on the host's phone). */
[data-rp-game="wouldyourather"] .choice-card.is-dealing .choice-side { animation: wyr-cut-in .55s cubic-bezier(.3, 1.45, .5, 1) backwards; }
[data-rp-game="wouldyourather"] .choice-card.is-dealing .choice-side.right { animation-delay: .14s; }
[data-rp-game="wouldyourather"] .choice-card.is-dealing .fork-divider span { animation: wyr-pop .45s .3s cubic-bezier(.2, .8, .2, 1) backwards; }
@keyframes wyr-cut-in { from { opacity: 0; transform: translateY(-22px) rotate(-5deg) scale(1.05); } }
@keyframes wyr-pop { from { opacity: 0; transform: scale(.4) rotate(-20deg); } }
/* Reveal, round leaderboard and final board: the shared cut paper. */
/* Impostor screens: cut cards. */
[data-rp-game="wouldyourather"] :is(.candidate-button, .question-pair) { border-radius: var(--cut-1); box-shadow: var(--cut-shadow); rotate: -.5deg; }
[data-rp-game="wouldyourather"] :is(.candidate-button, .question-pair):nth-child(even) { border-radius: var(--cut-2); rotate: .6deg; translate: 3px 0; }
[data-rp-game="wouldyourather"] .reveal-identity { border-radius: var(--cut-3); box-shadow: 5px 6px 0 rgb(0 0 0 / 30%); rotate: -1deg; }
@media (prefers-reduced-motion: reduce) {
  [data-rp-game="wouldyourather"] .choice-card.is-dealing :is(.choice-side, .fork-divider span) { animation: none; }
}

/* «Полоска очков» (shared/client/score-strip.ts): the shared purple score is the page colour here, so the numbers
   take the text colour to stay readable on the chips. */
.rp-score-strip .mini-score-value { color: var(--text-primary); }
/* /cut-paper.css */
/* «Вырезанная бумага» — the /tv/ look on the phones and the PC (owner 2026-10-29: «на тел, пк и тв стили должны
   выглядеть одинаково… за образец возьми тв»; one shared file since 2026-10-29: «почему не применяется
   переиспользование?»). Opt in with <body data-rp-paper> and load this file AFTER the game's theme CSS.

   Answers, the reveal's answers and the boards are hand-cut pieces as on /tv/ (tv/style.css): uneven corners in
   turn, a slight tilt, a hard shadow without blur. The tilt is the separate `rotate`, so a press (`scale` /
   `translate`) and a stamp or shake (`transform`) still work. The round leaderboard rows stay straight boxes:
   reveal-results.js measures them to slide overtakes (a tilted row measures taller and jumps, Black#722), so their
   card is a ::before. Never tilt an element reveal-results.js measures.

   A game sets only its colours, on [data-rp-game="<game>"] in its theme:
     --paper-gold          the /tv/ «gold» of the game: the pick, the leader, the round scores (required)
     --paper-surface       the leaderboard card            (default: a light veil)
     --paper-line          its edge                        (default: white 10 %)
     --paper-line-width    its edge width                  (default: 1px)
     --paper-lead-surface  the leader's card               (default: --paper-surface)
     --paper-lead-line     the leader's edge               (default: --paper-gold)
     --paper-lead-shadow   the pick's / leader's shadow    (default: --paper-gold darkened)
     --cut-shadow          the plain card's shadow         (default: black 34 %)
   Game-only pieces (the board of «100 к 1», «VS» of «Смехлыст», the sides of «Что бы ты выбрал?») stay in the
   game's theme and use the tokens below; an override there needs `body[data-rp-game="…"]` to win over this file.

   Dealing: shared/client/tv-look.ts `deal()` puts `.rp-dealing` on a container for a moment; its children drop in
   one by one. */
[data-rp-paper] {
  /* The /tv/ display font (tv/style.css --font-display): letters, numbers, stamps. */
  --font-display: 'Unbounded', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cut-1: 18px 9px 16px 11px / 11px 17px 9px 15px;
  --cut-2: 10px 17px 10px 18px / 17px 10px 16px 9px;
  --cut-3: 16px 11px 19px 9px / 9px 15px 11px 18px;
  --cut-4: 9px 18px 11px 16px / 16px 9px 18px 11px;
  --cut-shadow: 4px 5px 0 rgb(0 0 0 / 34%);
  --paper-lead-shadow: 5px 6px 0 color-mix(in srgb, var(--paper-gold, #ffd43a) 65%, #000);
}

/* Cards: answers, the reveal's answers, the final boards (also the shared game-end board, .leader-row). */
[data-rp-paper] :is(.quiz-option, .rr-option, .score-item, .leader-row) { border-radius: var(--cut-1); box-shadow: var(--cut-shadow); rotate: -.6deg; }
[data-rp-paper] :is(.quiz-option, .rr-option, .score-item, .leader-row):nth-child(4n + 2) { border-radius: var(--cut-2); rotate: .7deg; }
[data-rp-paper] :is(.quiz-option, .rr-option, .score-item, .leader-row):nth-child(4n + 3) { border-radius: var(--cut-3); rotate: -.35deg; }
[data-rp-paper] :is(.quiz-option, .rr-option, .score-item, .leader-row):nth-child(4n + 4) { border-radius: var(--cut-4); rotate: .45deg; }
/* Board rows turn half as much as answer cards (owner 2026-10-29: «расброс наклона меньше»; /tv/ the same). */
[data-rp-paper] :is(.score-item, .leader-row) { rotate: -.3deg; }
[data-rp-paper] :is(.score-item, .leader-row):nth-child(4n + 2) { rotate: .35deg; }
[data-rp-paper] :is(.score-item, .leader-row):nth-child(4n + 3) { rotate: -.18deg; }
[data-rp-paper] :is(.score-item, .leader-row):nth-child(4n + 4) { rotate: .22deg; }
[data-rp-paper] .quiz-option.selected { box-shadow: var(--paper-lead-shadow); }
[data-rp-paper] :is(.quiz-option.correct, .rr-option.rr-type-correct) { box-shadow: 5px 6px 0 color-mix(in srgb, var(--rp-correct, #4ade80) 50%, #000); }
[data-rp-paper] .quiz-option.wrong { box-shadow: 4px 5px 0 color-mix(in srgb, var(--rp-wrong, #f87171) 45%, #000); }
/* The answer letter: a stamp, cut too and turned the other way (tv .tv-option-letter). */
[data-rp-paper] .option-letter {
  border-radius: 46% 54% 50% 50% / 54% 46% 54% 46%; rotate: -6deg;
  box-shadow: 2px 3px 0 rgb(0 0 0 / 30%); font-family: var(--font-display); font-weight: 800;
}
[data-rp-paper] .quiz-option:nth-child(even) .option-letter { rotate: 5deg; border-radius: 54% 46% 46% 54% / 46% 54% 50% 50%; }
/* Final board: the winner leans out with the game's gold shadow. */
[data-rp-paper] :is(.score-item, .leader-row):first-child { rotate: -.6deg; box-shadow: var(--paper-lead-shadow); }
/* The game-end board scrolls (game-end.css: overflow-y auto), which clips the tilted rows and their shadows: room for
   them inside the list (--cut-room, as in question-stage.css), taken back from the card's padding so nothing moves. */
[data-rp-paper] .leaderboard {
  margin: calc(-1 * var(--cut-room, 10px));
  padding: var(--cut-room, 10px);
}

/* Dealing: each card drops from a little above with a turn and settles with a bounce, 80 ms apart. */
[data-rp-paper] .rp-dealing > * {
  animation: rp-cut-in .5s cubic-bezier(.3, 1.45, .5, 1) backwards;
  animation-delay: calc(60ms + var(--deal, 0) * 80ms);
}
[data-rp-paper] .rp-dealing > :nth-child(2) { --deal: 1; }
[data-rp-paper] .rp-dealing > :nth-child(3) { --deal: 2; }
[data-rp-paper] .rp-dealing > :nth-child(4) { --deal: 3; }
[data-rp-paper] .rp-dealing > :nth-child(5) { --deal: 4; }
[data-rp-paper] .rp-dealing > :nth-child(6) { --deal: 5; }
[data-rp-paper] .rp-dealing > :nth-child(n + 7) { --deal: 6; }
@keyframes rp-cut-in { from { opacity: 0; transform: translateY(-18px) rotate(-4deg) scale(1.04); } }

/* Round leaderboard: the row box stays straight, its cut-paper card behind the content turns and shifts; the
   leader leans out with the gold edge and shadow (tv .rr-lb-row). */
[data-rp-paper] .rr-lb-row {
  --paper-row-bg: var(--paper-surface, rgb(255 255 255 / 6%)); --paper-row-line: var(--paper-line, rgb(255 255 255 / 10%));
  --paper-tilt: -.3deg; --paper-shift: -1.5px 0; --paper-cut: var(--cut-1); --paper-row-shadow: var(--cut-shadow);
  isolation: isolate; background: none; border-color: transparent;
}
[data-rp-paper] .rr-lb-row:nth-child(4n + 2) { --paper-tilt: .35deg; --paper-shift: 2px .5px; --paper-cut: var(--cut-2); }
[data-rp-paper] .rr-lb-row:nth-child(4n + 3) { --paper-tilt: -.18deg; --paper-shift: 1px -.5px; --paper-cut: var(--cut-3); }
[data-rp-paper] .rr-lb-row:nth-child(4n + 4) { --paper-tilt: .22deg; --paper-shift: -2px .5px; --paper-cut: var(--cut-4); }
[data-rp-paper] .rr-lb-row.rr-leading {
  border-color: transparent; background: none;
  --paper-row-bg: var(--paper-lead-surface, var(--paper-surface, rgb(255 255 255 / 10%)));
  --paper-row-line: var(--paper-lead-line, var(--paper-gold));
  --paper-tilt: -.6deg; --paper-shift: -2.5px -.5px; --paper-row-shadow: var(--paper-lead-shadow);
}
[data-rp-paper] .rr-lb-row::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: var(--paper-cut); background: var(--paper-row-bg);
  border: var(--paper-line-width, 1px) solid var(--paper-row-line); box-shadow: var(--paper-row-shadow);
  rotate: var(--paper-tilt); translate: var(--paper-shift);
  transition: rotate .5s cubic-bezier(.3, 1.4, .5, 1), translate .5s ease, border-radius .5s ease, box-shadow .4s ease, border-color .3s ease, background-color .3s ease;
}
/* The round's scores in the game's gold, as on /tv/ (tv/style.css .rr-lb-score). */
[data-rp-paper] .rr-lb-score { color: var(--paper-gold); }

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

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

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

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

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

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

@keyframes rp-m-character-arrive { from { opacity: 0; scale: .82; rotate: -10deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes rp-m-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rp-m-pop { 0% { transform: scale(.965); } 55% { transform: scale(1.018); } 100% { transform: scale(1); } }
@keyframes rp-m-pop-in { from { opacity: 0; scale: .8; translate: 0 6px; } to { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes rp-m-nod { 0%, 100% { rotate: 0deg; } 35% { rotate: -8deg; } 70% { rotate: 5deg; } }
@keyframes rp-m-paper-arrive { from { opacity: 0; translate: 0 14px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes rp-m-stamp-in { from { opacity: 0; scale: 1.45; } to { opacity: 1; scale: 1; } }
@keyframes rp-m-answer-stamp { 0% { scale: .94; } 65% { scale: 1.025; } 100% { scale: 1; } }
/* /game-header.css */
/*
 * «Шапка игры» (shared/client/game-header.ts, bundle /game-header.js): one top bar in every game.
 *   [menu]   [cube + roomplay]   [timer]
 * Fixed at the top; on its screens the game's own back arrow, pause button and «Ещё игры» cube are
 * hidden ([data-rp-gh-hidden]). A game theme sets only tokens, never the classes:
 *   --rp-gh-ink         icons, logo text, timer text (default: the page's --text-primary, else white)
 *   --rp-gh-chip        button and timer background (default: the ink at 14 %)
 *   --rp-gh-line        button border (default: the ink at 24 %)
 *   --rp-gh-timer-bg / --rp-gh-timer-ink   the timer chip (default: chip / ink)
 *   --rp-gh-low         the timer at 5 s and less (default: #ff4d5e)
 *   --rp-gh-space       where the header's screens start (padding-top), under the bar
 * The menu card and the actions it adds to a pause card use the pause screen's fixed dark palette
 * (pause-overlay.css).
 */
:root {
    --rp-gh-space: calc(80px + env(safe-area-inset-top, 0px));
}

.rp-game-header {
    --rp-gh-ink-v: var(--rp-gh-ink, var(--text-primary, #ffffff));
    position: fixed;
    z-index: 70;
    top: calc(12px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: min(100%, 560px);
    box-sizing: border-box;
    padding: 0 16px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) minmax(44px, auto);
    align-items: center;
    gap: 8px;
    height: 48px;
    color: var(--rp-gh-ink-v);
    font-family: 'Manrope', var(--font-body, system-ui), sans-serif;
    pointer-events: none;
}
.rp-game-header[hidden] { display: none; }
.rp-game-header > * { pointer-events: auto; }

.rp-gh-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-color: var(--rp-gh-line, color-mix(in srgb, var(--rp-gh-ink-v) 24%, transparent));
    background: rgba(255, 255, 255, 0.14);
    background: var(--rp-gh-chip, color-mix(in srgb, var(--rp-gh-ink-v) 14%, transparent));
    color: inherit;
    display: grid;
    place-items: center;
    font-size: 22px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: transform 0.15s ease;
}
.rp-gh-btn:active { transform: scale(0.9); }

.rp-gh-brand {
    /* Centred on the screen whatever the timer's width. */
    position: absolute;
    left: 50%;
    top: 2px;
    transform: translateX(-50%);
    max-width: calc(100% - 2 * (16px + 44px + 12px));
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 10px 0 4px;
    border: 0;
    border-radius: 22px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease;
}
.rp-gh-brand:active { transform: translateX(-50%) scale(0.94); }
.rp-gh-cube {
    width: 34px;
    height: 34px;
    object-fit: contain;
    flex: none;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}
.rp-gh-word {
    font-family: 'Unbounded', 'Manrope', system-ui, sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp-gh-timer {
    grid-column: 3;
    justify-self: end;
    min-width: 44px;
    height: 44px;
    box-sizing: border-box;
    padding: 0 10px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.14);
    background: var(--rp-gh-timer-bg, var(--rp-gh-chip, color-mix(in srgb, var(--rp-gh-ink-v) 14%, transparent)));
    color: var(--rp-gh-timer-ink, inherit);
    font-size: 18px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.rp-gh-timer[hidden] { display: none; }
.rp-gh-timer--low {
    background: var(--rp-gh-low, #ff4d5e);
    color: #ffffff;
    animation: rp-gh-low 1s ease-in-out infinite;
}
@keyframes rp-gh-low {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

/* The header's screens start under the bar, the same distance in every game (it replaces the room
   each game kept for its own back arrow). */
html.rp-has-game-header .screen.rp-gh-screen { padding-top: var(--rp-gh-space) !important; }
/* Online games pad their .screen-content instead; the round reveal (reveal-results.css) covers the
   screen absolutely. Both start under the bar too. */
html.rp-has-game-header .screen.rp-gh-screen > .screen-content { padding-top: 0 !important; }
html.rp-has-game-header .screen.rp-gh-screen .rr-container { top: var(--rp-gh-space); }
/* An in-flow reveal (.rr-flow) already sits under the bar with the content above it. */
html.rp-has-game-header .screen.rp-gh-screen .rr-flow > .rr-container { top: auto; }
/* The round row of the game template (.game-header: round badge, timer) kept room for the old back
   arrow on the left; the arrow is gone. */
html.rp-has-game-header .screen.rp-gh-screen .game-header { padding-left: 0 !important; }

/* What the header replaces on its screens. */
[data-rp-gh-hidden] { display: none !important; }

/* The menu card (guests, games without a pause) and the actions on every pause card. */
.rp-gh-menu-overlay.active { cursor: default; }
.rp-gh-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 2px;
}
.rp-gh-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 52px;
    padding: 0 18px;
    border-radius: 30px;
    border: 2px solid var(--rp-pause-line, rgba(255, 255, 255, 0.26));
    background: transparent;
    color: var(--rp-pause-ink, #ffffff);
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}
.rp-gh-exit {
    border-color: transparent;
    color: var(--rp-pause-muted, rgba(255, 255, 255, 0.74));
}
/* «Сообщить об ошибке»: a quiet link under the card's actions, not a third big button. */
.rp-gh-report {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    align-self: center;
    min-height: 40px;
    padding: 6px 12px;
    background: none;
    border: none;
    color: var(--rp-pause-muted, rgba(255, 255, 255, 0.74));
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    opacity: 0.8;
    cursor: pointer;
}
.rp-gh-report .rp-icon { font-size: 16px; }

/* The bug report form over the pause card (shared/client/bug-report.ts): the pause palette, above it. */
.rp-bug-overlay {
    --rp-pause-ink: #ffffff;
    --rp-pause-muted: rgba(255, 255, 255, 0.74);
    --rp-pause-chip: rgba(255, 255, 255, 0.12);
    --rp-pause-line: rgba(255, 255, 255, 0.26);
    position: fixed;
    inset: 0;
    z-index: 990;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
    box-sizing: border-box;
    overflow-y: auto;
    background: rgba(9, 11, 20, 0.94);
    color: var(--rp-pause-ink);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: rp-pause-in 220ms ease-out;
}
.rp-bug-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 360px;
    margin: auto;
    text-align: center;
}
.rp-bug-card [hidden] { display: none !important; }
.rp-bug-title { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.25; color: var(--rp-pause-ink); }
.rp-bug-text {
    width: 100%;
    box-sizing: border-box;
    min-height: 104px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid var(--rp-pause-line);
    background: var(--rp-pause-chip);
    color: var(--rp-pause-ink);
    font: inherit;
    font-size: 16px;
    line-height: 1.4;
    resize: vertical;
}
.rp-bug-text::placeholder { color: var(--rp-pause-muted); opacity: 0.8; }
.rp-bug-text:focus { outline: 2px solid var(--rp-pause-ink); outline-offset: 1px; }
.rp-bug-attach {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    border-radius: 30px;
    border: 2px dashed var(--rp-pause-line);
    background: transparent;
    color: var(--rp-pause-ink);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.rp-bug-preview { position: relative; align-self: center; }
.rp-bug-thumb {
    display: block;
    max-width: 160px;
    max-height: 160px;
    border-radius: 12px;
    border: 1px solid var(--rp-pause-line);
}
.rp-bug-remove {
    position: absolute;
    top: -10px;
    right: -10px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--rp-pause-line);
    background: #12131a;
    color: var(--rp-pause-ink);
    cursor: pointer;
}
.rp-bug-status { margin: 0; font-size: 14px; color: #ffb4b4; }
.rp-bug-overlay .rp-bug-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 4px;
    background: var(--rp-pause-ink);
    color: #12131a;
    border: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.rp-bug-overlay .rp-bug-send:disabled { opacity: 0.45; cursor: default; box-shadow: none; }

/* The header's «Выйти из игры» replaces the online pause's own exit link. */
.rp-pause-card:has(> .rp-gh-actions) > .rp-pause-exit { display: none; }

@media (prefers-reduced-motion: reduce) {
    .rp-gh-timer--low { animation: none; }
}
/* /player-avatar.css */
/* PlayerAvatar — «avatar + name» chip for one-phone games (player-avatar.js).
   Sizes follow the surrounding font, so the same markup works in a turn title and in a result row.
   The emoji/initial tile uses the game theme: --ps-accent (player setup accent) or --accent. */

.rp-player {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    max-width: 100%;
    min-width: 0;
    vertical-align: middle;
}

.rp-player-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rp-player-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.6em;
    height: 1.6em;
    border-radius: 50%;
    overflow: hidden;
    background: color-mix(in srgb, var(--ps-accent, var(--accent, #7c5cff)) 28%, transparent);
    color: inherit;
    font-size: 1em;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
    text-transform: none;
    letter-spacing: 0;
    user-select: none;
}

.rp-player-avatar--emoji {
    font-size: 0.95em;
    font-weight: 400;
}

.rp-player-avatar--initial,
.rp-player-avatar--image {
    font-size: 0.8em;
    width: 2em;
    height: 2em;
}

/* Photo/GIF avatars are cut-out stickers (transparent background), drawn like in online rooms
   (game-ui.css .player-avatar.has-photo): no tile, whole sticker, slightly enlarged past the box. */
.rp-player-avatar[data-rp-avatar-state="ready"] {
    background: none;
    overflow: visible;
    color: transparent;
}

.rp-player-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    transform: scale(1.25);
}

/* Larger hero variant: «Ход игрока …», role cards. */
.rp-player--lg .rp-player-avatar {
    width: 1.9em;
    height: 1.9em;
}

.rp-player--lg .rp-player-avatar--initial,
.rp-player--lg .rp-player-avatar--image {
    width: 2.375em;
    height: 2.375em;
}

/* Stacked variant: big avatar above the name (pass-the-phone screens). */
.rp-player--stack {
    flex-direction: column;
    gap: 0.25em;
}

.rp-player--stack .rp-player-name {
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
}
/* /game-intro.css */
/*
 * Intro screen before a game («заставка»): RoomPlay logo, game icon and name, the players, while the host
 * says the greeting; it leaves through a portal into round 1. Markup and timing:
 * client/assets/js/game-intro.js. Colours come from the game's *-theme.css: --bg-primary, --bg-secondary,
 * --text-primary, --text-secondary, --rp-intro-accent (falls back to --rp-countdown-accent, then
 * --onboarding-accent) and --rp-intro-glow (falls back to --onboarding-accent). No emoji, no text of its own.
 */
/* Not inherited: the hole grows every frame, and an inherited value would restyle every node of the intro each frame
   (the stutter after the intro, owner 2026-10-29). The rim (.rp-intro-portal) runs the same animation itself. */
@property --rp-intro-hole {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.rp-intro {
  --rp-in-accent: var(--rp-intro-accent, var(--rp-countdown-accent, var(--onboarding-accent, #a677ef)));
  --rp-in-glow: var(--rp-intro-glow, var(--onboarding-accent, var(--accent-primary, #6640ba)));
  --rp-in-ease: cubic-bezier(.2, .9, .3, 1.25);
  position: fixed;
  inset: 0;
  /* Over the speed games' start screen (995) and the game; below confirm dialogs (1000). */
  z-index: 996;
  overflow: hidden;
  color: var(--text-primary, #fff);
  font-family: var(--font-body, inherit);
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 38%, color-mix(in srgb, var(--rp-in-glow) 55%, transparent) 0, transparent 58%),
    linear-gradient(180deg, var(--bg-secondary, #211759) 0%, var(--bg-primary, #100f36) 70%);
  opacity: 0;
  transition: opacity 240ms ease-out;
  user-select: none;
  -webkit-user-select: none;
}
.rp-intro.visible { opacity: 1; }

.rp-intro-backdrop { position: absolute; inset: 0; pointer-events: none; }
/* The rim of the portal: a glowing ring just outside the hole, growing with it. */
.rp-intro-portal {
  position: absolute;
  left: var(--rp-intro-x, 50%);
  top: var(--rp-intro-y, 40%);
  width: calc(var(--rp-intro-hole) * 2 + 16px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  border: 5px solid var(--rp-in-accent);
  box-shadow: 0 0 24px 6px color-mix(in srgb, var(--rp-in-accent) 70%, transparent), inset 0 0 18px 2px color-mix(in srgb, var(--rp-in-accent) 60%, transparent);
  opacity: 0;
  pointer-events: none;
}
/* Spotlight rays turning slowly behind the icon. */
.rp-intro-rays {
  position: absolute;
  left: 50%;
  top: 38%;
  width: 190vmax;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rp-in-accent) 16%, transparent) 0deg 7deg, transparent 7deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .7) 18%, transparent 46%);
  mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .7) 18%, transparent 46%);
  opacity: 0;
}
/* Small sparks drifting up, scattered at random (game-intro.js sparksNode): no grid. */
.rp-intro-sparks {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.rp-intro-spark {
  position: absolute;
  width: var(--size, 3px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .8);
  box-shadow: 0 0 calc(var(--size, 3px) * 1.6) rgba(255, 255, 255, .45);
  opacity: calc(var(--glow, .7) * .8);
}
.rp-intro-spark.accent {
  background: color-mix(in srgb, var(--rp-in-accent) 85%, #fff);
  box-shadow: 0 0 calc(var(--size, 3px) * 2) color-mix(in srgb, var(--rp-in-accent) 70%, transparent);
}

.rp-intro-stage {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: max(20px, env(safe-area-inset-top)) 16px max(36px, env(safe-area-inset-bottom));
  box-sizing: border-box;
}
/* Everything but the logo, centred in the space under it. */
.rp-intro-main {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  gap: clamp(10px, 2.4vh, 20px);
  padding-top: 12px;
}

.rp-intro-brand {
  flex: none;
  width: clamp(120px, 34vw, 170px);
  height: auto;
  /* The wordmark is white: a soft shadow keeps it readable on light palettes too. */
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35));
}

.rp-intro-hero {
  position: relative;
  width: clamp(130px, 40vw, 190px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  perspective: 700px;
}
.rp-intro-icon {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 28%;
  object-fit: cover;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--rp-in-accent) 80%, transparent),
    0 18px 40px rgba(0, 0, 0, .45),
    0 0 60px color-mix(in srgb, var(--rp-in-accent) 45%, transparent);
}
.rp-intro-halo {
  position: absolute;
  inset: -8%;
  border-radius: 32%;
  border: 3px solid var(--rp-in-accent);
  opacity: 0;
}

.rp-intro-title {
  margin: 4px 0 0;
  max-width: 420px;
  font-family: var(--font-display, inherit);
  font-size: clamp(30px, 9vw, 46px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
  text-shadow: 0 6px 0 rgba(0, 0, 0, .22);
}
.rp-intro-word { display: inline-block; white-space: nowrap; }
.rp-intro-letter { display: inline-block; }

/* Sound bars: shown while the host speaks. */
.rp-intro-voice {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  opacity: 0;
  transition: opacity 200ms ease;
}
.rp-intro-voice i {
  width: 4px;
  height: 100%;
  border-radius: 2px;
  background: var(--rp-in-accent);
  transform: scaleY(.25);
}
.rp-intro.speaking .rp-intro-voice { opacity: 1; }

.rp-intro-players {
  list-style: none;
  margin: clamp(6px, 2vh, 16px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  max-width: 460px;
}
.rp-intro-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  background: color-mix(in srgb, var(--text-primary, #fff) 12%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--rp-in-accent) 50%, transparent);
}
.rp-intro-chip .rp-player { max-width: 40vw; }
.rp-intro-more { padding: 6px 14px; color: var(--text-secondary, rgba(255, 255, 255, .8)); }

/* How long until the game: fills over the intro's whole time. */
.rp-intro-progress {
  position: absolute;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  width: min(56vw, 240px);
  height: 4px;
  translate: -50% 0;
  border-radius: 2px;
  overflow: hidden;
  background: color-mix(in srgb, var(--text-primary, #fff) 16%, transparent);
}
.rp-intro-progress span {
  display: block;
  height: 100%;
  background: var(--rp-in-accent);
  transform-origin: left;
  transform: scaleX(0);
}
/* An animation, not a transition: a transition is skipped (the bar jumps to full) when the page hasn't styled
   the bar before `.visible` lands, e.g. the intro arrives while the tab is in the background. */
.rp-intro.visible .rp-intro-progress span { animation: rp-intro-progress var(--rp-intro-ms, 4000ms) linear forwards; }

/* Short screens (landscape phones, small phones): smaller icon and name so the players still fit. */
@media (max-height: 600px) {
  .rp-intro-stage { padding-top: max(10px, env(safe-area-inset-top)); }
  .rp-intro-main { gap: 8px; padding-top: 6px; }
  .rp-intro-brand { width: 110px; }
  .rp-intro-hero { width: min(21vh, 150px); }
  .rp-intro-title { font-size: clamp(24px, 6vh, 34px); }
  .rp-intro-players { max-width: 640px; margin-top: 2px; }
}

@media (prefers-reduced-motion: no-preference) {
  /* ---- Entrance ---- */
  .rp-intro.visible .rp-intro-rays { animation: rp-intro-fade 900ms ease-out both, rp-intro-spin 24s linear infinite; }
  .rp-intro.visible .rp-intro-sparks { animation: rp-intro-fade 900ms ease-out 300ms both; }
  .rp-intro-spark { animation: rp-intro-spark var(--dur, 6s) linear var(--delay, 0s) infinite; }
  .rp-intro.visible .rp-intro-brand { animation: rp-intro-brand-in 640ms var(--rp-in-ease) 80ms both; }
  .rp-intro.visible .rp-intro-icon { animation: rp-intro-icon-in 900ms cubic-bezier(.2, .8, .25, 1.15) 200ms both, rp-intro-float 2600ms ease-in-out 1100ms infinite; }
  .rp-intro.visible .rp-intro-halo { animation: rp-intro-halo 1800ms ease-out 900ms infinite; }
  .rp-intro.visible .rp-intro-halo.second { animation-delay: 1800ms; }
  .rp-intro.visible .rp-intro-letter { animation: rp-intro-letter-in 560ms var(--rp-in-ease) calc(620ms + var(--i) * 38ms) both; }
  .rp-intro.visible .rp-intro-chip { animation: rp-intro-deal 620ms var(--rp-in-ease) calc(1000ms + var(--i) * 110ms) both; }
  .rp-intro.speaking .rp-intro-voice i { animation: rp-intro-bar 700ms ease-in-out calc(var(--b) * -140ms) infinite alternate; }

  /* ---- Leaving: the portal ---- */
  .rp-intro.leaving {
    -webkit-mask: radial-gradient(circle at var(--rp-intro-x, 50%) var(--rp-intro-y, 40%), transparent var(--rp-intro-hole), #000 calc(var(--rp-intro-hole) + 1.5px));
    mask: radial-gradient(circle at var(--rp-intro-x, 50%) var(--rp-intro-y, 40%), transparent var(--rp-intro-hole), #000 calc(var(--rp-intro-hole) + 1.5px));
    animation: rp-intro-iris 620ms cubic-bezier(.65, 0, .35, 1) 200ms forwards;
  }
  .rp-intro.leaving .rp-intro-chip,
  .rp-intro.leaving .rp-intro-brand,
  .rp-intro.leaving .rp-intro-title,
  .rp-intro.leaving .rp-intro-voice {
    animation: rp-intro-fly 520ms cubic-bezier(.55, 0, .8, .2) both;
  }
  .rp-intro.leaving .rp-intro-chip { animation-delay: calc(var(--i) * 18ms); }
  .rp-intro.leaving .rp-intro-icon { animation: rp-intro-rush 820ms cubic-bezier(.6, -.25, .7, .2) both; }
  .rp-intro.leaving .rp-intro-halo { animation: rp-intro-shock 520ms ease-out both; }
  .rp-intro.leaving .rp-intro-halo.second { animation-delay: 90ms; }
  .rp-intro.leaving .rp-intro-rays { animation: rp-intro-spin-out 820ms ease-in both; }
  .rp-intro.leaving .rp-intro-progress { opacity: 0; transition: opacity 150ms; }
  .rp-intro.leaving .rp-intro-portal { opacity: 1; transition: opacity 120ms 200ms; animation: rp-intro-iris 620ms cubic-bezier(.65, 0, .35, 1) 200ms forwards; }
  /* The page under the opaque intro stands still (game-intro.js sets the class until the portal opens): its
     background bubbles and spinners would otherwise restyle every frame together with the intro's own animations. */
  html.rp-intro-covering body > :not(.rp-intro),
  html.rp-intro-covering body > :not(.rp-intro) * { animation-play-state: paused !important; }
}

@media (prefers-reduced-motion: reduce) {
  .rp-intro.visible .rp-intro-rays, .rp-intro.visible .rp-intro-sparks { opacity: 1; }
  .rp-intro.leaving { opacity: 0; transition-duration: 300ms; }
}

@keyframes rp-intro-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rp-intro-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rp-intro-spin { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes rp-intro-spark {
  0% { opacity: 0; transform: translate(0, 0) scale(.6); }
  20% { opacity: var(--glow, .7); }
  50% { transform: translate(var(--sway, 0px), calc(var(--rise, -120px) * .5)) scale(1); }
  80% { opacity: var(--glow, .7); }
  100% { opacity: 0; transform: translate(0, var(--rise, -120px)) scale(.6); }
}
@keyframes rp-intro-brand-in {
  from { opacity: 0; transform: translateY(-40px) scale(.8); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes rp-intro-icon-in {
  0% { opacity: 0; transform: rotateY(-540deg) rotateZ(-20deg) scale(.15); filter: brightness(2.2); }
  55% { opacity: 1; transform: rotateY(20deg) rotateZ(4deg) scale(1.14); filter: brightness(1.3); }
  78% { transform: rotateY(-8deg) rotateZ(-2deg) scale(.96); filter: brightness(1); }
  100% { opacity: 1; transform: none; }
}
@keyframes rp-intro-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes rp-intro-halo { 0% { opacity: .9; transform: scale(.92); } 100% { opacity: 0; transform: scale(1.45); } }
@keyframes rp-intro-letter-in {
  0% { opacity: 0; transform: translateY(.9em) rotateX(90deg) scale(.6); }
  60% { opacity: 1; transform: translateY(-.12em) rotateX(-12deg) scale(1.08); }
  100% { opacity: 1; transform: none; }
}
@keyframes rp-intro-deal {
  0% { opacity: 0; transform: translateY(70px) rotate(var(--tilt)) scale(.6); }
  65% { opacity: 1; transform: translateY(-6px) rotate(calc(var(--tilt) * -.3)) scale(1.05); }
  100% { opacity: 1; transform: none; }
}
@keyframes rp-intro-bar { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
/* The portal moves only transform and opacity (no filter, no border-width): a blur or brightness on the icon blown up
   ninefold, or a border growing, made the phone repaint every frame and the portal stuttered (owner 2026-10-29). */
@keyframes rp-intro-fly {
  to { opacity: 0; transform: translate(var(--fly-x, 0), var(--fly-y, -60vh)) rotate(var(--tilt, 12deg)) scale(.7); }
}
@keyframes rp-intro-rush {
  0% { transform: none; }
  22% { transform: scale(.82) rotate(-6deg); }
  100% { transform: scale(9) rotate(12deg); opacity: 0; }
}
@keyframes rp-intro-shock { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(4); } }
@keyframes rp-intro-spin-out { to { rotate: 160deg; scale: 1.6; opacity: 0; } }
@keyframes rp-intro-iris { from { --rp-intro-hole: 0px; } to { --rp-intro-hole: 150vmax; } }
/* /question-stage.css */
/* «Квиз» and «Угадай мелодию»: the question on the big screen, one look on the shared screen (/tv/) and on a PC
   player's stage (owner 2026-10-29: «версии некоторых экранов в ПК и ТВ почти не отличаются» → one code for both,
   after the «100 к 1» pilot, hundred-board.css). The markup and the moving part are shared/client/question-stage.ts;
   the page supplies the palette (--tv-surface, --tv-line, --accent, --accent-ink, --gold, --text-primary,
   --text-secondary, --rp-correct, --rp-wrong).

   The media on the left (the record, a picture, the four photos), the question and the answers A–D as hand-cut cards
   dealt in one by one: two by two, or one column next to media. A PC player's answers are buttons: hover lifts the
   card, the pick turns gold, the result green or red, the others fade. The .tv-option card is also the screen's
   card in its other views (Бредовуха, Каракули, Как хорошо ты меня знаешь?), so its base look lives here unscoped. */
.qs-root {
    --font-display: 'Unbounded', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* The /tv/ hand-cut corners (tv/style.css .tv). */
    --cut-1: 26px 12px 22px 16px / 16px 24px 12px 22px;
    --cut-2: 14px 24px 14px 26px / 24px 14px 22px 12px;
    --cut-3: 22px 16px 28px 12px / 12px 20px 16px 26px;
    --cut-4: 12px 26px 16px 22px / 22px 12px 26px 16px;
    --cut-shadow: 5px 6px 0 rgb(0 0 0 / 34%);
}
.qs-root .hidden { display: none; }
@keyframes qs-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes qs-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes qs-cut-in { from { opacity: 0; transform: translateY(-26px) rotate(-5deg) scale(1.06); } }
@keyframes tv-option-in { from { opacity: 0; transform: translateY(18px) scale(.97); } }

/* ── Question ── */
.tv-q-main { flex: 1; min-height: 0; display: flex; align-items: center; gap: 44px; }
.tv-q-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 26px; }
.tv-q-topic { display: inline-flex; align-items: center; gap: 10px; font-size: 19px; color: var(--text-secondary); animation: qs-in .4s ease both; }
.tv-q-topic-name { color: var(--text-primary); font-weight: 700; overflow-wrap: anywhere; }
.tv-q-text {
    font-weight: 600; font-size: 40px; line-height: 1.25; text-align: center; text-wrap: balance;
    animation: qs-in .5s cubic-bezier(.2, .8, .2, 1) both;
}
.tv-q-text:empty { display: none; }
.qs-root.has-media .tv-q-text { text-align: left; font-size: 34px; }
.tv-q-media { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; animation: qs-pop .55s cubic-bezier(.2, .8, .2, 1) both; }
.tv-q-media img { display: block; max-width: 520px; max-height: 470px; border-radius: 20px; object-fit: contain; box-shadow: 0 0 40px color-mix(in srgb, var(--accent) 45%, transparent); }
/* A picture: its box is there before it loads (520×470, the picture's largest size), so nothing moves when it comes. */
.tv-q-media.is-image { width: 520px; height: 470px; }
.tv-q-media.is-image img { opacity: 0; scale: .96; transition: opacity .35s ease, scale .45s cubic-bezier(.3, 1.4, .5, 1); }
.tv-q-media.is-image img.is-loaded { opacity: 1; scale: 1; }
.tv-q-media.is-four { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 460px; }
.tv-q-media.is-four img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; box-shadow: none; }
/* The record player (music-player.ts): the phones' record, big. */
.tv-q-media.is-record { width: 440px; flex-direction: column; }
.tv-record { width: 100%; }
.qs-root .music-player { width: 100%; }
.qs-root .music-player .vinyl-container { width: 380px; max-width: 380px; margin-bottom: 22px; animation: music-record-drop 420ms cubic-bezier(.2, .9, .25, 1.15) both; }
.qs-root .music-player .vinyl-play-icon { font-size: 54px; }
.qs-root .music-player .audio-player-bar { margin: 0; padding: 14px 20px; border-radius: 18px; }
.qs-root .music-player .audio-hint, .qs-root .music-player .audio-time { font-size: 18px; }
.qs-root .music-player .audio-progress-bar { height: 8px; }

/* Answers: the phones' .quiz-option (card, line, round letter), two by two; one column next to media. */
.tv-options { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.qs-root.has-media .tv-options { grid-template-columns: 1fr; gap: 14px; }
.tv-option {
    display: flex; align-items: center; gap: 18px; min-height: 84px; padding: 14px 22px;
    border-radius: 20px; background: var(--tv-surface); border: 2px solid var(--tv-line);
    font-size: 26px; font-weight: 500; line-height: 1.25;
    animation: tv-option-in .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(180ms + var(--i, 0) * 110ms);
}
.qs-root.has-media .tv-option { min-height: 74px; font-size: 24px; }
.tv-option-letter {
    flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
    background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 22px;
}
.tv-option-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tv-options.is-two .tv-option { justify-content: center; text-align: center; }
.tv-options.is-two .tv-option-letter { display: none; }
.tv-options.is-four { display: flex; justify-content: center; }
.tv-four-cells { display: flex; gap: 10px; }
.tv-four-cell {
    width: 56px; height: 68px; border-radius: 12px; background: var(--tv-surface); border: 2px solid var(--tv-line);
    animation: tv-option-in .4s ease both; animation-delay: calc(var(--i, 0) * 60ms);
}

/* ── Cut paper (tv/style.css «Cut paper», the same values): each answer a hand-cut card, tilted and shifted in turn,
   with a hard shadow; two side by side lean towards each other, a column next to media zig-zags; the letter a stamp. */
.qs-root .tv-option {
    border-radius: var(--cut-1); box-shadow: var(--cut-shadow); rotate: -.7deg; translate: -4px 0;
    animation-name: qs-cut-in; animation-duration: .6s; animation-timing-function: cubic-bezier(.3, 1.45, .5, 1);
}
.qs-root .tv-option:nth-child(4n + 2) { border-radius: var(--cut-2); rotate: .8deg; translate: 6px 2px; }
.qs-root .tv-option:nth-child(4n + 3) { border-radius: var(--cut-3); rotate: -.4deg; translate: 3px -1px; }
.qs-root .tv-option:nth-child(4n + 4) { border-radius: var(--cut-4); rotate: .5deg; translate: -6px 1px; }
.qs-root .tv-options:not(.is-four) { gap: 20px 22px; padding: 4px 8px; }
.qs-root .tv-options:not(.is-four) .tv-option:nth-child(odd) { rotate: -1.1deg; }
.qs-root .tv-options:not(.is-four) .tv-option:nth-child(even) { rotate: 1deg; translate: 0 6px; }
.qs-root.has-media .tv-options .tv-option:nth-child(odd) { rotate: -.6deg; translate: -4px 0; }
.qs-root.has-media .tv-options .tv-option:nth-child(even) { rotate: .6deg; translate: 8px 0; }
.qs-root .tv-option-letter {
    border-radius: 46% 54% 50% 50% / 54% 46% 54% 46%; rotate: -6deg;
    box-shadow: 2px 3px 0 rgb(0 0 0 / 30%); font-family: var(--font-display); font-weight: 800;
}
.qs-root .tv-option:nth-child(even) .tv-option-letter { rotate: 5deg; border-radius: 54% 46% 46% 54% / 46% 54% 50% 50%; }

/* ── A PC player's answers (buttons): hover lifts the card, the pick is gold, the result green or red. ── */
.qs-root button.tv-option {
    width: 100%; margin: 0; font-family: inherit; color: var(--text-primary); text-align: left; cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, opacity .25s ease, scale .15s ease;
}
.qs-root .tv-options.is-two button.tv-option { text-align: center; }
.qs-root button.tv-option:hover:not(:disabled) { border-color: color-mix(in srgb, var(--gold) 60%, transparent); box-shadow: 7px 9px 0 rgb(0 0 0 / 34%); }
.qs-root button.tv-option:active:not(:disabled) { scale: .97; }
.qs-root button.tv-option:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.qs-root button.tv-option:disabled { cursor: default; }
.qs-root .tv-options.is-locked .tv-option:not(.is-selected, .is-correct, .is-wrong) { opacity: .5; }
.qs-root .tv-option.is-selected { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--tv-surface)); box-shadow: 6px 7px 0 color-mix(in srgb, var(--gold) 55%, #000); animation: qs-stamp .26s cubic-bezier(.3, 1.45, .5, 1); }
.qs-root .tv-option.is-selected .tv-option-letter { background: var(--gold); color: var(--accent-ink); }
.qs-root .tv-option.is-correct { border-color: var(--rp-correct); background: color-mix(in srgb, var(--rp-correct) 14%, var(--tv-surface)); box-shadow: 6px 7px 0 color-mix(in srgb, var(--rp-correct) 55%, #000); animation: qs-stamp .32s cubic-bezier(.3, 1.45, .5, 1); }
.qs-root .tv-option.is-correct .tv-option-letter { background: var(--rp-correct); color: var(--accent-ink); }
.qs-root .tv-option.is-wrong { border-color: var(--rp-wrong); background: color-mix(in srgb, var(--rp-wrong) 12%, var(--tv-surface)); box-shadow: 4px 5px 0 color-mix(in srgb, var(--rp-wrong) 45%, #000); animation: qs-shake .36s ease-out; }
.qs-root .tv-option.is-wrong .tv-option-letter { background: var(--rp-wrong); color: var(--accent-ink); }
@keyframes qs-stamp { 0% { scale: 1; } 45% { scale: 1.04; } 100% { scale: 1; } }
@keyframes qs-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }

/* ── Round end (reveal-results.js with `dashboard`), laid out for the wide screen: on /tv/ #r-box (every game), on a
   PC player's stage #reveal-container (main.ts adds .qs-reveal there on the stage only). ── */
.qs-reveal .rr-container { z-index: 1; }
.qs-reveal .rr-screen1, .qs-reveal .rr-screen2 { padding: var(--cut-room, 14px) var(--cut-room, 14px) 24px; overflow: hidden; }
/* Answers: the question (or the record's cover) on the left, the answers one by one on the right. */
.qs-reveal .rr-screen1 {
    display: grid; grid-template-columns: 400px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); column-gap: 44px; align-items: center;
}
.qs-reveal .rr-context { grid-column: 1; margin: 0; align-self: center; }
.qs-reveal .rr-context-text { font-size: 30px; font-weight: 600; line-height: 1.3; text-wrap: balance; }
.qs-reveal .rr-context-subtext { font-size: 18px; line-height: 1.4; margin-top: 14px; }
.qs-reveal .rr-context-image { max-width: 360px; max-height: 360px; width: auto; border-radius: 22px; margin: 0 auto 18px; object-fit: contain; box-shadow: 0 0 40px color-mix(in srgb, var(--accent) 45%, transparent); }
.qs-reveal .rr-context-fourphoto { width: 340px; gap: 6px; border-radius: 16px; }
/* Many answers (a big room) scroll inside their own column: reveal-results.js scrolls the newest answer into view, and
   with the whole screen as the scroller the question on the left went up with it. The cards keep their height, and the
   column's padding leaves room for their tilt and hard shadow (`--cut-room`). */
.qs-reveal .rr-options {
    grid-column: 2; flex: none; gap: 12px; align-self: center; max-height: 100%; overflow-x: hidden; overflow-y: auto; scrollbar-width: none;
    padding: var(--cut-room, 14px); margin: 0 calc(-1 * var(--cut-room, 14px));
}
.qs-reveal .rr-options::-webkit-scrollbar { display: none; }
.qs-reveal .rr-options > * { flex-shrink: 0; }
.qs-reveal .rr-option { border-radius: 20px; padding: 16px 22px; border-width: 2px; }
.qs-reveal .rr-option-text { font-size: 24px; }
.qs-reveal .rr-option.rr-type-correct .rr-option-text::before, .qs-reveal .rr-option.rr-type-wrong .rr-option-text::before { width: 26px; height: 26px; }
.qs-reveal .rr-voters { gap: 10px; margin-top: 12px; }
.qs-reveal .rr-container.rr-dashboard .rr-voter { font-size: 23px; padding: 6px 16px 6px 6px; border-radius: 999px; gap: 9px; }
.qs-reveal .rr-voter-avatar { width: 38px; height: 38px; font-size: 18px; }
.qs-reveal .rr-voter-points { font-size: 21px; }
/* Scores: one wide card in the middle, the rows count up and change places as on the phones. */
/* The board fits the stage for any room: rows share the height (`--tv-rows` from main.ts), never cut at the top. */
.qs-reveal .rr-container.rr-dashboard .rr-screen2 { padding: 0 0 20px; align-items: center; justify-content: safe center; }
.qs-reveal .rr-leaderboard-title { font-size: 20px; margin-bottom: 14px; }
.qs-reveal .rr-leaderboard { width: 760px; gap: 10px; }
.qs-reveal .rr-lb-row {
    padding: 0 22px; gap: 16px; border-radius: 18px;
    height: min(68px, calc((556px - (var(--tv-rows, 1) - 1) * 10px) / var(--tv-rows, 1)));
}
.qs-reveal .rr-lb-pos { width: 40px; height: 40px; font-size: 18px; }
.qs-reveal .rr-lb-avatar { width: 40px; height: 40px; }
.qs-reveal .rr-lb-name { font-size: 24px; }
.qs-reveal .rr-lb-score { font-size: 26px; min-width: 70px; }
.qs-reveal .rr-lb-delta { font-size: 20px; }

@media (prefers-reduced-motion: reduce) {
    .qs-root *, .qs-root *::before, .qs-root *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* /wyr-choice.css */
/* «Что бы ты выбрал?»: the dilemma on the big screen, one look on the shared screen (/tv/) and on a PC player's stage
   (owner 2026-10-29: «версии некоторых экранов в ПК и ТВ почти не отличаются» → one code for both, after
   hundred-board.css, question-stage.css and quiplash-matchup.css). The markup and the moving part are
   shared/client/wyr-choice.ts; the page supplies the palette (--wyr-ink, --wyr-a, --wyr-b, --text-primary).

   What is asked on top, the two sides as big hand-cut cards (A cyan with ink text, B crimson with white text: equal
   choices, never right or wrong) leaning towards each other, «или» between them. A PC player's sides are buttons:
   hover lifts the card, the pick gets a white edge, the other fades. */
.wyc-root {
    --font-display: 'Unbounded', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* The /tv/ hand-cut corners (tv/style.css .tv). */
    --cut-1: 26px 12px 22px 16px / 16px 24px 12px 22px;
    --cut-3: 22px 16px 28px 12px / 12px 20px 16px 26px;
    --cut-shadow: 5px 6px 0 rgb(0 0 0 / 34%);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; width: 100%;
}
@keyframes wyc-cut-in { from { opacity: 0; transform: translateY(-26px) rotate(-5deg) scale(1.06); } }
@keyframes wyc-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }

.tv-wyr-kicker { display: inline-flex; align-items: center; gap: 12px; margin: 0; font-size: 25px; font-weight: 700; color: var(--text-primary, #fff); text-align: center; text-wrap: balance; }
.tv-wyr-kicker .wyc-target:empty { display: none; }
.tv-wyr-pair { width: 100%; max-width: 1160px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 22px; }
.tv-wyr-side {
    position: relative; min-height: 300px; display: flex; align-items: center; justify-content: center; padding: 40px 38px;
    border-radius: var(--cut-1); box-shadow: var(--cut-shadow); rotate: -1.6deg;
    animation: wyc-cut-in .65s cubic-bezier(.3, 1.45, .5, 1) both;
}
.tv-wyr-side p { margin: 0; font-weight: 700; font-size: 34px; line-height: 1.25; text-align: center; text-wrap: balance; overflow-wrap: anywhere; }
.tv-wyr-side.is-a { color: var(--wyr-ink); background: var(--wyr-a); }
.tv-wyr-side.is-b { color: #fff; background: var(--wyr-b); border-radius: var(--cut-3); rotate: 1.4deg; translate: 0 10px; animation-delay: .16s; }
/* The letter: a white stamp on the card's corner, cut and turned (tv/style.css .tv-option-letter). */
.tv-wyr-side .tv-option-letter {
    position: absolute; top: -16px; left: -14px; display: grid; place-items: center; width: 50px; height: 50px;
    font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--wyr-ink); background: #fff;
    border-radius: 46% 54% 50% 50% / 54% 46% 54% 46%; rotate: -6deg; box-shadow: 2px 3px 0 rgb(0 0 0 / 30%);
}
.tv-wyr-or { font-family: var(--font-display); font-weight: 800; font-size: 30px; text-transform: uppercase; color: #fff; animation: wyc-pop .5s .3s cubic-bezier(.2, .8, .2, 1) both; }
.wyc-root.is-guessing .tv-wyr-side { min-height: 240px; }

/* ── A PC player's sides (buttons): hover lifts the card, the pick gets the white edge, the other fades. ── */
.wyc-root button.tv-wyr-side {
    width: 100%; margin: 0; border: 4px solid transparent; font-family: inherit; cursor: default;
    transition: border-color .2s ease, box-shadow .2s ease, opacity .25s ease, scale .15s ease;
}
.wyc-root.is-votable button.tv-wyr-side:not(:disabled) { cursor: pointer; }
.wyc-root.is-votable button.tv-wyr-side:hover:not(:disabled) { border-color: rgb(255 255 255 / 70%); box-shadow: 8px 10px 0 rgb(0 0 0 / 34%); }
.wyc-root.is-votable button.tv-wyr-side:active:not(:disabled) { scale: .97; }
.wyc-root button.tv-wyr-side:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.wyc-root .tv-wyr-side.is-selected { border-color: #fff; box-shadow: 8px 10px 0 rgb(0 0 0 / 40%); }
.wyc-root.is-locked .tv-wyr-side:not(.is-selected) { opacity: .45; }
/* /pc-stage.css */
/*
 * «Игра с ПК» (owner 2026-10-29: «почему бы не сделать tv играбельным?» → «делай»). Whoever opens the site with a
 * mouse in a wide window gets the /tv/ look and plays from there: the same pages and the same logic as on a phone,
 * laid out on a 1280×720 stage that pwa-overrides.js scales to the window with CSS zoom (html.rp-stage,
 * html[data-stage-page] = the page's <meta name="rp-stage">). A narrow window or a touch screen keeps the phone
 * column. Mockups: /mnt/project-files/tv-play-from-pc/.
 *
 * Rules kept from /tv/: the shared components keep their looks (game header, packs, reveal-results, PlayerAvatar,
 * game-end), only their size and place change; cut-paper cards (uneven corners, a small tilt through `rotate` /
 * `translate`, a hard shadow) for cards and rows, never for buttons, and never on rows reveal-results.js measures
 * (their card is a ::before); text that sits over the background spheres gets a backing.
 * Everything here is under html.rp-stage, so the phone layout cannot change.
 */
html.rp-stage {
    --st-bg: #100f36;
    --st-bg-end: #0b0a28;
    --st-panel: #1d1752;
    --st-card: #241b62;
    --st-line: rgb(255 255 255 / 14%);
    --st-text: #fff;
    --st-muted: #cbc4e6;
    --st-accent: #6640ba;
    --st-gold: #d5ae58;
    --st-display: 'Unbounded', 'Manrope', system-ui, sans-serif;
    --cut-1: 26px 12px 22px 16px / 16px 24px 12px 22px;
    --cut-2: 14px 24px 14px 26px / 24px 14px 22px 12px;
    --cut-3: 22px 15px 27px 12px / 12px 21px 15px 26px;
    --cut-4: 12px 26px 15px 22px / 22px 12px 26px 15px;
    --cut-shadow: 5px 6px 0 rgb(0 0 0 / 34%);
    overflow-x: hidden;
}
/* The spheres are sized in vmin of the real window, so their layer cancels the stage zoom. */
html.rp-stage .particles { zoom: calc(1 / var(--rp-stage-zoom, 1)); }
/* The brand colours where no game is picked yet; a room with a game takes the game's (particles.js). */
html.rp-stage:is([data-stage-page="catalog"], [data-stage-page="room"], [data-stage-page="join"]):not([data-room-game]) {
    --rp-sphere-1: #8f6ae0;
    --rp-sphere-2: #63b0fc;
    --rp-sphere-3: #f77cb0;
    --rp-sphere-4: #d5ae58;
}
html.rp-stage:is([data-stage-page="catalog"], [data-stage-page="room"], [data-stage-page="join"]) body {
    background: linear-gradient(180deg, var(--st-bg) 0%, var(--st-bg-end) 100%);
}
/* Owner 2026-10-29 «палитры втф»: a room with a game wears that game's palette on the stage, as on the phone. The dark
   stage background stayed under the light palettes (Имаджинариум, Что за мем?, Рисовач, Joking Hazard…), whose text is
   dark, so the game card, the players and the buttons went dark on dark. The room's own tokens (room-themes.css) give
   the background and the panels, so every palette keeps its contrast. */
html.rp-stage:is([data-stage-page="room"], [data-stage-page="join"])[data-room-game] {
    --st-panel: var(--room-menu);
    --st-line: var(--room-line);
}
html.rp-stage:is([data-stage-page="room"], [data-stage-page="join"])[data-room-game] body {
    background: linear-gradient(180deg, var(--room-bg) 0%, var(--room-bg-deep) 100%);
}

/* ── Game header (shared/client/game-header.ts): across the stage, bigger, like the /tv/ top row ── */
html.rp-stage .rp-game-header {
    width: 100%; max-width: none; padding: 0 44px; height: 64px; top: 18px;
    grid-template-columns: 60px minmax(0, 1fr) minmax(60px, auto);
}
html.rp-stage { --rp-gh-space: 104px; }
html.rp-stage .rp-game-header :is(.rp-gh-cube) { width: 46px; height: 46px; }
html.rp-stage .rp-game-header :is(.rp-gh-word) { font-size: 25px; }
html.rp-stage .rp-game-header :is(.rp-gh-menu, .rp-gh-timer) { width: 58px; min-width: 58px; height: 58px; border-radius: 29px; font-size: 24px; }

/* ── Common: the app takes the whole stage, screens lay out their own columns ── */
html.rp-stage .app { max-width: none; width: 100%; }
/* pwa-overrides.js: the first screen waits for Unbounded and Manrope (no reflow from the fallback font), at most 1.2 s. */
html.rp-stage.rp-fonts-pending .screen.active { visibility: hidden; }
html.rp-stage .btn-back { left: 40px; top: 28px; width: 52px; height: 52px; font-size: 22px; }
html.rp-stage :is(.btn-play, .btn-create, .btn-connect, .btn-next-slide, .btn-skip, .btn-additional-settings) {
    min-height: 60px; font-size: 19px; border-radius: 30px; padding: 0 34px; width: auto; white-space: nowrap;
}
html.rp-stage .title { font-family: var(--st-display); letter-spacing: -.02em; }

/* ════════════════════ Catalog (client/games/index.html) ════════════════════
   No zoom here (data-zoom="off" on the meta): owner 2026-10-29 «всё очень крупное, информативности меньше, нет
   описания, занято всё по ширине». Owner 2026-10-29 «каталог выглядит убого на пк» → mockup
   /mnt/project-files/catalog-pc/ → «го»: a wider column (up to 1600 px), the header in one row (brand, search, sort,
   filter and favourites, language, settings), the top row of catalog-showcase.js, then rows by mood in tiles
   (big art, name, two lines of description, players and mode). A search, a filter, favourites or another sort show
   the plain list in the same tiles. No spheres here (owner «шары лучше там убрать и так много элементов»).
   Owner 2026-10-30 «сделай /games/ для ПК в дизайне главной»: the landing's look (landing.css) instead of the /tv/
   cut-paper one: its navy, faint grid and blue/red corner light, Manrope text and Unbounded headings (fonts.css),
   calm rounded cards with a soft shadow and a pink border on hover, a sticky header bar, pill buttons, mint eyebrows. */
html.rp-stage[data-stage-page="catalog"] {
    --lp-bg: #0d1329;
    --lp-bg-deep: #0a0f1f;
    --lp-surface: #1e2643;
    --lp-card: #252b4a;
    --lp-line: rgb(255 255 255 / 13%);
    --lp-line-strong: rgb(255 255 255 / 22%);
    --lp-accent: #ec494f;
    --lp-pink: #ff3b6f;
    --lp-blue: #4a6cf7;
    --lp-mint: #2ee6a6;
    --lp-text-2: #aeb7d3;
    --lp-muted: #8892b0;
    --lp-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    --lp-display: 'Unbounded', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --lp-ease: cubic-bezier(.16, 1, .3, 1);
}
html.rp-stage[data-stage-page="catalog"]:not([data-room-game]) body {
    font-family: var(--lp-body);
    background:
        linear-gradient(115deg, rgb(74 108 247 / 12%) 0%, transparent 32%),
        linear-gradient(245deg, rgb(236 73 79 / 12%) 0%, transparent 34%),
        linear-gradient(180deg, rgb(13 19 41 / 94%) 0%, var(--lp-bg-deep) 48%, var(--lp-bg) 100%),
        var(--lp-bg);
    background-attachment: fixed;
}
html.rp-stage[data-stage-page="catalog"]:not([data-room-game]) .particles { display: none; }
/* No «Установите приложение» on a computer (owner 2026-10-30 «на пк скрой»). install-prompt.js counts the offer as shown
   only when its card has a box, so a hidden banner sends no install_prompt_shown. */
html.rp-stage .install-prompt-banner { display: none; }
html.rp-stage[data-stage-page="catalog"] .menu-screen {
    /* The scroller spans the window (so the grid and the header bar reach its edges); the padding keeps the landing's
       1180 px column (owner 2026-10-30 «по ширине отличается»). */
    max-width: none; margin: 0; padding: 0 max(56px, calc((100% - 1180px) / 2)) 56px; min-height: var(--app-height, 720px);
    background-image: linear-gradient(rgb(255 255 255 / 3.5%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 2.8%) 1px, transparent 1px);
    background-size: 44px 44px; background-attachment: local;
    -webkit-mask-image: none;
}
html.rp-stage[data-stage-page="catalog"] .menu-screen::before { display: none; }
/* Header: one sticky bar like the landing's site header. The topbar, the controls and the summary give their
   children to the header grid; the bar's backing reaches the window edges through its shadow. */
html.rp-stage[data-stage-page="catalog"] .menu-header {
    position: sticky; top: 0; z-index: 20;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    grid-template-areas: "brand search tools lang settings" "filters filters filters filters filters" "summary summary sort sort sort";
    gap: 0 10px; align-items: center; margin: 0 0 28px; padding: 14px 0;
}
/* The bar's backing reaches the window edges; a pseudo-element, so nothing clips the language list under the bar. */
html.rp-stage[data-stage-page="catalog"] .menu-header::before {
    content: ''; position: absolute; inset: 0 -100vmax; z-index: -1; pointer-events: none;
    background: rgb(13 19 41 / 90%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--lp-line);
}
html.rp-stage[data-stage-page="catalog"] :is(.roomplay-menu-topbar, .ru-catalog-controls, .ru-catalog-summary) { display: contents; }
html.rp-stage[data-stage-page="catalog"] .ru-catalog-controls[hidden] { display: none; }
html.rp-stage[data-stage-page="catalog"] .menu-language-picker { grid-area: lang; position: relative; }
html.rp-stage[data-stage-page="catalog"] .menu-language-popover { left: auto; right: 0; transform-origin: calc(100% - 23px) 0; }
html.rp-stage[data-stage-page="catalog"] .menu-settings-button { grid-area: settings; }
html.rp-stage[data-stage-page="catalog"] :is(.menu-language-button, .menu-settings-button, .ru-control-chip) {
    width: 46px; height: 46px; min-height: 46px; padding: 0; display: grid; place-items: center; border-radius: 999px;
    border: 1px solid var(--lp-line-strong); background: rgb(255 255 255 / 6.5%); color: #fff;
}
html.rp-stage[data-stage-page="catalog"] :is(.menu-language-button, .menu-settings-button, .ru-control-chip):hover { background: rgb(255 255 255 / 10%); border-color: rgb(255 255 255 / 34%); }
html.rp-stage[data-stage-page="catalog"] .ru-control-chip.active { border-color: var(--lp-pink); background: rgb(255 59 111 / 18%); }
html.rp-stage[data-stage-page="catalog"] .menu-title {
    grid-area: brand; display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center;
    gap: 0 10px; margin: 0; font-family: var(--lp-display); font-size: 22px; letter-spacing: 0; text-align: left;
}
html.rp-stage[data-stage-page="catalog"] .menu-brand-lockup { display: contents; }
html.rp-stage[data-stage-page="catalog"] .menu-title--brand { cursor: pointer; }
html.rp-stage[data-stage-page="catalog"] .menu-title--brand:active { transform: scale(.98); }
html.rp-stage[data-stage-page="catalog"] .menu-brand-cube { grid-row: 1 / 3; width: 40px; height: 40px; }
html.rp-stage[data-stage-page="catalog"] .menu-brand-word { align-self: end; font-size: 22px; letter-spacing: -.01em; }
html.rp-stage[data-stage-page="catalog"] .menu-brand-tagline { align-self: start; margin-top: 3px; font-family: var(--lp-body); font-size: 12px; font-weight: 700; color: var(--lp-text-2); }
html.rp-stage[data-stage-page="catalog"] .ru-search-wrap {
    grid-area: search; justify-self: center; width: min(620px, 100%); min-height: 48px; padding: 0 20px; gap: 12px;
    border-radius: 999px; background: rgb(255 255 255 / 6.5%); border: 1px solid var(--lp-line-strong); color: var(--lp-text-2);
}
html.rp-stage[data-stage-page="catalog"] .ru-search-wrap:focus-within { border-color: rgb(255 59 111 / 60%); }
html.rp-stage[data-stage-page="catalog"] .ru-search-wrap input { font-family: var(--lp-body); font-weight: 600; }
html.rp-stage[data-stage-page="catalog"] .ru-control-row { grid-area: tools; display: flex; gap: 8px; margin: 0; overflow: visible; }
html.rp-stage[data-stage-page="catalog"] .ru-active-filters { grid-area: filters; margin-top: 12px; }
html.rp-stage[data-stage-page="catalog"] .ru-active-filters:empty { display: none; }
/* The sort list sits under the bar, on the summary line, only over the plain list: a search, a filter, favourites or
   another sort; the rows have none (owner 2026-10-30 «показывай ниже только если фильтр применен»). */
html.rp-stage[data-stage-page="catalog"] .ru-sort-control { grid-area: sort; justify-self: end; min-width: 0; margin-top: 14px; }
html.rp-stage[data-stage-page="catalog"].rp-catalog-rows .ru-sort-control { display: none; }
html.rp-stage[data-stage-page="catalog"] .ru-sort-control select { max-width: none; width: auto; font-family: var(--lp-body); color: var(--lp-text-2); color-scheme: dark; }
/* The open list of the native select: dark like the bar, readable text (it was light grey on white). */
html.rp-stage[data-stage-page="catalog"] .ru-sort-control option { background: var(--lp-surface); color: #fff; }
/* The summary («Все игры · N») heads the plain list from the bar's last line; the rows have their own heads. */
html.rp-stage[data-stage-page="catalog"] .ru-catalog-summary > p { grid-area: summary; margin: 14px 0 0; }
html.rp-stage[data-stage-page="catalog"].rp-catalog-rows .ru-catalog-summary > p { display: none; }
html.rp-stage[data-stage-page="catalog"] .ru-catalog-summary strong { font-family: var(--lp-display); font-size: 26px; font-weight: 800; letter-spacing: 0; margin-right: 6px; }
html.rp-stage[data-stage-page="catalog"] :is(.catalog-room-hit, .ru-favorite-spotlight, .catalog-search-intent, .premium-paused-slot > *) { max-width: none; }
/* The season and room pills: one thin card line. */
html.rp-stage[data-stage-page="catalog"] .catalog-room-hit {
    margin-bottom: 26px; padding-top: 12px; padding-bottom: 12px; border-radius: 16px;
    background: var(--lp-surface); border: 1.5px solid rgb(255 255 255 / 10%); box-shadow: 0 14px 32px rgb(0 0 0 / 18%);
}
html.rp-stage[data-stage-page="catalog"] .catalog-room-hit-text { flex-direction: row; align-items: baseline; gap: 14px; }
html.rp-stage[data-stage-page="catalog"] .catalog-room-hit-text small { color: var(--lp-text-2); }

/* Tiles: the list card (.game-card) and its copy in a row (.catalog-tile) share the landing's game card look;
   four a row as on the landing (owner 2026-10-30 «плашки в 1.5 раза шире бы чтобы текст помещался», then «оставить 4
   в ряд», then «шире в 1.5 раза, НО НЕ ВЫШЕ», «уменьши пикчи»): a small square icon on the left, the name and two lines
   beside it, the players pill under them, so a tile is low. Names in sentence case, as on the landing. */
html.rp-stage[data-stage-page="catalog"] :is(.games-list, .catalog-row-grid) {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
}
html.rp-stage[data-stage-page="catalog"] :is(.games-list .game-card, .catalog-tile) {
    position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-areas: "art content" "art tags";
    grid-template-rows: auto 1fr; align-items: start; gap: 8px 14px;
    width: auto; height: 100%; margin: 0; padding: 14px; text-align: left; color: #fff; text-decoration: none;
    background: var(--lp-surface); border: 1.5px solid rgb(255 255 255 / 10%); border-radius: 16px;
    box-shadow: 0 14px 32px rgb(0 0 0 / 18%);
    transition: transform .18s var(--lp-ease), border-color .18s var(--lp-ease), background .18s var(--lp-ease), box-shadow .18s var(--lp-ease);
}
html.rp-stage[data-stage-page="catalog"] :is(.games-list .game-card, .catalog-tile):hover {
    transform: translateY(-4px); border-color: rgb(255 59 111 / 60%); background: var(--lp-card); box-shadow: 0 18px 42px rgb(0 0 0 / 26%);
}
html.rp-stage[data-stage-page="catalog"] :is(.games-list .game-card, .catalog-tile):active { transform: translateY(1px) scale(.99); }
html.rp-stage[data-stage-page="catalog"] .games-list .game-card.hidden { display: none; }
html.rp-stage[data-stage-page="catalog"] :is(.games-list .game-card, .catalog-tile) .card-image {
    grid-area: art; width: 88px; height: 88px; margin: 0; border-radius: 12px;
}
html.rp-stage[data-stage-page="catalog"] :is(.games-list .game-card, .catalog-tile) .card-icon { border-radius: 12px; }
html.rp-stage[data-stage-page="catalog"] :is(.games-list .game-card, .catalog-tile) .card-content { grid-area: content; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
html.rp-stage[data-stage-page="catalog"] :is(.games-list .game-card, .catalog-tile) .card-header { margin: 2px 0 0; padding: 0; }
html.rp-stage[data-stage-page="catalog"] :is(.games-list .game-card, .catalog-tile) .card-title {
    font-family: var(--lp-body); font-size: 16px; font-weight: 850; letter-spacing: 0; line-height: 1.2; color: #fff; text-transform: lowercase;
}
html.rp-stage[data-stage-page="catalog"] :is(.games-list .game-card, .catalog-tile) .card-title::first-letter { text-transform: uppercase; }
html.rp-stage[data-stage-page="catalog"] .card-title :is(.ru-new-badge, .game-public-rating) { text-transform: uppercase; }
html.rp-stage[data-stage-page="catalog"] :is(.games-list .game-card, .catalog-tile) .card-description {
    min-height: 4.2em; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--lp-text-2);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
html.rp-stage[data-stage-page="catalog"] :is(.games-list .game-card, .catalog-tile) .card-tags {
    grid-area: tags; align-self: end; flex-wrap: nowrap; gap: 6px; margin: 0; padding: 0; overflow: hidden;
}
html.rp-stage[data-stage-page="catalog"] :is(.games-list .game-card, .catalog-tile) :is(.player-badge, .mode-badge) {
    flex: none; padding: 5px 10px; font-size: 12px; font-weight: 800; color: var(--lp-text-2); white-space: nowrap;
    background: transparent; border: 1px solid var(--lp-line-strong); border-radius: 999px;
}
/* No mode pill («Каждый со своего», «На одном телефоне») on the tiles (owner 2026-10-30 «скрой такие плашки»). */
html.rp-stage[data-stage-page="catalog"] :is(.games-list .game-card, .catalog-tile) .mode-badge { display: none; }
html.rp-stage[data-stage-page="catalog"] .card-title .ru-new-badge { padding: 3px 7px; font-size: 10px; background: var(--lp-blue); }
html.rp-stage[data-stage-page="catalog"] .card-title .ru-beta-badge { background: var(--lp-accent); }
/* The heart sits on the icon's corner in a round backing. */
html.rp-stage[data-stage-page="catalog"] :is(.games-list .game-card, .catalog-tile) .card-favorite {
    top: 6px; left: 72px; right: auto; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%;
    background: rgb(13 19 41 / 72%); border: 1px solid var(--lp-line);
}
html.rp-stage[data-stage-page="catalog"] .card-favorite:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* «Витрина» (catalog-showcase.js): the most opened game big with «Играть», the two newest games beside it, then the
   rows. Owner 2026-10-29 chose «Витрина сверху + сетка», then the rows. Phones never see it. */
html:not(.rp-stage) .catalog-showcase, html:not(.rp-stage) .catalog-showcase[hidden], .catalog-showcase[hidden] { display: none; }
html.rp-stage[data-stage-page="catalog"].rp-catalog-rows .games-list:not(.catalog-search-popular) { display: none; }
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-top {
    display: grid; grid-template-columns: 1.7fr 1fr; grid-template-rows: 1fr 1fr; gap: 18px; height: 420px; margin: 0 0 56px;
}
/* Three most opened games as side-style cards over the top row, in place of the «Для вашей компании» block, which the
   stage hides while the rows show (owner 2026-10-30 «вместо», «сделай 3 плашки типа … с самыми поп-ными играми»). */
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; height: 200px; margin: 0 0 48px; }
html.rp-stage[data-stage-page="catalog"].rp-catalog-rows .ru-favorite-spotlight { display: none; }
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-card {
    position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; color: #fff;
    text-decoration: none; border-radius: 24px; border: 1.5px solid rgb(255 255 255 / 10%); box-shadow: 0 20px 48px rgb(0 0 0 / 28%);
    transition: transform .18s var(--lp-ease), border-color .18s var(--lp-ease), box-shadow .18s var(--lp-ease);
}
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-card:hover { transform: translateY(-4px); border-color: rgb(255 59 111 / 60%); box-shadow: 0 24px 52px rgb(0 0 0 / 34%); }
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-card:active { transform: translateY(1px) scale(.99); }
/* The game's own icon, blurred, tints the card in its colours; the navy wash keeps the text readable. */
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-bg {
    position: absolute; inset: -30px; z-index: -2; background: center / cover no-repeat; filter: blur(34px) saturate(1.3); opacity: .6;
}
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-card::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgb(13 19 41 / 94%) 0%, rgb(13 19 41 / 74%) 45%, rgb(13 19 41 / 28%) 100%);
}
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-icon { flex: none; order: 2; object-fit: cover; }
/* Pills as the landing's eyebrows: mint for «Популярное сейчас», blue for «Новинка». */
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-pill {
    align-self: flex-start; padding: 0; font-size: 12.5px; font-weight: 900; line-height: 1;
    letter-spacing: 0; text-transform: uppercase; background: none; color: var(--lp-mint);
}
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-pill.is-new { color: #8ea2ff; }
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-title { font-family: var(--lp-display); font-weight: 900; letter-spacing: 0; line-height: 1.08; text-transform: lowercase; }
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-title::first-letter { text-transform: uppercase; }
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-desc { line-height: 1.5; font-weight: 500; color: var(--lp-text-2); }
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-tags { display: flex; flex-wrap: wrap; gap: 8px; }
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-tags span { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; color: var(--lp-text-2); border: 1px solid var(--lp-line-strong); }
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-hero { grid-row: 1 / 3; gap: 26px; padding: 40px; }
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-hero .catalog-showcase-text { gap: 14px; }
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-hero .catalog-showcase-icon { width: 230px; height: 230px; border-radius: 32px; box-shadow: 0 20px 48px rgb(0 0 0 / 40%); }
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-hero .catalog-showcase-title { font-size: 44px; }
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-hero .catalog-showcase-desc { max-width: 520px; font-size: 17px; }
/* «Играть»: the landing's primary button. */
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-play {
    align-self: flex-start; margin-top: 8px; padding: 0 30px; min-height: 52px; display: inline-flex; align-items: center;
    border-radius: 999px; font-size: 17px; font-weight: 800; color: #fff;
    background: linear-gradient(135deg, var(--lp-accent), var(--lp-pink)); box-shadow: 0 12px 34px rgb(255 59 111 / 28%);
}
html.rp-stage[data-stage-page="catalog"] :is(.catalog-showcase-new, .catalog-showcase-side) { gap: 16px; padding: 22px 24px; }
html.rp-stage[data-stage-page="catalog"] :is(.catalog-showcase-new, .catalog-showcase-side) .catalog-showcase-icon { width: 104px; height: 104px; border-radius: 22px; box-shadow: 0 14px 30px rgb(0 0 0 / 36%); }
html.rp-stage[data-stage-page="catalog"] :is(.catalog-showcase-new, .catalog-showcase-side) .catalog-showcase-title { font-size: 22px; }
html.rp-stage[data-stage-page="catalog"] :is(.catalog-showcase-new, .catalog-showcase-side) .catalog-showcase-desc {
    font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html.rp-stage[data-stage-page="catalog"] :is(.catalog-showcase-new, .catalog-showcase-side) .catalog-showcase-tags span:nth-child(n + 2) { display: none; }
@media (max-width: 1299px) {
    html.rp-stage[data-stage-page="catalog"] .catalog-showcase-hero .catalog-showcase-icon { width: 180px; height: 180px; }
    html.rp-stage[data-stage-page="catalog"] .catalog-showcase-hero .catalog-showcase-title { font-size: 36px; }
}
/* Rows: a landing section head (Unbounded) with «N игр» as its secondary pill button, then the tiles. */
html.rp-stage[data-stage-page="catalog"] .catalog-row { margin: 0 0 52px; }
html.rp-stage[data-stage-page="catalog"] .catalog-row-head { display: flex; align-items: center; gap: 16px; margin: 0 0 20px; }
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-heading { margin: 0; font-family: var(--lp-display); font-size: 30px; font-weight: 800; letter-spacing: 0; line-height: 1.1; }
html.rp-stage[data-stage-page="catalog"] .catalog-row-more {
    margin-left: auto; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--lp-line-strong); background: rgb(255 255 255 / 6.5%);
    color: #fff; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
    transition: transform .18s var(--lp-ease), background .18s var(--lp-ease), border-color .18s var(--lp-ease);
}
html.rp-stage[data-stage-page="catalog"] .catalog-row-count { display: inline-flex; align-items: center; cursor: default; }
html.rp-stage[data-stage-page="catalog"] .catalog-row-more:not(.catalog-row-count):hover { transform: translateY(-2px); background: rgb(255 255 255 / 10%); border-color: rgb(255 255 255 / 34%); }
html.rp-stage[data-stage-page="catalog"] .catalog-row-more:not(.catalog-row-count):active { transform: translateY(1px) scale(.97); }
/* «Есть код комнаты? [ABCD] Войти» on a computer: a narrow tall card with the code field (shared room-code-entry
   component, #catalog-room-entry) under the season banner (owner 2026-10-30 «ниже хэллоуина и прямоугольным блоком
   уже, выше и сразу полем ввода кода»). The bottom bar (#ru-room-control) is moved right before it by /games/: hidden
   while there is no room; in a room its card («Комната ABCD», «Другая») replaces the code field. */
.catalog-room-entry[hidden] { display: none; }
html.rp-stage[data-stage-page="catalog"] .catalog-room-entry {
    max-width: 440px; margin: 0 0 30px; padding: 26px 26px 28px; gap: 16px; border-radius: 20px;
    background: var(--lp-surface); border: 1.5px solid rgb(255 255 255 / 10%); box-shadow: 0 14px 32px rgb(0 0 0 / 18%);
}
html.rp-stage[data-stage-page="catalog"] .catalog-room-entry .room-code-entry-prompt { color: #fff; font-family: var(--lp-display); font-size: 20px; font-weight: 800; }
html.rp-stage[data-stage-page="catalog"] .catalog-room-entry .room-code-entry-row { gap: 10px; }
html.rp-stage[data-stage-page="catalog"] .catalog-room-entry :is(.room-code-entry-input, .room-code-entry-btn) { height: 56px; font-family: var(--lp-body); }
html.rp-stage[data-stage-page="catalog"] .catalog-room-entry .room-code-entry-input { font-size: 22px; }
html.rp-stage[data-stage-page="catalog"] .catalog-room-entry .room-code-entry-btn { min-width: 116px; font-size: 16px; }
html.rp-stage[data-stage-page="catalog"] .ru-room-control:has(+ .catalog-room-entry).ru-room-empty { display: none; }
html.rp-stage[data-stage-page="catalog"] .ru-room-control:not(.ru-room-empty) + .catalog-room-entry { display: none; }
html.rp-stage[data-stage-page="catalog"] .ru-room-control:has(+ .catalog-room-entry) {
    position: static; display: flex; align-items: center; gap: 14px; width: auto; max-width: 440px; margin: 0 0 30px; padding: 14px;
    transform: none; border-radius: 20px; background: var(--lp-surface); border: 1.5px solid rgb(255 255 255 / 10%); box-shadow: 0 14px 32px rgb(0 0 0 / 18%);
}
html.rp-stage[data-stage-page="catalog"] .ru-room-control:has(+ .catalog-room-entry)[hidden] { display: none; }
html.rp-stage[data-stage-page="catalog"] .ru-room-control:has(+ .catalog-room-entry) :is(.ru-room-main, .ru-room-qr) {
    min-height: 56px; border-radius: 16px; color: #fff; font-family: var(--lp-body); font-size: 16px; font-weight: 800;
}
html.rp-stage[data-stage-page="catalog"] .ru-room-control:has(+ .catalog-room-entry) .ru-room-main { flex: 1; padding: 0 18px; }
html.rp-stage[data-stage-page="catalog"] .ru-room-control:has(+ .catalog-room-entry) .ru-room-qr {
    flex: none; width: auto; padding: 0 22px; border: 1px solid var(--lp-line-strong); background: rgb(255 255 255 / 6.5%);
}
html.rp-stage[data-stage-page="catalog"] .ru-room-control:has(+ .catalog-room-entry) :is(.ru-room-main, .ru-room-qr):hover { transform: translateY(-2px); }

/* Halloween on a computer (until 2026-11-01, html.season-halloween from /games/; owner 2026-10-30 «а где оформление
   хэллоуин как на тел»): the phone's night purple and pumpkin orange in the landing look. The phone rules in styles.css
   draw the web in the header corner, which the stage repeats in the window corner. Decoration only. */
html.rp-stage.season-halloween[data-stage-page="catalog"] {
    --lp-bg: #150d26;
    --lp-bg-deep: #0c0717;
    --lp-surface: #23163a;
    --lp-card: #2e1d4a;
    --lp-pink: #ff8a1f;
}
html.rp-stage.season-halloween[data-stage-page="catalog"]:not([data-room-game]) body {
    background:
        radial-gradient(120% 60% at 50% 110%, rgb(242 138 30 / 22%), transparent 60%),
        linear-gradient(245deg, rgb(242 138 30 / 10%) 0%, transparent 34%),
        linear-gradient(180deg, #1b0f30 0%, var(--lp-bg-deep) 100%),
        var(--lp-bg);
    background-attachment: fixed;
}
html.rp-stage.season-halloween[data-stage-page="catalog"] .menu-header::before { background-color: rgb(21 13 38 / 90%); }
/* The phone's corner web (styles.css) sits under the bar's backing here, so the stage draws it in the window's top
   right corner, larger (owner «паутина в углу есть?»). */
html.rp-stage.season-halloween[data-stage-page="catalog"] .menu-header::after {
    content: ''; position: fixed; top: 0; right: 0; width: 170px; height: 170px; pointer-events: none;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMTAnIGhlaWdodD0nMTEwJyB2aWV3Qm94PScwIDAgMTEwIDExMCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjZDhjOGZmJyBzdHJva2Utb3BhY2l0eT0nLjE4JyBzdHJva2Utd2lkdGg9JzEuMic+PHBhdGggZD0nTTExMCAwTDAgMzZNMTEwIDBMMjggODJNMTEwIDBMNzQgMTEwJy8+PHBhdGggZD0nTTgyIDlRODggMjAgOTAgMjhROTcgMjQgMTAzIDI4TTU2IDE4UTY2IDM4IDcwIDU2UTg2IDQ4IDk4IDU2TTI4IDI4UTQ0IDU0IDUwIDg0UTcyIDcyIDkwIDg0Jy8+PC9zdmc+) no-repeat right top / 170px 170px;
}
html.rp-stage.season-halloween[data-stage-page="catalog"] :is(.games-list .game-card, .catalog-tile, .catalog-showcase-card) { border-color: rgb(242 138 30 / 22%); }
/* No «Игры на Хэллоуин» pill on a computer (owner 2026-10-30 «скрой»); the season look stays. */
html.rp-stage[data-stage-page="catalog"] .catalog-season-hit { display: none; }
html.rp-stage.season-halloween[data-stage-page="catalog"] .catalog-season-hit {
    border-color: rgb(242 138 30 / 55%); background: linear-gradient(135deg, rgb(242 138 30 / 26%), rgb(139 92 246 / 14%));
}
html.rp-stage.season-halloween[data-stage-page="catalog"] :is(.catalog-search-intent h2, .catalog-showcase-heading) { color: #ff8a1f; }

/* ════════════════════ Room: name and lobby (client/create-room/) ════════════════════ */
html.rp-stage[data-stage-page="room"] .screen { height: var(--app-height, 720px); }
html.rp-stage[data-stage-page="room"] #create-screen.active { align-items: center; justify-content: center; }
html.rp-stage[data-stage-page="room"] .create-content {
    flex: none; width: 600px; max-width: none; padding: 40px 48px 36px; gap: 14px;
    background: var(--st-panel); border: 1px solid var(--st-line); border-radius: var(--cut-1); box-shadow: 8px 10px 0 rgb(0 0 0 / 30%);
    rotate: -.5deg;
}
html.rp-stage[data-stage-page="room"] .create-content > * { rotate: .5deg; }
html.rp-stage[data-stage-page="room"] .create-content .game-logo { width: 260px; height: 150px; }
html.rp-stage[data-stage-page="room"] .create-content .title { font-size: 36px; }
html.rp-stage[data-stage-page="room"] .create-content .subtitle { font-size: 18px; }
html.rp-stage[data-stage-page="room"] .player-entry-row .input { height: 62px; font-size: 22px; border-radius: 18px; }
html.rp-stage[data-stage-page="room"] .player-gender-selector { height: 62px; }
html.rp-stage[data-stage-page="room"] .btn-create { width: 100%; }
html.rp-stage[data-stage-page="room"] .direct-game { width: 100%; }

/* Lobby: the invite on the left (big QR, the code, «Пригласить»), the room on the right. */
html.rp-stage[data-stage-page="room"] #lobby-screen.active { align-items: center; justify-content: center; }
html.rp-stage[data-stage-page="room"] .lobby-content {
    width: 1180px; max-width: none; height: 620px; margin: 0; padding: 0;
    display: grid; grid-template-columns: 400px minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    column-gap: 48px; row-gap: 14px; align-items: start;
}
html.rp-stage[data-stage-page="room"] .lobby-content > * { grid-column: 2; margin: 0; width: auto; max-width: none; }
html.rp-stage[data-stage-page="room"] .lobby-content > .invite-card {
    grid-column: 1; grid-row: 1 / 5; align-self: center; display: flex; flex-direction: column; align-items: center; gap: 18px;
    padding: 30px 28px; background: var(--st-panel); border: 1px solid var(--st-line); border-radius: var(--cut-3);
    box-shadow: 8px 10px 0 rgb(0 0 0 / 30%); rotate: -1deg;
}
html.rp-stage[data-stage-page="room"] .invite-card .qr-code-img {
    order: -1; width: 260px; height: 260px; padding: 14px; background: #fff; border-radius: var(--cut-2); box-shadow: var(--cut-shadow); rotate: 1.5deg;
}
html.rp-stage[data-stage-page="room"] .invite-side { align-items: center; text-align: center; gap: 10px; width: 100%; }
html.rp-stage[data-stage-page="room"] .room-code-label { font-size: 15px; letter-spacing: .1em; }
html.rp-stage[data-stage-page="room"] .room-code-btn { font-size: 56px; letter-spacing: .14em; }
html.rp-stage[data-stage-page="room"] .invite-card .btn-invite { min-height: 52px; font-size: 18px; padding: 0 28px; }
/* «Пригласить» and «Позвонить» one under the other on the stage card (call pilot 2026-11-02). */
html.rp-stage[data-stage-page="room"] .invite-actions { flex: none; width: 100%; flex-direction: column; gap: 10px; }
html.rp-stage[data-stage-page="room"] .lobby-content > .qr-invite-note {
    grid-column: 1; grid-row: 5; justify-self: center; padding: 8px 16px; text-align: center; font-size: 16px;
    background: var(--st-panel); border: 1px solid var(--st-line); border-radius: 14px;
}
html.rp-stage[data-stage-page="room"] .lobby-content > .game-dropdown { grid-row: 1; }
html.rp-stage[data-stage-page="room"] .lobby-content > .btn-vote { grid-row: 2; justify-self: start; }
html.rp-stage[data-stage-page="room"] .lobby-content > .players-head { grid-row: 3; }
html.rp-stage[data-stage-page="room"] .players-title { font-size: 22px; }
html.rp-stage[data-stage-page="room"] .lobby-content > .players-list {
    grid-row: 4; align-self: stretch; overflow-y: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start; gap: 12px 16px; padding: 4px 14px 14px 4px;
}
html.rp-stage[data-stage-page="room"] .players-list > * {
    margin: 0; min-height: 64px; font-size: 19px; border-radius: var(--cut-1); box-shadow: var(--cut-shadow); rotate: -.5deg;
}
html.rp-stage[data-stage-page="room"] .players-list > :nth-child(4n + 2) { border-radius: var(--cut-2); rotate: .5deg; }
html.rp-stage[data-stage-page="room"] .players-list > :nth-child(4n + 3) { border-radius: var(--cut-3); rotate: .3deg; }
html.rp-stage[data-stage-page="room"] .players-list > :nth-child(4n + 4) { border-radius: var(--cut-4); rotate: -.3deg; }
html.rp-stage[data-stage-page="room"] .lobby-content > .bottom-section {
    grid-row: 5; position: static; display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 22px; padding: 0;
    background: none;
}
html.rp-stage[data-stage-page="room"] .bottom-section .lobby-status { font-size: 17px; margin: 0; }

/* «Во что играем?» (game-vote.css): owner 2026-10-29 «голосов - на весь экр». The phone's 420 px sheet becomes the whole
   stage: the games four a row in a centred 1120 px column, bigger icons and names, the buttons centred under them. The
   «Об игре» sheet over it is a centred card instead of a bottom sheet. */
html.rp-stage[data-stage-page="room"] .gv { max-width: none; }
html.rp-stage[data-stage-page="room"] .gv-back { top: 28px; left: 40px; width: 52px; height: 52px; font-size: 22px; }
html.rp-stage[data-stage-page="room"] .gv-head { padding: 30px 120px 10px; }
html.rp-stage[data-stage-page="room"] .gv-head h2 { font-family: var(--st-display); font-size: 36px; letter-spacing: -.02em; }
html.rp-stage[data-stage-page="room"] .gv-hint { margin-top: 6px; font-size: 18px; }
html.rp-stage[data-stage-page="room"] .gv-left { margin-top: 12px; padding: 6px 16px; font-size: 16px; }
html.rp-stage[data-stage-page="room"] .gv-pips i { width: 12px; height: 12px; }
html.rp-stage[data-stage-page="room"] .gv-grid {
    width: 100%; max-width: 1120px; margin: 0 auto; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 92px;
    gap: 14px; padding: 16px 24px 14px;
}
html.rp-stage[data-stage-page="room"] .gv-tile { gap: 12px; padding: 8px 12px 8px 10px; border-radius: var(--cut-1); }
html.rp-stage[data-stage-page="room"] .gv-cell:nth-child(4n + 2) .gv-tile { border-radius: var(--cut-2); }
html.rp-stage[data-stage-page="room"] .gv-cell:nth-child(4n + 3) .gv-tile { border-radius: var(--cut-3); }
html.rp-stage[data-stage-page="room"] .gv-cell:nth-child(4n + 4) .gv-tile { border-radius: var(--cut-4); }
html.rp-stage[data-stage-page="room"] :is(.gv-icon, .gv-tile .game-dropdown-item-icon-emoji) { width: 64px; height: 64px; border-radius: 12px; font-size: 42px; }
html.rp-stage[data-stage-page="room"] .gv-name { font-size: 17px; }
html.rp-stage[data-stage-page="room"] :is(.gv-need, .gv-suggested, .gv-phone) { font-size: 14px; }
html.rp-stage[data-stage-page="room"] .gv-face { width: 28px; height: 28px; font-size: 12px; }
html.rp-stage[data-stage-page="room"] .gv-count { height: 24px; font-size: 14px; }
html.rp-stage[data-stage-page="room"] .gv-info { top: 6px; right: 6px; width: 24px; height: 24px; font-size: 19px; }
html.rp-stage[data-stage-page="room"] .gv-minus { top: 4px; left: 4px; width: 26px; height: 26px; }
html.rp-stage[data-stage-page="room"] .gv-bottom { width: 100%; max-width: 520px; margin: 0 auto; padding: 10px 24px 22px; }
html.rp-stage[data-stage-page="room"] .gv-bottom .btn-play { width: 100%; }
html.rp-stage[data-stage-page="room"] .gv-status { font-size: 16px; margin-bottom: 10px; }
html.rp-stage[data-stage-page="room"] .gv-alt { font-size: 16px; }
html.rp-stage[data-stage-page="room"] .gv-result { padding-top: 24px; }
html.rp-stage[data-stage-page="room"] .gv-winner-icon,
html.rp-stage[data-stage-page="room"] .gv-winner .game-dropdown-item-icon-emoji { width: 160px; height: 160px; border-radius: 32px; }
html.rp-stage[data-stage-page="room"] .gv-winner-name { font-family: var(--st-display); font-size: 38px; }
html.rp-stage[data-stage-page="room"] .gv-winner-votes { font-size: 19px; }
html.rp-stage[data-stage-page="room"] .gv-runners { max-width: 420px; }
html.rp-stage[data-stage-page="room"] .gv-runners li { padding: 12px 18px; font-size: 17px; }
html.rp-stage[data-stage-page="room"] .gv-sheet { align-items: center; justify-content: center; }
html.rp-stage[data-stage-page="room"] .gv-sheet.is-page { max-width: none; }
html.rp-stage[data-stage-page="room"] .gv-sheet-panel { width: 520px; max-height: 86%; padding: 30px 32px 26px; border: 1px solid var(--room-line); border-radius: var(--cut-2); }

/* ════════════════════ Join by code / invite (client/join-any/) ════════════════════ */
html.rp-stage[data-stage-page="join"] body { min-height: var(--app-height, 720px); }
html.rp-stage[data-stage-page="join"] .app {
    flex: none; height: auto; min-height: 0; width: 600px; max-width: none; padding: 40px 48px 36px; display: flex; flex-direction: column; align-items: stretch; gap: 14px;
    background: var(--st-panel); border: 1px solid var(--st-line); border-radius: var(--cut-1); box-shadow: 8px 10px 0 rgb(0 0 0 / 30%);
}
html.rp-stage[data-stage-page="join"] .app > * { margin-left: 0; margin-right: 0; }
html.rp-stage[data-stage-page="join"] .app .title { font-size: 32px; }
html.rp-stage[data-stage-page="join"] .app .subtitle { font-size: 17px; }
html.rp-stage[data-stage-page="join"] .app .input { height: 60px; font-size: 21px; border-radius: 18px; }
html.rp-stage[data-stage-page="join"] .app .player-gender-selector { height: 60px; }

/* «Как играете с этого компьютера?»: the shared «Выбор режима» (shared/client/ui/mode-choice.ts) as two big
   cards in the middle of the stage instead of a bottom sheet. */
html.rp-stage .rp-mode-sheet { display: grid; place-items: center; }
html.rp-stage .rp-mode-sheet[hidden] { display: none; }
html.rp-stage .rp-mode-panel {
    position: relative; inset: auto; left: auto; bottom: auto; width: 1000px; max-width: none; padding: 40px 48px 48px; border-radius: var(--cut-1);
    color: #fff; background: var(--st-panel); border: 1px solid var(--st-line);
    transform: none; animation: none; box-shadow: 10px 12px 0 rgb(0 0 0 / 34%);
}
html.rp-stage .rp-mode-handle { display: none; }
html.rp-stage .rp-mode-panel header h2 { font-family: var(--st-display); font-size: 38px; letter-spacing: -.02em; }
html.rp-stage .rp-mode-options { grid-template-columns: 1fr 1fr; gap: 28px; }
html.rp-stage .rp-mode-option {
    flex-direction: column; justify-content: center; min-height: 230px; padding: 30px; gap: 20px; border-radius: var(--cut-2);
    background: var(--st-card); border-color: var(--st-line); box-shadow: var(--cut-shadow); rotate: -.8deg;
}
html.rp-stage .rp-mode-option strong { font-family: var(--st-display); font-size: 28px; letter-spacing: -.01em; }
html.rp-stage .rp-mode-option:hover { background: color-mix(in srgb, var(--st-card) 80%, #fff); }
html.rp-stage .rp-mode-option[data-mode="play"] { border: 2px solid var(--st-gold); }
html.rp-stage .rp-mode-option + .rp-mode-option { border-radius: var(--cut-3); rotate: .8deg; translate: 0 6px; }
html.rp-stage .rp-mode-option-icon { width: 96px; height: 96px; margin: 0; border-radius: 28px; }
html.rp-stage .rp-mode-option-icon svg { width: 60px; height: 60px; }

/* ════════════════════ «Комната» inside a game (#lobby-screen of every stage game) ════════════════════
   Owner 2026-10-30 on Рисовач: «начать игру хз где». The game pages' own room (the host's start after the preview, the
   guests' «Ожидание других игроков…») kept the phone column stretched to the stage: player rows 1750 px wide off the
   right edge, «Начать игру» alone in the bottom-left corner. On the stage it is one centred column like the packs
   screen: the title over a 3-a-row grid of player chips, the buttons centred in one row under them, the status under
   the buttons; owner 2026-10-30 «а это к низу спустить бы»: the buttons' row at the stage's bottom. The create-room page («room») has its own two-column lobby above. */
html.rp-stage:not([data-stage-page="room"]) #lobby-screen.active { align-items: center; }
html.rp-stage:not([data-stage-page="room"]) #lobby-screen > .lobby-content {
    flex: 1 1 auto; width: 100%; max-width: 1060px; min-height: 0; height: 100%; margin: 0 auto; padding: 56px 0 44px;
    justify-content: flex-start; align-items: center; gap: 0;
}
html.rp-stage:not([data-stage-page="room"]) #lobby-screen .lobby-content > .title { align-self: center; text-align: center; justify-content: center; margin: 0 0 22px; }
html.rp-stage:not([data-stage-page="room"]) #lobby-screen .lobby-content > .players-list {
    flex: 0 1 auto; align-self: stretch; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start;
    gap: 12px 16px; min-height: 0; padding: 4px 6px 10px; overflow-y: auto;
}
html.rp-stage:not([data-stage-page="room"]) #lobby-screen .players-list > * { margin: 0; min-width: 0; min-height: 64px; font-size: 19px; }
html.rp-stage:not([data-stage-page="room"]) #lobby-screen .lobby-content > :is(.rounds-selector, .mode-toggle) { align-self: center; margin: 18px 0 0; }
html.rp-stage:not([data-stage-page="room"]) #lobby-screen .lobby-content > .bottom-section {
    position: static; flex: none; align-self: stretch; display: flex; flex-flow: row wrap; align-items: center; justify-content: center;
    gap: 14px 16px; margin: auto 0 0; padding: 30px 0 0; background: none;
}
html.rp-stage:not([data-stage-page="room"]) #lobby-screen .lobby-content > .bottom-section > button { flex: none; width: auto; min-width: 240px; margin: 0; }
html.rp-stage:not([data-stage-page="room"]) #lobby-screen .lobby-content > .bottom-section > :is(.lobby-status, p) { flex: 1 1 100%; margin: 0; text-align: center; font-size: 18px; }
html.rp-stage:not([data-stage-page="room"]) #lobby-screen .lobby-content > .bottom-section > :is(.lobby-status, p):empty { display: none; }
/* «Правила» (game-preview.ts addRulesButton puts it into this row on the stage): first in the row at the buttons' height. */
html.rp-stage:not([data-stage-page="room"]) #lobby-screen .bottom-section > .rules-again-wrap { order: -1; flex: none; width: auto; align-self: stretch; font-size: 19px; }
html.rp-stage:not([data-stage-page="room"]) #lobby-screen .bottom-section > :is(.lobby-status, p) { order: 2; }
html.rp-stage:not([data-stage-page="room"]) #lobby-screen .bottom-section .rules-again { height: 100%; min-height: 54px; min-width: 160px; margin: 0; padding: 0 28px; border-width: 2px; border-radius: 999px; font-size: inherit; font-weight: 600; opacity: 1; }

/* ════════════════════ Квиз (client/mini-games/quiz/) ════════════════════ */
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="quiplash"], [data-stage-page="fibbage"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"], [data-stage-page="draw"]) .screen-content { max-width: none; width: 100%; padding-left: 56px; padding-right: 56px; }
/* Onboarding: the picture left, the text right, the buttons under the text. */
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="quiplash"], [data-stage-page="fibbage"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="pv"], [data-stage-page="bunker"], [data-stage-page="draw"]) .onboarding-container { max-width: 1060px; margin: 0 auto; width: 100%; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="quiplash"], [data-stage-page="fibbage"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="pv"], [data-stage-page="bunker"], [data-stage-page="draw"]) .slide-icon img { width: 300px; height: 300px; }
/* Owner 2026-10-30 «на пк строки онб скачут»: art drawn past its box (img[data-art-bleed], 115% with -7.5% margins of the
   phone's 240px icon) was smaller than the plain 300px art, so the title and the text moved on every other slide. Every
   picture keeps one 300px box: the plain one 300px, the bleeding one 345px with -22.5px margins. */
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="quiplash"], [data-stage-page="fibbage"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="pv"], [data-stage-page="bunker"], [data-stage-page="draw"]) #onboarding-screen .slide-icon:has(> picture > img, > img) { width: 300px; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="quiplash"], [data-stage-page="fibbage"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="pv"], [data-stage-page="bunker"], [data-stage-page="draw"]) #onboarding-screen .slide-icon img[data-art-bleed] { width: 345px; height: 345px; margin: -22.5px; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="quiplash"], [data-stage-page="fibbage"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="pv"], [data-stage-page="bunker"], [data-stage-page="draw"]) .slide-title { font-size: 44px; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="quiplash"], [data-stage-page="fibbage"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="pv"], [data-stage-page="bunker"], [data-stage-page="draw"]) .slide-text { font-size: 22px; max-width: 640px; margin-left: auto; margin-right: auto; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="quiplash"], [data-stage-page="fibbage"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="pv"], [data-stage-page="bunker"], [data-stage-page="draw"]) .onboarding-buttons { justify-content: center; gap: 16px; }
/* Owner 2026-10-30 «втф» (Joking Hazard start screen on PC): the phone's narrow rule-animated onboarding (360px slide,
   340px title and text, a 94px text floor, slides stretched to the screen, the h2's own top margin) wrapped the 44px
   title onto two lines and pushed the text and the buttons off the screen. On the stage it is the same slide as the
   other games: wide title and text, slide centred, buttons in view. */
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="quiplash"], [data-stage-page="fibbage"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="pv"], [data-stage-page="bunker"], [data-stage-page="draw"]) .rule-animated-onboarding .onboarding-slides { align-items: flex-start; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="quiplash"], [data-stage-page="fibbage"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="pv"], [data-stage-page="bunker"], [data-stage-page="draw"]) .rule-animated-onboarding .onboarding-slide { max-width: none; padding: 20px; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="quiplash"], [data-stage-page="fibbage"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="pv"], [data-stage-page="bunker"], [data-stage-page="draw"]) .rule-animated-onboarding .slide-title { max-width: none; margin-top: 0; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="quiplash"], [data-stage-page="fibbage"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="pv"], [data-stage-page="bunker"], [data-stage-page="draw"]) .rule-animated-onboarding .slide-text { min-height: 0; }
/* Owner 2026-10-30 «починил?» («Кто из нас» start screen on PC): every stage onboarding is one screen. The phone's 5vh
   gap above the slide (36 stage px under zoom) pushed «Пропустить / Далее» below the window whenever the text took three
   lines (Детектор правды, Как хорошо ты меня знаешь?, Бредовуха, Рисовач, Кто из нас, Я никогда не); without it the
   buttons stay at the bottom edge (the slide's own 20px top padding goes too: 4 lines of German fit 1280×720). «Что бы ты выбрал?» sized its onboarding by 100dvh, which the stage zoom made 1.6×
   the window: it takes the window height and the shared paddings like the others. */
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="quiplash"], [data-stage-page="fibbage"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="pv"], [data-stage-page="bunker"], [data-stage-page="draw"]) .onboarding-slides, html.rp-stage #onboarding-screen .onboarding-slides > .onboarding-slide { padding-top: 0; }
html.rp-stage[data-stage-page="wyr"] #onboarding-screen { height: var(--app-height, 100dvh); overflow: hidden; }
html.rp-stage[data-stage-page="wyr"] #onboarding-screen .onboarding-container { min-height: 0; height: 100%; padding: 40px 0 0; }
html.rp-stage[data-stage-page="wyr"] #onboarding-screen .onboarding-dots { margin-top: 0; }
/* Owner 2026-10-30 «а башня», «ну епрст» (Микс): the catalog's preview (?preview=1, the rules alone) of every game
   not on the stage yet (Микс, Башня, Детектив, Кодовые имена, Секретный Гитлер, Декодер, Табу, Слово волка, Alias,
   Крокодил, 5 секунд, Имаджинариум-like word games…) is html.rp-stage[data-stage-page="pv"]: the page adds the meta only
   for ?preview=1, so the game itself keeps its own layout. Their phone onboardings differ (a 100dvh column, a 360px
   grid with the art in half the screen, absolute slides), so here the screen is the window, the slide one centred
   column as in the other games, the shared onboarding rules above do the rest. */
html.rp-stage[data-stage-page="pv"] #onboarding-screen { height: var(--app-height, 100dvh); min-height: 0; padding: 0; overflow: hidden; }
html.rp-stage[data-stage-page="pv"] #onboarding-screen .onboarding-container:not([hidden]) { display: flex; flex-direction: column; min-height: 0; height: 100%; padding: 40px 0 0; box-sizing: border-box; }
html.rp-stage[data-stage-page="pv"] #onboarding-screen .onboarding-container:not([hidden]) { width: 100%; max-width: 1060px; margin: 0 auto; }
html.rp-stage[data-stage-page="pv"] #onboarding-screen :is(.onboarding-slides, .decoder-pages, .ww-pages) { flex: 1 1 0; min-height: 0; align-items: flex-start; padding-top: 0; }
html.rp-stage[data-stage-page="pv"] #onboarding-screen :is(.onboarding-slide, .decoder-page, .ww-page) { width: 100%; max-width: none; height: auto; padding: 0 20px; }
html.rp-stage[data-stage-page="pv"] #onboarding-screen :is(.onboarding-slide, .decoder-page, .ww-page).active { display: flex; flex-direction: column; align-items: center; grid-template-rows: none; margin-top: 0; margin-bottom: 0; }
html.rp-stage[data-stage-page="pv"] #onboarding-screen .slide-icon:has(> picture > img, > img), html.rp-stage[data-stage-page="pv"] #onboarding-screen .slide-icon img { width: 300px; height: 300px; margin-left: auto; margin-right: auto; }
html.rp-stage[data-stage-page="pv"] #onboarding-screen :is(.decoder-art, .ww-art) { width: 300px; height: 300px; align-self: center; transform: none; margin: 0 auto 18px; }
html.rp-stage[data-stage-page="pv"] #onboarding-screen .slide-title { max-width: none; min-height: 0; margin: 0 auto 20px; font-size: 44px; line-height: 1.12; }
html.rp-stage[data-stage-page="pv"] #onboarding-screen .slide-text { min-height: 0; max-width: 640px; margin-left: auto; margin-right: auto; font-size: 22px; line-height: 1.55; }

/* Packs: four a row, the summary on a backing (it sits over a sphere), settings and start on the right. */
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-content { padding-top: 34px; padding-bottom: 0; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-content > .title { font-size: 40px; justify-content: flex-start; text-align: left; align-self: stretch; margin: 0 0 4px !important; padding: 0 0 0 72px !important; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-content > .subtitle { text-align: left; align-self: stretch; font-size: 18px; padding: 0 0 0 72px !important; margin: 0 0 14px !important; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-illustrated-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 18px; padding: 4px 8px 8px 4px; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-illustrated-grid .packs-section-title { grid-column: 1 / -1; font-size: 17px; margin: 6px 0 0; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-illustrated-grid .pack-card { border-radius: var(--cut-1); box-shadow: var(--cut-shadow); rotate: -.6deg; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-illustrated-grid .pack-card:nth-of-type(4n + 2) { border-radius: var(--cut-2); rotate: .6deg; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-illustrated-grid .pack-card:nth-of-type(4n + 3) { border-radius: var(--cut-3); rotate: -.3deg; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-illustrated-grid .pack-card:nth-of-type(4n + 4) { border-radius: var(--cut-4); rotate: .4deg; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-illustrated-grid .pack-name { font-size: 17px; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-illustrated-grid .pack-count { font-size: 13px; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-content > .bottom-section {
    position: static; display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding: 16px 0 26px; background: none;
}
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-content > .bottom-section > button { flex: none; width: auto; min-width: 240px; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-content > .bottom-section .packs-summary {
    margin-right: auto; padding: 12px 20px; font-size: 17px; background: var(--st-panel); border: 1px solid var(--st-line); border-radius: 16px;
}
/* Owner 2026-10-29 «сдвиги корявые» (100 к 1: two small tiles in the top-left corner, the buttons in the bottom-right
   one, the stage empty between them): the packs block sits in the middle of the stage, the title over it, the tiles
   centred in rows (bigger when a game has four packs or fewer), the buttons right under the tiles. `safe` keeps a long
   list (Квиз) starting at the top. */
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-content { justify-content: safe center; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-content > :is(.title, .subtitle) { justify-content: center; text-align: center; padding: 0 72px !important; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-content > .packs-container { flex: 0 1 auto; min-height: 0; width: 100%; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-illustrated-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 160px)); justify-content: center; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-illustrated-grid:not(:has(> .pack-card:nth-of-type(5))) { grid-template-columns: repeat(auto-fit, 230px); gap: 26px; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-illustrated-grid:not(:has(> .pack-card:nth-of-type(5))) .pack-name { font-size: 21px; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-illustrated-grid:not(:has(> .pack-card:nth-of-type(5))) .pack-count { font-size: 15px; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-content > .bottom-section { justify-content: center; padding-top: 44px; min-height: 130px; box-sizing: border-box; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-content > .bottom-section .packs-summary { margin-right: 0; }
/* Owner 2026-10-30 «чзх низ не виден и не скроллится» (Квиз, Угадай мелодию: two sections of packs): `flex: none` let the
   tile list grow past the 720px stage, and .packs-content clips, so the last row and the buttons were cut off with no
   scroll. The list now shrinks to the room left under the title and above the buttons and scrolls itself
   (.packs-illustrated-scroll), the buttons stay on screen; a short list still sits in the middle. */
/* Owner 2026-10-30 «для янн (и мб др игр) экран паков не адаптирован под пк» / «кнопка назад то ближе к центру, то слева
   в углу»: «Я никогда не» and «Кто из нас» have no .packs-content (title, tiles and buttons sit straight in #packs-screen),
   so the phone's 520px column stayed: two tiles a row, the back arrow inside the column, the buttons overlapping. The
   same layout as the other games: the block in the middle of the stage, the arrow in the corner, the buttons in one row
   right under the tiles. */
html.rp-stage:is([data-stage-page="nhie"], [data-stage-page="wml"]) #packs-screen { max-width: none; justify-content: safe center; overflow-y: auto; padding-left: 56px; padding-right: 56px; }
html.rp-stage:is([data-stage-page="nhie"], [data-stage-page="wml"]) #packs-screen > .title { font-size: 40px; margin: 0 0 4px; }
html.rp-stage:is([data-stage-page="nhie"], [data-stage-page="wml"]) #packs-screen > .subtitle { font-size: 18px; margin: 0 0 14px; }
html.rp-stage:is([data-stage-page="nhie"], [data-stage-page="wml"]) #packs-screen > .packs-container { flex: none; width: 100%; overflow: visible; }
html.rp-stage:is([data-stage-page="nhie"], [data-stage-page="wml"]) #packs-screen > .bottom-section { display: flex; flex-flow: row wrap; align-items: center; justify-content: center; gap: 16px; padding: 44px 0 0; min-height: 130px; box-sizing: border-box; background: none; }
html.rp-stage:is([data-stage-page="nhie"], [data-stage-page="wml"]) #packs-screen > .bottom-section > button { flex: none; width: auto; min-width: 240px; margin: 0; }
html.rp-stage:is([data-stage-page="nhie"], [data-stage-page="wml"]) #packs-screen > .bottom-section > :is(.packs-room-error, #packs-room-status) { flex: 1 1 100%; order: 2; text-align: center; }
html.rp-stage:is([data-stage-page="nhie"], [data-stage-page="wml"]) #packs-screen > .bottom-section > :is(.packs-room-error, #packs-room-status):empty { display: none; }
/* Owner 2026-10-30 (Детектор лжи on a PC): «кнопки спустить бы и в 1 ряд». «Правила» (game-preview.ts addRulesButton puts
   it into the packs' button row) stands first in the row at the buttons' height instead of alone at the stage's bottom;
   the row sits a little lower under the tiles (44px). The `.screen` in the second rule beats packs.css
   `.screen .bottom-section.packs-compact-actions > *`. */
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) #packs-screen .bottom-section > .rules-again-wrap { order: -1; width: auto; }
html.rp-stage .screen#packs-screen .bottom-section > .rules-again-wrap { flex: none; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) #packs-screen .bottom-section .rules-again { height: 54px; min-height: 54px; min-width: 160px; margin: 0; padding: 0 28px; border-width: 2px; border-radius: 999px; font-size: 16px; opacity: 1; }

/* The question: big text in the middle, the answers two by two, a keys hint, who answered at the bottom. */
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"]) .game-content { justify-content: safe center; gap: 26px; padding-bottom: 96px; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"]) .game-content > .game-header { display: none; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"]) .question-text { font-size: 46px; font-weight: 800; line-height: 1.25; max-width: 1100px; margin: 0 auto; text-wrap: balance; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"]) .quiz-options { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 26px; width: 100%; max-width: 1140px; margin: 0 auto; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"]) .quiz-options.two-options { grid-template-columns: 1fr 1fr; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"]) .quiz-option { min-height: 100px; padding: 18px 28px; gap: 22px; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"]) .quiz-option .option-text { font-size: 28px; line-height: 1.25; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"]) .quiz-option .option-letter { width: 54px; height: 54px; font-size: 24px; flex: none; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="quiplash"], [data-stage-page="fibbage"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="draw"]) .stage-keys-hint { display: flex; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"]) .movie-frame-container { max-width: 620px; margin: 0 auto; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"]) .answer-feedback { font-size: 20px; min-height: 28px; text-align: center; }
html.rp-stage .mini-scoreboard { position: fixed; left: 56px; right: 56px; bottom: 26px; justify-content: flex-start; gap: 12px; margin: 0; overflow: visible; background: none; }
html.rp-stage .mini-score-item { gap: 10px; padding: 7px 18px 7px 8px; font-size: 20px; border-radius: 999px; background: rgb(255 255 255 / 8%); border: 1.5px solid var(--st-line); }
html.rp-stage .mini-score-avatar { width: 42px; height: 42px; font-size: 18px; }
html.rp-stage .mini-score-name { font-size: 20px; max-width: 200px; }
html.rp-stage .mini-score-value { font-size: 20px; }
/* «Полоска очков» (shared/client/score-strip.ts, owner 2026-11-02 «смотри, чтобы ничего ни на что не наложилось»):
   the play screens that got the strip keep its band (bottom 26 px + a 56 px chip row) free, as Квиз does with its
   padding-bottom: 88px. The games' own stage rules set a smaller padding (meme 20 px, knowme 40 px), hence !important. */
html.rp-stage :is(.screen-content, .shell):has(> .rp-score-strip) { padding-bottom: 96px !important; }
/* Детектор правды is a yellow page: its own dark chips (td-theme.css), not the translucent stage chip with white text.
   The shared gradient under the bar (game-ui.css) is dropped above: on the stage the bar is fixed over the spheres,
   and on yellow it showed as a solid band. */
html.rp-stage[data-stage-page="truth"] .mini-score-item { background: var(--td-surface); border-color: var(--td-surface); }
/* Avatar picker (avatar-capture.css, «GIF | Фото»): on the phone a bottom sheet of 70vh; on the stage its inline
   heights (avatar-capture.js, window pixels) ran past the bottom edge of the zoomed page and the sheet sat low. Owner 2026-10-29: «на пк открытие попапа с гиф не по
   центру» → a centred dialog that fits the stage. */
html.rp-stage .avatar-capture-overlay { align-items: center; }
html.rp-stage .avatar-capture-modal {
    max-width: 560px; height: min(680px, calc(100vh / var(--rp-stage-zoom, 1) - 80px)); border-radius: 24px;
    padding-bottom: 20px; box-shadow: 0 24px 60px rgb(0 0 0 / 50%);
}

/* Мелодия: the /tv/ question view itself (question-stage.css, mounted by main.ts under the phone's answers, which the
   stage hides; the record player moves into it): the record on the left, the four songs as cut-paper buttons on the
   right; the mode line above, the keys hint and the answer line under the songs, the scores along the bottom. The
   palette is the /tv/ melody one (tv/style.css body[data-tv-game="melody"]). */
html:not(.rp-stage) .game-content > .qs-root { display: none; }
html.rp-stage[data-stage-page="melody"] :is(.qs-root, .qs-reveal) {
    --tv-surface: #2a1758; --tv-line: rgb(255 255 255 / 12%); --bg-secondary: #2a1758;
    --accent: #a677ef; --accent-ink: #17191f; --gold: #edc945;
    --text-primary: #fff; --text-secondary: #d9ccf5; --rp-correct: #30c883; --rp-wrong: #fe7b90;
}
html.rp-stage[data-stage-page="melody"] .game-content > .quiz-options { display: none; }
/* The record's glow (music-player.css .vinyl-container::before) reaches past this 1200 px column: the phone's scroll
   box would cut it into a rectangle (owner 2026-10-30: «видны края сияния вокруг пластинки»); the stage fits 720 px. */
html.rp-stage[data-stage-page="melody"] #game-screen .game-content { justify-content: safe center; gap: 14px; max-width: 1200px; margin: 0 auto; width: 100%; padding-bottom: 88px; overflow: visible; }
html.rp-stage[data-stage-page="melody"] .game-content > .qs-root { flex: 1 1 auto; width: 100%; }
html.rp-stage[data-stage-page="melody"] .qs-root .vinyl-base { box-shadow: 0 0 0 8px rgb(166 119 239 / 40%); }
html.rp-stage[data-stage-page="melody"] .qs-root .audio-player-bar { background: var(--bg-secondary); border: 1px solid var(--tv-line); }
/* The keys hint and the answer line under the songs (main.ts moves them into the view's right column). */
html.rp-stage[data-stage-page="melody"] .qs-root .stage-keys-hint { justify-content: flex-start; padding-left: 8px; margin: -10px 0 0; }
html.rp-stage[data-stage-page="melody"] .qs-root .answer-feedback { text-align: left; padding-left: 8px; margin: -14px 0 0; }
html.rp-stage[data-stage-page="melody"] .qs-root .answer-feedback:empty { display: none; }
/* Round results: the /tv/ layout (question-stage.css .qs-reveal) in the /tv/ view's box under the top bar. */
html.rp-stage[data-stage-page="melody"] #reveal-container.qs-reveal .rr-container { inset: 92px 40px 0; }

/* Квиз: the /tv/ question view itself (question-stage.css, mounted by main.ts under the phone's answers, which the
   stage hides): the picture, the record or the four photos on the left, the topic, the question and the answers as
   cut-paper buttons on the right (two by two without media); the keys hint and the answer line under the answers, the
   scores along the bottom. The record player and the 4photo cells and keyboard move into it (main.ts placeStageNodes).
   The palette is the /tv/ quiz one (tv/style.css body[data-tv-game="quiz"]). */
html.rp-stage[data-stage-page="quiz"] :is(.qs-root, .qs-reveal) {
    --tv-surface: #100f36; --tv-line: rgb(255 255 255 / 16%); --bg-secondary: #211759;
    --accent: #6640ba; --accent-ink: #fff; --gold: #d5ae58;
    --text-primary: #fff; --text-secondary: #d6cfe8; --rp-correct: #30c883; --rp-wrong: #fe7b90;
}
html.rp-stage[data-stage-page="quiz"] .game-content > :is(.ai-topic-line, .movie-frame-container, .music-player, .question-text, .fourphoto-grid, .fourphoto-cells, .fourphoto-keyboard, .quiz-options) { display: none; }
html.rp-stage[data-stage-page="quiz"] #game-screen .game-content { justify-content: safe center; gap: 14px; max-width: 1200px; margin: 0 auto; width: 100%; padding-bottom: 88px; overflow: visible; }
html.rp-stage[data-stage-page="quiz"] .game-content > .qs-root { flex: 1 1 auto; width: 100%; }
html.rp-stage[data-stage-page="quiz"] .qs-root .vinyl-base { box-shadow: 0 0 0 8px rgb(102 64 186 / 38%); }
html.rp-stage[data-stage-page="quiz"] .qs-root .audio-player-bar { background: var(--bg-secondary); border: 1px solid var(--tv-line); }
html.rp-stage[data-stage-page="quiz"] .qs-root .audio-progress-fill { background: linear-gradient(90deg, #8f6ae0, var(--gold)); }
/* 4photo: the phone's letter cells and keyboard in place of the screen's empty cells. */
html.rp-stage[data-stage-page="quiz"] .qs-four-input { display: flex; flex-direction: column; align-items: center; gap: 22px; width: 100%; }
html.rp-stage[data-stage-page="quiz"] .qs-four-input .fourphoto-keyboard { max-width: 560px; }
/* The keys hint and the answer line under the answers (main.ts moves them into the view's right column). */
html.rp-stage[data-stage-page="quiz"] .qs-root .stage-keys-hint { margin: -10px 0 0; }
html.rp-stage[data-stage-page="quiz"] .qs-root.has-media .stage-keys-hint { justify-content: flex-start; padding-left: 8px; }
html.rp-stage[data-stage-page="quiz"] .qs-root:has(.tv-options.is-four) .stage-keys-hint { display: none; }
html.rp-stage[data-stage-page="quiz"] .qs-root .answer-feedback { margin: -14px 0 0; }
html.rp-stage[data-stage-page="quiz"] .qs-root.has-media .answer-feedback { text-align: left; padding-left: 8px; }
html.rp-stage[data-stage-page="quiz"] .qs-root .answer-feedback:empty { display: none; }
/* Round results: the /tv/ layout (question-stage.css .qs-reveal) in the /tv/ view's box under the top bar. */
/* The bottom stops over the host's pinned «Дальше», so the answers never go under it. Kept for everyone and from the
   start: the button comes up mid-reveal, and a box that shrank then would move the question. */
html.rp-stage[data-stage-page="quiz"] #reveal-container.qs-reveal .rr-container { inset: 92px 40px 80px; }

/* Смехлыст: each prompt on its own paper card with the answer field on it (prompts side by side), the matchup as
   two big cards with «VS» between them, keys A/B. */
html.rp-stage[data-stage-page="quiplash"] :is(#answering-screen, #voting-screen) .game-header { display: none; }
html.rp-stage[data-stage-page="quiplash"] .answering-content { justify-content: safe center; padding-bottom: 48px; }
html.rp-stage[data-stage-page="quiplash"] .answering-content > .title { font-size: 26px; font-family: inherit; font-weight: 700; opacity: .8; margin: 0 0 26px; }
html.rp-stage[data-stage-page="quiplash"] .answering-wrapper { flex: none; width: 100%; max-width: 1180px; align-items: center; }
html.rp-stage[data-stage-page="quiplash"] .prompts-list { flex: none; flex-direction: row; gap: 36px; overflow: visible; margin: 0 0 30px; align-self: stretch; }
html.rp-stage[data-stage-page="quiplash"] .prompt-card { flex: 1 1 0; display: flex; flex-direction: column; justify-content: space-between; min-height: 300px; padding: 36px 34px 30px; border-radius: var(--cut-1); box-shadow: var(--cut-shadow); rotate: -.8deg; }
html.rp-stage[data-stage-page="quiplash"] .prompt-card:nth-child(2n) { border-radius: var(--cut-2); rotate: .7deg; }
html.rp-stage[data-stage-page="quiplash"] .prompt-text { font-family: var(--st-display); font-size: 32px; font-weight: 800; line-height: 1.2; margin: 0 0 26px; text-wrap: balance; }
html.rp-stage[data-stage-page="quiplash"] .prompt-card .input { height: 68px; padding: 0 22px; font-size: 24px; border-radius: 16px; }
html.rp-stage[data-stage-page="quiplash"] #btn-submit-answers { flex: none; width: auto; min-width: 320px; }
html.rp-stage[data-stage-page="quiplash"] .submitted-overlay { inset: -20px; border-radius: 28px; }
html.rp-stage[data-stage-page="quiplash"] .submitted-icon { font-size: 72px; }
html.rp-stage[data-stage-page="quiplash"] .submitted-text { font-size: 32px; }
html.rp-stage[data-stage-page="quiplash"] .submitted-hint { font-size: 20px; }

/* The matchup: the /tv/ one itself (quiplash-matchup.css, mounted by main.ts under the phone's prompt card, which the
   stage hides with the phone's answer cards): the prompt's joke card, the two answers as buttons with «VS» between
   them; the hint, the keys and the author's line under them, the scores along the bottom. The palette is the /tv/
   quiplash one (tv/style.css body[data-tv-game="quiplash"]). */
html:not(.rp-stage) .voting-content > .qpm-root { display: none; }
html.rp-stage[data-stage-page="quiplash"] :is(.qpm-root, .qs-reveal) {
    --tv-surface: #3c1a5e; --tv-line: rgb(255 255 255 / 14%); --bg-secondary: #3c1a5e;
    --accent: #743cae; --accent-ink: #fff; --gold: #73c3b6;
    --text-primary: #fff; --text-secondary: #d8c8e8; --rp-correct: #30c883; --rp-wrong: #fd8295;
    --qp-paper: #f4eff8; --qp-ink: #17191f; --qp-ink-accent: #5e3a86;
}
html.rp-stage[data-stage-page="quiplash"] .voting-content > :is(.voting-prompt-card, .player-answers) { display: none; }
html.rp-stage[data-stage-page="quiplash"] .voting-content { justify-content: safe center; gap: 0; max-width: 1200px; margin: 0 auto; width: 100%; padding-bottom: 88px; }
html.rp-stage[data-stage-page="quiplash"] .voting-content > .qpm-root { flex: none; width: 100%; margin-bottom: 30px; }
/* The thumbs and the flag on the prompt's card after the vote (main.ts puts them there on the stage). */
html.rp-stage[data-stage-page="quiplash"] .qpm-root .tv-qp-prompt:has(> .quiplash-card-vote:not([hidden])) { padding-bottom: 64px; }
html.rp-stage[data-stage-page="quiplash"] :is(.voting-hint, .author-notice) { font-size: 22px; }
html.rp-stage[data-stage-page="quiplash"] #voting-screen .stage-keys-hint { margin-top: 14px; }
html.rp-stage[data-stage-page="quiplash"] #voting-screen:not(:has(.player-answer-card.votable)) .stage-keys-hint { visibility: hidden; }
/* Round results: the /tv/ layout (question-stage.css .qs-reveal) in the /tv/ view's box under the top bar; the prompt's
   card keeps room for the thumbs and the flag. */
html.rp-stage[data-stage-page="quiplash"] #reveal-container.qs-reveal .rr-container { inset: 92px 40px 0; }
html.rp-stage[data-stage-page="quiplash"] #reveal-container.qs-reveal .rr-context.quiplash-reveal-prompt { padding: 28px 32px 64px; border-radius: var(--cut-2); box-shadow: 8px 10px 0 rgb(0 0 0 / 30%); background: var(--qp-paper); }

/* Бредовуха: the /tv/ round itself (fibbage-stage.css, mounted by main.ts next to the phone's card and answers, which
   the stage hides): the fact on its cream card over two notes with the lie field, «Отправить» and the hint on the card
   (main.ts moves them there), then the fact on a smaller card and the answers as cut cards, two by two (three across
   past four), keys A–H; your own lie stays dimmed. The palette is the page's (fb-theme.css --fb-*). */
html:not(.rp-stage) :is(.writing-content > .fbs-lie, #voting-screen .fbs-pick) { display: none; }
html.rp-stage[data-stage-page="fibbage"] :is(.fbs-root, .qs-reveal) {
    --tv-surface: #4e1a1d; --tv-line: rgb(240 229 198 / 16%); --accent: #eba332; --accent-ink: #17191f; --gold: #eba332;
}
html.rp-stage[data-stage-page="fibbage"] :is(#writing-screen, #voting-screen) .game-header,
html.rp-stage[data-stage-page="fibbage"] :is(#writing-screen, #voting-screen) .title,
html.rp-stage[data-stage-page="fibbage"] .writing-content > .fb-card-stack,
html.rp-stage[data-stage-page="fibbage"] #voting-screen > .screen-content > :is(#voting-question-card, .subtitle, .vote-options) { display: none; }
html.rp-stage[data-stage-page="fibbage"] :is(.writing-content, #voting-screen > .screen-content) { justify-content: safe center; align-items: center; padding-bottom: 88px; }
html.rp-stage[data-stage-page="fibbage"] .writing-content > .fbs-lie { flex: none; width: 100%; max-width: 1100px; margin: 0 auto; }
html.rp-stage[data-stage-page="fibbage"] #voting-screen .fbs-pick { flex: none; width: 100%; max-width: 1200px; margin: 0 auto; }
/* The card's slot: the lie in one row with «Отправить», the hint under it; once sent, the line in ink. */
html.rp-stage[data-stage-page="fibbage"] .fbs-lie .tv-fb-slot { display: flex; flex-direction: column; align-items: center; gap: 16px; }
html.rp-stage[data-stage-page="fibbage"] .fbs-lie .fake-input-section { display: flex; flex-wrap: wrap; gap: 18px; width: 100%; max-width: 820px; }
html.rp-stage[data-stage-page="fibbage"] .fbs-lie .fake-input-section .input { flex: 1 1 0; min-width: 0; height: 68px; padding: 0 24px; font-size: 26px; border-radius: 16px; background: #fff; border: 2px solid var(--fb-maroon); }
html.rp-stage[data-stage-page="fibbage"] .fbs-lie .fake-input-section .btn-play { flex: none; width: auto; min-width: 220px; height: 68px; margin: 0; }
html.rp-stage[data-stage-page="fibbage"] .fbs-lie .fake-input-section .error-text { flex-basis: 100%; font-size: 18px; }
html.rp-stage[data-stage-page="fibbage"] .fbs-lie .subtitle { margin: 0; font-size: 22px; font-weight: 600; color: var(--fb-ink-muted); }
html.rp-stage[data-stage-page="fibbage"] .fbs-lie .submitted-overlay.visible { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px 14px; background: none; }
html.rp-stage[data-stage-page="fibbage"] .fbs-lie .submitted-icon { font-size: 40px; color: #3f8a2a; }
html.rp-stage[data-stage-page="fibbage"] .fbs-lie .submitted-text { font-size: 30px; color: var(--fb-ink); }
html.rp-stage[data-stage-page="fibbage"] .fbs-lie .submitted-hint { flex-basis: 100%; text-align: center; font-size: 20px; color: var(--fb-ink-muted); }
html.rp-stage[data-stage-page="fibbage"] .fbs-lie .submitted-overlay.visible ~ .subtitle { display: none; }
/* The thumbs and the flag on the fact's card after the vote (main.ts puts them there on the stage). */
html.rp-stage[data-stage-page="fibbage"] .fbs-pick .tv-fb-card:has(> .fibbage-card-vote:not([hidden])) { padding-bottom: 60px; }
html.rp-stage[data-stage-page="fibbage"] .vote-confirmed { font-size: 22px; margin-top: 18px; }
html.rp-stage[data-stage-page="fibbage"] #voting-screen .stage-keys-hint { margin-top: 18px; }
html.rp-stage[data-stage-page="fibbage"] #voting-screen:has(.fbs-pick.is-locked) .stage-keys-hint { display: none; }
/* Round results: the /tv/ layout (question-stage.css .qs-reveal) in the /tv/ view's box under the top bar; the fact's
   card keeps room for the thumbs and the flag. */
html.rp-stage[data-stage-page="fibbage"] #reveal-container.qs-reveal .rr-container { inset: 92px 40px 0; }
html.rp-stage[data-stage-page="fibbage"] #reveal-container.qs-reveal .rr-context.fibbage-reveal-question { padding: 26px 32px 64px; }

/* «100 к 1»: the /tv/ board itself (hundred-board.css, mounted by main.ts under the phone's table, which the stage
   hides), the answer typed in one row under it, the scores along the bottom as the /tv/ footer. */
html:not(.rp-stage) .game-content > .hk-board-root { display: none; }
html.rp-stage[data-stage-page="hundred"] .game-content > :is(.question-text, .answer-table) { display: none; }
html.rp-stage[data-stage-page="hundred"] #game-screen .game-content { justify-content: flex-start; gap: 18px; padding-top: 34px; padding-bottom: 100px; }
html.rp-stage[data-stage-page="hundred"] .game-content > .hk-board-root { width: 100%; max-width: 1220px; margin: 0 auto; flex: 1 1 auto; }
html.rp-stage[data-stage-page="hundred"] .answer-input-section { width: 100%; max-width: 940px; gap: 18px; margin: 6px auto 0; }
html.rp-stage[data-stage-page="hundred"] .answer-input { flex: 1 1 0; min-width: 0; height: 70px; padding: 0 24px; font-size: 26px; border-radius: 18px; }
html.rp-stage[data-stage-page="hundred"] .btn-send { flex: none; width: 120px; height: 70px; border-radius: 35px; font-size: 30px; }
html.rp-stage[data-stage-page="hundred"] .answer-feedback { margin: 0; }

/* Детектор правды: the /tv/ step itself (truth-detect.css, mounted by main.ts before the phone's phases, which the stage
   hides but for the keys hint): the statement in ink, the polygraph, «Да» / «Нет» or the numbers as cut cards (keys
   ←/→ (1/2) and the digits), the scores along the bottom. The palette is the page's (td-theme.css --td-*). */
html:not(.rp-stage) .game-content > .tdd-root { display: none; }
html.rp-stage[data-stage-page="truth"] :is(.tdd-root, .qs-reveal) {
    --tv-surface: #272723; --tv-line: rgb(255 255 255 / 12%); --accent: #272723; --accent-ink: #fff; --gold: #e88629;
}
html.rp-stage[data-stage-page="truth"] .game-content > .question-text,
html.rp-stage[data-stage-page="truth"] :is(#answer-phase, #guess-phase) > :not(.stage-keys-hint) { display: none; }
html.rp-stage[data-stage-page="truth"] .game-content > .tdd-root { flex: none; width: 100%; max-width: 1200px; margin: 0 auto; }
html.rp-stage[data-stage-page="truth"] .phase-container { display: flex; flex-direction: column; align-items: center; gap: 26px; }
html.rp-stage[data-stage-page="truth"] .waiting-text { font-size: 26px; font-weight: 700; }
html.rp-stage[data-stage-page="truth"] .answer-feedback:not(:empty) { align-self: center; width: auto; padding: 8px 30px; border-radius: 999px; font-size: 22px; }
html.rp-stage[data-stage-page="truth"] .stage-keys-hint { margin: 0; }
/* Once a pick is taken the scores pinned along the bottom used to cover «Принято!» (owner 2026-10-30): «Ответьте честно!»
   gives way to the waiting line, «Принято!» sits right under it, and the gaps tighten so both stay above the chips. */
html.rp-stage[data-stage-page="truth"] .game-content:has(> #waiting-phase:not([style*="none"])) { gap: 12px; }
html.rp-stage[data-stage-page="truth"] .game-content:has(> #waiting-phase:not([style*="none"])) .tv-td-hint { display: none; }
html.rp-stage[data-stage-page="truth"] .game-content:has(> #waiting-phase:not([style*="none"])) .tdd-root { margin-bottom: 14px; }
html.rp-stage[data-stage-page="truth"] .waiting-text { margin: 0; }
html.rp-stage[data-stage-page="truth"] .answer-feedback { margin: 0; }
html.rp-stage[data-stage-page="truth"] :is(#answer-phase:has(.yesno-btn:disabled), #guess-phase:has(.number-btn:disabled)) .stage-keys-hint { visibility: hidden; }
/* Round results: the /tv/ layout (question-stage.css .qs-reveal) in the /tv/ view's box under the top bar. */
/* The bottom stops over the pinned «Кто как ответил?» button, so the last answers never go under it. */
html.rp-stage[data-stage-page="truth"] #reveal-container.qs-reveal .rr-container { inset: 92px 40px 80px; }

/* «Что бы ты выбрал?»: the /tv/ dilemma itself (wyr-choice.css, mounted by main.ts under the swipe card, which the stage
   hides with the phone's buttons): what is asked on top, the two sides as big cut-card buttons with «или» (a click,
   ←/→, 1/2 or A/B), the thumbs and the flag under them once answered, the keys hint or «Ответ принят» under that.
   The palette is the /tv/ one (tv/style.css body[data-tv-game="wouldyourather"]); the round results take the /tv/
   layout (question-stage.css .qs-reveal). */
html:not(.rp-stage) .decision-layout > .wyc-root { display: none; }
html.rp-stage[data-stage-page="wyr"] :is(.wyc-root, .qs-reveal) {
    --tv-surface: #004e99; --tv-line: rgb(255 255 255 / 22%); --bg-secondary: #004e99;
    --accent: #ca003d; --accent-ink: #fff; --gold: #00bce9;
    --text-primary: #fff; --text-secondary: #e8f3ff; --rp-correct: #72feb5; --rp-wrong: #fdd2d3;
    --wyr-ink: #17191f; --wyr-a: #00bce9; --wyr-b: #ca003d;
}
html.rp-stage[data-stage-page="wyr"] .decision-layout {
    max-width: 1200px; width: 100%; margin: 0 auto; min-height: calc(var(--app-height, 720px) - 110px);
    justify-content: safe center; gap: 18px; padding: 0 40px 10px;
}
html.rp-stage[data-stage-page="wyr"] .decision-layout > :is(.decision-heading, .choice-card, .choice-buttons) { display: none; }
html.rp-stage[data-stage-page="wyr"] .decision-layout > .phase-line { justify-content: center; gap: 28px; font-size: 16px; }
html.rp-stage[data-stage-page="wyr"] .decision-layout > .wyc-root { position: relative; flex: none; padding: 8px 0; }
html.rp-stage[data-stage-page="wyr"] .wyc-root > .wyr-card-vote { position: static; transform: none; align-self: center; margin-top: 4px; }
html.rp-stage[data-stage-page="wyr"] .wyc-root > .wyr-report-flag { position: absolute; right: 8px; bottom: 0; color: #fff; }
html.rp-stage[data-stage-page="wyr"] .decision-layout > .wyr-teaser-chip { margin: 0 auto; }
html.rp-stage[data-stage-page="wyr"] .decision-layout > .wyr-teaser-cta { width: auto; min-width: 320px; align-self: center; }
html.rp-stage[data-stage-page="wyr"] #swipe-hint { margin: 0; font-size: 22px; text-align: center; }
html.rp-stage[data-stage-page="wyr"] .decision-layout:not(:has(.wyc-root.is-locked)) #swipe-hint,
html.rp-stage[data-stage-page="wyr"] .decision-layout:has(.wyc-root.is-locked) .stage-keys-hint { display: none; }
/* The role, the impostor vote and its reveal: the phone's panels, a wider column in the middle. */
html.rp-stage[data-stage-page="wyr"] :is(.role-panel, .vote-scroll, .reveal-scroll) { max-width: 900px; width: 100%; margin: 0 auto; }
html.rp-stage[data-stage-page="wyr"] .candidate-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Round results: the /tv/ layout (question-stage.css .qs-reveal) in the /tv/ view's box under the top bar. */
html.rp-stage[data-stage-page="wyr"] #wyr-reveal-container.qs-reveal .rr-container { inset: 92px 40px 0; }
html.rp-stage[data-stage-page="wyr"] #wyr-reveal-container.qs-reveal .rr-badge.majority { color: var(--wyr-ink); background: var(--wyr-a); }
html.rp-stage[data-stage-page="wyr"] #wyr-reveal-container.qs-reveal .rr-lb-score { color: var(--wyr-a); }
/* The phone's small caps title (styles.css .wyr-round-reveal) becomes the /tv/ question; voters as chips, as on /tv/. */
html.rp-stage[data-stage-page="wyr"] #wyr-reveal-container.qs-reveal .rr-context-text { color: #fff; font-size: 30px; font-weight: 700; text-transform: none; letter-spacing: 0; }
html.rp-stage[data-stage-page="wyr"] #wyr-reveal-container.qs-reveal .rr-voter { color: #fff; background: rgb(255 255 255 / 12%); }

/* «Как хорошо ты меня знаешь?»: the /tv/ step itself (knowme-stage.css, mounted by main.ts after the question card, which
   the stage hides with the phone's badge and phases): who answers on the navy label, the question, the hint, the
   options as cream cut-card buttons (a click, A–D or 1–4; ←/→ for two), the keys hint under them while this player may
   pick. The palette is the /tv/ one (tv/style.css body[data-tv-game="knowme"]); the round results take the /tv/
   layout (question-stage.css .qs-reveal). */
html:not(.rp-stage) .game-content > .kms-root { display: none; }
html.rp-stage[data-stage-page="knowme"] :is(.kms-root, .qs-reveal) {
    --tv-surface: #313555; --tv-line: rgb(255 242 220 / 18%); --accent: #822d29; --accent-ink: #fff; --gold: #fff2dc;
    --text-primary: #fff; --text-secondary: #fff2dc;
}
html.rp-stage[data-stage-page="knowme"] #onboarding-screen .slide-icon { width: 300px; }
html.rp-stage[data-stage-page="knowme"] #game-screen .game-content {
    display: flex; flex-direction: column; justify-content: safe center; gap: 20px;
    min-height: var(--app-height, 720px); padding-top: 104px; padding-bottom: 40px;
}
html.rp-stage[data-stage-page="knowme"] .game-content > :is(.game-header, .respondent-badge, .km-question-card, .phase-container) { display: none !important; }
html.rp-stage[data-stage-page="knowme"] .game-content > .kms-root { flex: none; width: 100%; max-width: 1200px; margin: 0 auto; }
html.rp-stage[data-stage-page="knowme"] .kms-root > .km-teaser-chip { margin: 0 auto; }
html.rp-stage[data-stage-page="knowme"] .game-content > .km-teaser-cta { width: auto; min-width: 320px; align-self: center; margin: 0 auto; }
html.rp-stage[data-stage-page="knowme"] .game-content > .knowme-card-vote { align-self: center; margin: 0; }
html.rp-stage[data-stage-page="knowme"] #km-keys-hint { margin: 0; }
html.rp-stage[data-stage-page="knowme"] .game-content:not(:has(.tv-km-options.is-votable)) #km-keys-hint { visibility: hidden; }
html.rp-stage[data-stage-page="knowme"] .game-content:has(.tv-km-options.is-two) #km-keys-hint kbd:nth-of-type(n + 3) { display: none; }
/* Round results: the /tv/ layout (question-stage.css .qs-reveal) in the /tv/ view's box under the top bar. */
html.rp-stage[data-stage-page="knowme"] #reveal-container.qs-reveal .rr-container { inset: 92px 40px 0; }
html.rp-stage[data-stage-page="knowme"] #reveal-container.qs-reveal .rr-context-text { color: #fff; font-weight: 700; }
html.rp-stage[data-stage-page="knowme"] #reveal-container.qs-reveal .rr-context-subtext { font-size: 21px; font-weight: 600; }
html.rp-stage[data-stage-page="knowme"] #reveal-container.qs-reveal .rr-context .knowme-card-vote { justify-content: center; margin: 18px 0 0; }

/* «Кто из нас» (only in a room: the page adds its meta for ?room=, the one-phone game keeps the phone column): each
   step is the /tv/ one (wml-stage.css, mounted by multiplayer.ts before the phone's card, statement and punishment
   kicker, which the stage hides with the rest of the phone's step): the statement on the dark cut card with the
   players as cut-card buttons (a click or 1–9), the votes as the screen's tally rows, the punishments on its cards.
   The phone's top bar, round line, countdowns and «Выполнено» stay. The palette is the /tv/ one
   (tv/style.css body[data-tv-game="whosmostlikelyto"]). */
html:not(.rp-stage) .wms-root { display: none; }
html.rp-stage[data-stage-page="wml"] .wms-root { --tv-surface: #262629; --tv-line: rgb(228 227 229 / 14%); --text-secondary: #b4b3b8; flex: 1 0 auto; display: flex; flex-direction: column; min-height: 0; }
html.rp-stage[data-stage-page="wml"] .screen.multiplayer-screen { max-width: none; padding: 20px 56px 28px; }
html.rp-stage[data-stage-page="wml"] :is(#onboarding-screen, #packs-screen, #multiplayer-waiting-screen) { padding-top: 34px; }
html.rp-stage[data-stage-page="wml"] #multiplayer-waiting-screen .screen-content,
html.rp-stage[data-stage-page="wml"] #multiplayer-ended-screen .multiplayer-center { width: 100%; max-width: 640px; margin: 0 auto; }
html.rp-stage[data-stage-page="wml"] .multiplayer-topbar { min-height: 64px; }
html.rp-stage[data-stage-page="wml"] .multiplayer-brand-mark { font-size: 14px; }
html.rp-stage[data-stage-page="wml"] .multiplayer-topline { margin: 0 0 8px; }
html.rp-stage[data-stage-page="wml"] :is(.round-pill, .answer-progress, .next-round-label) { font-size: 17px; }
html.rp-stage[data-stage-page="wml"] #multiplayer-game-screen > :is(.wm-question-card, .wm-guess-banner, .wm-vote-hint, .wm-vote-grid),
html.rp-stage[data-stage-page="wml"] #multiplayer-reveal-screen > :is(.reveal-statement, .wm-reveal-summary, .wm-tally, .wm-leaderboard),
html.rp-stage[data-stage-page="wml"] .punishment-phase-content > :is(.punishment-phase-kicker, h1, .punishment-phase-copy, .punishment-phase-list, .punishment-phase-status) { display: none !important; }
html.rp-stage[data-stage-page="wml"] #multiplayer-game-screen > .wm-teaser-cta { align-self: center; width: auto; min-width: 320px; }
html.rp-stage[data-stage-page="wml"] .wms-root .wm-teaser-chip { align-self: center; margin: 0; }
/* The question card's thumbs and flag, moved onto the stage's card (multiplayer.ts placeCardExtras). */
html.rp-stage[data-stage-page="wml"] .tv-wml-card .wm-online-card-vote { position: static; margin-top: 8px; }
html.rp-stage[data-stage-page="wml"] .tv-wml-card .wm-online-report-flag { position: absolute; right: 14px; bottom: 12px; }
html.rp-stage[data-stage-page="wml"] .tv-wml-card { position: relative; }
html.rp-stage[data-stage-page="wml"] .next-round-track { width: 100%; max-width: 760px; margin: 18px auto 0; height: 6px; }
html.rp-stage[data-stage-page="wml"] .punishment-phase-content { max-width: none; }
html.rp-stage[data-stage-page="wml"] .punishment-phase-content > :is(.punishment-complete-button, .punishment-waiting, .punishment-timebar, .punishment-time-label, .wm-punishment-cta) { width: 100%; max-width: 480px; margin-left: auto; margin-right: auto; }
html.rp-stage[data-stage-page="wml"] .punishment-complete-button { min-height: 60px; font-size: 19px; }
html.rp-stage[data-stage-page="wml"] .punishment-time-label { font-size: 16px; }

/* «Я никогда не» (only in a room, as «Кто из нас»): each step is the /tv/ one (nhie-stage.css on wml-stage.css, mounted
   by multiplayer.ts before the phone's swipe card, statement and punishment kicker, which the stage hides with the rest
   of the phone's step): the statement on the dark cut card with «Не было» / «Было» as two cut-card buttons (a click,
   1/2 or ←/→), the answers as the screen's two columns with the ring, the punishments on its cards. The phone's top
   bar, round line, countdowns and «Выполнено» stay. The palette is the /tv/ one
   (tv/style.css body[data-tv-game="neverhaveiever"]). */
html.rp-stage[data-stage-page="nhie"] .nhs-root {
    --tv-surface: #2a1d24; --tv-line: rgb(241 218 221 / 14%); --text-secondary: #c9b4b8; --bg-primary: #171316; --bg-secondary: #2a1d24;
    --wm-rose: #e04a5e; --wm-rose-text: #f7a1ac; --wm-crimson: #bc2438; --rp-correct: #75c259;
    flex: 1 0 auto; display: flex; flex-direction: column; min-height: 0;
}
html.rp-stage[data-stage-page="nhie"] .screen.multiplayer-screen { width: 100%; max-width: none; padding: 20px 56px 28px; }
html.rp-stage[data-stage-page="nhie"] :is(#onboarding-screen, #packs-screen, #multiplayer-waiting-screen) { padding-top: 34px; }
html.rp-stage[data-stage-page="nhie"] #multiplayer-waiting-screen .screen-content,
html.rp-stage[data-stage-page="nhie"] #multiplayer-ended-screen .multiplayer-center { width: 100%; max-width: 640px; margin: 0 auto; }
html.rp-stage[data-stage-page="nhie"] .multiplayer-topbar { min-height: 64px; }
html.rp-stage[data-stage-page="nhie"] .multiplayer-topline { margin: 0 0 8px; }
html.rp-stage[data-stage-page="nhie"] :is(.round-pill, .answer-progress, .next-round-label) { font-size: 17px; }
html.rp-stage[data-stage-page="nhie"] #multiplayer-game-screen > :is(.multiplayer-lives, .split-statement-card, .multiplayer-answer-area),
html.rp-stage[data-stage-page="nhie"] #multiplayer-reveal-screen > :is(.reveal-statement, .choice-columns),
html.rp-stage[data-stage-page="nhie"] .punishment-phase-content > :is(.punishment-phase-kicker, h1, .punishment-phase-copy, .punishment-phase-list, .punishment-phase-status) { display: none !important; }
html.rp-stage[data-stage-page="nhie"] #multiplayer-game-screen > .nhie-upgrade { align-self: center; width: auto; min-width: 320px; }
html.rp-stage[data-stage-page="nhie"] .nhs-root .nhie-card-teaser { align-self: center; margin: 0; }
/* The card's thumbs, flag and refresh, moved onto the stage's card (multiplayer.ts placeCardExtras). */
html.rp-stage[data-stage-page="nhie"] .tv-wml-card { position: relative; }
html.rp-stage[data-stage-page="nhie"] .tv-wml-card .nhie-online-card-vote { position: static; margin-top: 8px; }
html.rp-stage[data-stage-page="nhie"] .tv-wml-card .nhie-report-flag { position: absolute; right: 14px; bottom: 12px; }
html.rp-stage[data-stage-page="nhie"] .tv-wml-card .nhie-refresh-card { position: absolute; right: 14px; top: 12px; }
html.rp-stage[data-stage-page="nhie"] .next-round-track { width: 100%; max-width: 760px; margin: 18px auto 0; height: 6px; }
html.rp-stage[data-stage-page="nhie"] .punishment-phase-content { width: 100%; max-width: none; }
html.rp-stage[data-stage-page="nhie"] .punishment-phase-content > :is(.punishment-complete-button, .punishment-waiting, .punishment-timebar, .punishment-time-label, .rp-premium-cta) { width: 100%; max-width: 480px; margin-left: auto; margin-right: auto; }
html.rp-stage[data-stage-page="nhie"] .punishment-complete-button { min-height: 60px; font-size: 19px; }
html.rp-stage[data-stage-page="nhie"] .punishment-time-label { font-size: 16px; }

/* «Что за мем?»: each step is the /tv/ one (meme-stage.css, mounted by main.ts after the round screen's prompt card,
   which the stage hides with the phone's subtitle, hand, table and «Карта выбрана» overlay): the prompt on the white
   cut card on the left, the cards on the right as cut-card buttons (the hand while choosing, the table while voting;
   a click, 1–9 or the letter), the pick with the purple edge. «Обновить руку» stays under the cards. The round results
   take the /tv/ layout (question-stage.css .qs-reveal + meme-stage.css .mms-reveal). The palette is the /tv/ one
   (tv/style.css body[data-tv-game="whatdoyoumeme"]): a light page, ink on white cards. */
html:not(.rp-stage) .game-content > .mms-root { display: none; }
html.rp-stage[data-stage-page="meme"] :is(.mms-root, .mms-reveal) {
    --tv-surface: #fff; --tv-line: #dddbe6; --accent: #267c86; --accent-ink: #fff; --gold: #7e3c9b;
    --text-primary: #17191f; --text-secondary: #4a4d57; --light-ink: #17191f; --light-card: #fff;
    --cut-shadow: 5px 6px 0 rgb(23 25 31 / 14%);
}
html.rp-stage[data-stage-page="meme"] :is(#choosing-screen, #voting-screen) .game-content {
    display: flex; flex-direction: column; justify-content: safe center; gap: 16px; max-width: 1240px; margin: 0 auto; width: 100%;
    min-height: var(--app-height, 720px); padding-top: 88px; padding-bottom: 20px;
}
html.rp-stage[data-stage-page="meme"] .game-content > :is(.game-header, .prompt-card, .choosing-subtitle, .voting-subtitle, .cards-grid, .table-grid, .submitted-overlay) { display: none !important; }
html.rp-stage[data-stage-page="meme"] .game-content > .mms-root { flex: none; width: 100%; }
html.rp-stage[data-stage-page="meme"] .mms-root.is-voting .tv-meme-table:not(.is-captions) { flex: none; height: 480px; }
html.rp-stage[data-stage-page="meme"] .mms-root .tv-meme-table.is-captions { flex: none; height: auto; max-height: 500px; }
/* The hand leaves room for «Обновить руку» under it. */
html.rp-stage[data-stage-page="meme"] #choosing-screen .mms-root .tv-meme-table:not(.is-captions) { flex: none; height: 410px; }
html.rp-stage[data-stage-page="meme"] #choosing-screen .mms-root .tv-meme-table.is-captions { max-height: 410px; }
html.rp-stage[data-stage-page="meme"] .game-content > .btn-refresh-hand { align-self: center; width: auto; min-height: 46px; padding: 0 28px; font-size: 17px; margin: 0; }
/* Round results: the /tv/ layout in the /tv/ view's box under the top bar; light tokens and the prompt as on /tv/. */
html.rp-stage[data-stage-page="meme"] #reveal-container.mms-reveal { overflow: visible; }
html.rp-stage[data-stage-page="meme"] #reveal-container.mms-reveal .rr-container {
    inset: 92px 40px 0;
    --rr-ink: var(--light-ink); --rr-muted: var(--text-secondary);
    --rr-surface: var(--light-card); --rr-border: var(--tv-line);
    --rr-leading-surface: var(--light-card); --rr-leading-border: var(--gold);
    --rr-wrong-surface: var(--light-card); --rr-correct-surface: var(--light-card);
}
html.rp-stage[data-stage-page="meme"] #reveal-container.mms-reveal .rr-context { position: relative; padding: 24px 28px 56px; background: var(--light-card); border: 2px solid var(--tv-line); border-radius: var(--cut-2); rotate: -1deg; box-shadow: var(--cut-shadow); }
html.rp-stage[data-stage-page="meme"] #reveal-container.mms-reveal .rr-context-text { color: var(--light-ink); font-weight: 700; }
html.rp-stage[data-stage-page="meme"] #reveal-container.mms-reveal .rr-option.rr-type-correct { border-color: var(--rp-correct); }
html.rp-stage[data-stage-page="meme"] #reveal-container.mms-reveal .rr-author-name { color: var(--gold); font-weight: 700; }
html.rp-stage[data-stage-page="meme"] #reveal-container.mms-reveal .rr-voter { color: var(--light-ink); background: rgb(23 25 31 / 7%); }
html.rp-stage[data-stage-page="meme"] #reveal-container.mms-reveal .rr-lb-pos { color: var(--text-secondary); background: rgb(23 25 31 / 7%); }
html.rp-stage[data-stage-page="meme"] #reveal-container.mms-reveal .rr-lb-score { color: var(--gold); }

/* «Имаджинариум»: each step is the /tv/ one (meme-stage.css + im-stage.css, shared/client/im-stage.ts, mounted by
   main.ts at the top of the round screen, which the stage hides with the phone's labels, hand, table, waiting line and
   «Карта выбрана» overlay): the storyteller and the association on a cream cut strip on top, the cards upright under it
   across the whole width (one row when that is biggest) as cut-card buttons (the storyteller's hand to pick for the association, the others' hand to play, the
   table to vote on; a click, 1–9 or the letter). The storyteller's field and «Отправить» stay under the hand. The round
   results take the /tv/ layout (question-stage.css .qs-reveal + meme-stage.css .mms-reveal). The palette is the /tv/
   one (tv/style.css body[data-tv-game="imaginarium"]): the amber page, cream cards with ink, ink panels with white. */
html:not(.rp-stage) .game-content > .mms-root.ims { display: none; }
html.rp-stage[data-stage-page="im"] :is(.mms-root, .mms-reveal) {
    --tv-surface: #422c35; --tv-line: rgb(66 44 53 / 22%); --accent: #422c35; --accent-ink: #fff; --gold: #72b3d9;
    --text-primary: #17191f; --text-secondary: #2b1e14; --light-ink: #17191f; --light-card: #fff0ca;
    --cut-shadow: 5px 6px 0 rgb(66 44 53 / 30%);
}
html.rp-stage[data-stage-page="im"] :is(#association-screen, #choosing-screen, #voting-screen) .game-content {
    display: flex; flex-direction: column; justify-content: safe center; gap: 16px; max-width: 1240px; margin: 0 auto; width: 100%;
    min-height: calc(720px - var(--rp-gh-space, 104px)); padding-top: 0; padding-bottom: 16px;
}
html.rp-stage[data-stage-page="im"] .game-content > :is(.game-header, .association-card, .cards-grid, .table-grid, .submitted-overlay, #waiting-view, #storyteller-notice) { display: none !important; }
html.rp-stage[data-stage-page="im"] #storyteller-view > :is(.storyteller-label, .subtitle, .cards-grid) { display: none !important; }
html.rp-stage[data-stage-page="im"] .game-content > .mms-root { flex: none; width: 100%; }
html.rp-stage[data-stage-page="im"] .mms-root.is-voting .tv-meme-table { flex: none; height: 440px; }
html.rp-stage[data-stage-page="im"] .mms-root:not(.is-voting) .tv-meme-hint { font-size: 25px; }
/* The storyteller's hand leaves room for the association field under it. */
html.rp-stage[data-stage-page="im"] #association-screen .mms-root.is-voting .tv-meme-table { height: 370px; }
html.rp-stage[data-stage-page="im"] #storyteller-view .association-input-area { display: flex; gap: 14px; max-width: 900px; margin: 0 auto; }
html.rp-stage[data-stage-page="im"] #storyteller-view .association-input-area .input { flex: 1; min-height: 56px; font-size: 20px; border-radius: var(--cut-2); }
html.rp-stage[data-stage-page="im"] #storyteller-view .association-input-area .btn-play { flex: none; width: auto; min-width: 200px; min-height: 56px; font-size: 19px; margin: 0; }
/* Round results: the /tv/ layout in the /tv/ view's box under the top bar; the cream cards and the ink rows as on /tv/. */
html.rp-stage[data-stage-page="im"] #reveal-container.mms-reveal { overflow: visible; }
html.rp-stage[data-stage-page="im"] #reveal-container.mms-reveal .rr-container {
    inset: 92px 40px 0;
    --rr-ink: var(--light-ink); --rr-muted: #5a4636;
    --rr-surface: var(--light-card); --rr-border: transparent;
    --rr-wrong-surface: var(--light-card); --rr-correct-surface: var(--light-card);
}
html.rp-stage[data-stage-page="im"] #reveal-container.mms-reveal .rr-context { position: relative; padding: 24px 28px 56px; background: var(--light-card); border-radius: var(--cut-2); rotate: -1deg; box-shadow: var(--cut-shadow); }
html.rp-stage[data-stage-page="im"] #reveal-container.mms-reveal .rr-context-text { color: var(--light-ink); font-weight: 700; }
html.rp-stage[data-stage-page="im"] #reveal-container.mms-reveal .rr-context-subtext { color: var(--im-cream); background: var(--im-ink); }
html.rp-stage[data-stage-page="im"] #reveal-container.mms-reveal .rr-option-image-card { background: var(--light-card); border-color: transparent; }
html.rp-stage[data-stage-page="im"] #reveal-container.mms-reveal .rr-option-image-card.rr-type-correct { border-color: var(--rp-correct); }
html.rp-stage[data-stage-page="im"] #reveal-container.mms-reveal .rr-option-image-owner { color: var(--light-ink); }
html.rp-stage[data-stage-page="im"] #reveal-container.mms-reveal .rr-option-image-voters { color: #5a4636; }
html.rp-stage[data-stage-page="im"] #reveal-container.mms-reveal .rr-voter { color: var(--light-ink); background: rgb(66 44 53 / 10%); }
html.rp-stage[data-stage-page="im"] #reveal-container.mms-reveal .rr-lb-score { color: var(--gold); }
/* «Joking Hazard»: each step is the /tv/ one (jh-stage.css, mounted by main.ts before the round screen's copy, which the
   stage hides with the phone's top bar, strip, comics list and «Голос принят» card): the round's comic as three cut
   cards with the phone's kicker, title and hint; the hand stays the phone's (a row of seven cut cards under it) with
   its buttons («До стартовой» / «После стартовой», «Готово», the exchange, the line for a blank panel); while voting
   the table as cut-card buttons (a click, 1–9 or the letter), the pick with the green edge. The round results take
   the /tv/ layout (question-stage.css .qs-reveal + jh-stage.css .jhs-reveal). The palette is the /tv/ one
   (tv/style.css body[data-tv-game="jokinghazard"]): a white comic page, ink on white cards. */
html:not(.rp-stage) .shell > .jhs-root { display: none; }
html.rp-stage[data-stage-page="jh"] :is(.jhs-root, .jhs-reveal) {
    --tv-surface: #fff; --tv-line: #dcdcd4; --accent: #236b92; --accent-ink: #fff; --gold: #4f7a1e;
    --text-primary: #17191f; --text-secondary: #4a4d55; --light-ink: #17191f; --light-card: #fff; --jh-red: #e53945;
    --cut-shadow: 5px 6px 0 rgb(23 25 31 / 14%);
}
html.rp-stage[data-stage-page="jh"] :is(.game-shell, .vote-shell) {
    display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 12px;
    max-width: 1240px; width: 100%; margin: 0 auto; min-height: calc(var(--app-height, 720px) - var(--rp-gh-space, 0px)); padding-top: 0; padding-bottom: 12px;
}
html.rp-stage[data-stage-page="jh"] :is(.game-shell, .vote-shell) > :is(.game-topbar, .phase-copy, .comic-stage, .comics-list, #vote-waiting) { display: none !important; }
html.rp-stage[data-stage-page="jh"] :is(.game-shell, .vote-shell) > .jhs-root { flex: none; width: 100%; gap: 10px; }
/* The round: the strip smaller while the hand is on screen, bigger while this player waits. */
html.rp-stage[data-stage-page="jh"] .game-shell .jhs-title { font-size: 28px; }
html.rp-stage[data-stage-page="jh"] .game-shell .jhs-hint { font-size: 18px; }
html.rp-stage[data-stage-page="jh"] .game-shell .jhs-strip { height: 180px; gap: 16px; }
html.rp-stage[data-stage-page="jh"] .game-shell:has(#hand:empty) .jhs-strip { height: 320px; }
html.rp-stage[data-stage-page="jh"] .game-shell > :is(.order-controls, .selection-bar, .waiting-card, .caption-editor) { width: 100%; max-width: 560px; margin: 0; }
html.rp-stage[data-stage-page="jh"] .order-controls .btn-join { min-height: 48px; font-size: 16px; }
html.rp-stage[data-stage-page="jh"] .selection-bar { font-size: 16px; border-radius: var(--cut-2); }
html.rp-stage[data-stage-page="jh"] .selection-bar .btn-play { min-height: 46px; font-size: 16px; }
html.rp-stage[data-stage-page="jh"] .waiting-card { border-radius: var(--cut-2); }
html.rp-stage[data-stage-page="jh"] .hand {
    display: flex; justify-content: center; gap: 14px; width: 100%; margin: 0; padding: 4px 6px 8px; overflow: visible; scroll-snap-type: none;
}
html.rp-stage[data-stage-page="jh"] .hand:empty { display: none; }
html.rp-stage[data-stage-page="jh"] .hand-card { flex: 0 0 118px; cursor: pointer; }
html.rp-stage[data-stage-page="jh"] .hand-card:hover:not(:disabled):not(.selected) .panel { translate: 0 -4px; box-shadow: 6px 8px 0 color-mix(in srgb, #236b92 30%, transparent); }
/* Voting: the table's line reads as the step's title. */
html.rp-stage[data-stage-page="jh"] .vote-shell .jhs-hint { font-size: 22px; color: var(--text-primary); }
/* Round results: the /tv/ layout in the /tv/ view's box under the top bar, light tokens as on /tv/. */
html.rp-stage[data-stage-page="jh"] #reveal-container.qs-reveal { overflow: visible; }
html.rp-stage[data-stage-page="jh"] #reveal-container.qs-reveal .rr-container {
    inset: 92px 40px 0;
    --rr-ink: var(--light-ink); --rr-muted: var(--text-secondary);
    --rr-surface: var(--light-card); --rr-border: var(--tv-line);
    --rr-leading-surface: var(--light-card); --rr-leading-border: var(--gold);
    --rr-wrong-surface: var(--light-card); --rr-correct-surface: var(--light-card);
}
html.rp-stage[data-stage-page="jh"] #reveal-container.qs-reveal .rr-voter { color: var(--light-ink); background: rgb(23 25 31 / 7%); }
html.rp-stage[data-stage-page="jh"] #reveal-container.qs-reveal .rr-lb-pos { color: var(--text-secondary); background: rgb(23 25 31 / 7%); }
html.rp-stage[data-stage-page="jh"] #reveal-container.qs-reveal .rr-lb-score { color: var(--gold); }
/* Геоугадайка: the round keeps the phone's Street View sphere over the whole stage (one panorama per page: billed per
   load), the guess map a bigger corner preview that opens wide on a click (Enter or Space confirms the pin). The round
   results are the /tv/ ones (geo-stage.css, mounted by main.ts in the round results screen, which the stage shows
   instead of the phone's map, note and reveal): the big map with the flag and the avatar pins, the place, the rows,
   then the board. The palette is the page's (geo-theme.css --geo-*). */
html.rp-stage[data-stage-page="geo"] #game-screen.geo-sphere .map-guess-container { right: 28px; bottom: 34px; width: 340px; }
html.rp-stage[data-stage-page="geo"] #game-screen.geo-sphere .guess-map { height: 220px; }
html.rp-stage[data-stage-page="geo"] #game-screen.geo-sphere .map-guess-container.is-open { width: 720px; }
html.rp-stage[data-stage-page="geo"] #game-screen.geo-sphere .map-guess-container.is-open .guess-map { height: 470px; }
html.rp-stage[data-stage-page="geo"] #game-screen.geo-sphere .map-guess-container:not(.is-open) .btn-confirm-guess { padding: 12px; font-size: 18px; }
html.rp-stage[data-stage-page="geo"] .btn-confirm-guess { min-height: 56px; font-size: 20px; border-radius: 28px; }
html.rp-stage[data-stage-page="geo"] #game-screen:not(.geo-sphere) .game-content { max-width: 1100px; margin: 0 auto; width: 100%; }
html.rp-stage[data-stage-page="geo"] #game-screen:not(.geo-sphere) .guess-map { height: 360px; }
html.rp-stage[data-stage-page="geo"] .geo-role { max-width: 760px; margin-left: auto; margin-right: auto; font-size: 18px; }
html.rp-stage[data-stage-page="geo"] #round-results-screen > :is(.results-map-container, .geo-round-note, #reveal-container) { display: none !important; }
html.rp-stage[data-stage-page="geo"] #round-results-screen.active { display: flex; flex-direction: column; overflow: hidden; }
html.rp-stage[data-stage-page="geo"] #round-results-screen > .gss-root {
    --geo-ink: #17191f; --tv-line: var(--geo-line); --text-secondary: #c9c4f0;
    position: absolute; inset: 92px 40px 24px; padding: 4px 6px 0;
}
html.rp-stage[data-stage-page="geo"] .gss-board .rr-container.rr-dashboard .rr-screen1 { padding: var(--cut-room, 14px); }
html.rp-stage[data-stage-page="geo"] .gss-board .rr-context-text { font-size: 22px; }
html.rp-stage[data-stage-page="geo"] .gss-board .rr-option { padding: 12px 16px; }
/* The vote and the final screen: the phone's, a wider column in the middle. */
html.rp-stage[data-stage-page="geo"] .vote-content { max-width: 900px; margin: 0 auto; width: 100%; }
html.rp-stage[data-stage-page="geo"] .geo-candidates { max-width: 860px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

/* «Рисовач»: drawing is the phone's canvas laid out on the stage: the word on the white cut card on the left (tv
   .tv-draw-card) with «Отправить рисунок» under it, the sheet with its tools on the right. Then each step is the /tv/
   one (draw-stage.css, mounted by main.ts after the phone's drawing, which the stage hides with the phone's title and
   buttons): the drawing big on its sheet with the artist and the title field under it, then the drawing on the left
   and the titles on the right as cut-card buttons (a click or the letter). The round results take the /tv/ layout
   (question-stage.css .qs-reveal + draw-stage.css). The palette is the /tv/ one (tv/style.css
   body[data-tv-game="drawful"]): a light page, ink on white cards, pink for actions. */
html:not(.rp-stage) .screen-content > .dws-root { display: none; }
html.rp-stage[data-stage-page="draw"] :is(.dws-root, .qs-reveal) {
    --tv-surface: #fff; --tv-line: #e4e1dd; --accent: #c61d76; --accent-ink: #fff; --gold: #c61d76;
    --text-primary: #17191f; --text-secondary: #5a5650; --light-ink: #17191f; --light-card: #fff;
}
html.rp-stage[data-stage-page="draw"] .stage-keys-hint { --text-secondary: #5a5650; --text-primary: #17191f; }
/* Drawing. */
html.rp-stage[data-stage-page="draw"] #drawing-screen.active {
    display: grid; grid-template-columns: 380px 700px; grid-template-rows: 1fr auto 1fr; column-gap: 56px;
    justify-content: center; align-content: center; padding: 96px 40px 24px;
}
html.rp-stage[data-stage-page="draw"] #drawing-screen > .game-header { display: none; }
html.rp-stage[data-stage-page="draw"] #drawing-screen .drawing-prompt {
    grid-column: 1; grid-row: 2; align-self: center; margin: 0; padding: 40px 32px 36px;
    border-radius: 30px 18px 34px 20px / 20px 32px 18px 30px; rotate: -1.4deg;
    box-shadow: 9px 11px 0 color-mix(in srgb, var(--accent-pink) 28%, transparent);
}
html.rp-stage[data-stage-page="draw"] #drawing-screen .drawing-prompt:has(> .df-card-vote:not([hidden])) { padding-bottom: 64px; }
html.rp-stage[data-stage-page="draw"] .drawing-prompt-label { font-size: 22px; font-weight: 600; margin-bottom: 10px; }
html.rp-stage[data-stage-page="draw"] .drawing-prompt-word { font-size: 40px; line-height: 1.15; text-wrap: balance; overflow-wrap: anywhere; }
html.rp-stage[data-stage-page="draw"] #drawing-screen .canvas-area { display: contents; }
html.rp-stage[data-stage-page="draw"] #drawing-screen .canvas-toolbar { grid-column: 2; grid-row: 1; align-self: end; gap: 10px; padding: 0 0 14px; }
html.rp-stage[data-stage-page="draw"] #drawing-screen .canvas-container { grid-column: 2; grid-row: 2; flex: none; width: 700px; height: 440px; min-height: 0; }
html.rp-stage[data-stage-page="draw"] #drawing-screen .canvas-actions { grid-column: 1; grid-row: 3; align-self: start; justify-content: center; padding: 28px 0 0; }
html.rp-stage[data-stage-page="draw"] #drawing-screen .canvas-actions .btn-play { flex: none; }
html.rp-stage[data-stage-page="draw"] .color-btn { width: 34px; height: 34px; }
html.rp-stage[data-stage-page="draw"] .brush-size-btn { width: 40px; height: 40px; }
html.rp-stage[data-stage-page="draw"] .tool-btn { height: 40px; padding: 0 16px; font-size: 16px; }
html.rp-stage[data-stage-page="draw"] .submitted-text { font-size: 28px; }
html.rp-stage[data-stage-page="draw"] .submitted-hint { font-size: 19px; }
/* Presenting and voting: the /tv/ step in place of the phone's title, drawing and buttons. */
html.rp-stage[data-stage-page="draw"] :is(#presenting-screen, #voting-screen) > .screen-content {
    max-width: none; justify-content: safe center; align-items: center; min-height: 100%; padding-top: 96px; padding-bottom: 32px;
}
html.rp-stage[data-stage-page="draw"] :is(#presenting-screen, #voting-screen) > .screen-content > :is(.game-header, .title, .subtitle, .drawing-display, .vote-options, .artist-notice) { display: none !important; }
html.rp-stage[data-stage-page="draw"] .screen-content > .dws-root { flex: none; width: 100%; max-width: 1180px; margin: 0 auto; }
html.rp-stage[data-stage-page="draw"] .dws-root.is-presenting .tv-draw-slot:not(:empty) { display: flex; flex-direction: column; align-items: center; gap: 14px; }
html.rp-stage[data-stage-page="draw"] .dws-root .fake-input-section { gap: 18px; width: 820px; max-width: 100%; margin: 0; }
html.rp-stage[data-stage-page="draw"] .dws-root .fake-input-section .input { flex: 1 1 0; min-width: 0; height: 64px; padding: 0 24px; font-size: 24px; border-radius: 16px; border: 2px solid var(--accent-pink); }
html.rp-stage[data-stage-page="draw"] .dws-root .fake-input-section .btn-join { flex: none; width: auto; min-width: 200px; height: 64px; margin: 0; font-size: 19px; border-radius: 32px; color: #fff; background: var(--accent-pink); border-color: transparent; }
html.rp-stage[data-stage-page="draw"] .dws-root .fake-input-section .btn-join:disabled { color: var(--text-secondary); background: var(--df-line); }
html.rp-stage[data-stage-page="draw"] .dws-root #presenting-status:not(:empty) { margin: 0; font-size: 20px; padding: 8px 20px; }
html.rp-stage[data-stage-page="draw"] #voting-screen .stage-keys-hint { margin-top: 18px; }
html.rp-stage[data-stage-page="draw"] #voting-screen:has(.dws-root:is(.is-locked, :not(.is-votable))) .stage-keys-hint { visibility: hidden; }
/* Round results: the /tv/ layout in the /tv/ view's box under the top bar. */
html.rp-stage[data-stage-page="draw"] #reveal-container.qs-reveal { overflow: visible; }
html.rp-stage[data-stage-page="draw"] #reveal-container.qs-reveal .rr-container { inset: 92px 40px 0; }
html.rp-stage[data-stage-page="draw"] #reveal-container.qs-reveal .rr-context.df-reveal-prompt {
    padding: 18px 18px 60px; border-radius: var(--cut-2); rotate: -1deg; box-shadow: 8px 10px 0 rgb(23 25 31 / 10%);
}

/* Round results (reveal-results.js): a wider column. */
/* .rr-container is absolute over the whole screen, so the column is set on its screens. */
html.rp-stage[data-stage-page="hundred"] #reveal-container .rr-container { zoom: 1.35; }
html.rp-stage[data-stage-page="hundred"] #reveal-container :is(.rr-screen1, .rr-screen2) { padding-left: max(20px, calc(50% - 330px)); padding-right: max(20px, calc(50% - 330px)); padding-top: 64px; }
/* Final results: the shared game-end board and buttons, bigger, in the middle. */
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="quiplash"], [data-stage-page="fibbage"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="geo"], [data-stage-page="draw"]) .results-content { zoom: 1.3; width: 520px; max-width: none; margin: 0 auto; padding-left: 0; padding-right: 0; }

/* The keys hint under the answers (stage only; main.ts takes A–D, 1–4 and the Russian ФИСВ). */
.stage-keys-hint { display: none; align-items: center; justify-content: center; gap: 8px; color: var(--text-secondary, #cbc4e6); font-size: 18px; }
.stage-keys-hint kbd {
    display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 6px; font: 800 16px/1 var(--st-display, system-ui);
    color: var(--text-primary, #fff); border: 1.5px solid currentColor; border-radius: 9px; box-shadow: 0 3px 0 rgb(0 0 0 / 30%);
}

/* ════════════════════ Бункер (client/mini-games/bunker/) ════════════════════
   Owner 2026-10-30 «бункер онб пк - не тот формат», «наборы не тот формат»: the onboarding and the packs in the stage
   look of the other games (the shared lists above include [data-stage-page="bunker"]); the round screens keep the
   phone's column in the middle of the stage. The page sizes its screens in 100dvh, which under the stage zoom is taller
   than the window (the buttons fell under the bottom edge): --app-height is the window in stage px. */
html.rp-stage[data-stage-page="bunker"] main,
html.rp-stage[data-stage-page="bunker"] #onboarding-screen,
html.rp-stage[data-stage-page="bunker"] #onboarding-screen .onboarding-container { min-height: var(--app-height, 100dvh); }
/* A 16:9 window has a 720px stage: the rules' 3–4 line texts need the picture at 260px and tighter gaps, or «Пропустить» /
   «Далее» fell under the bottom edge (1920×1080, 1366×768). */
html.rp-stage[data-stage-page="bunker"] #onboarding-screen .onboarding-container { padding-top: 8px; padding-bottom: 16px; box-sizing: border-box; }
html.rp-stage[data-stage-page="bunker"] #onboarding-screen .slide-icon:has(> picture > img, > img),
html.rp-stage[data-stage-page="bunker"] #onboarding-screen .slide-icon img { width: 260px; height: 260px; }
html.rp-stage[data-stage-page="bunker"] #onboarding-screen .slide-title { margin-top: 12px; }
html.rp-stage[data-stage-page="bunker"] #onboarding-screen .onboarding-dots { margin-bottom: 16px; }
html.rp-stage[data-stage-page="bunker"] #onboarding-screen .onboarding-slides { padding-top: 0; }
html.rp-stage[data-stage-page="bunker"] #onboarding-screen .onboarding-dots { margin-top: 12px; }
html.rp-stage[data-stage-page="bunker"] .screen .bottom-section.packs-compact-actions > .btn-additional-settings { flex-grow: 0; padding-inline: 12px; font-size: 14px; }
html.rp-stage[data-stage-page="bunker"] .screen:not(#onboarding-screen):not(#packs-screen) { width: 100%; max-width: 560px; margin-left: auto; margin-right: auto; }
html.rp-stage[data-stage-page="bunker"] .screen:not(#onboarding-screen):not(#packs-screen) :is(.btn-play, .btn-additional-settings) { width: 100%; white-space: normal; }

/* «Полоска очков» on the stage (see the strip rules above): the layouts with fixed heights give the strip its band by shrinking their tallest block by ~70 px. */
html.rp-stage[data-stage-page="im"] .mms-root.is-voting .tv-meme-table { height: 370px; }
html.rp-stage[data-stage-page="im"] #association-screen .mms-root.is-voting .tv-meme-table { height: 300px; }
html.rp-stage[data-stage-page="meme"] #choosing-screen .mms-root .tv-meme-table:not(.is-captions) { height: 340px; }
html.rp-stage[data-stage-page="meme"] #choosing-screen .mms-root .tv-meme-table.is-captions { max-height: 340px; grid-auto-rows: minmax(84px, auto); }
/* «Обновить руку» goes to the free corner under the prompt (left column), above the strip, so the hand keeps its size. */
html.rp-stage[data-stage-page="meme"] #choosing-screen .game-content:has(> .rp-score-strip) > .btn-refresh-hand { position: fixed; left: 96px; bottom: 112px; z-index: 6; }
html.rp-stage[data-stage-page="meme"] .mms-root.is-voting .tv-meme-table:not(.is-captions) { height: 420px; }
html.rp-stage[data-stage-page="meme"] .mms-root .tv-meme-table.is-captions { max-height: 440px; }
html.rp-stage[data-stage-page="jh"] .game-shell .jhs-strip { height: 150px; }
html.rp-stage[data-stage-page="jh"] .game-shell:has(#hand:empty) .jhs-strip { height: 220px; }
html.rp-stage[data-stage-page="jh"] .game-shell:has(> .rp-score-strip) .waiting-card { padding-top: 12px; padding-bottom: 12px; }
html.rp-stage[data-stage-page="jh"] .hand-card { flex-basis: 100px; }
html.rp-stage[data-stage-page="draw"] .dws-root.is-presenting .tv-draw-frame > img { height: 270px; }