/* Mobile-specific styles for BlinkNinja */

/* Lightweight mobile helpers. The main page layout lives in web-shell.css. */
@viewport {
  width: device-width;
  zoom: 1.0;
}

/* Hide browser UI on mobile */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

/* Optimize canvas for mobile */
canvas {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

/* Keep touch interactions smooth without forcing fullscreen canvas. */
@media (max-width: 768px) {
  body {
    overflow-x: hidden;
    overflow-y: auto;
    position: static;
    width: auto;
    height: auto;
  }
  
  canvas {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
  }
}

/* Landscape orientation adjustments */
@media (orientation: landscape) and (max-height: 500px) {
  body {
    overflow-y: auto;
  }
}