/* ---------- ROOT / DESIGN SYSTEM ---------- */
:root{
  --vm-text: rgba(235,232,224,.92);
  --vm-muted: rgba(235,232,224,.65);

  --vm-gold: rgb(213,170,67);
  --vm-gold-soft: rgba(213,170,67,.55);
  --vm-gold-line: rgba(213,170,67,.30);
  --vm-gold-glow: rgba(213,170,67,.14);

  --vm-bg-panel: rgba(0,0,0,.22);
  --vm-bg-panel-strong: rgba(0,0,0,.35);

  --vm-bg-paper: linear-gradient(180deg,#fbf4d6,#e6d59b);
  --vm-paper-text: #241f12;

  --vm-bg-frame:
    radial-gradient(at 50% 30%, rgba(210,179,107,.10), rgba(0,0,0,0)),
    linear-gradient(to bottom, rgba(18,16,14,.98), rgba(14,13,12,.98));

  --vm-bdr-frame: 1px solid #3a372f;
  --vm-bdr-soft: 1px solid rgba(255,255,255,.08);

  --vm-shadow-frame:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.55),
    0 2px 4px rgba(0,0,0,.65);

  --vm-r-s: 10px;
  --vm-r-m: 14px;
  --vm-r-l: 18px;

  --vm-left-col: 260px;
  --vm-side-col: 320px;
  --vm-dossier-left: 380px;
  --vm-gap: 18px;
}

/* ---------- ICONS ---------- */
.material-symbols-outlined{
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  line-height:1;
  vertical-align:-3px;
}

/* =====================================================
   WRAPPER / GRID
   ===================================================== */
.vm-cp-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:16px;
  color:var(--vm-text);
}
.vm-cp-layout{
  display:grid;
  grid-template-columns: var(--vm-left-col) 1fr;
  gap: var(--vm-gap);
  align-items:start;
}

/* =====================================================
   LEFT HUD COLUMN
   ===================================================== */
.vm-cp-hudcol{
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* Left cards use frame look */
.vm-cp-avatarcard,
.vm-cp-portraitcard,
.vm-cp-hudstats,
.vm-cp-widgetcard{
  border-radius:var(--vm-r-l);
  background: var(--vm-bg-frame);
  border: var(--vm-bdr-frame);
  border-left-color: rgba(210,179,107,.22);
  border-right-color: rgba(210,179,107,.22);
  box-shadow: var(--vm-shadow-frame);
}

/* Avatar Card */
.vm-cp-avatarcard{
  padding:14px 12px;
  text-align:center;
}

/* AVATAR – exakt “wie oben”: Slot + Goldring am Bild */
.vm-cp-ava{
  width:150px !important;
  height:150px !important;
  margin:0 auto 12px !important;

  box-sizing:border-box !important;
  padding:6px !important;

  border-radius:50% !important;
  background: rgba(0,0,0,.42) !important;
  border: 1px solid rgba(255,255,255,.08) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.55),
    0 12px 26px rgba(0,0,0,.45) !important;

  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
}

/* MyBB-Ausgabe normalisieren */
.vm-cp-ava a,
.vm-cp-ava span{
  display:block !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
}

/* Portrait selbst */
.vm-cp-ava img{
  width:100% !important;
  height:100% !important;
  display:block !important;

  border-radius:50% !important;
  object-fit:cover !important;
  object-position:50% 30% !important;

  border:2px solid rgba(213,170,67,.92) !important;

  filter: contrast(1.03) saturate(1.03) !important;
}
.vm-cp-ava img[style]{ width:100% !important; height:100% !important; }

