/* ═══════════════════════════════════════════════════════════════════════════
   pt-quiz-powitalny.css — ankieta powitalna ścieżki „jestem tu pierwszy raz"

   Język wizualny przeniesiony 1:1 z lejka /start (zatwierdzony przez
   właściciela jako wzorzec). Cztery rzeczy, które robią tam całą robotę
   i które łatwo przeoczyć — wszystkie są niżej:

   1. Kafel NIEwybrany nie jest biały. Dostaje „wash" we własnej barwie
      (gradient liczy JS: qpWash), inaczej ekran to ściana bieli.
   2. Połysk górnej krawędzi (`::before`) — to ON daje wrażenie bryły, nie cień.
   3. Potrójny cień: włoskowaty pierścień `inset` ZAMIAST `border` (border na
      zaokrągleniu daje dwie widoczne linie) + cień kontaktowy + cień otoczenia
      z ujemnym rozlewem.
   4. Medalion z własnym gradientem, kolorowym cieniem pod spodem i parą cieni
      wewnętrznych (jasny u góry, ciemny u dołu).

   Do tego: kafle wypełniają dostępną wysokość (grid-auto-rows:1fr z sufitem
   --rowMax liczonym z liczby wierszy), fala od punktu dotknięcia, podskok
   potwierdzenia, gaszenie rodzeństwa, rysowany ptaszek, przejścia kierunkowe.

   Namespace: .qp-*   Silnik: /js/pt-quiz-powitalny.js
   ═══════════════════════════════════════════════════════════════════════════ */

.qp-root{
  /* Wysokość realnego widoku. `vh` w webview apki i w przeglądarkach
     wbudowanych w social media nie widzi pasków — JS podstawia visualViewport. */
  --qvh:100vh;

  --qink:#1A1713;
  --qcream:#FFFDF7;
  --qpaper:#F7F4EE;
  --qwhite:#FFFFFF;
  --qline:#EDE8DF;
  --qg1:#F9C843;
  --qg2:#F07020;
  --qg3:#E8580A;
  --qink70:rgba(26,23,19,.70);
  --qink50:rgba(26,23,19,.50);
  --qink40:rgba(26,23,19,.40);
  --qink30:rgba(26,23,19,.30);
  --qink15:rgba(26,23,19,.15);
  --qink10:rgba(26,23,19,.10);
  --qink08:rgba(26,23,19,.08);
  --qink05:rgba(26,23,19,.05);
  --qease:cubic-bezier(.4,0,.2,1);
  --qspring:cubic-bezier(.34,1.56,.64,1);

  /* Cała skala jest funkcją WYSOKOŚCI, nie szerokości — ekran ma się zmieścić
     bez przewijania na każdym telefonie, a nie wyglądać tak samo na każdym. */
  --qpad: clamp(9px,  calc(var(--qvh) * .019), 16px);
  --qgap: clamp(7px,  calc(var(--qvh) * .0135), 12px);
  --qico: clamp(42px, calc(var(--qvh) * .074), 68px);
  --qicoS:clamp(21px, calc(var(--qvh) * .036), 34px);
  --qtileP:clamp(10px, calc(var(--qvh) * .018), 17px);
  --qtileH:clamp(52px, calc(var(--qvh) * .082), 78px);
  --qqF:  clamp(20px, min(6.7vw, calc(var(--qvh) * .035)), 30px);
  --qnumF:clamp(19px, calc(var(--qvh) * .031), 27px);

  position:fixed;left:0;right:0;top:0;height:var(--qvh);z-index:900;
  display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  background:var(--qcream);color:var(--qink);
  font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;
  overscroll-behavior:none;user-select:none;-webkit-user-select:none;
  opacity:0;transition:opacity .26s var(--qease);
  touch-action:manipulation;
  /* Nic tu nigdy nie ma prawa się przewijać: każdy ekran ma się ZMIEŚCIĆ.
     Bez tego dekoracyjna poświata (::before, inset:-20%) rozpycha obszar
     przewijania o ~170 px i pomiar „nadmiar = 0" nigdy nie wychodzi. */
  overflow:hidden;
}
.qp-root.qp-on{opacity:1}
.qp-root *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* `:where` zeruje specyficzność selektora — inaczej „.qp-root button" (0-1-1)
   wygrywa z „.qp-cta" (0-1-0) i zabiera przyciskowi gradient oraz biały tekst.
   Dokładnie to zjadło CTA w pierwszej rundzie: „Dalej" wyglądał na wyłączony. */
:where(.qp-root) button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;margin:0}
.qp-root :focus-visible{outline:none;box-shadow:0 0 0 3px rgba(249,200,67,.35)}

/* Ciepła poświata pod całością — ten sam oddech co na /start, tylko spokojniejszy,
   bo tu tłem jest apka, nie landing. */
