/* ==========================================================================
   DRINK EAT! - strona wyboru automatu (index.html)
   --------------------------------------------------------------------------
   Ładowany po css/fonts.css i css/style.css - korzysta z ich tokenów,
   motywów (data-theme="pizza|lody"), .lettering, .btn, .doodles, .spark
   i loadera. Tu tylko scena wyboru:
     - tło: dwie połówki w kolorach pizzy i lodów, między nimi pionowa fala
     - kontener z automatami (SVG z js/art-kiosk.js) i przyciski pod nimi
     - mini stopka
   Jeden ekran (100svh) na komputerze; na telefonie strona może się lekko
   przewijać. Bez animacji (prefers-reduced-motion) widać stan końcowy -
   animacje i stany „zgaszone" ustawia js/gate.js.
   ========================================================================== */

:root {
  /* pionowa fala: ta sama linia co --mask-wave, obrócona (wypełnienie w prawo) */
  --mask-wave-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='1200' viewBox='0 0 100 1200' preserveAspectRatio='none'%3E%3Cpath d='M38.3,0 L34.2,10 L30.7,20 L27.7,30 L25.4,40 L23.9,50 L23.1,60 L23.1,70 L23.7,80 L24.9,90 L26.6,100 L28.6,110 L30.8,120 L33.2,130 L35.5,140 L37.6,150 L39.5,160 L41.1,170 L42.3,180 L43.3,190 L43.9,200 L44.2,210 L44.4,220 L44.4,230 L44.4,240 L44.5,250 L44.7,260 L45.1,270 L45.8,280 L46.8,290 L48.1,300 L49.7,310 L51.5,320 L53.5,330 L55.7,340 L57.8,350 L59.9,360 L61.7,370 L63.4,380 L64.7,390 L65.7,400 L66.3,410 L66.5,420 L66.3,430 L65.8,440 L65.1,450 L64.2,460 L63.2,470 L62.3,480 L61.4,490 L60.6,500 L60.1,510 L59.8,520 L59.8,530 L60,540 L60.3,550 L60.7,560 L61.2,570 L61.6,580 L61.8,590 L61.7,600 L61.2,610 L60.2,620 L58.7,630 L56.7,640 L54.1,650 L51,660 L47.5,670 L43.6,680 L39.5,690 L35.3,700 L31.2,710 L27.3,720 L23.8,730 L20.8,740 L18.4,750 L16.8,760 L15.9,770 L15.8,780 L16.5,790 L18,800 L20.2,810 L22.9,820 L26.2,830 L29.7,840 L33.5,850 L37.4,860 L41.3,870 L45.1,880 L48.6,890 L51.9,900 L54.9,910 L57.6,920 L60.1,930 L62.2,940 L64.2,950 L66,960 L67.7,970 L69.3,980 L70.9,990 L72.4,1000 L73.9,1010 L75.4,1020 L76.7,1030 L77.9,1040 L78.9,1050 L79.5,1060 L79.8,1070 L79.6,1080 L78.8,1090 L77.5,1100 L75.5,1110 L72.9,1120 L69.7,1130 L65.9,1140 L61.7,1150 L57.2,1160 L52.4,1170 L47.6,1180 L42.8,1190 L38.3,1200 L100,1200 L100,0 Z'/%3E%3C/svg%3E");
  /* kursor nad lodami: rożek (nad pizzą zostaje kawałek pizzy ze style.css) */
  --cursor-cone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='36' viewBox='0 0 34 36'%3E%3Cpath d='M3 3l18.5 7.4-11.1 11.1Z' fill='%23E7A54F' stroke='%231C0D0A' stroke-width='2.6' stroke-linejoin='round'/%3E%3Ccircle cx='21' cy='21' r='9.2' fill='%23FF9BC6' stroke='%231C0D0A' stroke-width='2.6'/%3E%3Ccircle cx='27.6' cy='27.6' r='3.2' fill='%23E8344E' stroke='%231C0D0A' stroke-width='1.8'/%3E%3C/svg%3E") 3 3, pointer;
}

/* --------------------------------------------------------------------------
   1. Układ: tło, nagłówek, scena, stopka
   -------------------------------------------------------------------------- */
.gate {
  --gate-pad: clamp(16px, 4vw, 48px);
  --btn-h: 64px;
  /* miejsce pod kontenerem na wystające przyciski */
  --below: calc(var(--btn-h) * 0.5 + 18px);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: calc(100 * var(--svh));
  min-height: 600px;
  overflow: clip;
  background: var(--dough);
  color: var(--cream);
}
.gate__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}

