/* ---------- Reset + base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #0a0a14;
  color: #fff;
  font-family: 'Squada One', 'Passion One', system-ui, sans-serif;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  overscroll-behavior: none;
}
body { position: fixed; inset: 0; }

#game-wrap {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  background: radial-gradient(ellipse at 30% 20%, #2a1a3a 0%, #0a0a14 70%);
}

#game-canvas {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: #000;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  box-shadow: 0 0 60px rgba(0,0,0,0.6);
}

.screen {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
}
.loader-bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(20,8,30,0.95), rgba(40,15,55,0.92)),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 8px);
}
.loader-content {
  position: relative; text-align: center;
  padding: 0 30px; max-width: 600px;
}
.game-title {
  font-family: 'Luckiest Guy', 'Passion One', sans-serif;
  font-size: clamp(36px, 8vw, 72px);
  letter-spacing: 4px;
  background: linear-gradient(180deg, #ffe27a 0%, #ff7a2a 60%, #b03b14 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 4px 0 rgba(0,0,0,0.4);
  filter: drop-shadow(0 6px 10px rgba(255,90,30,0.35));
  line-height: 1;
}
.subtitle {
  font-size: clamp(18px, 3.5vw, 28px);
  color: #f0e0a8; letter-spacing: 6px; margin-top: 8px;
  text-transform: uppercase;
}
.bar-shell {
  margin: 36px auto 14px;
  width: min(420px, 80vw); height: 24px;
  background: rgba(0,0,0,0.5);
  border: 2px solid #6b4a1a; border-radius: 14px; padding: 3px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.6);
}
#loader-bar {
  width: 0%; height: 100%; border-radius: 10px;
  background: linear-gradient(180deg, #b6ff66 0%, #4fb01a 50%, #2a7010 100%);
  box-shadow: 0 0 16px rgba(120,255,80,0.6), inset 0 1px 0 rgba(255,255,255,0.5);
  transition: width 0.15s ease-out;
}
#loader-status {
  font-size: clamp(14px, 2.5vw, 18px);
  color: #ddd; letter-spacing: 2px;
}

#orientation-warning {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: linear-gradient(135deg, #1a0a25, #2a1245);
  align-items: center; justify-content: center; text-align: center; padding: 20px;
}
.ow-inner { max-width: 320px; }
.ow-emoji { font-size: 64px; margin-bottom: 16px; animation: rot 1.5s ease-in-out infinite; }
.ow-text { font-size: 22px; color: #ffe27a; letter-spacing: 2px; }
@keyframes rot {
  0%, 100% { transform: rotate(-15deg); }
  50% { transform: rotate(15deg); }
}
@media (max-width: 900px) and (orientation: portrait) {
  #orientation-warning { display: flex; }
}