/* Bimbalo — strona gry. Wygląd „kosmos”: malowane niebo i rysunki z gry (Hania Popielarska).
   Bez skryptów, ciasteczek i zasobów z zewnątrz. Animacje wyłączają się przy prefers-reduced-motion. */

@font-face { font-family:"Comic Neue"; src:url(fonts/ComicNeue-Bold.ttf) format("truetype"); font-weight:700; font-display:swap; }

:root { --ink:#fff6df; --muted:#d3d8ff; --gold:#ffcf4a; --navy:#0d1352; --paper:#fff6df; --paper-ink:#1d1a35; --link:#2549c9; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
/* Bez przesuwania strony w bok na telefonie: elementy dekoracyjne (kometa, przekrzywione telefony) wystają poza ekran.
   Blokada na html i body (przeglądarki mobilne ignorują samo body); clip — nie tworzy obszaru przewijania wcale. */
html, body { overflow-x:hidden; }
@supports (overflow:clip) { html, body { overflow-x:clip; } }
body { margin:0; color:var(--ink); background:#14268f;
       font:17px/1.6 ui-rounded,"Segoe UI",system-ui,-apple-system,Roboto,sans-serif; }
img { max-width:100%; }
a { color:inherit; }
:focus-visible { outline:3px solid var(--gold); outline-offset:3px; border-radius:6px; }
/* Tła: JPEG dla starszych przeglądarek, a pod nim image-set z WebP (pliki .webp tworzy automat wdrażający
   z tych samych JPEG; lokalnie, bez .webp, podgląd z dysku pokaże puste tło — patrz README). */
/* Tło nieba: wysokość dużego widoku (lvh), więc chowanie paska adresu na telefonie nie przeskalowuje go.
   Paralaksa: przy przewijaniu strony tło jedzie w górę wolniej (ok. 1/3 ekranu na całą stronę) — tylko tam,
   gdzie przeglądarka ma animacje sterowane przewijaniem; gdzie indziej i przy ograniczeniu ruchu tło stoi. */
.sky { position:fixed; left:0; right:0; top:0; height:100vh; height:100lvh; z-index:-1;
       background:linear-gradient(180deg,#070b3dcc,#0a10502a 28%,#0a10502a 60%,#070b3dd9), url(img/kosmos.jpg) center top/cover; }
.sky { background-image:linear-gradient(180deg,#070b3dcc,#0a10502a 28%,#0a10502a 60%,#070b3dd9), image-set(url(img/kosmos.webp) type("image/webp"), url(img/kosmos.jpg) type("image/jpeg")); }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .sky { height:135lvh; animation:sky-drift linear both; animation-timeline:scroll(root block); }
  }
}
@keyframes sky-drift { from { transform:translateY(0); } to { transform:translateY(-26%); } }
.wrap { max-width:1140px; margin:0 auto; padding-inline:max(22px, env(safe-area-inset-left)) max(22px, env(safe-area-inset-right)); }
.skip { position:absolute; left:-9999px; } .skip:focus { left:12px; top:12px; z-index:50; background:var(--paper); color:var(--paper-ink); padding:8px 14px; border-radius:8px; }

/* nagłówek: logo jak tytuł w menu gry, przełącznik języka */
header.top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:max(16px, env(safe-area-inset-top)); --wave:var(--gold); }
.logo { display:inline-flex; align-items:center; gap:10px; color:inherit; text-decoration:none; }
.logo img { width:46px; height:auto; }
.word { position:relative; display:inline-block; font:700 30px/1 "Comic Neue","Comic Sans MS",cursive; transform:rotate(-4deg); padding-bottom:6px; }
.word svg { position:absolute; left:-3%; bottom:-4px; width:106%; height:10px; overflow:visible; }
.word path { fill:none; stroke:var(--wave); stroke-width:3.2; stroke-linecap:round; }
.lang { display:flex; font-weight:700; font-size:15px; }
.lang a, .lang span { display:inline-block; min-width:44px; min-height:44px; line-height:44px; text-align:center; text-decoration:none; border-radius:10px; }
.lang a { opacity:.65; } .lang a:hover { opacity:1; background:#ffffff14; }
.lang span[aria-current] { opacity:1; }

/* hero */
.hero { position:relative; display:grid; grid-template-columns:1fr 1.15fr; gap:20px; align-items:center; padding-block:30px; }
h1 { font-size:clamp(38px,5.4vw,66px); line-height:1.02; letter-spacing:-1px; margin:0 0 20px; text-shadow:0 3px 18px #0006; font-weight:900; }
h1 em { font-style:normal; color:var(--gold); display:inline-block; transform:rotate(-3deg); }
.lead { font-size:clamp(17px,1.9vw,20px); color:var(--muted); margin:0 0 26px; max-width:34ch; }
.pill { display:inline-flex; align-items:center; gap:10px; border-radius:999px; padding:12px 22px 12px 16px; font-weight:700;
        background:var(--gold); color:#1b1640; box-shadow:0 6px 0 #b98a12; text-decoration:none; }
.pill .tri { width:0; height:0; border-left:13px solid currentColor; border-top:8px solid transparent; border-bottom:8px solid transparent; }
.cta { display:flex; flex-wrap:wrap; align-items:center; gap:14px 12px; }
.pill.ghost { background:transparent; color:var(--gold); box-shadow:none; border:2px solid var(--gold); }
.meta { color:var(--muted); font-size:14px; margin-top:12px; }

.stage { position:relative; height:clamp(460px,52vw,620px); }
.stage .phone { position:absolute; }
.ph1 { width:33%; left:1%;  top:17%; rotate:-11deg; animation:bob 7s ease-in-out infinite; }
.ph2 { width:39%; left:30%; top:2%;  rotate:3deg;  z-index:3; animation:bob 6s ease-in-out -2s infinite; }
.ph3 { width:32%; left:65%; top:21%; rotate:12deg; z-index:2; animation:bob 8s ease-in-out -4s infinite; }
.deco { position:absolute; z-index:4; pointer-events:none; }
.d-saturn { width:24%; right:-4%; top:-6%; animation:bob 9s ease-in-out -1s infinite; rotate:-8deg; }
.d-moon { width:15%; left:-7%; bottom:3%; rotate:5deg; animation:bob 10s ease-in-out -3s infinite; }
.d-rocket { width:8%; left:57%; bottom:-3%; rotate:200deg; animation:bob 5s ease-in-out infinite; }
.d-star { width:5%; animation:twinkle 3s ease-in-out infinite; }
.comet { position:absolute; left:0; top:0; width:44px; z-index:5; pointer-events:none; rotate:-77deg;
         display:flex; flex-direction:column; align-items:center; animation:fly 15s linear 1s infinite; opacity:0; }
.comet .tail { width:58%; margin-bottom:-28%; }

/* sekcje */
section { padding-block:56px; }
h2 { font-size:clamp(28px,3.4vw,40px); margin:0 0 34px; letter-spacing:-.5px; text-shadow:0 2px 12px #0005; font-weight:900; }
.how { display:grid; grid-template-columns:repeat(3,1fr); gap:46px 26px; }
.card { position:relative; background:#0b1150c9; border:2px solid #ffffff1c; border-radius:24px; padding:58px 22px 22px; }
.card:nth-child(odd) { rotate:-.7deg; } .card:nth-child(even) { rotate:.8deg; translate:0 18px; }
.card img { position:absolute; top:-34px; left:18px; width:72px; filter:drop-shadow(0 6px 8px #0007); }
.card:nth-child(3n+2) img { rotate:12deg; } .card:nth-child(3n) img { rotate:-10deg; }
.card h3 { font-size:19px; margin:0 0 4px; }
.card p { margin:0; color:var(--muted); font-size:16px; }

.looks { display:flex; flex-wrap:wrap; justify-content:center; gap:30px 44px; margin-bottom:24px; }
.look { text-align:center; }
.look:nth-child(odd) { translate:0 -16px; rotate:-3deg; } .look:nth-child(even) { translate:0 14px; rotate:3deg; }
.look b { display:block; font-size:18px; } .look span { color:var(--muted); font-size:14px; }

.postcard { position:relative; max-width:660px; margin:0 auto; background:var(--paper); color:var(--paper-ink); border-radius:18px;
            padding:34px 36px; box-shadow:0 24px 50px -18px #000a; }
.postcard.tilt-l { rotate:-1.5deg; } .postcard.tilt-r { rotate:1.2deg; }
.postcard h2 { text-shadow:none; margin:0 0 8px; font-size:28px; }
.postcard p { margin:0 0 12px; color:#4a4766; }
.postcard .big { font-size:clamp(20px,3.4vw,30px); font-weight:800; color:var(--link); text-decoration-thickness:3px; text-underline-offset:5px; word-break:break-word; }
.postcard .st { position:absolute; width:78px; right:-22px; top:-30px; rotate:14deg; }
.postcard .uf { position:absolute; width:58px; left:-20px; bottom:-22px; rotate:-12deg; }
.postcard .pill { margin:6px 0 14px; }
.postcard small { display:block; color:#5d5a78; font-size:14px; line-height:1.5; }
.postcard small a { color:var(--link); }
.postcard .rk { position:absolute; width:44px; right:-14px; bottom:-26px; rotate:200deg; }

footer.bottom { position:relative; overflow:hidden; text-align:center; padding:90px 22px calc(200px + env(safe-area-inset-bottom)); color:var(--muted); font-size:14px; }
footer.bottom nav { position:relative; z-index:2; display:flex; flex-wrap:wrap; justify-content:center; gap:6px 22px; }
footer.bottom a { color:var(--ink); }
.earth { position:absolute; width:330px; left:50%; bottom:-180px; translate:-50% 0; animation:spin 160s linear infinite; filter:drop-shadow(0 0 30px #8fc3ff66); }

/* ---------- telefon i makiety ekranów z rysunków gry ----------
   Położenia w % (szerokość ekranu = 100%, wysokość ≈ 2,25 szerokości); rozmiary czcionek w cqw z zapasem w px
   dla przeglądarek bez container queries. */
.phone { position:relative; aspect-ratio:9/19.5; border-radius:15%/7%; background:#101222; padding:3.4%;
         box-shadow:0 2px 0 1px #2c3050 inset, 0 30px 60px -20px #000a, 0 8px 18px -8px #0007; }
.phone::after { content:""; position:absolute; top:5.2%; left:50%; width:5%; aspect-ratio:1; translate:-50% 0; border-radius:50%; background:#0a0b14; z-index:5; }
.screen { position:relative; width:100%; height:100%; border-radius:12%/5.5%; overflow:hidden; container-type:inline-size; }
.screen .o { position:absolute; display:block; }
.hud { position:absolute; inset:0 0 auto; padding:18px 8px 0; padding:9cqw 4cqw 0; display:grid; grid-template-columns:18% 1fr 18%; align-items:start; z-index:4;
       font:700 9px/1.15 "Comic Neue",sans-serif; font-size:4.6cqw; color:var(--hud,#fff6df); text-align:center; }
.hud small { display:block; font-size:8px; font-size:4cqw; letter-spacing:.4cqw; color:#ef5b5b; margin-top:1cqw; }
.hud .t { font-size:7px; font-size:3.4cqw; opacity:.85; }
.pause { display:flex; gap:3px; gap:1.6cqw; height:12px; height:6cqw; justify-content:center; }
.pause::before,.pause::after { content:""; width:4px; width:1.9cqw; background:currentColor; border-radius:2px; }
.ind { position:relative; width:18px; height:18px; width:9cqw; height:9cqw; justify-self:center; }
.ind::before,.ind::after { content:""; position:absolute; background:currentColor; border-radius:2px; opacity:.85; }
.ind::before { left:0; right:0; top:calc(50% - 1px); height:2px; }
.ind::after { top:0; bottom:0; left:calc(50% - 1px); width:2px; }
.ind i { position:absolute; z-index:1; width:34%; height:34%; border-radius:50%; background:#4fd16a; left:33%; top:33%; translate:20% 10%; }
.pop { position:absolute; font:700 10px/1 "Comic Neue",sans-serif; font-size:5cqw; color:#fff6df; text-shadow:0 0 3px #0008; z-index:3; }
.pop.x { color:#8cc8ff; font-size:12px; font-size:6cqw; transform:rotate(-8deg); }
.pop.ink { color:#2d2a38; text-shadow:0 0 2px #fff; }
.skill { position:absolute; bottom:5.8%; width:14%; aspect-ratio:1; border-radius:50%; display:grid; place-items:center; z-index:3;
         background:#ffffff26; border:1px solid #ffffff70; border-width:.6cqw; font:700 10px/1 "Comic Neue",sans-serif; font-size:5cqw; color:#fff; }
.skill.l { left:7%; } .skill.r { right:7%; }
.s-kosmos { background:#1b3cc0 url(img/kosmos.jpg) center/cover; }
.s-kosmos { background-image:image-set(url(img/kosmos.webp) type("image/webp"), url(img/kosmos.jpg) type("image/jpeg")); }
.s-kosmos::before { content:""; position:absolute; inset:0; background:#0c145a2e; }
.ufo-ball { filter:drop-shadow(0 0 3px #d8ecff) drop-shadow(0 0 6px #9fd0ff99); }
.bonus { position:absolute; width:12%; aspect-ratio:1; display:grid; place-items:center; font:700 9px/1 system-ui,sans-serif; font-size:4.4cqw; color:#2a2440; z-index:2; }
.bonus img { position:absolute; inset:0; width:100%; filter:hue-rotate(60deg) saturate(.8) brightness(1.15); }
.bonus span { position:relative; }
.rkt { position:absolute; width:8%; z-index:2; }
.rkt img { display:block; width:100%; }
/* jak w grze (KosmosArt.drawRocket): dziób rysunku u dołu, płomień od strony stateczników */
.rkt .fl { position:absolute; width:45.6%; height:46%; left:21.4%; bottom:85.5%; transform-origin:50% 100%;
           animation:flicker .12s steps(2) infinite alternate; z-index:-1; }
.s-sielanka { --hud:#2d2a38; background:#93bef7 url(img/sielanka-small.jpg) center/cover; }
.s-sielanka { background-image:image-set(url(img/sielanka-small.webp) type("image/webp"), url(img/sielanka-small.jpg) type("image/jpeg")); }
.cb { position:absolute; aspect-ratio:1; border-radius:49% 51% 48% 52% / 52% 47% 53% 48%; border:1.5px solid #2d2a38; border-width:.75cqw;
      background:radial-gradient(circle at 34% 30%, #ffffffb0 0 11%, transparent 12%), var(--c,#a8cdf3); }
.cb.ball { --c:#f06a5c; z-index:3; }
.bar { position:absolute; width:2.4%; height:12.4%; border-radius:4px; border:1px solid #2d2a38; border-width:.6cqw; background:#a8cdf3; }
.spiky { position:absolute; aspect-ratio:1; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cdefs%3E%3Cpath id='k' d='M-9 -27L0 -48L9 -27Z'/%3E%3C/defs%3E%3Cg fill='%23c7c0d8' stroke='%232d2a38' stroke-width='3' stroke-linejoin='round'%3E%3Cuse href='%23k'/%3E%3Cuse href='%23k' transform='rotate(30)'/%3E%3Cuse href='%23k' transform='rotate(60)'/%3E%3Cuse href='%23k' transform='rotate(90)'/%3E%3Cuse href='%23k' transform='rotate(120)'/%3E%3Cuse href='%23k' transform='rotate(150)'/%3E%3Cuse href='%23k' transform='rotate(180)'/%3E%3Cuse href='%23k' transform='rotate(210)'/%3E%3Cuse href='%23k' transform='rotate(240)'/%3E%3Cuse href='%23k' transform='rotate(270)'/%3E%3Cuse href='%23k' transform='rotate(300)'/%3E%3Cuse href='%23k' transform='rotate(330)'/%3E%3Ccircle r='29' fill='%23ddd7e8'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat; }
.gapline { position:absolute; bottom:0; height:4px; height:1.8cqw; border-radius:2px; background:#ea5b52; border:1px solid #2d2a38; }
.edge { position:absolute; bottom:0; height:2px; height:.9cqw; background:#2d2a38; border-radius:2px; }

/* bulaje z wyglądami */
.port { position:relative; width:150px; aspect-ratio:1; border-radius:50%; overflow:hidden; border:5px solid #24223a; margin:0 auto 18px;
        box-shadow:0 0 0 5px var(--paper), 0 16px 30px -12px #0009; }
.port .o, .port .cb, .port .ball3d { position:absolute; }
.port .cb { border-width:2.5px; }
.port.komiks { background:linear-gradient(90deg,transparent 22%,#ef8f8f 22% 23.5%,transparent 23.5%), repeating-linear-gradient(180deg,#fbf6e8 0 10px,#c9dcef 10px 11px); }
.port.neon { background:radial-gradient(circle at 50% 120%, #3a1f2a, #121420 60%); }
.port.kosmos { background:url(img/kosmos.jpg) center 30%/cover; }
.port.kosmos { background-image:image-set(url(img/kosmos.webp) type("image/webp"), url(img/kosmos.jpg) type("image/jpeg")); }
.port.sielanka { background:url(img/sielanka-small.jpg) center 55%/cover; }
.port.sielanka { background-image:image-set(url(img/sielanka-small.webp) type("image/webp"), url(img/sielanka-small.jpg) type("image/jpeg")); }
.ball3d { border-radius:50%; background:radial-gradient(circle at 34% 30%, #fff 0 8%, var(--c,#5aa0ff) 30%, var(--d,#1d3c7a) 100%); box-shadow:6px 8px 10px #0007; }

/* polityka prywatności — kartka na tle nieba */
.doc { max-width:820px; margin:20px auto 0; background:var(--paper); color:var(--paper-ink); border-radius:22px; padding:clamp(22px,5vw,48px);
       box-shadow:0 24px 50px -18px #000a; font-size:17px; }
.doc h1 { font-size:clamp(28px,5vw,40px); text-shadow:none; color:var(--paper-ink); margin:0 0 6px; }
.doc .date { color:#5f5b72; margin:0 0 24px; }
.doc h2 { font-size:22px; text-shadow:none; margin:38px 0 10px; padding-top:16px; border-top:1px solid #e4dccb; letter-spacing:0; }
.doc a { color:var(--link); }
.doc .short { background:#fff; border:2px solid #e4dccb; border-radius:16px; padding:4px 22px; }
.doc .short li { margin:6px 0; }
.doc .tbl { overflow-x:auto; }
.doc table { width:100%; border-collapse:collapse; font-size:15.5px; margin:8px 0; }
.doc th, .doc td { text-align:left; vertical-align:top; padding:9px 10px; border-bottom:1px solid #e4dccb; }
.doc th { width:32%; color:#5f5b72; font-weight:600; }
.doc .other { background:#e9efff; border-radius:12px; padding:10px 16px; margin:0 0 20px; }
.doc nav ol { padding-left:22px; margin:6px 0; } .doc nav li { margin:2px 0; }
@media (max-width:560px) { .doc th, .doc td { display:block; width:auto; border:0; padding:4px 0; } .doc tr { display:block; padding:8px 0; border-bottom:1px solid #e4dccb; } }

.nf { text-align:center; padding-block:80px 40px; }
.nf img { width:140px; rotate:4deg; animation:bob 5s ease-in-out infinite; }
.nf p { color:var(--muted); }
.nf .pill { margin:8px 6px; }

@keyframes flicker { from { transform:scaleY(.82) scaleX(1.05); } to { transform:scaleY(1.12) scaleX(.94); } }

/* Unoszenie: 10 px w kilka sekund. Firefox (telefon i komputer) rysuje tak wolny ruch skokami co piksel
   (zmierzone 2026-11-10 na pustej stronie). Drżał tylko księżyc — jedyny bez obrotu; obrót 5° usunął drżenie (potwierdzone
   w Firefoksie 2026-11-10), więc każdy unoszący się element ma choć kilka stopni obrotu (księżyc 5°, UFO na 404 4°).
   Obrót 0,01° nie wystarczył; przyspieszenie ruchu pomaga, ale wygląda gorzej. */
@keyframes bob { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes twinkle { 50% { opacity:.35; scale:.8; } }
@keyframes fly { 0% { translate:-15vw -60px; opacity:0; } 3% { opacity:1; } 40% { opacity:1; }
                 44% { translate:110vw 300px; opacity:0; } 100% { translate:110vw 300px; opacity:0; } }

@media (max-width:860px) {
  .hero { grid-template-columns:1fr; padding-top:18px; }
  .stage { height:100vw; max-height:600px; }
  .how { grid-template-columns:1fr; gap:46px; }
  .card:nth-child(even) { translate:none; }
  .postcard { padding:28px 22px; }
  .postcard .st { right:-8px; width:60px; } .postcard .uf { left:-8px; } .postcard .rk { right:-4px; }
}
@media (max-width:420px) { main.wrap { padding-inline:10px; } .doc { padding:22px 16px; border-radius:16px; }
  .looks { gap:22px 20px; } .port { width:128px; } .word { font-size:26px; } .logo img { width:40px; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none !important; } }