/* ============================================================
   Ki eszik kit? (régi munkacíme: Élő lánc) — 2D táplálékháló (kísérletező homokozó)
   A közös .overlay2d réteg elrejti a 3D-s HUD-ot. Csak tokenekkel (docs/arculat.md).
   Állapot: szín ÉS ikon – gyengül ↓ (méz), elszaporodik ↑ (bogyó), eltűnik ✕ (szürke, szaggatott).
   Kapcsolat-fajták: táplálék = folytonos olíva · beporzás = pöttyös méz · élőhely = szaggatott levél · lebontás = hosszú szaggatott.
   ============================================================ */
#hl {
  --hl-node:52px;
  position:fixed; inset:0; z-index:var(--z-hud); display:none; color:var(--ink); overflow:hidden;
  grid-template-columns:minmax(0, 1fr) minmax(280px, 360px); grid-template-rows:auto minmax(0, 1fr) auto;
  grid-template-areas:"top top" "terep naplo" "terep sav"; gap:8px 14px; padding:54px 12px 12px;
  background:radial-gradient(circle at 12% 88%, var(--sage-bg) 0 220px, transparent 221px),
    radial-gradient(circle at 90% 8%, var(--butter) 0 160px, transparent 161px), var(--bg); }
.hl #hl { display:grid; }
#hlTop { grid-area:top; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; justify-content:space-between; }
#hlTitle { display:flex; align-items:center; gap:6px; font:400 var(--fs-l)/1.1 var(--display); }
#hlTitle .pic { width:24px; height:24px; }
#hlTitle small { display:block; font:600 var(--fs-xs)/1.3 var(--body); color:var(--ink-soft); }
#hlStats { display:flex; flex-wrap:wrap; gap:6px; align-items:center; justify-content:flex-end; }
#hlStats .ds-chip { font-size:12.5px; }

/* — a háló — */
#hlTerep { grid-area:terep; position:relative; min-height:0; overflow:auto; display:flex; flex-direction:column; border-radius:var(--r-l); background:var(--surface); box-shadow:var(--soft-sm); }
#hlHalo { position:relative; width:100%; flex:1 0 auto; min-height:420px; }
#hlSvg { position:absolute; inset:5% 4%; width:92%; height:90%; }
#hlNodes, #hlEmeletek { position:absolute; inset:5% 4%; }
/* kapcsolat-fajták: szín ÉS vonalminta (a jelmagyarázat ugyanezt mutatja) – tartalom-színek a tokenekből */
#hl { --hl-c-taplalek:var(--ember); --hl-c-beporzas:var(--honey-deep); --hl-c-elohely:var(--leaf); --hl-c-lebontas:var(--olive-soft); --hl-c-terjesztes:var(--berry); }
.hlEl { fill:none; stroke-width:1.6; opacity:.16; stroke-linecap:round; transition:opacity var(--t-base), stroke-width var(--t-base); }
.hlEl.fo { stroke-width:2.6; }
.hlEl.f-taplalek { stroke:var(--hl-c-taplalek); }
.hlEl.f-beporzas { stroke:var(--hl-c-beporzas); stroke-dasharray:1 5; stroke-width:2.6; }
.hlEl.f-elohely { stroke:var(--hl-c-elohely); stroke-dasharray:7 4; }
.hlEl.f-lebontas { stroke:var(--hl-c-lebontas); stroke-dasharray:12 4 2 4; }
.hlEl.f-terjesztes { stroke:var(--hl-c-terjesztes); stroke-dasharray:3 3 9 3; }
.hlNyil.f-taplalek path { fill:var(--hl-c-taplalek); } .hlNyil.f-beporzas path { fill:var(--hl-c-beporzas); }
.hlNyil.f-elohely path { fill:var(--hl-c-elohely); } .hlNyil.f-lebontas path { fill:var(--hl-c-lebontas); }
.hlNyil.f-terjesztes path { fill:var(--hl-c-terjesztes); }
/* kiemelés: a kiválasztott faj kapcsolatai erős, telt színűek, a többi szinte eltűnik (2. átvilágítás: „a lánc követhetetlen”).
   A kiemelt vonal papír-színű „szegélyt” kap (drop-shadow), így a halvány vonalak és a háttér fölött is tisztán fut. */
