/* ============================================================
   MÉHESD 2050 — a város felülete (js/mehesd-ui.js, mehesd-kalk.js), az épület-névtáblák (#mhLabels), a menü-belépő.
   Csak tokenek. A réteg átlátszó: a 3D város látszik, csak a sávok és a panelek fogják a koppintást.
   ============================================================ */
.mehesd #score, .mehesd #hud, .mehesd #hudBtn, .mehesd #hint, .mehesd #reticle, .mehesd #nameTag, .mehesd #touchBtns, .mehesd #joy { display:none !important; }
#mhLayer { position:fixed; inset:0; z-index:var(--z-hud); pointer-events:none; color:var(--ink); font-family:var(--body);
  display:flex; flex-direction:column; gap:6px; padding:max(52px, env(safe-area-inset-top)) var(--sp-3) max(10px, env(safe-area-inset-bottom));
  padding-left:max(var(--sp-3), 58px); }   /* a bal oldali rendszergomboknak hely */
#mhLayer.hidden { display:none; }
#mhLayer > * { pointer-events:auto; }
.mhHead, .mhMeters { align-self:center; width:min(1000px, 100%); background:var(--surface); border:var(--line-w) solid var(--line); border-radius:var(--r-l); box-shadow:var(--soft-sm); }
.mhHead { display:flex; align-items:center; gap:var(--sp-2) var(--sp-3); flex-wrap:wrap; padding:6px 10px; }
.mhTitle b { display:block; font:400 var(--fs-l)/1 var(--display); } .mhTitle small { color:var(--ink-soft); font-weight:700; font-size:12px; }
.mhTools { margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; }
.mhTools .ds-chip { padding:0 6px; min-height:0; }
.mhMeters { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:4px 10px; padding:6px 10px; }
.mhM { min-width:0; display:flex; flex-direction:column; }
.mhM span { font-size:12px; font-weight:700; color:var(--ink-soft); display:flex; gap:4px; align-items:center; }
.mhM b { font:400 var(--fs-m)/1.1 var(--display); font-variant-numeric:tabular-nums; }
.mhM small { font-size:var(--fs-xs); color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* első belépés: mondat a nullás mérők helyett, mellette a „Nézd meg 2050-ben” (2026-10-06) */
.mhMeters:has(.mhUres) { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-3); }
.mhUres { flex:1 1 220px; margin:0; display:flex; align-items:center; gap:6px; font-size:var(--fs-s); color:var(--ink-soft); }
.mhUres .pic { width:20px; height:20px; flex:none; }
.mhElonezetBtn { justify-self:end; align-self:center; display:inline-flex; align-items:center; gap:4px; min-height:var(--tap); cursor:pointer; white-space:nowrap; }
.mhMeters:not(:has(.mhUres)) { grid-template-columns:repeat(5, minmax(0, 1fr)) auto; }
/* mini-térkép a jobb alsó sarokban */
.mhMini { margin-top:auto; align-self:flex-end; width:176px; height:128px; border:var(--line-w) solid var(--line); border-radius:var(--r-m); box-shadow:var(--soft-sm); cursor:pointer; background:var(--surface); }
/* épület-névtáblák */
#mhLabels { position:fixed; inset:0; pointer-events:none; z-index:calc(var(--z-hud) - 1); }
#mhLabels:empty { display:none; }
.mhTag { position:absolute; left:0; top:0; pointer-events:auto; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:1px;
  background:var(--surface); border:var(--line-w) solid var(--line); border-radius:var(--r-m); padding:3px 8px; font:inherit; font-size:12px; line-height:1.15;
  white-space:nowrap; color:var(--ink); box-shadow:var(--soft-sm); }
