/* ============================================================
   TESZEDD – Hulladéktár, tévhit/kvíz, indulás előtt, visszaváltás (js/teszedd-tar*.js, teszedd-kviz.js, teszedd-elott.js).
   Csak tokenek (docs/arculat.md). A kuka színe a Szelektálj! adatából jön (--kc, a HTML-ben állítva) – csak sávként és
   keretként jelenik meg, a szöveg mindig olíva a papíron (kontraszt). Koppintási felület legalább var(--tap).
   ============================================================ */
.tztTar { display:grid; gap:var(--sp-3); min-width:0; }
.tztTar > * { min-width:0; }
.tztCim { margin:0; font:400 var(--fs-xl)/1.15 var(--display); overflow-wrap:anywhere; }
.tztH { margin:var(--sp-2) 0 0; font:400 var(--fs-l)/1.2 var(--display); display:flex; gap:6px; align-items:center; }
.tztVissza { justify-self:start; }
.tztNyelv { white-space:normal; justify-self:start; }
.tztToltes { margin:var(--sp-4) 0; }
.tztUres { margin:0; color:var(--ink-soft); display:flex; gap:6px; align-items:flex-start; }

/* kereső */
.tztKereso { display:flex; align-items:center; gap:var(--sp-2); }
.tztKereso > .pic { width:26px; height:26px; flex:0 0 auto; }
.tztKereso .ds-input { min-height:52px; font-size:var(--fs-l); }
.tztCsipeszek { margin:0; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.tztCsipeszek .ds-chip { font:700 var(--fs-s)/1.15 var(--body); min-height:var(--tap); padding:4px 12px; border-width:2px; box-shadow:none; cursor:pointer; white-space:normal; text-align:left; }
.tztCsipeszek .ds-tag { white-space:normal; }

/* tétel-sor (keresés, kuka-lap, határozó) */
.tztLista { list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-2); }
.ds-details .tztLista { margin:0 0 var(--sp-3); }
.tztSor { width:100%; min-height:56px; display:grid; grid-template-columns:auto 1fr auto; gap:var(--sp-3); align-items:center; padding:6px var(--sp-3) 6px 6px;
  text-align:left; background:var(--surface); color:var(--ink); border:var(--line-w) solid var(--line); border-radius:var(--r-m); font:inherit; cursor:pointer;
  transition:transform var(--t-fast) var(--ease-out); }
.tztSor span { display:grid; gap:2px; min-width:0; } .tztSor b { line-height:1.25; } .tztSor small { color:var(--ink-soft); line-height:1.35; font-size:var(--fs-s); }
.tztSor:active { transform:scale(.98); }
.tztVeszIk .pic { width:22px; height:22px; color:var(--bad-ink); }
.tztLista.is-nem .tztSor { background:var(--bad-bg); }

/* kuka-jel: színsáv + matrica (kuka) vagy piktogram (gyűjtőhely) */
.tztJel { width:48px; height:48px; flex:0 0 auto; display:grid; place-items:center; border-radius:var(--r-s); background:var(--paper);
  border:var(--line-w) solid var(--line); box-shadow:inset 0 -8px 0 var(--kc, var(--sage)); }
.tztJel img { width:34px; height:34px; object-fit:contain; margin-bottom:6px; }
.tztJel .pic { width:28px; height:28px; }
.tztJel.is-hely { background:var(--sage-bg); box-shadow:none; }

/* kuka-rács */
.tztRacs { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:var(--sp-2); }
.tztCsempe { width:100%; min-height:64px; display:flex; align-items:center; gap:var(--sp-2); padding:6px var(--sp-2); text-align:left; cursor:pointer;
  background:var(--surface); color:var(--ink); border:var(--line-w) solid var(--line); border-radius:var(--r-m); font:700 var(--fs-s)/1.2 var(--body);
  overflow-wrap:break-word; hyphens:auto; transition:transform var(--t-fast) var(--ease-out); }