.hl-kiemel .hlEl { opacity:.04; }
.hlEl.on, .hl-kiemel .hlEl.on { opacity:1; stroke-width:3.6; filter:drop-shadow(0 0 1.5px var(--paper)) drop-shadow(0 0 1.5px var(--paper)); }
.hlEl.on.fo { stroke-width:4.6; }
.hlEl.on.f-beporzas { stroke-dasharray:1 6; stroke-width:4.2; }
.hl-kiemel .hlNode:not(.sel):not(.szomszed) .hlHex { opacity:.3; }
.hl-kiemel .hlNode:not(.sel):not(.szomszed) .hlNodeNev { opacity:.5; }
.hl-kiemel .hlNode.szomszed .hlNodeNev { background:var(--butter); }   /* a kapcsolódó fajok neve méz-alapon: egy pillantással látszik, kik a „szomszédok” */
.hlEl.szakadt { opacity:.1; stroke-dasharray:2 6; }
.hl-fut .hlEl { opacity:.06; }
.hl-fut .hlEl.lanc { opacity:.85; stroke-width:3; }
.hl-kiemel.hl-fut .hlEl.on { opacity:1; }
/* láncreakció: a vonal az okozótól a következmény felé „áramlik” */
.hlEl.hullam { opacity:1; stroke-width:4; stroke-dasharray:10 7; animation:hlAramlik .7s linear infinite; }
.hlEl.hullam.vissza { animation-direction:reverse; }
@keyframes hlAramlik { to { stroke-dashoffset:-17; } }
.reduce-motion .hlEl.hullam { animation:none; }
@media (prefers-reduced-motion:reduce){ .hlEl.hullam { animation:none; } }
#hlSvg { overflow:visible; pointer-events:none; }

/* a háló „emeletei”: feliratos sávok a csomópontok mögött */
.hlSavok { position:absolute; inset:0; pointer-events:none; }
.hlEmelet { position:absolute; left:-3%; right:-3%; border-radius:var(--r-m); }
.hlEmelet:nth-child(odd)::before { content:""; position:absolute; inset:0; border-radius:inherit; background:var(--bg); opacity:.55; }
.hlEmelet span { position:absolute; left:6px; top:4px; font:700 12px/1 var(--body); letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); }

/* jelmagyarázat a háló alján */
#hlJmDoboz { position:sticky; bottom:0; left:0; z-index:1; }
.hlJm { display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center; padding:6px 10px; background:var(--surface); border-top:var(--line-w) solid var(--sage);
  font:600 var(--fs-xs)/1.3 var(--body); color:var(--ink); }
.hlJmCim { color:var(--ink-soft); }
.hlJmElem { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.hlJmVonal { width:34px; height:10px; overflow:visible; }
.hlJmVonal .hlEl { opacity:1; stroke-width:2.4; animation:none; }
.hlJmAll .pic { width:14px; height:14px; border-radius:50%; padding:1px; }
.hlJmAll.a-gyengul .pic { background:var(--honey); color:var(--on-accent); }
.hlJmAll.a-elszaporodik .pic { background:var(--berry); color:var(--paper); }
.hlJmAll.a-eltunik .pic { background:var(--ink-soft); color:var(--paper); }

/* a középre igazítás a külön „translate” tulajdonságban van: a ds-anim-pop animáció a transform-ot írja, és ez ne csúsztassa el */
.hlNode { position:absolute; translate:-50% -50%; display:flex; flex-direction:column; align-items:center; gap:2px;
  min-width:var(--tap); min-height:var(--tap); padding:0; border:0; background:none; color:var(--ink); cursor:pointer; font:inherit; }
.hlHex { width:var(--hl-node); height:var(--hl-node); clip-path:var(--hex); background:var(--sage-bg); display:grid; place-items:center;
  font-size:calc(var(--hl-node)*.5); transition:filter var(--t-base), opacity var(--t-base), background var(--t-base); }
.hlHex img.art { width:78%; height:78%; }
.hlNode.cs-beporzo .hlHex { background:var(--butter); }
.hlNode.cs-ragadozo .hlHex { background:var(--blossom-bg); }
.hlNode.cs-novenyevo .hlHex { background:var(--sky-bg); }
.hlNode.cs-lebonto .hlHex { background:var(--cream); }
.hlNodeNev { font:700 12px/1.1 var(--body); max-width:88px; text-align:center; background:var(--surface); border-radius:var(--r-s); padding:1px 4px; }
.hlJel { position:absolute; top:-4px; right:-6px; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; }
.hlJel:empty { display:none; }
.hlJel .pic { width:14px; height:14px; }
.hlNode.sel .hlHex, .hlNode:focus-visible .hlHex { background:var(--accent); }
@media (hover:hover) and (pointer:fine){ .hlNode:hover .hlHex { filter:brightness(1.05); } }
.hlNode.a-gyengul .hlHex { opacity:.62; }
.hlNode.a-gyengul .hlJel { background:var(--honey); color:var(--on-accent); }
.hlNode.a-elszaporodik .hlHex { background:var(--blossom); }
.hlNode.a-elszaporodik .hlJel { background:var(--berry); color:var(--paper); }
.hlNode.a-eltunik .hlHex { filter:grayscale(1); opacity:.3; }
.hlNode.a-eltunik .hlNodeNev { text-decoration:line-through; color:var(--ink-soft); }
.hlNode.a-eltunik .hlJel { background:var(--ink-soft); color:var(--paper); }
.hlNode.hlGyogyul .hlHex { background:var(--good-bg); }

/* — lista-nézet — */
#hlLista { list-style:none; margin:0; padding:12px; display:grid; gap:10px; }
#hlLista ul { list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.hlListaFaj { display:flex; align-items:center; gap:6px; min-height:var(--tap); padding:4px 10px; border:var(--line-w) solid var(--line); border-radius:var(--r-m);
  background:var(--paper); color:var(--ink); font:600 var(--fs-s)/1.2 var(--body); cursor:pointer; }
