/* SurvivalArmy SAv5 Verzauberungs-Verzeichnis */

:root {
    --bg: #131318;
    --bg2: #1b1b23;
    --text: #e6e6e6;
    --grau: #9a9aa5;
    --rand: #2a2a36;

    /* Seltenheitsfarben (angelehnt an Minecraft-Chatfarben) */
    --c-simple: #aaaaaa;
    --c-unique: #55ff55;
    --c-elite: #4fa6ff;
    --c-ultimate: #ffff55;
    --c-legendary: #ffaa00;
    --c-fabled: #ff5555;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    line-height: 1.45;
}

header {
    border-bottom: 2px solid var(--rand);
    background: var(--bg2);
    padding: 28px 20px 22px;
    text-align: center;
}

.servername {
    color: var(--grau);
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0 0 6px;
}

h1 {
    font-family: "Press Start 2P", "Courier New", monospace;
    font-size: clamp(18px, 4vw, 30px);
    margin: 0 0 10px;
    color: #d9b5ff;
    text-shadow: 3px 3px 0 #2b0a4d;
}

.untertitel {
    color: var(--grau);
    font-size: 14px;
    margin: 0;
}

/* Legende: anklickbare Seltenheits-Chips */
.legende {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 16px 20px 4px;
    max-width: 1100px;
    margin: 0 auto;
}

.chip {
    border: 1px solid var(--rand);
    background: var(--bg2);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    padding: 5px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
}

.chip:hover { border-color: #4a4a5e; }
.chip.aktiv { border-color: #8a6bd6; background: #241a38; }

.chip .punkt {
    width: 10px;
    height: 10px;
    display: inline-block;
    box-shadow: 0 0 4px currentColor;
}

.chip small { color: var(--grau); }

/* Werkzeugleiste: Suche + Filter */
.werkzeugleiste {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 1100px;
    margin: 14px auto 6px;
    padding: 0 20px;
}

.werkzeugleiste input,
.werkzeugleiste select {
    background: var(--bg2);
    border: 1px solid var(--rand);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    padding: 8px 10px;
}

.werkzeugleiste input { flex: 1 1 220px; }
.werkzeugleiste input:focus, .werkzeugleiste select:focus { outline: 1px solid #8a6bd6; }

#anzahl {
    max-width: 1100px;
    margin: 4px auto 0;
    padding: 0 20px;
    color: var(--grau);
    font-size: 13px;
}

/* Kartenraster im Stil von Minecraft-Tooltips */
#liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    max-width: 1100px;
    margin: 14px auto 40px;
    padding: 0 20px;
}

.karte {
    background: rgba(18, 3, 24, 0.92);
    border: 2px solid #2b1a4d;
    outline: 2px solid #08030d;
    border-left: 4px solid var(--farbe, #2b1a4d);
    padding: 12px 14px;
}

.karte h2 {
    margin: 0 0 6px;
    font-size: 16px;
    color: var(--farbe, var(--text));
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    gap: 8px;
}

.karte h2 .icons {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 3px;
    flex-shrink: 0;
    max-width: 55%;
}

.karte .icon {
    width: 22px;
    height: 22px;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.45));
}

.karte .stufe {
    color: var(--farbe, var(--text));
    opacity: 0.85;
    font-weight: normal;
}

.karte p {
    margin: 0 0 8px;
    font-size: 14px;
    color: #c9c9c9;
}

.karte .fuer {
    font-size: 12.5px;
    color: #8f8fb0;
}

/* Feste Spaltenzahl gewählt: volle Breite nutzen */
#liste.fest { max-width: none; }

/* Ab 6 Spalten: kompaktere Karten, damit alles lesbar bleibt */
#liste.kompakt { gap: 8px; }
#liste.kompakt .karte { padding: 8px 10px; border-left-width: 3px; }
#liste.kompakt .karte h2 { font-size: 13.5px; }
#liste.kompakt .karte .icon { width: 16px; height: 16px; }
#liste.kompakt .karte p { font-size: 12.5px; margin-bottom: 6px; }
#liste.kompakt .karte .fuer { font-size: 11px; }

.leer {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--grau);
    padding: 40px 0;
}

footer {
    border-top: 2px solid var(--rand);
    color: var(--grau);
    text-align: center;
    font-size: 12.5px;
    padding: 18px;
}

footer a { color: #b39ddb; }

/* Server-IP-Seite */
.server-seite {
    max-width: 640px;
    margin: 36px auto 60px;
    padding: 0 20px;
}

.server-seite h2 {
    color: #d9b5ff;
    font-size: 18px;
    margin: 32px 0 6px;
}

.server-seite p { color: #c9c9c9; }

.ip-kasten {
    background: rgba(18, 3, 24, 0.92);
    border: 2px solid #2b1a4d;
    outline: 2px solid #08030d;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 14px 0;
}

.ip-kasten .ip {
    font-family: "Press Start 2P", "Courier New", monospace;
    font-size: clamp(13px, 2.6vw, 19px);
    color: #55ff55;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
    word-break: break-all;
}

.ip-kasten.alt .ip {
    color: #4fa6ff;
    font-size: clamp(11px, 2.2vw, 15px);
}

.kopieren {
    background: #241a38;
    border: 1px solid #8a6bd6;
    color: var(--text);
    font: inherit;
    font-size: 14px;
    padding: 8px 16px;
    cursor: pointer;
}

.kopieren:hover { background: #2f2249; }
.kopieren.ok { border-color: #55ff55; color: #55ff55; }

.anleitung {
    color: #c9c9c9;
    padding-left: 22px;
}

.anleitung li { margin: 6px 0; }

.zurueck {
    display: inline-block;
    margin-top: 28px;
    color: #b39ddb;
}

@media (max-width: 480px) {
    #liste { grid-template-columns: 1fr !important; }
}