/* /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%;
}
/* /truthordare/styles.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --accent-pink: #ff3b6f;
    --accent-pink-dark: #cc2f59;
    --accent-orange: #ff922b;
    --settings-accent: var(--accent-pink);
    --settings-accent-dark: var(--accent-pink-dark);
}

/* Back Button */

/* Bottom Section */
.bottom-section {
    padding: 20px 0;
    margin-top: auto;
}

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

.play-icon {
    font-size: 20px;
}

/* Secondary Button */
.btn-secondary {
    width: 100%;
    background: transparent;
    border: 2px solid var(--accent-pink);
    color: var(--text-primary);
    padding: 16px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 12px;
    transition: all 0.3s;
}

@media (hover: hover) {
    .btn-secondary:hover {
        background: rgba(255, 59, 111, 0.1);
    }
}

/* Players Screen */

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

/* Card Screen */
.question-progress {
    text-align: center;
    margin-bottom: 20px;
}

#question-counter {
    color: var(--text-secondary);
    font-size: 14px;
}

.card-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.statement-card {
    background: linear-gradient(135deg, var(--accent-pink) 0%, var(--accent-orange) 100%);
    border-radius: 24px;
    padding: 40px 30px;
    width: 100%;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 0 8px 40px rgba(255, 59, 111, 0.4);
    transition: all 0.3s ease;
    user-select: none;
}

.card-header {
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.card-text {
    font-size: 26px;
    font-weight: 700;
    color: white;
    line-height: 1.4;
}

.card-instruction {
    text-align: center;
    color: var(--text-secondary);
    font-size: 15px;
    margin-top: 24px;
    line-height: 1.5;
    max-width: 320px;
}

/* Card flip animation */
@keyframes cardFlip {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.95); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
}

.statement-card.flip {
    animation: cardFlip 0.4s ease;
}

/* Game Over Screen */
.gameover-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-align: center;
}

.gameover-icon {
    font-size: 80px;
    margin-bottom: 20px;
}

.gameover-subtitle {
    color: var(--text-secondary);
    font-size: 18px;
    margin-bottom: 40px;
    line-height: 1.5;
}

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

    .selector-label {
        font-size: 13px;
        margin-bottom: 10px;
    }

    .selector-options {
        gap: 8px;
    }

    .selector-btn {
        padding: 8px 14px;
        font-size: 12px;
    }

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

    .btn-secondary {
        padding: 14px;
        font-size: 14px;
    }

    #question-counter {
        font-size: 13px;
    }

    .settings-icon {
        font-size: 60px;
        margin-bottom: 16px;
    }

    .statement-card {
        min-height: 220px;
        padding: 28px 20px;
        border-radius: 20px;
    }

    .card-header {
        font-size: 14px;
        margin-bottom: 14px;
    }

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

    .card-instruction {
        font-size: 13px;
        margin-top: 18px;
    }

    .gameover-icon {
        font-size: 60px;
    }

    .gameover-subtitle {
        font-size: 16px;
    }

    .subtitle {
        font-size: 13px;
        margin-bottom: 16px;
    }

}

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

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

    .statement-card {
        min-height: 200px;
        padding: 24px 20px;
    }

    .card-text {
        font-size: 20px;
    }
}

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

    .screen {
        padding: 50px 40px;
    }

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

    .statement-card {
        min-height: 320px;
        padding: 50px 40px;
    }

    .card-text {
        font-size: 30px;
    }
}

/* Pack gallery — square, full-bleed illustrated covers */
#packs-screen {
    width: 100%;
    max-width: 520px;
    height: 100vh;
    height: var(--app-height, 100dvh);
    min-height: 0;
    margin: 0 auto;
    overflow: hidden;
}

#packs-screen .title {
    margin-bottom: 6px;
}

#packs-screen .subtitle {
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--text-secondary);
    text-align: center;
    font-size: 14px;
}

#packs-screen .packs-container {
    flex: 1 1 auto;
    min-height: 0;
    padding: 4px 2px 24px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

