/* /onboarding.css */
/* ==================== */
/* Onboarding Module    */
/* Shared carousel for  */
/* client-only games    */
/* ==================== */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .onboarding-buttons {
        gap: 12px;
    }

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

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

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

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

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

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

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

/* Scenes whose animation reaches past the 320 box use viewBox="-24 -24 368 368" and
   <img data-art-bleed>: drawn 115% wide with -7.5% margins, so the art keeps its size and
   layout box while the extra edge stays visible instead of being clipped. */
#onboarding-screen .slide-icon picture > img[data-art-bleed],
#onboarding-screen .slide-icon > img[data-art-bleed] {
    width: 115%;
    max-width: none;
    height: auto;
    max-height: none;
    margin: -7.5%;
}
/* /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;
}
/* /knowme/style.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --accent-teal: #14b8a6;
    --accent-teal-dark: #0d9488;
    --accent-purple: #a855f7;
    --warning: #fbbf24;
}

/* ==================== */
/* Screen System        */
/* ==================== */

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

/* ==================== */
/* Typography           */
/* ==================== */

/* ==================== */
/* Buttons              */
/* ==================== */

@media (hover: hover) {
    .btn-join:hover {
        background: var(--accent-teal);
        color: var(--text-primary);
    }
}

.btn-join.active {
    background: linear-gradient(135deg, var(--accent-teal) 0%, var(--accent-teal-dark) 100%);
    border-color: transparent;
    color: var(--text-primary);
    box-shadow: 0 4px 20px rgba(20, 184, 166, 0.3);
}

.btn-play.outlined {
    background: transparent;
    border: 2px solid var(--accent-teal);
    color: var(--accent-teal);
    box-shadow: none;
}

@media (hover: hover) {
    .btn-copy:hover {
        background: var(--bg-secondary);
        color: var(--text-primary);
    }
}

/* ==================== */
/* Inputs               */
/* ==================== */

.name-input {
    margin-bottom: 20px;
    text-align: center;
}

.code-input {
    width: 100%;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 8px;
    text-transform: uppercase;
    font-family: 'Courier New', monospace;
}

/* ==================== */
/* Main Screen          */
/* ==================== */

.main-content {
    justify-content: center;
    align-items: center;
}

.game-logo {
    font-size: 80px;
    margin-bottom: 16px;
}

.actions-columns {
    display: flex;
    gap: 16px;
    width: 100%;
    align-items: stretch;
    margin-top: 24px;
}

.action-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
    min-width: 0;
}

.col-divider {
    width: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.error-message {
    color: var(--error);
    font-size: 14px;
    text-align: center;
    min-height: 20px;
    margin-top: 16px;
}

/* ==================== */
/* Lobby Screen         */
/* ==================== */

.qr-code-block {
    display: flex;
    justify-content: center;
    margin: 0 0 16px;
}

.qr-code-img {
    width: 160px;
    height: 160px;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    background: #ffffff;
    padding: 8px;
}

/* ---- Bottom Section ---- */

/* ==================== */
/* Game Screen          */
/* ==================== */

.game-content {
    padding-top: calc(24px + env(safe-area-inset-top, 0px));
}

.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-left: 40px;
}

.round-badge {
    background: var(--bg-card);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}

.timer-badge {
    width: 48px;
    height: 48px;
    background: var(--accent-teal);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
}

.timer-badge.warning {
    background: var(--error);
    animation: pulse 0.5s ease infinite alternate;
}

@keyframes pulse {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
}

/* ==================== */
/* Respondent Badge     */
/* ==================== */

.respondent-badge {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--accent-purple);
    margin-bottom: 12px;
    padding: 10px 16px;
    background: rgba(168, 85, 247, 0.12);
    border-radius: 16px;
    border: 1px solid rgba(168, 85, 247, 0.25);
}

.respondent-badge .name {
    font-weight: 700;
    color: #c084fc;
}

/* Respondent «avatar + name» inside the badge and the waiting line */
.km-player { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; max-width: 100%; }
.km-player .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.km-player-avatar {
    flex: none; width: 26px; height: 26px; border-radius: 50%; overflow: hidden;
    display: inline-grid; place-items: center; font-size: 11px; font-weight: 800;
    background: rgba(255, 255, 255, .16); color: inherit;
}
.km-player-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==================== */
/* Question             */
/* ==================== */

.question-text {
    font-size: 22px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 24px;
    line-height: 1.3;
}

/* The question as a card only while it is a premium sample: chip on top, the shared pink glow
   (premium-cta.css .rp-premium-teaser-card) around it, the pearlescent button under it. */
