body {
    margin: 0; padding: 0; background-color: #050510; color: #fff;
    font-family: 'Orbitron', sans-serif; overflow: hidden;
    display: flex; justify-content: center; align-items: center; height: 100vh;
    touch-action: none; /* Mobilde kaydırmayı engelle */
}

#stars { position: absolute; width: 100%; height: 100%; background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%); z-index: -1; }

canvas {
    background: rgba(0, 0, 0, 0.6); border: 4px solid #00f3ff;
    box-shadow: 0 0 30px rgba(0, 243, 255, 0.3); border-radius: 10px; display: block;
    max-width: 100%; max-height: 80vh; /* Mobilde sığması için */
}

/* UI KATMANI */
.ui-layer { position: absolute; top: 10px; width: 800px; max-width: 95%; display: flex; justify-content: space-between; pointer-events: none; z-index: 50; }
.hud {
    display: flex; width: 100%; justify-content: space-between; align-items: center;
    text-shadow: 0 0 10px currentColor; font-weight: bold; font-size: 0.9rem;
    background: rgba(0,0,0,0.5); padding: 10px; border-radius: 10px;
}
.p1-score { color: #ffff00; } .p2-score { color: #00ff00; } .level-info { color: #00f3ff; text-align: center; } .lives-info { color: #ff0055; }

/* COMBO KUTUSU */
.combo-box {
    position: absolute; top: 60px; left: 50%; transform: translateX(-50%);
    font-size: 1.5rem; color: #ffeb3b; font-weight: 900;
    text-shadow: 0 0 10px #ffeb3b, 0 0 20px #ff5722;
    transition: opacity 0.3s, transform 0.1s;
}

/* POWERUP DURUMU */
#powerup-status {
    position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%);
    color: #fff; font-size: 1rem; font-weight: bold; text-shadow: 0 0 10px #fff;
}

/* BUTONLAR */
.back-link, .control-panel { position: absolute; top: 20px; z-index: 300; }
.back-link { left: 20px; color: #888; text-decoration: none; border: 1px solid #444; padding: 5px 10px; border-radius: 5px; background: rgba(0,0,0,0.8); }
.control-panel { right: 20px; display: flex; gap: 10px; }
.icon-btn { background: rgba(0,0,0,0.8); color: #00f3ff; border: 1px solid #00f3ff; width: 35px; height: 35px; border-radius: 5px; cursor: pointer; display: flex; align-items: center; justify-content: center; }

/* MOBİL KONTROLLER */
#mobile-controls {
    position: absolute; bottom: 20px; left: 20px; z-index: 300; display: none; /* JS ile mobilde açılacak */
}
.dpad { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.dpad-row { display: flex; gap: 5px; }
.dpad-btn {
    width: 60px; height: 60px; background: rgba(0, 243, 255, 0.2);
    border: 2px solid #00f3ff; border-radius: 10px; color: #fff; font-size: 1.5rem;
    touch-action: manipulation; cursor: pointer;
}
.dpad-btn:active { background: #00f3ff; color: #000; }
.dpad-center { width: 60px; height: 60px; }

/* MENÜLER */
.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 200; }
.glow-text { font-size: 3rem; text-align: center; color: #fff; text-shadow: 0 0 20px #00f3ff; margin-bottom: 30px; }
.menu-btns { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.neon-btn { background: transparent; color: #00f3ff; font-family: 'Orbitron', sans-serif; font-size: 1.1rem; padding: 10px 25px; border: 2px solid #00f3ff; border-radius: 5px; cursor: pointer; margin-top: 10px; text-transform: uppercase; }
.neon-btn:hover { background: #00f3ff; color: #000; box-shadow: 0 0 20px #00f3ff; }

/* MOBİL UYUMLULUK */
@media (max-width: 850px) {
    canvas { width: 95%; height: auto; }
    #mobile-controls { display: block; bottom: 10px; left: 50%; transform: translateX(-50%); opacity: 0.7;}
    .hud { font-size: 0.7rem; }
    .glow-text { font-size: 2rem; }
    .neon-btn { padding: 8px 20px; font-size: 0.9rem; }
}