:root{
  --tile: clamp(62px, 6.2vw, 92px);
  --gap: clamp(8px, 0.8vw, 12px);
  --ink: #0b1030;
  --ink-2: #2a1a00;
  --gold-1: #ffeeb4;
  --gold-2: #f3ca63;
  --gold-3: #d9a13a;
  --gold-4: #ab771f;
  --brand-red: #c97e5e;
  --cream: #fdf5e2;
  --vh: 100vh;
  --vh: 100dvh;
  /* najwieksze wychylenie driftu w pionie po wzmocnieniu o 50% */
  --drift-y: 15px;
  /* zapas warstwy DGE na drift - dzieki niemu nigdy nie widac przerzy
     od krawedzi ekranu, nawet w skrajnym punkcie animacji */
  --bleed: 18px;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{
  margin:0; padding:0;
  width:100%; height:100%;
  overflow:hidden;
  background:#000;
  overscroll-behavior:none;
  touch-action:manipulation;
  -webkit-text-size-adjust:100%;
}

body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  color:#fff;
  -webkit-font-smoothing:antialiased;
  cursor:pointer;
}

img{ border:0; }

button{ font:inherit; color:inherit; }

#mateo-cookiebar{ cursor:default; }
#mateo-cookiebar a{ cursor:pointer; }


/* ---------------- STAGE ---------------- */

.stage{
  position:fixed; inset:0;
  z-index:10;
  cursor:pointer;
}

.stage__inner{
  position:absolute; inset:0;
  filter:brightness(1) saturate(1);
  transition:filter .55s ease;
}

.stage__bg{
  position:absolute; inset:0;
  background:#05060f url(../img/bg-3840.webp) 50% 100%/cover no-repeat;
}

/* mobile / tablet: lzejsze tlo 1920 zamiast 3840 */
@media (max-width: 1100px){
  .stage__bg{ background-image:url(../img/bg-1920.webp); }
}

.stage__glow{
  position:absolute; inset:0;
  opacity:0;
  transition:opacity .55s ease;
  background:
    radial-gradient(78% 62% at 60% 58%, rgba(255,214,150,.16), rgba(255,190,110,0) 70%),
    radial-gradient(120% 90% at 50% 100%, rgba(120,170,255,.10), rgba(120,170,255,0) 70%);
}

.layer{
  position:absolute;
  pointer-events:none;
  will-change:transform;
}

.layer img{
  position:absolute; left:0; top:0;
  display:block;
  width:100%; height:100%;
  object-fit:fill;
  will-change:transform;
}

/* NAPIS: dopasowanie do ekranu (fit). Przezroczyste marginesy pliku sa
   niewidoczne, wiec tutaj dopasowanie jest wlasciwe. */
.layer--napis{
  left:50%; top:50%;
  width:min(100vw, calc(var(--vh) * 16 / 9));
  height:min(var(--vh), calc(100vw * 9 / 16));
  transform:translate(-50%,-50%);
}

.layer__drop{ position:absolute; inset:0; }
.layer__drop img{ animation:none; }
body.logo-ready .layer__drop{ animation:logoDrop .9s cubic-bezier(.18,.78,.24,1) both; }
@keyframes logoDrop{
  from{ transform:translateY(-110vh); }
  to{ transform:translateY(0); }
}

/* DGE: jak object-fit:cover, plus zapas --bleed na drift.
   Wczesniejsze min() zostawialo 192px przerwy od dolu na ekranach 4:3, a
   sam drift odsuwal postac od krawedzi jeszcze bardziej - powstawala dziura
   pokazujaca tlo. object-fit:cover na powiekszonej warstwie utrzymuje
   proporcje 16:9, wiec postac nie jest rozciagana, tylko lekko przycieta. */
.layer--dge{
  left:50%; top:50%;
  width:calc(max(100vw, var(--vh) * 16 / 9) + 2 * var(--bleed));
  height:calc(max(var(--vh), 100vw * 9 / 16) + 2 * var(--bleed));
  transform:translate(-50%,-50%);
}

.layer--dge img{ object-fit:cover; }

/* pozycja w pionie: pod DGE */
.layer--dge{ z-index:2; }
.layer--napis{ z-index:1; }

.stage__glow{ z-index:5; }

.layer--dge img{ animation:driftDge 21s ease-in-out infinite; }
.layer--napis .layer__drop img{ animation:driftNapis 27s ease-in-out infinite; }

