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

.pause-overlay--online {
    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(--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-overlay-text-color, var(--text-primary));
    font-size: 30px;
}
.pause-overlay--away .rp-pause-badge .rp-icon { animation: rp-pause-wait 1.6s ease-in-out infinite; }
.pause-overlay--online .pause-overlay-text { color: var(--text-primary); }
/* «Ждём игрока…»: 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(--pause-btn-bg, rgba(255, 255, 255, 0.1));
    border: 1px solid var(--pause-btn-border, rgba(255, 255, 255, 0.2));
    color: var(--text-primary);
    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(--pause-btn-border, rgba(255, 255, 255, 0.2));
    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(--pause-overlay-text-color, var(--text-secondary));
}
.pause-overlay--online .rp-pause-resume {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 12px;
}
.rp-pause-exit {
    margin-top: 4px;
    padding: 10px 16px;
    background: none;
    border: none;
    color: var(--text-secondary);
    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; }
}