/* === Grundlayout === */
body {
    background:#0d0d0d;
    color:#e0e0e0;
    font-family:Arial, sans-serif;
    margin:0;
    padding:20px;
}

h1 {
    margin-top:0;
    font-size:26px;
    color:#4da3ff;
    text-shadow:0 0 6px #003366;
}

/* === Tabs === */
.tabs {
    display:flex;
    margin-bottom:20px;
}
.tabs a {
    padding:10px 18px;
    margin-right:6px;
    background:#1a1a1a;
    border:1px solid #333;
    border-radius:4px;
    color:#ccc;
    text-decoration:none;
    font-size:14px;
}
.tabs a.active {
    background:#004c99;
    border-color:#0066cc;
    color:#fff;
    box-shadow:0 0 8px #0066cc;
}

/* === Boxen === */
.box {
    background:#111;
    border:1px solid #222;
    padding:15px;
    border-radius:6px;
    max-width:900px;
}

/* === Tabellen === */
table {
    width:100%;
    border-collapse:collapse;
    margin-top:10px;
    font-size:14px;
}
th, td {
    padding:5px 8px;
    border-bottom:1px solid #222;
}
th {
    background:#1a1a1a;
    text-align:left;
    color:#9bbce0;
}
tr:hover {
    background:#181818;
}
.rank {
    width:40px;
}
/* === Icons: Immer hell und sichtbar === */
.player-icon {
    width:14px;
    height:14px;
    vertical-align:middle;
    margin-right:6px;
    opacity:1;
    color:#66b3ff; /* Habitat7-Blau */
    filter: drop-shadow(0 0 4px #004c99);
}
.trend-icon {
    width:14px;
    height:14px;
    vertical-align:middle;
    margin-right:6px;
    opacity:1;
}
/* === Trendfarben === */
.pos {
    color:#4cd964 !important; /* Grün */
    filter: drop-shadow(0 0 4px #2fa84f);
}

.neg {
    color:#ff3b30 !important; /* Rot */
    filter: drop-shadow(0 0 4px #b02020);
}

.neutral {
    color:#cccccc !important; /* Hellgrau */
    filter: drop-shadow(0 0 4px #555);
}



/* === Trend-Animationen === */
.pos::before {
    content: "▲ ";
    color:#4cd964;
    animation: rise 0.6s ease-out;
}
.neg::before {
    content: "▼ ";
    color:#ff3b30;
    animation: fall 0.6s ease-out;
}
.neutral::before {
    content: "● ";
    color:#999;
}

@keyframes rise {
    from { transform: translateY(4px); opacity:0; }
    to   { transform: translateY(0); opacity:1; }
}
@keyframes fall {
    from { transform: translateY(-4px); opacity:0; }
    to   { transform: translateY(0); opacity:1; }
}

/* === Mobile Ansicht === */
@media(max-width:600px){
    table, thead, tbody, th, td, tr {
        display:block;
    }
    tr {
        margin-bottom:10px;
        border:1px solid #222;
        padding:8px;
        border-radius:6px;
    }
    th { display:none; }
    td {
        text-align:right;
        padding-left:50%;
        position:relative;
    }
    td::before {
        content: attr(data-label);
        position:absolute;
        left:10px;
        color:#888;
        text-align:left;
    }
}