/* Browar Rodzinny Wyszak - kiosk przy stoliku.
   Warstwa wizualna W1 "Karta z Warzelni": jasny editorial, porcelana + miod,
   typografia-first (zdjec potraw jeszcze nie ma). Przeszczepy z bake-offu:
   rejestr piw z wykropkowaniem (W3), bursztynowy poziom w pigulce koszyka (W2). */

/* Czcionki z naszego serwera zamiast Google Fonts: start nie czeka na zewnetrzny CSS
   (blokowal pierwsze wyswietlenie), a service worker trzyma je offline.
   Tylko latin + latin-ext (polskie i niemieckie znaki). Pliki: assets/fonts/. */
/* latin-ext */
/* Cyrylica (karta po ukrainsku): Bricolage, Schibsted i Spline Sans Mono jej nie maja, wiec same
   znaki cyrylicy ida z Inter i IBM Plex Mono. unicode-range - plik pobiera sie dopiero przy ukrainskim. */
@font-face {
  font-family: "Wyszak Cyrylica";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Wyszak Cyrylica Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Wyszak Cyrylica Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-600-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/bricolage-grotesque-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-0130, U+0132-0151, U+0154-017F;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/bricolage-grotesque-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-italic-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-0130, U+0132-0151, U+0154-017F;
}
/* latin */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-italic-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-0130, U+0132-0151, U+0154-017F;
}
/* latin */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/spline-sans-mono-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-0130, U+0132-0151, U+0154-017F;
}
/* latin */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/spline-sans-mono-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Kroje z logo browaru, dopasowane nakladka 1:1 przy rekonstrukcji logo:
   WYSZAK = Playfair Display 600, BROWAR RODZINNY = Montserrat 600. Tylko do znaku marki. */
@font-face {
  font-family: "Wyszak Logo Szeryf";
  src: url("/assets/fonts/playfair-display-logo.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}

@font-face {
  font-family: "Wyszak Logo Bezszeryf";
  src: url("/assets/fonts/montserrat-logo.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* paleta W1 */
  --porcelana: #faf7f2;
  --karta: #fffefb;
  --panel: #f2ebdf;
  --atrament: #1a1713;
  --atrament-80: rgba(26, 23, 19, 0.82);
  --atrament-64: rgba(26, 23, 19, 0.66);
  --atrament-45: rgba(26, 23, 19, 0.45);
  --miod: #c77b02;
  --miod-ciemny: #8f5a02;
  --miod-mgla: #f8ecd6;
  /* bordo z logo Wyszaka (probka z logo-wyszak.webp) - delikatna, przygaszona wersja */
  --bordo: #6e2620;
  --bordo-jasne: #7e3530;
  --bordo-ciemne: #5b1e19;
  --chmiel: #5a6b4f;
  --chmiel-mgla: rgba(90, 107, 79, 0.32);
  --linia: #e8e1d6;
  /* tlo ilustracji gwaszem (probka z plikow) - panel z grafika zlewa sie z obrazem */
  --tlo-ilustracji: #fcf2e8;

  /* typografia (cyrylica z "Wyszak Cyrylica" - fonty karty jej nie maja) */
  --font-display: "Bricolage Grotesque", "Wyszak Cyrylica", system-ui, sans-serif;
  --font: "Schibsted Grotesk", "Wyszak Cyrylica", system-ui, sans-serif;
  --font-mono: "Spline Sans Mono", "Wyszak Cyrylica Mono", ui-monospace, monospace;

  /* geometria */
  --r-s: 12px;
  --r-m: 16px;
  --r-l: 20px;
  --r-xl: 26px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --sprezyna: cubic-bezier(0.32, 1.22, 0.46, 1);

  --pasek-wys: 68px;
  --koszyk-wys: 88px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

[hidden] {
  display: none !important;
}

html,
body {
  height: 100%;
}

body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--porcelana);
  color: var(--atrament);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
}

svg {
  display: block;
}

:focus-visible {
  outline: 2px solid var(--miod);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ ekrany */

.ekran {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
}

.ekran[data-aktywny] {
  display: flex;
  z-index: 1;
  animation: ekran-wejscie 0.26s var(--ease) both;
}

/* Ekran zegnajacy sie zostaje pod spodem na czas wejscia nowego,
   zeby tlo strony nie mignelo miedzy podmiana. */
.ekran[data-zegna] {
  display: flex;
  z-index: 0;
}

@keyframes ekran-wejscie {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

/* --------------------------------------------------------- ekran powitalny */

/* Jasne powitanie bez wideo - laduje sie od razu. Po lewej marka, wezwanie
   i jezyki, po prawej trzy kolumny ilustracji z karty plyna powoli w gore
   i w dol. W pionie mozaika jest u gory, tresc pod nia. */
#ekran-powitanie {
  --mozaika-odstep: 18px;
  background:
    radial-gradient(62% 72% at 16% 56%, rgba(248, 236, 214, 0.95), transparent 72%),
    var(--porcelana);
  cursor: pointer;
  overflow: hidden;
  /* clip zamiast samego hidden: mozaika jest wyzsza od ekranu (ok. 2000 px), a hidden
     pozwala przewinac ja programowo - klik albo fokus potrafily zsunac powitanie w gore */
  overflow: clip;
}

.powitanie-mozaika {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 54%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mozaika-odstep);
  padding-right: 28px;
  /* cienie skrajnych kafli przycinala dotad maska; w pionie tasmy przycina sam ekran (mozaika ma
     jego pelna wysokosc), a nakladka zaniku musi wystawac za ulamkowa dolna krawedz */
  overflow-x: clip;
  /* nakladka zaniku (::after, z-index 1) zostaje wewnatrz mozaiki, pod karta Wi-Fi i trescia;
     0 zamiast auto nie zmienia kolejnosci rysowania wzgledem reszty ekranu */
  z-index: 0;
  pointer-events: none;
}

/* Wygaszenie gory i dolu: nakladka w kolorze tla zamiast mask-image na kontenerze. Maska nad
   ruchomymi tasmami i filmami kazala tabletowi skladac cala mozaike w osobnym przebiegu co
   klatke. W poziomie tlo pod strefami zaniku to porcelana (poswiata z lewej gasnie wczesniej,
   na tablecie 8,7" roznica najwyzej 1/255), wiec wyglad ten sam. */
.powitanie-mozaika::after {
  content: "";
  position: absolute;
  /* 1 px zapasu: przy ulamkowej wysokosci ekranu (533 x 1,5 = 799,5 px) ostatni rzad
     pikseli kafla przeswitywal spod krawedzi nakladki */
  inset: -1px 0;
  z-index: 1;
  /* zanik w tych samych miejscach co dawna maska (0-14 % i 86-100 % wysokosci mozaiki) */
  background: linear-gradient(
    180deg,
    var(--porcelana) 1px,
    transparent calc(1px + (100% - 2px) * 0.14),
    transparent calc(1px + (100% - 2px) * 0.86),
    var(--porcelana) calc(100% - 1px)
  );
  pointer-events: none;
}

/* srodkowa kolumna przesunieta o pol kafla - bez rownych rzedow */
.mozaika-kolumna:nth-child(2) {
  margin-top: -80px;
}

.mozaika-tasma {
  display: flex;
  flex-direction: column;
  gap: var(--mozaika-odstep);
  animation: mozaika-gora 72s linear infinite;
  will-change: transform;
}

.mozaika-kolumna:nth-child(2) .mozaika-tasma {
  animation-name: mozaika-dol;
  animation-duration: 86s;
}

.mozaika-kolumna:nth-child(3) .mozaika-tasma {
  animation-duration: 78s;
}

/* poza powitaniem tasmy stoja - zero pracy dla GPU w menu */
#ekran-powitanie:not([data-aktywny]) .mozaika-tasma {
  animation-play-state: paused;
}

/* Pod otwartym oknem ruch stoi - rozmyte tlo nie musi byc liczone od nowa co klatke
   (kiosk.js: wstrzymujRuchPodOknami). Fotobudka zostaje, tam pod oknem jest kamera. */
html[data-okno] .ekran:not(#ekran-fotobudka) *,
html[data-okno] #maskotka,
html[data-okno] #maskotka * {
  animation-play-state: paused !important;
}

/* tasma ma dwie kopie kafli: przesuniecie o polowe + pol odstepu = bezszwowa petla */
@keyframes mozaika-gora {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(calc(-50% - var(--mozaika-odstep) / 2));
  }
}

@keyframes mozaika-dol {
  from {
    transform: translateY(calc(-50% - var(--mozaika-odstep) / 2));
  }
  to {
    transform: translateY(0);
  }
}

.mozaika-kafel {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  overflow: hidden;
  background: var(--tlo-ilustracji);
  box-shadow: 0 1px 2px rgba(26, 23, 19, 0.05), 0 14px 30px -20px rgba(26, 23, 19, 0.3);
}

.mozaika-kafel img,
.mozaika-kafel video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.powitanie-tresc {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 46%;
  height: 100%;
  padding: 48px 32px 48px 64px;
}

/* Zagiel emblematu stoi na rowni z napisem: od gory liter WYSZAK do dolu BROWAR RODZINNY
   (zmierzone na pikselach). SVG ma przezroczyste marginesy po bokach (13,6% i 15,6%
   szerokosci) - ujemny margines i maly gap daja widoczny odstep ok. 16 px, a lewa
   krawedz zagla rowna sie z tekstem ponizej. Maszt z proporczykiem wystaje ponad napis. */
.powitanie-marka {
  display: flex;
  align-items: center;
  gap: 4px;
}

.powitanie-znak {
  flex: none;
  width: 80px;
  margin-left: -11px;
  line-height: 0;
  color: #6a1308;
}

.emblemat {
  width: 100%;
  height: auto;
  overflow: visible;
}

/* proporzec na maszcie lopocze - jedyny ciagly ruch marki, lekki */
.em-proporzec {
  transform-box: fill-box;
  transform-origin: 0 50%;
  animation: proporzec 2.8s ease-in-out infinite;
}

@keyframes proporzec {
  0%,
  100% {
    transform: skewY(0deg) scaleX(1);
  }
  50% {
    transform: skewY(-7deg) scaleX(0.9);
  }
}

.powitanie-nazwa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.powitanie-wordmark {
  margin-right: -0.198em;
  font-family: "Wyszak Logo Szeryf", Georgia, serif;
  font-size: 40px;
  font-weight: 600;
  letter-spacing: 0.198em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--atrament);
}

.powitanie-dopisek {
  margin-right: -0.132em;
  font-family: "Wyszak Logo Bezszeryf", system-ui, sans-serif;
  font-size: 11.1px;
  font-weight: 600;
  letter-spacing: 0.132em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--chmiel);
}

/* Dwa kroki powitania wchodza miekko, krok po kroku. */
.powitanie-krok {
  width: 100%;
  margin-top: 40px;
  animation: powitanie-wejscie 0.5s var(--ease) both;
}

.powitanie-krok[hidden] {
  display: none;
}

/* Krok 1: fraza "Wybierz jezyk" zmienia jezyk co 2,6 s (slowa wjezdzaja fala z rozmycia),
   linia piwa przelewa sie do jej szerokosci, a kafel tego jezyka sie podswietla. */
.powitanie-kicker {
  position: relative;
  height: 1.5em;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--miod-ciemny);
}

.powitanie-jezyk-tytul {
  position: relative;
  height: 1.18em;
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: clamp(34px, 3.8vw, 58px);
  font-weight: 780;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--atrament);
}

.powitanie-kicker > span,
.powitanie-jezyk-tytul > [data-jezyk] {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
}

/* Frazy we wszystkich jezykach leza w jednym miejscu. Zanim skrypt pokaze pierwsza (na telefonie
   i slabszym laczu to nawet pol sekundy), wszystkie sa ukryte - wczesniej nachodzily na siebie. */
.powitanie-kicker > span:not([data-aktywny]):not([data-wychodzi]),
.powitanie-jezyk-tytul > [data-jezyk]:not([data-aktywny]):not([data-wychodzi]) {
  visibility: hidden;
}

.slowo {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em) rotate(4deg);
  filter: blur(10px);
  transition:
    opacity 0.4s var(--ease),
    transform 0.65s var(--sprezyna),
    filter 0.45s var(--ease);
  transition-delay: calc(var(--i, 0) * 55ms);
}

[data-aktywny] > .slowo {
  opacity: 1;
  transform: none;
  filter: none;
}

/* stara fraza odplywa w gore - szybciej niz nowa wchodzi */
[data-wychodzi] > .slowo {
  opacity: 0;
  transform: translateY(-0.45em) rotate(-3deg);
  filter: blur(8px);
  transition-duration: 0.28s;
  transition-delay: calc(var(--i, 0) * 30ms);
}

/* linia piwa (sygnatura W1) pod fraza */
.powitanie-linia {
  position: absolute;
  left: 2px;
  bottom: -10px;
  /* szerokosc przez scaleX (kompozytor), nie width - bez przeliczania ukladu */
  width: 100px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, #f0b95b, var(--miod));
  box-shadow: 0 2px 8px rgba(199, 123, 2, 0.35);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s var(--sprezyna), box-shadow 0.3s var(--ease);
}

.powitanie-jezyki {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-width: 470px;
  margin-top: 34px;
}

/* kafle jezyka: kompaktowe pigulki, flaga + nazwa w jej wlasnym jezyku */
.flaga {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 7px 24px 7px 7px;
  border: 1.5px solid var(--linia);
  border-radius: 999px;
  background: var(--karta);
  color: var(--atrament);
  font-size: 17px;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(26, 23, 19, 0.05), 0 12px 24px -20px rgba(26, 23, 19, 0.45);
  transition:
    transform 0.35s var(--sprezyna),
    background-color 0.3s var(--ease),
    border-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}

/* kafel jezyka, ktory wlasnie pokazuje fraza: bursztyn, uniesienie, lopoczaca flaga */
.flaga[data-podswietlony] {
  border-color: var(--miod);
  background: var(--miod-mgla);
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -16px rgba(199, 123, 2, 0.6);
}

.flaga[data-podswietlony] .flaga-ikona svg {
  animation: flaga-powiew 1.3s ease-in-out infinite;
}

@keyframes flaga-powiew {
  0%,
  100% {
    transform: skewY(0deg) scaleX(1);
  }
  50% {
    transform: skewY(-4deg) scaleX(0.94);
  }
}

.flaga:active {
  transform: scale(0.95);
}

/* wybrany: krotkie "wyskoczenie", potem powitanie przechodzi dalej */
.flaga[data-wybrany] {
  border-color: var(--miod);
  background: var(--miod);
  animation: flaga-wybor 0.22s var(--sprezyna);
}

@keyframes flaga-wybor {
  50% {
    transform: scale(1.08);
  }
}

/* kafle wjezdzaja fala przy kazdym powrocie na powitanie */
#ekran-powitanie[data-aktywny] #krok-jezyk .flaga {
  animation: flaga-wejscie 0.6s var(--sprezyna) both;
}

#ekran-powitanie[data-aktywny] #krok-jezyk .flaga:nth-child(2) {
  animation-delay: 0.07s;
}

#ekran-powitanie[data-aktywny] #krok-jezyk .flaga:nth-child(3) {
  animation-delay: 0.14s;
}

#ekran-powitanie[data-aktywny] #krok-jezyk .flaga[data-wybrany] {
  animation: flaga-wybor 0.22s var(--sprezyna);
}

@keyframes flaga-wejscie {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.92);
  }
}

/* dotkniecie obok kafli: kafle sie upominaja (potrzasniecie + bursztynowa ramka) */
#krok-jezyk[data-ponaglenie] .flaga {
  border-color: var(--miod);
  animation: flaga-ponaglenie 0.5s var(--ease) !important;
}

#krok-jezyk[data-ponaglenie] .powitanie-linia {
  box-shadow: 0 0 0 3px rgba(199, 123, 2, 0.25), 0 2px 12px rgba(199, 123, 2, 0.6);
}

@keyframes flaga-ponaglenie {
  20%,
  60% {
    transform: translateX(-6px);
  }
  40%,
  80% {
    transform: translateX(6px);
  }
}

/* Okragla ikona flagi - viewBox 60x30 dociety przez slice do kola. */
.flaga-ikona {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(26, 23, 19, 0.14), 0 3px 8px rgba(26, 23, 19, 0.12);
}

.flaga-ikona svg {
  display: block;
  /* zapas wokol flagi: powiew (skos + zwezenie) nigdy nie odsloni tla kola.
     Slice i tak przycina do okregu, wiec na spokojnie nic nie widac. */
  width: 124%;
  height: 124%;
  margin: -12% 0 0 -12%;
  transform-origin: left center;
}

/* bez ruchu: fraza i nadtytul stoja we wszystkich jezykach naraz - pierwszy duzy, reszta w linii pod nim */
@media (prefers-reduced-motion: reduce) {
  .powitanie-kicker,
  .powitanie-jezyk-tytul {
    height: auto;
  }

  .powitanie-kicker > span,
  .powitanie-jezyk-tytul > [data-jezyk] {
    position: static;
    display: block;
    visibility: visible;
  }

  .powitanie-jezyk-tytul > [data-jezyk]:not(:first-child) {
    display: inline-block;
    margin: 0.2em 0.7em 0 0;
    font-size: 0.42em;
    color: var(--atrament-64);
  }

  .powitanie-kicker > span:not(:first-child) {
    display: none;
  }

  .slowo {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .powitanie-linia {
    display: none;
  }
}

/* Krok 2: zamowienie albo gry w wybranym jezyku. Wszystko wchodzi fala, gdy krok sie
   pokaze (display none -> blok restartuje animacje), a karty "zyja" po swojemu. */
.powitanie-witaj {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--miod-ciemny);
  animation: powitanie-wejscie 0.5s var(--ease) both;
}

.powitanie-wezwanie {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: clamp(40px, 4.8vw, 62px);
  font-weight: 780;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--atrament);
  text-wrap: balance;
}

/* baza .slowo z kroku 1 jest niewidoczna (tam pokazuje ja data-aktywny) - tu slowa
   stoja widoczne, a wejscie robi sama animacja */
#krok-wybor .powitanie-wezwanie .slowo {
  display: inline-block;
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
  animation: slowo-wejscie 0.7s var(--sprezyna) both;
  animation-delay: calc(80ms + var(--i, 0) * 70ms);
}

@keyframes slowo-wejscie {
  from {
    opacity: 0;
    transform: translateY(0.5em) rotate(4deg);
    filter: blur(10px);
  }
}

/* linia piwa rosnie pod pytaniem */
.wybor-linia {
  display: block;
  width: 120px;
  height: 4px;
  margin-top: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, #f0b95b, var(--miod));
  box-shadow: 0 2px 8px rgba(199, 123, 2, 0.35);
  transform-origin: left center;
  animation: linia-rosnie 0.8s var(--sprezyna) 0.35s both;
}

@keyframes linia-rosnie {
  from {
    transform: scaleX(0);
  }
}

.powitanie-wybory {
  display: grid;
  gap: 14px;
  margin-top: 26px;
}

.wybor {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 24px;
  align-items: center;
  gap: 18px;
  min-height: 112px;
  padding: 12px 22px 12px 12px;
  border-radius: 24px;
  text-align: left;
  overflow: hidden;
  isolation: isolate;
  animation: wybor-wejscie 0.65s var(--sprezyna) both;
  transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease);
}

.wybor--gry {
  animation-delay: 0.1s;
}

@keyframes wybor-wejscie {
  from {
    opacity: 0;
    transform: translateX(-28px) scale(0.96);
  }
}

.wybor:active {
  transform: scale(0.98);
}

/* Na hover rusza sie tylko strzalka. Podnoszenie calego kafla migotalo: kursor przy
   krawedzi wypadal spod podniesionego kafla, ten opadal i tak w kolko co klatke. */
@media (hover: hover) {
  .wybor:hover .wybor-strzalka {
    transform: translateX(4px);
  }
}

.wybor--zamow {
  background: var(--tlo-ilustracji);
  color: var(--atrament);
  border: 1.5px solid rgba(110, 38, 32, 0.45);
  box-shadow: 0 0 0 5px rgba(110, 38, 32, 0.14), 0 0 26px rgba(110, 38, 32, 0.28), 0 18px 36px -18px rgba(91, 30, 25, 0.55);
}

/* bursztynowy blysk przesuwa sie po glownej karcie co kilka sekund */
.wybor--zamow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(240, 185, 91, 0.22) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: wybor-blysk 5.5s ease-in-out 1.2s infinite;
  pointer-events: none;
}

@keyframes wybor-blysk {
  0%,
  55% {
    transform: translateX(-100%);
  }
  85%,
  100% {
    transform: translateX(100%);
  }
}

.wybor--gry {
  background: var(--tlo-ilustracji);
  color: var(--atrament);
  border: 1.5px solid rgba(199, 123, 2, 0.35);
}

/* mini-galeria dan w karcie "Zamow": przenikanie z lekkim najazdem */
.wybor-galeria {
  position: relative;
  width: 112px;
  height: 88px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--tlo-ilustracji);
  box-shadow: inset 0 0 0 1px rgba(250, 247, 242, 0.08);
}

.wybor-galeria img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.12);
  transition: opacity 0.7s var(--ease), transform 2.6s ease-out;
}

.wybor-galeria img[data-aktywny] {
  opacity: 1;
  transform: scale(1);
}

/* morze w karcie "Gry": dwie fale plyna w przeciwne strony, lodz sie kolysze */
.wybor-morze {
  position: relative;
  width: 112px;
  height: 88px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, #e3f1ef 0%, #bfdcdf 100%);
}

.morze-fala {
  position: absolute;
  left: 0;
  width: 200%;
  height: 26px;
  animation: morze-plynie 4s linear infinite;
}

.morze-fala path {
  fill: #7fb6c0;
}

.morze-fala--tyl {
  bottom: 12px;
  opacity: 0.55;
  animation-duration: 6s;
  animation-direction: reverse;
}

.morze-fala--przod {
  bottom: -4px;
}

.morze-fala--przod path {
  fill: #5fa0ad;
}

@keyframes morze-plynie {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.morze-lodz {
  position: absolute;
  left: 22px;
  bottom: 10px;
  width: 64px;
  height: auto;
  transform-origin: 50% 90%;
  animation: lodz-kolysze 2.6s ease-in-out infinite;
}

@keyframes lodz-kolysze {
  0%,
  100% {
    transform: translateY(0) rotate(-4deg);
  }
  50% {
    transform: translateY(-4px) rotate(4deg);
  }
}

/* moneta wyskakuje z wody co kilka sekund */
.morze-moneta {
  position: absolute;
  right: 12px;
  bottom: 8px;
  width: 22px;
  height: auto;
  opacity: 0;
  animation: moneta-wyskok 3.8s var(--ease) 1s infinite;
}

@keyframes moneta-wyskok {
  0%,
  60%,
  100% {
    opacity: 0;
    transform: translateY(10px) rotate(0deg);
  }
  72% {
    opacity: 1;
    transform: translateY(-26px) rotate(180deg);
  }
  86% {
    opacity: 1;
    transform: translateY(-30px) rotate(320deg) scale(1.1);
  }
  95% {
    opacity: 0;
    transform: translateY(-34px) rotate(360deg) scale(0.6);
  }
}

.wybor-tekst {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.wybor-nazwa {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 720;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-wrap: balance;
}

/* strzalka co jakis czas "zaprasza" w prawo */
.wybor-strzalka {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
  transition: transform 0.2s var(--ease);
  animation: strzalka-zaprasza 3.2s ease-in-out 1.6s infinite;
}

.wybor--gry .wybor-strzalka {
  animation-delay: 2.4s;
}

@keyframes strzalka-zaprasza {
  0%,
  70%,
  100% {
    translate: 0 0;
  }
  80% {
    translate: 6px 0;
  }
  90% {
    translate: 0 0;
  }
}

.wybor--zamow .wybor-strzalka {
  color: var(--bordo);
  opacity: 1;
}

#krok-wybor .powitanie-zmien-jezyk {
  animation: powitanie-wejscie 0.5s var(--ease) 0.3s both;
}

#krok-wybor .powitanie-zmien-jezyk .flaga-ikona svg {
  animation: flaga-powiew 1.6s ease-in-out infinite;
}

.powitanie-zmien-jezyk {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin-top: 16px;
  padding: 0 16px 0 6px;
  border-radius: 999px;
  border: 1px solid var(--linia);
  background: var(--karta);
  font-size: 15px;
  font-weight: 650;
}

.powitanie-zmien-jezyk .flaga-ikona {
  width: 34px;
  height: 34px;
}

.powitanie-zmien-etykieta {
  color: var(--miod-ciemny);
}

.powitanie-zmien-etykieta::before {
  content: "·";
  margin-right: 8px;
  color: var(--atrament-45);
}

.powitanie-stolik {
  margin-top: 26px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--atrament-64);
}

/* Wejscie przy kazdym powrocie na powitanie: tresc i kolumny fala, bez czekania. */
#ekran-powitanie[data-aktywny] .powitanie-marka {
  animation: powitanie-wejscie 0.6s var(--ease) both;
}

#ekran-powitanie[data-aktywny] .powitanie-stolik {
  animation: powitanie-wejscie 0.6s var(--ease) 0.24s both;
}

#ekran-powitanie[data-aktywny] .mozaika-kolumna {
  animation: mozaika-wejscie 0.9s var(--ease) both;
}

#ekran-powitanie[data-aktywny] .mozaika-kolumna:nth-child(2) {
  animation-delay: 0.1s;
}

#ekran-powitanie[data-aktywny] .mozaika-kolumna:nth-child(3) {
  animation-delay: 0.2s;
}

@keyframes powitanie-wejscie {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@keyframes mozaika-wejscie {
  from {
    opacity: 0;
    transform: translateY(48px);
  }
}

/* Pion: mozaika na gorze (wygasza sie w dol), tresc pod nia. */
@media (orientation: portrait) {
  #ekran-powitanie {
    --mozaika-odstep: 14px;
    background:
      radial-gradient(90% 50% at 30% 80%, rgba(248, 236, 214, 0.95), transparent 72%),
      var(--porcelana);
  }

  .powitanie-mozaika {
    left: 0;
    bottom: auto;
    width: auto;
    height: 52%;
    padding: 0 24px;
    /* w pionie pod dolem mozaiki jest juz cieplejsza poswiata tla, wiec nakladka w kolorze
       porcelany zostawilaby krawedz - zostaje maska (tablety w lokalu pracuja w poziomie) */
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 62%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 62%, transparent 100%);
  }

  .powitanie-mozaika::after {
    display: none;
  }

  /* tresc zakotwiczona u dolu - kciuk i wzrok goscia sa przy dolnej krawedzi */
  .powitanie-tresc {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    justify-content: flex-end;
    padding: 0 56px 56px;
  }

  .powitanie-krok {
    margin-top: 28px;
  }

  /* w pionie jest szeroko - fraza i kafle jezyka moga byc wieksze */
  .powitanie-jezyk-tytul {
    font-size: clamp(44px, 7.2vw, 66px);
  }

  .powitanie-kicker {
    font-size: 14px;
  }

  .flaga {
    min-height: 72px;
    padding-right: 28px;
    font-size: 19px;
  }

  .flaga-ikona {
    width: 56px;
    height: 56px;
  }
}

/* -------------------------------------------------------------- ekran menu */

#ekran-menu {
  background: var(--porcelana);
}

.pasek-gorny {
  flex: none;
  height: var(--pasek-wys);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px;
}

.pasek-logo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 48px;
}

.pasek-wordmark {
  font-family: "Wyszak Logo Szeryf", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.198em;
  text-transform: uppercase;
  color: var(--atrament);
}

.pasek-wordmark-dopisek {
  font-family: "Wyszak Logo Bezszeryf", system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.132em;
  text-transform: uppercase;
  color: var(--chmiel);
}

.pasek-prawa {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pasek-stolik {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--linia);
  border-radius: 999px;
  background: var(--karta);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--atrament-80);
  font-variant-numeric: tabular-nums;
}

.pasek-stolik #numer-stolika {
  color: var(--miod-ciemny);
  font-weight: 600;
}

