/* ============================================================
   Méhpilóta — a repülés fölötti réteg (a 3D a közös vásznon fut, saját jelenettel)
   Csak tokenek (docs/arculat.md). Az egész réteg fogja a húzást (touch-action:none), a gombok fölötte vannak.
   ============================================================ */
.kaptar #hud, .kaptar #hudBtn, .kaptar #score, .kaptar #hint, .kaptar #joy, .kaptar #touchBtns, .kaptar #reticle,
.kaptar #nameTag, .kaptar #coach { display:none !important; }
.kaptar #sysBtns { flex-direction:row; top:10px; left:10px; gap:6px; }   /* a réteg a jatek-menu.css-é: a Menü minden panel fölött (menu-proba) */

#kp { position:fixed; inset:0; z-index:var(--z-hud); color:var(--ink); touch-action:none; user-select:none; -webkit-user-select:none; cursor:grab; }
#kp:active { cursor:grabbing; }
#kp.hidden { display:none; }

/* felső sáv: idő · mézgyomor · kamera (a bal felső sarok a közös rendszergomboké) */
.kpHud { position:absolute; top:max(10px, env(safe-area-inset-top)); left:50%; transform:translateX(-50%); width:min(560px, calc(100% - 24px));
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3);
  background:var(--surface); border:var(--line-w) solid var(--line); border-radius:var(--r-pill); box-shadow:var(--soft-sm); }
.kpIdo { font-variant-numeric:tabular-nums; }
.kpIdo.is-keves { background:var(--bad-bg); color:var(--bad-ink); }
.kpGyomor { display:grid; gap:2px; min-width:0; }
.kpGyomorCim { font-size:var(--fs-xs); color:var(--ink-soft); font-weight:700; }
.kpGombok { display:flex; gap:var(--sp-1); }
/* „Méhszem” kapcsoló: ikon + rövid felirat; lenyomva (FPV) mézszínű */
.kpKamera { min-height:var(--tap); gap:6px; white-space:nowrap; }
.kpKamera .pic { width:20px; height:20px; }
#kpKamera[aria-pressed="true"] { background:var(--accent); color:var(--on-accent); }

/* gyorsítás: nagy, hüvelykujj-közeli gomb jobbra lent */
.kpBoost { position:absolute; right:calc(var(--sp-4) + env(safe-area-inset-right)); bottom:calc(var(--sp-5) + env(safe-area-inset-bottom));
  --tap:72px; width:var(--tap); height:var(--tap); box-shadow:var(--soft); }
.kpBoost .pic { width:34px; height:34px; }
.kpBoost:disabled { opacity:.45; }
/* a gyorsítás felirata a gomb alatt (töltés közben „Töltődik…”) */
.kpBoostCim { position:absolute; right:calc(var(--sp-4) + env(safe-area-inset-right)); width:72px; text-align:center;
  bottom:calc(var(--sp-5) + env(safe-area-inset-bottom) - 24px); font-size:var(--fs-xs); font-weight:700; pointer-events:none; line-height:1.4;
  color:var(--ink); background:var(--surface); border:var(--line-w) solid var(--line); border-radius:var(--r-pill); }

/* célmutató nyíl (kaptar-ui.js → kpNyilTick): méz-színű nyíl egy pöttyel; a kaptár felé olíva pötty jelzi a hazautat.
   A helyét JS adja (translate), a forgását a --szog; átmenet nincs, hogy ne késsen a repüléshez képest. */
.kpNyil { position:absolute; left:0; top:0; width:0; height:0; pointer-events:none; opacity:0; transition:opacity var(--t-base) var(--ease-out); }
.kpNyil.is-on { opacity:1; }
.kpNyilHegy { position:absolute; left:-24px; top:-24px; width:48px; height:48px; transform:rotate(var(--szog, 0rad)); }
.kpNyilHegy svg { width:100%; height:100%; overflow:visible; fill:var(--honey); stroke:var(--line); stroke-width:3; stroke-linejoin:round; }
.kpNyilKor { position:absolute; left:-7px; top:-7px; width:14px; height:14px; border-radius:50%; background:var(--surface); border:var(--line-w) solid var(--line); }
.kpNyil.is-haza .kpNyilKor { background:var(--line); }
.kpNyil.is-kepen .kpNyilHegy { width:40px; height:40px; left:-20px; top:-20px; }

/* botkormány-jel: ahol lenyomtad az ujjad (csak húzás közben látszik) */
.kpBot { position:absolute; width:120px; height:120px; margin:-60px 0 0 -60px; border-radius:50%; border:var(--line-w) solid var(--line);
  background:color-mix(in srgb, var(--surface) 35%, transparent); opacity:0; pointer-events:none;
  transition:opacity var(--t-fast) var(--ease-out); }
.kpBot.is-on { opacity:1; }
.kpBot > i { position:absolute; left:50%; top:50%; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%;
  background:var(--honey); border:var(--line-w) solid var(--line); transform:translate(var(--dx, 0px), var(--dy, 0px)); }

/* a kalauz méhecske (DS-sprite: vízszintes csík, --kp-n képkocka) */
.kpSay { position:absolute; left:var(--sp-3); bottom:calc(var(--sp-5) + env(safe-area-inset-bottom)); max-width:min(460px, calc(100% - 120px)); pointer-events:none; }
.kpSay.hidden { display:none; }
.ds-avatar.is-bee.kpKalauz { --size:72px; background-repeat:no-repeat; background-size:calc(var(--kp-n) * var(--size)) var(--size); background-position:0 0; }
/* jump-none: az első és az utolsó képkocka is kap egy lépést, és az utolsón áll meg (végtelen mozgás nincs) */
.ds-avatar.is-bee.kpKalauz.is-mozog { animation:kpSprite var(--kp-ido) steps(var(--kp-n), jump-none) var(--kp-ism) forwards; }
@keyframes kpSprite { to { background-position:calc((var(--kp-n) - 1) * var(--size) * -1) 0; } }
.kpSay .ds-bubble { font-size:var(--fs-m); }

/* egy mondatos súgó a HUD alatt */
.kpSugo { position:absolute; top:calc(max(10px, env(safe-area-inset-top)) + 66px); left:50%; transform:translateX(-50%); margin:0;
  padding:var(--sp-1) var(--sp-3); border-radius:var(--r-pill); background:var(--surface); border:var(--line-w) solid var(--line);
  font-size:var(--fs-s); white-space:nowrap; max-width:calc(100% - 24px); overflow:hidden; text-overflow:ellipsis; pointer-events:none;
  display:flex; align-items:center; gap:6px; }
.kpSugo .pic { width:18px; height:18px; flex:none; }
/* az irányítás-súgó (első másodpercek): méz háttér, keskeny képernyőn két sorba is törhet */
.kpSugo.is-tanit { background:var(--butter); white-space:normal; text-align:center; justify-content:center; flex-wrap:wrap; width:max-content; }

@media (prefers-reduced-motion: reduce){ .ds-avatar.is-bee.kpKalauz.is-mozog { animation:none; } .kpBot, .kpNyil { transition:none; } }
.reduce-motion .kpNyil { transition:none; }

/* 1000 px alatt (a középre tett sáv már elérné őket) a sáv a bal felső rendszergombok (menü, hang, súgó, teljes képernyő) ALÁ kerül */
@media (max-width:1000px){ .kpHud { top:calc(max(10px, env(safe-area-inset-top)) + 50px); }
  .kpSugo { top:calc(max(10px, env(safe-area-inset-top)) + 116px); } }