/* ============================================================
   MÉHESD ÉLŐ HÁLÓZATA — felület a 3D város fölött (js/beporzo-ui.js), a pontok jelvényei (js/beporzo-3d.js #bpLabels).
   Csak tokenek. A réteg átlátszó: a város látszik, csak a panelek fogják a koppintást.
   ============================================================ */
.beporzo #score, .beporzo #hud, .beporzo #hudBtn, .beporzo #hint, .beporzo #reticle, .beporzo #nameTag, .beporzo #touchBtns, .beporzo #joy { display:none !important; }
#bpLayer { 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)); }
#bpLayer.hidden { display:none; }
#bpLayer { padding-left:max(var(--sp-3), 58px); }   /* a bal oldali rendszergomboknak hely – minden szélességen (táblagép-teszt) */
#bpLayer > * { pointer-events:auto; }
.bpHead, .bpMeters { 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); }
.bpHead { display:flex; align-items:center; gap:var(--sp-2) var(--sp-3); flex-wrap:wrap; padding:6px 10px; }
.bpTitle { display:flex; align-items:center; gap:var(--sp-2); } .bpTitle img { width:42px; height:42px; object-fit:contain; }
.bpTitle b { display:block; font:400 var(--fs-l)/1 var(--display); } .bpTitle small { color:var(--ink-soft); font-weight:700; font-size:12px; }
.bpTools { margin-left:auto; }
/* naptár: 12 lépés, a pötty telítettsége = elérhető virágzó pontok, piros = virágzási rés */
.bpCal { display:flex; gap:3px; list-style:none; margin:0; padding:0; flex:1 1 260px; }
.bpCal li { position:relative; flex:1 1 0; min-width:18px; height:30px; border-radius:var(--r-s); border:2px solid var(--sage); background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:10px; font-weight:800; color:var(--ink-soft); }
.bpCal li i { width:10px; height:10px; border-radius:50%; background:var(--leaf); opacity:calc(0.15 + var(--m) * 0.85); }
.bpCal li.is-now { border-color:var(--line); background:var(--butter); } .bpCal li.is-done { opacity:.5; }
.bpCal li.is-gap { border-color:var(--bad-ink); background:var(--bad-bg); } .bpCal li.is-gap i { background:var(--bad-ink); opacity:.4; }
.bpCal li em { position:absolute; top:-9px; right:-6px; width:18px; height:18px; display:grid; place-items:center; border-radius:50%; background:var(--accent); border:2px solid var(--line); }
.bpCal li em .pic { width:11px; height:11px; }
.bpMeters { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:4px 10px; padding:6px 10px; }
.bpM { min-width:0; display:flex; flex-direction:column; } .bpM span { font-size:12px; font-weight:700; color:var(--ink-soft); display:flex; gap:4px; align-items:center; }
.bpM em { font-style:normal; } .bpMRov { display:none; }   /* rövid név: csak álló telefonon (lent) */
.bpM b { font:400 var(--fs-m)/1.1 var(--display); font-variant-numeric:tabular-nums; } .bpM b.is-low { color:var(--bad-ink); }
/* virág-mérő: sáv (mennyi virág van a szükséghez képest) + ikon + szó – a szín mellett mindig jel is */
.bpM b.is-ok, .bpM b.is-low { display:flex; align-items:center; gap:4px; } .bpM b .pic { width:16px; height:16px; flex:none; }
.bpVSav { flex:0 1 56px; min-width:24px; height:10px; border-radius:var(--r-pill); background:var(--sage-bg); box-shadow:inset 0 0 0 1.5px var(--sage); overflow:hidden; }
.bpVSav > i { display:block; height:100%; width:100%; transform:scaleX(var(--v)); transform-origin:left center; background:var(--good);
  transition:transform var(--t-fast) var(--ease-out); }
