/* NOMBAT - page styles */
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;
  background: #050a1e; color: #e8f0ff;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  touch-action: none; overscroll-behavior: none;
}
#screen {
  position: fixed; inset: 0; display: block; outline: none;
  image-rendering: pixelated; image-rendering: crisp-edges;
}
body.modern #screen { image-rendering: auto; }
.hidden { display: none !important; }

/* touch controls */
#touch { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.tbtn {
  pointer-events: auto; touch-action: none; position: absolute;
  border: 2px solid rgba(143, 228, 255, 0.55); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.22), rgba(40,70,140,0.35) 60%, rgba(10,14,40,0.5));
  color: #e8f8ff; font: 700 18px/1 Bahnschrift, "Segoe UI", Roboto, Arial, sans-serif;
  box-shadow: 0 0 16px rgba(143, 228, 255, 0.18); -webkit-tap-highlight-color: transparent;
}
.tbtn.on { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.5), rgba(143,228,255,0.5)); transform: scale(0.94); }
.tbtn.small { width: 44px; height: 44px; font-size: 16px; top: max(10px, env(safe-area-inset-top)); }
#tpause { right: max(10px, env(safe-area-inset-right)); }
#tmenu { right: calc(max(10px, env(safe-area-inset-right)) + 54px); }
#dpadToggle { left: max(10px, env(safe-area-inset-left)); }
#dpad { position: absolute; width: 180px; height: 180px; pointer-events: none;
  left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); }
#dpad .dir { width: 64px; height: 64px; font-size: 22px; border-radius: 16px; }
#dpad .up { left: 58px; top: 0; } #dpad .down { left: 58px; bottom: 0; }
#dpad .left { left: 0; top: 58px; } #dpad .right { right: 0; top: 58px; }
@media (orientation: landscape) {
  #dpad { left: max(20px, env(safe-area-inset-left)); bottom: max(20px, env(safe-area-inset-bottom)); transform: none; }
}

/* toast for toggles (sound, scanlines, ...) */
#toast {
  position: fixed; left: 50%; top: 14px; transform: translateX(-50%) translateY(-80px); z-index: 9;
  padding: 8px 16px; border-radius: 10px; background: rgba(6,10,30,0.9); border: 1px solid rgba(143,228,255,0.5);
  font: 700 14px Bahnschrift, "Segoe UI", Roboto, Arial, sans-serif; letter-spacing: 0.08em; color: #ffd84a;
  transition: transform 0.25s; pointer-events: none;
}
#toast.on { transform: translateX(-50%) translateY(0); }