/* Zakres ruchu wzmocniony o 50% (7->10.5, 9->13.5, 3->4.5, 8->12).
   Czasy 21s i 27s pozostaja bez zmian - to zakres, nie tempo. */
@keyframes driftDge{
  0%{ transform:translate3d(0,0,0); }
  18%{ transform:translate3d(10.5px,-13.5px,0); }
  38%{ transform:translate3d(4.5px,-4.5px,0); }
  58%{ transform:translate3d(-12px,-9px,0); }
  78%{ transform:translate3d(-4.5px,-15px,0); }
  100%{ transform:translate3d(0,0,0); }
}

@keyframes driftNapis{
  0%{ transform:translate3d(0,0,0); }
  22%{ transform:translate3d(-9px,-12px,0); }
  46%{ transform:translate3d(-13.5px,-3px,0); }
  70%{ transform:translate3d(7.5px,-13.5px,0); }
  100%{ transform:translate3d(0,0,0); }
}


/* ---------------- DOCK / TILES ---------------- */

.dock{
  position:fixed; z-index:60;
  left:50%;
  bottom:max(16px, env(safe-area-inset-bottom));
  display:flex; align-items:flex-end; gap:var(--gap);
  /* 12 miniaturek zachodzi na siebie delikatnie i ma zapas po obu stronach. */
  --ik-pad: 12px;
  /* Merch plus trzy kwadratowe kafle mieszczą się w jednym rzędzie. */
  --unit: min(var(--tile), calc((100vw - 3 * var(--gap) - 30px - var(--ik-pad)) / 9.2));
  transform:translateX(-50%);
  opacity:1;
}

/* w sekcjach "sluchaj" i "zobacz" przyciski dolne musza zostac widoczne,
   wiec Dock wychodzi ponad panel (z-index 200) */
body.dock-above .dock{ z-index:210; }

.tile{
  -webkit-appearance:none; appearance:none;
  position:relative; display:block;
  margin:0; padding:0; border:0; background:none;
  cursor:pointer;
  color:var(--ink-2);
  -webkit-tap-highlight-color:transparent;
  animation:tilePulse 4.6s ease-in-out infinite;
  will-change:transform;
}

/* SPRAWDZ jest szeroki na 12 miniaturek; pozostale dwa kafle maja zawsze
   t sama wysokosc i szerokosc = --unit. */
.tile--merch{ width:calc(var(--unit) * 6.2 + var(--ik-pad)); height:var(--unit); }
.tile--order,
.tile--spotify,
.tile--youtube{ width:var(--unit); height:var(--unit); }

.tile--merch{ z-index:3; }
.tile--order,
.tile--spotify,
.tile--youtube{ z-index:1; }

.tile--order{ animation-delay:-.75s; }
.tile--spotify{ animation-delay:-1.5s; }
.tile--youtube{ animation-delay:-3.1s; }

@keyframes tilePulse{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-2px); }
}

.tile__face{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px;
  width:100%; height:100%;
  padding:5px 7px 4px;
  border-radius:23%;
  overflow:visible;
  background:linear-gradient(155deg, var(--gold-1) 0%, var(--gold-2) 27%, var(--gold-3) 60%, var(--gold-4) 100%);
  box-shadow:
    0 6px 18px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.35) inset,
    0 -2px 7px rgba(122,72,0,.42) inset;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transition:transform .3s cubic-bezier(.2,.85,.3,1.35), box-shadow .3s ease;
}

.tile--merch .tile__face{ border-radius:clamp(13px, 2.3vw, 22px); }

.tile:hover .tile__face,
.tile:focus-visible .tile__face{
  transform:translateY(-3px);
  box-shadow:
    0 12px 30px rgba(0,0,0,.6),
    0 0 0 2px rgba(255,229,158,.4),
    0 1px 0 rgba(255,255,255,.5) inset,
    0 -2px 7px rgba(122,72,0,.35) inset;
}

.tile:focus-visible{ outline:none; }

.tile__face::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(255,255,255,.42), rgba(255,255,255,0) 46%);
  pointer-events:none;
  border-radius:inherit;
}

.tile__icon{
  position:relative; z-index:1;
  display:block;
  width:52%; height:auto;
  margin-bottom:1px;
}

.tile__icon svg{ display:block; width:100%; height:auto; }