/* jezyk karty: przycisk z biezaca flaga i lista szesciu jezykow pod nim */
.przelacznik-jezyka {
  position: relative;
  flex: none;
}

.jezyk-biezacy {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 48px;
  padding: 0 12px 0 6px;
  border: 1px solid var(--linia);
  border-radius: 999px;
  background: var(--karta);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--atrament-80);
}

.jezyk-biezacy .flaga-ikona {
  width: 34px;
  height: 34px;
}

.jezyk-biezacy > svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: rotate 0.2s var(--ease);
}

.jezyk-biezacy[aria-expanded="true"] > svg {
  rotate: 180deg;
}

.jezyk-lista {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 70;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  width: 360px;
  padding: 10px;
  border-radius: var(--r-l);
  background: var(--karta);
  box-shadow: 0 18px 44px rgba(26, 23, 19, 0.2), 0 0 0 1px var(--linia);
  transform-origin: top right;
  animation: jezyk-lista-wejscie 0.22s var(--ease) both;
}

.jezyk-lista[hidden] {
  display: none;
}

@keyframes jezyk-lista-wejscie {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
  }
}

.jezyk-lista button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 6px 12px 6px 6px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 650;
  color: var(--atrament);
  text-align: left;
  transition: background 0.15s ease;
}

.jezyk-lista button:active {
  background: var(--panel);
}

.jezyk-lista button[aria-pressed="true"] {
  background: var(--miod-mgla);
  box-shadow: inset 0 0 0 1.5px var(--miod);
}

.jezyk-lista .flaga-ikona {
  width: 32px;
  height: 32px;
}

.uklad {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ------------------------------------------- rail kategorii + linia piwa */

.kategorie {
  flex: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-bottom: 1px solid var(--linia);
  scrollbar-width: none;
  background: var(--porcelana);
}

.kategorie::-webkit-scrollbar {
  display: none;
}

.kategorie-tor {
  position: relative;
  display: flex;
  gap: 2px;
  width: max-content;
  padding: 4px 18px 12px;
}

.kategoria {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 17px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--atrament-64);
  white-space: nowrap;
  transition: color 0.18s ease;
}

.kategoria-licznik {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--atrament-64);
  border: 1px solid var(--linia);
  border-radius: 999px;
  padding: 2px 7px;
  font-variant-numeric: tabular-nums;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.kategoria[aria-current="true"] {
  color: var(--atrament);
  font-weight: 700;
}

.kategoria[aria-current="true"] .kategoria-licznik {
  background: var(--miod-mgla);
  border-color: transparent;
  color: var(--miod-ciemny);
}

.linia-piwa {
  position: absolute;
  bottom: 7px;
  left: 18px;
  width: 0;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #e9a339, var(--miod));
  box-shadow: 0 1px 3px rgba(199, 123, 2, 0.32);
  pointer-events: none;
}

/* ------------------------------------------------- szukanie w karcie */

/* Rzad pod paskiem: "Szukaj" stoi w miejscu, chipy przewijaja sie obok. Otwarte pole
   przykrywa caly rzad w tym samym miejscu, wiec nic pod nim nie skacze. */
.kategorie-rzad {
  position: relative;
  flex: none;
  display: flex;
  align-items: flex-start;
  border-bottom: 1px solid var(--linia);
  background: var(--porcelana);
}

.kategorie-rzad .kategorie {
  flex: 1;
  min-width: 0;
  border-bottom: 0;
  /* chipy chowaja sie pod przyciskiem miekko, a nie ucinane na ostro */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px);
  mask-image: linear-gradient(90deg, transparent, #000 14px);
}

.kategorie-rzad .kategorie-tor {
  padding-left: 6px;
}

.szukaj-start {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  margin: 4px 0 0 18px;
  padding: 0 18px 0 14px;
  border: 1px solid rgba(199, 123, 2, 0.35);
  border-radius: 999px;
  background: var(--miod-mgla);
  color: var(--miod-ciemny);
  font-size: 14.5px;
  font-weight: 700;
  transition: transform 0.15s var(--ease), opacity 0.18s var(--ease), visibility 0s linear 0s;
}

.szukaj-start:active {
  transform: scale(0.96);
}

.szukaj-start svg,
.szukaj-pole > svg,
.szukaj-wyczysc svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.szukaj-start svg {
  width: 20px;
  height: 20px;
}

.szukaj-pasek {
  position: absolute;
  inset: 4px 18px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-10px);
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease), visibility 0s linear 0.16s;
}

#ekran-menu[data-szukanie] .szukaj-pasek {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.22s var(--ease), transform 0.3s var(--ease);
}

#ekran-menu[data-szukanie] .szukaj-start,
#ekran-menu[data-szukanie] .kategorie {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s var(--ease), visibility 0s linear 0.12s;
}

.szukaj-pole {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  height: 48px;
  border: 1.5px solid var(--miod);
  border-radius: 999px;
  background: var(--karta);
  box-shadow: 0 0 0 4px var(--miod-mgla);
}

.szukaj-pole > svg {
  position: absolute;
  left: 16px;
  width: 20px;
  height: 20px;
  color: var(--miod-ciemny);
  pointer-events: none;
}

.szukaj-pole input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 6px 0 46px;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  /* 16 px: iOS nie powieksza strony przy wejsciu w pole */
  font-size: 16px;
  color: var(--atrament);
  -webkit-appearance: none;
  appearance: none;
  user-select: text;
}

.szukaj-pole input::placeholder {
  color: rgba(26, 23, 19, 0.55);
}

.szukaj-pole input::-webkit-search-cancel-button {
  display: none;
  -webkit-appearance: none;
}

.szukaj-wyczysc {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--panel);
  color: var(--atrament-64);
}

.szukaj-wyczysc svg {
  width: 16px;
  height: 16px;
}

.szukaj-zamknij {
  flex: none;
  height: 48px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--miod-ciemny);
}

.szukaj-zamknij:active {
  background: var(--miod-mgla);
}

/* Wyniki przykrywaja karte w tym samym kadrze; maja klase .tresc, wiec marginesy
   (pas kelnera, pasek koszyka, telefon) sa te same co w karcie. */
.tresc.wyniki {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--porcelana);
  animation: wyniki-wejscie 0.24s var(--ease);
}

@keyframes wyniki-wejscie {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.wyniki-grupa,
.spis-kategorii,
.wyniki-brak {
  max-width: 1224px;
  margin: 0 auto 34px;
}

.wyniki-naglowek {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

.wyniki-naglowek h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.wyniki-bar .bar-lista {
  border-top: 0;
}

.wyniki-tytul {
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--miod-ciemny);
}

.wyniki-brak {
  margin-bottom: 28px;
}

.wyniki-brak-tytul {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

.wyniki-brak-opis {
  margin-top: 4px;
  color: var(--atrament-64);
}

.spis-siatka {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}

.spis-kafel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 72px;
  padding: 12px 16px;
  border: 1px solid var(--linia);
  border-radius: var(--r-m);
  background: var(--karta);
  box-shadow: 0 1px 2px rgba(26, 23, 19, 0.04);
  text-align: left;
  transition: transform 0.15s var(--ease), border-color 0.2s var(--ease);
}

.spis-kafel:active {
  transform: scale(0.97);
}

.spis-nazwa {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: break-word;
  hyphens: auto;
}

.spis-licznik {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--atrament-64);
  font-variant-numeric: tabular-nums;
}

.spis-kafel[aria-current="true"] {
  border-color: color-mix(in srgb, var(--miod) 55%, var(--linia));
  background: var(--miod-mgla);
}

.spis-kafel[data-sezon]:not([aria-current="true"]) {
  border-color: color-mix(in srgb, var(--miod) 24%, var(--linia));
  background: color-mix(in srgb, var(--miod) 7%, var(--karta));
}

@media (prefers-reduced-motion: reduce) {
  .tresc.wyniki {
    animation: none;
  }

  .szukaj-pasek,
  #ekran-menu[data-szukanie] .szukaj-pasek {
    transform: none;
  }
}

/* ------------------------------------------------------- tresc: sekcje */

.tresc-kadr {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
}

/* ---------------------------------------------- przewijak z kategoriami */

/* Przy prawej krawedzi: tor, kropki kategorii i suwak jak struga piwa z pianka.
   Pole dotyku to caly margines tresci, rysunek jest waski. */
.przewijak {
  position: absolute;
  top: 16px;
  right: 0;
  bottom: calc(var(--koszyk-wys) + 24px);
  width: 28px;
  touch-action: none;
  cursor: grab;
  opacity: 0.62;
  transition: opacity 0.3s var(--ease);
}

.przewijak[data-ruch],
.przewijak[data-chwyt] {
  opacity: 1;
}

.przewijak[data-pusty] {
  display: none;
}

.przewijak-tor {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 12px;
  width: 3px;
  border-radius: 3px;
  background: rgba(26, 23, 19, 0.1);
}

.przewijak-znaczniki {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.przewijak-kropka {
  position: absolute;
  right: 10px;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--porcelana);
  box-shadow: 0 0 0 1.5px rgba(26, 23, 19, 0.24);
  transition: background-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}

.przewijak-kropka[data-aktywna] {
  background: var(--miod);
  box-shadow: 0 0 0 1.5px var(--miod);
  transform: scale(1.25);
}

.przewijak-suwak {
  position: absolute;
  top: 0;
  right: 10px;
  width: 7px;
  border-radius: 4px;
  background: linear-gradient(180deg, #f0b95b, var(--miod) 70%, #a86702);
  box-shadow: 0 2px 8px rgba(199, 123, 2, 0.35);
  transition: width 0.2s var(--ease), right 0.2s var(--ease);
  will-change: transform;
}

/* pianka na gorze strugi */
.przewijak-suwak::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -1px;
  right: -1px;
  height: 7px;
  border-radius: 4px 4px 3px 3px;
  background: #fffaf0;
  box-shadow: 0 1px 2px rgba(26, 23, 19, 0.2);
}

.przewijak[data-chwyt] .przewijak-suwak {
  right: 8px;
  width: 11px;
}

/* przy chwyconym suwaku: nazwa kategorii, nad ktora jest gosc */
.przewijak-etykieta {
  position: absolute;
  top: 50%;
  right: calc(100% + 16px);
  padding: 9px 14px;
  border-radius: 12px;
  background: var(--atrament);
  color: var(--porcelana);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(26, 23, 19, 0.25);
  opacity: 0;
  transform: translateY(-50%) scale(0.9);
  transform-origin: right center;
  transition: opacity 0.15s var(--ease), transform 0.2s var(--ease);
  pointer-events: none;
}

.przewijak-etykieta::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -5px;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 2px;
  background: inherit;
  transform: rotate(45deg);
}

.przewijak[data-chwyt] .przewijak-etykieta:not(:empty) {
  opacity: 1;
  transform: translateY(-50%);
}

.tresc {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* lewy margines w poziomie to miejsce kelnera-towarzysza - nie zaslania kart */
  padding: 24px 28px calc(var(--koszyk-wys) + 56px) 28px;
  scroll-behavior: auto;
  scrollbar-width: none;
}

.tresc::-webkit-scrollbar {
  display: none;
}

.sekcja {
  max-width: 1224px;
  margin: 0 auto 46px;
}

.sekcja-tytul {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 16px;
}

.sekcja-numer {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--miod-ciemny);
}

.sekcja-tytul h2 {
  font-family: var(--font-display);
  font-size: 29px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

.sekcja-licznik {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--atrament-64);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.sekcja-linia {
  flex: 1;
  height: 1px;
  background: var(--linia);
  align-self: center;
  margin-left: 4px;
}

/* Menu sezonowe: wkladka jak w papierowej karcie - lekko cieplejsze tlo, cienka ramka i szyszka
   chmielu z podpisem. Znacznik "Sezonowe" na kartach zostaje tylko poza ta sekcja (np. danie dnia). */
.sekcja[data-sezon] {
  padding: 22px 24px 26px;
  border: 1px solid color-mix(in srgb, var(--miod) 24%, transparent);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, color-mix(in srgb, var(--miod) 10%, var(--porcelana)) 0%, color-mix(in srgb, var(--miod) 4%, var(--porcelana)) 100%);
}

.sekcja[data-sezon] .sekcja-tytul {
  margin-bottom: 6px;
}

.sekcja-sezon {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--miod-ciemny);
}

.sekcja-sezon img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.sekcja[data-sezon] .znacznik--sezon {
  display: none;
}

/* waski ekran: ramka wkladki prawie przy krawedzi, karty dan szerokie jak w reszcie karty */
@media (max-width: 620px) {
  .sekcja[data-sezon] {
    margin-left: -6px;
    margin-right: -6px;
    padding: 18px 10px 14px;
  }
}

/* kropka przy nazwie kategorii w pasku - wkladka widoczna od pierwszego spojrzenia */
.kategoria[data-sezon] > span:first-child::before,
.spis-kafel[data-sezon] .spis-nazwa::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--miod);
  vertical-align: 0.12em;
}

/* akapit pod tytulem sekcji (np. o wodkach Wyszak) - cytat z papierowej karty */
.sekcja-wstep {
  max-width: 64ch;
  margin: -4px 0 20px;
  padding-left: 14px;
  border-left: 3px solid var(--miod);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--atrament-80);
}

/* --------------------------------------------- karta barowa (mocne alkohole)
   Kilkadziesiat pozycji jak w papierowej karcie, schowanych w szufladach barku: uchwyt z winieta
   szkla, nazwa grupy, liczba pozycji i cena "od". Dotkniecie wysuwa wiersze nazwa - kropki - cena
   (na tablecie w dwoch kolumnach), otwarta jest jedna grupa naraz. */
.karta-barowa {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bar-grupa {
  border: 1px solid var(--linia);
  border-radius: var(--r-l);
  background: var(--karta);
  overflow: hidden;
  transition: border-color 0.3s var(--ease), box-shadow 0.4s var(--ease);
}

.bar-grupa[data-otwarta] {
  border-color: color-mix(in srgb, var(--miod) 38%, var(--linia));
  box-shadow: 0 14px 32px -22px rgba(26, 23, 19, 0.45);
}

.bar-grupa-tytul {
  font: inherit;
}

.bar-uchwyt {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-height: 104px;
  padding: 10px 20px 10px 10px;
  text-align: left;
}

.bar-winieta {
  flex: none;
  width: 112px;
  height: 84px;
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--tlo-ilustracji);
}

.bar-winieta img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.16);
  transition: transform 0.6s var(--ease);
}

/* otwarta szuflada: szklo lekko przybliza sie do goscia */
.bar-grupa[data-otwarta] .bar-winieta img {
  transform: scale(1.3);
}

.bar-grupa-tekst {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 0;
}

.bar-grupa-nazwa {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.012em;
}

.bar-grupa-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--atrament-64);
  font-variant-numeric: tabular-nums;
}

.bar-strzalka {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--miod-mgla);
  color: var(--miod-ciemny);
  transition: transform 0.45s var(--sprezyna), background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.bar-strzalka svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bar-grupa[data-otwarta] .bar-strzalka {
  transform: rotate(180deg);
  background: var(--miod);
  color: var(--atrament);
}

.bar-uchwyt:active .bar-strzalka {
  scale: 0.92;
}

/* wysuwanie: 0fr -> 1fr animuje wysokosc do tresci bez mierzenia jej w JS */
.bar-szuflada {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.46s var(--ease);
}

.bar-grupa[data-otwarta] .bar-szuflada {
  grid-template-rows: 1fr;
}

.bar-szuflada-wnetrze {
  min-height: 0;
  overflow: hidden;
}

.bar-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
  column-gap: 36px;
  margin: 0 20px;
  padding: 2px 0 14px;
  border-top: 1px solid var(--linia);
  list-style: none;
}

.bar-wiersz {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  border-bottom: 1px solid color-mix(in srgb, var(--linia) 70%, transparent);
}

/* wiersze wjezdzaja po kolei za szuflada */
@keyframes bar-wysun {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

.bar-grupa[data-otwarta] .bar-wiersz {
  animation: bar-wysun 0.42s var(--ease) both;
  animation-delay: calc(min(var(--i, 0), 14) * 24ms + 70ms);
}

/* nazwa w dwoch liniach: cena stoi przy ostatniej, tam gdzie koncza sie kropki;
   przy dwoch cenach (40 ml i butelka) nazwa jest krotka i stoi przy pierwszej */
.bar-cialo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  align-items: last baseline;
  gap: 8px;
  min-width: 0;
  padding: 10px 0;
  text-align: left;
}

.bar-cialo[data-warianty] {
  align-items: baseline;
}

.bar-nazwa {
  display: block;
  overflow: hidden;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.3;
}

/* kropki od ostatniego slowa nazwy do ceny, jak w karcie z baru: element o zerowej szerokosci
   w linii (width 100% i margines -100%), wiec nie przenosi slowa, a nadmiar przycina overflow */
.bar-nazwa::after {
  content: "";
  display: inline-block;
  width: 100%;
  margin: 0 -100% 0 8px;
  border-bottom: 2px dotted color-mix(in srgb, var(--atrament) 22%, transparent);
  vertical-align: 0.22em;
}

.bar-ceny {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  white-space: nowrap;
}

.bar-ceny[data-pytaj] {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--chmiel);
}

.bar-cena {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.bar-cena small {
  font-size: 11.5px;
  color: var(--atrament-64);
}

.bar-cena b {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  word-spacing: -0.3em;
}

.bar-wiersz .danie-dodaj {
  width: 44px;
  height: 44px;
  box-shadow: 0 1px 4px rgba(199, 123, 2, 0.26);
}

.bar-wiersz .danie-dodaj svg {
  width: 20px;
  height: 20px;
}

.bar-wiersz[data-niedostepna] .bar-cialo {
  opacity: 0.5;
}

.bar-wiersz[data-niedostepna] .bar-ceny {
  font-size: 12.5px;
}

.bar-stopka {
  max-width: 60ch;
  margin: 10px auto 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: var(--atrament-64);
}

@media (prefers-reduced-motion: reduce) {
  .bar-szuflada,
  .bar-strzalka,
  .bar-winieta img {
    transition: none;
  }

  .bar-grupa[data-otwarta] .bar-wiersz {
    animation: none;
  }
}

@media (max-width: 620px) {
  .bar-grupa {
    margin-left: -6px;
    margin-right: -6px;
  }

  .bar-uchwyt {
    gap: 14px;
    min-height: 88px;
    padding: 8px 14px 8px 8px;
  }

  .bar-winieta {
    width: 92px;
    height: 69px;
  }

  .bar-grupa-nazwa {
    font-size: 18.5px;
  }

  .bar-lista {
    margin: 0 14px;
  }
}

.tresc-stopka {
  max-width: 1224px;
  margin: 0 auto;
  padding-top: 26px;
  border-top: 1px solid var(--linia);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 2;
  color: var(--atrament-64);
}

/* ------------------------------------------------------------ karty dan */

.siatka-dan {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* Karta: tekst po lewej, po prawej panel z grafika na cala wysokosc karty -
   ilustracja albo zdjecie dostaja tyle miejsca, ile potrzeba, zeby kusic z 60 cm. */
.danie {
  --foto-szer: 38%;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--foto-szer);
  grid-template-rows: 1fr auto;
  gap: 0 18px;
  min-height: 188px;
  padding: 0 0 0 20px;
  background: var(--karta);
  border: 1px solid var(--linia);
  border-radius: var(--r-l);
  box-shadow: 0 1px 2px rgba(26, 23, 19, 0.04);
  overflow: hidden;
}

/* niedostepne: przygaszone zdjecie i tytul, tekst nadal czytelny (kontrast) - stan mowi znaczek */
.danie[data-niedostepne] .danie-foto {
  opacity: 0.45;
  filter: grayscale(0.6);
}

.danie[data-niedostepne] .danie-nazwa {
  color: var(--atrament-64);
}

.danie-cialo {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-top: 18px;
  text-align: left;
  min-width: 0;
}

.danie-naglowek {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.danie-nazwa {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 650;
  line-height: 1.22;
  letter-spacing: -0.01em;
}

.znaczniki {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

.znacznik {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--atrament-64);
  border: 1px solid var(--linia);
  border-radius: 999px;
  padding: 2.5px 8px;
  white-space: nowrap;
}

.znacznik--sezon {
  color: var(--miod-ciemny);
  border-color: rgba(199, 123, 2, 0.35);
}

.znacznik--alkohol {
  color: var(--chmiel);
  border-color: var(--chmiel-mgla);
}

/* impreza firmowa: zamiast ceny "W pakiecie" / "Open bar" */
.danie-cena--pakiet {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--miod-ciemny);
}

.impreza-notka {
  margin: -6px 0 16px;
  padding: 12px 16px;
  border-radius: var(--r-l, 14px);
  background: var(--miod-mgla);
  color: var(--miod-ciemny);
  font-size: 14.5px;
  font-weight: 600;
}

/* kuchnia albo bar zamkniete na dzis (odbiornik) - na samej gorze karty */
.notka-zamkniete {
  margin: 0 0 18px;
}

.znacznik--dnia {
  color: var(--porcelana);
  background: var(--miod-ciemny);
  border-color: var(--miod-ciemny);
}

/* "Hit dnia": najczesciej zamawiane dzis - cieplo jak danie dnia, ale lzej */
.znacznik--hit {
  color: var(--miod-ciemny);
  background: var(--miod-mgla);
  border-color: rgba(199, 123, 2, 0.35);
}

/* T-Bone: ile stekow zostalo na stanie - bordo jak mieso, bez alarmu */
.znacznik--stan {
  color: var(--bordo);
  border-color: rgba(110, 38, 32, 0.35);
}

/* Danie dnia na gorze karty: etykieta i karta dania w miodowej obwodce */
.danie-dnia {
  margin-bottom: 26px;
}

.danie-dnia-tytul {
  margin: 4px 0 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--miod-ciemny);
}

.danie-dnia .danie {
  box-shadow: 0 0 0 2px var(--miod-ciemny), 0 10px 26px rgba(199, 123, 2, 0.16);
}

.danie-opis {
  margin-top: 5px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--atrament-80);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.danie-meta {
  margin-top: 7px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--atrament-64);
  font-variant-numeric: tabular-nums;
}

.danie-stopka {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0 16px;
}

.danie-cena {
  font-family: var(--font-mono);
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  word-spacing: -0.38em;
}

.danie-cena small {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--atrament-64);
  margin: 0 5px 0 8px;
  letter-spacing: 0.02em;
  word-spacing: normal;
}

/* "od" przed cena - dopisek po cenie ("za 100 g") zachowuje odstep */
.danie-cena .cena-od {
  margin-left: 0;
}

.danie-cena--pytaj {
  display: inline-flex;
  align-items: center;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--chmiel);
  border: 1px solid var(--chmiel-mgla);
  border-radius: 999px;
  padding: 0 14px;
  min-height: 40px;
  word-spacing: normal;
  letter-spacing: 0;
}

.danie-dodaj {
  position: relative;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--miod);
  color: var(--atrament);
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(199, 123, 2, 0.32);
  transition: transform 0.15s var(--ease), background-color 0.25s var(--ease), color 0.25s var(--ease);
}

/* "+" zamienia sie w ptaszek na chwile po dodaniu - potwierdzenie w miejscu dotyku */
.danie-dodaj svg path {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.3s var(--sprezyna), opacity 0.18s var(--ease);
}

.danie-dodaj .ikona-ok {
  opacity: 0;
  transform: scale(0.4) rotate(-25deg);
}

.danie-dodaj[data-dodano] {
  background: var(--chmiel);
  color: var(--porcelana);
}

.danie-dodaj[data-dodano] .ikona-plus {
  opacity: 0;
  transform: rotate(90deg) scale(0.4);
}

.danie-dodaj[data-dodano] .ikona-ok {
  opacity: 1;
  transform: none;
}

/* fala miodu spod palca (przeszczep z W2) */
.fala {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: rgba(255, 244, 220, 0.62);
  pointer-events: none;
  animation: fala 0.5s var(--ease) forwards;
}

@keyframes fala {
  to {
    transform: scale(9);
    opacity: 0;
  }
}

.danie-dodaj:active {
  transform: scale(0.9);
}

.danie-dodaj svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.danie-dodaj--maly {
  width: 48px;
  height: 48px;
}

.danie-foto {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: stretch;
  position: relative;
  margin: 0;
  background: var(--tlo-ilustracji);
  overflow: hidden;
  display: grid;
  place-items: center;
  cursor: pointer;
}

/* Obraz wchodzi miekko, gdy sie zaladuje - bez mrugniecia ryciny po drodze. */
.danie-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s var(--ease), transform 0.5s var(--ease);
}

.danie-foto[data-rodzaj] img {
  opacity: 1;
}

.danie-foto[data-rodzaj="zdjecie"] {
  background: #e9e0d0;
}

/* pod palcem talerz lekko sie przybliza - karta ma glebie */
.danie:active .danie-foto img {
  transform: scale(1.04);
}

/* obraz polecial do arkusza - w karcie zostaje cieple tlo, wraca po zamknieciu */
.danie-foto.w-przelocie img {
  opacity: 0;
  transition-duration: 0.12s;
}

.danie-foto .rycina {
  display: none;
  width: 54px;
  color: var(--atrament);
  opacity: 0.09;
}

/* ani zdjecia, ani ilustracji - typograficzny slot z rycina kategorii */
.danie-foto[data-brak] {
  background: linear-gradient(155deg, #f5efe4 8%, #eae1d0 96%);
}

.danie-foto[data-brak] .rycina {
  display: block;
}

.rycina svg {
  width: 100%;
  height: auto;
}

/* ----------------------------------------- rejestr piw (przeszczep z W3) */

.rejestr {
  background: var(--karta);
  border: 1px solid var(--linia);
  border-radius: var(--r-l);
  padding: 6px 22px;
  box-shadow: 0 1px 2px rgba(26, 23, 19, 0.04);
}

.danie--rejestr {
  display: block;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--linia);
}

.danie--rejestr:last-child {
  border-bottom: none;
}

.danie--rejestr .danie-cialo {
  width: 100%;
  padding: 16px 0 14px;
}

.rejestr-glowa {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}

.rejestr-znak {
  flex: none;
  width: 19px;
  align-self: center;
  color: var(--chmiel);
  opacity: 0.55;
}

.rejestr-znak svg {
  width: 100%;
  height: auto;
}

.danie--rejestr .danie-nazwa {
  font-size: 18px;
}

.rejestr-kropki {
  flex: 1;
  min-width: 28px;
  border-bottom: 2px dotted rgba(26, 23, 19, 0.28);
  transform: translateY(-4px);
}

.danie--rejestr .danie-cena {
  flex: none;
}

.danie--rejestr .danie-cena--pytaj {
  min-height: 32px;
  padding: 0 12px;
}

.danie--rejestr .danie-opis {
  margin-top: 6px;
  padding-left: 31px;
}

.danie--rejestr .danie-meta {
  padding-left: 31px;
}

/* na wierszu rejestru "% alk." jest juz w metryce - znacznik alkoholu to szum */
.danie--rejestr .znacznik--alkohol {
  display: none;
}

.danie--rejestr[data-niedostepne] .danie-cialo {
  opacity: 0.5;
}

.danie--rejestr .danie-dodaj {
  position: absolute;
  right: 0;
  top: 14px;
}

/* --------------------------------------------- pigulka koszyka (W1 + W2) */

/* cala pigulka otwiera przeglad zamowienia */
.pasek-koszyka {
  cursor: pointer;
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 64px;
  padding: 0 8px 0 20px;
  border-radius: 999px;
  background: var(--atrament);
  color: var(--porcelana);
  box-shadow: 0 12px 30px rgba(26, 23, 19, 0.3);
  overflow: hidden;
  transform: translateY(calc(100% + 36px));
  opacity: 0;
  pointer-events: none;
  transition: transform 0.34s var(--sprezyna), opacity 0.25s ease;
}

.pasek-koszyka[data-widoczny] {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

/* przeszczep z W2: bursztyn podchodzi w gore razem z liczba pozycji
   (skalowanie transformem, nie wysokoscia - plynniej na tablecie) */
.koszyk-nalew {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(233, 163, 57, 0.34), rgba(199, 123, 2, 0.42));
  transform: scaleY(var(--nalew, 0));
  transform-origin: bottom;
  transition: transform 0.5s var(--ease);
  pointer-events: none;
}

