/* ── #vitals tömörítés: EGY kompakt, vízszintesen görgethető sor ───────── */
#vitals{ display:flex!important; flex-wrap:nowrap!important; overflow-x:auto; overflow-y:hidden;
  gap:.5rem!important; padding-block:.2rem!important; scrollbar-width:thin; align-items:center; }
#vitals::-webkit-scrollbar{ height:5px }
#vitals .vital{ flex:0 0 auto!important; }
#vitals .vital-bar{ max-width:52px }
@media(max-width:600px){ #vitals .vital{ font-size:.78rem } #vitals .vital-bar{ max-width:40px } }

/* U-871 (2026-09-08, user: "el van csuszva tovabbra is", képpel: a sáv a
   karakter nevével együtt balra kicsúszva, a jobb szélén a teljes dátummal)
   -- OK: a fenti szabály EGY, nem tördelődő, vízszintesen GÖRGETHETŐ sorrá
   tette a #vitals-t. A tartalom ~1463px, tehát nagyításnál/keskenyebb
   ablaknál nem fér ki, és elég egy véletlen oldalirányú görgetés
   (trackpad-gesztus vagy Shift+görgő a sáv fölött), hogy a csík elgörgetve
   MARADJON -- onnantól a bal széle (a karakter neve, Tp) nem látszik, és
   ez "elcsúszásnak" tűnik. Semmi nem állította vissza.
   Megoldás: inkább TÖRDELŐDJÖN, mint hogy elcsússzon -- így mindig minden
   látszik, és nincs olyan oldalirányú görgetés-állapot, amiben beragadhat.
   (A `visible` mindkét tengelyen kell: a `visible` + `hidden` keverést a
   böngésző `auto`-ra írná át, és visszajönne a görgetés.) */
#vitals{ flex-wrap:wrap!important; overflow:visible!important; row-gap:.15rem!important; }

/* ── #journeyGuide (Kalandút + status-chipek) tömörítés (#539/3) ───────── */
#journeyGuide{ font-size:.82rem!important; gap:.3rem .55rem!important; padding-block:.3rem!important; row-gap:.25rem!important }
#journeyGuide .journey-steps{ gap:.45rem }
#journeyGuide .journey-statebar{ gap:.35rem .5rem; font-size:.74rem }
  .header-account{ display:flex!important; align-items:center!important; flex-wrap:wrap!important; gap:.4rem!important; justify-content:flex-end!important; }

@media(max-width:600px){ #journeyGuide{ font-size:.76rem!important } #journeyGuide .journey-statebar{ font-size:.7rem } }

/* ── Menü-pozicionálás (2026-09-06, KÉTFORDULÓS javítás) ─────────────────
   1. forduló: MINDHÁROM rendszert (.mx-um-panel/.mx-scene-panel/.mx-si-
      panel) középre igazított modállá alakítottam. A user visszajelzése:
      a beágyazott Jelenet-almenü ETTŐL lett jobb (nem volt neki értelmes
      "horgony" pontja, mióta a trigger a Játék-menü BELSEJÉBEN él), DE a
      FŐMENÜK (Játék/Tudástár/stb.) korábban jól, a saját trigger-gombjuk
      ALATT nyíltak -- a középre-kényszerítés ezeknél "kicsúszást"
      okozott (user: "a fomenu kicsuszott a helyerol").
   2. forduló: szétválasztva. A FŐSZINTŰ menük (.mx-um-panel/.mx-si-panel,
      mindkettő közvetlenül egy fejléc-gombhoz tartozik, ÉRTELMES a
      horgony) visszakapják a trigger-gombhoz igazított pozicionálást
      (csak szélesebbre véve, ez maradt a "nagyobb ablak" kérésből). A
      BEÁGYAZOTT .mx-scene-panel (aminek NINCS értelmes horgonya, mert a
      sajsome trigger-je egy másik, záródó panel belsejében ül) MARAD a
      középre igazított modál -- ez a tényleges hibás eset. */
.mx-menu-backdrop{position:fixed; inset:0; z-index:10001; background:rgba(0,0,0,.5)}
.mx-menu-backdrop[hidden]{display:none}
.mx-um-panel, .mx-si-panel{
  position:fixed; z-index:10002;
  width:min(360px,92vw); max-height:82vh; overflow:auto;
  background:var(--panel,#efe6d0); color:var(--text,#2a2320);
  border:1px solid var(--border,#c9b892); border-radius:12px;
  box-shadow:0 14px 40px rgba(0,0,0,.5); padding:6px;
}

/* ── jelenet-toolbar: a 🎬 legördülő panel -- KÖZÉPRE igazított modál marad,
   l. fenti megjegyzés ─────────────────────────────────────────────────── */
.mx-scene-drop{position:relative;display:inline-flex}
.mx-scene-panel{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:10003; width:min(440px,92vw); max-height:82vh; overflow:auto;
  background:var(--panel,#efe6d0); color:var(--text,#2a2320);
  border:1px solid var(--border,#c9b892); border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.55); padding:10px;
  display:flex;flex-direction:column;gap:8px;
}
.mx-scene-panel[hidden]{display:none}
.mx-scene-panel > label,.mx-scene-panel > .scene-toolbar-item{display:flex;align-items:center;gap:6px;margin:0;font-size:.88rem}
.mx-scene-panel select{flex:1}
/* JAVÍTÁS (2026-09-06, user hibajelentés: "a jelenet almenu csúful jelenik
   meg") -- a panelnek eddig NEM volt sem címe, sem ✕ gombja, ezért a beágyazott
   .mx-scene-trg klikkje után (ami a szülő "Játék" .mx-um-panel-en BELÜL él, az
   pedig a klikk után bezáródik) a doboz kontextus/keret nélkül, "elárvultan"
   jelent meg a képernyőn. Egyértelmű fejléc + bezáró gomb ad neki vizuális
   azonosságot, ugyanúgy mint a többi modálnak (pl. #campaignLibraryX mintája). */
.mx-scene-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:6px;margin-bottom:2px;border-bottom:1px solid var(--border-dim,#e0cfa0);font-weight:600;font-size:.85rem}
.mx-scene-panel-x{background:none;border:none;cursor:pointer;font-size:1rem;line-height:1;color:var(--dim,#8a7d63);padding:2px 4px}
.mx-scene-panel-x:hover{color:var(--text,#2a2320)}