body { margin: 0; overflow: hidden; font-family: 'Arial', sans-serif; background: #000; touch-action: manipulation; }
#game { position: relative; width: 100vw; height: 100vh; }
#bg { position: absolute; width: 100%; height: 100%; object-fit: cover; z-index: 1; }

/* Capas del personaje */
#calva, #cabello, #clienteEstado, #silla { 
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 100%; 
    pointer-events: none; 
}

@media(min-width: 768px) { 
    #calva, #cabello, #clienteEstado, #silla { width: 50%; } 
}

#calva { z-index: 2; }
#cabello { z-index: 5; transition: clip-path 0.3s ease; }
#clienteEstado { z-index: 10; }
#silla { z-index: 15; }

/* UI y Paneles */
#hud { position: absolute; top: 15px; left: 50%; transform: translateX(-50%); z-index: 50; }
#stats { background: rgba(233, 30, 99, 0.9); color: white; padding: 10px 25px; border-radius: 30px; font-size: 1.3rem; border: 2px solid #fff; }

#panel { position: absolute; right: 5%; top: 25%; width: 35%; z-index: 100; display: flex; flex-direction: column; align-items: center; background: rgba(0,0,0,0.6); padding: 15px; border-radius: 20px; color: white; }

#popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); display: flex; justify-content: center; align-items: center; z-index: 1000; }
.popup-content { width: 95%; max-width: 600px; }
#popupImg { width: 100%; cursor: pointer; border: none; }

#formRegistro { display: flex; flex-direction: column; width: 85%; margin: -80px auto 0; position: relative; }
#formRegistro input { padding: 12px; margin: 5px 0; border-radius: 8px; border: none; font-size: 16px; }
#enviarBtn { background: #4CAF50; color: white; padding: 15px; border: none; border-radius: 8px; font-size: 20px; font-weight: bold; cursor: pointer; margin-top: 10px; }

#ui-inicio { position: absolute; bottom: 20%; left: 50%; transform: translateX(-50%); z-index: 200; }
#startBtn { padding: 20px 60px; font-size: 30px; border-radius: 50px; background: #e91e63; color: white; border: 4px solid #fff; cursor: pointer; font-weight: bold; }

/* Elementos de Minijuegos */
.memoria-btn { width: 65px; height: 65px; margin: 5px; border: 2px solid #fff; border-radius: 10px; background: #fff; }
.tinte-btn { width: 55px; height: 55px; margin: 4px; border-radius: 50%; border: 3px solid #fff; cursor: pointer; }

#bar { width: 35px; height: 200px; background: rgba(255,255,255,0.3); border: 2px solid #fff; position: relative; border-radius: 15px; }
#cursor { position: absolute; width: 100%; height: 12px; background: #00fffb; box-shadow: 0 0 10px #00fffb; }

.hidden { display: none !important; }