html, body, #canvas-container {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* WebGL ve CSS3D katmanlarının birbirini delebilmesi için transparanlık şart */
    background: transparent !important;
    background-color: transparent !important;
}

/* Eğer ekranın arkasında tarayıcının beyazlığı kalmasın istiyorsan, 
   en arka katman olan CSS3D renderer elementinin kendisini siyaha boyayabiliriz: */
div[style*="position: absolute"][style*="z-index: 0"] {
    background-color: #050505 !important; /* Labirent sis renginle uyumlu derin siyah */
}

#canvas-container { position: absolute; top: 0; left: 0; z-index: 1; }

#input-overlay {
	position: absolute; top: 0; left: 0; width: 100vw; height: 100vh;
	background: rgba(0, 0, 0, 0.6); display: flex;
	flex-direction: column; justify-content: center; align-items: center;
	z-index: 999; pointer-events: none;
}

#key-up-arrow {
	font-size: 80px; color: #ff0055;
	text-shadow: 0 0 15px #ff0055, 0 0 5px #fff;
	margin-bottom: 20px; animation: glow 1s infinite alternate;
}

#press-key-text {
	color: #ffffff; font-size: 24px; letter-spacing: 2px;
	text-shadow: 0 0 5px #ff0055;
}

@keyframes glow {
	0% { transform: scale(1); text-shadow: 0 0 10px #ff0055; }
	100% { transform: scale(1.1); text-shadow: 0 0 30px #ff0055, 0 0 10px #fff; }
}

/* Sol Alta Sabitlenen Harita Paneli */
/* Sağ Alta Sabitlenen Harita Paneli (Butonun Hemen Üzerinde) */

#map-overlay {
	position: absolute; bottom: 25px; left: 20px; /* left: 20px silindi, right ve bottom ayarlandı */
	background: rgba(5, 5, 10, 0.95);
	border: 2px solid #00ff55;
	box-shadow: 0 0 20px rgba(0, 255, 85, 0.3);
	padding: 15px; display: none; z-index: 1000;
	flex-direction: column; align-items: center;
	border-radius: 8px;
	user-select: none;
	pointer-events: auto;
}

#map-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}

#map-title { color: #00ff55; font-size: 11px; letter-spacing: 2px; font-weight: bold; }

.map-row { display: flex; }
.map-cell { width: 15px; height: 15px; margin: 1px; }
.map-wall { background-color: #223322; border: 1px solid #00aa33; }
.map-path { background-color: #050505; }
.map-player { 
	background-color: #ff0055; 
	border-radius: 50%; 
	box-shadow: 0 0 8px #ff0055;
	animation: blink 0.8s infinite alternate;
}

@keyframes blink { 0% { opacity: 0.4; } 100% { opacity: 1; } }

/* Sağ Alt Neon MAP Butonu */
#map-toggle-btn {
	position: absolute; bottom: 20px; right: 20px;
	width: 45px; height: 45px;
	background: rgba(5, 5, 10, 0.8);
	border: 2px solid #00ff55;
	box-shadow: 0 0 10px #00ff55;
	color: #00ff55; font-size: 12px; font-weight: bold;
	display: flex; justify-content: center; align-items: center;
	cursor: pointer; border-radius: 50%; z-index: 1001;
	transition: all 0.2s ease;
	user-select: none;
	font-family: 'Courier New', monospace;
}
#map-toggle-btn:hover {
	transform: scale(1.1); box-shadow: 0 0 20px #00ff55, inset 0 0 5px #00ff55;
}

/* Sağ Üst Neon Ses Butonu */
#mute-btn {
	position: absolute; top: 20px; right: 20px;
	width: 45px; height: 45px;
	background: rgba(5, 5, 10, 0.8);
	border: 2px solid #00ff55;
	box-shadow: 0 0 10px #00ff55;
	color: #00ff55; font-size: 20px;
	display: flex; justify-content: center; align-items: center;
	cursor: pointer; border-radius: 50%; z-index: 1001;
	transition: all 0.2s ease;
	user-select: none;
}
#mute-btn:hover {
	transform: scale(1.1); box-shadow: 0 0 20px #00ff55, inset 0 0 5px #00ff55;
}
#mute-btn.muted {
	border-color: #ff0055; color: #ff0055;
	box-shadow: 0 0 10px #ff0055;
}
#mute-btn.muted:hover {
	box-shadow: 0 0 20px #ff0055, inset 0 0 5px #ff0055;
}


/* Tavandan Sarkan LCD Ekranların Dijital Titreme Efekti */
@keyframes screenFlicker {
    0% { opacity: 0.95; }
    50% { opacity: 0.85; }
    100% { opacity: 1; }
}