/* ============================================================
   LIVE-ERWEITERUNG jorge_inv (portiert aus /jorge_inv_mockup):
   JC-Silhouette + JC-Slot-Optik + Medic-Zonen im Town-Design.
   ============================================================ */

/* NUI-Hinweis: Klickflächen/Panels brauchen pointer-events auto —
   der NUI-body steht auf none (siehe style.css) */
.jc-hit, .acc-btn, .acc-flyout, .acc-flyout * { pointer-events: auto; }

/* ============================================================
   Silhouette: JC body_silhouette.png als Maske in der Town-Stage.
   Beide Layer (Maske + Klickflächen) liegen exakt übereinander:
   gleiche Höhe, gleiches (leicht schlankeres) Seitenverhältnis.
   PNG ist 485x1100; 0.9-facher Breitenfaktor = schlankere Figur,
   damit die Proportionen zur Town-Charakterspalte passen.
   ============================================================ */
.char-stage { display: grid; place-items: center; }
.stage-aura { display: none; }   /* dashed Ellipse stört hinter der Maske */

#jc-silhouette,
#jc-hits {
    grid-area: 1 / 1;
    place-self: center;
    height: 98%;
    aspect-ratio: 436 / 1100;    /* 485 * 0.9 -> leicht schlanker */
    max-width: 100%;
    position: relative;
    z-index: 1;
}

#jc-silhouette {
    background: linear-gradient(180deg, rgba(180,184,194,.34), rgba(120,124,134,.22));
    -webkit-mask: url(assets/body_silhouette.png) no-repeat center;
    mask: url(assets/body_silhouette.png) no-repeat center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    filter: drop-shadow(0 0 16px rgba(0,0,0,.35));
    pointer-events: none;
    transition: background .4s ease, filter .4s ease;
}

/* ---------- Medic-Zonen (Geometrie 1:1 aus jc_inventory) ---------- */
.zone-fx {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, filter .25s ease;
}
.zone-fx[data-part="head"]   { left: 32%;   top: -2%;  width: 36%; height: 20%; }
.zone-fx[data-part="torso"]  { left: 24%;   top: 12%;  width: 52%; height: 44%; }
.zone-fx[data-part="arm_r"]  { left: 9.5%;  top: 16%;  width: 18%; height: 42%; transform: rotate(8deg); }
.zone-fx[data-part="arm_l"]  { left: 72.5%; top: 16%;  width: 18%; height: 42%; transform: rotate(-8deg); }
.zone-fx[data-part="hand_r"] { left: -1%;   top: 51%;  width: 20%; height: 13%; }
.zone-fx[data-part="hand_l"] { left: 81%;   top: 51%;  width: 20%; height: 13%; }
.zone-fx[data-part="leg_r"]  { left: 26%;   top: 55%;  width: 23%; height: 41%; }
.zone-fx[data-part="leg_l"]  { left: 51%;   top: 55%;  width: 23%; height: 41%; }
.zone-fx[data-part="foot_r"] { left: 23%;   top: 91%;  width: 19%; height: 10%; }
.zone-fx[data-part="foot_l"] { left: 62%;   top: 91%;  width: 19%; height: 10%; }

/* Verletzungs-Färbung je Schweregrad (Farben wie die alten Wound-Dots):
   leicht/mittel = orange, schwer = rot (pulsiert wie in jc_medical) */
.zone-fx.sev-light {
    opacity: .7;
    background: radial-gradient(ellipse closest-side at 50% 50%,
        rgba(251,191,36,.9), rgba(251,191,36,.32) 58%, transparent 80%);
}
.zone-fx.sev-medium {
    opacity: .8;
    background: radial-gradient(ellipse closest-side at 50% 50%,
        rgba(255,138,46,.95), rgba(255,138,46,.35) 58%, transparent 80%);
}
.zone-fx.sev-severe {
    opacity: .85;
    background: radial-gradient(ellipse closest-side at 50% 50%,
        rgba(239,68,68,.98), rgba(239,68,68,.4) 58%, transparent 80%);
    animation: jcWoundPulse 1.1s ease-in-out infinite;
}
@keyframes jcWoundPulse {
    0%, 100% { opacity: .55; filter: brightness(.95); }
    50%      { opacity: 1;   filter: brightness(1.3); }
}

/* Klick-Feedback: Körperteil blinkt kurz auf */
.zone-fx.blink { animation: jcZoneBlink .28s ease-in-out 3 !important; }
@keyframes jcZoneBlink {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(2.1); opacity: 1; }
}

/* Altes Wound-Overlay (Dots + Sprechblasen-Tooltip aus dem Live-Script)
   exakt auf die Silhouetten-Box pinnen (pinOverlay greift ohne .char-svg nicht) */
.char-stage .wound-overlay {
    grid-area: 1 / 1;
    place-self: center;
    position: relative;
    height: 98%;
    aspect-ratio: 436 / 1100;
    max-width: 100%;
    z-index: 5;
    pointer-events: none !important;   /* sonst schluckt das Overlay die Zonen-Klicks */
}
/* Verletzungs-DOTS unsichtbar: Visualisierung läuft nur noch über die Zonen.
   (Elemente bleiben im DOM — die Sprechblase wird per Klick-Weiterleitung geöffnet) */