.is-low .bpVSav > i { background:var(--bad-ink); }
@media (prefers-reduced-motion: reduce){ .bpVSav > i { transition:none; } }
.bpPips { display:flex; gap:2px; align-items:center; height:22px; } .bpPips i { width:8px; height:12px; border-radius:3px; background:var(--sage-bg); border:1px solid var(--sage); }
.bpPips i.on { background:var(--accent); border-color:var(--line); }
.bpBottom { margin-top:auto; align-self:center; width:min(760px, 100%); display:flex; flex-direction:column; gap:6px; }
.bpSay { align-items:center; } .bpSay .ds-avatar { width:46px; height:46px; } .bpSay .ds-bubble { margin:0; font-weight:600; }
.bpPreview, .bpBuild { background:var(--surface); border:var(--line-w) solid var(--line); border-radius:var(--r-l); box-shadow:var(--soft); padding:8px 12px; }
.bpPreview { display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; } .bpPreview.hidden { display:none; } .bpPreview p { margin:2px 0; }
.bpBuild { display:flex; flex-direction:column; gap:6px; } .bpBuild .ds-row { justify-content:flex-end; flex-wrap:wrap; }
.bpTypes button { display:inline-flex; align-items:center; gap:4px; } .bpTypes .art, .bpTypes img { width:24px; height:24px; }
.bpHint { margin:0; font-size:13px; font-weight:700; color:var(--ink-soft); }
/* a pontok jelvényei */
#bpLabels { position:fixed; inset:0; pointer-events:none; z-index:calc(var(--z-hud) - 1); }
.beporzo #bpLabels { display:block; } #bpLabels:empty { display:none; }
.bpTag { 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:2px solid var(--sage); border-radius:var(--r-m); padding:2px 7px; font-size:11px; line-height:1.15; white-space:nowrap; box-shadow:var(--soft-sm); }
.bpTag b { font-weight:800; }
.bpTag:not(.is-reach):not(.is-sel):not(.is-can):not(.is-crit) b { display:none; }   /* a távoli pontoknál csak a jelvény – kevesebb zsúfoltság */
.bpTag:not(.is-reach):not(.is-sel):not(.is-can):not(.is-crit) { opacity:.85; min-width:22px; min-height:22px; } .bpTag i { display:flex; gap:2px; } .bpTag i .pic { width:13px; height:13px; }
.bpTag.is-reach { border-color:var(--leaf); } .bpTag.is-sel { background:var(--accent); border-color:var(--line); }
.bpTag.is-can { background:var(--butter); border-color:var(--line); } .bpTag.is-crit { border-color:var(--bad-ink); background:var(--bad-bg); }
.bpTag.is-gone { opacity:.45; text-decoration:line-through; }
/* panelek */
.bpPanel { position:fixed; inset:0; z-index:var(--z-panel); display:grid; place-items:center; padding:var(--sp-4); background:var(--scrim); }
.bpPanel.hidden { display:none; }
.bpPanelBox { width:min(480px, 100%); display:flex; flex-direction:column; gap:var(--sp-3); max-height:100%; overflow-y:auto; }
.bpRes { margin:0; padding:6px 10px; border-radius:var(--r-m); font-weight:700; display:flex; gap:6px; align-items:center; }
.bpRes.is-ok { background:var(--good-bg); color:var(--good-ink); } .bpRes.is-bad { background:var(--bad-bg); color:var(--bad-ink); }
.bpDist { display:flex; gap:8px; align-items:flex-start; background:var(--butter); border:2px solid var(--line); border-radius:var(--r-m); padding:8px; }
.bpNests { display:grid; gap:8px; } .bpNest { display:flex; flex-direction:column; gap:2px; padding:10px; text-align:left; font:inherit; color:var(--ink); cursor:pointer; }
.bpNest small { color:var(--ink-soft); display:flex; gap:4px; align-items:center; }
.bpFacts { margin:0; padding-left:1.1em; } .bpFacts li { margin-bottom:5px; }
@media (max-width:700px){
  #bpLayer { padding-left:max(var(--sp-3), 58px); }
  .bpMeters { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .bpTypes span { display:none; } .bpTag b { font-size:10px; } .bpTag { padding:1px 5px; }
}
/* álló telefon: a térkép (maga a játék) kapjon helyet – a fejléc, a naptár és a mérők összébb húzva (átvilágítás, 2026-10-06:
   a felület a képernyő több mint felét foglalta). A mérők neve ilyenkor ikon; a teljes név és magyarázat a koppintható title-ben. */
@media (max-width:700px) and (orientation:portrait){
  .bpHead { padding:4px 8px; gap:4px 6px; } .bpTitle img { width:32px; height:32px; } .bpTitle b { font-size:var(--fs-m); }
  .bpLbl { display:none; } .bpTools .ds-btn-sm { min-width:var(--tap); justify-content:center; }
  .bpTitle { flex:1 1 auto; min-width:0; } .bpTools { order:2; display:flex; gap:4px; } .bpCal { order:3; flex:1 1 100%; }
  .bpCal li { height:22px; min-width:14px; font-size:9px; } .bpCal li i { width:7px; height:7px; }
  .bpMeters { grid-template-columns:repeat(5, minmax(0, 1fr)); gap:2px 6px; padding:4px 8px; }
  /* mérő: ikon + érték egy sorban, alatta a rövid név (12 px) – a teljes név és a magyarázat a title-ben */
  .bpM { display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; column-gap:3px; }
  .bpMeters { grid-template-columns:repeat(5, auto); justify-content:space-between; }
  #bpLayer { padding-top:max(8px, env(safe-area-inset-top)); }   /* a fejléc a Menü gomb mellé kerül */
  /* a cím és a két eszközgomb egy sorban (az alcím kipontozva, a teljes szöveg a naptár title-jeiben is megvan) */
  .bpTitle { flex:1 1 0; } .bpTitle > div { min-width:0; } .bpTitle img { width:28px; height:28px; }
  .bpTitle b, .bpTitle small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* a cím ne kipontozva álljon („Méhesd élő hálózat…”, 2. átvilágítás): két sorba tördelődhet, az alcím marad egysoros */
  .bpTitle b { white-space:normal; overflow:visible; text-overflow:clip; line-height:1.05; text-wrap:balance; }
  .bpM span { gap:0; } .bpM span .pic { width:18px; height:18px; } .bpMNev { display:none; }
  .bpPips { gap:1px; } .bpPips i { width:2px; }
  .bpM b .pic { width:14px; height:14px; } .bpVSav { min-width:16px; flex-basis:24px; }
  .bpMRov { display:block; grid-column:1 / -1; font-size:var(--fs-xs); font-weight:700; line-height:1.2; color:var(--ink-soft);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* a folyosó fajtái: ikon + név (eddig csak ikon) */
  /* a pontok: a felirat 12 px; a csak jelvényes pont is legalább 26 px, a koppintási felülete 44 px (a ::before réteg: css/erinto.css) */
  .bpTag b { font-size:var(--fs-xs); }
  .bpTag:not(.is-reach):not(.is-sel):not(.is-can):not(.is-crit) { min-width:26px; min-height:26px; justify-content:center; }
  .bpTypes { display:flex; } .bpTypes button { flex:1 1 0; flex-direction:column; gap:0; padding:2px 4px; min-width:0; }
  .bpTypes span { display:block; font-size:var(--fs-xs); line-height:1.15; }
  /* előnézet: a lépés-panel és a méhecske szövege helyére kerül (nem fölé) – így a két pont a térképen látszik */
  .bpBottom:has(.bpPreview:not(.hidden)) .bpBuild, .bpBottom:has(.bpPreview:not(.hidden)) .bpSay { display:none; }
  .bpPreview { padding:6px 10px; gap:4px 8px; } .bpPreview p { font-size:var(--fs-s); } .bpPreview small { display:none; }
  .bpM b { font-size:var(--fs-s); } .bpVSzo { display:none; } .bpVSav { min-width:20px; }
  .bpPips { gap:1px; height:16px; } .bpPips i { width:3px; height:10px; border-radius:2px; }
  .bpSay .ds-avatar { width:34px; height:34px; } .bpSay .ds-bubble { font-size:var(--fs-s); padding:6px 10px; }
}
@media (max-height:560px){ .bpMeters, .bpSay { display:none; } }
/* Fekvő telefon: a fejléc és az alsó panel együtt a képernyő négyötödét foglalta, a térkép alig látszott
   (méret-próba). Itt mindkettő egy-egy tömör sor: kisebb naptár, alcím nélkül; a lépés-panel egy sorba rendeződik. */
@media (max-height:500px){
  .bpHead { padding:3px 8px; gap:4px 8px; flex-wrap:nowrap; }
  .bpTitle img { width:28px; height:28px; } .bpTitle small { display:none; } .bpTitle b { font-size:var(--fs-m); white-space:nowrap; }
  .bpCal li { height:22px; min-width:12px; font-size:9px; } .bpCal li i { width:7px; height:7px; } .bpCal li em { display:none; }
  .bpBuild { flex-direction:row; flex-wrap:wrap; align-items:center; gap:4px 8px; padding:4px 8px; }
  .bpHint { flex:1 1 180px; margin:0; font-size:var(--fs-xs); line-height:1.25; }
  .bpBuild .ds-row { flex:0 0 auto; }
  .bpBottom { gap:4px; }
}