.qp-root::before{
  /* `inset:0`, nie `-20%` — pseudoelement wystający poza kontener powiększa
     jego obszar przewijania o ~170 px, co łamie wymóg „ekran się nie przewija". */
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 34% at 18% 12%,rgba(249,200,67,.26),transparent 70%),
    radial-gradient(42% 32% at 86% 24%,rgba(240,112,32,.16),transparent 72%),
    radial-gradient(50% 38% at 62% 92%,rgba(108,108,240,.10),transparent 72%);
  animation:qpDrift 22s ease-in-out infinite alternate;
}
/* Ruch WYŁĄCZNIE w górę i w lewo, zero `scale`. Obszar przewijania rośnie
   tylko w dół i w prawo — a przeglądarka wlicza do niego przekształcone
   pudełka potomków. `scale(1.08)` z /start dodawał tu ~100 px nadmiaru
   rosnącego w trakcie animacji. Krawędzie gradientów są przezroczyste,
   więc przesunięcia o 2,5% nie widać jako szczeliny. */
@keyframes qpDrift{
  from{transform:translate3d(0,0,0);opacity:.86}
  to{transform:translate3d(-2.5%,-2%,0);opacity:1}
}

/* ── Górna belka ─────────────────────────────────────────────────────────── */
.qp-top{
  position:relative;z-index:1;
  flex:0 0 auto;display:flex;align-items:center;gap:2px;padding:5px 10px 5px;
}
/* 44×44 — dolna granica celu dotykowego. Ikona zostaje mała (18 px), rośnie
   tylko obszar klikalny; tło pokazuje się dopiero pod kursorem/palcem. */
.qp-icobtn{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:var(--qink40);
  transition:background 150ms var(--qease),color 150ms var(--qease),transform 120ms var(--qspring);
  flex:0 0 auto;
}
.qp-icobtn:active{transform:scale(.9)}
@media(hover:hover){.qp-icobtn:hover{background:var(--qink05);color:var(--qink)}}
/* `visibility` zamiast `display:none` — przycisk znika, ale nie przesuwa belki. */
.qp-icobtn[hidden]{visibility:hidden;display:grid}
.qp-icobtn.off{color:var(--qink30)}
.qp-brand{
  flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--qink40);
}
.qp-logo{width:22px;height:22px;border-radius:6px;display:block;flex:0 0 auto;
  box-shadow:0 2px 7px -3px rgba(240,112,32,.7)}
.qp-count{
  flex:0 0 auto;min-width:34px;text-align:right;
  font-size:13.5px;font-weight:700;color:var(--qink40);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.qp-count b{color:var(--qink)}

/* ── Szyna postępu ───────────────────────────────────────────────────────── */
.qp-rail{position:relative;z-index:1;flex:0 0 auto;height:4px;background:var(--qink08);
  margin:0 14px;border-radius:99px;overflow:hidden}
.qp-rail i{
  display:block;height:100%;width:0;border-radius:99px;position:relative;
  background:linear-gradient(90deg,#F9C843,#F07020 55%,#E8580A);
  box-shadow:0 0 12px rgba(240,112,32,.55);
  transition:width 340ms var(--qspring);
}
.qp-rail i::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  animation:qpShine 2.4s ease-in-out infinite;
}
@keyframes qpShine{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ── Scena i przejścia kierunkowe ────────────────────────────────────────── */
.qp-stage{position:relative;z-index:1;flex:1 1 auto;min-height:0;display:flex}
.qp-screen{
  flex:1 1 auto;display:flex;flex-direction:column;min-height:0;
  padding:var(--qpad) 14px calc(var(--qpad) + max(env(safe-area-inset-bottom), 6px));
  gap:var(--qgap);max-width:560px;margin:0 auto;width:100%;
}
.qp-screen.in{animation:qpIn 270ms var(--qspring) both}
.qp-screen.out{position:absolute;inset:0;animation:qpOut 150ms var(--qease) both;pointer-events:none}
@keyframes qpIn{
  from{opacity:0;transform:translateX(34px) scale(.965)}
  to{opacity:1;transform:none}
}
@keyframes qpOut{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translateX(-30px) scale(.965)}
}
/* cofanie — ekran wjeżdża z drugiej strony, żeby kierunek był czytelny */
.qp-screen.in.rev{animation:qpInRev 270ms var(--qspring) both}
.qp-screen.out.rev{animation:qpOutRev 150ms var(--qease) both}
@keyframes qpInRev{from{opacity:0;transform:translateX(-34px) scale(.965)}to{opacity:1;transform:none}}
@keyframes qpOutRev{from{opacity:1;transform:none}to{opacity:0;transform:translateX(30px) scale(.965)}}

/* ── Nagłówek pytania ────────────────────────────────────────────────────── */
.qp-head{flex:0 0 auto;display:flex;flex-direction:column;gap:5px}
.qp-eyebrow{
  font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  margin:0;background:linear-gradient(90deg,var(--qg2),var(--qg3));
  -webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content;
}
.qp-q{
  font-weight:700;font-size:var(--qqF);line-height:1.16;letter-spacing:-.032em;
  margin:0;text-wrap:balance;
}
.qp-hint{margin:1px 0 0;font-size:13.5px;color:var(--qink50);line-height:1.4;text-wrap:pretty}

/* ── Buddy: wideo z kanonu, nigdy płaska ikonka ──────────────────────────── */
.qp-hero{flex:0 0 auto;display:flex;align-items:center;gap:13px}
.qp-bud{
  display:block;position:relative;overflow:hidden;border-radius:99px;flex:0 0 auto;
  background-size:cover;background-position:center;background-color:var(--qpaper);
  width:clamp(46px, calc(var(--qvh) * .072), 62px);
  height:clamp(46px, calc(var(--qvh) * .072), 62px);
  box-shadow:0 0 0 2px var(--qwhite),0 0 0 3.5px rgba(249,200,67,.5),0 8px 26px rgba(240,112,32,.24);
  animation:qpPop 420ms var(--qspring) both;
}
.qp-bud video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity 220ms var(--qease);pointer-events:none;
}
.qp-bud video.on{opacity:1}
/* iOS rysuje wielki przycisk play w cieniu elementu wideo — ta warstwa nie
   słucha opacity ani z-index, trzeba ją zdjąć osobnymi selektorami. */
