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

html, body, #root {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'IBM Plex Sans', sans-serif;
  background: #000;
}

@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.15; }
  25% { transform: translate(30px, -20px) scale(1.1); opacity: 0.25; }
  50% { transform: translate(-10px, 20px) scale(0.95); opacity: 0.2; }
  75% { transform: translate(-30px, -10px) scale(1.05); opacity: 0.3; }
}

@keyframes wave1 {
  0% { d: path("M0,300 Q200,250 400,300 T800,280 T1200,320 T1600,290 T2000,310 V600 H0 Z"); }
  50% { d: path("M0,280 Q200,330 400,270 T800,310 T1200,270 T1600,320 T2000,280 V600 H0 Z"); }
  100% { d: path("M0,300 Q200,250 400,300 T800,280 T1200,320 T1600,290 T2000,310 V600 H0 Z"); }
}

@keyframes wave2 {
  0% { d: path("M0,350 Q250,300 500,360 T1000,330 T1500,370 T2000,340 V600 H0 Z"); }
  50% { d: path("M0,330 Q250,370 500,320 T1000,360 T1500,320 T2000,360 V600 H0 Z"); }
  100% { d: path("M0,350 Q250,300 500,360 T1000,330 T1500,370 T2000,340 V600 H0 Z"); }
}

@keyframes floatOrb {
  0% { transform: translateY(0px) translateX(0px); }
  33% { transform: translateY(-40px) translateX(20px); }
  66% { transform: translateY(20px) translateX(-15px); }
  100% { transform: translateY(0px) translateX(0px); }
}

@keyframes pulseGlow {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.15); opacity: 1; }
}

@keyframes selectRipple {
  0% { transform: scale(0.8); opacity: 0.8; }
  100% { transform: scale(2.5); opacity: 0; }
}

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

@keyframes slideReveal {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}

.xmb-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  transition: background 1.5s ease;
}

.wave-svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 60%;
  opacity: 0.08;
}

.wave-svg path {
  animation-duration: 8s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.wave-svg .wave-1 { animation-name: wave1; }
.wave-svg .wave-2 { animation-name: wave2; animation-delay: -2s; }

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  animation: floatOrb linear infinite;
}

.category-icon {
  transition: all 0.45s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.item-row {
  transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 70%);
  animation: selectRipple 0.6s ease-out forwards;
  pointer-events: none;
}

.nav-pulse {
  animation: pulseGlow 0.3s ease-out;
}

.info-panel {
  animation: fadeInUp 0.35s ease-out;
}

.glass-panel {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.status-bar {
  animation: slideReveal 0.6s ease-out;
}

.button-hints {
  animation: fadeInUp 0.8s ease-out;
}

::-webkit-scrollbar { display: none; }

.touch-nav-area {
  touch-action: none;
}