.tile--spotify .tile__icon{ fill:#0e1a12; }
.tile--youtube .tile__icon{ fill:#c8102e; }
.tile--order .tile__icon{ fill:#2a1a00; }

.tile__label{
  position:relative; z-index:1;
  font-size:max(9px, calc(var(--unit) * .125));
  font-weight:800;
  letter-spacing:.1em; text-transform:uppercase;
  color:rgba(43,27,2,.82);
  white-space:nowrap;
  line-height:1;
}

/* Etykieta SPRAWDZ jest celowo taka sama jak w SLUCHAJ i ZOBACZ - kafel
   jest szeroki tylko dlatego, ze musi zmiescic 12 miniaturek. */

/* 12 miniaturek w jednym wierszu. Rozmiar wyprowadzony z szerokosci
   wlasnego wiersza, wiec ikony nigdy nie wychodza poza kafel. */
.dockicons{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center;
  width:100%;
  height:calc(100% - 15px);
  margin-bottom:2px;
}

.dockicons img{
  flex:0 0 auto;
  width:11.21%; max-width:calc(var(--tile) * .68); height:auto; aspect-ratio:1/1;
  object-fit:contain;
  margin-left:-3.14%;
  transform-origin:50% 100%;
  transform:scale(1) translateY(0);
  transition:transform .3s cubic-bezier(.2,.85,.3,1.4);
  filter:drop-shadow(0 2px 2px rgba(40,24,0,.35));
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  pointer-events:auto;
}

.dockicons img:first-child{ margin-left:0; }

/* Powiekszanie po najechaniu robi JS (magnify w app.js: najechana ikona 1.85,
   sasiedzi 1.42/1.14, pozostale 0.92) i ustawia transform inline, wiec
   regula CSS :hover zostalaby przez JS nadpisana. Dla klawiatury zostaje
   wariant :focus-visible, ktorego JS nie obsluguje. */
.tile--merch:focus-visible .dockicons img{
  transform:scale(1.14) translateY(-2px);
}


/* ---------------- BRIGHT OVERLAY ---------------- */

.bright{
  position:fixed; inset:0; z-index:50;
  pointer-events:none;
  opacity:0;
  transition:opacity .55s ease;
  background:
    radial-gradient(90% 70% at 22% 82%, rgba(255,232,176,.20), rgba(255,232,176,0) 72%),
    linear-gradient(180deg, rgba(255,244,214,.10), rgba(255,214,140,.06));
}

body.is-bright .bright{ opacity:1; }
body.is-bright .stage__inner{ filter:brightness(1.2) saturate(1.08); }
body.is-bright .stage__glow{ opacity:1; }


/* ---------------- FLYER (wir) ---------------- */

.flyer{
  position:fixed; z-index:150;
  margin:0; padding:0; border:0;
  pointer-events:none;
  opacity:0;
  background-repeat:no-repeat;
  background-position:center center;
  background-size:100% 100%;
  border-radius:22px;
  will-change:transform,opacity,filter;
}


/* ---------------- PANEL ---------------- */

.panel{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  visibility:hidden; pointer-events:none;
  cursor:default;
}

.panel.is-open{ visibility:visible; pointer-events:auto; }

.panel__backdrop{
  position:absolute; inset:0;
  background:
    radial-gradient(70% 60% at 50% 46%, rgba(255,240,210,.34), rgba(255,240,210,0) 72%),
    #0b0906 url(../img/introbg.webp) 50% 50%/cover no-repeat;
  opacity:0;
  will-change:opacity;
}

/* panel__body musi wypelniac panel - wszystkie dzieci sa absolute,
   wiec przy normalnym flow wysokosc spadlaby do zera */
.panel__body{ position:absolute; inset:0; z-index:2; }

.panel__view{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:calc(24px + env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom));
  opacity:0; visibility:hidden;
  will-change:opacity,transform;
}

.panel__view.is-active{ visibility:visible; }

.panel__close{
  position:absolute; z-index:6;
  top:max(16px, env(safe-area-inset-top));
  right:max(16px, env(safe-area-inset-right));
  width:clamp(50px, 5.2vw, 68px);
  height:clamp(50px, 5.2vw, 68px);
  display:grid; place-items:center;
  padding:0; border:0; border-radius:50%;
  background:rgba(12,8,2,.82);
  color:#ffe4a2;
  cursor:pointer;
  opacity:0;
  transform:scale(.5) rotate(-100deg);
  box-shadow:0 10px 30px rgba(0,0,0,.55), 0 0 0 1px rgba(255,226,170,.3);
  transition:opacity .3s .1s ease, transform .42s .08s cubic-bezier(.2,.9,.3,1.5), background .2s ease;
  -webkit-tap-highlight-color:transparent;
}

.panel.is-open .panel__close{ opacity:1; transform:none; }

.panel__close:hover{ background:#000; }
.panel__close:focus-visible{ outline:2px solid #ffe4a2; outline-offset:3px; }
.panel__close svg{ display:block; width:52%; height:52%; fill:currentColor; }

/* ---------------- RING (merch wokol ZAMOW) ---------------- */

.ring{
  position:absolute;
  left:50%; top:50%;
  width:0; height:0;
  z-index:1;
  pointer-events:auto;
}

.ring__item{
  /* Kąty i promień wylicza JS, także dla przeglądarek bez nowszych calc(). */
  position:absolute;
  left:0; top:0;
  width:var(--sz); height:var(--sz);
  margin:var(--half);
  transform:rotate(var(--a)) translateX(var(--r));
  transform-origin:50% 50%;
  pointer-events:auto;
  cursor:pointer;
}

.ring__orient{
  width:100%; height:100%;
  transform:rotate(var(--counter-a));
}

.ring__pop{
  width:100%; height:100%;
  opacity:0;
  transform:scale(.2);
}

.ring__pop img{
  display:block;
  width:100%; height:100%;
  object-fit:contain;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.6));
  transition:transform .22s ease, filter .22s ease;
  backface-visibility:hidden;
}

.ring__item.is-hovered{ z-index:10; }
.ring__item.is-hovered .ring__pop img{ transform:scale(1.24); filter:drop-shadow(0 16px 28px rgba(0,0,0,.72)); }
.ring.is-paused .ring__item,
.ring.is-paused .ring__orient{ animation-play-state:paused !important; }

/* Wejscie pierścienia (lot z Docka) prowadzi wylacznie skrypt - flyInFromDock().
   CSS-owa animacja wejscia bylaby wyzszym priorytetem niz animacja
   skryptowa, a do tego znieksztalcilaby recty przy pomiarze pozycji. */
.ring.is-live .ring__item{ animation:ringSpin var(--spin) linear infinite; }
.ring.is-live .ring__orient{ animation:ringCounterSpin var(--spin) linear infinite; }

/* Pełny, liniowy obieg. Osobna przeciwanimacja keeps artwork upright. */
@keyframes ringSpin{
  from{ transform:rotate(var(--a)) translateX(var(--r)); }
  to{ transform:rotate(calc(var(--a) + 360deg)) translateX(var(--r)); }
}

@keyframes ringCounterSpin{
  from{ transform:rotate(var(--counter-a)); }
  to{ transform:rotate(calc(var(--counter-a) - 360deg)); }
}

/* obraz w srodku - tam, gdzie wczesniej byl napis ZAMOW */
.zamowart{
  position:absolute;
  left:50%; top:50%;
  z-index:2;
  width:var(--art, 190px); height:auto;
  aspect-ratio:1/1;
  object-fit:contain;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 18px 44px rgba(0,0,0,.66));
  pointer-events:auto;
  cursor:pointer;
  opacity:0;
  transition:filter .22s ease;
}

.zamowart.is-hovered{ filter:drop-shadow(0 24px 56px rgba(0,0,0,.78)); }

.panel__view--merch.is-active .zamowart{ animation:artIn .7s cubic-bezier(.2,.9,.3,1.35) .12s both; }

@keyframes artIn{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.45) rotate(-16deg); }
  100%{ opacity:1; transform:translate(-50%,-50%) scale(1) rotate(0deg); }
}

