/* Portal V2 - Battle.net-artiges Desktop-Layout (eingeloggt).
   Mobile (body.mobile) nutzt diese Styles nicht. */

/* ------------------------------------------------------------------
   Grundfarben / Bausteine
   ------------------------------------------------------------------ */

:root {
    /* Portal-Basis: Lila als Hauptakzent, dazu das Blau/Tuerkis der
       klassischen Bitmeup-Boxen (#333D5F -> #33585F -> #335F4F) */
    --pv2-glass: rgba(22, 28, 46, 0.62);
    --pv2-glass-soft: rgba(22, 28, 46, 0.45);
    --pv2-border: rgba(255, 255, 255, 0.09);
    --pv2-accent: #b23af2;
    --pv2-accent-soft: rgba(178, 58, 242, 0.35);
    --pv2-cyan: #5FE7F9;
    --pv2-teal: #33585F;
    --pv2-online: #3bd16f;
    --pv2-afk: #e8a33d;
    --pv2-dnd: #e04848;
    --pv2-offline: #8a8a96;
    --pv2-missing-bg: #ffe600; /* Platzhalter: Hintergrund fehlt noch! */

    /* Spiel-Theme-Variablen (Default = Portal-Look) */
    --g-accent: #b23af2;
    --g-glow: rgba(178, 58, 242, 0.35);
    --g-btn: linear-gradient(180deg, #5a3277, #45265e);
    --g-btn-border: #713b9e;
    --g-tile: rgba(22, 28, 46, 0.62);
    --g-hl: #ffffff;
    --g-grad: rgba(178, 58, 242, 0.22);
}

/* ---- Spiel-Farbwelten ---- */
body.pv2-theme-si {           /* SpaceInvasion: blau / dunkelgrau */
    --g-accent: #3f8ff0;
    --g-glow: rgba(63, 143, 240, 0.4);
    --g-btn: linear-gradient(180deg, #2f7ede, #1b5cad);
    --g-btn-border: #3f8ff0;
    --g-tile: rgba(24, 29, 40, 0.68);
    --g-grad: rgba(35, 70, 130, 0.4);
}
body.pv2-theme-damoria {      /* Damoria: gelb/beige, Rot fuer Buttons/HL */
    --g-accent: #c2392e;
    --g-glow: rgba(194, 57, 46, 0.45);
    --g-btn: linear-gradient(180deg, #b8402f, #8a2a1d);
    --g-btn-border: #d4553f;
    --g-tile: rgba(52, 45, 28, 0.68);
    --g-hl: #e6d8b2;
    --g-grad: rgba(170, 120, 50, 0.32);
}
body.pv2-theme-mebula {       /* Mebula: Lila-Toene */
    --g-accent: #bc70dc;
    --g-glow: rgba(188, 112, 220, 0.45);
    --g-btn: linear-gradient(180deg, #6b2fb0, #501e9a);
    --g-btn-border: #8a4fd0;
    --g-tile: rgba(34, 20, 48, 0.68);
    --g-grad: rgba(120, 50, 180, 0.35);
}
body.pv2-theme-nexus {        /* Nexus Raid: grau / orange */
    --g-accent: #e8862d;
    --g-glow: rgba(232, 134, 45, 0.45);
    --g-btn: linear-gradient(180deg, #d97b22, #a85a12);
    --g-btn-border: #f09a45;
    --g-tile: rgba(34, 34, 38, 0.7);
    --g-grad: rgba(110, 110, 115, 0.4);
}
body.pv2-theme-mlegends {     /* Mebula Legends: Lila / Gold */
    --g-accent: #d4af37;
    --g-glow: rgba(212, 175, 55, 0.45);
    --g-btn: linear-gradient(180deg, #6b2fb0, #501e9a);
    --g-btn-border: #d4af37;
    --g-tile: rgba(36, 26, 52, 0.68);
    --g-hl: #efe0ae;
    --g-grad: rgba(120, 60, 180, 0.35);
}
body.pv2-theme-districtnull { /* District Null: Blau / Lila / Tuerkis */
    --g-accent: #2de2ff;
    --g-glow: rgba(45, 226, 255, 0.4);
    --g-btn: linear-gradient(180deg, #2b6fe0, #1b3fa8);
    --g-btn-border: #2de2ff;
    --g-tile: rgba(16, 22, 44, 0.68);
    --g-grad: rgba(70, 90, 220, 0.35);
}
body.pv2-theme-plain {        /* Lotto / Inventar / Einstellungen: Tuerkis/Lila */
    --g-accent: #45c8d8;
    --g-glow: rgba(69, 200, 216, 0.4);
    --g-btn: linear-gradient(180deg, #5a3277, #45265e);
    --g-btn-border: #713b9e;
    --g-tile: rgba(24, 32, 50, 0.65);
    --g-hl: #d8f4f8;
    --g-grad: rgba(69, 200, 216, 0.2);
}

/* Im eingeloggten Desktop-Modus scrollt NIE die Seite selbst -
   nur die pv2-scroll-Bereiche (Content, Freunde, Chat, Overlays). */
html.pv2, body.pv2 {
    height: 100%;
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
}
/* der alte innere Scroll-Container (Client.tpl, inline overflow:auto)
   darf im neuen Layout ebenfalls nicht scrollen */
body.pv2 #portal_scroll { overflow: hidden !important; }
body.pv2 #bitmeup\.page { height: 100vh !important; }

/* abgedunkelte Blur-Kachel - der Grundbaustein aller Boxen */
.pv2-tile {
    background: var(--g-tile);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--pv2-border);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    color: #fff;
    overflow: hidden;
}
.pv2-tile-pad { padding: 14px 16px; }

.pv2-tile-hl {
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--g-hl);
    padding: 12px 16px 10px 16px;
    border-bottom: 1px solid var(--pv2-border);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02));
    text-shadow: 0 0 8px var(--g-glow);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pv2-scroll { overflow-y: auto; box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--g-glow) transparent; }
.pv2-scroll::-webkit-scrollbar { width: 7px; height: 7px; }
.pv2-scroll::-webkit-scrollbar-thumb { background: var(--g-glow); border-radius: 4px; }
.pv2-scroll::-webkit-scrollbar-thumb:hover { background: var(--g-accent); }
.pv2-scroll::-webkit-scrollbar-track { background: transparent; }

.pv2-btn {
    display: inline-block;
    background: var(--g-btn);
    border: 1px solid var(--g-btn-border);
    border-radius: 8px;
    color: #fff;
    padding: 7px 16px;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    transition: box-shadow 0.15s, transform 0.1s;
    white-space: nowrap;
}
.pv2-btn:hover { box-shadow: 0 0 12px var(--g-glow); }
.pv2-btn:active { transform: scale(0.97); }

.pv2-btn-play {
    font-size: 16px;
    font-weight: bold;
    padding: 10px 34px;
}
.pv2-btn-play:hover { box-shadow: 0 0 14px var(--g-glow); }

/* Status-Punkt */
.pv2-dot {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--pv2-offline);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
    vertical-align: middle;
}
.pv2-dot.online { background: var(--pv2-online); box-shadow: 0 0 7px var(--pv2-online); }
.pv2-dot.afk { background: var(--pv2-afk); box-shadow: 0 0 7px var(--pv2-afk); }
.pv2-dot.dnd { background: var(--pv2-dnd); box-shadow: 0 0 7px var(--pv2-dnd); }

/* ------------------------------------------------------------------
   Top-Bar
   ------------------------------------------------------------------ */

.pv2-bar {
    position: relative;
    width: 100%;
    height: 64px;
    display: flex;
    align-items: center;
    background: linear-gradient(180deg,
        rgba(28, 20, 44, 0.94) 0%,
        rgba(18, 13, 30, 0.92) 60%,
        rgba(9, 6, 16, 0.96) 100%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(178, 58, 242, 0.22); /* dezente Kante */
}

.pv2-bar-logo {
    flex: 0 0 auto;
    position: relative;
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 18px 0 14px;
    overflow: hidden;
    cursor: pointer;
}
.pv2-bar-logo img {
    height: 110px;
    position: relative;
    filter: drop-shadow(0 0 8px rgba(95, 231, 249, 0.25));
    animation: pv2LogoPulse 9s infinite;
}
/* Licht-Sweep von oben nach unten */
.pv2-bar-logo::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: -80%;
    height: 55%;
    background: linear-gradient(180deg, transparent,
        rgba(160, 240, 255, 0.16) 45%, rgba(178, 58, 242, 0.14) 55%, transparent);
    pointer-events: none;
    animation: pv2LogoSweep 9s infinite;
}
/* Live-Logo: die Buehne haengt wie das alte Bild ueber die Leiste.
   Die alten Effekte (Sweep/Pulse) gehoeren zum Bild und sind fuer die
   Live-Variante abgeschaltet - sie bringt ihre eigenen mit. */
.bmu-logo-live { width: 250px; height: 100px; }
.pv2-bar-logo.bmu-live::after { content: none; }

@keyframes pv2LogoSweep {
    0%, 76% { top: -80%; opacity: 0; }
    80% { opacity: 1; }
    92% { top: 120%; opacity: 1; }
    93%, 100% { top: 120%; opacity: 0; }
}
@keyframes pv2LogoPulse {
    0%, 76%, 100% { filter: drop-shadow(0 0 8px rgba(95, 231, 249, 0.25)) saturate(1); }
    84% { filter: drop-shadow(0 0 14px rgba(95, 231, 249, 0.55)) saturate(1.45) brightness(1.12); }
    92% { filter: drop-shadow(0 0 8px rgba(95, 231, 249, 0.25)) saturate(1); }
}

.pv2-bar-tiles {
    flex: 1 1 auto;
    display: flex;
    align-items: flex-start;
    gap: 3px; /* kleiner Abstand zwischen den Schraegen */
    height: 64px;
    overflow: hidden;
    padding: 0 32px;
}

/* schraege (nach links gekippte) Menue-Knoepfe mit Bild-Fuellung -
   volle Bar-Hoehe, buendig aneinander; der animierte Leuchtstreifen am
   unteren Bar-Rand (bitmeup-bar-container, z-index 7) laeuft drueber */
.pv2-bar-tile {
    position: relative;
    flex: 0 0 auto;
    width: 150px;
    height: 62px; /* Streifen ist weg - Kacheln duerfen wieder hoeher */
    transform: skewX(20deg); /* spitzer */
    border-radius: 0;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    /* sichtbarer Rahmen auch im inaktiven Zustand */
    border: 1px solid rgba(178, 58, 242, 0.32);
    border-bottom: 1px solid rgba(178, 58, 242, 0.45);
    background: linear-gradient(180deg, #3e3162 0%, #272045 45%, #171130 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -8px 16px rgba(0, 0, 0, 0.4);
    filter: saturate(0.85) brightness(0.98);
    transition: filter 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.pv2-bar-tile:hover {
    filter: saturate(1) brightness(1.02);
    border-color: rgba(255, 255, 255, 0.4);
    z-index: 2;
}
.pv2-bar-tile.active {
    filter: saturate(1.5) brightness(1.12);
    border-color: var(--pv2-accent);
    background: linear-gradient(180deg, #473470 0%, #2c2154 45%, #191238 100%);
    box-shadow: 0 0 16px var(--pv2-accent-soft), inset 0 0 12px rgba(178, 58, 242, 0.25);
    z-index: 3;
}
/* Bild-Fuellung: gegen-geschraegt; Motive starten kleiner und wachsen
   beim Hover auf volle Groesse */
.pv2-bar-tile-img {
    position: absolute;
    top: 0; bottom: 0;
    left: -14px; right: -14px;
    transform: skewX(-20deg) scale(0.78);
    background-position: center 45%;
    background-size: auto 100%;
    background-repeat: no-repeat;
    transition: transform 0.22s cubic-bezier(0.3, 1.4, 0.5, 1);
    animation: pv2CrtFlicker 14s infinite steps(1, end);
}
.pv2-bar-tile:hover .pv2-bar-tile-img { transform: skewX(-20deg) scale(1); }
/* Feinjustierung pro Motiv */
.pv2-bar-tile-img.xl { background-size: auto 128%; }     /* Lotto: ganz gross */
.pv2-bar-tile-img.big { background-size: auto 112%; }    /* Controller, Truhe, Zahnrad */
.pv2-bar-tile-img.small { background-size: auto 72%; }
/* Spiele-Controller kippt beim Hover an */
#pv2-tile-games:hover .pv2-bar-tile-img { transform: skewX(-20deg) scale(1) rotate(-9deg); }
/* Controller (Spiele) und Truhe (Inventar): etwas heller/kraeftiger */
#pv2-tile-games .pv2-bar-tile-img,
#pv2-tile-inventory .pv2-bar-tile-img { filter: saturate(1.25) brightness(1.15); }

/* Chat: die ausgefranste Pixelwolke ist im Bild weggeschnitten (weicher
   Auslauf nach unten), das Motiv fuellt die Kachel von selbst.
   ACHTUNG bei der Groesse: die Nachbarn stehen auf 112 % Hoehe und
   verlieren dabei oben und unten je ein paar Pixel - bei ihnen ist das
   egal, hier waren es erst die Blasen oben, dann die Spitzen unten.
   Deshalb GENAU 100 % und mittig: so ist das ganze Motiv zu sehen.
   Gross wird es weiterhin ueber die scale-Animation der Kachel. */
#pv2-tile-chat .pv2-bar-tile-img {
    background-size: auto 100%;
    background-position: center 50%;
    filter: saturate(1.2) brightness(1.1);
}

/* Bits: gross und leicht abgesenkt, waechst beim Hover weiter */
#pv2-tile-bits .pv2-bar-tile-img { transform: skewX(-20deg) translateY(8px) scale(1.1); }
#pv2-tile-bits:hover .pv2-bar-tile-img { transform: skewX(-20deg) translateY(8px) scale(1.28); }
/* CRT-Flackern: selten, kurz, pro Kachel versetzt (nie synchron) */
@keyframes pv2CrtFlicker {
    0%, 100% { opacity: 1; }
    91.0% { opacity: 1; }
    91.4% { opacity: 0.5; }
    91.8% { opacity: 0.95; }
    92.2% { opacity: 0.62; }
    92.6% { opacity: 1; }
}
.pv2-bar-tile:nth-child(1) .pv2-bar-tile-img { animation-duration: 13s; animation-delay: -2s; }
.pv2-bar-tile:nth-child(2) .pv2-bar-tile-img { animation-duration: 17s; animation-delay: -9s; }
.pv2-bar-tile:nth-child(3) .pv2-bar-tile-img { animation-duration: 15s; animation-delay: -5s; }
.pv2-bar-tile:nth-child(4) .pv2-bar-tile-img { animation-duration: 19s; animation-delay: -13s; }
.pv2-bar-tile:nth-child(5) .pv2-bar-tile-img { animation-duration: 16s; animation-delay: -7s; }
.pv2-bar-tile:nth-child(6) .pv2-bar-tile-img { animation-duration: 21s; animation-delay: -11s; }
/* Funktions-Streifen oben links, breite/dicke Schrift */
.pv2-bar-tile-stripe {
    position: absolute;
    top: 0; left: 0;
    z-index: 2;
    padding: 2px 14px 3px 12px;
    font-family: 'Arial Black', 'Arial', sans-serif;
    font-weight: 900;
    font-size: 10px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(180deg, rgba(64, 28, 98, 0.88), rgba(38, 16, 62, 0.85));
    border-bottom: 1px solid rgba(178, 58, 242, 0.35);
    border-right: 1px solid rgba(178, 58, 242, 0.25);
    border-bottom-right-radius: 9px;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
}
/* Band folgt der Schraege, die Schrift selbst steht gerade */
.pv2-bar-tile-stripe span {
    display: inline-block;
    transform: skewX(-20deg);
}
/* gesperrt = kein grauer Brei: Farben bleiben, nur etwas gedimmt + Schloss */
.pv2-bar-tile.locked { cursor: not-allowed; filter: saturate(0.72) brightness(0.85); }
.pv2-bar-tile.locked:hover { filter: saturate(0.72) brightness(0.85); border-color: rgba(255,255,255,0.16); }
/* Schloss-Overlay: dunkelt den Knopf ab, Schloss mittig und
   gegen-geschraegt (unverzerrt) darueber */
.pv2-lock-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(5, 3, 10, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.pv2-lock-overlay .glyphicons {
    transform: skewX(-20deg) translateY(12px);
    font-size: 19px;
    top: 0;
    color: #fff;
    opacity: 0.92;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.9), 0 0 14px rgba(178, 58, 242, 0.5);
}
/* Bits-Knopf: kraeftige Wuerfel + Zaehler mittig */
.pv2-bits-center {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-top: 10px;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    white-space: nowrap;
}
/* die Wuerfel behalten ihre bunte Farbwechsel-Animation (main.css),
   hier nur groesser + zusaetzlicher Glow */
.pv2-bits-center .bit-icon {
    transform: skewX(-20deg) scale(2);
    transform-origin: center;
    filter: drop-shadow(0 0 3px rgba(178, 58, 242, 0.9)) brightness(1.25) saturate(1.3);
}
.pv2-bits-center span { transform: skewX(-20deg); display: inline-block; }

.pv2-bar-ico {
    width: 30px; height: 30px;
    border-radius: 8px;
    object-fit: cover;
    display: block;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
    transition: box-shadow 0.15s;
}
.pv2-friends-toggle:hover .pv2-bar-ico,
.pv2-friends-toggle.active .pv2-bar-ico { box-shadow: 0 0 10px var(--pv2-accent-soft); }
.pv2-bar-tile-label { display: none; }

/* rechter Bereich: Sprache + User */
.pv2-bar-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 14px;
    height: 64px;
}

.pv2-bar-flag { position: relative; cursor: pointer; padding: 8px; }
.pv2-bar-flag img { height: 16px; display: block; }
.pv2-bar-flag .pv2-flag-drop {
    display: none;
    position: absolute;
    top: 30px; right: 0;
    z-index: 60;
    background: var(--pv2-glass);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--pv2-border);
    border-radius: 10px;
    padding: 8px;
    width: 420px;
}
.pv2-bar-flag:hover .pv2-flag-drop { display: block; }

.pv2-user {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 13px 7px 9px;
    border-radius: 10px;
    cursor: pointer;
    /* eingedrueckter, farblich hinterlegter Container */
    background: linear-gradient(180deg, rgba(90, 50, 130, 0.30), rgba(35, 20, 58, 0.45));
    border: 1px solid rgba(0, 0, 0, 0.55);
    box-shadow: inset 0 2px 7px rgba(0, 0, 0, 0.55),
                inset 0 -1px 0 rgba(255, 255, 255, 0.08),
                0 1px 0 rgba(255, 255, 255, 0.05);
}
.pv2-user:hover {
    background: linear-gradient(180deg, rgba(110, 62, 155, 0.38), rgba(45, 26, 72, 0.5));
    border-color: rgba(178, 58, 242, 0.45);
}
.pv2-user-avatar {
    width: 38px; height: 38px;
    border-radius: 8px;
    background: #241a33 center/cover no-repeat;
    border: 1px solid var(--pv2-border);
}
.pv2-user-name { font-size: 13px; color: #fff; white-space: nowrap; }
.pv2-user-status { font-size: 11px; color: #b8aecb; white-space: nowrap; }

.pv2-user-drop {
    display: none;
    position: absolute;
    /* An der Eckenhoehe haengen, nicht an einem festen Wert: bei den
       groesseren Umbruchpunkten waechst der Avatar und damit die Ecke. */
    top: calc(100% + 8px); right: 0;
    z-index: 60;
    min-width: 190px;
    /* Deckend statt Glas: durchscheinend waren die oberen Punkte vor dem
       hellen Hintergrund kaum zu lesen. */
    background: rgba(20, 12, 32, 0.97);
    border: 1px solid var(--pv2-border);
    border-radius: 10px;
    padding: 6px;
}
/* Das Feld haengt an :hover der Spielerecke. Zwischen beiden liegen 8 px
   Luft - dort waere der Zeiger weder auf der Ecke noch auf dem Feld, und
   genau dort riss :hover ab. Diese unsichtbare Bruecke schliesst die
   Luecke und ueberlappt die Ecke zusaetzlich um 8 px, damit auch ein
   langsamer Zeiger nie ins Leere faehrt. Weil das Feld ein Kind der Ecke
   ist, haelt ein Zeiger darauf auch deren :hover am Leben.
   ACHTUNG: hier NUR die Bruecke - alles Sichtbare gehoert in die Regel
   darueber, sonst steht das Menue ohne Hintergrund da. */
.pv2-user-drop::before {
    content: '';
    position: absolute;
    left: -10px; right: -10px;
    top: -16px;
    height: 16px;
}
.pv2-user:hover .pv2-user-drop { display: block; }
.pv2-user-drop-entry {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 7px;
    font-size: 12px;
    color: #ddd;
    cursor: pointer;
    white-space: nowrap;
}
.pv2-user-drop-entry:hover { background: rgba(178, 58, 242, 0.18); color: #fff; }
/* Discord und andere eigene Zeichnungen stehen an der Stelle der Glyphen.
   Eine Glyphe belegt 28 px; das Zeichen selbst ist nur 14 px breit und
   bekommt links und rechts je 7 px, damit der Text auf derselben Kante
   beginnt wie in allen anderen Zeilen. */
.pv2-drop-ico { flex: 0 0 auto; opacity: 0.85; margin: 0 7px; }
/* Die aktuelle Flagge sitzt rechts in der Zeile "Sprache" */
.pv2-drop-flag {
    height: 12px;
    margin-left: auto;
    border-radius: 2px;
    display: block;
}

/* --- Sprachauswahl (Fenster) --- */
.pv2-lang-box { width: min(640px, 92vw); }
.pv2-lang-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 6px;
    padding: 12px;
    max-height: min(60vh, 460px);
}
.pv2-lang-tile {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 9px;
    cursor: pointer;
    font-size: 12px;
    color: #ddd;
    background: rgba(0, 0, 0, 0.26);
    border: 1px solid var(--pv2-border);
    transition: background 0.13s, border-color 0.13s, color 0.13s;
}
.pv2-lang-tile:hover {
    background: rgba(178, 58, 242, 0.18);
    border-color: rgba(178, 58, 242, 0.45);
    color: #fff;
}
.pv2-lang-tile.aktiv {
    background: rgba(178, 58, 242, 0.26);
    border-color: var(--g-accent, #b23af2);
    color: #fff;
}
.pv2-lang-tile img { height: 14px; display: block; border-radius: 2px; flex: 0 0 auto; }
.pv2-lang-tile span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pv2-friends-toggle {
    position: relative;
    width: 52px; height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    cursor: pointer;
    color: #cfc6dd;
    transition: transform 0.12s;
}
.pv2-friends-toggle:hover { transform: scale(1.08); }
.pv2-friends-toggle .pv2-bar-ico {
    width: 46px; height: auto;
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.6));
}
.pv2-friends-toggle:hover .pv2-bar-ico,
.pv2-friends-toggle.active .pv2-bar-ico {
    filter: drop-shadow(0 0 8px rgba(95, 231, 249, 0.7));
    box-shadow: none;
}
.pv2-friends-toggle .glyphicons { font-size: 19px; top: 0; }
/* Zahnrad im User-Bereich: etwas kompakter als der Freunde-Toggle */
.pv2-settings-btn .pv2-bar-ico { width: 38px; }
.pv2-settings-btn:hover .pv2-bar-ico { filter: drop-shadow(0 0 8px rgba(178, 58, 242, 0.7)); }
.pv2-settings-btn.active .pv2-bar-ico { filter: drop-shadow(0 0 8px rgba(178, 58, 242, 0.9)); }
.pv2-badge {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 16px; height: 16px;
    line-height: 16px;
    border-radius: 8px;
    background: var(--pv2-dnd);
    color: #fff;
    font-size: 10px;
    text-align: center;
    padding: 0 3px;
    box-shadow: 0 0 6px rgba(0,0,0,0.5);
}

/* ------------------------------------------------------------------
   Spiele-Leiste (unter der Bar, fliegt rein)
   ------------------------------------------------------------------ */

/* die Leiste ist geblurt - der Content scrollt sichtbar dahinter durch */
#pv2-rail-wrap {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: linear-gradient(180deg, rgba(10, 8, 18, 0.6), rgba(10, 8, 18, 0.2));
    /* Blur + Abdunklung laufen nach unten weich aus - keine harte Kante */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
    padding-bottom: 26px;
}
.pv2-gamerail {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    padding: 12px 18px 14px 18px; /* Luft fuer die Schatten der Icons */
    flex-wrap: nowrap;       /* Spiele bleiben immer in EINER Zeile */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}
.pv2-gamerail::-webkit-scrollbar { display: none; }

@property --pv2rot {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* Trapez-Icons: abwechselnd unten-breit / oben-breit, 2px Fuge.
   Der "Rahmen" ist der Wrapper-Hintergrund (2px padding), das Motiv wird
   mit derselben Form geclippt. Schatten via drop-shadow (folgt der Form). */
.pv2-game-icon {
    position: relative;
    flex: 0 0 auto;
    width: 108px; height: 62px; /* laenglich statt quadratisch */
    padding: 1px; /* duennerer Rand */
    box-sizing: border-box;
    cursor: pointer;
    background: rgba(140, 195, 205, 0.45); /* grau-tuerkis */
    filter: drop-shadow(0 7px 10px rgba(0, 0, 0, 0.75));
    transition: transform 0.18s, filter 0.18s, background 0.18s;
    opacity: 0;
}
.pv2-gamerail { gap: 2px; }
/* Form steht weiter unten, gezaehlt wird der Rahmen */
.pv2-game-icon:hover {
    transform: translateY(-3px) scale(1.05);
    background: rgba(95, 231, 249, 0.75);
    filter: drop-shadow(0 7px 12px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 10px rgba(95, 231, 249, 0.5));
}
/* aktiv: Lichtlauf auf dem Trapez-Rahmen (rotierender Conic-Verlauf) */
.pv2-game-icon.active {
    background: conic-gradient(from var(--pv2rot),
        var(--pv2-accent) 0deg, rgba(95, 231, 249, 1) 90deg,
        var(--pv2-accent) 180deg, rgba(95, 231, 249, 1) 270deg,
        var(--pv2-accent) 360deg);
    /* KEINE Drehung mehr: die Animation des Conic-Winkels rasterte das
       Icon jeden Frame neu UND riss den drop-shadow-Saum der Huelle mit
       (gemessen: 13 fps mit, 45 ohne; mit ruhendem Saum 61). Der Ring
       bleibt als statischer Farbverlauf. */
    /* KEIN eigener Schatten/Glow mehr: der schwarze erstickte den
       Leucht-Saum, und der 10px-Akzent-Glow legte sich als lila
       Schleier drueber (machte v.a. die Oberkante dick). Das Licht
       kommt jetzt allein vom abgestimmten Saum der pv2-game-schein */
    filter: none;
}
@keyframes pv2FrameSpin {
    to { --pv2rot: 360deg; }
}
.pv2-game-icon img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
/* Der Beschnitt liegt allein am Trapez (.pv2-game-icon). Das Bild
   zusaetzlich zu beschneiden war frueher noetig, haengt aber am
   nth-child der Icons - seit die Icons in einem Rahmen sitzen, greift
   es ueberall gleich und schnitt bei den gegenlaeufigen Kacheln die
   oberen Ecken weg. */
/* Das Bild bekommt DIESELBE Trapezform wie der Rahmen, sitzt aber durch
   das 1px-Padding etwas kleiner darin - dadurch bleibt der Rahmen an ALLEN
   Kanten sichtbar, auch an den schraegen. Ohne diesen Beschnitt lief das
   rechteckige Bild bis an die Schnittkante und der Rand verschwand links
   und rechts.
   Gezaehlt wird der Rahmen (pv2-game-slot), nicht das Trapez - sonst
   greift ueberall dieselbe Richtung. Genau das war der urspruengliche
   Fehler. */
.pv2-game-slot:nth-child(odd)  .pv2-game-bg { clip-path: polygon(12% 0%, 88% 0%, 100% 100%, 0% 100%); }
.pv2-game-slot:nth-child(even) .pv2-game-bg { clip-path: polygon(0% 0%, 100% 0%, 88% 100%, 12% 100%); }
.pv2-game-icon-label { display: none; }

.pv2-game-icon-ribbon {
    position: absolute;
    z-index: 2;
    box-sizing: border-box;
    /* laeuft absichtlich ueber beide Kanten hinaus - endet es innerhalb
       der Kachel, bleibt an der Oberkante die Schnittkante sichtbar */
    width: 96px;
    text-align: center;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.4px;
    color: #fff;
    background: var(--pv2-dnd);
    padding: 0.5px 0;
    line-height: 1;
    /* leichter Schatten, damit das Band ueber dem Bild aufliegt statt
       aufgeklebt zu wirken - dazu eine feine helle Kante oben */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.22);   /* 1.5 ergab bei 8px Schrift 12px Zeilenhoehe - das war der Platz ober- und unterhalb */
    pointer-events: none;
}

/* Bei "oben schmal" laeuft die linke Kante spitz zu - das Band braucht
   einen flacheren Winkel und sitzt weiter innen. */
.pv2-game-slot:nth-child(odd) .pv2-game-icon-ribbon {
    top: 7px; left: -22px;
    transform: rotate(-30deg);
    padding-left: 8px;
}

/* Bei "oben breit" ist die obere linke Ecke ein rechter Winkel. */
.pv2-game-slot:nth-child(even) .pv2-game-icon-ribbon {
    top: 6px; left: -26px;
    transform: rotate(-26deg);
    padding-left: 10px;
}
.pv2-game-icon-ribbon.beta { background: #2e9e4f; }

/* Reinflieg-Animation: von links / rechts */
@keyframes pv2FlyInLeft {
    from { opacity: 0; transform: translateX(-60vw) scale(0.6); }
    60% { opacity: 1; }
    to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes pv2FlyInRight {
    from { opacity: 0; transform: translateX(60vw) scale(0.6); }
    60% { opacity: 1; }
    to { opacity: 1; transform: translateX(0) scale(1); }
}
/* Der Flug gilt jetzt dem Rahmen - so kommt das Logo mit. Die alten
   Regeln auf dem Trapez bleiben stehen, falls die Kachel irgendwo ohne
   Rahmen benutzt wird. */
.pv2-game-icon.fly-left { animation: pv2FlyInLeft 0.55s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
.pv2-game-icon.fly-right { animation: pv2FlyInRight 0.55s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
.pv2-game-slot.fly-left { animation: pv2FlyInLeft 0.55s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
.pv2-game-slot.fly-right { animation: pv2FlyInRight 0.55s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
/* Der Rahmen bleibt VERBORGEN, bis sein Flug beginnt.
   opacity allein reichte nicht: die Kachel stand sichtbar an ihrem Platz
   und flog erst Sekundenbruchteile spaeter noch einmal herein - bei den
   hinteren Kacheln besonders auffaellig, weil deren Verzoegerung am
   groessten ist. visibility haelt den Platz frei, ohne dass etwas
   springt; die Animation blendet dann selbst ein. */
/* visibility nicht mehr noetig - "both" haelt den Startzustand */
.pv2-game-slot .pv2-game-icon { opacity: 1; }

/* ------------------------------------------------------------------
   Hauptlayout
   ------------------------------------------------------------------ */

.pv2-main {
    position: absolute;
    left: 0; right: 0;
    display: flex;
    align-items: stretch;
}
.pv2-main-center {
    flex: 1 1 auto;
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.pv2-main-content {
    flex: 1 1 auto;
    min-height: 0;
    padding: 8px 18px 12px 18px;
}

/* Info-Kachel-Raster im Hauptbereich */
.pv2-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
    align-items: start;
}
.pv2-grid .pv2-tile { min-width: 0; }

.pv2-list-entry {
    padding: 9px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 12px;
    color: #ddd;
}
.pv2-list-entry:last-child { border-bottom: none; }
.pv2-list-entry a { color: var(--g-accent); text-decoration: none; filter: brightness(1.25); }
.pv2-list-entry a:hover { text-decoration: underline; }
.pv2-list-title { color: #fff; font-size: 13px; font-weight: bold; margin-bottom: 2px; }
.pv2-list-meta { color: #9a90ad; font-size: 10px; margin-top: 3px; }

.pv2-table { width: 100%; border-collapse: collapse; font-size: 12px; color: #ddd; }
.pv2-table th {
    text-align: left;
    padding: 7px 16px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #9a90ad;
    border-bottom: 1px solid var(--pv2-border);
    white-space: nowrap;
}
.pv2-table td {
    padding: 6px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}
.pv2-table tr:last-child td { border-bottom: none; }
.pv2-table .r { text-align: right; }
.pv2-rank-1 { color: #ffd75e; font-weight: bold; }
.pv2-rank-2 { color: #d9d9e3; font-weight: bold; }
.pv2-rank-3 { color: #d8a35c; font-weight: bold; }

/* ------------------------------------------------------------------
   Account-Bereich unten links + Auswahl-Overlay
   ------------------------------------------------------------------ */

.pv2-account-card {
    position: absolute;
    left: 18px; bottom: 26px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 250px;
    max-width: 360px;
    padding: 10px 14px;
    cursor: pointer;
    transition: box-shadow 0.15s;
}
.pv2-account-card:hover { box-shadow: 0 0 16px var(--pv2-accent-soft), 0 8px 28px rgba(0,0,0,0.45); }
.pv2-account-card .pv2-acc-avatar {
    width: 46px; height: 46px;
    border-radius: 9px;
    background: #241a33 center/cover no-repeat;
    border: 1px solid var(--pv2-border);
    flex: 0 0 auto;
}
.pv2-acc-lines { min-width: 0; }
.pv2-acc-name { font-size: 14px; color: #fff; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv2-acc-sub { font-size: 11px; color: #b8aecb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv2-acc-switch { font-size: 10px; color: #9a90ad; margin-top: 2px; }

.pv2-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(5, 3, 10, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}
.pv2-overlay-box {
    width: min(1100px, 94vw);
    max-height: 84vh;
    display: flex;
    flex-direction: column;
}
.pv2-overlay-close {
    float: right;
    cursor: pointer;
    color: #b8aecb;
    font-size: 14px;
    padding: 2px 8px;
}
.pv2-overlay-close:hover { color: #fff; }

.pv2-acc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    padding: 16px;
    overflow-y: auto;
}
.pv2-acc-tile {
    position: relative;
    border: 1px solid var(--pv2-border);
    border-radius: 12px;
    background: var(--pv2-glass-soft);
    padding: 12px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
    color: #fff;
    overflow: hidden;
}
.pv2-acc-tile:hover { border-color: var(--pv2-accent); box-shadow: 0 0 14px var(--pv2-accent-soft); transform: translateY(-2px); }
.pv2-acc-tile.selected { border-color: var(--pv2-cyan); box-shadow: 0 0 14px rgba(95, 231, 249, 0.4); }
.pv2-acc-tile-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pv2-acc-tile-head img { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; }
.pv2-acc-tile-name { font-size: 13px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv2-acc-tile-sub { font-size: 11px; color: #b8aecb; }
.pv2-acc-tile-info { font-size: 11px; color: #ddd; line-height: 1.5; }

/* ------------------------------------------------------------------
   Freundesliste rechts
   ------------------------------------------------------------------ */

.pv2-friends {
    flex: 0 0 280px;
    width: 280px;
    z-index: 42; /* ueber Spiele-Leiste (15), Gradient (1) und Bar-Schatten (40) */
    display: flex;
    flex-direction: column;
    margin: 8px 12px 12px 0;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.65);
}
.pv2-friends-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 10px 14px;
    border-bottom: 1px solid var(--pv2-border);
}
.pv2-friends-head-title { font-size: 13px; font-weight: bold; color: #fff; letter-spacing: 0.4px; }
.pv2-friends-add {
    cursor: pointer;
    color: #cfc6dd;
    font-size: 15px;
    padding: 2px 7px;
    border-radius: 6px;
}
.pv2-friends-add:hover { background: rgba(178, 58, 242, 0.2); color: #fff; }

.pv2-friends-group {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #9a90ad;
    padding: 10px 14px 4px 14px;
}
.pv2-friend {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    cursor: pointer;
}
.pv2-friend:hover { background: rgba(178, 58, 242, 0.12); }
.pv2-friend-avatar {
    position: relative;
    width: 34px; height: 34px;
    border-radius: 8px;
    background: #241a33;
    border: 1px solid var(--pv2-border);
    display: flex; align-items: center; justify-content: center;
    color: #9a90ad;
    flex: 0 0 auto;
}
.pv2-friend-avatar .pv2-dot { position: absolute; right: -3px; bottom: -3px; border: 2px solid #14101e; width: 10px; height: 10px; }
.pv2-friend-lines { min-width: 0; flex: 1 1 auto; }
.pv2-friend-name { font-size: 12px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv2-friend-sub { font-size: 10px; color: #9a90ad; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv2-friend.offline .pv2-friend-name { color: #8a8a96; }
.pv2-friend-menu-btn { color: #9a90ad; padding: 2px 6px; border-radius: 5px; font-size: 13px; }
.pv2-friend-menu-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }

.pv2-friend-menu {
    position: absolute;
    right: 10px; top: 34px;
    z-index: 70;
    min-width: 170px;
    background: rgba(18, 14, 30, 0.97);
    border: 1px solid var(--pv2-border);
    border-radius: 10px;
    padding: 5px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

.pv2-request {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 12px;
    color: #ddd;
}
.pv2-request-btn {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 21px;
    padding: 0;
    border-radius: 6px;
    font-size: 11px;
    line-height: 1;
    border: 1px solid var(--pv2-border);
    flex: 0 0 auto;
}
.pv2-request-btn .glyphicons { font-size: 10px; top: 0; line-height: 1; }

/* kleines Info-Tooltip (statt title) */
.pv2-tip { position: relative; }
.pv2-tip:hover::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 7px);
    right: -4px;
    z-index: 120;
    padding: 5px 10px;
    border-radius: 7px;
    background: rgba(18, 14, 30, 0.97);
    border: 1px solid var(--pv2-border);
    color: #fff;
    font-size: 10px;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55);
    pointer-events: none;
}
.pv2-tip:hover::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    right: 6px;
    z-index: 120;
    border: 5px solid transparent;
    border-top-color: rgba(18, 14, 30, 0.97);
    pointer-events: none;
}
.pv2-request-btn.yes { background: rgba(59, 209, 111, 0.2); color: var(--pv2-online); }
.pv2-request-btn.yes:hover { background: rgba(59, 209, 111, 0.35); }
.pv2-request-btn.no { background: rgba(224, 72, 72, 0.2); color: var(--pv2-dnd); }
.pv2-request-btn.no:hover { background: rgba(224, 72, 72, 0.35); }

.pv2-input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid var(--pv2-border);
    border-radius: 8px;
    color: #fff;
    padding: 8px 10px;
    font-size: 13px;
    outline: none;
}
.pv2-input:focus { border-color: var(--pv2-accent); }

/* ------------------------------------------------------------------
   Chat-Fenster
   ------------------------------------------------------------------ */

.pv2-chats {
    position: fixed;
    right: 300px;
    bottom: 34px;
    z-index: 80;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    pointer-events: none;
}
.pv2-chats.friends-closed { right: 20px; }

.pv2-chat {
    width: 300px;
    height: 380px;
    display: flex;
    flex-direction: column;
    pointer-events: auto;
}
.pv2-chat-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--pv2-border);
    cursor: default;
}
.pv2-chat-head-name { flex: 1 1 auto; font-size: 12px; font-weight: bold; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv2-chat-head-btn { cursor: pointer; color: #9a90ad; font-size: 13px; padding: 1px 6px; border-radius: 5px; }
.pv2-chat-head-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }

.pv2-chat-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* eigene, schmale Leiste im Portal-Lila - die Standardleiste des
       Systems stach aus dem dunklen Fenster heraus */
    scrollbar-width: thin;
    scrollbar-color: rgba(178, 58, 242, 0.55) transparent;
}
.pv2-chat-body::-webkit-scrollbar { width: 7px; height: 7px; }
.pv2-chat-body::-webkit-scrollbar-thumb {
    background: rgba(178, 58, 242, 0.55);
    border-radius: 4px;
}
.pv2-chat-body::-webkit-scrollbar-thumb:hover { background: var(--g-accent, #b23af2); }
.pv2-chat-body::-webkit-scrollbar-track { background: transparent; }
.pv2-chat-msg {
    max-width: 82%;
    padding: 6px 10px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.45;
    color: #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}
.pv2-chat-msg.me { align-self: flex-end; background: rgba(178, 58, 242, 0.4); border-bottom-right-radius: 3px; }
.pv2-chat-msg.them { align-self: flex-start; background: rgba(255, 255, 255, 0.1); border-bottom-left-radius: 3px; }
.pv2-chat-time { font-size: 9px; color: #b8aecb; margin-top: 2px; }
.pv2-chat-day { align-self: center; font-size: 10px; color: #9a90ad; padding: 2px 0; }

.pv2-chat-input-row {
    display: flex;
    gap: 8px;
    padding: 9px;
    border-top: 1px solid var(--pv2-border);
    align-items: flex-end;      /* Knoepfe bleiben unten, wenn das Feld waechst */
}
/* Mitwachsendes Eingabefeld: ein textarea, damit ein hohes Bildzeichen
   oder ein langer Text umbrechen kann statt die Zeile zu sprengen. */
.pv2-chat-input {
    resize: none;
    overflow-y: hidden;
    line-height: 18px;
    min-height: 34px;
    max-height: 106px;          /* 4 Zeilen + Innenabstand, siehe MAX_ZEILEN */
    font-family: inherit;
    scrollbar-width: thin;
    scrollbar-color: rgba(178, 58, 242, 0.55) transparent;
}
.pv2-chat-input::-webkit-scrollbar { width: 7px; }
.pv2-chat-input::-webkit-scrollbar-thumb {
    background: rgba(178, 58, 242, 0.55);
    border-radius: 4px;
}
.pv2-chat-input::-webkit-scrollbar-track { background: transparent; }
.pv2-chat-input-row .pv2-input { flex: 1 1 auto; }
.pv2-chat-send {
    cursor: pointer;
    color: #fff;
    background: linear-gradient(180deg, #5a3277, #45265e);
    border: 1px solid #713b9e;
    border-radius: 8px;
    padding: 0 12px;
    display: flex; align-items: center;
    font-size: 14px;
}
.pv2-chat-send:hover { box-shadow: 0 0 10px var(--pv2-accent-soft); }

/* ------------------------------------------------------------------
   Spezial-Seiten (Mebula Legends / District Null / Season)
   ------------------------------------------------------------------ */

.pv2-hero {
    text-align: center;
    padding: 34px 20px;
}
.pv2-hero img { max-width: min(560px, 80%); height: auto; }
.pv2-hero-title { font-size: 30px; font-weight: bold; color: #fff; text-shadow: 0 0 16px var(--pv2-accent-soft); margin: 12px 0 6px 0; }
.pv2-hero-sub { font-size: 14px; color: #cfc6dd; margin-bottom: 18px; }

.pv2-countdown {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 18px 0;
    flex-wrap: wrap;
}
.pv2-countdown-cell {
    min-width: 76px;
    padding: 12px 8px;
    border-radius: 12px;
    background: var(--pv2-glass);
    border: 1px solid var(--pv2-border);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.pv2-countdown-nr { font-size: 30px; font-weight: bold; color: #fff; text-shadow: 0 0 10px rgba(46, 158, 79, 0.8); }
.pv2-countdown-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; color: #9a90ad; margin-top: 2px; }

.pv2-season-banner {
    display: inline-block;
    padding: 8px 22px;
    border-radius: 999px;
    background: rgba(224, 72, 72, 0.18);
    border: 1px solid rgba(224, 72, 72, 0.5);
    color: #ff9d9d;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

/* Mebuly-/Meister-Galerien */
.pv2-mebuly-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
    padding: 14px;
}
.pv2-mebuly {
    text-align: center;
    padding: 8px 4px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid transparent;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.pv2-mebuly:hover { border-color: var(--pv2-accent); background: rgba(178, 58, 242, 0.12); }
.pv2-mebuly img { width: 64px; height: 64px; object-fit: contain; image-rendering: auto; }
.pv2-mebuly-name { font-size: 10px; color: #ddd; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pv2-mebuly-type {
    display: inline-block;
    margin: 0 3px;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: bold;
    color: #f0e4fb;
    background: rgba(188, 112, 220, 0.2);
    border: 1px solid rgba(188, 112, 220, 0.55);
    text-shadow: 0 0 6px rgba(188, 112, 220, 0.6);
}

.pv2-master {
    display: flex;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    align-items: flex-start;
}
.pv2-master:last-child { border-bottom: none; }
.pv2-master-skin { width: 96px; flex: 0 0 auto; text-align: center; }
.pv2-master-skin img.skin { width: 90px; height: auto; }
.pv2-master-skin img.medal { width: 30px; height: 30px; margin-top: 4px; }
.pv2-master-name { font-size: 14px; font-weight: bold; color: #fff; margin-bottom: 6px; }
.pv2-master-team { display: flex; flex-wrap: wrap; gap: 8px; }
.pv2-master-mon { text-align: center; width: 54px; }
.pv2-master-mon img { width: 44px; height: 44px; object-fit: contain; }
.pv2-master-mon-lvl { font-size: 9px; color: #9a90ad; }

/* ------------------------------------------------------------------
   Blurry Farb-Gradient unter der Bar (Spiel-Farbwelt)
   ------------------------------------------------------------------ */

.pv2-topgrad {
    position: fixed;
    top: 64px;
    left: 0; right: 0;
    height: 240px;
    z-index: 0; /* immer HINTER dem Content, kein Blur auf Boxen */
    pointer-events: none;
    background: linear-gradient(180deg, var(--g-grad), transparent);
    transition: background 0.4s;
}

/* ------------------------------------------------------------------
   Linke Spiel-Sidebar (Welten + Account + Foren-Links)
   ------------------------------------------------------------------ */

.pv2-sidebar {
    position: fixed;
    top: 74px; /* direkt unter der Bar, volle Hoehe */
    left: 12px;
    bottom: 36px;
    width: 250px;
    z-index: 42; /* ueber dem Bar-Schatten (40) */
    display: none;
    flex-direction: column;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.65);
}
.pv2-sidebar.open { display: flex; }

.pv2-sidebar-worlds { flex: 1 1 auto; min-height: 0; }

.pv2-world {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background 0.12s, border-color 0.12s;
}
.pv2-world:hover { background: rgba(255, 255, 255, 0.06); }
.pv2-world.active {
    background: rgba(255, 255, 255, 0.08);
    border-left-color: var(--g-accent);
}
.pv2-world-name { flex: 1 1 auto; font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv2-world.active .pv2-world-name { font-weight: bold; text-shadow: 0 0 8px var(--g-glow); }
.pv2-world-online { font-size: 10px; color: #9a90ad; white-space: nowrap; }
/* lila Kennung: hier hat der Spieler einen Account */
.pv2-world-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--pv2-accent);
    box-shadow: 0 0 7px var(--pv2-accent);
    flex: 0 0 auto;
}
.pv2-world-dot.empty { background: transparent; box-shadow: none; border: 1px solid rgba(255,255,255,0.15); }

.pv2-sidebar-account {
    border-top: 1px solid var(--pv2-border);
    padding: 12px 14px;
}
.pv2-sidebar-account .pv2-acc-avatar {
    width: 46px; height: 46px;
    border-radius: 9px;
    background: #241a33 center/cover no-repeat;
    border: 1px solid var(--pv2-border);
    flex: 0 0 auto;
}
.pv2-sidebar-account-row {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin-bottom: 10px;
    padding: 9px 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(0, 0, 0, 0.55);
    box-shadow: inset 0 2px 7px rgba(0, 0, 0, 0.65), inset 0 -1px 0 rgba(255, 255, 255, 0.07);
}
.pv2-sidebar-account-row:hover { background: rgba(0, 0, 0, 0.42); }
.pv2-sidebar-links {
    border-top: 1px solid var(--pv2-border);
    padding: 8px 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}
.pv2-sidebar-links a {
    color: #b8aecb;
    font-size: 11px;
    text-decoration: none;
    cursor: pointer;
}
.pv2-sidebar-links a:hover { color: var(--g-accent); }

/* ------------------------------------------------------------------
   Horizontale Swipe-/Drag-Reihen im Contentbereich
   ------------------------------------------------------------------ */

.pv2-hrow { margin-bottom: 16px; }
.pv2-hrow-hl {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--g-hl);
    text-shadow: 0 0 8px var(--g-glow);
    margin: 0 2px 8px 2px;
}
.pv2-hscroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--g-glow) transparent;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
.pv2-hscroll.dragging { cursor: grabbing; scroll-behavior: auto; }
.pv2-hscroll img { -webkit-user-drag: none; user-drag: none; user-select: none; }
.pv2-hscroll::-webkit-scrollbar { height: 7px; }
.pv2-hscroll::-webkit-scrollbar-thumb { background: var(--g-glow); border-radius: 4px; }
.pv2-hscroll::-webkit-scrollbar-thumb:hover { background: var(--g-accent); }
.pv2-hscroll::-webkit-scrollbar-track { background: transparent; }

/* Karten duerfen in die Breite wachsen, wenn Platz da ist - aber nur bis zu
 * einer Grenze, ab der mehr Breite nichts mehr bringt.
 *
 * Der Gedanke: Ab rund 65 Zeichen je Zeile bricht der Text nicht mehr anders
 * um, die Karte wuerde also nur noch leeren Raum bekommen. Bei 12px Schrift
 * sind das ungefaehr 360px Inhalt, mit Innenabstand rund 390px (die grosse
 * Karte darf etwas mehr, sie traegt den Haupttext).
 *
 * flex-grow greift nur, wenn die Karten zusammen SCHMALER als der Bereich
 * sind. Sind es viele, bleiben sie auf ihrer Grundbreite und der Rest wird
 * angeschnitten - genau der gewuenschte Effekt: Hauptmeldung gross, eine
 * schmalere daneben, von der dritten ein Stueck als Hinweis, dass es
 * weitergeht. Die Hoehe bleibt in jedem Fall gleich. */
.pv2-hcard {
    flex: 0 0 270px;
    width: 270px;
    height: 230px; /* einheitliche Kartenhoehe - langer Inhalt scrollt */
    display: flex;
    flex-direction: column;
}
.pv2-hcard.big { flex-basis: 420px; width: 420px; }

/* ------------------------------------------------------------------
   Breitere Karten, wenn Platz da ist
   ------------------------------------------------------------------
   Ziel: eine grosse Hauptmeldung, eine schmalere daneben und von der
   dritten ein angeschnittenes Stueck als Hinweis, dass es weitergeht -
   statt vieler schmaler Spalten mit staendigem Zeilenumbruch.

   Gemessen wird der ZUR VERFUEGUNG STEHENDE BEREICH, nicht das Fenster:
   Seitenleiste und Freundesliste nehmen zusammen bis zu 578px weg, bei
   1600px Fenster bleiben nur 969px uebrig. Eine Abfrage auf die
   Fensterbreite wuerde also regelmaessig danebenliegen.

   Die Obergrenzen sind nicht frei gewaehlt: ab rund 65 Zeichen je Zeile
   bricht der Text nicht mehr anders um, breitere Karten bekaemen nur
   leeren Raum unten. Bei 12px Schrift sind das etwa 390px Inhalt. Die
   grosse Karte darf mehr, sie traegt den Haupttext.
   Die Hoehe bleibt in jeder Stufe gleich. */
.pv2-hrow { container-type: inline-size; }

@container (min-width: 1150px){
    .pv2-hcard      { flex-basis: 330px; width: 330px; }
    .pv2-hcard.big  { flex-basis: 520px; width: 520px; }
}
@container (min-width: 1450px){
    .pv2-hcard      { flex-basis: 390px; width: 390px; }
    .pv2-hcard.big  { flex-basis: 620px; width: 620px; }
}
.pv2-hcard.wide { flex-basis: 360px; width: 360px; height: 246px; } /* Ranking-Karten: Kopf + 5 Zeilen + Footer ohne Scrollen */
.pv2-hcard .pv2-list-entry { border-bottom: none; }
.pv2-hcard-head {
    padding: 10px 14px 8px 14px;
    font-size: 13px;
    font-weight: bold;
    color: var(--g-hl);
    border-bottom: 1px solid var(--pv2-border);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 0 auto;
}
.pv2-hcard-body {
    padding: 10px 14px;
    font-size: 12px;
    color: #ddd;
    line-height: 1;   /* 1.5 ergab bei 8px Schrift 12px Zeilenhoehe - das war der Platz ober- und unterhalb */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
.pv2-hcard-body .pv2-table td { max-width: none; }
.pv2-hcard-body .pv2-table td:nth-child(2) { overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.pv2-hcard-foot {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    border-top: 1px solid var(--pv2-border);
    background: rgba(0, 0, 0, 0.25);
    font-size: 10px;
    color: #9a90ad;
    white-space: nowrap;
}
.pv2-hcard a { color: var(--g-accent); text-decoration: none; filter: brightness(1.25); }
.pv2-hcard a:hover { text-decoration: underline; }

/* Kopf-Container eines Universums / einer Welt */
.pv2-worldhead { margin-bottom: 16px; }
.pv2-worldhead-top {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px 10px 18px;
    flex-wrap: wrap;
}
.pv2-headpill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    color: #cfd8e8;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--pv2-border);
    white-space: nowrap;
}
.pv2-worldhead-name {
    font-size: 24px;
    font-weight: bold;
    color: var(--g-hl);
    text-shadow: 0 0 12px var(--g-glow);
}
.pv2-worldhead-sub { font-size: 12px; color: #9a90ad; }
.pv2-stats {
    display: flex;
    gap: 14px;
    padding: 10px 18px 16px 18px;
    flex-wrap: wrap;
    align-items: stretch;
}
.pv2-stat {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--pv2-border);
    border-radius: 10px;
    padding: 10px 16px;
    min-width: 110px;
}
.pv2-stat.big { min-width: 170px; }
.pv2-stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: #9a90ad; }
.pv2-stat-value { font-size: 17px; font-weight: bold; color: #fff; margin-top: 2px; }
.pv2-stat.big .pv2-stat-value { font-size: 26px; text-shadow: 0 0 10px var(--g-glow); }
.pv2-stat-place { font-size: 11px; color: var(--g-accent); margin-top: 1px; }

/* ------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------ */

.pv2-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 26px;
    z-index: 100;
    display: flex;
    align-items: center;
    padding: 0 14px;
    box-sizing: border-box;
    background: rgba(20, 16, 30, 0.95);
    border-top: 1px solid var(--pv2-border);
    box-shadow: 0 0 10px 0 #000;
    font-size: 11px;
}
.pv2-footer a, .pv2-footer .pv2-footer-link {
    color: #b8aecb;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.pv2-footer a:hover, .pv2-footer .pv2-footer-link:hover { color: #fff; }
.pv2-footer-left { flex: 0 0 auto; margin-right: 22px; color: #9a90ad; }
.pv2-footer-links { flex: 1 1 auto; display: flex; gap: 20px; align-items: center; min-width: 0; overflow: hidden; }
.pv2-footer-right { flex: 0 0 auto; }

.pv2-footer-flag { position: relative; cursor: pointer; padding: 2px 4px; }
.pv2-footer-flag img { height: 13px; display: block; }
.pv2-footer-flag .pv2-flag-drop {
    display: none;
    position: absolute;
    /* ueberlappt das Flaggen-Icon minimal, damit die Hover-Kette beim
       Hochfahren mit der Maus nicht abreisst */
    bottom: calc(100% - 3px); right: 0;
    z-index: 110;
    background: rgba(18, 14, 30, 0.97);
    border: 1px solid var(--pv2-border);
    border-radius: 10px;
    padding: 8px;
    width: 420px;
}
.pv2-footer-flag:hover .pv2-flag-drop { display: block; }

/* ------------------------------------------------------------------
   Bar-Politur: deutlicher Schatten unter der Bar + modernisierter
   Lichtstreifen (laeuft weiter im bitmeup-bar-container, z-index 7)
   ------------------------------------------------------------------ */

body.pv2 div.bitmeup_bar {
    border-bottom: none !important;
    z-index: 40 !important;
}
/* beim Hover (z. B. User-Dropdown offen) hebt sich die Bar ueber die
   Seiten-Panels (42), sonst liegen die Panels ueber dem Bar-Schatten */
body.pv2 div.bitmeup_bar:not(#bitmeup-bar-container):hover {
    z-index: 50 !important;
}
body.pv2 #bitmeup\.bar:hover #bitmeup-bar-container {
    z-index: 51 !important;
}
/* alter Leuchtstreifen aus; die Bar wirft ihren kraeftigen dunklen
   Schatten wie gehabt - und darauf laeuft ein klar getrennter, starker
   Lichtfleck entlang, der die Stelle im Schatten erleuchtet */
body.pv2 .bitmeup_border_bar { display: none; }
body.pv2 #bitmeup-bar-container {
    /* UEBER dem Bar-Schatten (40), unter den Seiten-Panels (42); die obere
       Ellipsen-Haelfte wird per clip-path gekappt statt hinter der Bar versteckt */
    z-index: 41 !important;
    box-shadow: none !important;
    overflow: visible !important;
}
body.pv2 div.bitmeup_bar:not(#bitmeup-bar-container) {
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.8) !important;
}
/* Lichtlauf im Bar-Schatten: heller Kern + breiter Glut-Halo, beide
   additiv (screen) - das leuchtet, statt nur aufzuhellen */
body.pv2 #bitmeup-bar-container::after {
    content: '';
    position: absolute;
    top: 100%;
    margin-top: -11px; /* Mittelpunkt auf der Bar-Unterkante */
    clip-path: inset(50% -120px -120px -120px); /* oben kappen, Glow unten frei */
    left: -480px;
    width: 460px;
    height: 22px; /* flacher = laenglicher Lichtstrich */
    background: radial-gradient(ellipse 50% 50% at center,
        rgba(255, 255, 255, 1) 0%,
        rgba(160, 245, 255, 1) 20%,
        rgba(95, 231, 249, 0.9) 45%,
        rgba(178, 58, 242, 0.75) 68%,
        transparent 92%);
    filter: blur(5px) saturate(2.4) brightness(1.8)
            drop-shadow(0 0 16px rgba(95, 231, 249, 0.9));
    pointer-events: none;
    animation: pv2BarLight 7s linear infinite;
}
/* breiter, weicher Halo, laeuft synchron mit */
body.pv2 #bitmeup-bar-container::before {
    content: '';
    position: absolute;
    top: 100%;
    margin-top: -17px; /* Mittelpunkt auf der Kante */
    clip-path: inset(50% -120px -120px -120px);
    left: -680px;
    width: 640px;
    height: 34px; /* flach + breit: gestreckte Glut */
    background: radial-gradient(ellipse 50% 50% at center,
        rgba(95, 231, 249, 0.5) 0%,
        rgba(178, 58, 242, 0.38) 50%,
        transparent 85%);
    filter: blur(16px) saturate(2.2) brightness(1.6);
    pointer-events: none;
    animation: pv2BarLightHalo 7s linear infinite;
}
@keyframes pv2BarLight {
    0%   { left: -480px; }
    100% { left: 100%; }
}
@keyframes pv2BarLightHalo {
    0%   { left: -680px; }
    100% { left: 100%; }
}

/* ------------------------------------------------------------------
   Klassischer Popup-Rahmen (Randanimation + Box-Verlauf) fuer die
   neuen Dialoge + zweigeteilter "Spieler hinzufuegen"-Dialog
   ------------------------------------------------------------------ */

.pv2-box {
    position: relative;
    padding: 3px;
    overflow: hidden;
}
.pv2-box-content {
    position: relative;
    background: linear-gradient(#333D5F 15%, #33585F 60%, #335F4F 100%);
    border-radius: 3px;
    color: #fff;
}
.pv2-box-close {
    position: absolute;
    top: 8px; right: 10px;
    z-index: 5;
    width: 26px; height: 26px;
    line-height: 26px;
    text-align: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}
.pv2-box-close:hover { background: rgba(224, 72, 72, 0.6); }

.pv2-addbox { display: flex; width: 700px; max-width: 92vw; }
.pv2-addpanel {
    position: relative;
    flex: 1 1 50%;
    min-height: 430px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.pv2-addpanel + .pv2-addpanel { border-left: 2px solid rgba(0, 0, 0, 0.45); }
.pv2-addpanel-bg {
    position: absolute;
    inset: 0;
    background-position: center top;
    background-size: cover;
}
.pv2-addpanel-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5,3,10,0.25) 0%, rgba(5,3,10,0.1) 35%, rgba(5,3,10,0.88) 78%, rgba(5,3,10,0.95) 100%);
}
.pv2-addpanel-title {
    position: absolute;
    top: 12px; left: 0; right: 0;
    text-align: center;
    font-family: 'Arial Black', Arial, sans-serif;
    font-weight: 900;
    font-size: 16px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.9), 0 2px 4px rgba(0, 0, 0, 0.8);
}
.pv2-addpanel-descr {
    margin: 8px 14px 0 14px;
    font-family: Arial, sans-serif;
    font-weight: normal;
    text-transform: none;
    letter-spacing: 0;
    font-size: 11px;
    line-height: 1.45;
    color: #e6e0f0;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

.pv2-addpanel-ui {
    position: relative;
    padding: 14px 16px 16px 16px;
    font-size: 11px;
    color: #cfc6dd;
}
.pv2-addpanel-ui .pv2-btn { margin-top: 8px; }

/* Eingabezeile mit eingebettetem Knopf (Badge rechts IN der Zeile) */
.pv2-inputrow {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--pv2-border);
    border-radius: 8px;
    padding: 3px 3px 3px 11px;
}
.pv2-inputrow:focus-within { border-color: var(--pv2-accent); }
.pv2-inputrow input {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 13px;
    padding: 6px 8px 6px 0;
}
.pv2-inputrow-btn {
    flex: 0 0 auto;
    padding: 6px 14px;
    border-radius: 6px;
    background: var(--g-btn);
    border: 1px solid var(--g-btn-border);
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: box-shadow 0.15s;
}
.pv2-inputrow-btn:hover { box-shadow: 0 0 10px var(--g-glow); }

/* "+ Spieler hinzufuegen" unten in der Freundesliste: Spiel-Farbe */
.pv2-friends-addbtn {
    margin: 8px 10px 10px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 10px;
    border-radius: 9px;
    background: var(--g-btn);
    border: 1px solid var(--g-btn-border);
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: box-shadow 0.15s;
}
.pv2-friends-addbtn .glyphicons {
    font-size: 11px;
    top: 0;
    line-height: 1;
}
.pv2-friends-addbtn span { line-height: 1; }
.pv2-friends-addbtn:hover { box-shadow: 0 0 12px var(--g-glow); }

/* Sidebar: Wechsel-Kennzeichnung am Account */
.pv2-acc-switch-ico {
    margin-left: auto;
    flex: 0 0 auto;
    color: #b8aecb;
    font-size: 13px;
    padding: 4px 6px;
    border-radius: 6px;
    border: 1px solid var(--pv2-border);
    background: rgba(255, 255, 255, 0.05);
}
.pv2-sidebar-account-row:hover .pv2-acc-switch-ico {
    color: #fff;
    border-color: var(--g-accent);
    box-shadow: 0 0 8px var(--g-glow);
}

/* Ranking-Kategorie-Tabs im Welt-Kopf */
.pv2-cat-tabs {
    display: flex;
    gap: 6px;
    padding: 0 18px 10px 18px;
    flex-wrap: wrap;
}
.pv2-cat-tab {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    color: #cfc6dd;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--pv2-border);
    cursor: pointer;
    user-select: none;
}
.pv2-cat-tab:hover { color: #fff; border-color: var(--g-accent); }
.pv2-cat-tab.active {
    color: #fff;
    background: var(--g-btn);
    border-color: var(--g-btn-border);
    font-weight: bold;
}

/* Ranking-Kacheln im Welt-Kopf (horizontal durchziehbar) */
.pv2-rankcard {
    /* waechst mit dem laengsten Namen: bei fester Breite wurden die
       Punkte rechts abgeschnitten. Der Streifen scrollt ohnehin
       waagerecht, breite Karten stoeren das Layout also nicht. */
    flex: 0 0 auto;
    width: auto;
    min-width: 220px;
    max-width: 420px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--pv2-border);
    border-radius: 10px;
    overflow: hidden;
}
.pv2-rankcard-hl {
    padding: 8px 14px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--g-hl);
    text-shadow: 0 0 8px var(--g-glow);
    border-bottom: 1px solid var(--pv2-border);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02));
}

/* "Mein Account"-Detailkachel */
.pv2-myacc {
    display: flex;
    gap: 16px;
    padding: 14px 18px;
    align-items: center;
    flex-wrap: wrap;
}
.pv2-myacc-avatar {
    width: 64px; height: 64px;
    border-radius: 12px;
    background: #241a33 center/cover no-repeat;
    border: 1px solid var(--pv2-border);
    flex: 0 0 auto;
}

/* Inventar: die beiden Bereiche (vorhandene/verwendete) stehen im neuen
   Layout IMMER untereinander - unabhaengig von der Contentbreite */
body.pv2 .item-container {
    display: block !important; /* main.css setzt inline-block */
    margin: 20px auto 0 auto;
    width: min(600px, 96%);
}

/* ------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------ */

@media (max-width: 1500px) {
    .pv2-friends { flex-basis: 250px; width: 250px; }
    .pv2-chats { right: 270px; }
}
@media (max-width: 1200px) {
    .pv2-bar-tile { width: 118px; }
    .pv2-game-icon { width: 84px; height: 50px; }
    .pv2-game-icon-label { font-size: 8px; }
    .pv2-account-card { min-width: 210px; }
}

/* ------------------------------------------------------------------
   Hinweis auf die BITMEUP-App in der Leiste (nur im Browser)
   Sitzt links neben Zahnrad und Freunde-Symbol. Wird bei schmalen
   Fenstern ausgeblendet, damit er dem Spielerbereich nicht den Platz
   nimmt - dort ist der Hinweis verzichtbar, die Spiele nicht.
   ------------------------------------------------------------------ */

.bmu-app-teaser {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-right: 6px;
    padding: 6px 12px 6px 8px;
    border-radius: 10px;
    text-decoration: none;
    white-space: nowrap;
    background: linear-gradient(180deg, rgba(120, 60, 190, 0.35), rgba(45, 24, 76, 0.4));
    border: 1px solid rgba(178, 58, 242, 0.45);
    transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.bmu-app-teaser:hover {
    background: linear-gradient(180deg, rgba(150, 78, 230, 0.5), rgba(60, 32, 100, 0.5));
    border-color: var(--pv2-accent);
    box-shadow: 0 0 14px var(--pv2-accent-soft);
}

.bmu-app-teaser-ico {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 7px;
    background: rgba(178, 58, 242, 0.25);
    color: #eabcff;
}
.bmu-app-teaser-ico .glyphicons { font-size: 13px; top: 0; }

.bmu-app-teaser-text { display: flex; flex-direction: column; line-height: 1.25; }
.bmu-app-teaser-hl { font-size: 12px; color: #fff; }
.bmu-app-teaser-sub { font-size: 10px; color: #c3b3dd; }

/* Sanft blinkender Rand, damit er auffällt, ohne zu nerven */
@keyframes bmu-app-teaser-pulse {
    0%, 100% { box-shadow: 0 0 0 rgba(178, 58, 242, 0); }
    50%      { box-shadow: 0 0 13px rgba(178, 58, 242, 0.45); }
}
.bmu-app-teaser { animation: bmu-app-teaser-pulse 4.5s ease-in-out infinite; }
.bmu-app-teaser:hover { animation: none; }

/* Kein Platz mehr: erst der Zweitzeiler, dann der ganze Knopf */
@media (max-width: 1420px) {
    .bmu-app-teaser-sub { display: none; }
    .bmu-app-teaser-hl { font-size: 11.5px; }
}
@media (max-width: 1180px) {
    .bmu-app-teaser { display: none; }
}


/* ------------------------------------------------------------------
   Herunterladen-Seite im Portal (bitmeup.appdownload)
   Muss HIER stehen und nicht in Download.css: die wird nur von der
   Download-Seite selbst geladen, im Portal gaebe es die Regeln nicht -
   das Element waere dann ohne Groesse und Position, also unsichtbar.
   ------------------------------------------------------------------ */

#bmu-appdl {
    position: fixed;
    top: 64px;                 /* Hoehe der Leiste */
    left: 0; right: 0; bottom: 0;
    z-index: 44;          /* ueber Seitenleiste und Freundesliste (beide 42),
                             unter der Leiste oben - sonst bleibt der
                             Spielinhalt sichtbar */
    background: linear-gradient(160deg, rgba(14, 10, 24, 0.97), rgba(8, 6, 15, 0.99));
}
#bmu-appdl iframe {
    width: 100%;
    height: 100%;
    display: block;
    background: transparent;
}
.bmu-appdl-close {
    position: absolute;
    top: 14px; right: 20px;
    z-index: 2;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #b8aecb;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.bmu-appdl-close:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }


/* Solange die Herunterladen-Seite offen ist, gehoert der Lichtschein der
   Leiste nach vorne. Sonst sieht man ihn nur beim Zeigen auf die Leiste
   (dann springt sie samt Licht auf z50/51) und sobald die Maus weg ist,
   verschwindet er hinter dem dunklen Kasten. */
/* Die Grundregel weiter oben setzt z-index 41 mit !important - deshalb
   hier ebenfalls, sonst bliebe der Schein hinter dem Kasten. 45 liegt
   ueber dem Overlay (44) und unter der Bar beim Zeigen (50/51). */
body.pv2.bmu-appdl-open #bitmeup-bar-container,
body.pv2.bmu-chatpage-open #bitmeup-bar-container { z-index: 45 !important; }


/* ==================================================================
   Grosse Auflösungen
   ==================================================================
   Auf einem 4K-Schirm blieb alles auf seiner Pixelgroesse stehen: die
   Spielkacheln wurden zu Briefmarken, die Beschriftungen kaum lesbar.
   Zwei Stufen heben Leiste, Kacheln und Schriftgrade an.

   Die Leistenhoehe wird von updateSiteSize() gemessen, nicht angenommen -
   der Inhalt darunter rutscht also automatisch mit.
   ================================================================== */

@media (min-width: 2200px){
    .pv2-bar            { height: 80px; }
    .pv2-bar-right      { height: 80px; }
    .pv2-bar-tile       { width: 188px; height: 78px; }
    .pv2-bar-logo .pv2-logo-buehne { transform: scale(1.18); }
    .pv2-bar-tile-label { font-size: 13px; }
    .pv2-user-name      { font-size: 15px; }
    .pv2-user-status    { font-size: 13px; }
    .pv2-user-avatar    { width: 46px; height: 46px; }
    .pv2-tile-hl        { font-size: 15px; }
    .pv2-hcard-head     { font-size: 15px; }
    .pv2-hcard-body     { font-size: 13.5px; }
    .pv2-world-name     { font-size: 14px; }
    .pv2-world-online   { font-size: 12px; }
    .pv2-footer         { height: 30px; font-size: 12.5px; }
    .pv2-btn-play       { font-size: 15px; }
}

@media (min-width: 2900px){
    .pv2-bar            { height: 96px; }
    .pv2-bar-right      { height: 96px; }
    .pv2-bar-tile       { width: 230px; height: 94px; }
    .pv2-bar-logo .pv2-logo-buehne { transform: scale(1.38); }
    .pv2-bar-tile-label { font-size: 15px; }
    .pv2-user-name      { font-size: 17px; }
    .pv2-user-status    { font-size: 14px; }
    .pv2-user-avatar    { width: 54px; height: 54px; }
    .pv2-tile-hl        { font-size: 17px; }
    .pv2-hcard-head     { font-size: 17px; }
    .pv2-hcard-body     { font-size: 15px; }
    .pv2-world-name     { font-size: 16px; }
    .pv2-world-online   { font-size: 13px; }
    .pv2-footer         { height: 34px; font-size: 14px; }
    .pv2-btn-play       { font-size: 17px; }
}


/* Teaser-Bild in einer Meldung.
   float statt Rasterspalte: so laeuft der Text um das Bild herum und
   fuellt darunter die volle Breite - bei kurzen Meldungen entsteht sonst
   eine halbleere Spalte neben dem Bild. Die Karten haben feste Hoehe, das
   Bild darf sie also nicht sprengen. */
.pv2-hcard-img {
    float: left;
    width: 92px;
    height: 92px;
    margin: 1px 11px 7px 0;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--pv2-border);
    box-shadow: 0 2px 10px rgba(0,0,0,0.45);
    shape-margin: 8px;
}
/* Auf breiteren Karten darf das Bild groesser sein - Platz ist da */
@container (min-width: 1150px){
    .pv2-hcard.big .pv2-hcard-img { width: 118px; height: 118px; }
}
@media (min-width: 2200px){
    .pv2-hcard-img { width: 112px; height: 112px; }
    .pv2-hcard.big .pv2-hcard-img { width: 140px; height: 140px; }
}


/* ------------------------------------------------------------------
   Events eines Universums
   ------------------------------------------------------------------
   Mehrere Events stehen wie die Meldungen in einer waagerecht
   scrollbaren Reihe. Laeuft nur EINES, wirkt eine schmale Kachel in
   der langen Zeile verloren - dann wird sie ueber die volle Breite
   gezogen und das Bild waechst mit. */

.pv2-evcard {
    flex: 0 0 300px;
    width: 300px;
    height: 132px;
    display: flex;
    overflow: hidden;
    position: relative;
}
.pv2-evrow.allein { display: block; }
.pv2-evcard.breit {
    flex: 1 1 auto;
    width: auto;
    height: 168px;
}

.pv2-ev-img {
    flex: 0 0 132px;
    background: #1a1226 center/cover no-repeat;
    border-right: 1px solid var(--pv2-border);
}
.pv2-evcard.breit .pv2-ev-img { flex-basis: 260px; }

.pv2-ev-txt {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    padding: 12px 15px;
}
.pv2-ev-name {
    font-size: 15px;
    font-weight: bold;
    color: var(--g-hl);
    line-height: 1.25;
}
.pv2-evcard.breit .pv2-ev-name { font-size: 19px; }

/* Die Restzeit laeuft im Sekundentakt - feste Ziffernbreite, sonst
   zappelt die Zeile bei jedem Tick. */
.pv2-ev-time {
    font-size: 13px;
    color: #d9b7ff;
    font-variant-numeric: tabular-nums;
}
.pv2-evcard.breit .pv2-ev-time { font-size: 15px; }

@container (min-width: 1150px){
    .pv2-evcard { flex-basis: 360px; width: 360px; }
}
@media (min-width: 2200px){
    .pv2-evcard { height: 150px; }
    .pv2-ev-name { font-size: 17px; }
    .pv2-ev-time { font-size: 14px; }
}

/* Ablauf des Monats, rechts in der breiten Event-Kachel.
   Nur dort - in der schmalen Kachel fehlt der Platz.

   Die Bilder stehen VOLL vorne (kein rundes Icon): sie sind die eigentliche
   Wiedererkennung, ein 20px-Kreis macht daraus Konfetti. Der Name traegt
   die Zeile, das Datum ordnet nur ein - deshalb kursiv und zurueckhaltend. */
.pv2-ev-rot {
    flex: 0 0 330px;
    border-left: 1px solid var(--pv2-border);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    background: rgba(0, 0, 0, 0.18);
}
.pv2-ev-rot-hl {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #8d82a3;
    margin-bottom: 4px;
}
.pv2-ev-rot-week {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px 6px;
    border-radius: 7px;
    color: #a99dbd;
}
.pv2-ev-rot-week.aktiv {
    background: rgba(178, 58, 242, 0.16);
    color: #fff;
}
/* Bild voll, nicht beschnitten aufs Rund */
.pv2-ev-rot-ico {
    flex: 0 0 auto;
    width: 54px; height: 30px;
    border-radius: 5px;
    background: #1a1226 center/cover no-repeat;
    border: 1px solid var(--pv2-border);
}
.pv2-ev-rot-week.aktiv .pv2-ev-rot-ico {
    border-color: rgba(178, 58, 242, 0.7);
    box-shadow: 0 0 8px rgba(178, 58, 242, 0.35);
}
.pv2-ev-rot-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #ddd4ea;
}
.pv2-ev-rot-week.aktiv .pv2-ev-rot-name { color: #fff; }
.pv2-ev-rot-span {
    flex: 0 0 auto;
    font-size: 10.5px;
    font-style: italic;
    color: #7d7292;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 1100px){
    .pv2-ev-rot { display: none; }
}

/* Zeitraum unter dem Eventnamen - ordnet nur ein, deshalb zurueckhaltend */
.pv2-ev-span {
    font-size: 12px;
    font-style: italic;
    color: #9a90ad;
    margin-top: -2px;
}
.pv2-evcard.breit .pv2-ev-span { font-size: 13.5px; }

/* Der Countdown sitzt unten am Container und darf gross sein - er ist die
   Information, wegen der man hinschaut. margin-top:auto schiebt ihn nach
   unten, ohne die Kachelhoehe zu veraendern. */
.pv2-evcard.breit .pv2-ev-txt { justify-content: flex-start; padding-top: 16px; }
.pv2-evcard.breit .pv2-ev-time {
    margin-top: auto;
    font-size: 21px;
    font-weight: 600;
    color: #e2c9ff;
    letter-spacing: 0.01em;
}

/* --- Ablauf-Liste: enger, mit Trennlinien --------------------------
   Die Ueberschrift wurde bei der Kachelhoehe abgeschnitten. Sie ist
   entbehrlich - die Liste erklaert sich selbst - und erscheint deshalb
   erst wieder, wenn genug Platz da ist (grosse Auflösungen). Die Zeilen
   ruecken zusammen und bekommen duenne Trenner, damit vier Eintraege
   ruhig wirken statt gedraengt. */
.pv2-ev-rot { gap: 0; padding: 8px 12px; }
.pv2-ev-rot-hl { display: none; }

.pv2-ev-rot-week {
    padding: 4px 6px;
    gap: 9px;
    border-top: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 0;
}
.pv2-ev-rot-week:first-of-type { border-top: none; }
/* die laufende Woche bleibt hervorgehoben, aber ohne Kasten-Optik */
.pv2-ev-rot-week.aktiv {
    background: rgba(178, 58, 242, 0.14);
    border-radius: 6px;
    border-top-color: transparent;
}
.pv2-ev-rot-week.aktiv + .pv2-ev-rot-week { border-top-color: transparent; }
.pv2-ev-rot-ico { width: 50px; height: 27px; }

/* Ab hier ist Luft fuer die Ueberschrift */
@media (min-width: 1800px){
    .pv2-ev-rot-hl { display: block; margin-bottom: 5px; }
    .pv2-ev-rot { padding: 10px 14px; }
}

/* ==================================================================
   Spielkacheln: Hintergrund im Trapez, Logo darueber hinausragend
   ==================================================================
   Das Trapez entsteht per clip-path - und clip-path beschneidet auch
   alle Kinder. Ein Logo, das ueber den Rand ragen soll, kann darin
   also nicht liegen. Deshalb umschliesst pv2-game-slot beides ohne
   Beschnitt: das Trapez mit dem Hintergrund, und darueber das Logo.
   ================================================================== */

.pv2-game-slot {
    position: relative;
    flex: 0 0 auto;
    width: 108px;
    height: 62px;
    cursor: pointer;
    /* KEIN overflow/clip - sonst waere der Ueberstand wieder weg */
    transition: transform 0.18s;
}
.pv2-game-slot:hover { transform: translateY(-3px) scale(1.05); }

/* Das Trapez selbst traegt weiterhin Rahmen, Beschnitt und Zustand.
   Die Hover-Bewegung sitzt jetzt am Slot, damit das Logo mitgeht. */
.pv2-game-slot .pv2-game-icon {
    width: 100%;
    height: 100%;
    transition: filter 0.18s, background 0.18s;
}
.pv2-game-slot:hover .pv2-game-icon { transform: none; }

.pv2-game-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Das Logo: gross, ueber dem Trapez, Ueberstand ausdruecklich gewollt.
   pointer-events aus, damit der Klick weiter die Kachel trifft. */
.pv2-game-logo {
    position: absolute;
    left: 50%;
    width: 96%;
    height: auto;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 3;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.75));
    transition: width 0.18s;
}
.pv2-game-slot:hover .pv2-game-logo { width: 100%; }

/* --- Position und Groesse je Spiel ---
   Prozentwerte beziehen sich auf die Kachel (108x62). 4px sind rund 6,5%,
   10px rund 16%, 15px rund 24% der Hoehe. */

/* SpaceInvasion */
.pv2-game-slot.si .pv2-game-logo          { bottom: -1%;  width: 92%; }
.pv2-game-slot.si:hover .pv2-game-logo    { width: 97%; }

/* District Null: 10% groesser, heller und farbiger, mit Lichtschein
   dahinter - das Logo ist filigran und ging sonst im Stadtbild unter */
.pv2-game-slot.districtnull .pv2-game-logo {
    top: 5%;
    width: 60%;
    filter: brightness(1.12) saturate(1.38)
            drop-shadow(0 0 7px rgba(42, 44, 50, 0.62))
            drop-shadow(0 0 14px rgba(42, 44, 50, 0.45))
            drop-shadow(0 2px 5px rgba(0, 0, 0, 0.55));
}
.pv2-game-slot.districtnull:hover .pv2-game-logo { width: 65%; }
/* die Nova: liegt zwischen Hintergrund und Logo */
.pv2-game-slot.districtnull::before {
    content: '';
    position: absolute;
    left: 50%; top: 30%;
    width: 74%; height: 74%;
    transform: translateX(-50%);
    background: radial-gradient(circle,
        rgba(0, 0, 0, 0.90) 0%,
        rgba(0, 0, 0, 0.68) 38%,
        rgba(0, 0, 0, 0.34) 62%,
        rgba(0, 0, 0, 0) 74%);
    pointer-events: none;
    z-index: 2;
}

/* Damoria: 5% groesser, 4px tiefer */
.pv2-game-slot.damoria .pv2-game-logo         { bottom: -6%; width: 70%; }
.pv2-game-slot.damoria:hover .pv2-game-logo   { width: 74%; }

/* Mebula: 20% groesser, 10px hoeher */
.pv2-game-slot.mebula .pv2-game-logo          { bottom: -11%; width: 67%; }
.pv2-game-slot.mebula:hover .pv2-game-logo    { width: 71%; }

/* Mebula Legends: 20% groesser, 15px hoeher */
.pv2-game-slot.mlegends .pv2-game-logo        { bottom: -8%; width: 73%; }
.pv2-game-slot.mlegends:hover .pv2-game-logo  { width: 77%; }

/* Nexus Raid: Versuch mit dem Logo unten, leicht ueberlappend, 10% kleiner.
   Bei diesem Spiel steht der Name als einziger nicht unten im Motiv.

   FRUEHERER STAND, falls wir zurueck wollen:
     top: 50%; transform: translate(-50%, -50%); width: 93%;
     hover: width: 98%;
*/
.pv2-game-slot.nexus .pv2-game-logo        { bottom: -3%; width: 84%; }
.pv2-game-slot.nexus:hover .pv2-game-logo  { width: 88%; }

/* Das Baendchen liegt wieder IM Trapez, damit clip-path es schraeg
   abschneidet. Das Logo sitzt im Rahmen darueber und deckt es
   deshalb automatisch ab - ein eigener z-index eruebrigt sich. */

/* Die Trapeze zeigen abwechselnd in die andere Richtung - das ergibt die
   ineinandergreifende Reihe. Frueher haing das an
   .pv2-game-icon:nth-child(); seit dem Umbau ist das Trapez aber immer das
   erste Kind SEINES Rahmens, damit griff ueberall dieselbe Form. Gezaehlt
   werden muss also der Rahmen. */
.pv2-game-slot:nth-child(odd)  .pv2-game-icon { clip-path: polygon(12% 0%, 88% 0%, 100% 100%, 0% 100%); }
.pv2-game-slot:nth-child(even) .pv2-game-icon { clip-path: polygon(0% 0%, 100% 0%, 88% 100%, 12% 100%); }



@media (max-width: 1200px){
    .pv2-game-slot { width: 84px; height: 50px; }
}




.pv2-game-icon { padding: 1px; }

/* Umbrueche im Meldungstext bleiben eng beieinander - der Verfasser hat
   sie gesetzt, sie sollen den Text gliedern, ihn aber nicht auseinander-
   ziehen. */
.pv2-hcard-body br { line-height: 1.15; }


/* ------------------------------------------------------------------ */
/* Rangspalte: schmaler abgeschraegter Kasten                          */
/* ------------------------------------------------------------------ */
.pv2-table td.pv2-rk {
    /* nur so breit wie noetig - der Platz gehoert Name und Punkten */
    width: 1px;
    white-space: nowrap;
    padding-right: 10px !important;
}
.pv2-rk-box {
    display: inline-block;
    min-width: 22px;
    padding: 1px 7px;
    background: rgba(255, 255, 255, 0.10);
    border-left: 2px solid var(--g-accent, var(--pv2-accent));
    /* leichte Schraege - die Ziffer darin wird gegengeneigt */
    transform: skewX(-12deg);
    font-size: 11px;
    font-weight: bold;
    color: #cfd2dc;
    text-align: center;
    line-height: 1.55;
}
.pv2-rk-box > span { display: inline-block; transform: skewX(12deg); }
.pv2-rk-box.pv2-rank-1 { background: rgba(255, 215, 94, 0.20);  border-left-color: #ffd75e; color: #ffd75e; }
.pv2-rk-box.pv2-rank-2 { background: rgba(217, 217, 227, 0.18); border-left-color: #d9d9e3; color: #e6e6ee; }
.pv2-rk-box.pv2-rank-3 { background: rgba(216, 163, 92, 0.20);  border-left-color: #d8a35c; color: #d8a35c; }

/* Namen nicht umbrechen - sonst waechst die Karte in die Hoehe statt
   in die Breite */
.pv2-rankcard .pv2-table td { white-space: nowrap; }
.pv2-rankcard .pv2-table td:nth-child(2) {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ------------------------------------------------------------------ */
/* Urlaubsmodus im Account-Kasten                                      */
/* ------------------------------------------------------------------ */
.pv2-vac {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin: 0 18px 16px 18px;
    padding: 12px 16px;
    border: 1px solid rgba(232, 163, 61, 0.35);
    border-left: 3px solid var(--pv2-afk);
    border-radius: 10px;
    background: rgba(232, 163, 61, 0.08);
}
.pv2-vac-icon { font-size: 22px; line-height: 1; color: var(--pv2-afk); }
.pv2-vac-hl {
    font-size: 13px; font-weight: bold; color: var(--pv2-afk);
    text-transform: uppercase; letter-spacing: 0.5px;
}
.pv2-vac-sub  { font-size: 13px; color: #e8e8ef; margin-top: 2px; }
.pv2-vac-hint { font-size: 11px; color: #9a9aa8; margin-top: 4px; }

/* ------------------------------------------------------------------ */
/* Account + Tageswerte: eine Zeile, Kacheln wachsen mit dem Inhalt     */
/* ------------------------------------------------------------------ */
.pv2-accrow {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: stretch;
}
/* flex-basis auto: jede Kachel startet bei ihrer Inhaltsbreite und
   waechst von dort - wer Milliarden produziert, bekommt mehr Platz */
.pv2-accrow > .pv2-tile {
    flex: 1 1 auto;
    min-width: 252px;
    display: flex;
    flex-direction: column;
}
.pv2-accrow > .pv2-acctile {
    flex-grow: 1.15;
    /* sonst bestimmt die laengste Meta-Zeile die Breite und draengt die
       Tageskacheln in die naechste Reihe */
    max-width: 430px;
}

.pv2-accbody { padding: 14px 16px 16px 16px; }
.pv2-accid {
    display: flex;
    gap: 13px;
    align-items: center;
    margin-bottom: 13px;
}
.pv2-accid-txt { min-width: 0; }
.pv2-accid .pv2-acc-name {
    font-size: 17px; font-weight: bold; color: #fff;
    text-shadow: 0 0 10px var(--g-glow, transparent);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pv2-accid .pv2-acc-sub { font-size: 12px; color: #9a9aa8; }

/* Gesamt gross ueber beide Spalten, die vier uebrigen als 2x2 */
.pv2-ranklines {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.pv2-rankline {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "l l" "v p";
    gap: 1px 8px;
    padding: 7px 10px 8px 10px;
    border: 1px solid var(--pv2-border);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.035);
    min-width: 0;
}
.pv2-rankline.gross {
    grid-column: 1 / -1;
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--g-accent, var(--pv2-accent));
    padding: 9px 12px 10px 12px;
}
.pv2-rankline-l {
    grid-area: l;
    font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.4px;
    color: #9a9aa8; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.pv2-rankline-v {
    grid-area: v;
    font-size: 14px; font-weight: bold; color: #fff;
    white-space: nowrap;
}
.pv2-rankline.gross .pv2-rankline-v {
    font-size: 20px;
    text-shadow: 0 0 10px var(--g-glow, transparent);
}
.pv2-rankline-p {
    grid-area: p;
    font-size: 11px; color: var(--g-hl, var(--pv2-cyan));
    align-self: end; white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Tageskacheln: Abschnitte mit Ueberschrift, Werte zeilenweise        */
/* ------------------------------------------------------------------ */
.pv2-daybody { padding: 12px 16px 14px 16px; }
.pv2-sec {
    font-size: 9.5px; font-weight: bold;
    text-transform: uppercase; letter-spacing: 0.6px;
    color: var(--g-hl, var(--pv2-cyan));
    margin: 13px 0 5px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--pv2-border);
}
/* nur die allererste Ueberschrift steht ohne Abstand - im
   aufgeklappten Block ist die erste wieder eine ganz normale */
.pv2-daybody > .pv2-sec:first-child { margin-top: 0; }

/* Roheisen + Metall oben, Kryptonit + Spice darunter */
.pv2-resgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px 14px;
    padding: 2px 0;
}
.pv2-resline {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
.pv2-resline img {
    width: 27px; height: 27px;
    flex: 0 0 27px;
    object-fit: contain;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}
.pv2-resline-txt {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}
.pv2-resline-val {
    font-size: 13.5px; font-weight: bold; color: #fff;
    white-space: nowrap;
}
.pv2-resline-lbl {
    font-size: 10px; color: #9a9aa8;
    white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.pv2-resline.leer { opacity: 0.4; }

/* kleines Bild in einer Kennzahl-Zeile (Treibstoff wird in Spice bezahlt) */
.pv2-kv-icon {
    width: 15px; height: 15px;
    object-fit: contain;
    vertical-align: -3px;
    margin-right: 5px;
}

.pv2-kv {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 4px 0;
    font-size: 12px;
    white-space: nowrap;
}
.pv2-kv-l { color: #9a9aa8; }
.pv2-kv-v { margin-left: auto; color: #e8e8ef; font-weight: bold; text-align: right; }
.pv2-kv-sub { color: #8a8a96; font-weight: normal; font-size: 11px; }

.pv2-delta.plus  { color: var(--pv2-online); }
.pv2-delta.minus { color: var(--pv2-dnd); }

.pv2-day-quiet { font-size: 11.5px; color: #8a8a96; font-style: italic; }

/* ------------------------------------------------------------------ */
/* Urlaubsmodus                                                        */
/* ------------------------------------------------------------------ */
.pv2-vac {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 13px;
    padding: 11px 13px;
    border: 1px solid rgba(232, 163, 61, 0.35);
    border-left: 3px solid var(--pv2-afk);
    border-radius: 10px;
    background: rgba(232, 163, 61, 0.08);
}
.pv2-vac-icon { font-size: 20px; line-height: 1.1; color: var(--pv2-afk); }
.pv2-vac-hl {
    font-size: 12px; font-weight: bold; color: var(--pv2-afk);
    text-transform: uppercase; letter-spacing: 0.5px;
}
.pv2-vac-sub  { font-size: 13px; color: #e8e8ef; margin-top: 2px; }
.pv2-vac-hint { font-size: 11px; color: #9a9aa8; margin-top: 4px; }

/* ------------------------------------------------------------------ */
/* Account-Kachel: Avatar rechts, ueber die Kopfzeile hinweg           */
/* ------------------------------------------------------------------ */
.pv2-acctile {
    position: relative;
    /* .pv2-tile schneidet sonst alles ab, was ueber die Kachel ragt -
       die Rundung uebernimmt dafuer die Kopfzeile selbst */
    overflow: visible;
}
.pv2-acctile > .pv2-tile-hl {
    border-radius: 12px 12px 0 0;
    /* Platz fuer den Avatar, damit die Ueberschrift nicht darunter laeuft */
    padding-right: 104px;
}
.pv2-acctile .pv2-myacc-avatar {
    position: absolute;
    top: 8px;
    right: 16px;
    width: 76px;
    height: 76px;
    z-index: 3;
    border-radius: 14px;
    border: 2px solid var(--pv2-border);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55),
                0 0 0 1px rgba(0, 0, 0, 0.35);
    background: #241a33 center/cover no-repeat;
    flex: none;
}
/* Name und Universum linksbuendig, rechts bleibt der Avatar frei */
.pv2-acctile .pv2-accid {
    padding-right: 96px;
    min-height: 44px;
    align-items: flex-start;
}
.pv2-acctile .pv2-accid-txt { text-align: left; }
/* Universum hervorgehoben */
.pv2-acctile .pv2-acc-sub {
    color: var(--pv2-cyan);
    font-weight: bold;
    text-shadow: 0 0 9px rgba(95, 231, 249, 0.45);
}

/* Beitritt / letzter Login unter dem Universum */
.pv2-accmeta {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 12px;
    margin-top: 5px;
}
.pv2-accmeta-i {
    font-size: 10.5px;
    color: #8a8a96;
    white-space: nowrap;
}
/* die Zeile darf die Kachel nicht aufspannen */
.pv2-accmeta { min-width: 0; }
.pv2-acctile .pv2-accid { min-width: 0; }

/* ------------------------------------------------------------------ */
/* Account-Kasten: Name in der Kopfzeile, Angaben darunter             */
/* ------------------------------------------------------------------ */
.pv2-acchead {
    display: flex;
    align-items: baseline;
    gap: 9px;
    /* der Name soll seine eigene Schreibweise behalten */
    text-transform: none;
    min-width: 0;
}
.pv2-acchead-name {
    font-size: 17px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 10px var(--g-glow, transparent);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pv2-acchead-uni {
    font-size: 11.5px;
    font-weight: bold;
    color: var(--pv2-cyan);
    text-shadow: 0 0 9px rgba(95, 231, 249, 0.45);
    text-transform: none;
    white-space: nowrap;
}

.pv2-accfacts {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 13px;
}
.pv2-accfact {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-size: 11.5px;
    color: #9a9aa8;
    white-space: nowrap;
}
.pv2-accfact-v {
    color: var(--pv2-cyan);
    font-weight: bold;
}
/* Spielzeit darf auffallen */
.pv2-accfact.gross {
    font-size: 13px;
    margin-top: 3px;
}
.pv2-accfact.gross .pv2-accfact-v {
    font-size: 17px;
    text-shadow: 0 0 10px rgba(95, 231, 249, 0.5);
}

/* Nullwerte bleiben sichtbar, treten aber zurueck */
.pv2-kv.leer { opacity: 0.42; }

/* ------------------------------------------------------------------ */
/* Weitere Statistiken - ein Schalter fuer beide Tageskacheln          */
/* ------------------------------------------------------------------ */
.pv2-daymore { display: none; }
.pv2-accrow.stats-offen .pv2-daymore { display: block; }

.pv2-daytoggle {
    margin-top: 11px;
    padding-top: 9px;
    border-top: 1px solid var(--pv2-border);
    font-size: 11px;
    font-weight: bold;
    color: var(--pv2-cyan);
    cursor: pointer;
    text-align: center;
    user-select: none;
    transition: color 0.15s;
}
.pv2-daytoggle:hover { color: #fff; text-shadow: 0 0 9px rgba(95, 231, 249, 0.6); }
.pv2-daytoggle .zu { display: none; }
.pv2-accrow.stats-offen .pv2-daytoggle .auf { display: none; }
.pv2-accrow.stats-offen .pv2-daytoggle .zu  { display: inline; }

/* Spielzeit unter dem Ranking - schiebt sich in den freien Raum, den
   die hoeheren Tageskacheln daneben erzeugen */
.pv2-acctile .pv2-accbody { display: flex; flex-direction: column; flex: 1 1 auto; }
.pv2-playtime {
    margin-top: auto;
    padding-top: 15px;
    text-align: center;
}
.pv2-playtime-l {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #8a8a96;
}
.pv2-playtime-v {
    font-size: 30px;
    font-weight: bold;
    line-height: 1.15;
    color: var(--pv2-cyan);
    text-shadow: 0 0 16px rgba(95, 231, 249, 0.45);
}

/* Rangliste als eigene Kachel (wenn keine Tageswerte danebenstehen) */
.pv2-ranktile .pv2-ranklines { margin-top: 2px; }
.pv2-accrow > .pv2-ranktile { flex-grow: 1; max-width: 430px; }

/* Rangliste ohne Toplist-Eintrag: sichtbar, aber zurueckgenommen */
.pv2-ranklines.leer { opacity: 0.5; }

/* Eckdaten-Karte im Universumsstreifen */
.pv2-factcard { min-width: 235px; }
.pv2-factbody { padding: 10px 14px 12px 14px; }
.pv2-fact {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 4px 0;
    font-size: 12px;
    white-space: nowrap;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.pv2-fact:last-of-type { border-bottom: none; }
.pv2-fact-l { color: #9a9aa8; }
.pv2-fact-v { margin-left: auto; color: #fff; font-weight: bold; }
.pv2-fact-sub { color: #8a8a96; font-weight: normal; font-size: 11px; }
.pv2-fact-endless { color: var(--pv2-cyan); }
.pv2-fact-board {
    display: block;
    margin-top: 9px;
    padding: 6px 10px;
    border: 1px solid var(--pv2-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    font-size: 11px;
    font-weight: bold;
    color: var(--pv2-cyan);
    text-align: center;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}
.pv2-fact-board:hover {
    border-color: var(--pv2-cyan);
    background: rgba(95, 231, 249, 0.10);
}

/* ------------------------------------------------------------------ */
/* Damoria: Schloesser nach Art                                        */
/* ------------------------------------------------------------------ */
.pv2-castlegrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 8px;
}
.pv2-castle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 7px 3px;
    border: 1px solid var(--pv2-border);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.035);
    transition: border-color 0.15s;
}
.pv2-castle:hover { border-color: var(--g-accent, var(--pv2-accent)); }
.pv2-castle.leer { opacity: 0.38; }
.pv2-castle img {
    width: 30px; height: 30px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}
.pv2-castle-n { font-size: 13px; font-weight: bold; color: #fff; }
.pv2-castle-l {
    font-size: 9px; color: #9a9aa8;
    text-transform: uppercase; letter-spacing: 0.3px;
    text-align: center; line-height: 1.15;
}
/* Zahl neben der Kachel-Ueberschrift */
.pv2-hl-sub {
    font-size: 12px;
    font-weight: normal;
    color: var(--pv2-cyan);
    text-transform: none;
}

/* Truppensymbol vor der Bezeichnung.
   .pv2-kv richtet an der Grundlinie aus - damit haengt der Text am Fuss
   des Symbols. Hier wird deshalb mittig ausgerichtet. */
.pv2-kv-unit {
    gap: 8px;
    align-items: center;
}
.pv2-unit-icon {
    width: 18px; height: 18px;
    flex: 0 0 18px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* Damoria: fuenf Kacheln passen nicht nebeneinander - statt umzubrechen
   laeuft die Zeile waagerecht durch, wie der Ranglisten-Streifen */
.pv2-accrow-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
    scroll-behavior: smooth;
}
.pv2-accrow-scroll > .pv2-tile {
    flex: 0 0 auto;
    min-width: 250px;
    max-width: 340px;
}
.pv2-accrow-scroll > .pv2-acctile { min-width: 300px; max-width: 380px; }
.pv2-accrow-scroll::-webkit-scrollbar { height: 7px; }
.pv2-accrow-scroll::-webkit-scrollbar-thumb {
    background: var(--g-glow, rgba(255,255,255,0.2));
    border-radius: 4px;
}
.pv2-accrow-scroll::-webkit-scrollbar-thumb:hover { background: var(--g-accent, var(--pv2-accent)); }
.pv2-accrow-scroll::-webkit-scrollbar-track { background: transparent; }

/* Ziehen wie bei den Ranglisten-Streifen */
.pv2-accrow-scroll { cursor: grab; }
.pv2-accrow-scroll.dragging { cursor: grabbing; scroll-behavior: auto; }
.pv2-accrow-scroll img { -webkit-user-drag: none; user-drag: none; user-select: none; }

/* Damoria: Tageskachel zweispaltig - links Wirtschaft und Einsaetze,
   rechts die Rekrutierung. Mit elf Gattungen waere eine Spalte zu lang. */
.pv2-daycols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 18px;
    align-items: start;
}
.pv2-daycol { min-width: 0; }
/* die breitere Kachel darf mehr Platz beanspruchen */
.pv2-accrow-scroll > .pv2-daybox-breit { min-width: 420px; max-width: 480px; }
/* schmales Fenster: dann doch untereinander */
@media (max-width: 620px) {
    .pv2-daycols { grid-template-columns: 1fr; }
    .pv2-accrow-scroll > .pv2-daybox-breit { min-width: 280px; }
}

/* Damoria: Spieler und Allianz gestapelt, zusammen so hoch wie die
   uebrigen Kacheln der Zeile */
.pv2-accstack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 0 0 auto;
    min-width: 260px;
    max-width: 320px;
}
.pv2-accstack > .pv2-tile { flex: 1 1 auto; min-width: 0; max-width: none; }
/* die obere Kachel darf schrumpfen, die Spielzeit bleibt unten sitzen */
.pv2-acctile-halb .pv2-playtime { padding-top: 10px; }
.pv2-acctile-halb .pv2-playtime-v { font-size: 24px; }

/* Allianzwappen - wie der Spieler-Avatar ueber der Kopfzeile */
.pv2-allytile { position: relative; overflow: visible; }
.pv2-allytile > .pv2-tile-hl { border-radius: 12px 12px 0 0; padding-right: 92px; }
.pv2-ally-wappen {
    position: absolute;
    top: 8px; right: 14px;
    width: 64px; height: 64px;
    z-index: 3;
    border-radius: 12px;
    border: 2px solid var(--pv2-border);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
    background: #241a33 center/cover no-repeat;
    overflow: hidden;
}
.pv2-ally-wappen img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Mitglieder und Schloesser brauchen Luft zur Punktekachel darueber -
   in der Spieler-Kachel sitzt dazwischen das 2x2-Raster, hier folgen
   sie direkt und klebten deshalb an. */
.pv2-allytile .pv2-ranklines { margin-top: 8px; }


/* Zwei Events nebeneinander, eines traegt den Monatsablauf (Damoria:
   Saison-Event + Rotation).

   Der Aufbau der Kacheln bleibt wie bei einem einzelnen Event: Titel und
   Zeitraum oben, die Restzeit unten am Kachelende, die Wochenliste eng
   untereinander. Geaendert werden nur die Breiten - zwei Kacheln auf
   Fensterbreite zu pressen macht beide unleserlich. Die Zeile wird
   dadurch breiter als der Bildschirm und laesst sich ziehen; pv2-evrow
   traegt pv2-hscroll, initDrag greift dort von selbst.

   Eine einzelne Kachel spannt weiterhin ueber die volle Breite. */
.pv2-evrow.mit-ablauf .pv2-evcard { height: 168px; }

/* Saison-Kachel. Der Text muss die Restzeit in EINER Zeile fassen -
   bei 21px braucht "noch 23 T 07:55:12" rund 250px. */
.pv2-evrow.mit-ablauf .pv2-evcard:not(.breit) { flex: 0 0 440px; width: 440px; }
.pv2-evrow.mit-ablauf .pv2-evcard:not(.breit) .pv2-ev-img { flex-basis: 185px; }

/* Rotations-Kachel: Bild + Text + Wochenliste nebeneinander. */
.pv2-evrow.mit-ablauf .pv2-evcard.breit { flex: 0 0 900px; width: 900px; }
.pv2-evrow.mit-ablauf .pv2-evcard.breit .pv2-ev-img { flex-basis: 265px; }

/* Die Restzeit ist die Information, wegen der man hinschaut - deshalb
   auch auf der schmalen Kachel gross, und nie umgebrochen. */
.pv2-evrow.mit-ablauf .pv2-ev-name { font-size: 19px; }
.pv2-evrow.mit-ablauf .pv2-ev-span { font-size: 13.5px; }
.pv2-evrow.mit-ablauf .pv2-evcard:not(.breit) .pv2-ev-time {
    margin-top: auto;
    font-size: 21px;
    font-weight: 600;
    color: #e2c9ff;
    letter-spacing: 0.01em;
}
.pv2-evrow.mit-ablauf .pv2-evcard:not(.breit) .pv2-ev-txt {
    justify-content: flex-start;
    padding-top: 16px;
}
.pv2-evrow.mit-ablauf .pv2-ev-time { white-space: nowrap; }

/* Schmale Fenster: die Zeile wird ohnehin gezogen, also nur so weit
   verkleinern, dass eine Kachel nicht breiter ist als der Bildschirm. */
@media (max-width: 900px){
    .pv2-evrow.mit-ablauf .pv2-evcard:not(.breit) { flex-basis: 350px; width: 350px; }
    .pv2-evrow.mit-ablauf .pv2-evcard.breit { flex-basis: 760px; width: 760px; }
    .pv2-evrow.mit-ablauf .pv2-evcard.breit .pv2-ev-img { flex-basis: 210px; }
}

/* Nexus-Ranglisten: Solo und Gruppe nebeneinander, jede so breit wie ihr
   Inhalt. In einer festen Rasterspalte (300px) wurde die Zeitspalte der
   Gruppen-Tabelle abgeschnitten - dort steht neben dem Gruppennamen noch
   die Mitgliederliste. */
.pv2-nxrow {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-start;
}
.pv2-nxrow > .pv2-tile {
    flex: 0 1 auto;
    max-width: 100%;
    min-width: 0;
}
.pv2-nxrow .pv2-table { width: auto; }

/* ==================================================================
   Chat: Karteikarten, Gruppen-Kennzeichnung, Gruppenfenster
   ================================================================== */

/* --- Karteikarten. Die aktive steht vorn und geht in die Liste
       darunter ueber, die inaktive sitzt zurueck und ist gedaempft. --- */
.pv2-tabbar {
    display: flex;
    gap: 4px;
    padding: 8px 8px 0 8px;
    /* KEINE Trennlinie: die aktive Karte soll ohne Kante in die Liste
       darunter uebergehen, als waere sie dasselbe Blatt. */
}
.pv2-tabcard {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 6px 7px 6px;
    font-size: 12px;
    font-weight: bold;
    color: #9a90ad;
    cursor: pointer;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 9px 9px 0 0;
    /* zurueckgesetzt: etwas kleiner und dunkler als die aktive */
    background: rgba(0, 0, 0, 0.25);
    transform: translateY(2px);
    user-select: none;
}
.pv2-tabcard:hover { color: #cfc6dd; }
.pv2-tabcard.aktiv {
    color: #fff;
    /* exakt der Hintergrund der Leiste - kein Absatz, keine Kante */
    background: transparent;
    border-color: transparent;
    transform: translateY(0);
}
.pv2-tabcard.aktiv::after {
    /* schmaler Strich oben statt eines Rahmens: markiert die Karte,
       ohne sie vom Fenster abzugrenzen */
    content: '';
    position: absolute;
    left: 14px; right: 14px; top: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--g-accent, #b23af2);
}
.pv2-tabcard { position: relative; }
.pv2-tabcard-nr {
    min-width: 16px;
    padding: 1px 5px;
    border-radius: 8px;
    background: var(--g-accent, #b23af2);
    color: #fff;
    font-size: 10px;
    line-height: 14px;
    text-align: center;
}

/* --- Suchfeld --- */
.pv2-searchbox {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 8px 10px;
    padding: 6px 9px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--pv2-border);
}
.pv2-searchbox .glyphicons { font-size: 12px; top: 0; color: #9a90ad; }
.pv2-searchbox input {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 12px;
}
.pv2-searchbox input::placeholder { color: #7d7390; }
.pv2-searchbox-clear { cursor: pointer; color: #9a90ad; font-size: 11px; padding: 0 3px; }
.pv2-searchbox-clear:hover { color: #fff; }

/* --- Spieler rund, Gruppen eckig mit Abzeichen ---
   Das ist die Sperre gegen Vortaeuschung: selbst wer denselben Avatar
   hochlaedt und sich wie ein Spieler nennt, hat eine andere Form. --- */
.pv2-friend-avatar { background-size: cover; background-position: center; }
/* Beide viereckig mit abgerundeten Ecken - kein Kreis.
   Der Unterschied traegt jetzt allein das Abzeichen an der Gruppe,
   deshalb ist es etwas kraeftiger. Ein leichter Radiusunterschied
   bleibt als zusaetzlicher Anhaltspunkt: Spieler weicher, Gruppe eckiger. */
.pv2-av-user  { border-radius: 10px; }
.pv2-av-group { border-radius: 6px; }
.pv2-av-groupmark {
    position: absolute;
    right: -5px; bottom: -5px;
    width: 17px; height: 17px;
    border-radius: 6px;
    box-shadow: 0 0 7px rgba(178, 58, 242, 0.65);
    background: var(--g-accent, #b23af2);
    border: 2px solid #14101e;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
}
.pv2-av-groupmark .glyphicons { font-size: 8px; top: 0; }

/* Ungelesene Nachricht: der Name leuchtet */
.pv2-friend.neu .pv2-friend-name {
    color: #fff;
    font-weight: bold;
    text-shadow: 0 0 9px rgba(178, 58, 242, 0.85);
}
.pv2-friend.neu .pv2-friend-sub { color: #c6bcd8; }

/* Freund oder Mitspieler - klein in der zweiten Zeile */
.pv2-kind {
    display: inline-block;
    padding: 0 5px;
    border-radius: 4px;
    font-size: 9px;
    line-height: 13px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.pv2-kind.freund { background: rgba(178, 58, 242, 0.22); color: #dcc6f5; }
.pv2-kind.mate   { background: rgba(255, 255, 255, 0.1);  color: #b3aabf; }

/* --- Gruppenfenster ---
   Die Verdunklung beginnt unter der oberen Bar und endet vor der
   Freundes-Leiste (250px, z-index 42) - beide bleiben bedienbar. */
.pv2-groupoverlay {
    position: fixed;
    top: 74px; left: 0; right: 250px; bottom: 0;
    z-index: 41;
    background: rgba(0, 0, 0, 0.62);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.pv2-chats.friends-closed ~ .pv2-groupoverlay,
.pv2-groupoverlay.ohne-leiste { right: 0; }

.pv2-groupwin {
    width: 860px;
    max-width: 100%;
    height: 560px;
    max-height: 100%;
    display: flex;
    flex-direction: column;
}
.pv2-groupwin-main { flex: 1 1 auto; min-height: 0; display: flex; }
.pv2-groupwin-chat {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.pv2-groupwin-side {
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--pv2-border);
    background: rgba(0, 0, 0, 0.18);
}
.pv2-groupwin-side-hl {
    padding: 10px 12px 6px 12px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #9a90ad;
}

/* Abzeichen neben dem Gruppennamen im Kopf */
.pv2-groupbadge {
    margin-left: 8px;
    padding: 1px 6px;
    border-radius: 5px;
    background: rgba(178, 58, 242, 0.22);
    color: #dcc6f5;
    font-size: 9px;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    vertical-align: middle;
}

/* Absender ueber der Nachricht - in Gruppen noetig */
.pv2-gc-from {
    font-size: 10px;
    color: #c0a6e0;
    margin-bottom: 2px;
    font-weight: bold;
}

/* Teilnehmerzeile */
.pv2-gc-member {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 12px;
}
.pv2-gc-member:hover { background: rgba(255, 255, 255, 0.05); }
.pv2-gc-member.offline .pv2-friend-name { color: #8a8a96; }
.pv2-gc-rolle {
    display: inline-block;
    padding: 0 4px;
    border-radius: 4px;
    font-size: 9px;
    line-height: 13px;
    text-transform: uppercase;
}
.pv2-gc-rolle.creator { background: rgba(212, 175, 55, 0.24); color: #efe0ae; }
.pv2-gc-rolle.admin   { background: rgba(178, 58, 242, 0.22); color: #dcc6f5; }

/* Verwaltungsknoepfe erscheinen erst ueber das Zahnrad - sonst ist die
   Liste voller Symbole, die man selten braucht. */
.pv2-gc-act { display: none; cursor: pointer; color: #9a90ad; padding: 2px 5px; border-radius: 5px; }
.pv2-gc-act .glyphicons { font-size: 12px; top: 0; }
.pv2-gc-act:hover { background: rgba(255,255,255,0.12); color: #fff; }
.pv2-gc-act.gefahr:hover { background: rgba(220, 70, 70, 0.28); color: #ffd9d9; }
#pv2-groupchat.verwalten .pv2-gc-act { display: inline-flex; }

/* --- Auswahl-Liste (Gruppe anlegen / einladen) --- */
.pv2-pick {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
}
.pv2-pick:hover { background: rgba(255, 255, 255, 0.06); }
.pv2-pick.an { background: rgba(178, 58, 242, 0.16); }
.pv2-pick-box {
    flex: 0 0 auto;
    width: 17px; height: 17px;
    border-radius: 5px;
    border: 1px solid var(--pv2-border);
    background: rgba(0, 0, 0, 0.35);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; color: #fff;
}
.pv2-pick.an .pv2-pick-box { background: var(--g-accent, #b23af2); border-color: transparent; }

/* Bildwahl beim Anlegen */
.pv2-gnew-img {
    flex: 0 0 auto;
    width: 58px; height: 58px;
    border-radius: 12px;
    border: 1px dashed var(--pv2-border);
    background: rgba(0, 0, 0, 0.3) center/cover no-repeat;
    display: flex; align-items: center; justify-content: center;
    color: #9a90ad;
    cursor: pointer;
}
.pv2-gnew-img:hover { border-color: var(--g-accent, #b23af2); color: #fff; }
.pv2-gnew-img .glyphicons { font-size: 18px; top: 0; }

@media (max-width: 900px){
    .pv2-groupwin { height: 100%; }
    .pv2-groupwin-side { flex-basis: 190px; }
}


/* --- Listeneintraege als eigene kleine Kaesten ---------------------
   Leicht abgedunkelt, hauchduenner Rahmen, 2px Abstand - kompakt, aber
   klar voneinander getrennt. */
.pv2-friend,
.pv2-gc-member {
    margin: 0 8px 2px 8px;
    padding: 5px 8px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.pv2-friend:hover,
.pv2-gc-member:hover { background: rgba(178, 58, 242, 0.14); }
.pv2-friend.neu { border-color: rgba(178, 58, 242, 0.4); }
.pv2-request { margin: 0 8px 2px 8px; border-radius: 8px; }

/* Auswahl-Liste mit fester Hoehe: beim Suchen soll das Fenster nicht
   springen. Hoehe passt sich dem Bildschirm an, aber nicht dem Inhalt. */
.pv2-picklist {
    height: 34vh;
    min-height: 180px;
    max-height: 320px;
}

/* Bitmeup-Knopf in Lila - der allgemeine pv2-btn ist hier rot */
.pv2-btn-lila {
    flex: 0 0 auto;
    padding: 7px 16px;
    border-radius: 8px;
    background: var(--g-btn, linear-gradient(180deg,#8d2fc0,#6d1f97));
    border: 1px solid var(--g-btn-border, rgba(178,58,242,0.7));
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
}
.pv2-btn-lila:hover { filter: brightness(1.18); }

/* Verbotenes Zeichen im Gruppennamen */
.pv2-input.fehler {
    border-color: #d95757;
    box-shadow: 0 0 0 2px rgba(217, 87, 87, 0.25);
}

/* ------------------------------------------------------------------ */
/* Mebula: Account-Bereich, Orden, Statistik, Team, Realm-Eckdaten      */
/* ------------------------------------------------------------------ */

/* Der Avatar ist die Spielfigur, also ein Hochformat. Das quadratische
   Feld der anderen Spiele wuerde ihr den Kopf abschneiden - deshalb ein
   hoheres Feld, das Bild oben ausgerichtet und unten angeschnitten.
   KEIN Rahmen, kein Hintergrund, keine Rundung: die Figur ist
   freigestellt und soll wie eine Figur wirken, nicht wie ein Passbild.
   Die Regeln stehen absichtlich hier unten - sie muessen die von
   .pv2-acctile .pv2-myacc-avatar ueberschreiben. */
.pv2-acctile .pv2-me-avatar {
    height: 116px;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}
.pv2-acctile .pv2-me-avatar img {
    width: 100%;
    height: auto;
    display: block;
    margin-top: -8px;
    /* etwas Tiefe, damit die Figur nicht flach auf der Kachel klebt */
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55));
}

/* --- Orden ---------------------------------------------------------- */
.pv2-me-ordenzahl {
    float: right;
    color: var(--pv2-cyan);
    font-weight: bold;
}
.pv2-me-ordengrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 6px;
    padding: 14px 16px 16px 16px;
}
.pv2-me-orden-e {
    text-align: center;
    min-width: 0;
}
.pv2-me-orden-e img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    display: block;
    margin: 0 auto 3px auto;
}
.pv2-me-orden-n {
    display: block;
    font-size: 9.5px;
    line-height: 1.25;
    color: #9a90ad;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* geholt: farbig und leuchtend */
.pv2-me-orden-e.hat img { filter: drop-shadow(0 0 6px var(--g-glow)); }
.pv2-me-orden-e.hat .pv2-me-orden-n { color: #fff; }
/* offen: es gibt den Meister, man hat ihn nur noch nicht */
.pv2-me-orden-e.offen img { filter: grayscale(1) brightness(0.6); opacity: 0.65; }
/* zu: diesen Meister gibt es im Spiel noch gar nicht */
.pv2-me-orden-e.zu img { filter: grayscale(1) brightness(0.32); opacity: 0.4; }
.pv2-me-orden-e.zu .pv2-me-orden-n { color: #6b6478; font-style: italic; }

/* --- Statistik ------------------------------------------------------ */
.pv2-me-fight, .pv2-me-arten { margin-bottom: 13px; }
.pv2-me-fight:last-child, .pv2-me-arten:last-child { margin-bottom: 0; }
.pv2-me-fight-h {
    display: flex;
    font-size: 11.5px;
    color: #9a9aa8;
    margin-bottom: 4px;
}
.pv2-me-fight-g {
    margin-left: auto;
    color: #fff;
    font-weight: bold;
}
.pv2-me-fightbar {
    height: 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
}
.pv2-me-fightbar > span {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #3fbf6a, #7ee0a0);
}
/* gesehen/gefangen laufen gegen die Gesamtzahl der Arten, nicht gegen
   einen Gegner - deshalb die Spielfarbe statt Gruen */
.pv2-me-fightbar.arten > span {
    background: linear-gradient(90deg, var(--g-accent), #e2b8f5);
}
.pv2-me-fight-f {
    display: flex;
    font-size: 10.5px;
    margin-top: 3px;
}
.pv2-me-fight-f .w { color: #7ee0a0; }
.pv2-me-fight-f .l { margin-left: auto; color: #d98b8b; }

/* --- Team: je Mebuly eine Kachel ------------------------------------ */
.pv2-me-teambody {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 16px 18px;
}
/* wachsen mit: fuenf Kacheln fuellen die Zeile aus, auf schmalen
   Schirmen brechen sie um statt zu schrumpfen */
.pv2-me-teamcard {
    flex: 1 1 152px;
    min-width: 142px;
    max-width: 210px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--pv2-border);
    border-radius: 14px;
    padding: 10px 10px 12px 10px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.pv2-me-teamcard:hover {
    border-color: var(--g-accent);
    background: rgba(255, 255, 255, 0.075);
}
.pv2-me-teamname {
    font-size: 12.5px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pv2-me-teampic {
    height: 118px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pv2-me-teampic img {
    width: 112px;
    height: 112px;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5));
}
.pv2-me-teamcard:hover .pv2-me-teampic img {
    filter: drop-shadow(0 0 12px var(--g-glow));
}
.pv2-me-teamlvl { font-size: 11px; color: #9a90ad; margin: 2px 0 7px 0; }

/* freier Platz - gestrichelt und gedaempft, damit er als Luecke lesbar
   ist und nicht als Mebuly ohne Bild */
.pv2-me-teamcard.frei {
    border-style: dashed;
    background: rgba(255, 255, 255, 0.015);
    cursor: default;
}
.pv2-me-teamcard.frei:hover {
    border-color: var(--pv2-border);
    background: rgba(255, 255, 255, 0.015);
}
.pv2-me-teamfrei-i {
    font-size: 40px;
    line-height: 1;
    color: #4a4159;
}
.pv2-me-teamfrei {
    font-size: 12px;
    color: #6b6478;
    font-style: italic;
    margin-top: 9px;
}
/* Paragon-Zaehler hinter dem Level */
.pv2-me-aura {
    color: var(--g-accent);
    font-weight: bold;
    text-shadow: 0 0 8px var(--g-glow);
}
/* Erfahrungsbalken. Die Zahlen stehen IM Balken - dadurch darf er
   hoeher sein und die Kachel bleibt trotzdem kompakt. */
.pv2-me-epbar {
    position: relative;
    height: 18px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.pv2-me-epbar > span {
    display: block;
    height: 100%;
    border-radius: 9px;
    background: linear-gradient(90deg, #2f9fb5, #5fe7f9);
}
/* ab Level 50 laeuft die Leiste auf die naechste Aura zu */
.pv2-me-epbar.aura > span {
    background: linear-gradient(90deg, #8a3fc0, var(--g-accent));
}
.pv2-me-epbar > em {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    line-height: 18px;
    font-style: normal;
    font-size: 10px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* --- Realm-Eckdaten ------------------------------------------------- */
.pv2-me-flag {
    width: 20px;
    height: 13px;
    object-fit: contain;
    margin-right: 8px;
    vertical-align: -1px;
}
.pv2-fact-sec {
    margin: 9px 0 6px 0;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8a8a96;
}
.pv2-me-topteam { display: flex; gap: 10px; }
.pv2-me-topteam-e { text-align: center; cursor: pointer; }
.pv2-me-topteam-e img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    display: block;
}
.pv2-me-topteam-e span { font-size: 10px; color: #fff; font-weight: bold; }
.pv2-me-topteam-e:hover img { filter: drop-shadow(0 0 8px var(--g-glow)); }

/* Mebuly-Bild in der Rangliste "Hoechstes Mebuly" */
.pv2-me-rank-mon { display: inline-flex; align-items: center; gap: 5px; }
.pv2-me-rank-mon img { width: 22px; height: 22px; object-fit: contain; }

/* Die drei Kacheln der Account-Zeile duerfen schmaler werden als bei
   SI - Mebula hat keine Tageskacheln daneben, die Platz brauchen. */
.pv2-me-accrow > .pv2-me-orden { flex-grow: 0.9; max-width: 400px; }
.pv2-me-accrow > .pv2-me-stats { flex-grow: 1; max-width: 400px; }

/* ------------------------------------------------------------------ */
/* Smiley-Waehler und Reaktionen                                       */
/* ------------------------------------------------------------------ */

/* Der Knopf in der Eingabezeile: einfarbig, nur leicht abgesetzt -
   ein buntes Bildzeichen wuerde neben dem Sendepfeil um Aufmerksamkeit
   ringen. */
.bmu-emoji-knopf {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-left: 4px;
    border-radius: 9px;
    cursor: pointer;
    color: #8a8199;
    background: rgba(255, 255, 255, 0.05);
    transition: color 0.15s, background 0.15s;
}
.bmu-emoji-knopf:hover {
    color: #e6dcf5;
    background: rgba(255, 255, 255, 0.11);
}
.bmu-emoji-knopf.klein { width: 28px; height: 28px; margin-left: 3px; }
.bmu-emoji-knopf.klein svg { width: 16px; height: 16px; }

/* --- Auswahlfenster --- */
.bmu-emoji-pop {
    position: fixed;
    z-index: 1200;
    width: 288px;
    background: #1b1428;
    border: 1px solid var(--pv2-border);
    border-radius: 12px;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}
.bmu-emoji-tabs {
    display: flex;
    gap: 2px;
    padding: 6px 6px 0 6px;
    border-bottom: 1px solid var(--pv2-border);
}
.bmu-emoji-tab {
    flex: 1 1 auto;
    text-align: center;
    padding: 5px 0 6px 0;
    font-size: 15px;
    cursor: pointer;
    border-radius: 7px 7px 0 0;
    opacity: 0.55;
    filter: grayscale(0.6);
}
.bmu-emoji-tab:hover { opacity: 0.85; filter: none; }
.bmu-emoji-tab.aktiv {
    opacity: 1;
    filter: none;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 -2px 0 var(--g-accent, #b23af2);
}
.bmu-emoji-hl {
    padding: 7px 12px 3px 12px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #9a90ad;
}
.bmu-emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 1px;
    padding: 4px 8px 10px 8px;
    max-height: 210px;
    overflow-y: auto;
}
.bmu-emoji-z {
    text-align: center;
    font-size: 19px;
    line-height: 1;
    padding: 5px 0;
    border-radius: 7px;
    cursor: pointer;
}
.bmu-emoji-z:hover { background: rgba(255, 255, 255, 0.12); }

/* --- Reaktionen unter einer Nachricht --- */
.bmu-reakt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}
.bmu-reakt:empty { display: none; }
.bmu-reakt-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px 1px 5px;
    border-radius: 11px;
    font-size: 13px;
    line-height: 18px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid transparent;
}
.bmu-reakt-chip b { font-size: 10px; font-weight: bold; color: #cfc6dd; }
.bmu-reakt-chip:hover { background: rgba(255, 255, 255, 0.14); }
/* eigene Reaktion - ein weiterer Klick nimmt sie wieder weg */
.bmu-reakt-chip.meins {
    background: rgba(178, 58, 242, 0.22);
    border-color: var(--g-accent, #b23af2);
}
.bmu-reakt-chip.meins b { color: #fff; }
/* an der eigenen Nachricht sind die Chips nur Anzeige */
.bmu-reakt-chip.nurlesen { cursor: default; }
.bmu-reakt-chip.nurlesen:hover { background: rgba(255, 255, 255, 0.07); }

/* Knopf zum Hinzufuegen - erscheint erst beim Ueberfahren der Zeile,
   damit er den Verlauf nicht zupflastert */
.bmu-reakt-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 8px;
    cursor: pointer;
    color: #7d7490;
    opacity: 0;
    transition: opacity 0.12s, color 0.12s, background 0.12s;
}
.pv2-chat-msg:hover .bmu-reakt-add,
.bmu-cp-msg:hover .bmu-reakt-add,
.bmu-reakt:hover .bmu-reakt-add { opacity: 1; }
/* Der Knopf sitzt AUSSERHALB der Blase rechts daneben - innen hat er
   eine leere Zeile reserviert, die erst beim Ueberfahren gefuellt
   wurde (sah nach Loch aus). Anker ist die Blase (kleine Fenster)
   bzw. der Nachrichtenblock (grosse Ansicht). */
.pv2-chat-msg, .bmu-cp-msg { position: relative; }
.bmu-reakt-add {
    position: absolute;
    left: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%);
}
/* ohne Chips braucht die Reaktionszeile keinen Platz mehr */
.bmu-reakt:not(:has(.bmu-reakt-chip)) { margin-top: 0; }
.bmu-reakt-add:hover { color: #e6dcf5; background: rgba(255, 255, 255, 0.12); }
/* auf Zeigegeraeten ohne Mauszeiger dauerhaft sichtbar */
@media (hover: none) {
    .bmu-reakt-add { opacity: 0.75; }
}

/* --- Schnellauswahl ueber der Nachricht --- */
.bmu-reakt-bar {
    position: fixed;
    z-index: 1210;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 5px 7px;
    border-radius: 22px;
    background: #1b1428;
    border: 1px solid var(--pv2-border);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
}
.bmu-reakt-bar > span {
    font-size: 21px;
    line-height: 1;
    padding: 4px 5px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.1s, background 0.1s;
}
.bmu-reakt-bar > span:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: scale(1.22);
}
.bmu-reakt-bar > span.mehr {
    font-size: 17px;
    color: #9a90ad;
    font-weight: bold;
    padding: 4px 9px;
}

/* --- Bilder in Chatnachrichten --- */
.bmu-bild-knopf {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-left: 3px;
    border-radius: 9px;
    cursor: pointer;
    color: #8a8199;
    background: rgba(255, 255, 255, 0.05);
    transition: color 0.15s, background 0.15s;
}
.bmu-bild-knopf:hover { color: #e6dcf5; background: rgba(255, 255, 255, 0.11); }
.pv2-chat-input-row .bmu-bild-knopf { width: 28px; height: 28px; }
.pv2-chat-input-row .bmu-bild-knopf svg { width: 16px; height: 16px; }

.bmu-bilder {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 5px;
}
.bmu-bilder img {
    max-width: 210px;
    max-height: 210px;
    border-radius: 9px;
    cursor: zoom-in;
    display: block;
    background: rgba(0, 0, 0, 0.25);
}
.bmu-cp-bubble.mitbild { padding-top: 8px; }
.bmu-cp-bubble .bmu-bilder img { max-width: 300px; max-height: 300px; }

.bmu-bild-gross { padding: 8px; }
.bmu-bild-gross img {
    display: block;
    max-width: 78vw;
    max-height: 76vh;
    border-radius: 10px;
}

/* ---- #28 SI-Weltkopf: Universums-Beschreibung + Tag-Chips ---------- */
/* Beschreibung: sitzt in der Kopfzeile neben dem Namen, immer zwei
   Zeilen (die zweite laenger - bricht GameInfo.js.uniZweiZeilen) */
.pv2-worldhead-descr {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 36rem;
    font-size: 11px;
    line-height: 1.45;
    color: #9aa7bd;
}
/* Tag-Zeile unter dem Kopf, Einzug wie die Kopfzeile (18px) */
.pv2-worldhead-tagrow {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 0 18px 12px 18px;
    margin-top: -2px;
}
/* Chip: Hintergrundfarbe kommt vom Spiel als Inline-Stil mit */
.pv2-uni-tag {
    display: inline-block;
    padding: 2px 9px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .3px;
    color: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    white-space: nowrap;
}

/* ---- #26 Beitreten-Knopf im Weltkopf ------------------------------- */
.pv2-btn-join {
    padding: 5px 16px;
    font-size: 12px;
    flex: 0 0 auto;
}

/* ---- Sidebar: Spiel-Direktstart + Konto-Menue ---------------------- */
.pv2-sidebar-links .pv2-link-game {
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.pv2-link-game .glyphicons { font-size: 12px; line-height: 1; }
.pv2-link-game .glyphicons:before { padding: 0; }

#pv2-ctxroot { position: fixed; inset: 0; z-index: 95; }
.pv2-ctxmenu {
    position: fixed;
    background: #17112a;
    border: 1px solid rgba(150, 95, 230, 0.4);
    border-radius: 10px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
    padding: 6px;
    max-height: 70vh;
    overflow-y: auto;
    min-width: 200px;
}
.pv2-ctx-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 7px;
    font-size: 13px;
    color: #e6def5;
    cursor: pointer;
    white-space: nowrap;
}
.pv2-ctx-item:hover, .pv2-ctx-item.aktiv { background: rgba(150, 95, 230, 0.22); }
.pv2-ctx-pfeil { color: #9a90ad; font-size: 11px; }
.pv2-ctx-open { justify-content: flex-start; font-weight: 700; }
.pv2-ctx-open .glyphicons { font-size: 12px; line-height: 1; }
.pv2-ctx-open .glyphicons:before { padding: 0 2px 0 0; }
.pv2-ctx-sep { height: 1px; background: rgba(255, 255, 255, 0.09); margin: 4px 6px; }
.pv2-ctx-acc {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    border-radius: 7px;
    cursor: pointer;
}
.pv2-ctx-acc:hover { background: rgba(150, 95, 230, 0.22); }
.pv2-ctx-name {
    font-size: 13px;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pv2-ctx-uni { font-size: 11px; font-weight: 600; margin-top: 1px; white-space: nowrap; }

/* Mebula-Kontenzeile: Luft fuer den Hover-Hub der Kacheln, sonst
   schneidet der Scroll-Container den oberen Rand + Glow ab */
.pv2-hscroll.pv2-accrow-scroll { padding-top: 10px; margin-top: -10px; }

/* Konto-Menue: Scrollbalken in Menuefarbe (schmal, lila Daumen) */
.pv2-ctxmenu {
    scrollbar-width: thin;
    scrollbar-color: rgba(150, 95, 230, 0.55) transparent;
}
.pv2-ctxmenu::-webkit-scrollbar { width: 8px; }
.pv2-ctxmenu::-webkit-scrollbar-track { background: transparent; }
.pv2-ctxmenu::-webkit-scrollbar-thumb {
    background: rgba(150, 95, 230, 0.45);
    border-radius: 8px;
    border: 2px solid #17112a;
}
.pv2-ctxmenu::-webkit-scrollbar-thumb:hover { background: rgba(150, 95, 230, 0.75); }

/* ---- Altes Logo, zweilagig: Grund (Strahlen+Bits) + Schrift -------- */
/* Die Lagen wurden aus dem Original-PNG getrennt (Buchstaben ueber
   Flaechengroesse + gefuehrte Rekonstruktion, Skript logo_trennen3.py).
   Schrift UEBER Grund ergibt wieder exakt das Originalbild. */
.pv2-logo-buehne { position: relative; display: inline-block; line-height: 0; }
/* staerker als '.pv2-bar-logo img' (setzt position:relative) */
.pv2-bar-logo img.pv2-logo-lage { position: absolute; inset: 0; height: 100%; }
.pv2-logo-grundglanz, .pv2-logo-schriftlauf {
    position: absolute;
    inset: 0;
    pointer-events: none;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
/* Grund: deutlicher Glow-Sweep links -> rechts (screen = Licht dazu) */
.pv2-logo-grundglanz {
    /* verstaerkte Maske (Alpha x4): sonst daempfen die zarten
       Strahlen (Alpha 10-30) den Sweep auf ein Zehntel */
    -webkit-mask-image: url('/images/portal/logo/alt_grund_maske.png?v=2');
    mask-image: url('/images/portal/logo/alt_grund_maske.png?v=2');
    background: linear-gradient(105deg, transparent 30%,
        rgba(120, 220, 255, 0.9) 44%, rgba(190, 120, 255, 0.95) 50%,
        rgba(120, 255, 200, 0.9) 56%, transparent 70%);
    background-size: 260% 100%;
    background-repeat: no-repeat;
    background-position: 100% 0;
    mix-blend-mode: screen;
    filter: saturate(2.1) brightness(1.55);
    animation: pv2AltGrund 6.5s linear infinite;
}
@keyframes pv2AltGrund {
    0%   { background-position: 100% 0; }
    55%  { background-position: 0% 0; }
    100% { background-position: 0% 0; }
}
/* Schrift: kurviger Farb-Spot die Buchstaben entlang. overlay saettigt
   und kontrastet, hellt aber kaum auf - genau die Vorgabe */
.pv2-logo-schriftlauf {
    -webkit-mask-image: url('/images/portal/logo/alt_schrift_maske.png?v=2');
    mask-image: url('/images/portal/logo/alt_schrift_maske.png?v=2');
    background-image: radial-gradient(circle closest-side,
        rgba(255, 90, 220, 0.95) 0%, rgba(90, 160, 255, 0.85) 45%,
        rgba(90, 255, 220, 0.5) 65%, transparent 75%);
    background-size: 85px 85px;
    background-repeat: no-repeat;
    background-position: -90px 40px;
    mix-blend-mode: overlay;
    filter: saturate(2.4);
    animation: pv2AltLauf 7.5s ease-in-out infinite;
}
/* kurvige Bahn: links -> rechts, dabei durch die Buchstaben schlaengeln
   (Wegpunkte statt gerader Scanner) */
@keyframes pv2AltLauf {
    0%   { background-position: -90px 40px; }
    12%  { background-position: 0px 18px; }
    26%  { background-position: 45px 60px; }
    40%  { background-position: 90px 20px; }
    54%  { background-position: 135px 58px; }
    68%  { background-position: 175px 30px; }
    80%  { background-position: 215px 46px; }
    88%, 100% { background-position: 260px 40px; }
}
/* der alte breite Quer-Sweep wuerde die Laeufe doppeln */
.pv2-bar-logo.alt-logo::after { content: none; }

/* ---- Aktives Spiel: Leucht-Schein um Trapez + Logo ----------------- */
/* WICHTIG: clip-path wird auf demselben Element NACH dem Filter
   angewendet - drop-shadows an einem geclippten Element werden also
   weggeschnitten. Deshalb liegen die Leucht-Schatten am SLOT (Eltern):
   dessen Silhouette ist das geclippte Trapez SAMT ueberstehendem
   Spiellogo, das Licht folgt beidem und laeuft nach aussen weich aus. */
.pv2-game-slot:has(.pv2-game-icon.active) {
    position: relative;
    transform: translateY(-2px) scale(1.05);
    z-index: 2;
}
/* Die Huelle umschliesst NUR das Trapez - das Spiellogo liegt ausserhalb
   und bekommt damit keinen Leucht-Saum mehr (sein Ueberhang unterm
   Trapez war der "zu lange Schatten unten") */
.pv2-game-schein {
    display: block;
    width: 100%;
    height: 100%;
}

/* ---- Hover auf dem AKTIVEN Icon: Mal-Aenderungen einfrieren -------- */
/* Der Saum-Filter liegt auf der Huelle UM das Icon - jede Hintergrund-/
   Filter-Aenderung darunter (Hover-Uebergaenge, 180ms) rastert die
   gefilterte Huelle pro Frame neu. Nur das aktive Icon hat den Filter,
   deshalb laggte auch nur dort der Hover. Der Hub des Slots bleibt -
   Transforms kosten nichts (Compositor). */
.pv2-game-icon.active,
.pv2-game-icon.active:hover {
    transition: none;
    filter: none;
    background: conic-gradient(from var(--pv2rot),
        var(--pv2-accent) 0deg, rgba(95, 231, 249, 1) 90deg,
        var(--pv2-accent) 180deg, rgba(95, 231, 249, 1) 270deg,
        var(--pv2-accent) 360deg);
}

/* und der Hub des aktiven Slots aendert beim Hover nichts mehr -
   er ist ja schon angehoben; so entfaellt auch dieser Uebergang */
.pv2-game-slot:has(.pv2-game-icon.active):hover {
    transform: translateY(-2px) scale(1.05);
}

/* ---- Aktiver Slot: Leucht-Saum als GEBACKENES Bild ----------------- */
/* Vorgerendert (echter Gauss-Blur, @2x, Skript im Scratchpad) statt
   Laufzeit-Filter: drop-shadow kostete selbst statisch ~9 fps, das
   Bild kostet nichts. Rand im Bild: 26px um die 108x62-Kachel. */
/* Anker ist die HUELLE, nicht der Slot: der Slot steckt unter dem
   backdrop-filter der Leiste, und ein z-index:-1-Pseudo dort hinterliess
   beim Aktiv-Wechsel korrupte Paint-Reste am alten Platz. Als ::before
   der Huelle liegt der Glow OHNE z-index natuerlich hinter dem Icon
   (Pseudos malen vor den Kindern). */
.pv2-game-schein { position: relative; }
.pv2-game-schein:has(> .pv2-game-icon.active)::before {
    content: '';
    position: absolute;
    left: -26px;
    top: -26px;
    width: 160px;   /* 108 + 2*26 */
    height: 114px;  /*  62 + 2*26 */
    background: url('/images/portal/rail_glow_odd.png?v=2') center / 100% 100% no-repeat;
    pointer-events: none;
}
.pv2-game-slot:nth-child(even) .pv2-game-schein:has(> .pv2-game-icon.active)::before {
    background-image: url('/images/portal/rail_glow_even.png?v=2');
}

/* ---- #31 Sitzungsverwaltung in den Einstellungen ------------------- */
.bmu-sess-hl { font-size: 15px; color: #fff; margin: 4px 0 2px; }
.bmu-sess-sub { font-size: 12px; color: #9a90ad; margin-bottom: 12px; }
.bmu-sess {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.bmu-sess.aktuell { border-color: rgba(95, 231, 249, 0.5); background: rgba(95, 231, 249, 0.08); }
.bmu-sess-ico {
    width: 34px; height: 34px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px; background: rgba(0, 0, 0, 0.25); color: #b9aecd;
}
.bmu-sess-ico .glyphicons { font-size: 16px; }
.bmu-sess-ico .glyphicons:before { padding: 0; }
.bmu-sess-txt { flex: 1 1 auto; min-width: 0; }
.bmu-sess-name { font-size: 13px; color: #fff; }
.bmu-sess-jetzt {
    font-size: 10px; padding: 1px 7px; margin-left: 6px; border-radius: 8px;
    background: rgba(95, 231, 249, 0.2); color: #9deefc;
}
.bmu-sess-meta { font-size: 11px; color: #9a90ad; line-height: 1.5; margin-top: 2px; }
.bmu-sess-weg {
    flex: 0 0 auto; cursor: pointer; font-size: 12px; padding: 6px 14px;
    border-radius: 8px; color: #e8b9b9;
    border: 1px solid rgba(255, 120, 120, 0.35); background: rgba(255, 90, 90, 0.1);
}
.bmu-sess-weg:hover { background: rgba(255, 90, 90, 0.22); color: #fff; }
.bmu-sess-leer { font-size: 12px; color: #9a90ad; padding: 8px 2px; }

/* App-Fassung unter dem Update-Eintrag im Spielermenue */
.pv2-drop-version {
    padding: 1px 12px 6px 32px;
    font-size: 10px;
    color: #6f6784;
    white-space: nowrap;
}