/* ============================================================
   Élő birtok — a dioráma fölötti réteg (csak tokenek, docs/arculat.md). A réteg maga átengedi a koppintást a 3D-nek,
   csak a saját elemei fogják meg. Asztalon a mező-panel jobb oldalt, telefonon alulról felcsúszó lap.
   ============================================================ */
.birtok #hud, .birtok #hudBtn, .birtok #score, .birtok #hint, .birtok #joy, .birtok #touchBtns, .birtok #reticle,
.birtok #nameTag, .birtok #coach { display:none !important; }
.birtok #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) */

#bt { position:fixed; inset:0; z-index:var(--z-hud); pointer-events:none; color:var(--ink); }
#bt.hidden { display:none; }
#bt > * { pointer-events:auto; }

.btHud { position:absolute; top:max(10px, env(safe-area-inset-top)); left:220px; right:12px; display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3); }
.btHud .ds-chip { font-variant-numeric:tabular-nums; }
.btHud small { color:var(--ink-soft); font-size:var(--fs-xs); }
.btMunka { display:grid; gap:2px; min-width:120px; flex:0 1 160px; }
.btMunka small { font-weight:700; }
.btViz .ds-meter > i { background:var(--sky); }
.btViz[hidden] { display:none; }
.btElo b { color:var(--ink); }
.btFeladat { flex:1 1 100%; margin:0; background:var(--butter); white-space:normal; display:flex; align-items:center; gap:6px; }
.btFeladat .btFt { flex:1 1 auto; min-width:0; }
.btFeladat b { flex:none; font-variant-numeric:tabular-nums; }

/* a kijelölt mező */
/* a HUD magassága (--bt-hud-h) a btHud()-ból jön – a panel mindig alatta kezdődik */
.btMezo { position:absolute; right:12px; top:calc(max(10px, env(safe-area-inset-top)) + var(--bt-hud-h, 110px) + var(--sp-2)); width:min(340px, calc(100% - 24px));
  max-height:calc(100% - var(--bt-hud-h, 110px) - 120px); overflow:auto; padding:var(--sp-3); }
.btMezo.hidden { display:none; }
.btMezo header { display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-2); }
.btMezo header b { flex:1; font-size:var(--fs-l); }
.btMezo header small { color:var(--ink-soft); }
.btAllapot { list-style:none; margin:0 0 var(--sp-2); padding:0; display:grid; gap:4px; font-size:var(--fs-s); }
.btAllapot li { display:flex; align-items:center; gap:var(--sp-2); }
.btAllapot .is-baj, .btLista .is-baj, p.is-baj { color:var(--bad-ink); }
.btLepcso { display:inline-block; width:80px; height:10px; border-radius:var(--r-pill); border:var(--line-w) solid var(--line); background:var(--sage-bg);
  background-image:linear-gradient(90deg, var(--leaf) var(--v, 0%), transparent var(--v, 0%)); }
.btAkciok { display:grid; gap:var(--sp-1); }
.btAkciok .ds-btn-sm { justify-content:flex-start; text-align:left; min-height:var(--tap); }
.btAkciok .ds-btn-sm span { display:grid; }
.btAkciok .ds-btn-sm small { color:var(--ink-soft); font-weight:400; }
.btAkciok svg, .btAkciok canvas, .btAkciok img, .btOpcio svg, .btOpcio canvas, .btOpcio img, .btLista svg, .btLista canvas, .btLista img { width:32px; height:32px; flex:0 0 auto; }
/* tiltott gomb: az ok látható szöveg (birtok-ui.js btMiert) – a gomb nem halványul el egészében, csak az ikonja és a felirata,
   hogy az ok jól olvasható maradjon (érintőn a title-buborék sosem jelenne meg; 2. átvilágítás) */
.btAkciok .ds-btn-sm[disabled], .btOpcio:disabled { opacity:1; background:var(--bg); color:var(--ink-soft); }
.btAkciok .ds-btn-sm[disabled] > :not(span), .btOpcio:disabled > :not(span) { opacity:.45; }
.btAkciok .ds-btn-sm small.btMiert, .btOpcio small.btMiert { display:flex; align-items:center; gap:4px; color:var(--ink); font:600 var(--fs-xs)/1.25 var(--body); }
.btAkciok .btMiert svg, .btOpcio .btMiert svg { width:14px; height:14px; flex:none; }