#packs-screen .bottom-section {
    position: relative;
    z-index: 10;
    flex: 0 0 auto;
    margin-top: 0;
    padding: 14px 0 0;
    background: linear-gradient(180deg, rgba(13, 19, 41, 0) 0, rgba(13, 19, 41, 0.96) 18px, #0d1329 100%);
}

/* Player avatars inside the question (PlayerAvatar chips replacing @) */
.card-text .rp-player { gap: 0.25em; }

/* Card in and out: dealt in from below with a tilt, flies off on «Готово», slides aside on «Другая карточка».
   Id-scoped to win over the theme's screen arrival (#card-screen.active .tod-card). */
@media (prefers-reduced-motion: no-preference) {
    #card-screen.active .tod-card.tod-card--enter { animation: tod-card-enter 460ms cubic-bezier(.2, .9, .3, 1.2) both; }
    #card-screen.active .tod-card.tod-card--leave { animation: tod-card-leave 260ms cubic-bezier(.5, 0, .75, .3) both; pointer-events: none; }
    #card-screen.active .tod-card.tod-card--leave-side { animation: tod-card-leave-side 260ms cubic-bezier(.5, 0, .75, .3) both; pointer-events: none; }
}
@keyframes tod-card-enter {
    0% { opacity: 0; transform: translateY(70px) rotate(-7deg) scale(.86); }
    60% { opacity: 1; transform: translateY(-6px) rotate(1.5deg) scale(1.02); }
    100% { opacity: 1; transform: none; }
}
@keyframes tod-card-leave {
    0% { opacity: 1; transform: none; }
    100% { opacity: 0; transform: translate(40%, -55%) rotate(14deg) scale(.82); }
}
@keyframes tod-card-leave-side {
    0% { opacity: 1; transform: none; }
    100% { opacity: 0; transform: translateX(-75%) rotate(-10deg) scale(.9); }
}
/* /packs.css */
/* ==================== */
/* Shared Pack Styles   */
/* ==================== */

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

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

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

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

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

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

.packs-illustrated-actions {
    position: relative;
    z-index: 5;
    flex: 0 0 auto;
    width: 100%;
    margin-top: 0;
    background: linear-gradient(180deg, rgba(13, 19, 41, 0) 0%, var(--bg-primary) 14px);
}

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

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

