body {
    font-family: 'Courier New', Courier, monospace;
    background-color: #111; /* Siyah arka plan */
    color: #FFF; /* Beyaz yazı */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
}

/* YENİ: Üst Bar Stili */
.top-bar {
    display: flex;
    justify-content: space-between; /* Birini sola, birini sağa atar */
    align-items: center;
    width: 700px;
    margin-bottom: 10px;
}

/* YENİ: Geri Butonu Stili */
#backButton {
    background-color: #444;
    color: #FFF;
    padding: 8px 15px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    font-size: 1em;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.2s;
}
#backButton:hover {
    background-color: #666;
}


/* Güncellendi: Reset Butonu Stilleri (Container'a gerek kalmadı) */
/* .reset-container... -> Silebilirsin */

#resetButton {
    background-color: #f0f0f0;
    color: #111;
    border: 2px solid #FF0000;
    padding: 8px 15px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    font-size: 1em;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.2s, color 0.2s;
}
#resetButton:hover {
    background-color: #FF0000;
    color: #FFF;
}

.scoreboard {
    display: flex;
    justify-content: space-between;
    width: 700px;
    margin-bottom: 15px;
    font-size: 1.5em;
    font-weight: bold;
}

#score1-display {
    color: #FF0000; /* Kırmızı Skor */
}

#score2-display {
    color: #00FF00; /* Yeşil Skor */
}

#title {
    color: #FF0000; /* Kırmızı Başlık */
}

.game-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

canvas {
    background-color: #CCCCCC; /* Açık gri saha */
    border: 4px solid #FFFFFF; /* Beyaz çerçeve */
    border-radius: 10px;
}

.controls-left, .controls-right {
    flex: 1;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    padding: 0 30px;
    width: 200px; /* Kaymayı engellemek için sabit genişlik */
}

.controls-left p, .controls-right p {
    margin: 10px 0;
}

/* Renk Seçim Stilleri */
.color-selector {
    margin-bottom: 10px;
}
.color-selector .color-choice {
    font-weight: bold;
    font-size: 1.1em;
    padding: 5px;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 4px;
    transition: background-color 0.2s, border-color 0.2s;
}

/* Tıklanabilir renklerin kendi renkleri */
.color-selector span[data-color="#FF0000"] { color: #FF0000; }
.color-selector span[data-color="#00FF00"] { color: #00FF00; }
.color-selector span[data-color="#0000FF"] { color: #0000FF; }

/* Seçili olanın stilini belirle */
.color-selector span.selected {
    background-color: #555;
    border-color: #FFF;
}


.footer-text {
    margin-top: 15px;
    font-size: 0.8em;
    color: #AAA;
    width: 700px;
    text-align: center;
}