/* ===== SoulKeeper - Start-Menü, Copyright, Highscore/Settings-Panels === */

.start-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.2rem;
    margin-top: 1.4rem;
}

.start-menu-link {
    font-size: clamp(0.5rem, calc(1.6 * var(--uw)), 0.7rem);
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 0.4rem 0.2rem;
    letter-spacing: 0.05em;
    transition: color 0.2s ease;
}

.start-menu-link:hover {
    color: var(--accent-bright);
}

.copyright {
    position: absolute;
    bottom: clamp(0.8rem, calc(3 * var(--uh)), 1.6rem);
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-size: clamp(0.5rem, calc(1.4 * var(--uw)), 0.65rem);
    letter-spacing: 0.03em;
    color: var(--text-dim);
    opacity: 0.7;
    z-index: 2;
    text-align: center;
    transition: opacity 0.8s ease;
}

.copyright.ausgeblendet {
    opacity: 0;
    pointer-events: none;
}

/* Versionsnummer - zweite Zeile innerhalb von .copyright (siehe
   index.html), deshalb kein eigenes Fade/Positionierung nötig. Kleiner/
   dezenter als der Copyright-Text selbst, reine Build-Kennzeichnung. */
.version-tag {
    display: inline-block;
    margin-top: 0.6em;
    font-size: 0.85em;
    opacity: 0.75;
}

/* ===== Panels (Highscore/Settings/Musikliste) =====
   Leben in #aktions-slot (siehe index.html), zusammen mit Press Start/
   Start-Menü. Der Slot selbst bekommt seinen margin-top (siehe
   .aktions-slot in css/himmel.css) - seine Höhe richtet sich NUR nach
   Press Start/Start-Menü, weil Panels absolut (top:0) darin positioniert
   sind und dadurch die Slot-Höhe nicht beeinflussen. Dadurch verschiebt
   das Öffnen/Schließen eines Panels .title-wrap nicht neu (kein
   Nachzentrieren), und die Panel-Oberkante fällt exakt mit der
   Press-Start-Oberkante zusammen. Kein Overlay, kein Abdunkeln - der
   Himmel/Titel bleibt ringsum sichtbar. */

/* visibility (nicht display:none): Press Start/Start-Menü bleiben damit
   im Fluss und halten #aktions-slot auf konstanter Höhe - sonst würde der
   Slot beim Öffnen eines (absolut positionierten, siehe .panel) Panels auf
   0 zusammenfallen und .title-wrap sich neu zentrieren. Für Nutzer/
   Screenreader/Tab-Reihenfolge ist visibility:hidden trotzdem "nicht da":
   unsichtbar, nicht klickbar, nicht fokussierbar. */
.btn-start.unsichtbar,
.start-menu.unsichtbar {
    visibility: hidden;
}

/* Eigener Scrollbalken statt des nativen Browser-Balkens (Punkt 4) - gilt
   für ALLE Panels (Highscore/Settings/Jukebox/Seelenpfad/Namenseingabe),
   nicht nur den Seelenpfad, sobald deren Inhalt überläuft (siehe
   overflow-y:auto unten). scrollbar-width/-color deckt Firefox ab,
   ::-webkit-scrollbar Chrome/Edge/Safari - beides nötig, keine Bibliothek. */
.panel,
.musik-liste {
    scrollbar-width: thin;
    scrollbar-color: var(--accent-bright) rgba(255, 255, 255, 0.08);
}

.panel::-webkit-scrollbar,
.musik-liste::-webkit-scrollbar {
    width: 8px;
}

.panel::-webkit-scrollbar-track,
.musik-liste::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.panel::-webkit-scrollbar-thumb,
.musik-liste::-webkit-scrollbar-thumb {
    background: var(--accent-bright);
    border-radius: 4px;
}

.panel {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);

    width: min(92%, calc(37.5 * var(--uw)));
    max-height: calc(56 * var(--uh));
    overflow-y: auto;
    background: rgba(8, 6, 14, 1);
    border: 2px solid var(--accent-bright);
    border-radius: 6px;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.75),
        0 0 35px rgba(0, 0, 0, 0.5),
        inset 0 0 25px rgba(0, 0, 0, 0.5);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.panel-titel {
    margin: 0;
    font-size: clamp(0.85rem, calc(3 * var(--uw)), 1.1rem);
    color: var(--accent-bright);
    text-align: center;
    text-shadow: 0 0 15px var(--accent);
}

.highscore-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: clamp(0.55rem, calc(1.8 * var(--uw)), 0.75rem);
}

.highscore-liste li {
    display: flex;
    gap: 0.8rem;
    color: var(--text);
    border-bottom: 1px dashed var(--panel-border);
    padding-bottom: 0.3rem;
}

.highscore-liste .rang {
    width: 2.2em;
    flex: none;
    color: var(--accent-bright);
    font-weight: bold;
}

/* Gleicher Buchstabenabstand für Name UND Punkte (vorher zwei
   unterschiedliche Lösungen: Name mit manuell eingefügten Leerzeichen,
   Punkte-Platzhalter ohne - jetzt einheitlich per letter-spacing, ohne
   Sonderbehandlung im JS). */
