/* Interfaz de "Vos, yo y el bot". Tipografía: Bebas Neue. Acentos: magenta #ff2d78 y cian #00f5d4. */
@font-face { font-family: 'Bebas Neue'; src: url('vendor/BebasNeue.woff2') format('woff2'); font-display: swap; }
:root { --magenta: #ff2d78; --cian: #00f5d4; --noche: #02080c; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--noche); color: #e8f4f6;
  font-family: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif; letter-spacing: .04em;
  user-select: none; -webkit-user-select: none; touch-action: none; overscroll-behavior: none; }
#lienzo { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.oculto { display: none !important; }

#hud { position: fixed; inset: 0; pointer-events: none; padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 10px; text-shadow: 0 0 12px rgba(0,0,0,.9); }
#hud-nivel { font-size: clamp(15px, 2.6vw, 24px); color: var(--cian); text-shadow: 0 0 10px rgba(0,245,212,.6); line-height: 1; }
#hud-nivel small { display: block; color: #9fb6bd; font-size: .7em; text-shadow: none; }
#hud-tiempo { display: flex; align-items: center; gap: 10px; }
#hud-barra { width: min(38vw, 320px); height: 8px; background: rgba(255,255,255,.12); border-radius: 4px; overflow: hidden; }
#hud-barra i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cian), var(--magenta)); box-shadow: 0 0 12px var(--magenta); }
#hud-seg { font-size: clamp(24px, 4.5vw, 40px); line-height: .8; min-width: 1.4em; }
#hud-contador { text-align: right; line-height: 1; }
#hud-contador small { display: block; font-size: clamp(10px, 1.6vw, 14px); color: #9fb6bd; }
#hud-contador b { font-weight: normal; font-size: clamp(22px, 4vw, 38px); color: var(--magenta); text-shadow: 0 0 14px rgba(255,45,120,.7); display: inline-block; }
#hud-contador b.salto { animation: salto .25s; }
@keyframes salto { 30% { transform: scale(1.5); color: #fff; } }

#mensaje { position: fixed; left: 0; right: 0; top: max(64px, 11%); text-align: center; pointer-events: none; opacity: 0;
  font-size: clamp(40px, 9vw, 96px); line-height: .9; color: #fff; text-shadow: 0 0 18px var(--magenta), 0 0 50px var(--magenta), 3px 0 0 var(--cian), -3px 0 0 var(--magenta); }
#mensaje.ver { animation: mensaje 1.4s ease-out; }
#mensaje small { display: block; font-size: .32em; color: var(--cian); text-shadow: 0 0 10px var(--cian); letter-spacing: .2em; }
@keyframes mensaje { 0% { opacity: 0; transform: scale(1.6); } 10% { opacity: 1; transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: scale(.96); } }

#ayuda { position: fixed; left: 0; right: 0; bottom: max(18px, env(safe-area-inset-bottom)); text-align: center; pointer-events: none;
  font-size: clamp(14px, 2.4vw, 20px); color: #cfe6ea; opacity: .85; text-shadow: 0 0 8px #000; }
#ayuda b { color: var(--cian); font-weight: normal; }

#pantalla { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  background: rgba(2,8,12,.82); transition: opacity .35s; padding: 20px; }
#pantalla.fuera { opacity: 0; pointer-events: none; }
#pantalla.solida { background: var(--noche); }
#pantalla-fondo { position: absolute; inset: 0; background-size: cover; background-position: 50% 18%; opacity: 0; transition: opacity .8s;
  -webkit-mask-image: radial-gradient(ellipse at 50% 35%, #000 20%, transparent 78%); mask-image: radial-gradient(ellipse at 50% 35%, #000 20%, transparent 78%); }
#pantalla.con-fondo #pantalla-fondo { opacity: .55; }
#pantalla-caja { position: relative; max-width: 900px; }
#p-sobre { font-size: clamp(14px, 2.6vw, 22px); color: var(--cian); letter-spacing: .28em; text-shadow: 0 0 10px rgba(0,245,212,.6); min-height: 1.2em; }
#p-titulo { margin: .08em 0; font-weight: normal; font-size: clamp(54px, 13vw, 150px); line-height: .86;
  color: #fff; text-shadow: 0 0 20px var(--magenta), 0 0 70px rgba(255,45,120,.7), 3px 0 0 var(--cian), -3px 0 0 var(--magenta); }
#p-texto { font-size: clamp(17px, 3.2vw, 28px); color: #cfe6ea; line-height: 1.15; white-space: pre-line; }
#p-texto b { color: var(--magenta); font-weight: normal; } #p-texto i { color: var(--cian); font-style: normal; }
#p-carga { margin: 18px auto 0; width: min(60vw, 320px); height: 4px; background: rgba(255,255,255,.12); }
#p-carga i { display: block; height: 100%; width: 0; background: var(--cian); box-shadow: 0 0 10px var(--cian); transition: width .2s; }
#p-boton { margin-top: 22px; font: inherit; font-size: clamp(22px, 4.4vw, 36px); letter-spacing: .12em; color: #fff; cursor: pointer;
  background: rgba(255,45,120,.14); border: 2px solid var(--magenta); padding: .28em 1.1em .2em; border-radius: 2px;
  box-shadow: 0 0 22px rgba(255,45,120,.55), inset 0 0 18px rgba(255,45,120,.3); animation: latido 1.3s infinite; }
@keyframes latido { 50% { box-shadow: 0 0 40px rgba(255,45,120,.9), inset 0 0 26px rgba(255,45,120,.5); } }
#p-pie { margin-top: 20px; font-size: clamp(13px, 2.2vw, 18px); color: #8fa7ae; letter-spacing: .14em; }
#p-pie b { color: var(--cian); font-weight: normal; }

/* scanlines suaves sobre la interfaz (las del juego las hace el postprocesado) */
#lineas { position: fixed; inset: 0; pointer-events: none; opacity: .12;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.9) 0 1px, transparent 1px 3px); }

/* Barras de vida de la pelea (nivel 4) */
#barras { position: fixed; left: 0; right: 0; top: max(10px, env(safe-area-inset-top)); pointer-events: none;
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: end; padding: 0 max(14px, env(safe-area-inset-left)); text-shadow: 0 0 10px #000; }
#barras .lado span { display: block; font-size: clamp(14px, 2.6vw, 24px); line-height: 1; margin-bottom: 3px; }
#barras .der { text-align: right; }
#barras .izq span { color: var(--cian); } #barras .der span { color: var(--magenta); }
#barras .barra { height: clamp(12px, 2.2vw, 20px); background: rgba(0,0,0,.6); border: 2px solid rgba(255,255,255,.75); overflow: hidden; display: flex; }
#barras .der .barra { justify-content: flex-end; }
#barras .barra i { display: block; height: 100%; width: 100%; transition: width .18s; }
#b-vida1 { background: linear-gradient(180deg, #7dfff0, var(--cian)); box-shadow: 0 0 14px var(--cian); }
#b-vida2 { background: linear-gradient(180deg, #ff8ab4, var(--magenta)); box-shadow: 0 0 14px var(--magenta); }
#barras .vs { font-size: clamp(18px, 3.4vw, 30px); line-height: .9; color: #fff; }
#hud.pelea > * { visibility: hidden; }

/* Botones táctiles (pelea del nivel 4) */
#botones { position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom));
  display: grid; grid-template-columns: auto auto; gap: 10px; justify-items: end; touch-action: none; }
#botones button { font: inherit; font-size: 17px; letter-spacing: .08em; color: #fff; width: 84px; height: 84px; border-radius: 50%;
  background: rgba(0,245,212,.12); border: 2px solid var(--cian); box-shadow: 0 0 14px rgba(0,245,212,.45); touch-action: none; }
#botones button.grande { grid-row: span 2; align-self: center; width: 104px; height: 104px; font-size: 21px;
  background: rgba(255,45,120,.16); border-color: var(--magenta); box-shadow: 0 0 18px rgba(255,45,120,.6); }
#botones button.on { background: rgba(255,255,255,.35); transform: scale(.94); }
#botones:not(.oculto) + #ayuda { bottom: auto; top: 78px; }

/* Carriles del juego de ritmo (nivel 5): se dibujan en un canvas 2D encima del juego */
#ritmo { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }