/* ============================================================
   FŐMENÜ — teljes képernyős; a négy nézet feje és a nézetek saját elemei: css/menu-nezet.css (2026-10-07)
   + játékleíró popup (méhecske, egy mondat, Játszom; a többi lenyitható részekben)

   A DESIGN SYSTEMRE épül: az elemek (ds-card, ds-hex, ds-tabs, ds-panel, ds-details, ds-switch, ds-btn…)
   a css/ds.css-ben vannak, a színek/méretek a css/tokens.css-ben. Itt CSAK a menü saját elrendezése van –
   nyers szín vagy méret helyett tokenekkel.
   ============================================================ */
#menu.overlay { display:block; padding:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 1 54 16v30L28 61 2 46V16Z M28 61v36 M2 46-2 48 M54 46l4 2' fill='none' stroke='%23D8A500' stroke-opacity='.10' stroke-width='2'/%3E%3C/svg%3E"),
    radial-gradient(circle at 92% 6%, rgba(254,207,57,.30) 0 180px, transparent 181px),
    radial-gradient(circle at 4% 96%, rgba(110,137,71,.16) 0 220px, transparent 221px),
    var(--bg); }   /* méhsejt-minta (--honey-deep, halványan) + két színfolt */
#menu.hidden { display:none !important; }
.mnWrap { max-width:1040px; margin:0 auto; padding:0 var(--sp-4) max(28px, env(safe-area-inset-bottom)); text-align:left; }
/* a fej (logó, négy nézet-fül, Profil, ☰): css/menu-nezet.css */
.mnView { margin-top:var(--sp-4); }
.mnView h2 { font:400 var(--fs-2xl)/1.05 var(--display); margin:0 0 6px; }
.mnLead { font-size:15px; color:var(--ink-soft); margin:0 0 14px; max-width:62ch; }
.mnNote { font-size:12.5px; color:var(--ink-soft); margin-top:12px; }

/* köszönés: kacsintó méhecske + kérdés */
.mnHello { display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-4); }
.mnHello img { width:74px; height:auto; }
.mnHello h2 { margin:0; font-size:clamp(34px, 6vw, var(--fs-3xl)); }

/* folytatás-sáv */
.mnResume { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; background:var(--butter);
  border:var(--line-w) solid var(--line); border-radius:var(--r-l); padding:10px 14px; margin-bottom:var(--sp-4); box-shadow:var(--soft-sm); font-weight:700; }

/* játékkártyák: a csempe egy doboz (ds-card), benne a nagy gomb (.mnGameFo: hatszög + név + egy sor) és alul a módválasztó
   (.mnModok: Egyedül · Ketten / Párbaj – css/menu-nezet.css). Egérrel a doboz emelkedik, ha a nagy gomb fölött vagy. */
.mnGames { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
@media (max-width:820px){ .mnGames { grid-template-columns:repeat(2, 1fr); gap:14px; } }
.mnGame { position:relative; padding:0; border-radius:var(--r-xl); display:flex; flex-direction:column;
  transition:transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); }
.mnGameFo { position:relative; flex:1; width:100%; text-align:center; padding:18px 14px var(--sp-4); display:flex; flex-direction:column; align-items:center; gap:6px;
  font:inherit; color:var(--ink); background:none; border:0; border-radius:inherit; cursor:pointer; }
.mnGameFo:focus-visible { outline:3px solid var(--focus); outline-offset:-5px; }
@media (hover:hover) and (pointer:fine){ .mnGame:has(.mnGameFo:hover) { transform:translateY(-3px); } .mnGameFo:hover .ds-hex img { transform:rotate(-6deg) scale(1.05); } }
.mnGame:has(.mnGameFo:active) { transform:translateY(2px); box-shadow:var(--soft-sm); }
@media (prefers-reduced-motion: reduce){ .mnGame { transition:none; } }
.mnGame .ds-hex { margin-bottom:var(--sp-1); }
/* matrica a hatszögben (ha a játéknak nincs méhecske-figurája): kicsit nagyobb, hogy a figurák mellett ne vesszen el */
.mnGame .ds-hex img.art, .giHex img.art { width:76%; }
.mnGame b { font:400 25px/1 var(--display); }
.mnGame .mnTag { font-size:13.5px; line-height:1.35; color:var(--ink-soft); max-width:30ch; }
.mnBest { position:absolute; top:var(--sp-3); right:var(--sp-3); }
.mnGame .mnBest.mnStarsCard { position:static; --size:22px; }   /* a csillagok a szövegfolyamban, ne takarják a hatszöget */
@media (max-width:420px){ .mnGame { border-radius:var(--r-l); } .mnGameFo { padding:14px var(--sp-2) var(--sp-3); } .mnGame .ds-hex { --size:88px; } .mnGame b { font-size:20px; } .mnGame .mnTag { font-size:var(--fs-xs); } }
/* „Mennyi időd van?” (js/menu-lista.js): gyorsválasztó, téma, rács/lista nézet, ajánlósor */
.mnGame[hidden] { display:none; }
.mnGameTxt { display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; }
.mnMeta { display:flex; flex-wrap:wrap; justify-content:center; gap:4px; }
.mnMeta .ds-chip.is-small { font:700 12px/1 var(--body); padding:4px 8px 3px 5px; border-width:2px; } .mnMeta .ds-chip .pic { width:15px; height:15px; }
.giHero .mnMeta { justify-content:flex-start; margin-top:6px; }
.mnPick { display:grid; gap:var(--sp-2); margin:0 0 var(--sp-4); }
.mnPickQ { font:400 var(--fs-l)/1 var(--display); }
.mnPickRow { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); }
.mnPickBtn { cursor:pointer; min-height:var(--tap); font:inherit; font-weight:800; }
.mnTopic select { min-height:var(--tap); font:700 14px/1 var(--body); color:var(--ink); background:var(--surface); border:var(--line-w) solid var(--line);
  border-radius:var(--r-pill); padding:0 14px; max-width:60vw; }
