html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #0c0c18;
  overflow: hidden;
  font-family: monospace;
}

#game {
  display: block;
  width: 100vw;
  height: 100vh;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  cursor: pointer;
}

noscript {
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ===== Modo app: sin zoom/scroll/selección del navegador (juego a pantalla completa) ===== */
html, body {
  overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
#game { touch-action: none; }

/* ===== Mando en pantalla (joystick + botones) =====
   Se ve o no según `body.con-pad`, que pone dispositivo.js por TAMAÑO (y no por capacidad táctil:
   el mando usa Pointer Events, o sea que funciona con ratón igual que con el dedo).
   Antes esto era `body.not(.touch)` y la clase la ponía touch.js al detectar táctil; al mover la
   decisión dejó de ponerse nadie y el mando desapareció del móvil. Una sola clase, un solo sitio. */
#touch-controls { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
body:not(.con-pad) #touch-controls { display: none; }
/* Mientras se lee una ficha, la caja de diálogo (dibujada en el canvas) manda: ocultamos los
   controles para que no la tapen. Se toca en cualquier sitio para avanzar/cerrar. */
body.dialog-open #touch-controls { display: none; }
#touch-controls .joy, #touch-controls .tbtn { pointer-events: auto; touch-action: none; -webkit-tap-highlight-color: transparent; }

.joy {
  position: absolute;
  left: max(18px, env(safe-area-inset-left));
  bottom: max(24px, env(safe-area-inset-bottom));
  width: 116px; height: 116px; border-radius: 50%;
  background: rgba(12, 16, 38, 0.32);
  border: 2px solid rgba(255, 255, 255, 0.32);
  display: flex; align-items: center; justify-content: center;
}
.joy-knob {
  width: 50px; height: 50px; border-radius: 50%;
  background: rgba(39, 216, 228, 0.75);
  border: 2px solid rgba(255, 255, 255, 0.7);
  will-change: transform;
}

.tbtn {
  position: absolute; border-radius: 50%;
  color: #0B0E1E; border: 3px solid #0B0E1E;
  box-shadow: 3px 3px 0 0 #0B0E1E;
  display: flex; align-items: center; justify-content: center;
  font-family: inherit; line-height: 1; padding: 0;
}
.tbtn.down { transform: translate(2px, 2px); box-shadow: 1px 1px 0 0 #0B0E1E; }
/* A = acción/espada (grande y destacado; es la acción principal en las pizarras) */
.tbtn-a {
  right: max(22px, env(safe-area-inset-right));
  bottom: max(30px, env(safe-area-inset-bottom));
  width: 84px; height: 84px; font-size: 34px; background: #ff6b5c;
}
/* B = volver (más pequeño, encima de A) */
.tbtn-b {
  right: max(32px, calc(env(safe-area-inset-right) + 12px));
  bottom: max(124px, calc(env(safe-area-inset-bottom) + 102px));
  width: 60px; height: 60px; font-size: 24px; background: #27D8E4;
}