/* =========================================
   ZENTRALES DESIGN (Challenge Editor Theme)
   ========================================= */
:root {
    --bg-color: #0D1117;
    --card-bg: #21262D;
    --text-color: #ffffff;
    --primary-color: #388BFD;
    --primary-hover: #4B9EFA;
    --border-color: #30363D;
    --input-bg: #161B22;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    --muted-text: #a1aab3;
    --success-color: #27ae60;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    padding: 0;
}

.container { max-width: 1200px; margin: 0 auto; padding: 20px; }
h1 { text-align: left; color: var(--text-color); margin: 0; font-size: 1.5rem; }

/* =========================================
   NAVBAR (Im Style des Challenge Editors)
   ========================================= */
.navbar {
    background-color: var(--input-bg); border-bottom: 1px solid var(--border-color);
    padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 0px;
}
.navbar a { color: var(--muted-text); transition: color 0.2s; }
.navbar a:hover { color: var(--text-color); }

/* =========================================
   FILTER FORMULAR (index.php) - Einklappbar
   ========================================= */
details.filter-wrapper {
    background-color: var(--card-bg);
    padding: 20px 25px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    margin-bottom: 30px;
}
details.filter-wrapper summary {
    cursor: pointer; font-weight: bold; color: var(--primary-color);
    font-size: 1.1em; outline: none; user-select: none; transition: color 0.2s;
}
details.filter-wrapper summary:hover { color: var(--primary-hover); }
details.filter-wrapper[open] summary {
    border-bottom: 1px dashed var(--border-color); margin-bottom: 15px; padding-bottom: 10px;
}

.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; }
.filter-group label { display: block; font-weight: bold; margin-bottom: 8px; color: var(--muted-text); font-size: 0.9em; }

.filter-group select, .filter-group input {
    width: 100%; padding: 10px; border: 1px solid var(--border-color); border-radius: 5px;
    font-size: 14px; background-color: var(--bg-color); color: var(--text-color); box-sizing: border-box;
}
.filter-group select:focus, .filter-group input:focus { border-color: var(--primary-color); outline: none; }

.filter-group select[multiple] { padding: 5px; }
.filter-group select[multiple] option { padding: 5px; border-radius: 3px; }
.filter-group select[multiple] option:checked { background-color: var(--border-color); color: var(--text-color); }

.button-group { margin-top: 25px; display: flex; gap: 10px; }
.button-group button { 
    padding: 12px 20px; border: none; border-radius: 5px; 
    font-weight: bold; font-size: 1.1rem; cursor: pointer; transition: all 0.2s; 
}
/* Roter Hover-Effekt für den Reset-Button */
button[type="reset"] { background-color: transparent; border: 1px solid var(--border-color); color: var(--muted-text); }
button[type="reset"]:hover { background-color: #e74c3c; color: #fff; border-color: #e74c3c; box-shadow: 0 0 8px rgba(231, 76, 60, 0.4); }

#loading-indicator { text-align: center; font-size: 1.2em; padding: 40px; color: var(--primary-color); }
.hidden { display: none; }
#character-counter { font-size: 1rem; color: var(--muted-text); margin-bottom: 20px; font-weight: normal; }

/* =========================================
   CHARAKTER KARTEN (index.php)
   ========================================= */
#results-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.character-card {
    background-color: var(--input-bg);
    border: 2px solid var(--border-color); 
    /*border-top: 4px solid var(--elem-color, var(--border-color));*/
    border-top: 4px solid color-mix(in srgb, var(--elem-color, var(--border-color)), #000 60%);
    border-radius: 8px; box-shadow: var(--shadow); overflow: hidden;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.character-card:hover {
    transform: translateY(-2px);
    border-color: var(--elem-color, var(--muted-text)); 
    box-shadow: 0 8px 16px rgba(0,0,0,0.4);
}
.pyro { --elem-color: #ef7938; } .hydro { --elem-color: #4cc2f1; } .anemo { --elem-color: #74c2a8; }
.electro { --elem-color: #b182e2; } .dendro { --elem-color: #a5c83b; } .cryo { --elem-color: #aaddf1; } .geo { --elem-color: #f7a83e; }

.card-content { padding: 20px; }
.card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; border-bottom: 1px solid var(--border-color); padding-bottom: 15px; }
.header-left { display: flex; flex-direction: column; }
.header-right { display: flex; align-items: flex-start; }

/* Bild-Styles inklusive Blur-Up für Lazy Loading */
.char-icon { 
    width: 90px; height: 90px; border-radius: 6px; object-fit: cover; 
    background: var(--bg-color); border: 1px solid var(--border-color);
    /* filter: blur(1px); Startet unscharf mit dem -small Bild */
    transition: filter 0.4s ease-out;
}
.char-icon.loaded {
    filter: blur(0); /* Wird weich scharf gestellt, sobald das volle Bild geladen ist */
}

.card-header h3 { margin: 0 0 5px 0; font-size: 1.3em; color: var(--text-color); }
.card-header .rarity { margin: 0; font-size: 1.1em; color: #f39c12; letter-spacing: 2px;}

.header-icons { display: flex; gap: 8px; margin-top: 8px; }
.header-icons span { margin-left: 0; }

.card-details p { margin: 8px 0; color: #e6edf3; font-size: 0.9em; display: flex; justify-content: space-between; align-items: center; }
.card-details strong { color: var(--muted-text); font-weight: normal; }

/* Icons */
.ele-icon { display: inline-block; width: 30px; height: 30px; background-size: contain; background-repeat: no-repeat; background-position: center; vertical-align: middle; margin-left: 5px; filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.8)); }
.ele-Anemo { background-image: url('https://luca.rosenloecher.org/wbc/img/element/anemo.svg'); }
.ele-Cryo, .ele-kryo { background-image: url('https://luca.rosenloecher.org/wbc/img/element/cryo.svg'); }
.ele-Dendro { background-image: url('https://luca.rosenloecher.org/wbc/img/element/dendro.svg'); }
.ele-Electro, .ele-elektro { background-image: url('https://luca.rosenloecher.org/wbc/img/element/electro.svg'); }
.ele-Geo { background-image: url('https://luca.rosenloecher.org/wbc/img/element/geo.svg'); }
.ele-Hydro { background-image: url('https://luca.rosenloecher.org/wbc/img/element/hydro.svg'); }
.ele-Pyro { background-image: url('https://luca.rosenloecher.org/wbc/img/element/pyro.svg'); }

.weapon-icon { display: inline-block; width: 30px; height: 30px; background-size: contain; background-repeat: no-repeat; background-position: center; vertical-align: middle; margin-left: 5px; filter: opacity(0.8); }
.weapon-Bogen { background-image: url('https://luca.rosenloecher.org/wbc/img/weapons/Bow.png'); }
.weapon-Katalysator { background-image: url('https://luca.rosenloecher.org/wbc/img/weapons/Catalyst.png'); }
.weapon-Zweihänder { background-image: url('https://luca.rosenloecher.org/wbc/img/weapons/Claymore.png'); }
.weapon-Stangenwaffe { background-image: url('https://luca.rosenloecher.org/wbc/img/weapons/Polearm.png'); }
.weapon-Schwert { background-image: url('https://luca.rosenloecher.org/wbc/img/weapons/Sword.png'); }