/* worldbg94 (2026-11-06): tla krain w pasie "Play Planet Coolkee" i w "What's in the game", szklane zakladki trybow,
   karta "Who makes" z nowa ikona aplikacji 94. Plik dolaczany po site.css (+ daily/wallpapers); bez stylow inline (CSP).
   Obrazy dekoracyjne (alt=""), same-origin, lazy. Ruch tylko przy prefers-reduced-motion: no-preference. */

/* ---------- pas pobierania na kazdej stronie ---------- */
.store-band--world { position: relative; isolation: isolate; overflow: hidden; background: var(--navy-deep); padding: 150px 0 36px; }
.store-band--world > .band-world { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 58%; }
.store-band--world::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 36, 64, 0) 0%, rgba(11, 36, 64, .08) 45%, rgba(11, 36, 64, .62) 88%, var(--navy-deep) 100%); }
.store-band--world .wrap { width: calc(100% - 2 * var(--gutter)); max-width: var(--max); padding: 26px 22px; border-radius: 28px;
  background: rgba(11, 36, 64, .9); border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 26px 50px -22px rgba(4, 16, 30, .75); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .store-band--world .wrap { background: rgba(11, 36, 64, .74); -webkit-backdrop-filter: blur(18px) saturate(1.35); backdrop-filter: blur(18px) saturate(1.35); }
}
.store-band--world h2 { text-shadow: 0 2px 10px rgba(4, 16, 30, .35); }
/* telefon (r2, recenzja REWORK): odznaki w jednym rzedzie jak przed zmiana. Odznaki bez modyfikacji; zmienia sie tylko rozmiar
   i odstep. --bh = wysokosc odznaki App Store (40-48 px, Apple: min. 40). Oficjalny PNG Google EN ma wbudowane przezroczyste pole
   ochronne (41/250 wysokosci z kazdej strony), PL ma pole tylko u gory i u dolu (29/250); ujemny margines zdejmuje je z ukladu,
   wiec widoczna odznaka Google ma te sama wysokosc co App Store, a widoczny odstep = --bh/4 (pole ochronne obu sklepow).
   Szerokosc rzedu ok. 6.61 * --bh miesci sie od 320 px; ponizej rzad sie zawija, a lewe krawedzie widocznych odznak sa rowne. */
@media (max-width: 559px) {
  .store-band--world { padding-top: 104px; }
  .store-band--world .wrap { width: calc(100% - 24px); padding: 24px 14px 22px; border-radius: 24px; }
  .store-band--world .stores.official { --bh: clamp(40px, calc((100vw - 54px) / 6.62), 48px); gap: calc(var(--bh) / 4); }
  .store-band--world .stores.official img[src*="appstore"] { height: var(--bh); }
  .store-band--world .stores.official img[src*="googleplay"] { max-width: none; }
  .store-band--world .stores.official img[src*="googleplay-en"] { height: calc(var(--bh) * 250 / 168); margin: calc(var(--bh) * -41 / 168); }
  .store-band--world .stores.official img[src*="googleplay-pl"] { height: calc(var(--bh) * 250 / 192); margin-block: calc(var(--bh) * -29 / 192); }
}
@media (min-width: 560px) { .store-band--world { padding-top: 190px; } }
@media (min-width: 900px) {
  .store-band--world { padding: 132px 0 120px; }
  .store-band--world .wrap { padding: 34px 44px; }
}

/* ---------- "What's in the game": tlo swiata aktywnej zakladki ---------- */
.modes--world { position: relative; isolation: isolate; overflow: hidden; }
.modes--world .mode-world { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 62%; pointer-events: none; }
.modes--world::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(230, 244, 253, .72) 0%, rgba(230, 244, 253, .64) 44%, rgba(230, 244, 253, 0) 60%),
    linear-gradient(180deg, rgba(230, 244, 253, .8) 0%, rgba(230, 244, 253, .58) 30%, rgba(230, 244, 253, .52) 70%, rgba(230, 244, 253, .86) 100%); }
