/* =============================================================================
   kajakipodwarszawa.pl — koncept wizualny „OVERWORLD" (pixel art, 16-bit RPG)
   -----------------------------------------------------------------------------
   Postawa estetyczna: mapa świata z 16-bitowej gry przygodowej. Serwis JEST mapą
   rzek, więc mapa staje się interfejsem: overworld z domkami miast, wstęgami rzek
   i płynącymi kajakami; menu to dialogi RPG na pergaminie; pogoda to HUD;
   wypożyczalnie to karty questów. Zero rozmytych cieni, zero gradientów,
   zero przejść tweenowanych — stany zmieniają się skokowo (steps), jak w grze.

   Siatka: 1 piksel obrazu = --px (4 px CSS). Ramki, cienie, odstępy = wielokrotności --px.
   Pismo: Press Start 2P (nagłówki, liczby), Pixelify Sans (treść, UI),
          etykiety HUD = Pixelify Sans 600 wersalikami (Silkscreen nie ma Ś Ż Ł Ę Ą Ń Ć Ź). Google Fonts, z fallbackiem.

   Kontrast (WCAG 2.1, policzone skryptem — patrz KONCEPT.md):
     DZIEŃ  atrament #1E1B2E na pergaminie #F6E7C1 → 13,7:1   na tle #E9D5A1 → 11,6:1
            tekst-2  #4A4462 na pergaminie        →  7,5:1   na tle          →  6,3:1
            link     #1E4F94 na pergaminie        →  6,6:1   na tle → 5,6:1   biały na #1E4F94 → 7,9:1
            atrament na słońcu #F5B72B (CTA)      →  9,3:1   atrament na pomarańczu #EE7431 → 5,7:1
            biały na czerwieni #D3392E            →  4,7:1   pergamin na atramencie → 13,7:1
     NOC    tekst #F1E6C8 na #141A33 → 13,8:1  na panelu #1F2A4D → 11,3:1  na #2A3866 → 9,1:1
            tekst-2 #BDB4D8 na panelu → 7,1:1   link #8CC8FF na panelu → 7,9:1
            fokus: dzień atrament na tle 11,6:1, noc #FFD166 na tle 11,9:1 (≥ 3:1 wg 1.4.11)
            noc na CTA #FFD166 → 11,9:1          noc na #FFB347 → 9,6:1
   Czerwień i pomarańcz NIGDY jako mały tekst na pergaminie (3,9:1 / 3,3:1) —
   tylko jako tło z atramentowym napisem lub jako piksel ikony.
   ============================================================================ */

/* ---------- tokeny palety: 24 barwy jak na jednej palecie SNES -------------- */
:root {
    --px: 4px;

    --c-ink:     #1E1B2E;  --c-ink2:    #4A4462;
    --c-white:   #FFFDF5;  --c-paper:   #FFF8E6;
    --c-cream:   #F6E7C1;  --c-cream2:  #E9D5A1;
    --c-sky:     #9FDBF8;
    --c-sand:    #D8B466;  --c-sand2:   #B08A3E;
    --c-grass:   #79C24F;  --c-grass2:  #5DA83A;
    --c-forest:  #2E6B32;  --c-forest2: #1E4A25;
    --c-water:   #3D8FE0;  --c-water2:  #7FC4F2;  --c-water3: #245FB0;
    --c-sun:     #F5B72B;  --c-sun2:    #D89218;
    --c-orange:  #EE7431;  --c-orange2: #C4551F;
    --c-red:     #D3392E;
    --c-skin:    #E8B48A;
    --c-brown:   #7A4E2D;  --c-brown2:  #4E2F19;
    --c-stone:   #9A9AA8;

    /* semantyka (tylko te zmienia motyw nocny dla tekstu i powierzchni) */
    --tlo:        var(--c-cream2);
    --tlo-kropki: #DEC48C;
    --panel:      var(--c-cream);
    --panel-2:    var(--c-paper);
    --tekst:      var(--c-ink);
    --tekst-2:    var(--c-ink2);
    --link:       #1E4F94;
    --fokus:      var(--c-ink);
    --obrys:      var(--c-ink);
    --obrys-jasny:var(--c-white);
    --cta:        var(--c-sun);       --na-cta:   var(--c-ink);
    --cta-2:      var(--c-water3);    --na-cta-2: var(--c-white);
    --ciemny:     var(--c-ink);       --na-ciemnym: var(--c-cream);  --na-ciemnym-2: #BDB4D8;
    --cien:       var(--c-ink);

    --display: "Press Start 2P", "Courier New", monospace;
    --pismo:   "Pixelify Sans", "VT323", "Trebuchet MS", system-ui, sans-serif;
    --hud:     "Pixelify Sans", "Press Start 2P", "Courier New", monospace;   /* Silkscreen odpadł: brak polskich znaków */

    /* ramka 9-slice: 1 px atramentu + 1 px światła, róg bez piksela (jak w RPG) */
    --ramka: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6' shape-rendering='crispEdges'%3E%3Cpath fill='%231E1B2E' d='M1 0h4v1H1zM0 1h1v4H0zM5 1h1v4H5zM1 5h4v1H1zM1 1h1v1H1zM4 1h1v1H4zM1 4h1v1H1zM4 4h1v1H4z'/%3E%3Cpath fill='%23FFFDF5' d='M2 1h2v1H2zM1 2h1v2H1zM4 2h1v2H4zM2 4h2v1H2z'/%3E%3C/svg%3E");
    --ramka-ciemna: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6' shape-rendering='crispEdges'%3E%3Cpath fill='%231E1B2E' d='M1 0h4v1H1zM0 1h1v4H0zM5 1h1v4H5zM1 5h4v1H1zM1 1h1v1H1zM4 1h1v1H4zM1 4h1v1H1zM4 4h1v1H4z'/%3E%3Cpath fill='%23BDB4D8' d='M2 1h2v1H2zM1 2h1v2H1zM4 2h1v2H4zM2 4h2v1H2z'/%3E%3C/svg%3E");
    --kropki: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%23DEC48C' d='M1 1h1v1H1zM5 5h1v1H5z'/%3E%3C/svg%3E");
    color-scheme: light;
}

