:root {
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --background: 42 33% 96%;
  --foreground: 24 22% 12%;
  --card: 38 36% 99%;
  --card-foreground: 24 22% 12%;
  --popover: 38 36% 99%;
  --popover-foreground: 24 22% 12%;
  --primary: 28 84% 39%;
  --primary-foreground: 38 36% 99%;
  --secondary: 38 28% 88%;
  --secondary-foreground: 24 22% 16%;
  --muted: 38 22% 90%;
  --muted-foreground: 25 13% 38%;
  --accent: 44 86% 86%;
  --accent-foreground: 24 22% 14%;
  --destructive: 0 72% 42%;
  --destructive-foreground: 38 36% 99%;
  --success: 145 63% 32%;
  --success-foreground: 38 36% 99%;
  --warning: 38 92% 46%;
  --warning-foreground: 24 22% 12%;
  --info: 205 82% 39%;
  --info-foreground: 38 36% 99%;
  --border: 33 20% 80%;
  --input: 33 20% 78%;
  --ring: 28 84% 39%;
  --radius: 0.625rem;
  --shadow-sm: 0 1px 2px hsl(var(--foreground) / 0.05);
  --shadow-md: 0 4px 12px hsl(var(--foreground) / 0.08);
  --shadow-lg: 0 12px 32px hsl(var(--foreground) / 0.12);
  --shadow-elegant: 0 18px 48px hsl(var(--primary) / 0.22);
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dark {
  --background: 24 18% 9%;
  --foreground: 38 36% 94%;
  --card: 25 18% 13%;
  --card-foreground: 38 36% 94%;
  --popover: 25 18% 13%;
  --popover-foreground: 38 36% 94%;
  --primary: 31 88% 55%;
  --primary-foreground: 24 22% 10%;
  --secondary: 26 15% 20%;
  --secondary-foreground: 38 36% 92%;
  --muted: 26 13% 19%;
  --muted-foreground: 35 14% 70%;
  --accent: 32 37% 24%;
  --accent-foreground: 38 36% 94%;
  --destructive: 0 70% 52%;
  --destructive-foreground: 38 36% 99%;
  --success: 145 55% 42%;
  --success-foreground: 24 22% 10%;
  --warning: 38 92% 55%;
  --warning-foreground: 24 22% 10%;
  --info: 205 82% 58%;
  --info-foreground: 24 22% 10%;
  --border: 30 12% 28%;
  --input: 30 12% 32%;
  --ring: 31 88% 55%;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: hsl(var(--background)); }
body {
  min-height: 100%;
  margin: 0;
  font-family: var(--font-sans);
  background:
    radial-gradient(circle at 12% 0%, hsl(var(--warning) / 0.24), transparent 25rem),
    radial-gradient(circle at 88% 8%, hsl(var(--primary) / 0.18), transparent 30rem),
    linear-gradient(180deg, hsl(var(--background)), hsl(var(--secondary) / 0.54));
  color: hsl(var(--foreground));
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, hsl(var(--foreground) / 0.035) 1px, transparent 1px),
    linear-gradient(180deg, hsl(var(--foreground) / 0.025) 1px, transparent 1px),
    radial-gradient(circle at 50% 115%, hsl(var(--primary) / 0.16), transparent 34rem);
  background-size: 72px 72px, 72px 72px, auto;
  opacity: 0.75;
}
#root { min-height: 100%; }
button, input, select, textarea { font: inherit; }
img { display: block; max-width: 100%; }
.safe-bottom { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
.bottom-nav-safe { padding-bottom: env(safe-area-inset-bottom); }
.ui-transition { transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); }
.inspect-float { transform-style: preserve-3d; transition: transform var(--transition-smooth); }

.shop-ambience {
  position: relative;
  isolation: isolate;
}
.shop-ambience::after {
  content: "";
  position: fixed;
  inset: auto 0 0;
  z-index: -1;
  height: 34vh;
  background:
    linear-gradient(180deg, transparent, hsl(var(--foreground) / 0.04)),
    repeating-linear-gradient(90deg, hsl(var(--foreground) / 0.045) 0 2px, transparent 2px 96px);
  pointer-events: none;
}
.pawn-card {
  position: relative;
  overflow: hidden;
}
.pawn-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, hsl(var(--card) / 0.36), transparent 38%, hsl(var(--primary) / 0.08));
}
.pawn-card > * { position: relative; }
.wood-counter {
  background:
    linear-gradient(115deg, hsl(var(--primary) / 0.18), transparent 44%),
    repeating-linear-gradient(90deg, hsl(var(--foreground) / 0.06) 0 1px, transparent 1px 82px),
    repeating-linear-gradient(0deg, hsl(var(--foreground) / 0.035) 0 2px, transparent 2px 42px),
    hsl(var(--secondary));
}
.neon-sign {
  border: 1px solid hsl(var(--primary) / 0.42);
  box-shadow: 0 0 0 1px hsl(var(--primary) / 0.12) inset, 0 0 34px hsl(var(--primary) / 0.25);
  text-shadow: 0 0 12px hsl(var(--primary) / 0.68), 0 0 22px hsl(var(--warning) / 0.42);
}
.glass-display {
  background:
    linear-gradient(135deg, hsl(var(--card) / 0.76), hsl(var(--muted) / 0.56)),
    linear-gradient(45deg, transparent 44%, hsl(var(--foreground) / 0.06) 45%, transparent 52%);
  box-shadow: inset 0 1px 0 hsl(var(--card) / 0.92), inset 0 -18px 34px hsl(var(--foreground) / 0.045);
}
.shelf-stripes {
  background:
    linear-gradient(180deg, hsl(var(--card) / 0.56), hsl(var(--muted) / 0.72)),
    repeating-linear-gradient(180deg, transparent 0 58px, hsl(var(--foreground) / 0.09) 58px 62px);
}
.security-pattern {
  background:
    repeating-linear-gradient(135deg, hsl(var(--foreground) / 0.08) 0 2px, transparent 2px 14px),
    hsl(var(--muted) / 0.72);
}
.ticket-tag {
  transform: rotate(-1.5deg);
  box-shadow: 0 8px 22px hsl(var(--foreground) / 0.08);
}
.ambient-bulb {
  box-shadow: 0 0 28px hsl(var(--warning) / 0.52), 0 0 70px hsl(var(--primary) / 0.18);
}