/* ============================================================
   TESZEDD – a beépített játék (js/teszedd-jatek.js): fejléc, négy fül, 4×4 bingókártya, beágyazott Szemétlelet-nézetek.
   Csak tokenek (docs/arculat.md). A cellák négyzetesek és legalább 64 px-esek (terepen, kesztyűben is koppintható).
   ============================================================ */
#tz { position:fixed; inset:0; z-index:var(--z-hud); display:grid; grid-template-rows:auto auto 1fr; background:var(--bg); color:var(--ink); font-family:var(--body); }
#tz.hidden { display:none; }
.tzFej { display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; padding:calc(var(--tap) + 20px + env(safe-area-inset-top, 0px)) var(--sp-4) var(--sp-2); }
.tzCim { margin:0; font:400 var(--fs-xl)/1.1 var(--display); display:flex; gap:8px; align-items:center; }
.tzFulek { margin:0 var(--sp-4); overflow-x:auto; }
.tzFulek .ds-tab { white-space:nowrap; }
.tzFulek .ds-tab { flex:1; justify-content:center; min-height:var(--tap); }
.tzTer { overflow-y:auto; padding:var(--sp-3) var(--sp-4) var(--sp-4); display:grid; align-content:start; gap:var(--sp-3); width:min(760px, 100%); margin:0 auto; }
.tzLead { margin:0; font:600 var(--fs-m)/1.4 var(--body); }
.tzAll { display:inline-block; margin-left:6px; }
#tz > * { min-width:0; }                                     /* a rács-elemek ne nőjenek a leghosszabb szó szélességére */
.tzRacs { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--sp-2); }
.tzCella { position:relative; width:100%; aspect-ratio:1; min-height:64px; display:grid; place-items:center; align-content:center; gap:4px; padding:6px 4px;
  border:var(--line-w) solid var(--line); border-radius:var(--r-l); background:var(--paper); color:var(--ink); font:700 var(--fs-xs)/1.15 var(--body);
  text-align:center; cursor:pointer; hyphens:auto; overflow-wrap:anywhere; transition:transform var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out); }
.tzCella:active { transform:scale(.96); }
.tzCella img, .tzCella .art, .tzCella .ds-icon { width:min(44px, 60%); height:auto; max-height:44px; object-fit:contain; }
.tzCella.on { background:var(--butter); } .tzCella.sor { background:var(--accent); }
.tzCella:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.tzPipa { position:absolute; top:4px; right:4px; font-style:normal; } .tzPipa .pic { width:18px; height:18px; }
.tzGombok { display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; }
.tzKeret iframe { height:min(68dvh, 680px); }
@media (max-width:420px){ .tzCella { font-size:11px; padding:4px 2px; } .tzFulek .ds-tab { padding-inline:8px; } .tzFulek .ds-tab .pic { display:none; } }
@media (prefers-reduced-motion:reduce){ .tzCella { transition:none; } .tzCella:active { transform:none; } }
.tzJel { font-size:32px; line-height:1; }