/* ============================================================
   FENNTARTHATÓ OTTHON (bejárható matrica-album) + a menü „Fenntartható otthon” kártyája (napi küldetés)
   Csak tokenekkel; a panel a ds-panel mintát követi.
   ============================================================ */
.otthon #score, .otthon #hud, .otthon #hudBtn, .otthon #hint, .otthon #reticle { display:none !important; }
#otHint { position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:var(--z-controls); max-width:calc(100vw - 32px);
  background:var(--night); color:var(--cream); border-radius:var(--r-pill); padding:8px 16px 6px; font-weight:700; font-size:14px; text-align:center; pointer-events:none; }
.touch #otHint { bottom:auto; top:16px; }
#otHint.hidden, #otPanel.hidden { display:none; }
#otPanel { position:fixed; inset:0; z-index:var(--z-panel); display:flex; align-items:center; justify-content:center; padding:var(--sp-4); background:var(--scrim); }
.otBox { position:relative; width:min(620px, 100%); max-height:86vh; overflow-y:auto; }
.otClose { position:absolute; top:12px; right:12px; }
.otItem { display:flex; align-items:center; gap:var(--sp-4); padding-right:44px; }
.otBig { width:120px; flex:0 0 auto; } .otBig img.art, .otBig img { width:100%; height:auto; }
.otGrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); gap:8px; margin-top:10px; }
.otCell { display:flex; flex-direction:column; align-items:center; gap:4px; background:var(--surface); border:2px solid var(--line); border-radius:var(--r-m); padding:6px; font:inherit; color:var(--ink); }
.otCell img.art, .otCell img { width:56px; height:auto; } .otCell small { font-size:11px; font-weight:700; line-height:1.2; text-align:center; }
.otBadges { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; margin-top:10px; }
.otBadge { background:var(--surface); border:2px solid var(--line); border-radius:var(--r-m); padding:10px 8px; }
.otBadge.is-locked { opacity:.55; }
.otBadgeIco { width:52px; height:52px; display:grid; place-items:center; } .otBadgeIco img.art { width:100%; height:auto; } .otBadgeIco .pic { width:26px; height:26px; }
.otBadge small { font-weight:400; color:var(--ink-soft); }

/* menü: Fenntartható otthon kártya + mai küldetés */
.gyCard { margin:0 0 var(--sp-4); padding:12px 14px; display:flex; flex-direction:column; gap:10px; }
.gyHead { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.gyHead > div { flex:1 1 200px; } .gyHead b { display:block; font:400 var(--fs-l)/1.1 var(--display); } .gyHead small { color:var(--ink-soft); font-weight:700; display:inline-flex; align-items:center; gap:4px; flex-wrap:wrap; }
.gyHead small .pic { width:14px; height:14px; }
.gyIco { width:56px; aspect-ratio:1/1.1; display:grid; place-items:center; clip-path:var(--hex); background:var(--butter); } .gyIco img.art { width:84%; height:auto; }
.gyTitle { display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:13px; color:var(--ink-soft); }
.gyMissions { display:flex; flex-direction:column; gap:6px; }
.gyMission { display:flex; justify-content:space-between; align-items:center; gap:10px; background:var(--bg); border:2px solid var(--line); border-radius:var(--r-m); padding:6px 10px; font-size:14px; }
.gyMission span { display:inline-flex; align-items:center; gap:6px; } .gyMission .pic { width:16px; height:16px; }
.gyMission.ok { background:var(--good-bg); color:var(--good-ink); }