/* ---------- motyw nocny: ta sama mapa po zmroku ------------------------------
   Sprite'y zachowują ciemny obrys, ale zieleń i woda gasną, a okna domków
   (token sun) się świecą. Powierzchnie i tekst odwracają się jak w menu „noc". */
@media (prefers-color-scheme: dark) {
    :root:not([data-motyw="jasny"]) { color-scheme: dark;
        --c-ink: #0F0D1C; --c-ink2: #BDB4D8; --c-white: #E8E6F0; --c-paper: #2A3866;
        --c-cream: #D9CCB0; --c-cream2: #B8A98A; --c-sky: #2A3866;
        --c-sand: #A88A55; --c-sand2: #7E6438; --c-grass: #35633C; --c-grass2: #2A4F30;
        --c-forest: #1F4A2C; --c-forest2: #132E1C; --c-water: #2C5C9E; --c-water2: #5B8FD8; --c-water3: #1B3F70;
        --c-sun: #FFD166; --c-sun2: #E0A82E; --c-orange: #F08A4B; --c-orange2: #B85A24; --c-red: #E04E42;
        --c-brown: #6B4426; --c-brown2: #3E2512; --c-stone: #6E6E85;
        --tlo: #141A33; --tlo-kropki: #1B2344; --panel: #1F2A4D; --panel-2: #2A3866;
        --tekst: #F1E6C8; --tekst-2: #BDB4D8; --link: #8CC8FF; --fokus: #FFD166; --obrys: #0F0D1C; --obrys-jasny: #BDB4D8;
        --cta: #FFD166; --na-cta: #141A33; --cta-2: #8CC8FF; --na-cta-2: #141A33;
        --ciemny: #0F0D1C; --na-ciemnym: #F1E6C8; --na-ciemnym-2: #BDB4D8; --cien: #0F0D1C;
        --ramka: var(--ramka-ciemna);
        --kropki: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%231B2344' d='M1 1h1v1H1zM5 5h1v1H5z'/%3E%3Cpath fill='%23F1E6C8' fill-opacity='.35' d='M6 2h1v1H6z'/%3E%3C/svg%3E");
    }
}
:root[data-motyw="ciemny"] { color-scheme: dark;
    --c-ink: #0F0D1C; --c-ink2: #BDB4D8; --c-white: #E8E6F0; --c-paper: #2A3866;
    --c-cream: #D9CCB0; --c-cream2: #B8A98A; --c-sky: #2A3866;
    --c-sand: #A88A55; --c-sand2: #7E6438; --c-grass: #35633C; --c-grass2: #2A4F30;
    --c-forest: #1F4A2C; --c-forest2: #132E1C; --c-water: #2C5C9E; --c-water2: #5B8FD8; --c-water3: #1B3F70;
    --c-sun: #FFD166; --c-sun2: #E0A82E; --c-orange: #F08A4B; --c-orange2: #B85A24; --c-red: #E04E42;
    --c-brown: #6B4426; --c-brown2: #3E2512; --c-stone: #6E6E85;
    --tlo: #141A33; --tlo-kropki: #1B2344; --panel: #1F2A4D; --panel-2: #2A3866;
    --tekst: #F1E6C8; --tekst-2: #BDB4D8; --link: #8CC8FF; --fokus: #FFD166; --obrys: #0F0D1C; --obrys-jasny: #BDB4D8;
    --cta: #FFD166; --na-cta: #141A33; --cta-2: #8CC8FF; --na-cta-2: #141A33;
    --ciemny: #0F0D1C; --na-ciemnym: #F1E6C8; --na-ciemnym-2: #BDB4D8; --cien: #0F0D1C;
    --ramka: var(--ramka-ciemna);
    --kropki: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%231B2344' d='M1 1h1v1H1zM5 5h1v1H5z'/%3E%3Cpath fill='%23F1E6C8' fill-opacity='.35' d='M6 2h1v1H6z'/%3E%3C/svg%3E");
}

