/* Fiszki z kompendium (Centrum Nauki, pod escape roomem). Komponent: kompendium/fiszki.js. Prefiks fz-.
   Pas tła jak escape room / lekcje wideo; karta odwraca się w 3D (tylko transform). */
.tl-fiszki { position: relative; isolation: isolate; margin-top: 0; padding: 0 0 4.5rem; }
.tl-fiszki::before { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  background: radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--blue) 12%, var(--bg)), var(--bg) 70%);
  border-top: 1px solid color-mix(in srgb, var(--blue) 22%, transparent); }
.tl-fiszki > .tl3d-head { transform: translateY(-50%); margin-bottom: -.25rem; }
.tl-escape + .tl-fiszki { margin-top: 0; }
.tl-fiszki + .tl-videos { margin-top: 0; }
@media (max-width: 600px) { .tl-fiszki { padding-bottom: 3.5rem; } }

.fz { --fz-blue: var(--blue); --fz-purple: var(--purple); --fz-green: var(--green, #009D3B); --fz-orange: var(--orange); --fz-teal: #0C8599;
  max-width: 720px; margin: 0 auto; }
body:not(.light) .fz { --fz-teal: #3BC9DB; }
.fz-c-blue { --fc: var(--fz-blue); } .fz-c-purple { --fc: var(--fz-purple); } .fz-c-green { --fc: var(--fz-green); }
.fz-c-orange { --fc: var(--fz-orange); } .fz-c-teal { --fc: var(--fz-teal); }

.fz-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 1.1rem; }
.fz-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border-radius: 999px; cursor: pointer; font: 600 .88rem/1.1 'Inter', sans-serif;
  color: var(--text); background: var(--bg2); border: 1px solid var(--border); transition: background .2s, border-color .2s, color .2s; -webkit-tap-highlight-color: transparent; }
.fz-chip small { font-weight: 700; font-size: .75rem; color: var(--muted); }
.fz-chip:hover { border-color: var(--fc); }
.fz-chip[aria-pressed="true"] { color: #fff; background: var(--fc); border-color: var(--fc); }
.fz-chip[aria-pressed="true"] small { color: rgba(255,255,255,.85); }
.fz-chip:focus-visible, .fz-btn:focus-visible, .fz-link:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.fz-progress { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.fz-bar { flex: 1; height: 8px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--blue) 12%, transparent); }
.fz-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--purple)); transform-origin: left; transform: scaleX(0); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.fz-count { margin: 0; font: 500 .9rem/1.3 'Inter', sans-serif; color: var(--muted); white-space: nowrap; }
.fz-count b { color: var(--text); }

.fz-stage { perspective: 1400px; }
.fz-card { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.fz-card:focus-visible { outline: none; }
.fz-card:focus-visible .fz-face { outline: 3px solid var(--fc); outline-offset: 3px; }
.fz-inner { display: grid; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3,.7,.2,1); }
.fz-card.is-flipped .fz-inner { transform: rotateY(180deg); }
.fz-card.is-in .fz-inner { animation: fz-in .45s cubic-bezier(.2,.8,.2,1); }
@keyframes fz-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.fz-face { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; gap: .9rem; min-height: 250px; padding: 1.8rem 2rem; border-radius: 24px;
  -webkit-backface-visibility: hidden; backface-visibility: hidden; background: var(--bg2); border: 1px solid color-mix(in srgb, var(--fc) 30%, var(--border));
  box-shadow: 0 24px 50px -32px color-mix(in srgb, var(--fc) 70%, transparent), inset 0 4px 0 var(--fc); }
.fz-back { transform: rotateY(180deg); background: linear-gradient(160deg, color-mix(in srgb, var(--fc) 9%, var(--bg2)), var(--bg2)); }
.fz-tag { align-self: flex-start; padding: .3rem .7rem; border-radius: 999px; font: 700 .74rem/1.2 'Inter', sans-serif; letter-spacing: .03em; color: var(--fc); background: color-mix(in srgb, var(--fc) 12%, transparent); }
.fz-q { font: 700 clamp(1.3rem, 3.4vw, 1.75rem)/1.25 'Space Grotesk', sans-serif; color: var(--text); }
.fz-a { font: 600 clamp(1.1rem, 2.8vw, 1.35rem)/1.45 'Inter', sans-serif; color: var(--text); }
.fz-hint { margin-top: auto; font: 500 .85rem/1.35 'Inter', sans-serif; color: var(--muted); }
.fz-card:hover .fz-face { border-color: color-mix(in srgb, var(--fc) 55%, var(--border)); }

.fz-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .7rem; margin-top: 1.1rem; min-height: 52px; }
.fz-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1.4rem; border-radius: 999px; cursor: pointer; font: 700 .98rem/1 'Inter', sans-serif; border: 1px solid transparent;
  transition: transform .2s ease, background .2s, box-shadow .2s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.fz-btn:active { transform: scale(.96); }
.fz-btn--main { color: #fff; background: linear-gradient(135deg, var(--blue), var(--purple)); box-shadow: 0 12px 26px -14px var(--purple); }
.fz-btn--yes { color: #fff; background: #2B8A3E; box-shadow: 0 12px 26px -14px #2B8A3E; }
.fz-btn--no { color: var(--text); background: var(--bg2); border-color: var(--border); }
.fz-link { flex-basis: 100%; display: inline-flex; justify-content: center; align-items: center; gap: .45rem; padding: .4rem; border: 0; background: none; cursor: pointer;
  font: 600 .9rem/1.2 'Inter', sans-serif; color: var(--blue); }
.fz-link:hover { text-decoration: underline; }

.fz-done { display: grid; place-items: center; gap: .5rem; min-height: 250px; padding: 2rem; border-radius: 24px; text-align: center; background: var(--bg2); border: 1px solid var(--border); }
.fz-done-ico { font-size: 2.6rem; }
.fz-done h3 { margin: 0; font: 700 1.4rem/1.2 'Space Grotesk', sans-serif; color: var(--text); }
.fz-done p { margin: 0; color: var(--muted); }

@media (max-width: 600px) {
  .fz-face { min-height: 230px; padding: 1.4rem 1.3rem; border-radius: 20px; }
  .fz-progress { flex-direction: column; align-items: stretch; gap: .45rem; }
  .fz-bar { flex: none; }
  .fz-count { text-align: center; white-space: normal; }
  .fz-chip { padding: .45rem .75rem; font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fz-inner, .fz-bar span { transition: none; }
  .fz-card.is-in .fz-inner { animation: none; }
}