/*
 * «Шапка игры» (shared/client/game-header.ts, bundle /game-header.js): one top bar in every game.
 *   [menu]   [cube + roomplay]   [timer]
 * Fixed at the top; on its screens the game's own back arrow, pause button and «Ещё игры» cube are
 * hidden ([data-rp-gh-hidden]). A game theme sets only tokens, never the classes:
 *   --rp-gh-ink         icons, logo text, timer text (default: the page's --text-primary, else white)
 *   --rp-gh-chip        button and timer background (default: the ink at 14 %)
 *   --rp-gh-line        button border (default: the ink at 24 %)
 *   --rp-gh-timer-bg / --rp-gh-timer-ink   the timer chip (default: chip / ink)
 *   --rp-gh-low         the timer at 5 s and less (default: #ff4d5e)
 *   --rp-gh-space       where the header's screens start (padding-top), under the bar
 * The menu card and the actions it adds to a pause card use the pause screen's fixed dark palette
 * (pause-overlay.css).
 */
:root {
    --rp-gh-space: calc(80px + env(safe-area-inset-top, 0px));
}

.rp-game-header {
    --rp-gh-ink-v: var(--rp-gh-ink, var(--text-primary, #ffffff));
    position: fixed;
    z-index: 70;
    top: calc(12px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: min(100%, 560px);
    box-sizing: border-box;
    padding: 0 16px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) minmax(44px, auto);
    align-items: center;
    gap: 8px;
    height: 48px;
    color: var(--rp-gh-ink-v);
    font-family: 'Manrope', var(--font-body, system-ui), sans-serif;
    pointer-events: none;
}
.rp-game-header[hidden] { display: none; }
.rp-game-header > * { pointer-events: auto; }

.rp-gh-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-color: var(--rp-gh-line, color-mix(in srgb, var(--rp-gh-ink-v) 24%, transparent));
    background: rgba(255, 255, 255, 0.14);
    background: var(--rp-gh-chip, color-mix(in srgb, var(--rp-gh-ink-v) 14%, transparent));
    color: inherit;
    display: grid;
    place-items: center;
    font-size: 22px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: transform 0.15s ease;
}
.rp-gh-btn:active { transform: scale(0.9); }

.rp-gh-brand {
    /* Centred on the screen whatever the timer's width. */
    position: absolute;
    left: 50%;
    top: 2px;
    transform: translateX(-50%);
    max-width: calc(100% - 2 * (16px + 44px + 12px));
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 10px 0 4px;
    border: 0;
    border-radius: 22px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease;
}
.rp-gh-brand:active { transform: translateX(-50%) scale(0.94); }
.rp-gh-cube {
    width: 34px;
    height: 34px;
    object-fit: contain;
    flex: none;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}
.rp-gh-word {
    font-family: 'Unbounded', 'Manrope', system-ui, sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp-gh-timer {
    grid-column: 3;
    justify-self: end;
    min-width: 44px;
    height: 44px;
    box-sizing: border-box;
    padding: 0 10px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.14);
    background: var(--rp-gh-timer-bg, var(--rp-gh-chip, color-mix(in srgb, var(--rp-gh-ink-v) 14%, transparent)));
    color: var(--rp-gh-timer-ink, inherit);
    font-size: 18px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.rp-gh-timer[hidden] { display: none; }
.rp-gh-timer--low {
    background: var(--rp-gh-low, #ff4d5e);
    color: #ffffff;
    animation: rp-gh-low 1s ease-in-out infinite;
}
@keyframes rp-gh-low {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

/* The header's screens start under the bar, the same distance in every game (it replaces the room
   each game kept for its own back arrow). */
html.rp-has-game-header .screen.rp-gh-screen { padding-top: var(--rp-gh-space) !important; }
/* Online games pad their .screen-content instead; the round reveal (reveal-results.css) covers the
   screen absolutely. Both start under the bar too. */
html.rp-has-game-header .screen.rp-gh-screen > .screen-content { padding-top: 0 !important; }
html.rp-has-game-header .screen.rp-gh-screen .rr-container { top: var(--rp-gh-space); }
/* An in-flow reveal (.rr-flow) already sits under the bar with the content above it. */
html.rp-has-game-header .screen.rp-gh-screen .rr-flow > .rr-container { top: auto; }
/* The round row of the game template (.game-header: round badge, timer) kept room for the old back
   arrow on the left; the arrow is gone. */
html.rp-has-game-header .screen.rp-gh-screen .game-header { padding-left: 0 !important; }

/* What the header replaces on its screens. */
[data-rp-gh-hidden] { display: none !important; }

/* The menu card (guests, games without a pause) and the actions on every pause card. */
.rp-gh-menu-overlay.active { cursor: default; }
.rp-gh-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 2px;
}
.rp-gh-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 52px;
    padding: 0 18px;
    border-radius: 30px;
    border: 2px solid var(--rp-pause-line, rgba(255, 255, 255, 0.26));
    background: transparent;
    color: var(--rp-pause-ink, #ffffff);
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}
.rp-gh-exit {
    border-color: transparent;
    color: var(--rp-pause-muted, rgba(255, 255, 255, 0.74));
}
/* «Сообщить об ошибке»: a quiet link under the card's actions, not a third big button. */
.rp-gh-report {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    align-self: center;
    min-height: 40px;
    padding: 6px 12px;
    background: none;
    border: none;
    color: var(--rp-pause-muted, rgba(255, 255, 255, 0.74));
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    opacity: 0.8;
    cursor: pointer;
}
.rp-gh-report .rp-icon { font-size: 16px; }

/* The bug report form over the pause card (shared/client/bug-report.ts): the pause palette, above it. */
.rp-bug-overlay {
    --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);
    position: fixed;
    inset: 0;
    z-index: 990;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
    box-sizing: border-box;
    overflow-y: auto;
    background: rgba(9, 11, 20, 0.94);
    color: var(--rp-pause-ink);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: rp-pause-in 220ms ease-out;
}
.rp-bug-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 360px;
    margin: auto;
    text-align: center;
}
.rp-bug-card [hidden] { display: none !important; }
.rp-bug-title { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.25; color: var(--rp-pause-ink); }
.rp-bug-text {
    width: 100%;
    box-sizing: border-box;
    min-height: 104px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid var(--rp-pause-line);
    background: var(--rp-pause-chip);
    color: var(--rp-pause-ink);
    font: inherit;
    font-size: 16px;
    line-height: 1.4;
    resize: vertical;
}
.rp-bug-text::placeholder { color: var(--rp-pause-muted); opacity: 0.8; }
.rp-bug-text:focus { outline: 2px solid var(--rp-pause-ink); outline-offset: 1px; }
.rp-bug-attach {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    border-radius: 30px;
    border: 2px dashed var(--rp-pause-line);
    background: transparent;
    color: var(--rp-pause-ink);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.rp-bug-preview { position: relative; align-self: center; }
.rp-bug-thumb {
    display: block;
    max-width: 160px;
    max-height: 160px;
    border-radius: 12px;
    border: 1px solid var(--rp-pause-line);
}
.rp-bug-remove {
    position: absolute;
    top: -10px;
    right: -10px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--rp-pause-line);
    background: #12131a;
    color: var(--rp-pause-ink);
    cursor: pointer;
}
.rp-bug-status { margin: 0; font-size: 14px; color: #ffb4b4; }
.rp-bug-overlay .rp-bug-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 4px;
    background: var(--rp-pause-ink);
    color: #12131a;
    border: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.rp-bug-overlay .rp-bug-send:disabled { opacity: 0.45; cursor: default; box-shadow: none; }

/* The header's «Выйти из игры» replaces the online pause's own exit link. */
.rp-pause-card:has(> .rp-gh-actions) > .rp-pause-exit { display: none; }

@media (prefers-reduced-motion: reduce) {
    .rp-gh-timer--low { animation: none; }
}