.highscore-liste .name,
.highscore-liste .punkte {
    letter-spacing: 0.15em;
}

/* Keine feste width mehr (ch-Schätzung war für einzelne Buchstaben in der
   Pixel-Schrift knapp daneben, siehe Bugfix-Historie) - stattdessen füllt
   js/menues.js: renderHighscores() den Namen IMMER auf NAME_STELLEN (12)
   Zeichen auf (unsichtbar mit geschütztem Leerzeichen statt "_", siehe
   dort), wodurch der reale Inhalt selbst schon für jede Zeile exakt
   gleich breit ist - flex:none übernimmt einfach dessen natürliche
   Breite, ganz ohne Schätzwert. Das ist zugleich das "letzte mögliche
   Zeichen" (Vorgabe), an dem die Schwierigkeit-Spalte gleich zentriert. */
.highscore-liste .name {
    flex: none;
    white-space: nowrap;
    text-align: left;
    color: var(--text-dim);
}

/* Schwierigkeit je Eintrag (Normal/Schwer/Extrem, siehe js/schwierigkeit.js:
   anzeigeName) - nimmt sich den gesamten Rest zwischen der Namens-Spalte
   und der Punkte-Spalte und zentriert den Text darin (Vorgabe: "mittig
   zwischen dem letzten möglichen Zeichen beim Name und der ersten Zahl
   beim Score"). flex-shrink 0 (statt des kürzeren "flex:1", das implizit
   shrink:1 setzt) verhindert, dass die Spalte unter ihre Textbreite
   schrumpft - genau das hatte "Schwer"/"Extrem" zuvor in die Punkte-
   Spalte hineinlaufen lassen (siehe Bugfix-Historie). white-space:nowrap
   bleibt als zusätzliche Absicherung gegen Umbruch. */
.highscore-liste .schwierigkeit {
    flex: 1 0 auto;
    white-space: nowrap;
    text-align: center;
    color: var(--text-dim);
}

.highscore-liste .punkte {
    flex: none;
    text-align: right;
    color: var(--text-dim);
}

.settings-zeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: clamp(0.6rem, calc(1.8 * var(--uw)), 0.75rem);
    color: var(--text);
}

.settings-label {
    flex: none;
}

/* Beschreibungsbox zur Schwierigkeit - sitzt direkt unter der Auswahlzeile,
   Optik an .highscore-liste/.settings-zeile angelehnt (gedämpfter
   Panel-Rahmen) statt eines neuen Musters. */
.schwierigkeit-beschreibung {
    margin: -0.4rem 0 0;
    padding: 0.6rem 0.8rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    font-size: clamp(0.55rem, calc(1.6 * var(--uw)), 0.7rem);
    line-height: 1.6;
    color: var(--text-dim);
}

/* Statistik-An/Aus-Schalter (siehe js/statistik.js) - gleiches
   Zwei-Zustands-Button-Muster wie .schwierigkeit-swatch
   (css/level1-gameplay.css), hier aber nur zwei feste Optionen statt
   drei Schwierigkeitsgrade, deshalb ein eigener, kleiner Klassenblock
   statt jener Datei eine settings-fremde Regel hinzuzufügen. */
.statistik-switch {
    display: flex;
    gap: 0.4rem;
}

.statistik-swatch {
    font-size: 0.55rem;
    padding: 0.4rem 0.7rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    color: var(--text-dim);
    cursor: pointer;
}

.statistik-swatch:hover {
    color: var(--text);
    border-color: var(--accent-bright);
}

/* Deutlicherer aktiver Zustand als beim schlichten Rand-/Textfarbwechsel
   von .schwierigkeit-swatch (Rückmeldung: dort kaum als "an"/"aus"
   erkennbar) - zusätzlich echte Hintergrundfüllung + Glow, damit der
   gewählte Zustand auf einen Blick sichtbar ist. */
.statistik-swatch[aria-pressed="true"] {
    background: var(--accent-bright);
    border-color: var(--accent-bright);
    color: #100a1c;
    font-weight: bold;
    box-shadow: 0 0 12px var(--accent);
}

/* Highscore-Zurücksetzen-Knopf (öffnet die PIN-Box unten) - gleiches
   Zwei-Zustands-Optik-Muster wie .statistik-swatch, hier aber nur ein
   einzelner Knopf statt eines An/Aus-Paars. */
.settings-reset-knopf {
    font-size: 0.55rem;
    padding: 0.4rem 0.7rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    color: var(--text-dim);
    cursor: pointer;
}

.settings-reset-knopf:hover {
    color: var(--accent-bright);
    border-color: var(--accent-bright);
}

/* PIN-Abfrage zum Highscore-Zurücksetzen (siehe js/menues.js:
   initHighscoreReset) - Optik an .schwierigkeit-beschreibung angelehnt
   (gedämpfter Panel-Rahmen), inline im Settings-Panel statt eines
   nativen confirm()/prompt(). */
