/* ============================================================
   NEM GÁZ A PEDÁL — felület a 3D Méhesd fölött (js/kozlekedes-ui.js). Csak tokenek.
   Fent: fejléc + 5 mérő; lent: az út kártyája és a választható közlekedési módok (előre látszó hatással).
   ============================================================ */
.kozlekedes #score, .kozlekedes #hud, .kozlekedes #hudBtn, .kozlekedes #hint, .kozlekedes #reticle, .kozlekedes #nameTag, .kozlekedes #touchBtns, .kozlekedes #joy { display:none !important; }
#ngLayer { position:fixed; inset:0; z-index:var(--z-hud); pointer-events:none; color:var(--ink); font-family:var(--body);
  display:flex; flex-direction:column; gap:6px; padding:max(52px, env(safe-area-inset-top)) var(--sp-3) max(10px, env(safe-area-inset-bottom));
  padding-left:max(var(--sp-3), 58px); }
#ngLayer.hidden { display:none; }
#ngLayer > * { pointer-events:auto; }
.ngHead, .ngMeters { align-self:center; width:min(1000px, 100%); background:var(--surface); border:var(--line-w) solid var(--line); border-radius:var(--r-l); box-shadow:var(--soft-sm); }
.ngHead { display:flex; align-items:center; gap:var(--sp-2) var(--sp-3); padding:6px 10px; }
.ngHead .ngFace { width:44px; height:44px; flex:0 0 44px; } .ngFace svg { width:100%; height:100%; }
.ngTitle b { display:block; font:400 var(--fs-l)/1 var(--display); } .ngTitle small { color:var(--ink-soft); font-weight:700; font-size:12px; }
.ngTools { margin-left:auto; }
.ngMeters { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:4px 12px; padding:6px 10px; }
.ngM { min-width:0; display:flex; flex-direction:column; gap:2px; }
.ngM span { font-size:12px; font-weight:700; color:var(--ink-soft); display:flex; gap:4px; align-items:center; }
.ngM b { font:400 var(--fs-m)/1.1 var(--display); font-variant-numeric:tabular-nums; } .ngM b small { font:600 12px var(--body); color:var(--ink-soft); }
.ngM small { font-size:var(--fs-xs); color:var(--ink-soft); } .ngM .ds-meter { height:10px; }
/* lent: az út + a módok */
.ngBottom { margin-top:auto; align-self:center; width:min(1000px, 100%); display:flex; flex-direction:column; gap:6px; }
.ngTrip { display:flex; gap:10px; align-items:center; background:var(--surface); border:var(--line-w) solid var(--line); border-radius:var(--r-l); box-shadow:var(--soft-sm); padding:6px 12px; }
.ngTrip:empty { display:none; }
.ngTo { width:52px; height:52px; flex:0 0 52px; } .ngTo .art, .ngTo img, .ngTo canvas { width:100%; height:100%; }
.ngTrip b { font-size:var(--fs-m); } .ngTrip small { color:var(--ink-soft); font-weight:700; }
.ngTags { display:flex; flex-wrap:wrap; gap:4px; margin:4px 0 0; } .ngTags .ds-chip { font-size:12px; } .ngTags .is-ev { background:var(--butter); }
.ngModes { display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; scroll-snap-type:x proximity; }
.ngModes.is-busy { opacity:.55; pointer-events:none; }
.ngMode { flex:1 0 132px; max-width:190px; scroll-snap-align:start; display:grid; grid-template-columns:auto 1fr; column-gap:6px; align-items:center; gap:1px 6px; padding:6px 10px; text-align:left; font:inherit; color:var(--ink); cursor:pointer; min-height:var(--tap); }
.ngMode b { font-size:14px; } .ngMode small { font-size:12px; display:flex; gap:3px; align-items:center; color:var(--ink-soft); }
.ngMode small .pic { width:13px; height:13px; }
.ngMi { width:34px; height:34px; grid-row:span 1; } .ngMode > small { grid-column:1 / -1; }
.ngMode .ngMi + b { align-self:center; } .ngMi .art, .ngMi img, .ngMi canvas { width:100%; height:100%; }
.ngMode.is-off { opacity:.5; cursor:not-allowed; }
.ngMood { font-weight:800; }
.ngMode small.ngMell { flex-direction:column; align-items:flex-start; gap:1px; } .ngMell span { display:inline-flex; gap:3px; align-items:center; }
/* panelek */
.ngPanel { position:fixed; inset:0; z-index:var(--z-panel); display:grid; place-items:center; padding:var(--sp-4); background:var(--scrim); }
.ngPanel.hidden { display:none; }
.ngPanelBox { width:min(620px, 100%); display:flex; flex-direction:column; gap:var(--sp-3); max-height:100%; overflow-y:auto; }
.ngPeople, .ngInv { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:var(--sp-2); }
.ngPerson, .ngInvest { display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px; text-align:center; font:inherit; color:var(--ink); cursor:pointer; }
.ngPerson .ngFace { width:56px; height:56px; }
.ngPerson small, .ngInvest small { color:var(--ink-soft); font-size:12px; }
.ngCost { font-weight:800; }
/* pénztárca (js/kozlekedes-penz.js, 2026-10-06): a heti keret sávja, túllépésnél színjelzés + szöveg; a meg nem fizethető vásárlás halvány */
.ngPenz > small { display:block; color:var(--ink-soft); font-size:var(--fs-xs); }
.ngPenz.is-tul .ds-meter > i { background:var(--blossom); }
.ngPenz.is-tul b { color:var(--bad-ink); }
.ngInvest.is-off { cursor:not-allowed; } .ngInvest.is-off > :not(.ngHiany) { opacity:.55; }   /* a hiány-sor jól olvasható marad */
.ngInvest small.ngHiany { font-weight:700; color:var(--bad-ink); }
.ngTarca { margin:0 0 var(--sp-2); font-weight:700; } .ngTarca small { font-weight:400; color:var(--ink-soft); }
.ngSrc { margin:0; padding-left:1.1em; display:grid; gap:6px; }
@media (max-width:700px){
  .ngMeters { grid-template-columns:repeat(3, minmax(0, 1fr)); } .ngM small { display:none; }
  .ngPenz b small { display:inline; }   /* a keret telefonon is látszik: „1480 / 5417 Ft” – nélküle a szám értelmetlen */
  .ngTitle small { display:none; } .ngHead .ngFace { width:34px; height:34px; flex-basis:34px; } .ngLbl { display:none; }
  .ngHead { padding:4px 8px; } .ngTitle b { font-size:var(--fs-m); }
  .ngMode { flex-basis:118px; }
  .ngPanel { padding:var(--sp-2); padding-left:58px; }
}
/* ── Álló telefon (telefon-kör, 2026-10-06): a 3. módkártya oldalt kilógott, a kedv-sor alul levágva ──
   A módok rácsban (3 oszlop, nincs rejtett, oldalra görgetendő kártya); egy kártyán a két fő szám (perc, Ft) nagyobban,
   a CO₂ és a mozgás egy kisebb sorban, a kedv egy jel a név mellett (a szöveg a gomb aria-labeljében). A fejléc a Menü gomb mellett. */