/* a vezetett év: a feladat-chip kész állapota és a gomb-tipp (pl. Palánták) */
.btFeladat.is-kesz { background:var(--good-bg); color:var(--good-ink); }
.btAlso .is-tipp { outline:3px solid var(--honey); outline-offset:2px; animation:btTipp 1.6s var(--ease-in-out) 4; }
@keyframes btTipp { 50% { outline-color:var(--honey-deep); } }
@media (prefers-reduced-motion: reduce){ .btAlso .is-tipp { animation:none; } }

/* tervezési réteg jelmagyarázata (birtok-retegek.js) – a rendszergombok alatt; a skála a DS adatskálái */
.btRetegJel { position:absolute; left:10px; top:calc(max(10px, env(safe-area-inset-top)) + 58px); width:min(260px, calc(100% - 24px)); margin:0;
  padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3); display:grid; grid-template-columns:1fr auto; gap:4px var(--sp-2); align-items:center; }
.btRetegJel[hidden] { display:none; }
.btRetegJel > b { grid-column:1; } .btRetegJel .ds-icon-btn { grid-column:2; grid-row:1 / span 3; align-self:start; }
.btRetegJel small { grid-column:1; color:var(--ink-soft); font-size:var(--fs-xs); }
.btSkala { grid-column:1; display:flex; height:12px; border:var(--line-w) solid var(--line); border-radius:var(--r-pill); overflow:hidden; }
.btSkala i { flex:1; background:var(--c); }
.btOpcio.is-on { outline:3px solid var(--honey); outline-offset:1px; }

/* „Mi lett volna, ha…?” táblázat (birtok-osszevet.js) – keskeny képernyőn saját vízszintes görgetés */
.btTablaDoboz { overflow-x:auto; margin:var(--sp-2) 0; }
.btTabla { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; font-size:var(--fs-s); }
.btTabla th, .btTabla td { padding:6px var(--sp-2); text-align:right; border-bottom:var(--line-w) solid var(--sage); white-space:nowrap; }
.btTabla th[scope="row"] { text-align:left; font-weight:600; white-space:normal; }
.btTabla thead th { font-family:var(--display); font-weight:400; font-size:var(--fs-m); }
.btTabla td.is-best { font-weight:700; background:var(--good-bg); color:var(--good-ink); }
.btTabla svg { width:18px; height:18px; vertical-align:-3px; }
.btMitosz summary i { font-style:normal; color:var(--ink-soft); }

/* alsó sáv */
.btAlso { position:absolute; left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100% - 24px); bottom:calc(var(--sp-4) + env(safe-area-inset-bottom)); display:flex; flex-wrap:wrap; gap:var(--sp-2); justify-content:center; }

/* lap (választó, raktár, hónap vége) */
/* középre margóval (nem transformmal – azt a DS belépő-animációja használja) */
.btLap { position:absolute; inset:0; margin:auto; height:max-content; width:min(560px, calc(100% - 24px)); max-height:calc(100% - 120px); overflow:auto;
  padding:var(--sp-4); z-index:calc(var(--z-hud) + 1); }
.btLap.hidden { display:none; }
.btLap > .ds-btn.is-block { margin-top:var(--sp-3); }
.btLapZar { position:absolute; right:var(--sp-2); top:var(--sp-2); }
.btLap h2 { margin:0 0 var(--sp-3); font-size:var(--fs-xl); padding-right:48px; }
.btLap h3 { margin:var(--sp-3) 0 var(--sp-2); font-size:var(--fs-l); }
.btOpciok { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:var(--sp-2); }
.btOpcio { display:flex; align-items:center; gap:var(--sp-2); text-align:left; padding:var(--sp-2); min-height:var(--tap); }
.btOpcio span { display:grid; flex:1; } .btOpcio small { color:var(--ink-soft); font-size:var(--fs-xs); }
.btOpcio em { font-style:normal; font-size:var(--fs-xs); color:var(--ink-soft); }
.btLista { list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-2); }
.btLista li { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); }
.btLista li > span { flex:1 1 180px; }
.btJel { font-size:var(--fs-xs); margin-top:var(--sp-3); }
.btEsem { display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-l); }
.btEsem svg, .btEsem canvas, .btEsem img { width:44px; height:44px; }

/* betakarítás: „+N kg” száll fel a mezőről (csökkentett mozgásnál helyben halványul) */
.btPop { position:absolute; translate:-50% -100%; pointer-events:none; white-space:nowrap; font-family:var(--display); font-size:var(--fs-l);
  padding:2px var(--sp-2); border-radius:var(--r-pill); background:var(--honey); color:var(--ink); border:var(--line-w) solid var(--line);
  animation:btPop 900ms var(--ease-out) forwards; }
