/* jorge_inv — Körper/Skelett-Silhouette v2 (15.10.): feste Farbwerte statt CSS-Farbmischung
   und top/right/bottom/left statt der Kurzform — beides kennt das Chromium in FiveM nicht,
   die Teile blieben sonst farblos. */
/* Die alte Figur (Zonen-Leuchten + Punkte) tritt zurück, Klickflächen #jc-hits bleiben aktiv */
.char-stage #jc-silhouette, .char-stage #jc-marks { visibility: hidden; }

#jk-body {
  --sev-light: #fbbf24; --sev-medium: #ff8a2e; --sev-severe: #ef4444; --treated: #a78bfa;
  --healthy: rgba(190,194,204,.26);
  grid-area: 1 / 1; place-self: center; position: relative; z-index: 4;   /* über #jc-hits (3) */
  height: 98%; aspect-ratio: 436 / 1100; max-width: 100%; pointer-events: none;
}
#inv-root #jk-body { height: 100% !important; max-height: 500px; width: auto !important; aspect-ratio: 436 / 1100; max-width: 100%; }

/* Körper: jedes Teil = Silhouette (Maske) zugeschnitten auf seinen Bereich */
#jk-body .jk-segs, #jk-body .jk-skel { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; }
#jk-body .jk-base {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  -webkit-mask: url(assets/body_silhouette.png) no-repeat center / 100% 100%;
          mask: url(assets/body_silhouette.png) no-repeat center / 100% 100%;
  background: linear-gradient(180deg, rgba(190,194,204,.3), rgba(120,124,134,.2));
  transition: background .25s;
}
#jk-body[data-mode="skelett"] .jk-base { background: rgba(190,194,204,.1); }
#jk-body .jk-seg {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  -webkit-mask: url(assets/body_silhouette.png) no-repeat center / 100% 100%;
          mask: url(assets/body_silhouette.png) no-repeat center / 100% 100%;
  background: transparent;   /* gesund = Grundfigur scheint durch */
  transition: background .3s var(--ease, ease), opacity .3s;
  pointer-events: auto; cursor: pointer;   /* clip-path begrenzt die Klickfläche aufs Teil */
}
#jk-body .jk-seg.blink { animation: jkBlink .26s ease-in-out 2; }
@keyframes jkBlink { 50% { filter: brightness(1.7); } }
#jk-body .jk-seg[data-state="light"]   { background: linear-gradient(180deg, var(--sev-light), #b08619); }
#jk-body .jk-seg[data-state="medium"]  { background: linear-gradient(180deg, var(--sev-medium), #b36120); }
#jk-body .jk-seg[data-state="severe"]  { background: linear-gradient(180deg, var(--sev-severe), #a32e2e); }
#jk-body .jk-seg[data-state="treated"] { background: linear-gradient(180deg, var(--treated), #6e5ca5); }

/* Skelett */
#jk-body .jk-skel { opacity: 0; transition: opacity .25s var(--ease, ease); }
#jk-body .jk-bone { fill: none; stroke: #d9dce3; stroke-linecap: round; stroke-linejoin: round; opacity: .62; }
#jk-body .jk-bone .fill { fill: #d9dce3; stroke: none; }
#jk-body .jk-bone[data-state="broken"]   { stroke: var(--sev-severe); opacity: 1; filter: drop-shadow(0 0 6px rgba(239,68,68,.75)); }
#jk-body .jk-bone[data-state="broken"] .fill { fill: var(--sev-severe); }
#jk-body .jk-bone[data-state="splinted"] { stroke: var(--treated); opacity: 1; filter: drop-shadow(0 0 5px rgba(167,139,250,.6)); }
#jk-body .jk-bone[data-state="splinted"] .fill { fill: var(--treated); }
#jk-body[data-mode="skelett"] .jk-skel { opacity: 1; }
#jk-body[data-mode="skelett"] .jk-seg { background: transparent !important; }

/* Legende unter der Figur */
#jk-body .jk-legend {
  position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%);
  display: flex; gap: 12px; white-space: nowrap;
  font: 600 10px var(--font, Inter, sans-serif); color: var(--text-mid, #a8a8b0);
}
#jk-body .jk-legend span { display: inline-flex; align-items: center; gap: 5px; }
#jk-body .jk-legend span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
#jk-body .jk-legend .sev-light { --c: var(--sev-light); }
#jk-body .jk-legend .sev-medium { --c: var(--sev-medium); }
#jk-body .jk-legend .sev-severe { --c: var(--sev-severe); }
#jk-body .jk-legend .treated { --c: var(--treated); }
#jk-body[data-mode="skelett"] .jk-legend .sev-light,
#jk-body[data-mode="skelett"] .jk-legend .sev-medium { display: none; }
#jk-body[data-mode="skelett"] .jk-legend .sev-severe { font-size: 0; }
#jk-body[data-mode="skelett"] .jk-legend .sev-severe::after { content: 'Bruch'; font-size: 10px; }
#jk-body[data-mode="skelett"] .jk-legend .treated { font-size: 0; }
#jk-body[data-mode="skelett"] .jk-legend .treated::after { content: 'Geschient'; font-size: 10px; }

/* Umschalter im Spaltenkopf (Form wie „Ansicht“) */
.jk-mode { margin-left: auto; display: inline-flex; gap: 2px; }
.jk-mode + .arms-open-btn, #inv-root .jk-mode + .arms-open-btn { margin-left: 6px !important; }
.jk-mode button {
  height: 28px; padding: 0 12px; border: none; border-radius: 0; cursor: pointer;
  background: rgba(255,255,255,.05); color: var(--text-mid, #a8a8b0);
  font: 600 11px var(--font, Inter, sans-serif);
  clip-path: var(--pg, polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%));
  transition: background .14s, color .14s;
}
.jk-mode button:hover { color: var(--text, #f5f5f7); background: rgba(255,255,255,.1); }
.jk-mode button.on { color: #fff; background: var(--accent-grad, linear-gradient(100deg,#da6652,#e2199a 68%,#8b2fd6)); }