@font-face { font-family: 'PressStart'; src: url('../assets/fonts/PressStart2P-Regular.ttf'); }
/* La letra 'Pixelify' de antes confundía C con O, 5 con S y 2/3 con 8 (DUDAS 25). El nombre se mantiene para no
   tocar cada pantalla, pero ahora apunta a una letra común y clara de la compu. El archivo viejo sigue en assets/fonts. */
@font-face { font-family: 'Pixelify'; src: local('Segoe UI Semibold'), local('SegoeUI-Semibold'), local('Roboto Medium'), local('Roboto-Medium'), local('Arial'); font-weight: 400 600; }
@font-face { font-family: 'Pixelify'; src: local('Segoe UI Bold'), local('SegoeUI-Bold'), local('Roboto Bold'), local('Roboto-Bold'), local('Arial Bold'), local('Arial-BoldMT'); font-weight: 700 900; }

html, body { margin: 0; height: 100%; background: #000; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
#escenario { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; overflow: hidden; background: #008751; }
#temblor { position: absolute; inset: 0; }
#lienzo { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; image-rendering: pixelated; image-rendering: crisp-edges; }
#capa-mundo, #capa-hud, #hud { position: absolute; inset: 0; pointer-events: none; }
#capa-mundo > *, #capa-hud > *, #hud > * { pointer-events: auto; }
#capa-mundo { z-index: 1; } .ciego { z-index: 2; } #capa-hud { z-index: 3; } #hud { z-index: 4; } #tactil { z-index: 5; } #fundido { z-index: 9; }

/* ojos perdidos: media pantalla negra con borde dentado */
.ciego { position: absolute; top: 0; width: 960px; height: 1080px; background: #000; display: none; }
#ciego-izq { left: 0; clip-path: polygon(0 0, 100% 0, 97% 8%, 100% 16%, 96% 25%, 100% 34%, 97% 44%, 100% 53%, 96% 63%, 100% 72%, 97% 82%, 100% 91%, 98% 100%, 0 100%); }
#ciego-der { right: 0; clip-path: polygon(100% 0, 0 0, 3% 8%, 0 16%, 4% 25%, 0 34%, 3% 44%, 0 53%, 4% 63%, 0 72%, 3% 82%, 0 91%, 2% 100%, 100% 100%); }
body.ojo-izq #ciego-izq, body.ojo-der #ciego-der { display: block; }
body.ojo-izq.ojo-der .ciego { width: 690px; }
body.titila .ciego { animation: titila 0.5s steps(2) infinite; }

/* piezas de interfaz del video */
.marco { background: #FFF1E8; color: #1D2B53; border: 6px solid #1D2B53; box-shadow: 8px 8px 0 #1D2B53; }
body, .lee, .nota, .globo, .cartel { font-variant-ligatures: none; font-feature-settings: "liga" 0, "clig" 0; }
.lee { font-family: 'Pixelify'; font-weight: 600; line-height: 1.15; }
.pixel { font-family: 'PressStart'; }
.nota { position: absolute; top: 70px; max-width: 780px; padding: 14px 22px; font-size: 38px; }
.lado { position: absolute; left: 90px; }
body.panel-der .lado { left: auto; right: 90px; }
.zona { position: absolute; top: 0; height: 1080px; left: 960px; width: 960px; display: flex; align-items: center; justify-content: center; }
body.panel-der .zona { left: 0; }
body.ojo-izq.ojo-der .zona { left: 480px; }

#te-falta { position: absolute; bottom: 60px; padding: 12px 20px; font-size: 32px; background: #1D2B53; color: #FFF1E8; border-color: #FF004D; display: none; max-width: 760px; }
#te-falta b { color: #FF004D; font-family: 'PressStart'; font-weight: 400; font-size: 22px; margin-right: 10px; }
#ayuda-teclas { position: absolute; right: 30px; bottom: 18px; font-size: 26px; color: #FFF1E8; text-shadow: 3px 3px 0 #1D2B53; opacity: 0.9; }
body.panel-der #ayuda-teclas { right: auto; left: 30px; }

.cartel { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.cartel span { position: absolute; left: 0; bottom: 0; transform: translateX(-50%); white-space: nowrap; padding: 10px 14px 9px;
  background: #FFF1C1; color: #1D2B53; border: 4px solid #1D2B53; box-shadow: 0 6px 0 #1D2B53; font-family: 'PressStart'; font-size: 20px; line-height: 1; }
.cartel.hecho span { background: #B8F5A0; }
.cartel.cerrado span { background: #CFC8D8; color: #5F574F; }
.cartel.caja span { background: #FFEC27; }
/* hora de la compu en la plaza (aspecto Mezcla) */
.hora-chip { position: absolute; right: 30px; top: 118px; padding: 12px 18px; font-family: 'PressStart'; font-size: 20px; color: #1D2B53;
  background: #FFF1C1; border: 4px solid #1D2B53; box-shadow: 0 6px 0 #1D2B53; }

.globo { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.globo .ancla { position: absolute; left: -290px; bottom: 0; width: 580px; }
.globo .marco { position: relative; padding: 14px 20px 18px; animation: aparece 0.15s steps(3); }
.globo b { display: block; font-family: 'PressStart'; font-weight: 400; font-size: 26px; color: #C8003C; margin-bottom: 8px; }
.globo span { display: block; font-family: 'Pixelify'; font-weight: 600; font-size: 36px; line-height: 1.12; }
.globo .sigue { position: absolute; right: 12px; bottom: 6px; font-family: 'PressStart'; font-size: 16px; color: #FF004D; animation: titila 0.6s steps(2) infinite; }
.cola { position: absolute; left: 272px; bottom: -32px; width: 32px; height: 32px; background: #1D2B53; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.cola i { position: absolute; left: 8px; top: 0; width: 16px; height: 14px; background: #FFF1E8; clip-path: polygon(0 0, 100% 0, 50% 100%); }

.pista-e { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.pista-e div { position: absolute; left: 0; bottom: 0; transform: translateX(-50%); white-space: nowrap; display: flex; gap: 8px; align-items: center;
  font-family: 'Pixelify'; font-weight: 700; font-size: 26px; color: #FFF1E8; text-shadow: 3px 3px 0 #1D2B53; animation: flota 0.8s steps(2) infinite; }
.pista-e kbd { font-family: 'PressStart'; font-size: 20px; background: #FFEC27; color: #1D2B53; border: 4px solid #1D2B53; padding: 4px 8px; text-shadow: none; }
.marca-npc { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.marca-npc span { position: absolute; left: 0; bottom: 0; transform: translateX(-50%); font-family: 'PressStart'; font-size: 34px; color: #FFEC27;
  text-shadow: 4px 4px 0 #1D2B53; animation: flota 0.8s steps(2) infinite; }

.sello { position: absolute; padding: 22px 36px; border: 8px solid #1D2B53; box-shadow: 10px 10px 0 #1D2B53; font-family: 'PressStart';
  font-size: 46px; color: #1D2B53; white-space: nowrap; animation: golpe 0.18s steps(3); }
.pieza { left: 50%; top: 40%; transform: translate(-50%, -50%); background: #00E436; }

#fundido { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.22s steps(4); }
#fundido.negro { opacity: 1; pointer-events: auto; }

/* táctil */
#tactil { position: absolute; inset: 0; pointer-events: none; display: none; }
body.tactil #tactil { display: block; }
#tactil button { pointer-events: auto; position: absolute; font-family: 'PressStart'; color: #1D2B53; background: rgba(255,241,232,0.85);
  border: 6px solid #1D2B53; font-size: 44px; touch-action: none; }
#cruz { position: absolute; left: 60px; bottom: 60px; width: 390px; height: 390px; }
#cruz button { width: 130px; height: 130px; padding: 0; }
.t-ar { left: 130px; top: 0; } .t-ab { left: 130px; top: 260px; } .t-iz { left: 0; top: 130px; } .t-de { left: 260px; top: 130px; }
#t-a { right: 80px; bottom: 120px; width: 190px; height: 190px; border-radius: 50%; background: rgba(255,236,39,0.9) !important; }
#t-b { right: 300px; bottom: 60px; width: 150px; height: 110px; font-size: 26px !important; }
body.sin-cruz #cruz, body.sin-cruz #t-a { display: none; }
#teclado-tactil { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: none; grid-template-columns: repeat(10, 120px); gap: 8px; pointer-events: auto; }
#teclado-tactil.ver { display: grid; }
#teclado-tactil button { position: static; width: 120px; height: 100px; font-size: 36px; }

@keyframes aparece { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes golpe { from { transform: translate(-50%, -50%) scale(2.4); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes titila { 50% { opacity: 0.25; } }
@keyframes flota { 50% { transform: translate(-50%, -8px); } }
@keyframes temblor { 0% { transform: translate(-12px, 6px); } 33% { transform: translate(10px, -6px); } 66% { transform: translate(-6px, 4px); } 100% { transform: none; } }
.tiembla { animation: temblor 0.2s steps(4); }
/* con el teclado en pantalla: el ESC sube a la esquina y TE FALTA queda arriba del teclado */
body.tactil.sin-cruz #t-b { top: 24px; bottom: auto; right: 24px; }
body.tactil.sin-cruz #te-falta { bottom: 370px; }
/* en el título y el menú no hay castigos a la vista */
body.sin-ciego .ciego { display: none !important; }