@font-face {
  font-family: "GoodsTidy";
  src: url("./assets/fonts/game.ttf") format("truetype");
  font-display: swap;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: #ad6229;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
#game { width: 100%; height: 100%; }
#rotate-lock {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  margin: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: #3b1b72;
  color: #fff;
  font-family: "GoodsTidy", system-ui, sans-serif;
  font-size: 22px;
  text-align: center;
  padding: 24px;
}
.rotate-phone {
  width: 46px;
  height: 78px;
  border: 4px solid #fff;
  border-radius: 8px;
  position: relative;
  animation: rotate-hint 1.6s ease-in-out infinite;
}
.rotate-phone::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 10px;
  height: 4px;
  margin-left: -5px;
  border-radius: 2px;
  background: #fff;
}
@keyframes rotate-hint {
  0%, 20% { transform: rotate(90deg); }
  50%, 100% { transform: rotate(0deg); }
}
/* Portrait form: phone landscape shows a rotate gate. Desktop keeps the wide view. */
@media (orientation: landscape) and (hover: none) and (pointer: coarse) {
  #rotate-lock { display: flex; }
  #game { visibility: hidden; }
}
#boot-preloader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #7139d8, #2b1458);
  transition: opacity .35s ease;
}
#boot-preloader.hide { opacity: 0; pointer-events: none; }
#boot-preloader .boot-spinner {
  width: 48px; height: 48px; border-radius: 50%;
  border: 4px solid rgba(255,255,255,.25); border-top-color: #ffd94a;
  animation: boot-spin .9s linear infinite;
}
@keyframes boot-spin { to { transform: rotate(360deg); } }