.wound-overlay .wound { display: none; }

/* ---------- Klickflächen: UNSICHTBAR (kein Hover-Kästchen!) ---------- */
#jc-hits { z-index: 3; }
.jc-hit {
    position: absolute;
    cursor: pointer;
    background: transparent;
}
.jc-hit:hover { background: transparent; }
.jc-hit[data-part="head"]   { left: 32%; top: 0%;   width: 36%; height: 14%; }
.jc-hit[data-part="torso"]  { left: 27%; top: 14%;  width: 46%; height: 40%; }
.jc-hit[data-part="arm_r"]  { left: 8%;  top: 16%;  width: 19%; height: 34%; }
.jc-hit[data-part="arm_l"]  { left: 73%; top: 16%;  width: 19%; height: 34%; }
.jc-hit[data-part="hand_r"] { left: 1%;  top: 51%;  width: 17%; height: 11%; }
.jc-hit[data-part="hand_l"] { left: 82%; top: 51%;  width: 17%; height: 11%; }
.jc-hit[data-part="leg_r"]  { left: 27%; top: 55%;  width: 22%; height: 35%; }
.jc-hit[data-part="leg_l"]  { left: 51%; top: 55%;  width: 22%; height: 35%; }
.jc-hit[data-part="foot_r"] { left: 24%; top: 90%;  width: 18%; height: 9%; }
.jc-hit[data-part="foot_l"] { left: 61%; top: 90%;  width: 18%; height: 9%; }

/* ============================================================
   Cloth-Slots im JC-Kachel-Look (Markup/IDs unverändert,
   das Live-Script füllt sie weiter über applyEquipped).
   Spezifität bewusst über den Live-Regeln (.char-arena-Prefix).
   ============================================================ */
