/* ==================================================================
   Ausgeloggte Startseite (js/client/Actions/Start.js)
   Baut auf PortalV2.css auf: pv2-bar, pv2-gamerail, pv2-footer,
   Farbwelten ueber body.pv2-theme-<spiel> (--g-accent, --g-glow, ...).
   Praefix bmu- (Ausnahme der Consent-Kehrmaschine in Mobile.js).
   ================================================================== */

:root {
    --bmu-foot: 26px;
    --bmu-ink: #ffffff;
    --bmu-ink-dim: #c9c2d8;
    --bmu-ink-soft: #9a90ad;
    --bmu-page: #0b0914;
}
@media (min-width: 2000px){ :root { --bmu-foot: 30px; } }
@media (min-width: 2900px){ :root { --bmu-foot: 34px; } }

body.bmu-start-on { background: var(--bmu-page); }
body.bmu-start-on #page-backlight { display: none !important; }
body.bmu-start-on #bitmeup\.page\.action { opacity: 1 !important; }

/* ------------------------------------------------------------------
   Grundgeruest
   ------------------------------------------------------------------ */
.bmu-start {
    position: fixed;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    color: var(--bmu-ink);
    font-family: Arial, Helvetica, sans-serif;
    background: var(--bmu-page);
}

/* Hintergrund-Ebenen (Video/Bild je Spiel) */
.bmu-start-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    will-change: transform;
    transform: scale(1.04);
}
.bmu-start-layer {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.7s ease;
}
.bmu-start-layer.on { opacity: 1; }
.bmu-start-layer img,
.bmu-start-layer video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.bmu-start-video { opacity: 0; transition: opacity 1s ease; }
.bmu-start-video.playing { opacity: 1; }
.bmu-start-fg { pointer-events: none; }
/* Spiele ohne Video: langsame Kamerafahrt ueber das Standbild */
.bmu-start-layer.kb .bmu-start-poster {
    animation: bmuKen 46s ease-in-out infinite alternate;
    transform-origin: 60% 40%;
}
@keyframes bmuKen {
    from { transform: scale(1); }
    to   { transform: scale(1.12) translate(-1.5%, 1%); }
}
@media (prefers-reduced-motion: reduce){
    .bmu-start-layer.kb .bmu-start-poster { animation: none; }
}

.bmu-start-scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(6, 4, 12, 0.55) 0%, rgba(6, 4, 12, 0.05) 30%, rgba(6, 4, 12, 0.15) 55%, rgba(6, 4, 12, 0.88) 100%),
        linear-gradient(90deg, rgba(6, 4, 12, 0.55) 0%, rgba(6, 4, 12, 0) 45%);
}
.bmu-start-dark {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--bmu-page);
    opacity: 0;
}
.bmu-start .pv2-topgrad { position: absolute; }

/* scrollbarer Inhalt zwischen Bar und Fusszeile */
.bmu-start-scroll {
    position: absolute;
    top: 64px;
    left: 0; right: 0;
    bottom: var(--bmu-foot);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 20;
    /* KEIN scroll-behavior:smooth - Chrome brach damit programmatische
       Spruenge ab; weiche Fahrten macht Start.js selbst (animateScroll) */
}
.bmu-start-footer { z-index: 100; }

.bmu-wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    box-sizing: border-box;
}

/* ------------------------------------------------------------------
   Bar (abgemeldet)
   ------------------------------------------------------------------ */
.bmu-sbar-wrap { border-bottom: 1px solid rgba(78, 21, 108, 0.3); overflow: visible; }
.bmu-sbar { overflow: visible; }
.bmu-sbar .pv2-bar-logo { z-index: 3; }
/* Lichtstreifen der alten Bar: in der Bar, unter den Elementen */
/* PortalV2.css: `body.pv2 #bitmeup-bar-container { z-index: 41 !important }` und der
   Lichtfleck als ::before/::after an der Bar-Unterkante - hier spezifischer und
   damit UNTER Logo, Kacheln und App-Kasten (z 2/3) */
body.pv2 #bmu-sbar #bitmeup-bar-container.bmu-sbar-light { position: absolute !important; inset: 0; z-index: 1 !important; pointer-events: none; height: 100% !important; }
.bmu-sbar-light .bitmeup_border_bar { position: absolute; inset: 0; width: 100%; height: 100%; }
.bmu-sbar-right { position: relative; z-index: 2; }

/* Spiele-Leiste IN der Bar: die 108x62-Trapeze stehen 10px unter der
   Oberkante und ragen damit 8px unter die 64px-Bar (die Spiellogos noch
   etwas weiter - gewollt). Kein overflow/clip auf dem Weg nach oben! */
.bmu-sbar-rail {
    flex: 1 1 auto;
    min-width: 0;
    height: 64px;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
}
.bmu-sbar-rail .pv2-gamerail {
    padding: 10px 12px 0;
    gap: 4px;
    overflow: visible;
    align-items: flex-start;
}
.bmu-sbar-rail .pv2-game-slot { z-index: 1; }
.bmu-sbar-rail .pv2-game-slot:has(.pv2-game-icon.active) { transform: translateY(-1px) scale(1.06); z-index: 2; }
.bmu-sbar-rail .pv2-game-slot:has(.pv2-game-icon.active):hover { transform: translateY(-1px) scale(1.06); }
/* Portal-Kachel (Bits-Muster + BitMeUp-Schriftzug) */
.pv2-game-slot.bitmeup .pv2-game-logo { bottom: 6%; width: 84%; }
.pv2-game-slot.bitmeup:hover .pv2-game-logo { width: 88%; }

.bmu-sbar-right { gap: 12px; padding-right: 12px; }

/* App-Kasten oben rechts: abgeschraegte Ecken, Rahmen aus Verlauf */
.bmu-appbox {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 42px;
    padding: 0 14px 0 14px;
    box-sizing: border-box;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(120deg, rgba(178, 58, 242, 0.9), rgba(95, 231, 249, 0.6) 60%, rgba(178, 58, 242, 0.9));
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    transition: transform 0.15s, filter 0.15s;
}
.bmu-appbox::before {
    content: '';
    position: absolute;
    inset: 1px;
    background: linear-gradient(135deg, rgba(48, 22, 82, 0.96), rgba(14, 9, 26, 0.98));
    clip-path: polygon(9.5px 0, 100% 0, 100% calc(100% - 9.5px), calc(100% - 9.5px) 100%, 0 100%, 0 9.5px);
}
.bmu-appbox > * { position: relative; z-index: 1; }
.bmu-appbox:hover { transform: translateY(-1px); filter: brightness(1.15); }
.bmu-appbox-txt { display: flex; flex-direction: column; line-height: 1.1; }
.bmu-appbox-txt b { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #fff; text-shadow: 0 0 8px rgba(95, 231, 249, 0.5); }
.bmu-appbox-txt small { font-size: 10px; color: var(--bmu-ink-soft); margin-top: 2px; }
.bmu-appbox-os { display: flex; gap: 8px; padding-left: 12px; border-left: 1px solid rgba(178, 58, 242, 0.45); }
.bmu-appbox-os i { display: flex; width: 20px; height: 20px; color: #d9cdf0; transition: color 0.15s, transform 0.15s; }
.bmu-appbox-os i:hover { color: var(--pv2-cyan); transform: scale(1.15); }
.bmu-svg { width: 100%; height: 100%; fill: currentColor; display: block; }

.bmu-sbar-flag { padding: 6px; }
.bmu-sbar-flag img { height: 16px; border-radius: 2px; }
.bmu-sbar-flag .pv2-flag-drop { width: 460px; right: -6px; top: 26px; }
.bmu-langs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}
.bmu-langs .pv2-lang-tile {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px;
    border-radius: 7px;
}

/* ------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------ */
.bmu-hero {
    position: relative;
    min-height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 104px 0 56px;
}
.bmu-hero-grid {
    position: relative;
    z-index: 2;
    pointer-events: none;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr);
    gap: 32px;
    align-items: end;
    width: 100%;
}
.bmu-hero-grid > * { pointer-events: auto; }
.bmu-hero-card { max-width: 720px; }
/* Portal-Seite: rechts die Anmeldung, beides mittig ausgerichtet */
.bmu-hero-grid:has(#bmu-hero-login) { grid-template-columns: minmax(0, 1fr) minmax(360px, 460px); align-items: center; gap: 48px; }
#bmu-hero-login { justify-self: end; width: 100%; max-width: 460px; }
.bmu-facts-portal { margin-top: 18px; }
.bmu-hero-logorow { display: flex; align-items: flex-end; gap: 26px; margin: 0 0 14px -4px; }
.bmu-hero-logo {
    display: block;
    max-width: 460px;
    width: auto;
    height: auto;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.8));
}
/* Maskottchen hinter dem Logo: Zeile wird zur Buehne, das Logo sitzt unten
   drauf und ragt 10px ueber die Unterkante des Maskottchens hinaus */