/* ---------- reset i podstawy ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
    margin: 0; background: var(--tlo) var(--kropki); color: var(--tekst);
    font: 400 18px/1.5 var(--pismo); -webkit-font-smoothing: none; -moz-osx-font-smoothing: grayscale;
}
/* w grze nic nie „płynie" między stanami — stany się przełączają */
*, *::before, *::after { transition: none !important; }
img, canvas, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
canvas, .piksel-foto, img.piksel { image-rendering: pixelated; image-rendering: crisp-edges; }
a { color: var(--link); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration: none; background: var(--link); color: var(--panel); }
:focus-visible { outline: var(--px) solid var(--fokus); outline-offset: 2px; }
::selection { background: var(--c-sun); color: var(--c-ink); }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: 1.5; margin: 0 0 16px; letter-spacing: 0; text-wrap: balance; }
h1 { font-size: 26px; line-height: 1.6; }
h2 { font-size: 18px; }
h3 { font-family: var(--pismo); font-weight: 700; font-size: 22px; line-height: 1.3; }
h4 { font-size: 12px; }
p { margin: 0 0 14px; }
b, strong { font-weight: 700; }
.hud { font-family: var(--hud); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }
.display { font-family: var(--display); }
.szer { width: min(1180px, 100% - 32px); margin-inline: auto; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.spr { display: inline-block; line-height: 0; vertical-align: middle; }
.spr svg { display: inline-block; width: auto; }
.spr .kl { display: none; }
.spr[data-klatka="0"] .kl-0, .spr[data-klatka="1"] .kl-1, .spr[data-klatka="2"] .kl-2 { display: inline; }
.spr:not([data-klatki]) .kl { display: inline; }

/* ---------- ramka RPG: 9-slice ze SVG, cień = twarde przesunięcie ------------ */
.ramka {
    border: calc(2 * var(--px)) solid transparent;
    border-image: var(--ramka) 2 / calc(2 * var(--px)) stretch;
    background: var(--panel); background-clip: padding-box;
    box-shadow: var(--px) var(--px) 0 var(--cien);
}
.ramka-ciemna { background: var(--ciemny); color: var(--na-ciemnym); }
.ramka-ciemna a:not(.przycisk) { color: var(--c-sun); }   /* :not(.przycisk) — kolor linku nie może przykrywać napisu na przycisku */
.ramka-ciemna a:not(.przycisk):hover { background: var(--c-sun); color: var(--c-ink); }
.ramka-ciemna .przycisk, .ramka-ciemna .przycisk:hover { color: var(--na-cta); }
.ramka-ciemna .cena a:not(.przycisk) { color: var(--link); }   /* bez tego „Zarejestruj firmę” miało jasnoniebieski napis na żółtym */
.ramka-ciemna .cena a:not(.przycisk):hover { background: var(--link); color: var(--panel); }
.ramka-ciemna .przycisk-2, .ramka-ciemna .przycisk-2:hover { color: var(--na-cta-2); }
.ramka-plaska { box-shadow: none; }

/* ---------- przyciski: klocki z cieniem, wciśnięcie = skok o 1 px obrazu ------ */
.przycisk {
    display: inline-flex; align-items: center; gap: 10px; cursor: pointer; text-decoration: none;
    font-family: var(--display); font-size: 12px; line-height: 1; text-transform: uppercase;
    padding: 14px 18px; color: var(--na-cta); background: var(--cta);
    border: var(--px) solid var(--obrys); box-shadow: var(--px) var(--px) 0 var(--cien);
    position: relative; -webkit-user-select: none; user-select: none;
}
.przycisk:hover { background: var(--cta); color: var(--na-cta); text-decoration: none; transform: translate(-2px, -2px); box-shadow: calc(var(--px) + 2px) calc(var(--px) + 2px) 0 var(--cien); }
.przycisk:active { transform: translate(var(--px), var(--px)); box-shadow: 0 0 0 var(--cien); }
.przycisk-2 { background: var(--cta-2); color: var(--na-cta-2); }
.przycisk-2:hover { background: var(--cta-2); color: var(--na-cta-2); }
.przycisk-cichy { background: var(--panel); color: var(--tekst); }
.przycisk-cichy:hover { background: var(--panel); color: var(--tekst); }
.przycisk-maly { font-size: 10px; padding: 10px 12px; }
.przycisk .spr svg { width: 16px; height: auto; }
.przycisk:disabled { opacity: .55; cursor: default; }

/* ---------- pasek tytułu sekcji: jak nagłówek menu w grze -------------------- */
.pasek-tytul { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 24px; }
.pasek-tytul h2 { margin: 0; padding: 10px 14px; background: var(--ciemny); color: var(--na-ciemnym); box-shadow: var(--px) var(--px) 0 var(--c-sun); }
.pasek-tytul .hud { color: var(--tekst-2); }
.pasek-tytul .hud b { color: var(--tekst); }
.sekcja { padding: 40px 0; }

/* ---------- nagłówek strony: pasek HUD -------------------------------------- */
.naglowek { position: sticky; top: 0; z-index: 30; background: var(--panel); border-bottom: var(--px) solid var(--obrys); box-shadow: 0 var(--px) 0 var(--c-sun); }
.naglowek-wnetrze { display: flex; align-items: center; gap: 20px; min-height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 12px; color: var(--tekst); text-decoration: none; font-family: var(--display); font-size: 12px; line-height: 1.6; }
.logo:hover { background: none; color: var(--tekst); }
.logo .spr svg { width: 56px; height: auto; }
.logo b { color: var(--link); font-weight: 400; }
.logo small { display: block; font-family: var(--hud); font-weight: 600; font-size: 10px; letter-spacing: 1px; color: var(--tekst-2); text-transform: uppercase; }
.menu { display: flex; gap: 6px; margin-left: auto; }
.menu a { font-family: var(--hud); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; padding: 8px 10px; color: var(--tekst); text-decoration: none; border: var(--px) solid transparent; }
.menu a:hover, .menu a[aria-current="true"] { border-color: var(--obrys); background: var(--panel-2); color: var(--tekst); box-shadow: 2px 2px 0 var(--cien); }
.naglowek-akcje { display: flex; gap: 8px; align-items: center; }
.ikona-przycisk { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: var(--panel-2); color: var(--tekst); border: var(--px) solid var(--obrys); box-shadow: 2px 2px 0 var(--cien); cursor: pointer; }
.ikona-przycisk:active { transform: translate(2px, 2px); box-shadow: none; }
.ikona-przycisk .spr svg { width: 22px; height: auto; }
/* powrót do klasycznego UI serwisu — na razie sam przycisk, integracja frontów w osobnej sesji */
.powrot { width: auto; padding: 0 12px; gap: 8px; text-decoration: none; font-family: var(--hud); font-weight: 600; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
.powrot:hover { background: var(--c-sun); color: var(--c-ink); }
.powrot .spr svg { width: 18px; }
@media (max-width: 640px) { .powrot { padding: 0; width: 44px; order: 3; } .powrot span { display: none; } }   /* na telefonie: trzecia ikona, po dniu/nocy i nutce */
[data-motyw-przelacznik] .gdy-noc, :root[data-motyw="ciemny"] [data-motyw-przelacznik] .gdy-dzien { display: none; }
:root[data-motyw="ciemny"] [data-motyw-przelacznik] .gdy-noc { display: inline-block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-motyw="jasny"]) [data-motyw-przelacznik] .gdy-dzien { display: none; }
    :root:not([data-motyw="jasny"]) [data-motyw-przelacznik] .gdy-noc { display: inline-block; }
}