.hlMini { width:28px; height:28px; display:grid; place-items:center; }
.hlMini img.art { width:100%; }
.hlListaFaj.a-eltunik { opacity:.6; text-decoration:line-through; }

/* — napló (a láncreakció mondatai) és az alsó sáv — */
#hlNaplo { grid-area:naplo; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:6px; padding-right:2px; }
.hlSor { margin:0; display:flex; gap:8px; align-items:flex-start; font:var(--fs-s)/1.35 var(--body); background:var(--paper); border-radius:var(--r-m); padding:8px 10px; box-shadow:var(--soft-sm); }
.hlSor .pic { width:18px; height:18px; flex:none; margin-top:1px; }
/* a változás fajtáját a sor színe ÉS a piktogramja mondja el (nem egy színes oldalcsík) */
.hlSor.a-gyengul { background:var(--butter); }
.hlSor.a-elszaporodik { background:var(--blossom-bg); }
.hlSor.a-eltunik { background:var(--paper); box-shadow:none; outline:2px dashed var(--ink-soft); outline-offset:-2px; }
.hlSay .ds-bubble { font-size:var(--fs-s); }
#hlSav { grid-area:sav; display:flex; flex-direction:column; gap:8px; }
.hlKerd { margin:0; font:700 var(--fs-s)/1.3 var(--body); display:flex; gap:6px; align-items:center; }
.hlHatasok, .hlLepesek { display:flex; flex-wrap:wrap; gap:6px; }
.hlHatas { min-height:var(--tap); cursor:pointer; }
.hlHatas img.art { width:22px; height:22px; }
.hlOssz { display:flex; flex-direction:column; gap:8px; }
.hlDb { display:flex; flex-wrap:wrap; gap:6px; }
.ds-tag.a-gyengul { background:var(--butter); }
.ds-tag.a-elszaporodik { background:var(--blossom-bg); }
.ds-tag.a-eltunik { background:var(--sage-bg); }
.hlLepes { display:flex; gap:10px; align-items:center; text-align:left; width:100%; min-height:var(--tap); padding:8px 10px; cursor:pointer; color:var(--ink); font:inherit; border:0; }
.hlLepes .hlHex { --hl-node:40px; flex:none; }
.hlLepes small { display:block; font:var(--fs-xs)/1.3 var(--body); color:var(--ink-soft); }
.hlLepes.on { background:var(--good-bg); cursor:default; }
/* a lépés „mire jó” sora: melyik hatás ellen szól / melyik kivett fajt hozza vissza (halo-vissza.js, hlLepesMire) */
.hlMire { display:flex; align-items:center; gap:4px; font:700 var(--fs-xs)/1.3 var(--body); font-style:normal; color:var(--good-ink); }
.hlMire .pic { width:14px; height:14px; flex:none; }
.hlLepes > .pic { margin-left:auto; width:20px; height:20px; flex:none; }
.hlTeendo { margin:0; padding-left:0; list-style:none; display:grid; gap:6px; font-size:var(--fs-s); }
.hlTeendo li { display:flex; gap:6px; align-items:flex-start; }
.hlTeendo img.art { width:24px; height:24px; flex:none; }