.mhTag b { font-weight:800; } .mhTag i { display:flex; gap:2px; font-style:normal; font-size:10px; color:var(--ink-soft); } .mhTag i .pic { width:13px; height:13px; }
.mhTag.is-soon { background:var(--bg); border-style:dashed; }
/* panelek */
.mhPanel { position:fixed; inset:0; z-index:var(--z-panel); display:grid; place-items:center; padding:var(--sp-4); background:var(--scrim); }
.mhPanel.hidden { display:none; }
.mhPanelBox { position:relative; width:min(560px, 100%); display:flex; flex-direction:column; gap:var(--sp-3); max-height:100%; overflow-y:auto; }
.mhClose { position:absolute; top:8px; right:8px; }
.mhSay { align-items:flex-start; } .mhSay .ds-bubble { margin:0; }
.mhFace { flex:0 0 56px; width:56px; height:56px; } .mhFace svg { width:100%; height:100%; }
.mhItems { display:grid; gap:var(--sp-2); }
.mhItem { display:flex; flex-direction:column; gap:6px; padding:10px 12px; }
.mhItem header { display:flex; flex-direction:column; gap:2px; } .mhItem header b { font:400 var(--fs-m)/1.15 var(--display); }
.mhItem p { margin:0; }
.mhItem .ds-btn { align-self:flex-end; }
.mhItem.is-hand { border-style:dashed; }
.mhItem.is-done { background:var(--good-bg); }
.mhDone { color:var(--good-ink); font-weight:800; display:flex; gap:6px; align-items:center; align-self:flex-end; }
.mhTopic { display:inline-flex; gap:4px; align-items:center; font-size:12px; font-weight:800; color:var(--ink-soft); }
.mhNums, .mhTopics { display:flex; flex-wrap:wrap; gap:4px; margin:0; }
.mhNums .ds-chip.is-muted { opacity:.75; }
.mhFoot { margin:0; font-size:13px; }
.mhGames { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:var(--sp-2); }
.mhGame { display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px; text-align:center; font:inherit; color:var(--ink); cursor:pointer; }
.mhGame .ds-hex { width:64px; height:64px; } .mhGame .ds-hex img { width:100%; height:100%; object-fit:contain; }
.mhGame small { color:var(--ink-soft); font-size:12px; }
.mhCov li { display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center; } .mhCov small { color:var(--ink-soft); flex-basis:100%; padding-left:26px; }
.mhStage { display:flex; flex-direction:column; gap:var(--sp-3); align-items:center; text-align:center; }
.mhStageCity, .mhMenuCity { position:relative; width:100%; height:140px; border-radius:var(--r-m); overflow:hidden; border:var(--line-w) solid var(--line); }
.mhStageCity canvas, .mhMenuCity canvas { position:absolute; inset:0; width:100%; height:100%; }
/* gyors-kalkulátor */
.mhQzTop { display:flex; justify-content:space-between; align-items:center; gap:8px; margin:0 40px 0 0; }
.mhOpts { display:grid; gap:var(--sp-2); }
.mhOpt { padding:12px 14px; text-align:left; font:inherit; font-weight:700; color:var(--ink); cursor:pointer; min-height:var(--tap); }
.mhOpt.on { background:var(--accent); }
/* menü-belépő */
.mhMenuSlot { margin:0 0 var(--sp-3); }
.mhMenuCard { width:100%; display:grid; grid-template-columns:minmax(120px, 220px) 1fr auto; gap:var(--sp-3); align-items:center; padding:10px; text-align:left; font:inherit; color:var(--ink); cursor:pointer; }
.mhMenuCard .mhMenuCity { height:96px; }
.mhMenuTxt { display:flex; flex-direction:column; gap:4px; min-width:0; } .mhMenuTxt b { font:400 var(--fs-l)/1 var(--display); } .mhMenuTxt small { color:var(--ink-soft); }
.mhMenuTxt .ds-chip { align-self:flex-start; }
/* a következő fokozat felé: egy sor + sáv (js/mehesd.js mhMenuCard, 2026-10-06) */
.mhMenuUt { display:grid; gap:4px; font-size:var(--fs-s); font-weight:700; } .mhMenuUt > span:first-child { display:flex; align-items:center; gap:6px; }
.mhMenuUt .ds-meter { height:12px; }
/* a játékos lakó-típusa a városképen áll (js/mehesd.js mhMenuCard, 2026-10-06) – a vászon-rétegek fölött */
.mhMenuLako { position:absolute; left:6px; bottom:0; z-index:2; width:clamp(44px, 34%, 64px); aspect-ratio:1; pointer-events:none; }
.mhMenuLako svg, .mhMenuLako img { width:100%; height:100%; display:block; }
.mhMenuNeed { font-size:var(--fs-xs); }
/* kör végi Méhesd-sáv (js/mehesd-kor.js): a csillag a városba megy – mennyi kell még, és út vissza a városba */
.mhKor { display:grid; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3); margin:var(--sp-2) 0; background:var(--sage-bg); text-align:left; }
.mhKor.is-stage { background:var(--butter); }
.mhKorTxt { display:flex; gap:var(--sp-2); align-items:flex-start; margin:0; color:var(--ink); } .mhKorTxt .pic { flex:none; }
.mhKorRow { display:flex; flex-wrap:wrap; gap:var(--sp-2); } .mhKorRow .ds-btn-sm { min-width:0; white-space:normal; text-align:left; }
@media (max-width:700px){
  .mhMeters, .mhMeters:not(:has(.mhUres)) { grid-template-columns:repeat(3, minmax(0, 1fr)); } .mhM.is-life, .mhM.is-hand small { display:none; }
  .mhMeters .mhElonezetBtn { grid-column:span 2; justify-self:stretch; justify-content:center; }
  .mhMini { width:128px; height:94px; }
  .mhHead { padding:5px 8px; gap:6px; } .mhTitle small { display:none; } .mhTitle b { font-size:var(--fs-m); }
  .mhTools { gap:4px; flex:1 1 100%; margin-left:0; flex-wrap:nowrap; min-width:0; }
  /* a „Mai küldetések” gomb zsugorodhat, így a mellette álló ikon-gombok nem lógnak ki – a felirat ilyenkor két sorba törik,
     nem vágódik le (csiszoló kör, 2026-10-05) */
  .mhTools [data-mh="board"] { flex:1 1 auto; min-width:0; justify-content:center; white-space:normal; line-height:1.1; text-align:left; }
  /* a nyitott küldetések száma jelvényként a gomb sarkában, így a felirat egy sorban elfér */
  .mhTools [data-mh="board"] { position:relative; }
  .mhTools [data-mh="board"] .ds-chip { position:absolute; top:-8px; right:-6px; min-width:24px; padding:1px 6px; justify-content:center; box-shadow:var(--soft-sm); }
  .mhTools > * { flex-shrink:0; } .mhTools > [data-mh="board"] { flex-shrink:1; } .mhLbl { display:none; }
  .mhM small { display:none; } .mhMeters { padding:4px 8px; }
  .mhMenuCard { grid-template-columns:1fr; } .mhMenuCard .ds-btn-sm { justify-self:end; }
  .mhTag { font-size:var(--fs-xs); padding:2px 6px; }   /* a térkép-címkék is legalább 12 px (méret-próba, 2. átvilágítás) */
  .mhPanel { padding:var(--sp-2); padding-left:58px; }   /* a bal oldali rendszergombok ne takarjanak rá */
  .mhNums .ds-chip { font-size:12px; }
}
@media (max-height:560px){ .mhMeters, .mhMini { display:none; } }