/* ============================================================
   ÉLŐ KERT — felület a 3D kert fölött (js/elokert-ui.js). A réteg átlátszó: a kert látszik, csak a panelek fogják a koppintást.
   Csak tokenek. Dioráma alatt nincs botkormány és célkereszt; séta-módban (body.ekWalk) a közös séta-vezérlés látszik.
   ============================================================ */
.elokert #score, .elokert #hud, .elokert #hudBtn, .elokert #hint, .elokert #reticle, .elokert #nameTag, .elokert #touchBtns { display:none !important; }
.elokert:not(.ekWalk) #joy { display:none !important; }
#ekLayer { 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)); }
#ekLayer.hidden { display:none; }
#ekLayer { padding-left:max(var(--sp-3), 58px); }   /* a bal oldali rendszergomboknak hely – minden szélességen (táblagép-teszt) */
#ekLayer > * { pointer-events:auto; }
.ekWalk .ekMeters, .ekWalk .ekBottom { display:none; }

/* fejléc: élő kert méhecske, évszak-sáv, hőtérkép-választó, séta */
.ekHead { display:flex; align-items:center; gap:var(--sp-2) var(--sp-3); flex-wrap:wrap; align-self:center; width:min(980px, 100%);
  background:var(--surface); border:var(--line-w) solid var(--line); border-radius:var(--r-l); box-shadow:var(--soft-sm); padding:6px 10px; }
.ekTitle { display:flex; align-items:center; gap:var(--sp-2); }
.ekTitle img { width:44px; height:44px; object-fit:contain; }
.ekTitle b { display:block; font:400 var(--fs-l)/1 var(--display); } .ekTitle small { color:var(--ink-soft); font-weight:700; font-size:12px; }
.ekSeasons { display:flex; gap:3px; list-style:none; margin:0; padding:0; }
.ekSeasons li { display:flex; align-items:center; gap:3px; padding:2px 7px 2px 3px; border-radius:var(--r-pill); font-size:12px; font-weight:700; color:var(--ink-soft); border:2px solid transparent; }
.ekSeasons li .art, .ekSeasons li img { width:20px; height:20px; }
.ekSeasons li.is-now { background:var(--accent); color:var(--on-accent); border-color:var(--line); } .ekSeasons li.is-done { opacity:.5; }
.ekTools { display:flex; gap:6px; align-items:center; margin-left:auto; flex-wrap:wrap; }
.ekHeat button { display:inline-flex; align-items:center; gap:3px; font-size:12px; }
.ekHeat .pic { width:16px; height:16px; }
/* érintésnél minden nézetgomb legalább 44 px széles (méret-próba, 2026-10-06: telefonon csak ikon és 36 px maradt) */
.ekHeat button { min-width:var(--tap); justify-content:center; }

/* mérők */
.ekMeters { align-self:center; width:min(980px, 100%); display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:4px 10px;
  background:var(--surface); border:var(--line-w) solid var(--line); border-radius:var(--r-l); box-shadow:var(--soft-sm); padding:6px 10px; }
.ekMeter { position:relative; min-width:0; } .ekMeter .ds-mrow-head { font-size:12px; }
.ekHint { position:absolute; top:-4px; right:0; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--accent); border:2px solid var(--line); }
.ekHint .pic { width:13px; height:13px; }

