/* ============================================================
   FŐMENÜ – NÉGY NÉZET (Kristóf, 2026-10-07): a fej (logó, Én · Méhesd · Bolygó · Jövők, Profil, ☰), a kártyák módválasztója,
   az „Én”, a „Bolygó” és a „Jövők” nézet elemei, és a Profil-panel saját részei (js/menu-nezet.js, menu-en.js, menu-bolygo.js,
   menu-jovok.js, menu-profil.js, album.js). Csak tokenek; a menu.css és a menu-kirakat.css UTÁN töltődik.
   ============================================================ */

/* ---- fej: széles kijelzőn egy sor (logó | fülek | Profil ☰), telefonon két sor; görgetéskor fent marad ---- */
.mnHead { position:sticky; top:0; z-index:var(--z-panel); display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:"logo fulek jobb";
  align-items:center; gap:var(--sp-2) var(--sp-4); margin:0 calc(-1 * var(--sp-4)); padding:max(10px, env(safe-area-inset-top)) var(--sp-4) var(--sp-2);
  /* a háttér és az alsó vonal a képernyő teljes szélességében: keret-kép kifutással (nem nő tőle a görgethető terület, és nem vág le
     semmit – a ☰ lenyíló kilóghat a fej alá) */
  border-image:linear-gradient(to top, var(--sage-bg) 2px, var(--bg) 2px) 0 fill / 0 / 0 100vmax; }
.mnLogo { grid-area:logo; height:48px; width:auto; }
.mnTabs { grid-area:fulek; justify-self:center; width:min(100%, 600px); }
.mnTab { flex:1 1 0; justify-content:center; min-height:52px; font-size:var(--fs-m); }
.mnTab .pic { width:26px; height:26px; flex:none; }
.mnFejJobb { grid-area:jobb; position:relative; display:flex; align-items:center; gap:var(--sp-2); }
@media (max-width:760px){
  .mnHead { grid-template-columns:1fr auto; grid-template-areas:"logo jobb" "fulek fulek"; }
  .mnLogo { height:36px; }
  .mnTabs { width:100%; }
  .mnTab { flex-direction:column; gap:2px; min-height:56px; padding:4px 2px; font-size:var(--fs-xs); }   /* legalább 12 px (méret-próba) */
  .mnTab .pic { width:24px; height:24px; }
}

/* Profil gomb: a lakó figurája (vagy a méhecske) + az összes csillagod */
.mnProfilBtn { display:inline-flex; align-items:center; gap:6px; min-height:var(--tap); padding:3px 12px 3px 3px; font:700 var(--fs-s)/1 var(--body);
  color:var(--ink); background:var(--surface); border:var(--line-w) solid var(--line); border-radius:var(--r-pill); box-shadow:var(--soft-sm); cursor:pointer;
  transition:transform var(--t-press) var(--ease-out); }
.mnProfilBtn:active { transform:scale(.96); }
.mnProfilBtn:focus-visible, .mnHamSor:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.mnProfilArc { width:36px; height:36px; border-radius:50%; overflow:hidden; display:grid; place-items:end center; background:var(--butter); flex:none; }
.mnProfilArc svg, .mnProfilArc img { width:100%; height:100%; display:block; object-fit:contain; }
.mnProfilCs { display:inline-flex; align-items:center; gap:3px; } .mnProfilCs .pic { width:18px; height:18px; }
@media (max-width:900px){ .mnProfilNev { display:none; } }

/* ☰ lenyíló: Beállítások, Rólunk, Tanároknak, nyelv */
.mnHam { position:absolute; right:0; top:calc(100% + var(--sp-2)); z-index:var(--z-panel); width:max-content; min-width:250px; max-width:calc(100vw - 24px);
  display:flex; flex-direction:column; gap:2px; padding:var(--sp-2); }
.mnHam[hidden] { display:none; }
.mnHamFej { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); padding:0 0 var(--sp-1) var(--sp-3); }
.mnHamFej b { font:400 var(--fs-l)/1 var(--display); }
.mnHamSor { display:flex; align-items:center; gap:var(--sp-2); min-height:48px; padding:0 var(--sp-3); font:700 var(--fs-m)/1.2 var(--body); color:var(--ink);
  text-align:left; text-decoration:none; background:none; border:0; border-radius:var(--r-m); cursor:pointer; }