@media (max-width:700px) and (orientation:portrait){
  #ngLayer { padding-top:max(8px, env(safe-area-inset-top)); }
  .ngModes { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); overflow:visible; gap:6px; padding-bottom:0; }
  .ngMode { position:relative; max-width:none; grid-template-columns:auto minmax(0, 1fr); gap:2px 4px; padding:6px 7px; align-content:start; }
  .ngMi { width:26px; height:26px; }
  .ngMode b { font-size:var(--fs-s); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .ngMode small.ngFo { font:700 var(--fs-s)/1.2 var(--body); color:var(--ink); gap:4px; }
  .ngMode small.ngFo .pic { width:15px; height:15px; }
  .ngMode small.ngMell { flex-direction:row; flex-wrap:wrap; gap:0 6px; font-size:var(--fs-xs); line-height:1.25; }
  .ngMode small.ngMood { position:absolute; top:-7px; right:-5px; width:24px; height:24px; justify-content:center; border-radius:50%;
    background:var(--sage-bg); color:var(--ink); border:2px solid var(--line); }   /* a kedv jele a kártya sarkán: a név kifér */
  .ngMode small.ngMood.is-jobb { background:var(--good-bg); color:var(--good-ink); }
  .ngMode small.ngMood.is-rosszabb { background:var(--bad-bg); color:var(--bad-ink); }
  .ngMode small.ngMood .pic { width:15px; height:15px; }
  .ngMoodSzo, .ngVitaSzo { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .ngTrip { padding:4px 10px; } .ngTo { width:40px; height:40px; flex-basis:40px; }
  .ngTags .ds-chip { padding-top:2px; padding-bottom:2px; }
  /* mérők: a pénz-cella két oszlopnyi (a „Heti útiköltség” és a keret egy sorban fér ki) – két sor a három helyett */
  .ngMeters { gap:4px 10px; } .ngPenz { grid-column:span 2; }
}
@media (max-height:560px){ .ngMeters { display:none; } }

/* ── Útközbeni esemény (js/kozlekedes-proba.js) – a próba sávja és gombja a közös .mp- elem (css/mech.css, kit 1.39.0) ── */
/* választós útközbeni esemény (2026-10-06): két lehetőség egymás alatt, a fő választás nagyobb gomb */
.ngValasz { display:flex; flex-direction:column; align-items:stretch; gap:var(--sp-2); }
.ngValasz .ds-btn, .ngValasz .ds-btn-sm { justify-content:center; min-height:var(--tap); }
.ngProba:empty { display:none; }
.ngUtKimenet { display:flex; flex-direction:column; gap:var(--sp-2); }
.ngUtKimenet:empty { display:none; }
.ngUtKimenet p { margin:0; }
.ngUtEred { display:flex; gap:6px; align-items:center; font:400 var(--fs-l)/1.1 var(--display); }
.ngUtEred.is-ok { color:var(--good-ink); } .ngUtEred.is-fail { color:var(--ink-soft); }
.ngUtEred .pic { width:24px; height:24px; }
.ngUtHatas { display:flex; flex-wrap:wrap; gap:6px; }

/* ── Az út a térképen (js/kozlekedes-3d.js, 2026-10-06): amíg a lakó úton van, a módkártyák lecsúsznak (szabad a város),
   és lent egy „Ugrás a célba” gomb jelenik meg (koppintás bárhol is átugorja). „Kevesebb mozgás”: nincs csúszás. ── */
.ngBottom { transition:opacity .2s var(--ease-out), transform .25s var(--ease-out); }
#ngLayer.is-trip .ngBottom { opacity:0; transform:translateY(32px); pointer-events:none; }
.ngSkip { position:fixed; left:0; right:0; margin:0 auto; width:max-content; bottom:max(16px, env(safe-area-inset-bottom)); z-index:var(--z-controls); box-shadow:var(--soft-sm); }
#ngLayer:not(.is-trip) .ngSkip { display:none; }
.reduce-motion .ngBottom { transition:none; }
@media (prefers-reduced-motion:reduce){ .ngBottom { transition:none; } }