/* =========================================================================
   MANOWIECKI.PL — "Pościgaj się ze mną": modal gry. Osobny plik (nie
   style.css), bo to kod używany tylko wewnątrz modala, nie na całej stronie.
   Kolory łódek (#22c55e zielony gracz, #2f6fed niebieski Kamil) muszą być
   IDENTYCZNE z hex-ami w game.js (tam przebarwiają markery na canvasie) —
   zmieniając jeden, zmień drugi.
   ========================================================================= */

.km-game-modal {
    position: fixed; inset: 0; z-index: 410;
    display: flex; align-items: center; justify-content: center;
    padding: 4vh 4vw;
    background: rgba(6, 14, 26, .92);
    backdrop-filter: blur(6px);
    animation: km-game-in .25s ease;
}
@keyframes km-game-in { from { opacity: 0; } to { opacity: 1; } }

/* style.css chowa OS-owy kursor na .km-btn i podmienia go na obracające się
   logo (.km-cursor, z-index 300) — ta nakładka renderuje się POD modalem
   (z-index 410 wyżej), więc nad przyciskami w modalu nie byłoby żadnego
   kursora. Przywracamy zwykły wskaźnik tylko tutaj, zamiast ruszać globalną
   regułę w style.css. */
.km-game-panel .km-btn { cursor: pointer; }

.km-game-panel {
    position: relative;
    width: min(960px, 100%);
    max-height: 92vh;
    background: var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px;
    display: flex; flex-direction: column; gap: 12px;
    color: #fff;
}

.km-game-modal__close {
    position: absolute; top: -14px; right: -14px; z-index: 2;
    width: 44px; height: 44px; border-radius: 50%; border: none;
    background: rgba(255, 255, 255, .12); color: #fff; font-size: 22px; cursor: pointer;
    transition: background .2s ease;
}
.km-game-modal__close:hover { background: rgba(255, 255, 255, .25); }

.km-game-topbar { display: flex; align-items: center; justify-content: space-between; padding: 0 6px; font-size: 14px; }
.km-game-wind, .km-game-time { display: flex; align-items: center; gap: 8px; }
.km-game-wind__label, .km-game-time__label { text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 800; color: var(--cyan); }
.km-game-wind__arrow {
    display: inline-block; width: 0; height: 0;
    border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 13px solid #fff;
    transform-origin: 50% 65%;
}
.km-game-time__val { font-family: var(--font-display); font-size: 20px; letter-spacing: .04em; }

.km-game-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1000 / 700;
    border-radius: 12px;
    overflow: hidden;
    background: #0a1930;
}
.km-game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }

.km-game-ocs-banner {
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    background: var(--coral); color: #fff; font-weight: 700; font-size: 13px;
    padding: 8px 16px; border-radius: 30px; text-align: center; max-width: 90%;
    box-shadow: 0 10px 24px -8px rgba(255, 90, 60, .6); z-index: 3;
}

.km-game-countdown {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: clamp(64px, 14vw, 120px); color: #fff;
    text-shadow: 0 0 40px rgba(31, 228, 240, .6); pointer-events: none; z-index: 3;
}

.km-game-idle-overlay, .km-game-finish-overlay {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
    background: rgba(6, 14, 26, .55); text-align: center; padding: 20px; z-index: 4;
}
/* [hidden] i klasowe `display:flex` mają tę samą specyficzność — bez tego bloku
   author-owy `display:flex` wygrywa z domyślnym UA `[hidden]{display:none}` i te
   ekrany (oraz odliczanie) są widoczne CAŁY CZAS, zasłaniając grę od otwarcia modala. */
.km-game-idle-overlay[hidden], .km-game-finish-overlay[hidden], .km-game-countdown[hidden] { display: none; }
.km-game-finish__msg { font-family: var(--font-display); font-size: clamp(26px, 5vw, 38px); margin: 0; text-transform: uppercase; }

.km-game-legend { display: flex; gap: 22px; padding: 0 6px; font-size: 14px; flex-wrap: wrap; }
.km-game-legend__item { display: flex; align-items: center; gap: 8px; }
.km-game-legend__item i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.km-game-legend__item--you i { background: #22c55e; }
.km-game-legend__item--kamil i { background: #2f6fed; }
.km-game-legend__item b { font-weight: 700; }
.km-game-legend__item em { font-style: normal; color: rgba(255, 255, 255, .65); }

@media (max-width: 560px) {
    .km-game-panel { padding: 12px; gap: 8px; }
    .km-game-topbar { font-size: 12px; }
    .km-game-legend { gap: 14px; font-size: 13px; }
    .km-game-modal__close { top: -10px; right: -10px; width: 38px; height: 38px; }
}