/* === Genel Stiller ve Font === */
body { display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background-color: #eef1f5; font-family: 'Poppins', sans-serif; /* overflow: hidden; <-- BU SATIR SİLİNDİ! */ }
#game-container { position: relative; display: flex; flex-direction: column; align-items: center; background-color: #ffffff; padding: 20px; border-radius: 15px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); max-width: 550px; width: 95%; box-sizing: border-box; border: 1px solid #ddd; margin: auto; }
/* === Başlık ve Logolar === */
#header { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px; }
#header img { height: 35px; width: auto; object-fit: contain; }
#logo-left { margin-right: 10px; } #logo-right { margin-left: 10px; opacity: 0.9; }
#header h1 { margin: 0; color: #e63946; font-size: 1.6em; font-weight: 700; text-align: center; flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* === UI Elemanları (Skor, Can) === */
#ui-container { display: flex; justify-content: space-between; width: 100%; margin-bottom: 15px; font-size: 1.1em; font-weight: 600; color: #495057; }
#score { text-align: left; } #lives { text-align: right; color: #e63946; }
/* === Oyun Alanı (Canvas) === */
#gameCanvas { border: 1px solid #ccc; background-color: #5c5c5c; display: block; width: 100%; box-sizing: border-box; overflow: hidden; border-radius: 5px; }
/* === Mobil Kontrol Butonları === */
#mobile-controls { display: none; width: 100%; margin-top: 15px; justify-content: space-between; gap: 10px; }
#mobile-controls button { width: 48%; padding: 12px 5px; font-size: 1.1em; font-weight: 600; background-image: linear-gradient(to bottom, #ff6b6b, #e63946); color: white; border: none; border-radius: 8px; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 3px 6px rgba(230, 57, 70, 0.3); transition: background-color 0.2s ease, transform 0.1s ease; }
#mobile-controls button .arrow { font-size: 1.2em; }
#mobile-controls button:active { background-image: linear-gradient(to top, #ff6b6b, #e63946); transform: scale(0.98); }
/* === Oyun Bitti Ekranı === */
.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center; border-radius: 15px; z-index: 10; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; box-sizing: border-box; padding: 10px; }
.overlay.visible { opacity: 1; visibility: visible; }
.overlay-content { background-color: white; padding: 25px 30px; border-radius: 10px; text-align: center; box-shadow: 0 5px 25px rgba(0,0,0,0.3); max-width: 90%; max-height: 90%; overflow-y: auto; box-sizing: border-box; }
.overlay-content h2 { margin-top: 0; color: #e63946; font-size: 1.8em; margin-bottom: 20px; }
#finalScore { font-size: 1.6em; font-weight: 700; margin-bottom: 10px; color: #333; }
#rewardMessage { font-size: 1.25em; color: #2a9d8f; font-weight: bold; margin-bottom: 15px; line-height: 1.4; }
#emailInstruction { font-size: 0.9em !important; color: #555; margin-top: 20px !important; line-height: 1.5; }
#emailInstruction a { color: #007bff !important; font-weight: bold; text-decoration: underline; }
#restart-btn { padding: 12px 25px; font-size: 1.1em; font-weight: bold; background-color: #007bff; color: white; border: none; border-radius: 8px; cursor: pointer; margin-top: 25px; transition: background-color 0.2s ease; margin-bottom: 10px; }
#restart-btn:hover { background-color: #0056b3; }
/* === Mesaj Alanları === */
#message-area { margin-top: 15px; min-height: 20px; color: #dc3545; font-weight: bold; text-align: center; font-size: 0.9em; display: none; }
#start-prompt { /* Stil HTML içinde, gerekirse buraya taşınabilir */ z-index: 5; }
/* === Konfeti Stilleri === */
#confetti-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 11; }
.confetti { position: absolute; width: 8px; height: 15px; opacity: 0.9; border-radius: 2px; animation: fall 3s linear infinite; }
@keyframes fall { to { transform: translateY(100vh) rotate(720deg); opacity: 0; } }
/* === Mobil Cihaz Özel Stilleri === */
@media (max-width: 768px) or (pointer: coarse) { body { align-items: flex-start; padding-top: 5px; padding-bottom: 5px;} #game-container { width: 98%; padding: 10px; border-radius: 10px; margin-top: 0; } #header { padding-bottom: 8px; margin-bottom: 10px;} #header h1 { font-size: 1.2em; margin: 0 5px; } #header img { height: 25px; } #ui-container { font-size: 0.9em; margin-bottom: 10px; } #mobile-controls { /* display: flex; */ margin-top: 10px;} #mobile-controls button { padding: 10px 5px; font-size: 1em;} .overlay-content { padding: 15px 20px; max-width: 92%; max-height: 88vh;} .overlay-content h2 { font-size: 1.4em; margin-bottom: 15px;} #finalScore { font-size: 1.3em; } #rewardMessage { font-size: 1.05em; } #emailInstruction { font-size: 0.8em !important; } #restart-btn { font-size: 1em; padding: 10px 20px; } #start-prompt { font-size: 1em; padding: 12px;} }
@media (max-width: 480px) { #header h1 { font-size: 1em; } #header img { height: 22px; } #ui-container { font-size: 0.8em; } #mobile-controls button { font-size: 0.9em;} .overlay-content { padding: 12px; } .overlay-content h2 { font-size: 1.2em; } #finalScore { font-size: 1.1em; } #rewardMessage { font-size: 0.95em; } #restart-btn { font-size: 0.9em; padding: 9px 18px;} #start-prompt { font-size: 0.9em;} }