/* ---------- hero: dialog RPG + HUD pogody, pod spodem overworld -------------- */
.hero { padding: 32px 0 0; }
.hero-siatka { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: stretch; }
.dialog { padding: 28px 32px 24px; position: relative; }
.dialog .hud { color: var(--tekst-2); margin-bottom: 14px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.dialog h1 em { font-style: normal; color: var(--link); }
.dialog .zajawka { font-size: 19px; max-width: 62ch; color: var(--tekst); }
.dialog .zajawka b { color: var(--tekst); }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin: 20px 0 22px; }
.hero-liczby { display: flex; gap: 8px 28px; flex-wrap: wrap; }
.hero-liczby div { display: flex; align-items: baseline; gap: 10px; }
.hero-liczby b { font-family: var(--display); font-size: 22px; color: var(--tekst); }
.hero-liczby span { font-family: var(--hud); font-weight: 600; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--tekst-2); }
.dialog .kursor { position: absolute; right: 22px; bottom: 16px; color: var(--link); animation: mrug 1s steps(2, jump-none) infinite; }
.dialog .kursor svg { width: 16px; }
@keyframes mrug { from { opacity: 1; } to { opacity: 0; } }
@keyframes podskok { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-1 * var(--px))); } }
.podskok { animation: podskok .5s steps(1, end) infinite; }

