/* /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%;
}
/* /pause-overlay.css */
/*
 * Shared round pause button + overlay (see pause-overlay.js). Load before the game's styles.css;
 * game themes keep overriding .btn-pause / .pause-overlay / .pause-overlay-text directly.
 * Per-game differences go through custom properties (fallbacks are the common look):
 *   --pause-btn-bg, --pause-btn-border, --pause-btn-color, --pause-btn-padding,
 *   --pause-btn-font-size, --pause-btn-hover-bg, --pause-btn-hover-color,
 *   --pause-overlay-bg, --pause-overlay-text-color.
 * Layout-only properties (align-self, flex-shrink, min-height, z-index) stay in the game.
 * The overlay is position:absolute — the game's screen must be its positioned ancestor.
 */
.btn-pause {
    background: var(--pause-btn-bg, rgba(255, 255, 255, 0.1));
    border: 1px solid var(--pause-btn-border, rgba(255, 255, 255, 0.2));
    color: var(--pause-btn-color, var(--text-secondary));
    padding: var(--pause-btn-padding, 6px 16px);
    border-radius: 16px;
    font-size: var(--pause-btn-font-size, 13px);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

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

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

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

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

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

#online-pause-overlay.pause-overlay--online,
#pause-overlay.pause-overlay--local,
.pause-overlay.pause-overlay--local.pause-overlay--local {
    /* One palette in every game (owner 2026-10-21: game themes made the title unreadable): a dark
       scrim with white text, whatever the game's own --text-* and --pause-* tokens are. */
    --rp-pause-ink: #ffffff;
    --rp-pause-muted: rgba(255, 255, 255, 0.74);
    --rp-pause-chip: rgba(255, 255, 255, 0.12);
    --rp-pause-line: rgba(255, 255, 255, 0.26);
    background: rgba(9, 11, 20, 0.9);
    color: var(--rp-pause-ink);
    position: fixed;
    z-index: 980;
    padding: 24px 16px;
    box-sizing: border-box;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.pause-overlay--online.active {
    cursor: default;
    animation: rp-pause-in 220ms ease-out;
}
.rp-pause-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 340px;
    text-align: center;
}
.rp-pause-badge {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin-bottom: 4px;
    border-radius: 50%;
    background: var(--rp-pause-chip);
    border: 1px solid var(--rp-pause-line);
    color: var(--rp-pause-ink);
    font-size: 30px;
}
.pause-overlay--away .rp-pause-badge .rp-icon { animation: rp-pause-wait 1.6s ease-in-out infinite; }
#online-pause-overlay .pause-overlay-text,
.pause-overlay--local .pause-overlay-text { color: var(--rp-pause-ink); }
/* One-phone games (pause-overlay.js): the same card; a tap anywhere still resumes. */
.pause-overlay--local.active { animation: rp-pause-in 220ms ease-out; }
/* «Ждём игрока…»: the player the game waits on, as an avatar chip. */
.rp-pause-player {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 4px 14px 4px 4px;
    border-radius: 999px;
    background: var(--rp-pause-chip);
    border: 1px solid var(--rp-pause-line);
    color: var(--rp-pause-ink);
    font-weight: 600;
}
.rp-pause-player[hidden] { display: none; }
.rp-pause-player-avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--rp-pause-line);
    font-size: 13px;
    font-weight: 700;
}
.rp-pause-player-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rp-pause-player-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-pause-hint {
    font-size: 15px;
    line-height: 1.4;
    color: var(--rp-pause-muted);
}
#online-pause-overlay .rp-pause-resume,
.pause-overlay--local .rp-pause-resume.rp-pause-resume {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 12px;
    /* The same light pill in every game, not the game's .btn-play colours. */
    background: var(--rp-pause-ink);
    color: #12131a;
    border: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.rp-pause-exit {
    margin-top: 4px;
    padding: 10px 16px;
    background: none;
    border: none;
    color: var(--rp-pause-muted);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.pause-overlay--online [hidden] { display: none; }

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

@keyframes rp-pause-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes rp-pause-wait {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) {
    .pause-overlay--online.active,
    .pause-overlay--away .rp-pause-badge .rp-icon { animation: none; }
}
/* /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; }
}
/* /alias/styles.css */
/* Game content and explicit overrides. Shared defaults: ../game-ui.css. */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Pack gallery — five square Alias posters, from playful to late-night */
#packs-screen {
    --packs-feedback-rgb: 255, 59, 111;
    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;
}

/* Pack cards: the shared illustrated grid (packs.css), as in the other games. */
#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%);
}

/* Explicit game theme; omitted tokens inherit RoomPlay. */
:root {
    --accent-pink: #ff3b6f;
    --accent-pink-dark: #cc2f59;
    --settings-accent: var(--accent-pink);
    --settings-accent-dark: var(--accent-pink-dark);
}
.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;
}
.players-list {
    padding-bottom: 20px;
}
.bottom-section {
    padding: 20px 0;
}

/* Toggle */
.toggle-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    gap: 12px;
}

.toggle {
    position: relative;
    width: 52px;
    height: 28px;
}

.toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-card);
    border-radius: 28px;
    transition: 0.3s;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.3s;
}

.toggle input:checked + .toggle-slider {
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-pink) 100%);
}

.toggle input:checked + .toggle-slider:before {
    transform: translateX(24px);
}

.toggle-label {
    color: var(--text-secondary);
    font-size: 14px;
}
.btn-play {
    background: linear-gradient(135deg, var(--accent-pink) 0%, var(--accent-pink-dark) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 20px rgba(255, 59, 111, 0.3);
}

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

.play-icon {
    font-size: 20px;
}
.btn-back {
    top: calc(40px + env(safe-area-inset-top, 0px));
    left: 24px;
}
.subtitle {
    color: var(--accent-pink);
    font-size: 18px;
    margin-bottom: 30px;
}

/* Ready Screen */
.explaining-player {
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    color: var(--accent-pink);
    margin: 10px 0;
}

.guessing-player {
    text-align: center;
    color: var(--text-secondary);
    font-size: 16px;
}

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

/* Settings Row */
.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 0 10px;
}