.mnHamSor .pic { width:22px; height:22px; flex:none; }
@media (hover:hover) and (pointer:fine){ button.mnHamSor:hover, a.mnHamSor:hover { background:var(--butter); } }
.mnHamSor.mnLang { justify-content:space-between; cursor:default; border-top:2px solid var(--sage-bg); border-radius:0; margin-top:var(--sp-1); padding-top:var(--sp-2); }
.mnHamSor.mnLang > span { display:inline-flex; align-items:center; gap:var(--sp-2); }
html.kiosk-lock .mnHam .mnTeach, html.beagyazva .mnHam .mnTeach { display:none; }
.mnVissza { display:inline-flex; align-items:center; gap:6px; margin-bottom:var(--sp-3); cursor:pointer; }

/* a Bolygó és a Jövők nézetben nincs app-letöltő sáv: ott a nézet egyetlen fő gombja a lényeg */
.mnView[data-nezet="bolygo"] .mnAppSlot, .mnView[data-nezet="jovok"] .mnAppSlot { display:none; }
/* nézetek: a köszönés az Én nézetben */
.mnNezet[hidden] { display:none; }
.mnHello { margin-top:var(--sp-1); }
@media (max-width:420px){ .mnHello img { width:48px; } .mnHello h2 { font-size:var(--fs-xl); } }

/* ---- kártya módválasztó: Egyedül · Ketten / Párbaj (js/menu.js mnModokHTML) ---- */
.mnModok { margin:0 var(--sp-3) var(--sp-3); }
.mnModok button { flex:1 1 0; display:inline-flex; align-items:center; justify-content:center; gap:4px; min-width:0; min-height:var(--tap);
  font:700 var(--fs-s)/1.1 var(--body); color:var(--ink); background:var(--bg); }
.mnModok button .pic { width:18px; height:18px; flex:none; }
@media (hover:hover) and (pointer:fine){ .mnModok button:hover { background:var(--butter); } }
.mnViewSeg button { min-width:var(--tap); }   /* rács / lista: 44 px-es koppintás */
.mnGames.is-list .mnModok { flex:0 1 auto; margin:0 var(--sp-3) var(--sp-2) auto; }
/* keskeny kártyán (két oszlop telefonon) az „Egyedül” ikon nélkül fér el; a kétszemélyes gomb ikonja marad */
@media (max-width:480px){ .mnModok { margin:0 var(--sp-2) var(--sp-2); } .mnModok button { font-size:var(--fs-xs); padding:6px 2px; gap:2px; }
  .mnModok button .pic { width:16px; height:16px; } .mnModok [data-mnmod="egy"] .pic { display:none; } }

/* a Méhesd 2050 csempe a Méhesd nézet tetején: a nézet egyetlen fő gombjával */
#mnNezet-mehesd .mhMenuCard { border-radius:var(--r-xl); }
#mnNezet-mehesd .mhMenuCard .mhMenuCity { height:112px; }
.mhMenuGomb { pointer-events:none; white-space:nowrap; }
@media (max-width:760px){ .mhMenuCard .mhMenuGomb { justify-self:start; } }

/* ---- közös blokk az Én nézetben ---- */
.mnSkel { height:120px; border-radius:var(--r-l); } .mnSkel.is-nagy { height:280px; margin-top:var(--sp-3); }
.mnBlokk { min-width:0; padding:var(--sp-3) var(--sp-4) var(--sp-4); background:var(--surface); border:var(--line-w) solid var(--line);
  border-radius:var(--r-l); box-shadow:var(--soft-sm); }
.mnBlokkCim { display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2); margin:0 0 var(--sp-2); font:400 var(--fs-l)/1.1 var(--display); }
.mnBlokkCim .pic { width:26px; height:26px; flex:none; }
.mnBlokkCim > span:first-of-type { margin-right:auto; }
.mnBlokkSor { margin:0 0 var(--sp-3); font-size:var(--fs-s); color:var(--ink-soft); }
.mnEn { display:grid; grid-template-columns:1fr; gap:var(--sp-3); margin-top:var(--sp-3); align-items:start; }
.mnEnOldal { display:grid; gap:var(--sp-3); min-width:0; }
@media (min-width:860px){ .mnEn { grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr); } }

