/* /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); } }
/* 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;
}
/* /fonts.css */
/* Self-hosted Manrope and Unbounded (variable, SIL OFL 1.1, license in assets/vendor/fonts-OFL.txt),
   split by script like Google Fonts so a page downloads only the subsets it uses.
   Served at /fonts.css; the .woff2 files live in assets/vendor and resolve from the root. */

/* manrope-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/manrope-cyrillic-ext-wght-normal.woff2?v=5.3.0) format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* manrope-cyrillic-wght-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/manrope-cyrillic-wght-normal.woff2?v=5.3.0) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* manrope-greek-wght-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/manrope-greek-wght-normal.woff2?v=5.3.0) format('woff2');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* manrope-vietnamese-wght-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/manrope-vietnamese-wght-normal.woff2?v=5.3.0) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* manrope-latin-ext-wght-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/manrope-latin-ext-wght-normal.woff2?v=5.3.0) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* manrope-latin-wght-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/manrope-latin-wght-normal.woff2?v=5.3.0) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* unbounded-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(/unbounded-cyrillic-ext-wght-normal.woff2?v=5.3.0) format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* unbounded-cyrillic-wght-normal */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(/unbounded-cyrillic-wght-normal.woff2?v=5.3.0) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* unbounded-vietnamese-wght-normal */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(/unbounded-vietnamese-wght-normal.woff2?v=5.3.0) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* unbounded-latin-ext-wght-normal */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(/unbounded-latin-ext-wght-normal.woff2?v=5.3.0) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* unbounded-latin-wght-normal */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(/unbounded-latin-wght-normal.woff2?v=5.3.0) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* /answer-marks.css */
/*
 * Answer marks: the one upright ✓ / ✕ pair for right and wrong answers in every game.
 * SVG masks instead of font glyphs, so the shape never depends on the game font
 * (no italic or slanted checks) and the colour always comes from the theme
 * (--rp-correct / --rp-wrong / --rp-*-ink, see COMMON/roomplay-palettes.html).
 *
 * Markup:  <span class="rp-mark rp-mark--correct" aria-hidden="true"></span>
 *          <span class="rp-mark rp-mark--wrong" aria-hidden="true"></span>
 * The mark is 1em and takes currentColor; size and colour come from the context.
 * Pseudo-elements reuse the same shapes through --rp-icon-check / --rp-icon-cross
 * (bare glyph) and --rp-icon-check-badge / --rp-icon-cross-badge (glyph in a circle).
 */
:root {
    --rp-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E");
    --rp-icon-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6.8 6.8l10.4 10.4M17.2 6.8L6.8 17.2'/%3E%3C/svg%3E");
    /* Filled circle with the check cut out, and a ring around the cross. */
    --rp-icon-check-badge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='%23fff'/%3E%3Cpath d='M7.2 12.4l3.2 3.2 6.4-6.6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Ccircle cx='12' cy='12' r='12' mask='url(%23m)'/%3E%3C/svg%3E");
    --rp-icon-cross-badge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10.8' stroke-width='2.4'/%3E%3Cpath d='M8.4 8.4l7.2 7.2M15.6 8.4l-7.2 7.2' stroke-width='2.4'/%3E%3C/svg%3E");
}

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

.rp-mark--wrong {
    -webkit-mask-image: var(--rp-icon-cross);
    mask-image: var(--rp-icon-cross);
}
/* /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%;
}
/* /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;
    }
}