/* ---------------------------------------------------- kelner-towarzysz */

/* W poziomie tresc menu odsuwa sie od lewej krawedzi - tam stoi i chodzi kelner,
   a jego dymek miesci sie w tym pasie (rosnie w gore, nie wchodzi na karty). */
@media (min-width: 861px) {
  .tresc {
    padding-left: 156px;
  }

  #maskotka:not([data-strona="prawa"]) .dymek {
    left: -8px;
    max-width: 142px;
    font-size: 14px;
  }
}

/* Kelner gwaszem (wyciete ilustracje, trzy pozy) chodzi po menu, podpowiada i pyta.
   W doku stoi przy dolnej krawedzi - fartuch rozplywa sie w krawedzi ekranu. */
#maskotka {
  position: fixed;
  left: 14px;
  bottom: 0;
  width: 112px;
  z-index: 40;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 6px 16px rgba(26, 23, 19, 0.22));
  /* przeciaganie palcem - przegladarka nie moze tego zabrac jako przewijania */
  touch-action: none;
  transition: bottom 0.34s var(--sprezyna), filter 0.2s var(--ease);
}

/* pozy na sobie, widoczna jedna (data-poza); --nachyl: zwrot w strone palca goscia */
.kl-pozy {
  position: relative;
  display: block;
  aspect-ratio: 332 / 520;
  transform-origin: 50% 100%;
  rotate: var(--nachyl, 0deg);
  transition: rotate 0.3s var(--ease), scale 0.2s var(--ease);
  animation: kl-oddech 3.6s ease-in-out infinite;
  -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent);
  mask-image: linear-gradient(180deg, #000 80%, transparent);
}

.kl-poza {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.14s var(--ease);
}

#maskotka[data-poza="stoi"] .kl-poza[data-poza="stoi"],
#maskotka[data-poza="wskazuje"] .kl-poza[data-poza="wskazuje"],
#maskotka[data-poza="kciuk"] .kl-poza[data-poza="kciuk"] {
  opacity: 1;
}

@keyframes kl-oddech {
  0%,
  100% {
    transform: none;
  }
  50% {
    transform: translateY(-3px) scaleY(1.008);
  }
}

/* niesiony w palcach: troche wiekszy, cien dalej od ziemi */
#maskotka[data-niesiony] {
  cursor: grabbing;
  filter: drop-shadow(0 16px 22px rgba(26, 23, 19, 0.3));
}

#maskotka[data-niesiony] .kl-pozy {
  scale: 1.06;
}

/* kciuk w gore przy dodaniu - podskok */
#maskotka[data-ciesz] .kl-pozy {
  animation: kl-skok 0.6s var(--ease);
}

@keyframes kl-skok {
  0%,
  100% {
    transform: none;
  }
  35% {
    transform: translateY(-12px);
  }
  62% {
    transform: translateY(0) scaleY(0.97);
  }
}

/* skinienie przy kategoriach */
#maskotka[data-kiwa] .kl-pozy {
  animation: kl-kiw 0.7s var(--ease);
}

@keyframes kl-kiw {
  0%,
  100% {
    transform: none;
  }
  30% {
    transform: rotate(-3deg) translateY(2px);
  }
  65% {
    transform: rotate(2deg);
  }
}

/* gosc odszedl od tabletu - kelner czeka spokojniej; po powrocie lekko sie prostuje */
#maskotka[data-spi] .kl-pozy {
  animation-duration: 6s;
}

#maskotka[data-budzi] .kl-pozy {
  animation: kl-skok 0.5s var(--ease);
}

/* spacer: kolysze sie w rytm krokow, odwraca sie w strone marszu */
#maskotka[data-idzie] .kl-pozy {
  animation: kl-krok 0.34s ease-in-out infinite;
}

#maskotka[data-kierunek="lewo"] .kl-pozy {
  scale: -1 1;
}

@keyframes kl-krok {
  0%,
  100% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(4deg) translateY(-3px);
  }
}

/* Dymek nad postacia (tez gospodarze za lada): kontekstowe teksty, podpowiedzi. */
.dymek {
  position: absolute;
  left: 12px;
  bottom: calc(100% + 10px);
  max-width: 250px;
  width: max-content;
  padding: 10px 14px;
  border-radius: 14px 14px 14px 4px;
  background: var(--porcelana, #faf7f2);
  color: var(--atrament, #1a1713);
  font-family: var(--font-tekst, inherit);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  box-shadow: 0 8px 22px rgba(26, 23, 19, 0.2), 0 0 0 1px rgba(26, 23, 19, 0.06);
  opacity: 0;
  transform: translateY(6px) scale(0.9);
  transform-origin: 12px 100%;
  pointer-events: none;
}

.dymek::after {
  content: "";
  position: absolute;
  left: 16px;
  bottom: -5px;
  width: 12px;
  height: 12px;
  background: inherit;
  transform: rotate(45deg);
  border-radius: 2px;
}

.dymek[data-widoczny] {
  animation: dymek-pop 0.32s var(--ease) both;
}

@keyframes dymek-pop {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.85);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* kelner mowi szerzej niz gospodarze - ciekawostki i pytania bywaja dluzsze */
#maskotka .dymek {
  max-width: 290px;
}

/* przy gornej kotwicy dymek schodzi pod kelnera, zeby nie wjechac na kategorie */
#maskotka[data-kotwica="gora"] .dymek {
  top: calc(100% + 10px);
  bottom: auto;
  border-radius: 4px 14px 14px 14px;
  transform-origin: 12px 0;
}

#maskotka[data-kotwica="gora"] .dymek::after {
  top: -5px;
  bottom: auto;
}

/* przy prawej krawedzi dymek otwiera sie w lewo, ogonek po prawej */
#maskotka[data-strona="prawa"] .dymek {
  left: auto;
  right: 12px;
  border-radius: 14px 14px 4px 14px;
  transform-origin: calc(100% - 12px) 100%;
}

#maskotka[data-strona="prawa"] .dymek::after {
  left: auto;
  right: 16px;
}

#maskotka[data-strona="prawa"][data-kotwica="prawo-gora"] .dymek {
  top: calc(100% + 10px);
  bottom: auto;
  border-radius: 14px 4px 14px 14px;
  transform-origin: calc(100% - 12px) 0;
}

#maskotka[data-strona="prawa"][data-kotwica="prawo-gora"] .dymek::after {
  top: -5px;
  bottom: auto;
}

/* Obsluga wylaczyla postacie w trybie serwisowym. Lada i propozycje kelnera
   na podsumowaniu zostaja jako tresc - znikaja tylko postacie. */
body[data-bez-postaci] #maskotka,
body[data-bez-postaci] .propozycja,
body[data-bez-postaci] .lada-postac,
body[data-bez-postaci] .kelner-postac {
  display: none !important;
}

body[data-bez-postaci] .lada,
body[data-bez-postaci] .kelner-podsumowanie {
  grid-template-columns: minmax(0, 1fr);
}

/* W pionie pigulka koszyka zajmuje caly dol - kelner jest mniejszy i staje
   nad nia, gdy sie pojawi. */
@media (max-width: 860px) {
  .przewijak {
    width: 22px;
  }

  .przewijak-tor {
    right: 9px;
  }

  .przewijak-kropka,
  .przewijak-suwak {
    right: 7px;
  }

  .przewijak[data-chwyt] .przewijak-suwak {
    right: 5px;
  }

  #maskotka {
    width: 92px;
    left: 10px;
    bottom: 0;
  }

  body:has(#pasek-koszyka[data-widoczny]) #maskotka {
    bottom: calc(18px + 64px + 8px);
  }
}

/* ---------------------------- gospodarze sekcji: barman i szef kuchni */

/* Lada jest trescia menu, nie nakladka: przewija sie z sekcja i niczego nie zaslania.
   Postac to zywa ilustracja gwaszem (petla Veo) na tle w kolorze ilustracji. */
.lada {
  position: relative;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  align-items: center;
  column-gap: 28px;
  margin: 0 0 16px;
  padding-right: 28px;
  border: 1px solid var(--linia);
  border-radius: var(--r-l);
  background: var(--tlo-ilustracji);
  overflow: hidden;
}

.lada[data-bez-postaci] {
  grid-template-columns: minmax(0, 1fr);
  padding-left: 28px;
}

.lada[data-bez-postaci] .lada-postac {
  display: none;
}

.lada-postac {
  position: relative;
  align-self: stretch;
  min-height: 200px;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

/* panel wypelnia swoja kolumne - ilustracja przycina sie (cover), nie rozpycha tekstu */
.lada-media {
  position: absolute;
  inset: 0;
  display: block;
}

.lada-media img,
.lada-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* gdy gospodarz reaguje na dodanie - krotkie skinienie calej ilustracji */
.lada[data-reaguje] .lada-media {
  animation: lada-skinienie 0.5s var(--ease);
}

@keyframes lada-skinienie {
  40% {
    transform: translateY(-4px) scale(1.015);
  }
}

/* dymek gospodarza w pustym kremowym tle obok glowy */
.lada-dymek {
  top: 10px;
  bottom: auto;
  left: 46%;
  max-width: 170px;
}

.lada-tekst {
  padding: 24px 0;
}

.lada-tytul {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.lada-opis {
  margin-top: 6px;
  max-width: 52ch;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--atrament-80);
}

.lada-polecenie {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  margin-top: 14px;
  padding: 0 14px 0 18px;
  border-radius: 999px;
  background: var(--atrament);
  color: var(--porcelana);
  font-size: 15px;
  transition: transform 0.15s var(--ease);
}

.lada-polecenie:active {
  transform: scale(0.96);
}

.lada-polecenie-etykieta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(250, 247, 242, 0.72);
}

.lada-polecenie svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--miod);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.br-oko-mrug {
  animation: br-mrug 6.4s infinite;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes br-mrug {
  0%, 90%, 100% {
    transform: scaleY(1);
  }
  94% {
    transform: scaleY(0.1);
  }
}

/* w pionie postac wezsza, tekst dostaje reszte szerokosci */
@media (max-width: 860px) {
  .lada {
    grid-template-columns: 220px minmax(0, 1fr);
    column-gap: 18px;
    padding-right: 18px;
  }

  .lada-postac {
    min-height: 170px;
  }

  .lada-tytul {
    font-size: 21px;
  }
}

/* ------------------------------- podsumowanie: kelner i cos ekstra */

/* Kelner (zywa ilustracja) sprawdza zamowienie i proponuje dopelnienie. Tlo w kolorze
   ilustracji - postac zlewa sie z panelem jak gospodarze za lada w menu. */
.kelner-podsumowanie {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 20px;
  margin: 20px 0 6px;
  padding-right: 18px;
  border: 1px solid rgba(199, 123, 2, 0.22);
  border-radius: var(--r-l);
  background: var(--tlo-ilustracji);
  overflow: hidden;
  animation: do-picia-wejscie 0.45s var(--ease) both;
}

.kelner-podsumowanie[hidden] {
  display: none;
}

.kelner-podsumowanie[data-bez-postaci] {
  grid-template-columns: minmax(0, 1fr);
  padding-left: 18px;
}

.kelner-podsumowanie[data-bez-postaci] .kelner-postac {
  display: none;
}

@keyframes do-picia-wejscie {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* kadr na twarz i bloczek - nogi i puste tlo zostaja poza panelem */
.kelner-postac {
  position: relative;
  align-self: stretch;
  min-height: 220px;
}

.kelner-postac img,
.kelner-postac video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
  /* prawa krawedz ilustracji rozplywa sie w tle panelu */
  -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent);
  mask-image: linear-gradient(90deg, #000 72%, transparent);
}

.kelner-tresc {
  padding: 18px 0 10px;
}

.kelner-tytul {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
}

.kelner-opis {
  margin-top: 3px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--atrament-80);
}

/* oferty jedna pod druga - pelne nazwy dan bez ciecia slow */
.kelner-oferty {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.kelner-oferty:empty {
  display: none;
}

.kelner-nie {
  min-height: 48px;
  margin-top: 4px;
  padding: 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--atrament-64);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 860px) {
  .kelner-podsumowanie {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 16px;
  }
}

/* -------------------------------------- oferta (propozycja i do picia) */

.oferta {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 6px 8px 6px 6px;
  border: 1px solid var(--linia);
  border-radius: 16px;
  background: var(--karta);
  text-align: left;
  overflow: hidden;
  transition: transform 0.15s var(--ease);
}

.oferta:active {
  transform: scale(0.97);
}

.oferta .fala {
  background: rgba(199, 123, 2, 0.2);
}

.oferta-foto {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--tlo-ilustracji);
  overflow: hidden;
}

.oferta-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

.oferta-foto[data-rodzaj] img {
  opacity: 1;
}

/* dlugie nazwy (np. deska serow) koncza sie po dwoch liniach - nie wchodza pod "+" */
.oferta-opis {
  min-width: 0;
}

.oferta-nazwa {
  display: -webkit-box;
  font-size: 14.5px;
  font-weight: 650;
  line-height: 1.25;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.oferta-cena {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--atrament-80);
  font-variant-numeric: tabular-nums;
}

.oferta-plus {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--miod);
}

.oferta-plus svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--atrament);
  stroke-width: 2.5;
  stroke-linecap: round;
}

/* ------------------------------------------ propozycja Bosmana (upsell) */

/* Karta stoi tuz obok Bosmana (pozycje liczy JS) - czyta sie jak jego dymek. */
.propozycja {
  position: fixed;
  z-index: 45;
  width: min(330px, calc(100vw - 120px));
  padding: 14px 14px 6px;
  border-radius: 20px 20px 20px 6px;
  background: var(--porcelana);
  box-shadow: 0 18px 44px rgba(26, 23, 19, 0.24), 0 0 0 1px rgba(26, 23, 19, 0.06);
  transform-origin: 0 100%;
  animation: propozycja-wejscie 0.42s var(--sprezyna) both;
}

.propozycja[hidden] {
  display: none;
}

@keyframes propozycja-wejscie {
  from {
    opacity: 0;
    transform: translateX(-10px) scale(0.86);
  }
}

.propozycja-tytul {
  margin: 2px 4px 10px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

.propozycja-oferty {
  display: grid;
  gap: 8px;
}

/* pytanie kelnera: odpowiedzi jako pigulki w dwoch kolumnach */
.propozycja[data-rodzaj="pytanie"] .propozycja-oferty {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.odpowiedz {
  min-height: 52px;
  padding: 8px 14px;
  border: 1.5px solid var(--linia);
  border-radius: 16px;
  background: var(--karta);
  font-size: 14.5px;
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  transition: transform 0.15s var(--ease), background-color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.odpowiedz:active {
  transform: scale(0.96);
  border-color: var(--miod);
  background: var(--miod-mgla);
}

.propozycja-zamknij {
  display: block;
  min-height: 48px;
  margin: 2px 0 0 auto;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--atrament-64);
}

.koszyk-podglad {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}

.koszyk-liczba {
  min-width: 26px;
  height: 26px;
  border-radius: 999px;
  padding: 0 7px;
  background: var(--miod);
  color: var(--atrament);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.koszyk-etykieta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: rgba(250, 247, 242, 0.66);
}

.koszyk-suma {
  font-family: var(--font-mono);
  font-size: 15.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  word-spacing: -0.38em;
}

#btn-pokaz-koszyk {
  position: relative;
  min-height: 48px;
  padding: 0 12px;
  border-radius: 999px;
  background: none;
  border: none;
  box-shadow: none;
  font-size: 14.5px;
  font-weight: 600;
  color: rgba(250, 247, 242, 0.88);
}

#btn-pokaz-koszyk:active {
  color: var(--porcelana);
}

#btn-do-podsumowania {
  position: relative;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--miod);
  color: var(--atrament);
  font-size: 15px;
  font-weight: 700;
  transition: transform 0.15s var(--ease);
}

#btn-do-podsumowania:active {
  transform: scale(0.95);
}

/* kropla miodu w locie do pigulki */
.kropla-miodu {
  position: fixed;
  z-index: 120;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #f0b95b, var(--miod) 68%);
  box-shadow: 0 2px 6px rgba(199, 123, 2, 0.5);
  pointer-events: none;
}

/* ---------------------------------------------------------- gry dla dzieci */

#ekran-gry {
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(248, 236, 214, 0.9), transparent 70%),
    var(--porcelana);
}

.gry-pasek {
  flex: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  height: var(--pasek-wys);
  padding: 0 24px;
}

.gry-wroc,
.gry-zamow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 0 18px 0 12px;
  border-radius: 999px;
  border: 1px solid var(--linia);
  background: var(--karta);
  font-size: 15px;
  font-weight: 650;
  justify-self: start;
}

.gry-wroc svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gry-zamow {
  justify-self: end;
  padding: 0 20px;
  border-color: transparent;
  background: var(--atrament);
  color: var(--porcelana);
}

.gry-tytul {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 750;
  letter-spacing: -0.015em;
  text-align: center;
}

.gry-tresc {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* hub: trzy duze kafle gier */
.gry-hub {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
  padding: 12px 40px 40px;
  animation: powitanie-wejscie 0.45s var(--ease) both;
}

.gry-hub-opis {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 720;
  letter-spacing: -0.02em;
  text-align: center;
}

.gry-lista {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
}

.gra-kafel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 12px 20px;
  border-radius: 26px;
  border: 1.5px solid var(--linia);
  background: var(--karta);
  text-align: center;
  box-shadow: 0 20px 40px -28px rgba(26, 23, 19, 0.45);
  transition: transform 0.16s var(--ease), border-color 0.2s var(--ease);
}

.gra-kafel:active {
  transform: scale(0.97);
  border-color: var(--miod);
}

.gra-kafel-obraz {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  background: var(--tlo-ilustracji);
}

.gra-kafel-obraz img,
.gra-kafel-obraz video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gra-kafel-nazwa {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 750;
}

.gra-kafel-opis {
  font-size: 15px;
  color: var(--atrament-80);
}

/* wspolna plansza gry */
.gra-plansza {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 24px 24px;
}

/* nakladka startu / konca gry */
.gra-nakladka {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(250, 247, 242, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
}

.gra-okno {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(520px, 100%);
  padding: 28px 28px 24px;
  border-radius: 28px;
  background: var(--karta);
  text-align: center;
  box-shadow: 0 30px 70px -24px rgba(26, 23, 19, 0.45);
  animation: znak-wjazd 0.45s var(--sprezyna) both;
}

.gra-okno-obraz {
  width: 220px;
  height: auto;
}

.gra-okno-tytul {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 780;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.gra-okno-opis,
.gra-okno-linie p {
  font-size: 17px;
  line-height: 1.4;
  color: var(--atrament-80);
}

.gra-okno-linie .gra-okno-wynik {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 750;
  color: var(--miod-ciemny);
}

.gra-okno-przyciski {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.gra-przycisk {
  min-height: 56px;
  padding: 0 26px;
  border-radius: 999px;
  border: 1.5px solid var(--linia);
  background: var(--karta);
  font-size: 17px;
  font-weight: 700;
  transition: transform 0.15s var(--ease);
}

.gra-przycisk:active {
  transform: scale(0.96);
}

.gra-przycisk--glowny {
  border-color: transparent;
  background: var(--miod);
  color: var(--atrament);
  box-shadow: 0 10px 22px -12px rgba(199, 123, 2, 0.8);
}

/* deszcz monet przy "Brawo!" */
.gra-deszcz {
  position: absolute;
  top: -60px;
  width: 44px;
  height: auto;
  pointer-events: none;
  animation: gra-deszcz 2s linear forwards;
}

@keyframes gra-deszcz {
  to {
    transform: translateY(calc(100vh + 80px)) rotate(540deg);
  }
}

/* --- pary skarbow --- */
.pary {
  align-items: center;
}

.pary-ruchy {
  margin-bottom: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--atrament-64);
}

.pary-ruchy output {
  font-weight: 700;
  color: var(--atrament);
}

/* pasek poziomu / ruchow / czasu nad siatka memory */
.pary-info {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 22px;
  margin-bottom: 10px;
}

.pary-poziom {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 750;
  color: var(--miod-ciemny);
}

.pary-czas {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--atrament-64);
}

.pary-czas output {
  font-weight: 700;
  color: var(--atrament);
  font-variant-numeric: tabular-nums;
}

/* seria trafien z rzedu */
.pary-combo {
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 780;
  color: var(--miod-ciemny);
  animation: combo-puls 0.4s var(--sprezyna);
}

.pary-combo output {
  color: var(--bordo, #6e2620);
}

@keyframes combo-puls {
  from {
    transform: scale(0.7);
  }
}

/* gwiazdki w oknie konca poziomu */
.gra-okno-gwiazdki {
  font-size: 34px !important;
  letter-spacing: 0.1em;
  color: var(--miod) !important;
}

.pary-siatka {
  flex: none;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.karta-gry {
  perspective: 900px;
  min-width: 0;
  min-height: 0;
}

.karta-wnetrze {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.45s var(--sprezyna);
}

.karta-gry[data-odkryta] .karta-wnetrze,
.karta-gry[data-znaleziona] .karta-wnetrze {
  transform: rotateY(180deg);
}

.karta-rewers,
.karta-awers {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 18px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 10px 24px -16px rgba(26, 23, 19, 0.5);
}

/* rewers: bordowe sukno z emblematem Wyszaka */
.karta-rewers {
  background:
    radial-gradient(70% 70% at 50% 40%, #8a1d10, #5a1008);
  border: 3px solid #c99a4a;
}

.karta-rewers img {
  width: 46%;
  height: auto;
}

.karta-awers {
  transform: rotateY(180deg);
  background: var(--tlo-ilustracji);
  border: 3px solid var(--linia);
}

.karta-awers img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.karta-gry[data-znaleziona] .karta-awers {
  border-color: var(--miod);
  animation: karta-znaleziona 0.6s var(--ease);
}

@keyframes karta-znaleziona {
  40% {
    transform: rotateY(180deg) scale(1.08);
  }
}

/* --- lodz Wyszaka --- */
.lodz {
  padding: 0 24px 24px;
}

.lodz-plotno {
  flex: 1;
  min-height: 0;
  width: 100%;
  border-radius: 26px;
  touch-action: none;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(26, 23, 19, 0.08);
}

.lodz-hud {
  position: absolute;
  top: 14px;
  left: 40px;
  right: 40px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  pointer-events: none;
}

.lodz-monety {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px 6px 8px;
  border-radius: 999px;
  background: rgba(255, 254, 251, 0.85);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 780;
  font-variant-numeric: tabular-nums;
}

.lodz-monety img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.lodz-czas {
  flex: 1;
  height: 10px;
  border-radius: 99px;
  background: rgba(255, 254, 251, 0.6);
  overflow: hidden;
}

.lodz-czas-pasek {
  display: block;
  height: 100%;
  background: var(--miod);
  transform-origin: left center;
}

/* serca, fala i misja w lodzi */
.lodz-serca,
.lodz-fala,
.lodz-misja {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 254, 251, 0.85);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.lodz-serca output {
  letter-spacing: 0.05em;
}

.lodz-fala {
  font-family: var(--font-display);
}

.lodz-fala output {
  font-variant-numeric: tabular-nums;
}

.lodz-misja output {
  font-variant-numeric: tabular-nums;
}

/* aktywne prezenty nad plansza */
.lodz-efekty {
  position: absolute;
  top: 64px;
  left: 40px;
  z-index: 2;
  font-size: 22px;
  pointer-events: none;
}

/* --- kelner Wyszaka --- */
.kelner-plotno {
  flex: 1;
  min-height: 0;
  width: 100%;
  border-radius: 26px;
  background: #2b1711;
  touch-action: none;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(26, 23, 19, 0.08);
}

.kelner-hud {
  position: absolute;
  top: 14px;
  left: 40px;
  right: 40px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  pointer-events: none;
}

.kelner-pigulka {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(255, 254, 251, 0.9);
  box-shadow: 0 8px 18px -12px rgba(26, 23, 19, 0.6);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.kelner-zmiana {
  font-size: 16px;
  font-weight: 700;
}

/* nastroj sali: kolorowa kropka jak buzki przy stolikach */
.kelner-buzka {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--linia);
}

.kelner-buzka[data-nastroj="dobry"] {
  background: #3a9d5d;
}

.kelner-buzka[data-nastroj="sredni"] {
  background: #e3a21a;
}

.kelner-buzka[data-nastroj="zly"] {
  background: #d64545;
}

.kelner-odeszli span {
  font-size: 15px;
  font-weight: 700;
}

/* ostatnie 20 s zmiany */
.kelner-czas[data-malo] {
  background: #d64545;
  color: #fffdf8;
}

.gra-okno-cel {
  margin-top: 4px;
  font-weight: 700;
  color: var(--miod-ciemny);
}

.kelner-napiwki img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.kelner-czas {
  margin-left: auto;
}

/* --- kolorowanka --- */
.kolorowanka {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 150px;
  gap: 18px;
  align-items: center;
}

.kolor-obrazki {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kolor-obrazek {
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid var(--linia);
  background: #fff;
}

.kolor-obrazek[aria-pressed="true"] {
  border-color: var(--miod);
  box-shadow: 0 0 0 3px var(--miod-mgla);
}

.kolor-obrazek img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kolor-ramka {
  min-width: 0;
  min-height: 0;
  width: 100%;
  flex: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* srodkowa kolumna: tryby, obrazek, naklejki */
.kolor-srodek {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
}

.kolor-tryby {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.kolor-tryby .gra-przycisk {
  min-height: 44px;
  padding: 0 20px;
  font-size: 15px;
}

.kolor-tryby .gra-przycisk[aria-pressed="true"] {
  border-color: transparent;
  background: var(--atrament);
  color: var(--porcelana);
}

/* dwa plotna jedno nad drugim: kontur + warstwa pedzla/naklejek.
   Rozmiar wpisuje JS (dopasujStos), zeby stos nigdy nie wyjechal na przyciski. */
.kolor-stos {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 4 / 3;
  margin: auto;
}

.kolor-plotno {
  width: 100%;
  height: 100%;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 40px -24px rgba(26, 23, 19, 0.45), 0 0 0 1px rgba(26, 23, 19, 0.06);
  touch-action: none;
}

.kolorowanka[data-tryb="wypelnij"] .kolor-plotno {
  cursor: pointer;
}

.kolor-nalozony {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  touch-action: none;
  pointer-events: none;
}

.kolorowanka[data-tryb="pedzel"] .kolor-nalozony {
  pointer-events: auto;
  cursor: crosshair;
}

.kolorowanka[data-stempel] .kolor-nalozony {
  pointer-events: auto;
  cursor: copy;
}

/* naklejki do stemplowania po obrazku */
.kolor-naklejki {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
}

.kolor-naklejki-etykieta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--atrament-64);
}

.kolor-znaczki {
  display: flex;
  gap: 8px;
}

.kolor-znaczek {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  border: 2px solid var(--linia);
  background: #fff;
  font-size: 28px;
  line-height: 1;
  transition: transform 0.15s var(--ease);
}

.kolor-znaczek:disabled {
  opacity: 0.4;
  filter: grayscale(1);
}

.kolor-znaczek[aria-pressed="true"] {
  border-color: var(--miod);
  box-shadow: 0 0 0 3px var(--miod-mgla);
  transform: scale(1.08);
}

.kolor-odblokuj {
  font-size: 13px;
  color: var(--atrament-64);
}

.kolor-paleta {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kolor-farby {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.kolor-farba {
  aspect-ratio: 1;
  min-height: 52px;
  border-radius: 50%;
  background: var(--farba);
  box-shadow: inset 0 0 0 2px rgba(26, 23, 19, 0.12), 0 4px 10px -6px rgba(26, 23, 19, 0.5);
  transition: transform 0.15s var(--ease);
}

.kolor-farba[aria-pressed="true"] {
  transform: scale(1.08);
  box-shadow: inset 0 0 0 2px rgba(26, 23, 19, 0.12), 0 0 0 4px var(--porcelana), 0 0 0 7px var(--atrament);
}

.kolor-akcje {
  display: grid;
  gap: 8px;
}

.kolor-akcje .gra-przycisk {
  min-height: 48px;
  padding: 0 12px;
  font-size: 15px;
}

/* gry w pionie: kafle i paleta pod soba */
@media (orientation: portrait) {
  .gry-lista {
    grid-template-columns: 1fr;
    max-width: 520px;
  }

  .gra-kafel {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 18px;
    align-items: center;
    text-align: left;
    padding: 12px;
  }

  .gra-kafel-obraz {
    grid-row: 1 / 3;
  }

  .gra-kafel-nazwa {
    align-self: end;
    margin-top: 0;
  }

  .gra-kafel-opis {
    align-self: start;
  }

  .pary-siatka {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    width: min(100%, 75vh);
    aspect-ratio: 3 / 4;
  }

  .kolorowanka {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .kolor-obrazki {
    flex-direction: row;
    justify-content: center;
  }

  .kolor-obrazek {
    width: 120px;
  }

  .kolor-farby {
    grid-template-columns: repeat(6, 1fr);
  }

  .kolor-akcje {
    grid-template-columns: 1fr 1fr;
  }
}

/* Tablet 8,7" w poziomie (600 i 533 wysokosci): kolorowanka miala 590 px wiersza na
   508 px miejsca - naklejki i "Wyczysc" wypadaly pod ekran, a w "Kelnerze" przycisk startu.
   Obrazek sie kurczy, farby ida w trzech kolumnach, okna gier sa nizsze. */
@media (orientation: landscape) and (max-height: 640px) {
  .kolorowanka {
    grid-template-columns: 110px minmax(0, 1fr) 176px;
    grid-template-rows: minmax(0, 1fr);
    gap: 14px;
  }

  .kolor-srodek {
    align-self: stretch;
    min-height: 0;
  }

  .kolor-paleta {
    gap: 12px;
  }

  .kolor-farby {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .kolor-farba {
    min-height: 0;
  }

  .kolor-akcje {
    grid-template-columns: 1fr 1fr;
  }

  .kolor-akcje .gra-przycisk {
    padding: 0 6px;
    font-size: 14px;
  }

  .kolor-naklejki {
    min-height: 0;
  }

  .kolor-znaczek {
    width: 46px;
    height: 46px;
    font-size: 24px;
  }

  .gra-nakladka {
    padding: 12px;
  }

  .gra-okno {
    gap: 6px;
    width: min(620px, 100%);
    max-height: 100%;
    padding: 18px 26px 16px;
    overflow-y: auto;
  }

  .gra-okno-obraz {
    width: auto;
    height: min(150px, 24vh);
  }

  .gra-okno-tytul {
    font-size: 26px;
  }

  .gra-okno-opis,
  .gra-okno-linie p {
    font-size: 15.5px;
    line-height: 1.35;
  }

  .gra-okno-przyciski {
    margin-top: 4px;
  }
}

/* ------------------------------------------- pasek menu: flagi i gry */

.pasek-gry {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 18px 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(199, 123, 2, 0.35);
  background: var(--miod-mgla);
  color: var(--miod-ciemny);
  font-size: 14px;
  font-weight: 700;
}

.pasek-gry svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------- przyciski */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  padding: 0 26px;
  border-radius: var(--r-m);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: transform 0.15s var(--ease), background 0.15s ease;
}

.btn:active {
  transform: scale(0.97);
}

.btn--glowny {
  background: var(--miod);
  color: var(--atrament);
  box-shadow: 0 3px 10px rgba(199, 123, 2, 0.3);
}

.btn--glowny:disabled {
  background: var(--panel);
  color: var(--chmiel);
  box-shadow: none;
  cursor: default;
}

.btn--cichy {
  border: 1px solid var(--linia);
  background: var(--karta);
  color: var(--atrament-80);
}

.btn--pelny {
  width: 100%;
}

/* ------------------------------------------------------- modale = arkusze */

/* Okna (pozycja, koszyk, serwis) na srodku ekranu - wzrok goscia jest posrodku
   tabletu, nie przy dolnej krawedzi. Wchodza na sprezynie: z lekkiego pomniejszenia. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(26, 23, 19, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  /* zamkniete okno znika tez dla czytnikow ekranu i klawiatury (po wygaszeniu) */
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}

.modal[data-otwarty] {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity 0.22s ease;
}

.modal-panel {
  position: relative;
  width: min(680px, 100%);
  max-height: min(90dvh, 820px);
  display: flex;
  flex-direction: column;
  background: var(--karta);
  border-radius: var(--r-xl);
  box-shadow: 0 30px 70px -20px rgba(26, 23, 19, 0.45), 0 0 0 1px rgba(26, 23, 19, 0.04);
  overflow: hidden;
  opacity: 0;
  transform: translateY(28px) scale(0.96);
  transition: transform 0.38s var(--sprezyna), opacity 0.2s var(--ease);
}

.modal[data-otwarty] .modal-panel {
  opacity: 1;
  transform: none;
}

.modal-panel.bez-przejscia {
  transition: none;
}

.uchwyt {
  flex: none;
  height: 24px;
  display: grid;
  place-items: center;
  cursor: grab;
  touch-action: none;
}

.uchwyt span {
  width: 46px;
  height: 5px;
  border-radius: 99px;
  background: #d9d0c0;
}

.modal-zamknij {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 26px;
  line-height: 1;
  color: var(--atrament-64);
  background: var(--panel);
}

.modal-scena {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.modal-figura {
  position: relative;
  flex: none;
  /* na niskim ekranie (telefon poziomo) zdjecie ustepuje tresci i przyciskowi */
  height: min(240px, 32dvh);
  margin: 6px 28px 8px;
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--tlo-ilustracji);
}

.modal-figura img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s var(--ease);
}

/* Ilustracja pokazuje caly talerz: pudelko 4:3 na srodku, po bokach to samo cieple tlo. */
.modal-figura[data-rodzaj="ilustracja"] img {
  width: auto;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0 auto;
  /* boki obrazu rozplywaja sie w tle - bez widocznej krawedzi prostokata */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}

.modal-figura[data-bez-zdjecia] img {
  opacity: 0;
}

/* w trakcie przelotu z karty prawdziwy obraz czeka ukryty pod klonem */
.modal-figura.w-przelocie img,
.modal-figura.w-przelocie video {
  visibility: hidden;
}

/* zywa ilustracja (klip Veo nazwany jak pozycja) nad obrazem - wchodzi, gdy ruszy */
.modal-figura video {
  position: absolute;
  inset: 0;
  height: 100%;
  width: auto;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0 auto;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}

.modal-figura[data-zywa] video {
  opacity: 1;
}

/* ani zdjecia, ani ilustracji - arkusz jest czysto typograficzny */
.modal-figura[data-brak] {
  display: none;
}

/* klon obrazu w locie karta -> arkusz, nad arkuszem i jego scrimem */
.przelot {
  position: fixed;
  z-index: 70;
  object-fit: cover;
  background: var(--tlo-ilustracji);
  box-shadow: 0 18px 40px rgba(26, 23, 19, 0.18);
  pointer-events: none;
}

/* ilustracja leci juz z miekkimi bokami - laduje w arkuszu bez przeskoku */
.przelot[data-rodzaj="ilustracja"] {
  box-shadow: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}

.karta-zastepnik {
  display: none;
}

.modal-przewijane {
  overflow-y: auto;
  min-height: 0;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.modal-przewijane::-webkit-scrollbar {
  display: none;
}

.modal-tresc {
  padding: 2px 28px 22px;
}

.modal-naglowek h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 720;
  line-height: 1.14;
  letter-spacing: -0.015em;
  padding-right: 52px;
}

.cechy {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 14px;
  padding-right: 52px;
}

.cechy li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--atrament-80);
  border: 1px solid var(--linia);
  border-radius: 10px;
  padding: 6px 11px;
  font-variant-numeric: tabular-nums;
}

.cechy li svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--chmiel);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cechy li[data-uwaga] {
  color: var(--miod-ciemny);
  border-color: rgba(199, 123, 2, 0.35);
}

.cechy li[data-uwaga] svg {
  stroke: var(--miod-ciemny);
}

.modal-opis {
  margin-top: 12px;
  font-size: 15.5px;
  line-height: 1.58;
  color: var(--atrament-80);
}

.blok {
  margin-top: 22px;
}

/* warianty zaraz pod nazwa, opis pod nimi */
#blok-warianty {
  margin-top: 16px;
}

#blok-warianty:not([hidden]) + .modal-opis {
  margin-top: 18px;
}

.blok-etykieta {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--atrament-64);
  margin-bottom: 10px;
}

