* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
body { background: #050510; color: #fff; overflow: hidden; height: 100vh; width: 100vw; }

/* Ekran Yönetimi */
.screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; flex-direction: column; }
.screen.active { display: flex; }

/* Ana Menü */
#main-menu { background: radial-gradient(circle at center, #1a1a3a 0%, #050510 100%); align-items: center; justify-content: space-between; padding: 2rem; }
header { width: 100%; display: flex; justify-content: flex-start; }
.logo { font-size: 1.5rem; font-weight: 700; color: #00ffff; text-shadow: 0 0 10px #00ffff; }
.logo span { color: #ff00ff; font-weight: 300; }

.menu-content { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; }
h1 { font-size: 3rem; margin-bottom: 1rem; background: -webkit-linear-gradient(#00ffff, #ff00ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
p { color: #aaa; margin-bottom: 3rem; }

/* Butonlar */
.buttons { display: flex; flex-direction: column; gap: 1.5rem; width: 100%; max-width: 400px; }
.sub-buttons { display: flex; gap: 1rem; }
button { cursor: pointer; border: none; outline: none; border-radius: 15px; font-weight: 600; transition: all 0.3s ease; }
.btn-glow { padding: 1.5rem; font-size: 1.2rem; background: transparent; color: #00ffff; border: 2px solid #00ffff; box-shadow: 0 0 20px rgba(0, 255, 255, 0.4) inset, 0 0 20px rgba(0, 255, 255, 0.4); text-transform: uppercase; }
.btn-glow:hover { background: #00ffff; color: #000; box-shadow: 0 0 40px #00ffff; transform: scale(1.05); }
.btn-glow.small { padding: 0.8rem 2rem; font-size: 1rem; margin-top: 1rem; }

.btn-glass { flex: 1; padding: 1rem; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); color: #fff; border: 1px solid rgba(255, 255, 255, 0.1); }
.btn-glass:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-3px); }

footer { color: #555; font-size: 0.9rem; }

/* Oyun Ekranı */
#game-screen { background: #000; position: relative; }

/* ÖNEMLİ: transform: scaleX(-1) KALDIRILDI — aynalama JS içinde yapılıyor */
#webcam {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none; /* Video gizli, canvas üzerinden çiziliyor */
}

#output_canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    object-fit: cover;
    /* transform: scaleX(-1) KALDIRILDI — JS içinde manuel aynalama var */
}

.exit-btn { position: absolute; top: 20px; left: 20px; z-index: 20; width: auto; }
#loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 15; font-size: 1.5rem; color: #00ffff; text-shadow: 0 0 10px #00ffff; }

/* Modallar */
.modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.8); backdrop-filter: blur(5px); display: none; justify-content: center; align-items: center; z-index: 100; }
.modal.active { display: flex; }
.modal-content { background: rgba(20, 20, 40, 0.9); padding: 2.5rem; border-radius: 20px; border: 1px solid #00ffff; width: 90%; max-width: 500px; box-shadow: 0 0 30px rgba(0, 255, 255, 0.2); }
.modal-content h2 { color: #00ffff; margin-bottom: 1.5rem; border-bottom: 1px solid rgba(0, 255, 255, 0.2); padding-bottom: 0.5rem; }
.modal-content ul { list-style: none; line-height: 2; margin-bottom: 1.5rem; }
.setting-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; font-size: 1.1rem; }
.btn-close { margin-top: 1.5rem; width: 100%; padding: 1rem; background: #333; color: #fff; border-radius: 10px; }
.btn-close:hover { background: #555; }

/* Mobil Uyum */
@media (max-width: 600px) { h1 { font-size: 2rem; } .sub-buttons { flex-direction: column; } }