/* tło: lewa połowa pizza, prawa lody (kolory z data-theme) */
.gate__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.gate__half {
  position: absolute;
  inset: 0;
  background: var(--red);
  --doodle: rgba(var(--tint-deep), 0.55);
}
/* prawa połowa zaczyna się w połowie ekranu; js/gate.js przesuwa ją
   (xPercent) przy wejściu i po najechaniu na automat */
.gate__half--lody { transform: translateX(50%); }
.gate__half--lody::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  right: calc(100% - 1px);
  width: clamp(26px, 3.4vw, 50px);
  background: inherit;
  -webkit-mask: var(--mask-wave-v) 0 0 / 100% 1000px repeat-y;
          mask: var(--mask-wave-v) 0 0 / 100% 1000px repeat-y;
  animation: gate-wave 14s linear infinite;
}
@keyframes gate-wave { to { -webkit-mask-position: 0 1000px; mask-position: 0 1000px; } }

/* ozdobniki rozsypane po bokach (za kursorem - js/gate.js) */
.gate__sparks { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.gate__spark { z-index: auto; }

/* nagłówek */
.gate__head {
  position: relative;
  z-index: 2;
  padding: clamp(18px, 4.2 * var(--svh), 52px) var(--gate-pad) clamp(10px, 2.2 * var(--svh), 26px);
  text-align: center;
}
.gate__title {
  font-size: clamp(40px, 5.4vw, 84px);
  --fill: var(--cream);
  text-wrap: balance;
}
.gate__title .word { display: inline-block; }
.gate__sub {
  max-width: 36em;
  margin: clamp(10px, 1.6 * var(--svh), 18px) auto 0;
  font-size: clamp(15px, 1.3vw, 19px);
  font-weight: 600;
  line-height: 1.4;
  text-wrap: balance;
}

/* scena: kontener mieści się w wolnym miejscu (jednostki kontenera cqw/cqh),
   pod nim zostaje miejsce na przyciski */
.gate__scene {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-height: 0;
}
/* środkowanie marginesem - działa też, gdy kontener jest szerszy od ekranu */
.gate__kiosk {
  --kw: min(92vw, 1180px);
  position: relative;
  width: var(--kw);
  aspect-ratio: 1240 / 920;
  margin: 0 0 var(--below) calc(50% - var(--kw) / 2);
}
@supports (width: 1cqh) {
  .gate__scene { container-type: size; }
  .gate__kiosk { --kw: min(100cqw - 2 * var(--gate-pad), (100cqh - var(--below)) * 1.3478, 1180px); }
}

/* rysunek (SVG z js/art-kiosk.js) */
.gate__art { position: absolute; inset: 0; transform-origin: 50% 100%; }
.gate__art .kiosk { width: 100%; height: 100%; overflow: visible; }

/* znaczki po bokach kontenera (wygląd: .ring-badge ze style.css) */
.gate__badge {
  left: auto; bottom: auto;
  width: clamp(120px, 17%, 210px);
  z-index: 1;
  pointer-events: none;
}
.gate__badge--pizza { left: -10%; top: 50%; rotate: -8deg; }
.gate__badge--lody { right: -10%; top: 14%; rotate: 10deg; }
.gate__badge--lody .ring-badge__text { animation-direction: reverse; }

/* miejsca do kliknięcia nad automatami (pozycje: DE_ART.kiosk.LAYOUT,
   ustawia js/gate.js - tu wartości domyślne z tego samego układu) */
.gate__hit {
  position: absolute;
  z-index: 2;
  border-radius: 6%;
  -webkit-tap-highlight-color: transparent;
}
.gate__hit--pizza { left: 17.04%; top: 35.14%; width: 33.6%; height: 58.55%; }
.gate__hit--lody { left: 59.49%; top: 35.67%; width: 24.6%; height: 58.02%; cursor: var(--cursor-cone); }

/* przyciski pod automatami (środki automatów: --pizza-x / --ice-x) */
.gate__choices { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.gate__btn {
  position: absolute;
  top: 96.6%;
  left: var(--x);
  translate: -50% -50%;
  /* bez tego przycisk przy prawej krawędzi zwęża się do miejsca, które
     zostało w kontenerze (absolute + left) i obcina napis */
  width: max-content;
  height: var(--btn-h);
  padding: 0 24px 0 16px;
  gap: 10px;
  font-size: clamp(19px, 1.6vw, 23px);
  pointer-events: auto;
  white-space: nowrap;
}
/* napis z obrysem 4 px - trochę więcej miejsca po bokach */
.gate__btn .btn__text { padding: 4px 4px; margin: -4px -4px; }
.gate__btn--pizza { --x: var(--pizza-x, 33.84%); }
.gate__btn--lody { --x: var(--ice-x, 71.81%); }
.gate__btn-ico {
  width: 44px; height: 44px;
  margin: -8px -2px -6px 0;
  overflow: visible;
  transition: transform 0.5s var(--spring);
}
.gate__btn:hover .gate__btn-ico,
.gate__btn:focus-visible .gate__btn-ico,
.gate__btn.is-picked .gate__btn-ico { transform: rotate(-14deg) scale(1.12); }
/* najechanie na automat podświetla jego przycisk (klasa z js/gate.js) */
.gate__btn.is-picked { color: var(--red); }
.gate__btn.is-picked .btn__fill { transform: translateY(12px); }
.gate__btn.is-picked .btn__text > span:first-child { transform: translateY(-130%); }
.gate__btn.is-picked .btn__text > span + span { transform: none; }
.gate__btn.is-picked .btn__icon { color: var(--red); transform: translateX(4px) rotate(-8deg); }

/* stopka */
.gate__foot {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 10px;
  padding: 6px var(--gate-pad) clamp(12px, 2.2 * var(--svh), 22px);
  font-size: 14px;
}
.gate__copy { margin-right: 4px; font-weight: 600; opacity: 0.85; }
.gate__foot a {
  padding: 8px 14px 9px;
  border: 2px solid var(--cream);
  border-radius: 999px;
  font: 400 13px/1 var(--font-display);
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.4s var(--spring);
}
.gate__foot a:hover { background: var(--cream); color: var(--ink); transform: rotate(-3deg); }

@media (pointer: fine) {
  .gate__btn--lody, .gate__foot a[data-go="lody"] { cursor: var(--cursor-cone); }
}

/* --------------------------------------------------------------------------
   2. Telefon i wąskie ekrany: kontener na całą szerokość (słupki chowają się
   za krawędzią), strona może się lekko przewijać
   -------------------------------------------------------------------------- */
@media (max-width: 699.98px) {
  .gate { --btn-h: 54px; height: auto; min-height: calc(100 * var(--svh)); }
  .gate__spark { left: var(--mx, var(--x)); top: var(--my, var(--y)); }
  .gate__main { grid-template-rows: auto auto; align-content: center; }
  .gate__head { padding-top: clamp(22px, 5 * var(--svh), 44px); }
  .gate__title { font-size: clamp(34px, 10.6vw, 54px); }
  .gate__sub { max-width: 22em; font-size: 15px; }
  .gate__scene { container-type: normal; }
  .gate__kiosk { --kw: min(132vw, 640px); margin-bottom: calc(var(--below) + 6px); }
  .gate__btn { padding: 0 16px 0 12px; gap: 6px; font-size: 18px; }
  .gate__btn .btn__icon { display: none; }
  .gate__btn-ico { width: 36px; height: 36px; }
  .gate__spark--wide, .gate__badge { display: none; }
  .gate__copy { flex-basis: 100%; margin: 0 0 2px; text-align: center; }
  .gate__foot a { padding: 8px 12px 9px; font-size: 12.5px; }
}
/* tablet w pionie: kontener szerszy niż ekran (jak na telefonie), większy napis */
@media (min-width: 700px) and (max-aspect-ratio: 5/6) {
  .gate__title { font-size: clamp(40px, 8.4vw, 84px); }
  .gate__sub { font-size: clamp(16px, 2.3vw, 21px); }
  .gate__kiosk { --kw: min(116vw, 1180px); }
  @supports (width: 1cqh) {
    .gate__kiosk { --kw: min(116vw, (100cqh - var(--below)) * 1.3478, 1180px); }
  }
  .gate__badge { display: none; }
}
/* niski ekran w poziomie (telefon obrócony) */
@media (max-height: 520px) and (min-width: 700px) {
  .gate { --btn-h: 52px; }
  .gate__head { padding-top: 14px; padding-bottom: 6px; }
  .gate__title { font-size: clamp(30px, 4.4vw, 48px); }
  .gate__sub { margin-top: 6px; font-size: 14px; }
  .gate__btn { font-size: 17px; }
}