.bmu-hero-logorow.has-mascot { position: relative; display: block; width: max-content; max-width: 100%; }
.bmu-hero-logorow.has-mascot .bmu-hero-logo { position: relative; z-index: 1; margin-top: 170px; }
.bmu-hero-mascot {
    position: absolute;
    left: 50%;
    bottom: 10px;
    width: 300px;
    height: auto;
    margin-left: -150px;
    z-index: 0;
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.85));
    animation: bmuMascot 5s ease-in-out infinite;
}
@keyframes bmuMascot { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.bmu-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--g-accent);
    text-shadow: 0 0 10px var(--g-glow);
    margin-bottom: 10px;
}
.bmu-ribbon {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 5px;
    background: var(--pv2-dnd);
    color: #fff;
    font-size: 10px;
    letter-spacing: 1px;
    text-shadow: none;
}
.bmu-ribbon.beta { background: #2e9e4f; }
.bmu-hero-h1 {
    margin: 0 0 14px;
    font-size: 40px;
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: -0.3px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8), 0 0 30px rgba(0, 0, 0, 0.6);
}
.bmu-hero-p {
    margin: 0 0 24px;
    font-size: 16.5px;
    line-height: 1.55;
    color: var(--bmu-ink-dim);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
    max-width: 640px;
}
.bmu-hero-cta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

/* JETZT SPIELEN */
.bmu-play {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 12px 30px 12px 22px;
    border-radius: 14px;
    background: var(--g-btn);
    border: 1px solid var(--g-btn-border);
    color: #fff;
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 0 28px var(--g-glow), 0 14px 34px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: transform 0.15s, box-shadow 0.15s;
    animation: bmuPlayPulse 3.2s ease-in-out infinite;
}
.bmu-play:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 0 40px var(--g-glow), 0 18px 40px rgba(0, 0, 0, 0.6); animation: none; }
.bmu-play:active { transform: scale(0.98); }
.bmu-play::after {
    content: '';
    position: absolute;
    top: -40%; bottom: -40%;
    left: -30%;
    width: 22%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg);
    animation: bmuPlayShine 4.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes bmuPlayShine {
    0%, 60% { left: -30%; }
    100% { left: 130%; }
}
@keyframes bmuPlayPulse {
    0%, 100% { box-shadow: 0 0 22px var(--g-glow), 0 14px 34px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
    50% { box-shadow: 0 0 40px var(--g-glow), 0 14px 34px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
}
.bmu-play-ico {
    position: relative;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5);
    flex: 0 0 auto;
}
.bmu-play-ico::before {
    content: '';
    position: absolute;
    left: 15px; top: 11px;
    border-left: 15px solid #fff;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.5));
}
.bmu-play-txt {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}
.bmu-play-txt small {
    font-size: 11px;
    font-weight: normal;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.82);
    margin-top: 4px;
    text-transform: none;
}
.bmu-play-soon { animation: none; }
.bmu-play-soon .bmu-play-ico::before {
    border: 0;
    left: 12px; top: 12px;
    width: 16px; height: 16px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 3px #fff;
}

.bmu-btn { font-size: 14px; padding: 10px 20px; border-radius: 10px; text-decoration: none; }
.bmu-btn-ghost {
    background: rgba(10, 8, 18, 0.55);
    border-color: rgba(255, 255, 255, 0.28);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    text-decoration: none;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 13.5px;
}
.bmu-btn-ghost:hover { border-color: #fff; box-shadow: 0 0 12px rgba(255, 255, 255, 0.2); }

/* aktuelle Meldung im Hero */
.bmu-hnews {
    position: relative;
    background: rgba(12, 9, 22, 0.72);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--pv2-border);
    border-left: 3px solid var(--g-accent);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    max-width: 440px;
    justify-self: end;
}
.bmu-hnews:hover { transform: translateY(-3px); box-shadow: 0 0 20px var(--g-glow), 0 18px 44px rgba(0, 0, 0, 0.6); }
.bmu-hnews-empty { padding: 18px; cursor: default; color: var(--bmu-ink-soft); font-size: 13px; }
.bmu-hnews-tag {
    position: absolute;
    top: 10px; left: 10px;
    z-index: 2;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    background: var(--g-accent);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.bmu-hnews-img { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.bmu-hnews.noimg .bmu-hnews-tag { position: static; display: inline-block; margin: 14px 0 0 16px; }
.bmu-hnews.noimg .bmu-hnews-body { padding-top: 8px; }
.bmu-hnews-body { padding: 14px 16px 14px; }
.bmu-hnews-title { font-size: 16px; font-weight: 800; line-height: 1.3; margin-bottom: 4px; }
.bmu-hnews-meta { font-size: 11.5px; color: var(--bmu-ink-soft); margin-bottom: 8px; }
.bmu-hnews-text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--bmu-ink-dim);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bmu-hnews-text b { color: #fff; }
.bmu-hnews-more { margin-top: 8px; font-size: 12.5px; font-weight: bold; color: var(--g-accent); }

.bmu-hero-hint {
    position: absolute;
    left: 50%; bottom: 14px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: opacity 0.3s;
}
.bmu-hero-hint i {
    width: 10px; height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    animation: bmuHint 1.6s ease-in-out infinite;
}
@keyframes bmuHint { 0%, 100% { transform: translateY(0) rotate(45deg); } 50% { transform: translateY(6px) rotate(45deg); } }

/* ------------------------------------------------------------------
   Inhalt
   ------------------------------------------------------------------ */
.bmu-content {
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, rgba(11, 9, 20, 0) 0, rgba(11, 9, 20, 0.92) 160px, var(--bmu-page) 360px);
    padding-top: 40px;
    min-height: 200px;
}
.bmu-sec { padding: 54px 0; position: relative; }
.bmu-sec-dark { background: rgba(4, 3, 8, 0.55); }
.bmu-velvet {
    background:
        radial-gradient(ellipse at 20% 0%, var(--g-grad), transparent 55%),
        radial-gradient(ellipse at 80% 100%, var(--g-grad), transparent 55%);
}
.bmu-hex {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='69' height='39' viewBox='0 0 69.282 39'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1'%3E%3Cpath d='M17.321 0L34.641 6.5L34.641 19.5L17.321 26L0 19.5L0 6.5Z'/%3E%3Cpath d='M51.962 0L69.282 6.5L69.282 19.5L51.962 26L34.641 19.5L34.641 6.5Z'/%3E%3Cpath d='M34.641 19.5L51.962 26L51.962 39L34.641 45.5L17.321 39L17.321 26Z'/%3E%3C/g%3E%3C/svg%3E");
}
.bmu-sec-head { margin-bottom: 26px; max-width: 820px; }
.bmu-sec-head.center { text-align: center; margin-left: auto; margin-right: auto; }
.bmu-h2 {
    margin: 0 0 10px;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: -0.2px;
}
.bmu-sub {
    margin: 0 0 12px;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--bmu-ink-dim);
}

/* Einblenden beim Scrollen */
.bmu-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.bmu-reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .bmu-reveal { opacity: 1; transform: none; transition: none; } }

/* waagerechte Reihen */
.bmu-drag {
    cursor: grab;
    scrollbar-width: thin;
    scrollbar-color: var(--g-glow) transparent;
}
.bmu-drag.dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; }
.bmu-drag img { -webkit-user-drag: none; user-select: none; }
.bmu-drag::-webkit-scrollbar { height: 7px; }
.bmu-drag::-webkit-scrollbar-thumb { background: var(--g-glow); border-radius: 4px; }
.bmu-drag::-webkit-scrollbar-thumb:hover { background: var(--g-accent); }
.bmu-drag::-webkit-scrollbar-track { background: transparent; }
.bmu-drag-hint { margin-top: 8px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--bmu-ink-soft); text-align: right; }

