* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body {
  width: 100%; height: 100%;
  background: #05080f;
  overflow: hidden;
  font-family: "Segoe UI", system-ui, sans-serif;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#wrap {
  position: relative;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
#game {
  display: block;
  width: 100%; height: 100%;
  max-width: 100vw; max-height: 100vh;
  /* LUNE frames are smooth art, not pixel art — smooth upscale */
  image-rendering: auto;
  background: #070b14;
  cursor: none;
}
#touch {
  display: none;
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 5;
}
#touch .pad {
  position: absolute;
  bottom: max(18px, env(safe-area-inset-bottom));
  display: flex; gap: 14px;
  pointer-events: auto;
  opacity: 0.72;
}
#touch .left-pad { left: max(10px, env(safe-area-inset-left)); }
#touch .right-pad {
  right: max(10px, env(safe-area-inset-right));
  flex-direction: row;
  align-items: flex-end;
}
.tbtn {
  width: 72px; height: 72px;
  border-radius: 50%;
  border: 2px solid rgba(80, 220, 200, 0.4);
  background: rgba(8, 16, 28, 0.42);
  color: rgba(127, 245, 224, 0.9);
  font-size: 24px;
  font-weight: 700;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: auto;
  touch-action: none;
  transition: background 0.08s, border-color 0.08s, transform 0.08s;
}
.tbtn.small {
  width: 56px; height: 56px;
  font-size: 11px;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
}
.tbtn:active, .tbtn.active {
  background: rgba(40, 180, 160, 0.55);
  border-color: #7ff5e0;
  transform: scale(0.94);
  opacity: 1;
}
#pause-hint {
  position: absolute; top: 8px; right: 12px;
  color: rgba(160, 200, 195, 0.3);
  font-size: 11px;
  pointer-events: none;
  z-index: 4;
}
@media (pointer: coarse), (max-width: 900px) {
  #touch { display: block; }
  #pause-hint { display: none; }
  /* push pads slightly lower / outward so they eat less of the playfield */
  #touch .pad { bottom: max(10px, env(safe-area-inset-bottom)); opacity: 0.65; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .tbtn { width: 56px; height: 56px; font-size: 18px; }
  .tbtn.small { width: 44px; height: 44px; font-size: 10px; }
}
#touch .action-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
#touch .action-row {
  display: flex;
  gap: 12px;
  align-items: center;
}