#mode-selection {
    margin-bottom: 15px;
    text-align: center;
}

#mode-selection button {
    padding: 8px 15px;
    font-size: 14px;
    cursor: pointer;
    background-color: #444; /* Andere Farbe für Modus-Buttons */
    color: #e0e0e0;
    border: 1px solid #666;
    border-radius: 5px;
    margin: 0 5px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

#mode-selection button:hover {
    background-color: #555;
    border-color: #888;
}

#mode-selection button.active { /* Stil für aktiven Modus */
    background-color: #bb86fc;
    color: #121212;
    border-color: #bb86fc;
}

#mode-selection p {
    margin-top: 10px;
    font-size: 0.9em;
    color: #aaa;
}


/* Rest des CSS bleibt wie vorher... */

body {
    font-family: sans-serif;
    background-color: #121212; /* Dunkler Hintergrund */
    color: #e0e0e0; /* Helle Schrift */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
}

h1 {
    color: #bb86fc; /* Akzentfarbe */
}

#game-info {
    margin-bottom: 20px;
    text-align: center;
}

#board-container {
    position: relative;
    width: 90vw; /* Responsive Breite */
    max-width: 500px; /* Maximale Breite */
    aspect-ratio: 1 / 1; /* Sorgt für quadratisches Seitenverhältnis */
    margin: auto;
}


#board {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #121212; /* Etwas hellerer Board-Hintergrund */
    border-radius: 10px;
}

/* SVG Container für Linien */
#board svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Stellt sicher, dass SVG hinter den Positionen ist */
}

/* Stil für die Linien im SVG */
#board svg line {
    stroke: #a06cd5; /* Linienfarbe */
    stroke-width: 3; /* Linienbreite (kann angepasst werden) */
}


.position {
    position: absolute;
    width: 8%; /* Größe relativ zur Board-Größe */
    height: 8%;
    background-color: #000; /* Farbe der leeren Positionen */
    border: 2px solid #a06cd5;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    box-sizing: border-box; /* Border wird in die Größe eingerechnet */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1; /* Stellt sicher, dass Positionen über den SVG-Linien sind */
}

.position:hover {
    background-color: #a06cd5;
}

/* Stein-Stile */
.position.player1::after,  /* Umbenannt von .player */
.position.player2::after {  /* Umbenannt von .computer */
    content: '';
    display: block;
    width: 70%;
    height: 70%;
    border-radius: 50%;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.4); /* Innen-Schatten für 3D-Effekt */
}

.position.player1::after { /* Umbenannt von .player */
    background-color: #f0f0f0; /* Helles Grau/Weiss für Spieler 1 */
    border: 1px solid #ccc;
}

.position.player2::after { /* Umbenannt von .computer */
    background-color: #b71c1c; /* Dunkelrot für Spieler 2 / Computer */
     border: 1px solid #8c1616;
}

/* Hervorhebung für ausgewählten Stein */
.position.selected {
    transform: scale(1.1);
    border: 2px solid #bb86fc; /* Akzentfarbe für Auswahl */
}

/* Hervorhebung für gültige Züge oder entfernbare Steine */
.position.highlight {
   background-color: rgba(187, 134, 252, 0.3); /* Leicht transparenter Akzent */
   border: 1px dashed #bb86fc;
}

#reset-button { /* Umbenannt von button zu #reset-button für Spezifität */
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #bb86fc;
    color: #121212;
    border: none;
    border-radius: 5px;
    margin-top: 20px;
    transition: background-color 0.2s ease;
}

#reset-button:hover {
    background-color: #a06cd5;
}

/* Einfache Responsivität */
@media (max-width: 600px) {
    h1 {
        font-size: 1.5em;
    }
     #board-container {
        width: 95vw;
    }
    #board svg line {
       stroke-width: 1.5; /* Dünnere Linien auf kleinen Bildschirmen */
    }
    .position {
        width: 9%; /* Etwas größere Klickfläche relativ */
        height: 9%;
    }
    #reset-button, #mode-selection button {
        font-size: 14px;
        padding: 8px 16px;
    }
    #mode-selection p {
        font-size: 0.8em;
    }
}