/* Feature-Karussell */
.bmu-caro {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 4px 14px;
}
.bmu-feat {
    position: relative;
    flex: 0 0 360px;
    background: var(--g-tile);
    border: 1px solid var(--pv2-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.bmu-feat:hover { transform: translateY(-4px); border-color: var(--g-accent); box-shadow: 0 0 18px var(--g-glow), 0 14px 34px rgba(0, 0, 0, 0.5); }
.bmu-feat-media { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.bmu-feat-media img, .bmu-feat-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bmu-feat-media video { opacity: 0; transition: opacity 0.6s; }
.bmu-feat:hover .bmu-feat-media video, .bmu-feat-media video[src] { opacity: 1; }
.bmu-feat-text { padding: 14px 16px 16px; }
.bmu-feat-text h3 { margin: 0 0 6px; font-size: 17px; font-weight: 800; }
.bmu-feat-text p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--bmu-ink-dim); }

/* Galerie + Lightbox */
.bmu-shots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
}
.bmu-shots.wide { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.bmu-shot {
    position: relative;
    display: block;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--pv2-border);
    background: #000;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    cursor: zoom-in;
}
.bmu-shot img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.bmu-shots.wide .bmu-shot img { aspect-ratio: 21 / 9; }
.bmu-shot:hover { transform: scale(1.03); border-color: var(--g-accent); box-shadow: 0 0 16px var(--g-glow); z-index: 2; }
.bmu-shot span, .bmu-render span, .bmu-map span {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 20px 10px 8px;
    font-size: 12px;
    color: #fff;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), transparent);
    text-shadow: 0 1px 3px #000;
}
.bmu-lightbox {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(4, 2, 8, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.bmu-lightbox.open { display: flex; }
.bmu-lightbox img {
    max-width: 92vw;
    max-height: 86vh;
    border-radius: 10px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.9), 0 0 30px var(--g-glow);
}
.bmu-lightbox-close, .bmu-lightbox-nav {
    position: absolute;
    color: #fff;
    cursor: pointer;
    user-select: none;
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: background 0.15s;
}
.bmu-lightbox-close:hover, .bmu-lightbox-nav:hover { background: var(--g-accent); }
.bmu-lightbox-close { top: 18px; right: 18px; font-size: 18px; }
.bmu-lightbox-nav { top: 50%; transform: translateY(-50%); font-size: 40px; line-height: 1; padding-bottom: 6px; }
.bmu-lightbox-prev { left: 18px; }
.bmu-lightbox-next { right: 18px; }
.bmu-lightbox-cap { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; font-size: 13px; color: #ddd; }
.bmu-lightbox-cap em { color: var(--bmu-ink-soft); font-style: normal; margin-left: 10px; }

/* SI2-Reihe */
.bmu-si2-row { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; padding: 6px 4px 14px; }
.bmu-si2-shot { flex: 0 0 300px; }
.bmu-si2-links { margin: 6px 0 0; }
.bmu-si2-links .pv2-btn { text-decoration: none; }

/* Meldungen + Patchnotes */
.bmu-news { display: grid; grid-template-columns: 1fr; gap: 18px; }
.bmu-news.with-patches { grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr); }
.bmu-news-col { display: block; min-width: 0; }
.bmu-news-older { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.bmu-newscard {
    background: var(--g-tile);
    border: 1px solid var(--pv2-border);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4);
}
.bmu-newscard.big { flex-direction: row; }
.bmu-newscard-imgwrap { flex: 0 0 auto; height: 120px; overflow: hidden; }
.bmu-newscard-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bmu-newscard.big .bmu-newscard-imgwrap { width: 30%; height: auto; max-height: 230px; align-self: stretch; }
.bmu-newscard-body { padding: 16px 18px 18px; min-width: 0; }
.bmu-newscard h3 { margin: 0 0 4px; font-size: 17px; font-weight: 800; line-height: 1.3; }
.bmu-newscard.big h3 { font-size: 21px; }
.bmu-newscard-meta { font-size: 11.5px; color: var(--bmu-ink-soft); margin-bottom: 8px; }
.bmu-newscard-text { font-size: 13px; line-height: 1.5; color: var(--bmu-ink-dim); max-height: 7.5em; overflow: hidden; position: relative; }
.bmu-newscard.big .bmu-newscard-text { font-size: 13.5px; max-height: 12em; }
.bmu-newscard-text b { color: #fff; }
.bmu-newscard-more { display: inline-block; margin-top: 10px; color: var(--g-accent); font-weight: bold; font-size: 13px; text-decoration: none; }
.bmu-newscard-more:hover { text-decoration: underline; }
.bmu-news-loading { padding: 20px; color: var(--bmu-ink-soft); font-size: 14px; }
.bmu-patches {
    background: var(--g-tile);
    border: 1px solid var(--pv2-border);
    border-radius: 14px;
    padding: 14px 16px;
    align-self: start;
}
.bmu-patches-hl { font-size: 13px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: var(--g-hl); text-shadow: 0 0 8px var(--g-glow); margin-bottom: 8px; }
.bmu-patch { padding: 10px 0; border-top: 1px solid var(--pv2-border); font-size: 13px; }
.bmu-patch-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.bmu-patch-head span { color: var(--bmu-ink-soft); font-size: 11.5px; white-space: nowrap; }
.bmu-patch ul { margin: 4px 0 0; padding-left: 18px; color: var(--bmu-ink-dim); line-height: 1.5; }
.bmu-patch a { color: var(--g-accent); text-decoration: none; font-size: 12.5px; }

/* Video-Sektion (Galaxie, 3D-Karte) */
.bmu-sec-video {
    min-height: 520px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 70px 0;
}
.bmu-sec-video-poster, .bmu-sec-video-vid {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
}
.bmu-sec-video-vid { opacity: 0; transition: opacity 1s; }
.bmu-sec-video-vid[src] { opacity: 1; }
.bmu-sec-video::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(6, 4, 12, 0.88) 0%, rgba(6, 4, 12, 0.55) 45%, rgba(6, 4, 12, 0.1) 100%);
}
.bmu-sec-video-text { position: relative; z-index: 2; max-width: 1280px; }
.bmu-sec-video-text .bmu-sub { max-width: 560px; }
.bmu-sec-video-text .bmu-h2 { font-size: 34px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8); }

/* zweispaltig Bild/Text */
.bmu-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
}
.bmu-split.rev .bmu-split-media { order: 2; }
.bmu-split-media {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    aspect-ratio: 16 / 10;
}
.bmu-split-media img, .bmu-split-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bmu-split-media video { opacity: 0; transition: opacity 0.8s; }
.bmu-split-media video[src] { opacity: 1; }
.bmu-dn-park { aspect-ratio: 4 / 3; }
.bmu-glow { box-shadow: 0 0 0 1px var(--pv2-border), 0 0 34px var(--g-glow), 0 20px 50px rgba(0, 0, 0, 0.6); }

/* SI-Arsenal: vier Karussells (Coverflow: Mitte gross, links/rechts die Nachbarn) */
.bmu-arsenal { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.bmu-arc {
    background: var(--g-tile);
    border: 1px solid var(--pv2-border);
    border-radius: 14px;
    padding: 12px 14px 14px;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.bmu-arc:hover { border-color: var(--g-accent); box-shadow: 0 0 18px var(--g-glow); }
.bmu-arc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.bmu-cat-label { font-size: 12px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; color: var(--g-hl); text-shadow: 0 0 8px var(--g-glow); }
.bmu-arc-stage {
    position: relative;
    height: 300px;
    border-radius: 12px;
    background:
        radial-gradient(ellipse at 50% 55%, var(--g-grad), transparent 62%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.55));
    overflow: hidden;
}
.bmu-arc-ring { position: absolute; inset: 0; }
.bmu-arc-slot {
    position: absolute;
    left: 50%; top: 50%;
    width: 280px; height: 280px;
    margin: -140px 0 0 -140px;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.3, 1), opacity 0.45s, filter 0.45s;
    will-change: transform, opacity;
}
.bmu-arc-slot.nofx { transition: none; }
.bmu-arc-slot img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.85));
    -webkit-user-drag: none;
}
/* Rollen: 0 weit links (unsichtbar), 1 links, 2 Mitte, 3 rechts, 4 weit rechts */
.bmu-arc-slot.r0 { transform: translateX(-100%) scale(0.35); opacity: 0; pointer-events: none; }
.bmu-arc-slot.r1 { transform: translateX(-62%) scale(0.5); opacity: 0.55; filter: brightness(0.7) saturate(0.8); cursor: pointer; z-index: 1; }
.bmu-arc-slot.r2 { transform: translateX(0) scale(1); opacity: 1; z-index: 3; }
.bmu-arc-slot.r3 { transform: translateX(62%) scale(0.5); opacity: 0.55; filter: brightness(0.7) saturate(0.8); cursor: pointer; z-index: 1; }
.bmu-arc-slot.r4 { transform: translateX(100%) scale(0.35); opacity: 0; pointer-events: none; }
.bmu-arc-slot.r1:hover, .bmu-arc-slot.r3:hover { opacity: 0.85; filter: none; }
.bmu-arc-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(10, 8, 18, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    font-size: 32px;
    line-height: 1;
    padding-bottom: 5px;
    text-decoration: none;
    z-index: 5;
    transition: background 0.15s, transform 0.15s;
}
.bmu-arc-nav.prev { left: 12px; }
.bmu-arc-nav.next { right: 12px; }
.bmu-arc-nav:hover { background: var(--g-accent); transform: translateY(-50%) scale(1.1); }
.bmu-arc-name { text-align: center; font-size: 17px; font-weight: 800; margin: 12px 0 2px; min-height: 20px; }
.bmu-arc-count { text-align: center; font-size: 12px; color: var(--bmu-ink-soft); }

