/* ============================================================
   Digitális rendelő — a 3D javítókávézó fölötti réteg: fejléc, mérők, betegkártya (asztalon jobbra, telefonon alul).
   Csak tokenek (docs/arculat.md). A 3D a közös vásznon fut, ez csak a saját elemeinél fogja el a koppintást.
   ============================================================ */
.rendelo #hud, .rendelo #hudBtn, .rendelo #score, .rendelo #hint, .rendelo #joy, .rendelo #touchBtns, .rendelo #reticle,
.rendelo #nameTag, .rendelo #coach { display:none !important; }
.rendelo #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) */
.rendelo #sysBtns button { width:36px; height:36px; }
#dr { position:fixed; inset:0; z-index:var(--z-hud); pointer-events:none; color:var(--ink); }
#dr.hidden { display:none; }
#dr > * { pointer-events:auto; }
.drFej { position:absolute; top:54px; left:12px; display:grid; gap:6px; }
.drCim { display:flex; gap:8px; align-items:center; padding:6px 12px; border-radius:var(--r-m); background:var(--surface); box-shadow:var(--soft-sm); }
.drCim .pic { width:26px; height:26px; }
.drCim b { display:block; font:400 var(--fs-l)/1.1 var(--display); }
.drCim small { font:600 var(--fs-xs)/1.3 var(--body); color:var(--ink-soft); }
.drPottyok { display:flex; gap:6px; margin:0; padding:0 4px; list-style:none; }
.drPottyok li { width:14px; height:14px; clip-path:var(--hex); background:var(--sage); }
.drPottyok li.on { background:var(--honey); } .drPottyok li.jo { background:var(--leaf); } .drPottyok li.kesz { background:var(--honey-deep); }
.drMerok { position:absolute; z-index:1; left:12px; bottom:12px; display:flex; flex-wrap:wrap; gap:6px; max-width:min(60vw, 640px); }
.drMero { box-shadow:var(--soft-sm); }
.drMeroSor { display:contents; }   /* szélesebb kijelzőn a csipeszek a mérősor saját elemei (telefonon görgethető sor, lent) */
.drMero small { font-weight:600; color:var(--ink-soft); }
.drKb { font-style:normal; font-weight:800; color:var(--ink-soft); margin-right:-3px; }   /* ≈ becsült érték */
/* a mérők kitételei (becslés, játékérték) az (i) mögött – natív lenyíló, a doboz a gomb fölé nyílik */
.drMegj { position:relative; align-self:center; }
.drMegj > summary { list-style:none; box-shadow:var(--soft-sm); }
.drMegj > summary::-webkit-details-marker { display:none; }
.drMegj[open] > summary { background:var(--butter); }
.drMegj > summary:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.drMegjDoboz { position:absolute; right:0; bottom:calc(100% + 8px); width:min(320px, calc(100vw - 24px)); display:grid; gap:6px; padding:10px 12px; box-shadow:var(--soft); }
.drMegjDoboz b { font:400 var(--fs-m)/1.15 var(--display); }
.drMegjDoboz p { margin:0; font-size:var(--fs-xs); line-height:1.45; }
.drLap { position:absolute; top:112px; right:12px; bottom:12px; width:min(94vw, 480px); overflow-y:auto; display:flex; flex-direction:column; gap:10px; }
.drBeteg .ds-bubble { font-size:var(--fs-m); line-height:1.45; }
.drArc { width:64px; height:64px; flex:none; display:grid; place-items:end center; }
.drArc svg, .drArc img { width:100%; height:100%; }
.drKerdes { margin:4px 0 0; display:flex; gap:6px; align-items:center; font:400 var(--fs-l)/1.2 var(--display); }
.drKerdes .pic { width:22px; height:22px; }
.drOpciok { display:grid; gap:8px; }
.drOpciok .ds-btn-sm { justify-content:flex-start; text-align:left; min-height:var(--tap); white-space:normal; line-height:1.3; padding:8px 12px; }
.drValasz { display:grid; gap:4px; padding:10px 12px; border-radius:var(--r-m); background:var(--butter); }
.drValasz.jo { background:var(--good-bg); }
.drValasz b { display:flex; gap:6px; align-items:center; }
.drValasz p, .drTanulsag { margin:0; font-size:var(--fs-s); line-height:1.45; }
.drTanulsag { display:flex; gap:6px; align-items:flex-start; font-weight:700; }
.drTanulsag > .pic { width:20px; height:20px; flex:none; }
.drVita { background:var(--sky-bg); font-weight:600; }
.drMind { display:grid; gap:8px; }
.drMindSor { display:grid; gap:4px; padding:6px 8px; border-radius:var(--r-s); background:var(--bg); font-size:var(--fs-s); }
.drMindSor.on { outline:2px solid var(--honey-deep); }
.drHatas { display:flex; flex-wrap:wrap; gap:4px; }
.drHatas .ds-tag { font-size:var(--fs-xs); }
.drJatek { margin:0; font-size:var(--fs-xs); color:var(--ink-soft); display:flex; gap:4px; align-items:flex-start; }
.drForras p { font-size:var(--fs-xs) !important; overflow-wrap:anywhere; }
.drTovabb { align-self:stretch; }
@media (max-width:820px), (orientation:portrait){
  .drLap { top:auto; left:0; right:0; bottom:0; width:auto; height:62vh; border-radius:var(--r-l) var(--r-l) 0 0; padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px)); }
  .drMerok { top:112px; bottom:auto; right:12px; max-width:none; }
  .drMero small { display:none; }
  /* fent van a mérősor, és a gomb sortöréssel bárhová kerülhet: a doboz a teljes szélességben, a mérősor alatt nyílik */
  .drMegj { position:static; }
  .drMegjDoboz { left:0; right:0; bottom:auto; top:calc(100% + 8px); width:auto; }
}
@media (max-width:620px){ .drFej { top:10px; left:212px; right:12px; } .drCim small { display:none; } .drMerok { top:98px; left:12px; } .drFej { justify-items:end; } }
/* ── Keskeny telefon (telefon-kör, 2026-10-06): egy képernyőn a beteg, a válaszok és a „Következő beteg” ──
   A lap magasabb (a teteje a képernyő ~30%-ánál), a mérősor a lap tetején ül (nem lóg rá a kütyüre), a kütyü a fejléc
   és a mérősor közti sávban, kisebbre véve (rendelo-3d.js drRender). A beteg szövege és arca kisebb. */
