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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .onboarding-buttons {
        gap: 12px;
    }

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

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

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

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

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

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

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

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

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

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

@media (prefers-reduced-motion: reduce) {
    .rp-toast,
    .rp-toast.is-visible {
        transform: translate(-50%, 0);
        transition: opacity 0.15s linear, visibility 0s linear 0.15s;
    }
    .rp-toast.is-visible { transition: opacity 0.15s linear, visibility 0s; }
}
/* /spy/styles.css */
/* Game content and explicit overrides. Shared defaults: ../game-ui.css. */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* Explicit game theme; omitted tokens inherit RoomPlay. */
:root {
    --accent-orange: #f59e0b;
    --accent-orange-dark: #d97706;
    --onboarding-accent: var(--accent-orange);
    --onboarding-accent-dark: var(--accent-orange-dark);
    --onboarding-shadow: rgba(245, 158, 11, 0.3);
    --onboarding-shadow-hover: rgba(245, 158, 11, 0.4);
    --accent-pink: #ff3b6f;
    --accent-pink-dark: #cc2f59;
}
.screen {
    flex-direction: column;
    min-height: 100vh;
    min-height: var(--app-height, 100dvh);
    padding: 40px 24px;
    padding-top: calc(40px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.title {
    margin-bottom: 30px;
}
.btn-back {
    top: calc(40px + env(safe-area-inset-top, 0px));
    left: 24px;
}
.players-list {
    padding-bottom: 20px;
}
.bottom-section {
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.btn-play {
    background: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-orange-dark) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3);
}

@media (hover: hover) {
    .btn-play:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 25px rgba(245, 158, 11, 0.4);
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.card-location {
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.card-location.spy {
    display: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Show Locations Button */
.btn-show-locations {
    width: 100%;
    background: var(--bg-card);
    border: 2px solid var(--accent-orange);
    color: var(--accent-orange);
    padding: 16px;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 20px;
}

@media (hover: hover) {
    .btn-show-locations:hover {
        background: var(--accent-orange);
        color: white;
    }
}

/* Locations Overlay */
.locations-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 15, 31, 0.95);
    z-index: 1000;
    flex-direction: column;
    animation: fadeIn 0.3s ease;
}

.locations-overlay.active {
    display: flex;
}

.overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    flex-shrink: 0;
}

.overlay-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.overlay-close {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 28px;
    cursor: pointer;
    padding: 8px;
    line-height: 1;
}

.locations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 0 24px 24px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.location-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.location-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 12px;
    background: var(--bg-card);
}

.location-card span {
    font-size: 11px;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.3;
}


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

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

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

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

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

    .card-buttons {
        width: 240px;
    }

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

    .card-location {
        font-size: 14px;
    }

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

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

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

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

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

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

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

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

    .order-list {
        gap: 8px;
    }

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

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

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

    .locations-grid {
        gap: 8px;
        padding: 0 12px 12px;
    }

    .location-card span {
        font-size: 10px;
    }

    .overlay-header {
        padding: 16px 12px;
    }
}

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

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

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

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

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

}

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

    .screen {
        padding: 50px 40px;
    }

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

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

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

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

    .locations-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* PlayerAvatar chips (player-avatar.css) */
.card-player-name {
    display: flex;
    justify-content: center;
    max-width: 100%;
}

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

/* Voting: tap the player the group pointed at; a caught spy then names the location.
   The screen scrolls as a whole, since the player list can be long. */
#voting-screen { overflow-y: auto; }
#voting-screen .instructions-card { margin-bottom: 16px; }

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

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

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

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

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

.spy-guess { margin-bottom: 16px; text-align: center; }
.spy-guess[hidden] { display: none; }
.spy-guess-question { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--text-primary); }
.spy-guess-buttons { display: flex; gap: 12px; }
.spy-guess-buttons > button { flex: 1; }

