/* -- Party-Leiste (eigene Gruppenhelden, Sofort-Wechsel) --------------------
   Gerendert von includes/party_leiste.inc.php unter dem Header (Desktop)
   bzw. sticky unter der Mobile-Top-Bar; zusaetzlich im Standalone-Gruppen-
   Handel (Mediabox-Iframe), der diese Datei separat laedt.

   Designprinzip: das Band selbst ist auf dem Desktop TRANSPARENT (nur
   Layout) — die Chips stehen als kleine Panels direkt auf dem Seiten-
   hintergrund. Ihre Optik definiert JEDER SKIN selbst am Ende seiner
   antamarv73.css (Praezedenzfall .accordion_toggle); die Token-Regeln hier
   sind nur der Fallback. Feste Hoehen (Chip 48px, Band 58px gesamt), damit
   die absolut positionierten Pin-Toggles der Skins exakt verschoben werden
   koennen. */
.party-leiste {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 6px;
    padding: 6px 8px 4px;
    box-sizing: border-box;
}
.party-leiste.party-wechselt,
.party-header.party-wechselt {
    opacity: 0.5;
    pointer-events: none;
}
.party-held {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    height: 48px;
    box-sizing: border-box;
    padding: 3px 8px 3px 3px;
    border: 1px solid var(--mobile-border-soft);
    border-radius: 6px;
    background: var(--mobile-surface);
    color: var(--mobile-text);
    text-decoration: none;
}
a.party-held:hover {
    background: var(--mobile-surface-2-hover, var(--mobile-surface-2));
    text-decoration: none;
}
.party-held-aktiv {
    outline: 2px solid var(--mobile-accent-strong);
    outline-offset: -1px;
}
.party-portrait {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
}
.party-status {
    font-size: 12px;
    line-height: 1;
    padding: 1px 2px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
}
.party-status img {
    display: block;
    height: 12px;
}
/* Gefallener Gruppen-Rogue: ausgegrautes Portrait + Totenschaedel */
.party-tot .party-portrait {
    filter: grayscale(1);
    opacity: 0.55;
}
.party-tot .party-name {
    text-decoration: line-through;
    opacity: 0.7;
}
.party-gefallen {
    font-size: 0.75em;
    opacity: 0.7;
    font-style: italic;
}
.party-tot-icon {
    font-size: 14px;
    line-height: 1;
    padding: 1px 2px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
}
.party-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.party-name {
    font-size: 0.85em;
    max-width: 110px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.party-balken {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* -- Header-Variante (Desktop) ----------------------------------------------
   render_party_header() ersetzt im Gruppen-Modus Portrait+Wappen im
   heroPics-Slot der Header-Tabelle: aktiver Held gross (Link Heldenwahl),
   Gefaehrten als Mini-Chips (Portrait + LE/AE-Mikrobalken, Name im Tooltip).
   Skin-Feinschliff wie beim Band am Ende der jeweiligen antamarv73.css. */
.party-header {
    display: flex;
    align-items: center;
    gap: 6px;
}
.party-gross {
    display: block;
    flex: 0 0 auto;
    text-decoration: none;
}
.party-portrait-gross {
    flex-basis: 100px;
    width: 100px;
    height: 100px;
}
.party-mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
    padding: 3px;
    border: 1px solid var(--mobile-border-soft);
    border-radius: 6px;
    background: var(--mobile-surface);
    text-decoration: none;
}
a.party-mini:hover {
    background: var(--mobile-surface-2-hover, var(--mobile-surface-2));
    text-decoration: none;
}
.party-mini .party-portrait {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
}
/* Skin-Header-Regeln wie "#header_left img { float; margin }" (bombast:566,
   antamar:270, ...) duerfen die IMGs in der Party-Anzeige nicht erfassen —
   weder das Verwundet-Icon im Portrait-Overlay noch die LE/AE-Balken
   (lebensenergie_2_html rendert <img>). Spezifitaet (1,2,1) schlaegt deren
   (1,1,2) unabhaengig von der Ladereihenfolge. */
#party-header .party-portrait .party-status img,
#party-header .party-mini .party-balken img {
    float: none;
    margin: 0;
}

/* Desktop: das Band unter dem Header ist durch die Header-Variante ersetzt —
   die Kopie mit party-nur-mobil bleibt nur fuer Mobile im DOM. Der Standalone-
   Gruppenhandel (Mediabox-Iframe) rendert sein Band OHNE die Klasse und
   behaelt es auf allen Breiten. */
@media (min-width: 771px) {
    .party-leiste.party-nur-mobil {
        display: none;
    }
}

@media (max-width: 770px) {
    .party-leiste {
        position: sticky;
        top: var(--mobile-topbar-height, 0px);
        z-index: calc(var(--z-mobile-bar, 1000) - 1);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        /* sticky ueber Inhalt: opake Flaeche wie die Mobile-Top-Bar,
           sonst scheint der Seitentext durch die Leiste */
        background: var(--mobile-surface);
        border-bottom: 1px solid var(--mobile-border-soft);
    }
    .party-held {
        flex: 0 0 auto;
        height: auto;
        min-height: var(--touch-target-min, 44px);
    }
}

@media print {
    .party-leiste,
    .party-header { display: none; }
}