/* napis ZAMOW - na sam dol */
.zamow{
  position:absolute;
  left:50%;
  bottom:max(18px, env(safe-area-inset-bottom));
  z-index:4;
  display:flex; align-items:center; justify-content:center; gap:12px;
  min-height:54px;
  padding:0 25px;
  border:1px solid rgba(255,225,158,.76);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(46,35,21,.92), rgba(13,11,9,.94));
  text-decoration:none;
  font-family:Georgia,'Times New Roman',serif;
  font-weight:700;
  font-size:clamp(15px, 2vw, 21px);
  line-height:1;
  letter-spacing:.16em;
  color:#fff0c8;
  box-shadow:0 8px 28px rgba(0,0,0,.48), 0 0 24px rgba(229,178,83,.2), inset 0 1px rgba(255,255,255,.12);
  transform:translateX(-50%);
  transition:background .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease;
  cursor:pointer;
}

.zamow:hover,.zamow:focus-visible{
  background:linear-gradient(180deg, rgba(73,53,28,.97), rgba(20,16,11,.98));
  border-color:#ffe4a2;
  box-shadow:0 10px 32px rgba(0,0,0,.58), 0 0 30px rgba(229,178,83,.36), inset 0 1px rgba(255,255,255,.18);
  transform:translateX(-50%) translateY(-2px);
}