.modes--world[data-theme="night"]::before {
  background:
    linear-gradient(90deg, rgba(26, 19, 66, .72) 0%, rgba(26, 19, 66, .64) 44%, rgba(26, 19, 66, 0) 60%),
    linear-gradient(180deg, rgba(26, 19, 66, .8) 0%, rgba(26, 19, 66, .56) 30%, rgba(26, 19, 66, .5) 70%, rgba(26, 19, 66, .86) 100%); }
@media (max-width: 899px) {
  /* telefon/tablet: kraina widoczna za tytulem, zakladkami i scena (gora sekcji); tekst ponizej na spokojnym tle sekcji */
  .modes--world .mode-world { height: 860px; bottom: auto; object-position: 50% 72%; }
  .modes--world::before { background: linear-gradient(180deg, rgba(230, 244, 253, .55) 0, rgba(230, 244, 253, .3) 320px, rgba(230, 244, 253, .68) 600px, var(--sky) 860px); }
  .modes--world[data-theme="night"]::before { background: linear-gradient(180deg, rgba(26, 19, 66, .55) 0, rgba(26, 19, 66, .3) 320px, rgba(26, 19, 66, .68) 600px, var(--night) 860px); }
}
.modes--world .mode-copy h3, .modes--world .section-head h2 { text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.modes--world[data-theme="night"] .mode-copy h3, .modes--world[data-theme="night"] .section-head h2 { text-shadow: 0 1px 12px rgba(10, 6, 30, .5); }
.no-js .modes--world .mode-world { display: none; }
/* karta sceny odcina sie od tla tej samej krainy: jasna obwodka (box-shadow, bez zmiany ukladu) i glebszy cien (r2) */
.modes--world .stage { box-shadow: 0 0 0 2px rgba(255, 255, 255, .72), 0 30px 60px -24px rgba(11, 36, 64, .62), 0 8px 18px -10px rgba(11, 36, 64, .32); }
.modes--world[data-theme="night"] .stage { box-shadow: 0 0 0 2px rgba(255, 255, 255, .3), 0 30px 60px -24px rgba(5, 2, 20, .85), 0 8px 18px -10px rgba(5, 2, 20, .5); }
.modes--world .text-link { color: var(--teal-hover); }  /* ciemniejszy turkus na tle krainy (kontrast >= 4.5) */
@media (prefers-reduced-motion: no-preference) {
  .js .modes--world .mode.is-active > .mode-world { animation: world-in .7s ease both; }
}
@keyframes world-in { from { opacity: 0; } to { opacity: 1; } }

/* szklane zakladki (frosted glass) z pewnym tlem zastepczym */
.modes--world .tabs { --focus: var(--ink); background: rgba(255, 255, 255, .86); border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(12, 43, 71, .06), 0 14px 30px -16px rgba(11, 36, 64, .5); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .modes--world .tabs { background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .4));
    -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6); }
}
.modes--world .tab { color: var(--ink); position: relative; }
.modes--world .tab:hover { color: var(--ink); background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8); }
.modes--world .tab[aria-selected="true"] { color: var(--ink); background: linear-gradient(180deg, #74e6f0 0%, var(--teal-bright) 55%, #22b3c4 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 0 rgba(6, 80, 90, .25), 0 6px 14px -6px rgba(10, 111, 125, .7); }
.modes--world .tab:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.modes--world .tab:active { transform: scale(.97); }
.modes--world .tab[aria-selected="true"]:active { transform: scale(1.01); }
.modes--world[data-theme="night"] .tabs { --focus: var(--focus-dark); background: rgba(26, 19, 66, .88); border-color: rgba(255, 255, 255, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 14px 30px -16px rgba(5, 2, 20, .8); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .modes--world[data-theme="night"] .tabs { background: linear-gradient(180deg, rgba(40, 30, 96, .55), rgba(26, 19, 66, .42)); }
}
.modes--world[data-theme="night"] .tab { color: var(--night-ink); }
.modes--world[data-theme="night"] .tab:hover { color: #fff; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.modes--world[data-theme="night"] .tab[aria-selected="true"] { color: var(--ink); }

/* ---------- karta "Who makes Planet Coolkee" ---------- */
.section-maker--card { padding: clamp(44px, 7vw, 88px) 0; }
.maker.maker--card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: stretch; max-width: none; overflow: hidden;
  border-radius: var(--r-l); background: linear-gradient(160deg, #fff6e8 0%, #fffdf8 55%, #ffffff 100%); border: 1px solid #f0dcbc;
  box-shadow: 0 18px 40px -22px rgba(122, 77, 0, .35), 0 2px 6px rgba(11, 42, 69, .06); }
.maker--card .maker-art { position: relative; display: block; min-height: 150px; background: #e9b77c; }
.maker--card .maker-art .maker-world { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 42%;
  border-radius: 0; box-shadow: none; }
.maker--card .maker-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 246, 232, 0) 55%, rgba(255, 246, 232, .55) 100%); }
.maker--card .maker-art .maker-icon { position: absolute; z-index: 1; left: 22px; bottom: -40px; width: 96px; height: 96px; border-radius: 24px;
  border: 4px solid #fff; background: #fff; box-shadow: 0 14px 26px -10px rgba(11, 42, 69, .5), 0 2px 4px rgba(11, 42, 69, .15); }
.maker--card .maker-text { padding: 54px 22px 26px; }
.maker--card h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.95rem); margin-bottom: .45em; }
.maker--card p { color: var(--ink-soft); margin-bottom: 0; max-width: 40rem; }
.maker--card .maker-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 20px; color: var(--ink); font-weight: 700; }
.maker-mail { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; max-width: 100%; padding: 0 20px 0 16px; border-radius: 999px;
  background: var(--teal); color: #fff; font-weight: 700; text-decoration: none; overflow-wrap: anywhere;
  box-shadow: 0 4px 0 #06505a, 0 12px 20px -12px rgba(10, 111, 125, .8), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: background-color .2s ease, transform .35s var(--spring), box-shadow .2s ease; }
.maker-mail::before { content: ""; flex: none; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: url("worldbg/mail.e30ad1b177.svg") center / contain no-repeat; mask: url("worldbg/mail.e30ad1b177.svg") center / contain no-repeat; }
.maker-mail:hover { background: var(--teal-hover); transform: translateY(-2px); }
.maker-mail:active { transform: translateY(2px); box-shadow: 0 1px 0 #06505a, 0 6px 12px -10px rgba(10, 111, 125, .8); }
.maker-mail:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 999px; }
@media (min-width: 720px) {
  .maker.maker--card { grid-template-columns: minmax(220px, 36%) minmax(0, 1fr); }
  .maker--card .maker-art { min-height: 260px; }
  .maker--card .maker-art::after { background: linear-gradient(90deg, rgba(255, 246, 232, 0) 60%, rgba(255, 246, 232, .5) 100%); }
  .maker--card .maker-art .maker-icon { left: 50%; top: 50%; bottom: auto; width: 120px; height: 120px; border-radius: 28px; transform: translate(-50%, -50%) rotate(-4deg); }
  .maker--card .maker-text { padding: 40px 44px; align-self: center; }
}
/* szeroki ekran (r2): karta na pelna szerokosc kolumny .wrap (jak tresc innych sekcji), wiecej ilustracji */
@media (min-width: 1100px) {
  .maker.maker--card { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); }
  .maker--card .maker-art { min-height: 300px; }
  .maker--card .maker-text { padding: 48px 56px; }
}
@media (prefers-reduced-motion: reduce) { .maker-mail, .maker-mail:hover, .maker-mail:active { transition: none; transform: none; } }

/* wysoki kontrast systemowy: obrazy dekoracyjne znikaja, czytelnosc ma pierwszenstwo */
@media (forced-colors: active) {
  .band-world, .mode-world, .maker-world, .store-band--world::before, .modes--world::before { display: none; }
  .modes--world .tabs, .store-band--world .wrap { border: 1px solid CanvasText; }
  .maker-mail { border: 2px solid ButtonText; }
  .maker-mail::before { background: ButtonText; }
}