/* Damoria: Schloesser + Truppen */
.bmu-castles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bmu-castle {
    position: relative;
    text-align: center;
    padding: 14px 12px 16px;
    border-radius: 14px;
    background: var(--g-tile);
    border: 1px solid var(--pv2-border);
    transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.bmu-castle:hover { transform: translateY(-4px); border-color: var(--g-accent); box-shadow: 0 0 18px var(--g-glow); }
.bmu-castle img { width: 100%; max-width: 190px; height: auto; display: block; margin: 0 auto 8px; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.7)); transition: transform 0.25s; }
.bmu-castle:hover img { transform: scale(1.06); }
.bmu-castle-name { font-size: 15px; font-weight: 800; color: var(--g-hl); margin-bottom: 4px; }
.bmu-castle-d { font-size: 12.5px; line-height: 1.45; color: var(--bmu-ink-dim); }

.bmu-troops { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bmu-troopgroup {
    background: var(--g-tile);
    border: 1px solid var(--pv2-border);
    border-radius: 14px;
    padding: 14px 16px 16px;
}
.bmu-troopgroup-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.bmu-troopgroup-head b { font-size: 16px; color: var(--g-hl); text-shadow: 0 0 8px var(--g-glow); }
.bmu-troopgroup-head span { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--bmu-ink-soft); }
.bmu-troopgroup-units { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.bmu-troopgroup:nth-child(3) .bmu-troopgroup-units { grid-template-columns: repeat(2, 1fr); }
.bmu-unit {
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.07);
    text-align: center;
    padding: 12px 8px 12px;
    transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.bmu-unit:hover { transform: translateY(-3px); border-color: var(--g-accent); box-shadow: 0 0 14px var(--g-glow); }
.bmu-unit img { height: 118px; width: auto; max-width: 100%; display: block; margin: 0 auto 8px; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.7)); transition: transform 0.25s; }
.bmu-unit:hover img { transform: scale(1.06); }
.bmu-unit-name { font-size: 14px; font-weight: 800; color: var(--g-hl); margin-bottom: 4px; }
.bmu-unit-d { font-size: 11.5px; line-height: 1.45; color: var(--bmu-ink-dim); }

/* Mebula: Mebulies in echter Groesse */
.bmu-mebulies-wrap {
    position: relative;
    border-radius: 16px;
    border: 1px solid var(--pv2-border);
    background:
        linear-gradient(180deg, rgba(20, 10, 34, 0.6), rgba(8, 5, 14, 0.9)),
        radial-gradient(ellipse at 50% 100%, var(--g-grad), transparent 60%);
    overflow: hidden;
}
.bmu-mebulies-wrap::after {
    /* Boden */
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 26px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--g-accent), transparent);
    opacity: 0.6;
    pointer-events: none;
}
.bmu-mebulies {
    display: flex;
    align-items: flex-end;
    gap: 22px;
    height: 600px;
    padding: 30px 40px 26px;
    overflow-x: auto;
    overflow-y: hidden;
    box-sizing: border-box;
}
.bmu-mebuly { position: relative; flex: 0 0 auto; text-align: center; }
.bmu-mebuly img { display: block; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.8)); transition: transform 0.2s; }
.bmu-mebuly:hover img { transform: translateY(-6px) scale(1.04); }
.bmu-mebuly span {
    position: absolute;
    left: 50%; top: 100%;
    transform: translateX(-50%);
    margin-top: 4px;
    white-space: nowrap;
    font-size: 11px;
    color: var(--bmu-ink-soft);
    pointer-events: none;
}
.bmu-mebuly:hover span { color: #fff; }

/* Mebula: Meister */
.bmu-masters { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.bmu-master {
    background: var(--g-tile);
    border: 1px solid var(--pv2-border);
    border-radius: 14px;
    padding: 14px 16px;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.bmu-master:hover { border-color: var(--g-accent); box-shadow: 0 0 18px var(--g-glow); }
.bmu-master-top { display: flex; gap: 14px; align-items: center; }
.bmu-master-skin {
    width: 84px; height: 100px;
    flex: 0 0 auto;
    object-fit: contain;
    object-position: bottom;
    image-rendering: pixelated;
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.7));
}
.bmu-master-name { font-size: 17px; font-weight: 800; color: var(--g-hl); }
.bmu-master-map { font-size: 12.5px; color: var(--bmu-ink-dim); margin: 3px 0 6px; }
.bmu-master-medal { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--bmu-ink-soft); }
.bmu-master-medal img { width: 34px; height: 34px; filter: drop-shadow(0 0 6px var(--g-glow)); }
.bmu-master-team { position: relative; display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--pv2-border); }
.bmu-master-team-hl {
    position: absolute;
    top: -8px; left: 10px;
    padding: 0 7px;
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--bmu-ink-soft);
    background: #171227;
    border-radius: 4px;
    line-height: 15px;
}
.bmu-master-mon { text-align: center; }
.bmu-master-mon img { height: 52px; width: auto; max-width: 80px; object-fit: contain; display: block; margin: 0 auto; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.7)); }
.bmu-master-mon span { font-size: 10px; color: var(--bmu-ink-soft); }

/* Mebula: Karten */
.bmu-maps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.bmu-map {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--pv2-border);
    background: #000;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.bmu-map img { display: block; width: 100%; aspect-ratio: 25 / 16; object-fit: cover; transition: transform 0.4s; }
.bmu-map:hover { border-color: var(--g-accent); box-shadow: 0 0 16px var(--g-glow); z-index: 2; }
.bmu-map:hover img { transform: scale(1.08); }

