/* Phones: no page zoom or scroll gestures over the game, and a "rotate your phone" card in
   portrait (the game is landscape only). */
html, body { overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#canvas { touch-action: none; }
#rotate { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  #rotate {
    display: flex; position: fixed; inset: 0; z-index: 10; flex-direction: column; align-items: center;
    justify-content: center; gap: 18px; background: #05070c; color: #fff; text-align: center;
    font: 600 20px/1.35 -apple-system, system-ui, sans-serif; padding: 24px;
  }
  #rotate small { font-weight: 400; font-size: 15px; opacity: 0.6; }
  #rotate .phone {
    width: 46px; height: 80px; border: 3px solid #fff; border-radius: 9px;
    animation: turn 2.2s ease-in-out infinite;
  }
}
@keyframes turn { 0%, 25% { transform: rotate(0deg); } 55%, 100% { transform: rotate(-90deg); } }