/* — lap (faj vagy hatás részletei) — */
#hlLap { position:fixed; left:50%; bottom:12px; transform:translateX(-50%); width:min(94vw, 460px); max-height:min(78vh, 560px); overflow-y:auto;
  z-index:var(--z-panel); display:flex; flex-direction:column; gap:8px; }
.hlLapFej { display:flex; gap:10px; align-items:center; }
.hlLapFej b { font:400 var(--fs-l)/1.1 var(--display); display:block; }
.hlLapFej small { color:var(--ink-soft); font-size:var(--fs-xs); }
#hlLap p { margin:0; font-size:var(--fs-s); line-height:1.4; }
.hlKapcs { display:flex; gap:6px; align-items:flex-start; }
.hlKapcs .pic { width:16px; height:16px; flex:none; margin-top:2px; }
.hlErint { margin:6px 0 0; padding-left:0; list-style:none; display:grid; gap:6px; font-size:var(--fs-s); }
.hlErint img.art { width:22px; height:22px; vertical-align:middle; }
.hlForras p { font-size:var(--fs-xs) !important; overflow-wrap:anywhere; }
.hlLapGomb { justify-content:flex-end; flex-wrap:wrap; }

/* — keskeny és álló kijelző: egymás alatt; a háló vízszintesen görgethető — */
#hlSav { max-height:58vh; overflow-y:auto; padding:2px; }
@media (min-width:1500px){ #hl { --hl-node:60px; } .hlNodeNev { font-size:13px; max-width:110px; } }   /* érintő-TV */
@media (max-width:820px), (orientation:portrait){
  #hl { grid-template-columns:minmax(0, 1fr); grid-template-rows:auto minmax(0, 1fr) auto auto;
    grid-template-areas:"top" "terep" "naplo" "sav"; gap:6px; padding:52px 8px 8px; }
  #hlNaplo { max-height:18vh; }
  #hlSav { max-height:34vh; }
  #hlTitle { font-size:var(--fs-m); }
  /* a hatás- és kosár-gombok egy sorban, vízszintesen görgethetők: így a háló kapja a helyet */
  .hlHatasok { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; }
  .hlHatasok .ds-chip { flex:none; }
  .hlSay .ds-bubble { font-size:var(--fs-xs); }
}
@media (max-width:620px){
  /* telefon: a cím a rendszergombok mellé kerül, a csillag-célok és a „Befejezem” csak ikonnal – a háló kapja a helyet */
  #hl { --hl-node:44px; padding-top:10px; }
  #hlTitle { min-height:44px; margin-left:212px; font-size:var(--fs-s); }
  #hlTitle > .pic { display:none; }
  #hlNaplo { max-height:13vh; }
  #hlSav { max-height:30vh; }
  .hlOssz { gap:6px; padding:10px; }
  /* a név nem törik szó közben (telefon-kör, 2026-10-06: „Fürké-szek”, „Vér-cse”): egy sorban, a hatszög alatt – minden második
     faj neve a hatszög FÖLÖTT (hlFel, halo-ui.js), így a szomszéd nevek két szinten vannak, és kétszer annyi hely jut nekik.
     A gomb maga a 44 px-es hatszög; a vonalak a hatszög közepébe futnak. */
  .hlNodeNev { position:absolute; left:50%; top:100%; translate:-50% 2px; max-width:none; white-space:nowrap; hyphens:manual; overflow-wrap:normal;
    font-size:var(--fs-xs); pointer-events:none; }
  .hlNode.hlFel .hlNodeNev { top:auto; bottom:100%; translate:-50% -2px; }
  #hlSvg, #hlNodes, #hlEmeletek { inset:5% 7%; width:86%; }       /* a szélső nevek is kiférjenek */
  #hlHalo { min-height:580px; }                       /* sorok között hely a kétsoros neveknek; a doboz görgethető */
  .hlJm { flex-wrap:nowrap; overflow-x:auto; padding:4px 8px; }   /* a jelmagyarázat egy sorban, görgethetően */
  .hlJmCim { display:none; }
  .hlCelNev { display:none; }                          /* a csillag-célok csak ikonnal – a felirat a title-ben és az aria-labelben */
  #hlStats { flex-wrap:nowrap; }
  /* a hatás-gombok több sorba törnek (oldalt nem vágódnak le); a sáv maga görgethető marad (#hlSav) */
  .hlHatasok { flex-wrap:wrap; overflow-x:visible; padding-bottom:0; }
  .hlHatasok .ds-chip { flex:0 1 auto; max-width:100%; font-size:var(--fs-s); white-space:normal; text-align:left; }
}
@media (max-height:520px) and (orientation:landscape){
  #hl { padding-top:48px; --hl-node:44px; grid-template-columns:minmax(0, 1fr) minmax(240px, 300px); }
  #hlHalo { min-height:300px; }
  #hlSav { max-height:none; }
  .hlCelNev { display:none; }
}

