/* ============================================================
   MENÜ – KIRAKAT ÉS JÁTÉK-CSOPORTOK (js/menu-kirakat.js, js/menu-lista.js) – átvilágítás 2. kör, 2026-10-05. Csak tokenek.
   2026-10-07 (négy nézet): a fő csempe (Kezdd itt / Folytasd / Ajánlott) az „Én” nézet tetején, a játékok a „Méhesd” nézetben
   TÍPUS szerint; a szűrők egy „Szűrés” gomb mögött. A menu.css UTÁN töltődik.
   ============================================================ */
/* a fő csempe az „Én” nézet tetején */
.mnFoCsempe { display:flex; flex-direction:column; gap:var(--sp-1); }
.mnFoCsempe:empty { display:none; }

/* fő csempe: hatszög balra, szöveg és gomb mellette – az egész csempe kattintható */
.mnFo { flex:1; display:grid; grid-template-columns:auto 1fr; grid-template-areas:"hex txt" "hex gomb"; align-items:center;
  gap:var(--sp-2) var(--sp-3); padding:var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-3); text-align:left; font:inherit; color:var(--ink);
  border-radius:var(--r-xl); cursor:pointer; }
.mnFo.is-kezd { background:var(--butter); }
.mnFo .ds-hex { grid-area:hex; --size:112px; margin:0; }
.mnFo .ds-hex img.art { width:76%; }
.mnFoTxt { grid-area:txt; display:flex; flex-direction:column; gap:4px; min-width:0; }
.mnFoSzem { display:inline-flex; align-items:center; gap:4px; font:800 var(--fs-s)/1 var(--body); color:var(--ink-soft); }
.mnFoSzem .pic { width:18px; height:18px; }
.mnFo b { font:400 clamp(var(--fs-l), 2.6vw, var(--fs-xl))/1.05 var(--display); text-wrap:balance; }
.mnFo small { font-size:var(--fs-s); line-height:1.35; color:var(--ink-soft); }
.mnFo .mnMeta { justify-content:flex-start; }
.mnFoGomb { grid-area:gomb; justify-self:start; pointer-events:none; }
.mnFoMas { align-self:flex-end; min-height:var(--tap); padding:0 var(--sp-1); background:none; border:0; cursor:pointer;
  font:700 var(--fs-s)/1 var(--body); color:var(--ink-soft); text-decoration:underline; text-underline-offset:3px; }
.mnFoMas:focus-visible { outline:3px solid var(--focus); outline-offset:2px; border-radius:var(--r-s); }

/* a játéklista feje: cím + Szűrés + rács/lista; a szűrő-panel lenyílik */
.mnPick { margin:var(--sp-5) 0 var(--sp-3); }
.mnJatekFej { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); }
.mnJatekCim { margin:0 auto 0 0; font:400 var(--fs-xl)/1 var(--display); }
.mnSzuresBtn { display:inline-flex; align-items:center; gap:6px; min-height:var(--tap); cursor:pointer; }
.mnSzuresBtn .pic { width:20px; height:20px; }
.mnSzuresN { display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:var(--r-pill);
  background:var(--ink); color:var(--surface); font:800 var(--fs-xs)/1 var(--body); }
.mnSzuresN[hidden], .mnSzuresPanel[hidden], .mnSzuresTorol[hidden] { display:none; }
.mnPick .mnViewSeg { margin-left:0; }
.mnSzuresPanel { display:grid; gap:var(--sp-2); padding:var(--sp-3); background:var(--surface); border:var(--line-w) solid var(--line);
  border-radius:var(--r-l); box-shadow:var(--soft-sm); }
.mnSzuresTorol { display:inline-flex; align-items:center; gap:4px; min-height:var(--tap); cursor:pointer; }

