@font-face { font-family: 'Russo One'; src: url('assets/fonts/RussoOne-Regular.ttf') format('truetype'); font-display: block; }
@font-face { font-family: 'Rubik'; src: url('assets/fonts/Rubik-Variable.ttf') format('truetype'); font-weight: 300 900; font-display: block; }
@font-face { font-family: 'Press Start 2P'; src: url('assets/fonts/PressStart2P-Regular.ttf') format('truetype'); font-display: block; }

html, body {
  margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;
  background: #120a1f radial-gradient(ellipse at center, #2a1240 0%, #120a1f 70%);
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
#game { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#game canvas { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }

#boot {
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #ffd23f; font: 48px 'Russo One', Impact, sans-serif; letter-spacing: 2px; pointer-events: none;
  text-shadow: 0 4px 0 #a2330f, 0 0 24px rgba(255, 120, 40, .6);
}
#boot small { font: 16px 'Rubik', sans-serif; color: #e9dcff; margin-top: 12px; text-shadow: none; }
body.ready #boot { display: none; }

#rotate {
  position: fixed; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center;
  background: #120a1f; color: #fff; font: 20px 'Rubik', sans-serif; text-align: center; z-index: 10;
}
#rotate div { font-size: 64px; color: #ffd23f; animation: spin 1.6s ease-in-out infinite; }
#rotate i { opacity: .6; font-size: 15px; }
@keyframes spin { 0%, 30% { transform: rotate(0deg); } 70%, 100% { transform: rotate(90deg); } }
@media (orientation: portrait) and (pointer: coarse) { #rotate { display: flex; } }