.mnViewSeg { margin-left:auto; } .mnViewSeg .pic { width:20px; height:20px; }
/* listanézet: egy oszlop, hatszög balra, szöveg és csipeszek mellette, a módválasztó jobbra (keskenyen alatta) */
.mnGames.is-list { grid-template-columns:1fr; gap:10px; }
.mnGames.is-list .mnGame { flex-direction:row; flex-wrap:wrap; align-items:center; border-radius:var(--r-l); }
.mnGames.is-list .mnGameFo { flex:1 1 260px; flex-direction:row; text-align:left; align-items:center; gap:var(--sp-3); padding:10px var(--sp-3); }
.mnGames.is-list .mnGame .ds-hex { --size:64px; margin:0; flex:0 0 auto; }
.mnGames.is-list .mnGameTxt { align-items:flex-start; gap:4px; flex:1; }
.mnGames.is-list .mnGame b { font-size:22px; } .mnGames.is-list .mnGame .mnTag { max-width:none; }
.mnGames.is-list .mnMeta { justify-content:flex-start; }
.mnGames.is-list .mnBest { position:static; flex:0 0 auto; }
@media (max-width:420px){ .mnViewSeg { margin-left:0; } .mnGames.is-list .mnGame .ds-hex { --size:52px; } .mnGames.is-list .mnGame b { font-size:19px; } }

/* beállítások */
.mnSettings { display:grid; gap:10px; max-width:640px; }
.mnRow { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); background:var(--surface); border:var(--line-w) solid var(--line);
  border-radius:var(--r-l); padding:var(--sp-3) var(--sp-4); }
.mnRow b { display:flex; align-items:center; gap:8px; font-size:15px; } .mnRow b .pic { width:22px; height:22px; }
.mnRow small { display:block; font-size:12.5px; color:var(--ink-soft); margin-top:2px; }

/* ranglisták */
.mnLbTabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:var(--sp-3); }
.mnLbTab.on { background:var(--accent); }
.mnLbBox { background:var(--surface); border:var(--line-w) solid var(--line); border-radius:var(--r-l); padding:var(--sp-4) 20px; max-width:520px; box-shadow:var(--soft); }
.mnLbTitle { font:400 22px/1.1 var(--display); }
.mnLbBox ol { margin:8px 0 0 20px; font-size:15px; line-height:1.8; }

/* ---- játékleíró popup (ds-panel) ---- */
#gameInfo { position:fixed; inset:0; z-index:var(--z-popup); background:var(--scrim); display:flex; align-items:flex-start; justify-content:center;
  overflow-y:auto; padding:max(14px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom)); }
#gameInfo.hidden { display:none !important; }
.giBox { text-align:left; }
.giClose { position:absolute; top:var(--sp-3); right:var(--sp-3); }
.giClose .pic { width:20px; height:20px; }
.giHero { display:flex; align-items:center; gap:var(--sp-4); padding-right:48px; }
.giHex { --size:112px; }
.giHero h2 { font:400 36px/1 var(--display); margin:0; }
.giHero small { display:block; font-size:var(--fs-s); font-weight:600; color:var(--ink-soft); margin-top:6px; }
.giAbout { font-size:15px; line-height:1.55; margin:14px 0 0; }
.giPlay { margin-top:var(--sp-4); display:flex; flex-direction:column; gap:10px; }
.giPlay .ds-btn { font-size:24px; text-wrap:balance; }
/* két oszlop; páratlan számnál az utolsó gomb kitölti a sort (nem lóg egy magányos kis gomb) */
.giLevels { display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.giLevels > * { flex:1 1 calc(50% - 4px); }
.giLevels .mnBtn { text-align:left; border-radius:var(--r-m); }
.giLevels .mnBtn small .ds-stars { --size:14px; gap:1px; vertical-align:-2px; }
.giLevels .mnBtn small .pic { width:13px; height:13px; vertical-align:-2px; }
.giLevelsTitle { font-size:13px; font-weight:700; margin:4px 0 -2px; color:var(--ink-soft); }
@media (max-width:480px){ .giHero { gap:10px; } .giHex { --size:84px; } .giHero h2 { font-size:28px; } }

/* „Kevesebb mozgás" beállítás (a rendszer-szintű prefers-reduced-motion mellett) */
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation-duration:.01s !important; animation-iteration-count:1 !important; transition-duration:.01s !important; }

