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

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

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

@media (prefers-reduced-motion: reduce) {
    .rp-toast,
    .rp-toast.is-visible {
        transform: translate(-50%, 0);
        transition: opacity 0.15s linear, visibility 0s linear 0.15s;
    }
    .rp-toast.is-visible { transition: opacity 0.15s linear, visibility 0s; }
}
/* /bunny/styles.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --accent-pink: #ff3b6f;
    --accent-pink-dark: #cc2f59;
    --accent-green: #10b981;
    --onboarding-accent: var(--accent-green);
    --onboarding-accent-dark: #059669;
    --onboarding-shadow: rgba(16, 185, 129, 0.3);
    --onboarding-shadow-hover: rgba(16, 185, 129, 0.4);
}

/* Back Button */

/* Players List */
.players-list {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 20px;
}

/* Cards Topic Header */
.cards-topic-header {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-card);
    border-radius: 14px;
    padding: 12px 16px;
    margin-bottom: 16px;
    width: 300px;
}

.cards-topic-label {
    color: var(--text-secondary);
    font-size: 14px;
    white-space: nowrap;
}

.cards-topic-name {
    flex: 1;
    font-size: 18px;
    font-weight: 600;
    color: var(--accent-green);
}

.cards-topic-refresh {
    background: var(--bg-secondary);
    border: none;
    color: var(--text-primary);
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

@media (hover: hover) {
    .cards-topic-refresh:hover:not(:disabled) {
        background: var(--accent-green);
        transform: rotate(180deg);
    }
}

.cards-topic-refresh:active:not(:disabled) {
    transform: scale(0.95) rotate(180deg);
}

.cards-topic-refresh:disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

/* Bottom Section */
.bottom-section {
    padding: 20px 0;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#players-screen .bottom-section {
    margin-top: 0;
}

/* Play Button */
/* Inline icon spacing for this game’s action content. */
.btn-play { display: flex; align-items: center; justify-content: center; gap: 10px; }

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

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

/* Cards Screen */
#cards-screen {
    justify-content: center;
    align-items: center;
    padding-top: 60px;
}

.card-container {
    perspective: 1000px;
    width: 300px;
    height: 400px;
    margin: 20px 0;
}

