body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f4f9;
    color: #333;
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
}

.container {
    max-width: 900px;
    width: 100%;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
    color: #2c3e50;
}

.controls, .actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

button {
    padding: 10px 15px;
    border: none;
    background-color: #3498db;
    color: white;
    cursor: pointer;
    border-radius: 4px;
    font-size: 16px;
    transition: background 0.3s;
}

button:hover {
    background-color: #2980b9;
}

button.active {
    background-color: #2c3e50;
}

#game-status {
    text-align: center;
    margin-bottom: 15px;
}

.feedback {
    font-weight: bold;
    min-height: 24px;
    margin-top: 10px;
}

.feedback.correct {
    color: #27ae60;
}

.feedback.incorrect {
    color: #e74c3c;
}

#name-input-container {
    text-align: center;
    margin-bottom: 15px;
}

#river-name-input {
    padding: 10px;
    font-size: 16px;
    width: 250px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.map-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

#czech-map {
    width: 100%;
    height: auto;
    max-height: 700px;
    background-color: transparent;
}

/* Map specific styling */
.river {
    fill: none;
    stroke: transparent;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-linejoin: round;
    cursor: pointer;
    transition: stroke 0.3s, stroke-width 0.3s;
}

/* Make them visible but slightly faint until interacted with, or completely invisible if we want them to guess blindly.
   Actually, the user wants them to click on the map, so the rivers should be slightly visible, or at least visible on hover. 
   Let's make them slightly visible blue so they know where they can click. */
.river {
    stroke: rgba(52, 152, 219, 0.4);
}

.river:hover {
    stroke: rgba(41, 128, 185, 0.8);
    stroke-width: 10;
}

.river.highlighted {
    stroke: #f39c12;
    stroke-width: 10;
}

.river.selected {
    stroke: #2ecc71;
    stroke-width: 10;
}

.river.error {
    stroke: #e74c3c;
    stroke-width: 10;
}

#statistics {
    margin-top: 30px;
    padding: 15px;
    background-color: #ecf0f1;
    border-radius: 5px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid #bdc3c7;
}

.stat-row:last-child {
    border-bottom: none;
}