.tztCsempe:active { transform:scale(.97); }
.tztKartyak { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:var(--sp-2); }
.tztNagy { display:flex; gap:var(--sp-3); align-items:center; text-align:left; padding:var(--sp-3); font:inherit; color:var(--ink); min-height:72px; }
.tztNagy > .pic { width:34px; height:34px; flex:0 0 auto; }
.tztNagy span { display:grid; gap:2px; } .tztNagy b { font:400 var(--fs-l)/1.15 var(--display); } .tztNagy small { color:var(--ink-soft); font-size:var(--fs-s); }

/* tétellap és kuka-lap */
.tztVesz { margin:0; display:flex; gap:var(--sp-2); align-items:flex-start; padding:var(--sp-3); border-radius:var(--r-m); background:var(--bad-bg); color:var(--bad-ink);
  border:var(--line-w) solid var(--bad-ink); }
.tztVesz .pic { width:28px; height:28px; flex:0 0 auto; }
.tztHova { display:flex; gap:var(--sp-3); align-items:flex-start; padding:var(--sp-3); border-radius:var(--r-l); background:var(--butter);
  border:var(--line-w) solid var(--line); }   /* a kuka színe a jelvény alsó sávján látszik (--kc) */
.tztHova .tztJel { width:60px; height:60px; } .tztHova .tztJel img { width:44px; height:44px; }
.tztHova p { margin:0; } .tztHovaCim { font:400 var(--fs-l)/1.2 var(--display); } .tztHovaTxt { font:700 var(--fs-m)/1.45 var(--body); margin-top:4px !important; }
.tztHelyben { padding:var(--sp-3); border-radius:var(--r-m); background:var(--sky-bg); border:var(--line-w) solid var(--line); display:grid; gap:var(--sp-2); }
.tztHelyben p { margin:0; line-height:1.45; }
.tztDoboz, .tztTipp { padding:var(--sp-3); display:grid; gap:var(--sp-2); } .tztDoboz h3, .tztTipp h3 { margin:0; font:400 var(--fs-l)/1.2 var(--display); display:flex; gap:6px; align-items:center; }
.tztDoboz p, .tztTipp p { margin:0; line-height:1.5; }
.tztTipp { background:var(--good-bg); }
.tztTeddEzt { display:flex; gap:var(--sp-2); align-items:flex-start; padding:var(--sp-2) var(--sp-3); border-radius:var(--r-s); background:var(--paper); font-weight:700; }
.tztTeddEzt .pic { width:22px; height:22px; flex:0 0 auto; }
.tztHelyFej { display:flex; gap:var(--sp-3); align-items:center; }
.tztHelyFej .tztJel { width:64px; height:64px; } .tztHelyFej .tztJel img { width:46px; height:46px; margin-bottom:8px; }

/* határozó és kvíz */
.tztUt { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; } .tztUt .ds-tag { white-space:normal; }
.tztKerdes { padding:var(--sp-4); display:grid; gap:var(--sp-2); } .tztKerdes h3 { margin:0; font:400 var(--fs-xl)/1.15 var(--display); } .tztKerdes p { margin:0; }
.tztValaszok { display:grid; gap:var(--sp-2); margin-top:var(--sp-2); }
.tztValaszok.is-ketto { grid-template-columns:1fr 1fr; }
.tztValasz { min-height:56px; padding:var(--sp-2) var(--sp-3); display:flex; align-items:center; justify-content:center; gap:6px; text-align:center; cursor:pointer;
  background:var(--surface); color:var(--ink); border:var(--line-w) solid var(--line); border-radius:var(--r-m); font:700 var(--fs-m)/1.3 var(--body);
  transition:transform var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out); }