.game-card {
    width: 100%;
    height: 100%;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.game-card.swiping {
    transition: transform 0.4s ease;
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.game-card.flipped .card-inner {
    transform: rotateY(180deg);
}

.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
}

.card-front {
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
    border: 2px solid var(--accent-green);
}

.card-back {
    background: linear-gradient(135deg, var(--accent-green) 0%, #059669 100%);
    transform: rotateY(180deg);
}

.card-title {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.card-player-name {
    font-size: 28px;
    font-weight: 700;
    color: var(--accent-green);
    margin-bottom: 30px;
}

.card-hint {
    font-size: 14px;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.5;
}

.card-role {
    font-size: 28px;
    font-weight: 700;
    color: white;
    text-align: center;
    line-height: 1.4;
}

.card-role.rabbit {
    font-size: 24px;
}

.card-buttons {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    width: 300px;
}

.btn-show-role, .btn-next-player {
    flex: 1;
    padding: 14px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.btn-show-role {
    background: var(--accent-green);
    color: white;
}

.btn-show-role:active {
    transform: scale(0.96);
}

.btn-next-player {
    background: var(--accent-green);
    color: white;
    display: none;
}

.btn-next-player:active {
    transform: scale(0.96);
}

.swipe-hint {
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
    margin-top: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.swipe-hint.visible {
    opacity: 1;
}

/* Words Screen */

.words-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    flex: 1;
    overflow-y: auto;
    padding-bottom: 20px;
}

.word-item {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    font-size: 16px;
    color: var(--text-primary);
    animation: fadeIn 0.3s ease;
}

/* Instructions Card */
.instructions-card {
    background: var(--bg-card);
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    margin-bottom: 30px;
}

.instructions-icon {
    font-size: 48px;
    margin-bottom: 20px;
}

.instructions-text {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 16px;
}

.instructions-text:last-child {
    margin-bottom: 0;
}

.instructions-text.highlight {
    color: var(--accent-green);
    font-weight: 600;
}

.instructions-text.small {
    font-size: 14px;
}

/* Player Order */
.player-order {
    flex: 1;
    overflow-y: auto;
}

.order-label {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 16px;
    text-align: center;
}

.order-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.order-item {
    display: flex;
    align-items: center;
    background: var(--bg-card);
    border-radius: 12px;
    padding: 14px 16px;
    animation: slideIn 0.3s ease;
}

.order-number {
    width: 32px;
    height: 32px;
    background: var(--accent-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    margin-right: 14px;
}

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

/* Topic Reminder */
.topic-reminder {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

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

.topic-reminder-value {
    color: var(--accent-green);
    font-size: 18px;
    font-weight: 600;
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .app {
        max-width: 100%;
    }

    .screen {
        padding: 20px 12px;
        padding-top: calc(20px + env(safe-area-inset-top, 0px));
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }

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

    .btn-play {
        padding: 16px;
        font-size: 16px;
    }

    .cards-topic-header {
        width: 240px;
    }

    .card-container {
        width: 240px;
        height: 320px;
    }

    .card-buttons {
        width: 240px;
    }

    .card-player-name {
        font-size: 22px;
        margin-bottom: 20px;
    }

    .card-role {
        font-size: 20px;
        line-height: 1.3;
    }

    .card-hint {
        font-size: 13px;
    }

    .swipe-hint {
        font-size: 12px;
        margin-top: 12px;
    }

    .subtitle {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .words-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .word-item {
        padding: 12px;
        font-size: 14px;
    }

    .instructions-card {
        padding: 20px;
        margin-bottom: 20px;
    }

    .instructions-icon {
        font-size: 36px;
        margin-bottom: 12px;
    }

    .instructions-text {
        font-size: 14px;
        line-height: 1.4;
    }

    .instructions-text.small {
        font-size: 12px;
    }

    .order-label {
        font-size: 13px;
        margin-bottom: 12px;
    }

    .order-list {
        gap: 8px;
    }

    .order-item {
        padding: 12px 14px;
    }

    .order-number {
        width: 28px;
        height: 28px;
        font-size: 12px;
        margin-right: 10px;
    }

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

    .topic-reminder {
        padding: 12px;
        margin-bottom: 16px;
    }

    .topic-reminder-label {
        font-size: 13px;
    }

    .topic-reminder-value {
        font-size: 16px;
    }

}

/* Responsive Height */
@media (max-height: 700px) {
    .screen {
        padding: 20px;
    }

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

    .card-container {
        width: 260px;
        height: 340px;
    }

    .card-player-name {
        font-size: 24px;
    }

    .card-role {
        font-size: 24px;
    }

}

/* Tablet and larger */
@media (min-width: 768px) {
    .app {
        max-width: 100%;
    }

    .screen {
        padding: 50px 40px;
    }

    .title {
        font-size: 32px;
        margin-bottom: 40px;
    }

    .card-container {
        width: 320px;
        height: 420px;
    }

    .card-player-name {
        font-size: 32px;
    }

    .card-role {
        font-size: 32px;
    }

    .words-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}

/* Player avatar chips (player-avatar.js) */
.card-player-name .rp-player {
    max-width: 100%;
}

.order-name {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
}

/* Voting: tap the player the group picked to check them («Голосование»).
   The screen scrolls as a whole, since the player list and the word list can both be long. */
#voting-screen { overflow-y: auto; }
#voting-screen .words-grid { flex: none; overflow: visible; }
#voting-screen .words-grid[hidden] { display: none; }
#voting-screen .instructions-card { margin-bottom: 16px; }

.vote-label {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.vote-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.vote-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 10px 16px;
    font: inherit;
    font-size: 16px;
    color: var(--text-primary);
    text-align: left;
    background: var(--bg-card);
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
}

.vote-item.checked { cursor: default; }
.vote-item.hit { border-color: var(--rp-correct); }
.vote-item.miss { opacity: .6; border-color: var(--rp-wrong); }
.vote-mark { display: inline-flex; font-size: 22px; }
.vote-item.hit .vote-mark { color: var(--rp-correct); }
.vote-item.miss .vote-mark { color: var(--rp-wrong); }

.vote-result {
    min-height: 1.4em;
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
}
.vote-result.hit { color: var(--rp-correct); }
.vote-result.miss { color: var(--rp-wrong); }

/* After the vote: a caught impostor names the secret word. */
.vote-list.done .vote-item { cursor: default; }
.spy-guess { margin-bottom: 16px; text-align: center; }
.spy-guess[hidden] { display: none; }
.spy-guess-question { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--text-primary); }
.spy-guess-buttons { display: flex; gap: 12px; }
.spy-guess-buttons > button { flex: 1; }

/* Results: who won, who the impostor was and the secret word. */
.results-reason { margin: -16px 0 24px; text-align: center; color: var(--text-secondary); font-size: 16px; }
.results-reveal { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.results-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-card);
    border-radius: 12px;
}
.results-label { color: var(--text-secondary); font-size: 14px; }
.results-value { color: var(--text-primary); font-size: 17px; font-weight: 700; text-align: right; }
/* Several impostors: their avatars wrap, right-aligned. */
#results-impostor { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 12px; }

.results-row[hidden] { display: none; }

/* Role card notes: the impostor's topic / fellow impostors, and the question in «Вопрос» mode. */
.card-role-note { display: block; margin-top: 12px; font-size: 16px; font-weight: 600; line-height: 1.35; opacity: .9; }
.card-role-note + .card-role-note { margin-top: 6px; }
.card-role.question { font-size: 22px; line-height: 1.3; }
.cards-topic-name[hidden] { display: none; }
.cards-topic-name[hidden] + .cards-topic-refresh { margin-left: auto; }
#associations-screen .instructions-card[hidden], .answers-question[hidden] { display: none; }

/* «Вопрос» mode: answer field on the role card, the real question and the typed answers. */
.card-answer { width: 100%; margin-top: 18px; padding: 12px 14px; border: 2px solid rgba(255, 255, 255, .45); border-radius: 14px; background: rgba(9, 7, 25, .35); color: #fff; font: inherit; font-size: 18px; font-weight: 600; text-align: center; outline: none; }
.card-answer::placeholder { color: rgba(255, 255, 255, .65); }
.card-answer:focus { border-color: #fff; }
.card-answer[hidden] { display: none; }
.btn-next-player:disabled { opacity: .45; cursor: default; }
.answers-question { width: 100%; max-width: 420px; margin: 0 auto 16px; padding: 22px 20px; border-radius: 20px; background: var(--bg-card); font-size: 22px; font-weight: 800; line-height: 1.3; text-align: center; color: var(--text-primary); }
.order-name { display: flex; flex-direction: column; gap: 2px; }
.order-answer { font-size: 18px; font-weight: 700; color: var(--text-primary); overflow-wrap: anywhere; }
.vote-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* /confirm-dialog.css */
/*
 * Back/exit confirmation dialog. Game Themes recolour it through the --rp-dialog-* tokens
 * (shared with settings-popup.css), set once on :root or [data-rp-game] in the theme:
 *   --rp-dialog-overlay, --rp-dialog-bg, --rp-dialog-border, --rp-dialog-shadow, --rp-dialog-radius,
 *   --rp-dialog-title, --rp-dialog-text, --rp-dialog-primary-bg, --rp-dialog-primary-text,
 *   --rp-dialog-primary-shadow, --rp-dialog-btn-radius, --rp-dialog-secondary-bg,
 *   --rp-dialog-secondary-border, --rp-dialog-secondary-text.
 * Fallbacks are the original navy look, so a game without tokens is unchanged. Unset tokens
 * follow related ones: secondary text = --rp-dialog-text; in the settings popup the value and
 * −/+ text = --rp-dialog-title, the toggle text = --rp-dialog-text and the «on» toggle = the primary button.
 */
.confirm-dialog-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--rp-dialog-overlay, rgba(0, 0, 0, 0.85));
    z-index: 1000;
    justify-content: center;
    align-items: center;
    padding: 24px;
}

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

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

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

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

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

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

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

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

/* Optional «why are you leaving» chips (ConfirmDialog.show(..., { reasons: true })). */
.confirm-dialog-reasons {
    margin: -8px 0 20px;
}
.confirm-dialog-reasons[hidden] { display: none; }
.confirm-dialog-reasons-title {
    font-size: 13px;
    color: var(--rp-dialog-text, #8892b0);
    margin-bottom: 10px;
}
.confirm-dialog-reason-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.confirm-dialog-reason {
    min-height: 36px;
    padding: 7px 14px;
    border: 1.5px solid var(--rp-dialog-secondary-border, #3a4167);
    border-radius: 18px;
    background: transparent;
    color: var(--rp-dialog-title, #ffffff);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.confirm-dialog-reason:active { transform: scale(0.95); }
.confirm-dialog-reason[aria-pressed="true"] {
    background: var(--rp-dialog-primary-bg, linear-gradient(135deg, #ff3b6f, #cc2f59));
    border-color: transparent;
    color: var(--rp-dialog-primary-text, #ffffff);
}
.confirm-dialog-reason:focus-visible { outline: 2px solid var(--rp-dialog-primary-text, #ffffff); outline-offset: 2px; }
/* /player-setup.css */
/* Player Setup — shared styles for player/team input screens */
/* Uses ps- prefix to avoid collisions during incremental migration */

.ps-entry {
    /* Same compact row as the room player list (create-room .player-item). */
    display: flex;
    align-items: center;
    background: var(--bg-card);
    border-radius: 14px;
    min-height: 56px;
    padding: 8px 12px;
    margin-bottom: 6px;
    animation: ps-slideIn 0.3s ease;
}

.ps-list.ps-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ps-list > .ps-entry { margin-bottom: 0; }

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

/*
 * Add / remove motion, same as the room player list (create-room .player-item.is-new / .is-leaving):
 * a new row opens its slot and pops in with a soft squash while its icon bounces and rings once in the
 * setup accent; a removed row squashes, shrinks out and closes its slot so the rows below glide up.
 * The -6px margin cancels the .ps-list gap while the slot is closed. JS adds these classes only when
 * motion is allowed. !important: some Game Themes give every row an id-scoped arrival animation
 * (#players-screen.active .ps-entry), which would otherwise win over these one-off states.
 */
.ps-entry.ps-entry--new {
    transform-origin: 30px 50%;
    animation: ps-row-slot 260ms ease-out both, ps-row-join 520ms cubic-bezier(.2, .9, .3, 1.25) both !important;
}

.ps-entry--new .ps-icon { animation: ps-icon-join 520ms cubic-bezier(.2, .9, .3, 1.25) 80ms both; }

/* After the join the row must not animate again: dropping .ps-entry--new would otherwise swap the
   animation back to the row's own arrival (ps-slideIn or a theme's #players-screen.active .ps-entry)
   and play it a second time. */
.ps-entry--settled { animation: none !important; }

.ps-entry.ps-entry--leaving {
    pointer-events: none;
    overflow: hidden;
    transform-origin: 30px 50%;
    animation: ps-row-leave 420ms cubic-bezier(.5, 0, .75, .3) both !important;
}

@keyframes ps-row-slot {
    from { max-height: 0; min-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: -6px; }
    to { max-height: var(--ps-row-max, 80px); }
}

@keyframes ps-row-join {
    0% { opacity: 0; transform: scale(.55); }
    45% { opacity: 1; transform: scale(1.05, .93); }
    70% { transform: scale(.98, 1.03); }
    100% { opacity: 1; transform: none; }
}

@keyframes ps-icon-join {
    0% { transform: scale(.3); box-shadow: 0 0 0 0 var(--ps-accent); }
    50% { transform: scale(1.18, .86); box-shadow: 0 0 0 6px color-mix(in srgb, var(--ps-accent) 45%, transparent); }
    75% { transform: scale(.95, 1.06); }
    100% { transform: none; box-shadow: 0 0 0 10px transparent; }
}

@keyframes ps-row-leave {
    0% { opacity: 1; transform: none; max-height: var(--ps-row-max, 80px); }
    22% { opacity: 1; transform: scale(1.04, .9); max-height: var(--ps-row-max, 80px); }
    60% { opacity: 0; transform: scale(.5); max-height: var(--ps-row-max, 80px); min-height: 56px; padding-top: 8px; padding-bottom: 8px; margin-bottom: 0; }
    100% { opacity: 0; transform: scale(.5); max-height: 0; min-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: -6px; }
}

.ps-icon {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

.ps-icon--avatar {
    overflow: hidden;
    cursor: default;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 700;
}

.ps-icon--avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Player mode icon states */
.ps-icon--filled {
    background: var(--ps-accent);
}

.ps-icon--empty {
    background: var(--bg-secondary);
    border: 1px solid var(--text-secondary);
}

.ps-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 16px;
    outline: none;
    min-width: 0;
}

.ps-input::placeholder {
    color: var(--text-placeholder);
}

.ps-remove {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Clear gap from the gender toggle so a tap on one never lands on the other. */
    margin: -2px -6px -2px 16px;
    position: relative;
    transition: color 0.2s;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

/* A just-added player: the ✕ is a ✓ in the setup accent until the name is saved. */
.ps-remove.ps-remove--confirm {
    width: 36px;
    height: 36px;
    margin: 0 -4px 0 18px;
    border-radius: 999px;
    color: var(--ps-confirm-ink, #17191f);
    background: var(--ps-accent);
}

.ps-remove--confirm svg { width: 20px; height: 20px; display: block; }
.ps-remove--confirm:active { transform: scale(0.9); }
.ps-remove:focus-visible { outline: 2px solid var(--ps-accent); outline-offset: 2px; }
/* The ✕ that replaces the ✓ after saving pops in. */
.ps-remove--saved { animation: ps-remove-saved 320ms cubic-bezier(.2, .9, .3, 1.25); }

@keyframes ps-remove-saved {
    0% { transform: scale(.4) rotate(-45deg); opacity: 0; }
    70% { transform: scale(1.15) rotate(6deg); opacity: 1; }
    100% { transform: none; }
}

/* Gender badge is a toggle: a tap switches male <-> female. */
.ps-gender {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    margin-left: 8px;
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    background: color-mix(in srgb, var(--bg-secondary) 86%, transparent);
    color: var(--text-secondary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease;
}

/* Compact visuals, but each control keeps a 44px touch area. */
.ps-icon::after,
.ps-gender::after,
.ps-remove::after { content: ''; position: absolute; inset: -4px; }
.ps-gender::after { inset: -6px; }

.ps-gender:active { transform: scale(0.9); }
.ps-gender:focus-visible { outline: 2px solid var(--ps-accent); outline-offset: 2px; }
.ps-gender--flip .rp-gender-icon { animation: ps-gender-flip 0.28s ease; }

@keyframes ps-gender-flip {
    0% { transform: scale(0.4) rotate(-40deg); opacity: 0; }
    70% { transform: scale(1.15) rotate(6deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); }
}

.ps-gender--female { color: var(--rp-female, #ff7aaa); }
.ps-gender--male { color: var(--rp-male, #68a8ff); }

/*
 * «Перенести игроков?» is a dialog like «Выйти из игры?» and the settings popup, so it takes the
 * same --rp-dialog-* tokens every game theme sets (confirm-dialog.css), not the page's --bg-card /
 * --text-primary: those meant white text on a cream card in «5 секунд» and «Покажи слово».
 * Fallbacks are the shared navy dialog.
 */
.ps-roster-import-overlay {
    --rp-import-ink: var(--rp-dialog-title, #ffffff);
    --rp-import-muted: var(--rp-dialog-text, #8892b0);
    --rp-import-accent: var(--rp-dialog-primary-bg, linear-gradient(135deg, #ff3b6f, #cc2f59));
    --rp-import-on-accent: var(--rp-dialog-primary-text, #ffffff);
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background: var(--rp-dialog-overlay, rgba(4, 7, 20, 0.82));
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 180ms ease;
}

.ps-roster-import-overlay.active { opacity: 1; }

.ps-roster-import-modal {
    width: min(100%, 390px);
    max-height: min(720px, calc(100dvh - 40px));
    display: flex;
    flex-direction: column;
    padding: 24px;
    border: var(--rp-dialog-border, 1px solid color-mix(in srgb, var(--rp-import-ink) 10%, transparent));
    border-radius: var(--rp-dialog-radius, 26px);
    background: var(--rp-dialog-bg, linear-gradient(135deg, #252b4a 0%, #1a2140 100%));
    box-shadow: var(--rp-dialog-shadow, 0 28px 70px rgba(0, 0, 0, 0.45));
    color: var(--rp-import-ink);
    transform: translateY(14px) scale(0.98);
    transition: transform 220ms cubic-bezier(.2, .8, .2, 1);
}

.ps-roster-import-overlay.active .ps-roster-import-modal {
    transform: translateY(0) scale(1);
}

.ps-roster-import-title {
    margin: 0;
    text-align: center;
    font-size: clamp(22px, 6vw, 28px);
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--rp-import-ink);
}

.ps-roster-import-subtitle,
.ps-roster-import-overflow {
    margin: 8px 0 18px;
    text-align: center;
    color: var(--rp-import-muted);
    font-size: 14px;
    line-height: 1.4;
}

.ps-roster-import-list {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: grid;
    gap: 8px;
    padding: 2px 2px 4px;
    scrollbar-width: thin;
}

.ps-roster-import-player {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 6px 10px 6px 6px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--rp-import-ink) 7%, transparent);
}

.ps-roster-import-avatar {
    width: 46px;
    height: 46px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--rp-import-accent);
    color: var(--rp-import-on-accent);
    font-weight: 800;
}

.ps-roster-import-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.ps-roster-import-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--rp-import-ink);
    font-size: 17px;
    font-weight: 650;
}

.ps-roster-import-gender {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--rp-import-ink) 8%, transparent);
    color: var(--rp-import-muted);
    font-size: 17px;
    font-weight: 800;
}

.ps-roster-import-gender--female { color: var(--rp-female, #ff7aaa); }
.ps-roster-import-gender--male { color: var(--rp-male, #68a8ff); }

.ps-roster-import-overflow {
    margin: 12px 4px 0;
    font-size: 13px;
}

.ps-roster-import-actions {
    display: grid;
    gap: 10px;
    margin-top: 20px;
}

.ps-roster-import-button {
    min-height: 50px;
    width: 100%;
    border-radius: var(--rp-dialog-btn-radius, 999px);
    border: 0;
    font: inherit;
    font-size: 16px;
    font-weight: 750;
    cursor: pointer;
    touch-action: manipulation;
}

.ps-roster-import-button--primary {
    background: var(--rp-import-accent);
    color: var(--rp-import-on-accent);
    box-shadow: var(--rp-dialog-primary-shadow, 0 10px 24px rgba(0, 0, 0, 0.22));
}

.ps-roster-import-button--secondary {
    border: 2px solid var(--rp-dialog-secondary-border, #3a4167);
    background: var(--rp-dialog-secondary-bg, transparent);
    color: var(--rp-dialog-secondary-text, var(--rp-import-muted));
}

.ps-roster-import-button:focus-visible {
    outline: 3px solid var(--rp-import-ink);
    outline-offset: 3px;
}

@media (max-height: 560px) and (orientation: landscape) {
    .ps-roster-import-modal { max-height: calc(100dvh - 20px); padding: 18px; }
    .ps-roster-import-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ps-roster-import-player { grid-template-columns: 40px minmax(0, 1fr) 28px; min-height: 46px; }
    .ps-roster-import-avatar { width: 40px; height: 40px; }
    .ps-roster-import-actions { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .ps-entry,
    .ps-gender,
    .ps-remove--saved,
    .ps-gender--flip .rp-gender-icon,
    .ps-roster-import-overlay,
    .ps-roster-import-modal { animation: none; transition: none; }
}

@media (hover: hover) {
    .ps-remove:hover {
        color: var(--ps-accent);
    }
}

/* Add button (games apply this class to their existing button) */
.ps-add-btn {
    background: transparent;
    border: 2px solid var(--ps-accent);
    color: var(--text-primary);
    padding: 16px 40px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin: 0 auto 30px;
    display: block;
    transition: all 0.3s ease;
}

@media (hover: hover) {
    .ps-add-btn:hover {
        background: var(--ps-accent);
        transform: scale(1.02);
    }
}

.ps-add-btn:active {
    transform: scale(0.98);
}

/* Mobile */
@media (max-width: 480px) {
    .ps-add-btn {
        padding: 14px 30px;
        font-size: 14px;
        margin-bottom: 20px;
    }

}

/*
 * Gender icons: one upright ♂ / ♀ pair as SVG masks instead of font glyphs, so the
 * sign is always centred in its badge whatever the game font (font ♂/♀ glyphs sit
 * high/low and off to the side). Colour comes from currentColor.
 * Markup: <span class="rp-gender-icon rp-gender-icon--male|female" aria-hidden="true"></span>
 * The same shapes are defined in player-gender.css and player-setup.css; keep them in sync.
 */
:root {
    --rp-icon-male: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='14' r='5.5'/%3E%3Cpath d='M14 10l5.5-5.5M14 4.5h5.5V10'/%3E%3C/svg%3E");
    --rp-icon-female: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='5.5'/%3E%3Cpath d='M12 14v7M8.5 17.8h7'/%3E%3C/svg%3E");
}

.rp-gender-icon {
    display: block;
    flex: none;
    width: 0.9em;
    height: 0.9em;
    background-color: currentColor;
    -webkit-mask: var(--rp-icon-male) center / contain no-repeat;
    mask: var(--rp-icon-male) center / contain no-repeat;
}

.rp-gender-icon--female {
    -webkit-mask-image: var(--rp-icon-female);
    mask-image: var(--rp-icon-female);
}

.ps-gender .rp-gender-icon,
.ps-roster-import-gender .rp-gender-icon {
    width: 18px;
    height: 18px;
}

/* ---- Avatar picker (shared avatar-capture.js sheet, loaded on the first avatar tap) ----
   Same bottom sheet as the room picker (create-room/room-themes.css), coloured from the game theme:
   page background, translucent text-colour surfaces, and the setup accent. player-setup.js puts the
   resolved accent and its ink on <html> (--ps-ac-accent / --ps-ac-on-accent) before opening. */
.avatar-capture-overlay { background: rgba(0, 0, 0, 0.6); align-items: flex-end; }
.avatar-capture-modal {
    background: linear-gradient(180deg, var(--bg-primary) 0%, color-mix(in srgb, var(--bg-primary) 84%, #000) 100%);
    border-top: 1px solid color-mix(in srgb, var(--text-primary) 18%, transparent);
    color: var(--text-primary);
}
.avatar-capture-close {
    background: color-mix(in srgb, var(--text-primary) 14%, transparent);
    color: var(--text-primary);
}
.avatar-capture-tabs {
    background: color-mix(in srgb, var(--text-primary) 12%, transparent);
    border-radius: 14px;
    margin-right: 44px;
}
.avatar-capture-tab { color: var(--text-secondary); border-radius: 10px; }
.avatar-capture-tab.active { background: var(--ps-ac-accent, var(--settings-accent)); color: var(--ps-ac-on-accent, #ffffff); }
.avatar-capture-gif-item { background: color-mix(in srgb, var(--text-primary) 12%, transparent); border-radius: 10px; }
.avatar-capture-gif-item:hover { border-color: var(--ps-ac-accent, var(--settings-accent)); }
.avatar-capture-gif-grid::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-primary) 22%, transparent); }
.avatar-capture-guide, .avatar-capture-preview { border-color: var(--ps-ac-accent, var(--settings-accent)); }
.avatar-capture-btn { border-radius: 14px; }
.avatar-capture-btn-capture, .avatar-capture-btn-use { background: var(--ps-ac-accent, var(--settings-accent)); color: var(--ps-ac-on-accent, #ffffff); }
.avatar-capture-btn-retake { border-color: color-mix(in srgb, var(--text-primary) 22%, transparent); color: var(--text-primary); }

/*
 * Teams with players (PlayerSetup config.members): each team is a card with its name row on top and
 * its players as chips below. A chip is dragged to another team, or tapped and then the team (the
 * other teams show a dashed «Сюда» target). Colours come from the game theme: the card is the theme's
 * .ps-entry, chips are a translucent tint of the card's ink, highlights use --ps-accent. A theme whose
 * cards are lighter than its screen sets --ps-card-ink / --ps-card-muted on .ps-entry.
 */
.ps-entry.ps-entry--team {
    --ps-row-max: 420px;
    flex-direction: column;
    align-items: stretch;
    padding: 8px 12px 12px;
    transition: box-shadow 160ms ease, transform 160ms ease;
}

.ps-team-head {
    display: flex;
    align-items: center;
    min-height: 40px;
}

.ps-team-members {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 8px;
    min-height: 44px;
}

.ps-team-tools {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
}

.ps-team-hint {
    flex: 1;
    margin: 0;
    font-size: 14px;
    line-height: 1.35;
    color: var(--text-secondary);
}

.ps-team-shuffle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    min-height: 40px;
    padding: 0 14px;
    border: 1.5px solid color-mix(in srgb, var(--text-primary) 45%, transparent);
    border-radius: 999px;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    transition: transform 120ms ease, background-color 160ms ease;
}

.ps-team-shuffle::after { content: ''; position: absolute; inset: -4px 0; }
.ps-team-shuffle .rp-icon { font-size: 18px; }
.ps-team-shuffle:active { transform: scale(0.95); background: color-mix(in srgb, var(--text-primary) 12%, transparent); }
.ps-team-shuffle:active .rp-icon { animation: ps-dice-roll 360ms ease; }
.ps-team-shuffle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.ps-team-shuffle[hidden] { display: none; }

@keyframes ps-dice-roll {
    0% { transform: rotate(0); }
    100% { transform: rotate(180deg); }
}

.ps-member,
.ps-member-add,
.ps-member-drop,
.ps-member-input {
    box-sizing: border-box;
    min-height: 40px;
    border-radius: 999px;
    font: inherit;
    font-size: 15px;
    line-height: 1.2;
    -webkit-tap-highlight-color: transparent;
}

.ps-member {
    position: relative;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 4px 14px 4px 5px;
    background: color-mix(in srgb, var(--ps-card-ink, var(--text-primary)) 9%, transparent);
    color: var(--ps-card-ink, var(--text-primary));
    font-weight: 600;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    transition: background-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

/* Bigger touch target than the visual pill. */
.ps-member::before { content: ''; position: absolute; inset: -2px -2px; }
.ps-member .rp-player { gap: 8px; min-width: 0; }
.ps-member .rp-player-avatar { font-size: 15px; width: 30px; height: 30px; }
.ps-member .rp-player-avatar--emoji { font-size: 17px; }
.ps-member-label { display: inline-flex; min-width: 0; max-width: 100%; }
.ps-member:focus-visible { outline: 2px solid var(--ps-accent); outline-offset: 2px; }
.ps-member:active { cursor: grabbing; }

.ps-member--selected {
    background: color-mix(in srgb, var(--ps-accent) 22%, transparent);
    box-shadow: 0 0 0 2px var(--ps-accent);
    padding-right: 4px;
}

.ps-member-remove {
    display: none;
    position: relative;
    width: 30px;
    height: 30px;
    margin-left: 6px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ps-card-ink, var(--text-primary)) 14%, transparent);
    color: var(--ps-card-ink, var(--text-primary));
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.ps-member-remove::after { content: ''; position: absolute; inset: -6px; }
.ps-member--selected .ps-member-remove { display: inline-flex; align-items: center; justify-content: center; }
.ps-member-remove:focus-visible { outline: 2px solid var(--ps-accent); outline-offset: 1px; }

.ps-member--dragging { opacity: 0.32; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ps-card-ink, var(--text-primary)) 35%, transparent); }
.ps-member--dragging > * { visibility: hidden; }

.ps-member.ps-member--ghost {
    position: fixed;
    z-index: 1400;
    margin: 0;
    pointer-events: none;
    background: var(--ps-ghost-bg, #fff);
    background-image: linear-gradient(color-mix(in srgb, var(--ps-accent) 20%, transparent), color-mix(in srgb, var(--ps-accent) 20%, transparent));
    box-shadow: 0 0 0 2px var(--ps-accent), 0 14px 28px rgba(0, 0, 0, 0.32);
    transform-origin: 30% 50%;
    will-change: transform;
}

.ps-member-add,
.ps-member-drop {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    border: 1.5px dashed color-mix(in srgb, var(--ps-card-muted, var(--text-secondary)) 70%, transparent);
    background: transparent;
    color: var(--ps-card-muted, var(--text-secondary));
    font-weight: 600;
    cursor: pointer;
}

.ps-member-add span:first-child { font-size: 19px; font-weight: 700; line-height: 1; }
.ps-member-add:active { transform: scale(0.95); }
.ps-member-add:focus-visible,
.ps-member-drop:focus-visible { outline: 2px solid var(--ps-accent); outline-offset: 2px; }

.ps-member-drop {
    border-color: var(--ps-accent);
    color: var(--ps-card-ink, var(--text-primary));
    background: color-mix(in srgb, var(--ps-accent) 10%, transparent);
    animation: ps-drop-pulse 1.2s ease-in-out infinite;
}

@keyframes ps-drop-pulse {
    0%, 100% { background-color: color-mix(in srgb, var(--ps-accent) 8%, transparent); }
    50% { background-color: color-mix(in srgb, var(--ps-accent) 22%, transparent); }
}

.ps-member-input {
    width: 140px;
    padding: 0 14px;
    border: 1.5px solid var(--ps-accent);
    background: transparent;
    color: var(--ps-card-ink, var(--text-primary));
    outline: none;
}

.ps-member-input::placeholder { color: var(--ps-card-muted, var(--text-placeholder, var(--text-secondary))); }

/* Picking with a tap: the other teams are targets, the whole card is tappable. */
.ps-list--picking .ps-entry--pick-target { cursor: pointer; }

.ps-entry--team.ps-entry--drop {
    box-shadow: 0 0 0 2.5px var(--ps-accent), 0 8px 20px color-mix(in srgb, var(--ps-accent) 25%, transparent);
    transform: scale(1.015);
}

.ps-list--dragging { cursor: grabbing; }

.ps-entry--received { animation: ps-team-receive 420ms ease !important; }

@keyframes ps-team-receive {
    0% { box-shadow: 0 0 0 0 var(--ps-accent); }
    40% { box-shadow: 0 0 0 3px var(--ps-accent); }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.ps-member--new { animation: ps-member-join 420ms cubic-bezier(.2, .9, .3, 1.25) both; }
.ps-member--landed { animation: ps-member-land 380ms cubic-bezier(.2, .9, .3, 1.25); }

@keyframes ps-member-join {
    0% { opacity: 0; transform: scale(.4); }
    55% { opacity: 1; transform: scale(1.08, .92); }
    100% { opacity: 1; transform: none; }
}

@keyframes ps-member-land {
    0% { transform: scale(1.1, .88); }
    55% { transform: scale(.96, 1.05); }
    100% { transform: none; }
}

/* Turn screen: «Ходит» + the player, teammates as small avatars (PlayerSetup.renderTeamTurn). */
.ps-team-turn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 12px auto 16px;
    text-align: center;
    color: var(--text-primary);
}

.ps-team-turn[hidden] { display: none; }

.ps-team-turn-label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.ps-team-turn-player.rp-player { font-size: 24px; font-weight: 800; }

.ps-team-turn-others {
    display: inline-flex;
    gap: 4px;
    font-size: 17px;
    opacity: 0.9;
}

@media (prefers-reduced-motion: reduce) {
    .ps-member, .ps-entry--team, .ps-team-shuffle { transition: none; }
    .ps-member--new, .ps-member--landed, .ps-entry--received, .ps-member-drop, .ps-team-shuffle:active .rp-icon { animation: none !important; }
    .ps-entry--team.ps-entry--drop { transform: 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;
}
/* /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; }
/* /answer-marks.css */
/*
 * Answer marks: the one upright ✓ / ✕ pair for right and wrong answers in every game.
 * SVG masks instead of font glyphs, so the shape never depends on the game font
 * (no italic or slanted checks) and the colour always comes from the theme
 * (--rp-correct / --rp-wrong / --rp-*-ink, see COMMON/roomplay-palettes.html).
 *
 * Markup:  <span class="rp-mark rp-mark--correct" aria-hidden="true"></span>
 *          <span class="rp-mark rp-mark--wrong" aria-hidden="true"></span>
 * The mark is 1em and takes currentColor; size and colour come from the context.
 * Pseudo-elements reuse the same shapes through --rp-icon-check / --rp-icon-cross
 * (bare glyph) and --rp-icon-check-badge / --rp-icon-cross-badge (glyph in a circle).
 */
:root {
    --rp-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E");
    --rp-icon-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6.8 6.8l10.4 10.4M17.2 6.8L6.8 17.2'/%3E%3C/svg%3E");
    /* Filled circle with the check cut out, and a ring around the cross. */
    --rp-icon-check-badge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='%23fff'/%3E%3Cpath d='M7.2 12.4l3.2 3.2 6.4-6.6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Ccircle cx='12' cy='12' r='12' mask='url(%23m)'/%3E%3C/svg%3E");
    --rp-icon-cross-badge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10.8' stroke-width='2.4'/%3E%3Cpath d='M8.4 8.4l7.2 7.2M15.6 8.4l-7.2 7.2' stroke-width='2.4'/%3E%3C/svg%3E");
}

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

.rp-mark--wrong {
    -webkit-mask-image: var(--rp-icon-cross);
    mask-image: var(--rp-icon-cross);
}
/* /mode-cards.css */
/*
 * RoomPlay shared mode screen (#mode-screen .mode-cards): two cards, blob art on the left, title and
 * description on the right. Layout, sizes, states and motion are the same in every game; a game only
 * colours it through tokens in its *-theme.css (on :root, the game scope or one card, e.g. #mode-team):
 *   --mode-card-bg, --mode-card-ink, --mode-card-muted, --mode-card-border, --mode-card-accent (hover/focus),
 *   --mode-card-shadow, --mode-art-a (main blob), --mode-art-b (teammates / prop), --mode-art-ink (eyes),
 *   --mode-art-mouth.
 * Markup:  <div class="mode-cards"><div class="mode-card" id="mode-solo" role="button" tabindex="0">
 *            <div class="mode-card-icon"><span data-rp-mode-art="solo"></span></div>
 *            <div class="mode-card-title">…</div><div class="mode-card-desc">…</div></div>…</div>
 *   Art: solo | team | word | question from mode-art.js. Do not restyle these classes in a game.
 */
.mode-cards { display: flex; flex-direction: column; justify-content: center; gap: 16px; flex: 1; width: 100%; max-width: 420px; margin: 0 auto; padding: 16px 0; }
.mode-cards .mode-card {
  display: grid; grid-template-columns: 88px 1fr; column-gap: 16px; align-items: center;
  width: 100%; margin: 0; padding: 20px; border-radius: 20px;
  border: 2px solid var(--mode-card-border, transparent);
  background: var(--mode-card-bg, var(--bg-card));
  color: var(--mode-card-ink, var(--text-primary));
  box-shadow: var(--mode-card-shadow, none);
  font: inherit; text-align: left; cursor: pointer; appearance: none;
  transition: transform 160ms ease-out, border-color 160ms ease-out;
}
.mode-cards .mode-card:active { transform: scale(.98); }
.mode-cards .mode-card:focus-visible { outline: 3px solid var(--mode-card-accent, var(--game-accent, currentColor)); outline-offset: 3px; }
@media (hover: hover) { .mode-cards .mode-card:hover { transform: none; border-color: var(--mode-card-accent, var(--game-accent, currentColor)); box-shadow: var(--mode-card-shadow, none); } }
.mode-cards .mode-card-icon { grid-row: 1 / 3; width: 88px; height: 88px; margin: 0; font-size: 0; }
.mode-cards .mode-card-icon .mode-art { display: block; width: 88px; height: 88px; margin: 0; overflow: visible; }
.mode-cards .mode-card-title { align-self: end; margin: 0; font-family: inherit; font-size: 20px; font-weight: 800; line-height: 1.25; color: var(--mode-card-ink, var(--text-primary)); overflow-wrap: anywhere; }
.mode-cards .mode-card-desc { align-self: start; margin: 4px 0 0; font-size: 16px; line-height: 1.4; color: var(--mode-card-muted, var(--text-secondary)); opacity: 1; }
.mode-card .mode-fill-a { fill: var(--mode-art-a, var(--game-accent, #7c3aed)); }
.mode-card .mode-fill-b { fill: var(--mode-art-b, var(--accent-blue, #3b82f6)); }
.mode-card .mode-pupil, .mode-card .mode-mouth-fill { fill: var(--mode-art-ink, #17191f); }
.mode-card .mode-mouth { stroke: var(--mode-art-mouth, var(--mode-art-ink, #17191f)); }
@media (max-width: 360px) {
  .mode-cards .mode-card { grid-template-columns: 64px 1fr; column-gap: 12px; padding: 16px; }
  .mode-cards .mode-card-icon, .mode-cards .mode-card-icon .mode-art { width: 64px; height: 64px; }
}
@media (prefers-reduced-motion: no-preference) {
  /* Whole blob breathes, eyes included, from its feet; a prop (card, speech bubble) bobs beside it. */
  .mode-card .mode-blob { transform-box: fill-box; transform-origin: 50% 100%; animation: rp-mode-breathe 2.4s ease-in-out infinite; }
  .mode-card .mode-blob--late { animation-delay: -1.2s; }
  .mode-card .mode-blob--side { animation-delay: -.6s; }
  .mode-card .mode-prop { transform-box: fill-box; transform-origin: 0% 100%; animation: rp-mode-bob 2.4s ease-in-out -1.2s infinite; }
  .mode-card:active .mode-blob { animation: rp-mode-hop 320ms ease-out; }
  @keyframes rp-mode-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.04, .95); } }
  @keyframes rp-mode-bob { 0%, 100% { transform: none; } 50% { transform: translateY(-4px) rotate(-4deg); } }
  @keyframes rp-mode-hop { 0% { transform: scale(1.08, .88); } 55% { transform: translateY(-8%) scale(.96, 1.06); } 100% { transform: none; } }
}
/* /bunny/bn-theme.css */
/* Game Theme only. Palette: COMMON/roomplay-palettes.html / bunny («Импостер»).
   bg #090719, surface #19162F, accent #7735D5 (white text 6.5:1), secondary #5F87E6, glow edge #9D63E3.
   Accent text uses lighter tints (#B58CF0 lilac 6.7:1, #8EA9F0 blue 7.6:1 on the surface). */
:root {
  /* Answer and gender tones: COMMON/roomplay-palettes.html / bunny (correct, wrong, male, female). */
  --rp-correct: #30c883;
  --rp-correct-ink: #17191f;
  --rp-wrong: #fe7b90;
  --rp-wrong-ink: #17191f;
  --rp-male: #78a1ff;
  --rp-female: #f77cb0;
  --bg-primary: #090719;
  --bg-secondary: #19162f;
  --bg-card: #19162f;
  --text-primary: #ffffff;
  --text-secondary: #b7b2d1;
  --text-placeholder: #8a84aa;
  --accent-purple: #7735d5;
  --accent-purple-dark: #7735d5;
  --accent-blue: #5f87e6;
  --accent-pink: #7735d5;
  --accent-pink-dark: #7735d5;
  --accent-green: #7735d5;
  --bn-violet: #7735d5;
  --bn-blue: #5f87e6;
  --bn-edge: #9d63e3;
  --bn-lilac: #b58cf0;
  --bn-sky: #8ea9f0;
  --bn-glow: 0 0 20px rgba(119, 53, 213, .3);
  --onboarding-accent: #7735d5;
  --onboarding-accent-dark: #7735d5;
  --onboarding-shadow: transparent;
  --onboarding-shadow-hover: transparent;
  --settings-accent: #7735d5;
  --settings-accent-dark: #7735d5;
  --ps-accent: #7735d5;
}
html, body, .page-loader { background: var(--bg-primary); }
.loader-spinner { border-color: rgba(255, 255, 255, .1); border-top-color: var(--bn-edge); }

/* Actions: violet primary with white text, light outline secondary. */
.btn-play,
.btn-next-slide,
.btn-show-role,
.btn-next-player { color: #fff; background: var(--bn-violet); box-shadow: none; }
.btn-skip,
.btn-secondary { color: #fff; border-color: rgba(255, 255, 255, .5); }
.dot { background: rgba(255, 255, 255, .2); }
.dot.active { background: var(--bn-edge); }

/* Cards with the palette's violet edge glow. */
.cards-topic-header,
.instructions-card,
.topic-reminder { border: 1px solid rgba(157, 99, 227, .45); }
.cards-topic-name,
.topic-reminder-value,
.card-player-name,
.instructions-text.highlight { color: var(--bn-lilac); }
@media (hover: hover) { .cards-topic-refresh:hover:not(:disabled) { background: var(--bn-violet); } }
.card-front { background: var(--bg-card); border-color: var(--bn-edge); box-shadow: var(--bn-glow); }
.card-back { background: linear-gradient(135deg, var(--bn-violet) 0%, #4a2a9a 100%); border: 2px solid var(--bn-edge); box-shadow: var(--bn-glow); }
.word-item { border: 1px solid rgba(157, 99, 227, .35); }
.order-number { color: #fff; background: var(--bn-violet); }
.order-item { border: 1px solid rgba(95, 135, 230, .3); }

/* Exit confirmation: glowing card, violet confirm, white outline cancel.
   Colours go through the shared --rp-dialog-* tokens (assets/css/confirm-dialog.css). */
body {
  --rp-dialog-overlay: rgba(9, 7, 25, .86);
  --rp-dialog-bg: var(--bg-card);
  --rp-dialog-border: 1px solid var(--bn-edge);
  --rp-dialog-shadow: var(--bn-glow);
  --rp-dialog-text: var(--text-secondary);
  --rp-dialog-primary-bg: var(--bn-violet);
  --rp-dialog-secondary-border: rgba(255, 255, 255, .5);
  --rp-dialog-secondary-text: #fff;
}

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

/* Light motion, same rhythm as «Я никогда не» (cutout-theme.css). Decorative only; off under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  :root { --bn-press: 100ms; --bn-settle: 240ms; --bn-spring: cubic-bezier(.2, .9, .3, 1.25); }
  button:not(:disabled) {
    transition: scale var(--bn-settle) var(--bn-spring), translate var(--bn-settle) var(--bn-spring),
      background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  }
  button:not(:disabled):active { scale: .96; translate: 0 2px; transition-duration: var(--bn-press); }
  .btn-back:active { scale: .88; }
  .dot { transition: background-color 180ms ease, scale 180ms var(--bn-spring); }
  .dot.active { scale: 1.12; }
  .onboarding-slide.active .slide-icon { animation: bn-character-arrive 380ms var(--bn-spring) both; }

  #cards-screen.active .cards-topic-header { animation: bn-paper-arrive 280ms var(--bn-spring) both; }
  #cards-screen.active .card-container { animation: bn-paper-arrive 280ms var(--bn-spring) 60ms both; }
  .card-inner { transition-timing-function: var(--bn-spring); }
  .game-card.flipped .card-role { animation: bn-stamp-in 360ms var(--bn-spring) 260ms both; }

  #associations-screen.active .instructions-card,
  #voting-screen.active .instructions-card { animation: bn-paper-arrive 280ms var(--bn-spring) both; }
  #associations-screen.active .instructions-icon,
  #voting-screen.active .instructions-icon { animation: bn-nod 420ms ease-out 200ms both; }
  #associations-screen.active .order-item,
  #voting-screen.active .word-item { animation: bn-paper-arrive 280ms var(--bn-spring) both; }
  #associations-screen.active .order-item:nth-child(2), #voting-screen.active .word-item:nth-child(2) { animation-delay: 40ms; }
  #associations-screen.active .order-item:nth-child(3), #voting-screen.active .word-item:nth-child(3) { animation-delay: 80ms; }
  #associations-screen.active .order-item:nth-child(4), #voting-screen.active .word-item:nth-child(4) { animation-delay: 120ms; }
  #associations-screen.active .order-item:nth-child(n+5), #voting-screen.active .word-item:nth-child(n+5) { animation-delay: 160ms; }
  .confirm-dialog-overlay.active .confirm-dialog-modal { animation: bn-paper-arrive 280ms var(--bn-spring); }
}
@keyframes bn-character-arrive { from { opacity: 0; scale: .82; rotate: -10deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes bn-nod { 0%, 100% { rotate: 0deg; } 35% { rotate: -8deg; } 70% { rotate: 5deg; } }
@keyframes bn-paper-arrive { from { opacity: 0; translate: 0 12px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes bn-stamp-in { from { opacity: 0; scale: 1.3; } to { opacity: 1; scale: 1; } }

/* Voting list: same violet edge as the other cards on the screen. */
.vote-item { border-color: rgba(95, 135, 230, .3); }
@media (hover: hover) { .vote-item:not(.checked):hover { border-color: var(--bn-edge); } }
.vote-item:focus-visible { outline: 2px solid var(--bn-edge); outline-offset: 2px; }
/* Mode screen: violet and blue blobs, lilac edge on hover/focus; shared layout in mode-cards.css, art from mode-art.js; only the --mode-* tokens are set here. */
:root { --mode-card-border: rgba(95, 135, 230, .3); --mode-card-accent: var(--bn-edge); --mode-art-a: var(--bn-violet); --mode-art-b: var(--bn-blue); --mode-art-ink: #17132e; --mode-art-mouth: #fff; }
#mode-question { --mode-art-a: var(--bn-blue); --mode-art-b: var(--bn-violet); }
.answers-question { border: 2px solid var(--bn-edge); box-shadow: var(--bn-glow); background: linear-gradient(135deg, #2a1757 0%, var(--bg-card) 100%); }
.order-answer { color: var(--bn-sky); }

/* «Сообщить об ошибке» sheet (../content-report.css) in the game palette; thumbs + flag on the back of the card. */
:root {
  --rp-report-surface: var(--bg-secondary);
  --rp-report-text: #ffffff;
  --rp-report-muted: var(--text-secondary);
  --rp-report-line: rgb(255 255 255 / 14%);
  --rp-report-chip: rgb(255 255 255 / 8%);
  --rp-report-accent: var(--bn-lilac);
  --rp-report-accent-ink: #17191f;
}
.game-card:not(.flipped) .rp-card-vote--in-card, .game-card.swiping .rp-card-vote--in-card { visibility: hidden; }
/* /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; }
}