.char-arena .cloth-slot,
.acc-flyout .cloth-slot {
    background: rgba(0,0,0,.36);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 8px;
    transition: border-color .15s ease, transform .1s ease;
}
.char-arena .cloth-slot:hover,
.acc-flyout .cloth-slot:hover {
    border-color: var(--accent, #da6652);
    background: rgba(0,0,0,.36);
    transform: translateY(-1px);
    box-shadow: none;
}
.char-arena .cloth-slot.empty,
.acc-flyout .cloth-slot.empty {
    border: 1px dashed rgba(255,255,255,.14);
    background: rgba(0,0,0,.24);
}
.char-arena .cloth-slot.empty:hover,
.acc-flyout .cloth-slot.empty:hover { border-color: var(--accent, #da6652); }

/* Belegt: JC-Kachel (dunkle Karte + Coral-Kante links) statt Farbverlauf-Chip */
.char-arena .cloth-slot:not(.empty),
.acc-flyout .cloth-slot:not(.empty) {
    border: 1px solid rgba(255,255,255,.10);
    border-left: 3px solid var(--accent, #da6652);
    background: linear-gradient(180deg, rgba(38,34,40,.95), rgba(22,20,26,.95));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 4px rgba(0,0,0,.5);
}
.char-arena .cloth-slot:not(.empty) .cs-ico,
.acc-flyout .cloth-slot:not(.empty) .cs-ico { filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); }
.char-arena .cloth-slot:not(.empty) .cs-lab,
.acc-flyout .cloth-slot:not(.empty) .cs-lab { color: #a8a8b0; font-weight: 700; }

/* Item-Label: schlichter grauer Text statt Magenta-Gradient-Chip */
.char-arena .cloth-slot .cs-eq,
.acc-flyout .cloth-slot .cs-eq {
    background: none;
    color: #a8a8b0;
    padding: 0 2px;
    margin-top: 1px;
}

/* ---------- Medic-Legende + Demo-Steuerung (nur Mockup) ---------- */
.jc-medbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 12px 8px;
}
.jc-legend { display: flex; gap: 10px; }
.leg-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 600;
    color: #a8a8b0;
}
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-pain     { background: #fbbf24; box-shadow: 0 0 6px rgba(251,191,36,.6); }
.dot-wound    { background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,.6); animation: jcWoundPulse 1s ease-in-out infinite; }
.dot-fracture { background: #60a5fa; box-shadow: 0 0 6px rgba(96,165,250,.6); }

.jc-demo-btns { display: flex; gap: 6px; }
.jc-demo {
    font: 700 10px/1 'Inter', sans-serif;
    letter-spacing: .08em;
    color: #a8a8b0;
    background: rgba(0,0,0,.36);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 6px;
    padding: 6px 9px;
    cursor: pointer;
    transition: all .15s ease;
}
.jc-demo:hover { border-color: var(--accent, #da6652); color: #f5f5f7; }
.jc-demo[data-on="1"] {
    background: rgba(218,102,82,.14);
    border-color: var(--accent, #da6652);
    color: var(--accent, #da6652);
}
.jc-demo.ghost { opacity: .75; }

/* ============================================================
   Slot-Umbau: Hauptslots (Hut/T-Shirt/Jacke | Hose/Schuhe/Unterhemd)
   + ACCESSOIRES-Button mit Flyout (Brille/Maske/Kette/Ohrring/Uhr/Extras)
   ============================================================ */
.char-arena { position: relative; }
.char-arena .slots-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
}
.char-arena .slots-col .cloth-slot { flex: 0 0 84px; }

/* ACCESSOIRES-Button (gleiche Kachel-Optik, Akzent-Icon) */
.acc-btn {
    flex: 0 0 84px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: rgba(0,0,0,.36);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .1s ease;
    padding: 4px 2px;
}
.acc-btn .acc-ico {
    width: 22px;
    height: 22px;
    color: #a8a8b0;
    transition: color .15s ease;
}
.acc-btn .acc-ico svg { width: 100%; height: 100%; }
.acc-btn .cs-lab {
    font-family: 'JetBrains Mono', monospace;
    font-size: 6.5px;
    color: #5a5a64;
    letter-spacing: .08em;
}
.acc-btn:hover { border-color: var(--accent, #da6652); transform: translateY(-1px); }
.acc-btn:hover .acc-ico { color: var(--accent, #da6652); }
.acc-btn.open {
    border-color: var(--accent, #da6652);
    background: rgba(218,102,82,.14);
}
.acc-btn.open .acc-ico, .acc-btn.open .cs-lab { color: var(--accent, #da6652); }

/* Angedocktes ACCESSOIRES-Panel: hängt rechts am Inventar-Fenster,
   Toggle über den Button in der rechten Slot-Spalte */
.inv-card { overflow: visible !important; }   /* Panel ragt rechts raus */
.acc-flyout {
    position: absolute;
    left: 100%;
    top: -1px;                     /* Border-Linien der Karte exakt fortführen */
    bottom: -1px;
    width: 208px;
    z-index: 20;
    background: var(--bg, rgba(14,14,18,.92));
    border: 1px solid var(--line-mid, rgba(255,255,255,.14));
    border-left: 1px solid var(--line, rgba(255,255,255,.07));
    border-radius: 0 6px 6px 0;
    box-shadow: 24px 24px 60px rgba(0,0,0,.45);
    padding: 14px 12px;
    animation: accIn .2s cubic-bezier(.2,.8,.2,1);
}
/* Panel offen -> Karte rechts eckig, beide wirken wie EINE Card */
.inv-card.acc-open {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.acc-flyout.hidden { display: none; }
@keyframes accIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.acc-head {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    color: #a8a8b0;
    margin: 2px 2px 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.acc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 84px;
    gap: 8px;
}
.acc-grid .cloth-slot { width: 100%; height: 84px; }

/* ============================================================
   Feinschliff-Runde: Slots entlang der Silhouette sortiert,
   Panel-Anker, Gender-Chip neben dem Namen, kompakte Tasche
   ============================================================ */
/* Panel dockt an der Karte an — KEIN position-Override: die Live-UI
   positioniert die Karte selbst (Drag/Größe via style.left/top) */
/* Slot-Spalten: absolut sortiert auf Körperhöhe (Kopf -> Füße) */
.char-arena .slots-col { position: relative; }
.char-arena .slots-col .cloth-slot,
.char-arena .slots-col .acc-btn {
    position: absolute;
    left: 0;
    right: 0;
    height: 84px;
    flex: none;
}
.slots-left  .cloth-slot[data-slot="hat"]        { top: 0; }
.slots-left  .cloth-slot[data-slot="top"]        { top: 27%; }
.slots-left  .cloth-slot[data-slot="vest"]       { top: 52%; }
.slots-right .acc-btn                            { top: 0; }
.slots-right .cloth-slot[data-slot="undershirt"] { top: 27%; }
.slots-right .cloth-slot[data-slot="pants"]      { top: 56%; }
.slots-right .cloth-slot[data-slot="shoes"]      { bottom: 0; }

/* Gender-Symbol direkt neben dem Namen */
.col-char .char-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
.col-char .char-title h2 { margin: 0; }

/* Tasche kompakt -> mehr Platz für die Silhouette */
.col-char .bag-slot {
    margin: 4px 10px 8px;
    padding: 5px 10px;
    grid-template-columns: 30px 1fr auto;
    gap: 8px;
}
.col-char .bag-slot .bag-ico { width: 26px; height: 26px; }
.col-char .bag-slot .bag-ico svg { width: 20px; height: 20px; }
.col-char .bag-slot .bag-lab { font-size: 8px; }
.col-char .bag-slot .bag-eq { font-size: 10px; }
.col-char .bag-slot .bag-bonus { font-size: 10px; padding: 2px 7px; }

/* ============================================================
   Rucksack als normaler Seiten-Slot (links unten, gleiche Größe)
   ============================================================ */
.char-arena .slots-col .bag-slot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 84px;
    margin: 0;
    padding: 4px 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: rgba(0,0,0,.36);
    border: 1px solid rgba(255,255,255,.10);
    border-left: 3px solid var(--accent, #da6652);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .15s ease, transform .1s ease;
}
.char-arena .slots-col .bag-slot:hover { border-color: var(--accent, #da6652); transform: translateY(-1px); }
.char-arena .slots-col .bag-slot.empty {
    border: 1px dashed rgba(255,255,255,.14);
    background: rgba(0,0,0,.24);
}
.char-arena .slots-col .bag-slot .bag-ico {
    width: auto;
    height: auto;
    color: #a8a8b0;
    background: none;
    border: none;
}
.char-arena .slots-col .bag-slot.empty .bag-ico { opacity: .4; }
.char-arena .slots-col .bag-slot .bag-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 0;
    max-width: 100%;
}
.char-arena .slots-col .bag-slot .bag-lab {
    font-family: 'JetBrains Mono', monospace;
    font-size: 6.5px;
    letter-spacing: .08em;
    color: #5a5a64;
}
.char-arena .slots-col .bag-slot .bag-eq {
    font-size: 8.5px;
    color: #a8a8b0;
    max-width: 76px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.char-arena .slots-col .bag-slot .bag-bonus {
    position: absolute;
    top: 3px;
    right: 4px;
    font-size: 7.5px;
    padding: 1px 4px;
    border-radius: 3px;
    background: rgba(52,211,153,.12);
    border: 1px solid rgba(52,211,153,.4);
    color: #34d399;
}

/* ============================================================
   JC-Look-Runde: kantigere Ecken (nur leicht abgerundet, wie
   Jorge City ~4-6px), Slots komplett überarbeitet, Rucksack
   reduziert, Header ohne Logo
   ============================================================ */

/* --- Radien global runter --- */
.inv-card { border-radius: 6px; }
.icon-btn, .x-close { border-radius: 4px; }
.tilecol .tile { border-radius: 4px; }
.col-items .item, .item-list .item { border-radius: 4px; }
.arms-open-btn { border-radius: 4px; }
.wound-tooltip { border-radius: 6px; }
.keys-item, .wallet-item { border-radius: 4px; }

/* --- Slots (Kleidung/Accessoires/Rucksack/Button): JC-Kachel v2 --- */
.char-arena .cloth-slot,
.acc-flyout .cloth-slot,
.char-arena .slots-col .bag-slot,
.char-arena .slots-col .acc-btn {
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(0,0,0,.30));
    border: 1px solid rgba(255,255,255,.09);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 1px 3px rgba(0,0,0,.4);
}
.char-arena .cloth-slot:hover,
.acc-flyout .cloth-slot:hover,
.char-arena .slots-col .bag-slot:hover,
.char-arena .slots-col .acc-btn:hover {
    border-color: var(--accent, #da6652);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 3px 8px rgba(0,0,0,.5);
}

/* leer: dezent gestrichelt, großes ruhiges Plus */
.char-arena .cloth-slot.empty,
.acc-flyout .cloth-slot.empty,
.char-arena .slots-col .bag-slot.empty {
    background: rgba(0,0,0,.16);
    border: 1px dashed rgba(255,255,255,.13);
    box-shadow: none;
}
.char-arena .cloth-slot.empty .cs-ico,
.acc-flyout .cloth-slot.empty .cs-ico {
    font-size: 17px;
    font-weight: 300;
    color: rgba(255,255,255,.22);
    opacity: 1;
    filter: none;
}
.char-arena .cloth-slot.empty .cs-lab,
.acc-flyout .cloth-slot.empty .cs-lab { color: #4a4a54; }

/* belegt: dunkle Karte, Coral-Kante, Icon mit Tiefe, klare Typo */
.char-arena .cloth-slot:not(.empty),
.acc-flyout .cloth-slot:not(.empty),
.char-arena .slots-col .bag-slot:not(.empty) {
    border-left: 3px solid var(--accent, #da6652);
    background: linear-gradient(180deg, rgba(44,40,46,.96), rgba(24,22,28,.96));
}
.char-arena .cloth-slot:not(.empty) .cs-ico,
.acc-flyout .cloth-slot:not(.empty) .cs-ico {
    font-size: 24px;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.75));
}
.char-arena .cloth-slot .cs-lab,
.acc-flyout .cloth-slot .cs-lab { font-size: 7px; letter-spacing: .1em; }
.char-arena .cloth-slot:not(.empty) .cs-lab,
.acc-flyout .cloth-slot:not(.empty) .cs-lab { color: #8f8f98; }
.char-arena .cloth-slot .cs-eq,
.acc-flyout .cloth-slot .cs-eq {
    font-size: 8px;
    color: #c9c9d0;
    max-width: 90%;
}

/* Ausziehen-x dezenter */
.char-arena .cloth-slot .ws-clear,
.acc-flyout .cloth-slot .ws-clear,
.char-arena .slots-col .bag-slot .ws-clear { border-radius: 3px; }

/* --- Rucksack: WENIGER Info -> nur Icon + Label + Bonus-Badge --- */
.char-arena .slots-col .bag-slot .bag-eq { display: none; }
.char-arena .slots-col .bag-slot .bag-lab {
    font-size: 7px;
    letter-spacing: .1em;
    color: #8f8f98;
}
.char-arena .slots-col .bag-slot.empty .bag-lab { color: #4a4a54; }
.char-arena .slots-col .bag-slot .bag-ico { color: #c9c9d0; }
.char-arena .slots-col .bag-slot .bag-bonus { border-radius: 3px; }
.char-arena .slots-col .bag-slot.empty .bag-bonus { display: none; }

/* --- ACCESSOIRES-Button: klarer Toggle-Look --- */
.acc-btn .cs-lab { font-size: 6.5px; }
.acc-btn.open {
    border-left: 3px solid var(--accent, #da6652);
    background: linear-gradient(180deg, rgba(60,38,36,.95), rgba(34,24,24,.95));
}

/* Header ohne Logo: Drag-Punkte + Text reichen */
.brand { gap: 10px; }

/* ============================================================
   Runde 3: kompakte Slots (kein Platzverlust), Login-Farben
   (Coral -> PINK #e2199a -> Lila), VITALITY-Panel mit EKG
   ============================================================ */

/* --- Slots dicht stapeln statt entlang der Silhouette verteilen --- */
.char-arena .slots-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 6px;
}
.char-arena .slots-col .cloth-slot,
.char-arena .slots-col .acc-btn,
.char-arena .slots-col .bag-slot {
    position: static;
    height: 72px;
    flex: 0 0 72px;
}

/* --- Login-Farbwelt: Kanten als Coral->Pink-Verlauf, States pink --- */
.char-arena .cloth-slot:not(.empty),
.acc-flyout .cloth-slot:not(.empty),
.char-arena .slots-col .bag-slot:not(.empty) {
    border-left: 1px solid rgba(255,255,255,.09);   /* Verlauf übernimmt die Kante */
    position: relative;
    overflow: hidden;
}
.char-arena .cloth-slot:not(.empty)::before,
.acc-flyout .cloth-slot:not(.empty)::before,
.char-arena .slots-col .bag-slot:not(.empty)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #da6652, #e2199a 70%, #8b2fd6);
}
.char-arena .cloth-slot:hover,
.acc-flyout .cloth-slot:hover,
.char-arena .slots-col .bag-slot:hover,
.char-arena .slots-col .acc-btn:hover {
    border-color: #e2199a;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 0 10px rgba(226,25,154,.22);
}
.char-arena .slots-col .acc-btn.open {
    border: 1px solid #e2199a;
    border-left: 1px solid rgba(255,255,255,.09);
    background: rgba(226,25,154,.10);
    position: relative;
    overflow: hidden;
}
.char-arena .slots-col .acc-btn.open::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #da6652, #e2199a 70%, #8b2fd6);
}
.char-arena .slots-col .acc-btn.open .acc-ico,
.char-arena .slots-col .acc-btn.open .cs-lab { color: #e2199a; }

/* --- VITALITY-Panel: EKG + Vitalwerte --- */
.vit-ekg {
    position: relative;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 4px;
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 14px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 14px),
        rgba(0,0,0,.30);
    padding: 6px 4px 2px;
    margin-bottom: 12px;
    overflow: hidden;
}
.vit-ekg svg { display: block; width: 100%; height: 52px; }
.ekg-line {
    stroke-dasharray: 460;
    stroke-dashoffset: 460;
    animation: ekgDraw 2.6s linear infinite;
    filter: drop-shadow(0 0 4px rgba(226,25,154,.55));
}
@keyframes ekgDraw {
    0%   { stroke-dashoffset: 460; }
    70%  { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; }
}
.vit-bpm {
    position: absolute;
    top: 5px;
    right: 7px;
    font-size: 9px;
    font-weight: 700;
    color: #e2199a;
    letter-spacing: .08em;
    animation: vitPulse 1s ease-in-out infinite;
}
@keyframes vitPulse { 50% { opacity: .55; } }

.vit-stats { display: flex; flex-direction: column; gap: 9px; }
.vit-row { display: flex; flex-direction: column; gap: 3px; }
.vit-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.vit-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .1em;
    color: #a8a8b0;
}
.vit-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    color: #f5f5f7;
}
.vit-bar {
    height: 5px;
    border-radius: 2px;
    background: rgba(255,255,255,.06);
    overflow: hidden;
}
.vit-bar i {
    display: block;
    height: 100%;
    border-radius: 2px;
    transition: width .4s ease;
}

/* Fix: alte Sortier-Offsets neutralisieren (top/bottom wirken auch bei
   position:relative und haben die dicht gestapelten Slots verschoben) */
.char-arena .slots-col .cloth-slot,
.char-arena .slots-col .acc-btn,
.char-arena .slots-col .bag-slot {
    top: auto !important;
    bottom: auto !important;
}

/* ============================================================
   Runde 4: Spalten voll ausnutzen (Slots wachsen mit), Slot-
   Design v3 (großes Icon, Label als Bodenleiste), Toggle-Paar
   ============================================================ */

/* Breitere Spalten, Slots füllen die KOMPLETTE Höhe (kein Leerraum) */
.char-arena { grid-template-columns: 88px 1fr 88px; }
.char-arena .slots-col { gap: 8px; }
.char-arena .slots-col .cloth-slot,
.char-arena .slots-col .bag-slot,
.char-arena .slots-col .vt-pair {
    height: auto !important;
    flex: 1 1 0 !important;
    min-height: 0;
}

/* --- Tile-Innenleben: großes Icon mittig, Label als Bodenleiste --- */
.char-arena .cloth-slot,
.acc-flyout .cloth-slot,
.char-arena .slots-col .bag-slot {
    padding: 0 0 16px;
    gap: 0;
    justify-content: center;
}
.char-arena .cloth-slot .cs-ico,
.acc-flyout .cloth-slot .cs-ico {
    font-size: 30px;
    margin: 0;
}
.char-arena .cloth-slot .cs-ico svg,
.acc-flyout .cloth-slot .cs-ico svg,
.char-arena .cloth-slot .cs-ico img,
.acc-flyout .cloth-slot .cs-ico img {
    width: 34px;
    height: 34px;
}
.char-arena .cloth-slot.empty .cs-ico,
.acc-flyout .cloth-slot.empty .cs-ico { font-size: 22px; }

.char-arena .cloth-slot .cs-lab,
.acc-flyout .cloth-slot .cs-lab {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 3px 2px;
    background: rgba(0,0,0,.45);
    border-top: 1px solid rgba(255,255,255,.05);
    font-size: 7px;
    letter-spacing: .12em;
    text-align: center;
}
/* Item-Name im Tile weg -> ruhiger, mehr Platz (steht im title-Hover) */
.char-arena .cloth-slot .cs-eq,
.acc-flyout .cloth-slot .cs-eq { display: none; }

/* Rucksack im selben Tile-Stil */
.char-arena .slots-col .bag-slot { padding: 0 0 16px; }
.char-arena .slots-col .bag-slot .bag-ico svg { width: 30px; height: 30px; }
.char-arena .slots-col .bag-slot .bag-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}
.char-arena .slots-col .bag-slot .bag-lab {
    display: block;
    padding: 3px 2px;
    background: rgba(0,0,0,.45);
    border-top: 1px solid rgba(255,255,255,.05);
    text-align: center;
    font-size: 7px;
    letter-spacing: .12em;
}

/* --- Toggle-Paar: zwei schlanke horizontale Buttons in EINER Zelle --- */
.vt-pair {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.vt-pair .acc-btn {
    position: relative;
    flex: 1 1 0;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    padding: 0 8px;
    overflow: hidden;
}
.vt-pair .acc-btn .acc-ico {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}
.vt-pair .acc-btn .cs-lab {
    font-size: 7.5px;
    letter-spacing: .1em;
    color: #a8a8b0;
}
.vt-pair .acc-btn .acc-arrow {
    margin-left: auto;
    font-size: 13px;
    line-height: 1;
    color: #5a5a64;
    transition: transform .18s ease, color .18s ease;
}
.vt-pair .acc-btn:hover .acc-arrow { color: #e2199a; }
.vt-pair .acc-btn.open .acc-arrow {
    color: #e2199a;
    transform: rotate(90deg);
}
.char-arena .slots-col .vt-pair .acc-btn.open {
    border: 1px solid #e2199a;
    background: rgba(226,25,154,.10);
}
.char-arena .slots-col .vt-pair .acc-btn.open::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #da6652, #e2199a 70%, #8b2fd6);
}
.vt-pair .acc-btn.open .cs-lab { color: #e2199a; }

/* Fix: alte 72px-Button-Regeln überstimmen (sonst ragen die Paar-Buttons
   über den UNTERHEMD-Slot und schlucken dessen Klicks) */
.char-arena .slots-col .vt-pair .acc-btn {
    position: relative !important;
    height: auto !important;
    flex: 1 1 0 !important;
    min-height: 0;
    top: auto !important;
    bottom: auto !important;
}

/* Fix: Live-CSS versteckt Labels bei belegten Slots (Z.2095) -> immer zeigen,
   dazu Icons passend zu den großen Kacheln skalieren */
.char-arena .cloth-slot .cs-lab,
.acc-flyout .cloth-slot .cs-lab {
    display: block !important;
}
.char-arena .cloth-slot .cs-ico svg,
.char-arena .cloth-slot .cs-ico img {
    width: 44px;
    height: 44px;
}
.acc-flyout .cloth-slot .cs-ico svg,
.acc-flyout .cloth-slot .cs-ico img {
    width: 36px;
    height: 36px;
}
.char-arena .cloth-slot .cs-ico { font-size: 38px; }
.char-arena .cloth-slot.empty .cs-ico { font-size: 26px; }
.char-arena .slots-col .bag-slot .bag-ico svg { width: 38px; height: 38px; }

/* Icon-Größe: alte 24px-Regel (":not(.empty)"-Spezifität) überstimmen */
.char-arena .cloth-slot:not(.empty) .cs-ico,
.acc-flyout .cloth-slot:not(.empty) .cs-ico { font-size: 38px; }
.acc-flyout .cloth-slot:not(.empty) .cs-ico { font-size: 30px; }

/* Icons haben INLINE width:34px im HTML -> !important nötig */
.char-arena .cloth-slot .cs-ico img { width: 46px !important; height: 46px !important; }
.acc-flyout .cloth-slot .cs-ico img { width: 36px !important; height: 36px !important; }

/* ============================================================
   Runde 5: Ghost-Icons in leeren Slots + VITALITY als
   Medical-Monitor (Screen, Scroll-EKG, Leucht-Messwerte)
   ============================================================ */

/* Leere Slots: dezentes Ghost-Icon (wie Handy/Tablet/Funk) */
.char-arena .cloth-slot.empty .cs-ico img.ghost-ico,
.acc-flyout .cloth-slot.empty .cs-ico img.ghost-ico {
    opacity: .17;
    filter: grayscale(.65);
}
.char-arena .cloth-slot.empty:hover .cs-ico img.ghost-ico,
.acc-flyout .cloth-slot.empty:hover .cs-ico img.ghost-ico { opacity: .38; }

/* --- Monitor-Kopf: LIVE-Indikator --- */
.vit-monhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.vit-live {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 7.5px;
    letter-spacing: .14em;
    color: #34d399;
}
.vit-live i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 6px rgba(52,211,153,.8);
    animation: vitPulse 1.2s ease-in-out infinite;
}
@keyframes vitPulse { 50% { opacity: .35; } }

/* --- Monitor-Screen --- */
.vit-mon {
    background: #04060a;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 4px;
    padding: 8px;
    box-shadow: inset 0 0 24px rgba(0,0,0,.8), inset 0 0 60px rgba(226,25,154,.03);
}

/* EKG-Kanal: laufende Kurve + große HR-Anzeige */
.vit-ekg2 {
    position: relative;
    height: 64px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    background:
        repeating-linear-gradient(90deg, rgba(226,25,154,.05) 0 1px, transparent 1px 16px),
        repeating-linear-gradient(0deg, rgba(226,25,154,.05) 0 1px, transparent 1px 16px);
    overflow: hidden;
}
.vit-ekg2 svg {
    display: block;
    width: 100%;
    height: 56px;
}
.ekg-move {
    animation: ekgScroll 2.2s linear infinite;
    filter: drop-shadow(0 0 5px rgba(226,25,154,.65));
}
@keyframes ekgScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-90px); }
}
.vit-hr {
    position: absolute;
    top: 3px;
    right: 4px;
    display: flex;
    align-items: baseline;
    gap: 3px;
    background: rgba(4,6,10,.75);
    padding: 2px 5px;
    border-radius: 3px;
}
.vit-heart {
    font-size: 11px;
    color: #e2199a;
    text-shadow: 0 0 8px rgba(226,25,154,.9);
    animation: heartBeat .86s ease-in-out infinite;
}
@keyframes heartBeat {
    0%, 100% { transform: scale(1); }
    14%      { transform: scale(1.25); }
    28%      { transform: scale(1); }
}
.vit-hr-num {
    font-size: 20px;
    font-weight: 700;
    color: #e2199a;
    text-shadow: 0 0 10px rgba(226,25,154,.7);
    line-height: 1;
}
.vit-hr-unit { font-size: 7.5px; color: #8a5c77; letter-spacing: .1em; }

/* Messwert-Kacheln: 2 Spalten, große Leuchtziffern wie am Monitor */
.vit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.vit-tile {
    position: relative;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 3px;
    padding: 6px 7px 7px;
}
.vit-tile .vt-lab {
    font-family: 'JetBrains Mono', monospace;
    font-size: 6.5px;
    font-weight: 700;
    letter-spacing: .13em;
    color: #6a6a74;
    margin-bottom: 2px;
}
.vit-tile .vt-num {
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
    color: var(--c, #f5f5f7);
    text-shadow: 0 0 9px color-mix(in srgb, var(--c, #fff) 60%, transparent);
}
.vit-tile .vt-num span {
    font-size: 8px;
    font-weight: 700;
    color: #6a6a74;
    margin-left: 2px;
}
.vit-tile .vt-bar {
    margin-top: 5px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255,255,255,.06);
    overflow: hidden;
}
.vit-tile .vt-bar i {
    display: block;
    height: 100%;
    background: var(--c, #fff);
    box-shadow: 0 0 6px color-mix(in srgb, var(--c, #fff) 70%, transparent);
    border-radius: 2px;
}

/* ============================================================
   Runde 6: Panels nutzen die VOLLE Höhe (kein Leerraum unten)
   ============================================================ */
.acc-flyout { display: flex; flex-direction: column; }
.acc-flyout.hidden { display: none; }
.acc-flyout .acc-head { flex: 0 0 auto; }

/* ACCESSOIRES: 2x3-Slots wachsen auf volle Höhe */
.acc-flyout .acc-grid {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    grid-auto-rows: unset;
}
.acc-flyout .acc-grid .cloth-slot {
    width: 100%;
    height: 100% !important;
    min-height: 0;
}

/* VITALITY: Monitor wächst, EKG größer, Kanal-Kacheln füllen den Rest */
.acc-flyout .vit-mon {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.acc-flyout .vit-ekg2 {
    flex: 0 0 110px;
    height: 110px;
    margin-bottom: 12px;
}
.acc-flyout .vit-ekg2 svg { height: 100px; }
.acc-flyout .vit-grid {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-rows: repeat(3, 1fr);
}
.acc-flyout .vit-tile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
}
.acc-flyout .vit-tile .vt-num { font-size: 24px; }
.acc-flyout .vit-tile .vt-num span { font-size: 9px; }
.acc-flyout .vit-tile .vt-lab { font-size: 7px; margin-bottom: 4px; }
.acc-flyout .vit-tile .vt-bar { margin-top: 7px; height: 4px; }


/* Player-ID-Chip neben Name/Gender */
.id-chip {
    display: inline-flex;
    align-items: center;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    color: #e2199a;
    background: rgba(226,25,154,.10);
    border: 1px solid rgba(226,25,154,.4);
    border-radius: 3px;
    padding: 2px 6px;
    line-height: 1;
}
.id-chip.hidden { display: none; }


/* ============================================================
   Fix: Öffnungs-Animation. Die originale cardIn animiert transform
   OHNE das zentrierende translate(-50%,-50%) — die Karte startet
   dadurch versetzt und "ploppt" nach 300ms in die Mitte. Nur-Fade
   lässt die Basis-/Drag-Position von Frame 1 an gelten.
   ============================================================ */
.inv-card { animation: cardFadeIn .22s ease !important; }
@keyframes cardFadeIn { from { opacity: 0; } to { opacity: 1; } }


/* Stat-Icons in den Vitality-Kacheln (oben rechts, in Kanalfarbe) */
.vit-tile { position: relative; }
.vit-tile .vt-ico {
    position: absolute;
    top: 7px;
    right: 8px;
    width: 15px;
    height: 15px;
    color: var(--c, #f5f5f7);
    opacity: .9;
}
.vit-tile .vt-ico svg { width: 100%; height: 100%; display: block; }


/* Falscher Slot beim Anziehen: kurzes rotes Abwehr-Feedback */
.cloth-slot.slot-reject {
    border-color: #ff5555 !important;
    box-shadow: 0 0 0 1px #ff5555, 0 0 14px rgba(255,85,85,.45) !important;
    animation: slotReject .12s linear 3;
}
@keyframes slotReject {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(-3px); }
}

/* ---------- Verletzungs-Punkte (v2, 15.10.): jede Verletzung einzeln ----------
   Gleiche Box wie Silhouette/Klickflächen (Werte aus liste_v25.css), liegt
   darüber, lässt Klicks durch zu den .jc-hit-Flächen darunter. */
#jc-marks {
    grid-area: 1 / 1;
    place-self: center;
    height: 98%;
    aspect-ratio: 436 / 1100;
    max-width: 100%;
    position: relative;
    z-index: 4;
    pointer-events: none;
}
#inv-root #jc-marks { height: 100% !important; max-height: 500px; width: auto !important; aspect-ratio: 436 / 1100; max-width: 100%; }
.jc-mark {
    --sev: #fbbf24;
    position: absolute;
    width: 11px; height: 11px;
    margin: -5.5px 0 0 -5.5px;
    border-radius: 50%;
    background: var(--sev);
    border: 2px solid #0e0f13;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--sev) 40%, transparent), 0 2px 6px rgba(0,0,0,.6);
    pointer-events: none;
}
.jc-mark.sev-medium { --sev: #ff8a2e; }
.jc-mark.sev-severe { --sev: #ef4444; }
/* Steckendes Projektil: dunkler Kern im Ring */
.jc-mark.bullet { background: #0e0f13; border: 3px solid var(--sev); width: 12px; height: 12px; margin: -6px 0 0 -6px; }
/* Versorgt (Verband, genäht, heilt): nur noch der Ring */
.jc-mark.treated { background: transparent; border: 2px solid var(--sev); box-shadow: 0 2px 6px rgba(0,0,0,.6); opacity: .8; }
.jc-mark b {
    position: absolute; left: 12px; top: -7px;
    font: 700 10px/1 var(--mono, 'JetBrains Mono', monospace);
    color: #e7e8eb; background: #15171c; border: 1px solid #262a33;
    border-radius: 999px; padding: 2px 5px; white-space: nowrap;
}