/* Tabs: Inventory Slots */
.vm-cp-tabs{
  display:flex;
  justify-content:center;
  gap:8px;
}
.vm-cp-tabs label{
  width:38px;
  height:38px;
  border-radius:50%;
  background: rgba(0,0,0,.28);
  border: 1px solid var(--vm-gold-line);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.vm-cp-tabs label:hover{
  transform:translateY(-1px);
  border-color: rgba(213,170,67,.85);
  box-shadow:0 0 0 2px var(--vm-gold-glow);
}

/* Portrait placeholder */
.vm-cp-portraitcard{ overflow:hidden; }
.vm-ph-rect{
  height:400px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.35);
  border:1px dashed rgba(213,170,67,.25);
  border-radius:var(--vm-r-l);
  color:var(--vm-muted);
  font-size:12px;
}

/* HUD stats */
.vm-cp-hudstats{ padding:12px; }
.vm-hudstat{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  padding:6px 0;
}
.vm-hudk{opacity:.78}
.vm-hudv{margin-left:auto;opacity:.95}

/* Widget card */
.vm-cp-widgetcard{ overflow:hidden; }
.vm-widget-head{
  padding:12px 14px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  letter-spacing:.10em;
  text-transform:uppercase;
  opacity:.86;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.18);
  text-shadow: 1px 1px 0 rgba(0,0,0,.6);
}
.vm-widget-body{padding:10px 14px 14px;}
.vm-widget-row{
  display:grid;
  grid-template-columns: 20px 1fr auto;
  gap:10px;
  align-items:center;
  padding:8px 10px;
  border-radius:var(--vm-r-s);
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.06);
  margin-top:10px;
  font-size:13px;
}
.vm-widget-row:first-child{margin-top:0;}
.vm-widget-row span:nth-child(2){opacity:.85;}
.vm-widget-row b{font-weight:900;}

/* =====================================================
   RIGHT MAIN + TABS
   ===================================================== */
.vm-cp-main{position:relative;min-width:0;}
.vm-cp-main input{display:none;}

/* Panels */
.vm-cp-panel{
  display:none;
  border-radius:var(--vm-r-l);
  background: var(--vm-bg-frame);
  border: var(--vm-bdr-frame);
  border-left-color: rgba(210,179,107,.22);
  border-right-color: rgba(210,179,107,.22);
  box-shadow: var(--vm-shadow-frame);
  overflow:hidden;
}

/* Radio-driven tabs (funktioniert NUR wenn HTML korrekt verschachtelt ist – siehe Fix oben) */
#tab-core:checked ~ .vm-tab-core,
#tab-family:checked ~ .vm-tab-family,
#tab-relations:checked ~ .vm-tab-relations,
#tab-timeline:checked ~ .vm-tab-timeline,
#tab-interview:checked ~ .vm-tab-interview{
  display:block;
}

.vm-tab-core{padding:18px;}