/* típus-csoportok: fejléc + egy mondat + saját rács */
.mnGames.is-csop { display:flex; flex-direction:column; gap:var(--sp-5); }
.mnCsop[hidden] { display:none; }
.mnCsopCim { display:flex; align-items:center; gap:var(--sp-2); margin:0 0 var(--sp-1); font:400 var(--fs-l)/1 var(--display); }
.mnCsopSor { margin:0 0 var(--sp-3); font-size:var(--fs-s); color:var(--ink-soft); }
.mnCsop .mnTipus { display:none; }   /* a csoport neve már megmondja a típust */
.mnCsopCim .pic { width:26px; height:26px; }
.mnCsopRacs { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
@media (max-width:820px){ .mnCsopRacs { grid-template-columns:repeat(2, 1fr); gap:14px; } }
.mnGames.is-list .mnCsopRacs { grid-template-columns:1fr; gap:10px; }

/* a kártyán a játék épülete Méhesden */
.mnEpulet { display:inline-flex; align-items:center; gap:3px; font:700 var(--fs-xs)/1.2 var(--body); color:var(--ink-soft); }
.mnEpulet .pic { width:14px; height:14px; flex:none; }

@media (max-width:420px){
  /* a köszönés egy-két sorban, hogy a „Kezdd itt” csempe is az első képernyőre férjen */
  .mnHello { gap:var(--sp-2); margin-bottom:var(--sp-3); } .mnHello img { width:56px; } .mnHello h2 { font-size:var(--fs-xl); }
  .mnFo { padding:var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2); gap:var(--sp-1) var(--sp-2); }
  .mnFo .ds-hex { --size:84px; }
  .mnJatekCim { font-size:var(--fs-l); }
}
@media (prefers-reduced-motion: reduce){ .mnFo .ds-hex img { transition:none; } }

/* kulcskép: a kártya tetején a játék világának 3 matricája a játék színén (js/menu.js mnKulcskep) – a méhecske-hatszög
   kisebb, és ráfed a sáv aljára; listanézetben nincs sáv (2026-10-06) */
.mnGame { overflow:hidden; }
.mnKulcs { align-self:stretch; margin:-18px -14px 0; height:96px; display:flex; justify-content:center; align-items:flex-end; gap:0;
  padding-bottom:10px; background:var(--acc, var(--butter)); background:color-mix(in srgb, var(--acc, var(--butter)) 55%, var(--surface)); }
.mnKulcsM { display:block; line-height:0; }
.mnKulcsM img.art { width:58px; height:auto; }
/* a kulcsképek a menü után, szabad időben érkeznek (js/menu.js mnKulcsTolt) – halk beúszás, hogy ne „pattanjanak” */
.mnKulcsM img.art { animation:mnKulcsBe var(--t-fast, 180ms) var(--ease-out) both; }
@keyframes mnKulcsBe { from { opacity:0; transform:translateY(6px); } }
@media (prefers-reduced-motion: reduce){ .mnKulcsM img.art { animation:none; } }
.mnKulcsM.is-0 { transform:rotate(-10deg) translateY(4px); margin-right:-6px; }
.mnKulcsM.is-1 { position:relative; z-index:1; } .mnKulcsM.is-1 img.art { width:70px; }
.mnKulcsM.is-2 { transform:rotate(10deg) translateY(4px); margin-left:-6px; }
.mnGame:has(.mnKulcs) .ds-hex { --size:84px; margin-top:-30px; position:relative; z-index:2; }
@media (hover:hover) and (pointer:fine){ .mnGame:hover .mnKulcsM.is-1 { transform:translateY(-3px); transition:transform var(--t-fast) var(--ease-out); } }
.mnGames.is-list .mnKulcs { display:none; } .mnGames.is-list .mnGame:has(.mnKulcs) .ds-hex { margin-top:0; }
@media (max-width:420px){
  .mnKulcs { margin:-14px calc(-1 * var(--sp-2)) 0; height:76px; padding-bottom:8px; }
  .mnKulcsM img.art { width:44px; } .mnKulcsM.is-1 img.art { width:54px; }
  .mnGame:has(.mnKulcs) .ds-hex { --size:66px; margin-top:-24px; }
}
@media (prefers-reduced-motion: reduce){ .mnGame:hover .mnKulcsM.is-1 { transform:none; } }