.blok-podpis {
  font-size: 13px;
  color: var(--atrament-64);
  margin: -6px 0 10px;
}

/* notka pod chipsami (np. "tylko w tym stopniu wysmazenia") - odstaje w dol,
// nie podciaga sie pod przycisk jak podpis nad chipsami */
.opcje + .blok-podpis {
  margin: 10px 0 0;
}

.opcje {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.opcja {
  min-height: 48px;
  /* 16 px: trzy pojemnosci piwa (0,15 / 0,4 / 1 l z cena) mieszcza sie w jednym rzedzie okna */
  padding: 8px 16px;
  border-radius: 14px;
  border: 1.5px solid var(--linia);
  background: var(--karta);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.opcja[aria-pressed="true"] {
  border-color: var(--atrament);
  background: var(--miod-mgla);
}

.opcja-porcja,
.opcja-cena {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--atrament-64);
  font-variant-numeric: tabular-nums;
}

.opcja[aria-pressed="true"] .opcja-cena {
  color: var(--miod-ciemny);
  font-weight: 600;
}

.opcja-porcja:empty {
  display: none;
}

.chip {
  min-height: 48px;
  padding: 8px 16px;
  border-radius: 12px;
  border: 1.5px solid var(--linia);
  background: var(--karta);
  font-size: 14px;
  font-weight: 500;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.chip[aria-pressed="true"] {
  border-color: var(--atrament);
  background: var(--miod-mgla);
}

.pole-uwag {
  width: 100%;
  margin-top: 10px;
  padding: 13px 15px;
  border: 1.5px solid var(--linia);
  border-radius: var(--r-s);
  background: var(--karta);
  font: inherit;
  font-size: 14.5px;
  color: var(--atrament);
  resize: none;
  user-select: text;
}

.pole-uwag:focus {
  outline: none;
  border-color: var(--miod);
}

.lista-alergenow {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.lista-alergenow li {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--atrament-80);
  border: 1px solid var(--linia);
  border-radius: 10px;
  padding: 6px 10px;
}

.modal-stopka {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linia);
  background: var(--karta);
}

.modal-cena {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  word-spacing: -0.38em;
  white-space: nowrap;
}

.modal-cena small {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--atrament-64);
  word-spacing: normal;
}

.licznik {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--linia);
  border-radius: var(--r-m);
}

.licznik button {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
  color: var(--atrament);
  transition: background 0.15s ease;
}

.licznik button:active {
  background: var(--panel);
}

.licznik output {
  min-width: 34px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

#btn-dodaj {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
}

/* ------------------------------------------------------------ panel koszyka */

.koszyk-panel .modal-panel {
  width: min(720px, 100%);
}

.koszyk-panel .modal-tresc {
  padding-bottom: 4px;
}

.koszyk-lista {
  padding: 0 28px 22px;
}

.koszyk-pusty {
  padding: 26px 0;
  text-align: center;
  color: var(--atrament-64);
}

/* Wspolny koszyk stolika: krotka informacja pod tytulem - na tablecie zaproszenie do telefonow
   (kod QR na stoliku), na telefonie i przy wspolnym zamawianiu - ze koszyk widzi caly stolik. */
.koszyk-wspolny {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 14px 10px 12px;
  border-radius: var(--r-m);
  background: var(--miod-mgla);
  box-shadow: inset 0 0 0 1px rgba(199, 123, 2, 0.18);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--atrament-80);
}

.koszyk-wspolny[hidden] {
  display: none;
}

.koszyk-wspolny svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  fill: none;
  stroke: var(--miod-ciemny);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Osoby przy wspolnym koszyku: podpis z kropka w kolorze osoby (Ty / Tablet / Telefon 2), a wiersz
   koszyka i podsumowania z paskiem w tym kolorze - kazdy widzi od razu, co jest czyje. */
.osoba-znak {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 8px 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--kolor-osoby, #9a8f80) 13%, transparent);
  color: var(--atrament-80);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.6;
  white-space: nowrap;
  vertical-align: 1px;
}

.osoba-znak::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--kolor-osoby, #9a8f80);
}

.koszyk-pozycja[data-osoba] {
  box-shadow: inset 4px 0 0 var(--kolor-osoby);
}

.podsumowanie-wiersz .osoba-znak {
  font-size: 12px;
  color: var(--atrament-80);
}

.podsumowanie-wiersz[data-osoba] {
  padding-left: 12px;
  border-left: 4px solid var(--kolor-osoby);
}

.koszyk-wspolny-ty {
  white-space: nowrap;
}

.koszyk-wspolny-ty[hidden] {
  display: none;
}

/* Wysylka zamowienia stolika: pierscien odlicza chwile na "poczekajcie, dodam cos". */
.wysylka-licznik {
  position: relative;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  margin-bottom: 6px;
}

.wysylka-licznik[hidden] {
  display: none;
}

.wysylka-licznik svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.wysylka-tor,
.wysylka-postep {
  fill: none;
  stroke-width: 8;
}

.wysylka-tor {
  stroke: var(--panel);
}

.wysylka-postep {
  stroke: var(--miod);
  stroke-linecap: round;
  stroke-dasharray: 327;
  transition: stroke-dashoffset 0.25s linear;
}

#wysylka-sekundy {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.wysylka-przyciski {
  display: grid;
  gap: 10px;
  width: 100%;
  margin-top: 14px;
}

.wysylka-przyciski .btn {
  width: 100%;
}

.wysylka-przyciski .btn[hidden] {
  display: none;
}

/* Koszyk w biegach: dania z uchwytem (przeciagnij albo dotknij, potem "Przenies tutaj"). */
.koszyk-wskazowka {
  margin: 2px 0 14px;
  font-size: 13px;
  color: var(--atrament-64);
}

.koszyk-lista[data-przenoszenie] .koszyk-wskazowka {
  color: var(--miod-ciemny);
  font-weight: 600;
}

.koszyk-bieg {
  margin-bottom: 10px;
  padding: 10px 12px 4px;
  border: 1.5px solid transparent;
  border-radius: var(--r-m);
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease);
}

.koszyk-bieg .bieg-naglowek {
  margin-bottom: 0;
}

/* puste biegi pojawiaja sie dopiero, gdy jest co do nich przeniesc */
.koszyk-bieg[data-pusta] {
  display: none;
}

.koszyk-lista[data-przenoszenie] .koszyk-bieg {
  display: block;
  border-color: var(--linia);
  border-style: dashed;
}

.koszyk-lista[data-przenoszenie] .koszyk-bieg[data-zrodlo] {
  border-color: transparent;
}

.koszyk-bieg[data-cel] {
  border-color: var(--miod) !important;
  border-style: solid !important;
  background: var(--miod-mgla);
}

.koszyk-upusc {
  display: none;
  width: 100%;
  min-height: 48px;
  margin: 6px 0 8px;
  border-radius: 12px;
  background: var(--miod-mgla);
  color: var(--miod-ciemny);
  font-size: 14px;
  font-weight: 650;
}

.koszyk-lista[data-przenoszenie]:not([data-przeciaganie]) .koszyk-bieg:not([data-zrodlo]) .koszyk-upusc {
  display: block;
}

/* Pozycja = lekka karta. Dania (data-ruchoma) mozna chwycic w dowolnym miejscu -
   karta unosi sie pod palcem; napoje stoja w miejscu, bez uchwytu. */
.koszyk-bieg-lista {
  display: grid;
  gap: 8px;
  padding: 8px 0 6px;
}

.koszyk-pozycja {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  grid-template-areas:
    "chwyt nazwa cena"
    "chwyt detal sterowanie"
    "chwyt uwaga sterowanie";
  gap: 2px 12px;
  padding: 12px 14px 12px 6px;
  background: var(--porcelana);
  border: 1px solid var(--linia);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(26, 23, 19, 0.05);
  transition: opacity 0.15s var(--ease), background-color 0.3s var(--ease), box-shadow 0.2s var(--ease),
    border-color 0.2s var(--ease), scale 0.2s var(--ease);
}

.koszyk-pozycja:not([data-ruchoma]) {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "nazwa cena"
    "detal sterowanie"
    "uwaga sterowanie";
  padding-left: 16px;
}

/* ruchoma: kursor chwytania, pionowy ruch palcem dalej przewija liste */
.koszyk-pozycja[data-ruchoma] {
  cursor: grab;
  touch-action: pan-y;
  -webkit-touch-callout: none;
}

@media (hover: hover) {
  .koszyk-pozycja[data-ruchoma]:hover {
    border-color: #ddd2c0;
    box-shadow: 0 6px 16px -8px rgba(26, 23, 19, 0.28);
  }
}

/* przytrzymana palcem - unosi sie, zanim ruszy za palcem */
.koszyk-pozycja[data-podniesiona] {
  scale: 1.02;
  box-shadow: 0 12px 28px -10px rgba(26, 23, 19, 0.35);
}

.koszyk-chwyt,
.koszyk-chwyt-miejsce {
  grid-area: chwyt;
  align-self: center;
}

.koszyk-chwyt {
  display: grid;
  place-items: center;
  width: 30px;
  height: 100%;
  min-height: 48px;
  border-radius: 10px;
  color: var(--atrament-45);
  cursor: grab;
  /* za kropki palec ciagnie od razu - przegladarka nie moze tu przewijac */
  touch-action: none;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}

.koszyk-chwyt svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.koszyk-chwyt:active,
.koszyk-chwyt[aria-pressed="true"] {
  background: var(--miod-mgla);
  color: var(--miod-ciemny);
}

/* wybrane do przeniesienia */
.koszyk-pozycja[data-wybrana] {
  background: var(--miod-mgla);
  border-color: var(--miod);
}

/* przeciagane: w liscie zostaje blady slad, za palcem jedzie duch */
.koszyk-pozycja.w-locie {
  opacity: 0.3;
}

.koszyk-duch {
  position: fixed;
  z-index: 75;
  margin: 0;
  background: var(--karta);
  border-color: var(--miod);
  box-shadow: 0 22px 44px -12px rgba(26, 23, 19, 0.4);
  rotate: -1.5deg;
  scale: 1.03;
  pointer-events: none;
  cursor: grabbing;
}

/* palcem: niska karta z sama nazwa i cena, zeby biegi pod nia bylo widac */
.koszyk-duch[data-palec] {
  grid-template-areas: "chwyt nazwa cena";
  align-items: center;
  padding-block: 6px;
}

.koszyk-duch[data-palec] .koszyk-pozycja-cena {
  align-self: center;
}

.koszyk-duch[data-palec] .koszyk-pozycja-detal,
.koszyk-duch[data-palec] .koszyk-pozycja-uwaga,
.koszyk-duch[data-palec] .koszyk-pozycja-sterowanie {
  display: none;
}

.koszyk-duch[data-palec] .koszyk-pozycja-nazwa {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* dopiero co przeniesione - krotki bursztynowy blysk w nowym biegu */
.koszyk-pozycja[data-wpadl] {
  animation: koszyk-wpadl 0.7s var(--ease);
}

@keyframes koszyk-wpadl {
  from {
    background-color: var(--miod-mgla);
  }
  to {
    background-color: transparent;
  }
}

.koszyk-pozycja-nazwa {
  grid-area: nazwa;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.koszyk-pozycja-cena {
  grid-area: cena;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  word-spacing: -0.38em;
  align-self: baseline;
  text-align: right;
}

.koszyk-pozycja-detal {
  grid-area: detal;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--atrament-64);
  font-variant-numeric: tabular-nums;
}

.koszyk-pozycja-uwaga {
  grid-area: uwaga;
  font-size: 13px;
  color: var(--chmiel);
}

.koszyk-pozycja-uwaga:empty {
  display: none;
}

.koszyk-pozycja-sterowanie {
  grid-area: sterowanie;
  align-self: end;
}

.koszyk-pozycja .licznik button {
  width: 44px;
  height: 44px;
}

/* Tablet 8,7" w poziomie: licznik obok nazwy, nie pod nia - pozycja ma ok. 70 px zamiast
   105 i w oknie koszyka widac 4 dania zamiast dwoch i pol */
@media (orientation: landscape) and (max-height: 640px) {
  html:not([data-telefon]) .koszyk-pozycja {
    grid-template-columns: 30px minmax(0, 1fr) auto auto;
    grid-template-areas:
      "chwyt nazwa sterowanie cena"
      "chwyt detal sterowanie cena"
      "chwyt uwaga sterowanie cena";
    column-gap: 14px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  html:not([data-telefon]) .koszyk-pozycja:not([data-ruchoma]) {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "nazwa sterowanie cena"
      "detal sterowanie cena"
      "uwaga sterowanie cena";
  }

  html:not([data-telefon]) .koszyk-pozycja-cena {
    align-self: center;
    min-width: 62px;
  }

  html:not([data-telefon]) .koszyk-pozycja-sterowanie {
    align-self: center;
  }
}

/* ------------------------------------- bezczynnosc: "potrzebujesz wiecej czasu?" */

/* nad wszystkim: arkuszami, kelnerem i niesionym daniem */
.czas-panel {
  z-index: 130;
}

.czas-panel .modal-panel {
  width: min(520px, 100%);
}

.czas-tresc {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 36px 32px 26px;
  text-align: center;
}

/* portret kelnera w pierscieniu, ktory ubywa razem z czasem */
.czas-zegar {
  position: relative;
  width: 168px;
  aspect-ratio: 1;
  margin-bottom: 16px;
}

.czas-pierscien {
  position: absolute;
  inset: 0;
  rotate: -90deg;
  overflow: visible;
}

.czas-pierscien circle {
  fill: none;
  stroke-width: 3.5;
}

.czas-tor {
  stroke: var(--linia);
}

.czas-postep {
  stroke: var(--miod);
  stroke-linecap: round;
  stroke-dasharray: 1;
  transition: stroke 0.3s var(--ease);
}

.czas-panel[data-otwarty] .czas-postep {
  animation: czas-ubywa var(--czas, 20s) linear forwards;
}

@keyframes czas-ubywa {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 1;
  }
}

.czas-portret {
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--tlo-ilustracji);
}

.czas-portret img {
  position: absolute;
  top: 7%;
  left: 50%;
  width: 116%;
  max-width: none;
  translate: -50% 0;
}

.czas-panel[data-otwarty] .czas-portret img {
  animation: czas-kelner 2.8s ease-in-out infinite alternate;
}

/* kelner czeka: ledwie widoczny oddech */
@keyframes czas-kelner {
  to {
    translate: -50% 3px;
  }
}

.czas-sekundy {
  position: absolute;
  bottom: -8px;
  left: 50%;
  translate: -50% 0;
  min-width: 52px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--atrament);
  color: var(--karta);
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  box-shadow: 0 6px 14px -6px rgba(26, 23, 19, 0.45);
  transition: background-color 0.3s var(--ease);
}

/* ostatnie sekundy: bordo zamiast miodu */
.czas-panel[data-malo] .czas-postep {
  stroke: var(--bordo);
}

.czas-panel[data-malo] .czas-sekundy {
  background: var(--bordo);
}

.czas-tresc h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 720;
  line-height: 1.14;
  text-wrap: balance;
}

.czas-tresc p {
  max-width: 34ch;
  color: var(--atrament-64);
  text-wrap: pretty;
}

.czas-panel .modal-stopka .btn {
  flex: 1;
  padding: 0 18px;
}

/* postacie wylaczone w serwisie: w pierscieniu same sekundy */
body[data-bez-postaci] .czas-portret {
  display: none;
}

body[data-bez-postaci] .czas-sekundy {
  bottom: auto;
  top: 50%;
  translate: -50% -50%;
  background: none;
  color: var(--atrament);
  font-size: 44px;
  box-shadow: none;
}

body[data-bez-postaci] .czas-panel[data-malo] .czas-sekundy {
  background: none;
  color: var(--bordo);
}

/* ------------------------------------------------------------ podsumowanie */

#ekran-podsumowanie {
  background: var(--porcelana);
  overflow-y: auto;
  align-items: center;
  padding: 40px 28px;
}

.karta-podsumowania {
  width: min(760px, 100%);
  margin: auto;
  background: var(--karta);
  border: 1px solid var(--linia);
  border-radius: var(--r-xl);
  box-shadow: 0 1px 2px rgba(26, 23, 19, 0.04);
  padding: 34px 36px 30px;
}

.karta-podsumowania h2 {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 720;
  letter-spacing: -0.015em;
}

.podsumowanie-stolik {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--miod-ciemny);
}

.podsumowanie-lista {
  margin: 22px 0 6px;
}

.bieg-grupa {
  margin-bottom: 18px;
}

.bieg-naglowek {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--atrament-64);
}

.bieg-numer {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--miod-mgla);
  color: var(--miod-ciemny);
  font-size: 12px;
  letter-spacing: 0;
}

.bieg-numer--teraz {
  background: var(--chmiel);
  color: var(--porcelana);
}

.podsumowanie-wiersz {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
}

.podsumowanie-wiersz span {
  font-size: 15px;
  color: var(--atrament-80);
}

.podsumowanie-wiersz::after {
  content: "";
  flex: 1;
  order: 2;
  min-width: 28px;
  border-bottom: 2px dotted rgba(26, 23, 19, 0.22);
  transform: translateY(-3px);
}

.podsumowanie-wiersz span {
  order: 1;
}

.podsumowanie-wiersz strong {
  order: 3;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  word-spacing: -0.38em;
  white-space: nowrap;
}

.podsumowanie-suma {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--linia);
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
}

.podsumowanie-suma #podsumowanie-suma {
  font-family: var(--font-mono);
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  word-spacing: -0.38em;
}

.notka {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--atrament-64);
}

.notka--zloto {
  color: var(--miod-ciemny);
}

.przyciski-rzad {
  display: flex;
  gap: 14px;
  margin-top: 24px;
}

.przyciski-rzad .btn {
  flex: 1;
}

/* Tablet w poziomie (8,7" i 11"): "Zamawiam" przyklejony do dolu ekranu jak na telefonie - z propozycja
   kelnera "A do picia?" podsumowanie bywa dluzsze niz ekran i przycisk chowal sie pod krawedzia. */
@media (max-height: 860px) {
  html:not([data-telefon]) #ekran-podsumowanie {
    padding-bottom: 0;
  }

  html:not([data-telefon]) .karta-podsumowania {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 0;
  }

  html:not([data-telefon]) .przyciski-rzad {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 20px -36px -30px;
    padding: 14px 36px 18px;
    border-top: 1px solid var(--linia);
    background: var(--karta);
  }
}

/* ------------------------------------------------------------ potwierdzenie */

#ekran-potwierdzenie {
  background: var(--porcelana);
  align-items: center;
  justify-content: center;
  padding: 40px 28px;
}

.potwierdzenie {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  max-width: 560px;
}

.potwierdzenie-znak {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--miod-mgla);
  display: grid;
  place-items: center;
  animation: znak-wjazd 0.5s var(--sprezyna) both;
}

