/* Pełnoekranowy layout gry – wspólny dla podstron /gra/ */

html,
body.game-page {
    min-height: 100%;
    margin: 0;
    background: #020617;
    color: #f9fafb;
}

body.game-page--immersive {
    height: 100%;
    overflow: hidden;
}

html:has(body.game-page--immersive) {
    height: 100%;
    overflow: hidden;
}

body.game-page--immersive .game-wrapper {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    max-height: 100dvh;
    overflow: hidden;
}

.game-page .game-wrapper {
    position: relative;
    width: 100%;
    max-width: none;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    display: flex;
    flex-direction: column;
}

.game-page .game-navbar {
    margin: 0;
    border-radius: 0;
    flex-shrink: 0;
    background: rgba(2, 6, 23, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

body.game-page--immersive .game-navbar {
    padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
    padding-top: env(safe-area-inset-top, 0px);
}

/* Pasek alpha + zgłoś błąd — tuż pod navbarem */
.game-alpha-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    flex-shrink: 0;
    padding: 0.4rem clamp(0.75rem, 3vw, 1.5rem);
    background: rgba(15, 23, 42, 0.92);
    border-bottom: 1px solid rgba(251, 191, 36, 0.28);
    box-sizing: border-box;
}

body.game-page--immersive .game-alpha-bar {
    padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
}

.game-alpha-bar-text {
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.65rem;
    min-width: 0;
    font-size: 0.8rem;
    line-height: 1.35;
    color: #cbd5e1;
}

.game-alpha-bar-badge {
    display: inline-block;
    padding: 0.12rem 0.45rem;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0f172a;
    background: #fbbf24;
}

.game-alpha-bar-msg {
    color: #94a3b8;
}

.game-alpha-bar-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    margin-left: auto;
}

.game-alpha-bar-btn {
    flex-shrink: 0;
    padding: 0.35rem 0.75rem;
    border-radius: 7px;
    border: 1px solid rgba(251, 191, 36, 0.45);
    background: rgba(251, 191, 36, 0.12);
    color: #fde68a;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.game-alpha-bar-btn:hover {
    background: rgba(251, 191, 36, 0.22);
    border-color: rgba(251, 191, 36, 0.7);
    color: #fef3c7;
}

.game-alpha-bar-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #94a3b8;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.game-alpha-bar-close:hover {
    background: rgba(148, 163, 184, 0.15);
    color: #e2e8f0;
}

.game-alpha-bar-close:focus-visible {
    outline: 2px solid rgba(251, 191, 36, 0.6);
    outline-offset: 2px;
}

.game-alpha-bar-expand {
    display: none;
    align-items: center;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    line-height: 1;
}

.game-alpha-bar-expand:focus-visible {
    outline: 2px solid rgba(251, 191, 36, 0.6);
    outline-offset: 2px;
    border-radius: 4px;
}

.game-alpha-bar-expand .game-alpha-bar-badge {
    cursor: pointer;
    transition: filter 0.15s ease;
}

.game-alpha-bar-expand:hover .game-alpha-bar-badge {
    filter: brightness(1.08);
}

.game-alpha-bar--compact {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 3.55rem);
    right: env(safe-area-inset-right, 0px);
    left: auto;
    z-index: 39;
    width: fit-content;
    max-width: calc(100% - 1.5rem);
    margin: 0;
    align-self: auto;
    justify-content: center;
    gap: 0;
    padding: 0.15rem 0.45rem 0.15rem 0.5rem;
    min-height: 0;
    border: 1px solid rgba(251, 191, 36, 0.22);
    border-top: none;
    border-right: none;
    border-radius: 0 0 0 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

body.game-page--immersive .game-alpha-bar--compact {
    padding-left: 0.5rem;
    padding-right: 0.45rem;
}

.game-alpha-bar--compact .game-alpha-bar-text,
.game-alpha-bar--compact .game-alpha-bar-close {
    display: none;
}

.game-alpha-bar--compact .game-alpha-bar-expand {
    display: inline-flex;
}

.game-alpha-bar--compact .game-alpha-bar-actions {
    margin-left: 0;
    gap: 0.35rem;
}

.game-alpha-bar--compact .game-alpha-bar-btn {
    padding: 0.2rem 0.55rem;
    font-size: 0.72rem;
}

@media (max-width: 640px) {
    .game-alpha-bar {
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
        gap: 0.5rem;
    }

    .game-alpha-bar-msg {
        font-size: 0.72rem;
    }

    .game-alpha-bar-btn {
        padding: 0.3rem 0.55rem;
        font-size: 0.72rem;
    }

    .game-alpha-bar--compact {
        top: calc(env(safe-area-inset-top, 0px) + 3.05rem);
        right: env(safe-area-inset-right, 0px);
        padding: 0.1rem 0.4rem 0.1rem 0.45rem;
        border-radius: 0 0 0 8px;
    }

    .game-alpha-bar--compact .game-alpha-bar-btn {
        padding: 0.15rem 0.45rem;
        font-size: 0.68rem;
    }
}

.game-page .game-main {
    flex: 1;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 1.25rem clamp(1rem, 4vw, 2rem) 2.5rem;
    box-sizing: border-box;
}

.game-page .game-main--wide {
    max-width: 1200px;
}

/* Waluty: inline SVG w CSS (0 dodatkowych requestów, ~0.5 KB) */
.game-currency-icon {
    display: inline-block;
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
    vertical-align: -0.22em;
    background: no-repeat center / contain;
}
.game-currency-icon--coin {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.35' fill='%23f59e0b'/%3E%3Ccircle cx='8' cy='8' r='7.35' fill='none' stroke='%23b45309' stroke-width='1.15'/%3E%3Ccircle cx='8' cy='8' r='5.4' fill='none' stroke='%23fde68a' stroke-width='.7'/%3E%3Cpath fill='%2392400e' d='M3.7 8c1.25-1.4 2.85-2 4.7-1.2.9.4 1.5.8 1.9 1.2-.4.4-1 .8-1.9 1.2-1.85.8-3.45.2-4.7-1.2z'/%3E%3Cpath fill='%2392400e' d='M10.15 8 12.6 6.6v2.8z'/%3E%3Ccircle cx='5.5' cy='7.55' r='.4' fill='%23fef3c7'/%3E%3C/svg%3E");
}
.game-currency-icon--premium {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.35' fill='%238b5cf6'/%3E%3Ccircle cx='8' cy='8' r='7.35' fill='none' stroke='%235b21b6' stroke-width='1.15'/%3E%3Ccircle cx='8' cy='8' r='5.4' fill='none' stroke='%23ddd6fe' stroke-width='.7'/%3E%3Cpath fill='%23f5f3ff' d='M7.25 3.35h1.5v.95c.85.08 1.45.45 1.7 1.05l-1.05.5c-.15-.3-.5-.5-.95-.55v1.55c.95.15 1.55.55 1.85 1.15.32.6.28 1.3-.12 1.88-.42.62-1.15 1-2.13 1.12v1.05H7.25v-1.02c-.85-.1-1.48-.48-1.82-1.02l1.05-.5c.18.32.52.55 1.02.62v-1.6c-.9-.14-1.48-.52-1.75-1.1-.28-.55-.25-1.2.1-1.75.35-.55 1-.92 1.9-1.05V3.35zm0 2.55c-.42.1-.68.32-.8.55-.12.22-.1.48.08.72.16.22.45.38.72.42V5.9zm1.5 5.15v-1.7c.48.1.75.32.88.55.14.24.14.52-.02.78-.16.26-.45.4-.86.37z'/%3E%3C/svg%3E");
}