/* US Water Features Stylesheet */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; background: aliceblue; }
h2 { text-align: center; margin: 8px 0 4px 0; font-size: 18px; color: #333; }
.subtitle { text-align: center; font-size: 12px; color: #666; margin-bottom: 8px; }
#map { width: 100%; height: 280px; }

.info {
    padding: 10px 14px; font-size: 13px;
    background: rgba(255,255,255,0.95);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px; max-width: 240px;
}
.info h4 { margin: 0 0 8px; color: #1565c0; font-size: 15px; border-bottom: 2px solid #1e88e5; padding-bottom: 4px; }
.info p { color: #555; font-size: 12px; margin: 4px 0; }
.info .stat { font-weight: bold; color: #333; }

.controls-container {
    background: white; padding: 8px 15px;
    display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
    border-top: 1px solid #ddd;
}
.control-btn {
    padding: 5px 12px; font-size: 11px;
    border: 2px solid #1e88e5; background: white; color: #1e88e5;
    border-radius: 4px; cursor: pointer; font-weight: bold; transition: all 0.2s;
}
.control-btn:hover, .control-btn.active { background: #1e88e5; color: white; }

.quiz-panel { background: #e3f2fd; padding: 12px; text-align: center; border-top: 1px solid #ddd; }
.quiz-panel.hidden { display: none; }
.quiz-header { display: flex; justify-content: space-between; margin-bottom: 8px; }
.quiz-progress { font-size: 12px; font-weight: bold; color: #1e88e5; }
.stars-display { display: flex; gap: 4px; }
.gold-star { font-size: 18px; color: gold; opacity: 0; transform: scale(0); transition: all 0.3s; }
.gold-star.animated { opacity: 1; transform: scale(1); }
.quiz-question { font-size: 14px; font-weight: bold; margin-bottom: 10px; }
.quiz-options { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.quiz-option { padding: 8px 14px; font-size: 12px; border: 2px solid #ccc; background: white; border-radius: 4px; cursor: pointer; }
.quiz-option:hover { border-color: #1e88e5; }
.quiz-option.correct { border-color: forestgreen; background: #e8f5e9; }
.quiz-option.incorrect { border-color: crimson; background: #ffebee; }
.quiz-feedback { margin-top: 10px; font-size: 13px; font-weight: bold; }
.quiz-feedback.correct { color: forestgreen; }
.quiz-feedback.incorrect { color: crimson; }

.legend-container { background: white; padding: 6px 12px; text-align: center; border-top: 1px solid #ddd; }
.legend-items { display: flex; justify-content: center; gap: 20px; font-size: 11px; }
.legend-item { display: flex; align-items: center; }
.river-icon { width: 20px; height: 3px; background: #1e88e5; margin-right: 5px; border-radius: 2px; }
.lake-icon { width: 12px; height: 12px; background: #64b5f6; margin-right: 5px; border-radius: 50%; }
.ocean-icon { width: 12px; height: 12px; background: #90caf9; margin-right: 5px; border-radius: 2px; }
.hover-instruction { text-align: center; font-size: 11px; color: #888; padding: 4px; font-style: italic; }

.celebration-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; }
.exploding-star { position: absolute; animation: explode 1.5s ease-out forwards; }
@keyframes explode { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(0.5) translateY(-100px); opacity: 0; } }