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

html, body {
  width: 100%;
  height: 100%;
  background: #06080f;
  overflow: hidden;
}

/* Canvas fills the entire viewport — position:fixed ignores browser chrome
   and works correctly on fold phones, notched screens, and all orientations. */
#game-canvas {
  display: block;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* Rotate-device overlay — hidden in landscape, shown in portrait */
#rotate-hint {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #06080f;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.rotate-icon  { font-size: 56px; color: #00e676; animation: spin 2s linear infinite; }
.rotate-title { font: bold 14px/1 monospace; letter-spacing: 3px; color: #00e676; }
.rotate-sub   { font: 10px/1 monospace; letter-spacing: 1px; color: rgba(0,200,90,0.45); }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

@media (orientation: portrait) {
  #rotate-hint { display: flex; }
}