@keyframes znak-wjazd {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Z klipem: karta 4:3 z nalewaniem, ptaszek jako plakietka w prawym dolnym rogu.
   Bez klipu (brak w konfiguracji) zostaje sam ptaszek jak dawniej. */
.potwierdzenie-scena {
  position: relative;
  display: grid;
  place-items: center;
}

.potwierdzenie-scena video {
  display: none;
}

.potwierdzenie-scena[data-wideo] {
  width: min(340px, 72vw);
  aspect-ratio: 4 / 3;
  border-radius: 26px;
  overflow: hidden;
  background: var(--tlo-ilustracji);
  box-shadow: 0 1px 2px rgba(26, 23, 19, 0.05), 0 22px 44px -26px rgba(26, 23, 19, 0.35);
  animation: znak-wjazd 0.55s var(--sprezyna) both;
}

.potwierdzenie-scena[data-wideo] video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.potwierdzenie-scena[data-wideo] .potwierdzenie-znak {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 60px;
  height: 60px;
  background: var(--chmiel);
  box-shadow: 0 6px 16px rgba(26, 23, 19, 0.25);
  animation-delay: 0.25s;
}

.potwierdzenie-scena[data-wideo] .potwierdzenie-znak svg {
  width: 30px;
  height: 30px;
  stroke: var(--porcelana);
}

.potwierdzenie-znak svg {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: var(--miod-ciemny);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.potwierdzenie h2 {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.potwierdzenie p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--atrament-80);
}

.potwierdzenie .btn {
  margin-top: 10px;
  min-width: 280px;
}

/* ------------------------------------------------------------ tryb serwisowy */

.serwis-panel .modal-panel {
  width: min(640px, 100%);
}

.serwis-tresc {
  padding: 2px 28px 22px;
}

/* klawiatura PIN na ekranie - na tablecie z Windows klawiatura dotykowa sama sie nie pokazuje */
.serwis-klawiatura {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.serwis-klawiatura button {
  min-height: 62px;
  border: 1.5px solid var(--linia);
  border-radius: var(--r-s);
  background: var(--karta);
  font: inherit;
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--atrament);
}

.serwis-klawiatura button:active {
  background: var(--linia);
}

.serwis-klawiatura .serwis-klawiatura-ok {
  font-size: 18px;
  letter-spacing: 0.04em;
}

.serwis-tresc h2 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 720;
  letter-spacing: -0.015em;
  margin-bottom: 16px;
  padding-right: 52px;
}

.pole {
  display: block;
  margin-bottom: 16px;
}

.pole input,
.pole select {
  width: 100%;
  min-height: 52px;
  padding: 0 15px;
  border: 1.5px solid var(--linia);
  border-radius: var(--r-s);
  background: var(--karta);
  font: inherit;
  font-size: 16px;
  color: var(--atrament);
  user-select: text;
}

.pole input:focus,
.pole select:focus {
  outline: none;
  border-color: var(--miod);
}

.serwis-lista {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--linia);
  border-radius: var(--r-s);
  padding: 6px 14px;
}

.serwis-lista label {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  border-bottom: 1px solid var(--linia);
  font-size: 14px;
}

.serwis-lista label:last-child {
  border-bottom: none;
}

.serwis-lista input {
  width: 20px;
  height: 20px;
  accent-color: var(--miod);
}

.pole--przelacznik {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid var(--linia);
  border-radius: var(--r-s);
  font-size: 14.5px;
  font-weight: 600;
}

.pole--przelacznik input {
  flex: none;
  width: 22px;
  height: 22px;
  min-height: 0;
  padding: 0;
  accent-color: var(--miod);
}

.serwis-komunikat {
  min-height: 22px;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--miod-ciemny);
}

/* ------------------------------------------------------------------- toast */

.toast {
  position: fixed;
  left: 50%;
  bottom: var(--toast-dol, 26px);
  z-index: 80;
  transform: translate(-50%, 16px);
  max-width: min(560px, calc(100vw - 32px));
  padding: 13px 22px;
  /* jedna linia = pigulka; dluzszy tekst na waskim telefonie zawija sie w zaokraglony prostokat, nie w kolo */
  border-radius: 24px;
  background: var(--atrament);
  color: var(--porcelana);
  font-size: 14.5px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 10px 26px rgba(26, 23, 19, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s var(--ease);
}

.toast[data-widoczny] {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ------------------------------------------------- mikrointerakcje dotyku */

/* Cala karta ustepuje pod palcem, nie tylko przycisk. */
.danie:active {
  transform: scale(0.988);
  transition: transform 0.12s var(--ease);
}

/* Karty jawia sie przy pierwszym wjezdzie w widok (klasy nadaje JS i zdejmuje
   po przejsciu, zeby transform nie blokowal :active). */
.danie.do-jawienia {
  opacity: 0;
  transform: translateY(18px) scale(0.985);
}

/* opoznienie fali (42 ms na karte) ustawia JS w transition-delay */
.danie.do-jawienia.jawi {
  opacity: 1;
  transform: none;
  transition: opacity 0.32s var(--ease), transform 0.42s var(--ease);
}

/* Licznik ilosci bije przy zmianie. */
.licznik output.bije {
  animation: bicie 0.18s var(--ease);
}

@keyframes bicie {
  40% {
    transform: scale(1.22);
  }
}

/* Tresc arkusza wchodzi kaskada przy otwarciu. */
.modal[data-otwarty] .modal-tresc > * {
  animation: blok-jawi 0.32s var(--ease) both;
}

.modal[data-otwarty] .modal-tresc > *:nth-child(1) { animation-delay: 0.04s; }
.modal[data-otwarty] .modal-tresc > *:nth-child(2) { animation-delay: 0.08s; }
.modal[data-otwarty] .modal-tresc > *:nth-child(3) { animation-delay: 0.12s; }
.modal[data-otwarty] .modal-tresc > *:nth-child(4) { animation-delay: 0.16s; }
.modal[data-otwarty] .modal-tresc > *:nth-child(5) { animation-delay: 0.2s; }
.modal[data-otwarty] .modal-tresc > *:nth-child(n + 6) { animation-delay: 0.24s; }

@keyframes blok-jawi {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* Potwierdzenie: ptaszek sie rysuje, numer i opis wjezdzaja po nim. */
#ekran-potwierdzenie[data-aktywny] .potwierdzenie-znak svg path {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  animation: kreska 0.45s var(--ease) 0.3s forwards;
}

#ekran-potwierdzenie[data-aktywny] .potwierdzenie p.potwierdzenie-status {
  animation: powitanie-wejscie 0.5s var(--ease) 0.45s both;
}

#ekran-potwierdzenie[data-aktywny] .potwierdzenie p,
#ekran-potwierdzenie[data-aktywny] .potwierdzenie .btn {
  animation: powitanie-wejscie 0.5s var(--ease) 0.6s both;
}

@keyframes kreska {
  to {
    stroke-dashoffset: 0;
  }
}

/* --------------------------------------------------------------- portrait */

@media (max-width: 860px) {
  .siatka-dan {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------- maly tablet w poziomie (8,7") */

/* Galaxy Tab A11 8,7" (1340x800): w przegladarce ok. 1005x600 (skala 1,33) albo 893x533 (1,5).
   Punkt CSS ma tam prawie ten sam rozmiar co na 11" 1280x800, wiec litery i przyciski zostaja,
   a uklad sie zageszcza: dwa dania w rzedzie jak na 11" (wczesniej jedno z wielka ilustracja),
   wezszy pas kelnera, mniejszy panel grafiki i nizsza lada gospodarza. */
@media (min-width: 861px) and (max-width: 1100px) {
  .tresc {
    padding-left: 124px;
    padding-right: 24px;
  }

  #maskotka {
    width: 92px;
    left: 10px;
  }

  #maskotka:not([data-strona="prawa"]) .dymek {
    max-width: 116px;
    font-size: 13px;
  }

  .siatka-dan {
    gap: 12px;
  }

  .danie {
    --foto-szer: 35%;
    gap: 0 14px;
    min-height: 172px;
    padding-left: 16px;
  }

  .danie-nazwa {
    font-size: 17px;
  }

  .danie-opis {
    font-size: 13px;
  }

  .lada {
    grid-template-columns: 230px minmax(0, 1fr);
    column-gap: 22px;
    padding-right: 22px;
  }

  .lada-postac {
    min-height: 170px;
  }

  .lada-tekst {
    padding: 18px 0;
  }

  .lada-tytul {
    font-size: 22px;
  }
}

/* Niski ekran w poziomie (8,7" przy skali 1,5: 893x533): powitanie sie sciska - logo nie
   wjezdza pod gorna krawedz, a nazwy jezykow (Українська) mieszcza sie w pigulkach. */
@media (orientation: landscape) and (max-width: 1100px) {
  html:not([data-telefon]) .powitanie-tresc {
    width: 50%;
    padding: 28px 24px 24px 44px;
  }

  html:not([data-telefon]) .powitanie-mozaika {
    width: 50%;
  }

  html:not([data-telefon]) .flaga {
    gap: 10px;
    padding-right: 16px;
    font-size: 16px;
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  html:not([data-telefon]) .powitanie-znak {
    width: 64px;
  }

  html:not([data-telefon]) .powitanie-wordmark {
    font-size: 32px;
  }

  html:not([data-telefon]) .powitanie-jezyki {
    gap: 8px;
    margin-top: 22px;
  }

  html:not([data-telefon]) .flaga {
    min-height: 56px;
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

/* okno dania na niskim tablecie w poziomie: grafika z lewej, opis i wybory z prawej -
   jedno pod drugim zostawialo na "Kiedy podac?" ledwie pasek nad przyciskiem */
@media (orientation: landscape) and (max-height: 640px) {
  html:not([data-telefon]) #modal-pozycja .modal-scena {
    flex-direction: row;
  }

  html:not([data-telefon]) #modal-pozycja .modal-figura {
    width: 38%;
    height: auto;
    margin: 6px 0 12px 24px;
  }

  html:not([data-telefon]) #modal-pozycja .modal-przewijane {
    flex: 1;
  }
}

/* tablet w pionie (8,7": 600 albo 533 szerokosci): kelner mniejszy, mniej zaslania karty */
@media (orientation: portrait) and (max-width: 700px) {
  html:not([data-telefon]) #maskotka {
    width: 76px;
    left: 6px;
  }
}

@media (max-width: 860px) {
  .pasek-gorny {
    padding: 0 18px;
  }

  .tresc {
    padding: 22px 18px calc(var(--koszyk-wys) + 56px);
  }

  .sekcja-tytul h2 {
    font-size: 26px;
  }

  .danie {
    --foto-szer: 36%;
    padding: 0 0 0 18px;
  }

  .pasek-koszyka {
    right: 18px;
    bottom: 18px;
    left: 18px;
    justify-content: space-between;
  }
}

@media (max-width: 620px) {
  .koszyk-etykieta {
    display: none;
  }

  /* okno dania: cena i licznik w jednym rzedzie, "Dodaj do zamowienia" pod nimi na cala szerokosc */
  #modal-pozycja .modal-stopka {
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 10px;
  }

  #btn-dodaj {
    flex: 1 0 100%;
    order: 3;
  }

  .powitanie-jezyki {
    max-width: none;
  }

  .flaga {
    justify-content: center;
  }

  /* koszyk na telefonie szerzej, zeby nazwy dan nie lamaly sie na cztery linie
     i dalo sie przeniesc danie bez przewijania przez pol listy */
  .koszyk-panel {
    padding: 12px;
  }

  .koszyk-panel .modal-tresc {
    padding: 2px 18px 18px;
  }

  .koszyk-lista {
    padding: 0 12px 18px;
  }

  .koszyk-bieg {
    padding: 8px 6px 2px;
  }

  .koszyk-pozycja .licznik button {
    width: 40px;
    height: 40px;
  }

  .czas-tresc {
    padding: 30px 22px 22px;
  }

  .czas-zegar {
    width: 144px;
  }

  .czas-tresc h2 {
    font-size: 24px;
  }

  /* przyciski jeden pod drugim, "zamawiam dalej" na gorze */
  .czas-panel .modal-stopka {
    flex-direction: column-reverse;
    align-items: stretch;
  }
}

/* -------------------------------------------------------- mniej ruchu */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  /* pierscien czasu to informacja, nie ozdoba - ubywa dalej, tylko bez skokow */
  .czas-panel[data-otwarty] .czas-postep {
    animation-duration: var(--czas, 20s) !important;
  }

  /* kelner bez ruchu: nie nachyla sie za palcem */
  .kl-pozy {
    rotate: 0deg;
  }
}

/* ---------------------------------------------------------------- rachunek */

/* Na powitaniu: pigulka obok "Zmien jezyk" - widoczna, ale nie konkuruje z "Zamow". */
.powitanie-rachunek {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin: 16px 10px 0 0;
  padding: 0 18px 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(199, 123, 2, 0.35);
  background: var(--miod-mgla);
  color: var(--miod-ciemny);
  font-size: 15px;
  font-weight: 700;
}

#krok-wybor .powitanie-rachunek {
  animation: powitanie-wejscie 0.5s var(--ease) 0.24s both;
}

/* po zamowieniu: zamowienia, kelner i rachunek pod flagami jezykow (do konca wizyty stolika) */
.powitanie-wizyta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.powitanie-wizyta[hidden] {
  display: none;
}

.powitanie-wizyta .powitanie-rachunek {
  margin: 0;
  animation: powitanie-wejscie 0.5s var(--ease) 0.24s both;
}

.wizyta-krotka {
  display: none;
}

/* 8,7" w poziomie: krotkie napisy z paska menu w jednym rzedzie - pelne (np. po niemiecku)
   lamaly sie w dwa rzedy i spychaly stopke pod ekran */
@media (orientation: landscape) and (max-height: 640px) {
  .powitanie-wizyta {
    flex-wrap: nowrap;
    margin-top: 16px;
  }

  .powitanie-wizyta .wizyta-pelna {
    display: none;
  }

  .powitanie-wizyta .wizyta-krotka {
    display: inline;
  }
}

.powitanie-rachunek svg,
.pasek-rachunek svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rachunek-panel .modal-panel {
  width: min(560px, 100%);
}

.rachunek-tresc {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 36px 32px 32px;
  text-align: center;
}

.rachunek-tresc[hidden] {
  display: none;
}

.rachunek-tresc h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 32px);
  font-weight: 750;
  letter-spacing: -0.02em;
}

.rachunek-opis {
  max-width: 34ch;
  color: var(--atrament-64);
  font-size: 16px;
}

/* kelner gwaszem w kole - ten sam co w "Potrzebujesz wiecej czasu?" */
.rachunek-portret {
  position: relative;
  width: 132px;
  aspect-ratio: 1;
  margin-bottom: 10px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--tlo-ilustracji);
  box-shadow: inset 0 0 0 4px var(--karta), 0 0 0 2px var(--miod);
}

.rachunek-portret img {
  position: absolute;
  top: 7%;
  left: 50%;
  width: 116%;
  max-width: none;
  translate: -50% 0;
}

/* nad oknami rachunku i kelnera - potwierdzenie moze wyskoczyc z ktoregos z nich */
#modal-obecnosc {
  z-index: 61;
}

.obecnosc-blad {
  max-width: 34ch;
  margin-top: 6px;
  padding: 10px 14px;
  border-radius: var(--r-m);
  background: color-mix(in srgb, var(--miod) 16%, transparent);
  font-size: 15px;
}

.obecnosc-blad[hidden] {
  display: none;
}

.obecnosc-przycisk {
  margin-top: 18px;
}

.obecnosc-wifi {
  max-width: 36ch;
  margin-top: 6px;
  color: var(--atrament-64);
  font-size: 14px;
}

.rachunek-opcje {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  margin-top: 18px;
}

.rachunek-opcja {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 24px 12px 20px;
  border-radius: var(--r-l);
  border: 1.5px solid var(--linia);
  background: var(--porcelana);
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  transition: transform 0.16s var(--ease), border-color 0.16s var(--ease), background 0.16s var(--ease);
}

.rachunek-opcja:active {
  transform: scale(0.97);
  border-color: var(--miod);
  background: var(--miod-mgla);
}

.rachunek-opcja:disabled {
  opacity: 0.5;
}

.rachunek-opcja svg {
  width: 52px;
  height: 52px;
  fill: none;
  stroke: var(--bordo);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* pigulki w dwoch rzedach: rowno w pionie niezaleznie od wysokosci (jezyk ma flage) */
#krok-wybor .powitanie-rachunek,
#krok-wybor .powitanie-zmien-jezyk {
  vertical-align: middle;
}

/* ------------------------------------------------------------ zawolaj kelnera */

.kelner-opcje {
  gap: 12px;
}

.kelner-opcja {
  gap: 8px;
  padding: 20px 10px 16px;
  font-size: 18px;
  line-height: 1.2;
}

.kelner-opcja svg {
  width: 44px;
  height: 44px;
}

/* -------------------------------------------------------- twoje zamowienia */

.zamowienia-panel .modal-panel {
  width: min(620px, 100%);
}

.zamowienia-tresc {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* wysokosc okna (modal-panel, 90% ekranu) - lista przewija sie w srodku, a suma i
     "Popros o rachunek" zostaja cale na dole; przy 100dvh - 48px przycisk wypadal za okno */
  flex: 1 1 auto;
  min-height: 0;
  padding: 32px 28px 26px;
}

.zamowienia-tresc h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 32px);
  font-weight: 750;
  letter-spacing: -0.02em;
}

.zamowienia-tresc .rachunek-opis {
  max-width: none;
}

.zamowienia-lista {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 12px;
  margin: 10px -6px 0;
  padding: 0 6px 4px;
  color: var(--atrament-64);
}

.zamowienia-pusto {
  padding: 22px 0;
  text-align: center;
}

/* dania glowne / desery na znak: na gorze "Twoich zamowien", przycisk dla calego stolika */
.na-znak-wizyta {
  display: grid;
  gap: 8px;
}

.na-znak-bieg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  padding: 12px 14px 12px 16px;
  border-radius: var(--r-l);
  background: var(--miod-mgla);
  box-shadow: 0 0 0 1px rgba(199, 123, 2, 0.28);
  color: var(--atrament);
}

.na-znak-bieg-tytul {
  flex: 1 1 200px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

/* juz zawolany: cichy wiersz bez przycisku */
.na-znak-bieg:not([data-czeka]) {
  background: transparent;
  box-shadow: 0 0 0 1px var(--linia);
}

.na-znak-bieg:not([data-czeka]) .na-znak-bieg-tytul {
  font-size: 14px;
  font-weight: 600;
  color: var(--atrament-80);
}

.na-znak-podajcie {
  flex: none;
  min-height: 48px;
  padding: 0 20px;
}

.zamowienie-goscia {
  border-radius: var(--r-l);
  border: 1px solid var(--linia);
  background: var(--porcelana);
  color: var(--atrament);
}

.zamowienie-goscia header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--linia);
}

.zamowienie-goscia-numer {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--atrament-64);
  font-variant-numeric: tabular-nums;
}

.zamowienie-goscia-status,
.potwierdzenie-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  background: var(--miod-mgla);
  color: var(--miod-ciemny);
  font-size: 13.5px;
  font-weight: 700;
}

.zamowienie-goscia-status i,
.potwierdzenie-status-znak {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  animation: status-czeka 1.6s ease-in-out infinite;
}

@keyframes status-czeka {
  50% {
    opacity: 0.25;
  }
}

/* przyjete: zielony ptaszek zamiast pulsujacej kropki */
.zamowienie-goscia[data-status="przyjete"] .zamowienie-goscia-status,
.potwierdzenie-status[data-status="przyjete"] {
  background: rgba(79, 122, 58, 0.14);
  color: #3f6a2c;
}

.zamowienie-goscia[data-status="przyjete"] .zamowienie-goscia-status i,
.potwierdzenie-status[data-status="przyjete"] .potwierdzenie-status-znak {
  width: 12px;
  height: 7px;
  margin: 0 1px 3px;
  border-radius: 0;
  background: none;
  border-left: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  rotate: -45deg;
  animation: none;
}

.zamowienie-goscia ul {
  list-style: none;
  display: grid;
  gap: 6px;
  padding: 12px 16px 14px;
}

.zamowienie-goscia li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 15.5px;
}

.zamowienie-goscia li strong {
  flex: none;
  /* kwoty czcionka drukarki jak w podsumowaniu (tabular-nums w Schibsted rozstrzela "332 , 80") */
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  word-spacing: -0.38em;
  white-space: nowrap;
}

/* "Jeszcze raz to samo" - na cala szerokosc karty, latwy cel dla palca */
.zamowienie-goscia-powtorz {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 32px);
  min-height: 48px;
  margin: 0 16px 14px;
  border: 1px solid var(--miod-ciemny);
  border-radius: 999px;
  background: var(--miod-mgla);
  color: var(--miod-ciemny);
  font: inherit;
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.16s var(--ease), transform 0.12s var(--ease);
}

.zamowienie-goscia-powtorz:active {
  transform: scale(0.98);
}

.zamowienie-goscia-powtorz svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.zamowienia-stopka {
  display: grid;
  gap: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--linia);
}

.zamowienia-stopka[hidden] {
  display: none;
}

.zamowienia-suma {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-weight: 700;
}

.zamowienia-suma strong {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.zamowienia-notka {
  font-size: 13.5px;
  color: var(--atrament-64);
}

/* Kto ile: rachunek jeden na stolik, a znajomi rozliczaja sie miedzy soba - kolory osob z koszyka */
.kto-ile-miejsce:empty {
  display: none;
}

.kto-ile {
  display: grid;
  gap: 8px;
  width: 100%;
  margin: 10px 0 4px;
  padding: 12px 14px;
  border-radius: var(--r-m);
  background: var(--porcelana);
  border: 1px solid var(--linia);
  text-align: left;
}

.kto-ile-tytul {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--miod-ciemny);
}

.kto-ile ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  list-style: none;
}

.kto-ile li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.kto-ile li .osoba-znak {
  font-size: 13.5px;
}

.kto-ile li strong {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.kto-ile-notka {
  font-size: 12.5px;
  color: var(--atrament-64);
}

/* Faktura na firme pod formami platnosci: zwiniety przycisk, po rozwinieciu NIP i nazwa firmy */
/* napiwek: pigulki jak przy wyborze stolika w prezencie, kwota z procentu pod spodem */
.napiwek {
  width: 100%;
  margin-top: 16px;
  text-align: left;
}

.napiwek-etykieta {
  margin-bottom: 8px;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--atrament-64);
}

.napiwek-opcje {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 8px;
}

.napiwek-opcja {
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 56px;
  padding: 6px 8px;
  text-align: center;
  border: 1.5px solid var(--linia);
  border-radius: var(--r-m);
  background: var(--karta);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.15;
}

.napiwek-opcja small {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--atrament-64);
}

.napiwek-opcja small:empty {
  display: none;
}

.napiwek-opcja[aria-pressed="true"] {
  border-color: var(--miod);
  background: var(--miod-mgla);
  color: var(--miod-ciemny);
}

.napiwek-opcja[aria-pressed="true"] small {
  color: var(--miod-ciemny);
}

.napiwek-pole {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.napiwek-pole[hidden] {
  display: none;
}

.napiwek-pole label {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--atrament-64);
}

.napiwek-wpis {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}

.napiwek-wpis input {
  width: 100%;
  max-width: 180px;
  min-width: 0;
  min-height: 52px;
  padding: 0 16px;
  border: 1.5px solid var(--linia);
  border-radius: var(--r-m);
  background: var(--karta);
  font-family: var(--font-mono);
  font-size: 20px;
}

.napiwek-wpis input:focus {
  outline: none;
  border-color: var(--miod);
}

.faktura {
  width: 100%;
  margin-top: 14px;
}

.faktura-przelacznik {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--miod-ciemny);
  font-size: 15px;
  font-weight: 700;
}

.faktura-przelacznik svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.faktura-przelacznik[aria-expanded="true"] {
  background: var(--miod-mgla);
}

.faktura-pole {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  text-align: left;
}

.faktura-pole[hidden] {
  display: none;
}

.faktura-pole label {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--atrament-64);
}

.faktura-pole input {
  /* bez tego pole ma szerokosc 20 znakow i przy 280 px rozpychalo cale okno rachunku */
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 0 16px;
  border: 1.5px solid var(--linia);
  border-radius: var(--r-m);
  background: var(--karta);
  font-family: var(--font-mono);
  font-size: 20px;
  letter-spacing: 0.06em;
}

.faktura-pole input:focus {
  outline: none;
  border-color: var(--miod);
}

.faktura-firma {
  min-height: 1.4em;
  font-size: 14px;
  line-height: 1.35;
  color: var(--atrament-80);
}

.faktura-firma[data-stan="ok"] {
  color: var(--chmiel);
  font-weight: 650;
}

.faktura-firma[data-stan="blad"] {
  color: var(--bordo);
  font-weight: 650;
}

.zamowienia-stopka .btn {
  margin-top: 12px;
}

/* status pod tytulem na ekranie potwierdzenia */
.potwierdzenie p.potwierdzenie-status {
  font-size: 15px;
  line-height: 1.3;
  color: var(--miod-ciemny);
  padding: 8px 16px 8px 13px;
}

.potwierdzenie p.potwierdzenie-status[data-status="przyjete"] {
  color: #3f6a2c;
}

.potwierdzenie-status[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .zamowienie-goscia-status i,
  .potwierdzenie-status-znak {
    animation: none;
  }
}

/* ------------------------------------------------- pasek aktualizacji aplikacji */

.aktualizacja {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 18px;
  width: min(760px, calc(100vw - 32px));
  padding: 16px 16px 16px 22px;
  translate: -50% 0;
  border-radius: var(--r-l);
  background: var(--karta);
  color: var(--atrament);
  box-shadow: 0 24px 60px -18px rgba(26, 23, 19, 0.5), 0 0 0 1px rgba(26, 23, 19, 0.06);
  animation: powitanie-wejscie 0.5s var(--ease) both;
}

.aktualizacja-tekst {
  flex: 1;
  display: grid;
  gap: 2px;
  font-size: 14.5px;
  color: var(--atrament-64);
}

.aktualizacja-tekst strong {
  font-size: 16px;
  color: var(--atrament);
}