.tztValaszok:not(.is-ketto) .tztValasz { justify-content:flex-start; text-align:left; }
.tztValasz:active:not(:disabled) { transform:scale(.97); }
.tztValasz.is-halvany { background:var(--cream); color:var(--ink-soft); }
.tztValasz.is-jo { background:var(--good-bg); border-color:var(--good); } .tztValasz.is-rossz { background:var(--bad-bg); color:var(--bad-ink); }
.tztValasz:disabled { cursor:default; } .tztValasz:disabled:not(.is-jo):not(.is-rossz) { opacity:.6; }
.tztAllitas blockquote { margin:0; font:700 var(--fs-l)/1.4 var(--body); }
.tztVisszajelzes { padding:var(--sp-3); border-radius:var(--r-m); border:var(--line-w) solid var(--line); display:grid; gap:var(--sp-2); }
.tztVisszajelzes p { margin:0; line-height:1.5; } .tztVisszajelzes .ds-details { margin-top:0; }
.tztVisszajelzes.is-jo { background:var(--good-bg); } .tztVisszajelzes.is-rossz { background:var(--bad-bg); }
.tztPontok { list-style:none; margin:0; padding:0; display:flex; gap:6px; }
.tztPontok li { width:12px; height:12px; border-radius:var(--r-pill); background:var(--sage); } .tztPontok li.on { background:var(--good); } .tztPontok li.cur { background:var(--accent); outline:2px solid var(--line); }
.tztVege { padding:var(--sp-4); display:grid; gap:var(--sp-3); justify-items:start; }
.tztVege .ds-stars .pic { width:40px; height:40px; }

/* indulás előtt + lerakó + visszaváltás (a Bingó fülön) */
.tzTer > .tztElott, .tzTer > .tztLerako, .tzTer > .tztVv { min-width:0; }   /* a Bingó fül rácsát ne szélesítsék 320 px-en */
.tztElott { margin-top:0; } .tztElott summary { flex-wrap:wrap; } .tztElott summary .ds-tag { margin-left:var(--sp-2); }
.tztPakk { list-style:none; margin:0 0 var(--sp-3) !important; padding:0; display:grid; gap:6px; }
.tztPipa { width:100%; min-height:var(--tap); display:flex; gap:var(--sp-2); align-items:center; padding:6px var(--sp-2); text-align:left; cursor:pointer;
  background:var(--surface); color:var(--ink); border:2px solid var(--sage); border-radius:var(--r-s); font:600 var(--fs-s)/1.35 var(--body); }
.tztPipa .pic { width:24px; height:24px; flex:0 0 auto; } .tztPipa.on { background:var(--good-bg); border-color:var(--good); }
.tztLerako { display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; padding:var(--sp-2) var(--sp-3); border-radius:var(--r-m); background:var(--butter);
  border:2px solid var(--line); }
.tztLerako > .pic { width:26px; height:26px; flex:0 0 auto; } .tztLerako p { margin:0; flex:1 1 200px; font-weight:600; line-height:1.4; }
.tztVv { padding:var(--sp-3) var(--sp-4); display:grid; gap:var(--sp-2); } .tztVv h3 { margin:0; font:400 var(--fs-l)/1.2 var(--display); display:flex; gap:6px; align-items:center; }
.tztVv p { margin:0; line-height:1.45; }
.tztVvLista { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.tztVvSor { display:grid; grid-template-columns:40px minmax(0, 1fr) auto 3ch auto; gap:var(--sp-2); align-items:center; } .tztVvSor b { overflow-wrap:break-word; hyphens:auto; }
.tztVvSor img { width:40px; height:40px; object-fit:contain; }
.tztVvDb { font:400 var(--fs-xl)/1 var(--display); text-align:center; font-variant-numeric:tabular-nums; }
.tztVvOssz { font-size:var(--fs-m); } .tztVvOssz b { font:400 var(--fs-xl)/1 var(--display); }

.tztSor:focus-visible, .tztCsempe:focus-visible, .tztValasz:focus-visible, .tztPipa:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
@media (max-width:420px){ .tztRacs { grid-template-columns:repeat(2, minmax(0, 1fr)); } .tztHova { flex-direction:column; } .tztCim { font-size:var(--fs-l); } }
@media (prefers-reduced-motion:reduce){ .tztSor, .tztCsempe, .tztValasz { transition:none; } .tztSor:active, .tztCsempe:active, .tztValasz:active:not(:disabled) { transform:none; } }