/* CSS bleibt unverändert */
body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #f9f9f9;
    color: #333;
    max-width: 540px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}

h1 {
    font-size: 2rem;
    margin-bottom: 10px;
}

p {
    font-size: 1rem;
    margin-bottom: 20px;
}

#grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px; 
    max-width: 500px;
    margin: 0 auto;
}

.word {
    background-color: #f2f2f2;
    min-height: 75px; 
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.90rem;
    font-weight: bold;
    text-transform: uppercase;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 5px;
    box-sizing: border-box;
    hyphens: auto;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    text-align: center;
}

.word:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.selected {
    background: #c0c0c0;
    color: #ffffff;
    box-shadow: none;
}

.green { background-color: #e2d2ab; color: #000; }
.yellow { background-color: #aad4de; color: #000; }
.blue { background-color: #a7e8ab; color: #000; } 
.purple { background-color: #e1bfea; color: #000; } 


#message {
    margin-top: 20px;
    font-weight: bold;
    text-align: center;
    min-height: 1.2em;
}

#bottomBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

#livesContainer {
    /* 1. HORIZONTALE STABILITÄT: Fixiert die Breite, sodass der Platz für 4 Punkte immer reserviert ist. */
    width: 100px; /* Dieser Wert ist ein Schätzwert; passen Sie ihn an die Breite von 4 Punkten an. */
    max-width: 100px; 
    
    /* 2. VERTIKALE STABILITÄT: Reserviert die Höhe für die Punkte. */
    min-height: 25px; 
    
    /* 3. Ausrichtung der Punkte im Container */
    display: flex;
    align-items: center; 
    justify-content: flex-start; /* Hält die Punkte links */
    gap: 5px; 
}

#dotsContainer {
    display: flex;
    gap: 5px;
    height: 100%;
}

.life-dot {
    width: 14px;
    height: 14px;
    background-color: #ccc;
    border-radius: 50%;
}

/* style.css */

/* 1. Gemeinsamer Stil für beide Buttons */
.share-action-btn {
    padding: 10px 20px;
    border-radius: 20px;
    color: white;
    font-size: 1.1em;
    font-weight: bold;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: background-color 0.1s;
    margin: 5px; /* Fügt einen kleinen Abstand hinzu */
}

/* 2. Spezifische Farbe für den Teilen Button (Hauptfarbe) */
#shareButton {
    background-color: #364a75; /* Blau */
}

#shareButton:hover {
    background-color: #2a3c5c;
}

/* 3. Spezifische Farbe für den Kopieren Button (Unterscheidungsfarbe) */
#copyButton {
    background-color: #d57a33; /* Grün */
     margin-left: auto;

}

#copyButton:hover {
    background-color: #8e430e; /* Dunkleres Grün beim Hover */
}

#shareContainer {
    /* 1. Flexbox aktivieren und vertikale Zentrierung */
    display: flex;
    align-items: center; 
    
    /* 2. Zentriert die Elemente horizontal (Teilen & Kopieren) */
    justify-content: center; 
    
    /* Wichtig: Auf voller Breite arbeiten */
    width: 100%;
}

/* Dies drückt das Status-Feld nach links und hält den Teilen-Button relativ in der Mitte */
#copyStatus {
    margin-right: auto;
}


#checkBtn {
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    border: 2px solid #333;
    background-color: #f2f2f2;
    border-radius: 30px;
    transition: all 0.2s ease;
    margin: 0;
}

#checkBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: #ccc;
}

#checkBtn:not(:disabled):hover {
    background-color: #e0e0e0;
}

.solved-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 75px; 
    border-radius: 8px;
    padding: 15px;
    box-sizing: border-box;
    grid-column: 1 / -1; 
}

.solved-title {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.1rem;
}

.solved-words {
    font-size: 0.95rem;
    text-transform: uppercase;
    margin-top: 5px;
}

/* NEUES CSS für die Statistik-Anzeige */
#statsContainer {
    margin-top: 20px;
    font-size: 1rem;
    text-align: center;
}

/* NEUES CSS FÜR DEN HINWEIS-BUTTON */
#hintBtn {
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    border: 2px solid #555; /* Etwas dunklerer Rand als der Check-Button */
    background-color: #ebd939a4;
    border-radius: 30px;
    transition: all 0.2s ease;
    margin: 0 10px 0 0; /* Etwas Abstand zum Prüfen-Button */
}

#hintBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: #ccc;
}

#hintBtn:not(:disabled):hover {
    background-color: #c0c0c0;
}

