* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: #05060a;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  font-family: monospace;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Caja 9:16 que ocupa el máximo posible de la pantalla */
#app {
  position: relative;
  width: min(100vw, calc(100dvh * 9 / 16));
  height: min(100dvh, calc(100vw * 16 / 9));
  container-type: size;
}

/* El juego se dibuja a 180x320 y se escala con píxeles nítidos */
#game {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

img { image-rendering: pixelated; pointer-events: none; }

/* ---------- Mando táctil (tercio inferior) · 1 píxel del juego = 0.5556cqw ---------- */
#touch {
  --p: 0.5556cqw;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--p) * 104);
  display: flex;
  padding: calc(var(--p) * 6) calc(var(--p) * 4) calc(var(--p) * 6);
  gap: calc(var(--p) * 4);
}
#touch.hidden { display: none; }

.stick-zone {
  position: relative;
  flex: 1 1 46%;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 var(--p), transparent var(--p) calc(var(--p) * 3));
  border: var(--p) dashed rgba(255,255,255,0.15);
  touch-action: none;
}
.stick-hint {
  position: absolute; left: 0; right: 0; bottom: calc(var(--p) * 3);
  text-align: center; color: rgba(255,255,255,0.3);
  font: bold calc(var(--p) * 6) monospace; letter-spacing: .3em;
  pointer-events: none;
}
.stick-base {
  position: absolute;
  left: 50%; top: 50%;
  width: calc(var(--p) * 48); height: calc(var(--p) * 48);
  margin: calc(var(--p) * -24) 0 0 calc(var(--p) * -24);
  background-size: 100% 100%;
  image-rendering: pixelated;
  pointer-events: none;
  opacity: .75;
}
.stick-base.active { opacity: 1; }
.stick-knob {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--p) * 21); height: calc(var(--p) * 21);
  margin: calc(var(--p) * -10.5) 0 0 calc(var(--p) * -10.5);
  background-size: 100% 100%;
  image-rendering: pixelated;
}

.buttons {
  flex: 1 1 54%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1.3fr 0.7fr;
  gap: calc(var(--p) * 4);
}

/* Botón pixel: borde negro, bisel claro/oscuro y esquinas recortadas */
.btn {
  --c: #888; --hi: #bbb; --lo: #444;
  position: relative;
  border: var(--p) solid #000;
  background: var(--c);
  box-shadow:
    inset var(--p) var(--p) 0 var(--hi),
    inset calc(var(--p) * -1) calc(var(--p) * -2) 0 var(--lo),
    0 calc(var(--p) * 2) 0 #000;
  clip-path: polygon(
    var(--p) 0, calc(100% - var(--p)) 0, 100% var(--p), 100% calc(100% - var(--p)),
    calc(100% - var(--p)) 100%, var(--p) 100%, 0 calc(100% - var(--p)), 0 var(--p));
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  touch-action: none;
  overflow: hidden;
}
.btn img { position: relative; z-index: 1; }
.btn.down { transform: translateY(calc(var(--p) * 2)); filter: brightness(1.35); box-shadow: inset var(--p) var(--p) 0 var(--lo); }
.btn.punch { --c: #d4101e; --hi: #ff6a6a; --lo: #7a0008; }
.btn.kick { --c: #1d6fd4; --hi: #6fb4ff; --lo: #0a3a7a; }
.btn.special { --c: #e08a00; --hi: #ffd060; --lo: #7a4a00; }
.btn.guard { grid-column: 1 / span 2; --c: #4a4f60; --hi: #7a8098; --lo: #23262f; }

.btn.super { --c: #1b2030; --hi: #2e3550; --lo: #0b0e18; --meter: 0%; }
.btn.super::before {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--meter);
  background: repeating-linear-gradient(0deg, #00b8d4 0 calc(var(--p) * 2), #00e5ff calc(var(--p) * 2) calc(var(--p) * 4));
}
.btn.super:not(.ready) img { opacity: .45; }
.btn.super.ready { animation: blink .3s steps(1) infinite; }
.btn.super.ready::before { background: repeating-linear-gradient(0deg, #ffe14d 0 calc(var(--p) * 2), #00e5ff calc(var(--p) * 2) calc(var(--p) * 4)); }
@keyframes blink { 50% { filter: brightness(1.6); } }

/* ---------- Aviso de orientación ---------- */
#rotate {
  display: none;
  position: fixed; inset: 0;
  background: #05060a;
  color: #ffc400;
  z-index: 10;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font: bold 20px monospace;
}
#rotate div { font-size: 64px; }
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  #rotate { display: flex; }
}