/* alul: miért-sor, előnézet, kínálat */
.ekBottom { margin-top:auto; align-self:center; width:min(760px, 100%); display:flex; flex-direction:column; gap:6px; }
.ekWhy:empty { display:none; }
.ekWhy { display:flex; flex-direction:column; gap:4px; }
.ekWhyBox { background:var(--surface); } .ekWhyBox:not([open]) summary span { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ekLead, .ekNew { margin:0; background:var(--surface); border:2px solid var(--line); border-radius:var(--r-pill); padding:5px 12px; font-weight:700; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.ekNew { background:var(--good-bg); color:var(--good-ink); } .ekNew span { font-weight:400; color:var(--ink); }
.ekUndo { align-self:flex-start; }
.ekPreview { background:var(--surface); border:var(--line-w) solid var(--line); border-radius:var(--r-l); box-shadow:var(--soft); padding:8px 12px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; }
.ekPreview.hidden { display:none; }
.ekPrevHead { display:flex; align-items:center; gap:6px; } .ekPrevHead .art, .ekPrevHead img { width:36px; height:36px; }
.ekPrevChips { display:flex; flex-wrap:wrap; gap:4px; flex:1 1 200px; }
.ekOffer:empty { display:none; }
.ekOfferLead { margin:0 0 4px; font-weight:700; font-size:13px; background:var(--surface); border-radius:var(--r-pill); padding:3px 10px; display:inline-flex; gap:5px; align-items:center; }
.ekCards { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.ekCard { display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 6px; min-height:var(--tap); text-align:center; font:inherit; color:var(--ink); cursor:pointer; }
.ekCard b { font-size:14px; line-height:1.15; } .ekCard small { color:var(--ink-soft); font-size:11px; display:inline-flex; gap:2px; align-items:center; }
.ekCardArt .art, .ekCardArt img { width:52px; height:52px; }
.ekCard.is-on { background:var(--butter); outline:3px solid var(--line); }

/* évszak vége panel */
.ekPanel { position:fixed; inset:0; z-index:var(--z-panel); display:grid; place-items:center; padding:var(--sp-4); background:var(--scrim); }
.ekPanel.hidden { display:none; }
.ekPanelBox { width:min(460px, 100%); display:flex; flex-direction:column; gap:var(--sp-3); text-align:center; max-height:100%; overflow-y:auto; }
.ekSeasonArt .art, .ekSeasonArt img { width:68px; height:68px; }
.ekGrow { margin:0; font-weight:700; display:flex; gap:5px; justify-content:center; align-items:center; }
.ekChips { display:flex; flex-wrap:wrap; gap:5px; justify-content:center; }
.ekEvent { display:flex; gap:var(--sp-3); align-items:center; text-align:left; border-radius:var(--r-m); padding:var(--sp-3); border:2px solid var(--line); }
.ekEvent p { margin:0 0 4px; } .ekEvent.is-ok { background:var(--good-bg); } .ekEvent.is-fail { background:var(--sage-bg); }
.ekWho svg, .ekWho .szereplo { width:56px; height:56px; }
.ekPanelBox .ds-row { justify-content:center; flex-wrap:wrap; }
.ekAlbum { margin:0; padding-left:0; list-style:none; text-align:left; } .ekAlbum li { margin-bottom:5px; display:block; }
.ekAlbum li:not(.is-got) { color:var(--ink-soft); }

@media (max-width:640px){
  #ekLayer { padding-left:max(var(--sp-3), 58px); }                 /* a bal oldali rendszergomboknak hely */
  .ekMeters { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .ekSeasons li:not(.is-now) span, .ekHeat button span { display:none; }
  .ekTitle img { width:34px; height:34px; }
  .ekCardArt .art, .ekCardArt img { width:40px; height:40px; }
}
/* a mérők/hőtérkép kapcsoló csak álló telefonon kell (lent) */
.ekNezetBtn { display:none; }
/* ── Álló telefon (telefon-kör, 2026-10-06): a fejléc és a mérők a képernyő felét foglalták ──
   Most: a fejléc a Menü gomb mellett egy sor (cím + Séta + mérők/hőtérkép kapcsoló + súgó), alatta EGY sor mérő (ikon + sáv
   + célvonal, a név a sáv aria-labeljében); a kapcsoló kinyitja a neveket és a hőtérkép-választót. Az évszak a cím alatt áll.
   Első lerakásnál az előnézet a kínálat HELYÉRE kerül (nem fölé), és a „koppints egy mezőre” sor is eltűnik – így nincs
   három réteg (tipp + előnézet + kínálat) egymáson. */
@media (max-width:640px) and (orientation:portrait){
  #ekLayer { padding-top:max(8px, env(safe-area-inset-top)); gap:6px; }
  .ekHead { flex-wrap:nowrap; padding:4px 6px 4px 8px; gap:6px; }
  .ekTitle { flex:1 1 auto; min-width:0; } .ekTitle b { font-size:var(--fs-m); white-space:nowrap; }
  .ekTitle small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .ekSeasons { display:none; }                                 /* az évszak neve a cím alatt (ekSeason) */
  .ekTools { flex-wrap:nowrap; gap:4px; }
  .ekWalkBtn { min-width:var(--tap); justify-content:center; padding-left:8px; padding-right:8px; } .ekWalkBtn span { display:none; }
  .ekNezetBtn { display:grid; }
  #ekLayer:not(.ekNyitva) .ekHeat { display:none; }
  #ekLayer.ekNyitva .ekHead { flex-wrap:wrap; } #ekLayer.ekNyitva .ekTools { display:contents; }   /* nyitva: a hőtérkép-választó saját sorban */
  #ekLayer.ekNyitva .ekHeat { order:9; flex:1 1 100%; justify-content:space-between; }
  .ekMeters { grid-template-columns:repeat(4, minmax(0, 1fr)); gap:2px 10px; padding:4px 10px 6px; }
  #ekLayer:not(.ekNyitva) .ekMeter .ds-mrow-head > span:not(.ds-delta) { display:none; }
  #ekLayer:not(.ekNyitva) .ekMeter .ds-mrow-head { min-height:20px; }
  #ekLayer.ekNyitva .ekMeters { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .ekMeter .ds-meter { height:12px; }
  .ekCel { height:14px; }
  .ekBottom:has(.ekPreview:not(.hidden)) .ekOffer, .ekBottom:has(.ekPreview:not(.hidden)) .ekLead { display:none; }
}
@media (max-height:560px){ .ekMeters { display:none; } .ekCardArt .art, .ekCardArt img { width:34px; height:34px; } }
/* célvonal a mérőkön (2026-10-03): a csillaghoz ezt kell elérni; elérve zöld pipa-szín */
.ekCel { position:absolute; left:var(--c); bottom:-3px; width:3px; height:16px; margin-left:-1px; border-radius:2px; background:var(--ink); pointer-events:none; }
.ekMeter.is-cel .ekCel { background:var(--good-ink); }