:root {
  --background: 38 40% 95%;
  --foreground: 8 24% 18%;
  --primary: 347 46% 27%;
  --secondary: 88 22% 32%;
  --muted: 34 24% 88%;
  --destructive: 2 72% 48%;
  --border: 30 24% 78%;
  --card: 36 36% 97%;
  --shadow-sm: 0 8px 20px hsla(8, 24%, 18%, 0.08);
  --shadow-md: 0 18px 40px hsla(8, 24%, 18%, 0.14);
  --shadow-lg: 0 30px 80px hsla(8, 24%, 18%, 0.22);
  --transition-fast: 180ms ease;
  --transition-smooth: 420ms cubic-bezier(0.22, 1, 0.36, 1);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
}

.dark {
  --background: 348 18% 10%;
  --foreground: 38 38% 92%;
  --primary: 43 72% 60%;
  --secondary: 95 20% 44%;
  --muted: 350 14% 18%;
  --destructive: 0 78% 62%;
  --border: 350 12% 24%;
  --card: 348 16% 14%;
  --shadow-sm: 0 8px 20px hsla(0, 0%, 0%, 0.18);
  --shadow-md: 0 18px 40px hsla(0, 0%, 0%, 0.28);
  --shadow-lg: 0 30px 80px hsla(0, 0%, 0%, 0.4);
}

* {
  box-sizing: border-box;
}

html, body, #root {
  min-height: 100%;
}

body {
  background:
    radial-gradient(circle at top, hsla(43, 72%, 60%, 0.1), transparent 28%),
    linear-gradient(180deg, hsla(38, 40%, 98%, 1), hsla(38, 36%, 93%, 1));
}

.dark body {
  background:
    radial-gradient(circle at top, hsla(43, 72%, 60%, 0.08), transparent 28%),
    linear-gradient(180deg, hsla(348, 18%, 12%, 1), hsla(348, 22%, 8%, 1));
}

.paper-texture {
  background-image:
    linear-gradient(0deg, hsla(0, 0%, 100%, 0.04), hsla(0, 0%, 100%, 0.04)),
    radial-gradient(circle at 20% 20%, hsla(43, 60%, 70%, 0.12), transparent 18%),
    radial-gradient(circle at 70% 30%, hsla(347, 46%, 27%, 0.06), transparent 20%),
    radial-gradient(circle at 30% 70%, hsla(88, 22%, 32%, 0.08), transparent 18%);
}

.glass-panel {
  background: linear-gradient(180deg, hsla(0, 0%, 100%, 0.58), hsla(0, 0%, 100%, 0.34));
  backdrop-filter: blur(16px);
  border: 1px solid hsla(0, 0%, 100%, 0.35);
  box-shadow: var(--shadow-md);
}

.dark .glass-panel {
  background: linear-gradient(180deg, hsla(0, 0%, 100%, 0.08), hsla(0, 0%, 100%, 0.04));
  border: 1px solid hsla(43, 72%, 60%, 0.14);
}

.wood-panel {
  background:
    linear-gradient(135deg, hsla(27, 45%, 31%, 0.92), hsla(23, 40%, 24%, 0.96)),
    repeating-linear-gradient(90deg, hsla(30, 35%, 40%, 0.16) 0 12px, hsla(22, 28%, 24%, 0.2) 12px 24px);
}

.gold-frame {
  border: 1px solid hsla(43, 72%, 60%, 0.42);
  box-shadow: inset 0 0 0 1px hsla(43, 72%, 60%, 0.16), var(--shadow-sm);
}

.btn-token {
  transition: transform var(--transition-fast), box-shadow var(--transition-smooth), background var(--transition-fast), color var(--transition-fast);
}

.btn-token:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.scene-hero {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
}

.scene-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 16%, hsla(43, 72%, 60%, 0.2), transparent 20%),
    linear-gradient(180deg, hsla(347, 46%, 16%, 0.06), transparent 24%),
    linear-gradient(180deg, transparent 0%, hsla(347, 46%, 10%, 0.28) 100%);
  pointer-events: none;
}

