/* ============================================================
 * feedback-density.css — v0.9.6.4
 * Low-Cash-Warning Badge, Heartbeat-Pulse, Weekly-Pulse, Year-Banner
 * ============================================================ */

/* ---------- Runway Warning Bar (v0.9.7.0: vollbreiter Balken unter Topbar) ---------- */
/* Master Chief Vorgabe: Runway wird als vollbreiter Balken unter der Topbar gerendert,
   selbe Hoehe wie die Topbar (32px), sitzt fixed unter #topbar. */
.runway-bar {
    position: fixed;
    top: 32px;
    left: 0;
    right: 0;
    height: 32px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 10px;
    z-index: 99;
    font-size: 11px;
    font-weight: bold;
    user-select: none;
    background: linear-gradient(180deg, #fff4d6 0%, #ffd97a 100%);
    border-bottom: 1px solid #a08a33;
    color: #5a3e00;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.runway-bar-icon { font-size: 16px; flex: 0 0 auto; }
.runway-bar-label { font-size: 11px; opacity: 0.85; flex: 0 0 auto; }
.runway-bar-val {
    font-size: 14px;
    font-weight: bold;
    padding: 2px 8px;
    background: rgba(255,255,255,0.35);
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 3px;
    flex: 0 0 auto;
}
.runway-bar-msg {
    flex: 1 1 auto;
    font-weight: normal;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* v0.9.9.5: Close-Button im Runway-Banner */
.runway-bar-close {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    line-height: 16px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    padding: 0 6px;
    opacity: 0.7;
    margin-left: 8px;
    user-select: none;
}
.runway-bar-close:hover {
    opacity: 1;
    color: #f00;
}

/* Desktop-Offset wenn Balken sichtbar (Topbar 32px + Runway 32px = 64px). */
body.runway-visible .desktop { top: 64px !important; }

/* orange (warn) */
.runway-bar.runway-warn {
    background: linear-gradient(180deg, #ffe9b8 0%, #ffc04a 100%);
    color: #6b3c00;
    border-bottom-color: #c47a1a;
}

/* red (critical) */
.runway-bar.runway-critical {
    background: linear-gradient(180deg, #ffcfcf 0%, #ff7070 100%);
    color: #6b0000;
    border-bottom-color: #a83030;
}

/* red + shadow (emergency) */
.runway-bar.runway-emergency {
    background: linear-gradient(180deg, #ff9e9e 0%, #d02020 100%);
    color: #ffffff;
    border-bottom-color: #800000;
    text-shadow: 0 1px 1px rgba(0,0,0,0.4);
    box-shadow: 0 0 8px rgba(255, 40, 40, 0.6);
}

/* ---------- Pulse Keyframes ---------- */
@keyframes pulse-red-3s {
    0%   { box-shadow: 0 0 0 0 rgba(255, 40, 40, 0.5); }
    50%  { box-shadow: 0 0 8px 3px rgba(255, 40, 40, 0.35); }
    100% { box-shadow: 0 0 0 0 rgba(255, 40, 40, 0.5); }
}
@keyframes heartbeat-pulse {
    0%   { transform: scale(1.0);   filter: brightness(1.0); }
    15%  { transform: scale(1.04);  filter: brightness(1.15); }
    30%  { transform: scale(1.0);   filter: brightness(1.0); }
    45%  { transform: scale(1.03);  filter: brightness(1.1); }
    60%  { transform: scale(1.0);   filter: brightness(1.0); }
    100% { transform: scale(1.0);   filter: brightness(1.0); }
}

.runway-bar.pulse-red-3s {
    animation: pulse-red-3s 3s ease-in-out infinite;
}
.runway-bar.heartbeat-pulse {
    animation: heartbeat-pulse 0.85s ease-in-out infinite;
}

/* ---------- Weekly Pulse auf #clock ---------- */
@keyframes weekly-pulse {
    0%   { transform: scale(1.0); filter: brightness(1.0); }
    40%  { transform: scale(1.025); filter: brightness(1.2); }
    100% { transform: scale(1.0); filter: brightness(1.0); }
}
@keyframes weekly-pulse-strong {
    0%   { transform: scale(1.0);   filter: brightness(1.0); }
    40%  { transform: scale(1.04);  filter: brightness(1.35); color: #fff; }
    100% { transform: scale(1.0);   filter: brightness(1.0); }
}
.weekly-pulse        { animation: weekly-pulse        200ms ease-out; display: inline-block; }
.weekly-pulse-strong { animation: weekly-pulse-strong 300ms ease-out; display: inline-block; }

/* ---------- Year-Tick-Banner ---------- */
.year-tick-banner {
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    z-index: 100000;
    height: 60px;
    min-width: 220px;
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: linear-gradient(180deg, #fff4a8 0%, #ffd54a 50%, #b88200 100%);
    border: 2px solid #8a5a00;
    border-radius: 6px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255,255,255,0.65);
    color: #4a2800;
    font-family: 'MS Sans Serif', 'Tahoma', sans-serif;
    font-weight: bold;
    pointer-events: none;
    opacity: 0;
    animation: yt-pop 300ms cubic-bezier(.2,1.2,.4,1) forwards;
}
.year-tick-banner .yt-emoji {
    font-size: 32px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}
.year-tick-banner .yt-year {
    font-size: 34px;
    letter-spacing: 2px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.6), 0 2px 4px rgba(0,0,0,0.3);
}
.year-tick-banner.fade-out {
    animation: yt-fade 500ms ease-in forwards;
}
@keyframes yt-pop {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
}
@keyframes yt-fade {
    0%   { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.08); }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .runway-bar.pulse-red-3s,
    .runway-bar.heartbeat-pulse,
    .weekly-pulse, .weekly-pulse-strong,
    .year-tick-banner, .year-tick-banner.fade-out {
        animation: none !important;
    }
    /* Banner bleibt kurz sichtbar, aber statisch */
    .year-tick-banner { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
}

/* ============================================================
 * v0.9.6.8 — Project-Completion Stars Overlay + Fly-Out
 * ============================================================ */
.project-completing { pointer-events: none; }

.project-complete-stars-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(26,26,46,0.92), rgba(45,27,74,0.92));
    backdrop-filter: blur(3px);
    z-index: 10;
    animation: pcs-fade-in 280ms ease-out;
    border-radius: inherit;
    overflow: hidden;
}
.project-complete-stars-overlay .pcs-inner {
    text-align: center;
    color: #fff;
    padding: 8px 16px;
}
.project-complete-stars-overlay .pcs-title {
    font-size: 10px;
    opacity: 0.75;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.project-complete-stars-overlay .pcs-client {
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 6px;
    color: #ffd700;
}
.project-complete-stars-overlay .pcs-stars {
    font-size: 28px;
    color: #ffd700;
    text-shadow: 0 2px 8px rgba(255,215,0,0.6);
    letter-spacing: 2px;
    animation: pcs-stars-pop 600ms cubic-bezier(.34,1.56,.64,1) 100ms both;
    margin: 2px 0 4px 0;
}
.project-complete-stars-overlay .pcs-score {
    font-size: 11px;
    opacity: 0.9;
}
.project-complete-stars-overlay.pcs-fade-out {
    animation: pcs-fade-out 500ms ease-in forwards;
}

@keyframes pcs-fade-in {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1.0); }
}
@keyframes pcs-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes pcs-stars-pop {
    0%   { transform: scale(0.3); opacity: 0; }
    60%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1.0); opacity: 1; }
}

/* Karte fliegt nach unten raus */
.project-flyout {
    animation: project-flyout-anim 600ms cubic-bezier(.55,.05,.68,.19) forwards;
    pointer-events: none;
}
@keyframes project-flyout-anim {
    0%   { transform: translateY(0) scale(1);        opacity: 1; max-height: 500px; margin-bottom: 0; }
    60%  { transform: translateY(30px) scale(0.98);  opacity: 0.7; }
    100% { transform: translateY(800px) scale(0.85); opacity: 0; max-height: 0; margin-bottom: 0; padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .project-complete-stars-overlay { animation: none; }
    .project-complete-stars-overlay .pcs-stars { animation: none; }
    .project-flyout { animation: none; opacity: 0; max-height: 0; }
}

/* ============================================================
 * v0.9.6.8 — Month-Banner (mittig, schlicht, schwarze Schrift)
 *   Kein Background, kein Border — nur große schwarze Schrift,
 *   damit der goldene Banner dem Jahreswechsel vorbehalten bleibt.
 * ============================================================ */
.month-banner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9800;
    color: #000;
    font-size: 56px;
    font-weight: 800;
    letter-spacing: 1px;
    pointer-events: none;
    opacity: 0;
    animation: month-banner-cycle 2500ms ease-in-out forwards;
    text-align: center;
    background: none;
    border: none;
    box-shadow: none;
    text-shadow: none;
    padding: 0;
}
.month-banner .mb-year {
    display: block;
    font-size: 18px;
    opacity: 0.7;
    letter-spacing: 1px;
    margin-top: 4px;
    font-weight: 500;
    color: #000;
}
@keyframes month-banner-cycle {
    0%   { opacity: 0; transform: translate(-50%, -50%); }
    30%  { opacity: 1; transform: translate(-50%, -50%); }
    70%  { opacity: 1; transform: translate(-50%, -50%); }
    100% { opacity: 0; transform: translate(-50%, -50%); }
}
@media (prefers-reduced-motion: reduce) {
    .month-banner { animation: none; opacity: 1; }
}

/* ============================================================
 * v0.9.6.8 — Pip-Klöckner Call + Awards Gala
 * ============================================================ */
.pip-call-modal, .awards-gala-v2-modal {
    position: fixed;
    inset: 0;
    z-index: 11500;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.pip-call-card {
    max-width: 520px;
    width: 100%;
    background: #1a1a2e;
    border: 2px solid #5a4a88;
    border-radius: 12px;
    color: #fff;
    padding: 24px 28px;
    text-align: center;
    box-shadow: 0 12px 40px rgba(0,0,0,0.7);
}
.pip-avatar {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #5a4a88;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    margin-bottom: 14px;
}
.pip-name {
    font-size: 16px;
    font-weight: bold;
    color: #ffd700;
    margin-bottom: 2px;
}
.pip-role {
    font-size: 11px;
    opacity: 0.7;
    margin-bottom: 14px;
}
.pip-quote {
    font-size: 13px;
    line-height: 1.55;
    font-style: italic;
    color: #eee;
    background: rgba(255,255,255,0.05);
    padding: 12px 16px;
    border-left: 3px solid #ffd700;
    margin: 14px 0 20px 0;
    text-align: left;
}
.pip-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.pip-btn {
    padding: 10px 24px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
    border: 2px outset #fff;
}
.pip-btn-accept {
    background: #4aa34a;
    color: #fff;
}
.pip-btn-reject {
    background: #555;
    color: #eee;
}

/* Gala */
.awards-gala-v2 {
    max-width: 720px;
    width: 100%;
    /* v0.9.6.12: max-height + scroll damit der "Weitermachen"-Button
       auf kleineren Displays immer erreichbar ist. */
    max-height: 92vh;
    overflow-y: auto;
    background: #000;
    border-radius: 16px;
    position: relative;
    box-shadow: 0 0 80px rgba(255,215,0,0.4);
}
.awards-gala-v2 .stage-bg {
    width: 100%;
    /* v0.9.6.12: feste, sinnvolle Hoehe statt fester 16:9-Ratio.
       Bei 720px Breite sonst 405px nur fuer das Bild + 280+ fuer Content
       -> Modal > 90vh auf kleinen Screens. Max 280px zaehmt die Hoehe. */
    height: 220px;
    max-height: 28vh;
    background-size: cover;
    background-position: center;
    position: relative;
}
.awards-gala-v2 .stage-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 60%, rgba(0,0,0,0.85) 100%);
}
.awards-gala-v2 .gala-content {
    padding: 16px 24px 20px 24px;
    color: #fff;
    /* min-height entfernt (v0.9.6.12) — sonst Modal immer > 500px hoch */
}
.awards-gala-v2 .gala-year {
    text-align: center;
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 8px;
}
.awards-gala-v2 .gala-title {
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    color: #ffd700;
    margin-bottom: 18px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}