@keyframes btPop { 0% { opacity:0; transform:translateY(6px) scale(.9); } 15% { opacity:1; transform:translateY(0) scale(1); } 65% { opacity:1; transform:translateY(-26px); } 100% { opacity:0; transform:translateY(-38px); } }
@keyframes btPopHalk { 0%, 60% { opacity:1; } 100% { opacity:0; } }
@media (prefers-reduced-motion: reduce){ .btPop { animation-name:btPopHalk; animation-duration:1.2s; } }
.reduce-motion .btPop { animation-name:btPopHalk; animation-duration:1.2s; }

#btSay { bottom:calc(var(--sp-6) + 56px + env(safe-area-inset-bottom)); }

/* közelítő / távolító gombok (birtok-kamera.js): asztalon jobbra lent az alsó sáv fölött, telefonon a jobb szélen középen */
.btZoom { position:absolute; right:calc(12px + env(safe-area-inset-right)); bottom:calc(var(--sp-4) + 72px + env(safe-area-inset-bottom));
  display:grid; gap:var(--sp-2); }
.btZoom .ds-icon-btn { box-shadow:var(--soft-sm); }

/* telefon és keskeny tablet: tömör felső sáv a rendszergombok alatt, egysoros alsó sáv, alacsony mező-panel két oszloppal */
@media (max-width:820px){
  .btHud { width:auto; left:12px; right:12px; top:calc(max(10px, env(safe-area-inset-top)) + 50px); padding:var(--sp-1) var(--sp-2); gap:4px var(--sp-1); font-size:var(--fs-s); }
  .btHud .ds-chip { padding:2px 8px; }
  .btMunka { min-width:80px; flex:1 1 80px; }
  .btFeladat { min-width:0; max-width:100%; }
  /* a hónap feladata legfeljebb két sorban, levágás nélkül (csiszoló kör, 2026-10-05: „Takaríts ki…” csonka volt) */
  .btFeladat .btFt { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; line-height:1.2; }
  .btAlso { flex-wrap:nowrap; left:12px; right:12px; transform:none; justify-content:space-between; }
  .btAlso .btCimke { display:none; }
  .btAlso { gap:6px; }
  .btAlso .ds-btn-sm { flex:0 0 auto; min-width:var(--tap); padding-inline:10px; justify-content:center; }
  .btAlso .ds-btn { flex:1 1 auto; min-width:0; white-space:nowrap; padding-inline:var(--sp-3); }
  .btRetegJel { left:12px; right:12px; width:auto; top:calc(max(10px, env(safe-area-inset-top)) + 58px + var(--bt-hud-h, 110px)); }
  .btRetegJel .btRetegMegj { display:none; }
  .btTabla { font-size:var(--fs-xs); } .btTabla th, .btTabla td { padding:5px 4px; } .btTabla thead th { font-size:var(--fs-s); }
  .btMezo { right:12px; left:12px; width:auto; top:auto; bottom:calc(var(--sp-4) + 64px + env(safe-area-inset-bottom)); max-height:40%; padding:var(--sp-2); }
  .btAkciok { grid-template-columns:1fr 1fr; }
  .btAkciok .ds-btn-sm small { display:none; }
  .btAkciok .ds-btn-sm[disabled] { grid-column:1 / -1; }   /* a tiltott gomb teljes szélességű: az oka 1–2 sorban elfér */
  #btSay { left:12px; right:12px; max-width:none; bottom:calc(var(--sp-4) + 64px + env(safe-area-inset-bottom)); }
  /* telefonon a HUD és az alsó sáv között félúton; nyitott mező-panelnél elbújik (a panel alatt úgyis a mező a lényeg) */
  .btZoom { top:calc(50% + var(--bt-hud-h, 110px) / 2 - 24px); bottom:auto; transform:translateY(-50%); }
  .btMezo:not(.hidden) ~ .btZoom { display:none; }
}
/* fekvő telefon (alacsony képernyő): a mező-panel jobbra kerül, mint asztalon – alulról felcsúszva a telek közepét takarná el
   (UX-audit, 2026-10-05); a munkaerő-felirat helyett elég a sáv (aria-label-je megvan) */
@media (max-width:820px) and (max-height:500px) and (orientation:landscape){
  .btMunka small { display:none; }
  .btMezo { left:auto; right:12px; width:min(340px, 46%); top:calc(max(10px, env(safe-area-inset-top)) + 50px + var(--bt-hud-h, 110px) + var(--sp-1));
    bottom:calc(var(--sp-4) + 60px + env(safe-area-inset-bottom)); max-height:none; }
  .btAkciok { grid-template-columns:1fr; }
  .btMezo:not(.hidden) ~ .btZoom { display:none; }
}