/* Quiz dnia (/quiz/, site/quiz.js, dane z build/quiz.py) - dokłada się do styles.css (barwy, pismo, nagłówek, stopka) */
.qz { --ok: #5DB85A; --no: #E04B35; }

/* układ jak w grze: mapa z filmu po lewej (przyklejona), pytanie po prawej; na telefonie jedno pod drugim */
.qz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px); grid-template-areas: "fig head" "fig main"; grid-template-rows: auto 1fr;
  column-gap: 56px; max-width: 1380px; margin: 0 auto; padding: 36px 24px 88px; }
.qz-head { grid-area: head; padding-top: 6px; }
.qz-h { margin: 0; font-stretch: 118%; font-weight: 800; font-size: clamp(34px, 3.2vw, 46px); line-height: 0.96; letter-spacing: -0.018em; }
.qz-meta { margin: 12px 0 0; font-stretch: 88%; font-weight: 620; font-size: 16px; color: var(--signal); }
.qz-lead { margin: 10px 0 0; max-width: 34em; font-size: 17px; line-height: 1.45; color: var(--line); text-wrap: pretty; }
.qz:not(.is-start) .qz-lead { display: none; }
.qz-main { grid-area: main; min-width: 0; padding-top: 22px; }
.qz-load { margin: 0; font-stretch: 88%; font-size: 15px; color: var(--line); }
.qz-err { grid-column: 1 / -1; margin: 20px 0 0; }
.qz-err p { margin: 0 0 10px; }
.qz-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- mapa z filmu (komputer) ---------- */
.qz-fig { grid-area: fig; position: sticky; top: calc(var(--top) + 24px); align-self: start; margin: 0;
  height: min(calc(100vh - var(--top) - 60px), 760px); height: min(calc(100dvh - var(--top) - 60px), 760px); min-height: 440px;
  border: 1px solid var(--rule); border-radius: 10px; background: var(--deep); overflow: hidden; }
.qz-fig-in { position: absolute; inset: 86px 30px 54px; display: flex; align-items: center; justify-content: center; }
.qz-map { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; transition: opacity 0.35s ease; }
.qz-map.is-swap { opacity: 0; }
.qz-fig-t { position: absolute; top: 16px; left: 18px; right: 18px; margin: 0; font-stretch: 100%; font-weight: 680; font-size: 17px; line-height: 1.3; text-wrap: balance; }
.qz-fig-t span { display: block; margin-bottom: 3px; font-stretch: 88%; font-weight: 600; font-size: 14px; color: var(--line); }
.qz-fig-b { position: absolute; left: 18px; bottom: 16px; margin: 0; font-stretch: 88%; font-weight: 560; font-size: 14px; color: var(--line); }
.qz-fig-b b { font-weight: 700; color: var(--bone); }
/* koniec rundy: karta z wynikiem */
.qz-rc { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 30px; text-align: center; }
.qz-rc-k { margin: 0; font-stretch: 100%; font-weight: 700; font-size: 20px; color: var(--line); }
.qz-rc-s { margin: 10px 0 0; font-stretch: 125%; font-weight: 850; font-size: clamp(96px, 10vw, 150px); line-height: 0.9; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--line); }
.qz-rc-s b { font-weight: 850; color: var(--signal); }
.qz-rc-q { display: grid; grid-template-columns: repeat(5, 44px); gap: 10px; margin-top: 34px; }
.qz-rc-q i { display: block; width: 44px; height: 44px; border-radius: 6px; background: var(--no); animation: qz-in 0.35s ease-out both; animation-delay: var(--d, 0s); }
.qz-rc-q i.ok { background: var(--ok); }
.qz-rc-u { margin: 30px 0 0; font-stretch: 112%; font-weight: 760; font-size: 18px; color: var(--signal); }