/* Results: who won, who the spy was and where everyone was. */
.results-reason { margin: -16px 0 24px; text-align: center; color: var(--text-secondary); font-size: 16px; }
.results-reveal { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.results-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-card);
    border-radius: 12px;
}
.results-label { color: var(--text-secondary); font-size: 14px; }
.results-value { color: var(--text-primary); font-size: 17px; font-weight: 700; text-align: right; }
/* /answer-marks.css */
/*
 * Answer marks: the one upright ✓ / ✕ pair for right and wrong answers in every game.
 * SVG masks instead of font glyphs, so the shape never depends on the game font
 * (no italic or slanted checks) and the colour always comes from the theme
 * (--rp-correct / --rp-wrong / --rp-*-ink, see COMMON/roomplay-palettes.html).
 *
 * Markup:  <span class="rp-mark rp-mark--correct" aria-hidden="true"></span>
 *          <span class="rp-mark rp-mark--wrong" aria-hidden="true"></span>
 * The mark is 1em and takes currentColor; size and colour come from the context.
 * Pseudo-elements reuse the same shapes through --rp-icon-check / --rp-icon-cross
 * (bare glyph) and --rp-icon-check-badge / --rp-icon-cross-badge (glyph in a circle).
 */
:root {
    --rp-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E");
    --rp-icon-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6.8 6.8l10.4 10.4M17.2 6.8L6.8 17.2'/%3E%3C/svg%3E");
    /* Filled circle with the check cut out, and a ring around the cross. */
    --rp-icon-check-badge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='%23fff'/%3E%3Cpath d='M7.2 12.4l3.2 3.2 6.4-6.6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Ccircle cx='12' cy='12' r='12' mask='url(%23m)'/%3E%3C/svg%3E");
    --rp-icon-cross-badge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10.8' stroke-width='2.4'/%3E%3Cpath d='M8.4 8.4l7.2 7.2M15.6 8.4l-7.2 7.2' stroke-width='2.4'/%3E%3C/svg%3E");
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (prefers-reduced-motion: reduce) {
    .ps-member, .ps-entry--team, .ps-team-shuffle { transition: none; }
    .ps-member--new, .ps-member--landed, .ps-entry--received, .ps-member-drop, .ps-team-shuffle:active .rp-icon { animation: none !important; }
    .ps-entry--team.ps-entry--drop { transform: none; }
}
/* /player-avatar.css */
/* PlayerAvatar — «avatar + name» chip for one-phone games (player-avatar.js).
   Sizes follow the surrounding font, so the same markup works in a turn title and in a result row.
   The emoji/initial tile uses the game theme: --ps-accent (player setup accent) or --accent. */

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

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

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

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

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

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

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

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

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

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

.rp-player--stack .rp-player-name {
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
}
/* /spy/sp-theme.css */
/* Game Theme only. Palette: COMMON/roomplay-palettes.html / spy («Шпион»), light dossier look.
   bg #F8F7F2 paper (ink #17191F 16.4:1), surface #FFFFFF with a #D8D5CB hairline and a 6px red #B9232E left stripe,
   accent #B9232E (white text 6.3:1; as text 5.9:1 on paper, 6.3:1 on white), secondary #25262A charcoal (white 15.1:1).
   Muted text #55554F: 7.0:1 on paper, 7.5:1 on white. Placeholder #6B6A62: 5.4:1 on white.
   The revealed role card is charcoal with white type; the spy role is a red stamp with white text. */
:root {
  /* Answer and gender tones: COMMON/roomplay-palettes.html / spy (correct, wrong, male, female). */
  --rp-correct: #317905;
  --rp-correct-ink: #ffffff;
  --rp-wrong: #b8222d;
  --rp-wrong-ink: #ffffff;
  --rp-male: #1d5a94;
  --rp-female: #a3245f;
  color-scheme: light;
  --bg-primary: #f8f7f2;
  --bg-secondary: #f1efe7;
  --bg-card: #ffffff;
  --text-primary: #17191f;
  --text-secondary: #55554f;
  --text-placeholder: #6b6a62;
  --accent-orange: #b9232e;
  --accent-orange-dark: #b9232e;
  --accent-pink: #b9232e;
  --accent-pink-dark: #b9232e;
  --accent-purple: #b9232e;
  --accent-purple-dark: #b9232e;
  --accent-blue: #25262a;
  --sp-ink: #17191f;
  --sp-red: #b9232e;
  --sp-red-deep: #9a1d26;
  --sp-charcoal: #25262a;
  --sp-line: #d8d5cb;
  --sp-paper: #f8f7f2;
  --sp-paper-deep: #f1efe7;
  --onboarding-accent: #b9232e;
  --onboarding-accent-dark: #b9232e;
  --onboarding-shadow: transparent;
  --onboarding-shadow-hover: transparent;
  --settings-accent: #b9232e;
  --settings-accent-dark: #b9232e;
  --packs-accent: #b9232e;
  --packs-feedback-rgb: 185, 35, 46;
  --ps-accent: #b9232e;
}
html, body[data-rp-game="spy"], .page-loader { background: var(--bg-primary); }
body[data-rp-game="spy"] { color: var(--sp-ink); }
.loader-spinner { border-color: rgba(23, 25, 31, .14); border-top-color: var(--sp-red); }
.btn-back { color: var(--sp-ink); }

/* Actions: red primary with white text; charcoal outline secondary. */
.btn-play,
.btn-next-slide,
.btn-show-role,
.btn-next-player { color: #fff; background: var(--sp-red); box-shadow: none; }
@media (hover: hover) {
  .btn-play:hover,
  .btn-next-slide:hover { background: var(--sp-red-deep); box-shadow: none; }
}
.btn-play:disabled { color: var(--text-secondary); background: var(--sp-paper-deep); opacity: 1; }
.btn-skip,
.btn-secondary { color: var(--sp-ink); border-color: var(--sp-charcoal); background: transparent; }
@media (hover: hover) { .btn-secondary:hover { color: #fff; background: var(--sp-charcoal); border-color: var(--sp-charcoal); } }
.dot { background: rgba(23, 25, 31, .2); }
.dot.active { background: var(--sp-red); }
.slide-title,
.title { color: var(--sp-ink); }
.slide-text,
.swipe-hint,
.order-label { color: var(--text-secondary); }

/* Player setup: white dossier rows. */
.ps-add-btn { color: var(--sp-ink); border-color: var(--sp-red); background: #fff; }
@media (hover: hover) { .ps-add-btn:hover { color: #fff; background: var(--sp-red); } }
.ps-entry { background: #fff; border: 1px solid var(--sp-line); box-shadow: inset 4px 0 0 var(--sp-red); }
.ps-input { color: var(--sp-ink); }
.ps-remove { color: var(--text-secondary); }
@media (hover: hover) { .ps-remove:hover { color: var(--sp-red); } }
.ps-icon--avatar { color: var(--sp-ink); background: var(--sp-paper-deep); }
.ps-icon--filled { background: var(--sp-red); }
.ps-icon--empty { background: var(--sp-paper-deep); border-color: var(--text-secondary); }
.ps-gender { color: var(--text-secondary); background: var(--sp-paper-deep); }

/* Role cards: the front is a dossier sheet with a red stripe, the back is the charcoal secret. */
.card-front { background: #fff; border: 1px solid var(--sp-line); border-left: 6px solid var(--sp-red); box-shadow: 0 10px 28px rgba(37, 38, 42, .12); }
.card-title { color: var(--text-secondary); text-transform: uppercase; letter-spacing: .08em; font-size: 13px; font-weight: 700; }
.card-player-name { color: var(--sp-red); }
.card-hint { color: var(--text-secondary); }
.card-back { background: var(--sp-charcoal); border-left: 6px solid var(--sp-red); box-shadow: 0 10px 28px rgba(37, 38, 42, .2); }
.card-location { color: #c9c8c2; }
.card-role { color: #fff; }
.card-role.spy { padding: 10px 18px; border: 3px solid #fff; border-radius: 10px; color: #fff; background: var(--sp-red); rotate: -4deg; text-transform: uppercase; letter-spacing: .04em; }

/* Instructions and the speaking order: dossier sheets. */
.instructions-card { background: #fff; border: 1px solid var(--sp-line); border-left: 6px solid var(--sp-red); }
.instructions-text { color: var(--text-secondary); }
.instructions-text.highlight { color: var(--sp-red); }
.order-item { background: #fff; border: 1px solid var(--sp-line); }
.order-number { color: #fff; background: var(--sp-charcoal); }
.order-name { color: var(--sp-ink); }
.btn-show-locations { color: var(--sp-red); background: #fff; border-color: var(--sp-red); }
@media (hover: hover) { .btn-show-locations:hover { color: #fff; background: var(--sp-red); } }

/* Locations overlay: paper sheet. */
.locations-overlay { background: rgba(248, 247, 242, .98); }
.overlay-title,
.overlay-close { color: var(--sp-ink); }
.location-card img { background: #fff; border: 1px solid var(--sp-line); }
.location-card span { color: var(--text-secondary); }

/* Finale panel (shared ru-party-finale.js): dossier sheet. */
body[data-rp-game="spy"] #roomplay-local-finale { color: var(--sp-ink); background: #fff; border: 1px solid var(--sp-line); border-left: 6px solid var(--sp-red); }
body[data-rp-game="spy"] #roomplay-local-finale p { color: var(--text-secondary); }
body[data-rp-game="spy"] #roomplay-local-finale .rplf-kicker { color: var(--sp-red); }
body[data-rp-game="spy"] #roomplay-local-finale .rplf-primary { color: #fff; background: var(--sp-red); }
body[data-rp-game="spy"] #roomplay-local-finale .rplf-secondary { color: var(--sp-ink); background: var(--sp-paper-deep); }

/* Exit confirmation (and the settings popup if a host page opens one): white sheets with dark ink.
   Colours go through the shared --rp-dialog-* tokens (assets/css/confirm-dialog.css). */
:root {
  --rp-dialog-overlay: rgba(23, 25, 31, .55);
  --rp-dialog-bg: #fff;
  --rp-dialog-title: var(--sp-ink);
  --rp-dialog-text: var(--text-secondary);
  --rp-dialog-primary-bg: var(--sp-red);
  --rp-dialog-secondary-border: var(--sp-charcoal);
  --rp-dialog-secondary-text: var(--sp-ink);
  --rp-dialog-control-btn-bg: rgba(23, 25, 31, .08);
  --rp-dialog-toggle-bg: rgba(23, 25, 31, .08);
}
.settings-popup-modal,
.confirm-dialog-modal { border-left: 6px solid var(--sp-red); }

/* 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: never delays the role
   reveal or the swipe; the card flip keeps the game's transform and only gets a spring curve. Off under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  :root { --sp-press: 100ms; --sp-settle: 240ms; --sp-spring: cubic-bezier(.2, .9, .3, 1.25); }
  button:not(:disabled) {
    transition: scale var(--sp-settle) var(--sp-spring), translate var(--sp-settle) var(--sp-spring),
      background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  }
  button:not(:disabled):active { scale: .96; translate: 0 2px; transition-duration: var(--sp-press); }
  .btn-show-role:active, .btn-next-player:active { transform: none; }
  .btn-back:active { scale: .88; }
  .dot { transition: background-color 180ms ease, width 300ms ease, scale 180ms var(--sp-spring); }
  .dot.active { scale: 1.12; }
  .onboarding-slide.active .slide-icon { animation: sp-character-arrive 380ms var(--sp-spring) both; }

  #players-screen.active .ps-entry { animation: sp-paper-arrive 280ms var(--sp-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; }

  #cards-screen.active .card-container { animation: sp-paper-arrive 280ms var(--sp-spring) both; }
  .card-inner { transition: transform 600ms var(--sp-spring); }
  .game-card.flipped .card-role { animation: sp-stamp-in 360ms var(--sp-spring) 260ms both; }

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

/* Back arrow: styles.css pins it at top:40px/left:24px, but on phones (≤480px wide or ≤700px tall)
   the screen padding drops to 20px, so the title moved up while the arrow stayed and landed on the
   instruction card (questions/voting). Put the arrow in the title row instead. */
@media (max-width: 480px), (max-height: 700px) {
  .screen > .btn-back { top: calc(12px + env(safe-area-inset-top, 0px)); left: 8px; }
}
@media (min-width: 768px) {
  .screen > .btn-back { top: calc(40px + env(safe-area-inset-top, 0px)); left: 24px; }
}

/* «Сообщить об ошибке» sheet (../content-report.css) in the game palette; thumbs + flag on the dark back of the card. */
:root {
  --rp-report-surface: #ffffff;
  --rp-report-text: var(--sp-ink);
  --rp-report-muted: var(--text-secondary);
  --rp-report-line: var(--sp-line);
  --rp-report-chip: var(--sp-paper-deep);
  --rp-report-accent: var(--sp-red);
  --rp-report-accent-ink: #ffffff;
}
.card-back { --rp-report-flag: rgb(255 255 255 / 60%); --rp-report-text: #ffffff; --rp-report-accent: #ffffff; }
.game-card:not(.flipped) .rp-card-vote--in-card, .game-card.swiping .rp-card-vote--in-card { visibility: hidden; }