/* ICH_Quiz — cards (molecules) | BMSoft1024 */
.glass{background:var(--glass);border:1px solid var(--line);border-radius:var(--r-lg);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:var(--shadow-glass)}
.pad{padding:var(--sp-lg)}
.card{background:var(--glass);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-lg);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:var(--shadow-glass)}
.quiz-card{display:block;transition:transform .16s,border-color .16s}
.quiz-card:hover{transform:translateY(-3px);border-color:var(--primary)}
/* 2026-07-10 fix (user report: "nem 16:9 arány" — right, a fixed 104px height on a ~350-400px-wide
   card is closer to 3.5:1 than 16:9, even though the crop editor's ratio param is hardcoded 16/9 for
   every cover field). aspect-ratio makes this box GENUINELY 16:9 at any card width, matching what the
   crop editor actually promises the creator. */
.quiz-cover{aspect-ratio:16/9;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;
  font-size:2.4rem;margin-bottom:12px;background:var(--grad-cover);border:1px solid var(--line);overflow:hidden}
/* 2026-07-10 fix: .fit-frame (see image-fit.js/QuizRepo.php ich_fit_frame_html) has no height of its
   own — its <img> is position:absolute, contributing nothing to normal-flow height — so without this
   it collapsed to 0px inside .quiz-cover and only the placeholder gradient behind it was visible.
   border-radius is re-applied here too since overflow:hidden on the parent alone doesn't clip a
   differently-rounded child. */
.quiz-cover .fit-frame{width:100%;height:100%;border-radius:inherit}
.meta{color:var(--muted);font-size:.8rem;margin-top:8px;display:flex;gap:13px;flex-wrap:wrap}
.stat{padding:clamp(var(--sp-sm),2vw,var(--sp-md));text-align:center}
.stat b{display:block;font-size:1.6rem;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:4px}
.stat span{color:var(--muted);font-size:.8rem}
.avatar{border-radius:50%;background:var(--grad-brand);display:flex;align-items:center;justify-content:center}
.badge{width:84px;text-align:center;font-size:.7rem;color:var(--muted)}
.badge .ic{width:62px;height:62px;border-radius:18px;display:flex;align-items:center;justify-content:center;
  font-size:1.7rem;margin:0 auto 6px;background:var(--glass-2);border:1px solid var(--line)}
.badge.got .ic{background:var(--grad-brand)}