.qp-bud video::-webkit-media-controls,
.qp-bud video::-webkit-media-controls-panel,
.qp-bud video::-webkit-media-controls-play-button,
.qp-bud video::-webkit-media-controls-start-playback-button,
.qp-bud video::-webkit-media-controls-overlay-play-button{
  display:none!important;-webkit-appearance:none;opacity:0!important;
}
@keyframes qpPop{0%{transform:scale(.4) rotate(-14deg)}60%{transform:scale(1.08) rotate(4deg)}100%{transform:none}}
.qp-hero.hop .qp-bud{animation:qpHop 620ms var(--qspring) both}
@keyframes qpHop{
  0%{transform:translateY(0) scale(1)}
  28%{transform:translateY(-14px) scale(1.06,.95)}
  55%{transform:translateY(2px) scale(.97,1.03)}
  100%{transform:translateY(0) scale(1)}
}
.qp-hero p{margin:0;font-size:14.5px;line-height:1.42;color:var(--qink70);text-wrap:pretty}
.qp-hero p b{font-weight:700;color:var(--qink)}
/* iskierki mikro-celebracji przy wyborze */
.qp-spark{
  position:absolute;left:50%;top:20%;width:7px;height:7px;border-radius:50%;pointer-events:none;
  background:linear-gradient(135deg,var(--qg1),var(--qg2));
  box-shadow:0 0 10px rgba(249,200,67,.85);animation:qpSpark .72s ease-out forwards;
}
@keyframes qpSpark{
  0%{transform:translate(0,0) scale(.5);opacity:0}
  18%{opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}
}

/* ── Siatka kafli: wypełnia dostępną wysokość, nigdy jej nie przekracza ──── */
.qp-tiles{
  flex:1 1 auto;display:grid;gap:var(--qgap);grid-auto-rows:1fr;min-height:0;
  perspective:1100px;
  /* Sufit wysokości liczony z REALNEJ liczby wierszy (--rows ustawia JS).
     Bez niego dwa wiersze rozjeżdżają się w plansze, w których ikona i tekst
     pływają w pustce; z nim kafel rośnie tylko do sensownego maksimum. */
  --rows:4; --rowMax:150px;
  max-height:calc(var(--rows) * var(--rowMax) + (var(--rows) - 1) * var(--qgap));
  margin:auto 0;
}
.qp-tiles.big  { --rowMax:clamp(150px, calc(var(--qvh) * .27), 280px) }
.qp-tiles.rows { --rowMax:clamp(94px,  calc(var(--qvh) * .175), 190px) }
/* Zapas przy małej liczbie wierszy wykorzystuje tylko układ pionowy (ikona nad
   tekstem) — układ poziomy ma treść wysokości ~95 px, więc wyższy kafel to pustka. */
.qp-tiles.big.r1{ --rowMax:calc(var(--qvh) * .60) }
/* Jeden wiersz dwóch kafli = każdy zajmuje pół ekranu wzwyż. Przy domyślnym
   medalionie (sufit 68 px) i etykiecie 17 px treść zajmowała środkowe ~150 px
   karty wysokiej na 439, a reszta była pustką — kafel czytał się jako pusty
   prostokąt, nie jako przycisk (zgłoszenie właściciela 2026-08-30: kafle mają
   być duże i „rozproszone na cały ekran równomiernie"). Medalion i tekst rosną
   więc razem z kartą. Dotyczy WYŁĄCZNIE `r1` — przy dwóch i więcej wierszach
   karta jest niższa i domyślne rozmiary są tam właściwe. */