/* valódi küldetések */
.mnKuldRacs { display:grid; gap:var(--sp-2); }
.mnKuld { display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:var(--sp-3); background:var(--bg); border-radius:var(--r-m); }
.mnKuld b { font:400 var(--fs-l)/1.1 var(--display); }
.mnKuldTema { display:inline-flex; align-items:center; gap:4px; font:700 var(--fs-xs)/1 var(--body); color:var(--ink-soft); }
.mnKuldTema .pic { width:16px; height:16px; }
.mnKuldSor { display:flex; flex-wrap:wrap; gap:4px; }
.mnKuldLab { align-self:stretch; display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--sp-2); }
.mnKuldLab .ds-details { flex:1 1 140px; min-width:0; }
.mnKuldLab .ds-details > summary span { white-space:nowrap; }
.mnKuldLab .ds-details[open] { flex-basis:100%; }
.mnKuldLab .ds-details > summary { min-height:var(--tap); }
.mnKuld.is-done { background:var(--good-bg); }
.mnKuldKesz { display:inline-flex; align-items:center; gap:6px; min-height:var(--tap); margin:0; font-weight:800; color:var(--good-ink); }
.mnKuld .ds-btn-sm, .mnEnVaros { display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.mnEnVaros { margin-top:var(--sp-3); }

/* lakó-típus */
.mnLako { display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-3); }
.mnLako p { flex:1 1 180px; margin:0; font-size:var(--fs-s); }
.mnLakoArc { width:64px; height:64px; border-radius:50%; overflow:hidden; display:grid; place-items:end center; background:var(--butter); flex:none; }
.mnLakoArc svg, .mnLakoArc img { width:100%; height:100%; display:block; object-fit:contain; }
.mnLako .ds-btn-sm { display:inline-flex; align-items:center; gap:6px; cursor:pointer; }

/* „Neked ajánlott” */
.mnAjanlLista { display:grid; gap:var(--sp-2); }
.mnAjanl { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-2) var(--sp-3); text-align:left; font:inherit; color:var(--ink); border-radius:var(--r-m); }
.mnAjanl .ds-hex { --size:56px; flex:none; }
.mnAjanl .ds-hex img.art { width:76%; }
.mnAjanlTxt { display:flex; flex-direction:column; gap:3px; min-width:0; }
.mnAjanlTxt b { font:400 var(--fs-l)/1.05 var(--display); } .mnAjanlTxt small { font-size:var(--fs-s); color:var(--ink-soft); }
.mnAjanl .mnMeta { justify-content:flex-start; }

