/*
 * Styles fuer das Schachbrett (web/schach.js) UND den Konami-Effekt (app.js).
 *
 * WICHTIG: Diese muessen als EXTERNE Datei kommen. Die Seite laeuft mit CSP
 * `style-src 'self'` (ohne 'unsafe-inline') – injizierte <style>-Bloecke werden
 * blockiert, das Overlay/Brett/der Effekt blieben dann unsichtbar (belegter
 * Fehlfall 11.08.2026: "Schach ist offen ... aber ich sehe nix"). Dynamische
 * Einzelwerte (Feldgroesse, Herz-Position) setzt der Code weiter per
 * element.style (CSSOM ist von der CSP nicht betroffen), Klassen/Keyframes hier.
 */

/* ------------------------------ Schachbrett ------------------------------- */
.schachOverlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; background: rgba(10, 10, 16, .72); padding: 12px; }
.schachKarte { background: var(--card, #1b1b22); color: var(--text, #e8e8ef); border-radius: var(--radius-lg); box-shadow: 0 18px 60px rgba(0, 0, 0, .5); max-width: 560px; width: 100%; max-height: 96vh; overflow: auto; padding: 16px; box-sizing: border-box; }
.schachKopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.schachKopf h2 { margin: 0; font-size: 1.1rem; }
.schachStatus { font-size: .92rem; opacity: .9; min-height: 1.3em; margin: 6px 2px; }
.schachBrett { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); width: 100%; border-radius: var(--radius); overflow: hidden; border: 2px solid rgba(168, 157, 221, .35); touch-action: manipulation; }
.schachFeld { position: relative; display: flex; align-items: center; justify-content: center; user-select: none; cursor: pointer; min-height: 0; }
/*
 * ORQENIO-LILA (Nutzerwunsch 15.08.2026, mit Screenshot der
 * chess.com-Partieanalyse: „gestalte schach wie im screenshot inkl aller nur
 * in orqenio lila (aber leicht)").
 *
 * „Leicht" ist die eigentliche Vorgabe: Das dunkle Feld ist ein weiches
 * Flieder, kein sattes Violett. Ein kräftiges Lila unter den Figuren
 * schluckt den Kontrast – und der Akzent (--accent, #5b4bc4) wird für
 * Auswahl und Zugziele gebraucht, wo er auffallen SOLL. Zwei kräftige Lila
 * nebeneinander sind eins zu viel.
 *
 * Feste Werte statt der Design-Token: Das Brett muss in hell UND dunkel
 * gleich aussehen (ein Schachbrett dreht seine Farben nicht mit dem Theme),
 * und die Figuren sind auf genau diese beiden Untergründe abgestimmt.
 */
.schachHell { background: #efedfb; }
.schachDunkel { background: #a89ddd; }
/* Koordinaten (a–h, 1–8) IN den Randfeldern – nicht in einem Rahmen daneben:
   Das Brett wird per JS quadratisch gehalten (passeGroesseAn), ein Rahmen
   haette diese Rechnung verschoben. Absolut positioniert, damit sie die
   Figur in der Feldmitte nicht verschieben, und ohne Zeigerereignisse, damit
   ein Tipp auf die Marke der ZUG ist und nicht ins Leere geht.
   Groesse in em: Sie folgt der Schriftgroesse des Bretts und damit dessen
   Groesse – feste Pixel waeren auf dem Telefon zu gross. */
.schachKoord {
    /* Die Groesse kommt aus der Schriftgroesse des BRETTS: passeGroesseAn()
       setzt sie proportional zur Feldkante. Mit einem festen Pixelwert waere
       die Marke auf dem Telefon zu gross und auf dem Bildschirm verloren. */
    position: absolute; font-size: 1em; font-weight: 700; line-height: 1;
    pointer-events: none; user-select: none;
    /* Auf den Randfeldern der Grundreihe stehen Figuren; ohne den Saum
       verschwindet die Marke in der Silhouette. */
    text-shadow: 0 0 2px rgba(0, 0, 0, .35);
}
.schachKoordDatei { right: 4%; bottom: 2%; }
.schachKoordRang { left: 4%; top: 2%; }
.schachKoordAufHell { color: #8578c9; }
.schachKoordAufDunkel { color: #f3f1fd; }
/* FontAwesome-Figuren (echte FA-Pfade via OrqenioIcons). Solide Glyphen bleiben
   OHNE Kontur (die verklumpt die feinen Formen); Kontrast kommt aus einem
   dezenten Halo (Drop-Shadow): weiss ein dunkler, schwarz ein heller Saum. */
.schachFeld .schachFigur { height: 78%; width: auto; max-width: 86%; display: block; }
.schachFeld svg.schachFigur path { fill: currentColor; }
.schachWeiss { color: #fbfaff; filter: drop-shadow(0 0 1px #17161e) drop-shadow(0 0 1px #17161e) drop-shadow(0 1px 1px rgba(0, 0, 0, .45)); }
.schachSchwarz { color: #322b52; filter: drop-shadow(0 0 .9px #d7d3c7) drop-shadow(0 1px 1px rgba(0, 0, 0, .4)); }
.schachBuchstabe { display: inline-flex; align-items: center; justify-content: center; height: 78%; font-weight: 800; font-size: 22px; }
.schachUmwahl button svg.schachFigur { height: 40px; }
.schachWahl { outline: 3px solid #5b4bc4; outline-offset: -3px; }
.schachZiel:after { content: ''; position: absolute; width: 30%; height: 30%; border-radius: 50%; background: rgba(91, 75, 196, .5); }
.schachSchlag:after { content: ''; position: absolute; top: 6%; right: 6%; bottom: 6%; left: 6%; border-radius: 50%; border: 4px solid rgba(220, 60, 60, .55); }
.schachSchach { box-shadow: inset 0 0 0 4px rgba(220, 60, 60, .75); }
.schachLeiste { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 2px 2px; }
.schachLeiste label { font-size: .88rem; opacity: .85; }
/* Das Schachbrett ist bewusst eine eigene, dunkle Welt (eigene Palette, eigene
 * Karte) – deshalb hier eigene Farben. Der RADIUS folgt trotzdem dem globalen
 * Token: Eine abweichende Rundung ist keine Gestaltungsabsicht, sondern ein
 * Versehen von damals. */
.schachLeiste select, .schachBtn { background: var(--input, #2a2a34); color: inherit; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius-control); padding: 7px 12px; font: inherit; cursor: pointer; }
.schachBtn.primaer { background: #5b4bc4; border-color: #5b4bc4; color: #fff; }
.schachInfo { display: flex; gap: 14px; flex-wrap: wrap; font-size: .86rem; opacity: .88; margin: 8px 2px; }
.schachUmwahl { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }

/* --------------------------- Lernmodus (Analyse) -------------------------- */
/*
 * Bewertungsleiste (Nutzerwunsch 15.08.2026, Screenshot der
 * chess.com-Partieanalyse): heller Anteil von links = Vorteil fuer Weiss, der
 * Wert steht LINKS in der Leiste statt in der Mitte. In der Mitte lag er auf
 * der Kante zwischen hell und dunkel und musste eine eigene Pille tragen, um
 * ueberhaupt lesbar zu sein - links liegt er immer auf demselben Grund.
 */
.schachEval {
    position: relative; height: 26px; border-radius: var(--radius-control); overflow: hidden;
    margin: 8px 2px 10px; background: #3a3550; border: 1px solid rgba(168, 157, 221, .3);
}
.schachEvalFill {
    position: absolute; left: 0; top: 0; height: 100%; width: 50%;
    background: linear-gradient(90deg, #ffffff, #f1eefc); transition: width .35s ease;
}
.schachEvalWert {
    position: absolute; top: 50%; left: 6px; transform: translateY(-50%);
    font-size: .78rem; font-weight: 700; color: #2c2647; white-space: nowrap;
    /* Eigene helle Pille statt blossem Textschatten: Steht Schwarz vorn, ist
       der helle Anteil links fast weg – der Wert lag dann auf dem dunklen
       Grund und war nicht mehr zu lesen (im Probelauf bei −5,50 gesehen). */
    background: rgba(255, 255, 255, .92); padding: 2px 8px; border-radius: var(--radius-control);
}

/*
 * Die Zug-Rueckmeldung als SPRECHBLASE - der auffaelligste Teil des
 * Screenshots: helle Karte, rundes Zeichen links, Stellungswert rechts.
 * Sie steht UEBER dem Brett, weil sie sich auf den eben gespielten Zug
 * bezieht und der Blick von dort kommt.
 */
.schachFeedback {
    display: flex; align-items: center; gap: 10px;
    margin: 2px 2px 10px; padding: 10px 12px; border-radius: var(--radius-lg);
    font-size: .92rem; line-height: 1.35;
    background: #f7f6fd; color: #2c2647;
    border: 1px solid rgba(168, 157, 221, .5);
    box-shadow: 0 6px 18px rgba(20, 16, 45, .28);
}
.schachFbZeichen {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .84rem; color: #fff; background: #8578c9;
}
.schachFbText { flex: 1 1 auto; min-width: 0; }
.schachFbKopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px; }
.schachFbWert {
    flex: 0 0 auto; font-weight: 700; font-size: .82rem; color: #2c2647;
    background: rgba(133, 120, 201, .18); border-radius: var(--radius-control); padding: 3px 8px;
}
.schachMarke { font-weight: 700; }
.schachZugName { font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace; font-weight: 700; }
.schachBesser { opacity: .75; font-size: .86rem; margin-top: 2px; }
/* Die Farbe steckt im Zeichen, nicht mehr in einem Rand: Auf heller Karte
   traegt ein runder Punkt die Einordnung deutlicher als ein Strich links. */
.schachFb-bester .schachFbZeichen { background: #2f9e5b; }
.schachFb-gut .schachFbZeichen { background: #4a8fd4; }
.schachFb-ungenau .schachFbZeichen { background: #d3a326; }
.schachFb-fehler .schachFbZeichen { background: #d97a2b; }
.schachFb-patzer .schachFbZeichen { background: #cf4634; }
.schachFb-fazit { background: #f2effd; }
.schachFb-fazit .schachFbZeichen { background: #5b4bc4; }

/*
 * Zugleiste unter dem Brett (Screenshot: Pfeile aussen, Zuege dazwischen).
 * Sie scrollt waagerecht statt umzubrechen - eine Partie hat schnell
 * sechzig Halbzuege, und eine wachsende Liste wuerde das Brett nach oben
 * schieben, waehrend man spielt.
 */
.schachZugleiste { display: flex; align-items: center; gap: 4px; margin: 10px 2px 4px; }
.schachZugliste {
    flex: 1 1 auto; display: flex; align-items: center; gap: 2px;
    overflow-x: auto; overflow-y: hidden; padding: 2px 0;
    /* Ohne sichtbare Rollleiste: Geblaettert wird ueber die Pfeile daneben,
       die Tastatur oder einen Klick auf den Zug. Ein Balken unter der Leiste
       sah nach einem Darstellungsfehler aus (im Probelauf gesehen). */
    scrollbar-width: none; -ms-overflow-style: none; white-space: nowrap;
}
.schachZugliste::-webkit-scrollbar { height: 0; width: 0; }
.schachZugNr { opacity: .55; font-size: .82rem; margin-left: 6px; }
.schachZugNr:first-child { margin-left: 0; }
.schachZug {
    background: none; border: 0; color: inherit; font: inherit; font-size: .86rem;
    font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
    padding: 3px 6px; border-radius: var(--radius-control); cursor: pointer; white-space: nowrap;
}
.schachZug:hover { background: rgba(168, 157, 221, .18); }
.schachZugAktiv { background: rgba(91, 75, 196, .35); font-weight: 700; }
.schachZugMarke { font-weight: 800; margin-right: 3px; }
.schachZug-ungenau .schachZugMarke { color: #ecc24f; }
.schachZug-fehler .schachZugMarke { color: #f0954c; }
.schachZug-patzer .schachZugMarke { color: #f26a57; }
.schachZugLeer { opacity: .5; font-size: .84rem; }
.schachNav {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: var(--radius-control); cursor: pointer;
    background: var(--input, #2a2a34); color: inherit; font-size: 1.1rem; line-height: 1;
    border: 1px solid rgba(168, 157, 221, .3);
}
.schachNav:hover { background: rgba(168, 157, 221, .22); }
/* Beim Blaettern wird nicht gezogen - das Brett sagt es auch optisch. */
.schachBrettRueckblick { opacity: .78; }
.schachRueckblick { font-size: .84rem; opacity: .85; margin: 2px 2px 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.schachBtn.schachMini { padding: 4px 9px; font-size: .82rem; }
.schachLern { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.schachLern input { margin: 0; }
.schachUmwahl button { width: 52px; height: 52px; background: var(--input, #2a2a34); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius-control); cursor: pointer; padding: 4px; }

/* --------------------------- Konami-Spektakel ----------------------------- */
.konamiHud { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 10000; display: flex; gap: 3px; padding: 7px 11px; background: rgba(20, 10, 30, .85); border-radius: var(--radius-lg); box-shadow: 0 8px 30px rgba(0, 0, 0, .5); pointer-events: none; }
.konamiHud span { display: inline-flex; opacity: 0; transform: scale(.3); animation: khPop .45s forwards; }
.konamiHud svg { width: 24px; height: 22px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
@keyframes khPop { 60% { transform: scale(1.35); } 100% { opacity: 1; transform: scale(1); } }
.konamiFall { position: fixed; z-index: 9999; top: -44px; pointer-events: none; }
@keyframes khFall { 0% { opacity: 0; transform: translateY(-40px) scale(.6) rotate(0deg); } 8% { opacity: 1; } 100% { opacity: 0; transform: translateY(96vh) scale(1.1) rotate(360deg); } }
.konamiFlash { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9998; pointer-events: none; background: radial-gradient(circle, rgba(255, 80, 140, .5), rgba(255, 80, 140, 0) 70%); animation: khFlash .85s forwards; }
@keyframes khFlash { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
.konamiBanner { position: fixed; top: 46px; left: 50%; transform: translateX(-50%); z-index: 10001; background: linear-gradient(90deg, #ff3d77, #7a5cff); color: #fff; font-weight: 700; padding: 8px 16px; border-radius: var(--radius); box-shadow: 0 8px 30px rgba(0, 0, 0, .5); pointer-events: none; white-space: nowrap; display: flex; align-items: center; gap: 8px; animation: khBanner 3.4s forwards; }
.konamiBanner svg { width: 20px; height: 18px; }
@keyframes khBanner { 0% { opacity: 0; transform: translateX(-50%) translateY(-10px); } 10% { opacity: 1; transform: translateX(-50%) translateY(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-8px); } }
.konamiRuettel { animation: khRuettel .5s; }
@keyframes khRuettel { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-6px, 3px); } 40% { transform: translate(6px, -3px); } 60% { transform: translate(-4px, -2px); } 80% { transform: translate(4px, 2px); } }

/* --------------------------- Prompt-Training ------------------------------ */
/* Nutzt die generische Overlay-/Karten-/Knopf-Huelle (.schachOverlay/.schachKarte/.schachBtn). */
.ptZielBox { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--radius); padding: 10px 12px; margin: 8px 0; }
.ptLabel { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; opacity: .7; margin: 8px 2px 4px; }
.ptZiel { font-size: 1rem; font-weight: 600; line-height: 1.35; }
.ptEingabe { width: 100%; box-sizing: border-box; background: var(--input, #2a2a34); color: inherit; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius-control); padding: 10px; font: inherit; resize: vertical; }
.ptHinweis { font-size: .85rem; opacity: .8; }
.ptAntwort { white-space: pre-wrap; background: rgba(90, 140, 255, .08); border: 1px solid rgba(90, 140, 255, .25); border-radius: var(--radius-control); padding: 10px 12px; margin-top: 8px; font-size: .95rem; }
.ptUrteil { background: rgba(60, 200, 120, .1); border: 1px solid rgba(60, 200, 120, .3); border-radius: var(--radius-control); padding: 10px 12px; margin-top: 8px; font-size: .92rem; line-height: 1.4; }

/* ----------------------------- Adventure ---------------------------------- */
/* Nutzt die generische Overlay-/Karten-/Knopf-Huelle (.schachOverlay/.schachKarte/.schachBtn). */
.advKarte { max-width: 640px; }
.advInfo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 6px 0 10px; font-size: .9rem; }
.advLeben { display: inline-flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.advHerzSvg { width: 18px; height: 16px; vertical-align: middle; }
.advLeben .advHerzLeer .advHerzSvg path { fill: rgba(255, 255, 255, .12); stroke: rgba(255, 255, 255, .25); }
.advIntro { line-height: 1.5; opacity: .92; }
.advLebenWahl { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.advSzene { white-space: pre-wrap; line-height: 1.55; font-size: 1.02rem; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--radius); padding: 14px 16px; margin: 8px 0; }
.advOptionen { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.advOption { text-align: left; white-space: normal; line-height: 1.35; padding: 11px 14px; }
.advOption.gewaehlt { border-color: #7a5cff; box-shadow: 0 0 0 2px rgba(122, 92, 255, .45) inset; }
.advOption:disabled { opacity: .55; cursor: default; }
/* „Der Spielleiter denkt nach": unbestimmter Fortschrittsbalken (Animation
 * signalisiert, dass gerade wirklich etwas passiert). */
.advDenken { margin: 12px 2px 2px; }
.advDenkBar { position: relative; height: 6px; border-radius: 4px; overflow: hidden; background: rgba(255, 255, 255, .08); }
.advDenkBar span { position: absolute; top: 0; height: 100%; width: 40%; border-radius: 4px; background: linear-gradient(90deg, #ff3d77, #7a5cff); animation: advDenkLauf 1.1s ease-in-out infinite; }
@keyframes advDenkLauf { 0% { left: -45%; } 100% { left: 105%; } }
.advDenkText { margin-top: 7px; font-size: .88rem; opacity: .8; text-align: center; }
.advHinweis { font-size: .85rem; opacity: .8; min-height: 1.1em; margin-top: 4px; }
.advEnde { text-align: center; }
.advEndeTitel { font-size: 1.5rem; margin: 6px 0; background: linear-gradient(90deg, #ff3d77, #7a5cff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.advEndeText { font-size: 1.05rem; margin-bottom: 12px; }
.advEintrag { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--radius); padding: 12px 14px; margin: 10px auto; max-width: 460px; }
.advLabel { display: block; font-size: .82rem; opacity: .8; margin-bottom: 8px; }
.advEintragRow { display: flex; gap: 8px; }
.advNameInput { flex: 1; box-sizing: border-box; background: var(--input, #2a2a34); color: inherit; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius-control); padding: 10px; font: inherit; }
.advNochmal { margin: 12px 0; }
.advListe { text-align: left; margin: 14px auto 0; max-width: 460px; }
.advListeKopf { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; opacity: .7; margin-bottom: 6px; }
.advListeOl { list-style: decimal inside; padding: 0; margin: 0; }
.advListeOl li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: var(--radius-control); }
.advListeOl li:nth-child(odd) { background: rgba(255, 255, 255, .04); }
.advListeName { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.advListePunkte { opacity: .85; white-space: nowrap; }
.advListeLeer { opacity: .7; }
/* Tipp („Anzeigen" im Screenshot): Start- und Zielfeld des besten Zuges
   markiert – ausgefuehrt wird er NICHT. Ein Ring statt einer Fuellung, damit
   die Figur darunter sichtbar bleibt. */
.schachTipp { box-shadow: inset 0 0 0 4px rgba(91, 75, 196, .85); }
.schachHilfen { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 2px 0; }