/* HUD pogody */
.pogoda { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.pogoda h2 { font-size: 12px; margin: 0; display: flex; justify-content: space-between; align-items: center; }
.pogoda h2 small { font-family: var(--hud); font-weight: 600; font-size: 10px; color: var(--tekst-2); letter-spacing: 1px; }
.pogoda-teraz { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.pogoda-teraz .spr svg { width: 80px; height: auto; }
.pogoda-teraz .temp { font-family: var(--display); font-size: 30px; line-height: 1; margin-bottom: 8px; }
.pogoda-teraz .opis { font-size: 16px; color: var(--tekst-2); }
.pogoda-teraz .opis b { color: var(--tekst); }
.pogoda-dni { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pogoda-dni div { text-align: center; padding: 8px 4px; background: var(--panel-2); border: 2px solid var(--obrys); font-family: var(--hud); font-weight: 600; font-size: 11px; text-transform: uppercase; }
.pogoda-dni .spr svg { width: 32px; height: auto; margin: 4px auto; }
.pogoda-dni .t { font-family: var(--display); font-size: 12px; }
.pogoda-splyw { padding: 10px 12px; font-size: 15px; line-height: 1.35; border: 2px solid var(--obrys); background: var(--c-sun); color: var(--c-ink); }
.pogoda-splyw.meh { background: var(--panel-2); color: var(--tekst); }
.pogoda-splyw.zle { background: var(--c-orange); color: var(--c-ink); }
.pasek-hp { display: flex; align-items: center; gap: 8px; font-family: var(--hud); font-weight: 600; font-size: 10px; text-transform: uppercase; color: var(--tekst-2); }
.pasek-hp i { display: block; height: 12px; flex: 1; border: 2px solid var(--obrys); background: var(--panel-2); position: relative; }
.pasek-hp i::before { content: ""; position: absolute; inset: 0; width: var(--proc, 60%); background: var(--c-grass); }
.pasek-hp i.slabo::before { background: var(--c-orange); }

/* overworld */
.overworld { margin-top: 28px; }   /* tylko góra — skrót margin zerował margin-inline: auto z .szer i mapa przyklejała się do lewej krawędzi */
.ow-kontener { overflow-x: auto; overflow-y: hidden; border: var(--px) solid var(--obrys); box-shadow: var(--px) var(--px) 0 var(--cien); background: var(--c-water3); }
.ow-scena { position: relative; margin-inline: auto; }
.ow-canvas { display: block; }
.ow-etykiety { position: absolute; inset: 0; }
.ow-etykieta { position: absolute; transform: translate(-50%, -100%); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-family: var(--hud); font-weight: 600; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; }
.ow-etykieta:hover { background: none; }
.ow-miasto { padding: 2px 5px; background: var(--c-cream); color: var(--c-ink); border: 2px solid var(--c-ink); box-shadow: 2px 2px 0 var(--c-ink); }
.ow-miasto .ow-ile { font-family: var(--display); font-size: 8px; padding: 2px 3px; background: var(--c-ink); color: var(--c-cream); }
.ow-miasto:hover, .ow-miasto:focus-visible { background: var(--c-sun); z-index: 60 !important; }
/* „kropka": etykieta bez miejsca — sam obszar dotyku nad domkiem/pinezką, nazwa na hover/focus */
.ow-kropka { width: 24px; height: 24px; min-width: 24px; padding: 0; background: transparent; border-color: transparent; box-shadow: none; transform: translate(-50%, -30%); }
.ow-kropka .ow-nazwa, .ow-kropka .ow-ile { display: none; }
.ow-kropka:hover, .ow-kropka:focus-visible { width: auto; height: auto; padding: 2px 5px; background: var(--c-sun); color: var(--c-ink); border-color: var(--c-ink); box-shadow: 2px 2px 0 var(--c-ink); transform: translate(-50%, -100%); z-index: 60 !important; }
.ow-kropka:hover .ow-nazwa, .ow-kropka:hover .ow-ile, .ow-kropka:focus-visible .ow-nazwa, .ow-kropka:focus-visible .ow-ile { display: inline; }
.ow-rzeka { transform: translate(-50%, -50%); padding: 1px 6px; color: var(--na-rzece, #FFFDF5); background: var(--rzeka, var(--c-water3)); border: 2px solid var(--c-ink); font-size: 10px; letter-spacing: 1px; }
.ow-rzeka .ow-ile { display: none; }
.ow-rzeka:hover, .ow-rzeka:focus-visible { background: var(--c-white); color: var(--c-ink); z-index: 3; }
.ow-pinezka { transform: translate(-50%, -100%); padding: 3px 7px; background: var(--pinezka, var(--c-sun)); color: var(--na-pinezce, var(--c-ink)); border: 2px solid var(--c-ink); box-shadow: 2px 2px 0 var(--c-ink); font-size: 11px; }
.ow-pinezka:hover, .ow-pinezka:focus-visible { background: var(--c-white); color: var(--c-ink); z-index: 60 !important; }
.ow-pinezka.ow-kropka { background: transparent; border-color: transparent; box-shadow: none; }
.ow-legenda { display: flex; gap: 8px 22px; flex-wrap: wrap; align-items: center; margin-top: 12px; font-family: var(--hud); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--tekst-2); }
.ow-legenda span { display: inline-flex; align-items: center; gap: 8px; }
.ow-legenda .spr svg { width: 20px; height: auto; }
.ow-legenda i { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--obrys); }
.ow-wskazowka { display: none; }

/* ---------- karty poziomów (rzeki) ------------------------------------------ */
.poziomy { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.poziom { display: flex; flex-direction: column; text-decoration: none; color: var(--tekst); position: relative; }
.poziom:hover { background: var(--panel); color: var(--tekst); transform: translate(calc(-1 * var(--px)), calc(-1 * var(--px))); box-shadow: calc(2 * var(--px)) calc(2 * var(--px)) 0 var(--cien); }
.poziom-glowa { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: var(--rzeka); color: var(--na-rzece, #fff); border-bottom: var(--px) solid var(--obrys); }
.poziom-glowa b { font-family: var(--display); font-size: 13px; font-weight: 400; }
.poziom-glowa .nr { font-family: var(--hud); font-weight: 600; font-size: 10px; letter-spacing: 1px; opacity: .9; }
.poziom-tresc { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.poziom-tresc p { margin: 0; font-size: 16px; line-height: 1.4; color: var(--tekst-2); }
.poziom-stopka { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-family: var(--hud); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--tekst-2); }
.poziom-stopka b { font-family: var(--display); font-size: 14px; color: var(--tekst); }
.trudnosc { display: inline-flex; gap: 3px; }
.trudnosc i { width: 12px; height: 12px; border: 2px solid var(--obrys); background: var(--panel-2); box-shadow: 1px 1px 0 var(--cien); }
.trudnosc i.on { background: var(--c-sun); }
.poziom .lodka { position: absolute; right: 12px; top: 40px; }
.poziom .lodka svg { width: 48px; }

/* ---------- karty questów (wypożyczalnie) ----------------------------------- */
.questy { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.quest { display: flex; flex-direction: column; }
.quest-foto { border-bottom: var(--px) solid var(--obrys); background: var(--c-water); aspect-ratio: 16 / 9; overflow: hidden; position: relative; }
.quest-foto canvas, .quest-foto img { width: 100%; height: 100%; object-fit: cover; }
.quest-foto .scena { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; gap: 8px; padding-bottom: 8%; background: linear-gradient(to bottom, var(--c-sky) 0 55%, var(--c-water) 55% 100%); }
.quest-foto .scena .spr svg { width: 112px; }
.quest-foto .scena .drzewo svg { width: 28px; }
.quest-foto .odznaka { position: absolute; left: 10px; top: 10px; font-family: var(--hud); font-weight: 600; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; padding: 3px 7px; background: var(--c-sun); color: var(--c-ink); border: 2px solid var(--c-ink); }
.quest-tresc { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.quest-tresc h3 { font-family: var(--display); font-weight: 400; font-size: 12px; line-height: 1.6; margin: 0; }
.quest-tresc h3 a { color: var(--tekst); text-decoration: none; }
.quest-tresc h3 a:hover { background: var(--c-sun); color: var(--c-ink); }
.quest-gdzie { font-family: var(--hud); font-weight: 600; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--tekst-2); display: flex; gap: 8px; align-items: center; }
.quest-gdzie .spr svg { width: 12px; }
.quest-tresc p { margin: 0; font-size: 16px; line-height: 1.4; }
.ekwipunek { display: flex; flex-wrap: wrap; gap: 6px; }
.ekwipunek span { display: inline-flex; align-items: center; gap: 6px; font-family: var(--hud); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; padding: 3px 7px; background: var(--panel-2); border: 2px solid var(--obrys); }
.ekwipunek .spr svg { width: 14px; }
.gwiazdki { display: inline-flex; gap: 2px; align-items: center; font-family: var(--hud); font-weight: 600; font-size: 11px; color: var(--tekst-2); }
.gwiazdki .spr svg { width: 14px; }
.quest-akcje { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }

/* ---------- lista miejscowości: menu wyboru --------------------------------- */
.miasta { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.miasto { display: flex; align-items: center; gap: 10px; padding: 8px 10px; text-decoration: none; color: var(--tekst); background: var(--panel); border: var(--px) solid var(--obrys); box-shadow: 2px 2px 0 var(--cien); font-size: 16px; }
.miasto:hover { background: var(--c-sun); color: var(--c-ink); }
.miasto .spr svg { width: 22px; }
.miasto b { font-weight: 600; }
.miasto small { margin-left: auto; font-family: var(--display); font-size: 10px; }
.miasto em { display: block; font-style: normal; font-family: var(--hud); font-weight: 600; font-size: 9px; letter-spacing: .5px; text-transform: uppercase; color: var(--tekst-2); }
.miasto:hover em { color: var(--c-ink); }

/* ---------- sklep (B2B) ------------------------------------------------------ */
.sklep { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; padding: 28px 32px; }
.sklep h2 { color: var(--na-ciemnym); }
.sklep p { color: var(--na-ciemnym-2); }
.sklep ul { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.sklep li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; }
.sklep li .spr { flex: none; margin-top: 3px; }
.sklep li > span { min-width: 0; overflow-wrap: anywhere; }   /* adres „kajakipodwarszawa.pl/rzeka/twoja-nazwa” nie ma spacji — bez tego rozpychał stronę na telefonie */
.sklep li .spr svg { width: 20px; }
.cena { padding: 20px; background: var(--panel); color: var(--tekst); border: var(--px) solid var(--obrys); display: flex; flex-direction: column; gap: 12px; align-self: start; box-shadow: var(--px) var(--px) 0 var(--c-sun); }
.cena .kwota { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-size: 24px; }
.cena .kwota .spr svg { width: 32px; }
.cena .kwota small { font-family: var(--hud); font-weight: 600; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--tekst-2); }
.cena .push { font-family: var(--hud); font-weight: 600; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--tekst-2); line-height: 1.8; }
.cena .push b { color: var(--tekst); font-family: var(--display); font-size: 10px; }
.cena .przycisk { align-self: flex-start; }
.pytania { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.pytania p { margin: 0; font-size: 16px; padding: 12px 14px; }

/* ---------- poradnik: sceny -------------------------------------------------- */
.sceny { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.scena-karta { display: flex; flex-direction: column; }
.scena-obraz { height: 130px; position: relative; overflow: hidden; border-bottom: var(--px) solid var(--obrys); background: linear-gradient(to bottom, var(--c-sky) 0 60%, var(--c-water) 60% 100%); display: flex; align-items: flex-end; justify-content: center; gap: 6px; padding-bottom: 12px; }
.scena-obraz .spr svg { width: 104px; }
.scena-obraz .drzewo svg, .scena-obraz .mini svg { width: 36px; }
.scena-obraz .slonce { position: absolute; right: 14px; top: 10px; }
.scena-obraz .slonce svg { width: 40px; }
.scena-obraz .chmura { position: absolute; left: 12px; top: 12px; }
.scena-obraz .chmura svg { width: 48px; }
.scena-obraz.szeroka { background: linear-gradient(to bottom, var(--c-sky) 0 40%, var(--c-water) 40% 100%); }
.scena-obraz.las { background: linear-gradient(to bottom, var(--c-sky) 0 45%, var(--c-forest2) 45% 62%, var(--c-water3) 62% 100%); }
.scena-tresc { padding: 14px 16px 16px; }
.scena-tresc h3 { margin: 0 0 8px; }
.scena-tresc p { margin: 0; font-size: 16px; line-height: 1.45; }
.tresc { max-width: 76ch; }
.tresc p { font-size: 18px; }

/* ---------- stopka ----------------------------------------------------------- */
.stopka { margin-top: 40px; background: var(--ciemny); color: var(--na-ciemnym); border-top: var(--px) solid var(--obrys); }
.fale { height: 24px; background: var(--fala-uri) repeat-x; background-size: 64px 12px; background-position: 0 bottom; background-color: var(--tlo); }
.stopka-siatka { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; padding: 36px 0 24px; }
.stopka h4 { color: var(--c-sun); margin-bottom: 12px; }
.stopka a { display: block; color: var(--na-ciemnym); text-decoration: none; padding: 3px 0; font-size: 16px; }
.stopka a:hover { background: var(--c-sun); color: var(--c-ink); }
.stopka p { color: var(--na-ciemnym-2); font-size: 16px; }
.stopka-dol { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 0 28px; border-top: 2px solid var(--na-ciemnym-2); font-family: var(--hud); font-weight: 600; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--na-ciemnym-2); }
.stopka-dol a { display: inline; padding: 0; font-family: inherit; font-size: inherit; color: var(--c-sun); }

/* ---------- dymki: powiadomienia i toast -------------------------------------- */
.dymek { position: absolute; right: 0; top: calc(100% + 12px); width: min(360px, 92vw); padding: 16px 18px; z-index: 40; display: none; }
.dymek[open] { display: block; }
.dymek h3 { font-family: var(--display); font-size: 11px; margin: 0 0 12px; }
.dymek label { display: flex; align-items: center; gap: 10px; font-size: 16px; padding: 6px 0; cursor: pointer; }
.dymek input[type="checkbox"] { appearance: none; width: 20px; height: 20px; border: var(--px) solid var(--obrys); background: var(--panel-2); margin: 0; flex: none; }
.dymek input[type="checkbox"]:checked { background: var(--c-sun); box-shadow: inset 0 0 0 4px var(--panel-2); }
.dymek .akcje { display: flex; gap: 8px; margin-top: 10px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; padding: 12px 18px; font-family: var(--display); font-size: 11px; visibility: hidden; }
.toast[open] { visibility: visible; }

/* ---------- overlay promocji (modal jak w serwisie, tylko pikselowy) --------- */
.overlay { position: fixed; inset: 0; z-index: 70; display: none; background-color: rgba(30, 27, 46, .55); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Cpath fill='%231E1B2E' d='M0 0h2v2H0zM2 2h2v2H2z'/%3E%3C/svg%3E"); }
.overlay[open] { display: block; overflow-y: auto; padding: 32px 16px 48px; }
.overlay-okno { width: min(780px, 100%); margin: 0 auto; padding: 24px 28px 22px; }
.overlay-glowa { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.overlay-glowa h2 { font-size: 14px; line-height: 1.6; margin: 0 0 8px; }
.overlay-glowa p { margin: 0; font-size: 16px; color: var(--tekst-2); max-width: 60ch; }
.pref-grupa { margin-top: 18px; }
.pref-grupa > span { display: block; font-family: var(--hud); font-weight: 600; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--tekst-2); margin-bottom: 8px; }
.pref-chipy { display: flex; flex-wrap: wrap; gap: 8px; }
.pref-chipy.poziomo { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.chip { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: var(--hud); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; padding: 7px 10px; color: var(--tekst); background: var(--panel-2); border: var(--px) solid var(--obrys); box-shadow: 2px 2px 0 var(--cien); white-space: nowrap; }
.chip:active { transform: translate(2px, 2px); box-shadow: none; }
.chip[aria-pressed="true"] { background: var(--c-sun); color: var(--c-ink); }
.chip[aria-pressed="true"]::before { content: "✓ "; }
.chip small { font-family: var(--display); font-size: 8px; padding: 2px 4px; background: var(--ciemny); color: var(--na-ciemnym); }
.chip[aria-pressed="true"] small { background: var(--c-ink); color: var(--c-cream); }
.pref-szukaj { position: relative; margin-top: 10px; }
.pref-szukaj input { width: 100%; font: 500 16px/1.3 var(--pismo); padding: 10px 12px; color: var(--tekst); background: var(--panel-2); border: var(--px) solid var(--obrys); box-shadow: inset 2px 2px 0 var(--cien); }
.pref-szukaj input::placeholder { color: var(--tekst-2); opacity: 1; }
.pref-podpowiedzi { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; background: var(--panel); border: var(--px) solid var(--obrys); box-shadow: var(--px) var(--px) 0 var(--cien); display: none; max-height: 220px; overflow-y: auto; }
.pref-podpowiedzi[open] { display: block; }
.pref-podpowiedz { display: flex; justify-content: space-between; gap: 10px; width: 100%; text-align: left; padding: 8px 12px; border: 0; background: none; color: var(--tekst); font: 500 16px var(--pismo); cursor: pointer; }
.pref-podpowiedz:hover, .pref-podpowiedz:focus-visible { background: var(--c-sun); color: var(--c-ink); }
.pref-podpowiedz span { font-family: var(--hud); font-size: 11px; text-transform: uppercase; color: var(--tekst-2); }
.pref-podpowiedz:hover span { color: var(--c-ink); }
.pref-pusto, .pref-brak { margin: 0; font-size: 15px; color: var(--tekst-2); padding: 8px 12px; }
.overlay-stopka { display: flex; gap: 12px 18px; align-items: center; flex-wrap: wrap; margin-top: 22px; padding-top: 16px; border-top: var(--px) solid var(--obrys); }
.powiadomienia-status { font-family: var(--hud); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--tekst-2); }
.powiadomienia-status.on { color: var(--c-forest); }
:root[data-motyw="ciemny"] .powiadomienia-status.on { color: var(--c-grass); }
@media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) .powiadomienia-status.on { color: var(--c-grass); } }
.overlay-jak { margin-top: 18px; padding: 12px 14px; font-size: 15px; background: var(--panel-2); border: 2px solid var(--obrys); }
.overlay-jak b { font-family: var(--display); font-size: 10px; }

/* ---------- muzyka: walkman w dymku pod nutką ------------------------------- */
#nutka.gra .spr { animation: podskok .5s steps(1, end) infinite; }
.muzyka h3 { display: flex; align-items: center; gap: 10px; }
.muzyka h3 .spr svg { width: 22px; }
.muzyka h3 .korektor { display: none; }
.muzyka.gra h3 .korektor { display: inline-block; }
.utwory { display: grid; gap: 6px; margin: 10px 0; }
.utwor { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; text-align: left; padding: 8px 10px; border: var(--px) solid var(--obrys); background: var(--panel-2); color: var(--tekst); cursor: pointer; font: 500 15px/1.3 var(--pismo); box-shadow: 2px 2px 0 var(--cien); }
.utwor:active { transform: translate(2px, 2px); box-shadow: none; }
.utwor[aria-pressed="true"] { background: var(--c-sun); color: var(--c-ink); }
.utwor b { display: block; font-family: var(--display); font-size: 9px; line-height: 1.6; }
.utwor small { display: block; font-family: var(--hud); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--tekst-2); }
.utwor[aria-pressed="true"] small { color: var(--c-ink); }
.utwor .spr svg { width: 16px; }
.utwor em { font-style: normal; font-family: var(--display); font-size: 9px; }
.muzyka-sterowanie { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.muzyka-sterowanie .ikona-przycisk { width: 40px; height: 40px; }
.muzyka-sterowanie .ikona-przycisk .spr svg { width: 18px; }
.muzyka-sterowanie input[type="range"] { flex: 1; min-width: 80px; appearance: none; height: 12px; border: 2px solid var(--obrys); background: var(--panel-2); margin: 0; }
.muzyka-sterowanie input[type="range"]::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; background: var(--c-sun); border: 2px solid var(--obrys); }
.muzyka-sterowanie input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 0; background: var(--c-sun); border: 2px solid var(--obrys); }
.muzyka-licencja { margin-top: 12px; padding-top: 10px; border-top: 2px solid var(--obrys); font-size: 13px; line-height: 1.45; color: var(--tekst-2); }
.muzyka-licencja b { color: var(--tekst); font-weight: 600; }
.muzyka-licencja a { color: var(--link); }
.odznaka-lic { display: inline-block; font-family: var(--display); font-size: 8px; padding: 2px 4px; background: var(--ciemny); color: var(--na-ciemnym); vertical-align: 1px; }

/* ---------- strona licencji muzyki ---------------------------------------- */
.utwory-lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.utwor-karta { padding: 18px 22px; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: start; }
.utwor-karta h3, .utwor-karta p { overflow-wrap: anywhere; }   /* linki do OpenGameArt i ścieżki plików łamią się zamiast poszerzać kartę */
.utwor-karta .spr svg { width: 48px; }
.utwor-karta h3 { margin: 0 0 6px; font-family: var(--display); font-weight: 400; font-size: 12px; line-height: 1.6; }
.utwor-karta p { margin: 4px 0; font-size: 16px; }
.utwor-karta code { font-family: var(--hud); font-size: 13px; background: var(--panel-2); padding: 1px 6px; border: 2px solid var(--obrys); }

/* ---------- wizytówka (karta postaci) ---------------------------------------- */
.okruszki { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-family: var(--hud); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--tekst-2); padding: 18px 0 0; }
.okruszki a { color: var(--link); text-decoration: none; }
.okruszki .spr svg { width: 10px; }
.postac { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 24px; align-items: start; margin-top: 18px; }
.galeria { padding: 0; overflow: hidden; }
.galeria-glowne { aspect-ratio: 16 / 9; background: var(--c-water); border-bottom: var(--px) solid var(--obrys); }
.galeria-glowne canvas, .galeria-glowne img { width: 100%; height: 100%; object-fit: cover; }
.galeria-miniatury { display: grid; grid-template-columns: repeat(3, 1fr); }
.galeria-miniatury button { padding: 0; border: 0; border-right: var(--px) solid var(--obrys); background: var(--c-water); cursor: pointer; aspect-ratio: 16 / 9; overflow: hidden; }
.galeria-miniatury button:last-child { border-right: 0; }
.galeria-miniatury button[aria-pressed="true"] { box-shadow: inset 0 0 0 var(--px) var(--c-sun); }
.galeria-miniatury canvas, .galeria-miniatury img { width: 100%; height: 100%; object-fit: cover; }
.statystyki { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.statystyki h1 { font-size: 16px; line-height: 1.6; margin: 0; }
.stat { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: center; font-size: 16px; }
.stat .spr svg { width: 22px; }
.stat b { display: block; font-family: var(--hud); font-weight: 600; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--tekst-2); }
.stat a { color: var(--link); text-decoration: none; font-weight: 600; }
.stat a:hover { background: var(--c-sun); color: var(--c-ink); }
.statystyki .quest-akcje { padding-top: 4px; }
.pasek-poziom { display: flex; align-items: center; gap: 8px; font-family: var(--hud); font-weight: 600; font-size: 10px; text-transform: uppercase; color: var(--tekst-2); }
.pasek-poziom i { flex: 1; display: block; height: 12px; border: 2px solid var(--obrys); background: var(--panel-2); position: relative; }
.pasek-poziom i::before { content: ""; position: absolute; inset: 0; width: var(--proc, 80%); background: var(--c-sun); }
.opis-firmy { padding: 22px 26px; margin-top: 24px; }
.opis-firmy h2 { margin-bottom: 14px; }
.opis-firmy p { font-size: 18px; max-width: 72ch; }
.mapka-mini { margin-top: 24px; }
.mapka-mini .ow-kontener { box-shadow: none; }

/* ---------- 404 --------------------------------------------------------------- */
.strona-404 { min-height: 80vh; display: grid; place-items: center; padding: 40px 0; }
.karta-404 { max-width: 720px; text-align: center; padding: 0; overflow: hidden; }
.karta-404 .foto { aspect-ratio: 16 / 9; border-bottom: var(--px) solid var(--obrys); background: var(--c-water3); }
.karta-404 .foto canvas, .karta-404 .foto img { width: 100%; height: 100%; object-fit: cover; }
.karta-404 .tresc { padding: 24px 28px 28px; max-width: none; }
.karta-404 h1 { font-size: 16px; }
.karta-404 .hud { color: var(--tekst-2); margin-bottom: 10px; }
.karta-404 .akcje { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
/* plansza „tylko w widoku klasycznym” (klasyczny.html): scena z kajakiem zamiast bobrów z 404 */
.karta-404 .foto.scena-klasyczna { position: relative; overflow: hidden; }
.scena-klasyczna .scena { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; gap: 12px; padding-bottom: 9%; background: linear-gradient(to bottom, var(--c-sky) 0 58%, var(--c-water) 58% 100%); }
.scena-klasyczna .scena .spr svg { width: 176px; }
.scena-klasyczna .scena .drzewo svg { width: 48px; }
.scena-klasyczna .scena .slonce { position: absolute; right: 7%; top: 10%; }
.scena-klasyczna .scena .slonce svg { width: 56px; }
@media (max-width: 640px) { .scena-klasyczna .scena .spr svg { width: 120px; } .scena-klasyczna .scena .drzewo svg { width: 32px; } .scena-klasyczna .scena .slonce svg { width: 40px; } }
.gameover { font-family: var(--display); font-size: 11px; padding: 2px 6px; background: var(--c-red); color: #FFFDF5; animation: mrug 1.2s steps(2, jump-none) infinite; }

/* ---------- pomocnicze ------------------------------------------------------- */
.pas { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.wyrozn { background: var(--c-sun); color: var(--c-ink); padding: 0 4px; }
.notka { font-family: var(--hud); font-weight: 600; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--tekst-2); }
.podpis-mapy { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 10px; }

/* ---------- responsywność ---------------------------------------------------- */
@media (max-width: 1100px) {
    .stopka-siatka { grid-template-columns: 1fr 1fr; }
    .sceny { grid-template-columns: 1fr; }
    .sklep { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .hero-siatka { grid-template-columns: 1fr; }
    /* nagłówek przestaje być przyklejony, menu schodzi do drugiego, przewijanego wiersza */
    .naglowek { position: static; }
    .naglowek-wnetrze { flex-wrap: wrap; row-gap: 0; }
    .menu { order: 3; width: 100%; margin: 0 -16px; padding: 0 16px 8px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
    .menu a { font-size: 12px; padding: 6px 8px; }
    .postac { grid-template-columns: 1fr; }
    .pytania { grid-template-columns: 1fr; }
    .ow-wskazowka { display: inline-flex; }
}
@media (max-width: 640px) {
    body { font-size: 17px; }
    h1 { font-size: 18px; }
    .dialog { padding: 20px 18px 18px; }
    .dialog .zajawka { font-size: 17px; }
    .hero-liczby b { font-size: 18px; }
    .szer { width: min(1180px, 100% - 24px); }
    .stopka-siatka { grid-template-columns: 1fr; }
    .logo small { display: none; }
    /* Telefon: logo i przyciski na środku, każde w osobnym wierszu. Dymek muzyki był przyklejony
       prawą krawędzią do przycisków (right: 0) — gdy stały po lewej, wystawał poza lewy brzeg ekranu
       i nie dało się zmienić utworu. Teraz stoi pośrodku pod przyciskami (połowa szerokości z .dymek). */
    .naglowek-wnetrze { justify-content: center; }
    .naglowek-akcje { flex-basis: 100%; justify-content: center; padding-bottom: 10px; }
    .dymek { left: calc(50% - min(180px, 46vw)); right: auto; }
    .menu a:first-child { margin-left: auto; }   /* środek, gdy menu się mieści; przewija się od początku, gdy nie */
    .menu a:last-child { margin-right: auto; }
    .przycisk { font-size: 11px; padding: 12px 14px; }
    .sklep { padding: 20px 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .podskok, .dialog .kursor, .gameover { animation: none; }
}