/* ============================================================
   HŰTŐ-MESTER — játékrészek (js/huto-mod.js, -datum.js, -helyzet.js, -homero.js): kártya a konyha előtt.
   A design systemre építve (ds-panel, ds-btn, ds-btn-sm, ds-tag, ds-feedback, ds-checklist), csak tokenekkel.
   ============================================================ */
#htKviz { position:fixed; left:50%; top:calc(72px + env(safe-area-inset-top, 0px)); transform:translateX(-50%); z-index:var(--z-panel);
  width:min(560px, calc(100vw - 24px)); max-height:calc(100dvh - 96px); overflow:auto; overscroll-behavior:contain;
  display:grid; gap:12px; padding:16px; }
#htKviz.hidden { display:none; }
.htKvizMod #hint, .htKvizMod #htKez, .htKvizMod #htNav { display:none !important; }

.htKvFej { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.htKvMod { font-weight:700; }
.htKvLepes { font:400 var(--fs-m)/1 var(--display); color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.htKvTest > * { animation:htKvBe var(--t-base) var(--ease-out) both; }
@keyframes htKvBe { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .htKvTest > * { animation:none; } }

/* a válaszgombok: egymás alatt, teljes szélességben (a középső felirat hosszú) */
.htKvGombok { display:grid; gap:8px; }
.htKvGombok .htKvValasz { width:100%; min-height:var(--tap); justify-content:flex-start; text-align:left; gap:10px; padding:8px 14px; white-space:normal; line-height:1.3; }
.htKvGombok .htKvValasz .pic { width:22px; height:22px; flex:none; }
.htKvGombok .htKvValasz:disabled { opacity:.55; }
.htKvGombok .htKvValasz.is-jo { opacity:1; background:var(--good-bg); color:var(--good-ink); border-color:var(--good-ink); }
.htKvGombok .htKvValasz.is-rossz { opacity:1; background:var(--bad-bg); color:var(--bad-ink); }
.htKvGombok .htKvTovabb, .htKvVissza .htKvTovabb { justify-self:center; }
.htKvVissza { display:grid; gap:8px; }
.htKvVissza:empty { display:none; }
.htKvVissza p { margin:0; }
.htKvVissza .ds-feedback { justify-self:start; padding:6px 14px; }
.htKvForras { font-size:var(--fs-xs); color:var(--ink-soft); }
.htKvForras summary { display:inline-flex; align-items:center; gap:4px; min-height:32px; cursor:pointer; font-weight:700; list-style:none; }
.htKvForras summary::-webkit-details-marker { display:none; }
.htKvForras summary .pic { width:14px; height:14px; }
.htKvForras p { margin:2px 0 0; }
.htHomMondat .htKvForras { display:block; }
.htKvNebih .ds-tag { margin-right:4px; }

/* „Lejárt vagy még jó?”: a termék és a címkéje */
.htDtKartya { display:flex; align-items:center; gap:14px; }
.htDtKep { display:grid; place-items:center; width:96px; height:96px; flex:none; }
.htDtKep img.art, .htDtKep svg { width:96px; height:96px; }
.htDtCimke { flex:1; min-width:0; display:grid; gap:6px; padding:10px 12px; background:var(--paper); border:var(--line-w) dashed var(--line); border-radius:var(--r-m); }
.htDtTermek { font:400 var(--fs-l)/1.1 var(--display); color:var(--ink); }
.htDtHelyzet { margin:0; font-weight:600; }
.htDtTag { justify-self:start; display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:var(--r-pill);
  font:700 var(--fs-xs)/1.3 var(--body); text-transform:uppercase; letter-spacing:.04em; }
.htDtTag .pic { width:16px; height:16px; }
.htDtTag.is-fogy { background:var(--bad-bg); color:var(--bad-ink); }
.htDtTag.is-mmi { background:var(--sky-bg); color:var(--ink); }
.htDtSzabaly { display:grid; gap:10px; }
.htDtSor { margin:0; display:grid; gap:4px; }

/* „Mit tennél?”: a helyzet */
.htHzKartya { display:flex; align-items:center; gap:12px; }
.htHzKep { display:grid; place-items:center; width:52px; height:52px; flex:none; border-radius:50%; background:var(--butter); }
.htHzKep .pic { width:28px; height:28px; }
.htHzHelyzet { margin:0; font:400 var(--fs-l)/1.2 var(--display); color:var(--ink); text-wrap:balance; }

/* Hőmérő: két csúszka, ellenőrzés után a zóna színével */
.htHomCel { margin:0; font-weight:600; }
.htHomSor { display:grid; gap:6px; padding:10px 12px; border:var(--line-w) solid var(--line); border-radius:var(--r-m); background:var(--surface);
  transition:background-color var(--t-base) var(--ease-out); }
.htHomFej { display:flex; align-items:center; gap:8px; }
.htHomFej .pic { width:22px; height:22px; }
.htHomErtek { margin-left:auto; font:400 var(--fs-xl)/1 var(--display); font-variant-numeric:tabular-nums; }
.htHomCs { width:100%; height:var(--tap); accent-color:var(--accent); cursor:pointer; }
.htHomSkala { display:flex; justify-content:space-between; font-size:var(--fs-xs); color:var(--ink-soft); }
.htHomMondat { margin:0; }
.htHomMondat:empty { display:none; }
.htHomSor[data-allapot="jo"] { background:var(--good-bg); }
.htHomSor[data-allapot="hideg"] { background:var(--sky-bg); }
.htHomSor[data-allapot="meleg"] { background:var(--butter); }
.htHomSor[data-allapot="rossz"] { background:var(--bad-bg); }
.htHomTippek { margin:0; text-align:left; }

@media (max-width:420px){
  #htKviz { padding:12px; gap:10px; top:calc(64px + env(safe-area-inset-top, 0px)); max-height:calc(100dvh - 80px); }
  .htDtKep, .htDtKep img.art, .htDtKep svg { width:72px; height:72px; }
}