.km-question-card { text-align: center; }
.km-question-card.rp-premium-teaser-card {
    margin-bottom: 16px;
    padding: 10px 16px 16px;
    border-radius: 22px;
    background: rgba(0, 0, 0, 0.16);
}
.km-question-card.rp-premium-teaser-card .question-text { margin: 8px 0 0; }
.km-teaser-cta.rp-premium-teaser-cta { margin: 0 auto 18px; }

/* ==================== */
/* Phase Container      */
/* ==================== */

.phase-container {
    animation: fadeIn 0.3s ease;
}

.phase-hint {
    font-size: 16px;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 20px;
}

/* ==================== */
/* Options Grid (2x2)   */
/* ==================== */

.options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.option-btn {
    padding: 20px 12px;
    background: var(--bg-card);
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    line-height: 1.3;
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (hover: hover) {
    .option-btn:hover:not(:disabled) {
        border-color: var(--accent-teal);
        transform: translateY(-2px);
    }
}

.option-btn:active:not(:disabled) {
    transform: scale(0.97);
}

.option-btn:disabled {
    cursor: default;
    opacity: 0.5;
}

.option-btn.selected {
    background: linear-gradient(135deg, var(--accent-teal) 0%, var(--accent-teal-dark) 100%);
    border-color: var(--accent-teal);
    transform: scale(1.03);
    box-shadow: 0 4px 16px rgba(20, 184, 166, 0.35);
}

.option-btn.selected:disabled {
    opacity: 0.85;
    transform: scale(1.03);
}

/* Reveal states */
.option-btn.correct {
    background: linear-gradient(135deg, color-mix(in srgb, var(--rp-correct) 25%, transparent) 0%, color-mix(in srgb, var(--rp-correct) 15%, transparent) 100%);
    border-color: var(--rp-correct);
    opacity: 1;
}

.option-btn.wrong {
    background: linear-gradient(135deg, color-mix(in srgb, var(--rp-wrong) 20%, transparent) 0%, color-mix(in srgb, var(--rp-wrong) 10%, transparent) 100%);
    border-color: var(--rp-wrong);
    opacity: 0.7;
}

/* Meme option buttons: rows of two, each card as wide as its image's aspect
   ratio (--meme-ratio, set from main.ts on load), so a row shares one height
   and memes are shown whole without crop or empty bars. */
.options-grid.meme-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.meme-row {
    display: flex;
    gap: 12px;
}

/* All memes landscape: one column (4×1), each card full width. */
.meme-grid-column .meme-row {
    flex-direction: column;
}

.options-grid.meme-grid-column .meme-option-btn {
    flex: none;
}

.meme-grid-column .meme-option-btn img {
    aspect-ratio: var(--meme-column-ratio, var(--meme-ratio, 1));
}

.options-grid .meme-option-btn {
    flex: var(--meme-ratio, 1) 1 0;
    min-width: 0;
    padding: 4px;
    min-height: auto;
    overflow: hidden;
}

.meme-option-btn img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--meme-ratio, 1);
    /* contain is a safety net for extreme ratios clamped in main.ts */
    object-fit: contain;
    border-radius: 12px;
    pointer-events: none;
}

/* Round reveal: meme cards are regrouped by main.ts (layoutRevealMemes) into the
   same rows of two sized by --meme-ratio, instead of the shared fixed 3:4 crops. */
#reveal-container .rr-option-image-card img {
    object-fit: contain;
}

#reveal-container .rr-option-image-row.meme-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}

#reveal-container .meme-grid .meme-row {
    gap: 10px;
}

#reveal-container .meme-grid .rr-option-image-card {
    flex: var(--meme-ratio, 1) 1 0;
    width: auto;
    min-width: 0;
    max-width: none;
}

#reveal-container .meme-grid-column .rr-option-image-card {
    flex: none;
}

#reveal-container .meme-grid .rr-option-image-card img {
    height: auto;
    aspect-ratio: var(--meme-ratio, 1);
}

#reveal-container .meme-grid-column .rr-option-image-card img {
    aspect-ratio: var(--meme-column-ratio, var(--meme-ratio, 1));
}

.meme-option-btn.selected img {
    opacity: 0.85;
}

/* ==================== */
/* Waiting Phase        */
/* ==================== */

.waiting-animation {
    display: flex;
    justify-content: center;
    margin: 32px 0 16px;
}

.waiting-dots {
    display: flex;
    gap: 8px;
}

