/* ============================================================
   DIE GROSSE BEWERTUNGSSHOW – Design-Tokens
   Farben:   #121212 Bühne · #1B1B1E Karte · #E8A33D Spotlight-Gold
             #4FB6C4 Chat-Blau · #EDEDED Text · #97979D Text gedämpft
   Schrift:  Oswald (Display/Titel) · Source Sans 3 (Fließtext)
             JetBrains Mono (Zahlen/Scores – tabellenartig, feste Breite)
   Signatur: Score-Kacheln mit Farbskala, die 1:1 an die bedingte
             Formatierung der ursprünglichen Bewertungs-Tabelle anknüpft.
   ============================================================ */

:root {
    --buehne: #121212;
    --karte: #1b1b1e;
    --karte-rand: #2a2a2e;
    --gold: #e8a33d;
    --chat-blau: #4fb6c4;
    --text: #ededed;
    --text-gedaempft: #97979d;

    --score-rot: #b8463b;
    --score-orange: #d9822f;
    --score-gelb: #d8b23c;
    --score-gruen: #4c9a4c;
    --score-blau: #3f7fd1;
    --score-lila: #a684d9;

    --schrift-display: 'Oswald', 'Arial Narrow', sans-serif;
    --schrift-text: 'Source Sans 3', 'Segoe UI', sans-serif;
    --schrift-mono: 'JetBrains Mono', 'Consolas', monospace;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--buehne);
    color: var(--text);
    font-family: var(--schrift-text);
    line-height: 1.5;
}

a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }

button, .button-primaer, .button-sekundaer {
    font-family: var(--schrift-text);
    font-weight: 600;
    border: none;
    border-radius: 6px;
    padding: 0.7em 1.3em;
    cursor: pointer;
    font-size: 1rem;
}