.parallax-layer {
  will-change: transform;
  transition: transform var(--transition-smooth);
}

.camera-glide {
  animation: cameraGlide 14s ease-in-out infinite alternate;
}

@keyframes cameraGlide {
  0% { transform: translate3d(-1.5%, 0, 0) scale(1.02); }
  100% { transform: translate3d(1.5%, -1%, 0) scale(1.08); }
}

.pendant {
  position: absolute;
  width: 12px;
  height: 120px;
  background: linear-gradient(180deg, hsla(43, 72%, 60%, 0.2), hsla(43, 72%, 60%, 0));
}

.pendant::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: radial-gradient(circle, hsla(43, 90%, 82%, 0.95), hsla(43, 72%, 60%, 0.42), transparent 70%);
  filter: blur(1px);
}

.marble-card {
  background:
    linear-gradient(135deg, hsla(0, 0%, 100%, 0.92), hsla(36, 28%, 92%, 0.95)),
    repeating-linear-gradient(120deg, hsla(0, 0%, 100%, 0) 0 18px, hsla(347, 16%, 70%, 0.08) 18px 22px, hsla(88, 12%, 68%, 0.08) 22px 25px);
}

.dark .marble-card {
  background:
    linear-gradient(135deg, hsla(348, 10%, 22%, 0.92), hsla(348, 12%, 18%, 0.95)),
    repeating-linear-gradient(120deg, hsla(0, 0%, 100%, 0) 0 18px, hsla(43, 30%, 60%, 0.06) 18px 22px, hsla(88, 16%, 50%, 0.06) 22px 25px);
}

.steam {
  position: absolute;
  width: 56px;
  height: 80px;
  background: radial-gradient(circle at 50% 60%, hsla(0, 0%, 100%, 0.26), transparent 68%);
  filter: blur(8px);
  animation: steamRise 4.5s ease-in-out infinite;
  opacity: 0.7;
}

.steam:nth-child(2) { animation-delay: 1s; left: 18px; }
.steam:nth-child(3) { animation-delay: 2s; left: 42px; }

@keyframes steamRise {
  0% { transform: translateY(26px) scale(0.8); opacity: 0; }
  35% { opacity: 0.62; }
  100% { transform: translateY(-26px) scale(1.16); opacity: 0; }
}

.menu-card-3d {
  transform-style: preserve-3d;
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.menu-card-3d:hover {
  transform: rotateX(5deg) rotateY(-8deg) translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.dish-plate {
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform var(--transition-smooth);
}

.menu-card-3d:hover .dish-plate {
  transform: rotate(8deg) scale(1.03);
}

.floor-grid {
  background-image:
    linear-gradient(hsla(43, 72%, 60%, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, hsla(43, 72%, 60%, 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
}

.table-node {
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.table-node:hover {
  transform: translateY(-2px) scale(1.02);
}

.fade-in {
  animation: fadeIn 500ms ease;
}

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

.slide-reveal {
  animation: slideReveal 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes slideReveal {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.eq-bar {
  animation: pulseBar 1s ease-in-out infinite;
}

.eq-bar:nth-child(2) { animation-delay: 0.14s; }
.eq-bar:nth-child(3) { animation-delay: 0.28s; }
.eq-bar:nth-child(4) { animation-delay: 0.42s; }

@keyframes pulseBar {
  0%, 100% { transform: scaleY(0.5); opacity: 0.55; }
  50% { transform: scaleY(1); opacity: 1; }
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background: hsla(347, 46%, 27%, 0.32);
  border-radius: 999px;
}

.dark ::-webkit-scrollbar-thumb {
  background: hsla(43, 72%, 60%, 0.24);
}

iframe.map-embed {
  filter: saturate(0.9) contrast(1.02);
}

@media (max-width: 640px) {
  .camera-glide {
    animation-duration: 10s;
  }
}