@import url('./fonts.css');

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

button, a, img, canvas, div, span {
  -webkit-touch-callout: none;
}

html {
  min-height: 100.3%;
  overscroll-behavior-y: none;
}

body {
  background: #050510;
  overflow: hidden;
  font-family: 'Rajdhani', sans-serif;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  position: relative;
  width: 100%;
  height: 100%;
  overscroll-behavior: contain;
  touch-action: none;
}

body.lb-overlay-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  overscroll-behavior: none;
}

canvas { display: block; }

#ui {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 10;
}

#screen-flash {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(ellipse at center, rgba(255,30,30,0.35) 0%, rgba(255,0,0,0.18) 50%, transparent 80%);
  pointer-events: none;
  opacity: 0;
  z-index: 5;
  transition: opacity 0.15s;
}
#screen-flash.active {
  animation: screenFlashPulse 0.8s ease-out;
}

#combo-display {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Orbitron', monospace;
  font-size: 72px; font-weight: 900;
  color: #FFD700;
  text-shadow:
    -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000,
    -3px 0 0 #000, 3px 0 0 #000, 0 -3px 0 #000, 0 3px 0 #000,
    0 0 40px rgba(0,0,0,0.6), 0 0 80px rgba(0,0,0,0.3);
  pointer-events: none; opacity: 0; z-index: 20;
}

#bonus-popup {
  position: absolute;
  font-family: 'Orbitron', monospace;
  font-size: 26px; font-weight: 900;
  pointer-events: none; display: none; z-index: 15;
  text-shadow:
    -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
    -2px 0 0 #000, 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000,
    0 0 20px currentColor, 0 0 40px currentColor;
}

#hint-text {
  display: none;
}

#mission-complete-popup {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Orbitron', monospace;
  font-size: 20px;
  font-weight: 900;
  color: #00dc82;
  text-shadow:
    -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
    -2px 0 0 #000, 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000,
    0 0 30px rgba(0,220,130,0.4), 0 0 60px rgba(0,220,130,0.2);
  pointer-events: none; opacity: 0; z-index: 25;
  white-space: nowrap;
  letter-spacing: 2px;
}

#confetti-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 305;
}