.waiting-dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent-purple);
    animation: bounce 1.4s infinite ease-in-out both;
}

.waiting-dots span:nth-child(1) { animation-delay: -0.32s; }
.waiting-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

.waiting-text {
    font-size: 18px;
    color: var(--text-secondary);
    text-align: center;
    padding: 16px 0;
}

/* ==================== */
/* Round Results Screen */
/* ==================== */

.round-results-content {
    align-items: center;
}

.round-question {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 20px;
}

.correct-answer-block {
    width: 100%;
    padding: 16px 20px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--rp-correct) 15%, transparent) 0%, color-mix(in srgb, var(--rp-correct) 8%, transparent) 100%);
    border: 1px solid var(--rp-correct);
    border-radius: 16px;
    text-align: center;
    margin-bottom: 20px;
}

.correct-answer-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.correct-answer-text {
    font-size: 22px;
    font-weight: 700;
    color: var(--rp-correct);
}

.respondent-bonus {
    font-size: 13px;
    color: var(--accent-teal);
    margin-top: 6px;
}

/* ==================== */
/* Player Guesses       */
/* ==================== */

.player-guesses {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.guess-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-card);
    border-radius: 12px;
    gap: 12px;
}

.guess-item.correct {
    border: 1px solid var(--rp-correct);
    background: color-mix(in srgb, var(--rp-correct) 10%, transparent);
}

.guess-item.wrong {
    border: 1px solid color-mix(in srgb, var(--rp-wrong) 30%, transparent);
}

.guess-item.no-answer {
    opacity: 0.5;
}

.guess-emoji {
    font-size: 22px;
    flex-shrink: 0;
    width: 28px;
    text-align: center;
}