/* ---- Bolygó nézet: a Föld állapota ---- */
.mnBlFej h2, .mnJvFej h2 { margin:0 0 6px; font:400 var(--fs-2xl)/1.05 var(--display); }
.mnBlRacs { display:grid; grid-template-columns:minmax(0, 1fr); gap:var(--sp-4); align-items:center; }
@media (min-width:760px){ .mnBlRacs { grid-template-columns:minmax(260px, 1fr) minmax(0, 1.1fr); } }
.mnBlKor { padding:var(--sp-3); background:var(--surface); border:var(--line-w) solid var(--line); border-radius:var(--r-xl); box-shadow:var(--soft-sm); }
.mnBlKor .blHatarKor { width:min(100%, 280px); }
.mnBlKor .blHatarJm { margin-top:var(--sp-2); }
.mnBlSzamok { display:grid; gap:var(--sp-2); }
.mnBlSzamok.is-jo { grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.mnBlCsempe { display:grid; gap:2px; padding:var(--sp-3) var(--sp-4); background:var(--surface); border:var(--line-w) solid var(--line); border-radius:var(--r-l); }
.mnBlCsempe.is-jo { background:var(--good-bg); }
.mnBlCsempe small { font:700 var(--fs-s)/1.25 var(--body); color:var(--ink-soft); }
.mnBlCsempe > b { font:400 var(--fs-2xl)/1 var(--display); }
.mnBlEgys { font-size:var(--fs-s); }
.mnBlForras { display:inline-flex; align-items:center; gap:4px; min-height:var(--tap); font-size:var(--fs-xs); color:var(--focus); overflow-wrap:anywhere; }
.mnBlForras .pic { width:14px; height:14px; flex:none; }
.mnBlLista { list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.mnBlLista li { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-weight:700; }
.mnBlBe, .mnJvBe { display:flex; margin:var(--sp-3) auto var(--sp-4); }
#mnNezet-bolygo .mnBlokkCim { margin-top:var(--sp-2); }
.mnBlHonnan { margin-top:var(--sp-3); }
.mnBlHonnan a { color:var(--focus); }

/* ---- Jövők nézet: két kép ugyanarról a városról ---- */
.mnJvUtak { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--sp-3); max-width:760px; margin:var(--sp-3) auto 0; }
.mnJvUt { margin:0; display:flex; flex-direction:column; gap:var(--sp-2); }
.mnJvKep { position:relative; aspect-ratio:16 / 11; border:var(--line-w) solid var(--line); border-radius:var(--r-l); overflow:hidden; background:var(--sage-bg); box-shadow:var(--soft-sm); }
.mnJvKep canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.mnJvUt figcaption { display:inline-flex; align-items:center; gap:6px; font:400 var(--fs-l)/1.1 var(--display); }
.mnJvUt figcaption .pic { width:24px; height:24px; flex:none; }
.mnJvMeg { text-align:center; } .mnJvMeg .pic { width:18px; height:18px; vertical-align:-4px; margin-right:4px; }

/* ---- Profil-panel (js/album.js + js/menu-profil.js) ---- */
.profilFej { display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-3); }
.profilArc { width:64px; height:64px; border-radius:50%; overflow:hidden; display:grid; place-items:end center; background:var(--butter); flex:none; }
.profilArc svg, .profilArc img { width:100%; height:100%; display:block; object-fit:contain; }
.profilKi { flex:1 1 180px; display:flex; flex-direction:column; gap:2px; min-width:0; }
.profilKi b { font:400 var(--fs-l)/1.1 var(--display); } .profilKi small { color:var(--ink-soft); font-size:var(--fs-s); }
.profilFej .ds-btn-sm { display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.albumFulek .ds-tab { flex-direction:column; gap:2px; min-height:52px; padding:4px 2px; font-size:var(--fs-xs); }
@media (min-width:600px){ .albumFulek .ds-tab { flex-direction:row; gap:6px; font-size:var(--fs-s); } }
.profilLista { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap:var(--sp-2); }
.profilSor { display:flex; align-items:center; gap:var(--sp-2); min-height:60px; padding:6px var(--sp-3) 6px 6px; text-align:left; font:inherit; color:var(--ink);
  background:var(--surface); border:var(--line-w) solid var(--line); border-radius:var(--r-m); cursor:pointer; touch-action:manipulation; }
.profilSor:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
@media (hover:hover) and (pointer:fine){ .profilSor:hover { background:var(--butter); } }
.profilHex { --size:44px; flex:none; } .profilHex img.art { width:76%; }
.profilSorTxt { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.profilSorTxt b { font:700 var(--fs-s)/1.2 var(--body); } .profilSorTxt small { display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-xs); color:var(--ink-soft); }
.profilSorTxt small .pic { width:14px; height:14px; }
.profilSor .ds-stars { --size:18px; flex:none; }
.profilMeg { flex:none; font-size:var(--fs-xs); color:var(--ink-soft); }
.profilLbValaszt { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); margin:0 0 var(--sp-2); font-weight:700; }
.profilLbValaszt select { min-height:var(--tap); max-width:100%; font:700 var(--fs-s)/1 var(--body); color:var(--ink); background:var(--surface);
  border:var(--line-w) solid var(--line); border-radius:var(--r-pill); padding:0 14px; }
.albumBox .mnLbBox { max-width:none; }