.qp-tiles.big.r1:not(.three) .qp-tile-ico,
.qp-tiles.big.r1:not(.three) .qp-num{
  width:clamp(66px, calc(var(--qvh) * .118), 108px);
  height:clamp(66px, calc(var(--qvh) * .118), 108px);
  border-radius:clamp(19px, 3.1vh, 30px);
}
.qp-tiles.big.r1:not(.three) .qp-tile-ico svg{
  width:clamp(32px, calc(var(--qvh) * .058), 52px);
  height:clamp(32px, calc(var(--qvh) * .058), 52px);
}
.qp-tiles.big.r1:not(.three) .qp-num{ font-size:clamp(26px, calc(var(--qvh) * .046), 40px) }
.qp-tiles.big.r1:not(.three) .qp-tile-txt b{ font-size:clamp(18px, calc(var(--qvh) * .026), 22px) }
.qp-tiles.big.r1:not(.three) .qp-tile-txt span{ font-size:clamp(13px, calc(var(--qvh) * .0175), 15px); margin-top:5px }
/* Trzy wąskie kolumny w jednym wierszu: kafel szeroki na ~113 px nie może być
   wysoki na 340 — z karty robi się słupek. Tu sufit jest niższy. */
.qp-tiles.three.big.r1{ --rowMax:calc(var(--qvh) * .30) }
.qp-tiles.big.r2{ --rowMax:calc(var(--qvh) * .29) }
.qp-tiles.big.r3{ --rowMax:calc(var(--qvh) * .245) }
.qp-tiles.two{grid-template-columns:1fr 1fr}
.qp-tiles.three{grid-template-columns:repeat(3,1fr)}
/* nieparzysty ogon w dwóch kolumnach — ostatni kafel bierze cały wiersz,
   żeby siatka domykała ekran bez sieroty w rogu */
.qp-tiles.two > .qp-tile.span{grid-column:1 / -1}
/* sześć i więcej opcji: mniejszy medalion i ciaśniejsza typografia,
   inaczej sześć wierszy nie mieści się na niskim telefonie */
.qp-tiles.dense .qp-tile{padding:10px 12px;gap:11px;min-height:0}
.qp-tiles.dense .qp-tile-ico{width:calc(var(--qico) * .74);height:calc(var(--qico) * .74);
  border-radius:clamp(11px,1.8vh,15px)}
.qp-tiles.dense .qp-tile-ico svg{width:calc(var(--qicoS) * .78);height:calc(var(--qicoS) * .78)}
.qp-tiles.dense .qp-num{width:calc(var(--qico) * .74);height:calc(var(--qico) * .74);
  border-radius:clamp(11px,1.8vh,15px);font-size:calc(var(--qnumF) * .84)}
/* Flaga zamiast medalionu z kodem kraju. Proporcja 3:2 jak prawdziwa flaga —
   kwadrat by ją zniekształcił. Cienki pierścień zamiast obramowania, bo biel
   we fladze (Francja, Rosja) inaczej zlewa się z kaflem i pasek „ginie". */
.qp-flag{
  flex:0 0 auto;
  width:var(--qico);
  height:calc(var(--qico) * .667);
  border-radius:clamp(5px,.9vh,8px);
  overflow:hidden;
  position:relative; z-index:1;
  box-shadow:inset 0 0 0 1px rgba(26,23,19,.16),
             0 4px 12px -4px rgba(26,23,19,.34);
  transition:transform 260ms var(--qspring), box-shadow 170ms var(--qease);
}
.qp-flag svg{display:block;width:100%;height:100%}
.qp-tile.on .qp-flag{ transform:scale(1.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55), 0 6px 16px -4px rgba(26,23,19,.42) }
/* Przy jednym wierszu kafle rosna — flaga razem z nimi. */
.qp-tiles.big.r1:not(.three) .qp-flag{
  width:clamp(66px, calc(var(--qvh) * .118), 108px);
  height:calc(clamp(66px, calc(var(--qvh) * .118), 108px) * .667);
  border-radius:clamp(7px,1.2vh,11px);
}
.qp-tiles.dense .qp-flag{ width:calc(var(--qico) * .74); height:calc(var(--qico) * .74 * .667) }

.qp-tiles.dense .qp-tile-txt b{font-size:15.5px}
.qp-tiles.dense .qp-tile-txt span{font-size:11.5px;margin-top:2px}

/* Układ PIONOWY w gęstej siatce — kafel ma wtedy ~130 px (4 wiersze) albo
   ~84 px (6 wierszy). Medalion MUSI zejść razem z nim: przy domyślnych
   wymiarach treść ma 107 px w kaflu wysokim na 84 i medalion jest ucinany
   górną krawędzią karty (kafel ma overflow:hidden). */