.aktualizacja-przyciski {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* pasek pokazuje sie tez na ciemnym ekranie zamowien - przycisk "Pozniej" zawsze ciemny na jasnym */
.aktualizacja .btn--cichy {
  border: 1px solid var(--linia);
  background: var(--karta);
  color: var(--atrament-80);
}

@media (max-width: 620px) {
  .aktualizacja {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ------------------------------------------------------- telefon w pionie */

/* Pion byl ukladany pod tablet 800x1280. Na telefonie (aplikacja otwiera sie tam
   pionowo) marginesy, mozaika i obrazki w kaflach byly za duze: tytul wychodzil za
   ekran, a tresc wchodzila na mozaike. Ponizej wersja kompaktowa. */
@media (orientation: portrait) and (max-width: 620px) {
  .powitanie-mozaika {
    height: 34%;
    padding: 0 12px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 46%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 46%, transparent 100%);
  }

  /* tresc lezy na kremowym "arkuszu", ktory miekko przykrywa dol mozaiki - na niskich
     telefonach tresc jest wyzsza niz miejsce pod mozaika */
  .powitanie-tresc {
    padding: 56px 20px 24px;
    background: linear-gradient(180deg, rgba(250, 247, 242, 0) 0, var(--porcelana) 56px);
  }

  .powitanie-znak {
    width: 60px;
    margin-left: -8px;
  }

  .powitanie-wordmark {
    font-size: 30px;
  }

  .powitanie-dopisek {
    font-size: 8.4px;
  }

  .powitanie-krok {
    margin-top: 18px;
  }

  .powitanie-kicker {
    font-size: 12px;
  }

  .powitanie-jezyk-tytul {
    font-size: clamp(26px, 7.6vw, 40px);
  }

  .powitanie-jezyki {
    margin-top: 22px;
    gap: 8px;
  }

  .flaga {
    min-height: 58px;
    font-size: 17px;
  }

  .flaga .flaga-ikona {
    width: 44px;
    height: 44px;
  }

  .powitanie-wezwanie {
    font-size: clamp(30px, 8.8vw, 40px);
  }

  .powitanie-wybory {
    margin-top: 16px;
    gap: 10px;
  }

  .wybor {
    min-height: 0;
    gap: 14px;
    padding: 10px 14px 10px 10px;
    border-radius: 20px;
  }

  .wybor-galeria,
  .wybor-morze {
    width: 76px;
    height: 64px;
    border-radius: 12px;
  }

  .wybor-nazwa {
    font-size: 19px;
  }

  .powitanie-rachunek,
  .powitanie-zmien-jezyk {
    min-height: 44px;
    margin-top: 12px;
  }

  .powitanie-stolik {
    margin-top: 16px;
  }

  /* gospodarz sekcji: ilustracja nad tekstem zamiast waskiej kolumny obok */
  .lada {
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
  }

  .lada-postac {
    min-height: 200px;
  }

  .lada-tekst {
    padding: 16px 18px 20px;
  }

  /* pasek menu: na telefonie same ikony (Rachunek, Gry, flagi), bez dopisku i stolika -
     inaczej przyciski wychodzily poza ekran */
  .pasek-gorny {
    padding: 0 12px;
  }

  .pasek-wordmark {
    font-size: 1.25rem;
  }

  .pasek-wordmark-dopisek,
  .pasek-stolik {
    display: none;
  }

  .pasek-prawa {
    gap: 6px;
  }

  .pasek-gry {
    position: relative;
    width: 46px;
    padding: 0;
    justify-content: center;
  }

  .pasek-gry span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* niski telefon: mozaika ustepuje miejsca tresci */
@media (orientation: portrait) and (max-width: 620px) and (max-height: 720px) {
  .powitanie-mozaika {
    height: 22%;
  }
}

/* ---------------------------------------------------------- tryb testowy */

/* Pasek u gory ekranu na urzadzeniach w trybie testowym (assets/tryb.js) - zeby nikt
   w lokalu nie wzial testowego tabletu za prawdziwy. Nie lapie dotyku. */
html[data-test]::after {
  content: "TRYB TESTOWY";
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 9999;
  translate: -50% 0;
  padding: 3px 14px 4px;
  border-radius: 0 0 10px 10px;
  background: #c1121f;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  pointer-events: none;
}

/* ---------------------------------------------------------- tryb oszczedny */

/* Slabszy tablet: bez rozmycia tla pod oknami (najdrozszy efekt na slabym GPU).
   Reszta "mniej ruchu" jest kopiowana z regul prefers-reduced-motion (kiosk.js). */
html[data-oszczedny] .modal {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(26, 23, 19, 0.55);
}

.serwis-diagnostyka {
  margin: 0 0 10px;
  padding: 12px 14px;
  border-radius: var(--r-s);
  background: var(--panel);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  color: var(--atrament-80);
}

/* ----------------------------------------------- powitanie: male kafle */

/* "Zamow" zostaje dominanta; menu dla dzieci, gry i proces warzenia to rzad mniejszych
   kafli pod nim - kazdy z wlasnym obrazem, ktory sie lekko rusza. */
.wybory-male {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.wybor-maly {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  border: 1.5px solid var(--linia);
  background: var(--karta);
  text-align: left;
  box-shadow: 0 1px 2px rgba(26, 23, 19, 0.05), 0 14px 26px -22px rgba(26, 23, 19, 0.5);
  animation: wybor-wejscie 0.65s var(--sprezyna) both;
  transition: transform 0.16s var(--ease), border-color 0.2s var(--ease);
}

.wybor-maly--dzieci {
  animation-delay: 0.08s;
}

.wybor-maly--gry {
  animation-delay: 0.14s;
}

.wybor-maly--warzenie {
  animation-delay: 0.2s;
}

.wybor-maly:active {
  transform: scale(0.97);
  border-color: var(--miod);
}

.wybor-maly-obraz {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--tlo-ilustracji);
}

/* galeria menu dla dzieci: dania przenikaja sie i lekko przyblizaja */
.galeria-dzieci img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(1.1);
  transition: opacity 0.7s var(--ease), transform 2.8s ease-out;
}

.galeria-dzieci img[data-aktywny] {
  opacity: 1;
  transform: scale(1);
}

/* tytul na srodku pola pod obrazkiem, w poziomie i w pionie - dwu- i trzywierszowe
   tytuly w jednym rzedzie trzymaja wspolna os, a linie lamia sie rowno (balance) */
.wybor-maly-tekst {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 10px 10px 12px;
  text-align: center;
}

.wybor-maly-nazwa {
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 720;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-wrap: balance;
}

/* morze z lodzia z dawnego kafla gier - teraz na cala szerokosc malego kafla */
.wybor-maly .wybor-morze {
  width: 100%;
  height: auto;
  border-radius: 0;
}

.wybor-maly .morze-lodz {
  left: calc(50% - 38%);
  width: 46%;
  height: auto;
  bottom: 10%;
}

.wybor-maly .morze-moneta {
  right: 18%;
  width: 13%;
  height: auto;
}

/* Kafel "Poznaj proces warzenia": trzy ryciny z plakatu przenikaja sie z lekkim
   przyblizeniem; ruch kazdego etapu w procentach ryciny, wiec skaluje sie z kaflem. */
.kafel-klatka {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  opacity: 0;
  transform: scale(1.1);
  transition: opacity 0.7s var(--ease), transform 3.2s ease-out;
}

.kafel-klatka[data-aktywny] {
  opacity: 1;
  transform: scale(1);
}

/* rycina zajmuje dol kafla - nad kominami zostaje miejsce na pare */
.kafel-rycina {
  position: relative;
  height: 80%;
  margin-bottom: 4%;
}

.kafel-klatka--kadz1 .kafel-rycina {
  aspect-ratio: 243 / 353;
}

.kafel-klatka--kadz2 .kafel-rycina {
  aspect-ratio: 240 / 353;
}

.kafel-klatka--tanki .kafel-rycina {
  height: 84%;
  aspect-ratio: 420 / 305;
}

.kafel-rycina > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* para z komina: cieplo-brazowe klebki (bialych nie widac na kremowym tle) */
.kafel-para {
  position: absolute;
  left: 50%;
  top: 4%;
}

.kafel-klatka--kadz2 .kafel-para {
  left: 55%;
}

.kafel-para i {
  position: absolute;
  left: -13px;
  top: -10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(118, 86, 58, 0.5) 0%, rgba(118, 86, 58, 0) 68%);
  opacity: 0;
  animation: kafel-para 2.4s ease-out infinite;
}

.kafel-para i:nth-child(2) {
  animation-delay: 0.6s;
  animation-name: kafel-para-lewo;
}

.kafel-para i:nth-child(3) {
  animation-delay: 1.2s;
}

.kafel-para i:nth-child(4) {
  animation-delay: 1.8s;
  animation-name: kafel-para-lewo;
}

@keyframes kafel-para {
  0% {
    opacity: 0;
    transform: translate(0, 6px) scale(0.4);
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(12px, -34px) scale(1.9);
  }
}

@keyframes kafel-para-lewo {
  0% {
    opacity: 0;
    transform: translate(0, 6px) scale(0.4);
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-10px, -32px) scale(1.8);
  }
}

/* slod sypie sie z klosow do wlazu kadzi zacierno-warzelnej */
.kafel-slod {
  position: absolute;
  left: 86%;
  top: 25%;
}

.kafel-slod i {
  position: absolute;
  width: 7px;
  height: 4px;
  border-radius: 50%;
  background: #8a5a2b;
  opacity: 0;
  animation: kafel-slod 1.6s ease-in infinite;
}

.kafel-slod i:nth-child(2) {
  left: 3px;
  animation-delay: 0.32s;
}

.kafel-slod i:nth-child(3) {
  left: -2px;
  animation-delay: 0.64s;
}

.kafel-slod i:nth-child(4) {
  left: 4px;
  animation-delay: 0.96s;
}

.kafel-slod i:nth-child(5) {
  left: 1px;
  animation-delay: 1.28s;
}

@keyframes kafel-slod {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(0deg);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-10px, 20px) rotate(220deg);
  }
}

/* goraca woda kapie do wlazu kadzi filtracyjnej (wysladzanie) */
.kafel-woda {
  position: absolute;
  left: 27%;
  top: 22%;
}

.kafel-woda i {
  position: absolute;
  width: 2.5px;
  height: 7px;
  border-radius: 2px;
  background: #6fa8cc;
  opacity: 0;
  animation: kafel-woda 0.9s ease-in infinite;
}

.kafel-woda i:nth-child(2) {
  left: 3px;
  animation-delay: 0.22s;
}

.kafel-woda i:nth-child(3) {
  left: -2px;
  animation-delay: 0.45s;
}

.kafel-woda i:nth-child(4) {
  left: 2px;
  animation-delay: 0.67s;
}

@keyframes kafel-woda {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-3px, 18px);
  }
}

/* babelki fermentacji w trzech tankach */
.kafel-babelki i {
  position: absolute;
  bottom: 22%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1.2px solid rgba(118, 86, 58, 0.75);
  opacity: 0;
  animation: kafel-babel 2.2s ease-in infinite;
}

.kafel-babelki i:nth-child(1) { left: 13%; }
.kafel-babelki i:nth-child(2) { left: 20%; animation-delay: 0.7s; }
.kafel-babelki i:nth-child(3) { left: 26%; animation-delay: 1.4s; }
.kafel-babelki i:nth-child(4) { left: 46%; animation-delay: 0.35s; }
.kafel-babelki i:nth-child(5) { left: 53%; animation-delay: 1.05s; }
.kafel-babelki i:nth-child(6) { left: 59%; animation-delay: 1.75s; }
.kafel-babelki i:nth-child(7) { left: 79%; animation-delay: 0.5s; }
.kafel-babelki i:nth-child(8) { left: 86%; animation-delay: 1.2s; }
.kafel-babelki i:nth-child(9) { left: 92%; animation-delay: 1.9s; }

@keyframes kafel-babel {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.5);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(2px, -46px) scale(1.15);
  }
}

/* ----------------------------------------------------- darmowe Wi-Fi */

.wifi-karta {
  position: absolute;
  right: 32px;
  bottom: 32px;
  z-index: 3;
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 14px 16px 16px;
  border-radius: var(--r-l);
  background: var(--karta);
  box-shadow: 0 22px 46px -18px rgba(26, 23, 19, 0.45), 0 0 0 1px rgba(26, 23, 19, 0.06);
  animation: powitanie-wejscie 0.5s var(--ease) 0.35s both;
}

#ekran-powitanie[data-krok="wybor"] .wifi-karta {
  display: flex;
}

.wifi-kod {
  flex: none;
  width: 108px;
  height: 108px;
}

.qr-para {
  display: flex;
  gap: 16px;
}

.qr-pozycja {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 6px;
  width: 152px;
  margin: 0;
  text-align: center;
}

.qr-kod {
  width: 112px;
  height: 112px;
}

.qr-pozycja strong {
  display: block;
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 750;
}

.qr-dane {
  display: block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--atrament-64);
}

.qr-dane b {
  color: var(--atrament);
  font-weight: 600;
}

.wifi-kod--duzy {
  width: 220px;
  height: 220px;
  margin-bottom: 8px;
}

.wifi-tytul {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 750;
}

.wifi-skanuj {
  color: var(--atrament-64);
  font-size: 13px;
  text-align: center;
}

.wifi-dane {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--atrament-64);
}

.wifi-dane strong {
  color: var(--atrament);
  font-weight: 600;
}

/* pigulka Wi-Fi tylko na telefonie - na tablecie jest karta obok mozaiki */
.powitanie-wifi {
  display: none;
}

@media (orientation: portrait) and (min-width: 621px) {
  .wifi-karta {
    top: 24px;
    right: 24px;
    bottom: auto;
  }
}

@media (orientation: portrait) and (max-width: 620px) {
  #ekran-powitanie[data-krok="wybor"] .wifi-karta {
    display: none;
  }

  .powitanie-wifi {
    display: inline-flex;
  }

  .wybory-male {
    gap: 8px;
  }

  .wybor-maly-obraz,
  .wybor-maly .wybor-morze {
    height: 70px;
  }

  .wybor-maly-tekst {
    padding: 8px 9px 10px;
  }

  .wybor-maly-nazwa {
    font-size: 14px;
  }
}

/* ------------------------------------------- ocen nas (po prosbie o rachunek) */

.ocen-nas {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  padding: 14px 18px 14px 14px;
  border-radius: var(--r-l);
  border: 1px solid var(--linia);
  background: var(--porcelana);
  text-align: left;
}

.ocen-kod {
  flex: none;
  width: 116px;
  height: 116px;
}

.ocen-tytul {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 750;
}

.ocen-opis {
  margin-top: 2px;
  color: var(--atrament-64);
  font-size: 14px;
}

.ocen-link {
  display: none;
}

/* telefon: zamiast kodu QR (nie zeskanuje sie go wlasnym aparatem) przycisk do opinii w Google */
html[data-telefon] .ocen-nas {
  flex-wrap: wrap;
}

html[data-telefon] .ocen-nas .ocen-kod {
  display: none;
}

html[data-telefon] .ocen-tekst {
  flex: 1 1 100%;
}

html[data-telefon] .ocen-link {
  display: flex;
  flex: 1 1 100%;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: 999px;
  background: var(--atrament);
  color: var(--porcelana);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

html[data-telefon] .ocen-link:active {
  transform: scale(0.98);
}

/* ----------------------------------------------------- proces warzenia */

/* Plakat browaru na ciemnym tle (tekst plakatu jest jasny). Kamera = transform
   plotna 1931x1091; efekty siedza w pikselach plakatu i ruszaja sie razem z nim. */
#ekran-warzenie {
  overflow: clip;
  background: radial-gradient(120% 90% at 50% 45%, #3a281b 0%, #22160e 72%);
  color: #f7f1e5;
}

.warzenie-scena {
  position: absolute;
  inset: 0;
  cursor: pointer;
}

.warzenie-plotno {
  position: absolute;
  left: 0;
  top: 0;
  width: 1931px;
  height: 1091px;
  transform-origin: 0 0;
  transition: transform 1.6s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}

.warzenie-obraz {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.warzenie-winieta {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(78% 72% at 50% 47%, transparent 52%, rgba(20, 12, 7, 0.78) 100%);
}

.warzenie-pasek {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px 34px 28px;
  /* tekst plakatu pod tytulem gasnie - tytul nie miesza sie z opisem kroku */
  background: linear-gradient(180deg, rgba(34, 22, 14, 0.96) 0%, rgba(34, 22, 14, 0.75) 55%, rgba(34, 22, 14, 0) 100%);
  pointer-events: none;
}

/* to samo pod sterowaniem na dole */
.warzenie-scena::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 130px;
  background: linear-gradient(0deg, rgba(34, 22, 14, 0.92) 0%, rgba(34, 22, 14, 0) 100%);
  pointer-events: none;
}

.warzenie-tytul {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.warzenie-zamknij {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(247, 241, 229, 0.12);
  color: #f7f1e5;
  font-size: 28px;
  line-height: 1;
  pointer-events: auto;
}

/* plansza tytulowa i koncowa */
.warzenie-wstep,
.warzenie-koniec {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: min(640px, calc(100vw - 48px));
  translate: -50% -42%;
  padding: 34px 36px;
  border-radius: var(--r-xl);
  background: rgba(30, 20, 13, 0.84);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.7);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--ease), translate 0.6s var(--ease);
}

#ekran-warzenie[data-krok="0"] .warzenie-wstep,
#ekran-warzenie[data-krok="10"] .warzenie-koniec {
  opacity: 1;
  translate: -50% -50%;
}

#ekran-warzenie[data-krok="10"] .warzenie-koniec {
  pointer-events: auto;
}

.warzenie-wstep-kicker {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f0c46a;
}

.warzenie-wstep h2,
.warzenie-koniec h2 {
  margin: 8px 0 10px;
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 60px);
  font-weight: 780;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

.warzenie-wstep p:last-child,
.warzenie-koniec p {
  color: rgba(247, 241, 229, 0.78);
  font-size: 17px;
}

.warzenie-koniec-przyciski {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.warzenie-koniec .btn--cichy {
  background: transparent;
  border-color: rgba(247, 241, 229, 0.25);
  color: #f7f1e5;
}

/* sterowanie: wstecz, 9 krokow (aktywny wypelnia sie przez czas kroku), pauza, dalej */
.warzenie-sterowanie {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 24px);
  padding: 8px;
  translate: -50% 0;
  border-radius: 999px;
  background: rgba(30, 20, 13, 0.78);
}

.warzenie-strzalka {
  width: 52px;
  height: 52px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(247, 241, 229, 0.1);
  color: #f7f1e5;
}

.warzenie-strzalka svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#warzenie-pauza .ikona-graj {
  display: none;
  fill: currentColor;
}

#ekran-warzenie[data-pauza] #warzenie-pauza .ikona-pauza {
  display: none;
}

#ekran-warzenie[data-pauza] #warzenie-pauza .ikona-graj {
  display: block;
}

.warzenie-kropki {
  display: flex;
  gap: 6px;
}

.w-kropka {
  position: relative;
  isolation: isolate;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(247, 241, 229, 0.1);
  color: rgba(247, 241, 229, 0.7);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  transition: width 0.35s var(--ease), background 0.3s var(--ease);
}

.w-kropka[data-za] {
  background: rgba(240, 196, 106, 0.35);
  color: #f7f1e5;
}

.w-kropka[data-aktywna] {
  width: 64px;
  color: #22160e;
  background: rgba(240, 196, 106, 0.45);
}

/* wypelnienie aktywnej kropki = postep kroku */
.w-kropka[data-aktywna]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #f0c46a;
  transform-origin: 0 50%;
  animation: w-postep var(--czas, 7000ms) linear forwards;
}

#ekran-warzenie[data-pauza] .w-kropka[data-aktywna]::before {
  animation-play-state: paused;
}

@keyframes w-postep {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* --- efekty na rycinie: widoczne tylko w swoim kroku */
.w-para,
.w-sypanie,
.w-babelki,
.w-kufel,
.w-puls {
  position: absolute;
  display: none;
  pointer-events: none;
}

.warzenie-scena[data-krok="1"] [data-kroki~="1"],
.warzenie-scena[data-krok="2"] [data-kroki~="2"],
.warzenie-scena[data-krok="3"] [data-kroki~="3"],
.warzenie-scena[data-krok="4"] [data-kroki~="4"],
.warzenie-scena[data-krok="5"] [data-kroki~="5"],
.warzenie-scena[data-krok="6"] [data-kroki~="6"],
.warzenie-scena[data-krok="7"] [data-kroki~="7"],
.warzenie-scena[data-krok="8"] [data-kroki~="8"],
.warzenie-scena[data-krok="9"] [data-kroki~="9"],
.warzenie-scena[data-krok="10"] [data-kroki~="10"] {
  display: block;
  opacity: 1;
}

/* para z komina kadzi */
.w-para i {
  position: absolute;
  left: -28px;
  top: -34px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 241, 229, 0.6) 0%, rgba(247, 241, 229, 0) 70%);
  filter: blur(4px);
  opacity: 0;
  animation: w-para 3s ease-out infinite;
}

.w-para i:nth-child(even) {
  animation-name: w-para-lewo;
}

@keyframes w-para {
  0% {
    opacity: 0;
    transform: translate(0, 10px) scale(0.35);
  }
  20% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: translate(22px, -160px) scale(1.8);
  }
}

@keyframes w-para-lewo {
  0% {
    opacity: 0;
    transform: translate(0, 10px) scale(0.35);
  }
  20% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translate(-20px, -150px) scale(1.7);
  }
}

/* slod, chmiel i goraca woda wpadaja do wlazu kadzi */
.w-sypanie i {
  position: absolute;
  top: 0;
  width: 8px;
  height: 4px;
  border-radius: 50%;
  background: #e2bf86;
  opacity: 0;
  animation: w-slod 1.9s ease-in infinite;
}

@keyframes w-slod {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(0deg);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-28px, 62px) rotate(240deg);
  }
}

.w-sypanie--chmiel i {
  width: 13px;
  height: 16px;
  border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 40% 35%, #d8b47c, #8a6238);
  animation-name: w-chmiel;
  animation-duration: 2.6s;
}

@keyframes w-chmiel {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(0deg);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-38px, 62px) rotate(170deg);
  }
}

.w-sypanie--woda i {
  width: 4px;
  height: 11px;
  border-radius: 2px;
  background: rgba(168, 214, 245, 0.95);
  animation-name: w-woda;
  animation-duration: 0.9s;
}

@keyframes w-woda {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-6px, 52px);
  }
}

/* brzeczka plynie rurami z plakatu (punkty swiatla wzdluz sciezki) */
.w-rury {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.w-rura {
  fill: none;
  stroke: #f0c46a;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 2 22;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(240, 196, 106, 0.85));
  transition: opacity 0.6s var(--ease);
  animation: w-plynie 0.75s linear infinite;
}

.w-rura--zimna {
  stroke: #b4e2ff;
  filter: drop-shadow(0 0 7px rgba(180, 226, 255, 0.9));
}

@keyframes w-plynie {
  to {
    stroke-dashoffset: -24;
  }
}

/* babelki fermentacji w tankach */
.w-babelki {
  overflow: hidden;
}

.w-babelki i {
  position: absolute;
  bottom: -14px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid rgba(247, 241, 229, 0.8);
  background: rgba(247, 241, 229, 0.14);
  animation: w-babel 3s ease-in infinite;
}

@keyframes w-babel {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.5);
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: translate(7px, -118px) scale(0.85);
  }
  100% {
    opacity: 0;
    transform: translate(-5px, -244px) scale(1.15);
  }
}

/* kufel na koniec - piwo nalewa sie, piana rosnie */
.w-kufel {
  width: 100px;
  height: 180px;
}

.w-kufel svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.w-kufel-szklo {
  fill: rgba(247, 241, 229, 0.06);
  stroke: #f7f1e5;
  stroke-width: 3;
}

.w-kufel-ucho {
  fill: none;
  stroke: #f7f1e5;
  stroke-width: 6;
  stroke-linecap: round;
}

.w-kufel-piwo {
  fill: #e3a63c;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(0);
  animation: w-nalew 3.2s cubic-bezier(0.3, 0.6, 0.4, 1) 0.4s forwards;
}

.w-kufel-piana {
  fill: #fbf3df;
  opacity: 0;
  transform: translateY(150px);
  animation: w-piana 3.2s cubic-bezier(0.3, 0.6, 0.4, 1) 0.4s forwards;
}

@keyframes w-nalew {
  to {
    transform: scaleY(1);
  }
}

.w-kufel-babel {
  fill: rgba(255, 246, 220, 0.85);
  opacity: 0;
  animation: w-kufel-babel 2.4s ease-in 3.4s infinite;
}

.w-kufel-babel:nth-of-type(2) {
  animation-delay: 4s;
}

.w-kufel-babel:nth-of-type(3) {
  animation-delay: 4.7s;
}

.w-kufel-babel:nth-of-type(4) {
  animation-delay: 5.3s;
}

@keyframes w-kufel-babel {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-120px);
  }
}

@keyframes w-piana {
  25% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* pulsujacy pierscien wokol numeru kroku */
.w-puls {
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
  border-radius: 50%;
  border: 3px solid #f0c46a;
  animation: w-puls 1.6s ease-out infinite;
}

@keyframes w-puls {
  from {
    opacity: 0.95;
    transform: scale(0.9);
  }
  to {
    opacity: 0;
    transform: scale(2.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .warzenie-plotno {
    transition: none;
  }

  .w-para,
  .w-sypanie,
  .w-babelki,
  .w-puls {
    display: none !important;
  }

  .w-rura {
    animation: none;
    stroke-dasharray: none;
    opacity: 0.6;
  }
}

@media (max-width: 620px) {
  .warzenie-tytul {
    font-size: 16px;
  }

  .warzenie-sterowanie {
    gap: 6px;
    bottom: 14px;
  }

  .warzenie-strzalka {
    width: 42px;
    height: 42px;
  }

  .w-kropka {
    width: 22px;
    height: 30px;
    font-size: 0;
  }

  .w-kropka[data-aktywna] {
    width: 40px;
  }

  .warzenie-koniec,
  .warzenie-wstep {
    padding: 26px 22px;
  }
}

/* "Start" w pasku menu - powrot do "Co dzis wybierasz?" */
.pasek-start svg {
  width: 22px;
  height: 22px;
}

/* wydluzony czas oczekiwania na kuchnie (ustawiany na odbiorniku): spokojna karta w kolorach
   browaru - informacja, nie alarm; ikona zegara, czas na pierwszym planie, napoje od razu */
.notka-czas {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 12px 18px 12px 12px;
  border-radius: var(--r-l);
  background: var(--miod-mgla);
  box-shadow: inset 0 0 0 1px rgba(199, 123, 2, 0.22);
}

.notka-czas[hidden] {
  display: none;
}

/* "Podajcie razem z daniami z 19:16" - caly wiersz to cel dotyku */
.notka-razem-wybor {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  min-height: 44px;
  padding: 6px 12px;
  border-radius: var(--r-m);
  background: var(--karta);
  box-shadow: 0 0 0 1px rgba(199, 123, 2, 0.28);
  font-size: 14px;
  font-weight: 650;
  color: var(--atrament);
  cursor: pointer;
}

.notka-razem-wybor[hidden] {
  display: none;
}

.notka-razem-wybor input {
  flex: none;
  width: 22px;
  height: 22px;
  accent-color: var(--miod);
}

/* podsumowanie: bieg na znak gosci pod daniami tego biegu */
.notka-razem-wybor.na-znak {
  align-items: flex-start;
  margin: 6px 0 2px;
  padding: 10px 12px;
}

.na-znak input {
  margin-top: 1px;
}

.na-znak-tekst {
  display: grid;
  gap: 2px;
}

.na-znak-opis {
  font-size: 13px;
  font-weight: 500;
  color: var(--atrament-64);
}

/* waski telefon: dluzsza notka bez ikony, tekst na cala szerokosc */
@media (max-width: 520px) {
  .notka-razem .notka-czas-ikona {
    display: none;
  }

  .notka-razem {
    padding-left: 16px;
  }
}

.notka-czas-ikona {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--karta);
  box-shadow: 0 0 0 1px rgba(199, 123, 2, 0.28);
  color: var(--miod-ciemny);
}

.notka-czas-ikona svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notka-czas-tytul {
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 720;
  line-height: 1.2;
  color: var(--atrament);
}

.notka-czas-opis {
  margin-top: 2px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--atrament-64);
}

/* Wezszy ekran (tablet w pionie, maly tablet): pasek menu nie miesci Start, Rachunek
   i Gry z podpisami - zostaja same ikony, inaczej przelacznik jezyka wypada za ekran. */
@media (max-width: 1100px) {
  .pasek-wordmark-dopisek {
    display: none;
  }

  .pasek-gry {
    position: relative;
    width: 48px;
    padding: 0;
    justify-content: center;
  }

  .pasek-gry span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Tablet od 800 do 1100 px (tez Galaxy Tab A11 8,7" w lokalu: 1005x600 i 893x533): ikona nad
   podpisem zamiast samej ikony - sama podkladka nie mowila gosciom, ze to "Zamowienia". */
@media (min-width: 800px) and (max-width: 1100px) {
  .pasek-prawa {
    gap: 6px;
  }

  .pasek-gry {
    flex-direction: column;
    gap: 2px;
    width: auto;
    min-width: 58px;
    height: 54px;
    padding: 5px 9px 4px;
    border-radius: 16px;
  }

  .pasek-gry span {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    font-size: 11.5px;
    line-height: 1.1;
  }
}

/* podpis wykonawcy na powitaniu - jak w stopce browarwyszak.pl (znak pawlun.dev, 17 px) */
.powitanie-stopka {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--atrament-45);
}

.pawlun-znak {
  display: block;
  width: auto;
  height: 17px;
}

/* Niski ekran w poziomie (tablet 1280x800): krok 2 z wiekszym znakiem marki nie miescil
   sie z oddechem - tytul i odstepy troche mniejsze. */
@media (orientation: landscape) and (max-height: 860px) {
  #krok-wybor {
    margin-top: 24px;
  }

  #krok-wybor .powitanie-wezwanie {
    font-size: clamp(36px, 4vw, 52px);
  }

  #krok-wybor .powitanie-wybory {
    margin-top: 20px;
  }

  .powitanie-stolik {
    margin-top: 16px;
  }

  .powitanie-stopka {
    margin-top: 8px;
  }
}

/* Tablet 8,7" w poziomie (1005x600, 893x533): krok 2 mial ok. 800 px wysokosci, wiec
   "Zmien jezyk", stolik i stopka wypadaly pod ekran, a logo nad. Cztery akcje ida
   jednym rzedem pod czterema kafelkami (ikona nad podpisem), stolik do rogu obok logo. */