/* Anpassung der BottomBar, damit die Buttons besser nebeneinander passen */
#bottomBar {
    display: flex;
    align-items: center; 
    width: 100%; 
    
    /* WICHTIG: Erlaubt den Elementen, sich auszudehnen */
    justify-content: space-between; 
}

/* Anpassung, damit der Platz besser genutzt wird */
#bottomBar button {
    flex-shrink: 0; 
    margin: 0; 
}

#hintBtn {
    margin-right: 10px; /* Nur Abstand zwischen den Buttons */
}

/* ANIMATION FÜR FALSCHE ANTWORT (SCHÜTTELN) */
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.shake {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}


/* NEUE ANIMATION FÜR RICHTIGE ANTWORT (PLATZEN/VERSCHWINDEN) */
@keyframes pop-and-fade {
    0% { transform: scale(1); opacity: 1; }
    99% { transform: scale(1.05); opacity: 1; } /* Kurz größer werden */
    100% { transform: scale(0); opacity: 0; }  /* Platzen und verschwinden */
}

.word.correct-pop {
    /* WICHTIG: Dauer hier (z.B. 0.8s) an den JS-Timeout anpassen */
    animation: pop-and-fade 0.8s forwards; 
    transition: none; /* Deaktiviert andere Übergänge während der Animation */
}
/* NEUE ANIMATION FÜR RICHTIGE ANTWORT (BERSTEN/KONFETTI-EINDRUCK) */
@keyframes burst-effect {
    0% { 
        transform: translate(0, 0) scale(1) rotate(0deg); 
        opacity: 1; 
    }
    90% { 
        /* Kurze Expansion wie gewünscht, aber zusätzliche schnelle Rotation und Verschiebung */
        transform: translate(10px, -10px) scale(1.05) rotate(5deg); 
        opacity: 1; 
    }
    100% { 
        /* Sofortiges Verschwinden mit schneller Bewegung und Rotation */
        transform: translate(50px, -50px) scale(0) rotate(-45deg); 
        opacity: 0; 
        /* Optional: Ein leichter Unschärfe-Effekt im letzten Moment */
        filter: blur(4px); 
    }
}

.word.correct-pop {
    /* Die Geschwindigkeit muss sehr hoch sein, um den "Konfetti"-Eindruck zu unterstützen */
    animation: burst-effect 0.4s ease-out forwards; 
    transition: none; 
}

.word.hidden-solved {
    opacity: 0;
    /* Schnelles Ausblenden */
    transition: opacity 0.1s ease-out; 
}        

/* NEUES CSS FÜR SANFTES AUSBLENDEN */
.word.fade-out {
    opacity: 0 !important; /* Wichtig, um die 'selected' Opazität zu überschreiben */
    transform: scale(0); /* Optional: Lässt die Wörter etwas schrumpfen */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out; 
}

/* CSS FÜR NAVIGATION UND SCREENS */

body {
    /* Fügt unten Platz für die fixierte Navigationsleiste hinzu */
    padding-bottom: 70px; 
}

/* Container für verschiedene Ansichten */
.screen {
    width: 100%;
    /* Stellt sicher, dass nur der aktive Screen angezeigt wird */
    transition: opacity 0.3s ease-in-out; 
}

/* NEU/ANGEPASST: Stellt sicher, dass die 5 Elemente gleichmäßig verteilt sind */
#navBar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: #ffffff;
    border-top: 1px solid #ddd;
    display: flex;
    justify-content: space-between; /* Verteilt die Elemente gleichmäßig */
    align-items: center;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05);
    z-index: 100;
}

/* PASST DEN STYLE FÜR ALLE NAVIGATIONSELEMENTE AN */
.nav-item {
    background: none;
    border: none;
    padding: 10px 5px; /* Weniger Padding, um 5 Elemente unterzubringen */
    font-size: 1rem;
    cursor: pointer;
    color: #555;
    font-weight: normal;
    transition: color 0.2s, background-color 0.2s;
    flex-grow: 1; /* WICHTIG: Stellt sicher, dass alle 5 Elemente gleich breit sind */
    height: 100%; /* Füllt die Höhe der Navigationsleiste aus */
}

/* Stil für die Pfeile */
.nav-arrow {
    font-size: 1em; 
    padding: 0; 
}

.nav-arrow:disabled {
    color: #ccc;
    cursor: default;
}