.button-primaer, button[type="submit"] {
    background: var(--gold);
    color: #1a1200;
}
.button-primaer:hover, button[type="submit"]:hover { background: #f0b25a; text-decoration: none; }

.button-sekundaer {
    background: transparent;
    color: var(--text-gedaempft);
    border: 1px solid var(--karte-rand);
    display: inline-block;
}

.button-loeschen {
    background: transparent;
    color: var(--score-rot);
    border: 1px solid var(--score-rot);
    padding: 0.4em 0.9em;
    font-size: 0.85rem;
}
.button-loeschen:hover { background: var(--score-rot); color: #fff; }

.button-einblenden {
    background: transparent;
    color: var(--chat-blau);
    border: 1px solid var(--chat-blau);
    padding: 0.4em 0.9em;
    font-size: 0.85rem;
    white-space: nowrap;
}
.button-einblenden:hover { background: var(--chat-blau); color: #0d1f21; }

/* ---------- Score-Badges (Signatur-Element) ---------- */

.score-badge {
    display: inline-block;
    font-family: var(--schrift-mono);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 0.25em 0.7em;
    border-radius: 6px;
    color: #10140f;
}
.score-badge.score-rot    { background: var(--score-rot); color: #ffecea; }
.score-badge.score-orange { background: var(--score-orange); color: #fff5ea; }
.score-badge.score-gelb   { background: var(--score-gelb); }
.score-badge.score-gruen  { background: var(--score-gruen); color: #eafff0; }
.score-badge.score-blau   { background: var(--score-blau); color: #eaf2ff; }
.score-badge.score-lila   { background: var(--score-lila); color: #2a1a3d; }

/* ============================================================
   Öffentliche Seite
   ============================================================ */

.show-kopf {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 3.5rem 1rem 2.5rem;
    background: radial-gradient(ellipse at top, #232018 0%, var(--buehne) 65%);
    border-bottom: 1px solid var(--karte-rand);
}

/* Zwei langsam wandernde, farbige Lichtkegel im Hintergrund - dezent und
   ruhig, wie Scheinwerfer, die bei einer Spielshow sanft über die Bühne
   ziehen. Bewusst langsam (16-22s) und mit niedriger Deckkraft, kein
   hektisches Blinken. */
.show-kopf::before,
.show-kopf::after {
    content: '';
    position: absolute;
    width: 55vw;
    height: 55vw;
    max-width: 650px;
    max-height: 650px;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
    z-index: 0;
}
.show-kopf::before {
    top: -25%;
    left: -15%;
    background: var(--gold);
    animation: scheinwerfer-a 20s ease-in-out infinite;
}
.show-kopf::after {
    top: -25%;
    right: -15%;
    background: var(--chat-blau);
    animation: scheinwerfer-b 26s ease-in-out infinite;
}
@keyframes scheinwerfer-a {
    0%, 100% { transform: translate(0, 0) scale(1);       opacity: 0.14; }
    50%      { transform: translate(18%, 12%) scale(1.2); opacity: 0.26; }
}
@keyframes scheinwerfer-b {
    0%, 100% { transform: translate(0, 0) scale(1);        opacity: 0.12; }
    50%      { transform: translate(-14%, 10%) scale(1.15); opacity: 0.24; }
}

.show-eyebrow, .show-titel, .show-untertitel { position: relative; z-index: 1; }

.show-eyebrow {
    font-family: var(--schrift-mono);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--chat-blau);
    font-size: 0.8rem;
    margin: 0 0 0.5rem;
}
.show-titel {
    font-family: var(--schrift-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: clamp(2rem, 6vw, 3.5rem);
    margin: 0;
    color: var(--gold);
    animation: titel-glimmern 9s ease-in-out infinite;
}
/* Sanftes, langsames Auf- und Abglühen des Titels - kein Farbwechsel,
   nur ein ruhiges Leuchten, damit es nicht unruhig wirkt. */
@keyframes titel-glimmern {
    0%, 100% { text-shadow: 0 0 18px rgba(232, 163, 61, 0.15); }
    50%      { text-shadow: 0 0 30px rgba(232, 163, 61, 0.55); }
}
.show-untertitel {
    color: var(--text-gedaempft);
    margin: 0.75rem 0 0;
}

.show-inhalt {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

.filterleiste {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.ansicht-tabs {
    display: flex;
    gap: 0.3rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--karte-rand);
}
.ansicht-tab {
    display: inline-block;
    padding: 0.6em 1.1em;
    font-family: var(--schrift-display);
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: var(--text-gedaempft);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.ansicht-tab:hover { color: var(--text); text-decoration: none; }
.ansicht-tab--aktiv { color: var(--gold); border-bottom-color: var(--gold); }

.rangliste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.rang-zeile {
    display: grid;
    grid-template-columns: 3rem 60px 1fr auto auto auto;
    align-items: center;
    gap: 1rem;
    background: var(--karte);
    border: 1px solid var(--karte-rand);
    border-radius: 8px;
    padding: 0.6rem 1rem;
}
.rang-zeile:hover { border-color: var(--gold); }
.rang-platz {
    font-family: var(--schrift-mono);
    font-weight: 700;
    color: var(--text-gedaempft);
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.rang-cover { width: 60px; height: 28px; object-fit: cover; border-radius: 4px; }
.rang-titel { color: var(--text); font-family: var(--schrift-display); font-size: 1rem; }
.rang-titel:hover { color: var(--gold); text-decoration: none; }
.rang-datum { color: var(--text-gedaempft); font-size: 0.82rem; white-space: nowrap; }
.rang-wertung { min-width: 4.5rem; text-align: center; }

@media (max-width: 700px) {
    .rang-zeile {
        grid-template-columns: 2.2rem 44px 1fr auto;
        grid-template-areas:
            "platz cover titel wertung"
            "platz cover typ datum";
        row-gap: 0.2rem;
    }
    .rang-platz { grid-area: platz; }
    .rang-cover { grid-area: cover; }
    .rang-titel { grid-area: titel; }
    .typ-badge { grid-area: typ; justify-self: start; }
    .rang-datum { grid-area: datum; justify-self: end; }
    .rang-wertung { grid-area: wertung; justify-self: end; }
}
.filter-gruppe { display: flex; flex-direction: column; gap: 0.3rem; }
.filter-gruppe label { font-size: 0.8rem; color: var(--text-gedaempft); }
.filter-gruppe select {
    background: var(--karte);
    color: var(--text);
    border: 1px solid var(--karte-rand);
    border-radius: 6px;
    padding: 0.5em 0.8em;
}

.spiele-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1.25rem;
}

.spiele-karte {
    background: var(--karte);
    border: 1px solid var(--karte-rand);
    border-radius: 10px;
    overflow: hidden;
    color: var(--text);
    display: flex;
    flex-direction: column;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.spiele-karte:hover {
    transform: translateY(-3px);
    border-color: var(--gold);
    text-decoration: none;
}

.karte-cover { position: relative; aspect-ratio: 460 / 215; background: #0d0d0d; }
.karte-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.typ-badge {
    display: inline-block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25em 0.6em;
    border-radius: 4px;
    background: rgba(0,0,0,0.7);
    color: var(--text);
}
/* Nur auf dem Cover-Bild (öffentliche Karten) frei positioniert - in der
   Admin-Tabelle soll es normal im Textfluss der Zelle bleiben. */
.karte-cover .typ-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
}
.typ-badge.typ-vollversion { color: var(--gold); }
.typ-badge.typ-demo { color: var(--chat-blau); }

.karte-inhalt { padding: 0.9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.karte-titel { font-family: var(--schrift-display); font-size: 1.05rem; margin: 0; line-height: 1.25; }
.karte-datum { color: var(--text-gedaempft); font-size: 0.8rem; margin: 0; }
.karte-wertung { align-self: flex-start; font-size: 1.1rem; margin-top: 0.2rem; }
.karte-detailwertung { color: var(--text-gedaempft); font-size: 0.78rem; margin: 0; }

.mini-wertungstabelle {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
    font-size: 0.72rem;
    font-family: var(--schrift-mono);
}
.mini-wertungstabelle th {
    color: var(--text-gedaempft);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 0.62rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid var(--karte-rand);
}
.mini-wertungstabelle td {
    padding: 0.18rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.mini-wertungstabelle td:first-child {
    font-family: var(--schrift-text);
    color: var(--text-gedaempft);
    font-size: 0.75rem;
}
.mini-wertungstabelle th:nth-child(2), .mini-wertungstabelle th:nth-child(3),
.mini-wertungstabelle td:nth-child(2), .mini-wertungstabelle td:nth-child(3) {
    text-align: right;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.mini-wertungstabelle th:nth-child(3), .mini-wertungstabelle td:nth-child(3) { color: var(--chat-blau); }

.leerer-hinweis { color: var(--text-gedaempft); grid-column: 1 / -1; text-align: center; padding: 3rem 0; }

/* ============================================================
   Admin-Bereich (Login, Formular, Liste)
   ============================================================ */

.admin-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid var(--karte-rand);
}
.admin-kopf h1 { font-family: var(--schrift-display); font-size: 1.3rem; margin: 0; color: var(--gold); }
.admin-kopf nav { display: flex; gap: 1.2rem; }

.seite-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-box {
    background: var(--karte);
    border: 1px solid var(--karte-rand);
    border-radius: 10px;
    padding: 2.5rem 2.5rem 2rem;
    width: 100%;
    max-width: 340px;
    text-align: center;
}
.login-box h1 { font-family: var(--schrift-display); color: var(--gold); font-size: 1.4rem; margin: 0 0 0.2rem; }
.login-untertitel { color: var(--text-gedaempft); margin: 0 0 1.5rem; font-size: 0.9rem; }
.login-box form { display: flex; flex-direction: column; gap: 0.8rem; }
.login-box label { text-align: left; font-size: 0.85rem; color: var(--text-gedaempft); }
.login-box input {
    background: var(--buehne);
    border: 1px solid var(--karte-rand);
    color: var(--text);
    border-radius: 6px;
    padding: 0.6em 0.8em;
}
.fehlermeldung { color: var(--score-rot); font-size: 0.9rem; }
.erfolgsmeldung { color: var(--score-gruen); font-weight: 600; }

.admin-liste-wrapper, .formular-wrapper { max-width: 1000px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }

.admin-liste-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; }

.admin-tabelle { width: 100%; border-collapse: collapse; }
.admin-tabelle th, .admin-tabelle td {
    padding: 0.6rem 0.7rem;
    border-bottom: 1px solid var(--karte-rand);
    text-align: left;
    vertical-align: middle;
}
.admin-tabelle th { color: var(--text-gedaempft); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }
.sortier-link { color: inherit; text-transform: uppercase; letter-spacing: 0.03em; }
.sortier-link:hover { color: var(--gold); text-decoration: none; }
.sortier-link--aktiv { color: var(--gold); }
.cover-zelle img { width: 64px; height: 30px; object-fit: cover; border-radius: 4px; display: block; }
.aktionen-zelle { display: flex; gap: 0.8rem; align-items: center; }
.aktionen-zelle form { margin: 0; }

.formular-block {
    background: var(--karte);
    border: 1px solid var(--karte-rand);
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.formular-zeile { display: flex; gap: 1.2rem; margin-bottom: 1rem; flex-wrap: wrap; }
.feld { display: flex; flex-direction: column; gap: 0.3rem; flex: 1; min-width: 160px; }
.feld label { font-size: 0.85rem; color: var(--text-gedaempft); }
.feld input, .feld select {
    background: var(--buehne);
    border: 1px solid var(--karte-rand);
    color: var(--text);
    border-radius: 6px;
    padding: 0.55em 0.8em;
}

.feld--spiel-suche { position: relative; }
.vorschlagsliste {
    position: absolute;
    z-index: 10;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--karte);
    border: 1px solid var(--karte-rand);
    border-radius: 6px;
    max-height: 260px;
    overflow-y: auto;
    margin-top: 0.2rem;
}
.vorschlagsliste button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    color: var(--text);
    border: none;
    border-radius: 0;
    padding: 0.6em 0.9em;
    font-weight: 400;
}
.vorschlagsliste button:hover { background: var(--karte-rand); }

.spiel-vorschau { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.8rem; }
.spiel-vorschau img { width: 120px; border-radius: 6px; }

.oder-trenner {
    color: var(--text-gedaempft);
    font-size: 0.78rem;
    margin: 0.9rem 0 0.4rem;
}
.appid-manuell {
    background: rgba(255,255,255,0.03);
    border: 1px dashed var(--karte-rand);
    border-radius: 8px;
    padding: 0.8rem 1rem;
}
.appid-manuell label { display: block; font-size: 0.82rem; color: var(--text-gedaempft); margin-bottom: 0.3rem; }
.appid-manuell-zeile { display: flex; gap: 0.6rem; }
.appid-manuell-zeile input {
    flex: 1;
    background: var(--buehne);
    border: 1px solid var(--karte-rand);
    color: var(--text);
    border-radius: 6px;
    padding: 0.5em 0.8em;
}
.appid-manuell .hinweis { margin: 0.4rem 0 0; }
.appid-manuell .fehlermeldung { margin: 0.4rem 0 0; font-size: 0.85rem; }

.kategorien h3 { margin-top: 0; font-family: var(--schrift-display); color: var(--gold); }
.kategorien-tabelle { display: flex; flex-direction: column; gap: 0.5rem; }
.kategorien-kopf, .kategorie-zeile {
    display: grid;
    grid-template-columns: 1.6fr 0.7fr 1.2fr 0.9fr;
    gap: 0.8rem;
    align-items: center;
}
.kategorien-kopf { color: var(--text-gedaempft); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }
.kategorie-zeile input {
    background: var(--buehne);
    border: 1px solid var(--karte-rand);
    color: var(--text);
    border-radius: 6px;
    padding: 0.5em 0.7em;
    width: 100%;
}
.chat-ergebnis {
    font-family: var(--schrift-mono);
    font-weight: 700;
    color: var(--chat-blau);
}
.hinweis { color: var(--text-gedaempft); font-size: 0.82rem; }

.formular-aktionen { display: flex; gap: 1rem; }

.fehlerbox {
    background: rgba(184, 70, 59, 0.15);
    border: 1px solid var(--score-rot);
    border-radius: 8px;
    padding: 1rem 1.2rem;
    margin-bottom: 1.2rem;
}
.fehlerbox ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }

@media (max-width: 640px) {
    .kategorien-kopf { display: none; }
    .kategorie-zeile { grid-template-columns: 1fr; gap: 0.3rem; margin-bottom: 0.8rem; }
}