@media (orientation: landscape) and (max-height: 640px) {
  html:not([data-telefon]) .powitanie-tresc {
    padding-top: 18px;
    padding-bottom: 14px;
  }

  html:not([data-telefon]) .powitanie-znak {
    width: 60px;
    margin-left: -8px;
  }

  html:not([data-telefon]) .powitanie-wordmark {
    font-size: 31px;
  }

  html:not([data-telefon]) .powitanie-stolik {
    position: absolute;
    top: 22px;
    right: 24px;
    margin: 0;
  }

  /* dlugi komunikat "tablet nie ma stolika" nie miesci sie w rogu - zostaje pod trescia */
  html:not([data-telefon]) .powitanie-stolik[data-brak] {
    position: static;
    margin-top: 10px;
  }

  html:not([data-telefon]) #krok-wybor {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 10px;
    margin-top: 12px;
  }

  html:not([data-telefon]) #krok-wybor > * {
    grid-column: 1 / -1;
  }

  html:not([data-telefon]) #krok-wybor .powitanie-wezwanie {
    font-size: 34px;
  }

  html:not([data-telefon]) #krok-wybor .wybor-linia {
    margin-top: 10px;
  }

  html:not([data-telefon]) #krok-wybor .powitanie-wybory {
    gap: 10px;
    margin-top: 14px;
  }

  html:not([data-telefon]) #btn-start-zamow {
    min-height: 0;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  html:not([data-telefon]) #btn-start-zamow .wybor-galeria {
    width: 92px;
    height: 70px;
  }

  html:not([data-telefon]) #btn-start-zamow .wybor-nazwa {
    font-size: 21px;
  }

  html:not([data-telefon]) .wybory-male {
    gap: 10px;
  }

  html:not([data-telefon]) .wybor-maly-tekst {
    padding: 7px 9px 9px;
  }

  /* waskie kafle: dlugie slowa (Kindermenü) dziela sie z myslnikiem zamiast uciekac za krawedz */
  html:not([data-telefon]) .wybor-maly-nazwa,
  html:not([data-telefon]) #krok-wybor > .powitanie-rachunek,
  html:not([data-telefon]) #krok-wybor > .powitanie-zmien-jezyk {
    hyphens: auto;
    overflow-wrap: break-word;
  }

  html:not([data-telefon]) .wybor-maly-nazwa {
    font-size: 14px;
  }

  html:not([data-telefon]) #krok-wybor > .powitanie-rachunek,
  html:not([data-telefon]) #krok-wybor > .powitanie-zmien-jezyk {
    grid-column: auto;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    min-height: 66px;
    margin: 10px 0 0;
    padding: 8px 6px;
    border-radius: 18px;
    font-size: 13px;
    line-height: 1.2;
    text-align: center;
  }

  html:not([data-telefon]) #krok-wybor > .powitanie-zmien-jezyk .flaga-ikona {
    width: 24px;
    height: 24px;
  }

  /* flaga mowi, jaki jezyk jest teraz - zostaje sam podpis "Zmien jezyk" */
  html:not([data-telefon]) #powitanie-jezyk-nazwa {
    display: none;
  }

  html:not([data-telefon]) .powitanie-zmien-etykieta::before {
    content: none;
  }

  html:not([data-telefon]) .powitanie-stopka {
    margin-top: 10px;
  }
}

/* 893x533 (skala 1,5): kolumna ma 378 px - "What would you like to do?" lamal sie na dwie linie */
@media (orientation: landscape) and (max-height: 560px) {
  html:not([data-telefon]) .powitanie-tresc {
    padding-top: 12px;
    padding-bottom: 10px;
  }

  html:not([data-telefon]) #krok-wybor .powitanie-wezwanie {
    font-size: 30px;
  }
}

/* ------------------------------------------------- telefon goscia (QR) */

/* Telefon goscia (html[data-telefon], kiosk.js) sluzy do zamowienia przy stoliku bez
   tabletu: od razu karta, w pasku trzy akcje z podpisami i jezyk, stolik pod znakiem.
   Bez powitania, gier, postaci, przewijaka i filmow. Tablet zostaje bez zmian. */
.jezyk-telefon {
  display: none;
}

/* Telefon rozpoznany juz w <head>: powitanie tabletu (flagi, cyrylica) nie miga przed karta.
   Do pierwszego ekranu kreci sie wskaznik - pokazuje sie dopiero po 0,4 s, szybki start go nie widzi. */
html[data-telefon] #ekran-powitanie {
  display: none;
}

html[data-telefon]:not(:has(.ekran[data-aktywny]:not(#ekran-powitanie))) body::after {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 3px solid var(--miod-mgla);
  border-top-color: var(--miod);
  animation: ladowanie-obrot 0.9s linear infinite, ladowanie-pojaw 0.2s ease 0.4s both;
}

@keyframes ladowanie-obrot {
  to {
    rotate: 360deg;
  }
}

@keyframes ladowanie-pojaw {
  from {
    opacity: 0;
  }
}

html[data-telefon] .pasek-start,
html[data-telefon] #btn-pasek-gry,
html[data-telefon] .przelacznik-jezyka,
html[data-telefon] .przewijak,
html[data-telefon] #maskotka,
html[data-telefon] .propozycja {
  display: none !important;
}

/* Telefon: u gory znak, stolik i wyrazny przycisk jezyka; Kelner / Zamowienia / Rachunek w stalym
   pasku na dole (jak w aplikacjach). Bez napisow obok siebie w jednym rzedzie - telefon z powiekszonym
   tekstem systemu (Chrome powieksza wtedy cala strone) ma nawet 280 px szerokosci i nic nie moze wejsc
   na znak ani wyjsc za ekran. */
html[data-telefon] {
  --nav-telefonu: calc(62px + env(safe-area-inset-bottom));
}

html[data-telefon] .pasek-gorny {
  position: relative;
  height: 64px;
  gap: 10px;
  padding: 0 12px 0 16px;
  border-bottom: 1px solid var(--linia);
}

html[data-telefon] .pasek-logo {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 0;
}

html[data-telefon] .pasek-wordmark {
  font-size: 1.12rem;
  white-space: nowrap;
}

html[data-telefon] .pasek-wordmark-dopisek {
  display: none;
}

/* stolik pod znakiem - gosc widzi, do ktorego stolika zamawia */
html[data-telefon] .pasek-stolik {
  display: flex;
  position: absolute;
  bottom: 11px;
  left: 16px;
  height: auto;
  max-width: calc(100% - 150px);
  padding: 0;
  border: 0;
  background: none;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
}

html[data-telefon] .pasek-logo {
  align-self: flex-start;
  padding-top: 12px;
}

html[data-telefon] .pasek-prawa {
  gap: 0;
}

/* dolny pasek: trzy akcje po rowno, ikona nad krotkim podpisem */
html[data-telefon] .pasek-rachunek {
  position: fixed;
  bottom: 0;
  z-index: 35;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  width: 33.334%;
  height: var(--nav-telefonu);
  padding: 0 4px env(safe-area-inset-bottom);
  border: 0;
  border-top: 1px solid var(--linia);
  border-radius: 0;
  /* bez backdrop-filter (rozmycie liczylo sie co klatke przewijania karty) i dlatego w pelni
     kryjace: przy 96 % spod paska przeswitywalby ostry tekst karty */
  background: var(--porcelana);
  color: var(--miod-ciemny);
}

html[data-telefon] #btn-pasek-kelner {
  left: 0;
}

html[data-telefon] #btn-pasek-zamowienia {
  left: 33.333%;
}

html[data-telefon] #btn-pasek-rachunek {
  left: 66.666%;
}

html[data-telefon] .pasek-rachunek:active {
  background: var(--miod-mgla);
}

html[data-telefon] .pasek-rachunek svg {
  width: 24px;
  height: 24px;
}

html[data-telefon] .pasek-rachunek span {
  position: static;
  width: auto;
  max-width: 100%;
  height: auto;
  overflow: hidden;
  clip-path: none;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--atrament-80);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* jezyk: flaga, kod i strzalka - od razu widac, ze tu sie zmienia jezyk; pod spodem przezroczysta
   natywna lista, wiec telefon pokazuje swoj wybor */
html[data-telefon] .jezyk-telefon {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 6px;
  height: 42px;
  padding: 0 10px 0 5px;
  border: 1px solid var(--linia);
  border-radius: 999px;
  background: var(--karta);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--atrament-80);
}

html[data-telefon] .jezyk-telefon .flaga-ikona {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(26, 23, 19, 0.14);
}

html[data-telefon] .jezyk-telefon .flaga-ikona svg {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
}

html[data-telefon] .jezyk-telefon > svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html[data-telefon] .jezyk-telefon select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  font-size: 16px;
  cursor: pointer;
}

html[data-telefon] .jezyk-telefon:focus-within {
  box-shadow: 0 0 0 2px var(--miod);
}

/* kategorie: chipy tuz pod paskiem, bez rezerwy na przewijak po prawej */
html[data-telefon] .kategorie-tor {
  padding: 6px 12px 10px;
}

html[data-telefon] .kategoria {
  min-height: 42px;
  padding: 0 13px;
  font-size: 14px;
}

html[data-telefon] .kategorie-rzad .kategorie-tor {
  padding-left: 4px;
}

html[data-telefon] .szukaj-start {
  height: 42px;
  margin: 6px 0 0 12px;
  padding: 0 14px 0 12px;
  font-size: 14px;
}

html[data-telefon] .szukaj-pasek {
  inset: 6px 12px 10px;
}

html[data-telefon] .szukaj-pole,
html[data-telefon] .szukaj-zamknij {
  height: 42px;
}

html[data-telefon] .szukaj-zamknij {
  padding: 0 10px;
}

/* spis kategorii: dwie kolumny, 18 kategorii miesci sie na niecalych dwoch ekranach */
html[data-telefon] .spis-siatka {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

html[data-telefon] .spis-kafel {
  min-height: 62px;
  padding: 10px 14px;
}

html[data-telefon] .spis-nazwa {
  font-size: 14px;
}

html[data-telefon] .wyniki-naglowek h2 {
  font-size: 20px;
}

/* bardzo waski ekran (powiekszony tekst systemu): sama lupa, napis zostaje dla czytnika */
@media (max-width: 350px) {
  html[data-telefon] .szukaj-start {
    justify-content: center;
    width: 42px;
    padding: 0;
  }

  html[data-telefon] .szukaj-start span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

html[data-telefon] .tresc {
  padding: 16px 12px calc(var(--koszyk-wys) + var(--nav-telefonu) + 28px);
}

/* karty dan: gesciej, zeby na ekranie miescily sie dwie-trzy pozycje */
html[data-telefon] .danie {
  --foto-szer: 34%;
  gap: 0 12px;
  min-height: 0;
  padding-left: 16px;
}

html[data-telefon] .danie-cialo {
  padding-top: 14px;
}

html[data-telefon] .danie-nazwa {
  font-size: 17px;
}

html[data-telefon] .danie-opis {
  font-size: 13px;
}

html[data-telefon] .danie-stopka {
  padding: 10px 0 12px;
}

html[data-telefon] .danie-dodaj {
  width: 46px;
  height: 46px;
}

/* gospodarz sekcji bez postaci: polecenie w jednym pasku zamiast duzej karty */
html[data-telefon] .lada {
  padding: 0;
  border-radius: var(--r-m);
}

html[data-telefon] .lada-tekst {
  padding: 14px 16px 16px;
}

html[data-telefon] .lada-tytul {
  font-size: 19px;
}

html[data-telefon] .lada-opis {
  display: none;
}

html[data-telefon] .lada-polecenie {
  margin-top: 10px;
  max-width: 100%;
}

html[data-telefon] .lada-polecenie-nazwa {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* pigulka koszyka na cala szerokosc: liczba i suma, "Przejdz dalej" - bez lamania */
html[data-telefon] .pasek-koszyka {
  right: 12px;
  bottom: calc(var(--nav-telefonu) + 10px);
  left: 12px;
  justify-content: space-between;
  height: 60px;
  padding: 0 7px 0 16px;
}

html[data-telefon] #btn-pokaz-koszyk {
  display: none;
}

html[data-telefon] #btn-do-podsumowania {
  min-height: 46px;
  padding: 0 20px;
  white-space: nowrap;
}

/* podsumowanie: propozycja kelnera bez postaci, oferty na cala szerokosc */
html[data-telefon] .kelner-podsumowanie {
  margin-top: 4px;
  padding: 0 14px 4px;
  -webkit-mask-image: none;
  mask-image: none;
}

html[data-telefon] .kelner-tresc {
  padding-top: 14px;
}

/* jedno danie w jednym wierszu: "Do tego?" + oferta. Pelny blok z trzema daniami goscie pomijali */
html[data-telefon] .kelner-podsumowanie[data-zwiezle] {
  margin: 6px 0 2px;
  padding: 0;
  border: 0;
  /* zaokraglenie panelu ucinalo rogi oferty przy prawej krawedzi */
  border-radius: 0;
  background: none;
  overflow: visible;
}

html[data-telefon] .kelner-podsumowanie[data-zwiezle] .kelner-tresc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
}

html[data-telefon] .kelner-podsumowanie[data-zwiezle] .kelner-tytul {
  display: none;
}

html[data-telefon] .kelner-podsumowanie[data-zwiezle] .kelner-opis {
  flex: none;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--atrament-64);
}

html[data-telefon] .kelner-podsumowanie[data-zwiezle] .kelner-oferty {
  flex: 1;
  min-width: 0;
  margin: 0;
}

html[data-telefon] .kelner-podsumowanie[data-zwiezle] .oferta {
  grid-template-columns: 36px minmax(0, 1fr) 32px;
  gap: 10px;
  min-height: 50px;
  padding: 5px 6px 5px 5px;
  border-radius: 12px;
}

html[data-telefon] .kelner-podsumowanie[data-zwiezle] .oferta-foto {
  width: 36px;
  height: 36px;
  border-radius: 9px;
}

html[data-telefon] .kelner-podsumowanie[data-zwiezle] .oferta-nazwa {
  font-size: 13.5px;
  -webkit-line-clamp: 1;
}

html[data-telefon] .kelner-podsumowanie[data-zwiezle] .oferta-cena {
  margin-top: 0;
  font-size: 12px;
}

html[data-telefon] .kelner-podsumowanie[data-zwiezle] .oferta-plus {
  width: 32px;
  height: 32px;
}

html[data-telefon] .kelner-podsumowanie[data-zwiezle] .oferta-plus svg {
  width: 15px;
  height: 15px;
}

/* przyciski w stopkach okien (koszyk): dwa obok siebie bez lamania napisow */
html[data-telefon] .modal-stopka .btn {
  flex: 1;
  min-width: 0;
  padding: 0 14px;
  white-space: nowrap;
}

/* podsumowanie: karta na cala szerokosc, "Zamawiam" przyklejony do dolu ekranu */
html[data-telefon] #ekran-podsumowanie {
  padding: 12px 10px 0;
}

html[data-telefon] .karta-podsumowania {
  margin: 0 auto;
  padding: 22px 18px 0;
  border-radius: var(--r-l) var(--r-l) 0 0;
  border-bottom: 0;
}

html[data-telefon] .karta-podsumowania h2 {
  font-size: 26px;
  line-height: 1.15;
}

html[data-telefon] .przyciski-rzad {
  position: sticky;
  bottom: 0;
  z-index: 2;
  gap: 10px;
  margin: 18px -18px 0;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linia);
  background: var(--karta);
}

html[data-telefon] .przyciski-rzad .btn {
  min-width: 0;
  padding: 0 14px;
  white-space: nowrap;
}

/* krotkie zamowienie: karta do dolu ekranu, przyciski na dole zamiast w polowie */
html[data-telefon] .karta-podsumowania {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 12px);
}

html[data-telefon] .przyciski-rzad {
  margin-top: auto;
}

html[data-telefon] .karta-podsumowania > :nth-last-child(2) {
  margin-bottom: 18px;
}

/* ------------------------------------------------------------ fotobudka */

/* Wspolne zdjecie stolika (assets/fotobudka.js): po lewej karta 4:5 z podgladem kamery pod ramka
   browaru (ta sama ramka idzie na zdjecie), po prawej migawka, a po zdjeciu kod QR. Tylko tablet. */
html:not([data-fotobudka]) .wybor-maly--fotobudka,
html:not([data-fotobudka]) .potwierdzenie-foto {
  display: none;
}

/* cztery kafle w jednym rzedzie - wysokosc powitania sie nie zmienia */
html[data-fotobudka] .wybory-male {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

/* lokal bez czesci rozrywki (site.config.json -> funkcje, zastosujFunkcje w kiosk.js):
   widoczne kafle dziela rzad po rowno */
html .wybory-male[data-kafle="1"] {
  grid-template-columns: minmax(0, 1fr);
}

html .wybory-male[data-kafle="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html .wybory-male[data-kafle="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

html[data-fotobudka] .wybor-maly-tekst {
  padding: 9px 10px 11px;
}

html[data-fotobudka] .wybor-maly-nazwa {
  font-size: 15px;
}

.kafel-fotobudka img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* po zamowieniu: zaproszenie do zdjecia pod "Zamow cos jeszcze" */
.potwierdzenie-foto {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 22px 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(199, 123, 2, 0.35);
  background: var(--miod-mgla);
  color: var(--miod-ciemny);
  font-size: 15.5px;
  font-weight: 700;
}

.potwierdzenie-foto svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#ekran-fotobudka {
  background: radial-gradient(90% 70% at 30% 40%, #fff8ec 0%, var(--porcelana) 70%);
}

.fb-uklad {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  height: 100%;
  padding: 32px clamp(28px, 4vw, 56px);
}

.fb-scena {
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 0;
}

/* wymiary wprost (4:5 z wysokosci ekranu) - WebView tabletu zle liczyl aspect-ratio
   z procentowej wysokosci w kolumnie "auto" i karta wychodzila poza ekran */
.fb-karta {
  --fb-wys: min(740px, calc(100vh - 64px));
  position: relative;
  width: calc(var(--fb-wys) * 0.8);
  height: var(--fb-wys);
  border-radius: 18px;
  overflow: hidden;
  background: #2a241d;
  box-shadow: 0 1px 2px rgba(26, 23, 19, 0.08), 0 34px 60px -32px rgba(26, 23, 19, 0.6);
}

/* okno zdjecia z ramki: 40/1080, 40/1350, 1000 x 1000 - podglad jak w lustrze (selfie) */
#fb-wideo {
  position: absolute;
  top: 2.963%;
  left: 3.7037%;
  width: 92.5926%;
  height: 74.0741%;
  border-radius: 2.78% / 2.22%;
  object-fit: cover;
  transform: scaleX(-1);
  background: #2a241d;
}

#fb-ramka,
#fb-wynik {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#fb-wynik[hidden] {
  display: none;
}

.fb-karta[data-zdjecie] #fb-wideo,
.fb-karta[data-zdjecie] #fb-ramka {
  visibility: hidden;
}

.fb-odliczanie {
  position: absolute;
  top: 38%;
  left: 50%;
  translate: -50% -50%;
  font-family: var(--font-display);
  font-size: clamp(130px, 24vh, 230px);
  font-weight: 800;
  line-height: 1;
  color: #fff;
  text-shadow: 0 8px 34px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
}

.fb-odliczanie[data-widoczne] {
  opacity: 1;
}

.fb-odliczanie[data-bije] {
  animation: fb-bije 1s var(--ease) both;
}

@keyframes fb-bije {
  0% {
    opacity: 0;
    transform: scale(1.45);
  }
  14% {
    opacity: 1;
    transform: scale(1);
  }
  78% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(0.86);
  }
}

.fb-usmiech {
  position: absolute;
  top: 56%;
  right: 0;
  left: 0;
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 760;
  text-align: center;
  color: #fff;
  text-shadow: 0 4px 22px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.fb-blysk {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}

.fb-blysk[data-blysk] {
  animation: fb-blysk 0.5s ease-out;
}

@keyframes fb-blysk {
  0% {
    opacity: 0;
  }
  12% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
  }
}

/* "Wroc" u gory, krok wysrodkowany w reszcie wysokosci - na niskim ekranie nic na siebie nie wchodzi */
.fb-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  max-width: 470px;
}

.fb-wroc {
  align-self: flex-start;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 0 18px 0 10px;
  border: 1px solid var(--linia);
  border-radius: 999px;
  background: var(--karta);
  font-size: 15px;
  font-weight: 650;
  color: var(--atrament-80);
}

.fb-wroc svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fb-krok {
  display: grid;
  justify-items: start;
  gap: 12px;
  margin: auto 0;
  padding: 16px 0;
}

.fb-krok[hidden] {
  display: none;
}

.fb-kicker {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--miod-ciemny);
}

.fb-krok h2 {
  font-family: var(--font-display);
  font-size: clamp(34px, 3.6vw, 50px);
  font-weight: 780;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.fb-opis {
  max-width: 34ch;
  font-size: 18px;
  line-height: 1.45;
  color: var(--atrament-80);
}

/* migawka: miodowy krazek w bialym pierscieniu, jak spust aparatu */
.fb-migawka {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: 14px;
  padding: 9px 32px 9px 9px;
  border-radius: 999px;
  background: var(--atrament);
  color: var(--porcelana);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 750;
  box-shadow: 0 20px 38px -20px rgba(26, 23, 19, 0.75);
  transition: transform 0.15s var(--ease), opacity 0.2s ease;
}

.fb-migawka:active {
  transform: scale(0.96);
}

.fb-migawka:disabled {
  opacity: 0.4;
}

.fb-migawka-kolo {
  width: 74px;
  height: 74px;
  border: 5px solid var(--porcelana);
  border-radius: 50%;
  background: var(--miod);
  box-shadow: 0 0 0 3px var(--miod);
}

.fb-blad {
  max-width: 36ch;
  padding: 10px 14px;
  border-radius: var(--r-m);
  background: #fbeceb;
  color: #7e2d26;
  font-weight: 600;
}

.fb-blad[hidden] {
  display: none;
}

.fb-qr {
  width: 236px;
  aspect-ratio: 1;
  margin: 6px 0;
  padding: 14px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--linia), 0 18px 36px -22px rgba(26, 23, 19, 0.5);
}

.fb-qr svg {
  display: block;
  width: 100%;
  height: 100%;
}

.fb-qr[data-czeka] {
  background: linear-gradient(90deg, #f3ece1 25%, #fbf6ee 50%, #f3ece1 75%) 0 0 / 200% 100%;
  animation: fb-czeka 1.2s linear infinite;
}

@keyframes fb-czeka {
  to {
    background-position: -200% 0;
  }
}

.fb-prywatnosc {
  max-width: 40ch;
  font-size: 13.5px;
  color: var(--atrament-64);
}

.fb-przyciski {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}

/* niski ekran (male tablety): mniejszy kod QR i tytul */
@media (max-height: 700px) {
  .fb-krok {
    gap: 8px;
  }

  .fb-krok h2 {
    font-size: 30px;
  }

  .fb-opis {
    font-size: 16px;
  }

  .fb-qr {
    width: 170px;
    padding: 10px;
  }
}

.fb-przyciski .btn {
  min-width: 132px;
  padding: 0 22px;
}

@media (max-height: 700px) {
  .fb-przyciski .btn {
    min-width: 0;
    min-height: 48px;
    padding: 0 18px;
  }
}

/* tablet w pionie: karta nad panelem */
@media (orientation: portrait) {
  .fb-uklad {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    padding-top: 80px;
  }

  /* pod karta panel (napis, opis, przyciski) ma ok. 300 px - na 8,7" (600x1005, 533x893)
     przy "100vh - 360px" karta zachodzila na przycisk Wroc */
  .fb-karta {
    --fb-wys: min(650px, calc(100vh - 460px), calc((100vw - 56px) * 1.25));
  }

  .fb-panel {
    height: auto;
    max-width: none;
  }
}

/* waski telefon (np. powiekszony tekst systemu): dlugie slowa w nazwach dan sie dziela,
   zdjecie dania troche wezsze, etykieta polecenia w jednej linii */
html[data-telefon] .danie-nazwa,
html[data-telefon] .danie-opis {
  overflow-wrap: anywhere;
  hyphens: auto;
}

html[data-telefon] .lada-polecenie-etykieta {
  white-space: nowrap;
}

@media (max-width: 360px) {
  html[data-telefon] .danie {
    --foto-szer: 30%;
    padding-left: 13px;
  }

  html[data-telefon] .danie-nazwa {
    font-size: 15.5px;
  }

  html[data-telefon] .lada-polecenie {
    padding: 0 12px 0 14px;
    font-size: 14px;
  }

  html[data-telefon] .lada-polecenie-etykieta {
    display: none;
  }

  html[data-telefon] .kategoria {
    padding: 0 10px;
    font-size: 13.5px;
  }
}

/* jasna karta zawsze - telefony z wymuszonym trybem ciemnym (Chrome, Samsung Internet)
   nie odwracaja kolorow ilustracji i tla */
:root {
  color-scheme: only light;
}

/* koszyk na telefonie: nazwa dania na cala szerokosc obok ceny, licznik w osobnym rzedzie -
   wczesniej licznik dzielil kolumne z cena i nazwa miala na waskim ekranie kilkadziesiat px */
html[data-telefon] .koszyk-pozycja,
html[data-telefon] .koszyk-pozycja:not([data-ruchoma]) {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: none;
  gap: 2px 12px;
  padding: 12px 12px 12px 14px;
}

html[data-telefon] .koszyk-chwyt-miejsce {
  display: none;
}

html[data-telefon] .koszyk-pozycja-nazwa {
  grid-area: 1 / 1 / 2 / 2;
  font-size: 16px;
  overflow-wrap: anywhere;
}

html[data-telefon] .koszyk-pozycja-cena {
  grid-area: 1 / 2 / 2 / 3;
  white-space: nowrap;
}

html[data-telefon] .koszyk-pozycja-uwaga {
  grid-area: 2 / 1 / 3 / 3;
}

html[data-telefon] .koszyk-pozycja-detal {
  grid-area: 3 / 1 / 4 / 2;
  align-self: center;
}

html[data-telefon] .koszyk-pozycja-sterowanie {
  grid-area: 3 / 1 / 4 / 3;
  justify-self: end;
  margin-top: 6px;
}

/* przyciski w stopkach: na waskim telefonie napis moze przejsc do drugiej linii, a na bardzo
   waskim przyciski staja jeden nad drugim (glowny na gorze) */
@media (max-width: 380px) {
  html[data-telefon] .modal-stopka .btn,
  html[data-telefon] .przyciski-rzad .btn,
  html[data-telefon] #btn-dodaj {
    padding: 6px 12px;
    font-size: 14.5px;
    line-height: 1.15;
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 330px) {
  html[data-telefon] #modal-koszyk .modal-stopka,
  html[data-telefon] .przyciski-rzad {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  html[data-telefon] #modal-koszyk .modal-stopka .btn,
  html[data-telefon] .przyciski-rzad .btn {
    min-height: 50px;
  }
}

/* pole uwag: 16 px, inaczej iPhone powieksza strone przy pisaniu */
html[data-telefon] .pole-uwag {
  font-size: 16px;
}

/* telefon poziomo: zdjecie dania z lewej, opis i wybory z prawej - obok siebie zamiast jedno
   pod drugim; poza tym marginesy na wyciecie ekranu (notch) po bokach */
@media (orientation: landscape) and (max-height: 500px) {
  html[data-telefon] #modal-pozycja .modal-scena {
    flex-direction: row;
  }

  html[data-telefon] #modal-pozycja .modal-figura {
    width: 36%;
    height: auto;
    margin: 4px 0 10px 20px;
  }

  html[data-telefon] #modal-pozycja .modal-przewijane {
    flex: 1;
  }

  html[data-telefon] #modal-pozycja .modal-zamknij {
    top: 10px;
    right: 10px;
    width: 42px;
    height: 42px;
  }

  html[data-telefon] .modal {
    padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  }

  html[data-telefon] .modal-panel {
    max-height: calc(100dvh - 20px);
  }

  html[data-telefon] .pasek-gorny {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }

  html[data-telefon] .pasek-stolik {
    left: max(16px, env(safe-area-inset-left));
  }

  html[data-telefon] .tresc {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
}

/* okna kelnera, rachunku, obecnosci i Wi-Fi: na niskim ekranie (telefon poziomo) tresc sie
   przewija zamiast ucinac opcje u dolu; portret kelnera ustepuje miejsca */