/* — a kísérlet összeállítása („kosár”) és a forgatókönyvek — */
.hlNode.kosarban .hlHex { background:var(--accent); outline:3px dashed var(--ember); outline-offset:3px; }
.hlNode.kosarban .hlNodeNev { background:var(--accent); }
.hlKosarFaj { min-height:var(--tap); cursor:pointer; background:var(--butter); }
.hlKosarFaj img.art { width:22px; height:22px; }
.hlKosarFaj .pic { width:14px; height:14px; }
.hlForgok { display:flex; flex-wrap:wrap; gap:6px; padding-top:6px; }
.hlForg { min-height:var(--tap); cursor:pointer; text-align:left; }
.hlKutatas p { font-size:var(--fs-s); line-height:1.4; margin:0 0 6px; }
.hlMiatt { display:inline-block; font:700 var(--fs-xs)/1.3 var(--body); color:var(--ink-soft); background:var(--bg); border-radius:var(--r-pill); padding:1px 7px; margin:0 2px; }
.hlVita { font-size:var(--fs-xs); padding:1px 7px; background:var(--sky-bg); vertical-align:middle; }
.hlVita .pic { width:12px; height:12px; }
.hlEl.f-terjesztes { stroke:var(--honey-deep); stroke-dasharray:3 3 9 3; }

