/* ============================================================
   HŰTŐ-MESTER — oldalirányú mozgás sáv + tárolási tény popup
   A design systemre építve: ds-icon-btn, ds-panel, ds-say/ds-bubble, ds-tag, ds-details; csak tokenekkel.
   ============================================================ */
#htNav { position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:calc(var(--z-hud) + 1); display:flex; align-items:center; gap:10px;
  background:var(--surface); border:var(--line-w) solid var(--line); border-radius:var(--r-pill); box-shadow:var(--soft); padding:6px;
  max-width:calc(100vw - 24px); }
#htNav.hidden { display:none !important; }
#htNav .ds-icon-btn { width:56px; height:48px; border-radius:var(--r-pill); touch-action:none; box-shadow:var(--press); }
#htNav .ds-icon-btn:active { transform:translateY(3px); box-shadow:0 1px 0 var(--line); }
#htNav .ds-icon-btn .pic { width:26px; height:26px; }
#htNav .htWhere { font:400 var(--fs-l)/1.1 var(--display); min-width:150px; text-align:center; padding-top:3px; }
@media (max-width:600px){
  #htNav { bottom:16px; gap:6px; }
  #htNav .ds-icon-btn { width:50px; height:44px; }
  #htNav .htWhere { font-size:var(--fs-m); min-width:110px; }
}
@media (max-height:520px) and (orientation:landscape){
  /* alacsony képernyőn a sáv FELÜL van, hogy ne takarja az asztalt */
  #htNav { bottom:auto; top:8px; padding:4px; }
  #htNav .ds-icon-btn { height:var(--tap); width:48px; }   /* érintőn is 44 px-es célpont */ #htNav .htWhere { font-size:var(--fs-m); min-width:110px; }
}

/* 2026-10-03: a hűtőben nincs séta – a „WASD” irányítás-kártya és a gombja nem kell; a kézben tartott étel felirata (huto-nezet.js) */
.fridge #hud, .fridge #hudBtn { display:none !important; }
#htKez { position:fixed; z-index:calc(var(--z-hud) + 1); transform:translate(-50%, 0); pointer-events:none; box-shadow:var(--soft-sm); font-weight:700; }
#htKez.hidden { display:none; }
/* a tipp-sor a hűtőben tördelhető (telefonon ne lógjon ki) */
.fridge #hint { white-space:normal; max-width:calc(100vw - 24px); text-align:center; }
#htCel { position:fixed; left:0; top:0; width:0; height:0; pointer-events:none; }

/* tárolási tény: a hűtő-módban nincs botkormány; a felvesz/info gombok maradnak */
#htPop { position:fixed; inset:0; z-index:calc(var(--z-panel) - 1); background:var(--scrim); display:flex; align-items:flex-start; justify-content:center;
  overflow-y:auto; padding:max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
#htPop.hidden { display:none !important; }
.htBox { width:min(520px, 100%); padding:18px 18px 16px; text-align:left; }
.htClose { position:absolute; top:12px; right:12px; }
.htClose .pic { width:20px; height:20px; }
.htHead { display:flex; align-items:center; gap:var(--sp-3); padding-right:52px; }
.htHead .ds-h3 { font-size:var(--fs-xl); margin-bottom:4px; }
.htIco { --size:56px; --acc:var(--sky); }
.htLead { margin-top:var(--sp-3); font-size:15px; }
.htFact { margin-top:var(--sp-3); }
.htFact .ds-avatar { --size:54px; }
.htTip, .htSmall { display:flex; gap:6px; align-items:flex-start; margin:var(--sp-2) 0 0; font-size:var(--fs-s); line-height:1.45; }
.htTip .pic, .htSmall .pic { width:20px; height:20px; flex:0 0 auto; }
.htSmall { color:var(--ink-soft); font-size:13px; }
.htSrc p { font-size:13px; } .htSrc a { color:var(--focus); word-break:break-word; }
.htActions { display:flex; justify-content:flex-end; margin-top:var(--sp-4); }
@media (max-width:600px){
  #htPop { align-items:flex-end; padding:0; }
  .htBox { margin:0; width:100%; max-height:86vh; overflow-y:auto; border-radius:var(--r-xl) var(--r-xl) 0 0; border-bottom:none;
    padding:16px 14px max(14px, env(safe-area-inset-bottom)); }
  .htActions .ds-btn { width:100%; }
}