.theme-geo { background: linear-gradient(135deg, #e0f2f1 0%, #b2dfdb 100%); }
.theme-geo .game-header h1 { color: #00695c; }

.flag-display {
    font-size: 6rem; text-align: center; margin: 20px auto;
    background: white; width: 160px; height: 120px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 25px rgba(0,0,0,0.1); border: 2px solid #e0e0e0;
    animation: flagIn 0.35s ease;
}
@keyframes flagIn { from { transform: scale(0.5) rotate(-10deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }

.flag-options {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    max-width: 450px; margin: 20px auto; padding: 0 15px;
}
.flag-opt {
    padding: 14px; border: 2px solid #b2dfdb; border-radius: 14px;
    background: white; text-align: center; font-size: 1.05rem;
    font-family: 'Nunito', sans-serif; font-weight: 700; color: #333;
    cursor: pointer; transition: all 0.2s;
}
.flag-opt:hover { background: #e0f2f1; border-color: #26a69a; transform: scale(1.03); }
.flag-opt.correct { background: #e8f5e9; border-color: #4caf50; color: #2e7d32; }
.flag-opt.wrong { background: #ffebee; border-color: #f44336; color: #c62828; }
.flag-opt.disabled { pointer-events: none; opacity: 0.6; }

@media (max-width: 450px) {
    .flag-display { font-size: 4.5rem; width: 130px; height: 100px; }
    .flag-opt { font-size: 0.95rem; padding: 12px 8px; }
}