/* — fejezetválasztó (élőhelyek) — */
#hlValaszto { display:none; grid-area:terep / terep / sav / naplo; align-content:start; gap:12px; overflow-y:auto; padding:4px; }
.hl-valaszt #hlValaszto { display:grid; }
.hl-valaszt #hlTerep, .hl-valaszt #hlNaplo, .hl-valaszt #hlSav { display:none; }
.hlFejek { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap:12px; }
.hlFej { display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-align:left; padding:14px; cursor:pointer; color:var(--ink); font:inherit; border:0; min-height:var(--tap); }
.hlFej b { font:400 var(--fs-l)/1.1 var(--display); }
.hlFej small { color:var(--ink-soft); font-size:var(--fs-xs); }
.hlFejKep { display:flex; gap:4px; }
.hlFejKep .hlMini { width:40px; height:40px; }
.hlKapocs { display:flex; gap:4px; align-items:flex-start; }
.hlKapocs .pic { width:14px; height:14px; flex:none; margin-top:1px; }
.hlFej:focus-visible { background:var(--butter); }
@media (hover:hover) and (pointer:fine){ .hlFej:hover { background:var(--butter); } }
@media (max-width:820px), (orientation:portrait){ #hlValaszto { grid-area:terep / terep / sav / sav; } }

/* — jóslat — */
.hlIndit { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.hlTippDb { margin:0; font:600 var(--fs-xs)/1.3 var(--body); color:var(--ink-soft); }
.hl-tipp .hlNode .hlHex { cursor:crosshair; }
.hlNode.tipp .hlNodeNev, .hlNode.tipp-jo .hlNodeNev, .hlNode.tipp-meg .hlNodeNev, .hlNode.tipp-rossz .hlNodeNev { outline:2px solid var(--line); }
.hlNode.tipp::before, .hlNode.tipp-jo::before, .hlNode.tipp-meg::before, .hlNode.tipp-rossz::before {
  position:absolute; top:-6px; left:-8px; width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
  font:800 12px/1 var(--body); z-index:1; box-shadow:var(--soft-sm); }
.hlNode.tipp::before { content:"?"; background:var(--accent); color:var(--on-accent); }
.hlNode.tipp-jo::before { content:"✓"; background:var(--good-bg); color:var(--good-ink); }
.hlNode.tipp-meg::before { content:"!"; background:var(--sky-bg); color:var(--ink); }
.hlNode.tipp-rossz::before { content:"✗"; background:var(--bad-bg); color:var(--bad-ink); }
.hlJoslat { display:grid; gap:4px; padding:8px 10px; border-radius:var(--r-m); background:var(--bg); }
.hlJos { margin:0; display:flex; gap:6px; align-items:flex-start; font-size:var(--fs-xs); line-height:1.35; }
.hlJosJel { flex:none; width:18px; height:18px; border-radius:50%; display:grid; place-items:center; font:800 11px/1 var(--body); }
.hlJos.jo .hlJosJel { background:var(--good-bg); color:var(--good-ink); }
.hlJos.meg .hlJosJel { background:var(--sky-bg); }
.hlJos.rossz .hlJosJel { background:var(--bad-bg); color:var(--bad-ink); }

/* — kihívások — */
.hlKh .hlHex .pic { width:22px; height:22px; }
.hlKhSav { margin:0 0 4px; display:flex; gap:8px; align-items:center; padding:6px 8px; border-radius:var(--r-m); background:var(--butter); font-size:var(--fs-xs); line-height:1.35; }
.hlKhSav > .pic { flex:none; width:20px; height:20px; }
.hlKhSav .ds-icon-btn { margin-left:auto; flex:none; }
.hlKhKesz, .hlKhMeg { margin:0; display:flex; gap:6px; align-items:flex-start; padding:6px 8px; border-radius:var(--r-m); font-size:var(--fs-xs); line-height:1.35; }
.hlKhKesz { background:var(--good-bg); color:var(--good-ink); }
.hlKhMeg { background:var(--butter); }
.hlKhKesz .pic, .hlKhMeg .pic { flex:none; width:18px; height:18px; }

/* — léptető — */
.hlLepteto { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.hlLepSzam { font:700 var(--fs-xs)/1 var(--body); min-width:70px; text-align:center; }
.hlSor.aktiv { box-shadow:0 0 0 2px var(--accent), var(--soft-sm); }
.hlSor.kesobb { opacity:.35; }

/* — élőhely-háttér — */
#hlHatter { position:absolute; inset:0; opacity:.55; pointer-events:none; border-radius:var(--r-l); overflow:hidden; }
#hlHatter svg { position:absolute; inset:0; width:100%; height:100%; }
.hlEmelet span { z-index:1; }
.hlMagyaraz { color:var(--ink-soft); font-size:var(--fs-xs); }

/* — játékérzet (halo-juice.js, kit 1.10) — */
/* a láncreakcióban érintett faj mézes fénykört kap (a szülőn: a hatszög-kivágás nem vágja le) – az új kísérletig marad */
.hl-fut .hlNode.hl-hit { filter:drop-shadow(0 0 6px var(--glow)); }
.hlNode.hlGyogyul { filter:drop-shadow(0 0 6px var(--good)); }
/* jóslat-kiértékelés: a hálón a ✓ / ! / ✗ jel pipaként pattan fel, egymás után (--hl-d a halo-juice.js-ből) */
.hlNode.tipp-jo::before, .hlNode.tipp-meg::before, .hlNode.tipp-rossz::before {
  animation:dsTick var(--t-slow) var(--bounce) both; animation-delay:var(--hl-d, 0ms); }
.hlJosJel { --stamp-rot:0deg; }
.reduce-motion .hlNode::before { animation:none !important; }
@media (prefers-reduced-motion:reduce){ .hlNode::before { animation:none !important; } }

/* ============================================================
   2026-10-06 (UX-átvilágítás: „űrlapnak hat”, „telefonon három egyforma gomb”)
   ============================================================ */
/* — felső sáv: cím · csillag-célok (állapot, nem gomb) · feliratos eszközök — */
#hlTop { display:grid; grid-template-columns:minmax(0, 1fr) auto auto; grid-template-areas:"title celok stats"; align-items:center; gap:6px 12px; }
#hlTitle { grid-area:title; min-width:0; }
#hlCelok { grid-area:celok; }
#hlStats { grid-area:stats; flex-wrap:nowrap; }
/* az élőhely-választón nincs mit listázni: ott legfeljebb a „Befejezem” marad (ha volt már kísérlet), jobbra igazítva */
.hl-valaszt #hlStats { display:flex; justify-content:flex-end; }
.hlCelok { display:inline-flex; align-items:center; gap:2px; padding:4px 12px 4px 8px; border-radius:var(--r-pill); background:var(--paper); }
.hlCel { display:inline-flex; align-items:center; gap:4px; font:600 var(--fs-xs)/1.2 var(--body); color:var(--ink-soft); }
.hlCel .pic { width:22px; height:22px; }
.hlCel.kesz { color:var(--ink); }
.hlCelNev { display:none; }
.hlCelDb { margin-left:6px; font:700 var(--fs-xs)/1 var(--body); color:var(--ink-soft); font-variant-numeric:tabular-nums; white-space:nowrap; }
@media (min-width:1300px){ .hlCelNev { display:inline; margin-right:8px; } .hlCelDb { display:none; } }
.hlEszk { display:inline-flex; align-items:center; gap:6px; min-height:var(--tap); white-space:nowrap; }
.hlEszk .pic { width:20px; height:20px; }
.hlEszk[aria-pressed="true"] { background:var(--sage-bg); }
.hlVegeGomb { background:var(--good-bg); color:var(--good-ink); }

/* — élőhely-kártya: táj + mini-háló + név (js/halo-fejezet.js) — */
.hlFejek { grid-template-columns:repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.hlFej { padding:0; gap:0; align-items:stretch; overflow:hidden; }
.hlMiniHalo { position:relative; display:block; width:100%; aspect-ratio:4 / 3; background:var(--sage-bg); overflow:hidden; }
.hlMiniTaj { position:absolute; inset:0; opacity:.8; }
.hlMiniTaj svg { position:absolute; inset:0; width:100%; height:100%; }
.hlMiniBel { position:absolute; inset:12% 14%; }
.hlMiniSvg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.hlMiniEl { fill:none; stroke-width:2.4; stroke-linecap:round; }
.hlMiniEl.f-taplalek { stroke:var(--hl-c-taplalek); }
.hlMiniEl.f-beporzas { stroke:var(--hl-c-beporzas); stroke-dasharray:1 5; stroke-width:3; }
.hlMiniEl.f-elohely { stroke:var(--hl-c-elohely); stroke-dasharray:7 4; }
.hlMiniEl.f-lebontas { stroke:var(--hl-c-lebontas); stroke-dasharray:12 4 2 4; }
.hlMiniEl.f-terjesztes { stroke:var(--hl-c-terjesztes); stroke-dasharray:3 3 9 3; }
.hlMiniCsp { position:absolute; translate:-50% -50%; }
.hlMiniCsp .hlHex { --hl-node:40px; background:var(--paper); }
.hlMiniCsp.cs-beporzo .hlHex { background:var(--butter); }
.hlMiniCsp.cs-ragadozo .hlHex { background:var(--blossom-bg); }
.hlMiniCsp.cs-novenyevo .hlHex { background:var(--sky-bg); }
.hlMiniCsp.cs-lebonto .hlHex { background:var(--cream); }
.hlFejSzoveg { display:flex; flex-direction:column; gap:4px; padding:10px 14px 14px; }
@media (hover:hover) and (pointer:fine){ .hlFej:hover .hlMiniTaj { opacity:1; } }
@media (prefers-reduced-motion:no-preference){
  .hlFej { transition:transform var(--t-fast) var(--ease); }
  .hlFej:active { transform:scale(.98); }
}

/* — telefon: két sor fent (cím + célok, alatta az eszközsor), az élőhelyek 2×2-ben — */
@media (max-width:620px){
  #hlTop { grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"title celok" "stats stats"; gap:6px 8px; }
  #hlTitle { margin-left:56px; }
  .hlCelok { padding:2px 8px 2px 4px; }
  .hlCel .pic { width:18px; height:18px; }
  #hlStats { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); gap:6px; }
  .hlEszk { flex-direction:column; justify-content:center; gap:2px; min-height:48px; padding:4px 2px; font-size:12px; line-height:1.1; }
  .hlEszk span { max-width:100%; overflow:hidden; text-overflow:ellipsis; }
  .hlFejek { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
  .hlMiniHalo { aspect-ratio:1 / 1; }
  .hlMiniBel { inset:11% 17%; }
  .hlMiniCsp .hlHex { --hl-node:34px; }
  .hlFejSzoveg { padding:8px 10px 10px; }
  .hlFej b { font-size:var(--fs-m); }
}