.rachunek-tresc {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (orientation: landscape) and (max-height: 640px) {
  .rachunek-tresc {
    gap: 6px;
    padding: 24px 28px 22px;
  }

  /* .rachunek-tresc: wyzej w pliku niz jawna wysokosc portretu (132 px) dla waskich telefonow */
  .rachunek-tresc .rachunek-portret {
    width: 76px;
    height: 76px;
    margin-bottom: 4px;
  }

  .napiwek {
    margin-top: 10px;
  }

  .rachunek-opcje {
    margin-top: 12px;
  }

  /* ikona obok napisu - polowa wysokosci */
  .rachunek-opcja {
    grid-auto-flow: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 14px 12px;
    font-size: 19px;
  }

  .rachunek-opcja svg {
    width: 34px;
    height: 34px;
  }

  .faktura {
    margin-top: 6px;
  }
}

@media (max-height: 520px) {
  .rachunek-portret {
    display: none;
  }

  .rachunek-tresc {
    padding: 22px 24px 20px;
  }

  .rachunek-opcje {
    margin-top: 10px;
  }

  .rachunek-opcja {
    padding: 14px 10px 12px;
  }
}

/* "Zamowienie wyslane": wysrodkowane, a gdy ekran za niski - przewijane od gory */
#ekran-potwierdzenie {
  justify-content: flex-start;
  overflow-y: auto;
}

#ekran-potwierdzenie .potwierdzenie {
  margin: auto;
}

/* 8,7" w poziomie (600 i 533 wysokosci): scena i odstepy mniejsze - "Zamow cos jeszcze"
   i "Zrobcie wspolne zdjecie" mieszcza sie na ekranie bez przewijania */
@media (orientation: landscape) and (max-height: 640px) {
  #ekran-potwierdzenie {
    padding: 24px 28px;
  }

  #ekran-potwierdzenie .potwierdzenie {
    gap: 12px;
  }

  .potwierdzenie-scena[data-wideo] {
    width: min(260px, 40vw);
  }
}

@media (max-height: 520px) {
  #ekran-potwierdzenie {
    padding: 20px 28px;
  }

  #ekran-potwierdzenie .potwierdzenie {
    gap: 10px;
  }

  .potwierdzenie-scena[data-wideo] {
    width: min(210px, 40vw);
  }
}

/* podsumowanie na telefonie: karta rosnie z trescia i ekran sie przewija - wczesniej kolumna ekranu
   sciskala karte i propozycja kelnera pokazywala jedna oferte */
html[data-telefon] .karta-podsumowania,
html[data-telefon] .karta-podsumowania > * {
  flex-shrink: 0;
}

/* "Twoje zamowienia" na telefonie: cale okno przewija sie jako jedna lista (z naglowkiem i suma),
   zamiast sciskac liste zamowien miedzy nimi do paska */
html[data-telefon] .zamowienia-tresc {
  max-height: min(90dvh, 820px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

html[data-telefon] .zamowienia-lista {
  flex: none;
  overflow: visible;
}

html[data-telefon] .zamowienia-tresc h2 {
  padding-right: 52px;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------- quiz stolikow (tablet) */

/* Quiz w jasnej karcie browaru: duzy, czytelny tekst do czytania calym stolikiem, cztery
   odpowiedzi w kolorach Wyszaka (miod, bordo, chmiel, atrament), dobra odpowiedz na zielono. */
#ekran-quiz {
  background: radial-gradient(120% 70% at 50% -10%, rgba(248, 236, 214, 0.9), transparent 60%), var(--porcelana);
}

.quiz-pasek {
  flex: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  height: var(--pasek-wys);
  padding: 0 24px;
}

.quiz-pasek .pasek-gry {
  justify-self: start;
}

.quiz-tytul {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 760;
  letter-spacing: -0.015em;
}

.quiz-tytul svg,
.quiz-pigulka-znak svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quiz-tytul svg {
  color: var(--miod);
}

.quiz-druzyna {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--linia);
  background: var(--karta);
  font-size: 15px;
  font-weight: 700;
}

.quiz-druzyna[hidden] {
  display: none;
}

#quiz-druzyna-nazwa {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#quiz-druzyna-punkty {
  flex: none;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--miod-ciemny);
}

.quiz-pauza {
  display: none;
  margin: 0 24px;
  padding: 10px 16px;
  border-radius: var(--r-m);
  background: var(--bordo);
  color: var(--porcelana);
  font-size: 15px;
  font-weight: 650;
  text-align: center;
}

#ekran-quiz[data-pauza] .quiz-pauza {
  display: block;
}

.quiz-tresc {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  place-items: center;
  padding: 12px 32px 32px;
}

/* karty: zaproszenie, odliczanie do startu, wyniki koncowe */
.quiz-karta {
  width: min(640px, 100%);
  padding: 34px 40px 36px;
  border-radius: var(--r-xl);
  background: var(--karta);
  box-shadow: 0 1px 0 rgba(26, 23, 19, 0.04), 0 18px 48px rgba(26, 23, 19, 0.08);
  text-align: center;
}

.quiz-kicker {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--miod-ciemny);
}

.quiz-naglowek {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 780;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.quiz-opis {
  margin-top: 12px;
  font-size: 16.5px;
  line-height: 1.45;
  color: var(--atrament-64);
}

.quiz-jezyki {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}

.quiz-jezyki button {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  background: none;
  opacity: 0.6;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.quiz-jezyki button[aria-pressed="true"] {
  border-color: var(--miod);
  opacity: 1;
}

.quiz-jezyki svg {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.quiz-tematy {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  list-style: none;
}

.quiz-tematy li {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--panel);
  font-size: 13.5px;
  font-weight: 650;
}

.quiz-start {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--miod-ciemny);
  font-variant-numeric: tabular-nums;
}

.quiz-nagroda {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 10px 18px 10px 12px;
  border-radius: 999px;
  background: var(--miod-mgla);
  box-shadow: inset 0 0 0 1px rgba(199, 123, 2, 0.22);
  font-size: 15px;
  font-weight: 650;
  text-align: left;
}

.quiz-nagroda svg,
.quiz-losuj svg {
  flex: none;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--miod-ciemny);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quiz-nazwa {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin-top: 22px;
  padding: 18px 20px 14px;
  border-radius: var(--r-l);
  background: var(--porcelana);
  box-shadow: inset 0 0 0 1px var(--linia);
}

.quiz-nazwa-etykieta {
  font-size: 13px;
  font-weight: 600;
  color: var(--atrament-64);
}

.quiz-nazwa-tekst {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 780;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.quiz-losuj {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: none;
  border-radius: 999px;
  background: none;
  font-size: 14.5px;
  font-weight: 650;
  color: var(--miod-ciemny);
}

.quiz-akcje {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.quiz-akcje .btn {
  min-width: 160px;
}

/* odliczanie do startu */
.quiz-odliczanie {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 104px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.quiz-druzyna-duza {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 760;
}

.quiz-licznik {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--atrament-64);
}

.quiz-zasady {
  display: grid;
  gap: 10px;
  margin: 22px auto 0;
  max-width: 460px;
  list-style: none;
  text-align: left;
}

.quiz-zasady li {
  position: relative;
  padding-left: 26px;
  font-size: 15.5px;
  line-height: 1.4;
}

.quiz-zasady li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.45em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--miod);
}

.quiz-zapisy .btn {
  margin-top: 26px;
}

/* runda: pytanie i dobra odpowiedz */
.quiz-runda {
  width: min(1080px, 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.quiz-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.quiz-numer {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--miod-ciemny);
}

.quiz-temat {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--panel);
  font-size: 13px;
  font-weight: 650;
}

.quiz-temat[hidden] {
  display: none;
}

.quiz-sekundy {
  margin-left: auto;
  min-width: 2ch;
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  text-align: right;
  font-variant-numeric: tabular-nums;
  transition: color 0.2s ease;
}

.quiz-sekundy[data-malo] {
  color: var(--bordo);
}

.quiz-czas {
  height: 8px;
  border-radius: 999px;
  background: var(--panel);
  overflow: hidden;
}

.quiz-czas span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--miod);
  transform-origin: left center;
  transition: transform 0.25s linear;
}

.quiz-runda[data-faza="wynik"] .quiz-czas span {
  background: var(--atrament-45);
}

.quiz-pytanie {
  margin: 6px 0 4px;
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 740;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.quiz-runda[data-faza="wynik"] .quiz-pytanie {
  font-size: 26px;
}

.quiz-odpowiedzi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.quiz-odp {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  min-height: 104px;
  padding: 16px 20px 16px 16px;
  border-radius: var(--r-l);
  border: 1.5px solid var(--linia);
  background: var(--karta);
  box-shadow: 0 1px 0 rgba(26, 23, 19, 0.04), 0 8px 22px rgba(26, 23, 19, 0.05);
  color: var(--atrament);
  font-size: 20px;
  font-weight: 650;
  line-height: 1.25;
  text-align: left;
  transition: transform 0.16s var(--ease), border-color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

.quiz-odp:active:not(:disabled) {
  transform: scale(0.98);
}

.quiz-runda[data-faza="wynik"] .quiz-odp {
  min-height: 72px;
  font-size: 17.5px;
}

.quiz-litera {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--miod);
  color: var(--porcelana);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
}

.quiz-odp:nth-child(2) .quiz-litera {
  background: var(--bordo);
}

.quiz-odp:nth-child(3) .quiz-litera {
  background: var(--chmiel);
}

.quiz-odp:nth-child(4) .quiz-litera {
  background: var(--atrament);
}

.quiz-odp-znak svg {
  display: block;
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quiz-runda[data-faza="pytanie"] .quiz-odpowiedzi[data-odpowiedziano] .quiz-odp:not([data-wybrana]) {
  opacity: 0.5;
}

.quiz-odp[data-wybrana] {
  border-color: var(--miod);
  background: var(--miod-mgla);
  box-shadow: 0 0 0 3px rgba(199, 123, 2, 0.3);
  color: var(--atrament);
}

.quiz-odp[data-wybrana] .quiz-odp-znak {
  color: var(--miod-ciemny);
}

.quiz-runda[data-faza="wynik"] .quiz-odp:not([data-dobra]):not([data-zla]) {
  opacity: 0.45;
}

.quiz-odp[data-dobra] {
  border-color: #3f7d47;
  background: #e8f2e4;
  box-shadow: 0 0 0 3px rgba(63, 125, 71, 0.28);
  opacity: 1;
}

.quiz-odp[data-dobra] .quiz-odp-znak {
  color: #2f6a38;
}

.quiz-odp[data-zla] {
  border-color: var(--bordo);
  background: #f6e8e5;
  box-shadow: none;
  opacity: 1;
}

.quiz-odp[data-zla] .quiz-odp-znak {
  color: var(--bordo);
}

.quiz-status {
  min-height: 1.5em;
  font-size: 15.5px;
  font-weight: 600;
  text-align: center;
  color: var(--atrament-64);
}

.quiz-po {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quiz-werdykt {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 780;
  text-align: center;
  animation: quiz-werdykt 0.45s var(--sprezyna) both;
}

.quiz-werdykt[data-wynik="dobrze"] {
  color: #2f6a38;
}

.quiz-werdykt[data-wynik="zle"] {
  color: var(--bordo);
}

.quiz-werdykt[data-wynik="brak"] {
  color: var(--atrament-64);
}

@keyframes quiz-werdykt {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
}

.quiz-dolne {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 14px;
}

.quiz-ciekawostka,
.quiz-ranking {
  padding: 16px 20px;
  border-radius: var(--r-l);
  background: var(--karta);
  box-shadow: inset 0 0 0 1px var(--linia);
}

.quiz-ciekawostka p:last-child {
  margin-top: 6px;
  font-size: 16px;
  line-height: 1.45;
}

.quiz-ranking ol {
  display: grid;
  gap: 2px;
  margin-top: 6px;
  list-style: none;
}

.quiz-ranking li {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 10px;
  font-size: 15px;
}

.quiz-ranking li[data-moja] {
  background: var(--miod-mgla);
  font-weight: 700;
}

.quiz-ranking li[data-poza] {
  margin-top: 4px;
  border-top: 1px dashed var(--linia);
  border-radius: 0 0 10px 10px;
}

.quiz-ranking-miejsce {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--atrament-64);
}

.quiz-ranking-nazwa {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quiz-ranking-punkty {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 600;
}

.quiz-nastepne {
  font-family: var(--font-mono);
  font-size: 13.5px;
  text-align: center;
  color: var(--atrament-64);
  font-variant-numeric: tabular-nums;
}

/* wyniki koncowe: podium */
.quiz-koniec[data-wygrana] .quiz-naglowek {
  color: var(--miod-ciemny);
}

.quiz-podium {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 12px;
  margin-top: 26px;
  list-style: none;
}

.quiz-podium li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 168px;
}

.quiz-podium-nazwa {
  max-width: 100%;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
}

.quiz-podium-punkty {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--atrament-64);
}

.quiz-podium-stopien {
  display: grid;
  place-items: center;
  width: 100%;
  margin-top: 6px;
  border-radius: 14px 14px 4px 4px;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 800;
  color: var(--porcelana);
}

.quiz-podium[hidden] {
  display: none;
}

.quiz-podium li[data-stopien="1"] .quiz-podium-stopien {
  height: 140px;
  background: var(--miod);
}

.quiz-podium li[data-stopien="2"] .quiz-podium-stopien {
  height: 104px;
  background: #a89a86;
}

.quiz-podium li[data-stopien="3"] .quiz-podium-stopien {
  height: 78px;
  background: #b9825a;
}

.quiz-podium li[data-moja] .quiz-podium-nazwa {
  color: var(--miod-ciemny);
}

.quiz-podium li[data-moja] .quiz-podium-stopien {
  box-shadow: 0 0 0 3px var(--karta), 0 0 0 6px rgba(199, 123, 2, 0.45);
}

.quiz-moje {
  margin-top: 18px;
  font-size: 17px;
  font-weight: 650;
}

.quiz-moje[hidden] {
  display: none;
}

.quiz-koniec .btn {
  margin-top: 24px;
}

/* przycisk quizu na powitaniu i w karcie */
.quiz-pigulka {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 58px;
  padding: 0 10px 0 9px;
  border: none;
  border-radius: 999px;
  background: var(--atrament);
  color: var(--porcelana);
  box-shadow: 0 12px 30px rgba(26, 23, 19, 0.28);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  transform: translateX(-50%);
  animation: quiz-pigulka-wejscie 0.4s var(--sprezyna) both;
}

.quiz-pigulka[hidden] {
  display: none;
}

.quiz-pigulka > span:nth-child(2) {
  padding-right: 8px;
}

.quiz-pigulka-znak {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--miod);
  color: var(--atrament);
}

.quiz-pigulka-czas {
  min-width: 52px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(250, 247, 242, 0.14);
  font-family: var(--font-mono);
  font-size: 14px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.quiz-pigulka-czas[hidden] {
  display: none;
}

.quiz-pigulka[data-powitanie] {
  height: 64px;
  font-size: 16px;
}

.quiz-pigulka[data-puls] .quiz-pigulka-znak {
  animation: quiz-puls 1.2s ease-out infinite;
}

@keyframes quiz-pigulka-wejscie {
  from {
    opacity: 0;
    transform: translate(-50%, 24px);
  }
}

@keyframes quiz-puls {
  0% {
    box-shadow: 0 0 0 0 rgba(199, 123, 2, 0.6);
  }
  100% {
    box-shadow: 0 0 0 14px rgba(199, 123, 2, 0);
  }
}

/* tablet w pionie: pigulka nad paskiem koszyka, jedna kolumna pod pytaniem */
@media (max-width: 1000px) {
  .quiz-pigulka[data-wyzej] {
    bottom: calc(24px + 64px + 14px);
  }

  /* druzyna dostaje miejsce, ktorego nie potrzebuje przycisk karty */
  .quiz-pasek {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 0 16px;
  }

  .quiz-tytul {
    justify-self: center;
    font-size: 19px;
  }

  .quiz-druzyna {
    font-size: 14px;
    padding: 0 14px;
  }

  .quiz-tresc {
    padding: 8px 20px 24px;
  }

  .quiz-pytanie {
    font-size: 31px;
  }

  .quiz-odp {
    min-height: 96px;
    font-size: 18.5px;
  }

  .quiz-dolne {
    grid-template-columns: 1fr;
  }

  .quiz-karta {
    padding: 28px 26px 30px;
  }
}

/* 8,7" w poziomie (600 i 533 wysokosci): karty quizu bez przewijania - przy 533 px przyciski
   "Dolaczamy" lezaly pod ekranem, a licznik do startu wychodzil nad gorna krawedz. Po regule
   "max-width: 1000px" (tablet w pionie), bo ta lapie tez 893 px w poziomie. */
@media (orientation: landscape) and (max-height: 640px) {
  .quiz-tresc {
    padding: 4px 24px 16px;
  }

  .quiz-karta {
    padding: 20px 32px 22px;
  }

  .quiz-jezyki {
    margin-bottom: 10px;
  }

  .quiz-jezyki button {
    width: 34px;
    height: 34px;
  }

  .quiz-naglowek {
    margin-top: 4px;
    font-size: 32px;
  }

  .quiz-opis {
    margin-top: 6px;
    font-size: 15.5px;
  }

  .quiz-tematy,
  .quiz-start,
  .quiz-nagroda {
    margin-top: 10px;
  }

  .quiz-nagroda {
    padding-top: 7px;
    padding-bottom: 7px;
  }

  .quiz-nazwa {
    gap: 2px;
    margin-top: 12px;
    padding: 10px 16px 6px;
  }

  .quiz-nazwa-tekst {
    font-size: 26px;
  }

  .quiz-losuj {
    min-height: 40px;
  }

  .quiz-akcje {
    margin-top: 14px;
  }

  .quiz-odliczanie {
    font-size: 76px;
  }

  .quiz-druzyna-duza {
    margin-top: 8px;
    font-size: 24px;
  }

  .quiz-zasady {
    gap: 6px;
    margin-top: 12px;
  }

  .quiz-zasady li {
    font-size: 14.5px;
  }

  .quiz-zapisy .btn {
    margin-top: 14px;
  }

  /* pod pytaniem ciekawostka i ranking obok siebie - jedna kolumna to tablet w pionie */
  .quiz-dolne {
    grid-template-columns: 1.25fr 1fr;
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  .quiz-karta {
    padding: 14px 28px 16px;
  }

  .quiz-jezyki {
    margin-bottom: 6px;
  }

  .quiz-jezyki button {
    width: 30px;
    height: 30px;
  }

  .quiz-naglowek {
    font-size: 28px;
  }
}

/* telefon goscia: jedna kolumna odpowiedzi, druzyna w drugim rzedzie paska, przycisk quizu
   nad dolnym paskiem (Kelner / Zamowienia / Rachunek) i nad paskiem koszyka */
html[data-telefon] .quiz-pigulka {
  bottom: calc(var(--nav-telefonu) + 12px);
  max-width: calc(100vw - 24px);
  height: 52px;
  font-size: 14px;
}

html[data-telefon] .quiz-pigulka[data-wyzej] {
  bottom: calc(var(--nav-telefonu) + 10px + 60px + 10px);
}

html[data-telefon] .quiz-pigulka > span:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
}

html[data-telefon] .quiz-pigulka-znak {
  width: 36px;
  height: 36px;
}

html[data-telefon] .quiz-pasek {
  height: auto;
  min-height: 60px;
  grid-template-columns: auto minmax(0, 1fr);
  row-gap: 8px;
  padding: 8px 12px;
}

html[data-telefon] .quiz-tytul {
  justify-self: start;
  font-size: 17px;
}

html[data-telefon] .quiz-druzyna {
  grid-column: 1 / -1;
  justify-self: stretch;
  justify-content: space-between;
  min-height: 40px;
  font-size: 14px;
}

html[data-telefon] .quiz-pauza {
  margin: 0 12px;
}

html[data-telefon] .quiz-tresc {
  place-items: start center;
  padding: 6px 12px 24px;
}

html[data-telefon] .quiz-karta {
  padding: 22px 16px 24px;
  border-radius: var(--r-l);
}

html[data-telefon] .quiz-naglowek {
  font-size: 27px;
}

html[data-telefon] .quiz-opis {
  font-size: 15px;
}

html[data-telefon] .quiz-jezyki {
  gap: 6px;
  margin-bottom: 16px;
}

html[data-telefon] .quiz-jezyki button {
  width: 34px;
  height: 34px;
}

html[data-telefon] .quiz-nazwa-tekst {
  font-size: 24px;
}

html[data-telefon] .quiz-akcje {
  flex-direction: column-reverse;
}

html[data-telefon] .quiz-akcje .btn {
  width: 100%;
}

html[data-telefon] .quiz-odliczanie {
  font-size: 76px;
}

html[data-telefon] .quiz-meta {
  gap: 8px;
}

html[data-telefon] .quiz-numer {
  font-size: 11.5px;
}

html[data-telefon] .quiz-sekundy {
  font-size: 34px;
}

html[data-telefon] .quiz-pytanie {
  font-size: 22px;
}

html[data-telefon] .quiz-runda[data-faza="wynik"] .quiz-pytanie {
  font-size: 18px;
}

html[data-telefon] .quiz-odpowiedzi {
  grid-template-columns: 1fr;
  gap: 10px;
}

html[data-telefon] .quiz-odp {
  min-height: 62px;
  gap: 12px;
  padding: 10px 14px 10px 10px;
  font-size: 17px;
}

html[data-telefon] .quiz-runda[data-faza="wynik"] .quiz-odp {
  min-height: 50px;
  font-size: 15.5px;
}

html[data-telefon] .quiz-litera {
  width: 38px;
  height: 38px;
  font-size: 17px;
}

html[data-telefon] .quiz-werdykt {
  font-size: 21px;
}

html[data-telefon] .quiz-dolne {
  grid-template-columns: 1fr;
}

html[data-telefon] .quiz-podium {
  gap: 8px;
}

html[data-telefon] .quiz-podium li {
  width: 31%;
}

html[data-telefon] .quiz-podium-nazwa {
  font-size: 13.5px;
}

html[data-telefon] .quiz-podium li[data-stopien="1"] .quiz-podium-stopien {
  height: 104px;
}

html[data-telefon] .quiz-podium li[data-stopien="2"] .quiz-podium-stopien {
  height: 78px;
}

html[data-telefon] .quiz-podium li[data-stopien="3"] .quiz-podium-stopien {
  height: 58px;
}

@media (prefers-reduced-motion: reduce) {
  .quiz-czas span,
  .quiz-odp {
    transition: none;
  }

  .quiz-werdykt,
  .quiz-pigulka,
  .quiz-pigulka[data-puls] .quiz-pigulka-znak {
    animation: none;
  }
}

/* ---------------------------------------- bardzo waskie telefony (do ok. 340 px) */

/* portret kelnera z jawna wysokoscia - w przewijanym oknie rzad z samym aspect-ratio sie kurczyl
   i kolko wchodzilo na tytul */
.rachunek-portret {
  flex: none;
  height: 132px;
}

/* koszyk: przycisk przenoszenia miedzy biegami po lewej przez cala wysokosc wiersza */
html[data-telefon] .koszyk-pozycja[data-ruchoma] {
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding-left: 6px;
}

html[data-telefon] .koszyk-pozycja[data-ruchoma] .koszyk-chwyt {
  grid-area: 1 / 1 / 4 / 2;
  align-self: center;
}

html[data-telefon] .koszyk-pozycja[data-ruchoma] .koszyk-pozycja-nazwa {
  grid-area: 1 / 2 / 2 / 3;
}

html[data-telefon] .koszyk-pozycja[data-ruchoma] .koszyk-pozycja-cena {
  grid-area: 1 / 3 / 2 / 4;
}

html[data-telefon] .koszyk-pozycja[data-ruchoma] .koszyk-pozycja-uwaga {
  grid-area: 2 / 2 / 3 / 4;
}

html[data-telefon] .koszyk-pozycja[data-ruchoma] .koszyk-pozycja-detal {
  grid-area: 3 / 2 / 4 / 3;
}

html[data-telefon] .koszyk-pozycja[data-ruchoma] .koszyk-pozycja-sterowanie {
  grid-area: 3 / 2 / 4 / 4;
}

/* "Zamow cos jeszcze" i reszta potwierdzenia nie szersze niz ekran */
.potwierdzenie .btn {
  min-width: min(280px, 100%);
}

html[data-telefon] #ekran-potwierdzenie .potwierdzenie {
  width: 100%;
}

/* tytuly okien i ekranow: na waskim telefonie mniejsze, zeby dlugie slowa (zamowienia,
   Bestellungen, замовлення) miescily sie bez lamania w srodku */
html[data-telefon] .modal-naglowek h2,
html[data-telefon] .zamowienia-tresc h2,
html[data-telefon] .rachunek-tresc h2,
html[data-telefon] .potwierdzenie h2,
html[data-telefon] .karta-podsumowania h2 {
  font-size: clamp(22px, 7.2vw, 30px);
  hyphens: auto;
}

html[data-telefon] .zamowienia-tresc h2 {
  overflow-wrap: normal;
}

@media (max-width: 360px) {
  /* opcje kelnera i rachunku jedna pod druga: ikona obok napisu */
  html[data-telefon] .rachunek-opcje {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  html[data-telefon] .rachunek-opcja {
    grid-auto-flow: column;
    justify-content: start;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    font-size: 17px;
    text-align: left;
  }

  html[data-telefon] .rachunek-opcja svg {
    width: 28px;
    height: 28px;
  }

  html[data-telefon] .rachunek-tresc {
    padding: 28px 18px 20px;
  }

  html[data-telefon] .rachunek-portret {
    width: 96px;
    height: 96px;
  }

  /* zdjecie w arkuszu dania mniejsze - wiecej miejsca na nazwe i wybory */
  html[data-telefon] .modal-figura {
    height: min(170px, 26dvh);
    margin: 4px 16px 6px;
  }

  html[data-telefon] .modal-tresc {
    padding: 2px 16px 18px;
  }
}

@media (max-width: 340px) {
  /* koszyk: nazwa na cala szerokosc, pod nia cena i mniejszy licznik; bez kropek uchwytu -
     caly wiersz i tak reaguje na dotkniecie (wybor dania do przeniesienia) */
  html[data-telefon] .koszyk-pozycja,
  html[data-telefon] .koszyk-pozycja[data-ruchoma] {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-left: 14px;
  }

  html[data-telefon] .koszyk-pozycja[data-ruchoma] .koszyk-chwyt {
    display: none;
  }

  html[data-telefon] .koszyk-pozycja .koszyk-pozycja-nazwa,
  html[data-telefon] .koszyk-pozycja[data-ruchoma] .koszyk-pozycja-nazwa {
    grid-area: 1 / 1 / 2 / 3;
  }

  html[data-telefon] .koszyk-pozycja .koszyk-pozycja-uwaga,
  html[data-telefon] .koszyk-pozycja[data-ruchoma] .koszyk-pozycja-uwaga {
    grid-area: 2 / 1 / 3 / 3;
  }

  html[data-telefon] .koszyk-pozycja .koszyk-pozycja-cena,
  html[data-telefon] .koszyk-pozycja[data-ruchoma] .koszyk-pozycja-cena {
    grid-area: 3 / 1 / 4 / 2;
    align-self: center;
    font-size: 15px;
    text-align: left;
  }

  html[data-telefon] .koszyk-pozycja .koszyk-pozycja-sterowanie,
  html[data-telefon] .koszyk-pozycja[data-ruchoma] .koszyk-pozycja-sterowanie {
    grid-area: 3 / 2 / 4 / 3;
  }

  html[data-telefon] .koszyk-pozycja .koszyk-pozycja-detal,
  html[data-telefon] .koszyk-pozycja[data-ruchoma] .koszyk-pozycja-detal {
    grid-area: 4 / 1 / 5 / 3;
  }

  html[data-telefon] .koszyk-pozycja .licznik button {
    width: 40px;
    height: 40px;
  }

  /* karty dan: mniejsza nazwa i wezsze zdjecie */
  html[data-telefon] .danie {
    --foto-szer: 28%;
  }

  html[data-telefon] .danie-nazwa {
    font-size: 15px;
  }
}