.zamow__arrow{ font:400 20px/1 Arial,sans-serif; letter-spacing:0; color:#e9bd67; }

.ring-cta{
  position:fixed; z-index:250;
  left:0; top:0;
  opacity:0; visibility:hidden;
  transform:translateY(5px) scale(.96);
  padding:9px 15px;
  border:1px solid rgba(255,226,164,.85);
  border-radius:999px;
  background:rgba(20,16,10,.94);
  color:#fff0c8;
  font:800 11px/1 system-ui,-apple-system,'Segoe UI',sans-serif;
  letter-spacing:.18em;
  box-shadow:0 8px 26px rgba(0,0,0,.52),0 0 20px rgba(229,178,83,.22);
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease, visibility .15s ease;
}

.ring-cta.is-visible{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }

.embed{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  background:#0a0a0a;
  box-shadow:0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,226,170,.22);
}

.embed iframe{
  display:block; width:100%; height:100%;
  border:0; background:#121212;
}

.embed--spotify{
  width:min(92vw, 420px);
  height:min(74vh, 430px);
}

.embed--youtube{
  width:min(94vw, 1040px);
  aspect-ratio:16/9;
  background:radial-gradient(120% 120% at 50% 40%, #241a1a, #0a0a0a 70%);
}

.embed--youtube.is-fallback .embed__poster{ opacity:0; }

.embed__poster{
  display:block; width:100%; height:100%;
  object-fit:cover;
  background:#0a0a0a;
}

.embed__play{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:clamp(66px, 8vw, 96px);
  height:auto; aspect-ratio:68/48;
  padding:0; border:0; background:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.embed__play svg{ display:block; width:100%; height:100%; filter:drop-shadow(0 6px 16px rgba(0,0,0,.55)); transition:transform .22s ease; }
.embed__play:hover svg{ transform:scale(1.1); }
.embed__play:focus-visible{ outline:2px solid #fff; outline-offset:4px; border-radius:6px; }
.embed__playbg{ fill:rgba(200,16,46,.94); }
.embed__playfg{ fill:#fff; }

.embed__play::after{
  content:'';
  position:absolute; top:50%; left:50%;
  width:100%; height:100%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:rgba(255,255,255,.16);
  animation:playPulse 2.4s ease-out infinite;
  pointer-events:none;
}

@keyframes playPulse{
  0%{ opacity:.7; transform:translate(-50%,-50%) scale(1); }
  70%{ opacity:0; transform:translate(-50%,-50%) scale(1.9); }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(1.9); }
}


/* ---------------- PORTRAIT / NARROW ---------------- */

@media (max-aspect-ratio: 1/1){

  .stage__bg{ background-position:59.5% 50%; }

  /* NAPIS: wysoko ustawiony po widocznej treści, nie po całym pliku.
     Alfa-box liter w napis.webp: x=20.83%..90.0%, y=16.67%..41.48%
     pliku. Pozycja i translateY(-16.67%) ustawiają widoczny początek
     napisu 5vh poniżej bezpiecznej krawędzi ekranu. */
  .layer--napis{
    left:50%; top:calc(env(safe-area-inset-top) + 5vh);
    bottom:auto;
    z-index:3;
    width:min(94vw, 600px);
    height:auto;
    transform:translate(-55.42%, -16.67%);
  }

  .layer--napis .layer__drop{ position:relative; inset:auto; width:100%; }
  .layer--napis .layer__drop img{ position:static; width:100%; height:auto; }

  /* Postac (DGE) stoi na Docku, a nie lewituje w srodku pasma.
     Alfa-box postaci w dge.webp: x=1709..2850 z 3840 oraz y=447..2159 z 2160,
     czyli srodek postaci lezy w 59.36% x, a dolna krawedz alfa-boxu
     (stopy) w 99.95% y warstwy. Warstwa jest wiec kotwiczona DOLNYM
     brzegiem, lekko pod górnym rzędem Docka, tak by jego kafel zasłaniał
     sam dolny brzeg grafiki. translateX(-59.36%) centruje postac
     poziomo, translateY(-100%) opiera ja na dolnej krawedzi.
     Drift DGE ma w pionie wylacznie wartosci ujemne (postać płynie tylko
     w górę), a jej dolną krawędź zasłania górny rząd Docka.
     Wysokosc to 70% ekranu, ograniczone pasmem miedzy belka cookies
     a Dockiem - --bar-h ustawia skrypt belki. */
  .layer--dge{
    --dge-h:min(88.27dvh, calc(100dvh - var(--bar-h, 0px) - var(--dock-h)));
    left:50%;
    top:calc(100dvh - var(--dock-h) + 29px);
    width:calc(var(--dge-h) * 16 / 9);
    height:var(--dge-h);
    transform:translate(-59.36%, -100%);
  }

  .layer--dge img{ position:absolute; inset:0; width:100%; height:100%; object-fit:fill; }

  /* Dock pionowo: SPRAWDZ na calej szerokosci, SLUCHAJ i ZOBACZ pod nim.
     W ukladzie poziomym SPRAWDZ musi byc szeroki na 12 miniaturek, przez co
     trzy kafle nie miescily sie w szerokosci telefonu i wychodzily za
     prawa krawedz. Uzywamy siatki, a nie kolumnowego flexa: flex daje
     kazdemu kaflowi osobny wiersz, a siatka pozwala postawic dwa dolne
     kafle obok siebie bez dodatkowego elementu opakowujacego. */
  .dock{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    align-items:start;
    width:min(calc(100vw - 16px), 560px);
    bottom:max(10px, env(safe-area-inset-bottom));
    gap:7px;
    --unit:var(--tile);
    --ik-pad:10px;
  }

  .tile--merch{ grid-column:1 / -1; width:100%; height:var(--tile); }
  .tile--order,
  .tile--spotify,
  .tile--youtube{ width:var(--tile); height:var(--tile); justify-self:center; }

  /* wysokosc pionowego Docka - panel musi zostawic mu miejsce */
  :root{ --gap:7px; --tile:clamp(54px, 15vw, 78px); --dock-h:calc(2 * var(--tile) + var(--gap) + 22px); }

  .panel__view{ padding-bottom:calc(var(--dock-h) + 10px); }

  .tile__face{ border-radius:24%; padding:4px 5px 3px; }
  .tile__label{ letter-spacing:.08em; }
  .dockicons{ height:calc(100% - 13px); }

  .zamow{ min-height:50px; padding:0 20px; }

  .embed--spotify{ width:min(92vw, 420px); height:min(66vh, 430px); }
  .embed--youtube{ width:min(96vw, 1040px); }
}

@media (max-width: 380px){
  :root{ --tile:52px; }
}


/* ---------------- REDUCED MOTION ---------------- */

@media (prefers-reduced-motion: reduce){
  .layer--dge img,
  .layer--napis .layer__drop,
  .layer--napis .layer__drop img,
  .tile,
  .zamowart,
  .ring.is-live .ring__item,
  .ring.is-live .ring__orient,
  .embed__play::after,
  .dockicons img{ animation:none !important; }

  .zamowart,
  .ring__pop{ opacity:1; }

  .panel__close{ transition:opacity .2s ease, transform .2s ease; }
  .tile__face{ transition:none; }
}

/* Firefox: keep the large photographic layers static and animate only opacity.
   This avoids repeatedly scaling and repainting the full-resolution artwork. */
@supports (-moz-appearance: none){
  .stage__inner{ filter:none; transition:none; }
  .layer,
  .layer img{ will-change:auto; }
  .layer--dge img,
  .layer--napis .layer__drop img{ animation:none; }
  body.is-bright .stage__inner{ filter:none; }
}

@media (prefers-reduced-motion: reduce){
  .layer__drop{ transform:none !important; animation:none !important; }
}