/* ---------- pasek postępu ---------- */
.qz-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.qz-n, .qz-sc { margin: 0; font-stretch: 88%; font-weight: 620; font-size: 15px; color: var(--line); font-variant-numeric: tabular-nums; }
.qz-n b, .qz-sc b { font-weight: 760; color: var(--bone); }
.qz-prog { display: grid; grid-template-columns: repeat(var(--n, 10), minmax(0, 1fr)); gap: 4px; margin: 9px 0 0; padding: 0; list-style: none; }
.qz-prog li { height: 6px; border-radius: 3px; background: var(--rule); transition: background-color 0.25s; }
.qz-prog li.cur { background: var(--signal); }
.qz-prog li.ok { background: var(--ok); }
.qz-prog li.no { background: var(--no); }

/* ---------- pytanie i odpowiedzi ---------- */
.qz-card.is-in { animation: qz-in 0.3s ease-out both; }
@keyframes qz-in { from { opacity: 0; transform: translateY(8px); } }
.qz-film { display: none; }
.qz-q { margin: 22px 0 0; font-stretch: 106%; font-weight: 760; font-size: 28px; line-height: 1.2; letter-spacing: -0.006em; text-wrap: pretty; outline: none; }
.qz-as { display: grid; gap: 10px; margin-top: 22px; }
.qz-a { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) 26px; gap: 14px; align-items: center; width: 100%; min-height: 62px;
  padding: 10px 14px 10px 12px; border: 1.5px solid var(--rule); border-radius: 8px; background: var(--deep); color: var(--bone); text-align: left;
  font-weight: 620; font-size: 18px; line-height: 1.3; transition: border-color 0.15s, background-color 0.15s, opacity 0.25s; -webkit-tap-highlight-color: transparent; }
.qz-l { display: grid; place-items: center; width: 34px; height: 34px; border: 1.5px solid var(--line); border-radius: 6px; font-stretch: 100%; font-weight: 720; font-size: 15px;
  color: var(--line); transition: border-color 0.15s, background-color 0.15s, color 0.15s; }
