/* --- TEMEL AYARLAR --- */
:root {
    --primary-orange: #FF9800; 
    --p1-bordeaux: #B71C1C;    
    --p2-blue: #2196F3;        
    --sky-blue: #87CEEB;
    --grass-green: #7CFC00;
    --card-bg: #E0F7FA;
    --board-bg: #4FC3F7; 
    --option-yellow: #FFD54F; 
    --font-title: 'Titan One', cursive;
    --font-body: 'Fredoka', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; touch-action: manipulation; }

body {
    height: 100vh; width: 100vw; overflow: hidden;
    display: flex; justify-content: center; align-items: center;
    font-family: var(--font-body);
}

.hidden { display: none !important; }

/* --- LOGO VE BUTONLAR --- */
.site-logo { position: absolute; top: 20px; left: 20px; height: 60px; z-index: 1000; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.3)); transition: transform 0.3s; }
.site-logo:hover { transform: scale(1.05); }
.game-logo-pos { left: 90px !important; }

.fs-pos { position: absolute; top: 20px; right: 20px; z-index: 1000; }
.sound-global-pos { position: absolute; top: 20px; right: 90px; z-index: 1000; }
.home-pos { position: absolute; top: 20px; left: 20px; z-index: 1000; }

/* --- ARKA PLAN --- */
.world-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: var(--sky-blue); }
.grass { position: absolute; bottom: 0; width: 100%; height: 35%; background-color: var(--grass-green); }
.cloud { position: absolute; background: white; border-radius: 50px; opacity: 0.8; }
.c1 { width: 100px; height: 40px; top: 20%; left: 10%; }
.c2 { width: 140px; height: 60px; top: 10%; right: 20%; }

/* GÖRSELLER */
.home-grass-bg {
    background-color: transparent !important;
    background-image: url('assets/images/grass.png');
    background-repeat: repeat-x;
    background-position: bottom center;
    background-size: cover;
}
.home-sky-bg {
    background-color: transparent !important;
    background-image: url('assets/images/air.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

/* --- MENÜ KARTI --- */
.menu-card {
    position: relative; width: 75vw; max-width: 750px; aspect-ratio: 4/3;
    background-color: var(--card-bg); border: 10px solid var(--primary-orange); border-radius: 30px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.3); display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: 1.1rem; z-index: 20;
}
.menu-card::after { content: ''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; border-radius: 30px; border: 10px solid transparent; background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.3) 10px, rgba(255,255,255,0.3) 20px); pointer-events: none; z-index: 2; }

/* Karakterler */
.characters-row { position: absolute; top: -18%; width: 100%; display: flex; justify-content: space-between; padding: 0 5%; z-index: 10; }
.char-img-wrapper { position: relative; width: 36%; aspect-ratio: 1/1; transition: transform 0.3s; }
.char-img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 5px 5px rgba(0,0,0,0.2)); }
.char-name-tag { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); background: #333; color: white; padding: 2px 10px; border-radius: 10px; font-size: 0.9rem; font-weight: bold; border: 2px solid white; white-space: nowrap; z-index: 2; }
.dog-left { transform: rotate(-10deg); } .dog-right { transform: rotate(10deg); }
.char-img-wrapper:hover { transform: scale(1.1) rotate(0deg); z-index: 15; }

