:root{
  --bg:#14110D; --bg-2:#1B1813; --surface:#221E18;
  --line:#2E2A22; --line-2:#3A352B;
  --ink:#ECE6DA; --ink-2:#B6AE9F; --ink-3:#7C7568; --ink-4:#565045;
  --paper:#F4EEE2; --pencil:#6B6256;
  --focus:#E7DCC4;
  --font-display:'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  --font-mono:'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-hand:'Caveat', cursive;
  --gap:12px; --cols:4; --rowH:220px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  min-height:100vh;
  background:radial-gradient(120% 90% at 50% 30%, #221C15 0%, var(--bg) 58%, #0E0B08 100%);
  color:var(--ink); font-family:var(--font-mono); -webkit-font-smoothing:antialiased;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.05; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== System układu: flow (przewijana strona) vs stage (na 1 ekran) ===== */
body[data-layout="flow"]{overflow-y:auto}
body[data-layout="stage"]{height:100vh; height:100dvh; overflow:hidden; display:flex; flex-direction:column}
main{position:relative; z-index:1}
body[data-layout="stage"] main{flex:1; min-height:0; overflow:hidden}
.view{display:none}
.view.active{display:block}
body[data-layout="stage"] .view.active{position:absolute; inset:0}

/* ===== Nagłówek ===== */
header{
  position:sticky; top:0; z-index:30; flex:none;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 22px;
  padding:13px clamp(16px,4vw,40px);
  background:linear-gradient(180deg, rgba(20,17,13,.93) 62%, rgba(20,17,13,0));
  backdrop-filter:blur(10px) saturate(120%); -webkit-backdrop-filter:blur(10px) saturate(120%);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; flex-direction:column; gap:2px; flex:none}
.wordmark{font-family:var(--font-display); font-weight:800; font-size:clamp(20px,3vw,29px); letter-spacing:-.03em; line-height:.95}
.wordmark b{font-weight:400; color:var(--ink-3)}
.tagline{font-size:11.5px; color:var(--ink-3)}

.modes{display:flex; flex-wrap:nowrap; padding:3px; gap:3px; border:1px solid var(--line-2); border-radius:999px; background:var(--bg-2); max-width:100%; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none}
.modes::-webkit-scrollbar{display:none}
.modes button{font-family:var(--font-mono); font-size:12.5px; color:var(--ink-3); background:transparent; border:0; cursor:pointer; padding:8px 13px; border-radius:999px; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; flex:none; transition:color .2s, background .2s}
.modes button:hover{color:var(--ink-2)}
.modes button[aria-pressed="true"]{color:var(--bg); background:var(--ink)}
.modes .g{width:14px; height:14px; opacity:.85; flex:none}

.panel{display:flex; flex-direction:column; align-items:flex-end; gap:8px}
.meta{font-size:11px; letter-spacing:.05em; color:var(--ink-3); display:flex; gap:9px; align-items:center}
.meta b{color:var(--ink-2); font-weight:500; font-variant-numeric:tabular-nums}
.meta .dot{width:3px; height:3px; border-radius:50%; background:var(--ink-4)}
.controls{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end}

.seg{display:inline-flex; padding:3px; gap:2px; border:1px solid var(--line-2); border-radius:999px; background:var(--bg-2)}
.seg button{font-family:var(--font-mono); font-size:12px; color:var(--ink-3); background:transparent; border:0; cursor:pointer; padding:7px 11px; border-radius:999px; transition:color .2s, background .2s}
.seg button:hover{color:var(--ink-2)}
.seg button[aria-pressed="true"]{color:var(--bg); background:var(--ink)}
.hidden{display:none !important}

.btn{font-family:var(--font-mono); font-size:13px; letter-spacing:.03em; display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; cursor:pointer; color:var(--bg); background:var(--ink); border:1px solid var(--ink); transition:transform .15s, background .2s, opacity .2s}
.btn:hover{background:#fff}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.4; cursor:not-allowed}
.btn .ico{display:inline-block; transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.btn.spin .ico{transform:rotate(360deg)}
.btn.drop .ico{transform:translateY(3px) rotate(-12deg)}
.btn.pulse .ico{transform:scale(1.4)}
.link{font-family:var(--font-mono); font-size:12px; color:var(--ink-3); background:none; border:0; cursor:pointer; text-decoration:none; padding:6px 2px; border-bottom:1px solid transparent; transition:color .2s, border-color .2s}
.link:hover{color:var(--ink-2); border-color:var(--line-2)}
:where(a,button,input):focus-visible{outline:2px solid var(--focus); outline-offset:2px}

/* ===== TRYB: Mozaika ===== */
#modeGrid{padding:clamp(14px,3vw,28px) clamp(16px,4vw,40px) 60px}
.grid{display:grid; grid-template-columns:repeat(var(--cols),1fr); grid-auto-rows:var(--rowH); grid-auto-flow:dense; gap:var(--gap)}
.tile{position:relative; margin:0; overflow:hidden; border-radius:3px; background:var(--surface); box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); opacity:1; transform:none; filter:none; transition:opacity .5s ease, transform .58s cubic-bezier(.2,.7,.2,1), filter .5s ease, box-shadow .25s ease; cursor:zoom-in}
.tile.-hidden{opacity:0; transform:scale(.9); filter:blur(8px)}
.tile::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(0,0,0,0) 62%, rgba(0,0,0,.42) 100%); opacity:0; transition:opacity .3s}
.tile img{width:100%; height:100%; object-fit:cover; display:block; opacity:0; transform:scale(1.06); transition:opacity .7s ease, transform 1.2s ease}
.tile.loaded img{opacity:1; transform:scale(1)}
.tile:not(.loaded):not(.failed)::before{content:""; position:absolute; inset:0; background:linear-gradient(100deg, var(--surface) 30%, #2C2820 50%, var(--surface) 70%); background-size:200% 100%; animation:shimmer 1.4s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.tile.failed::before{content:"—"; position:absolute; inset:0; display:grid; place-items:center; color:var(--ink-4); font-size:20px}
.cap{position:absolute; left:9px; right:9px; bottom:8px; z-index:2; display:flex; justify-content:space-between; align-items:flex-end; gap:8px; font-size:10.5px; letter-spacing:.04em; color:var(--ink); text-shadow:0 1px 6px rgba(0,0,0,.7); opacity:0; transform:translateY(4px); transition:opacity .25s, transform .25s}
.cap .who{color:rgba(255,255,255,.82); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cap .no{color:#fff; font-weight:500; flex:none}
.tile:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.tile:hover::after{opacity:1}
.tile:hover .cap{opacity:1; transform:none}

/* ===== TRYB: Spadające odbitki ===== */
#modeFall{width:100%; height:100%}
#fall{position:relative; width:100%; height:100%}
.print{position:absolute; left:0; top:0; transform:var(--t); transform-origin:center; transition:transform .6s cubic-bezier(.34,1.36,.5,1), box-shadow .25s ease; background:var(--paper); border-radius:2px; box-shadow:0 5px 12px rgba(0,0,0,.45), 0 16px 34px rgba(0,0,0,.34); cursor:zoom-in; will-change:transform}
.print img{width:100%; height:100%; object-fit:cover; display:block; border-radius:1px; background:var(--surface); opacity:0; transition:opacity .6s ease}
.print.loaded img{opacity:1}
.print .note{position:absolute; left:6%; right:6%; bottom:2%; text-align:center; font-family:var(--font-hand); font-weight:600; color:var(--pencil); line-height:1; pointer-events:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.print:not(.pola) .note{display:none}
.print:hover{z-index:999 !important; box-shadow:0 14px 26px rgba(0,0,0,.5), 0 34px 70px rgba(0,0,0,.45); transform:var(--t) scale(1.05)}

/* ===== TRYB: Kontaktówka + lupa ===== */
#modeSheet{padding:clamp(14px,3vw,26px) clamp(16px,4vw,40px) 60px}
.sheet{--cell:150px; display:grid; grid-template-columns:repeat(auto-fill,minmax(var(--cell),1fr)); gap:clamp(8px,1.3vw,15px)}
.frame{position:relative; aspect-ratio:3/2; background:#0B0906; border:1px solid var(--line); border-radius:2px; overflow:hidden; cursor:zoom-in; box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
.frame img{width:100%; height:100%; object-fit:cover; display:block; opacity:0; filter:contrast(1.5) brightness(.18); transition:opacity .7s ease, filter .9s ease}
.frame.shown img{opacity:1; filter:none}
.frame::after{content:attr(data-no); position:absolute; left:6px; bottom:4px; font-size:9px; color:rgba(255,255,255,.6); letter-spacing:.1em; text-shadow:0 1px 4px rgba(0,0,0,.85); pointer-events:none}
.frame .edge{position:absolute; top:3px; bottom:3px; right:0; width:10px; background:repeating-linear-gradient(to bottom, transparent 0 5px, rgba(255,255,255,.12) 5px 7px); opacity:.45; pointer-events:none}
.frame .ring{position:absolute; inset:7%; border:2.5px solid var(--focus); border-radius:62% 48% 56% 44% / 52% 60% 44% 52%; transform:rotate(-5deg); opacity:.92; pointer-events:none; mix-blend-mode:screen}
.loupe{position:fixed; z-index:55; width:230px; height:230px; border-radius:50%; overflow:hidden; pointer-events:none; transform:translate(-50%,-50%); box-shadow:0 0 0 2px rgba(231,220,196,.55), 0 0 0 8px rgba(20,17,13,.75), 0 20px 44px rgba(0,0,0,.65); display:none; background:#0B0906}
.loupe.on{display:block}
.loupe img{position:absolute; left:0; top:0; max-width:none; will-change:transform}
.loupe::after{content:""; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 36% 30%, rgba(255,255,255,.20), transparent 46%); pointer-events:none}

/* ===== TRYB: Taśma filmowa ===== */
#modeStrip.active{display:flex; flex-direction:column; gap:clamp(12px,3vh,30px); justify-content:center; align-items:stretch; padding:clamp(10px,3vh,28px) 0; overflow:hidden}
.reel{position:relative; height:calc(var(--fh,200px) + 50px); overflow:hidden; background:#090706; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.reel .perf{position:absolute; left:0; right:0; height:12px; background:repeating-linear-gradient(to right, transparent 0 14px, rgba(236,230,218,.16) 14px 23px); z-index:3; pointer-events:none}
.reel .perf.top{top:0}
.reel .perf.bot{bottom:0}
.track{position:absolute; top:50%; left:0; transform:translate(0,-50%); display:flex; align-items:center; will-change:transform}
.cellf{position:relative; flex:0 0 auto; height:var(--fh,200px); margin:0 3px; background:#161310; border-radius:2px; overflow:hidden; cursor:zoom-in; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.cellf img{width:100%; height:100%; display:block; object-fit:cover; opacity:0; transition:opacity .5s ease}
.cellf.loaded img{opacity:1}
.gutter{flex:0 0 auto; width:52px; align-self:stretch; display:flex; align-items:center; justify-content:center; color:var(--ink-4); font-size:10px; letter-spacing:.12em; border-left:1px dashed rgba(255,255,255,.08); border-right:1px dashed rgba(255,255,255,.08)}

/* ===== TRYB: Karuzela głębi ===== */
#modeCarousel{overflow:hidden; perspective:1700px}
.cf-stage{position:absolute; inset:0; transform-style:preserve-3d}
.cf-card{position:absolute; top:50%; left:50%; width:clamp(180px,40vh,330px); aspect-ratio:4/5; margin:0; transform:translate(-50%,-50%); transform-origin:center; transition:transform .55s cubic-bezier(.25,.8,.3,1), filter .55s ease, opacity .45s ease; will-change:transform; cursor:pointer; -webkit-box-reflect:below 8px linear-gradient(transparent 58%, rgba(0,0,0,.30)); box-shadow:0 22px 52px rgba(0,0,0,.55)}
.cf-card img{width:100%; height:100%; object-fit:cover; display:block; border-radius:3px; background:var(--surface)}
.cf-card.center{cursor:zoom-in}
.cf-cap{position:absolute; left:0; right:0; bottom:7%; text-align:center; font-size:11.5px; letter-spacing:.05em; color:var(--ink-3); z-index:6; pointer-events:none}
.cf-cap b{color:var(--ink-2); font-weight:500}
.cf-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:7; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-size:18px; color:var(--ink-2); background:rgba(34,30,24,.72); border:1px solid var(--line-2); cursor:pointer; transition:color .2s, background .2s}
.cf-arrow:hover{color:var(--ink); background:var(--surface)}
.cf-arrow.prev{left:clamp(10px,3vw,32px)}
.cf-arrow.next{right:clamp(10px,3vw,32px)}

/* ===== TRYB: Konstelacja ===== */
#modeStars{overflow:hidden; cursor:grab; touch-action:none}
#modeStars.grabbing{cursor:grabbing}
.sky{position:absolute; left:0; top:0; transform-origin:0 0; will-change:transform}
.drift{position:absolute; left:0; top:0}
.links{position:absolute; left:0; top:0; overflow:visible; pointer-events:none}
.links line{stroke:rgba(231,220,196,.15); stroke-width:1; transition:stroke .3s}
.links line.hot{stroke:rgba(231,220,196,.5)}
.star{position:absolute; transform:translate(-50%,-50%); cursor:zoom-in; border-radius:2px; overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 6px 18px rgba(0,0,0,.5); opacity:.85; transition:opacity .3s, box-shadow .3s, transform .3s; will-change:transform}
.star img{width:100%; height:100%; object-fit:cover; display:block}
.star:hover, .star.hot{opacity:1; box-shadow:0 0 0 1px rgba(231,220,196,.6), 0 0 22px rgba(231,220,196,.22), 0 10px 26px rgba(0,0,0,.6); z-index:20}
@keyframes twinkle{0%,100%{opacity:.72}50%{opacity:1}}
@keyframes drift{0%{transform:translate(0,0)}50%{transform:translate(-14px,-9px)}100%{transform:translate(0,0)}}

/* ===== Pusty stan ===== */
.empty{display:grid; place-items:center; gap:14px; text-align:center; min-height:50vh; padding:40px 20px; color:var(--ink-3)}
#emptyState{display:none}
#emptyState.on{display:grid}
.empty .big{font-family:var(--font-display); font-weight:700; font-size:clamp(18px,3vw,26px); color:var(--ink-2); letter-spacing:-.01em}
.empty code{font-family:var(--font-mono); color:var(--ink); background:var(--surface); padding:2px 7px; border-radius:5px; border:1px solid var(--line-2)}
.empty a{color:var(--bg); background:var(--ink); padding:9px 16px; border-radius:999px; text-decoration:none; font-size:13px}
.empty a:hover{background:#fff}

@media (max-width:720px){
  .panel{align-items:flex-start; width:100%}
  .controls{width:100%; justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .tile,.tile img,.print,.print img,.btn .ico,.frame img,.cf-card,.star,.drift{transition:none !important; animation:none !important}
  .tile.-hidden{opacity:1; filter:none; transform:none}
  .frame img{opacity:1; filter:none}
}

/* ===== Pełna obsługa dotyku + responsywność ===== */
*{-webkit-tap-highlight-color:transparent}
img{-webkit-user-drag:none; user-select:none}
/* sceny dotykowe: bez gestów przeglądarki i bez zaznaczania podczas przeciągania */
#modeCarousel, #modeStars, #modeStrip.active{touch-action:none; user-select:none; -webkit-user-select:none}
.cf-arrow, .modes button, .seg button, .btn, .link{touch-action:manipulation}
.cellf, .frame, .tile, .print, .cf-card, .star{ -webkit-touch-callout:none }

/* dotykowe ekrany: chowamy lupę (interakcja myszy) */
@media (hover:none){ .loupe{display:none !important} }
/* urządzenia z myszą: większe pole celu strzałek karuzeli na hover już jest */

@media (max-width:720px){
  header{gap:10px 16px; padding:11px clamp(14px,4vw,22px)}
  .cf-arrow{width:46px; height:46px}
}

@media (max-width:560px){
  header{padding:10px 14px; gap:9px 12px}
  .wordmark{font-size:21px}
  .tagline{display:none}
  /* przełącznik trybów: same ikony (oszczędza miejsce i pasek przewijania) */
  .modes button{padding:9px 11px; gap:0}
  .modes .lbl{display:none}
  .modes .g{width:17px; height:17px}
  .meta{font-size:10.5px; gap:7px; flex-wrap:wrap}
  .seg button{padding:8px 10px; font-size:12px}
  .btn{padding:10px 14px}
  #modeGrid{padding:12px 12px 48px}
  #modeSheet{padding:12px 12px 48px}
}

/* bardzo wąskie ekrany — minimalna wysokość scen */
@media (max-width:380px){
  .cf-card{width:clamp(150px,52vw,240px)}
}

/* ===== Podgląd: nowoczesny motyw „ciemnia" dla GLightbox ===== */
/* tło */
.glightbox-container .goverlay{
  background:radial-gradient(120% 100% at 50% 0%, rgba(28,23,17,.95) 0%, rgba(12,10,7,.97) 58%, rgba(7,5,3,.98) 100%) !important;
  -webkit-backdrop-filter:blur(9px) saturate(115%); backdrop-filter:blur(9px) saturate(115%);
}
/* obraz: zaokrąglenie + miękki cień + cienka ramka */
.glightbox-container .gslide-image img{
  border-radius:8px;
  background:var(--surface);
  box-shadow:0 0 0 1px rgba(255,255,255,.05), 0 30px 80px rgba(0,0,0,.6), 0 8px 24px rgba(0,0,0,.45);
}
/* przyciski nawigacji: okrągłe, minimalistyczne, szklane */
.glightbox-clean .gprev,
.glightbox-clean .gnext,
.glightbox-clean .gclose{
  width:48px; height:48px; border-radius:50%;
  background:rgba(34,30,24,.6); border:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  opacity:1 !important;
  transition:background .2s ease, border-color .2s ease, transform .15s ease;
}
.glightbox-clean .gprev{ left:clamp(12px,3vw,26px); top:50%; transform:translateY(-50%); }
.glightbox-clean .gnext{ right:clamp(12px,3vw,26px); top:50%; transform:translateY(-50%); }
.glightbox-clean .gclose{ top:clamp(12px,2.5vw,20px); right:clamp(12px,3vw,22px); }
.glightbox-clean .gprev:hover,
.glightbox-clean .gnext:hover,
.glightbox-clean .gclose:hover{ background:var(--surface); border-color:var(--ink-4); }
.glightbox-clean .gprev:active{ transform:translateY(-50%) scale(.93); }
.glightbox-clean .gnext:active{ transform:translateY(-50%) scale(.93); }
.glightbox-clean .gclose:active{ transform:scale(.93); }
.glightbox-clean .gprev svg,
.glightbox-clean .gnext svg,
.glightbox-clean .gclose svg{ width:16px; height:16px; }
.glightbox-clean .gprev svg path,
.glightbox-clean .gnext svg path,
.glightbox-clean .gclose svg path{ fill:var(--ink-2) !important; }
.glightbox-clean .gprev:hover svg path,
.glightbox-clean .gnext:hover svg path,
.glightbox-clean .gclose:hover svg path{ fill:var(--ink) !important; }
.gbtn.focused{ outline:2px solid var(--focus) !important; outline-offset:2px; }
/* spinner ładowania */
.glightbox-container .gloader{ border-color:var(--ink-3) !important; border-right-color:transparent !important; }
/* podpis (nazwa + plik) — desktop */
.glightbox-clean .gslide-description{ background:transparent !important; }
.glightbox-clean .gdesc-inner{ padding:16px 18px 2px; text-align:center; }
.glightbox-clean .gslide-title{
  font-family:var(--font-mono) !important; font-weight:500 !important;
  font-size:13px !important; letter-spacing:.04em; color:var(--ink) !important;
  margin:0 0 4px !important; line-height:1.4 !important;
}
.glightbox-clean .gslide-desc{
  font-family:var(--font-mono) !important; font-size:11.5px; letter-spacing:.05em; color:var(--ink-3) !important;
}
/* podpis — mobile (nadpisanie białego gradientu i kolorów) */
.glightbox-mobile .glightbox-container .gslide-description{
  background:linear-gradient(to bottom, rgba(7,5,3,0) 0%, rgba(7,5,3,.82) 100%) !important;
  text-align:center;
}
.glightbox-mobile .glightbox-container .gslide-title{ font-family:var(--font-mono) !important; color:var(--ink) !important; }
.glightbox-mobile .glightbox-container .gslide-desc{ color:var(--ink-3) !important; }
/* licznik kadrów */
.glightbox-container .g-counter{
  position:fixed; top:clamp(14px,2.6vw,22px); left:clamp(14px,3vw,26px); z-index:99999;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; color:var(--ink-3);
  font-variant-numeric:tabular-nums; pointer-events:none; opacity:.9;
}
@media (prefers-reduced-motion:reduce){
  .glightbox-clean .gprev, .glightbox-clean .gnext, .glightbox-clean .gclose{ transition:none !important; }
}