.qp-tiles.big.dense .qp-tile{padding:9px 8px;gap:8px}
.qp-tiles.big.dense .qp-tile-txt{min-height:0}
.qp-tiles.big.dense .qp-tile-txt b{font-size:14.5px;line-height:1.2}
.qp-tiles.big.dense .qp-tile-txt span{font-size:11.5px;margin-top:2px}
.qp-tiles.big.dense .qp-tile-ico,
.qp-tiles.big.dense .qp-num{
  width:clamp(34px, calc(var(--qvh) * .052), 48px);
  height:clamp(34px, calc(var(--qvh) * .052), 48px);
  border-radius:clamp(11px,1.7vh,15px);
}
.qp-tiles.big.dense .qp-tile-ico svg{
  width:clamp(18px, calc(var(--qvh) * .026), 24px);
  height:clamp(18px, calc(var(--qvh) * .026), 24px);
}
.qp-tiles.big.dense .qp-num{font-size:clamp(15px, calc(var(--qvh) * .022), 21px)}
.qp-tiles.big.dense .qp-check{width:20px;height:20px;top:7px;right:7px}
.qp-tiles.big.dense .qp-check svg{width:11px;height:11px}
/* Pięć i więcej wierszy — kafel schodzi do ~84 px, więc jeszcze ciaśniej. */
.qp-tiles.big.dense.r5 .qp-tile,
.qp-tiles.big.dense.r6 .qp-tile,
.qp-tiles.big.dense.r7 .qp-tile{padding:6px 6px;gap:4px}
.qp-tiles.big.dense.r5 .qp-tile-ico, .qp-tiles.big.dense.r5 .qp-num,
.qp-tiles.big.dense.r6 .qp-tile-ico, .qp-tiles.big.dense.r6 .qp-num,
.qp-tiles.big.dense.r7 .qp-tile-ico, .qp-tiles.big.dense.r7 .qp-num{
  width:clamp(28px, calc(var(--qvh) * .042), 38px);
  height:clamp(28px, calc(var(--qvh) * .042), 38px);
  border-radius:clamp(9px,1.4vh,13px);
}
.qp-tiles.big.dense.r5 .qp-tile-ico svg,
.qp-tiles.big.dense.r6 .qp-tile-ico svg,
.qp-tiles.big.dense.r7 .qp-tile-ico svg{width:17px;height:17px}
.qp-tiles.big.dense.r5 .qp-num,
.qp-tiles.big.dense.r6 .qp-num,
.qp-tiles.big.dense.r7 .qp-num{font-size:15px}
.qp-tiles.big.dense.r5 .qp-tile-txt b,
.qp-tiles.big.dense.r6 .qp-tile-txt b,
.qp-tiles.big.dense.r7 .qp-tile-txt b{font-size:13.5px}

.qp-tile{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:14px;text-align:left;
  padding:var(--qtileP) clamp(13px,3.6vw,18px);min-height:var(--qtileH);
  background:var(--qwhite);border:0;border-radius:24px;
  /* jeden pierścień zamiast border + osobny box-shadow — inaczej krawędzie
     „spinają się" na zaokrągleniach i widać dwie linie zamiast jednej */
  box-shadow:inset 0 0 0 1.5px rgba(26,23,19,.16), 0 2px 5px rgba(26,23,19,.05), 0 10px 22px -14px rgba(26,23,19,.5);
  transition:transform 130ms var(--qspring), box-shadow 170ms var(--qease), background 140ms var(--qease);
  animation:qpTile 300ms var(--qspring) both;
  transform-style:preserve-3d;
}
/* delikatny połysk górnej krawędzi — to on daje wrażenie bryły, nie cień */
.qp-tile::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0) 42%);
  opacity:.75;
}
@keyframes qpTile{
  from{opacity:0;transform:translateY(26px) rotateX(10deg) scale(.94)}
  to{opacity:1;transform:none}
}
.qp-tile:active{
  transform:scale(.955) translateY(2px) rotateX(3deg);
  box-shadow:inset 0 0 0 1.5px rgba(26,23,19,.24), 0 1px 3px rgba(26,23,19,.10);
}
@media(hover:hover){.qp-tile:hover{
  transform:translateY(-3px);
  box-shadow:inset 0 0 0 1.5px rgba(26,23,19,.26), 0 6px 14px rgba(26,23,19,.07), 0 22px 38px -22px rgba(26,23,19,.55);
}}
/* Zapalony kafel — cała karta wypełnia się gradientem we własnej barwie.
   Tło i cień wstrzykuje JS (kolor jest per opcja), tu tylko warstwa treści. */
