html, body {
    margin: 0;
    padding: 0;
    width: 1920px;
    height: 1080px;
    background: transparent;
    overflow: hidden;
}

.overlay-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1080px;
    pointer-events: none; /* Erlaubt Klicks durch das Overlay */
    z-index: 9999;

    /* Rahmen und Glow um die komplette Fläche */
    border: 2px solid #000; /* Schwarzer Rahmen */
    box-shadow:
        inset 0 0 15px rgba(255, 193, 7, 0.35),    /* Goldgelber Schein */
        inset 0 0 25px rgba(255, 215, 0, 0.25),    /* Gold */
        inset 0 0 35px rgba(255, 236, 179, 0.20),  /* Hellgold */
        inset 0 0 45px rgba(255, 248, 220, 0.15);  /* Sehr helles Gold */
}

.perk-overlay {
    position: absolute;
    width: 200px; /* Exakte Größe für das Perk-Viereck */
    height: 200px; /* Quadratisch wie die Perks */
    background: linear-gradient(135deg, #000000 0%, #1f1f1f 40%, #ffbf00 78%, #fff3b0 100%); /* Schwarz→Gold Verlauf */
    border: 4px solid #000; /* Schwarzer Rand */
    transform: rotate(45deg); /* Gedreht um 45 Grad wie ein Diamant */
    pointer-events: none; /* Nicht klickbar, ideal für OBS */
    box-shadow: 
        0 0 20px rgba(255, 193, 7, 0.80),    /* Innerer goldener Schein */
        0 0 40px rgba(255, 215, 0, 0.60),    /* Mittlerer goldener Schein */
        0 0 60px rgba(255, 236, 179, 0.40),  /* Äußerer goldener Schein */
        0 0 80px rgba(255, 248, 220, 0.30);  /* Weiter äußerer heller Schein */
    opacity: 1; /* Komplett undurchsichtig */
}

/* Positionen für unten rechts und oben rechts */
.perk-overlay.bottom-right {
    bottom: 80px;
    right: 80px;
}

.perk-overlay.top-right {
    top: 140px; /* höher für HUD-Perks */
    right: 140px; /* näher an den rechten Rand */
    width: 100px; /* etwas kleiner */
    height: 100px;
}

.perk-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg); /* Gegenrotation, damit Text horizontal bleibt */
    font-family: 'Great Vibes', cursive;
    font-size: 96px;
    line-height: 1;
    color: #ffffff;
    letter-spacing: 2px;
    text-shadow:
        0 0 6px rgba(255, 255, 255, 0.9),     /* Weißer Kern */
        0 0 14px rgba(255, 215, 0, 0.70),     /* Goldener Schein */
        0 0 28px rgba(255, 236, 179, 0.55);   /* Heller Goldschein */
    pointer-events: none;
    user-select: none;
}

/* Kleinere Schrift für die obere rechte Box */
.perk-overlay.top-right .perk-label {
    font-size: 48px; /* Proportional zur 100px Box */
}