.highscore-reset-box {
    margin-top: -0.4rem;
    padding: 0.7rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
}

.highscore-reset-hinweis {
    margin: 0;
    font-size: clamp(0.5rem, calc(1.5 * var(--uw)), 0.65rem);
    line-height: 1.6;
    color: var(--text-dim);
}

.highscore-reset-hinweis--fehler {
    color: #ff6b6b;
}

.highscore-reset-hinweis--erfolg {
    color: var(--accent-bright);
}

.highscore-reset-eingabe-zeile {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.highscore-reset-eingabe {
    flex: 1;
    min-width: 5em;
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    padding: 0.5rem 0.6rem;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    color: var(--text);
    text-align: center;
}

.highscore-reset-eingabe:focus {
    outline: none;
    border-color: var(--accent-bright);
}

/* Kurzes Wackeln bei falscher PIN (siehe js/menues.js:
   pruefeHighscoreResetPin) - eigenständige, einfache Animation statt der
   thematisch anders gelagerten "67"-Verzerrung aus css/namenseingabe.css. */
.highscore-reset-box--wackeln {
    animation: highscore-reset-wackeln 0.4s ease-in-out;
}

@keyframes highscore-reset-wackeln {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-6px); }
    40%      { transform: translateX(6px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
    .highscore-reset-box--wackeln {
        animation: none;
    }
}

.btn-panel-schliessen {
    font-size: clamp(0.5rem, calc(1.8 * var(--uw)), 0.68rem);
    padding: 0.7rem 1rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--panel-border);
    color: var(--text);
    cursor: pointer;
    border-radius: 4px;
    text-align: center;
}

.btn-panel-schliessen:hover {
    border-color: var(--accent-bright);
    color: var(--accent-bright);
}

.musik-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: calc(50 * var(--uh));
    overflow-y: auto;
}

.musik-liste li button {
    width: 100%;
    text-align: left;
    font-size: clamp(0.55rem, calc(1.7 * var(--uw)), 0.7rem);
    padding: 0.5rem 0.7rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--panel-border);
    color: var(--text);
    cursor: pointer;
    border-radius: 4px;
}

.musik-liste li button:hover,
.musik-liste li button.aktiv {
    border-color: var(--accent-bright);
    color: var(--accent-bright);
}

/* Zusätzlich zu Hover: bleibt auch ohne Maus drüber deutlich als "läuft
   gerade" erkennbar (Glow + Abspiel-Symbol davor). */
.musik-liste li button.aktiv {
    box-shadow: 0 0 12px var(--accent);
}

.musik-liste li button.aktiv::before {
    content: '▶ ';
}

.musik-liste-leer {
    font-size: clamp(0.6rem, calc(1.8 * var(--uw)), 0.75rem);
    color: var(--text-dim);
    text-align: center;
    margin: 0;
}

/* ===== Spielwerte-Panel =====
   Etwas breiter als der normale .panel-Standard (min(92%,480px)) - bei
   mehrspaltigen Tabellen (bis zu 8 Spalten bei "Bosse") bleibt dadurch auf
   Desktop-Breiten mehr ohne horizontales Scrollen lesbar. Auf schmalen
   Screens greift weiterhin die 94%-Grenze plus horizontales Scrollen pro
   Tabelle (siehe .spielwerte-tabelle-wrap unten) - nichts wird abgeschnitten
   (Punkt 6). Vertikales Scrollen kommt bereits vom allgemeinen .panel
   (max-height:56vh; overflow-y:auto, siehe oben) inkl. der dort bereits
   generalisierten Halloween-Scrollbar. Vom js/spielwerte.js gerenderter
   Inhalt, keine feste Struktur im Markup (siehe index.html:
   #spielwerte-inhalt). */
#spielwerte-panel {
    width: min(94%, calc(50 * var(--uw)));
}

.spielwerte-inhalt {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.spielwerte-abschnitt {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.spielwerte-abschnitt-titel {
    margin: 0;
    font-size: 0.6rem;
    letter-spacing: 0.03em;
    color: var(--accent-bright);
    text-shadow: 0 0 8px var(--accent);
}

/* Eigener horizontaler Scroll-Container PRO Tabelle (statt nur für das
   ganze Panel) - jede Tabelle bleibt dadurch für sich lesbar/scrollbar,
   auch wenn andere Abschnitte schmaler sind. */
.spielwerte-tabelle-wrap {
    overflow-x: auto;
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.03);
}

.spielwerte-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: clamp(0.55rem, calc(1.8 * var(--uw)), 0.75rem);
    color: var(--text);
}

.spielwerte-tabelle th,
.spielwerte-tabelle td {
    padding: 0.35rem 0.4rem;
    text-align: center;
    white-space: nowrap;
    border-bottom: 1px dashed var(--panel-border);
}

.spielwerte-tabelle th {
    color: var(--accent-bright);
    background: rgba(255, 255, 255, 0.05);
}

.spielwerte-tabelle tbody tr:last-child td {
    border-bottom: none;
}