@media (max-width:620px){
  #dr { --dr-lap-teto:clamp(180px, 30dvh, 280px); }
  .drFej { left:auto; } .drCim { padding:4px 10px; } .drCim b { font-size:var(--fs-m); } .drCim .pic { width:22px; height:22px; }
  .drLap { top:var(--dr-lap-teto); height:auto; padding-top:54px; gap:8px; }
  .drMerok { top:calc(var(--dr-lap-teto) + 6px); left:8px; right:8px; z-index:2; flex-wrap:nowrap; gap:4px; justify-content:safe center; }   /* görgetés nincs: a (i) lenyílója a sor alá nyílik */
  .drMero { flex:none; padding:2px 8px; font-size:var(--fs-m); box-shadow:none; } .drMero .pic { width:16px; height:16px; }
  /* sok, nagy szám esetén a csipesz-sor oldalra görög (az (i) a helyén marad, a lenyílója nem vágódik le) */
  .drMeroSor { display:flex; gap:4px; min-width:0; overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain; }
  .drMeroSor::-webkit-scrollbar { display:none; }
  /* elhalványuló szél, amerre még van csipesz (js/rendelo-ui.js drMeroSorJel) */
  .drMeroSor.is-tobb-jobbra { -webkit-mask-image:linear-gradient(to right, black calc(100% - 32px), transparent); mask-image:linear-gradient(to right, black calc(100% - 32px), transparent); }
  .drMeroSor.is-tobb-balra { -webkit-mask-image:linear-gradient(to right, transparent, black 28px); mask-image:linear-gradient(to right, transparent, black 28px); }
  .drMeroSor.is-tobb-balra.is-tobb-jobbra { -webkit-mask-image:linear-gradient(to right, transparent, black 28px, black calc(100% - 32px), transparent);
    mask-image:linear-gradient(to right, transparent, black 28px, black calc(100% - 32px), transparent); }
  .drMegj > summary { box-shadow:none; }
  .drArc { width:48px; height:48px; } .drBeteg .ds-bubble { font-size:var(--fs-s); line-height:1.4; }
  .drKerdes { margin-top:0; font-size:var(--fs-m); }
  .drOpciok { gap:6px; } .drOpciok .ds-btn-sm { padding:6px 12px; font-size:var(--fs-s); }
  .drValasz { padding:8px 10px; }
}
/* a súgó itt alul jelenik meg: felül a beteg kütyüje és a cím van, alul a panel üres része (2026-10-06, átvilágítás) */
.rendelo #sugo { top:auto; bottom:calc(16px + env(safe-area-inset-bottom)); }