/* ---- Rólunk / adatkezelés + kiemelt letöltés-sáv (ds-banner) ---- */
.mnAbout { display:grid; gap:var(--sp-3); max-width:760px; }
.mnAboutSec { background:var(--surface); border:var(--line-w) solid var(--line); border-radius:var(--r-l); padding:14px 18px; }
.mnAboutSec h3 { font:400 22px/1.1 var(--display); margin:0 0 6px; }
.mnAboutSec p { font-size:var(--fs-s); line-height:1.55; margin:6px 0 0; }
.mnAboutSec ul { margin:6px 0 0 20px; font-size:var(--fs-s); line-height:1.55; }
.mnAboutSec a { color:var(--focus); }
.mnApp { margin-top:18px; }
.mnAppQr { display:flex; align-items:center; gap:14px; text-align:left; }   /* kioszkban QR-kód a letöltés gomb helyett */
.mnApp .mnAppTxt b { display:block; font:400 22px/1.05 var(--display); } .mnApp .mnAppTxt small { display:block; font-size:13px; margin-top:4px; }
.mnApp .mnAppBtn { font-size:19px; padding:9px 20px 6px; background:var(--surface); white-space:nowrap; }
/* a kör végén csendes, másodlagos elem: a képernyő fő cselekvése a „Következő” gomb marad (képernyőnként egy fő gomb) */
.mnApp.compact { margin:14px 0 0; padding:0; justify-content:center; background:none; border:0; box-shadow:none; }
.mnApp.compact .mnAppBtn { font-size:17px; padding:8px 16px 5px; }
@media (max-width:600px){ .mnApp { flex-direction:column; align-items:stretch; text-align:center; } .mnApp .mnAppBtn { width:100%; } }

/* nyelvválasztó (HU | EN) a ☰ menüben – js/i18n.js */
.mnLang .ds-seg button { min-width:44px; min-height:36px; padding:0 10px; font-weight:800; }

/* Ketten – nevek a Beállításokban (js/ketten.js) */
.mnKtNames { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.mnKtSel { min-height:var(--tap); font:700 14px/1 var(--body); color:var(--ink); background:var(--surface); border:var(--line-w) solid var(--line); border-radius:var(--r-pill); padding:0 12px; max-width:38vw; }
.mnKtNames .ds-btn-sm { cursor:pointer; }

/* Első 5 perc: a köszöntő kártya helyett 2026-10-05-től a kirakat „Kezdd itt” csempéje (css/menu-kirakat.css) */

/* beágyazott mód (?keret=1, js/beagyazas.js): a partner oldala a keret – nincs app-sáv és tanári link (a ☰ menüben sem) */
html.beagyazva .mnApp, html.beagyazva .mnAppSlot, html.beagyazva .mnTeach { display:none; }

/* ha a böngésző nem tud 3D-t (WebGL): a 3D játékok kártyája jelzi (js/jatek-vilag.js → html.nincs-3d) */
.mnGame.mnNo3d { opacity:.62; } .mnNo3dChip { display:inline-flex; margin-top:4px; }

/* verzió és hibajelentés a Rólunk lapon (js/indulas.js) */
.mnBuild .ds-btn-sm { cursor:pointer; }
.mnReport { width:100%; margin-top:8px; font:600 12px/1.4 ui-monospace, Menlo, monospace; color:var(--ink); background:var(--surface);
  border:var(--line-w) solid var(--line); border-radius:var(--r-m); padding:8px; }

/* tesztidőszaki visszajelzés-gomb (rolunk.json → feedbackUrl); a kör vége panelen is megjelenik */
.mnFeedback { text-decoration:none; margin-left:var(--sp-2); display:inline-flex; align-items:center; gap:4px; }
.ds-result .mnFeedback { margin:var(--sp-2) auto 0; }

/* nehézség-választó a leíró ablakban (js/nehezseg.js) */
.nhRow { display:grid; gap:6px; margin:0 0 var(--sp-2); } .nhLbl { font-weight:700; }
.nhRow .ds-seg { flex-wrap:wrap; } .nhRow .ds-seg button { flex:1 1 0; min-height:var(--tap); display:flex; flex-direction:column; gap:2px; align-items:center; }
.nhRow .ds-seg button small { font-weight:600; font-size:var(--fs-xs); } .nhRow .ds-seg button:not(.on) small { color:var(--ink-soft); } .nhNote { color:var(--ink-soft); }