/* Hide and Snipe — la pantalla. Aspecto: calcomanías de papel con borde de tinta, como el contorno de los modelos.
   Todo se mide contra el tamaño de la letra de #hud, así en una pantalla chica se achica solo. */
@font-face { font-family: 'Rounded'; src: url('../fonts/mplus-rounded-800.woff2') format('woff2'); font-weight: 800; font-display: block; }

:root { --tinta: #231B2E; --papel: #FFF6E3; --papel2: #F3E4C4; --oro: #FFC93C; --rojo: #FF5468; --verde: #35C46F; --azul: #3BA7FF; --rosa: #FF5FD2; --gris: #B9B2C6; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--tinta); user-select: none; -webkit-user-select: none; touch-action: none; }
canvas#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#hud { position: fixed; inset: 0; pointer-events: none; font-family: 'Rounded', 'Arial Rounded MT Bold', system-ui, sans-serif; font-weight: 800; font-size: clamp(10px, min(1.75vh, 1.05vw), 22px); color: #fff; overflow: hidden; }
#hud button, #hud input { pointer-events: auto; font: inherit; color: inherit; cursor: pointer; }
.t { color: #fff; -webkit-text-stroke: 0.32em var(--tinta); paint-order: stroke fill; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.05; }
.chico { font-size: 0.72em; }
kbd { font: inherit; font-size: 0.62em; background: var(--tinta); color: #fff; border-radius: 0.5em; padding: 0.12em 0.45em; line-height: 1.2; }
.ico { display: inline-block; width: 1.6em; height: 1.6em; flex: none; }
.ico svg, button svg { width: 100%; height: 100%; display: block; overflow: visible; }

.tarjeta { background: var(--papel); border: 0.2em solid var(--tinta); border-radius: 0.95em; box-shadow: 0 0.28em 0 var(--tinta); }
.tarjeta .t, .panel .t { -webkit-text-stroke: 0; color: var(--tinta); }
.pastilla { display: flex; align-items: center; gap: 0.35em; height: 2.5em; padding: 0 0.85em 0 0.3em; border: 0.2em solid var(--tinta); border-radius: 1.3em; box-shadow: 0 0.25em 0 var(--tinta); background: var(--oro); }
.pastilla b { font-size: 1.15em; }
.pastilla .ico { width: 1.75em; height: 1.75em; }
.pastilla.estr { background: #8E7CFF; }
.pastilla.grande { font-size: 1.5em; align-self: center; }
.redondo { width: 2.6em; height: 2.6em; padding: 0.42em; border-radius: 50%; border: 0.2em solid var(--tinta); box-shadow: 0 0.25em 0 var(--tinta); background: var(--papel); transition: transform 0.08s; }
.redondo:active, .cuadro:active, .boton:active, .flecha:active { transform: translateY(0.2em); box-shadow: 0 0.06em 0 var(--tinta); }
.redondo.apagado { background: var(--gris); }

/* ── arriba */
#arriba { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: flex-start; padding: max(0.9em, env(safe-area-inset-top)) max(1em, env(safe-area-inset-right)) 0 max(1em, env(safe-area-inset-left)); gap: 1em; }
#izq, #der { display: flex; align-items: center; gap: 0.6em; flex: 1 1 0; }
#der { justify-content: flex-end; }
#rotulo { display: flex; align-items: center; gap: 0.6em; padding: 0.42em 0.9em 0.42em 0.35em; }
#rotulo > b { background: var(--rojo); color: #fff !important; border: 0.16em solid var(--tinta); border-radius: 0.7em; padding: 0.32em 0.5em; font-size: 1.1em; }
#rotulo > div { display: flex; flex-direction: column; gap: 0.15em; }
#rotulo #reloj { opacity: 0.7; }
#centro { display: flex; flex-direction: column; align-items: center; gap: 0.3em; flex: none; }
#fila { display: flex; gap: 0.18em; padding: 0.35em 0.7em; background: rgba(35, 27, 46, 0.72); border: 0.2em solid var(--tinta); border-radius: 1.2em; }
#fila i { width: 1.45em; height: 2em; display: block; transition: transform 0.25s; }
#fila i.ya { transform: scale(0.92); }
#fila i.recien { animation: salto 0.5s; }
#cuenta { font-size: 0.85em; }
@keyframes salto { 0% { transform: scale(1.9) rotate(-12deg); } 60% { transform: scale(0.8); } 100% { transform: scale(0.92); } }

/* ── abajo a la izquierda */
#acciones { position: absolute; left: max(1em, env(safe-area-inset-left)); bottom: max(1em, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 0.7em; align-items: flex-start; }
#acciones .fila { display: flex; gap: 0.6em; }
#ventanas { display: flex; align-items: center; gap: 0.35em; padding: 0.3em 0.35em; }
.flecha { position: relative; width: 2.5em; height: 2.5em; padding: 0.3em; border: 0.18em solid var(--tinta); border-radius: 0.7em; background: var(--oro); box-shadow: 0 0.2em 0 var(--tinta); }
.flecha kbd { position: absolute; right: -0.5em; top: -0.6em; }
.flecha.no { background: var(--gris); opacity: 0.55; }
#paradas { display: flex; gap: 0.3em; padding: 0 0.3em; }
#paradas i { width: 2.1em; height: 2.3em; border: 0.17em solid var(--tinta); border-radius: 0.5em; background: var(--papel2); padding: 0.22em; transition: transform 0.15s, background 0.15s; }
#paradas i.aca { background: var(--rojo); transform: translateY(-0.25em) scale(1.12); }
.cuadro { position: relative; width: 4.5em; height: 4.5em; padding: 0.4em 0.3em 0.25em; border: 0.2em solid var(--tinta); border-radius: 1em; box-shadow: 0 0.28em 0 var(--tinta); display: flex; flex-direction: column; align-items: center; justify-content: space-between; overflow: visible; }
.cuadro .ico { width: 2.3em; height: 2.3em; }
.cuadro .lbl { font-size: 0.7em; }
.cuadro kbd { position: absolute; right: -0.45em; top: -0.55em; }
.cuadro em { position: absolute; left: -0.3em; top: -0.5em; font-style: normal; font-size: 0.68em; background: var(--papel); color: var(--tinta); -webkit-text-stroke: 0; border: 0.2em solid var(--tinta); border-radius: 0.8em; padding: 0.1em 0.45em; }
.cuadro.azul { background: var(--azul); } .cuadro.amarillo { background: var(--oro); } .cuadro.rosa { background: var(--rosa); }
.cuadro.no { background: var(--gris); filter: saturate(0.3); }
.cuadro .nivel { position: absolute; left: 0.4em; right: 0.4em; bottom: -0.75em; height: 0.5em; border: 0.14em solid var(--tinta); border-radius: 0.4em; background: linear-gradient(90deg, #7DFF9B var(--k, 100%), var(--tinta) var(--k, 100%)); }
#btPulso { display: none; } .con-pulso #btPulso { display: flex; }

/* ── abajo a la derecha */
#arma { position: absolute; right: max(1em, env(safe-area-inset-right)); bottom: max(1em, env(safe-area-inset-bottom)); padding: 0.5em 0.75em 0.6em; min-width: 13em; display: flex; flex-direction: column; gap: 0.4em; }
#arma .cab { display: flex; justify-content: space-between; align-items: center; gap: 0.8em; }
#armaNombre { font-size: 1.15em; }
#pasos { display: flex; gap: 0.2em; }
#pasos i { font-style: normal; font-size: 0.72em; padding: 0.12em 0.4em; border-radius: 0.5em; border: 0.17em solid var(--tinta); background: var(--papel2); color: var(--tinta); }
#pasos i.aca { background: var(--tinta); color: var(--oro); }
#balas { display: flex; gap: 0.16em; flex-wrap: wrap; max-width: 14em; }
#balas i { width: 0.78em; height: 2.1em; display: block; }
#balas i.gastada { opacity: 0.22; }
#arma .pie { display: flex; align-items: center; gap: 0.35em; }
#arma .pie .ico { width: 1.2em; height: 1.2em; }
#recarga { margin-left: auto; font-size: 0.72em; color: var(--rojo) !important; visibility: hidden; }
.recargando #recarga { visibility: visible; animation: late 0.5s infinite alternate; }
#barraRecarga { height: 0.36em; border-radius: 0.3em; background: rgba(35, 27, 46, 0.15); overflow: hidden; }
#barraRecarga i { display: block; height: 100%; width: 0; background: var(--rojo); }
@keyframes late { from { opacity: 1; } to { opacity: 0.35; } }

/* ── la mira */
#mirilla { position: absolute; inset: 0; display: none; }
.con-mira #mirilla { display: block; }
#mirilla svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#mirilla .negro { fill: #0b0810; }
#mirilla .aro { fill: none; stroke: #0b0810; stroke-width: 3.2; } #mirilla .aro2 { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 0.5; }
.reticula path { stroke: #120c18; stroke-width: 0.34; fill: none; } .reticula .gruesa { stroke-width: 1.5; } .reticula .fina { stroke-width: 0.3; } .reticula .punto { fill: #FF3B4E; }
#aire { position: absolute; left: 50%; top: calc(50% + 31vmin); width: 9em; height: 0.6em; margin-left: -4.5em; border: 0.16em solid var(--tinta); border-radius: 0.4em; background: rgba(0, 0, 0, 0.5); overflow: hidden; }
#aire i { display: block; height: 100%; width: 100%; background: #7DE3FF; } #aire.poco i { background: var(--rojo); }
#aumento { position: absolute; left: calc(50% + 25vmin); top: calc(50% + 27vmin); font-size: 1.3em; }
#cruz { position: absolute; left: 50%; top: 50%; display: none; }
.apuntando:not(.con-mira) #cruz { display: block; }
#cruz i { position: absolute; background: #fff; box-shadow: 0 0 0 0.09em var(--tinta); }
#cruz i:nth-child(1) { left: -1.05em; top: -0.07em; width: 0.6em; height: 0.14em; } #cruz i:nth-child(2) { left: 0.45em; top: -0.07em; width: 0.6em; height: 0.14em; }
#cruz i:nth-child(3) { left: -0.07em; top: -1.05em; width: 0.14em; height: 0.6em; } #cruz i:nth-child(4) { left: -0.07em; top: 0.45em; width: 0.14em; height: 0.6em; }
#cruz b { position: absolute; left: -0.11em; top: -0.11em; width: 0.22em; height: 0.22em; border-radius: 50%; background: var(--rojo); box-shadow: 0 0 0 0.08em var(--tinta); }
#marca { position: absolute; left: 50%; top: 50%; width: 3.4em; height: 3.4em; margin: -1.7em; opacity: 0; background: linear-gradient(45deg, transparent 44%, #fff 44%, #fff 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, #fff 44%, #fff 56%, transparent 56%); -webkit-mask: radial-gradient(circle, transparent 28%, #000 30%); mask: radial-gradient(circle, transparent 28%, #000 30%); filter: drop-shadow(0 0 0.1em var(--tinta)); }
#marca.si { animation: marca 0.32s; } #marca.oro { background: linear-gradient(45deg, transparent 42%, var(--oro) 42%, var(--oro) 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, var(--oro) 42%, var(--oro) 58%, transparent 58%); }
@keyframes marca { 0% { opacity: 1; transform: scale(1.5); } 100% { opacity: 0; transform: scale(0.9); } }

/* ── el dron */
#dron { position: absolute; inset: 0; display: none; box-shadow: inset 0 0 9em rgba(0, 20, 40, 0.55); }
.en-dron #dron { display: block; }
#dron .esq { position: absolute; width: 3em; height: 3em; border: 0.28em solid #fff; filter: drop-shadow(0 0 0.1em var(--tinta)); }
#dron .a { left: 7%; top: 14%; border-right: 0; border-bottom: 0; } #dron .b { right: 7%; top: 14%; border-left: 0; border-bottom: 0; }
#dron .c { left: 7%; bottom: 22%; border-right: 0; border-top: 0; } #dron .d { right: 7%; bottom: 22%; border-left: 0; border-top: 0; }
#dron .rotulo { position: absolute; left: 50%; top: 14%; transform: translateX(-50%); display: flex; align-items: center; gap: 0.5em; }
#dron .rec { width: 0.8em; height: 0.8em; border-radius: 50%; background: var(--rojo); box-shadow: 0 0 0 0.16em var(--tinta); animation: late 0.6s infinite alternate; }
#dron .bateria { position: absolute; left: 50%; bottom: 23%; transform: translateX(-50%); display: flex; align-items: center; gap: 0.4em; }
#dron .barra { width: 12em; height: 0.9em; border: 0.2em solid var(--tinta); border-radius: 0.5em; background: rgba(0, 0, 0, 0.5); overflow: hidden; }
#dron .barra i { display: block; height: 100%; background: #7DFF9B; } #dron .barra.poco i { background: var(--rojo); }
#dron .ayuda { position: absolute; left: 50%; bottom: 17.5%; transform: translateX(-50%); font-size: 0.72em; white-space: nowrap; }

/* ── el lobby */
#lobbyInfo { position: absolute; left: 50%; top: max(0.9em, env(safe-area-inset-top)); transform: translateX(-50%); display: none; }
.modo-lobby #lobbyInfo { display: block; }
.piso { display: flex; align-items: center; gap: 0.7em; padding: 0.35em 1em 0.35em 0.4em; }
.piso > b { width: 1.9em; height: 1.9em; border-radius: 0.6em; border: 0.16em solid var(--tinta); background: var(--c, var(--rojo)); color: #fff !important; display: grid; place-items: center; font-size: 1.35em; }
.piso > div { display: flex; flex-direction: column; gap: 0.12em; }
#pisoPuntos { flex-direction: row !important; gap: 0.25em !important; margin-left: 0.4em; }
#pisoPuntos i { width: 1em; height: 1em; border-radius: 50%; border: 0.16em solid var(--tinta); background: var(--papel2); } #pisoPuntos i.ya { background: var(--verde); }
#puertaInfo { position: absolute; left: 50%; top: 20%; transform: translate(-50%, 0) scale(0.8); opacity: 0; transition: opacity 0.15s, transform 0.15s; padding: 0.6em 1.1em; display: flex; flex-direction: column; align-items: center; gap: 0.3em; text-align: center; }
#puertaInfo.ver { opacity: 1; transform: translate(-50%, 0) scale(1); }
#puertaInfo > b { background: var(--rojo); color: #fff !important; border: 0.16em solid var(--tinta); border-radius: 0.7em; padding: 0.2em 0.6em; margin-top: -1.4em; }
#pNombre { font-size: 1.3em; } #pEstr { display: flex; gap: 0.15em; } #pEstr i { width: 1.7em; height: 1.7em; }
#puertaInfo .entra { background: var(--verde); color: #fff !important; border: 0.2em solid var(--tinta); border-radius: 0.8em; padding: 0.3em 0.8em; font-size: 0.85em; }
#puertaInfo.cerrada .entra { background: var(--gris); }
#guia { position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%); text-align: center; font-size: 1.05em; max-width: 80vw; }

/* ── avisos */
#flotan { position: absolute; inset: 0; }
#flotan b { position: absolute; transform: translate(-50%, -50%); font-size: 1.5em; white-space: nowrap; animation: flota 1.1s forwards; -webkit-text-stroke: 0.3em var(--tinta); paint-order: stroke fill; }
#flotan b.bien { color: #8CFFB0; } #flotan b.oro { color: var(--oro); font-size: 1.9em; } #flotan b.ojo { color: var(--rojo); font-size: 2.6em; } #flotan b.mal { color: #fff; opacity: 0.8; font-size: 1em; }
@keyframes flota { 0% { opacity: 0; margin-top: 0.6em; transform: translate(-50%, -50%) scale(0.5); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 30% { transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; margin-top: -3.2em; } }
#aviso { position: absolute; left: 50%; top: 39%; transform: translateX(-50%); font-size: 1.25em; opacity: 0; transition: opacity 0.2s; text-align: center; }
#aviso.ver { opacity: 1; }
#titulo { position: absolute; left: 0; right: 0; top: 30%; display: flex; flex-direction: column; align-items: center; gap: 0.3em; opacity: 0; pointer-events: none; }
#titulo.ver { animation: titulo 2.6s forwards; }
#tituloNum { background: var(--rojo); border: 0.18em solid var(--tinta); border-radius: 0.6em; padding: 0.15em 0.6em; -webkit-text-stroke: 0; font-size: 1.3em; }
#tituloNombre { font-size: 3.4em; } #tituloSub { font-style: normal; font-size: 1.15em; color: var(--oro); }
@keyframes titulo { 0% { opacity: 0; transform: scale(1.3); } 12% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-1em); } }
#velo { position: absolute; inset: 0; background: var(--tinta); opacity: 0; transition: opacity 0.28s; }
#velo.ver { opacity: 1; }

/* ── paneles */
#fondoPanel { position: absolute; inset: 0; display: none; place-items: center; background: rgba(35, 27, 46, 0.62); pointer-events: auto; }
.con-panel #fondoPanel { display: grid; }
.panel { display: none; flex-direction: column; gap: 0.8em; background: var(--papel); border: 0.25em solid var(--tinta); border-radius: 1.4em; box-shadow: 0 0.5em 0 var(--tinta); padding: 1.3em 1.7em 1.5em; min-width: min(26em, 92vw); max-width: 94vw; max-height: 94vh; overflow: auto; text-align: center; pointer-events: auto; }
.panel.ver { display: flex; animation: panel 0.25s; }
@keyframes panel { from { transform: scale(0.8); opacity: 0; } }
.panel h1 { margin: 0; font-size: 2em; } .panel h2 { margin: 0; font-size: 1.3em; } .panel p { margin: 0; }
#resultado.perdio h1 { color: var(--rojo) !important; }
#resEstrellas { display: flex; justify-content: center; gap: 0.3em; height: 4.4em; align-items: center; }
#resEstrellas i { width: 3.8em; height: 3.8em; opacity: 0.22; filter: grayscale(1); }
#resEstrellas i.si { opacity: 1; filter: none; animation: salto 0.5s; }
#resEstrellas i:nth-child(2) { width: 4.6em; height: 4.6em; margin-top: -0.8em; }
#resDatos, #finDatos { display: grid; grid-template-columns: 1fr auto; gap: 0.35em 1.2em; text-align: left; background: var(--papel2); border-radius: 0.8em; padding: 0.7em 1em; border: 0.16em solid var(--tinta); }
#resDatos b, #finDatos b { text-align: right; }
#resDatos .ok b { color: #1E9A54 !important; }
.botones { display: flex; gap: 0.7em; justify-content: center; flex-wrap: wrap; margin-top: 0.3em; }
.boton { border: 0.2em solid var(--tinta); border-radius: 0.9em; box-shadow: 0 0.3em 0 var(--tinta); padding: 0.6em 1.2em; font-size: 1.05em; background: var(--oro); }
.boton .t { color: #fff !important; -webkit-text-stroke: 0.28em var(--tinta) !important; }
.boton.verde { background: var(--verde); } .boton.gris { background: #9E96AE; } .boton.rojo { background: var(--rojo); } .boton.chico { font-size: 0.85em; padding: 0.35em 0.9em; }
.boton.no { background: var(--gris); opacity: 0.6; }
/* las filas de opciones: el rótulo pegado a su control (2 em), todo centrado; antes cada fila iba de punta a punta */
.opc { display: grid; grid-template-columns: 12em 11em; column-gap: 2em; justify-content: center; align-items: center; text-align: left; }
.opc > :first-child { justify-self: end; text-align: right; }
.opc > :last-child { justify-self: start; }
.opc input[type=range] { width: 11em; accent-color: var(--rojo); }
.llave { width: 3.6em; height: 1.9em; border-radius: 1em; border: 0.2em solid var(--tinta); background: var(--gris); position: relative; }
.llave::after { content: ''; position: absolute; box-sizing: border-box; left: 0.12em; top: 50%; transform: translateY(-50%); width: 1.2em; height: 1.2em; border-radius: 50%; background: #fff; border: 0.16em solid var(--tinta); transition: left 0.12s; }
.llave.si { background: var(--verde); } .llave.si::after { left: calc(100% - 1.32em); }
#pausa { width: min(30em, 92vw); padding: 1.6em; }
/* los controles, en lugar de las opciones (botón Controles): así la pausa entra entera sin scroll */
#teclas { display: none; padding-top: 0.2em; }
#pausa.ver-teclas #teclas { display: block; } #pausa.ver-teclas .opc { display: none; }
#teclas h3 { margin: 0 0 0.4em; font-size: 1.05em; }
#teclas ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.35em 1em; text-align: left; }
#teclas li { display: flex; align-items: center; gap: 0.5em; color: var(--tinta); }
#teclas kbd { font-size: 0.9em; flex: none; } #teclas span { text-transform: none; opacity: 0.8; }
.panel { position: relative; }
#salir { width: min(22em, 92vw); padding: 1.6em; }

/* ── el armero */
.lateral { position: absolute; right: max(1em, env(safe-area-inset-right)); top: 50%; transform: translateY(-50%); min-width: 21em; max-width: 46vw; text-align: left; gap: 0.55em; padding: 1em 1.1em 1.1em; }
.lateral.ver { animation: none; }
#armeroLista { display: flex; flex-direction: column; gap: 0.5em; }
.fichaArma { display: grid; grid-template-columns: 1fr auto; gap: 0.2em 0.8em; align-items: center; padding: 0.5em 0.7em; border: 0.2em solid var(--tinta); border-radius: 0.9em; background: var(--papel2); cursor: pointer; pointer-events: auto; }
.fichaArma.sel { background: #FFE49A; box-shadow: 0 0.25em 0 var(--tinta); transform: translateX(-0.5em); }
.fichaArma.puesta { background: #B9F3CE; }
.fichaArma .nom { font-size: 1.1em; } .fichaArma .dato { grid-column: 1; font-size: 0.66em; opacity: 0.8; text-transform: none; }
.fichaArma .estado { grid-row: 1 / span 2; grid-column: 2; display: flex; align-items: center; gap: 0.25em; font-size: 0.9em; }
.fichaArma .estado .ico { width: 1.3em; height: 1.3em; }
.fichaArma.cara .estado { color: var(--rojo) !important; }
.nota { opacity: 0.7; text-transform: none; }

/* ── carga */
#carga { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1.4em; background: radial-gradient(circle at 50% 40%, #3B2D52, var(--tinta) 70%); }
.modo-carga #carga { display: flex; }
.logo { display: flex; flex-direction: column; align-items: center; line-height: 0.9; transform: rotate(-4deg); }
.logo b { font-size: 4.2em; } .logo .dos { color: var(--oro); font-size: 6em; }
#carga .barra { width: 18em; height: 1.1em; border: 0.22em solid #fff; border-radius: 0.7em; overflow: hidden; }
#carga .barra i { display: block; height: 100%; width: 0; background: var(--oro); transition: width 0.2s; }

/* ── qué se ve en cada modo */
#arriba #izq, #centro, #acciones, #arma { display: none; }
.modo-mision #arriba #izq, .modo-lobby #arriba #izq { display: flex; } .modo-mision #centro, .modo-mision #acciones, .modo-mision #arma { display: flex; }
.modo-lobby #rotulo, .modo-lobby #btSalir { display: none; }
.modo-mision #pEstrellas { display: none; }
.modo-carga #arriba { display: none; }
.en-dron #acciones #ventanas, .en-dron #btPista, .en-dron #arma, .en-armero #arma, .en-armero #btDron, .en-armero #btPista, .en-armero #btPulso { display: none; }
.fin #acciones, .fin #arma { display: none; }
/* v4: la letra sigue el lado corto (como Sword), sin el salto de los 460 px; acá solo lo que se acomoda en pantallas bajas */
@media (max-height: 460px) { .pastilla { height: 2.55em; } .cuadro { padding-bottom: 0.4em; } #aviso { top: 44%; } }

/* ── v2: la tecla E (lo que se puede hacer donde está parado) y el ascensor */
#tecla { position: absolute; left: 50%; bottom: 16%; transform: translateX(-50%); display: none; align-items: center; gap: 0.55em; padding: 0.45em 0.95em 0.45em 0.5em; font: inherit; color: inherit; cursor: pointer; }
#tecla.ver { display: flex; }
#tecla kbd { font-size: 0.95em; padding: 0.2em 0.6em; }
#tecla span { font-size: 1.05em; }
#ascensorLista { display: flex; flex-direction: column; gap: 0.5em; }
#ascensorLista button { font: inherit; text-align: left; padding: 0.55em 0.8em; border: 0.17em solid var(--tinta); border-radius: 0.7em; background: var(--papel2); cursor: pointer; }
#ascensorLista button.aca { background: var(--oro); }
#ascensorLista button.no { opacity: 0.45; cursor: default; }
.con-panel #tecla, .en-armero #tecla { display: none; }
/* los avisos no se dibujan encima de un panel abierto */
.con-panel #aviso, .en-armero #aviso, .con-lateral #aviso { visibility: hidden; }
/* pocas balas: la tarjeta del arma en rojo */
#arma.pocas { border-color: var(--rojo); box-shadow: 0 0.28em 0 var(--rojo); } #arma.pocas #reserva { color: var(--rojo) !important; }

/* ── el cartel antes de un video con premio (ui/anuncio.js): va encima de todo, con "No, gracias" igual de grande */
#ofertaVideo { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(35, 27, 46, 0.62); font-family: 'Rounded', 'Arial Rounded MT Bold', system-ui, sans-serif; font-weight: 800; font-size: clamp(10px, min(1.75vh, 1.05vw), 22px); color: var(--tinta); user-select: none; }
#ofertaVideo .caja { display: flex; position: relative; width: min(26em, 92vw); padding: 1.6em; gap: 0.8em; }
#ofertaVideo h2 { font-size: 1.5em; }
#ofertaVideo .premio { font-size: 1.2em; color: #C2410C !important; text-transform: none; }
#ofertaVideo .botones { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8em; }
#ofertaVideo .boton { width: 100%; min-height: 3em; display: flex; align-items: center; justify-content: center; gap: 0.4em; font: inherit; color: #fff; cursor: pointer; }
.boton.violeta { background: #8E7CFF; }
.cerrar { position: absolute; right: 0.6em; top: 0.6em; width: 2.1em; height: 2.1em; padding: 0; border-radius: 50%; border: 0.18em solid var(--tinta); box-shadow: 0 0.18em 0 var(--tinta); background: var(--papel2); color: var(--tinta); font: inherit; font-size: 1em; line-height: 1; display: grid; place-items: center; cursor: pointer; pointer-events: auto; }
.cerrar:active { transform: translateY(0.15em); box-shadow: 0 0.04em 0 var(--tinta); }

/* ── los videos con premio de la partida (game/ofertas.js) */
#cartaX2 { position: absolute; right: max(1em, env(safe-area-inset-right)); top: 4.6em; display: none; align-items: center; gap: 0.45em; padding: 0.45em 0.8em; background: #7E5BD6; color: #fff; border: 0.18em solid var(--tinta); border-radius: 0.9em; box-shadow: 0 0.22em 0 var(--tinta); font: inherit; cursor: pointer; pointer-events: auto; animation: cartaLlega 0.4s ease-out; }
#cartaX2.ver { display: flex; }
#cartaX2 b { font-size: 1.25em; }
#cartaX2 span { font-size: 0.75em; }
#cartaX2 kbd { font: inherit; font-size: 0.7em; background: #fff; color: var(--tinta); border-radius: 0.35em; padding: 0.05em 0.4em; }
@keyframes cartaLlega { from { transform: translateX(120%); } to { transform: none; } }
#x2Activo { position: absolute; right: max(1em, env(safe-area-inset-right)); top: 4.6em; display: none; gap: 0.4em; }
#x2Activo.ver { display: flex; }
#btDoble { align-self: center; display: flex; align-items: center; gap: 0.45em; }
.con-panel #cartaX2, .con-lateral #cartaX2 { display: none; }

/* ── la guía de la primera vez (game/tutorial.js): arriba, debajo de la fila de escondidos; nunca en el medio (la mira) */
#tuto { position: absolute; left: 50%; top: 17%; transform: translateX(-50%); display: none; align-items: center; gap: 0.7em; max-width: min(40em, 92vw); padding: 0.55em 0.7em 0.55em 1em; background: var(--papel); color: var(--tinta); border: 0.2em solid var(--tinta); border-radius: 1em; box-shadow: 0 0.25em 0 var(--tinta); pointer-events: auto; }
#tuto.ver { display: flex; animation: guiaLlega 0.35s ease-out; }
#tutoPaso { font-size: 0.7em; background: #FFC93C; border-radius: 0.5em; padding: 0.15em 0.45em; white-space: nowrap; }
#tutoTexto { font-size: 1em; line-height: 1.25; }
#tutoSaltar { font: inherit; font-size: 0.72em; background: #E6DCC8; color: var(--tinta); border: 0.15em solid var(--tinta); border-radius: 0.6em; padding: 0.3em 0.7em; cursor: pointer; white-space: nowrap; }
@keyframes guiaLlega { from { opacity: 0; transform: translate(-50%, -0.6em); } to { opacity: 1; transform: translateX(-50%); } }
.con-panel #tuto, .con-lateral #tuto, .en-armero #tuto { visibility: hidden; }
#tuto .t { color: var(--tinta); -webkit-text-stroke: 0; }
#tutoTexto { text-transform: none; font-size: 1.05em; }

/* ── el celular parado: tapa todo y pide girarlo */
#girar { position: fixed; inset: 0; z-index: 80; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1.2em; background: #2B2238; pointer-events: auto; text-align: center; padding: 2em; }
#girar b { font-size: 1.4em; max-width: 14em; }
#girar svg { animation: girarCel 1.8s ease-in-out infinite; }
@keyframes girarCel { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (pointer: coarse) { #girar { display: flex; } }
/* en el celular, arriba a la derecha va la tarjeta del arma: la del video ×2 va a la izquierda, debajo del cuarto */
.tactil #cartaX2, .tactil #x2Activo { right: auto; left: max(1em, env(safe-area-inset-left)); top: 5.6em; }
.tactil #cartaX2 kbd { display: none; }
.tactil #logroAviso { top: 9.2em; }

/* ── para grabar (?prueba&sinhud): solo el juego */
.sinhud #hud, .sinhud #tactil, .sinhud #ofertaVideo, .sinhud #girar { display: none !important; }
/* los créditos, chiquitos al pie de la pausa (y completos en CREDITOS.txt) */
#creditos { margin: 0.2em 0 0; font-size: 0.62em; opacity: 0.6; color: var(--tinta); }
#pausa.ver-teclas #creditos { display: none; }