/* Optional: aktives Tab-Icon highlight (nur Browser mit :has – Design ändert sich nicht, nur Feedback) */
@supports selector(:has(*)){
  body:has(#tab-core:checked) .vm-cp-tabs label[for="tab-core"],
  body:has(#tab-family:checked) .vm-cp-tabs label[for="tab-family"],
  body:has(#tab-relations:checked) .vm-cp-tabs label[for="tab-relations"],
  body:has(#tab-timeline:checked) .vm-cp-tabs label[for="tab-timeline"],
  body:has(#tab-interview:checked) .vm-cp-tabs label[for="tab-interview"]{
    border-color: rgba(213,170,67,.85);
    box-shadow:0 0 0 2px var(--vm-gold-glow);
  }
}

/* =====================================================
   CORE TOP: Header left + Modules right
   ===================================================== */
.vm-core-top{
  display:grid;
  grid-template-columns: 1fr var(--vm-side-col);
  gap:16px;
  align-items:start;
  margin-bottom:16px;
}

/* Head block */
.vm-core-head{
  padding:14px 14px 12px;
  border-radius:var(--vm-r-l);
  border: var(--vm-bdr-soft);
  background: var(--vm-bg-panel);
  min-width:0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.vm-cp-name{
  margin:0;
  font-size:28px;
  font-weight:900;
  letter-spacing:.01em;
  text-shadow: 1px 1px 0 rgba(0,0,0,.6);
}

.vm-cp-subline{
  margin-top:8px;
  display:flex;
  gap:10px;
  align-items:center;
  opacity:.90;
  font-size:13px;
}
.vm-cp-pill{opacity:.95}
.vm-cp-sep{opacity:.35}

.vm-cp-usertitle{
  margin-top:6px;
  font-size:12px;
  opacity:.72;
}

.vm-cp-groupbar{
  margin-top:10px;
  display:flex;
  gap:10px;
  align-items:center;
  font-size:12px;
  opacity:.88;
}
.vm-cp-groupimg:empty,
.vm-cp-groupdesc:empty{display:none;}
.vm-cp-groupimg img{max-height:42px;display:block}

/* Side modules */
.vm-core-side{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Generic module */
.vm-mod{
  border-radius:var(--vm-r-m);
  border: var(--vm-bdr-soft);
  background: var(--vm-bg-panel);
  padding:12px;
  overflow:hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.vm-mod-head{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  letter-spacing:.10em;
  text-transform:uppercase;
  opacity:.82;
  margin-bottom:10px;
  text-shadow: 1px 1px 0 rgba(0,0,0,.6);
}
.vm-mod-body{
  font-size:12.5px;
  line-height:1.55;
  opacity:.95;
}

/* NOTE – lesbar */
.vm-mod--note{
  background: var(--vm-bg-paper);
  color: var(--vm-paper-text);
  border: 1px solid rgba(0,0,0,.35);
  box-shadow: 0 10px 22px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.55);
}
.vm-mod--note .vm-mod-head{
  opacity:1;
  color: var(--vm-paper-text);
  text-shadow:none;
}
.vm-mod--note .vm-mod-body{
  opacity:1;
  color: var(--vm-paper-text);
  text-shadow:none;
}
.vm-mod--note a{
  color:#3b2f12;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Wenn Notiz leer -> Inhalt weg (Box bleibt, damit Layout nicht springt) */
.vm-mod--note .vm-mod-note:empty{ display:none; }

/* Level */
.vm-level-num{
  font-size:28px;
  font-weight:900;
  margin:4px 0 10px;
}
.vm-xp-bar{
  height:8px;
  background:rgba(255,255,255,.12);
  border-radius:999px;
  overflow:hidden;
}
.vm-xp-fill{
  height:100%;
  background:linear-gradient(90deg,#d5aa43,#f2d27a);
}
.vm-xp-text{
  font-size:11px;
  opacity:.78;
  margin-top:8px;
}

/* =====================================================
   CORE GRID: Left stack + Right story
   ===================================================== */
.vm-core-grid{
  display:grid;
  grid-template-columns: var(--vm-dossier-left) 1fr;
  gap:16px;
  align-items:start;
  min-width:0;
}
.vm-core-left{
  display:flex;
  flex-direction:column;
  gap:16px;
  min-width:0;
}

/* Dossier panels */
.vm-box{
  border-radius:var(--vm-r-l);
  border: var(--vm-bdr-soft);
  background: var(--vm-bg-panel);
  overflow:hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.vm-box-head{
  padding:12px 14px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  letter-spacing:.10em;
  text-transform:uppercase;
  opacity:.88;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.18);
  text-shadow: 1px 1px 0 rgba(0,0,0,.6);
}

/* Steckbrief rows */
.vm-sheet{padding:10px 14px;}
.vm-row{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap:12px;
  padding:7px 0;
  border-top:1px solid rgba(255,255,255,.06);
  font-size:13px;
}
.vm-row:first-child{border-top:0}
.vm-row span{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.74;
}
.vm-row b{
  font-weight:800;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Stats */
.vm-stats{
  padding:10px 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.vm-stat{
  display:grid;
  grid-template-columns: 1fr 60px;
  align-items:center;
  padding:8px 10px;
  border-radius:var(--vm-r-s);
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.06);
  font-size:13px;
}
.vm-stat span{opacity:.85}
.vm-stat b{text-align:right;font-weight:900}

/* Bars */
.vm-bars{
  padding:10px 14px 14px;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.vm-bar{
  display:grid;
  grid-template-columns: 110px 1fr 64px;
  gap:10px;
  align-items:center;
  font-size:12px;
}
.vm-bar span{opacity:.80}
.vm-bar i{
  display:block;
  height:8px;
  background:rgba(255,255,255,.12);
  border-radius:999px;
  overflow:hidden;
}
.vm-bar i em{display:block;height:100%;background:rgba(213,170,67,.85)}
.vm-bar b{text-align:right;opacity:.92}

/* Story */
.vm-box--story{min-width:0;}
.vm-story{
  padding:14px;
  line-height:1.65;
  font-size:13px;
  min-height:260px;
}
.vm-story:empty::before{
  content:
  "KURZPORTRAIT:\A"
  "• Wer bist du?\A"
  "• Was suchst du im Spiel?\A\A"
  "OOC / ANSCHLUSS:\A"
  "• Postingtempo\A"
  "• KI-Hilfe: ja/nein\A"
  "• Anschluss gesucht: ja/nein";
  white-space:pre-line;
  opacity:.65;
  display:block;
}

/* =====================================================
   vm-meta-fold (FEHLTE vorher) – Zusatzinfos einklappbar
   ===================================================== */
details.vm-meta-fold{
  display:block;
  margin:12px 0 0;
  padding:0;
  border-top:1px solid rgba(255,255,255,.08);
}
details.vm-meta-fold > summary{
  list-style:none;
  cursor:pointer;

  display:flex;
  align-items:center;
  gap:10px;

  padding:10px 12px;
  margin:10px 0 0;

  border-radius:var(--vm-r-m);
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);

  font-size:11px;
  letter-spacing:.10em;
  text-transform:uppercase;
  opacity:.92;

  text-shadow: 1px 1px 0 rgba(0,0,0,.6);
}
details.vm-meta-fold > summary::-webkit-details-marker{ display:none; }
details.vm-meta-fold > summary:hover{
  border-color: rgba(213,170,67,.30);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 2px rgba(213,170,67,.12);
}
details.vm-meta-fold[open] > summary{
  opacity:1;
  border-color: rgba(213,170,67,.35);
}

/* Meta area */
.vm-story-meta{
  margin:10px 0 0;
  padding:12px 12px;

  border-radius:var(--vm-r-m);
  background: rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);

  opacity:1;
  font-size:12.5px;
  line-height:1.55;
  color: var(--vm-text);
  text-shadow: 1px 1px 0 rgba(0,0,0,.55);
}

/* Profilefields tables readable */
.vm-story-meta table{
  width:100%;
  border-collapse:collapse;
}
.vm-story-meta tr,
.vm-story-meta td{
  background: transparent !important;
  border:0 !important;
  color: var(--vm-text) !important;
  padding:6px 0 !important;
}
.vm-story-meta a{
  color: var(--vm-text);
  text-decoration: underline;
  text-underline-offset:2px;
}
.vm-story-meta .material-symbols-outlined{
  font-size:18px;
  opacity:.95;
  vertical-align:-3px;
}

/* =====================================================
   OTHER TABS
   ===================================================== */
.vm-tabhead{
  padding:18px;
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.18);
}
.vm-tabhead h2{margin:0;font-size:22px;font-weight:900}
.vm-tabbody{padding:18px;}

/* Admin footer */
.vm-cp-admin{
  margin-top:18px;
  text-align:center;
  font-size:12px;
  opacity:.75;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1100px){
  .vm-core-top{grid-template-columns:1fr;}
  .vm-core-grid{grid-template-columns:1fr;}
}
@media (max-width: 980px){
  .vm-cp-layout{grid-template-columns:1fr;}
}