.screen.packs-screen-shell > .btn-back {
    position: absolute !important;
    z-index: 6;
    top: calc(20px + env(safe-area-inset-top, 0px)) !important;
    left: 12px !important;
    right: auto !important;
    width: 44px;
    height: 44px;
    margin: 0 !important;
    transform: none !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .packs-summary {
        padding: 10px;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.packs-section-title:first-child {
    margin-top: 0;
}
/* /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; }
/* /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; }
/* /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;
}
/* /truthordare/tod-theme.css */
/* Game Theme only. Palette: COMMON/roomplay-palettes.html / truthordare («Правда или действие»), owner palette
   2026-10-19: red #FF2350, crimson #9E153D, plum #5C0D3E, navy #002149.
   bg #002149 navy, surface #5C0D3E plum (alt #7A1A4F), accent #FF2350 red = truth side (fills carry dark ink #17191F:
   4.7:1; red text on dark uses the tint #FF7A93: 6.4:1 on bg, 5.4:1 on surface), secondary #9E153D crimson = dare side
   (fills carry white: 8.0:1; dare text on dark #FFC2CE). Muted text #C4B5CC: 8.2:1 on bg, 6.8:1 on surface. */
:root {
  --rp-correct: #8bdcad;
  --rp-correct-ink: #17191f;
  --rp-wrong: #feaeb7;
  --rp-wrong-ink: #17191f;
  --rp-male: #9eccfd;
  --rp-female: #ff9eb1;
  color-scheme: dark;
  --bg-primary: #002149;
  --bg-secondary: #5c0d3e;
  --bg-card: #5c0d3e;
  --text-primary: #ffffff;
  --text-secondary: #c4b5cc;
  --text-placeholder: #9a8fb0;
  --accent-pink: #ff2350;
  --accent-pink-dark: #9e153d;
  --accent-purple: #ff2350;
  --accent-purple-dark: #9e153d;
  --accent-blue: #ff2350;
  --accent-orange: #ff2350;
  --tod-accent: #ff2350;
  --tod-accent-deep: #9e153d;
  --tod-lilac: #9e153d;
  --tod-accent-text: #ff7a93;
  --tod-dare-ink: #ffffff;
  --tod-dare-text: #ffc2ce;
  --tod-surface: #5c0d3e;
  --tod-surface-alt: #7a1a4f;
  --tod-ink: #17191f;
  --onboarding-accent: #ff2350;
  --onboarding-accent-dark: #9e153d;
  --onboarding-shadow: transparent;
  --onboarding-shadow-hover: transparent;
  --settings-accent: #ff2350;
  --settings-accent-dark: #9e153d;
  --packs-accent: #ff2350;
  --packs-feedback-rgb: 255, 35, 80;
  --ps-accent: #ff2350;
}
html, body[data-rp-game="truthordare"], .page-loader { background: var(--bg-primary); }
.loader-spinner { border-color: rgba(255, 255, 255, .12); border-top-color: var(--tod-accent); }
.btn-back { color: #fff; }

/* Actions: pink primary with dark ink, lilac outline secondary. */
.btn-play,
.btn-next-slide { color: var(--tod-ink); background: var(--tod-accent); box-shadow: none; }
@media (hover: hover) {
  .btn-play:hover,
  .btn-next-slide:hover { background: var(--tod-accent-deep); box-shadow: none; }
}
.btn-play:disabled { color: var(--text-secondary); background: #7a1a4f; opacity: 1; }
.btn-skip,
.btn-additional-settings,
.btn-secondary { color: #fff; border-color: rgba(255, 122, 147, .6); background: transparent; }
@media (hover: hover) { .btn-secondary:hover { background: rgba(255, 122, 147, .08); } }
.dot { background: rgba(255, 122, 147, .25); }
.dot.active { background: var(--tod-accent); }
.slide-title,
.title { color: #fff; }
.slide-text,
.subtitle,
#question-counter,
.card-instruction,
.gameover-subtitle { color: var(--text-secondary); }

/* Player setup: dark surface rows. */
.ps-add-btn { color: #fff; border-color: var(--tod-accent); }
@media (hover: hover) { .ps-add-btn:hover { color: var(--tod-ink); background: var(--tod-accent); } }
.ps-entry { background: var(--tod-surface); }
.ps-icon--filled { background: var(--tod-accent); color: var(--tod-ink); }
.ps-icon--avatar { background: #7a1a4f; }
.ps-gender { background: #7a1a4f; }

/* Packs: illustrated covers stay; frame, selection and the bottom fade follow the palette. */
/* packs.js sets these inline from the game's accentColor, so they need !important. */
.packs-illustrated-grid { --packs-accent: #ff2350 !important; --packs-feedback-rgb: 255, 35, 80 !important; }
.packs-illustrated-actions { background: linear-gradient(180deg, rgba(0, 33, 73, 0) 0%, var(--bg-primary) 14px); }

#packs-screen .bottom-section { background: linear-gradient(180deg, rgba(0, 33, 73, 0) 0, rgba(0, 33, 73, .96) 18px, #002149 100%); }
.packs-summary { color: var(--text-secondary); background: var(--tod-surface); }
.packs-summary .summary-text { color: var(--text-secondary); }
.packs-summary .summary-text strong { color: var(--tod-accent-text); }

/* Settings popup and exit confirmation: surface sheets, pink action.
   Colours go through the shared --rp-dialog-* tokens (assets/css/confirm-dialog.css). */
:root {
  --rp-dialog-overlay: rgba(10, 10, 12, .8);
  --rp-dialog-bg: var(--tod-surface);
  --rp-dialog-border: 1px solid rgba(255, 122, 147, .12);
  --rp-dialog-text: var(--text-secondary);
  --rp-dialog-primary-bg: var(--tod-accent);
  --rp-dialog-primary-text: var(--tod-ink);
  --rp-dialog-secondary-border: rgba(255, 122, 147, .6);
  --rp-dialog-secondary-text: #fff;
  --rp-dialog-control-btn-bg: rgba(255, 122, 147, .12);
  --rp-dialog-toggle-bg: rgba(255, 122, 147, .1);
}

/* 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: 110px; margin-bottom: 8px; }
}
@media (max-height: 430px) {
  #onboarding-screen .slide-icon { width: 60px; margin-bottom: 4px; }
}

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

  .pack-card.packs-touch-press:not(.locked) { transform: scale(.965); transition-duration: var(--tod-press); }
  .pack-card.packs-touch-pop:not(.locked) { animation: tod-pop 320ms var(--tod-spring); }
  .pack-card.packs-touch-pop:not(.locked) .pack-art { animation: tod-nod 360ms ease-out; }

  #players-screen.active .ps-entry { animation: tod-paper-arrive 280ms var(--tod-spring) both; }
  #players-screen.active .ps-entry:nth-child(2) { animation-delay: 40ms; }
  #players-screen.active .ps-entry:nth-child(3) { animation-delay: 80ms; }
  #players-screen.active .ps-entry:nth-child(4) { animation-delay: 120ms; }
  #players-screen.active .ps-entry:nth-child(n+5) { animation-delay: 160ms; }

  #card-screen.active .statement-card { animation: tod-paper-arrive 280ms var(--tod-spring) both; }
  #card-screen.active .statement-card::after { animation: tod-mark-in 360ms var(--tod-spring) 120ms both; }
  .statement-card.tod-swap-out .card-text { animation: tod-text-out 130ms ease-in both; }
  .statement-card.tod-swap-in .card-text { animation: tod-text-in 240ms var(--tod-spring) both; }
  #card-screen.active .card-instruction { animation: tod-paper-arrive 280ms var(--tod-spring) 120ms both; }

  #gameover-screen.active .gameover-icon { animation: tod-nod 420ms ease-out 200ms both; }
  #gameover-screen.active .title { animation: tod-stamp-in 360ms var(--tod-spring) both; }
  .confirm-dialog-overlay.active .confirm-dialog-modal,
  .settings-popup-overlay.active .settings-popup-modal { animation: tod-paper-arrive 280ms var(--tod-spring); }
}
@keyframes tod-character-arrive { from { opacity: 0; scale: .82; rotate: -8deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes tod-pop { 0% { transform: scale(.965); } 55% { transform: scale(1.018); } 100% { transform: scale(1); } }
@keyframes tod-nod { 0%, 100% { rotate: 0deg; } 35% { rotate: -8deg; } 70% { rotate: 5deg; } }
@keyframes tod-paper-arrive { from { opacity: 0; translate: 0 12px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes tod-text-out { to { opacity: 0; translate: -18px 0; } }
@keyframes tod-text-in { from { opacity: 0; translate: 22px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes tod-stamp-in { from { opacity: 0; scale: 1.3; } to { opacity: 1; scale: 1; } }
@keyframes tod-mark-in { from { opacity: 0; scale: 1.3; rotate: -12deg; } to { opacity: .4; scale: 1; rotate: 0deg; } }

/* Pack choice arrow: the light red tint #FF7A93 (the crimson secondary is too dark for the ink outline). */
:root {
    --packs-cue-color: #ff7a93;
}

/* «Сообщить об ошибке»: flag in the card's top-right corner, report sheet in the game palette. */
:root {
  --rp-report-surface: var(--tod-surface);
  --rp-report-text: #fff;
  --rp-report-muted: var(--text-secondary);
  --rp-report-line: rgba(255, 122, 147, .2);
  --rp-report-chip: rgba(255, 122, 147, .08);
  --rp-report-accent: var(--tod-accent);
  --rp-report-accent-ink: var(--tod-ink);
  --rp-report-error: var(--rp-wrong);
  --rp-report-flag: rgba(255, 122, 147, .45);
}
.tod-report-flag { position: absolute; top: 4px; right: 4px; z-index: 2; }
.statement-card:has(.tod-card-vote) { padding-bottom: 56px; }
.tod-card-vote { position: absolute; left: 0; right: 0; bottom: 4px; z-index: 2; }

/* Players: a short hint about the sex badge, the cards use it. */
.tod-gender-hint { margin: -6px 0 14px; font-size: 14px; }

/* Turn screen: whose turn, two big choices. Truth is red, dare is crimson. */
.tod-turn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: 100%; max-width: 440px; margin: 0 auto; padding: 0 4px 24px; text-align: center; }
.tod-turn-kicker { margin: 0; color: var(--tod-accent-text); font-size: 14px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.tod-turn-player { color: #fff; font-size: 34px; font-weight: 900; line-height: 1.15; overflow-wrap: anywhere; }
.tod-turn-player .rp-player { gap: .3em; }
.tod-turn-hint { margin: 0 0 8px; color: var(--text-secondary); font-size: 16px; }
.tod-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.tod-choice-btn { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; min-height: 172px; padding: 18px 10px; border: 0; border-radius: 24px; color: var(--tod-ink); font: inherit; font-size: 21px; font-weight: 900; cursor: pointer; }
.tod-choice-btn--truth { background: var(--tod-accent); }
.tod-choice-btn--dare { background: var(--tod-lilac); color: var(--tod-dare-ink); }
.tod-choice-mark { font-size: 76px; line-height: .9; font-weight: 900; opacity: .9; }
.tod-random { width: 100%; }

/* The card: kind on top, the player, the text; flag and votes inside the card. */
.tod-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; min-height: 260px; padding: 26px 22px 64px; background: var(--tod-surface); border: 1px solid rgba(255, 122, 147, .12); border-top: 6px solid var(--tod-accent); border-radius: 24px; box-shadow: 0 14px 36px rgba(0, 0, 0, .4); text-align: left; align-items: stretch; justify-content: center; }
.tod-card.tod-card--dare { background: var(--tod-lilac); border-top-color: var(--tod-accent); }
.tod-card::after { content: "?"; position: absolute; right: 14px; bottom: -22px; font-size: 120px; font-weight: 900; line-height: 1; color: var(--tod-accent-text); opacity: .22; pointer-events: none; }
.tod-card.tod-card--dare::after { content: '!'; color: var(--tod-dare-text); }
.tod-card-kind { position: relative; z-index: 1; margin: 0; color: var(--tod-accent-text); font-size: 14px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.tod-card--dare .tod-card-kind { color: var(--tod-dare-text); }
/* Premium sample card: a small dark chip with a crown names the pack; the card gets a soft pink glow. */
.tod-card-teaser { align-self: flex-start; margin: 0; }
.tod-card-teaser[hidden], .tod-upgrade[hidden] { display: none; }
/* «Хотите перейти на уровень выше?» uses the shared pearlescent premium button (premium-cta.css). */
#card-screen .tod-upgrade { margin: 14px 0 0; }

.tod-card-player { position: relative; z-index: 1; color: var(--text-secondary); font-size: 16px; font-weight: 700; }
.tod-card .card-text { position: relative; z-index: 1; color: #fff; font-size: 24px; font-weight: 800; line-height: 1.3; text-align: left; height: auto; }
.tod-card .card-text .rp-player { gap: .25em; }
.tod-card--empty .card-text { color: var(--text-secondary); font-size: 18px; font-weight: 600; }
.tod-pairs { display: block; margin-bottom: 6px; color: var(--tod-accent-text); font-size: .78em; }
.tod-report-flag { position: absolute; top: 4px; right: 4px; z-index: 2; }
.tod-card-vote { position: absolute; left: 0; right: 0; bottom: 4px; z-index: 2; }
.tod-card--empty .tod-card-vote, .tod-card--empty .tod-report-flag { visibility: hidden; }
#card-screen .bottom-section { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
/* Card actions in the shape of the cards and the Правда / Действие buttons, not generic pills. */
#card-screen .bottom-section .btn-secondary,
#card-screen .bottom-section .btn-play { min-height: 64px; margin: 0; padding: 10px 12px; border-radius: 20px; font-size: 16px; font-weight: 900; line-height: 1.15; letter-spacing: 0; }
#card-screen .bottom-section .btn-secondary { color: #fff; background: var(--tod-surface); border: 1px solid rgba(255, 122, 147, .22); }
@media (hover: hover) { #card-screen .bottom-section .btn-secondary:hover { background: var(--tod-surface-alt); } }
/* The display font of the screen titles («Наборы») on the game's own buttons and the player's name. */
.tod-choice-btn, .tod-random, #card-screen .bottom-section .btn-secondary, #card-screen .bottom-section .btn-play, .tod-turn-player {
  font-family: Unbounded, Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 800; letter-spacing: -.02em;
}
@media (max-width: 360px) {
  .tod-choice-btn { min-height: 140px; font-size: 18px; }
  .tod-choice-mark { font-size: 60px; }
  .tod-card .card-text { font-size: 21px; }
}
@media (max-height: 640px) {
  .tod-choice-btn { min-height: 120px; }
  .tod-turn-player { font-size: 28px; }
}

/* «Случайно»: every player is shown and a highlight runs over them; the big name and the choice appear when it stops. */
.tod-roulette { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; padding: 6px 0; }
.tod-roulette[hidden] { display: none; }
.tod-roulette-chip { display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 999px; background: var(--tod-surface); border: 2px solid rgba(255, 122, 147, .14); color: var(--text-secondary); font-size: 18px; font-weight: 800; transition: background-color 90ms ease, color 90ms ease, border-color 90ms ease, scale 120ms var(--tod-spring, ease); }
.tod-roulette-chip .rp-player { gap: .35em; }
.tod-roulette-chip--out { opacity: .35; }
.tod-roulette-chip--on { background: var(--tod-accent); border-color: var(--tod-accent); color: var(--tod-ink); scale: 1.08; box-shadow: 0 0 22px rgba(255, 35, 80, .45); }
.tod-roulette--done .tod-roulette-chip:not(.tod-roulette-chip--on) { opacity: .2; transition: opacity 300ms ease; }
.tod-roulette--done .tod-roulette-chip--on { animation: tod-roulette-stop 520ms var(--tod-spring, ease) both; }
.tod-turn .tod-turn-hint, .tod-turn .tod-choice, .tod-turn .tod-random { transition: opacity 220ms ease, translate 260ms var(--tod-spring, ease); }
.tod-turn.tod-spinning .tod-turn-player { display: none; }
.tod-turn.tod-spinning .tod-turn-hint, .tod-turn.tod-spinning .tod-choice, .tod-turn.tod-spinning .tod-random { opacity: 0; translate: 0 14px; pointer-events: none; }
.tod-turn.tod-spinning { cursor: pointer; }
@keyframes tod-roulette-stop { 0% { scale: 1.08; } 40% { scale: 1.3; } 100% { scale: 1.12; } }

@media (prefers-reduced-motion: no-preference) {
  #turn-screen.active .tod-turn-player { animation: tod-stamp-in 360ms var(--tod-spring) both; }
  #turn-screen.active .tod-choice-btn { animation: tod-paper-arrive 280ms var(--tod-spring) both; }
  #turn-screen.active .tod-choice-btn--dare { animation-delay: 60ms; }
  #turn-screen.active .tod-choice-mark { animation: tod-nod 420ms ease-out 240ms both; }
  #card-screen.active .tod-card { animation: tod-paper-arrive 280ms var(--tod-spring) both; }
  .tod-card.tod-swap-out .card-text { animation: tod-text-out 130ms ease-in both; }
  .tod-card.tod-swap-in .card-text { animation: tod-text-in 240ms var(--tod-spring) both; }
}

/* Depth (owner 2026-10-19: «не хватает глубины, мб градиентов»): a plum glow over the navy
   background, lit gradients with an inner top highlight and a coloured glow on the filled
   buttons, cards lifted with a soft shadow. Ends stay #002149 so the screens' bottom fades match. */
html, body[data-rp-game="truthordare"] {
  background:
    radial-gradient(120% 55% at 50% -12%, rgba(158, 21, 61, .55) 0%, rgba(92, 13, 62, .35) 38%, transparent 70%),
    radial-gradient(80% 40% at 110% 100%, rgba(255, 35, 80, .14) 0%, transparent 70%),
    var(--bg-primary);
  background-attachment: fixed;
}
.btn-play,
.btn-next-slide,
.tod-choice-btn--truth {
  background: linear-gradient(165deg, #ff5c7d 0%, #ff2350 48%, #e0103f 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .32), inset 0 -4px 0 rgba(0, 0, 0, .14), 0 12px 26px rgba(255, 35, 80, .32);
}
@media (hover: hover) {
  .btn-play:hover,
  .btn-next-slide:hover { background: linear-gradient(165deg, #ff6d8a 0%, #ff3a62 48%, #ea1a48 100%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .32), inset 0 -4px 0 rgba(0, 0, 0, .14), 0 14px 30px rgba(255, 35, 80, .4); }
}
.btn-play:disabled { background: #7a1a4f; box-shadow: none; }
.tod-choice-btn--dare {
  background: linear-gradient(165deg, #c62652 0%, #9e153d 50%, #7a0e2f 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .22), inset 0 -4px 0 rgba(0, 0, 0, .2), 0 12px 26px rgba(158, 21, 61, .45);
}
.tod-choice-mark { text-shadow: 0 4px 0 rgba(0, 0, 0, .14); }
.tod-card {
  background: linear-gradient(165deg, #761a52 0%, #5c0d3e 52%, #470a30 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 22px 44px rgba(0, 0, 0, .45), 0 4px 0 rgba(0, 0, 0, .18);
}
.tod-card.tod-card--dare { background: linear-gradient(165deg, #c62652 0%, #9e153d 55%, #7a0e2f 100%); }
#card-screen .bottom-section .btn-secondary {
  background: linear-gradient(165deg, #761a52 0%, #5c0d3e 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 10px 22px rgba(0, 0, 0, .3);
}

.tod-roulette-chip { background: linear-gradient(165deg, #6a1448, #5c0d3e); box-shadow: 0 6px 14px rgba(0, 0, 0, .3); }
.tod-roulette-chip--on { background: linear-gradient(165deg, #ff5c7d, #ff2350 55%, #e0103f); }
.tod-turn-player { text-shadow: 0 4px 18px rgba(255, 35, 80, .35); }
.ps-entry { background: linear-gradient(165deg, #6a1448 0%, #5c0d3e 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 18px rgba(0, 0, 0, .28); }

/* Fonts (owner 2026-10-20): the card text takes the display font, the card actions the body font. */
#card-screen .tod-card .card-text { font-family: Unbounded, Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.28; }
#card-screen.screen .bottom-section .btn-secondary, #card-screen.screen .bottom-section .btn-play { font-family: inherit; font-size: 17px; font-weight: 800; letter-spacing: 0; }
/* /content-report.css */
/*
 * Content report sheet (client/assets/js/content-report.js) and the small flag button
 * games put on their card. Shared component: games only set the --rp-report-* tokens.
 * Defaults sit in :where(:root) (zero specificity), so a game theme's :root tokens win whether
 * its stylesheet loads before or after this one.
 */
:where(:root) {
    --rp-report-surface: #1f2438;
    --rp-report-text: #ffffff;
    --rp-report-muted: #a7aec8;
    --rp-report-line: rgba(255, 255, 255, 0.14);
    --rp-report-chip: rgba(255, 255, 255, 0.08);
    --rp-report-accent: #ff3b6f;
    --rp-report-accent-ink: #ffffff;
    --rp-report-error: var(--rp-wrong, #ff8a9a);
    --rp-report-radius: 24px;
    --rp-report-button-radius: 30px;
    --rp-report-flag: rgba(255, 255, 255, 0.55);
}

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

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

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

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

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

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

/* Like / dislike under the card (ContentReport.attachVotes): quiet thumbs, filled when chosen. */
.rp-card-vote[hidden] { display: none; }
.rp-card-vote {
    display: flex;
    justify-content: center;
    gap: 6px;
}
.rp-card-vote__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--rp-report-flag);
    font-size: 20px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 150ms ease, background-color 150ms ease, transform 150ms ease;
}
.rp-card-vote__btn--dislike .rp-icon { transform: rotate(180deg); }
.rp-card-vote__btn--report { margin-left: 6px; color: var(--rp-report-flag); font-size: 18px; }
.rp-card-vote__btn[aria-pressed="true"] { color: var(--rp-report-accent); }
.rp-card-vote__btn:active { transform: scale(0.88); background: rgba(255, 255, 255, 0.08); }
.rp-card-vote__btn:focus-visible { outline: 2px solid var(--rp-report-accent); outline-offset: 2px; }
@media (hover: hover) { .rp-card-vote__btn:hover:not([aria-pressed="true"]) { color: var(--rp-report-text); } }
/* Thumbs + flag as the last row inside a content card (word, task, location): one look in every game.
   The game sets --rp-report-flag on its card to a muted tone of the card's ink (light cards need a dark one). */
.rp-card-vote--in-card { margin: 14px -8px -14px; }
.rp-card-vote--in-card .rp-card-vote__btn--report { margin-left: 0; }
@media (prefers-reduced-motion: no-preference) {
    .rp-card-vote__btn[aria-pressed="true"] .rp-icon { animation: rp-card-vote-pop 260ms ease-out; }
    .rp-card-vote__btn--dislike[aria-pressed="true"] .rp-icon { animation-name: rp-card-vote-pop-down; }
}
@keyframes rp-card-vote-pop { 0% { transform: scale(0.7); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes rp-card-vote-pop-down { 0% { transform: rotate(180deg) scale(0.7); } 60% { transform: rotate(180deg) scale(1.18); } 100% { transform: rotate(180deg) scale(1); } }
/* /game-motion.css */
/*
 * Shared RoomPlay game motion layer (docs/NEW_GAME_GUIDELINES.md, «Анимации»).
 * The same light motion the older games carry in their own theme files (fs-, td-, wm-, hk-…):
 * springy button press/settle, active dot, onboarding character arrive, pack pop/nod, dialogs
 * arriving, plus utility classes for game blocks. Blocks that the game re-renders on every state
 * update get the classes from shared/client/motion-once.ts, so they play once per round, not on
 * every vote. Everything sits inside prefers-reduced-motion: no-preference.
 * Non-game screens (room, join by code, payment) set body[data-rp-press] instead: they get only the
 * button press and the dialog arrival, not the game screen/onboarding/pack rules.
 *
 * Utility classes (added by motionOnce() or written in the markup of a block shown once):
 *   .rp-m-arrive   card/panel slides up into place («paper arrive»)
 *   .rp-m-stagger  its children pop in one after another (answers, options, board rows)
 *   .rp-m-stamp    lands like a stamp (verdicts, room code, «верно/неверно»)
 *   .rp-m-nod      a short nod (winner art, an icon that just changed)
 *   .rp-m-answer   a chosen answer button gives a small bounce
 */
@media (prefers-reduced-motion: no-preference) {
  :root {
    --rp-m-press: 100ms;
    --rp-m-settle: 240ms;
    --rp-m-spring: cubic-bezier(.2, .9, .3, 1.25);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (prefers-reduced-motion: reduce) {
    .rp-gh-timer--low { animation: none; }
}