.theme-flags { background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%); }
.theme-flags .game-header h1 { color: #00838f; }
.country-name {
    text-align: center; font-size: 1.6rem; font-weight: 800;
    font-family: 'Baloo 2', cursive; color: #00695c;
    margin: 12px auto; padding: 10px 16px;
    background: rgba(255,255,255,0.85); border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.flag-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 14px; max-width: 380px; margin: 16px auto; padding: 0 10px;
}
.flag-btn {
    padding: 14px 10px; border: 3px solid #b2ebf2; border-radius: 16px;
    background: white; cursor: pointer; transition: all 0.2s;
    text-align: center; display: flex; align-items: center; justify-content: center;
    min-height: 75px;
}
.flag-btn img { transition: transform 0.2s; }
.flag-btn:hover { background: #e0f7fa; border-color: #26c6da; transform: scale(1.05); }
.flag-btn:hover img { transform: scale(1.08); }
.flag-btn.correct { background: #e8f5e9; border-color: #4caf50; box-shadow: 0 0 0 3px rgba(76,175,80,0.2); }
.flag-btn.wrong { background: #ffebee; border-color: #f44336; opacity: 0.5; }
.flag-btn.disabled { pointer-events: none; }

@media (max-width: 500px) {
    .flag-grid { gap: 10px; max-width: 100%; }
    .flag-btn { padding: 10px 8px; min-height: 60px; }
    .flag-btn img { width: 60px !important; }
    .country-name { font-size: 1.3rem; }
}