/* Menü İçerik */
.title-container { text-align: center; z-index: 5; margin-top: 5%; margin-bottom: 5%; background: rgba(0,0,0,0.1); padding: 15px 30px; border-radius: 15px; }
.main-title { font-family: var(--font-title); font-size: clamp(2.5rem, 6vw, 4rem); color: #76FF03; -webkit-text-stroke: 2px #1B5E20; text-shadow: 3px 3px 0px #1B5E20; line-height: 1; }
.subtitle-badge { background: white; color: #333; display: inline-block; padding: 5px 20px; border-radius: 20px; font-weight: 800; border: 2px solid #333; margin-top: -8px; transform: rotate(-2deg); box-shadow: 2px 2px 0 rgba(0,0,0,0.2); font-size: 1rem; }
.card-body { width: 100%; display: flex; justify-content: center; }
.btn-3d { font-family: var(--font-title); font-size: clamp(1.8rem, 4vw, 2.5rem); color: white; border: none; padding: 15px 60px; border-radius: 50px; cursor: pointer; position: relative; background: linear-gradient(to bottom, #76FF03, #4CAF50); border: 3px solid #1B5E20; box-shadow: 0 6px 0 #1B5E20, 0 10px 10px rgba(0,0,0,0.3); }
.btn-3d:active { transform: translateY(6px); box-shadow: 0 0 0 #1B5E20; }
.icon-btn { width: 60px; height: 60px; border-radius: 50%; background: var(--grass-green); border: 3px solid #2E7D32; color: white; font-size: 1.8rem; cursor: pointer; box-shadow: 3px 3px 0 #2E7D32; display: flex; justify-content: center; align-items: center; transition: transform 0.1s; z-index: 100; }
.icon-btn:active { transform: scale(0.95); }

/* --- OYUN EKRANI --- */
.game-screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; }

/* HUD Panel */
.hud-panel { 
    display: flex; justify-content: space-between; align-items: center; 
    width: 100%; max-width: 800px; margin: 0 auto; 
    background: rgba(255, 255, 255, 0.9); 
    border: 4px solid var(--primary-orange); border-radius: 20px; 
    padding: 5px 15px; 
    box-shadow: 0 5px 0 rgba(0,0,0,0.2); 
}
.score-box { display: flex; align-items: center; gap: 10px; font-family: var(--font-title); color: #333; }
.hud-avatar { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; border: 3px solid #333; background: white; }
.hud-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hud-info { display: flex; flex-direction: column; }
.player-name { font-size: 0.9rem; color: #555; font-weight: bold; margin-bottom: 0px; } 
.points { font-size: 2.2rem; color: var(--primary-orange); line-height: 0.8; text-shadow: 1px 1px 0 rgba(0,0,0,0.1); }

.timer-box { 
    background: #333; color: white; padding: 5px 15px; border-radius: 12px; font-family: monospace; font-size: 1.5rem; border: 3px solid #fff; display: flex; gap: 15px; align-items: center; box-shadow: 0 3px 0 rgba(0,0,0,0.3);
}
.timer-box.time-critical { background-color: #D32F2F; animation: pulseRed 0.8s infinite; }
@keyframes pulseRed { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }

/* Pist ve Arabalar */
.race-track { position: relative; width: 100%; height: 40%; display: flex; flex-direction: column; justify-content: center; perspective: 1000px; }
.lane { position: relative; width: 100%; height: 45%; background: #555; border-top: 4px dashed white; border-bottom: 4px solid #333; margin-bottom: 2%; border-radius: 0 100px 100px 0; box-shadow: inset 0 0 20px rgba(0,0,0,0.5); display: flex; align-items: center; padding-left: 20px; }
.finish-line { position: absolute; right: 50px; width: 40px; height: 100%; background: repeating-linear-gradient(45deg, #fff, #fff 10px, #000 10px, #000 20px); z-index: 1; }

/* GÜNCEL İDEAL BOYUTLAR */
.car-wrapper { position: absolute; left: 20px; width: 200px; height: 160px; transition: left 0.5s ease-out; z-index: 10; display: flex; align-items: center; justify-content: center; }

@keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@keyframes bounce-flipped { from { transform: scaleX(-1) translateY(0); } to { transform: scaleX(-1) translateY(-3px); } }
.car-unit { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 5px rgba(0,0,0,0.4)); animation: bounce 0.5s infinite alternate; }
#car2 .car-unit { animation: bounce-flipped 0.5s infinite alternate; }

.bubble { 
    position: absolute; top: -25px; left: 50%; transform: translateX(-50%); 
    background: white; padding: 5px 10px; border-radius: 10px; 
    font-size: 0.8rem; font-weight: bold; white-space: nowrap; 
    box-shadow: 2px 2px 0 rgba(0,0,0,0.2); z-index: 20; 
    display: none; opacity: 0; transition: opacity 0.3s; 
}
.bubble::after { content: ''; position: absolute; bottom: -5px; left: 50%; border-width: 5px; border-style: solid; border-color: white transparent transparent transparent; }
.car-wrapper.active-turn .bubble { display: block; opacity: 1; animation: popIn 0.3s forwards; }
@keyframes popIn { from { transform: translateX(-50%) scale(0); } to { transform: translateX(-50%) scale(1); } }

/* --- SORU MODAL WRAPPER --- */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: transparent; backdrop-filter: none; display: flex; justify-content: center; align-items: flex-start; padding-top: 115px; z-index: 2000; }
.modal-wrapper { position: relative; display: flex; justify-content: center; }

/* SIRA GÖSTERGESİ */
.turn-indicator { position: absolute; left: -40px; top: 0; width: 35px; height: 100%; border-radius: 10px 0 0 10px; box-shadow: -2px 0 10px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; transition: background 0.3s; }
.turn-text { writing-mode: vertical-rl; transform: rotate(180deg); color: white; font-family: var(--font-title); letter-spacing: 1px; font-size: 1rem; white-space: nowrap; }
.turn-p1 { background-color: var(--p1-bordeaux); border: 2px solid white; border-right: none; }
.turn-p2 { background-color: var(--p2-blue); border: 2px solid white; border-right: none; }

/* SORU PANELİ */
.question-board { 
    position: relative; 
    width: 380px; height: auto; min-height: 400px; 
    background: var(--board-bg); border: 8px solid var(--primary-orange); border-radius: 20px;
    box-shadow: 0 0 0 8px #FFD54F, 0 20px 40px rgba(0,0,0,0.5); 
    display: flex; flex-direction: column; overflow: hidden; animation: slideDown 0.5s ease-out;
}
@keyframes slideDown { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

#boardContent { width: 100%; height: 100%; display: flex; flex-direction: column; }

/* HAZIR MISIN EKRANI */
.ready-screen {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: #4FC3F7; 
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    z-index: 50; text-align: center; border-radius: 12px;
}
.ready-text {
    font-family: var(--font-body); font-size: 2.2rem; font-weight: 600;
    color: #222; margin-bottom: 25px; line-height: 1.3; text-shadow: none; 
}
.go-btn {
    font-family: var(--font-body); font-weight: 600; font-size: 2rem; color: #222;
    background: #76FF03; border: 4px solid #33691E; border-radius: 50%;
    width: 100px; height: 100px; cursor: pointer;
    box-shadow: 0 5px 0 #33691E;
    animation: pulseGo 1s infinite;
}
.go-btn:active { transform: translateY(4px); box-shadow: 0 0 0 #33691E; }
@keyframes pulseGo { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }

/* Üst Kısım */
.board-header { display: flex; justify-content: center; padding: 15px; background: linear-gradient(to bottom, #E1F5FE, #B3E5FC); border-bottom: 4px solid #fff; }
.image-frame-container { position: relative; width: 220px; height: 140px; }
.image-frame { width: 100%; height: 100%; background: white; border: 5px solid #81C784; border-radius: 15px; overflow: hidden; box-shadow: 3px 3px 0 rgba(0,0,0,0.2); display: flex; justify-content: center; align-items: center; }
.image-frame img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }

.listen-btn { position: absolute; top: -15px; left: -15px; width: 45px; height: 45px; background: #76FF03; border: 3px solid #fff; border-radius: 50%; font-size: 1.3rem; cursor: pointer; z-index: 10; box-shadow: 3px 3px 0 rgba(0,0,0,0.2); display: flex; justify-content: center; align-items: center; }
.listen-btn:active { transform: scale(0.9); }

.options-container { padding: 10px; display: flex; flex-direction: column; gap: 8px; background: #4FC3F7; }
.opt-btn { width: 100%; background: linear-gradient(to bottom, #FFECB3, #FFD54F); border: 3px solid #FF6F00; border-radius: 50px; padding: 8px 15px; display: flex; align-items: center; gap: 10px; cursor: pointer; box-shadow: 0 3px 0 #FF6F00; transition: transform 0.1s; }
.opt-btn:active { transform: translateY(3px); box-shadow: 0 0 0 #FF6F00; }
.opt-btn:hover { background: linear-gradient(to bottom, #FFF8E1, #FFECB3); }
.opt-letter { background: #FF6F00; color: white; width: 28px; height: 28px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-family: var(--font-title); font-size: 0.9rem; border: 2px solid white; }
.opt-text { font-family: var(--font-body); font-size: 1.3rem; font-weight: 600; color: #3E2723; text-shadow: none; }

.blur-effect { filter: blur(15px); pointer-events: none; }
.countdown-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--font-title); font-size: 8rem; color: white; text-shadow: 4px 4px 0 var(--primary-orange), 0 0 20px rgba(0,0,0,0.5); z-index: 100; pointer-events: none; animation: popNumber 0.5s ease-out; }
@keyframes popNumber { from { transform: translate(-50%, -50%) scale(0); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

/* --- BİTİŞ EKRANI --- */
.end-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); z-index: 3000;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    animation: fadeIn 0.5s ease-out;
}
.winner-title {
    font-family: var(--font-title); font-size: clamp(4rem, 10vw, 7rem); color: #FFD54F;
    text-shadow: 4px 4px 0 #FF6F00, 0 0 30px rgba(255, 213, 79, 0.5); margin-bottom: 10px;
    animation: popIn 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.winner-name { font-family: var(--font-title); font-size: clamp(3rem, 8vw, 5rem); color: white; text-shadow: 3px 3px 0 #333; margin-bottom: 40px; }
.small-home-btn { padding: 10px 30px; font-size: 1.5rem; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Mobil Ayarı */
@media (max-width: 600px) {
    .menu-card { width: 90vw; max-width: none; border-width: 8px; }
    .main-title { font-size: 2.5rem; }
    .btn-3d { padding: 10px 40px; font-size: 1.8rem; }
    .site-logo { height: 40px; top: 10px; left: 10px; }
    .game-logo-pos { left: 70px !important; } 
    .fs-pos { width: 40px; height: 40px; font-size: 1.2rem; top: 10px; right: 10px; }
    .home-pos { width: 40px; height: 40px; font-size: 1.2rem; top: 10px; left: 10px; }
    .sound-global-pos { width: 40px; height: 40px; font-size: 1.2rem; top: 10px; right: 60px; }
    .hud-panel { padding: 5px 10px; } 
    .score-box { flex-direction: column; gap: 2px; }
    .hud-avatar { width: 40px; height: 40px; } 
    .points { font-size: 1.5rem; }
    .timer-box { font-size: 1.2rem; padding: 5px 10px; }
    
    /* GÜNCEL MOBİL İDEAL */
    .car-wrapper { width: 150px; height: 120px; }
    
    .modal-wrapper { width: 95%; max-width: 350px; margin-left: 30px; } 
    .question-board { width: 100%; min-height: 350px; }
    .turn-indicator { width: 30px; left: -30px; }
    .image-frame-container { width: 180px; height: 120px; }
    .opt-text { font-size: 1.1rem; }
    .countdown-overlay { font-size: 6rem; }
}