/* Stil für die Datumsanzeige (im Home-Button) */
#homeBtn {
    font-size: 0.95rem; 
    font-weight: bold;
    color: #364a75; 
    /* ENTFERNT: border-bottom: 3px solid transparent; */ 
    
    /* Füge die transparente Linie HIER manuell hinzu, falls der Button nicht ausgewählt ist,
       damit der Platz für die blaue Linie reserviert wird und die Höhe stabil bleibt */
    border-bottom: 3px solid transparent; 
}
/* Die blaue Markierung bleibt erhalten, da .nav-item.selected nicht geändert wird */
.nav-item.selected {
    color: #364a75; 
    font-weight: bold;
    border-bottom: 3px solid #364a75;
}

/* Höhere Spezifität für den ausgewählten Home-Button, um Überschreibung zu verhindern */
#homeBtn.selected {
    border-bottom: 3px solid #364a75 !important; /* WICHTIG: Setzt die blaue Linie */
    color: #364a75; /* Stellt sicher, dass die Farbe korrekt ist */
    font-weight: bold;
}

#rulesScreen {
    text-align: left;
    padding: 0 5px;
}
#rulesScreen h2 {
    text-align: left;
}
#rulesScreen ul {
    list-style-type: disc;
    padding-left: 20px;
}    

/* NEUES CSS FÜR SCHWIERIGKEITSGRAD-BOXEN */
.color-box-container {
    margin: 15px 0;
    padding-left: 0; /* Stellt sicher, dass die Liste links anfängt */
    list-style: none; /* Entfernt die Standard-Listenpunkte */
}

.color-box-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.difficulty-box {
    width: 25px;
    height: 25px;
    border-radius: 5px; /* Abgerundete Ecken */
    margin-right: 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}


/* Farben definieren, basierend auf Ihren Gruppencolors */
.difficulty-box.green { background-color: #e2d2ab; }
.difficulty-box.yellow { background-color: #aad4de; }
.difficulty-box.blue { background-color: #a7e8ab; } 
.difficulty-box.purple { background-color: #e1bfea; }

/* NEUES CSS FÜR DEN SCHWIERIGKEITS-PFEIL */
/* PASST DIE ABSTÄNDE DER LISTE AN */
.color-box-container {
    margin: 15px 0;
    padding-left: 0;
    list-style: none;
    position: relative; /* WICHTIG: Damit der Pfeil absolut positioniert werden kann */
    width: 250px; /* Gibt dem Container eine definierte Breite */
}

.color-box-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px; 
    font-size: 0.95rem;
    position: relative; /* WICHTIG: Für präzise Positionierung der Boxen */
}

/* NEUES CSS FÜR DEN ABSOLUT POSITIONIERTEN PFEIL */
#arrowOverlay {
    position: absolute;
    top: 600px;     /* Startpunkt: Nach der ersten Box (Gelb) */
    left: 600px;    /* Startpunkt: Verschiebt ihn nach links (neben die Boxen) */
    height: 0px;  /* Höhe des Pfeils, um die 2 mittleren Boxen zu überspannen */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.difficulty-arrow {
    font-size: 2.5rem; /* Etwas größerer Pfeil */
    color: #888; 
    line-height: 1; 
}

.arrow-text {
    font-size: 0.75rem; 
    color: #888;
    white-space: nowrap; /* Verhindert Zeilenumbruch */
    transform: translateY(-5px); /* Zieht den Text etwas nach oben */
}

.difficulty-box-label {
    margin-left: 15px; /* Fügt Abstand zum Text hinzu */
}

/* style.css */
/* Klasse zum kompletten Verstecken der Statistik */
.hidden-stats {
    display: none;
}


/* style.css */

#modalOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Dunkler, transparenter Hintergrund */
    z-index: 9998; 
    display: none; 
}

#scoreboardModal {
    position: fixed; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    
    background-color: white;
    padding: 30px;
    border: 2px solid #364a75;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    z-index: 9999; 
    max-width: 90%;
    width: 300px; 
    display: none; 
    text-align: left; /* Textausrichtung für bessere Listenlesbarkeit */
}

#profileInfo {
    margin-bottom: 15px;
    font-size: 1.1em;
    font-weight: bold;
    color: #333;
    text-align: center;
}

#streakList ol {
    list-style: none; /* Entfernt die Standardnummerierung */
    padding-left: 0;
}

#streakList li {
    padding: 8px 0;
    border-bottom: 1px dashed #ddd;
    display: flex;
    justify-content: space-between; /* Name links, Streak rechts */
    font-size: 1rem;
}

#closeModalBtn {
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 10px;
    background-color: #364a75;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}