* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  width: 100%; height: 100%;
  background: #0d0a12;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
#stage {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: #0d0a12;
}
#game {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #000;
  touch-action: none;
  box-shadow: 0 0 40px rgba(0,0,0,0.6);
}
#loading {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; background: #0d0a12; color: #ffe6a6;
}
#loading h1 { font-size: 18px; letter-spacing: 2px; font-weight: 800; }
#loading .track { width: 180px; height: 8px; border: 1px solid #6a5a3a; border-radius: 4px; overflow: hidden; }
#loadbar { width: 0%; height: 100%; background: #ffd24a; transition: width .12s linear; }
#loading p { font-size: 11px; color: #b9a988; }

#rotate {
  position: fixed; inset: 0; z-index: 20; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: #0d0a12; color: #ffe6a6; text-align: center;
}
#rotate .ico { font-size: 52px; animation: spin 2.4s linear infinite; }
#rotate p { font-size: 15px; font-weight: 700; letter-spacing: 1px; }
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@media (max-width: 900px) and (orientation: portrait) {
  #rotate { display: flex; }
}