* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: #05061a;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

#stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.screen {
  position: relative;
  width: min(100vw, calc(100vh * 960 / 576));
  aspect-ratio: 960 / 576;
  box-shadow: 0 0 60px rgba(120, 90, 255, 0.25);
}

.screen canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#gl { background: #05061a; }

/* On-screen controls: only on touch devices */
#touch { display: none; }

@media (pointer: coarse) and (orientation: landscape) {
  .screen { width: min(100vw, calc(100vh * 960 / 576)); }
  #touch {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 12px 12px;
    align-items: flex-end;
    justify-content: space-between;
    pointer-events: none;
    opacity: 0.55;
  }
  #touch > * { pointer-events: auto; }
  .menu-btn { position: fixed; top: 10px; right: 12px; }
}

@media (pointer: coarse) and (orientation: portrait) {
  #stage { align-items: flex-start; padding-top: 8px; }
  .screen { width: 100vw; }
  #touch {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42vh;
    padding: 16px 20px 28px;
    align-items: center;
    justify-content: space-between;
  }
}

#touch button {
  border: none;
  font: bold 20px "Trebuchet MS", sans-serif;
  color: #fff;
  background: rgba(80, 70, 150, 0.75);
  box-shadow: 0 4px 0 rgba(20, 10, 50, 0.8);
  touch-action: none;
}
#touch button.on { transform: translateY(3px); box-shadow: 0 1px 0 rgba(20, 10, 50, 0.8); }

.dpad { position: relative; width: 156px; height: 156px; }
.dpad button { position: absolute; width: 52px; height: 52px; border-radius: 10px; }
.dpad .up { left: 52px; top: 0; }
.dpad .down { left: 52px; bottom: 0; }
.dpad .left { left: 0; top: 52px; }
.dpad .right { right: 0; top: 52px; }

.menu-btn button { padding: 8px 14px; border-radius: 16px; font-size: 14px; }

.ab { position: relative; width: 150px; height: 120px; }
.ab button { position: absolute; width: 66px; height: 66px; border-radius: 50%; font-size: 24px; }
.ab .a { right: 0; top: 0; background: rgba(220, 70, 70, 0.85); }
.ab .b { left: 0; bottom: 0; background: rgba(70, 110, 220, 0.85); }