/* Mebula Legends: Portraits + Bildzeilen + Welten */
.bmu-portraits { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; padding: 6px 4px 14px; }
.bmu-portraits-hl { font-size: 12px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; color: var(--g-hl); text-shadow: 0 0 8px var(--g-glow); margin: 12px 0 4px; }
.bmu-portrait {
    flex: 0 0 auto;
    width: 92px; height: 92px;
    border-radius: 12px;
    background: radial-gradient(circle at 50% 40%, rgba(212, 175, 55, 0.18), rgba(20, 10, 40, 0.7) 70%);
    border: 1px solid rgba(212, 175, 55, 0.3);
    overflow: hidden;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.bmu-portrait img { width: 100%; height: 100%; display: block; object-fit: contain; }
.bmu-portrait:hover { transform: translateY(-4px) scale(1.06); border-color: var(--g-accent); box-shadow: 0 0 14px var(--g-glow); }
.bmu-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 36px; align-items: center; margin-bottom: 40px; }
.bmu-row.rev .bmu-row-shot { order: 2; }
.bmu-row-shot { border-radius: 16px; overflow: hidden; background: #000; }
.bmu-row-shot img { display: block; width: 100%; height: auto; }
.bmu-row-text h3 { margin: 0 0 8px; font-size: 24px; font-weight: 900; }
.bmu-row-text p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--bmu-ink-dim); }
.bmu-worlds { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.bmu-world { background: var(--g-tile); border: 1px solid var(--pv2-border); border-radius: 14px; padding: 16px 18px; }
/* Zeile 1: Name links, Zahlen rechts; Zeile 2: Tags (eine Zeile); Zeile 3:
   Beschreibung mit fester Hoehe - so beginnen alle Ranglisten auf gleicher Hoehe */
.bmu-world-head { display: flex; align-items: baseline; gap: 8px; font-size: 19px; margin-bottom: 6px; min-width: 0; }
.bmu-world-head > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bmu-world-head .bmu-world-flag { flex: 0 0 auto; align-self: center; }
.bmu-world-flag { height: 14px; border-radius: 2px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.6); }
.bmu-tag { font-size: 10px; font-weight: 900; letter-spacing: 0.6px; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; background: #555; color: #fff; }
.bmu-world-stats { margin-left: auto; flex: 0 0 auto; display: flex; gap: 12px; font-size: 12px; color: var(--bmu-ink-dim); white-space: nowrap; }
.bmu-world-tags { height: 20px; overflow: hidden; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.bmu-world-descr { height: 60px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: 13.5px; line-height: 1.5; color: var(--bmu-ink-dim); margin: 0 0 10px; }
/* Zwei Ranglisten nebeneinander; lange Namen werden abgeschnitten (min-width:0
   auf JEDER Ebene, sonst dehnt der laengste Name die Spalte ueber die Karte) */
.bmu-world { min-width: 0; }
.bmu-world-ranks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.bmu-world-ranks .bmu-world-rank { min-width: 0; }
.bmu-world-ranks .bmu-world-rank:only-child { grid-column: 1 / -1; }
.bmu-world-rank-hl { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--bmu-ink-soft); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bmu-world-rank li { min-width: 0; align-items: baseline; }
.bmu-world-rank li span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 8px; }
.bmu-world-rank li b { flex: 0 0 auto; white-space: nowrap; }
.bmu-world-rank li small { color: var(--bmu-ink-soft); font-size: 11px; margin-left: 4px; }
.bmu-world-rank ol { margin: 0 0 12px; padding: 0; list-style: none; counter-reset: r; }
.bmu-world-rank li { display: flex; justify-content: space-between; padding: 4px 0; border-top: 1px solid var(--pv2-border); font-size: 13px; counter-increment: r; }
.bmu-world-rank li span::before { content: counter(r) '. '; color: var(--g-accent); font-weight: bold; }
.bmu-world-cta { display: flex; gap: 8px; flex-wrap: wrap; }
.bmu-world-cta .pv2-btn { text-decoration: none; }

/* Nexus: Schiffe */
.bmu-ships { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.bmu-ship {
    border-radius: 14px;
    background: var(--g-tile);
    border: 1px solid var(--pv2-border);
    padding: 14px;
    text-align: center;
    transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.bmu-ship:hover { transform: translateY(-4px); border-color: var(--g-accent); box-shadow: 0 0 18px var(--g-glow); }
.bmu-ship-img { height: 120px; display: flex; align-items: center; justify-content: center; }
.bmu-ship-img img { max-width: 100%; max-height: 100%; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.8)); transition: transform 0.3s; }
.bmu-ship:hover .bmu-ship-img img { transform: scale(1.1) rotate(-2deg); }
.bmu-ship-name { margin-top: 10px; font-size: 13.5px; font-weight: 800; color: var(--g-hl); }

/* District Null */
.bmu-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.bmu-facts span {
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(45, 226, 255, 0.1);
    border: 1px solid rgba(45, 226, 255, 0.35);
    color: #d8f8ff;
    font-size: 12.5px;
}
.bmu-renders { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.bmu-render {
    position: relative;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 60%, rgba(45, 226, 255, 0.12), rgba(6, 8, 20, 0.9) 70%);
    border: 1px solid var(--pv2-border);
    cursor: zoom-in;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.bmu-render img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.bmu-render:hover { transform: scale(1.03); border-color: var(--g-accent); box-shadow: 0 0 16px var(--g-glow); z-index: 2; }
.bmu-park3d { border-radius: 14px; overflow: hidden; border: 1px solid var(--pv2-border); background: #000; aspect-ratio: 16 / 9; }
.bmu-park3d iframe { width: 100%; height: 100%; border: 0; display: block; }

/* mittiger Spielen-Knopf am unteren Rand (ueber der Fusszeile) */
.bmu-sticky {
    position: absolute;
    left: 50%;
    bottom: calc(var(--bmu-foot) + 16px);
    transform: translateX(-50%) translateY(30px);
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 9px 26px 9px 16px;
    border-radius: 999px;
    background: var(--g-btn);
    border: 1px solid var(--g-btn-border);
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 0 26px var(--g-glow), 0 12px 30px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
}
.bmu-sticky.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.bmu-sticky:hover { transform: translateX(-50%) translateY(-2px) scale(1.04); box-shadow: 0 0 40px var(--g-glow), 0 16px 36px rgba(0, 0, 0, 0.65); }
.bmu-sticky .bmu-play-ico { width: 32px; height: 32px; }
.bmu-sticky .bmu-play-ico::before { left: 12px; top: 8px; border-left-width: 12px; border-top-width: 8px; border-bottom-width: 8px; }
.bmu-sticky .bmu-play-txt { font-size: 17px; letter-spacing: 0.8px; }

/* nach oben */
.bmu-totop {
    position: absolute;
    right: 22px;
    bottom: calc(var(--bmu-foot) + 18px);
    z-index: 60;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--g-btn);
    border: 1px solid var(--g-btn-border);
    color: #fff;
    font-size: 18px;
    text-decoration: none;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
    box-shadow: 0 0 12px var(--g-glow);
}
.bmu-totop.show { opacity: 1; pointer-events: auto; }

/* ------------------------------------------------------------------
   Overlay fuer Registrierung / Warten / Fehler / Erfolg
   ------------------------------------------------------------------ */
.bmu-start-ovl {
    position: fixed;
    inset: 0;
    z-index: 250;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(4, 2, 8, 0.78);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.bmu-start-ovl-box {
    position: relative;
    width: 440px;
    max-width: 94vw;
    animation: bmuOvlIn 0.25s ease;
}
.bmu-start-ovl-box.wide { width: 520px; }
.bmu-start-ovl-box.big { width: 660px; }
.bmu-start-ovl-box > .bmu-panel-in { max-height: 92vh; overflow: auto; padding: 30px 32px 26px; }
.bmu-start-ovl-inner { position: relative; min-height: 80px; }
@keyframes bmuOvlIn { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
.bmu-start-ovl-close {
    position: absolute;
    top: 8px; right: 10px;
    z-index: 5;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: #ddd;
    font-size: 14px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.06);
}
.bmu-start-ovl-close:hover { background: var(--pv2-accent); color: #fff; }

/* ------------------------------------------------------------------
   Breiten
   ------------------------------------------------------------------ */
@media (max-width: 1280px){
    .bmu-appbox-txt small { display: none; }
    .bmu-sbar-rail .pv2-gamerail { padding-top: 12px; }
    .bmu-sbar-rail .pv2-game-slot { width: 96px; height: 55px; }
    .bmu-hero-h1 { font-size: 34px; }
    .bmu-castles, .bmu-ships, .bmu-maps, .bmu-renders { grid-template-columns: repeat(3, 1fr); }
    .bmu-troopgroup-units { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1120px){
    .bmu-appbox-txt { display: none; }
    .bmu-appbox { padding: 0 10px; }
    .bmu-appbox-os { border-left: 0; padding-left: 0; }
    .bmu-hero-grid:has(#bmu-hero-login) { grid-template-columns: 1fr; }
    #bmu-hero-login { justify-self: start; }
    .bmu-reg .bmu-reg-fields { grid-template-columns: 1fr; }
    .bmu-hero-grid { grid-template-columns: 1fr; }
    .bmu-hnews { justify-self: start; max-width: 560px; }
    .bmu-news.with-patches { grid-template-columns: 1fr; }
    .bmu-split, .bmu-row { grid-template-columns: 1fr; }
    .bmu-split.rev .bmu-split-media, .bmu-row.rev .bmu-row-shot { order: 0; }
    .bmu-arsenal { grid-template-columns: 1fr; }
    .bmu-troops { grid-template-columns: 1fr; }
    .bmu-news-older { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1000px){
    .bmu-sbar-rail .pv2-gamerail { padding-top: 14px; gap: 2px; }
    .bmu-sbar-rail .pv2-game-slot { width: 84px; height: 48px; }
    .bmu-os { grid-template-columns: 1fr; }
    .bmu-discord .bmu-panel-in { flex-direction: column; text-align: center; }
    .bmu-castles, .bmu-ships, .bmu-maps, .bmu-renders { grid-template-columns: repeat(2, 1fr); }
    .bmu-news-col { grid-template-columns: 1fr; }
    .bmu-newscard.big { flex-direction: column; }
    .bmu-newscard.big .bmu-newscard-img { width: 100%; aspect-ratio: 16 / 7; min-height: 0; }
    .bmu-mebulies { height: 440px; }
}
/* niedrige Fenster: Hero kompakter, damit JETZT SPIELEN ohne Scrollen sichtbar bleibt */
@media (max-height: 860px){
    .bmu-hero { padding-top: 92px; padding-bottom: 44px; }
    .bmu-login .bmu-panel-in { padding: 20px 24px 18px; }
    .bmu-login-title { font-size: 22px; }
    .bmu-prov { height: 62px; }
    .bmu-hero-h1 { font-size: 32px; margin-bottom: 10px; }
    .bmu-hero-p { font-size: 15px; margin-bottom: 18px; }
    .bmu-hero-logorow img.bmu-hero-logo { max-height: 120px !important; }
    .bmu-hero-logorow.has-mascot .bmu-hero-logo { margin-top: 120px; }
    .bmu-hero-mascot { width: 220px; margin-left: -110px; }
    .bmu-hnews-text { -webkit-line-clamp: 2; }
}
@media (min-width: 2000px){
    .bmu-wrap { max-width: 1600px; }
    .bmu-hero-h1 { font-size: 48px; }
    .bmu-hero-p { font-size: 19px; }
    .bmu-h2 { font-size: 36px; }
    .bmu-sub { font-size: 17.5px; }
    .bmu-feat { flex-basis: 420px; }
}

/* ------------------------------------------------------------------
   Sci-Fi-Panel: zwei abgeschraegte Ecken, Rahmen mit Lichtlauf,
   Eckwinkel und eine wandernde Abtastlinie (SI2-Fenster-Anmutung).
   Der Lichtlauf ist ein gedrehtes Pseudo-Element (nur transform ->
   Compositor), nicht ein animierter Conic-Winkel (rastert jeden Frame).
   ------------------------------------------------------------------ */
.bmu-panel {
    position: relative;
    padding: 1.5px;
    clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
    background: rgba(178, 58, 242, 0.35);
    isolation: isolate;
    /* overflow:hidden zusaetzlich zum clip-path: der 300%-Lichtlauf darunter
       zaehlt sonst zur Scrollhoehe der Seite (clip-path beschneidet nur die Malerei) */
    overflow: hidden;
}
.bmu-panel::before {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 300%; height: 300%;
    margin: -150% 0 0 -150%;
    padding-bottom: 300%;
    background: conic-gradient(from 0deg,
        rgba(178, 58, 242, 0.25) 0deg, rgba(95, 231, 249, 1) 60deg, rgba(178, 58, 242, 0.25) 120deg,
        rgba(178, 58, 242, 0.25) 180deg, rgba(178, 58, 242, 1) 240deg, rgba(178, 58, 242, 0.25) 300deg,
        rgba(178, 58, 242, 0.25) 360deg);
    animation: bmuPanelSpin 7s linear infinite;
    will-change: transform;
    z-index: 0;
}
@keyframes bmuPanelSpin { to { transform: rotate(360deg); } }
.bmu-panel-in {
    position: relative;
    z-index: 1;
    clip-path: polygon(0 0, calc(100% - 21px) 0, 100% 21px, 100% 100%, 21px 100%, 0 calc(100% - 21px));
    /* lila Wasch wie der erste Portal-Hintergrund (hero.webp), darueber das
       ruhige 1/0-Muster (.bmu-pbits) */
    background: linear-gradient(160deg, rgba(38, 18, 66, 0.72), rgba(12, 7, 24, 0.88)),
        url('/images/start/bitmeup/hero.webp?v=3') center / cover no-repeat;
    padding: 26px 28px 24px;
    box-sizing: border-box;
}
/* Eckwinkel oben links / unten rechts */
.bmu-panel-in::before, .bmu-panel-in::after {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    pointer-events: none;
    z-index: 2;
}
.bmu-panel-in::before { left: 6px; top: 6px; border-left: 2px solid var(--pv2-cyan); border-top: 2px solid var(--pv2-cyan); }
.bmu-panel-in::after { right: 6px; bottom: 6px; border-right: 2px solid var(--pv2-cyan); border-bottom: 2px solid var(--pv2-cyan); }
/* 1/0-Muster im Panel: Grundlage still, zwei Lagen mit Lichtflecken pulsieren
   versetzt (nur opacity -> billig) */
.bmu-pbits {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: url('/images/start/bitmeup/bits.webp?v=3') 0 0 / 600px 360px repeat;
    opacity: 0.11;
    filter: blur(0.8px);
}
.bmu-pbits.p1, .bmu-pbits.p2 {
    opacity: 0;
    -webkit-mask-image: radial-gradient(circle at 18% 26%, #000 0, transparent 24%), radial-gradient(circle at 76% 62%, #000 0, transparent 22%), radial-gradient(circle at 58% 8%, #000 0, transparent 18%);
    mask-image: radial-gradient(circle at 18% 26%, #000 0, transparent 24%), radial-gradient(circle at 76% 62%, #000 0, transparent 22%), radial-gradient(circle at 58% 8%, #000 0, transparent 18%);
    animation: bmuBitsPulse 4.8s ease-in-out infinite;
}
.bmu-pbits.p2 {
    -webkit-mask-image: radial-gradient(circle at 70% 24%, #000 0, transparent 22%), radial-gradient(circle at 28% 74%, #000 0, transparent 24%), radial-gradient(circle at 50% 96%, #000 0, transparent 18%);
    mask-image: radial-gradient(circle at 70% 24%, #000 0, transparent 22%), radial-gradient(circle at 28% 74%, #000 0, transparent 24%), radial-gradient(circle at 50% 96%, #000 0, transparent 18%);
    animation-duration: 6.4s;
    animation-delay: -2.9s;
}
@keyframes bmuBitsPulse { 0%, 100% { opacity: 0; } 50% { opacity: 0.38; } }
.bmu-panel-in > :not(.bmu-pbits):not(.bmu-start-ovl-close) { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce){
    .bmu-panel::before { animation: none; }
    .bmu-pbits.p1, .bmu-pbits.p2 { display: none; }
}

/* ---- Anmeldung ----------------------------------------------------- */
.bmu-login-head { margin-bottom: 14px; }
.bmu-login-head .bmu-eyebrow { font-size: 13px; }
.bmu-cta-login { margin-top: 18px; }
.bmu-login-title { margin: 4px 0 0; font-size: 26px; font-weight: 900; color: #fff; line-height: 1.1; }
.bmu-hash { color: var(--pv2-cyan); }
.bmu-lform-fields { display: flex; flex-direction: column; gap: 12px; }
/* per ID: Extern.js setzt bei Fehlern className='form_field_error' */
[id="form.login.container"] { position: relative; display: flex; flex-direction: column; gap: 12px; }
/* die globale .form_field_error faerbt sonst den ganzen Kasten rot - hier
   markieren nur die Felder selbst den Fehler */
[id="form.login.container"].form_field_error { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; color: inherit !important; }
[id="form.login.container"].form_field_error input[type="text"],
[id="form.login.container"].form_field_error input[type="password"] { border-color: #e04848; box-shadow: inset 0 0 0 1px rgba(224, 72, 72, 0.6); }
.bmu-field { display: flex; flex-direction: column; gap: 5px; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--bmu-ink-soft); }
.bmu-field > span { display: flex; justify-content: space-between; align-items: center; }
.bmu-field input[type="text"], .bmu-field input[type="password"] {
    height: 44px;
    box-sizing: border-box;
    padding: 0 14px;
    background: rgba(6, 4, 12, 0.85);
    border: 1px solid rgba(178, 58, 242, 0.42);
    color: #fff;
    font-size: 15px;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 0;
    outline: none;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.bmu-field input:focus { border-color: var(--pv2-cyan); box-shadow: inset 0 0 0 1px rgba(95, 231, 249, 0.6), inset 0 0 14px rgba(95, 231, 249, 0.12); }
.bmu-field input.form_field_error { border-color: #e04848; box-shadow: inset 0 0 0 1px rgba(224, 72, 72, 0.6); }
.bmu-field input::placeholder { color: #7f7693; }
.bmu-field-forgot { font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--pv2-cyan); text-decoration: none; }
.bmu-field-forgot:hover { color: #fff; text-decoration: underline; }
.bmu-field-err { display: none; font-size: 12px; letter-spacing: 0; text-transform: none; color: #ffb3b3; }
.bmu-lform-err {
    display: none;
    background: #4a1020;
    border: 1px solid #e04848;
    padding: 8px 12px;
    font-size: 13px;
    color: #ffd7d7;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}
.bmu-lform-row { display: flex; justify-content: space-between; align-items: center; margin: 12px 0 14px; font-size: 13px; color: var(--bmu-ink-dim); }
.bmu-lform-row .bmu-slogin-stay input { width: 15px; height: 15px; }
.bmu-help {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; margin-left: 6px;
    border-radius: 50%; border: 1px solid currentColor;
    font-size: 9px; font-style: normal; cursor: help; letter-spacing: 0;
}
.bmu-cta {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    border: 0;
    padding: 0 20px;
    background: linear-gradient(180deg, #a548f0, #6a24b6);
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    transition: filter 0.15s, transform 0.1s;
    font-family: inherit;
}
.bmu-cta::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: -60%;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg);
    animation: bmuCtaShine 4s ease-in-out infinite;
}
@keyframes bmuCtaShine { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.bmu-cta:hover { filter: brightness(1.15); }
.bmu-cta:active { transform: scale(0.98); }
.bmu-cta > span { position: relative; z-index: 1; }
.bmu-cta-discord { width: auto; display: inline-flex; margin-top: 18px; background: linear-gradient(180deg, #6a7cff, #4752c4); }
.bmu-center-cta { display: flex; justify-content: center; margin: 28px 0 0; }
.bmu-center-cta .bmu-cta { width: auto; display: inline-flex; }
.bmu-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 12px; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--bmu-ink-soft); white-space: nowrap; }
.bmu-divider::before, .bmu-divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(178, 58, 242, 0.7)); }
.bmu-divider::after { background: linear-gradient(90deg, rgba(178, 58, 242, 0.7), transparent); }
/* Anbieter: das Markenzeichen fuellt den Knopf */
.bmu-providers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bmu-prov {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    height: 72px;
    text-decoration: none;
    color: #fff;
    font-size: 10.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    transition: transform 0.15s, filter 0.15s;
}
.bmu-prov:hover { transform: translateY(-2px); filter: brightness(1.12); }
.bmu-prov-ico { width: 32px; height: 32px; fill: currentColor; display: block; }
.bmu-prov-google { background: #fff; color: #3c4043; }
.bmu-prov-google .bmu-prov-ico { fill: #4285F4; }
.bmu-prov-facebook { background: #1877F2; }
.bmu-prov-steam { background: linear-gradient(180deg, #2a475e, #171a21); box-shadow: inset 0 0 0 1px rgba(95, 231, 249, 0.25); }
.bmu-login-foot { margin-top: 16px; text-align: center; font-size: 13px; color: var(--bmu-ink-dim); }
.bmu-login-foot a { color: var(--pv2-cyan); font-weight: bold; text-decoration: none; }
.bmu-login-foot a:hover { color: #fff; text-decoration: underline; }
.bmu-btn-login { border-color: rgba(95, 231, 249, 0.5); }

/* ---- Registrierung ------------------------------------------------- */
.bmu-reg .bmu-reg-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.bmu-check { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; font-size: 12.5px; line-height: 1.45; color: var(--bmu-ink-dim); cursor: pointer; }
.bmu-check input { flex: 0 0 auto; width: 16px; height: 16px; margin: 1px 0 0; accent-color: #b23af2; }
.bmu-check a { color: var(--pv2-cyan); }
.bmu-check.form_error_chk { color: #ff8a8a; }
.bmu-captcha { display: flex; justify-content: center; margin: 16px 0 14px; min-height: 78px; }
.bmu-captcha > div { transform-origin: center; }

/* ---- alte Vorlagen im Overlay (Anbieter-Verknuepfung, Erfolg, 2FA...) --
   die Verlaufs-Kaesten und Lichtrahmen weg, Breiten loesen sich */
.bmu-start-ovl-inner .bitmeup_container,
.bmu-start-ovl-inner .bitmeup_container_error,
.bmu-start-ovl-inner .bitmeup_container_success,
.bmu-start-ovl-inner .status_blue { background: transparent !important; box-shadow: none !important; width: auto !important; height: auto !important; max-width: 100%; }
.bmu-start-ovl-inner .bitmeup_border_2, .bmu-start-ovl-inner .bitmeup_border_1 { display: none !important; }
.bmu-start-ovl-inner table { max-width: 100%; }
.bmu-start-ovl-inner [id="external-login"], .bmu-start-ovl-inner [id="external-register"] { width: auto !important; margin: 10px 0 !important; }
.bmu-start-ovl-inner input[type="text"], .bmu-start-ovl-inner input[type="password"], .bmu-start-ovl-inner input[type="email"] {
    height: 40px; box-sizing: border-box; padding: 0 12px;
    background: rgba(6, 4, 12, 0.85); border: 1px solid rgba(178, 58, 242, 0.42); color: #fff; font-size: 14px; outline: none;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.bmu-start-ovl-inner input[type="button"], .bmu-start-ovl-inner input[type="submit"], .bmu-start-ovl-inner button:not(.bmu-cta) {
    height: 38px; padding: 0 18px; border: 0; cursor: pointer;
    background: linear-gradient(180deg, #a548f0, #6a24b6); color: #fff; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; font-size: 12px;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.bmu-start-ovl-inner .register_link { font-size: 14px !important; color: var(--bmu-ink-soft) !important; letter-spacing: 1.5px; text-transform: uppercase; }

/* ---- Bits-Partikel um das Overlay ---------------------------------- */
.bmu-ovl-bits { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 0; }
.bmu-ovl-bits i {
    position: absolute;
    width: 4px; height: 4px;
    background: var(--pv2-cyan);
    box-shadow: 0 0 6px var(--pv2-cyan), 0 0 12px rgba(95, 231, 249, 0.6);
    opacity: 0;
    animation: bmuBit 3.6s ease-out infinite;
}
@keyframes bmuBit {
    0% { opacity: 0; transform: translate(var(--x), var(--y)) scale(0.6); }
    15% { opacity: 1; }
    100% { opacity: 0; transform: translate(calc(var(--x) * 1.9), calc(var(--y) * 1.9)) scale(1.2); }
}
.bmu-ovl-bits i:nth-child(1)  { --x: -240px; --y: -160px; animation-delay: 0s; }
.bmu-ovl-bits i:nth-child(2)  { --x: 250px;  --y: -140px; animation-delay: 0.4s; background: var(--pv2-accent); box-shadow: 0 0 6px var(--pv2-accent); }
.bmu-ovl-bits i:nth-child(3)  { --x: -260px; --y: 40px;   animation-delay: 0.8s; }
.bmu-ovl-bits i:nth-child(4)  { --x: 270px;  --y: 90px;   animation-delay: 1.2s; }
.bmu-ovl-bits i:nth-child(5)  { --x: -120px; --y: -230px; animation-delay: 1.6s; background: var(--pv2-accent); box-shadow: 0 0 6px var(--pv2-accent); }
.bmu-ovl-bits i:nth-child(6)  { --x: 140px;  --y: 230px;  animation-delay: 2s; }
.bmu-ovl-bits i:nth-child(7)  { --x: -230px; --y: 200px;  animation-delay: 2.4s; }
.bmu-ovl-bits i:nth-child(8)  { --x: 60px;   --y: -250px; animation-delay: 2.8s; background: var(--pv2-accent); box-shadow: 0 0 6px var(--pv2-accent); }
.bmu-ovl-bits i:nth-child(9)  { --x: 240px;  --y: -30px;  animation-delay: 3.2s; }
.bmu-ovl-bits i:nth-child(10) { --x: -250px; --y: -60px;  animation-delay: 0.6s; }
.bmu-ovl-bits i:nth-child(11) { --x: -40px;  --y: 250px;  animation-delay: 1.4s; background: var(--pv2-accent); box-shadow: 0 0 6px var(--pv2-accent); }
.bmu-ovl-bits i:nth-child(12) { --x: 200px;  --y: 190px;  animation-delay: 2.2s; }
.bmu-ovl-bits i:nth-child(13) { --x: -180px; --y: -240px; animation-delay: 3s; }
.bmu-ovl-bits i:nth-child(14) { --x: 250px;  --y: -200px; animation-delay: 1s; }
@media (prefers-reduced-motion: reduce){ .bmu-ovl-bits { display: none; } }

/* ---- Portal-Seite: Fenster als Kacheln mit Text -------------------- */
.bmu-feat-win .bmu-feat-media { display: block; cursor: zoom-in; }
.bmu-feat-win .bmu-feat-media img { transition: transform 0.4s; }
.bmu-feat-win:hover .bmu-feat-media img { transform: scale(1.04); }

/* ---- Collage der Spiele hinter dem Portal-Hero --------------------- */
.bmu-hero.has-collage { overflow: hidden; }
.bmu-collage {
    position: absolute;
    top: 0; bottom: 0;
    left: -120px; right: -120px;
    z-index: 0;
    display: flex;
    gap: 3px;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(178, 58, 242, 0.55), rgba(95, 231, 249, 0.55), rgba(178, 58, 242, 0.55));
}
.bmu-collage-panel {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    transform: skewX(-12deg);
    cursor: pointer;
    text-decoration: none;
    transition: flex 0.55s cubic-bezier(0.2, 0.8, 0.3, 1);
    background: #0a0714;
}
.bmu-collage-panel:hover { flex: 1.9 1 0; }
.bmu-collage-media {
    position: absolute;
    inset: -10% -34%;
    transform: skewX(12deg);
}
.bmu-collage-media img, .bmu-collage-media video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.bmu-collage-media img { animation: bmuCollageKb 22s ease-in-out infinite alternate; }
.bmu-collage-panel:nth-child(2n) .bmu-collage-media img { animation-duration: 27s; animation-direction: alternate-reverse; }
.bmu-collage-panel:nth-child(3n) .bmu-collage-media img { animation-duration: 31s; }
@keyframes bmuCollageKb { from { transform: scale(1); } to { transform: scale(1.1); } }
/* Nexus: die Medienflaeche endet oberhalb des Streifenbodens (Loch hochgezogen) -
   weich ins Schwarz auslaufen lassen statt harter Kante */
.bmu-collage-panel.g-nexus .bmu-collage-media {
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}
/* SI: beim Aufklappen wandert der Ausschnitt zurueck nach links (dort der Planet);
   !important, weil die Grundlage inline gesetzt ist */
.bmu-collage-panel.g-si .bmu-collage-media img,
.bmu-collage-panel.g-si .bmu-collage-media video { transition: object-position 0.55s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 1s; }
.bmu-collage-panel.g-si:hover .bmu-collage-media img,
.bmu-collage-panel.g-si:hover .bmu-collage-media video { object-position: 0px 50% !important; }
/* Damoria: zentriertes Video, kein Ken-Burns-Zoom auf dem Standbild */
.bmu-collage-panel.g-damoria .bmu-collage-media img { animation: none; }
.bmu-collage-media video { opacity: 0; transition: opacity 1s; }
.bmu-collage-media video[src] { opacity: 1; }
/* Abdunklung je Streifen: oben leicht, unten kraeftig (Text und Anmeldung liegen darauf) */
.bmu-collage-panel::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(6, 3, 12, 0.5) 0%, rgba(6, 3, 12, 0.25) 35%, rgba(6, 3, 12, 0.7) 70%, rgba(6, 3, 12, 0.92) 100%);
    transition: opacity 0.4s;
}
.bmu-collage-panel:hover::after { opacity: 0.55; }
/* Vordergrund-Ebene je Streifen: Mebula Legends' Feuerschwinge liegt als
   ganze Bildebene (wie das Standbild, object-fit cover) ueber dem Streifen und
   schwebt leicht - gegen-geschert wie die Medien */
.bmu-collage-fg {
    position: absolute;
    inset: -10% -34%;
    z-index: 1;
    pointer-events: none;
    transform: skewX(12deg);
}
.bmu-collage-fg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bmu-bird img {
    filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 18px rgba(255, 140, 40, 0.35));
    animation: bmuBird 7s ease-in-out infinite alternate;
    transform-origin: 50% 60%;
}
/* etwas kleiner als die Bildebene, damit der Vogel im Streifen ganz zu sehen ist */
@keyframes bmuBird {
    0%   { transform: translate(0, 0) rotate(-1.5deg) scale(0.74); }
    50%  { transform: translate(6px, -16px) rotate(0.5deg) scale(0.77); }
    100% { transform: translate(-4px, 4px) rotate(1.5deg) scale(0.75); }
}
@media (prefers-reduced-motion: reduce){ .bmu-bird img { transform: scale(0.75); } }
@media (prefers-reduced-motion: reduce){ .bmu-bird img { animation: none; } }
.bmu-collage-shade {
    position: absolute; inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(8, 4, 16, 0.35) 0%, rgba(8, 4, 16, 0) 22%, rgba(8, 4, 16, 0) 60%, rgba(8, 4, 16, 0.6) 88%, var(--bmu-page) 100%);
}
@media (prefers-reduced-motion: reduce){ .bmu-collage-media img { animation: none; } }

/* Chat-Fenster als Hochkant-Bild */
.bmu-chatshot { display: flex; justify-content: center; }
.bmu-chatshot img {
    width: 100%; max-width: 420px; height: auto; display: block;
    box-shadow: 0 0 0 1px var(--pv2-border), 0 0 34px var(--g-glow), 0 24px 50px rgba(0, 0, 0, 0.65);
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}

/* Discord */
.bmu-discord .bmu-panel-in { display: flex; align-items: center; gap: 34px; padding: 34px 40px; }
.bmu-discord-ico { flex: 0 0 120px; width: 120px; height: 120px; color: #7289da; filter: drop-shadow(0 0 18px rgba(114, 137, 218, 0.6)); }
.bmu-discord-text { flex: 1 1 auto; min-width: 0; }
.bmu-discord-text .bmu-sub { margin-bottom: 0; }

/* App-Plattformen */
.bmu-os { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.bmu-os-tile {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 28px 16px;
    background: var(--g-tile);
    border: 1px solid var(--pv2-border);
    color: #d9cdf0;
    font-size: 15px;
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
    transition: transform 0.18s, background 0.18s;
}
.bmu-os-tile .bmu-svg { width: 54px; height: 54px; }
.bmu-os-tile:hover { transform: translateY(-4px); background: rgba(178, 58, 242, 0.12); color: #fff; }

.bmu-sticky.nogame { display: none; }

/* ------------------------------------------------------------------
   Mebula: dreilagige Landschaft mit Schaukel und Maus-Parallaxe
   ------------------------------------------------------------------ */
.bmu-scene { position: absolute; inset: -3% -5%; overflow: hidden; --mx: 0; --my: 0; --sh: calc(100vh - 64px - var(--bmu-foot)); }
/* Zwei-Frame-Sprites: links normal, rechts zwinkernd */
.bmu-mon { display: block; background-repeat: no-repeat; background-size: 200% 100%; background-position: 0 0; }
.bmu-mon.blink { background-position: 100% 0; }
.bmu-scene-mon { position: absolute; z-index: 5; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.35)); }
.bmu-scene-mon.flip { transform: scaleX(-1); }
.bmu-hero-mascot.bmu-mon { height: auto; }
.bmu-scene-l { position: absolute; inset: 0; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); will-change: transform; }
.bmu-scene-l.l-sky   { transform: translate(calc(var(--mx) * -14px), calc(var(--my) * -6px)); }
.bmu-scene-l.l-land  { transform: translate(calc(var(--mx) * -38px), calc(var(--my) * -14px)); }
.bmu-scene-l.l-earth { transform: translate(calc(var(--mx) * -80px), calc(var(--my) * -26px)); }
.bmu-scene-sway { position: absolute; inset: 0; animation: bmuSway 16s ease-in-out infinite; }
.l-sky .bmu-scene-sway   { --amp: 8px;  --lift: 2px; }
.l-land .bmu-scene-sway  { --amp: 24px; --lift: 5px; }
.l-earth .bmu-scene-sway { --amp: 52px; --lift: 9px; animation-duration: 16s; }
@keyframes bmuSway {
    0%   { transform: translate(calc(var(--amp) * -1), 0); }
    50%  { transform: translate(var(--amp), calc(var(--lift) * -1)); }
    100% { transform: translate(calc(var(--amp) * -1), 0); }
}
.bmu-scene-sway i {
    position: absolute;
    left: -8%; right: -8%;
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: 50% 0;
}
/* hintere Lagen leicht entsaettigt und heller: Tiefe */
.l-sky .bmu-scene-sway i  { filter: saturate(0.85) brightness(1.03); }
.l-land .bmu-scene-sway i { filter: saturate(0.95); }
@media (prefers-reduced-motion: reduce){ .bmu-scene-sway { animation: none; } .bmu-scene-l { transition: none; transform: none; } }