/* ==========================================================================
   Stone Gallery — premium light theme for Robin Rocks Maze
   Warm white stone, charcoal ink, amber + jade accents.
   Real glassmorphism: vibrant backdrop + low-alpha frosted panels.
   Core recipe: backdrop-filter:blur() + rgba() bg + border + shadow.
   Injected via web3/index.html loader (after the game's <style>).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Page foundation — Stone Gallery + VIVID glass backdrop ── */
html,
body {
  background: radial-gradient(750px 420px at 18% -4%, rgba(212, 165, 116, 0.30), transparent 55%),
    radial-gradient(550px 320px at 88% 4%, rgba(90, 158, 139, 0.22), transparent 50%),
    radial-gradient(700px 360px at 50% 105%, rgba(212, 165, 116, 0.12), transparent 60%),
    linear-gradient(180deg, #fdf6ec 0%, #f5f3ef 35%, #ede8de 100%) !important;
  color: #1a1a1e !important;
}
.bg-\[\#050505\] {
  position: relative;
  isolation: isolate;
}
.bg-\[\#050505\]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../menu-bg.jpg") center/cover no-repeat,
    radial-gradient(700px 350px at 22% -2%, rgba(212, 165, 116, 0.24), transparent 50%),
    radial-gradient(520px 280px at 85% 4%, rgba(90, 158, 139, 0.18), transparent 50%),
    #f5f3ef;
  filter: blur(12px) saturate(1.1);
  -webkit-filter: blur(12px) saturate(1.1);
  z-index: -1;
}

/* ── Cards / panels — warm white stone with subtle depth ── */
.bg-\[\#151515\] {
  background-color: #ffffff !important;
  border-color: rgba(42, 42, 46, 0.08) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 8px 24px rgba(42, 42, 46, 0.06), 0 1px 3px rgba(42, 42, 46, 0.04) !important;
  border-radius: 20px !important;
}
.bg-\[\#1e1e1e\] {
  background-color: #faf8f5 !important;
  border-color: rgba(42, 42, 46, 0.07) !important;
}
.bg-\[\#0a0a0a\] {
  background: rgba(255, 255, 255, 0.42) !important;
  backdrop-filter: blur(16px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.15) !important;
  border-color: rgba(255, 255, 255, 0.50) !important;
  box-shadow: 0 8px 32px rgba(42, 42, 46, 0.08), 0 1px 0 rgba(255, 255, 255, 0.85) inset !important;
  will-change: backdrop-filter;
  transform: translateZ(0);
}
.bg-\[\#101010\] {
  background-color: #f5f3ef !important;
}
.bg-\[\#111111\] {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(14px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.15) !important;
  border-color: rgba(255, 255, 255, 0.65) !important;
  box-shadow: 0 4px 16px rgba(42, 42, 46, 0.06), 0 1px 0 rgba(255, 255, 255, 0.80) inset !important;
  will-change: backdrop-filter;
  transform: translateZ(0);
}
.bg-\[\#050a07\]\/90,
.bg-\[\#050a07\]\/92 {
  background-color: rgba(245, 243, 239, 0.92) !important;
  backdrop-filter: blur(14px) !important;
}
.bg-\[\#0e1513\] {
  background: rgba(90, 158, 139, 0.09) !important;
  backdrop-filter: blur(14px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.15) !important;
  border-color: rgba(90, 158, 139, 0.18) !important;
  will-change: backdrop-filter;
  transform: translateZ(0);
}
.bg-\[\#0f0f0f\] {
  background-color: #f5f3ef !important;
}
.bg-\[\#1a1a00\] {
  background-color: #fdf6e3 !important;
}

/* ── Borders — warm stone hairlines ── */
.border-\[\#1e1e1e\] {
  border-color: rgba(42, 42, 46, 0.08) !important;
}
.border-\[\#232323\] {
  border-color: rgba(42, 42, 46, 0.07) !important;
}
.border-\[\#222\] {
  border-color: rgba(42, 42, 46, 0.06) !important;
}
.border-\[\#2a2a2a\] {
  border-color: rgba(42, 42, 46, 0.08) !important;
}
.border-\[\#1d2a27\] {
  border-color: rgba(90, 158, 139, 0.14) !important;
}
.border-\[\#1e2e24\] {
  border-color: rgba(90, 158, 139, 0.12) !important;
}
.border-\[\#141414\] {
  border-color: rgba(42, 42, 46, 0.06) !important;
}


/* Locked levels: muted glass */
.bg-\[\#0e0e0e\] {
  background: #f5f1e8 !important;
  border-color: rgba(42, 42, 46, 0.06) !important;
}
/* Level number badges — inner role tabs: small frosted squares */
.w-10.h-10.rounded-\[6px\] {
  background: #fdf8ec !important;
  border: 1px solid rgba(42, 42, 46, 0.07) !important;
  box-shadow: 0 1px 4px rgba(42, 42, 46, 0.04) !important;
}

/* ── Accent buttons — warm amber + jade, refined ── */
.bg-\[\#00ff88\] {
  background-color: #5a9e8b !important;
  color: #ffffff !important;
}
.bg-\[\#00ffff\] {
  background-color: #d4a574 !important;
  color: #1a1a1e !important;
}
.bg-\[\#ffe600\] {
  background-color: #d4a574 !important;
  color: #1a1a1e !important;
}
.bg-\[\#ffea33\] {
  background-color: #e8c4a0 !important;
  color: #1a1a1e !important;
}
.bg-\[\#ff3b3b\] {
  background-color: #c4705a !important;
  color: #ffffff !important;
}
.bg-\[\#ff5c5c\] {
  background-color: #d4846e !important;
  color: #ffffff !important;
}

/* ── Text — charcoal ink, warm (but preserve amber numbers separately) ── */
.text-white {
  color: #1a1a1e !important;
}
.text-white\/15 {
  color: rgba(26, 26, 30, 0.15) !important;
}
.text-white\/20 {
  color: rgba(26, 26, 30, 0.2) !important;
}
.text-white\/25 {
  color: rgba(26, 26, 30, 0.25) !important;
}
.text-white\/30 {
  color: rgba(26, 26, 30, 0.32) !important;
}
.text-white\/40 {
  color: rgba(26, 26, 30, 0.45) !important;
}
.text-white\/50 {
  color: rgba(26, 26, 30, 0.55) !important;
}
.text-white\/60 {
  color: rgba(26, 26, 30, 0.62) !important;
}
.text-white\/70 {
  color: rgba(26, 26, 30, 0.72) !important;
}
.text-white\/80 {
  color: rgba(26, 26, 30, 0.82) !important;
}

/* ── Accent text — amber/jade on light ── */
.text-\[\#00ff88\],
.text-\[\#00ffff\],
.text-\[\#00E5FF\] {
  color: #5a9e8b !important;
}
.text-\[\#ffe600\] {
  color: #c49a6c !important;
}
.text-\[\#ff3b3b\],
.text-\[\#ff5a5a\] {
  color: #c4705a !important;
}

/* ── Preserve amber numbers inside the stats pill ── */
/* BEST number is amber — keep it gold on glass */
.bg-\[\#1a1a1a\] .text-\[\#ffe600\],
.bg-\[\#1a1a1a\] [class*="text-[#ffe600]"] {
  color: #c49a6c !important;
}
.bg-\[\#1a1a1a\] .text-white.font-bold,
.bg-\[\#1a1a1a\] [class*="text-white"][class*="font-bold"] {
  color: #1a1a1e !important;
}

/* ── Glassmorphism — proper recipe ──
   Real glass = low-alpha bg (0.12-0.18) + blur + border + shadow.
   On light theme: the page gradients above are the vibrant backdrop
   that the glass blurs. ALWAYS keep bg alpha LOW so backdrop shows.
   ─────────────────────────────────────────────────────────────────── */

/* Settings + Help modals: warm frosted glass */
html body .max-w-\[380px\].bg-\[\#151515\],
html body div[class*="max-w-[380px]"].bg-\[\#151515\],
html body [class*="bg-[#151515]"][class*="max-w"] {
  background: rgba(255, 248, 238, 0.58) !important;
  backdrop-filter: blur(24px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.70) !important;
  box-shadow: 0 16px 48px rgba(42, 42, 46, 0.13), 0 1px 0 rgba(255, 255, 255, 0.95) inset !important;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html body .max-w-\[380px\].bg-\[\#151515\],
  html body div[class*="max-w-[380px]"].bg-\[\#151515\] {
    background: rgba(255, 255, 255, 0.92) !important;
  }
}

/* ── STREAK / NFTS / BEST pill + gear/? buttons — vivid warm glass ── */
.bg-\[\#1a1a1a\] {
  background: rgba(255, 248, 235, 0.48) !important;
  backdrop-filter: blur(20px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.70) !important;
  box-shadow: 0 8px 24px rgba(42, 42, 46, 0.12), 0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 0 0 1px rgba(212, 165, 116, 0.10) inset !important;
  color: #1a1a1e !important;
}
.bg-\[\#1a1a1a\] .text-white\/35,
.bg-\[\#1a1a1a\] [class*="text-white/35"] {
  color: rgba(26, 26, 30, 0.50) !important;
}
.bg-\[\#1a1a1a\] .text-white\/15,
.bg-\[\#1a1a1a\] [class*="text-white/15"] {
  color: rgba(26, 26, 30, 0.20) !important;
}
.bg-\[\#1a1a1a\].rounded-full,
.bg-\[\#1a1a1a\][class*="rounded-full"] {
  border-radius: 9999px !important;
}

/* ── Main menu polish ── */
.sans {
  font-family: 'Inter', system-ui, sans-serif !important;
}
.rounded-\[14px\] {
  border-radius: 18px !important;
}
.rounded-\[16px\] {
  border-radius: 20px !important;
}
.rounded-full {
  border-radius: 9999px !important;
}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-thumb {
  background: rgba(42, 42, 46, 0.12);
  border-radius: 999px;
}
::-webkit-scrollbar-track {
  background: #f5f3ef;
}
/* ── Pixelated buttons — PLAY, GIVE UP, web3 Connect/Gems ── */
html body button[class*="bg-[#00ff88]"],
html body button[class*="bg-[#00ffff]"],
html body button[class*="bg-[#ff3b3b]"],
html body button[class*="bg-[#ff5c5c]"],
html body button[class*="bg-[#ffe600]"] {
  border-radius: 0 !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 8px !important;
  line-height: 1.2 !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  image-rendering: pixelated !important;
  box-shadow: 3px 3px 0 #1a1a1e !important;
  border: 2px solid #1a1a1e !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}
.bg-\[\#151515\]:hover {
  border-color: rgba(212, 165, 116, 0.16) !important;
}
.bg-\[\#050505\] > div > div:first-child {
  padding-top: 8px !important;
  padding-bottom: 4px !important;
}
.text-\[10px\] {
  letter-spacing: 0.06em !important;
}

/* ── Reduced motion — solid fallback ── */
@media (prefers-reduced-motion: reduce) {
  .bg-\[\#1a1a1a\],
  html body .max-w-\[380px\].bg-\[\#151515\] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* InstancedBuffer mode - GPU compositing for all glass */
.glass-instanced{will-change:backdrop-filter,transform;transform:translateZ(0);contain:layout style paint;isolation:isolate;}