/* ═══════════════════════════════════════════════════════════════════
   SZKOŁA 4-6 — ARKUSZ STYLÓW GRACZA
   ═══════════════════════════════════════════════════════════════════
   Prefiks .sz46- (sprawdzony grepem 2026-08-15 — wolny).

   NAJWAŻNIEJSZE 20 LINII CAŁEGO PLIKU to siatka kadru poniżej. Stary
   silnik miał kontener w przepływie dokumentu z min-height:100vh, więc
   rósł w nieskończoność i przycisk odpowiedzi lądował poza ekranem.
   Tutaj kontener jest przypięty do krawędzi, a JEDYNYM elementem, który
   ma prawo się przewijać, jest strefa treści pytania.

   Wcięcie ekranu (env safe-area) doliczane DOKŁADNIE RAZ — w pasku
   górnym i w stopce. Podwójne doliczenie to błąd #206.
   ══════════════════════════════════════════════════════════════════ */

.sz46 {
  --sz46-paper: #FFFDF7;
  --sz46-ink: #2A2118;
  --sz46-ink-2: #6B6355;
  --sz46-line: #E9E0CD;
  --sz46-soft: #F6EFE0;
  --sz46-g1: #F9C843;
  --sz46-g2: #F07020;
  --sz46-green: #0E9F4F;
  --sz46-green-bg: #E7F7EE;
  --sz46-amber: #D97706;
  --sz46-amber-bg: #FDF3E0;
  --sz46-spring: cubic-bezier(.34, 1.56, .64, 1);
  --sz46-ease: cubic-bezier(.4, 0, .2, 1);

  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--sz46-paper);
  color: var(--sz46-ink);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  overscroll-behavior: contain;
}
.sz46 *, .sz46 *::before, .sz46 *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.sz46 button { font-family: inherit; cursor: pointer; touch-action: manipulation; }

/* ── pasek górny ───────────────────────────────────────────────── */
.sz46-head {
  display: flex; align-items: center; gap: 10px;
  padding: calc(6px + env(safe-area-inset-top)) 14px 10px;
}
.sz46-x {
  width: 32px; height: 32px; flex: 0 0 32px; border: none; border-radius: 11px;
  background: var(--sz46-soft); color: var(--sz46-ink-2);
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s var(--sz46-spring);
}
.sz46-x:active { transform: scale(.9); }
.sz46-dots { flex: 1; display: flex; gap: 5px; align-items: center; min-width: 0; }
.sz46-dot {
  flex: 1; height: 6px; border-radius: 99px; background: var(--sz46-line);
  transition: background .32s var(--sz46-ease), transform .32s var(--sz46-spring);
}
.sz46-dot.done { background: linear-gradient(90deg, var(--sz46-g1), var(--sz46-g2)); }
.sz46-dot.now { background: var(--sz46-g1); transform: scaleY(1.8); }
.sz46-count {
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 14px;
  color: var(--sz46-ink-2); font-variant-numeric: tabular-nums;
}
.sz46-xp {
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 14px;
  color: #0B7A3D; background: var(--sz46-green-bg); border-radius: 99px;
  padding: 3px 11px; font-variant-numeric: tabular-nums;
  transition: transform .3s var(--sz46-spring);
}
.sz46-xp.bump { transform: scale(1.22); }