.settings-label {
    color: var(--text-secondary);
    font-size: 16px;
}

.score-selector {
    display: flex;
    align-items: center;
    gap: 16px;
}

.score-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--accent-pink);
    background: transparent;
    color: var(--accent-pink);
    font-size: 24px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (hover: hover) {
    .score-btn:hover {
        background: var(--accent-pink);
        color: white;
    }
}
.score-value {
    font-size: 24px;
    color: var(--text-primary);
    min-width: 40px;
    text-align: center;
}

/* Turn Screen */
.team-turn-card {
    background: var(--bg-card);
    padding: 40px;
    border-radius: 24px;
    text-align: center;
    margin: 20px 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.team-turn-name {
    font-size: 32px;
    font-weight: 700;
}

.turn-words-left {
    text-align: center;
    color: var(--text-secondary);
    font-size: 16px;
    margin-top: 20px;
}

.turn-words-left strong {
    color: var(--accent-pink);
    font-size: 24px;
}

/* Game Header */
.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-left: 48px;
}

.team-indicator {
    background: var(--accent-pink);
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.team-indicator:empty {
    display: none;
}

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

.words-left-badge:empty {
    display: none;
}

/* Game Screen */
#game-screen {
    align-items: center;
    justify-content: center;
    gap: 40px;
    position: relative;
}

.timer-container {
    position: relative;
    width: 150px;
    height: 150px;
}

.timer-svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.timer-bg {
    fill: none;
    stroke: var(--bg-card);
    stroke-width: 8;
}

.timer-progress {
    fill: none;
    stroke: url(#timer-gradient);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 283;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s linear;
}

.timer-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    font-weight: 700;
}

.word-card {
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
    padding: 40px 60px;
    border-radius: 24px;
    text-align: center;
    min-width: 280px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

#current-word {
    font-size: 28px;
    font-weight: 600;
}

.game-buttons {
    display: flex;
    gap: 40px;
}

.btn-wrong, .btn-correct {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: none;
    font-size: 36px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-wrong {
    background: var(--rp-wrong);
    color: white;
}

.btn-correct {
    background: var(--rp-correct);
    color: white;
}

@media (hover: hover) {
    .btn-wrong:hover, .btn-correct:hover {
        transform: scale(1.1);
    }
}

.btn-wrong:active, .btn-correct:active {
    transform: scale(0.95);
}

/* Round Results */
.round-stats {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin: 30px 0;
}

.stat {
    text-align: center;
}

.stat-value {
    display: block;
    font-size: 48px;
    font-weight: 700;
    color: var(--accent-pink);
}

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

.guessed-words {
    flex: 1;
    overflow-y: auto;
    margin: 20px 0;
}

.guessed-word-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-card);
    border-radius: 12px;
    margin-bottom: 8px;
}

.guessed-word-item.correct {
    border-left: 3px solid var(--rp-correct);
}

.guessed-word-item.skipped {
    border-left: 3px solid var(--rp-wrong);
}

.word-status {
    font-size: 18px;
}

/* Final Results */
.final-results {
    flex: 1;
    overflow-y: auto;
}

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

.result-position {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-right: 16px;
}

.result-position.gold {
    background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
    color: #1a1a1a;
}

.result-position.silver {
    background: linear-gradient(135deg, #c0c0c0 0%, #a0a0a0 100%);
    color: #1a1a1a;
}

.result-position.bronze {
    background: linear-gradient(135deg, #cd7f32 0%, #a05a20 100%);
    color: #1a1a1a;
}

.result-position.other {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.result-name {
    flex: 1;
    font-size: 18px;
}

.result-score {
    font-size: 24px;
    font-weight: 700;
    color: var(--accent-pink);
}

/* Round Results - Team Label */
.round-team-label {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 10px;
}

.round-team-label:empty {
    display: none;
}

.words-remaining-info {
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
    margin: 10px 0;
}

.words-remaining-info strong {
    color: var(--accent-pink);
}

/* Scoreboard */
.scoreboard {
    background: var(--bg-card);
    border-radius: 20px;
    padding: 20px;
    margin: 16px 0;
}
.scoreboard-title {
    font-weight: 600;
    text-align: center;
    margin-bottom: 16px;
}

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

.score-item.leading {
    background: linear-gradient(135deg, rgba(255, 59, 111, 0.2) 0%, rgba(255, 59, 111, 0.1) 100%);
    border: 1px solid var(--accent-pink);
}

.score-team-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 12px;
    flex-shrink: 0;
}

.score-team-name {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
}

.score-points {
    font-size: 24px;
    font-weight: 700;
    color: var(--accent-pink);
}

/* Winner Display */
.winner-icon {
    font-size: 80px;
    text-align: center;
    margin-bottom: 10px;
}
.winner-name {
    font-size: 28px;
    text-align: center;
    color: var(--accent-pink);
    margin-bottom: 30px;
}

.winner-name:empty {
    display: none;
}

/* Gradient for timer */
svg defs {
    position: absolute;
}

/* ===== Pause Button & Overlay (base: ../pause-overlay.css) ===== */
.btn-pause {
    align-self: center;
}

.btn-correct:disabled,
.btn-wrong:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

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

    .settings-label {
        font-size: 14px;
    }

    .score-value {
        font-size: 20px;
    }

    .score-btn {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }

    .team-turn-card {
        padding: 30px;
    }

    .team-turn-name {
        font-size: 26px;
    }

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

    .winner-name {
        font-size: 22px;
    }

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

    .timer-container {
        width: 100px;
        height: 100px;
    }

    .timer-text {
        font-size: 32px;
    }

    .word-card {
        padding: 30px 20px;
        min-width: auto;
        margin: 10px;
    }

    #current-word {
        font-size: 20px;
    }

    .game-buttons {
        gap: 20px;
    }

    .btn-wrong, .btn-correct {
        width: 70px;
        height: 70px;
        font-size: 30px;
    }

    .round-stats {
        gap: 30px;
        margin: 20px 0;
    }

    .stat-value {
        font-size: 40px;
    }

    .stat-label {
        font-size: 12px;
    }

    .result-item {
        padding: 12px;
        margin-bottom: 10px;
    }

    .result-position {
        width: 36px;
        height: 36px;
        font-size: 13px;
        margin-right: 12px;
    }

    .result-name {
        font-size: 16px;
    }

    .result-score {
        font-size: 18px;
    }

    .toggle-label {
        font-size: 13px;
    }

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

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

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

    .timer-container {
        width: 120px;
        height: 120px;
    }

    .timer-text {
        font-size: 36px;
    }

    .word-card {
        padding: 30px 40px;
    }

    #current-word {
        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;
    }

    .timer-container {
        width: 180px;
        height: 180px;
    }

    .timer-text {
        font-size: 56px;
    }

    .word-card {
        padding: 50px 80px;
        min-width: 400px;
    }

    #current-word {
        font-size: 36px;
    }

    .game-buttons {
        gap: 60px;
    }

    .btn-wrong, .btn-correct {
        width: 100px;
        height: 100px;
        font-size: 44px;
    }

}

