/* Puzzlownia - rozbudowane strony informacyjne gier, 2026-09-29 */
.pz-info-page-v2{
  --pz-info-card:var(--surface,#fff);
  --pz-info-soft:var(--surface-2,#f7f7f7);
  --pz-info-text:var(--text,#17191f);
  --pz-info-muted:var(--muted,#667085);
  --pz-info-border:var(--border,rgba(17,24,39,.12));
  --pz-info-accent:var(--orange,#ff5a00);
  --pz-info-accent-soft:var(--orange-soft,#fff1e8);
  --pz-info-shadow:var(--shadow-sm,0 12px 30px rgba(17,24,39,.08));
}
html[data-theme="dark"] .pz-info-page-v2{
  --pz-info-card:#17191f;
  --pz-info-soft:#20232a;
  --pz-info-text:#f4f5f7;
  --pz-info-muted:#b7bdc8;
  --pz-info-border:rgba(255,255,255,.11);
  --pz-info-accent-soft:#342117;
  --pz-info-shadow:0 16px 38px rgba(0,0,0,.28);
}

.pz-info-v2 .challenge-story-heading>p{
  max-width:820px;
  margin:.55rem 0 0;
  color:var(--pz-info-muted);
  line-height:1.72;
}
.pz-info-v2 .challenge-story-heading--center>p{margin-left:auto;margin-right:auto;text-align:center}

/* Hero */
.pz-info-hero{align-items:center;gap:clamp(24px,4vw,56px)}
.pz-info-hero__copy{min-width:0}
.pz-info-hero__copy h1{max-width:880px}
.pz-info-hero__visual{
  display:grid;
  gap:15px;
  min-width:0;
  align-self:stretch;
  align-content:center;
}
.pz-info-hero__shot{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  overflow:hidden;
  border:1px solid var(--pz-info-border);
  border-radius:22px;
  background:var(--pz-info-soft);
  box-shadow:var(--pz-info-shadow);
  cursor:zoom-in;
}
.pz-info-hero__shot img{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:contain;
  background:var(--pz-info-soft);
}
.pz-info-hero__visual>p{
  margin:0;
  padding:0 4px;
  color:var(--pz-info-muted);
  font-size:13px;
  line-height:1.65;
}

/* Direct-answer / GEO friendly summary */
.pz-info-answer{
  max-width:930px;
  margin:0;
  padding:19px 21px;
  border-left:4px solid var(--pz-info-accent);
  border-radius:0 17px 17px 0;
  background:var(--pz-info-accent-soft);
  color:var(--pz-info-text);
  font-size:clamp(15px,1.7vw,18px);
  line-height:1.75;
}
.pz-info-quick-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:18px;
}
.pz-info-quick-grid article{
  min-width:0;
  padding:15px 16px;
  border:1px solid var(--pz-info-border);
  border-radius:16px;
  background:var(--pz-info-card);
  box-shadow:var(--pz-info-shadow);
}
.pz-info-quick-grid span{
  display:block;
  color:var(--pz-info-muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.pz-info-quick-grid strong{
  display:block;
  margin-top:5px;
  color:var(--pz-info-text);
  font-size:15px;
  line-height:1.35;
}

/* Gameplay gallery
   Desktop: 1 duzy ekran + 4 pozostale w siatce 2x2 obok.
   Mobile: bez dominujacego podgladu - wszystkie 5 ekranow od razu obok siebie. */
.pz-info-gallery{
  display:grid;
  grid-template-columns:minmax(0,1.72fr) minmax(250px,.88fr);
  grid-template-areas:
    "main thumbs"
    "caption thumbs";
  gap:12px 14px;
  align-items:start;
  padding:clamp(14px,2vw,20px);
  border:1px solid var(--pz-info-border);
  border-radius:24px;
  background:var(--pz-info-card);
  box-shadow:var(--pz-info-shadow);
}
.pz-info-gallery__main{
  grid-area:main;
  position:relative;
  display:block;
  width:100%;
  min-width:0;
  padding:0;
  overflow:hidden;
  border:1px solid var(--pz-info-border);
  border-radius:19px;
  background:var(--pz-info-soft);
  cursor:zoom-in;
}
.pz-info-gallery__main img{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:contain;
  background:var(--pz-info-soft);
}
.pz-info-gallery__main>span{
  position:absolute;
  right:12px;
  bottom:12px;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:999px;
  background:rgba(17,24,39,.82);
  color:#fff;
  font-size:10px;
  font-weight:800;
  backdrop-filter:blur(8px);
}
.pz-info-gallery__caption{
  grid-area:caption;
  min-height:2.8em;
  margin:0 2px;
  color:var(--pz-info-muted);
  font-size:13px;
  line-height:1.5;
}
.pz-info-gallery__thumbs{
  grid-area:thumbs;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  align-content:start;
}
.pz-info-gallery__thumb{
  display:block;
  min-width:0;
  padding:3px;
  overflow:hidden;
  border:1px solid var(--pz-info-border);
  border-radius:14px;
  background:var(--pz-info-soft);
  cursor:pointer;
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.pz-info-gallery__thumb:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--pz-info-accent) 50%,var(--pz-info-border))}
/* Na desktopie aktywny ekran jest juz duzy, wiec chowamy jego duplikat. Zawsze zostaja dokladnie 4 miniatury. */
.pz-info-gallery__thumb.is-active{display:none}
.pz-info-gallery__thumb img{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:9px;
  background:var(--pz-info-soft);
}

/* Image selection explanation */
.pz-info-choice-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:11px;
}
.pz-info-choice-grid article,
.pz-info-choice-flow>div{
  padding:17px;
  border:1px solid var(--pz-info-border);
  border-radius:16px;
  background:var(--pz-info-soft);
}
.pz-info-choice-grid strong,.pz-info-choice-flow b{display:block;color:var(--pz-info-text);font-size:15px}
.pz-info-choice-grid p{margin:6px 0 0;color:var(--pz-info-muted);font-size:12px;line-height:1.55}
.pz-info-choice-flow{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  margin:12px 0;
}
.pz-info-choice-flow span{display:block;margin-top:5px;color:var(--pz-info-muted);font-size:11px;line-height:1.5}
.pz-info-choice-section .puzzle-info-note{margin-top:14px}

/* Features / audiences / tips */
.pz-info-features--six{grid-template-columns:repeat(3,minmax(0,1fr))}
.pz-info-audience--four{grid-template-columns:repeat(4,minmax(0,1fr))}
.pz-info-tips{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.pz-info-tips article{
  padding:18px;
  border:1px solid var(--pz-info-border);
  border-radius:17px;
  background:var(--pz-info-soft);
}
.pz-info-tips strong{display:block;color:var(--pz-info-text);font-size:15px;line-height:1.35}
.pz-info-tips p{margin:6px 0 0;color:var(--pz-info-muted);line-height:1.65}

/* Difficulty table */
.pz-info-table-wrap{
  overflow-x:auto;
  border:1px solid var(--pz-info-border);
  border-radius:18px;
  background:var(--pz-info-card);
  box-shadow:var(--pz-info-shadow);
}
.pz-info-level-table{width:100%;border-collapse:collapse;min-width:620px;color:var(--pz-info-text)}
.pz-info-level-table th,.pz-info-level-table td{padding:12px 14px;border-bottom:1px solid var(--pz-info-border);text-align:left;vertical-align:top}
.pz-info-level-table th{background:var(--pz-info-soft);font-size:10px;letter-spacing:.07em;text-transform:uppercase}
.pz-info-level-table td{font-size:12px;line-height:1.5}
.pz-info-level-table tbody tr:last-child td{border-bottom:0}
.pz-info-level-table tbody tr:hover{background:color-mix(in srgb,var(--pz-info-accent-soft) 55%,transparent)}

/* FAQ and final CTA refinements */
.pz-info-v2 .challenge-story-faq-list{max-width:980px;margin-left:auto;margin-right:auto}
.pz-info-v2 .challenge-story-faq-list details{background:var(--pz-info-card)}
.pz-info-final{border-color:color-mix(in srgb,var(--pz-info-accent) 30%,var(--pz-info-border));background:linear-gradient(135deg,var(--pz-info-accent-soft),var(--pz-info-card))}
/* Finalne CTA musi pozostac czytelne niezaleznie od styli challenge-page. */
html:not([data-theme="dark"]) .pz-info-final{
  background:linear-gradient(135deg,#fff0e6 0%,#fffaf6 55%,#fff 100%);
  border-color:#ffb283;
  color:#17191f!important;
}
html:not([data-theme="dark"]) .pz-info-final .challenge-story-eyebrow{color:#d94700!important}
html:not([data-theme="dark"]) .pz-info-final h2{color:#17191f!important;text-shadow:none!important}
html:not([data-theme="dark"]) .pz-info-final p{color:#667085!important}
html:not([data-theme="dark"]) .pz-info-final .btn--ghost{background:#fff;color:#17191f;border-color:#d9dde5}
html[data-theme="dark"] .pz-info-final h2{color:#f7f8fa!important}
html[data-theme="dark"] .pz-info-final p{color:#c4cad3!important}


/* Fullscreen screenshot dialog */
.pz-info-shot-dialog{
  width:min(1120px,94vw);
  max-width:1120px;
  max-height:94vh;
  padding:0;
  border:0;
  border-radius:22px;
  background:var(--pz-info-card,#fff);
  color:var(--pz-info-text,#17191f);
  box-shadow:0 28px 80px rgba(0,0,0,.35);
}
.pz-info-shot-dialog::backdrop{background:rgba(7,10,16,.76);backdrop-filter:blur(4px)}
.pz-info-shot-dialog__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 15px;
  border-bottom:1px solid var(--pz-info-border,rgba(0,0,0,.1));
}
.pz-info-shot-dialog__head strong{font-size:14px}
.pz-info-shot-dialog__head button,
.pz-info-shot-dialog__nav button{
  padding:8px 11px;
  border:1px solid var(--pz-info-border,rgba(0,0,0,.1));
  border-radius:11px;
  background:var(--pz-info-soft,#f6f6f6);
  color:var(--pz-info-text,#17191f);
  font:inherit;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}
.pz-info-shot-dialog__body{padding:14px}
.pz-info-shot-dialog__body img{display:block;width:100%;max-height:72vh;object-fit:contain;border-radius:14px;background:var(--pz-info-soft,#f6f6f6)}
.pz-info-shot-dialog__caption{margin:10px 2px 0;color:var(--pz-info-muted,#667085);font-size:12px;line-height:1.55}
.pz-info-shot-dialog__nav{display:flex;justify-content:space-between;gap:12px;padding:0 14px 14px}
html.pz-info-shot-open{overflow:hidden}

@media(max-width:980px){
  .pz-info-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pz-info-choice-grid,.pz-info-choice-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pz-info-features--six{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pz-info-audience--four{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:820px){
  /* Na telefonie duzy pionowy screenshot w HERO przytlaczal cala strone.
     Pelna prezentacja obrazu jest nizej w galerii 5 ekranow. */
  .pz-info-hero__visual{display:none}

  .pz-info-gallery{
    display:block;
    padding:10px;
    border-radius:18px;
  }
  .pz-info-gallery__main,
  .pz-info-gallery__caption{display:none}
  .pz-info-gallery__thumbs{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:5px;
    width:100%;
    overflow:visible;
    padding:0;
  }
  /* Na mobile pokazujemy wszystkie 5 naraz, lacznie z aktualnym. */
  .pz-info-gallery__thumb,
  .pz-info-gallery__thumb.is-active{
    display:block;
    width:100%;
    min-width:0;
    padding:2px;
    border-radius:9px;
  }
  .pz-info-gallery__thumb.is-active{
    border-color:var(--pz-info-accent);
    box-shadow:0 0 0 1px color-mix(in srgb,var(--pz-info-accent) 18%,transparent);
  }
  .pz-info-gallery__thumb img{
    width:100%;
    aspect-ratio:302/600;
    object-fit:contain;
    border-radius:6px;
    background:var(--pz-info-soft);
  }
}


@media(max-width:620px){
  .pz-info-quick-grid,
  .pz-info-choice-grid,
  .pz-info-choice-flow,
  .pz-info-features--six,
  .pz-info-audience--four,
  .pz-info-tips{grid-template-columns:1fr}
  .pz-info-gallery{padding:10px;border-radius:18px}
  .pz-info-gallery__thumb{border-radius:8px}
  .pz-info-answer{padding:15px 16px;font-size:14px}
  .pz-info-hero__visual>p{font-size:11px}
  .pz-info-shot-dialog{width:96vw;border-radius:16px}
  .pz-info-shot-dialog__body{padding:9px}
}

/* Puzzlownia info pages - szybka nawigacja, swipe i retro panele 3D, 2026-09-29 */
.pz-info-v2{
  --pz-info-topbar-h:0px;
  --pz-info-quicknav-h:58px;
}
.pz-info-v2 [id]{scroll-margin-top:calc(var(--pz-info-quicknav-h) + 14px)}

/* Sticky nawigacja po minięciu swojego miejsca przykleja sie bezposrednio do gornej krawedzi viewportu. */
.pz-info-quicknav{
  position:sticky;
  top:0;
  z-index:760;
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  margin:0 0 18px;
  padding:8px 10px;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  border:1px solid color-mix(in srgb,var(--pz-info-border) 88%,transparent);
  border-radius:17px;
  background:color-mix(in srgb,var(--pz-info-card) 91%,transparent);
  box-shadow:0 9px 24px rgba(18,22,30,.08);
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
}
.pz-info-quicknav::-webkit-scrollbar{display:none}
.pz-info-quicknav a{
  flex:0 0 auto;
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 13px;
  border:1px solid var(--pz-info-border);
  border-radius:999px;
  background:var(--pz-info-soft);
  color:var(--pz-info-muted);
  font:800 11px/1.05 Manrope,sans-serif;
  text-decoration:none;
  white-space:nowrap;
  scroll-snap-align:center;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
}
.pz-info-quicknav a:hover{transform:translateY(-1px);color:var(--pz-info-text);border-color:color-mix(in srgb,var(--pz-info-accent) 35%,var(--pz-info-border))}
.pz-info-quicknav a.is-active,
.pz-info-quicknav a[aria-current="location"]{
  background:var(--pz-info-accent);
  border-color:var(--pz-info-accent);
  color:#fff;
  box-shadow:0 7px 17px rgba(255,90,0,.20);
}
html[data-theme="dark"] .pz-info-quicknav{box-shadow:0 10px 28px rgba(0,0,0,.28)}

/* Dekoracyjne panele z prawdziwej gry. Nie sa kontrolkami i nigdy nie lapia klikniec. */
.pz-info-console-panel{
  position:relative;
  z-index:2;
  width:calc(100% + 12px);
  margin-left:-6px;
  pointer-events:none;
  user-select:none;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  filter:drop-shadow(0 12px 16px rgba(36,22,12,.20));
}
.pz-info-console-panel--top{
  aspect-ratio:2042/252;
  margin-top:24px;
  margin-bottom:-10px;
  background-image:url('/puzzlownia/assets/retro-ui/01_panels/panel-desktop-top.webp');
}
.pz-info-console-panel--bottom{
  aspect-ratio:2024/221;
  margin-top:-10px;
  margin-bottom:24px;
  background-image:url('/puzzlownia/assets/retro-ui/desktop-bottom-v2/panel-desktop-bottom-v2.webp');
}
.pz-info-console-section{
  position:relative;
  z-index:1;
}
.pz-info-console-panel--top + .pz-info-console-section{border-top-left-radius:24px;border-top-right-radius:24px}
.pz-info-console-section + .pz-info-console-panel--bottom{border-bottom-left-radius:24px;border-bottom-right-radius:24px}

@media(max-width:820px){
  .pz-info-v2{
    --pz-info-topbar-h:0px;
    --pz-info-quicknav-h:55px;
    overflow-x:clip;
  }
  .pz-info-quicknav{
    top:0;
    z-index:880;
    gap:7px;
    margin:0 -2px 10px;
    width:calc(100% + 4px);
    min-height:51px;
    padding:6px 7px;
    border-radius:14px;
    scroll-snap-type:x mandatory;
  }
  .pz-info-quicknav a{
    min-height:36px;
    padding:8px 12px;
    font-size:10px;
    scroll-snap-stop:always;
  }

  /* Galeria mobile: prawdziwy swipe. Widzimy ponad dwa ekrany naraz, wiec kierunek przewijania jest oczywisty. */
  .pz-info-gallery{overflow:hidden}
  .pz-info-gallery__thumbs{
    display:flex;
    grid-template-columns:none;
    gap:8px;
    width:auto;
    margin:0 -10px;
    padding:2px 10px 8px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x pan-y;
  }
  .pz-info-gallery__thumbs::-webkit-scrollbar{display:none}
  .pz-info-gallery__thumb,
  .pz-info-gallery__thumb.is-active{
    flex:0 0 clamp(128px,41vw,178px);
    width:auto;
    min-width:0;
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }
  .pz-info-gallery__thumb img{
    aspect-ratio:302/600;
    object-fit:cover;
  }
  .pz-info-gallery::after{
    content:'Przesuń ekrany w bok';
    display:block;
    margin:2px 2px 0;
    color:var(--pz-info-muted);
    font-size:9px;
    font-weight:800;
    text-align:right;
  }

  /* Mobile panele sa specjalnie przyciete: gorny wychodzi z lewej, dolny z prawej. */
  .pz-info-console-panel{
    width:calc(100% + 118px);
    filter:drop-shadow(0 11px 15px rgba(36,22,12,.24));
  }
  .pz-info-console-panel--top{
    aspect-ratio:1200/420;
    margin-left:-86px;
    margin-top:17px;
    margin-bottom:-7px;
    background-image:url('/puzzlownia/assets/retro-ui/mobile-v3/panels/panel-mobile-top.webp');
    background-position:left center;
  }
  .pz-info-console-panel--bottom{
    aspect-ratio:1200/383;
    margin-left:-32px;
    margin-top:-7px;
    margin-bottom:17px;
    background-image:url('/puzzlownia/assets/retro-ui/mobile-v3/panels/panel-mobile-bottom.webp');
    background-position:right center;
  }
}

@media(max-width:620px){
  .pz-info-v2 [id]{scroll-margin-top:calc(var(--pz-info-quicknav-h) + 10px)}
  .pz-info-quicknav a{font-size:9px;padding-inline:11px}
  .pz-info-gallery__thumb,
  .pz-info-gallery__thumb.is-active{flex-basis:clamp(122px,42vw,162px)}
  .pz-info-console-panel{width:calc(100% + 104px)}
  .pz-info-console-panel--top{margin-left:-76px}
  .pz-info-console-panel--bottom{margin-left:-28px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  .pz-info-quicknav a{transition:none}
}