* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow: hidden;
  font-family: 'IBM Plex Sans', sans-serif;
  background: #0a0e1a;
  touch-action: none;
}

#scene-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
}

#ui-root {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  pointer-events: none;
}

::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.3);
}
::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.5);
  border-radius: 3px;
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes popIn {
  0% { transform: scale(0.8); opacity: 0; }
  70% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.panel-slide-in {
  animation: slideInRight 0.3s ease-out forwards;
}

.toolbar-slide-in {
  animation: slideInUp 0.3s ease-out forwards;
}

.pop-in {
  animation: popIn 0.4s ease-out forwards;
}

.glass-panel {
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.btn-glow:hover {
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}

.money-font {
  font-family: 'IBM Plex Mono', monospace;
}

.notification-enter {
  animation: slideInRight 0.3s ease-out, fadeIn 0.3s ease-out;
}

/* Mobile responsive panels */
@media (max-width: 640px) {
  .panel-responsive {
    left: 0.5rem !important;
    right: 0.5rem !important;
    width: auto !important;
    max-width: none !important;
  }
}