.awards-gala-v2 .gala-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 100px;
}
.gala-item {
    opacity: 0;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;     /* v0.9.7.6: Hint unter dem Namen — oben ausrichten */
    gap: 12px;
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
    transform: translateY(12px);
}
.gala-item.revealed { opacity: 1; transform: translateY(0); }
.gala-item.player-win {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    color: #1a1a1a;
    font-weight: bold;
    border-color: #b8860b;
    box-shadow: 0 4px 12px rgba(255,215,0,0.5);
    transform: translateY(12px) scale(0.95);
}
.gala-item.player-win.revealed { transform: translateY(0) scale(1.02); }
.gala-item .gi-label { font-size: 12px; opacity: 0.85; }
.gala-item.player-win .gi-label { opacity: 0.9; color: #3a2a00; }
.gala-item .gi-winner { font-size: 14px; }
.gala-item .gi-effect {
    display: block;
    font-size: 11px;
    color: #00c853;
    font-weight: bold;
    margin-top: 3px;
    text-shadow: 0 0 4px rgba(0,200,83,0.4);
}
.gala-item.player-win .gi-effect { color: #0a6b0a; text-shadow: none; }
/* v0.9.7.6: Dezenter Hint-Text unter dem Gewinner-Namen, nur bei Spieler-Siegen.
   Klein, italic, etwas transparent — soll nicht ablenken. */
.gala-item .gi-hint {
    font-size: 11px;
    font-style: italic;
    font-weight: normal;
    margin-top: 4px;
    line-height: 1.35;
    opacity: 0.78;
    color: #3a2a00;
    max-width: 480px;
}
.gala-item.player-win .gi-hint { color: #3a2a00; opacity: 0.82; }
.awards-gala-v2 .gala-close {
    display: block;
    margin: 20px auto 0 auto;
    padding: 10px 32px;
    background: #ffd700;
    color: #1a1a1a;
    font-weight: bold;
    border: 2px outset #fff;
    cursor: pointer;
    border-radius: 4px;
}
.drumroll-indicator {
    text-align: center;
    font-size: 11px;
    opacity: 0.6;
    margin-bottom: 10px;
    letter-spacing: 2px;
}

/* ============================================================
 * v0.9.6.12 — Era-spezifische Styles fuer Pip-Call + Awards-Gala
 * ------------------------------------------------------------
 * 4 visuell distinct Eras, damit 1996er-Gala anders aussieht als 2024er.
 * ============================================================ */

/* ---- Ära 1 (1995-2001 Web Pioneers): Kitschiges Web 1.0 ---- */
body.era-e1 .pip-call-card {
    background: #ffffcc;
    border: 4px ridge #ff6600;
    border-radius: 0;
    color: #000;
    font-family: "Comic Sans MS", "Chalkboard SE", cursive;
    box-shadow: 6px 6px 0 rgba(0,0,0,0.5);
}
body.era-e1 .pip-avatar {
    border: 4px solid #ff6600;
    border-radius: 0;
}
body.era-e1 .pip-name { color: #cc0066; text-shadow: 1px 1px 0 #fff; }
body.era-e1 .pip-role { color: #0033cc; font-weight: bold; }
body.era-e1 .pip-quote {
    background: #fff;
    color: #000;
    border-left: 4px solid #ff6600;
    font-style: normal;
    font-family: "Comic Sans MS", cursive;
}
body.era-e1 .pip-btn {
    border-radius: 0;
    border: 3px outset #c0c0c0;
    font-family: "Comic Sans MS", cursive;
}
body.era-e1 .pip-btn-accept { background: #00cc00; color: #fff; }
body.era-e1 .pip-btn-reject { background: #999; color: #fff; }

body.era-e1 .awards-gala-v2 {
    background: #ffffcc;
    border-radius: 0;
    border: 6px ridge #ff6600;
    box-shadow: 0 0 30px rgba(255,102,0,0.6);
}
body.era-e1 .awards-gala-v2 .gala-year,
body.era-e1 .awards-gala-v2 .gala-title {
    font-family: "Comic Sans MS", cursive;
    color: #cc0066;
    text-shadow: 2px 2px 0 #fff;
}
body.era-e1 .awards-gala-v2 .gala-content { color: #000; background: #ffffcc; }
body.era-e1 .gala-item {
    background: #fff;
    border: 2px solid #ff6600;
    border-radius: 0;
    color: #000;
}
body.era-e1 .gala-item.player-win {
    background: linear-gradient(135deg, #ffff00, #ffaa00);
    color: #000;
    border-color: #cc0066;
}
body.era-e1 .awards-gala-v2 .gala-close {
    background: #00cc00;
    color: #fff;
    border: 3px outset #fff;
    border-radius: 0;
    font-family: "Comic Sans MS", cursive;
}

/* ---- Ära 2 (2002-2010 Dot-com/Web 2.0): Glossy blue & glassy ---- */
body.era-e2 .pip-call-card {
    background: linear-gradient(180deg, #2a4a8a 0%, #0a2a6a 100%);
    border: 1px solid #4a7ac8;
    border-radius: 8px;
    color: #fff;
    box-shadow: 0 4px 20px rgba(0, 40, 120, 0.6), inset 0 1px 0 rgba(255,255,255,0.3);
}
body.era-e2 .pip-avatar { border: 3px solid #6aaaee; box-shadow: 0 2px 10px rgba(106,170,238,0.6); }
body.era-e2 .pip-name { color: #aaeeff; text-shadow: 0 0 6px rgba(170,238,255,0.5); }
body.era-e2 .pip-quote {
    background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 100%);
    border-left: 3px solid #6aaaee;
    color: #dfefff;
}
body.era-e2 .pip-btn {
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.4);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 2px 4px rgba(0,0,0,0.3);
}
body.era-e2 .pip-btn-accept {
    background: linear-gradient(180deg, #5acc5a 0%, #2a8a2a 100%);
}
body.era-e2 .pip-btn-reject {
    background: linear-gradient(180deg, #888 0%, #444 100%);
}
body.era-e2 .awards-gala-v2 {
    background: linear-gradient(180deg, #0a2a6a 0%, #020520 100%);
    border-radius: 12px;
    box-shadow: 0 0 60px rgba(74,122,200,0.6);
}
body.era-e2 .awards-gala-v2 .gala-title {
    color: #aaeeff;
    text-shadow: 0 0 8px rgba(170,238,255,0.6), 0 2px 4px rgba(0,0,0,0.5);
}
body.era-e2 .gala-item {
    background: rgba(106,170,238,0.12);
    border: 1px solid rgba(106,170,238,0.3);
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
body.era-e2 .gala-item.player-win {
    background: linear-gradient(135deg, #aaeeff, #6aaaee);
    color: #0a2a6a;
    border-color: #fff;
    box-shadow: 0 0 20px rgba(106,170,238,0.7);
}
body.era-e2 .awards-gala-v2 .gala-close {
    background: linear-gradient(180deg, #5acc5a 0%, #2a8a2a 100%);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 2px 6px rgba(0,0,0,0.4);
}

/* ---- Ära 3 (2011-2019 Cloud & Social): Clean, Flat Design ---- */
body.era-e3 .pip-call-card {
    background: #fafafa;
    border: none;
    border-radius: 4px;
    color: #222;
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body.era-e3 .pip-avatar { border: 2px solid #2196f3; }
body.era-e3 .pip-name { color: #1565c0; text-shadow: none; }
body.era-e3 .pip-role { color: #777; }
body.era-e3 .pip-quote {
    background: #f0f4f8;
    color: #333;
    border-left: 3px solid #2196f3;
    font-style: normal;
}
body.era-e3 .pip-btn {
    border: none;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 11px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
body.era-e3 .pip-btn-accept { background: #43a047; color: #fff; }
body.era-e3 .pip-btn-reject { background: #bdbdbd; color: #333; }

body.era-e3 .awards-gala-v2 {
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 0 40px rgba(0,0,0,0.3);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body.era-e3 .awards-gala-v2 .gala-content { color: #222; }
body.era-e3 .awards-gala-v2 .gala-year { color: #777; }
body.era-e3 .awards-gala-v2 .gala-title { color: #1565c0; text-shadow: none; font-weight: 300; }
body.era-e3 .gala-item {
    background: #f7f9fc;
    border: 1px solid #e0e6ef;
    border-radius: 3px;
    color: #333;
}
body.era-e3 .gala-item.player-win {
    background: #2196f3;
    color: #fff;
    border-color: #1976d2;
    box-shadow: 0 4px 12px rgba(33,150,243,0.4);
}
body.era-e3 .gala-item.player-win .gi-effect { color: #c8e6c9; }
body.era-e3 .awards-gala-v2 .gala-close {
    background: #43a047;
    color: #fff;
    border: none;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 12px;
}

/* ---- Ära 4 (2020+ AI Era): Default Dark Mode — bereits der Basis-Style ---- */
/* Keine Override noetig, Basis-Stil (dunkel + gold) passt zur AI-Era. */

/* ============================================================
 * v0.9.13.14 — Awards Gala v3 (Cinematic Card-at-a-time)
 * ------------------------------------------------------------
 * Neuer Stil parallel zu .awards-gala-v2 (Legacy-Listen-Stil).
 * Selektiert via .awards-gala-v3 auf dem Modal.
 * ============================================================ */
.awards-gala-v3 {
    background: #000;
    padding: 0;
    overflow: hidden;
}
.awards-gala-v3 .gala3-stage {
    position: fixed;
    inset: 0;
    overflow: hidden;
    perspective: 1400px;
}
.awards-gala-v3 .gala3-bg {
    position: absolute; inset: 0;
    background:
      /* Vignette: dunkelt Ränder für Lesbarkeit */
      radial-gradient(ellipse 70% 60% at 50% 50%, transparent 0%, rgba(0,0,0,0.45) 70%, rgba(0,0,0,0.85) 100%),
      /* Warmer Gold-Tint im Zentrum */
      radial-gradient(ellipse 50% 40% at 50% 60%, rgba(255,200,80,0.12), transparent 70%),
      /* Cinematic Stage Photo (v0.9.13.15) */
      url('../img/awards/stage-bg.jpg') center center / cover no-repeat,
      /* Fallback wenn Bild fehlt */
      linear-gradient(180deg, #2a0303 0%, #000 100%);
    animation: gala3-bg-breath 28s ease-in-out infinite alternate;
}
@keyframes gala3-bg-breath {
    0%   { background-size: auto, auto, 100% 100%, auto; }
    100% { background-size: auto, auto, 106% 106%, auto; }
}
.awards-gala-v3 .gala3-floor {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 22%;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 70%, rgba(0,0,0,0.85) 100%);
    pointer-events: none;
}

/* Spotlights (v0.9.13.15: reduziert da BG-Bild eigenes Spotlight enthält) */
.awards-gala-v3 .gala3-spotlight {
    position: absolute;
    width: 80vw; height: 100vh;
    left: 50%; top: -20vh;
    transform: translateX(-50%);
    background: conic-gradient(from 180deg at 50% 0%,
      transparent 0deg, transparent 165deg,
      rgba(255,240,200,0.10) 175deg,
      rgba(255,240,200,0.20) 180deg,
      rgba(255,240,200,0.10) 185deg,
      transparent 195deg, transparent 360deg);
    transform-origin: 50% 0%;
    pointer-events: none;
    animation: gala3-sweep 6s ease-in-out infinite alternate;
    mix-blend-mode: screen;
}
.awards-gala-v3 .gala3-spotlight.s2 { animation-duration: 8s; animation-delay: -2s; opacity: 0.5; filter: hue-rotate(20deg); }
.awards-gala-v3 .gala3-spotlight.s3 { animation-duration: 10s; animation-delay: -4s; opacity: 0.35; filter: hue-rotate(-30deg); }
@keyframes gala3-sweep {
    0%   { transform: translateX(-50%) rotate(-18deg); }
    50%  { transform: translateX(-50%) rotate(0deg); }
    100% { transform: translateX(-50%) rotate(18deg); }
}

/* Backlights (v0.9.13.15: subtiler, da BG-Bild eigene Atmosphäre hat) */
.awards-gala-v3 .gala3-backlights {
    position: absolute;
    bottom: 30%; left: 0; right: 0;
    display: flex; justify-content: space-around;
    pointer-events: none;
    opacity: 0.5;
    mix-blend-mode: screen;
}
.awards-gala-v3 .gala3-backlight {
    width: 40px; height: 40px;
    border-radius: 50%;
    filter: blur(20px);
    animation: gala3-pulse 2.4s ease-in-out infinite;
}
.awards-gala-v3 .gala3-backlight:nth-child(1) { background: #ff4d6d; animation-delay: 0s; }
.awards-gala-v3 .gala3-backlight:nth-child(2) { background: #ffd166; animation-delay: -0.4s; }
.awards-gala-v3 .gala3-backlight:nth-child(3) { background: #06d6a0; animation-delay: -0.8s; }
.awards-gala-v3 .gala3-backlight:nth-child(4) { background: #118ab2; animation-delay: -1.2s; }
.awards-gala-v3 .gala3-backlight:nth-child(5) { background: #c77dff; animation-delay: -1.6s; }
@keyframes gala3-pulse {
    0%, 100% { opacity: 0.4; transform: scale(0.9); }
    50%      { opacity: 0.95; transform: scale(1.3); }
}

/* Curtain (v0.9.13.15: subtiler, da BG-Bild eigenen Vorhang hat;
   schließt trotzdem das Bild am Anfang ab) */
.awards-gala-v3 .gala3-curtain {
    position: absolute;
    top: 0; bottom: 0;
    width: 52%;
    background:
      linear-gradient(90deg,
        rgba(40,3,3,0.95) 0%,
        rgba(74,6,6,0.95) 30%,
        rgba(106,10,10,0.95) 60%,
        rgba(74,6,6,0.95) 100%),
      repeating-linear-gradient(90deg,
        rgba(0,0,0,0.4) 0px,
        transparent 8px,
        rgba(0,0,0,0.4) 16px);
    box-shadow: 0 0 60px rgba(0,0,0,0.8) inset;
    z-index: 20;
    transition: transform 1.6s cubic-bezier(0.86, 0, 0.07, 1);
}
.awards-gala-v3 .gala3-curtain.left { left: 0; transform: translateX(0); }
.awards-gala-v3 .gala3-curtain.right { right: 0; transform: translateX(0); }
.awards-gala-v3 .gala3-curtain::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 30px;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.7));
}
.awards-gala-v3 .gala3-curtain.left::before { right: 0; }
.awards-gala-v3 .gala3-curtain.right::before { left: 0; transform: scaleX(-1); }
.awards-gala-v3.curtain-open .gala3-curtain.left  { transform: translateX(-100%); }
.awards-gala-v3.curtain-open .gala3-curtain.right { transform: translateX(100%); }

/* Header */
.awards-gala-v3 .gala3-header {
    position: absolute;
    top: 6vh; left: 0; right: 0;
    text-align: center;
    z-index: 10;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 1s ease-out 0.8s, transform 1s ease-out 0.8s;
}
.awards-gala-v3.curtain-open .gala3-header { opacity: 1; transform: translateY(0); }
.awards-gala-v3 .gala3-brand { font-size: 12px; letter-spacing: 6px; opacity: 0.7; color: #fff; }
.awards-gala-v3 .gala3-title {
    font-size: 28px; font-weight: 200; letter-spacing: 4px;
    color: #ffd700; margin-top: 6px;
    text-shadow: 0 2px 16px rgba(255,215,0,0.5);
}

/* Recap pills */
.awards-gala-v3 .gala3-recap {
    position: absolute;
    top: 18vh; left: 50%;
    transform: translateX(-50%);
    display: flex; gap: 8px;
    z-index: 11;
    pointer-events: none;
    flex-wrap: wrap; justify-content: center;
    max-width: 90vw;
}
.awards-gala-v3 .gala3-recap-pill {
    padding: 6px 12px;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 20px;
    font-size: 11px;
    color: rgba(255,255,255,0.85);
    backdrop-filter: blur(8px);
    opacity: 0;
    transform: translateY(-10px) scale(0.9);
    transition: all 0.5s ease;
    white-space: nowrap;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.awards-gala-v3 .gala3-recap-pill.show { opacity: 1; transform: translateY(0) scale(1); }
.awards-gala-v3 .gala3-recap-pill.player {
    background: linear-gradient(135deg, rgba(255,215,0,0.25), rgba(255,237,78,0.18));
    border-color: #ffd700;
    color: #ffed4e;
    font-weight: bold;
}

/* Focus area */
.awards-gala-v3 .gala3-focus {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 90%; max-width: 600px;
    z-index: 12;
    text-align: center;
}
.awards-gala-v3 .gala3-cat-label {
    font-size: 14px; letter-spacing: 5px;
    text-transform: uppercase;
    opacity: 0;
    color: rgba(255,255,255,0.75);
    margin-bottom: 16px;
    transition: opacity 0.6s ease-out;
}
.awards-gala-v3 .gala3-cat-label.show { opacity: 1; }

/* Envelope */
.awards-gala-v3 .gala3-envelope {
    width: 280px; height: 180px;
    margin: 0 auto;
    position: relative;
    perspective: 800px;
    opacity: 0;
    transform: scale(0.5) translateY(40px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.awards-gala-v3 .gala3-envelope.show { opacity: 1; transform: scale(1) translateY(0); }
.awards-gala-v3 .gala3-envelope.shake { animation: gala3-shake 1.4s ease-in-out; }
@keyframes gala3-shake {
    0%, 100% { transform: rotate(0deg) scale(1) translateY(0); }
    10%      { transform: rotate(-3deg) scale(1) translateY(-2px); }
    25%      { transform: rotate(2deg) scale(1.02) translateY(-5px); }
    40%      { transform: rotate(-2deg) scale(1) translateY(-2px); }
    55%      { transform: rotate(3deg) scale(1.03) translateY(-6px); }
    70%      { transform: rotate(-2deg) scale(1) translateY(-1px); }
    85%      { transform: rotate(1deg) scale(1) translateY(0); }
}
.awards-gala-v3 .gala3-envelope .env-body {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, #fffaf0, #f5e6c8);
    border: 1px solid #d4af37;
    border-radius: 4px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 0 0 1px rgba(212,175,55,0.3) inset;
}
.awards-gala-v3 .gala3-envelope .env-flap {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(135deg, #f5e6c8, #d4af37);
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    transform-origin: top;
    transition: transform 1.0s cubic-bezier(0.86, 0, 0.07, 1);
    z-index: 3;
}
.awards-gala-v3 .gala3-envelope.opened .env-flap { transform: rotateX(-180deg); }
.awards-gala-v3 .gala3-envelope .env-seal {
    position: absolute;
    top: 32%; left: 50%;
    transform: translate(-50%, 0);
    width: 50px; height: 50px;
    background: radial-gradient(circle at 35% 35%, #ffed4e, #b8860b);
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    color: #5a4500;
    z-index: 4;
    transition: opacity 0.3s, transform 0.3s;
}
.awards-gala-v3 .gala3-envelope.opened .env-seal { opacity: 0; transform: translate(-50%, 0) scale(0.3); }
.awards-gala-v3 .gala3-envelope .env-card {
    position: absolute;
    inset: 12% 8% 12% 8%;
    background: #fff;
    color: #1a1a1a;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 12px;
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s, opacity 0.5s 0.5s;
    z-index: 2;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    border: 1px solid #e8c97c;
}
.awards-gala-v3 .gala3-envelope.opened .env-card {
    transform: translateY(-180px) scale(1.4);
    z-index: 5;
}
.awards-gala-v3 .gala3-envelope .ec-line1 {
    font-size: 10px; letter-spacing: 3px;
    text-transform: uppercase; color: #999;
}
.awards-gala-v3 .gala3-envelope .ec-line2 {
    font-size: 18px; font-weight: bold;
    color: #1a1a1a; margin-top: 6px; text-align: center;
    line-height: 1.2;
}

/* Reveal */
.awards-gala-v3 .gala3-reveal {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    opacity: 0;
    pointer-events: none;
    z-index: 15;
    transition: opacity 0.8s ease-in-out;
    width: 90%; max-width: 700px;
    color: #fff;
}
.awards-gala-v3 .gala3-reveal.show { opacity: 1; }
.awards-gala-v3 .gala3-reveal .gr-ribbon {
    font-size: 12px; letter-spacing: 6px; text-transform: uppercase;
    color: #ffd700;
    margin-bottom: 14px;
    opacity: 0.85;
}
.awards-gala-v3 .gala3-reveal .gr-name {
    font-size: 38px; font-weight: bold; color: #fff;
    text-shadow:
      0 0 20px #ffd700,
      0 0 40px #ffd700,
      0 0 80px rgba(255,215,0,0.6);
    letter-spacing: 1.5px;
    animation: gala3-glow 1.6s ease-in-out infinite alternate;
}
.awards-gala-v3 .gala3-reveal.player .gr-name {
    color: #ffd700;
    font-size: 48px;
    text-shadow:
      0 0 20px #fff,
      0 0 40px #ffd700,
      0 0 80px #ffed4e,
      0 0 120px #ffd700;
}
@keyframes gala3-glow {
    0%   { filter: brightness(1); }
    100% { filter: brightness(1.3); }
}
.awards-gala-v3 .gala3-reveal .gr-star {
    display: inline-block;
    font-size: 24px; margin-left: 6px;
    animation: gala3-star-spin 2.5s linear infinite;
}
@keyframes gala3-star-spin { to { transform: rotate(360deg); } }
.awards-gala-v3 .gala3-reveal .gr-effect {
    margin-top: 22px;
    display: inline-block;
    padding: 8px 22px;
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    color: #1a1a1a;
    font-weight: bold;
    font-size: 14px;
    border-radius: 24px;
    letter-spacing: 1px;
    box-shadow: 0 4px 24px rgba(255,215,0,0.6);
    animation: gala3-bounce-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    animation-delay: 0.4s;
}
@keyframes gala3-bounce-in {
    0%   { opacity: 0; transform: scale(0.3) translateY(10px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
.awards-gala-v3 .gala3-reveal .gr-hint {
    margin-top: 18px;
    max-width: 560px; margin-left: auto; margin-right: auto;
    font-size: 14px; font-style: italic;
    line-height: 1.5;
    color: rgba(255,255,255,0.85);
    opacity: 0;
    animation: gala3-fade-in 1s ease-out 0.8s forwards;
}
@keyframes gala3-fade-in { to { opacity: 1; } }

/* Drumroll */
.awards-gala-v3 .gala3-drumroll {
    position: absolute;
    bottom: 14vh; left: 50%;
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 10px;
    font-size: 12px; letter-spacing: 4px; text-transform: uppercase;
    opacity: 0; color: rgba(255,255,255,0.7);
    z-index: 11;
    transition: opacity 0.4s ease;
}
.awards-gala-v3 .gala3-drumroll.show { opacity: 1; }
.awards-gala-v3 .gala3-drumroll .gd-icon {
    font-size: 22px;
    animation: gala3-drum-shake 0.15s ease-in-out infinite alternate;
    display: inline-block;
}
@keyframes gala3-drum-shake {
    0% { transform: rotate(-3deg); }
    100% { transform: rotate(3deg); }
}
.awards-gala-v3 .gala3-drumroll .gd-bar {
    width: 200px; height: 4px;
    background: rgba(255,255,255,0.12);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}
.awards-gala-v3 .gala3-drumroll .gd-bar-fill {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, #ffd700, #ffed4e);
    transform-origin: left;
    transform: scaleX(0);
}

/* Confetti */
.awards-gala-v3 .gala3-confetti {
    position: absolute; inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 14;
}
.awards-gala-v3 .gala3-confetti-piece {
    position: absolute;
    width: 10px; height: 14px;
    top: -20px;
    opacity: 0.95;
    animation: gala3-confetti-fall var(--gconf-dur, 3s) linear forwards;
}
@keyframes gala3-confetti-fall {
    0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(110vh) rotate(720deg); opacity: 0.5; }
}

/* Sparkles */
.awards-gala-v3 .gala-sparkle {
    position: absolute;
    width: 14px; height: 14px;
    pointer-events: none;
    opacity: 0;
    animation: gala3-sparkle-pop 1.4s ease-out forwards;
    z-index: 16;
    background: radial-gradient(circle, #fff 0%, #ffd700 30%, transparent 60%);
    border-radius: 50%;
    box-shadow: 0 0 16px rgba(255,215,0,0.8);
}
@keyframes gala3-sparkle-pop {
    0%   { opacity: 0; transform: scale(0); }
    40%  { opacity: 1; transform: scale(1.5); }
    100% { opacity: 0; transform: scale(0.6); }
}

/* Trophy hero */
.awards-gala-v3 .gala3-trophy {
    position: absolute;
    top: 50%; left: 50%;
    margin-top: -260px;
    width: 130px; height: 170px;
    z-index: 18;
    opacity: 0;
    transform: translate(-50%, 60px) scale(0);
    transition: transform 1.0s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease;
    pointer-events: none;
}
.awards-gala-v3 .gala3-trophy.show {
    transform: translate(-50%, 0) scale(1);
    opacity: 1;
}
.awards-gala-v3 .gala3-trophy svg {
    width: 100%; height: 100%;
    filter:
      drop-shadow(0 0 20px #ffd700)
      drop-shadow(0 0 50px rgba(255,215,0,0.7));
    animation: gala3-trophy-bob 2.4s ease-in-out infinite;
}
@keyframes gala3-trophy-bob {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(-8px) rotate(2deg); }
}

/* Camera shake */
.awards-gala-v3 .gala3-stage.camera-shake .gala3-bg,
.awards-gala-v3 .gala3-stage.camera-shake .gala3-floor,
.awards-gala-v3 .gala3-stage.camera-shake .gala3-backlights { animation: gala3-cam-shake 0.5s ease-out; }
@keyframes gala3-cam-shake {
    0%, 100% { transform: translate(0,0); }
    20%  { transform: translate(-5px, 3px); }
    40%  { transform: translate(5px, -3px); }
    60%  { transform: translate(-4px, -2px); }
    80%  { transform: translate(3px, 4px); }
}

/* Click hint */
.awards-gala-v3 .gala3-click-hint {
    position: absolute;
    bottom: 6vh; left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    z-index: 31;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
    animation: gala3-hint-pulse 2s ease-in-out infinite;
}
.awards-gala-v3 .gala3-click-hint.show { opacity: 0.6; }
@keyframes gala3-hint-pulse {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 0.7; }
}

/* Skip btn (top right) */
.awards-gala-v3 .gala3-skip {
    position: absolute;
    top: 16px; right: 16px;
    padding: 6px 14px;
    font-size: 11px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    cursor: pointer;
    z-index: 50;
    letter-spacing: 1px;
}
.awards-gala-v3 .gala3-skip:hover { color: #fff; background: rgba(255,255,255,0.15); }

/* Continue/close button */
.awards-gala-v3 .gala3-close {
    position: absolute;
    bottom: 6vh; left: 50%;
    transform: translateX(-50%);
    padding: 12px 28px;
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    color: #1a1a1a;
    border: none; border-radius: 4px;
    font-size: 13px; font-weight: bold; letter-spacing: 2px;
    cursor: pointer;
    text-transform: uppercase;
    z-index: 30;
    box-shadow: 0 6px 24px rgba(255,215,0,0.4);
}
.awards-gala-v3 .gala3-close:hover {
    box-shadow: 0 10px 30px rgba(255,215,0,0.6);
}

/* ============================================================
 * v0.9.21.20 — Save-Banner (kompakt, semi-transparent)
 *   Erscheint nach Quick-Save (F5/Button) und Save-as.
 *   Kein Background-Block wie month-banner — eher Toast-Look.
 * ============================================================ */
.save-banner {
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9810;
    color: #fff;
    background: rgba(0, 0, 0, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 10px 22px;
    pointer-events: none;
    opacity: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    animation: save-banner-cycle 1800ms ease-out forwards;
    text-align: center;
    white-space: nowrap;
}
@keyframes save-banner-cycle {
    0%   { opacity: 0; transform: translate(-50%, -55%); }
    15%  { opacity: 1; transform: translate(-50%, -50%); }
    70%  { opacity: 1; transform: translate(-50%, -50%); }
    100% { opacity: 0; transform: translate(-50%, -45%); }
}
@media (prefers-reduced-motion: reduce) {
    .save-banner { animation: none; opacity: 1; transform: translate(-50%, -50%); }
}