/* Player avatar chips (player-avatar.js) */
.team-indicator .rp-player {
    max-width: 100%;
    vertical-align: middle;
}

.team-indicator:has(.rp-player) {
    padding-left: 8px;
    min-width: 0;
    max-width: 70%;
    display: inline-flex;
    align-items: center;
}

.result-name {
    min-width: 0;
    display: flex;
    margin-right: 10px;
}

.explaining-player .rp-player,
.round-team-label .rp-player,
.winner-name .rp-player {
    max-width: 100%;
}
/* /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; }
/* /video-task.css */
/* «Сними ролик» (video-task.js, owner 2026-10-22): the quiet button «Получи до 7 500 ₽ за это видео. Как?»
 * inside the task card, right under the task text, and the sheet with two ways to be paid.
 * Calm on purpose (owner: it must not look like an ad banner): no shine, no pulse, it takes the
 * card's own ink (currentColor) on a light tint, «Как?» underlined like a link.
 * No emoji: icons from ui-icons.css. With prefers-reduced-motion nothing moves. */

.rp-video-task-cta[hidden] { display: none; }

.rp-video-task-cta {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    margin: 16px 0 0;
    padding: 10px 14px;
    border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, currentColor 10%, transparent);
    color: inherit;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: none;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease;
    -webkit-tap-highlight-color: transparent;
}
.rp-video-task-cta .rp-icon { flex: none; width: 20px; height: 20px; }
.rp-video-task-cta-how { font-weight: 800; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.rp-video-task-cta:hover { background: color-mix(in srgb, currentColor 16%, transparent); }
.rp-video-task-cta:active { transform: scale(.98); }
.rp-video-task-cta:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.rp-video-task-card {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .45), 0 18px 40px rgba(0, 0, 0, .35) !important;
}
/* The video task is not a card of the deck: no thumbs and no report flag on it. */
.rp-video-task-card .rp-card-vote,
.rp-video-task-card .rp-report-flag { visibility: hidden; }

