* { margin:0; padding:0; box-sizing:border-box; }
html, body {
  width:100%; height:100%;
  background:#03060c;
  overflow:hidden;
  touch-action:none;
  font-family:monospace;
}
#game-wrap {
  width:100vw; height:100vh;
  display:flex; align-items:center; justify-content:center;
}
#game {
  max-width:100%; max-height:100%;
  image-rendering:auto;
  background:#0b1220;
  box-shadow:0 0 40px rgba(0,229,255,0.15);
}

/* ===== Aviso de rotación (portrait) ===== */
#rotate-msg {
  display:none;
  position:fixed; inset:0;
  background:#03060c;
  color:#5fd3e6;
  z-index:9999;
  flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center; padding:20px;
}
#rotate-msg .icon {
  font-size:60px; margin-bottom:16px;
  animation:rot 1.5s ease-in-out infinite;
}
@keyframes rot { 0%,100%{transform:rotate(0)} 50%{transform:rotate(90deg)} }
@media (orientation:portrait) {
  #rotate-msg { display:flex; }
  #game-wrap { display:none; }
}

/* ===== Controles táctiles ===== */
#touch {
  position:fixed; inset:0;
  pointer-events:none;
  z-index:500;
}
#touch button {
  position:absolute; bottom:24px;
  width:74px; height:74px;
  border-radius:50%;
  border:2px solid rgba(0,229,255,0.5);
  background:rgba(11,18,32,0.55);
  color:#5fd3e6; font-size:30px;
  pointer-events:auto;
  user-select:none; -webkit-user-select:none;
  touch-action:none;
  display:flex; align-items:center; justify-content:center;
}
#touch button:active { background:rgba(0,229,255,0.3); }
.dpad { }
#btn-left  { left:24px; }
#btn-right { left:112px; }
#btn-jump  { right:24px; border-color:rgba(255,47,224,0.5); color:#f06ee6; }
@media (orientation:portrait) { #touch { display:none; } }