/* ========== KLASİK BİLGİ YARIŞMASI - ÖZEL STİLLER ========== */

.game-wrapper {
    max-width: 900px;
    margin: 70px auto 0; /* Üst bar 55px + biraz boşluk */
    padding: 20px;
}


/* Ekranlar */
.screen { display: none; }
.screen.active { display: block; animation: fadeIn 0.3s ease; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Giriş Ekranı */
.start-container { max-width: 600px; margin: 0 auto; }
.game-title { text-align: center; margin-bottom: 30px; }
.game-title h1 {
    font-size: 32px;
    background: linear-gradient(135deg, #facc15, #f59e0b);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.game-title p { color: #a0b0c8; font-size: 14px; margin-top: 8px; }

.stats-card {
    background: rgba(30, 35, 60, 0.8);
    border-radius: 28px;
    padding: 20px;
    margin-bottom: 30px;
}
.period-buttons {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.period-btn {
    background: rgba(10, 14, 39, 0.8);
    border: 1px solid #2d3a5e;
    padding: 8px 16px;
    border-radius: 30px;
    color: #a0b0c8;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}
.period-btn.active {
    background: linear-gradient(135deg, #3b82f6, #a855f7);
    color: white;
    border-color: transparent;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.stat-item {
    text-align: center;
    background: rgba(10, 14, 39, 0.6);
    padding: 12px 6px;
    border-radius: 16px;
}
.stat-value {
    font-size: 20px;
    font-weight: 800;
    background: linear-gradient(135deg, #facc15, #f59e0b);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.stat-label { font-size: 9px; color: #6b7280; margin-top: 4px; }

.start-buttons { display: flex; gap: 20px; justify-content: center; }
.btn-play {
    background: linear-gradient(135deg, #3b82f6, #a855f7);
    border: none;
    border-radius: 60px;
    padding: 16px 40px;
    font-size: 18px;
    font-weight: bold;
    color: white;
    cursor: pointer;
    flex: 1;
}
.btn-rules {
    background: rgba(255,255,255,0.1);
    border: 2px solid #facc15;
    border-radius: 60px;
    padding: 16px 40px;
    font-size: 18px;
    font-weight: bold;
    color: #facc15;
    cursor: pointer;
    flex: 1;
}

/* Oyun Ekranı */
.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(26, 31, 62, 0.9);
    padding: 12px 20px;
    border-radius: 60px;
    margin-bottom: 25px;
}
.stat-badge { text-align: center; flex: 1; }
.stat-badge-label { font-size: 10px; color: #6b7280; }
.stat-badge-value { font-size: 24px; font-weight: 800; color: #facc15; }
.exit-btn {
    width: 40px;
    height: 40px;
    background: #ef4444;
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 18px;
    cursor: pointer;
}

.timer-section { text-align: center; margin-bottom: 5px; }
.timer-number { font-size: 56px; font-weight: 800; font-family: monospace; }
.timer-number.normal { color: #22c55e; }
.timer-number.warning { color: #facc15; }
.timer-number.danger { color: #ef4444; animation: pulse 0.5s infinite; }
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.timer-bar-container {
    height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    margin-top: 10px;
    overflow: hidden;
}
.timer-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #facc15, #ef4444);
    width: 100%;
    transition: width 0.1s linear;
}

/* Geri Bildirim Paneli */
.feedback-panel {
    background: linear-gradient(135deg, #1e2a4a, #16203a);
    border-radius: 20px;
    padding: 18px 25px;
    margin: 20px 0 25px 0;
    text-align: center;
    border: 1px solid #2d3a5e;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    animation: slideDown 0.3s ease;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}
#feedbackMessage { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.correct-answer-text { color: #22c55e; font-weight: 500; font-size: 15px; }

.question-card {
    background: linear-gradient(135deg, #1e2a4a, #16203a);
    border-radius: 28px;
    padding: 30px;
    text-align: center;
    margin-bottom: 25px;
    border: 1px solid #2d3a5e;
}
.category-badge {
    display: inline-block;
    background: rgba(59, 130, 246, 0.2);
    padding: 6px 18px;
    border-radius: 40px;
    font-size: 13px;
    color: #3b82f6;
    margin-bottom: 20px;
}
.question-text { font-size: 24px; font-weight: 700; color: #eef2ff; line-height: 1.4; }

.answer-section { margin-bottom: 20px; }
.voice-input-area { display: flex; gap: 12px; margin-bottom: 15px; }
.answer-input {
    flex: 1;
    background: #0f1430;
    border: 2px solid #2d3a5e;
    border-radius: 60px;
    padding: 16px 20px;
    font-size: 16px;
    color: white;
    outline: none;
}
.answer-input:focus { border-color: #3b82f6; }
.voice-btn {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 22px;
    cursor: pointer;
}
.voice-btn.listening {
    background: linear-gradient(135deg, #ef4444, #f97316);
    animation: voicePulse 1s infinite;
}
@keyframes voicePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
.submit-btn {
    width: 100%;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border: none;
    border-radius: 60px;
    padding: 16px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    cursor: pointer;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}
.modal-content {
    background: #1e293b;
    border-radius: 32px;
    padding: 0;
    max-width: 500px;
    width: 90%;
    border: 2px solid #facc15;
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 1px solid #2d3a5e;
}
.modal-header h2 { color: #facc15; font-size: 20px; }
.modal-close {
    background: none;
    border: none;
    color: #a0b0c8;
    font-size: 20px;
    cursor: pointer;
}
.modal-body { padding: 25px; }
.modal-body ul { list-style: none; padding: 0; }
.modal-body li {
    padding: 10px 0;
    color: #eef2ff;
    border-bottom: 1px solid #2d3a5e;
}
.modal-body li:last-child { border-bottom: none; }
.modal-body strong { color: #facc15; }
.modal-footer {
    padding: 20px 25px;
    border-top: 1px solid #2d3a5e;
    text-align: center;
}
.btn-modal {
    background: linear-gradient(135deg, #facc15, #f59e0b);
    border: none;
    border-radius: 40px;
    padding: 14px 40px;
    font-size: 16px;
    font-weight: bold;
    color: #0f142e;
    cursor: pointer;
}

/* Çıkış İstatistik Modal */
.exit-stats-modal { max-width: 550px; }
.exit-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}
.exit-stat-item {
    background: rgba(0,0,0,0.2);
    padding: 15px;
    border-radius: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.exit-stat-label { color: #a0b0c8; font-size: 14px; }
.exit-stat-value { color: #facc15; font-weight: 700; font-size: 18px; }
.exit-total-box {
    background: linear-gradient(135deg, #1e2a4a, #16203a);
    border-radius: 20px;
    padding: 20px;
    border: 1px solid #facc15;
}
.exit-total-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    color: white;
    font-size: 16px;
}
.exit-total-value { color: #22c55e; font-weight: 700; }
.new-total { color: #facc15; font-size: 24px; }
.exit-modal-footer { display: flex; gap: 15px; }
.btn-home { background: #334155; color: white; flex: 1; }
.btn-continue {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    flex: 1;
}

/* Puan Animasyonları */
.point-animation {
    position: fixed;
    pointer-events: none;
    z-index: 3000;
    font-weight: bold;
    white-space: nowrap;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
.point-normal { color: #facc15; text-shadow: 0 0 5px #000; animation-name: flyUpNormal; }
.point-fast { color: #22c55e; text-shadow: 0 0 3px #000; animation-name: flyUpFast; }
.point-streak { color: #f97316; text-shadow: 0 0 5px #000; animation-name: flyUpStreak; }
.point-extra { color: #ef4444; font-size: 28px; text-shadow: 0 0 10px #000; animation-name: flyUpExtra; }
.point-wrong { color: #ef4444; animation-name: shake; }
@keyframes flyUpNormal {
    0% { opacity: 1; transform: translate(0,0); }
    100% { opacity: 0; transform: translate(20px,-80px); }
}
@keyframes flyUpFast {
    0% { opacity: 1; transform: translate(0,0); }
    25% { transform: translate(15px,-20px); }
    50% { transform: translate(-10px,-40px); }
    100% { opacity: 0; transform: translate(5px,-100px); }
}
@keyframes flyUpStreak {
    0% { opacity: 1; transform: scale(1); }
    50% { transform: scale(1.3); color: #ff4500; }
    100% { opacity: 0; transform: scale(1.5) translate(0,-100px); }
}
@keyframes flyUpExtra {
    0% { opacity: 1; transform: scale(1); }
    30% { transform: scale(1.8); color: #ff0; }
    100% { opacity: 0; transform: scale(2) translate(0,-120px); }
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

/* Mobil */
@media (max-width: 768px) {
    .game-wrapper { padding: 15px; margin-top: 92px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .start-buttons { flex-direction: column; }
    .question-text { font-size: 20px; }
    .timer-number { font-size: 44px; }
    .exit-stats-grid { grid-template-columns: 1fr; }
    .exit-modal-footer { flex-direction: column; }
}