/* The sheet: RoomPlay core surfaces, like «Час Premium за репост» (share-pass.js). */
.rp-video-task-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(10, 15, 31, .72);
    opacity: 0;
    transition: opacity .2s ease;
}
.rp-video-task-overlay.visible { opacity: 1; }
.rp-video-task-sheet {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 480px;
    max-height: 100%;
    overflow-y: auto;
    padding: 24px 16px calc(20px + env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0;
    background: #1a2140;
    color: #fff;
    font-family: inherit;
    text-align: center;
    transform: translateY(24px);
    transition: transform .2s ease;
}
.rp-video-task-overlay.visible .rp-video-task-sheet { transform: none; }
.rp-video-task-sheet:focus { outline: none; }
.rp-video-task-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 20px;
    opacity: .75;
    cursor: pointer;
}
.rp-video-task-title { margin: 8px 40px 8px; font-size: 22px; font-weight: 800; line-height: 1.25; }
.rp-video-task-lead { margin: 0 0 16px; font-size: 16px; line-height: 1.45; color: #c9cfe6; }
.rp-video-task-option {
    margin: 0 0 12px;
    padding: 18px 16px 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    text-align: left;
}
.rp-video-task-option-icon { display: block; width: 28px; height: 28px; margin: 0 0 8px; }
.rp-video-task-option--premium .rp-video-task-option-icon { color: #ffd166; }
.rp-video-task-option--money .rp-video-task-option-icon { color: #6ee7b7; }
.rp-video-task-option-title { margin: 0 0 6px; font-size: 18px; font-weight: 800; line-height: 1.25; }
.rp-video-task-option-text { margin: 0 0 14px; font-size: 15px; line-height: 1.45; color: #c9cfe6; }
.rp-video-task-option-cta {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 10px 16px;
    border: 0;
    border-radius: 30px;
    background: var(--settings-accent, #7c3aed);
    color: var(--rp-video-cta-ink, #fff);
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}
.rp-video-task-option--money .rp-video-task-option-cta {
    background: transparent;
    color: #fff;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35);
}
.rp-video-task-close:focus-visible, .rp-video-task-option-cta:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .rp-video-task-cta { transition: none; }
    .rp-video-task-overlay, .rp-video-task-sheet { transition: none; }
}
/* /settings-popup.css */
/*
 * Settings popup. Game Themes recolour it through the --rp-dialog-* tokens shared with
 * confirm-dialog.css (see there), plus the controls:
 *   --rp-dialog-control-bg (selector track), --rp-dialog-control-btn-bg / -text / -active / -radius (−/+),
 *   --rp-dialog-value, --rp-dialog-toggle-bg / -text, --rp-dialog-toggle-on-bg / -on-text.
 * The primary «Готово» falls back to --settings-accent; fallbacks keep the original navy look.
 */
.settings-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--rp-dialog-overlay, rgba(0, 0, 0, 0.85));
    z-index: 1000;
    justify-content: center;
    align-items: center;
    padding: 24px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* «Получи до 7 500 ₽ за рекомендацию RoomPlay. Как?»: the video task's quiet button (video-task.css) as a settings row. */
.settings-popup-row-earn { justify-content: center; }
.settings-popup-earn.rp-video-task-cta { margin: 0; justify-content: center; }
/* /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;
}
/* /mode-cards.css */
/*
 * RoomPlay shared mode screen (#mode-screen .mode-cards): two cards, blob art on the left, title and
 * description on the right. Layout, sizes, states and motion are the same in every game; a game only
 * colours it through tokens in its *-theme.css (on :root, the game scope or one card, e.g. #mode-team):
 *   --mode-card-bg, --mode-card-ink, --mode-card-muted, --mode-card-border, --mode-card-accent (hover/focus),
 *   --mode-card-shadow, --mode-art-a (main blob), --mode-art-b (teammates / prop), --mode-art-ink (eyes),
 *   --mode-art-mouth.
 * Markup:  <div class="mode-cards"><div class="mode-card" id="mode-solo" role="button" tabindex="0">
 *            <div class="mode-card-icon"><span data-rp-mode-art="solo"></span></div>
 *            <div class="mode-card-title">…</div><div class="mode-card-desc">…</div></div>…</div>
 *   Art: solo | team | word | question from mode-art.js. Do not restyle these classes in a game.
 */
.mode-cards { display: flex; flex-direction: column; justify-content: center; gap: 16px; flex: 1; width: 100%; max-width: 420px; margin: 0 auto; padding: 16px 0; }
.mode-cards .mode-card {
  display: grid; grid-template-columns: 88px 1fr; column-gap: 16px; align-items: center;
  width: 100%; margin: 0; padding: 20px; border-radius: 20px;
  border: 2px solid var(--mode-card-border, transparent);
  background: var(--mode-card-bg, var(--bg-card));
  color: var(--mode-card-ink, var(--text-primary));
  box-shadow: var(--mode-card-shadow, none);
  font: inherit; text-align: left; cursor: pointer; appearance: none;
  transition: transform 160ms ease-out, border-color 160ms ease-out;
}
.mode-cards .mode-card:active { transform: scale(.98); }
.mode-cards .mode-card:focus-visible { outline: 3px solid var(--mode-card-accent, var(--game-accent, currentColor)); outline-offset: 3px; }
@media (hover: hover) { .mode-cards .mode-card:hover { transform: none; border-color: var(--mode-card-accent, var(--game-accent, currentColor)); box-shadow: var(--mode-card-shadow, none); } }
.mode-cards .mode-card-icon { grid-row: 1 / 3; width: 88px; height: 88px; margin: 0; font-size: 0; }
.mode-cards .mode-card-icon .mode-art { display: block; width: 88px; height: 88px; margin: 0; overflow: visible; }
.mode-cards .mode-card-title { align-self: end; margin: 0; font-family: inherit; font-size: 20px; font-weight: 800; line-height: 1.25; color: var(--mode-card-ink, var(--text-primary)); overflow-wrap: anywhere; }
.mode-cards .mode-card-desc { align-self: start; margin: 4px 0 0; font-size: 16px; line-height: 1.4; color: var(--mode-card-muted, var(--text-secondary)); opacity: 1; }
.mode-card .mode-fill-a { fill: var(--mode-art-a, var(--game-accent, #7c3aed)); }
.mode-card .mode-fill-b { fill: var(--mode-art-b, var(--accent-blue, #3b82f6)); }
.mode-card .mode-pupil, .mode-card .mode-mouth-fill { fill: var(--mode-art-ink, #17191f); }
.mode-card .mode-mouth { stroke: var(--mode-art-mouth, var(--mode-art-ink, #17191f)); }
@media (max-width: 360px) {
  .mode-cards .mode-card { grid-template-columns: 64px 1fr; column-gap: 12px; padding: 16px; }
  .mode-cards .mode-card-icon, .mode-cards .mode-card-icon .mode-art { width: 64px; height: 64px; }
}
@media (prefers-reduced-motion: no-preference) {
  /* Whole blob breathes, eyes included, from its feet; a prop (card, speech bubble) bobs beside it. */
  .mode-card .mode-blob { transform-box: fill-box; transform-origin: 50% 100%; animation: rp-mode-breathe 2.4s ease-in-out infinite; }
  .mode-card .mode-blob--late { animation-delay: -1.2s; }
  .mode-card .mode-blob--side { animation-delay: -.6s; }
  .mode-card .mode-prop { transform-box: fill-box; transform-origin: 0% 100%; animation: rp-mode-bob 2.4s ease-in-out -1.2s infinite; }
  .mode-card:active .mode-blob { animation: rp-mode-hop 320ms ease-out; }
  @keyframes rp-mode-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.04, .95); } }
  @keyframes rp-mode-bob { 0%, 100% { transform: none; } 50% { transform: translateY(-4px) rotate(-4deg); } }
  @keyframes rp-mode-hop { 0% { transform: scale(1.08, .88); } 55% { transform: translateY(-8%) scale(.96, 1.06); } 100% { transform: none; } }
}
/* /alias/mood-theme.css */
/* Alias Original palette: white shell, red word card, yellow decorative accents. */
:root {
    /* Answer and gender tones: COMMON/roomplay-palettes.html / alias (correct, wrong, male, female). */
    --rp-correct: #078747;
    --rp-correct-ink: #ffffff;
    --rp-wrong: #bf382e;
    --rp-wrong-ink: #ffffff;
    --rp-male: #235ea4;
    --rp-female: #b6102a;
    color-scheme: light;
    --bg-primary: #ffffff;
    --bg-secondary: #fbecef;
    --bg-card: #ffffff;
    --text-primary: #211d22;
    --text-secondary: #686068;
    --text-placeholder: #766d76;
    --game-accent: #cb1731;
    --game-accent-strong: #b6102a;
    --accent-pink: var(--game-accent-strong);
    --accent-pink-dark: #940d22;
    --success: #078747;
    --error: #bf382e;
    --mood-purple: #ffd333;
    --mood-line: #d4c4c8;
    --alias-ink: #211d22;
    --alias-muted: #686068;
    --alias-paper-tint: #fbecef;
    --alias-yellow: #ffd333;
    --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Unbounded', 'Manrope', sans-serif;
    --onboarding-accent: var(--text-primary);
    --onboarding-accent-dark: #383039;
    --onboarding-shadow: transparent;
    --onboarding-shadow-hover: transparent;
    --settings-accent: var(--game-accent-strong);
    --settings-accent-dark: #940d22;
}
body[data-rp-game="alias"] { background: var(--bg-primary); font-family: var(--font-body); }
.app { max-width: 560px; }
.screen {
    padding: calc(88px + env(safe-area-inset-top, 0px)) 24px calc(24px + env(safe-area-inset-bottom, 0px));
}
.btn-back { top: calc(24px + env(safe-area-inset-top, 0px)); left: 24px; min-width: 48px; min-height: 48px; }
.title { font-size: clamp(28px, 6vw, 40px); line-height: 1.12; letter-spacing: -1px; margin-bottom: 24px; }
.alias-brand { position: absolute; top: calc(32px + env(safe-area-inset-top, 0px)); right: 24px; font-size: 20px; font-weight: 800; letter-spacing: -1px; }
.alias-brand::after { content: '•'; color: var(--game-accent-strong); margin-left: 4px; }
/* Pack and setup screens share one header (packs.css, game-ui.css); the brand mark would crowd it. */
body:has(:is(#packs-screen, #mode-screen, #players-screen, #teams-screen).active) .alias-brand { display: none; }
.subtitle, .guessing-player, .stat-label { font-size: 16px; line-height: 1.5; }
.bottom-section { margin-top: auto; padding: 24px 0 0; }
.btn-play, .btn-next-slide { background: var(--text-primary); color: var(--bg-card); box-shadow: none; border-radius: 16px; min-height: 56px; font-weight: 700; }
.btn-play:hover, .btn-next-slide:hover { background: #383039; box-shadow: none; }
.btn-play:disabled { background: var(--bg-secondary); color: var(--text-secondary); opacity: 1; }
.btn-skip { color: var(--text-secondary); border: 1px solid var(--mood-line); border-radius: 16px; min-height: 56px; }
.btn-additional-settings { border-color: var(--alias-ink); }
/* Shared carousel/controller, themed illustrations and responsive content. */
#onboarding-screen { height: auto; min-height: var(--app-height, 100dvh); overflow: visible; }
.onboarding-container { flex: 1; height: auto; padding-top: 0; }
.onboarding-slides { flex: 1; padding-top: 0; align-items: center; }
.rule-animated-onboarding .onboarding-slide { max-width: 464px; padding: 0; }
/* Onboarding: animated flat SVG scenes (static copies via <picture> for reduced motion). */
#onboarding-screen .slide-icon { width: min(240px, 55vw); margin: 0 auto 20px; font-size: 0; line-height: 0; }
#onboarding-screen .slide-icon picture,
#onboarding-screen .slide-icon img { display: block; width: 100%; height: auto; }
.rule-animated-onboarding .slide-title { color: var(--text-primary); font-size: clamp(28px, 6vw, 40px); max-width: 440px; letter-spacing: -1px; line-height: 1.12; margin-bottom: 16px; }
.rule-animated-onboarding .slide-text { color: var(--text-secondary); max-width: 400px; font-size: 16px; line-height: 1.6; min-height: 0; }
.onboarding-dots { margin: 24px 0; }
.dot { background: var(--mood-line); }
.dot.active { background: var(--text-primary); }
.onboarding-buttons { width: 100%; flex-shrink: 0; }
/* Mode screen: shared layout in mode-cards.css, art from mode-art.js; only the --mode-* tokens are set here. */
:root { --mode-card-bg: var(--bg-card); --mode-card-ink: var(--alias-ink); --mode-card-muted: var(--alias-muted); --mode-card-border: #dfb9c0; --mode-card-accent: var(--game-accent); --mode-art-a: var(--game-accent); --mode-art-b: var(--alias-yellow); --mode-art-ink: var(--alias-ink); --mode-art-mouth: #fff; }
#mode-team { --mode-art-a: var(--alias-yellow); --mode-art-b: var(--game-accent); --mode-art-mouth: var(--alias-ink); }
.ps-entry { border: 1px solid var(--mood-line); }
.ps-add-btn { border-radius: 16px; min-height: 56px; }
.ps-name { font-size: 16px; }
/* Pack illustrations preserve selection, word counts and Premium locks. */
/* Pack cards are the shared illustrated grid (packs.css), as in the other games; only the screen frame is set here. */
#packs-screen { padding-top: calc(88px + env(safe-area-inset-top, 0px)); max-width: 560px; }
#packs-screen .subtitle { font-size: 16px; margin-bottom: 24px; }
#packs-screen .bottom-section { background: var(--bg-primary); padding-top: 16px; }
.packs-summary { color: var(--text-secondary); }
.summary-text strong { color: var(--text-primary); }
/* A red word card is the focus of the otherwise white interface. */
#ready-screen::before, .team-turn-card::before { content: ''; display: block; width: 160px; height: 160px; background: url('/alias/assets/mood-flower.svg?v=20260914-inverted') center / contain no-repeat; margin: 24px auto; }
#ready-screen::before { order: 0; }
.team-turn-card { background: none; box-shadow: none; padding: 0 16px 24px; margin: auto 0 0; }
.team-turn-card::before { background-image: url('/alias/assets/mood-cloud.svg?v=20260914-inverted'); }
.explaining-player { color: var(--text-primary); font-size: 32px; overflow-wrap: anywhere; }
#game-screen { gap: 24px; justify-content: flex-start; }
.game-header { padding-left: 0; gap: 12px; flex-wrap: wrap; }
.team-indicator { color: var(--text-primary); background: var(--game-accent); overflow-wrap: anywhere; }
.words-left-badge { background: var(--bg-secondary); }
.timer-container { width: 112px; height: 112px; flex-shrink: 0; }
.timer-bg { stroke: var(--bg-secondary); stroke-width: 5; }
.timer-progress { stroke: var(--game-accent-strong); stroke-width: 5; }
.timer-text { font-size: 36px; }
.btn-pause { color: var(--text-secondary); border-color: var(--mood-line); min-height: 48px; }
.word-card { position: relative; width: 100%; min-width: 0; min-height: 200px; margin: 0; padding: 48px 24px; display: grid; place-items: center; background: var(--game-accent); border-radius: 32px; box-shadow: none; }
.word-card::before { content: ''; position: absolute; top: -28px; right: 16px; width: 64px; height: 64px; background: url('/alias/assets/mood-cloud.svg?v=20260914-inverted') center / contain no-repeat; transform: rotate(12deg); }
#current-word { font-size: clamp(28px, 7vw, 40px); line-height: 1.15; font-weight: 750; overflow-wrap: anywhere; max-width: 100%; }
.game-buttons { width: 100%; gap: 16px; margin-top: auto; }
.btn-wrong, .btn-correct { flex: 1; height: 72px; border-radius: 20px; font-size: 36px; }
.round-stats { gap: 16px; margin: 24px 0; }
.stat { flex: 1; background: var(--bg-secondary); border-radius: 24px; padding: 24px 12px; }
.stat:first-child { background: #e0f1e4; }
.stat-value { color: var(--text-primary); font-size: 48px; }
.score-item, .result-item { box-shadow: none; border: 1px solid var(--mood-line); }
.winner-icon { font-size: 0; width: 144px; height: 144px; margin: 0 auto 24px; background: url('/alias/assets/mood-sun.svg?v=20260914-inverted') center / contain no-repeat; }
.winner-name { color: var(--text-primary); overflow-wrap: anywhere; }
@media (max-width: 380px) {
    .screen { padding-left: 16px; padding-right: 16px; }
    #onboarding-screen .slide-icon { width: min(208px, 55vw); }
}
@media (max-height: 700px) {
    #onboarding-screen .slide-icon { width: min(176px, 50vw); margin-bottom: 12px; }
    .onboarding-slides { min-height: 0; }
    .onboarding-dots { margin: 16px 0; }
    #game-screen { gap: 16px; }
    .timer-container { width: 80px; height: 80px; }
    .timer-text { font-size: 28px; }
    .word-card { min-height: 144px; padding: 32px 24px; }
}
@media (orientation: landscape) and (max-height: 600px) {
    #packs-screen { min-height: 560px; height: auto; overflow: visible; }
    #packs-screen .packs-container { overflow: visible; }
    #onboarding-screen .slide-icon { width: 104px; margin-bottom: 4px; }
    .onboarding-container { gap: 0; }
}

.alias-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.btn-pause { font-size: 16px; }
.settings-popup-btn { min-width: 48px; min-height: 48px; }

/* Typography and surface roles stay local to Alias, including shared controls. */
.title, .rule-animated-onboarding .slide-title, .alias-brand, .winner-name {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.03em;
    overflow-wrap: anywhere;
}
.title, .rule-animated-onboarding .slide-title { font-size: clamp(24px, 5.5vw, 34px); }
#current-word, .timer-text, .ps-name, button, input, select { font-family: var(--font-body); }
.alias-brand { font-size: 18px; }
.alias-brand::after { color: var(--game-accent); }
.ps-entry, .pack-card, .packs-summary, .word-card, .stat, .scoreboard, .score-item, .result-item, .guessed-word-item {
    --text-primary: var(--alias-ink);
    --text-secondary: var(--alias-muted);
    --bg-secondary: var(--alias-paper-tint);
    --mood-line: #dfb9c0;
    color: var(--text-primary);
}
.btn-play, .btn-next-slide { background: var(--game-accent-strong); color: #ffffff; border: 2px solid var(--game-accent-strong); }
.btn-play:not(:disabled):hover, .btn-next-slide:hover { background: var(--accent-pink-dark); color: #ffffff; }
.btn-play:disabled { background: #eee5e7; color: #75666b; border-color: #eee5e7; }
.btn-back { color: var(--text-primary); }
.btn-skip, .btn-pause { color: var(--text-primary); border-color: var(--mood-line); }
.btn-additional-settings { color: var(--text-primary); }
#packs-screen { --packs-feedback-rgb: 182, 16, 42; }
.ps-add-btn { color: var(--text-primary); border-color: var(--mood-line); }
.word-card { --text-primary: #ffffff; --text-secondary: #fff0f2; background: var(--game-accent); color: var(--text-primary); }
.team-indicator { background: var(--alias-paper-tint); color: var(--alias-ink); }
.timer-container {
    --text-primary: var(--alias-ink);
    --bg-secondary: var(--alias-paper-tint);
    background: var(--bg-card); border-radius: 50%; color: var(--text-primary);
}
.timer-progress { stroke: var(--game-accent-strong); }
.btn-wrong { border: 2px solid #ffffff; }
.btn-correct { border: 2px solid #ffffff; }
.score-item.leading { background: var(--alias-paper-tint); border-color: var(--game-accent-strong); }
.words-remaining-info strong, .winner-score { color: var(--game-accent-strong); }
.ps-entry :focus-visible, .pack-card:focus-visible, .word-card:focus-visible {
    outline: 3px solid var(--alias-ink); outline-offset: 3px;
}
/* Back/exit confirmation and «Дополнительные настройки» in the same Alias sheet: white paper,
   ink text, red action, ink outline cancel, the same 16 px corners as Play and the other Alias buttons.
   Colours go through the shared --rp-dialog-* tokens (assets/css/confirm-dialog.css). */
:root {
  --rp-dialog-overlay: rgba(33, 29, 34, .55);
  --rp-dialog-bg: var(--bg-card);
  --rp-dialog-border: 1px solid var(--mood-line);
  --rp-dialog-shadow: 0 18px 48px rgba(33, 29, 34, .22);
  --rp-dialog-title: var(--alias-ink);
  --rp-dialog-text: var(--alias-muted);
  --rp-dialog-primary-bg: var(--game-accent-strong);
  --rp-dialog-primary-text: #ffffff;
  --rp-dialog-btn-radius: 16px;
  --rp-dialog-secondary-border: var(--alias-ink);
  --rp-dialog-secondary-text: var(--alias-ink);
  --rp-dialog-control-bg: var(--alias-paper-tint);
  --rp-dialog-control-btn-bg: var(--bg-card);
  --rp-dialog-toggle-bg: var(--alias-paper-tint);
}
.confirm-dialog-overlay, .settings-popup-overlay { color-scheme: light; }
.confirm-dialog-title { font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; }
.confirm-dialog-btn { min-height: 56px; font-weight: 700; }
.confirm-dialog-btn-confirm:hover { background: var(--accent-pink-dark); }
.settings-popup-title, .settings-popup-value { font-family: var(--font-display); }
.settings-popup-title { font-weight: 800; letter-spacing: -.03em; }
.settings-popup-selector { border-radius: 16px; }
.settings-popup-btn { border: 1px solid #dfb9c0; }
.settings-popup-btn:hover { background: #fff7f8; }
.settings-popup-toggle:focus-visible { outline-color: var(--alias-ink); }
.settings-popup-done { min-height: 56px; font-weight: 700; }
.settings-popup-done:hover { background: var(--accent-pink-dark); }
.btn-additional-settings { border-radius: 16px; border-width: 2px; }

/* Short, one-shot motion: characters greet players without distracting from words. */
@keyframes alias-arrive {
    from { opacity: 0; transform: translateY(calc(12px * var(--rp-motion-screen-intensity, 1))) scale(calc(1 - .02 * var(--rp-motion-screen-intensity, 1))); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes alias-greet {
    0% { transform: translateY(calc(8px * var(--rp-motion-artwork-intensity, 1))) rotate(calc(-7deg * var(--rp-motion-artwork-intensity, 1))) scale(calc(1 - .08 * var(--rp-motion-artwork-intensity, 1))); }
    65% { transform: translateY(calc(-3px * var(--rp-motion-artwork-intensity, 1))) rotate(calc(4deg * var(--rp-motion-artwork-intensity, 1))) scale(calc(1 + .03 * var(--rp-motion-artwork-intensity, 1))); }
    100% { transform: translateY(0) rotate(0) scale(1); }
}
@keyframes alias-card-friend {
    0% { transform: rotate(12deg) translateY(0); }
    50% { transform: rotate(calc(12deg - 10deg * var(--rp-motion-artwork-intensity, 1))) translateY(calc(-6px * var(--rp-motion-artwork-intensity, 1))); }
    100% { transform: rotate(12deg) translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
    .screen.active .stat,
    .screen.active .result-item {
        animation: var(--rp-motion-screen-name, alias-arrive) calc(var(--rp-motion-screen-duration, 300ms) * 1.06666667) var(--rp-motion-screen-easing, cubic-bezier(.22, 1, .36, 1)) backwards;
    }
    .screen.active .stat:nth-child(2),
    .screen.active .result-item:nth-child(2) { animation-delay: calc(var(--rp-motion-screen-duration, 300ms) * .2); }
    .screen.active .result-item:nth-child(n+3) { animation-delay: calc(var(--rp-motion-screen-duration, 300ms) * .4); }
    #ready-screen.active::before,
    .screen.active .team-turn-card::before,
    .screen.active .winner-icon { animation: alias-greet 440ms cubic-bezier(.22, 1, .36, 1) backwards; }
    #game-screen.active .word-card::before { animation: alias-card-friend 440ms ease-out; }
    .onboarding-slide.active .slide-icon { animation: alias-greet 440ms cubic-bezier(.22, 1, .36, 1) backwards; }
    .pause-overlay.active .pause-overlay-text { animation: var(--rp-motion-screen-name, alias-arrive) calc(var(--rp-motion-screen-duration, 300ms) * .8) var(--rp-motion-screen-easing, ease-out); }
    .btn-play, .btn-next-slide, .btn-skip, .btn-back,
    .btn-correct, .btn-wrong, .btn-pause, .btn-additional-settings {
        transition: transform 160ms ease-out, background-color 160ms ease-out, border-color 160ms ease-out;
    }
    .btn-play:not(:disabled):active, .btn-next-slide:active,
    .btn-skip:active, .btn-back:active, .btn-pause:active,
    .btn-additional-settings:active { transform: scale(.97); }
    .btn-correct:not(:disabled):active, .btn-wrong:not(:disabled):active { transform: scale(.94); }
    @media (hover: hover) {
        .btn-play:not(:disabled):not(:active):hover, .btn-next-slide:not(:active):hover { transform: translateY(-2px); }
    }
}

/* Pack choice arrow: COMMON/roomplay-palettes.html / alias secondary #FFD333 (the accent is too dark for the ink outline). */
:root {
    --packs-cue-color: #FFD333;
}


/* «Задания при объяснении» (tasks.js): the «Задания» screen and the round's task block. */
body:has(#tasks-screen.active) .alias-brand { display: none; }
.settings-popup-choice-option { border: 0; background: transparent; color: var(--alias-muted); font-size: 14px; }
.settings-popup-choice-option:hover { background: #fff7f8; }
.settings-popup-choice-option.active { background: var(--game-accent-strong); color: #ffffff; }
.settings-popup-choice-option:focus-visible { outline-color: var(--alias-ink); }
#tasks-screen { padding-top: calc(88px + env(safe-area-inset-top, 0px)); max-width: 560px; overflow-y: auto; }
#tasks-screen .subtitle { color: var(--text-secondary); margin-bottom: 16px; }
#tasks-screen .bottom-section { position: sticky; bottom: 0; background: var(--bg-primary); padding: 16px 0 calc(8px + env(safe-area-inset-bottom, 0px)); }
.alias-tasks { display: flex; flex-direction: column; gap: 16px; width: 100%; text-align: left; }
.alias-task-group { border: 1px solid var(--mood-line); border-radius: 20px; padding: 4px 16px; background: var(--bg-card); }
.alias-task-head { display: flex; align-items: center; gap: 12px; min-height: 56px; margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--text-primary); cursor: pointer; }
.alias-task-head .rp-icon { font-size: 24px; color: var(--game-accent-strong); }
.alias-task-head-name { flex: 1; min-width: 0; }
.alias-task { display: flex; align-items: center; gap: 4px; border-top: 1px solid var(--mood-line); }
.alias-task-label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 0; cursor: pointer; }
.alias-task-text { flex: 1; min-width: 0; font-size: 16px; line-height: 1.35; color: var(--text-primary); overflow-wrap: anywhere; }
.alias-task-check, .alias-task-all { flex: none; width: 24px; height: 24px; margin: 0 2px; accent-color: var(--game-accent-strong); cursor: pointer; }
.alias-task-check:focus-visible, .alias-task-all:focus-visible { outline: 2px solid var(--alias-ink); outline-offset: 2px; }
.alias-task-remove { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: none; color: var(--text-secondary); font-size: 20px; cursor: pointer; }
.alias-task-remove:active { background: var(--bg-secondary); }
.alias-task-add { display: flex; gap: 8px; padding: 0 0 12px; }
.alias-task-input { flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; border: 1px solid var(--mood-line); border-radius: 14px; background: var(--bg-primary); color: var(--text-primary); font: inherit; font-size: 16px; }
.alias-task-input::placeholder { color: var(--text-placeholder); }
.alias-task-input:focus { outline: 2px solid var(--alias-ink); outline-offset: 0; border-color: transparent; }
.alias-task-add-btn { position: relative; flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 14px; background: var(--text-primary); color: var(--bg-card); cursor: pointer; }
.alias-task-add-btn::before, .alias-task-add-btn::after { content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 2.4px; border-radius: 2px; background: currentColor; transform: translate(-50%, -50%); }
.alias-task-add-btn::after { transform: translate(-50%, -50%) rotate(90deg); }
.alias-task-add-btn:focus-visible { outline: 2px solid var(--alias-ink); outline-offset: 2px; }
.alias-task-add-btn:disabled { background: var(--bg-secondary); color: var(--text-secondary); cursor: default; }
.alias-tasks-status { margin: 0 0 12px; font-size: 14px; line-height: 1.4; color: var(--text-secondary); text-align: center; }

.alias-round-task { display: flex; flex-direction: column; gap: 4px; width: 100%; max-width: 440px; margin: 16px auto 0; padding: 16px 20px; border-radius: 20px; background: var(--alias-yellow); color: var(--alias-ink); text-align: center; }
.alias-round-task[hidden] { display: none; }
.alias-round-task-label { font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.alias-round-task-text { font-size: 18px; font-weight: 750; line-height: 1.3; overflow-wrap: anywhere; }
.alias-round-task--game { margin: 0 0 8px; padding: 10px 16px; border-radius: 16px; }
.alias-round-task--game .alias-round-task-label { font-size: 11px; }
.alias-round-task--game .alias-round-task-text { font-size: 16px; }

/* «Сообщить об ошибке» sheet (../content-report.css) in the game palette; thumbs + flag inside the red word card. */
:root {
    --rp-report-surface: #ffffff;
    --rp-report-text: var(--alias-ink);
    --rp-report-muted: var(--alias-muted);
    --rp-report-line: var(--mood-line);
    --rp-report-chip: var(--alias-paper-tint);
    --rp-report-accent: var(--game-accent);
    --rp-report-accent-ink: #ffffff;
}
.word-card { --rp-report-flag: rgb(255 255 255 / 72%); --rp-report-text: #ffffff; --rp-report-accent: #ffffff; }