.geheim {
  visibility: hidden;
  display: none;
}

.spiel{
    margin-top: 20px;
}

div {
    display: block;
}


.Code {
  background-color: gray;
  color: gray;
  min-width: 15pt;
  max-width: 199pt;
}

.CodeHeadLine {
  text-align: center;
}


/* GRUNDSTYL UND TYPOGRAFIE */
body {
    /* Hintergrund: Sehr helles, beruhigendes Grün */
    background-color: #f7fff7;  
    /* Schriftart: Eine runde, gut lesbare Sans-Serif-Schrift */
    font-family: 'Avenir Next', 'Nunito', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
    
    /* ---------------------------------------------------- */
    /* ✅ ÄNDERUNG: Elemente untereinander anordnen (Spalten) */
    display: flex;
    flex-direction: column; /* HIER IST DIE KORREKTUR */
    /* ---------------------------------------------------- */
    
    /* Der Inhalt wird in der Mitte des Bildschirms zentriert */
    align-items: center; /* Ändere von flex-start auf center, um H1/H2 zu zentrieren */
    
    min-height: 100vh;
}


/* CONTAINER FÜR ZENTRIERUNG */
.game-container {
    max-width: 800px;
    width: 90%;
    padding: 20px 40px;
    background-color: #ffffff;
    /* Sanfte Schatten für einen 'angehobenen' Effekt */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); 
    border-radius: 12px; /* Runde Ecken für den Hauptcontainer */
}

/* TABELLENSTYLING */
table {
    width: 100%;
    border-collapse: separate; /* Wichtig für abgerundete Ecken der Zellen */
    border-spacing: 0 8px; /* Vertikaler Abstand zwischen den Zeilen */
}

td {
    /* Zelle für die geratenen Farben */
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px; /* Runde Ecken für die Zellen */
    text-align: center;
    background-color: #fcfcfc;
    transition: background-color 0.3s;
    height: 40px;
    width: 12%; /* Macht die Farb-Spalten gleich breit */
}

/* Stil für die Pins-Zelle (Black/White Ergebnis) */
td:last-child {
    width: 25%;
    /* Flexbox für saubere Anordnung der Pins */
    display: flex; 
    justify-content: center;
    align-items: center;
    gap: 4px;
    background-color: #fafafa;
}

/* MASTERMIND PINS STYLING (Basierend auf Ihrer generatePins Funktion) */
/* Stil für die kleinen Bewertungskreise */
.pin-container span {
    display: block
    width: 10px;
    height: 10px;
    border-radius: 50%; /* Runde Form */
    margin: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Kleiner Schatten für Tiefe */
}

/* BESONDERER STYLING FÜR DIE GEHEIMCODE-ZEILE (falls sichtbar) */
.geheimcode td {
    background-color: #ffeaa7; /* Leichter Gelbton */
    font-weight: bold;
}

/* BUTTON-STYLING (z.B. für den Raten-Button) */
button {
    background-color: #3498DB; /* Blau */
    color: white;
  
    /* ✅ NEU/ANGEPASST: Erhöhen Sie den vertikalen Padding (12px oben/unten) 
       und reduzieren Sie den horizontalen Padding (18px links/rechts) */
    padding: 6px 10px; 
    
    border: none;
    border-radius: 6px;
    cursor: pointer;
    
    /* ✅ OPTIONAL: Textgröße leicht erhöhen */
    font-size: 1.05em; 
    
        transition: background-color 0.2s, transform 0.1s;

    background-color: #3498DB; 
    color: white;
}
    
}

button:hover {
    background-color: #2980b9;
    transform: translateY(-1px);
}

/* Sicherstellen, dass die DIVs die volle Breite einnehmen und 
   jeweils eine eigene Zeile beanspruchen. */
.belohung {
  display: block; 
  /* Der Rest deines Styles für .belohung */
  width: 100%; /* Optional, aber oft hilfreich bei Block-Elementen */
  margin-bottom: 15px; /* Fügt einen Abstand zwischen den Containern hinzu */
  text-align: center;
    
}


/* ERFOLGSKLASSE (belohungSuccess) */
.belohungSuccess {
    background-color: #2ecc71 !important; /* Kräftiges Grün */
    color: white;
    font-size: 1.4em;
    font-weight: bold;
    text-align: center;
    padding: 20px;
    margin-top: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.5);
    animation: pulse 1.5s infinite;
}

/* Simple Animation für den Erfolgstext */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}