/* /game-ui.css */
/* Shared RoomPlay defaults. Load BEFORE game styles. */
:where(body:not([data-rp-game="neverhaveiever"])) { margin: 0; }
[data-rp-game] [tabindex="-1"]:focus { outline: none; }
.rp-waiting-spinner { display: block; width: 24px; height: 24px; margin: 0 auto 8px; border: 2px solid var(--bg-card); border-top-color: var(--accent-purple); border-radius: 50%; animation: rp-spin .8s linear infinite; }
@keyframes rp-spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(calc(10px * var(--rp-motion-screen-intensity, 1))); } to { opacity: 1; transform: translateY(0); } }
/* A PC (owner 2026-11-06 «пк комната нажатие на Играть - появляется полоса прокрутки справа»): a screen that comes in
   10px low (fadeIn, onboardingSlideIn) sticks out under a full-height page for ~0.3 s, and a window with classic
   scrollbars (Windows) shows a scrollbar on the right meanwhile. With a mouse the screens only fade in, as the shared
   motion layer does (game-motion.css rp-m-fade); phones keep the slide (no scrollbar there). The :not(#rp) outranks
   the games' own `.screen.active` rules, which load after this file. */
@keyframes rp-screen-fade { from { opacity: 0; } to { opacity: 1; } }
@media (hover: hover) and (pointer: fine) {
    html:not(#rp) body :is(.screen.active, .onboarding-screen) { animation-name: rp-screen-fade; }
}
/* Direct-content games share gutters without a redundant wrapper. */
.rp-local .screen { height: auto; overflow: visible; }
.screen.rp-scroll-screen { overflow-y: auto; }
.rp-direct .screen {
    height: auto; min-height: var(--app-height, 100dvh); overflow: visible;
    padding: calc(40px + env(safe-area-inset-top, 0px)) 24px calc(24px + env(safe-area-inset-bottom, 0px));
}
.rp-topbar .topbar {
    position: absolute; z-index: 30; top: 0; left: 0; width: 100%;
    height: calc(64px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 16px 0;
    display: flex; align-items: center; gap: 12px; background: transparent; transform: none;
}
.rp-topbar .topbar .btn-back { position: static; flex-shrink: 0; }
.rp-topbar .topbar .timer-badge { margin-left: auto; }
.rp-topbar .screen { padding-top: calc(80px + env(safe-area-inset-top, 0px)); }
.rp-setup-actions { flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; }
.rp-setup-actions .btn-additional-settings { margin: 0; }
.rp-mode-field { display: grid; gap: 8px; margin: 24px 0; color: var(--text-secondary); }
[data-rp-game] button, [data-rp-game] input, [data-rp-game] select { font-family: inherit; }
[data-rp-game] button { touch-action: manipulation; }
[data-rp-game] button:focus-visible, [data-rp-game] input:focus-visible, [data-rp-game] select:focus-visible {
    outline: 3px solid var(--text-primary, #fff); outline-offset: 3px;
}
[data-rp-activate]:focus-visible { outline: 3px solid var(--text-primary); outline-offset: 3px; }
/* RoomPlay display font (as in «Я никогда не»): screen, rules, result, section and dialog headings in every game. */
[data-rp-game] :is(.title, .slide-title, .modal-title, .join-title, .scoreboard-title, .gameover-title, .game-over-title, .result-title, .ready-title, .cn-result-title, .sh-phase-title, .multiplayer-screen h1, .confirm-dialog-title, .settings-popup-title, .landscape-prompt h2, .phase-copy h2, .cn-team h2, .scoreboard h2, .vote-ledger h2, .question-ledger h2) {
    font-family: Unbounded, Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-style: normal !important; font-weight: 800 !important; letter-spacing: -.035em !important;
    hyphens: auto; overflow-wrap: break-word; text-wrap: balance;
}
[data-rp-game] [hidden] { display: none !important; }
[data-rp-game] .player-name, [data-rp-game] .score-name { min-width: 0; overflow-wrap: anywhere; }
[data-rp-game] .btn-play, [data-rp-game] .btn-join { min-height: 48px; white-space: normal; }
[data-rp-game] .btn-back { min-width: 44px; min-height: 44px; }
@media (prefers-reduced-motion: reduce) {
    [data-rp-game] *, [data-rp-game] *::before, [data-rp-game] *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        transition-duration: .01ms !important; scroll-behavior: auto !important;
    }
}
:root {
    --bg-primary: #0d1329;
    --bg-secondary: #1a2140;
    --bg-card: #252b4a;
    --accent-purple: #7c3aed;
    --accent-purple-dark: #6025c0;
    --accent-blue: #4a6cf7;
    --text-primary: #ffffff;
    --text-secondary: #8892b0;
    --text-placeholder: #5a6380;
    --success: #4ade80;
    --error: #f87171;
    /* Answer and gender semantics keep one meaning product-wide (green = correct, red = wrong, blue = male, pink = female).
       A Game Theme may only retune their tone from COMMON/roomplay-palettes.html (fields correct, wrong, male, female). */
    --rp-correct: var(--success);
    --rp-wrong: var(--error);
    --rp-correct-ink: #17191f;
    --rp-wrong-ink: #17191f;
    --rp-male: #68a8ff;
    --rp-female: #ff7aaa;
    --settings-accent: var(--accent-purple);
    --settings-accent-dark: var(--accent-purple-dark);
}

:where(body:not([data-rp-game="neverhaveiever"])) {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    background: linear-gradient(180deg, var(--bg-primary) 0%, #0a0f1f 100%);
    min-height: 100vh;
    min-height: var(--app-height, 100dvh);
    color: var(--text-primary);
    overflow-x: hidden;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .app {
    max-width: 430px;
    margin: 0 auto;
    min-height: 100vh;
    min-height: var(--app-height, 100dvh);
    position: relative;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .screen {
    display: none;
    height: 100vh;
    height: var(--app-height, 100dvh);
    overflow: hidden;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .screen.active {
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.3s ease;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .screen-content {
    padding: 40px 24px;
    padding-top: calc(40px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .title {
    overflow-wrap: anywhere;
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 8px;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .subtitle {
    font-size: 16px;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 32px;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .btn-play {
    width: 100%;
    padding: 18px;
    background: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-purple-dark) 100%);
    border: none;
    border-radius: 30px;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.3);
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .btn-play:active {
    transform: translateY(0);
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .btn-play:disabled {
    background: var(--bg-card);
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.6;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .btn-back {
    position: absolute;
    top: calc(16px + env(safe-area-inset-top, 0px));
    left: 16px;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
    padding: 8px;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .btn-join {
    padding: 16px 32px;
    background: transparent;
    border: 2px solid var(--accent-purple);
    border-radius: 30px;
    color: var(--accent-purple);
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .btn-join.active {
    background: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-purple-dark) 100%);
    border-color: transparent;
    color: var(--text-primary);
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.3);
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .btn-play.outlined {
    background: transparent;
    border: 2px solid var(--accent-purple);
    color: var(--accent-purple);
    box-shadow: none;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .btn-copy {
    padding: 10px 20px;
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: var(--text-secondary);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .btn-copy.copied {
    background: var(--success);
    color: #000;
    border-color: var(--success);
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .input {
    width: 100%;
    padding: 16px 20px;
    background: var(--bg-card);
    border: 2px solid transparent;
    border-radius: 16px;
    color: var(--text-primary);
    font-size: 16px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s ease;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .input:focus {
    border-color: var(--accent-purple);
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .input::placeholder {
    color: var(--text-placeholder);
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .lobby-content {
    align-items: center;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .room-code-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .room-code-display {
    font-size: 48px;
    font-weight: 800;
    letter-spacing: 12px;
    color: var(--accent-purple);
    background: var(--bg-card);
    padding: 16px 32px;
    border-radius: 20px;
    font-family: 'Courier New', monospace;
    user-select: all;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .lobby-hint {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 24px;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .players-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    overflow-y: auto;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .player-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-card);
    border-radius: 12px;
    animation: slideIn 0.3s ease;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .player-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-blue) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .player-avatar.has-photo {
    padding: 0;
    background: none;
    overflow: visible;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .player-avatar.has-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(1.5);
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .player-avatar.clickable {
    cursor: pointer;
    position: relative;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .player-avatar.clickable::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px dashed rgba(139, 92, 246, 0.5);
    opacity: 0;
    transition: opacity 0.2s;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .player-avatar.clickable:not(.has-photo)::after {
    opacity: 1;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .player-name {
    text-align: left;
    flex: 1;
    font-size: 16px;
    font-weight: 500;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .player-host {
    font-size: 14px;
    color: var(--accent-purple);
    font-weight: 600;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .player-disconnected {
    opacity: 0.4;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .bottom-section {
    width: 100%;
    margin-top: auto;
    padding-top: 20px;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .lobby-status {
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
    margin-top: 12px;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .quiz-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
    flex-shrink: 0;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .quiz-option {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    background: var(--bg-card);
    border: 2px solid transparent;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    color: var(--text-primary);
    text-align: left;
    width: 100%;
    font-size: 16px;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .quiz-option:active:not(:disabled) {
    transform: scale(0.98);
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .quiz-option:disabled {
    cursor: default;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .quiz-option.selected {
    border-color: var(--accent-blue);
    background: rgba(74, 108, 247, 0.15);
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .quiz-option.correct {
    border-color: var(--success);
    background: rgba(74, 222, 128, 0.15);
    animation: correctPulse 0.5s ease;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .quiz-option.wrong {
    border-color: var(--error);
    background: rgba(248, 113, 113, 0.15);
    animation: wrongShake 0.4s ease;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .option-letter {
    width: 40px;
    height: 40px;
    background: var(--accent-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    margin-right: 16px;
    flex-shrink: 0;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .option-text {
    font-size: 16px;
    font-weight: 500;
    flex: 1;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .mini-scoreboard {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 8px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-top: auto;
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: linear-gradient(to top, var(--bg-primary) 60%, transparent);
    flex-shrink: 0;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .mini-score-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-card);
    padding: 8px 12px;
    border-radius: 20px;
    flex-shrink: 0;
    font-size: 13px;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .mini-score-name {
    font-weight: 500;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .mini-score-value {
    font-weight: 700;
    color: var(--accent-purple);
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .mini-score-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: contain;
    flex-shrink: 0;
    transform: scale(1.5);
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .mini-score-avatar-letter {
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .scoreboard-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    margin-top: 20px;
    color: var(--text-secondary);
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .scoreboard {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .score-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: 12px;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .score-item.leading {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.2) 0%, rgba(124, 58, 237, 0.1) 100%);
    border: 1px solid var(--accent-purple);
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .score-position {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    margin-right: 12px;
    background: var(--bg-card);
    flex-shrink: 0;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .score-position.gold {
    background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
    color: #000;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .score-position.silver {
    background: linear-gradient(135deg, #c0c0c0 0%, #a0a0a0 100%);
    color: #000;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .score-position.bronze {
    background: linear-gradient(135deg, #cd7f32 0%, #a05a20 100%);
    color: #000;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .score-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: contain;
    flex-shrink: 0;
    transform: scale(1.5);
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .score-name {
    text-align: left;
    flex: 1;
    font-size: 16px;
    font-weight: 500;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .score-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--accent-purple);
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .results-content {
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 auto;
    min-height: 100%;
    padding-top: calc(68px + env(safe-area-inset-top, 0px));
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .winner-icon {
    font-size: 64px;
    margin-bottom: 12px;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .winner-name {
    font-size: 24px;
    font-weight: 700;
    color: var(--accent-purple);
    margin-bottom: 22px;
}

:where(body:not([data-rp-game="neverhaveiever"]), .multiplayer-screen) .final-results {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}

/* One header geometry on the setup screens of one-phone games (mode choice, players, teams) and on
   the mode screen of online games (ГеоГессер),
   the same as every pack screen (packs.css .packs-screen-shell): back button and title share the
   first 44px row 20px below the safe area, content starts 16px under it. Each game used to place
   them itself (back at 12–40px from the top, title at 20–88px). Themes keep their fonts and
   colours; only position and spacing are pinned, hence !important against per-game rules. */
:is(body.rp-local .screen:is(#mode-screen, #players-screen, #teams-screen), .screen#mode-screen) {
    position: relative;
    padding-top: calc(20px + env(safe-area-inset-top, 0px)) !important;
}

:is(body.rp-local .screen:is(#mode-screen, #players-screen, #teams-screen), .screen#mode-screen) > .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;
    min-height: 44px;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: none !important;
}

:is(body.rp-local .screen:is(#mode-screen, #players-screen, #teams-screen), .screen#mode-screen) > .title {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    margin: 0 0 16px !important;
    /* Clears the back button's arrow (left 12px) on screens with 12–24px side padding; a title
       still too long for one line (a few long locales) wraps evenly. */
    padding: 0 36px !important;
    line-height: 1.1;
    text-align: center;
    text-wrap: balance;
}

:is(body.rp-local .screen:is(#mode-screen, #players-screen, #teams-screen), .screen#mode-screen) > .title + .subtitle {
    margin-top: -8px !important;
}
/* «Подключаемся к комнате…» (owner 2026-11-07 «на онб мигает надпись»): a game opened from the room connects in a
   fraction of a second, and the overlay flashed over the rules for that moment. Every connection overlay of a game page
   (shared .connection-overlay, Крокодил's .cro-connection) now shows only when the wait lasts longer than 0.8 s; until
   then it is invisible and lets taps through (visibility). A real disconnect still shows it, 0.8 s later. */
.connection-overlay.visible, .cro-connection.visible { animation: rp-connection-appear 200ms ease-out 800ms both; }
@keyframes rp-connection-appear { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
/* The rules need no room (owner 2026-11-07 «во время онб мелькает», ЧБТВ on a PC): from a far server the first connect
   (UI texts + handshake + rejoin) takes longer than 0.8 s, so the overlay still came up over the slides. While the
   onboarding screen is on, no connection overlay is shown at all; if the room is still not there when the player leaves
   the rules, it appears then (display comes back, so the 0.8 s grace starts again). */
body:has(#onboarding-screen.active) :is(.connection-overlay, .cro-connection).visible { display: none; }
/* /pwa-overrides.css */
/* Hide i18n text until translations are applied (non-Russian only). The hidden Russian
   placeholder text still takes part in layout, so it also gets a system font: otherwise an
   English page downloads the Cyrillic Unbounded/Manrope files (≈45 KB) for text nobody sees. */
html.i18n-pending [data-i18n] {
    visibility: hidden;
    font-family: sans-serif !important;
}

/* PWA Browser Behavior Overrides */

html {
    overscroll-behavior: none;
    --rp-promo-countdown-bg: #c62828;
}

body {
    overscroll-behavior-y: contain;
    -webkit-touch-callout: none;
}

* {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

input,
textarea,
[contenteditable="true"] {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}

.room-code-display {
    -webkit-user-select: all;
    user-select: all;
}

/* Full-height fix for all browsers (--app-height set by pwa-overrides.js via window.innerHeight) */
html {
    height: var(--app-height, 100dvh);
}

body {
    min-height: var(--app-height, 100dvh);
}

.app {
    min-height: var(--app-height, 100dvh);
}

.screen {
    min-height: var(--app-height, 100dvh);
}

.menu-screen {
    min-height: var(--app-height, 100dvh);
}

#onboarding-screen {
    height: var(--app-height, 100dvh);
}

/* Introductory discount stays visible from the catalog into Settings. */
.menu-settings-button {
    position: relative;
    overflow: visible;
}

.roomplay-discount-countdown {
    display: inline-flex;
    min-width: 42px;
    height: 20px;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--rp-promo-countdown-bg);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.32);
    color: #fff;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
}

.roomplay-discount-countdown[hidden],
.roomplay-premium-offer-meta[hidden] {
    display: none !important;
}

.roomplay-discount-countdown-settings {
    position: absolute;
    top: -8px;
    right: -10px;
    z-index: 2;
    min-width: 38px;
    height: 17px;
    padding: 0 4px;
    font-size: 9px;
    pointer-events: none;
}

.roomplay-premium-offer-meta {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
}

.roomplay-premium-offer-copy {
    min-width: 0;
    flex: 1 1 150px;
}

.roomplay-discount-countdown-premium {
    flex: 0 0 auto;
}

html.roomplay-onboarding-discount-active #settings-premium-description {
    display: none;
}

/* Android WebView extra overrides */
.android-webview .screen {
    height: var(--app-height, 100dvh) !important;
    overflow-y: auto !important;
}

.android-webview .screen.active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
    height: var(--app-height, 100dvh) !important;
    overflow-y: auto !important;
}

.android-webview #onboarding-screen {
    overflow: visible !important;
}

/* Focus management: hide on mouse/touch, show on keyboard */
button,
a,
[role="button"],
select,
summary {
    outline: none;
}

button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
select:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--accent-pink, #ff3b6f);
    outline-offset: 2px;
}

/* Same-origin page changes cross-fade instead of flashing blank (Chrome/Android
   WebView 126+, Safari/WKWebView 18.2+; others navigate as before). Kept short
   so the new page becomes interactive right away. */
@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 180ms;
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
}