.qz-t { min-width: 0; overflow-wrap: anywhere; }
.qz-t-n { display: block; }
.qz-t-w { display: block; margin-top: 1px; font-stretch: 85%; font-weight: 500; font-size: 13.5px; line-height: 1.3; color: var(--line); }
.qz-ic { display: grid; place-items: center; width: 26px; height: 26px; }
.qz-ic svg { width: 22px; height: 22px; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) {
  .qz-a:not(:disabled):hover { border-color: var(--line); background: #0d2d38; }
  .qz-a:not(:disabled):hover .qz-l { border-color: var(--bone); color: var(--bone); }
}
.qz-a:not(:disabled):active { background: var(--land); }
.qz-a:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.qz-a:disabled { cursor: default; }
.qz-as.is-done .qz-a { opacity: 0.45; }
.qz-as.is-done .qz-a.is-ok, .qz-as.is-done .qz-a.is-no { opacity: 1; }
.qz-a.is-ok { border-color: var(--ok); background: rgba(93, 184, 90, 0.14); }
.qz-a.is-ok .qz-l { border-color: var(--ok); background: var(--ok); color: var(--deep); }
.qz-a.is-ok .qz-ic svg { stroke: var(--ok); }
.qz-a.is-no { border-color: var(--no); background: rgba(224, 75, 53, 0.14); }
.qz-a.is-no .qz-l { border-color: var(--no); background: var(--no); color: var(--deep); }
.qz-a.is-no .qz-ic svg { stroke: var(--no); }
.qz-a.is-pop .qz-l { animation: qz-pop 0.4s cubic-bezier(0.3, 1.6, 0.5, 1); }
.qz-a.is-shake { animation: qz-shake 0.36s ease; }
@keyframes qz-pop { 40% { transform: scale(1.2); } }
@keyframes qz-shake { 25% { transform: translateX(-6px); } 60% { transform: translateX(4px); } 85% { transform: translateX(-2px); } }

/* ---------- wyjaśnienie ---------- */
.qz-fb { display: none; }
.qz-fb.is-on { display: block; margin-top: 18px; padding: 14px 18px 16px; border-left: 4px solid var(--c); border-radius: 0 8px 8px 0; background: rgba(230, 223, 204, 0.06);
  scroll-margin-top: calc(var(--top) + 12px); }
.qz-fb.is-ok { --c: var(--ok); }
.qz-fb.is-no { --c: var(--no); }
.qz-fb.is-in { animation: qz-in 0.3s ease-out both; }
.qz-v { margin: 0; font-stretch: 104%; font-weight: 780; font-size: 20px; line-height: 1.2; color: var(--c); }
.qz-ans { margin: 4px 0 0; font-size: 16px; }
.qz-ans b { font-weight: 720; }
.qz-w { margin: 8px 0 0; max-width: 38em; font-size: 16.5px; line-height: 1.5; text-wrap: pretty; }
.qz-z { margin: 8px 0 0; font-stretch: 85%; font-size: 13.5px; line-height: 1.4; color: var(--line); }
.qz-go { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 10px 0 0; font-weight: 650; font-size: 15.5px; }
.qz-nx { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.qz-nx[hidden] { display: none; }
.qz-kb { font-stretch: 85%; font-size: 13.5px; color: var(--line); }
@media (hover: none) { .qz-kb { display: none; } }

/* przyciski */
.qz-btn { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 22px; border: 1.5px solid var(--bone); border-radius: 6px;
  background: none; color: var(--bone); font-weight: 680; font-size: 16.5px; text-decoration: none; transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
.qz-btn:hover { border-color: var(--signal); color: var(--signal); }
.qz-btn-p { border-color: var(--signal); background: var(--signal); color: var(--deep); font-weight: 720; }
.qz-btn-p:hover { border-color: var(--bone); background: var(--bone); color: var(--deep); }
.qz-next { height: 54px; padding: 0 28px; font-size: 17px; }

/* ---------- koniec rundy ---------- */
.qz-end.is-in { animation: qz-in 0.35s ease-out both; }
.qz-k { margin: 0; font-stretch: 92%; font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--line); outline: none; }
/* komputer: duży wynik jest na karcie po lewej, tu tylko w nagłówku */
.qz-k-n { color: var(--signal); }
@media (min-width: 901px) { .qz-score { display: none; } .qz-k { font-size: 19px; } .qz-com { margin-top: 8px; font-size: 26px; } }
@media (max-width: 900px) { .qz-k-n { display: none; } }
.qz-score { margin: 6px 0 0; font-stretch: 125%; font-weight: 850; font-size: clamp(84px, 8vw, 118px); line-height: 0.88; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.qz-score b { font-weight: 850; color: var(--signal); }
.qz-score span { color: var(--line); font-size: 0.5em; letter-spacing: -0.01em; }
.qz-com { margin: 14px 0 0; font-stretch: 104%; font-weight: 700; font-size: 22px; line-height: 1.25; text-wrap: balance; }
.qz-best { margin: 6px 0 0; font-stretch: 88%; font-size: 15.5px; color: var(--line); }
.qz-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.qz-toast { margin: 8px 0 0; min-height: 1.4em; font-stretch: 88%; font-size: 14.5px; color: var(--signal); }
.qz-copy { display: block; width: 100%; margin: 6px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--deep); color: var(--bone);
  font: 500 15px/1.4 var(--sans); resize: none; }
.qz-tip { margin: 16px 0 0; padding: 13px 16px 14px; border-left: 3px solid var(--signal); border-radius: 0 6px 6px 0; background: rgba(255, 194, 26, 0.08); }
.qz-tip p { margin: 0; font-size: 16px; line-height: 1.45; }
.qz-tip .qz-go { margin-top: 8px; }
.qz-sh { margin: 34px 0 10px; font-stretch: 108%; font-weight: 740; font-size: 19px; line-height: 1.2; }
.qz-sum { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.qz-sum li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.qz-sum i { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 5px; background: var(--no); }
.qz-sum li.ok i { background: var(--ok); }
.qz-sum i svg { width: 16px; height: 16px; fill: none; stroke: var(--deep); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.qz-sum-q { margin: 0; font-weight: 600; font-size: 15.5px; line-height: 1.38; }
.qz-sum-a { margin: 3px 0 0; font-stretch: 90%; font-size: 14.5px; line-height: 1.4; color: var(--line); }
.qz-sum-a b { font-weight: 700; color: var(--bone); }
.qz-sum-a a { color: var(--line); }
.qz-dot { color: var(--rule); }
.qz-note { margin: 16px 0 0; font-stretch: 85%; font-size: 13.5px; line-height: 1.45; color: var(--line); }
.qz-note a { color: var(--line); }

/* ---------- telefon ---------- */
@media (max-width: 900px) {
  .qz { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "main"; grid-template-rows: none; padding: 18px 16px 56px; }
  .qz-head { padding-top: 0; }
  .qz-h { font-size: clamp(30px, 8.6vw, 44px); }
  .qz-lead { margin-top: 8px; font-size: 15.5px; line-height: 1.42; }
  .qz-fig { display: none; }
  .qz-main { padding-top: 16px; }
  .qz-film { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; font-stretch: 88%; font-size: 14px; line-height: 1.3; color: var(--line); }
  .qz-film-m { flex: none; display: block; width: 54px; height: auto; }
  .qz-film b { font-weight: 650; color: var(--bone); }
  .qz-q { margin-top: 12px; font-size: 22px; line-height: 1.24; }
  .qz-as { gap: 8px; margin-top: 16px; }
  .qz-a { grid-template-columns: 30px minmax(0, 1fr) 22px; gap: 12px; min-height: 56px; padding: 9px 12px 9px 10px; font-size: 17px; }
  .qz-l { width: 30px; height: 30px; font-size: 14px; }
  .qz-ic, .qz-ic svg { width: 20px; height: 20px; }
  .qz-fb.is-on { margin-top: 14px; padding: 12px 14px 14px; }
  .qz-v { font-size: 19px; }
  .qz-w { font-size: 16px; }
  .qz-nx { margin-top: 14px; }
  .qz-next { flex: 1 1 auto; }
  .qz-score { font-size: 96px; }
  .qz-com { font-size: 20px; }
  .qz-act .qz-btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .qz-a, .qz-l, .qz-map, .qz-prog li { transition: none; }
  .qz-card.is-in, .qz-fb.is-in, .qz-end.is-in, .qz-a.is-pop .qz-l, .qz-a.is-shake, .qz-rc-q i { animation: none !important; }
}

/* ---------- quiz dnia: trudność, tabela 4 gmin, wynik dnia, statystyki, ćwiczenia ---------- */
.qz-tr { display: inline-block; margin-left: 10px; padding: 1px 8px 2px; border: 1px solid currentColor; border-radius: 999px; font-stretch: 88%;
  font-weight: 640; font-size: 12.5px; line-height: 1.3; vertical-align: 1px; }
.qz-tr1 { color: #8FD18C; }
.qz-tr2 { color: var(--signal); }
.qz-tr3 { color: #F28B74; }
.qz-mode { margin: 0 0 14px; padding: 9px 14px 10px; border-left: 3px solid var(--line); border-radius: 0 6px 6px 0; background: rgba(127, 163, 174, 0.1);
  font-stretch: 90%; font-size: 14.5px; line-height: 1.35; color: var(--line); }
.qz-mode b { display: block; font-stretch: 100%; font-weight: 720; font-size: 15.5px; color: var(--bone); }

/* tabela gmin w wyjaśnieniu (pytania z danych map) */
.qz-tb { display: grid; gap: 4px; margin: 10px 0 0; padding: 0; list-style: none; max-width: 34em; }
.qz-tb li { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; column-gap: 10px; align-items: baseline; padding: 6px 10px 9px 8px;
  border-radius: 5px; background: rgba(10, 38, 48, 0.55); font-size: 15.5px; line-height: 1.3; overflow: hidden; }
.qz-tb-i { font-stretch: 85%; font-weight: 650; font-size: 13px; color: var(--line); font-variant-numeric: tabular-nums; }
.qz-tb-n { min-width: 0; font-weight: 640; color: var(--bone); text-decoration: none; overflow-wrap: anywhere; }
.qz-tb-n:hover { color: var(--signal); text-decoration: underline; text-decoration-color: var(--signal); }
.qz-tb-v { font-stretch: 92%; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.qz-tb-v.up { color: #8FD18C; }
.qz-tb-v.down { color: #F28B74; }
.qz-t-b { position: absolute; left: 8px; right: 10px; bottom: 3px; height: 3px; border-radius: 2px; background: rgba(127, 163, 174, 0.18); }
.qz-t-b::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 2px; background: var(--line); }
.qz-tb li.is-ok { box-shadow: inset 3px 0 0 var(--ok); background: rgba(93, 184, 90, 0.13); }
.qz-tb li.is-ok .qz-t-b::after { background: var(--ok); }
.qz-tb li.is-me { box-shadow: inset 3px 0 0 var(--no); background: rgba(224, 75, 53, 0.12); }
.qz-tb li.is-me .qz-t-b::after { background: var(--no); }
.qz-tb-z li { grid-template-columns: 12px minmax(0, 1fr) auto; padding-bottom: 7px; }
.qz-tb-z .qz-tb-i { display: none; }
.qz-t-c { grid-column: 1; grid-row: 1; align-self: center; width: 12px; height: 12px; border-radius: 3px; }
.qz-tb-z .qz-tb-v { font-weight: 600; font-size: 14.5px; white-space: normal; }

/* wynik dnia */
.qz-sq { display: flex; gap: 8px; margin: 14px 0 0; }
.qz-sq i { display: block; width: 34px; height: 34px; border-radius: 6px; background: var(--no); animation: qz-in 0.35s ease-out both; animation-delay: var(--d, 0s); }
.qz-sq i.ok { background: var(--ok); }
@media (min-width: 901px) { .qz-sq { display: none; } }
.qz-next-t { margin: 16px 0 0; font-size: 16px; }
.qz-next-t b { font-weight: 760; font-variant-numeric: tabular-nums; color: var(--signal); }
.qz-stats { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--rule); }
.qz-sh-s { margin-top: 0; }
.qz-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
.qz-nums div { display: flex; flex-direction: column-reverse; gap: 2px; }
.qz-nums dt { font-stretch: 85%; font-size: 13.5px; line-height: 1.25; color: var(--line); }
.qz-nums dd { margin: 0; font-stretch: 110%; font-weight: 780; font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.qz-dist { display: grid; gap: 5px; max-width: 420px; }
.qz-dr { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: center; font-weight: 650; font-size: 14px; font-variant-numeric: tabular-nums; }
.qz-dr > span:first-child { font-stretch: 88%; color: var(--line); }
.qz-dr-t { display: flex; align-items: center; gap: 8px; min-width: 0; }
.qz-dr i { display: block; width: var(--w); height: 18px; border-radius: 3px; background: var(--land); }
.qz-dr b { font-weight: 700; font-size: 14px; }
.qz-dr.zero i { display: none; }
.qz-dr.zero b { font-weight: 560; color: var(--line); }
.qz-dr.me i { background: var(--signal); }
.qz-dr.me b, .qz-dr.me > span:first-child { color: var(--signal); }
.qz-rc-q { grid-template-columns: repeat(5, 48px); }
.qz-rc-q i { width: 48px; height: 48px; }

@media (max-width: 900px) {
  .qz-meta { margin-top: 8px; font-size: 15px; }
  .qz-t-w { font-size: 13px; }
  .qz-tb li { font-size: 15px; padding: 6px 9px 9px 7px; }
  .qz-nums { gap: 8px; }
  .qz-nums dd { font-size: 26px; }
  .qz-nums dt { font-size: 12.5px; }
  .qz-tr { margin-left: 8px; }
}
@media (prefers-reduced-motion: reduce) { .qz-sq i { animation: none !important; } }