/* ============================================================
   Játékmenü (js/jatek-menu.js) — bal fent EGY „Menü” gomb, alatta lenyíló lista: Főmenü · Irányítás · Hang · Jótanácsok ·
   Teljes képernyő. Minden játékréteg fölött (a jelenet- és bemutató-rétegek is --z-scene szinten vannak), de a figyelmeztetés
   és a kör végi ablak (--z-alert, --z-top) alatt. Csak tokenek (docs/arculat.md).
   A játékok saját szabályai a #sysBtns HELYÉT állíthatják (pl. top/left); a gombok méretét ez a fájl adja – a lista gombjai
   két azonosítós szelektorral, hogy a játékonkénti „#sysBtns button { 36px }” ne nyomja össze őket.
   ============================================================ */
#sysBtns { position:fixed; top:calc(14px + env(safe-area-inset-top, 0px)); left:calc(14px + env(safe-area-inset-left, 0px));
  z-index:calc(var(--z-scene) + 6); display:block; }   /* a „Hogyan játssz?” kártya (+4) és a betöltő (+5) fölött is koppintható */
#sysBtns #jmGomb { width:auto; height:auto; min-height:var(--tap); padding:0 14px 0 10px; border-radius:var(--r-pill); display:inline-flex; align-items:center; gap:6px;
  background:var(--accent); color:var(--on-accent); border:var(--line-w) solid var(--line); box-shadow:var(--soft-sm); cursor:pointer;
  font:700 var(--fs-s)/1 var(--body); }
#sysBtns #jmGomb .pic { width:20px; height:20px; }
#sysBtns #jmGomb[aria-expanded="true"] { background:var(--surface); color:var(--ink); }
#sysBtns #jmGomb:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }

#jmLista { position:absolute; top:calc(100% + 8px); left:0; min-width:min(260px, calc(100vw - 28px)); padding:6px; margin:0; display:grid; gap:2px; }
#jmLista.hidden { display:none; }
/* a lista teteje: melyik játékban vagy, és milyen módban (nem koppintható – csak tájékoztat) */
#jmLista .jmFej { display:flex; align-items:center; gap:10px; padding:6px 10px 10px; margin-bottom:4px; border-bottom:var(--line-w) solid var(--sage); max-width:min(300px, calc(100vw - 40px)); }
#jmLista .jmFejIkon { display:grid; place-items:center; width:36px; height:36px; flex:none; border-radius:var(--r-m); background:var(--butter); font-size:22px; line-height:1; }
#jmLista .jmFejIkon svg, #jmLista .jmFejIkon img, #jmLista .jmFejIkon .pic { width:28px; height:28px; }
#jmLista .jmFejSzoveg { display:grid; gap:2px; min-width:0; }
#jmLista .jmCim { font:400 var(--fs-m)/1.15 var(--display); color:var(--ink); overflow-wrap:anywhere; }
#jmLista .jmMod { font:600 var(--fs-xs)/1.3 var(--body); color:var(--ink-soft); }
#sysBtns #jmLista button { position:static; width:100%; height:auto; min-height:var(--tap); padding:6px 10px; border:0; border-radius:var(--r-m);
  display:flex; align-items:center; gap:10px; background:none; color:var(--ink); box-shadow:none; text-align:left; cursor:pointer;
  font:600 var(--fs-s)/1.2 var(--body); }
#sysBtns #jmLista button:focus-visible { outline:3px solid var(--focus); outline-offset:-1px; background:var(--butter); }
@media (hover:hover) and (pointer:fine){ #sysBtns #jmLista button:hover { background:var(--butter); } }
#sysBtns #jmLista button.off { background:none; }
#jmLista .jmIkon { display:grid; place-items:center; width:30px; height:30px; flex:none; border-radius:50%; background:var(--bg); }
#jmLista .jmIkon .pic { width:18px; height:18px; }
#jmLista .jmNev { flex:1; }
#jmLista .jmAllapot { padding:2px 10px; border-radius:var(--r-pill); background:var(--good-bg); color:var(--good-ink); font:700 var(--fs-xs)/1.4 var(--body); }
#jmLista .off .jmAllapot { background:var(--sage-bg); color:var(--ink-soft); }
#jmLista .off .jmIkon { background:var(--sage-bg); }
/* a súgó-kártya (irányítás) a Menü gomb mellett jelenik meg */
#hud { left:calc(14px + 120px); }
@media (max-width:420px){ #sysBtns #jmGomb .jmGombNev { display:none; } #sysBtns #jmGomb { padding:0 10px; } #hud { left:72px; } }