/* --- HAREKETLİ UZAY ARKA PLANI --- */
@keyframes moveStars {
    from { background-position: 0 0; }
    to { background-position: -1000px 1000px; }
}

body {
    margin: 0; padding: 0;
    background-color: #020005;
    background-image: 
        radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 3px),
        radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 2px),
        radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 3px);
    background-size: 550px 550px, 350px 350px, 250px 250px;
    animation: moveStars 120s linear infinite;
    
    color: #fff;
    font-family: 'Press Start 2P', cursive;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    height: 100vh; overflow: hidden;
    user-select: none; -webkit-user-select: none;
    touch-action: none;
}

/* --- STANDART UI ELEMANLARI --- */
/* GÜNCELLEME: Z-Index 201 yapıldı (Overlay 200 olduğu için üstte kalsınlar) */
.back-link {
    position: absolute; top: 20px; left: 20px;
    color: #777; text-decoration: none; font-family: 'Roboto', sans-serif; font-weight: bold;
    transition: color 0.3s; 
    z-index: 201; /* Overlay üstüne çıkarıldı */
    display: flex; align-items: center; gap: 8px; font-size: 0.8rem;
}
.back-link:hover { color: #00ff88; }

#top-controls {
    position: absolute; top: 20px; right: 20px;
    display: flex; gap: 10px; 
    z-index: 201; /* Overlay üstüne çıkarıldı */
}

.control-btn {
    background: rgba(20, 20, 40, 0.8); 
    color: #aaa; border: 1px solid #334;
    width: 40px; height: 40px; border-radius: 8px; 
    cursor: pointer; 
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; transition: all 0.2s;
    backdrop-filter: blur(2px);
}

.control-btn:hover { background: #223; border-color: #00ff88; color: #00ff88; box-shadow: 0 0 15px rgba(0,255,136,0.4); }

/* Level Göstergesi */
#level-indicator {
    position: absolute; top: 30px; width: 100%; text-align: center;
    color: rgba(255, 255, 255, 0.7); font-size: 0.9rem;
    pointer-events: none; z-index: 50;
    text-shadow: 0 0 10px rgba(0,0,0,0.5); font-family: 'Roboto', sans-serif; font-weight: bold;
}
#level-num { color: #ffd700; font-family: 'Press Start 2P'; margin-left: 5px; }

/* Skor Tablosu */
.score-board {
    display: flex; justify-content: space-between; align-items: center;
    width: 95%; max-width: 600px;
    margin-bottom: 10px; margin-top: 60px;
    font-size: 0.8rem; background: rgba(10, 10, 20, 0.85); 
    padding: 10px 20px; border-radius: 12px; border: 1px solid #334;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    position: relative; z-index: 10; backdrop-filter: blur(5px);
}

.player-stats { display: flex; align-items: center; gap: 10px; }
.player-stats.p1 span { color: #00ff88; text-shadow: 0 0 10px #00ff88; }
.player-stats.p2 span { color: #0088ff; text-shadow: 0 0 10px #0088ff; }

.hearts-container { display: flex; gap: 4px; }
.heart { color: #ff0055; font-size: 0.9rem; filter: drop-shadow(0 0 5px #ff0055); }
.heart.lost { color: #444; filter: none; opacity: 0.5; }

.enemy-score { color: #ff5555; font-size: 0.7rem; font-family: 'Roboto', sans-serif; font-weight: bold; }
.enemy-score span { font-family: 'Press Start 2P'; font-size: 0.8rem; margin-left: 5px; }

/* Oyun Alanı */
.game-container {
    position: relative; padding: 4px;
    border: 4px solid #333; border-bottom: 4px solid #00ff88;
    border-radius: 4px;
    background: rgba(10, 10, 10, 0.9); box-shadow: 0 0 50px rgba(0, 255, 136, 0.1);
    display: flex; justify-content: center; align-items: center;
}

canvas {
    display: block; image-rendering: pixelated;
    max-height: 75vh; max-width: 95vw;
    width: auto; height: auto;
}

/* Menü */
#overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(5, 5, 10, 0.95);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    z-index: 200; backdrop-filter: blur(10px);
}

h1 { font-size: 1.8rem; color: #00ff88; margin-bottom: 10px; text-align: center; text-shadow: 0 0 15px #00ff88; line-height: 1.5; }
p { font-family: 'Roboto', sans-serif; color: #888; margin-bottom: 30px; text-align: center; font-size: 0.9rem; letter-spacing: 1px; }

.btn-group { display: flex; flex-direction: column; gap: 15px; }

.menu-btn {
    background: transparent; color: #00ff88; border: 2px solid #00ff88;
    padding: 15px 30px; font-family: 'Press Start 2P', cursive; font-size: 0.8rem;
    cursor: pointer; min-width: 250px; text-align: center;
    transition: all 0.2s; text-transform: uppercase;
}
.menu-btn:hover { background: #00ff88; color: #000; box-shadow: 0 0 25px #00ff88; transform: scale(1.05); }
.menu-btn.secondary { border-color: #0088ff; color: #0088ff; }
.menu-btn.secondary:hover { background: #0088ff; color: #000; box-shadow: 0 0 25px #0088ff; }

#game-over-buttons { display: none; }
#start-buttons { display: flex; }

.controls-info {
    display: flex; gap: 40px; margin-top: 15px; font-family: 'Roboto'; font-size: 0.8rem; color: #777;
}
.key { border: 1px solid #444; padding: 2px 6px; border-radius: 4px; color: #ddd; background: #222; font-size: 0.7rem; }

/* Mobil */
#mobile-controls {
    display: none; position: absolute; bottom: 20px; width: 100%;
    justify-content: space-between; padding: 0 30px; box-sizing: border-box;
    pointer-events: none; z-index: 150;
}
#mobile-controls button {
    pointer-events: auto; background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.2); color: white;
    width: 60px; height: 60px; border-radius: 50%; font-size: 24px;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(5px); transition: background 0.1s;
}
#mobile-controls button:active { background: rgba(0, 255, 136, 0.3); border-color: #00ff88; }
.d-pad { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.d-pad-middle { display: flex; gap: 60px; }
.action-btn button { width: 80px; height: 80px; background: rgba(255, 0, 85, 0.1); border-color: rgba(255, 0, 85, 0.4); color: #ff0055; }
.action-btn button:active { background: rgba(255, 0, 85, 0.4); box-shadow: 0 0 20px #ff0055; }

@media (max-width: 800px) {
    canvas { max-width: 98vw; max-height: 65vh; }
    h1 { font-size: 1.4rem; }
    .controls-info { display: none !important; }
    #mobile-controls { display: flex; }
    .score-board { font-size: 0.6rem; width: 95%; padding: 8px; margin-top: 50px; }
    .back-link { top: 15px; left: 15px; font-size: 0.8rem; }
    #top-controls { top: 15px; right: 15px; gap: 5px; }
    .control-btn { width: 35px; height: 35px; font-size: 1rem; }
    #level-indicator { top: 20px; font-size: 0.8rem; }
}