.qp-tile.lit{color:#fff}
.qp-tile.lit::before{opacity:.20}
.qp-tile.lit .qp-tile-txt b{color:#fff}
.qp-tile.lit .qp-tile-txt span{color:rgba(255,255,255,.84)}
.qp-tile.lit .qp-tile-ico{
  background:rgba(255,255,255,.20)!important;color:#fff!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.38)!important;
  transform:scale(1.08) rotate(-3deg);
}
.qp-tile.lit .qp-num{
  background:rgba(255,255,255,.20)!important;color:#fff!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.40)!important;
  transform:scale(1.07) rotate(-3deg);
}
.qp-tile.lit .qp-check{
  border-color:rgba(255,255,255,.9)!important;background:#fff!important;transform:scale(1.12);
  box-shadow:0 3px 10px rgba(0,0,0,.18);
}
.qp-tile.lit .qp-check svg{stroke:#1A1713!important}
/* potwierdzenie wyboru — podskok tuż przed zmianą ekranu */
.qp-tile.ok{animation:qpOk 320ms var(--qspring) both}
@keyframes qpOk{
  0%{transform:scale(.955)}
  42%{transform:scale(1.045) translateY(-5px)}
  100%{transform:none}
}
/* rodzeństwo gaśnie, gdy jeden kafel został potwierdzony */
.qp-tiles.chosen .qp-tile:not(.ok){opacity:.32;transform:scale(.97);
  transition:opacity 220ms var(--qease),transform 220ms var(--qease)}
/* fala od punktu dotknięcia */
.qp-rip{
  position:absolute;width:14px;height:14px;border-radius:99px;pointer-events:none;
  background:radial-gradient(circle,rgba(240,112,32,.30),rgba(240,112,32,0) 70%);
  transform:translate(-50%,-50%) scale(0);animation:qpRip 420ms var(--qease) forwards;
}
@keyframes qpRip{to{transform:translate(-50%,-50%) scale(26);opacity:0}}

.qp-tile-ico{
  flex:0 0 auto;width:var(--qico);height:var(--qico);border-radius:clamp(13px,2.2vh,19px);
  display:grid;place-items:center;
  background:var(--qpaper);color:var(--qg3);position:relative;z-index:1;
  transition:background 170ms var(--qease),color 170ms var(--qease),
             transform 260ms var(--qspring),box-shadow 170ms var(--qease);
}
.qp-tile-ico svg{width:var(--qicoS);height:var(--qicoS);display:block}
.qp-tile-txt{flex:1 1 auto;min-width:0}
.qp-tile-txt b{display:block;font-size:17px;font-weight:600;line-height:1.24;letter-spacing:-.006em}
.qp-tile-txt span{display:block;font-size:12.8px;color:var(--qink50);margin-top:4px;line-height:1.36;font-weight:500}

/* dwa albo cztery kafle → karta pionowa na cały slot */
.qp-tiles.big .qp-tile{
  flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:13px;padding:16px 14px;
}
.qp-tiles.rows .qp-tile{gap:15px;padding:12px 16px}
/* .qp-tile-txt ma flex:1 z reguły bazowej — w układzie pionowym rozpychało go
   to na całą wysokość kafla i treść lądowała przy górnej krawędzi zamiast na środku */
.qp-tiles.big .qp-tile-txt{flex:0 0 auto;display:flex;flex-direction:column;
  justify-content:flex-start;min-height:0}
/* Rezerwa na drugi wiersz TYLKO tam, gdzie podpisy realnie są — inaczej
   etykieta bez podpisu wisiała w górnej połowie karty. */
.qp-tiles.big:has(.qp-tile-txt span) .qp-tile-txt{min-height:50px}
.qp-tiles.big.two:has(.qp-tile-txt span) .qp-tile-txt{min-height:40px}
.qp-tiles.big .qp-tile-txt b{font-size:18.5px}
.qp-tiles.big .qp-tile-txt span{font-size:12.5px;max-width:26ch;margin-left:auto;margin-right:auto}
/* wielokrotny wybór w układzie pionowym — ptaszek idzie w prawy górny róg,
   żeby nie zabierał wiersza podpisowi */
.qp-tiles.big .qp-check{position:absolute;top:10px;right:10px}

.qp-check{
  flex:0 0 auto;width:24px;height:24px;border-radius:99px;border:1.5px solid var(--qink15);
  display:grid;place-items:center;transition:all 200ms var(--qspring);z-index:1;
}
.qp-tile.on .qp-check{border-color:var(--qg2);background:var(--qg2);transform:scale(1.08)}
.qp-check svg{width:13px;height:13px;stroke:#fff;stroke-width:3;fill:none;
  stroke-dasharray:18;stroke-dashoffset:18;transition:stroke-dashoffset 280ms var(--qease) 70ms}
.qp-tile.on .qp-check svg{stroke-dashoffset:0}

/* Medalion liczbowy (klasa, minuty) i monogram języka — ten sam gradient
   co medalion ikony, tylko treścią jest typografia. */
.qp-num{
  flex:0 0 auto;display:grid;place-items:center;
  width:var(--qico);height:var(--qico);border-radius:clamp(13px,2.2vh,19px);
  font-weight:700;font-size:var(--qnumF);line-height:1;letter-spacing:-.04em;
  color:#fff;font-variant-numeric:tabular-nums;position:relative;z-index:1;
  transition:transform 260ms var(--qspring),box-shadow 240ms var(--qease);
}
.qp-num.qp-num-sm{font-size:calc(var(--qnumF) * .72);letter-spacing:-.01em}

/* ── Pole tekstowe (imię) ────────────────────────────────────────────────── */
.qp-fieldwrap{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-start;
  min-height:0;gap:10px;padding-top:6px}
.qp-input{
  width:100%;min-height:clamp(62px, calc(var(--qvh) * .095), 86px);
  border:0;border-radius:22px;background:var(--qwhite);
  padding:18px 20px;text-align:center;
  /* 24px, nie 16 — iOS przybliża pole poniżej 16px, a to główny akt tego ekranu */
  /* !important, bo panel ma globalne `input{font-size:16px!important}` (obrona
     przed przybliżaniem na iOS). Tu i tak jesteśmy grubo powyżej 16 px. */
  font:700 24px/1.25 inherit;font-size:clamp(21px, calc(var(--qvh) * .029), 26px)!important;
  color:var(--qink);letter-spacing:-.3px;
  caret-color:var(--qg2);
  box-shadow:inset 0 0 0 1.5px rgba(26,23,19,.16), 0 2px 5px rgba(26,23,19,.05),
             0 10px 22px -14px rgba(26,23,19,.5);
  outline:none;-webkit-appearance:none;appearance:none;
  transition:box-shadow 200ms var(--qease);
  animation:qpTile 300ms var(--qspring) both;
}
.qp-input::placeholder{color:var(--qink30);font-weight:600}
.qp-input:focus{
  box-shadow:inset 0 0 0 2px var(--qg2), 0 2px 5px rgba(240,112,32,.10),
             0 14px 30px -16px rgba(240,112,32,.75), 0 0 0 4px rgba(249,200,67,.26);
}

/* ── Stopka z CTA ────────────────────────────────────────────────────────── */
.qp-foot{flex:0 0 auto;padding-top:2px}
.qp-cta{
  width:100%;min-height:clamp(48px,7vh,58px);border-radius:18px;
  font-size:clamp(15px,2.1vh,17px);font-weight:800;letter-spacing:-.01em;
  color:#fff;text-shadow:0 1px 2px rgba(120,45,0,.28);
  background:linear-gradient(135deg,#F5A93A,#EF6A18 52%,#DC4E06);
  box-shadow:0 10px 28px rgba(240,112,32,.34),inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform 140ms var(--qspring),box-shadow 240ms var(--qease),filter 160ms var(--qease);
  display:grid;place-items:center;position:relative;overflow:hidden;
}
.qp-cta:active{transform:scale(.978)}
.qp-cta[disabled]{filter:grayscale(.92);opacity:.42;box-shadow:none;cursor:not-allowed}

/* ── Ekran planu ─────────────────────────────────────────────────────────── */
.qp-plan{flex:1 1 auto;display:flex;flex-direction:column;gap:6px;min-height:0}
/* Wiersze planu dzielą dostępną wysokość tak samo jak kafle: `1fr` z sufitem
   liczonym z liczby wierszy (--rows ustawia JS). Bez sufitu przy trzech
   pozycjach powstałyby pasy na pół ekranu, bez `1fr` — pustka w środku. */
.qp-plan-list{
  flex:1 1 auto;display:grid;grid-auto-rows:1fr;gap:7px;min-height:0;align-content:center;
  --rows:5;
  max-height:calc(var(--rows) * 92px + (var(--rows) - 1) * 7px);
}
.qp-line{
  display:flex;align-items:center;gap:11px;text-align:left;min-height:0;
  padding:9px 14px;border-radius:16px;background:var(--qwhite);
  box-shadow:inset 0 0 0 1.5px rgba(26,23,19,.10), 0 2px 5px rgba(26,23,19,.04),
             0 8px 18px -14px rgba(26,23,19,.5);
  animation:qpTile 300ms var(--qspring) both;
}
.qp-line b{
  display:block;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--qink40);margin-bottom:2px;
}
.qp-line em{display:block;font-style:normal;font-weight:600;font-size:14.5px;line-height:1.3;
  letter-spacing:-.01em;color:var(--qink)}
.qp-chk{
  width:24px;height:24px;border-radius:99px;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(150deg,#FBD873,var(--qg2) 52%,var(--qg3));
  box-shadow:0 5px 12px -4px rgba(240,112,32,.62),inset 0 1px 0 rgba(255,255,255,.45);
}
.qp-chk svg{width:12px;height:12px;stroke:#fff;stroke-width:3.4;fill:none}

/* ── Ekran odliczania — liczba dni jest bohaterem ────────────────────────── */
.qp-cd{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:2px;min-height:0}
.qp-cd-eyebrow{
  font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--qink50);margin:0 0 2px;
}
.qp-cd-num{
  font-weight:700;font-size:min(126px, calc(var(--qvh) * .18));
  /* line-height:1 obcina kroj u dolu — pudelko tekstu jest wtedy nizsze niz
     glify i element melduje 12 px nadmiaru przewijania. 1.12 domyka to bez
     widocznej luki. */
  line-height:1.2;
  letter-spacing:-.055em;font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg,var(--qg1),var(--qg2) 55%,var(--qg3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:qpCdPop .6s var(--qspring) both;
}
@keyframes qpCdPop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
.qp-cd-days{font-size:12px;font-weight:800;letter-spacing:.34em;text-transform:uppercase;
  color:var(--qink40);padding-left:.34em;margin-bottom:10px}

/* ── Szacunek dla ustawień dostępności ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .qp-root, .qp-root *,
  .qp-root *::before, .qp-root *::after{
    animation-duration:1ms!important;animation-iteration-count:1!important;
    transition-duration:1ms!important;
  }
  .qp-root::before{animation:none!important}
  .qp-rail i::after{display:none}
}


/* ── Buddy reagujący (qp-react) ─────────────────────────────────────────────
   Wraca po przebudowie silnika — nowy quiz pokazywał maskotkę wyłącznie na
   pierwszym ekranie i „reakcje po drodze" zniknęły.
   Leży w korzeniu quizu, nie w scenie, więc przeżywa przerysowanie pytania:
   dymek zaczyna się przy jednym ekranie, a kończy przy następnym.
   Pokazuje się TYLKO na czas reakcji — gdyby stał na stałe, zabierałby
   wysokość kaflom na gęstych ekranach. */
.qp-react{
  position:absolute;
  left:clamp(12px,3.4vw,20px);
  /* `--qkb` to wysokosc klawiatury. Bez tego dymek zostawal na dole ekranu,
     czyli POD klawiatura, i przy pytaniu o imie Buddy znikal z pola widzenia —
     akurat tam, gdzie wita po imieniu (zgloszenie wlasciciela 2026-09-02). */
  bottom:calc(clamp(12px,2.2vh,20px) + env(safe-area-inset-bottom) + var(--qkb, 0px));
  transition:bottom 220ms var(--qease);
  z-index:40;
  display:flex; align-items:flex-end; gap:9px;
  max-width:min(88%, 420px);
  pointer-events:none;
  opacity:0; transform:translateY(10px) scale(.96);
  transition:opacity 220ms var(--qease), transform 300ms var(--qspring);
}
.qp-react.on{ opacity:1; transform:none }
.qp-react-bud{
  position:relative; flex:0 0 auto;
  width:clamp(44px,7.2vh,58px); height:clamp(44px,7.2vh,58px);
  border-radius:50%; overflow:hidden;
  background-size:cover; background-position:center 18%;
  box-shadow:0 0 0 2px rgba(249,200,67,.42), 0 8px 20px -8px rgba(122,44,0,.45);
}
/* Poza Buddyego to grafika, nie wideo — filmiki nie roznia sie emocja,
   a w kolku 50 px i tak nie widac ruchu glowy. Plotno grafik jest szersze niz
   sama sylwetka, wiec kadrujemy: szerokosc 130% i lekkie przesuniecie w gore. */
/* CALA poza w kolku, wysrodkowana. Bylo `width:132%` bez ograniczenia
   wysokosci — przy takim zapisie `object-fit` nie ma na czym dzialac (pudelko
   obrazka ma auto-wysokosc), wiec kolko przycinalo psa i widac bylo sama lape.
   Teraz obrazek wypelnia pudelko kolka, `contain` miesci calego Buddyego,
   a `padding` daje mu oddech przy krawedzi. */
.qp-react-bud img{
  position:absolute; inset:0;
  width:100%; height:100%;
  padding:5px;
  object-fit:contain; object-position:center 58%;
  animation:qpPoza 380ms var(--qspring) both;
}
/* BEZ `translate(-50%,-50%)`. Ten przesuw byl potrzebny, gdy obrazek stal na
   `left/top:50%`; po przejsciu na `inset:0` zsuwal go o polowe wlasnego
   rozmiaru poza kolko i widac bylo sama lape (zgloszenie wlasciciela ze zrzutu
   2026-09-02). Zostaje samo podskoczenie. */
@keyframes qpPoza{
  from{ transform:scale(.72) rotate(-6deg); opacity:0 }
  to  { transform:scale(1) rotate(0); opacity:1 }
}
@media (prefers-reduced-motion: reduce){
  .qp-react-bud img{ animation:none }
}
/* Dymek: ogon po lewej, tekst zawsze czytelny na kremowym tle strony. */
.qp-react-txt{
  position:relative; margin:0 0 5px;
  padding:9px 13px;
  background:var(--qwhite, #fff);
  border-radius:16px 16px 16px 5px;
  font-size:13.5px; line-height:1.42; font-weight:500;
  color:var(--qink, #1A1713);
  text-wrap:balance;
  box-shadow:inset 0 0 0 1px rgba(26,23,19,.07),
             0 2px 5px rgba(26,23,19,.05),
             0 12px 26px -12px rgba(26,23,19,.40);
}
@media (max-height:620px){ .qp-react{ display:none } }
@media (prefers-reduced-motion: reduce){
  .qp-react{ transition:opacity 120ms linear; transform:none }
  .qp-react.on{ transform:none }
}