/* ── scena i karta zadania ─────────────────────────────────────── */
.sz46-stage { position: relative; min-height: 0; overflow: hidden; }
.sz46-card {
  position: absolute; inset: 0;
  display: grid; grid-template-rows: minmax(0, 1fr) auto auto;
}
.sz46-card.in-r { animation: sz46InR .2s var(--sz46-spring) both; }
.sz46-card.out-l { animation: sz46OutL .12s var(--sz46-ease) forwards; }
@keyframes sz46InR { from { transform: translateX(58%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sz46OutL { to { transform: translateX(-42%); opacity: 0; } }

/* JEDYNY element, który się przewija. */
.sz46-qzone {
  min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 2px 16px 14px; scrollbar-width: none;
  display: flex; flex-direction: column;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 14px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 14px), transparent);
}
.sz46-qzone::-webkit-scrollbar { display: none; }
.sz46-q {
  /* Skala z ekranem (dyspozycja 2026-08-19): SE ~19px, iPhone Pro Max ~24px.
     dvh, nie vh — pasek Safari nie zmienia rozmiaru w trakcie czytania. */
  font-size: clamp(18px, 2.35dvh, 22px);
  line-height: 1.42; font-weight: 500; letter-spacing: -.005em;
}

.sz46-hintbtn {
  margin-top: 13px; display: inline-flex; align-items: center; gap: 7px;
  border: 1.5px dashed #E3C98A; background: #FFFBEF; color: #95651A;
  border-radius: 99px; padding: 7px 14px; font-size: 12.5px; font-weight: 700;
  transition: transform .14s var(--sz46-spring), background .2s;
}
.sz46-hintbtn::before { content: '🐶'; }
.sz46-hintbtn:active { transform: scale(.96); }
.sz46-hintbtn:disabled { opacity: .55; }
.sz46-hint {
  margin-top: 10px; display: flex; gap: 9px; padding: 11px 13px;
  background: #FFF8E4; border: 1.5px solid #F2DCA4; border-left: 4px solid var(--sz46-g1);
  border-radius: 12px; font-size: 13.5px; line-height: 1.5; color: #7A5A16; font-weight: 600;
  animation: sz46Pop .34s var(--sz46-spring);
}
@keyframes sz46Pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }

/* ── warianty odpowiedzi ───────────────────────────────────────── */
.sz46-opts { padding: 0 16px; display: flex; flex-direction: column; gap: 9px; }
.sz46-opts-2 { flex-direction: row; }
.sz46-opts-2 .sz46-opt { flex: 1; justify-content: center; }
.sz46-opt {
  display: flex; align-items: center; gap: 13px; min-height: 68px;
  color: var(--sz46-ink);   /* iOS malowal tekst przycisku na niebiesko */
  padding: 12px 16px; border: 2px solid var(--sz46-line); border-radius: 19px;
  background: #fff; text-align: left; opacity: 0;
  animation: sz46OptIn .22s var(--sz46-spring) forwards;
  transition: transform .16s var(--sz46-spring), border-color .18s, background .18s, box-shadow .18s;
}
@keyframes sz46OptIn { from { opacity: 0; transform: translateY(11px); } to { opacity: 1; transform: none; } }
.sz46-opt:active:not(:disabled) { transform: scale(.975); }
.sz46-let {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 14px;
  background: var(--sz46-soft); color: #8A7A5E; display: flex;
  align-items: center; justify-content: center;
  font-family: 'Baloo 2', sans-serif; font-size: 19px; font-weight: 800;
  transition: background .18s, color .18s, transform .3s var(--sz46-spring);
}
.sz46-box {
  width: 24px; height: 24px; flex: 0 0 24px; border-radius: 8px;
  border: 2.5px solid var(--sz46-line); background: #fff; transition: .18s;
}
.sz46-otxt { font-size: clamp(17.5px, 2.2dvh, 20px); font-weight: 700; line-height: 1.3; }
.sz46-opt.sel { border-color: var(--sz46-g1); background: #FFFBEF; box-shadow: 0 0 0 3.5px rgba(249, 200, 67, .24); }
.sz46-opt.sel .sz46-let { background: linear-gradient(135deg, var(--sz46-g1), var(--sz46-g2)); color: #fff; transform: scale(1.07); }
.sz46-opt.sel .sz46-box { border-color: var(--sz46-g2); background: var(--sz46-g2); box-shadow: inset 0 0 0 3px #fff; }
.sz46-opt.ok { border-color: var(--sz46-green); background: var(--sz46-green-bg); animation: sz46Puls .42s var(--sz46-spring); }
.sz46-opt.ok .sz46-let, .sz46-opt.ok .sz46-box { background: var(--sz46-green); color: #fff; border-color: var(--sz46-green); }
.sz46-opt.bad {
  border-color: #E5484D; background: #FDF0F0;
  animation: sz46Shake .18s ease-in-out 2;
}
.sz46-opt.bad .sz46-let, .sz46-opt.bad .sz46-box {
  background: #E5484D; color: #fff; border-color: #E5484D;
}
@keyframes sz46Puls { 0% { transform: scale(1); } 42% { transform: scale(1.035); } 100% { transform: scale(1); } }
@keyframes sz46Shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* pole wpisywane */
.sz46-input-wrap { padding: 0 16px; }
.sz46-input {
  width: 100%; min-height: 60px; border: 2.5px solid var(--sz46-line);
  border-radius: 17px; background: #fff; padding: 12px 18px;
  font-family: 'Baloo 2', sans-serif; font-size: 22px !important; font-weight: 800;
  color: var(--sz46-ink); text-align: center; transition: .18s;
}
.sz46-input:focus { outline: none; border-color: var(--sz46-g1); box-shadow: 0 0 0 4px rgba(249, 200, 67, .22); }
.sz46-input::placeholder { font-size: 15px; font-weight: 600; color: #B8AC94; }
.sz46-input.ok { border-color: var(--sz46-green); background: var(--sz46-green-bg); color: #0B7A3D; }
.sz46-input.bad { border-color: var(--sz46-amber); background: var(--sz46-amber-bg); color: #92400E; }

/* łączenie w pary */
.sz46-match { padding: 0 16px; display: flex; gap: 10px; }
.sz46-match-col { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.sz46-mi {
  min-height: 46px; padding: 8px 12px; border: 2px solid var(--sz46-line);
  border-radius: 14px; background: #fff; font-size: 14px; font-weight: 600;
  line-height: 1.28; transition: .16s var(--sz46-spring);
}
.sz46-mi.act { border-color: var(--sz46-g1); background: #FFFBEF; transform: scale(1.03); }
.sz46-mi.done { border-color: #B9E8CE; background: var(--sz46-green-bg); color: #0B7A3D; }
.sz46-match.ok .sz46-mi { border-color: var(--sz46-green); }
.sz46-match.bad .sz46-mi.done { border-color: var(--sz46-amber); background: var(--sz46-amber-bg); color: #92400E; }

/* ustawianie w kolejności */
.sz46-order { padding: 0 16px; display: flex; flex-direction: column; gap: 8px; }
.sz46-oi {
  display: flex; align-items: center; gap: 11px; min-height: 50px;
  padding: 9px 13px; border: 2px solid var(--sz46-line); border-radius: 15px;
  background: #fff; font-size: 15px; font-weight: 600; text-align: left;
  transition: .16s var(--sz46-spring);
}
.sz46-oi-n {
  width: 28px; height: 28px; flex: 0 0 28px; border-radius: 9px;
  background: var(--sz46-soft); color: #8A7A5E; display: flex;
  align-items: center; justify-content: center;
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 15px;
}
.sz46-oi.sel { border-color: var(--sz46-g1); background: #FFFBEF; }
.sz46-oi.sel .sz46-oi-n { background: linear-gradient(135deg, var(--sz46-g1), var(--sz46-g2)); color: #fff; }
.sz46-order.ok .sz46-oi { border-color: var(--sz46-green); }
.sz46-order.bad .sz46-oi { border-color: var(--sz46-amber); }

/* koszyki */
.sz46-sort { padding: 0 16px; display: flex; flex-direction: column; gap: 10px; }
.sz46-sort-items { display: flex; flex-wrap: wrap; gap: 7px; }
.sz46-si {
  padding: 8px 13px; border: 2px solid var(--sz46-line); border-radius: 99px;
  background: #fff; font-size: 14px; font-weight: 700; transition: .16s var(--sz46-spring);
}
.sz46-si.act { border-color: var(--sz46-g1); background: #FFFBEF; transform: scale(1.06); }
.sz46-si.done { opacity: .32; }
.sz46-bins { display: flex; gap: 9px; }
.sz46-bin {
  flex: 1; min-height: 74px; border: 2.5px dashed var(--sz46-line); border-radius: 15px;
  background: var(--sz46-soft); display: flex; flex-direction: column; gap: 5px;
  align-items: center; justify-content: flex-start; padding: 8px 7px; transition: .16s;
}
.sz46-bin-l { font-size: 12px; font-weight: 800; color: var(--sz46-ink-2); }
.sz46-bin-drop { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.sz46-chip {
  background: #fff; border: 1.5px solid var(--sz46-g1); border-radius: 99px;
  padding: 2px 8px; font-size: 11.5px; font-weight: 700;
  animation: sz46Pop .3s var(--sz46-spring);
}
.sz46-sort.ok .sz46-bin { border-color: var(--sz46-green); border-style: solid; }
.sz46-sort.bad .sz46-bin { border-color: var(--sz46-amber); border-style: solid; }

/* ── stopka i przycisk ─────────────────────────────────────────── */
.sz46-foot { padding: 12px 16px calc(10px + env(safe-area-inset-bottom)); }
.sz46-go {
  width: 100%; min-height: 56px; border: none; border-radius: 18px;
  background: linear-gradient(135deg, var(--sz46-g1), var(--sz46-g2)); color: #fff;
  font-family: 'Baloo 2', sans-serif; font-size: 19px; font-weight: 800;
  box-shadow: 0 7px 20px rgba(240, 112, 32, .3), inset 0 1px 0 rgba(255, 255, 255, .34);
  transition: transform .12s var(--sz46-spring), filter .2s;
}
.sz46-go:active:not(:disabled) { transform: scale(.975); }
.sz46-go:disabled { filter: grayscale(.65); opacity: .5; box-shadow: none; }
.sz46-go-2 {
  background: #fff; color: var(--sz46-ink-2); border: 2px solid var(--sz46-line);
  box-shadow: none; font-size: 16px; min-height: 48px;
}

/* ── arkusz rozwiązania ────────────────────────────────────────── */
.sz46-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; height: 74%;
  background: linear-gradient(180deg, var(--sz46-paper), #FFF8EA);
  border-radius: 26px 26px 0 0; box-shadow: 0 -14px 42px rgba(42, 33, 24, .17);
  transform: translateY(101%); transition: transform .22s var(--sz46-spring);
  z-index: 30; display: flex; flex-direction: column; padding: 9px 16px 0;
}
.sz46-sheet.up { transform: translateY(0); }
.sz46-grab { width: 42px; height: 4.5px; border-radius: 99px; background: #E4D9C0; margin: 0 auto 9px; }
.sz46-sbody {
  flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 16px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 16px), transparent);
}
.sz46-sbody::-webkit-scrollbar { display: none; }
.sz46-snext { padding: 9px 0 calc(9px + env(safe-area-inset-bottom)); }

.sz46-brow { display: flex; gap: 11px; align-items: flex-start; }
.sz46-bubble {
  flex: 1; position: relative; background: linear-gradient(135deg, #FFF8E7, #FFEFD0);
  border: 1.5px solid #F2DCA4; border-radius: 17px; padding: 12px 14px;
  font-size: 15px; line-height: 1.46; font-weight: 600; color: #77571B;
  opacity: 0; transition: opacity .15s var(--sz46-ease);
}
.sz46-bubble.sz46-bubble-on { opacity: 1; }
.sz46-bubble::before {
  content: ''; position: absolute; left: -8px; top: 24px; width: 14px; height: 14px;
  background: #FFF8E7; border-left: 1.5px solid #F2DCA4; border-bottom: 1.5px solid #F2DCA4;
  transform: rotate(45deg); border-radius: 0 0 0 4px;
}

.sz46-cel { display: flex; flex-direction: column; gap: 3px; margin-top: 14px; padding: 11px 13px; background: #fff; border: 1.5px solid var(--sz46-line); border-radius: 14px; }
.sz46-cel-l { font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #A99B84; }
.sz46-cel-t { font-size: 14.5px; font-weight: 700; line-height: 1.44; }
.sz46-anal { display: flex; gap: 9px; margin-top: 10px; padding: 11px 13px; background: #F4F0FF; border: 1.5px solid #DCD2F5; border-radius: 14px; font-size: 13.5px; line-height: 1.5; color: #4B3A87; font-weight: 600; }
.sz46-anal-ic { flex: 0 0 auto; }

.sz46-step { margin-top: 12px; opacity: 0; animation: sz46StepIn .24s var(--sz46-spring) forwards; }
@keyframes sz46StepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sz46-step-h { display: flex; gap: 10px; align-items: flex-start; }
.sz46-step-n {
  width: 25px; height: 25px; flex: 0 0 25px; border-radius: 8px;
  background: linear-gradient(135deg, var(--sz46-g1), var(--sz46-g2)); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Baloo 2', sans-serif; font-size: 14px; font-weight: 800;
}
.sz46-step-t { font-size: 14.5px; line-height: 1.5; font-weight: 600; padding-top: 2px; }
.sz46-vis { margin: 9px 0 0 35px; padding: 10px 8px; background: #fff; border: 1.5px solid var(--sz46-line); border-radius: 14px; }

.sz46-ans { margin-top: 14px; display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--sz46-green-bg); border: 1.5px solid #A8E2C2; border-radius: 15px; }
.sz46-ans-ic { width: 27px; height: 27px; flex: 0 0 27px; border-radius: 50%; background: var(--sz46-green); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; }
.sz46-ans-l { display: block; font-size: 9.5px; font-weight: 800; color: #0B7A3D; letter-spacing: .09em; text-transform: uppercase; }
.sz46-ans-v { display: block; font-family: 'Baloo 2', sans-serif; font-size: 19px; font-weight: 800; color: #0A5C2F; line-height: 1.16; }

.sz46-why { margin-top: 10px; display: flex; flex-direction: column; gap: 3px; padding: 11px 13px; background: #FFF8E4; border: 1.5px solid #F2DCA4; border-radius: 14px; font-size: 13.5px; line-height: 1.5; color: #7A5A16; font-weight: 600; }
.sz46-why-l { font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #B08A2A; }
.sz46-uwaga { margin: 10px 0 14px; display: flex; gap: 9px; padding: 11px 13px; background: var(--sz46-amber-bg); border: 1.5px solid #F0D5A8; border-radius: 14px; font-size: 13px; line-height: 1.5; color: #92400E; font-weight: 600; }

/* ── Buddy ─────────────────────────────────────────────────────── */
.sz46-bud {
  border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  background: radial-gradient(circle at 50% 36%, #FFF7DE, #FAE3AC);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .9), 0 4px 14px rgba(180, 120, 20, .24);
  display: flex; align-items: center; justify-content: center;
}
.sz46-bud-img { width: 106%; height: 106%; object-fit: contain; display: block; }
.sz46-bud-sm { width: 36px; height: 36px; }
.sz46-bud-md { width: 74px; height: 74px; border-radius: 22px; }
.sz46-bud-lg { width: 148px; height: 148px; }
.sz46-bud-end { width: 148px; height: 148px; }
.sz46-bud-slot:empty { display: none; }

.sz46-fx-skok { animation: sz46Skok .62s var(--sz46-spring); }
.sz46-fx-obrot { animation: sz46Obrot .7s var(--sz46-spring); }
.sz46-fx-kiwa { animation: sz46Kiwa .9s var(--sz46-ease); }
.sz46-fx-drgnij { animation: sz46Drgnij .4s ease-in-out; }
@keyframes sz46Skok { 0%, 100% { transform: translateY(0) scale(1); } 30% { transform: translateY(-12px) scale(1.08); } 60% { transform: translateY(0) scale(.97); } }
@keyframes sz46Obrot { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(360deg) scale(1.1); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes sz46Kiwa { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
@keyframes sz46Drgnij { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px) rotate(-3deg); } 75% { transform: translateX(4px) rotate(3deg); } }

/* delikatny oddech w spoczynku — Buddy nie jest naklejką */
.sz46-bud-md, .sz46-bud-lg { animation: sz46Oddech 3.4s ease-in-out infinite; }
@keyframes sz46Oddech { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }

/* ── nagrody ───────────────────────────────────────────────────── */
.sz46-fx { position: absolute; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.sz46-nagroda {
  position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%);
  width: min(280px, 82%); padding: 20px 18px; text-align: center;
  background: linear-gradient(160deg, #FFFDF7, #FFF1D2);
  border: 2px solid var(--sz46-g1); border-radius: 22px;
  box-shadow: 0 18px 46px rgba(180, 120, 20, .32);
  display: flex; flex-direction: column; gap: 5px; pointer-events: none;
  animation: sz46NagrodaIn .46s var(--sz46-spring);
}
.sz46-nagroda.klik { pointer-events: auto; cursor: pointer; }
.sz46-nagroda.out { animation: sz46NagrodaOut .3s var(--sz46-ease) forwards; }
@keyframes sz46NagrodaIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.6) rotate(-6deg); } to { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); } }
@keyframes sz46NagrodaOut { to { opacity: 0; transform: translate(-50%, -62%) scale(.92); } }
.sz46-nagroda-e { font-size: 44px; line-height: 1; }
.sz46-nagroda-t { font-family: 'Baloo 2', sans-serif; font-size: 19px; font-weight: 800; color: #8A6A16; }
.sz46-nagroda-o { font-size: 13.5px; line-height: 1.45; color: var(--sz46-ink-2); font-weight: 600; }
.sz46-naklejka { margin-top: 6px; align-self: center; background: #fff; border: 1.5px solid var(--sz46-g1); border-radius: 99px; padding: 5px 13px; font-size: 13px; font-weight: 700; color: #8A6A16; }

/* ── wznowienie sesji ──────────────────────────────────────────── */
.sz46-resume {
  position: absolute; inset: 0; z-index: 60; display: flex;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(42, 33, 24, .3); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: sz46Fade .24s var(--sz46-ease);
}
@keyframes sz46Fade { from { opacity: 0; } to { opacity: 1; } }
.sz46-resume-card {
  width: min(320px, 100%); background: var(--sz46-paper); border-radius: 24px;
  padding: 22px 20px; text-align: center; display: flex; flex-direction: column;
  align-items: center; gap: 9px; box-shadow: 0 22px 60px rgba(42, 33, 24, .3);
  animation: sz46Pop .4s var(--sz46-spring);
}
.sz46-resume-t { font-family: 'Baloo 2', sans-serif; font-size: 19px; font-weight: 800; color: #8A6A16; min-height: 22px; }
.sz46-resume-s { font-size: 14px; color: var(--sz46-ink-2); font-weight: 600; }
.sz46-resume-btns { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }

/* ── koniec zestawu ────────────────────────────────────────────── */
.sz46-end {
  position: absolute; inset: 0; z-index: 40;
  background: linear-gradient(180deg, var(--sz46-paper), #FFF4DE);
  display: none; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px calc(24px + env(safe-area-inset-left)) calc(24px + env(safe-area-inset-bottom));
  text-align: center; gap: 3px;
}
.sz46-end.show { display: flex; animation: sz46Pop .44s var(--sz46-spring); }
.sz46-end-n {
  font-family: 'Baloo 2', sans-serif; font-size: 54px; font-weight: 800; line-height: 1.05;
  margin-top: 12px; font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--sz46-g1), #E8580A);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sz46-end-l { font-family: 'Baloo 2', sans-serif; font-size: 19px; font-weight: 800; color: #8A6A16; }
.sz46-end-s { font-size: 14.5px; color: var(--sz46-ink-2); font-weight: 600; line-height: 1.5; max-width: 250px; margin-top: 6px; min-height: 22px; }
.sz46-end-chips { display: flex; gap: 9px; margin-top: 15px; }
.sz46-end-chip { font-family: 'Baloo 2', sans-serif; font-size: 14px; font-weight: 800; padding: 7px 14px; border-radius: 99px; }
.sz46-end-chip.xp { background: var(--sz46-green-bg); color: #0B7A3D; }
.sz46-end-chip.pr { background: #FDF2D4; color: #B45309; }
.sz46-end-btns { width: min(300px, 100%); display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }

.sz46-pusto { padding: 40px 24px; text-align: center; font-size: 15px; color: var(--sz46-ink-2); font-weight: 600; }

/* ── mniejsze ekrany ───────────────────────────────────────────── */
@media (max-height: 700px) {
  .sz46-q { font-size: 17.5px; }
  .sz46-opt { min-height: 50px; }
  .sz46-go { min-height: 52px; font-size: 18px; }
  .sz46-sheet { height: 78%; }
}

@media (prefers-reduced-motion: reduce) {
  .sz46 *, .sz46 *::before, .sz46 *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  /* Bezpiecznik: elementy, które wjeżdżają z opacity 0, muszą być widoczne
     nawet gdy animacje w ogóle nie wystartują. Bez tego wyłączenie animacji
     zostawia puste miejsce zamiast odpowiedzi — złapane w próbie 2026-08-15. */
  .sz46-opt, .sz46-step, .sz46-bubble { opacity: 1 !important; }
}

/* Schemat w TREŚCI zadania (zadania na odczyt: zegar, termometr, diagram).
   Osadzony w strefie pytania, więc przewija się razem z nią — nigdy nie
   wypycha odpowiedzi poza kadr. */
.sz46-qvis {
  margin-top: 12px; padding: 10px 8px; background: #fff;
  border: 1.5px solid var(--sz46-line); border-radius: 14px;
}
.sz46-qvis .szv { max-height: 210px; }

/* ── combo w pasku (seria poprawnych) — 2026-08-19 ─────────────────
   Rośnie kolorem z serią: złoto → pomarańcz → ogień z poświatą.
   Znika bez animacji przy pomyłce — kara nigdy nie jest głośniejsza. */
.sz46-combo {
  min-width: 40px; height: 30px; padding: 0 10px; border-radius: 99px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14.5px; letter-spacing: .02em; color: #fff;
  background: linear-gradient(135deg, var(--sz46-g1), var(--sz46-g2));
}
.sz46-combo-2 { background: linear-gradient(135deg, var(--sz46-g2), #E8580A); }
.sz46-combo-3 {
  background: linear-gradient(135deg, #F07020, #E8580A);
  box-shadow: 0 0 16px rgba(232, 88, 10, .45);
}
.sz46-combo.pop { animation: sz46ComboPop .38s var(--sz46-spring); }
@keyframes sz46ComboPop {
  0% { transform: scale(.55); } 62% { transform: scale(1.22); } 100% { transform: scale(1); }
}

/* ── rundka poprawkowa ─────────────────────────────────────────────── */
.sz46-fix-intro {
  height: 100%; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; text-align: center; padding: 20px 26px;
  animation: sz46Pop .34s var(--sz46-spring) both;
}
.sz46-fix-t {
  font-size: 25px; font-weight: 800; color: var(--sz46-ink);
  letter-spacing: -.01em; text-wrap: balance;
}
.sz46-fix-s { font-size: 15.5px; line-height: 1.5; color: var(--sz46-ink-2); max-width: 30ch; }
.sz46-fix-intro .sz46-go { margin-top: 10px; min-width: 210px; }
.sz46-count-fix { color: #B45309; font-weight: 800; }
.sz46-end-chip.fix { background: var(--sz46-green-bg); color: #0B7A3D; border-color: var(--sz46-green); }


/* ── werdykt na arkuszu — kolor mowi pierwszy (2026-08-19) ─────────── */
.sz46-verdict {
  display: flex; align-items: center; gap: 9px;
  margin: 2px 0 10px; padding: 10px 14px; border-radius: 14px;
  font-size: 16px; font-weight: 800; letter-spacing: -.01em;
  animation: sz46Pop .26s var(--sz46-spring) both;
}
.sz46-verdict.ok  { background: var(--sz46-green-bg); color: #0B7A3D; border: 1.5px solid var(--sz46-green); }
.sz46-verdict.bad { background: #FDF0F0; color: #B3261E; border: 1.5px solid #E5484D; }
.sz46-verdict-ic {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px; font-weight: 900;
}
.sz46-verdict.ok  .sz46-verdict-ic { background: var(--sz46-green); }
.sz46-verdict.bad .sz46-verdict-ic { background: #E5484D; }
.sz46-combo[hidden] { display: none; }  /* display:flex wygrywalo z [hidden] */


/* ── FLASH werdyktu — wzorzec z silnika CKE (natychmiastowy, pelnoekranowy) ── */
.sz46-flash {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  animation: sz46FlashOut .5s ease-out forwards;
}
.sz46-flash.ok  { background: radial-gradient(ellipse at 50% 44%, rgba(23,201,100,.38), rgba(249,200,67,.2) 55%, transparent 75%); }
.sz46-flash.bad { background: radial-gradient(ellipse at 50% 44%, rgba(229,72,77,.34), rgba(229,72,77,.12) 55%, transparent 75%); }
@keyframes sz46FlashOut { 0% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sz46-flash { animation-duration: .01ms; } }


/* Pytanie siedzi TUZ nad odpowiedziami — luz ucieka nad tresc, nie miedzy
   polecenie a opcje („za duzy gap”, 2026-08-19). margin-top:auto na
   pierwszym dziecku znika przy przepelnieniu, wiec scroll dziala normalnie. */

/* ── scena Buddy'ego nad pytaniem (2026-08-19) ─────────────────────── */
.sz46-scene {
  flex: 1 0 0; min-height: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 8px 0;
}
.sz46-bud-scene {
  height: 100%; max-height: 172px; aspect-ratio: 1 / 1; width: auto;
  border-radius: 32px;
  animation: sz46Oddech 3.4s ease-in-out infinite;
}


/* skrzynka po otwarciu — eksplozja skali */
.sz46-nagroda.otwarta { animation: sz46ChestPop .5s var(--sz46-spring); }
.sz46-nagroda.otwarta .sz46-nagroda-e { animation: sz46Skok .62s var(--sz46-spring); }
@keyframes sz46ChestPop { 0% { transform: translate(-50%,-50%) scale(1); } 40% { transform: translate(-50%,-50%) scale(1.14) rotate(2deg); } 100% { transform: translate(-50%,-50%) scale(1); } }