.guess-name {
    font-size: 14px;
    font-weight: 600;
    min-width: 60px;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guess-answer {
    font-size: 13px;
    color: var(--text-secondary);
    flex: 1;
    text-align: center;
}

.guess-result {
    font-size: 14px;
    font-weight: 700;
    min-width: 50px;
    text-align: right;
    color: var(--error);
}

.guess-result.earned {
    color: var(--success);
}

/* ==================== */
/* Scoreboard           */
/* ==================== */

/* ==================== */
/* Results Screen       */
/* ==================== */

/* ==================== */
/* Connection Overlay   */
/* ==================== */
/* Base styles: ../connection-overlay.css */

.connection-overlay { --rp-connection-arc: var(--accent-teal); }

/* ==================== */
/* Yes/No Buttons       */
/* ==================== */

.yesno-buttons {
    display: flex;
    gap: 16px;
    margin-top: 8px;
    margin-bottom: 16px;
}

.yesno-btn {
    flex: 1;
    padding: 32px 16px;
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    font-size: 28px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.yesno-btn.yes-btn {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
}

.yesno-btn.no-btn {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
}

@media (hover: hover) {
    .yesno-btn:hover:not(:disabled) {
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    }
}

.yesno-btn:active:not(:disabled) {
    transform: scale(0.97);
}

.yesno-btn:disabled {
    cursor: default;
    opacity: 0.5;
}

.yesno-btn.selected {
    transform: scale(1.04);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.yesno-btn.yes-btn.selected {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(109, 40, 217, 0.2) 100%);
    border-color: rgba(139, 92, 246, 0.7);
    color: #c4b5fd;
}

.yesno-btn.no-btn.selected {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(109, 40, 217, 0.2) 100%);
    border-color: rgba(139, 92, 246, 0.7);
    color: #c4b5fd;
}

.yesno-btn.selected:disabled {
    opacity: 0.85;
    transform: scale(1.04);
}

/* ==================== */
/* Packs Screen         */
/* ==================== */

.packs-content {
    align-items: stretch;
}

.packs-container {
    flex: 1;
    overflow-y: auto;
    margin: 0 -4px;
    padding: 4px;
    -webkit-overflow-scrolling: touch;
}

.packs-summary {
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 12px;
}

.packs-summary strong {
    color: var(--accent-teal);
    font-size: 16px;
}

/* ==================== */
/* Responsive           */
/* ==================== */

@media (max-width: 480px) {
    .screen-content {
        padding: 24px 16px;
        padding-top: calc(24px + env(safe-area-inset-top, 0px));
    }

    .title {
        font-size: 24px;
    }

    .game-logo {
        font-size: 60px;
    }

    .room-code-display {
        font-size: 36px;
        padding: 12px 24px;
        letter-spacing: 8px;
    }

    .question-text {
        font-size: 18px;
    }

    .option-btn {
        padding: 16px 10px;
        font-size: 14px;
        min-height: 60px;
    }

    .yesno-btn {
        padding: 24px 12px;
        font-size: 24px;
        min-height: 80px;
    }

    .timer-badge {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }
}

@media (min-width: 768px) {
    .screen-content {
        padding: 50px 40px;
    }

    .title {
        font-size: 32px;
    }

    .question-text {
        font-size: 26px;
    }

    .option-btn {
        padding: 24px 16px;
        font-size: 17px;
        min-height: 80px;
    }

    .timer-badge {
        width: 56px;
        height: 56px;
        font-size: 24px;
    }
}
/* /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; }
/* /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); } }
/* /reveal-results.css */
/* ========================================
   Reveal Results — Shared Module Styles
   2-screen round-end reveal with animations

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.rr-host--flow .rr-container,
.rr-host--flow .rr-screen2 {
  position: relative;
  inset: auto;
  overflow: visible;
  padding: 0;
}
/* /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;
    background: linear-gradient(180deg, rgba(13, 19, 41, 0) 0%, var(--bg-primary) 14px);
}

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

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

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

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

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

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

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

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

/* Premium sample card (premium-teasers.js): the chip «Из премиум-набора «…»» on the card and a
 * pink glow around it. The same in every game; the chip sits on any card colour. */
.rp-premium-teaser {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    margin: 6px auto;
    padding: 6px 12px 6px 9px;
    border-radius: 999px;
    background: rgba(23, 25, 31, .82);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.25;
    text-align: left;
    text-shadow: none;
}
.rp-premium-teaser::before {
    content: "";
    flex: none;
    width: 15px;
    height: 15px;
    background: #ff8fa6;
    -webkit-mask: var(--rp-icon-crown) center / contain no-repeat;
    mask: var(--rp-icon-crown) center / contain no-repeat;
}
.rp-premium-teaser[hidden], .rp-premium-teaser-cta[hidden] { display: none; }
.rp-premium-teaser-card {
    box-shadow: 0 0 0 2px rgba(255, 122, 147, .55), 0 0 34px rgba(255, 35, 80, .38), 0 18px 40px rgba(0, 0, 0, .35) !important;
}
.rp-premium-teaser-cta { max-width: 420px; margin: 14px auto 0; }

/* Compact size for a tight game screen (a card, answer buttons and a player row on one phone screen):
 * the same pearl button one line high and the chip in smaller type, so the sample does not squeeze the card.
 * Used by the online «Я никогда не» card screen. */
.rp-premium-cta--compact {
    min-height: 44px;
    padding: 8px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.2;
}
.rp-premium-cta--compact.rp-premium-cta--crown .rp-premium-cta-label::before {
    width: 16px;
    height: 16px;
    margin-right: 6px;
}
.rp-premium-teaser--compact {
    gap: 5px;
    margin: 4px auto;
    padding: 4px 10px 4px 8px;
    font-size: 12px;
}
.rp-premium-teaser--compact::before { width: 13px; height: 13px; }
/* /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);
}
#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 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; }
}
/* /knowme/km-theme.css */
/* Game Theme only. Palette: COMMON/roomplay-palettes.html / knowme (party box adaptation).
   bg #B64035 terracotta (white text 5.6:1), surface #FFF2DC cream label (ink #17191F), accent #822D29 brick
   (white text 8.9:1), secondary #313555 navy for small decorations, badges and dark cards. Stock green/red
   success/error keep their meaning on navy cards (6.8:1 / 4.3:1 large). */
:root {
  /* Answer and gender tones: COMMON/roomplay-palettes.html / knowme (correct, wrong, male, female). */
  --rp-correct: #9bd387;
  --rp-correct-ink: #17191f;
  --rp-wrong: #88322e;
  --rp-wrong-ink: #ffffff;
  --rp-male: #6eb0f3;
  --rp-female: #e58aaf;
  --bg-primary: #b64035;
  --bg-secondary: #313555;
  --bg-card: #313555;
  --text-primary: #ffffff;
  --text-secondary: #fff2dc;
  --text-placeholder: #6b5040;
  --accent-purple: #822d29;
  --accent-purple-dark: #6a2420;
  --accent-blue: #822d29;
  --accent-pink: #822d29;
  --accent-pink-dark: #6a2420;
  --accent-teal: #822d29;
  --accent-teal-dark: #6a2420;
  --warning: #fff2dc;
  --km-ink: #17191f;
  --km-ink-muted: #5c4a3a;
  --km-cream: #fff2dc;
  --km-brick: #822d29;
  --km-brick-dark: #6a2420;
  --km-navy: #313555;
  --onboarding-accent: #822d29;
  --onboarding-accent-dark: #822d29;
  --onboarding-shadow: transparent;
  --onboarding-shadow-hover: transparent;
  --settings-accent: #822d29;
  --settings-accent-dark: #6a2420;
  --packs-accent: #fff2dc;
  --packs-feedback-rgb: 255, 242, 220;
  --ps-accent: #822d29;
  --game-accent: #fff2dc;
}
html, body[data-rp-game="knowme"], .page-loader { background: var(--bg-primary); }
body[data-rp-game="knowme"] { color: #fff; }
[data-rp-game="knowme"] .loader-spinner,
[data-rp-game="knowme"] .connection-spinner,
[data-rp-game="knowme"] .rp-waiting-spinner { border-color: rgba(255, 242, 220, .25); border-top-color: var(--km-cream); }

/* Actions: brick primary with a pressed-edge shadow so it reads on terracotta; cream outline secondary. */
[data-rp-game="knowme"] .btn-play,
[data-rp-game="knowme"] .btn-next-slide,
[data-rp-game="knowme"] .btn-join.active { color: #fff; background: var(--km-brick); border-color: transparent; box-shadow: 0 4px 0 var(--km-brick-dark); }
[data-rp-game="knowme"] .btn-play:disabled { color: var(--km-cream); background: rgba(49, 53, 85, .55); box-shadow: none; opacity: 1; }
[data-rp-game="knowme"] .btn-join,
[data-rp-game="knowme"] .btn-play.outlined,
[data-rp-game="knowme"] .btn-skip,
[data-rp-game="knowme"] .btn-additional-settings { color: #fff; border-color: var(--km-cream); background: transparent; box-shadow: none; }
[data-rp-game="knowme"] .btn-copy { color: var(--km-cream); background: var(--km-navy); border-color: rgba(255, 242, 220, .25); }
[data-rp-game="knowme"] .dot { background: rgba(255, 242, 220, .35); }
[data-rp-game="knowme"] .dot.active { background: var(--km-cream); }
[data-rp-game="knowme"] .input { color: var(--km-ink); background: var(--km-cream); }
[data-rp-game="knowme"] .subtitle,
[data-rp-game="knowme"] .lobby-hint,
[data-rp-game="knowme"] .lobby-status { color: var(--km-cream); }

/* Packs (shared packs.css) and summary. */
/* main.ts sets a teal --packs-accent inline on the grid; the palette cream wins here. */
[data-rp-game="knowme"] #packs-grid { --packs-accent: #fff2dc !important; --packs-feedback-rgb: 255, 242, 220 !important; }
[data-rp-game="knowme"] .packs-summary { color: var(--km-cream); background: var(--km-navy); }
[data-rp-game="knowme"] .packs-summary .summary-text { color: var(--km-cream); }
[data-rp-game="knowme"] .packs-summary strong { color: #fff; }

/* Lobby. */
[data-rp-game="knowme"] .room-code-display { color: var(--km-cream); background: var(--km-navy); }
[data-rp-game="knowme"] .player-item { color: var(--km-ink); background: var(--km-cream); }
[data-rp-game="knowme"] .player-name { color: var(--km-ink); }
[data-rp-game="knowme"] .player-avatar:not(.has-photo),
[data-rp-game="knowme"] .mini-score-avatar-letter { color: #fff; background: var(--km-navy); }
[data-rp-game="knowme"] .player-host { color: var(--km-brick); }

/* Round: navy badges, cream answer labels, brick selection. */
[data-rp-game="knowme"] .round-badge { color: var(--km-cream); background: var(--km-navy); }
[data-rp-game="knowme"] .timer-badge { color: #fff; background: var(--km-navy); }
[data-rp-game="knowme"] .timer-badge.warning { color: var(--km-ink); background: var(--error); }
[data-rp-game="knowme"] .respondent-badge { color: #fff; background: var(--km-navy); border-color: transparent; }
[data-rp-game="knowme"] .respondent-badge .name { color: var(--km-cream); }
[data-rp-game="knowme"] .question-text { color: #fff; }
[data-rp-game="knowme"] .phase-hint,
[data-rp-game="knowme"] .waiting-text { color: var(--km-cream); }
[data-rp-game="knowme"] .waiting-dots span { background: var(--km-cream); }
[data-rp-game="knowme"] .option-btn,
[data-rp-game="knowme"] .yesno-btn.yes-btn,
[data-rp-game="knowme"] .yesno-btn.no-btn { color: var(--km-ink); background: var(--km-cream); border-color: transparent; }
[data-rp-game="knowme"] .option-btn.selected,
[data-rp-game="knowme"] .yesno-btn.yes-btn.selected,
[data-rp-game="knowme"] .yesno-btn.no-btn.selected { color: #fff; background: var(--km-brick); border-color: var(--km-cream); box-shadow: 0 0 0 2px var(--km-cream); }
[data-rp-game="knowme"] .option-btn.correct { color: #fff; background: var(--km-navy); border-color: var(--rp-correct); }
[data-rp-game="knowme"] .option-btn.wrong { color: #fff; background: var(--km-navy); border-color: var(--rp-wrong); }
@media (hover: hover) {
  [data-rp-game="knowme"] .option-btn:hover:not(:disabled) { border-color: var(--km-brick); }
}

/* Round reveal (shared RevealResults): cream labels; the respondent's answer on a navy card keeps the stock green. */
[data-rp-game="knowme"] .rr-context-subtext,
[data-rp-game="knowme"] .rr-leaderboard-title { color: var(--km-cream); }
[data-rp-game="knowme"] .rr-option { background: var(--km-cream); border: 2px solid transparent; }
[data-rp-game="knowme"] .rr-option.rr-type-wrong { border-color: rgba(23, 25, 31, .16); }
[data-rp-game="knowme"] .rr-option-text { color: var(--km-ink); }
[data-rp-game="knowme"] .rr-vote-count,
[data-rp-game="knowme"] .rr-voters-label { color: var(--km-ink-muted); }
[data-rp-game="knowme"] .rr-voter { color: var(--km-ink); background: rgba(23, 25, 31, .08); }
[data-rp-game="knowme"] .rr-voter-points,
[data-rp-game="knowme"] .rr-lb-delta:not(.rr-zero) { padding: 1px 6px; border-radius: 6px; background: var(--km-navy); }
[data-rp-game="knowme"] .rr-option.rr-type-correct { background: var(--km-navy); border-color: var(--rp-correct); }
[data-rp-game="knowme"] .rr-option.rr-type-correct .rr-vote-count,
[data-rp-game="knowme"] .rr-option.rr-type-correct .rr-voters-label { color: var(--km-cream); }
[data-rp-game="knowme"] .rr-option.rr-type-correct .rr-voter { color: #fff; background: rgba(255, 255, 255, .12); }
[data-rp-game="knowme"] .rr-option.rr-type-correct .rr-voter-points { padding: 0; background: none; }
[data-rp-game="knowme"] .rr-lb-row { background: var(--km-cream); border: 2px solid transparent; }
[data-rp-game="knowme"] .rr-lb-row.rr-leading { border-color: var(--km-navy); background: var(--km-cream); }
[data-rp-game="knowme"] .rr-lb-name,
[data-rp-game="knowme"] .rr-lb-score { color: var(--km-ink); }
[data-rp-game="knowme"] .rr-lb-pos { color: var(--km-ink-muted); background: rgba(23, 25, 31, .08); }
[data-rp-game="knowme"] .rr-lb-delta.rr-zero { color: var(--km-ink-muted); }

/* Final results. */
[data-rp-game="knowme"] .winner-name { color: #fff; }
[data-rp-game="knowme"] .score-item { color: var(--km-ink); background: var(--km-cream); border: 2px solid transparent; }
[data-rp-game="knowme"] .score-item.leading { border-color: var(--km-navy); background: var(--km-cream); }
[data-rp-game="knowme"] .score-name { color: var(--km-ink); }
[data-rp-game="knowme"] .score-value { color: var(--km-brick); }
[data-rp-game="knowme"] .score-position:not(.gold):not(.silver):not(.bronze) { color: var(--km-ink); background: rgba(23, 25, 31, .1); }
[data-rp-game="knowme"] #roomplay-party-finale { border: 0; background: var(--km-navy); }
[data-rp-game="knowme"] #roomplay-party-finale p { color: var(--km-cream); }
[data-rp-game="knowme"] #roomplay-party-finale .rpf-kicker { color: var(--km-cream); }
[data-rp-game="knowme"] #roomplay-party-finale :is(.rpf-share, .rpf-premium) { color: #fff; background: var(--km-brick); }
[data-rp-game="knowme"] #roomplay-party-finale .rpf-next { color: #fff; background: rgba(255, 255, 255, .12); }

/* Overlays and popups: navy sheet, brick confirm, cream outline cancel. */
[data-rp-game="knowme"] .connection-overlay { background: rgba(182, 64, 53, .96); }
[data-rp-game="knowme"] .connection-text { color: var(--km-cream); }
/* Exit confirmation and settings popups: colours go through the shared --rp-dialog-* tokens
   (assets/css/confirm-dialog.css). */
[data-rp-game="knowme"] {
  --rp-dialog-overlay: rgba(40, 18, 16, .78);
  --rp-dialog-bg: var(--km-navy);
  --rp-dialog-text: var(--km-cream);
  --rp-dialog-primary-bg: var(--km-brick);
  --rp-dialog-secondary-border: var(--km-cream);
  --rp-dialog-secondary-text: #fff;
  --rp-dialog-control-btn-bg: rgba(255, 255, 255, .14);
  --rp-dialog-control-btn-active: rgba(255, 255, 255, .14);
  --rp-dialog-toggle-bg: rgba(255, 255, 255, .14);
}

/* Onboarding: animated flat SVG characters (static copies via <picture> for reduced motion). */
[data-rp-game="knowme"] #onboarding-screen .slide-icon { width: min(240px, 55vw); margin-bottom: 18px; font-size: 0; line-height: 0; }
[data-rp-game="knowme"] #onboarding-screen .slide-icon picture,
[data-rp-game="knowme"] #onboarding-screen .slide-icon img { display: block; width: 100%; height: auto; }
[data-rp-game="knowme"] .slide-title { color: #fff; }
[data-rp-game="knowme"] .slide-text { color: var(--km-cream); }
@media (max-height: 600px) {
  [data-rp-game="knowme"] #onboarding-screen .slide-icon { width: 120px; margin-bottom: 8px; }
}
/* Short landscape phones: character beside the copy so the text never runs under the dots/buttons. */
@media (max-height: 500px) and (min-width: 560px) {
  [data-rp-game="knowme"] #onboarding-screen .onboarding-slide.active { display: grid; grid-template-columns: auto minmax(0, 340px); grid-template-rows: auto auto; column-gap: 24px; align-items: center; padding-top: 0; text-align: left; }
  [data-rp-game="knowme"] #onboarding-screen .slide-icon { grid-row: 1 / span 2; width: 120px; margin: 0; }
  [data-rp-game="knowme"] #onboarding-screen .slide-title { align-self: end; margin-bottom: 6px; }
  [data-rp-game="knowme"] #onboarding-screen .slide-text { align-self: start; max-width: none; }
}

/* Light motion, same rhythm as «Я никогда не» (cutout-theme.css). Decorative only: never delays answers,
   guesses, timers or scoring; fully off under prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  [data-rp-game="knowme"] {
    --km-press: 100ms;
    --km-settle: 240ms;
    --km-spring: cubic-bezier(.2, .9, .3, 1.25);
  }
  [data-rp-game="knowme"] button:not(:disabled) {
    transition: scale var(--km-settle) var(--km-spring), translate var(--km-settle) var(--km-spring),
      background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
  }
  [data-rp-game="knowme"] button:not(:disabled):active { scale: .96; translate: 0 2px; transition-duration: var(--km-press); }
  [data-rp-game="knowme"] .btn-back:active { scale: .88; }
  [data-rp-game="knowme"] .dot { transition: background-color 180ms ease, scale 180ms var(--km-spring); }
  [data-rp-game="knowme"] .dot.active { scale: 1.12; }

  [data-rp-game="knowme"] .onboarding-slide.active .slide-icon { animation: km-character-arrive 380ms var(--km-spring) both; }

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

  [data-rp-game="knowme"] #lobby-screen.active .room-code-display { animation: km-stamp-in 360ms var(--km-spring) both; }

  /* Round: the respondent badge stamps, the question card arrives, answer labels deal in. */
  [data-rp-game="knowme"] #game-screen.active .respondent-badge { animation: km-stamp-in 360ms var(--km-spring) both; }
  [data-rp-game="knowme"] #game-screen.active .question-text { animation: km-paper-arrive 280ms var(--km-spring) both; }
  [data-rp-game="knowme"] #answer-phase,
  [data-rp-game="knowme"] #guess-phase,
  [data-rp-game="knowme"] #waiting-phase,
  [data-rp-game="knowme"] #guess-waiting-phase { animation: km-paper-arrive 280ms var(--km-spring) both; }
  [data-rp-game="knowme"] .options-grid .option-btn { animation: km-pop-in 260ms var(--km-spring) both; }
  [data-rp-game="knowme"] .options-grid .option-btn:nth-child(2) { animation-delay: 40ms; }
  [data-rp-game="knowme"] .options-grid .option-btn:nth-child(3) { animation-delay: 80ms; }
  [data-rp-game="knowme"] .options-grid .option-btn:nth-child(n+4) { animation-delay: 120ms; }
  [data-rp-game="knowme"] .options-grid .option-btn.selected,
  [data-rp-game="knowme"] .yesno-btn.selected { animation: km-answer-stamp 260ms var(--km-spring); }

  /* Final standings and popups. */
  [data-rp-game="knowme"] #results-screen.active .winner-icon { animation: km-nod 420ms ease-out 200ms both; }
  [data-rp-game="knowme"] #results-screen.active .score-item { animation: km-paper-arrive 280ms var(--km-spring) both; }
  [data-rp-game="knowme"] #results-screen.active .score-item:nth-child(2) { animation-delay: 60ms; }
  [data-rp-game="knowme"] #results-screen.active .score-item:nth-child(3) { animation-delay: 120ms; }
  [data-rp-game="knowme"] #results-screen.active .score-item:nth-child(n+4) { animation-delay: 160ms; }
  [data-rp-game="knowme"] .confirm-dialog-overlay.active .confirm-dialog-modal,
  [data-rp-game="knowme"] .settings-popup-overlay.active .settings-popup-modal { animation: km-paper-arrive 280ms var(--km-spring); }
}
@keyframes km-character-arrive { from { opacity: 0; scale: .82; rotate: -10deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes km-pop { 0% { transform: scale(.965); } 55% { transform: scale(1.018); } 100% { transform: scale(1); } }
@keyframes km-pop-in { from { opacity: 0; scale: .7; } to { opacity: 1; scale: 1; } }
@keyframes km-nod { 0%, 100% { rotate: 0deg; } 35% { rotate: -8deg; } 70% { rotate: 5deg; } }
@keyframes km-paper-arrive { from { opacity: 0; translate: 0 12px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes km-stamp-in { from { opacity: 0; scale: 1.45; } to { opacity: 1; scale: 1; } }
@keyframes km-answer-stamp { 0% { scale: .94; } 65% { scale: 1.025; } 100% { scale: 1; } }

/* Pack choice arrow: COMMON/roomplay-palettes.html / knowme accent #822D29, outlined in surface #FFF2DC because the accent is too dark for an ink outline. */
:root {
    --packs-cue-color: #822D29;
    --packs-cue-stroke: #FFF2DC;
}

/* Like / dislike / report under the question (shared content-report.css), shown after this phone answers. */
:root {
  --rp-report-surface: var(--km-navy);
  --rp-report-text: var(--km-cream);
  --rp-report-muted: rgb(255 242 220 / 72%);
  --rp-report-accent: var(--km-cream);
  --rp-report-accent-ink: var(--km-ink);
}
.knowme-card-vote { margin-top: 12px; }
#reveal-container .knowme-card-vote { margin: 0 0 12px; }
/* /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 the next screen. 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.
 */
@property --rp-intro-hole {
  syntax: '<length>';
  inherits: true;
  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 «3 · 2 · 1» screen (995), which waits underneath and opens through the portal; 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. */
.rp-intro-sparks {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--rp-in-accent) 85%, #fff) 0 2px, transparent 3px),
    radial-gradient(circle, rgba(255, 255, 255, .55) 0 1.5px, transparent 2.5px);
  background-size: 140px 180px, 90px 110px;
  background-position: 20px 40px, 60px 10px;
  opacity: 0;
}

.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-drift 7s linear 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; }
}

@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-drift { from { background-position: 20px 40px, 60px 10px; } to { background-position: 20px -320px, 60px -210px; } }
@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); } }
@keyframes rp-intro-fly {
  to { opacity: 0; transform: translate(var(--fly-x, 0), var(--fly-y, -60vh)) rotate(var(--tilt, 12deg)) scale(.7); filter: blur(4px); }
}
@keyframes rp-intro-rush {
  0% { transform: none; }
  22% { transform: scale(.82) rotate(-6deg); filter: brightness(1.2); }
  100% { transform: scale(9) rotate(12deg); filter: brightness(2) blur(2px); opacity: 0; }
}
@keyframes rp-intro-shock { 0% { opacity: 1; transform: scale(1); border-width: 6px; } 100% { opacity: 0; transform: scale(4); border-width: 1px; } }
@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; } }