/**
 * Monster World Styles
 *
 * Complete styles for the Monster World Canvas game including overlays and UI
 * All styles are scoped to .gutsybites-monster-world to avoid WordPress conflicts
 */

/* =========================================
   SINGLE-STROKE DESIGN SYSTEM v3.2
   Minimal, line-art inspired design language
   with dark mode support
   ========================================= */
:root {
  /* Stroke Settings */
  --gb-stroke-width: 1.5px;
  --gb-stroke-color: #4a5568;
  --gb-stroke-hover: #2d3436;
  --gb-stroke-light: #718096;

  /* Pastel Backgrounds */
  --gb-bg-light: #fef9f3;
  --gb-bg-medium: #f5f0e8;
  --gb-bg-dark: #2d3436;

  /* Health/Positive (Soft Greens) */
  --gb-green-soft: #a8e6cf;
  --gb-green-accent: #88d8b0;
  --gb-blue-soft: #a0d2db;

  /* Villain/Danger (Soft Corals) */
  --gb-coral-soft: #f5a89a;
  --gb-salmon-soft: #e8b4a0;
  --gb-peach-soft: #ffd3b6;

  /* Text & UI */
  --gb-text-primary: #4a5568;
  --gb-text-muted: #718096;
  --gb-border: rgba(0, 0, 0, 0.08);

  /* Accent (Interactive) */
  --gb-accent: #ffeaa7;
  --gb-accent-hover: #fdcb6e;
}

/* Dark Mode Design System */
@media (prefers-color-scheme: dark) {
  :root {
    /* Stroke Settings - Lighter for dark backgrounds */
    --gb-stroke-color: #e2e8f0;
    --gb-stroke-hover: #f1f5f9;
    --gb-stroke-light: #94a3b8;

    /* Dark Backgrounds */
    --gb-bg-light: #1a1a2e;
    --gb-bg-medium: #16213e;
    --gb-bg-dark: #0f0f1a;

    /* Health/Positive (Brighter for dark mode) */
    --gb-green-soft: #6ee7b7;
    --gb-green-accent: #34d399;
    --gb-blue-soft: #7dd3fc;

    /* Villain/Danger (Slightly brighter) */
    --gb-coral-soft: #fca5a5;
    --gb-salmon-soft: #f9a8a8;
    --gb-peach-soft: #fcd5ce;

    /* Text & UI */
    --gb-text-primary: #f1f5f9;
    --gb-text-muted: #94a3b8;
    --gb-border: rgba(255, 255, 255, 0.08);

    /* Accent (Slightly brighter) */
    --gb-accent: #fde68a;
    --gb-accent-hover: #fbbf24;
  }
}

/* =========================================
   Universal Single-Stroke Button Style
   ========================================= */
.gutsybites-monster-world .gb-btn {
  padding: 10px 20px;
  border: var(--gb-stroke-width) solid var(--gb-stroke-color);
  border-radius: 8px;
  background: transparent;
  color: var(--gb-text-primary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-width 0.15s ease, background 0.15s ease;
}

.gutsybites-monster-world .gb-btn:hover {
  border-width: 2px;
  background: var(--gb-bg-medium);
}

.gutsybites-monster-world .gb-btn--primary {
  background: var(--gb-accent);
  border-color: var(--gb-stroke-color);
}

.gutsybites-monster-world .gb-btn--primary:hover {
  background: var(--gb-accent-hover);
}

/* =========================================
   Fullscreen Container (Mobile-Fixed)
   ========================================= */
.gutsybites-monster-world.gb-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  /* Use dvh for mobile Safari, fallback to vh */
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  z-index: 9999 !important;
  background: var(--gb-bg-light);
  /* Prevent iOS bounce scrolling */
  overflow: hidden !important;
  overscroll-behavior: none !important;
  /* Prevent text selection during play */
  user-select: none !important;
  -webkit-user-select: none !important;
  /* Prevent double-tap zoom */
  touch-action: manipulation !important;
}

.gutsybites-monster-world.gb-fullscreen canvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  /* Prevent touch actions on canvas (handled in JS) */
  touch-action: none !important;
}

/* Minimum touch target size for all buttons */
.gutsybites-monster-world .gb-btn {
  min-width: 44px;
  min-height: 44px;
}

/* =========================================
   Base Container
   ========================================= */
.gutsybites-monster-world {
    width: 100%;
    min-height: 600px;
    position: relative;
    /* Background controlled by WordPress block supports */
    border-radius: 0;
    overflow: hidden;
    font-family: system-ui, -apple-system, sans-serif;
}

.gutsybites-monster-world canvas {
    display: block;
    width: 100%;
    height: 70vh;
    cursor: crosshair;
}

@media (min-width: 768px) {
    .gutsybites-monster-world canvas {
        height: 80vh;
    }
}

/* =========================================
   SCOPED Layout Utilities
   All classes are scoped to .gutsybites-monster-world
   ========================================= */

/* Positioning - CRITICAL for overlays */
.gutsybites-monster-world .fixed { position: fixed !important; }
.gutsybites-monster-world .absolute { position: absolute !important; }
.gutsybites-monster-world .relative { position: relative !important; }
.gutsybites-monster-world .inset-0 { top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; }
.gutsybites-monster-world .inset-x-4 { left: 1rem !important; right: 1rem !important; }
.gutsybites-monster-world .top-4 { top: 1rem !important; }
.gutsybites-monster-world .top-20 { top: 5rem !important; }
.gutsybites-monster-world .left-4 { left: 1rem !important; }
.gutsybites-monster-world .right-4 { right: 1rem !important; }
.gutsybites-monster-world .bottom-4 { bottom: 1rem !important; }
.gutsybites-monster-world .top-1\/2 { top: 50% !important; }
.gutsybites-monster-world .top-1\/3 { top: 33.333% !important; }
.gutsybites-monster-world .left-1\/2 { left: 50% !important; }
.gutsybites-monster-world .-translate-y-1\/2 { transform: translateY(-50%) !important; }
.gutsybites-monster-world .-translate-x-1\/2 { transform: translateX(-50%) !important; }
.gutsybites-monster-world .top-16 { top: 4rem !important; }
.gutsybites-monster-world .top-32 { top: 8rem !important; }

@media (min-width: 640px) {
    .gutsybites-monster-world .sm\:left-6 { left: 1.5rem !important; }
    .gutsybites-monster-world .sm\:top-6 { top: 1.5rem !important; }
    .gutsybites-monster-world .sm\:top-20 { top: 5rem !important; }
    .gutsybites-monster-world .sm\:top-36 { top: 9rem !important; }
    .gutsybites-monster-world .sm\:right-6 { right: 1.5rem !important; }
    .gutsybites-monster-world .sm\:right-auto { right: auto !important; }
    .gutsybites-monster-world .sm\:w-\[420px\] { width: 420px !important; }
    .gutsybites-monster-world .sm\:block { display: block !important; }
}

.gutsybites-monster-world .hidden { display: none !important; }

@media (min-width: 768px) {
    .gutsybites-monster-world .md\:inset-x-auto { left: auto !important; right: auto !important; }
    .gutsybites-monster-world .md\:right-10 { right: 2.5rem !important; }
    .gutsybites-monster-world .md\:w-\[360px\] { width: 360px !important; }
    .gutsybites-monster-world .md\:hidden { display: none !important; }
    .gutsybites-monster-world .md\:h-\[80vh\] { height: 80vh !important; }
}

/* Z-index - CRITICAL for layering */
.gutsybites-monster-world .z-10 { z-index: 10 !important; }
.gutsybites-monster-world .z-20 { z-index: 20 !important; }
.gutsybites-monster-world .z-30 { z-index: 30 !important; }
.gutsybites-monster-world .z-40 { z-index: 40 !important; }
.gutsybites-monster-world .z-50 { z-index: 50 !important; }

/* Flexbox */
.gutsybites-monster-world .flex { display: flex !important; }
.gutsybites-monster-world .flex-col { flex-direction: column !important; }
.gutsybites-monster-world .inline-flex { display: inline-flex !important; }
.gutsybites-monster-world .items-center { align-items: center !important; }
.gutsybites-monster-world .items-start { align-items: flex-start !important; }
.gutsybites-monster-world .justify-center { justify-content: center !important; }
.gutsybites-monster-world .justify-between { justify-content: space-between !important; }
.gutsybites-monster-world .flex-wrap { flex-wrap: wrap !important; }

/* Gaps */
.gutsybites-monster-world .gap-2 { gap: 0.5rem !important; }
.gutsybites-monster-world .gap-3 { gap: 0.75rem !important; }
.gutsybites-monster-world .gap-4 { gap: 1rem !important; }

/* Width */
.gutsybites-monster-world .w-full { width: 100% !important; }
.gutsybites-monster-world .w-10 { width: 2.5rem !important; }
.gutsybites-monster-world .max-w-xs { max-width: 20rem !important; }
.gutsybites-monster-world .max-w-xl { max-width: 36rem !important; }
.gutsybites-monster-world .max-w-lg { max-width: 32rem !important; }

/* Height */
.gutsybites-monster-world .h-10 { height: 2.5rem !important; }
.gutsybites-monster-world .h-full { height: 100% !important; }
.gutsybites-monster-world .h-\[70vh\] { height: 70vh !important; }

/* =========================================
   Spacing Utilities
   ========================================= */
.gutsybites-monster-world .p-3 { padding: 0.75rem !important; }
.gutsybites-monster-world .p-4 { padding: 1rem !important; }
.gutsybites-monster-world .p-6 { padding: 1.5rem !important; }
.gutsybites-monster-world .p-8 { padding: 2rem !important; }
.gutsybites-monster-world .px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.gutsybites-monster-world .px-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
.gutsybites-monster-world .px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
.gutsybites-monster-world .px-5 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
.gutsybites-monster-world .py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.gutsybites-monster-world .py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.gutsybites-monster-world .py-2\.5 { padding-top: 0.625rem !important; padding-bottom: 0.625rem !important; }
.gutsybites-monster-world .mt-2 { margin-top: 0.5rem !important; }
.gutsybites-monster-world .mt-3 { margin-top: 0.75rem !important; }
.gutsybites-monster-world .mt-4 { margin-top: 1rem !important; }
.gutsybites-monster-world .mt-6 { margin-top: 1.5rem !important; }
.gutsybites-monster-world .mb-3 { margin-bottom: 0.75rem !important; }
.gutsybites-monster-world .space-y-3 > * + * { margin-top: 0.75rem !important; }
.gutsybites-monster-world .space-y-4 > * + * { margin-top: 1rem !important; }

/* =========================================
   Typography
   ========================================= */
.gutsybites-monster-world .text-xs { font-size: 0.75rem !important; line-height: 1rem !important; }
.gutsybites-monster-world .text-\[10px\] { font-size: 10px !important; }
.gutsybites-monster-world .text-\[11px\] { font-size: 11px !important; }
.gutsybites-monster-world .text-sm { font-size: 0.875rem !important; line-height: 1.25rem !important; }
.gutsybites-monster-world .text-lg { font-size: 1.125rem !important; line-height: 1.75rem !important; }
.gutsybites-monster-world .text-2xl { font-size: 1.5rem !important; line-height: 2rem !important; }
.gutsybites-monster-world .text-3xl { font-size: 1.875rem !important; line-height: 2.25rem !important; }
.gutsybites-monster-world .font-semibold { font-weight: 600 !important; }
.gutsybites-monster-world .font-bold { font-weight: 700 !important; }
.gutsybites-monster-world .font-extrabold { font-weight: 800 !important; }
.gutsybites-monster-world .uppercase { text-transform: uppercase !important; }
.gutsybites-monster-world .text-center { text-align: center !important; }
.gutsybites-monster-world .leading-snug { line-height: 1.375 !important; }
.gutsybites-monster-world .tracking-\[0\.18em\] { letter-spacing: 0.18em !important; }

/* Text colors */
.gutsybites-monster-world .text-white { color: #ffffff !important; }
.gutsybites-monster-world .text-slate-100 { color: #f1f5f9 !important; }
.gutsybites-monster-world .text-slate-200 { color: #e2e8f0 !important; }
.gutsybites-monster-world .text-slate-300 { color: #cbd5e1 !important; }
.gutsybites-monster-world .text-slate-500 { color: #64748b !important; }
.gutsybites-monster-world .text-slate-600 { color: #475569 !important; }
.gutsybites-monster-world .text-slate-700 { color: #334155 !important; }
.gutsybites-monster-world .text-slate-800 { color: #1e293b !important; }
.gutsybites-monster-world .text-slate-900 { color: #0f172a !important; }
.gutsybites-monster-world .text-emerald-50 { color: #ecfdf5 !important; }
.gutsybites-monster-world .text-emerald-100 { color: #d1fae5 !important; }
.gutsybites-monster-world .text-emerald-200 { color: #a7f3d0 !important; }
.gutsybites-monster-world .text-emerald-900 { color: #064e3b !important; }

/* =========================================
   Backgrounds
   ========================================= */
.gutsybites-monster-world .bg-white { background-color: #ffffff !important; }
.gutsybites-monster-world .bg-white\/60 { background-color: rgba(255, 255, 255, 0.6) !important; }
.gutsybites-monster-world .bg-white\/70 { background-color: rgba(255, 255, 255, 0.7) !important; }
.gutsybites-monster-world .bg-white\/80 { background-color: rgba(255, 255, 255, 0.8) !important; }
.gutsybites-monster-world .bg-white\/90 { background-color: rgba(255, 255, 255, 0.9) !important; }
.gutsybites-monster-world .bg-slate-50\/90 { background-color: rgba(248, 250, 252, 0.9) !important; }
.gutsybites-monster-world .bg-slate-100\/70 { background-color: rgba(241, 245, 249, 0.7) !important; }
.gutsybites-monster-world .bg-slate-800 { background-color: #1e293b !important; }
.gutsybites-monster-world .bg-slate-800\/60 { background-color: rgba(30, 41, 59, 0.6) !important; }
.gutsybites-monster-world .bg-slate-800\/70 { background-color: rgba(30, 41, 59, 0.7) !important; }
.gutsybites-monster-world .bg-slate-900\/70 { background-color: rgba(15, 23, 42, 0.7) !important; }
.gutsybites-monster-world .bg-slate-900\/80 { background-color: rgba(15, 23, 42, 0.8) !important; }
.gutsybites-monster-world .bg-slate-900\/85 { background-color: rgba(15, 23, 42, 0.85) !important; }
.gutsybites-monster-world .bg-slate-900\/90 { background-color: rgba(15, 23, 42, 0.9) !important; }
.gutsybites-monster-world .bg-slate-950\/70 { background-color: rgba(2, 6, 23, 0.7) !important; }
.gutsybites-monster-world .bg-slate-950\/80 { background-color: rgba(2, 6, 23, 0.8) !important; }
.gutsybites-monster-world .bg-slate-950\/90 { background-color: rgba(2, 6, 23, 0.9) !important; }
.gutsybites-monster-world .bg-emerald-100\/80 { background-color: rgba(209, 250, 229, 0.8) !important; }
.gutsybites-monster-world .bg-emerald-500 { background-color: #22c55e !important; }
.gutsybites-monster-world .bg-emerald-500\/15 { background-color: rgba(34, 197, 94, 0.15) !important; }
.gutsybites-monster-world .bg-emerald-500\/90 { background-color: rgba(34, 197, 94, 0.9) !important; }
.gutsybites-monster-world .bg-rose-500\/90 { background-color: rgba(244, 63, 94, 0.9) !important; }
.gutsybites-monster-world .bg-amber-100\/80 { background-color: rgba(254, 243, 199, 0.8) !important; }
.gutsybites-monster-world .bg-amber-500\/15 { background-color: rgba(245, 158, 11, 0.15) !important; }
.gutsybites-monster-world .text-amber-100 { color: #fef3c7 !important; }
.gutsybites-monster-world .text-amber-900 { color: #78350f !important; }

/* Gradient backgrounds */
.gutsybites-monster-world .bg-gradient-to-b {
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops)) !important;
}
.gutsybites-monster-world .from-white\/50 {
    --tw-gradient-from: rgba(255, 255, 255, 0.5);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent);
}
.gutsybites-monster-world .from-slate-900\/60 {
    --tw-gradient-from: rgba(15, 23, 42, 0.6);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent);
}
.gutsybites-monster-world .via-transparent {
    --tw-gradient-stops: var(--tw-gradient-from), transparent, var(--tw-gradient-to, transparent);
}
.gutsybites-monster-world .to-slate-100\/60 { --tw-gradient-to: rgba(241, 245, 249, 0.6); }
.gutsybites-monster-world .to-slate-950\/60 { --tw-gradient-to: rgba(2, 6, 23, 0.6); }

/* Radial gradient vignette */
.gutsybites-monster-world .bg-\[radial-gradient\(circle_at_center\,transparent_0\%\,transparent_55\%\,rgba\(0\,0\,0\,0\.55\)_100\%\)\] {
    background: radial-gradient(circle at center, transparent 0%, transparent 55%, rgba(0,0,0,0.55) 100%) !important;
}

/* =========================================
   Borders
   ========================================= */
.gutsybites-monster-world .border { border-width: 1px !important; border-style: solid !important; }
.gutsybites-monster-world .border-t { border-top-width: 1px !important; border-style: solid !important; }
.gutsybites-monster-world .border-slate-200 { border-color: #e2e8f0 !important; }
.gutsybites-monster-world .border-slate-300\/50 { border-color: rgba(203, 213, 225, 0.5) !important; }
.gutsybites-monster-world .border-slate-300\/70 { border-color: rgba(203, 213, 225, 0.7) !important; }
.gutsybites-monster-world .border-slate-800 { border-color: #1e293b !important; }
.gutsybites-monster-world .border-white\/5 { border-color: rgba(255, 255, 255, 0.05) !important; }
.gutsybites-monster-world .border-white\/10 { border-color: rgba(255, 255, 255, 0.1) !important; }
.gutsybites-monster-world .border-white\/20 { border-color: rgba(255, 255, 255, 0.2) !important; }

/* Border radius */
.gutsybites-monster-world .rounded-full { border-radius: 9999px !important; }
.gutsybites-monster-world .rounded-2xl { border-radius: 1rem !important; }
.gutsybites-monster-world .rounded-3xl { border-radius: 1.5rem !important; }

/* =========================================
   Shadows & Rings
   ========================================= */
.gutsybites-monster-world .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; }
.gutsybites-monster-world .shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important; }
.gutsybites-monster-world .shadow-inner { box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important; }
.gutsybites-monster-world .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; }
.gutsybites-monster-world .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important; }
.gutsybites-monster-world .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important; }
.gutsybites-monster-world .shadow-emerald-500\/30 {
    --tw-shadow-color: rgba(34, 197, 94, 0.3);
    box-shadow: 0 20px 25px -5px var(--tw-shadow-color) !important;
}

/* Rings */
.gutsybites-monster-world .ring-1 { box-shadow: 0 0 0 1px var(--tw-ring-color, rgba(0,0,0,0.05)) !important; }
.gutsybites-monster-world .ring-2 { box-shadow: 0 0 0 2px var(--tw-ring-color, rgba(0,0,0,0.05)) !important; }
.gutsybites-monster-world .ring-slate-200 { --tw-ring-color: #e2e8f0; }
.gutsybites-monster-world .ring-slate-300\/50 { --tw-ring-color: rgba(203, 213, 225, 0.5); }
.gutsybites-monster-world .ring-slate-500\/40 { --tw-ring-color: rgba(100, 116, 139, 0.4); }
.gutsybites-monster-world .ring-white\/5 { --tw-ring-color: rgba(255, 255, 255, 0.05); }
.gutsybites-monster-world .ring-white\/10 { --tw-ring-color: rgba(255, 255, 255, 0.1); }
.gutsybites-monster-world .ring-white\/80 { --tw-ring-color: rgba(255, 255, 255, 0.8); }
.gutsybites-monster-world .ring-emerald-600\/30 { --tw-ring-color: rgba(5, 150, 105, 0.3); }
.gutsybites-monster-world .ring-emerald-300\/50 { --tw-ring-color: rgba(110, 231, 183, 0.5); }
.gutsybites-monster-world .ring-rose-300\/50 { --tw-ring-color: rgba(253, 164, 175, 0.5); }
.gutsybites-monster-world .ring-amber-400\/30 { --tw-ring-color: rgba(251, 191, 36, 0.3); }

/* =========================================
   Effects
   ========================================= */
/* iOS perf: replaced backdrop-filter blur with solid background */
.gutsybites-monster-world .backdrop-blur {
    background: rgba(255, 255, 255, 0.92) !important;
}

/* Feedback toast animation */
.gutsybites-monster-world .animate-\[feedbackPop_0\.3s_ease-out\] {
    animation: feedbackPop 0.3s ease-out !important;
}
.gutsybites-monster-world .pointer-events-none { pointer-events: none !important; }
.gutsybites-monster-world .pointer-events-auto { pointer-events: auto !important; }
.gutsybites-monster-world .overflow-hidden { overflow: hidden !important; }

/* =========================================
   Transitions & Hover States
   ========================================= */
.gutsybites-monster-world .transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-duration: 150ms !important;
}

.gutsybites-monster-world .hover\:translate-y-\[1px\]:hover { transform: translateY(1px) !important; }
.gutsybites-monster-world .hover\:-translate-y-\[1px\]:hover { transform: translateY(-1px) !important; }
.gutsybites-monster-world .hover\:shadow:hover { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important; }
.gutsybites-monster-world .hover\:shadow-xl:hover { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important; }
.gutsybites-monster-world .hover\:shadow-2xl:hover { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important; }
.gutsybites-monster-world .hover\:bg-slate-100:hover { background-color: #f1f5f9 !important; }
.gutsybites-monster-world .hover\:bg-slate-800:hover { background-color: #1e293b !important; }
.gutsybites-monster-world .hover\:bg-white\/10:hover { background-color: rgba(255, 255, 255, 0.1) !important; }

/* Focus states */
.gutsybites-monster-world .focus-visible\:outline:focus-visible { outline-style: solid !important; }
.gutsybites-monster-world .focus-visible\:outline-2:focus-visible { outline-width: 2px !important; }
.gutsybites-monster-world .focus-visible\:outline-offset-2:focus-visible { outline-offset: 2px !important; }
.gutsybites-monster-world .focus-visible\:outline-emerald-300:focus-visible { outline-color: #6ee7b7 !important; }
.gutsybites-monster-world .focus-visible\:outline-emerald-600:focus-visible { outline-color: #059669 !important; }

/* =========================================
   Dark Mode Variants (using media query)
   ========================================= */
@media (prefers-color-scheme: dark) {
    /* Background controlled by WordPress block supports */

    .gutsybites-monster-world .dark\:border-slate-800 { border-color: #1e293b !important; }
    .gutsybites-monster-world .dark\:border-white\/5 { border-color: rgba(255, 255, 255, 0.05) !important; }
    .gutsybites-monster-world .dark\:border-white\/10 { border-color: rgba(255, 255, 255, 0.1) !important; }
    .gutsybites-monster-world .dark\:bg-slate-800 { background-color: #1e293b !important; }
    .gutsybites-monster-world .dark\:bg-slate-800\/60 { background-color: rgba(30, 41, 59, 0.6) !important; }
    .gutsybites-monster-world .dark\:bg-slate-800\/70 { background-color: rgba(30, 41, 59, 0.7) !important; }
    .gutsybites-monster-world .dark\:bg-slate-900\/60 { background-color: rgba(15, 23, 42, 0.6) !important; }
    .gutsybites-monster-world .dark\:bg-slate-900\/70 { background-color: rgba(15, 23, 42, 0.7) !important; }
    .gutsybites-monster-world .dark\:bg-slate-900\/80 { background-color: rgba(15, 23, 42, 0.8) !important; }
    .gutsybites-monster-world .dark\:bg-slate-900\/90 { background-color: rgba(15, 23, 42, 0.9) !important; }
    .gutsybites-monster-world .dark\:bg-slate-950\/80 { background-color: rgba(2, 6, 23, 0.8) !important; }
    .gutsybites-monster-world .dark\:bg-emerald-500\/15 { background-color: rgba(34, 197, 94, 0.15) !important; }
    .gutsybites-monster-world .dark\:text-white { color: #ffffff !important; }
    .gutsybites-monster-world .dark\:text-slate-100 { color: #f1f5f9 !important; }
    .gutsybites-monster-world .dark\:text-slate-200 { color: #e2e8f0 !important; }
    .gutsybites-monster-world .dark\:text-slate-300 { color: #cbd5e1 !important; }
    .gutsybites-monster-world .dark\:ring-white\/5 { --tw-ring-color: rgba(255, 255, 255, 0.05); }
    .gutsybites-monster-world .dark\:ring-white\/10 { --tw-ring-color: rgba(255, 255, 255, 0.1); }
    .gutsybites-monster-world .dark\:prose-invert { color: #f1f5f9 !important; }
    .gutsybites-monster-world .dark\:hover\:bg-slate-800:hover { background-color: #1e293b !important; }
    .gutsybites-monster-world .dark\:bg-slate-800\/90 { background-color: rgba(30, 41, 59, 0.9) !important; }
    .gutsybites-monster-world .dark\:bg-amber-500\/15 { background-color: rgba(245, 158, 11, 0.15) !important; }
    .gutsybites-monster-world .dark\:text-amber-100 { color: #fef3c7 !important; }
}

/* =========================================
   Loading State
   ========================================= */
.gutsybites-monster-world.loading {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gutsybites-monster-world.loading::after {
    content: '';
    width: 40px;
    height: 40px;
    border: 4px solid var(--gb-color-text-light, #64748b);
    border-top-color: var(--gb-color-primary, #22c55e);
    border-radius: 50%;
    animation: monster-world-spin 0.8s linear infinite;
}

@keyframes monster-world-spin {
    to { transform: rotate(360deg); }
}

@keyframes feedbackPop {
    0% { opacity: 0; transform: scale(0.8) translateY(-10px); }
    60% { transform: scale(1.05) translateY(0); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* =========================================
   Error State
   ========================================= */
.gutsybites-monster-world .gutsybites-error {
    padding: 2rem;
    text-align: center;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    border: 1px dashed #ef4444;
    border-radius: 0.5rem;
}

/* =========================================
   Responsive Adjustments
   ========================================= */
@media (max-width: 768px) {
    .gutsybites-monster-world {
        min-height: 400px;
    }
}

@media (max-width: 480px) {
    .gutsybites-monster-world {
        min-height: 300px;
        border-radius: 0.5rem;
    }
}

/* =========================================
   Accessibility - Reduced Motion
   ========================================= */
@media (prefers-reduced-motion: reduce) {
    .gutsybites-monster-world.loading::after {
        animation: none;
        border-color: var(--gb-color-primary, #22c55e);
    }

    .gutsybites-monster-world .transition {
        transition: none !important;
    }
}

/* =========================================
   Button Reset for WordPress Conflicts
   ========================================= */
.gutsybites-monster-world button {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-family: inherit;
}

/* Reset any WordPress list styles */
.gutsybites-monster-world ul,
.gutsybites-monster-world li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* =========================================
   Game Hub Container
   ========================================= */
.gutsybites-monster-world .game-hub {
    min-height: 600px;
    position: relative;
}

.gutsybites-monster-world .game-hub--playing {
    position: fixed;
    inset: 0;
    z-index: 9998;
    overflow: hidden;
}

.gutsybites-monster-world .game-hub__back-btn {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 60;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gutsybites-monster-world .game-hub__back-btn:hover {
    background: #ffffff;
    transform: translateX(-2px);
}

@media (prefers-color-scheme: dark) {
    .gutsybites-monster-world .game-hub__back-btn {
        background: rgba(30, 41, 59, 0.9);
        border-color: rgba(255, 255, 255, 0.1);
        color: #e2e8f0;
    }
}

/* Coming Soon Screen */
.gutsybites-monster-world .coming-soon-screen {
    min-height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    background: linear-gradient(135deg, #f8f5ec 0%, #e8f3ff 100%);
}

.gutsybites-monster-world .coming-soon-screen h2 {
    font-size: 2rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 1rem;
}

.gutsybites-monster-world .coming-soon-screen p {
    color: #64748b;
    margin: 0 0 2rem;
}

.gutsybites-monster-world .coming-soon-screen__btn {
    padding: 0.75rem 1.5rem;
    background: #22c55e;
    border: none;
    border-radius: 9999px;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gutsybites-monster-world .coming-soon-screen__btn:hover {
    background: #16a34a;
    transform: translateY(-2px);
}

@media (prefers-color-scheme: dark) {
    .gutsybites-monster-world .coming-soon-screen {
        background: linear-gradient(135deg, #0b1220 0%, #111827 100%);
    }

    .gutsybites-monster-world .coming-soon-screen h2 {
        color: #f1f5f9;
    }

    .gutsybites-monster-world .coming-soon-screen p {
        color: #94a3b8;
    }
}

/* =========================================
   Game Launcher Styles
   ========================================= */
.gutsybites-monster-world .game-launcher {
    min-height: 100%;
    padding: 2rem 1rem;
    background: linear-gradient(135deg, #f8f5ec 0%, #e8f3ff 50%, #f0fdf4 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

@media (prefers-color-scheme: dark) {
    .gutsybites-monster-world .game-launcher {
        background: linear-gradient(135deg, #0b1220 0%, #111827 50%, #0f1a14 100%);
    }
}

.gutsybites-monster-world .game-launcher__header {
    text-align: center;
    max-width: 480px;
}

.gutsybites-monster-world .game-launcher__logo {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
}

.gutsybites-monster-world .game-launcher__logo-svg {
    width: 100%;
    height: 100%;
    color: #22c55e;
    filter: drop-shadow(0 4px 12px rgba(34, 197, 94, 0.3));
}

.gutsybites-monster-world .game-launcher__title {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
    margin: 0 0 0.5rem;
}

@media (prefers-color-scheme: dark) {
    .gutsybites-monster-world .game-launcher__title {
        color: #f1f5f9;
    }
}

.gutsybites-monster-world .game-launcher__subtitle {
    font-size: 1rem;
    color: #64748b;
    margin: 0;
}

/* Category Filter */
.gutsybites-monster-world .game-launcher__categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.gutsybites-monster-world .game-launcher__category {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.9);
    font-size: 0.875rem;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gutsybites-monster-world .game-launcher__category:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-1px);
}

.gutsybites-monster-world .game-launcher__category--active {
    background: #22c55e;
    border-color: #22c55e;
    color: white;
}

@media (prefers-color-scheme: dark) {
    .gutsybites-monster-world .game-launcher__category {
        background: rgba(30, 41, 59, 0.7);
        border-color: rgba(255, 255, 255, 0.08);
        color: #cbd5e1;
    }
}

/* Game Grid */
.gutsybites-monster-world .game-launcher__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    width: 100%;
    max-width: 1000px;
    padding: 0 1rem;
}

@media (min-width: 768px) {
    .gutsybites-monster-world .game-launcher__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .gutsybites-monster-world .game-launcher__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Game Tile */
.gutsybites-monster-world .game-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 1rem;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 1.5rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    text-align: center;
}

.gutsybites-monster-world .game-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15);
}

@media (prefers-color-scheme: dark) {
    .gutsybites-monster-world .game-tile {
        background: rgba(30, 41, 59, 0.75);
        border-color: rgba(255, 255, 255, 0.08);
    }
}

.gutsybites-monster-world .game-tile__glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, var(--accent-color) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.gutsybites-monster-world .game-tile:hover .game-tile__glow {
    opacity: 0.08;
}

.gutsybites-monster-world .game-tile--coming-soon {
    opacity: 0.7;
    cursor: not-allowed;
}

.gutsybites-monster-world .game-tile--coming-soon:hover {
    transform: none;
}

.gutsybites-monster-world .game-tile__icon-wrapper {
    width: 64px;
    height: 64px;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gutsybites-monster-world .game-tile__icon {
    width: 100%;
    height: 100%;
}

.gutsybites-monster-world .game-tile__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.gutsybites-monster-world .game-tile__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

@media (prefers-color-scheme: dark) {
    .gutsybites-monster-world .game-tile__title {
        color: #f1f5f9;
    }
}

.gutsybites-monster-world .game-tile__tagline {
    font-size: 0.75rem;
    color: #64748b;
    margin: 0 0 0.5rem;
}

.gutsybites-monster-world .game-tile__badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.gutsybites-monster-world .game-tile__meta {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.gutsybites-monster-world .game-tile__difficulty,
.gutsybites-monster-world .game-tile__category {
    font-size: 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.05);
    color: #64748b;
}

.gutsybites-monster-world .game-tile__difficulty--easy { color: #22c55e; }
.gutsybites-monster-world .game-tile__difficulty--medium { color: #f59e0b; }
.gutsybites-monster-world .game-tile__difficulty--hard { color: #ef4444; }

.gutsybites-monster-world .game-tile__play-hint {
    position: absolute;
    bottom: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.8rem;
    background: var(--accent-color);
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    animation: gameTilePlayPop 0.2s ease-out;
}

@keyframes gameTilePlayPop {
    0% { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.9); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.gutsybites-monster-world .game-launcher__footer {
    text-align: center;
    padding: 1rem;
    color: #94a3b8;
    font-size: 0.875rem;
}

/* =========================================
   Sugar Invaders
   ========================================= */
.gutsybites-monster-world .sugar-invaders {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #0f172a;
    border-radius: 1rem;
    overflow: hidden;
}

.gutsybites-monster-world .sugar-invaders__canvas {
    display: block;
    max-width: 100%;
    border-radius: 0.5rem;
}

.gutsybites-monster-world .sugar-invaders__mobile-hint {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 600px;
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
}

@media (min-width: 768px) {
    .gutsybites-monster-world .sugar-invaders__mobile-hint {
        display: none;
    }
}

.gutsybites-monster-world .sugar-invaders__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: rgba(15, 23, 42, 0.97);
    z-index: 50;
    padding: 2rem;
    text-align: center;
}

.gutsybites-monster-world .sugar-invaders__overlay h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #f8fafc;
    margin: 0;
}

.gutsybites-monster-world .sugar-invaders__overlay p {
    color: #94a3b8;
    margin: 0;
}

/* Legacy button style removed - using .sugar-invaders__btn classes instead */

.gutsybites-monster-world .sugar-invaders__overlay--gameover h2 {
    color: #f43f5e;
}

.gutsybites-monster-world .sugar-invaders__overlay--victory h2 {
    color: #22c55e;
}

.gutsybites-monster-world .sugar-invaders__new-record {
    color: #fbbf24 !important;
    font-weight: 700;
    animation: recordPulse 0.5s ease-in-out infinite alternate;
}

@keyframes recordPulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.05); }
}

/* =========================================
   Gut Rush
   ========================================= */
.gutsybites-monster-world .gut-rush {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(180deg, #1e3a5f 0%, #0f172a 100%);
    border-radius: 1rem;
    overflow: hidden;
}

.gutsybites-monster-world .gut-rush__canvas {
    display: block;
    max-width: 100%;
    border-radius: 0.5rem;
}

.gutsybites-monster-world .gut-rush__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: rgba(15, 23, 42, 0.97);
    z-index: 50;
    padding: 2rem;
    text-align: center;
}

.gutsybites-monster-world .gut-rush__overlay h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #f8fafc;
    margin: 0;
}

.gutsybites-monster-world .gut-rush__overlay p {
    color: #94a3b8;
    margin: 0.25rem 0;
}

.gutsybites-monster-world .gut-rush__instructions {
    background: rgba(255, 255, 255, 0.05);
    padding: 1rem;
    border-radius: 0.75rem;
    margin: 0.5rem 0;
    text-align: left;
}

.gutsybites-monster-world .gut-rush__instructions p {
    font-size: 0.875rem;
}

/* Legacy button style removed - using .gut-rush__btn classes instead */

.gutsybites-monster-world .gut-rush__overlay--gameover h2 {
    color: #ef4444;
}

.gutsybites-monster-world .gut-rush__new-record {
    color: #fbbf24 !important;
    font-weight: 700;
    animation: recordPulse 0.5s ease-in-out infinite alternate;
}

/* =========================================
   Energy Match
   ========================================= */
.gutsybites-monster-world .energy-match {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 1rem;
    overflow: hidden;
    padding: 1rem;
}

.gutsybites-monster-world .energy-match__menu,
.gutsybites-monster-world .energy-match__complete {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem;
    text-align: center;
    height: 100%;
    min-height: 400px;
}

.gutsybites-monster-world .energy-match__menu h2,
.gutsybites-monster-world .energy-match__complete h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #78350f;
    margin: 0;
}

.gutsybites-monster-world .energy-match__menu p,
.gutsybites-monster-world .energy-match__complete p {
    color: #92400e;
    margin: 0;
}

.gutsybites-monster-world .energy-match__difficulty {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0;
}

.gutsybites-monster-world .energy-match__difficulty h3 {
    font-size: 1rem;
    color: #78350f;
    margin: 0 0 0.5rem 0;
}

.gutsybites-monster-world .energy-match__difficulty button,
.gutsybites-monster-world .energy-match__menu button,
.gutsybites-monster-world .energy-match__actions button {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #78350f;
    background: white;
    border: 2px solid #f59e0b;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s;
}

.gutsybites-monster-world .energy-match__difficulty button:hover,
.gutsybites-monster-world .energy-match__menu button:hover,
.gutsybites-monster-world .energy-match__actions button:hover {
    background: #f59e0b;
    color: white;
    transform: translateY(-2px);
}

.gutsybites-monster-world .energy-match__difficulty button.active {
    background: #f59e0b;
    color: white;
}

.gutsybites-monster-world .energy-match__exit-btn {
    margin-top: 1rem;
    background: transparent !important;
    border-color: #d97706 !important;
    color: #d97706 !important;
}

.gutsybites-monster-world .energy-match__high-scores {
    background: rgba(255, 255, 255, 0.5);
    padding: 1rem;
    border-radius: 0.75rem;
    margin-top: 1rem;
}

.gutsybites-monster-world .energy-match__high-scores h3 {
    font-size: 0.875rem;
    color: #78350f;
    margin: 0 0 0.5rem 0;
}

.gutsybites-monster-world .energy-match__high-scores p {
    font-size: 0.875rem;
    margin: 0.25rem 0;
}

.gutsybites-monster-world .energy-match__hud {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 0.75rem;
    margin-bottom: 1rem;
}

.gutsybites-monster-world .energy-match__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gutsybites-monster-world .energy-match__label {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #92400e;
}

.gutsybites-monster-world .energy-match__value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #78350f;
}

.gutsybites-monster-world .energy-match__pause-btn {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f59e0b;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.875rem;
}

.gutsybites-monster-world .energy-match__info-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(120, 53, 15, 0.95);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    z-index: 100;
    animation: infoPopup 2s ease-out forwards;
    white-space: nowrap;
}

@keyframes infoPopup {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    10% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}

.gutsybites-monster-world .energy-match__board {
    display: grid;
    gap: 0.5rem;
    padding: 0.5rem;
    flex: 1;
    align-content: center;
    justify-content: center;
    max-width: 500px;
    margin: 0 auto;
}

.gutsybites-monster-world .energy-match__card {
    aspect-ratio: 1;
    width: 100%;
    max-width: 80px;
    perspective: 1000px;
    cursor: pointer;
}

.gutsybites-monster-world .energy-match__card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.4s ease;
}

.gutsybites-monster-world .energy-match__card.flipped .energy-match__card-inner,
.gutsybites-monster-world .energy-match__card.matched .energy-match__card-inner {
    transform: rotateY(180deg);
}

.gutsybites-monster-world .energy-match__card-front,
.gutsybites-monster-world .energy-match__card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.gutsybites-monster-world .energy-match__card-front {
    background: var(--card-color, #f59e0b);
    transform: rotateY(180deg);
}

.gutsybites-monster-world .energy-match__card-back {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
}

.gutsybites-monster-world .energy-match__card-question {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f59e0b;
}

.gutsybites-monster-world .energy-match__card-icon {
    font-size: 2rem;
}

.gutsybites-monster-world .energy-match__card.matched {
    animation: matchPop 0.3s ease-out;
}

@keyframes matchPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.gutsybites-monster-world .energy-match__card.matched .energy-match__card-front {
    box-shadow: 0 0 20px var(--card-color, #f59e0b);
}

.gutsybites-monster-world .energy-match__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: rgba(254, 243, 199, 0.97);
    z-index: 50;
    padding: 2rem;
    text-align: center;
}

.gutsybites-monster-world .energy-match__overlay h2 {
    color: #78350f;
}

/* Legacy button style removed - using .energy-match__btn classes instead */

.gutsybites-monster-world .energy-match__results {
    background: rgba(255, 255, 255, 0.7);
    padding: 1rem;
    border-radius: 0.75rem;
    margin: 0.5rem 0;
}

.gutsybites-monster-world .energy-match__results p {
    margin: 0.25rem 0;
    font-size: 1rem;
}

.gutsybites-monster-world .energy-match__new-record {
    color: #22c55e !important;
    font-weight: 700;
    animation: recordPulse 0.5s ease-in-out infinite alternate;
}

.gutsybites-monster-world .energy-match__health-tips {
    background: rgba(255, 255, 255, 0.7);
    padding: 1rem;
    border-radius: 0.75rem;
    text-align: left;
    max-width: 400px;
    max-height: 200px;
    overflow-y: auto;
}

.gutsybites-monster-world .energy-match__health-tips h3 {
    font-size: 0.875rem;
    color: #78350f;
    margin: 0 0 0.5rem 0;
}

.gutsybites-monster-world .energy-match__health-tips ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gutsybites-monster-world .energy-match__health-tips li {
    font-size: 0.75rem;
    color: #92400e;
    padding: 0.25rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gutsybites-monster-world .energy-match__actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* Dark mode for Energy Match */
@media (prefers-color-scheme: dark) {
    .gutsybites-monster-world .energy-match {
        background: linear-gradient(180deg, #78350f 0%, #451a03 100%);
    }

    .gutsybites-monster-world .energy-match__menu h2,
    .gutsybites-monster-world .energy-match__complete h2,
    .gutsybites-monster-world .energy-match__overlay h2 {
        color: #fef3c7;
    }

    .gutsybites-monster-world .energy-match__menu p,
    .gutsybites-monster-world .energy-match__complete p {
        color: #fde68a;
    }

    .gutsybites-monster-world .energy-match__hud {
        background: rgba(0, 0, 0, 0.3);
    }

    .gutsybites-monster-world .energy-match__label {
        color: #fde68a;
    }

    .gutsybites-monster-world .energy-match__value {
        color: #fef3c7;
    }

    .gutsybites-monster-world .energy-match__card-back {
        background: linear-gradient(135deg, #78350f 0%, #451a03 100%);
    }

    .gutsybites-monster-world .energy-match__results,
    .gutsybites-monster-world .energy-match__health-tips,
    .gutsybites-monster-world .energy-match__high-scores {
        background: rgba(0, 0, 0, 0.3);
    }

    .gutsybites-monster-world .energy-match__health-tips h3,
    .gutsybites-monster-world .energy-match__high-scores h3 {
        color: #fef3c7;
    }

    .gutsybites-monster-world .energy-match__health-tips li,
    .gutsybites-monster-world .energy-match__high-scores p {
        color: #fde68a;
    }

    .gutsybites-monster-world .energy-match__overlay {
        background: rgba(69, 26, 3, 0.95);
    }

    .gutsybites-monster-world .energy-match__difficulty h3 {
        color: #fef3c7;
    }
}

/* =========================================
   Stompy's Dance (Toddler Elephant Game)
   ========================================= */
.gutsybites-monster-world .stompy-dance {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #bfdbfe 0%, #dbeafe 100%);
    border-radius: 1rem;
    overflow: hidden;
}

.gutsybites-monster-world .stompy-dance__canvas {
    display: block;
    max-width: 100%;
    touch-action: manipulation;
    cursor: pointer;
}

.gutsybites-monster-world .stompy-dance__start {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #bfdbfe 0%, #dbeafe 100%);
    z-index: 10;
}

.gutsybites-monster-world .stompy-dance__start-content {
    text-align: center;
    padding: 2rem;
    animation: stompyBounce 1s ease-in-out infinite;
}

@keyframes stompyBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.gutsybites-monster-world .stompy-dance__elephant-emoji {
    font-size: 5rem;
    display: block;
    margin-bottom: 1rem;
}

.gutsybites-monster-world .stompy-dance__start h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #1e40af;
    margin: 0 0 0.5rem 0;
}

.gutsybites-monster-world .stompy-dance__start p {
    font-size: 1.25rem;
    color: #3b82f6;
    margin: 0 0 1.5rem 0;
}

.gutsybites-monster-world .stompy-dance__tap-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.gutsybites-monster-world .stompy-dance__tap-circle {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    background: white;
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
    animation: tapPulse 1.5s ease-in-out infinite;
}

@keyframes tapPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 8px 30px rgba(59, 130, 246, 0.5);
    }
}

.gutsybites-monster-world .stompy-dance__tap-hint span:last-child {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e40af;
}

.gutsybites-monster-world .stompy-dance__exit {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 50%;
    font-size: 1.25rem;
    color: #64748b;
    cursor: pointer;
    z-index: 100;
    transition: all 0.2s;
}

.gutsybites-monster-world .stompy-dance__exit:hover {
    background: white;
    color: #1e293b;
    transform: scale(1.1);
}

/* Make the game more touch-friendly for toddlers */
@media (max-width: 480px) {
    .gutsybites-monster-world .stompy-dance__start h2 {
        font-size: 1.75rem;
    }

    .gutsybites-monster-world .stompy-dance__start p {
        font-size: 1rem;
    }

    .gutsybites-monster-world .stompy-dance__elephant-emoji {
        font-size: 4rem;
    }

    .gutsybites-monster-world .stompy-dance__tap-circle {
        width: 70px;
        height: 70px;
        font-size: 2rem;
    }
}

/* =========================================
   2030 MINIMALISM STYLES
   Higher detail graphics, less colorful
   Monochromatic palette with single accent
   ========================================= */

/* 2030 Minimal Color Palette */
:root {
    --mw-2030-bg: #fafafa;
    --mw-2030-stroke: #1a1a2e;
    --mw-2030-stroke-light: #64748b;
    --mw-2030-stroke-faint: #cbd5e1;
    --mw-2030-accent: #3b82f6;
}

/* Sugar Invaders 2030 */
.gutsybites-monster-world .sugar-invaders__overlay--minimal {
    background: rgba(250, 250, 250, 0.98);
}

.gutsybites-monster-world .sugar-invaders__card--minimal {
    background: white;
    border: 1px solid var(--mw-2030-stroke-faint);
    border-radius: 1rem;
    padding: 2rem;
    max-width: 320px;
    box-shadow: 0 4px 24px rgba(26, 26, 46, 0.08);
}

.gutsybites-monster-world .sugar-invaders__label {
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--mw-2030-stroke-light);
    margin-bottom: 0.25rem;
}

.gutsybites-monster-world .sugar-invaders__label--accent {
    color: var(--mw-2030-accent);
}

.gutsybites-monster-world .sugar-invaders__title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--mw-2030-stroke);
    margin: 0 0 0.75rem;
    letter-spacing: -0.02em;
}

.gutsybites-monster-world .sugar-invaders__desc {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--mw-2030-stroke-light);
    margin: 0 0 1rem;
}

.gutsybites-monster-world .sugar-invaders__goal {
    background: var(--mw-2030-bg);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.gutsybites-monster-world .sugar-invaders__goal p {
    font-size: 0.75rem;
    color: var(--mw-2030-stroke-light);
    margin: 0.25rem 0;
}

.gutsybites-monster-world .sugar-invaders__high {
    font-size: 0.75rem;
    color: var(--mw-2030-stroke-light);
    margin-bottom: 1rem;
}

.gutsybites-monster-world .sugar-invaders__stats {
    margin: 1rem 0;
}

.gutsybites-monster-world .sugar-invaders__stats p {
    font-size: 0.875rem;
    color: var(--mw-2030-stroke);
    margin: 0.25rem 0;
}

.gutsybites-monster-world .sugar-invaders__record {
    color: var(--mw-2030-accent) !important;
    font-weight: 600;
}

.gutsybites-monster-world .sugar-invaders__buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gutsybites-monster-world .sugar-invaders__btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid var(--mw-2030-stroke-faint);
    border-radius: 9999px;
    background: white;
    color: var(--mw-2030-stroke);
    cursor: pointer;
    transition: all 0.2s ease;
}

.gutsybites-monster-world .sugar-invaders__btn:hover {
    background: var(--mw-2030-bg);
    transform: translateY(-1px);
}

.gutsybites-monster-world .sugar-invaders__btn--primary {
    background: var(--mw-2030-stroke);
    border-color: var(--mw-2030-stroke);
    color: white;
}

.gutsybites-monster-world .sugar-invaders__btn--primary:hover {
    background: #2a2a3e;
}

/* Gut Rush 2030 */
.gutsybites-monster-world .gut-rush__overlay--minimal {
    background: rgba(250, 250, 250, 0.98);
}

.gutsybites-monster-world .gut-rush__card--minimal {
    background: white;
    border: 1px solid var(--mw-2030-stroke-faint);
    border-radius: 1rem;
    padding: 2rem;
    max-width: 320px;
    box-shadow: 0 4px 24px rgba(26, 26, 46, 0.08);
}

.gutsybites-monster-world .gut-rush__label {
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--mw-2030-stroke-light);
    margin-bottom: 0.25rem;
}

.gutsybites-monster-world .gut-rush__title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--mw-2030-stroke);
    margin: 0 0 0.75rem;
    letter-spacing: -0.02em;
}

.gutsybites-monster-world .gut-rush__desc {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--mw-2030-stroke-light);
    margin: 0 0 1rem;
}

.gutsybites-monster-world .gut-rush__instructions {
    background: var(--mw-2030-bg);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    text-align: center;
}

.gutsybites-monster-world .gut-rush__instructions p {
    font-size: 0.75rem;
    color: var(--mw-2030-stroke-light);
    margin: 0.25rem 0;
}

.gutsybites-monster-world .gut-rush__high {
    font-size: 0.75rem;
    color: var(--mw-2030-stroke-light);
    margin-bottom: 1rem;
}

.gutsybites-monster-world .gut-rush__stats {
    margin: 1rem 0;
}

.gutsybites-monster-world .gut-rush__stats p {
    font-size: 0.875rem;
    color: var(--mw-2030-stroke);
    margin: 0.25rem 0;
}

.gutsybites-monster-world .gut-rush__record {
    color: var(--mw-2030-accent) !important;
    font-weight: 600;
}

.gutsybites-monster-world .gut-rush__buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gutsybites-monster-world .gut-rush__btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid var(--mw-2030-stroke-faint);
    border-radius: 9999px;
    background: white;
    color: var(--mw-2030-stroke);
    cursor: pointer;
    transition: all 0.2s ease;
}

.gutsybites-monster-world .gut-rush__btn:hover {
    background: var(--mw-2030-bg);
    transform: translateY(-1px);
}

.gutsybites-monster-world .gut-rush__btn--primary {
    background: var(--mw-2030-stroke);
    border-color: var(--mw-2030-stroke);
    color: white;
}

.gutsybites-monster-world .gut-rush__btn--primary:hover {
    background: #2a2a3e;
}

/* Energy Match 2030 */
.gutsybites-monster-world .energy-match--minimal {
    background: var(--mw-2030-bg);
}

.gutsybites-monster-world .energy-match__menu--minimal,
.gutsybites-monster-world .energy-match__complete--minimal {
    background: var(--mw-2030-bg);
}

.gutsybites-monster-world .energy-match--minimal .energy-match__label {
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--mw-2030-stroke-light);
    margin-bottom: 0.25rem;
}

.gutsybites-monster-world .energy-match--minimal .energy-match__label--accent {
    color: var(--mw-2030-accent);
}

.gutsybites-monster-world .energy-match--minimal .energy-match__title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--mw-2030-stroke);
    margin: 0 0 0.75rem;
    letter-spacing: -0.02em;
}

.gutsybites-monster-world .energy-match--minimal .energy-match__desc {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--mw-2030-stroke-light);
    margin: 0 0 1.5rem;
}

.gutsybites-monster-world .energy-match--minimal .energy-match__difficulty {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.gutsybites-monster-world .energy-match--minimal .energy-match__diff-btn {
    padding: 0.625rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border: 1px solid var(--mw-2030-stroke-faint);
    border-radius: 9999px;
    background: white;
    color: var(--mw-2030-stroke);
    cursor: pointer;
    transition: all 0.2s ease;
}

.gutsybites-monster-world .energy-match--minimal .energy-match__diff-btn:hover {
    background: var(--mw-2030-bg);
    border-color: var(--mw-2030-stroke-light);
}

.gutsybites-monster-world .energy-match--minimal .energy-match__diff-btn.active {
    background: var(--mw-2030-stroke);
    border-color: var(--mw-2030-stroke);
    color: white;
}

.gutsybites-monster-world .energy-match--minimal .energy-match__high-scores {
    background: white;
    border: 1px solid var(--mw-2030-stroke-faint);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.gutsybites-monster-world .energy-match--minimal .energy-match__high-label {
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mw-2030-stroke-light);
    margin-bottom: 0.25rem;
}

.gutsybites-monster-world .energy-match--minimal .energy-match__high-values {
    display: flex;
    gap: 1rem;
}

.gutsybites-monster-world .energy-match--minimal .energy-match__high-values span {
    font-size: 0.75rem;
    color: var(--mw-2030-stroke);
}

.gutsybites-monster-world .energy-match--minimal .energy-match__exit-btn {
    padding: 0.625rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border: 1px solid var(--mw-2030-stroke-faint) !important;
    border-radius: 9999px;
    background: white !important;
    color: var(--mw-2030-stroke-light) !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gutsybites-monster-world .energy-match--minimal .energy-match__hud--minimal {
    background: white;
    border: 1px solid var(--mw-2030-stroke-faint);
    border-radius: 0.5rem;
    margin: 0.5rem;
    padding: 0.5rem 1rem;
}

.gutsybites-monster-world .energy-match--minimal .energy-match__stat-value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--mw-2030-stroke);
}

.gutsybites-monster-world .energy-match--minimal .energy-match__stat-label {
    font-size: 0.5625rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mw-2030-stroke-light);
}

.gutsybites-monster-world .energy-match--minimal .energy-match__pause-btn {
    width: 1.75rem;
    height: 1.75rem;
    background: var(--mw-2030-bg);
    border: 1px solid var(--mw-2030-stroke-faint);
    color: var(--mw-2030-stroke);
    font-size: 0.75rem;
}

.gutsybites-monster-world .energy-match--minimal .energy-match__info-popup--minimal {
    background: var(--mw-2030-stroke);
    color: white;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.75rem 1.25rem;
    border-radius: 0.5rem;
}

.gutsybites-monster-world .energy-match--minimal .energy-match__canvas {
    display: block;
    margin: 0 auto;
}

.gutsybites-monster-world .energy-match--minimal .energy-match__board-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
}

.gutsybites-monster-world .energy-match__overlay--minimal {
    background: rgba(250, 250, 250, 0.95);
}

.gutsybites-monster-world .energy-match--minimal .energy-match__pause-card {
    background: white;
    border: 1px solid var(--mw-2030-stroke-faint);
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
}

.gutsybites-monster-world .energy-match--minimal .energy-match__pause-card h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--mw-2030-stroke);
    margin: 0 0 1rem;
}

.gutsybites-monster-world .energy-match--minimal .energy-match__pause-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gutsybites-monster-world .energy-match--minimal .energy-match__pause-buttons button {
    padding: 0.625rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border: 1px solid var(--mw-2030-stroke-faint);
    border-radius: 9999px;
    background: white;
    color: var(--mw-2030-stroke);
    cursor: pointer;
    transition: all 0.2s ease;
}

.gutsybites-monster-world .energy-match--minimal .energy-match__pause-buttons button:first-child {
    background: var(--mw-2030-stroke);
    border-color: var(--mw-2030-stroke);
    color: white;
}

.gutsybites-monster-world .energy-match--minimal .energy-match__results {
    background: white;
    border: 1px solid var(--mw-2030-stroke-faint);
    border-radius: 0.5rem;
    padding: 1rem;
    margin: 1rem 0;
}

.gutsybites-monster-world .energy-match--minimal .energy-match__results p {
    font-size: 0.875rem;
    color: var(--mw-2030-stroke);
    margin: 0.25rem 0;
}

.gutsybites-monster-world .energy-match--minimal .energy-match__new-record {
    color: var(--mw-2030-accent) !important;
}

.gutsybites-monster-world .energy-match--minimal .energy-match__health-tips {
    background: white;
    border: 1px solid var(--mw-2030-stroke-faint);
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: left;
    max-width: 320px;
}

.gutsybites-monster-world .energy-match--minimal .energy-match__tips-label {
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mw-2030-stroke-light);
    margin-bottom: 0.5rem;
}

.gutsybites-monster-world .energy-match--minimal .energy-match__tips-list p {
    font-size: 0.75rem;
    color: var(--mw-2030-stroke);
    margin: 0.25rem 0;
}

.gutsybites-monster-world .energy-match--minimal .energy-match__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1.5rem;
}

.gutsybites-monster-world .energy-match--minimal .energy-match__btn {
    padding: 0.625rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border: 1px solid var(--mw-2030-stroke-faint);
    border-radius: 9999px;
    background: white;
    color: var(--mw-2030-stroke);
    cursor: pointer;
    transition: all 0.2s ease;
}

.gutsybites-monster-world .energy-match--minimal .energy-match__btn--primary {
    background: var(--mw-2030-stroke);
    border-color: var(--mw-2030-stroke);
    color: white;
}

/* Stompy's Dance 2030 */
.gutsybites-monster-world .stompy-dance--minimal {
    background: var(--mw-2030-bg);
}

.gutsybites-monster-world .stompy-dance--minimal .stompy-dance__exit {
    background: white;
    border: 1px solid var(--mw-2030-stroke-faint);
    color: var(--mw-2030-stroke-light);
}

.gutsybites-monster-world .stompy-dance--minimal .stompy-dance__exit:hover {
    background: var(--mw-2030-bg);
    color: var(--mw-2030-stroke);
}

/* =========================================
   CREATIVE WARM GAME STYLES v1.6
   Toast notifications, card overlays
   ========================================= */

/* Common Toast Notification */
.gutsybites-monster-world .sugar-invaders__toast,
.gutsybites-monster-world .gut-rush__toast,
.gutsybites-monster-world .energy-match__toast {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(45, 52, 54, 0.95);
    color: #ffffff;
    padding: 0.625rem 1rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 500;
    z-index: 100;
    pointer-events: none;
    animation: toastSlideIn 0.3s ease-out;
    white-space: nowrap;
}

@keyframes toastSlideIn {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Sugar Invaders Card-based Overlay */
.gutsybites-monster-world .sugar-invaders {
    background: #fefbf6;
}

.gutsybites-monster-world .sugar-invaders__card {
    background: white;
    border-radius: 1.25rem;
    padding: 2rem;
    max-width: 340px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.gutsybites-monster-world .sugar-invaders__badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: #00b894;
    color: white;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 9999px;
    margin-bottom: 0.75rem;
}

.gutsybites-monster-world .sugar-invaders__badge--danger {
    background: #e17055;
}

.gutsybites-monster-world .sugar-invaders__badge--success {
    background: #00b894;
}

.gutsybites-monster-world .sugar-invaders__title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #2d3436;
    margin: 0 0 0.5rem;
}

.gutsybites-monster-world .sugar-invaders__desc,
.gutsybites-monster-world .sugar-invaders__flavor {
    font-size: 0.9375rem;
    color: #636e72;
    margin: 0 0 1rem;
    line-height: 1.5;
}

.gutsybites-monster-world .sugar-invaders__controls {
    background: #f5efe6;
    padding: 0.75rem;
    border-radius: 0.75rem;
    margin: 0.75rem 0;
}

.gutsybites-monster-world .sugar-invaders__controls p {
    font-size: 0.8125rem;
    color: #636e72;
    margin: 0.25rem 0;
}

.gutsybites-monster-world .sugar-invaders__highscore {
    font-size: 0.875rem;
    color: #00b894;
    font-weight: 600;
    margin: 0.5rem 0;
}

.gutsybites-monster-world .sugar-invaders__stats,
.gutsybites-monster-world .sugar-invaders__results p {
    font-size: 0.9375rem;
    color: #636e72;
    margin: 0.25rem 0;
}

.gutsybites-monster-world .sugar-invaders__record {
    color: #f1c40f !important;
    font-weight: 700;
}

.gutsybites-monster-world .sugar-invaders__buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.gutsybites-monster-world .sugar-invaders__btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    border: 1px solid #b2bec3;
    border-radius: 9999px;
    background: white;
    color: #2d3436;
    cursor: pointer;
    transition: all 0.2s;
}

.gutsybites-monster-world .sugar-invaders__btn:hover {
    border-color: #2d3436;
}

.gutsybites-monster-world .sugar-invaders__btn--primary {
    background: #2d3436;
    border-color: #2d3436;
    color: white;
}

.gutsybites-monster-world .sugar-invaders__btn--primary:hover {
    background: #00b894;
    border-color: #00b894;
}

/* Gut Rush Card-based Overlay */
.gutsybites-monster-world .gut-rush {
    background: linear-gradient(180deg, #e8f4f8 0%, #fef9f3 100%);
}

.gutsybites-monster-world .gut-rush__card {
    background: white;
    border-radius: 1.25rem;
    padding: 2rem;
    max-width: 380px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.gutsybites-monster-world .gut-rush__badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: #9b59b6;
    color: white;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 9999px;
    margin-bottom: 0.75rem;
}

.gutsybites-monster-world .gut-rush__badge--danger {
    background: #e74c3c;
}

.gutsybites-monster-world .gut-rush__title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #2d3436;
    margin: 0 0 0.5rem;
}

.gutsybites-monster-world .gut-rush__desc {
    font-size: 0.9375rem;
    color: #636e72;
    margin: 0 0 0.75rem;
    line-height: 1.5;
}

.gutsybites-monster-world .gut-rush__foods {
    font-size: 1.5rem;
    margin: 0.5rem 0;
}

.gutsybites-monster-world .gut-rush__instructions {
    background: #f5efe6;
    padding: 0.75rem;
    border-radius: 0.75rem;
    margin: 0.75rem 0;
    text-align: left;
}

.gutsybites-monster-world .gut-rush__instructions p {
    font-size: 0.8125rem;
    color: #636e72;
    margin: 0.25rem 0;
}

.gutsybites-monster-world .gut-rush__highscore {
    font-size: 0.875rem;
    color: #9b59b6;
    font-weight: 600;
    margin: 0.5rem 0;
}

.gutsybites-monster-world .gut-rush__stats,
.gutsybites-monster-world .gut-rush__results p {
    font-size: 0.9375rem;
    color: #636e72;
    margin: 0.25rem 0;
}

.gutsybites-monster-world .gut-rush__record {
    color: #f1c40f !important;
    font-weight: 700;
}

.gutsybites-monster-world .gut-rush__buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.gutsybites-monster-world .gut-rush__btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    border: 1px solid #b2bec3;
    border-radius: 9999px;
    background: white;
    color: #2d3436;
    cursor: pointer;
    transition: all 0.2s;
}

.gutsybites-monster-world .gut-rush__btn:hover {
    border-color: #2d3436;
}

.gutsybites-monster-world .gut-rush__btn--primary {
    background: #9b59b6;
    border-color: #9b59b6;
    color: white;
}

.gutsybites-monster-world .gut-rush__btn--primary:hover {
    background: #8e44ad;
    border-color: #8e44ad;
}

/* Energy Match Card-based Overlay */
.gutsybites-monster-world .energy-match {
    background: #fef9f3;
}

.gutsybites-monster-world .energy-match__menu,
.gutsybites-monster-world .energy-match__complete {
    background: #fef9f3;
}

.gutsybites-monster-world .energy-match__card {
    background: white;
    border-radius: 1.25rem;
    padding: 2rem;
    max-width: 340px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.gutsybites-monster-world .energy-match__badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: #9b59b6;
    color: white;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 9999px;
    margin-bottom: 0.75rem;
}

.gutsybites-monster-world .energy-match__badge--success {
    background: #27ae60;
}

.gutsybites-monster-world .energy-match__title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #2d3436;
    margin: 0 0 0.5rem;
}

.gutsybites-monster-world .energy-match__desc {
    font-size: 0.9375rem;
    color: #636e72;
    margin: 0 0 1rem;
    line-height: 1.5;
}

.gutsybites-monster-world .energy-match__difficulty {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin: 1rem 0;
}

.gutsybites-monster-world .energy-match__diff-btn {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    border: 2px solid #d7bde2;
    border-radius: 0.75rem;
    background: white;
    color: #2d3436;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1.3;
}

.gutsybites-monster-world .energy-match__diff-btn span {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: #636e72;
}

.gutsybites-monster-world .energy-match__diff-btn:hover,
.gutsybites-monster-world .energy-match__diff-btn.active {
    border-color: #9b59b6;
    background: #f5f0fa;
}

.gutsybites-monster-world .energy-match__scores {
    background: #f5efe6;
    padding: 0.75rem;
    border-radius: 0.75rem;
    margin: 0.75rem 0;
}

.gutsybites-monster-world .energy-match__scores-label {
    font-size: 0.75rem;
    color: #636e72;
    margin: 0 0 0.25rem;
}

.gutsybites-monster-world .energy-match__scores-values {
    display: flex;
    gap: 1rem;
    justify-content: center;
    font-size: 0.875rem;
    color: #2d3436;
    font-weight: 600;
}

.gutsybites-monster-world .energy-match__exit-btn {
    margin-top: 0.75rem;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid #b2bec3;
    border-radius: 9999px;
    background: transparent;
    color: #636e72;
    cursor: pointer;
    transition: all 0.2s;
}

.gutsybites-monster-world .energy-match__exit-btn:hover {
    border-color: #2d3436;
    color: #2d3436;
}

.gutsybites-monster-world .energy-match__game {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.gutsybites-monster-world .energy-match__hud {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 0.75rem;
    margin-bottom: 0.75rem;
}

.gutsybites-monster-world .energy-match__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gutsybites-monster-world .energy-match__stat-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: #2d3436;
}

.gutsybites-monster-world .energy-match__stat-label {
    font-size: 0.5625rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #636e72;
}

.gutsybites-monster-world .energy-match__pause-btn {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #9b59b6;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.gutsybites-monster-world .energy-match__pause-btn:hover {
    background: #8e44ad;
}

.gutsybites-monster-world .energy-match__board {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s;
}

.gutsybites-monster-world .energy-match__canvas {
    display: block;
    max-width: 100%;
}

.gutsybites-monster-world .energy-match__results {
    background: rgba(255, 255, 255, 0.8);
    padding: 1rem;
    border-radius: 0.75rem;
    margin: 0.75rem 0;
}

.gutsybites-monster-world .energy-match__results p {
    font-size: 1rem;
    color: #2d3436;
    margin: 0.25rem 0;
}

.gutsybites-monster-world .energy-match__record {
    color: #f1c40f !important;
    font-weight: 700;
}

.gutsybites-monster-world .energy-match__tips {
    margin: 1rem 0;
    text-align: left;
}

.gutsybites-monster-world .energy-match__tips-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #636e72;
    margin-bottom: 0.5rem;
}

.gutsybites-monster-world .energy-match__tips-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    max-height: 150px;
    overflow-y: auto;
}

.gutsybites-monster-world .energy-match__tip {
    background: rgba(255, 255, 255, 0.7);
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
}

.gutsybites-monster-world .energy-match__tip strong {
    display: block;
    color: #2d3436;
}

.gutsybites-monster-world .energy-match__tip span {
    color: #636e72;
    font-size: 0.625rem;
}

.gutsybites-monster-world .energy-match__buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.gutsybites-monster-world .energy-match__btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    border: 1px solid #b2bec3;
    border-radius: 9999px;
    background: white;
    color: #2d3436;
    cursor: pointer;
    transition: all 0.2s;
}

.gutsybites-monster-world .energy-match__btn:hover {
    border-color: #2d3436;
}

.gutsybites-monster-world .energy-match__btn--primary {
    background: #9b59b6;
    border-color: #9b59b6;
    color: white;
}

.gutsybites-monster-world .energy-match__btn--primary:hover {
    background: #8e44ad;
    border-color: #8e44ad;
}

/* Fullscreen Buttons - Shared Style */
.gutsybites-monster-world .sugar-invaders__fullscreen,
.gutsybites-monster-world .gut-rush__fullscreen,
.gutsybites-monster-world .energy-match__fullscreen,
.gutsybites-monster-world .stompy-dance__fullscreen {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #b2bec3;
    border-radius: 50%;
    cursor: pointer;
    z-index: 100;
    transition: all 0.2s;
    color: #2d3436;
}

.gutsybites-monster-world .sugar-invaders__fullscreen:hover,
.gutsybites-monster-world .gut-rush__fullscreen:hover,
.gutsybites-monster-world .energy-match__fullscreen:hover,
.gutsybites-monster-world .stompy-dance__fullscreen:hover {
    background: #2d3436;
    border-color: #2d3436;
    color: white;
}

/* Stompy's Dance */
.gutsybites-monster-world .stompy-dance {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #fefbf6 0%, #fff5eb 100%);
}

.gutsybites-monster-world .stompy-dance__canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.gutsybites-monster-world .stompy-dance__exit {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #b2bec3;
    border-radius: 50%;
    cursor: pointer;
    z-index: 100;
    transition: all 0.2s;
    color: #2d3436;
}

.gutsybites-monster-world .stompy-dance__exit:hover {
    background: #e74c3c;
    border-color: #e74c3c;
    color: white;
}

.gutsybites-monster-world .stompy-dance__toast {
    position: absolute;
    top: 110px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(162, 155, 254, 0.95);
    color: #ffffff;
    padding: 0.625rem 1.25rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    z-index: 100;
    animation: toastSlideIn 0.3s ease-out;
    box-shadow: 0 4px 12px rgba(108, 92, 231, 0.3);
}

/* Fullscreen adjustments */
.gutsybites-monster-world .sugar-invaders:fullscreen,
.gutsybites-monster-world .gut-rush:fullscreen,
.gutsybites-monster-world .energy-match:fullscreen,
.gutsybites-monster-world .stompy-dance:fullscreen {
    background: linear-gradient(180deg, #fefbf6 0%, #fff5eb 100%);
}

.gutsybites-monster-world .sugar-invaders:fullscreen .sugar-invaders__fullscreen,
.gutsybites-monster-world .gut-rush:fullscreen .gut-rush__fullscreen,
.gutsybites-monster-world .energy-match:fullscreen .energy-match__fullscreen,
.gutsybites-monster-world .stompy-dance:fullscreen .stompy-dance__fullscreen {
    bottom: 24px;
    right: 24px;
}

/* Fullscreen game board centering */
.gutsybites-monster-world .energy-match:fullscreen .energy-match__game {
    max-width: 900px;
    margin: 0 auto;
    height: 100%;
    padding: 1rem;
}

.gutsybites-monster-world .energy-match:fullscreen .energy-match__board {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gutsybites-monster-world .energy-match:fullscreen .energy-match__hud {
    max-width: 600px;
    margin: 0 auto 1rem;
}

/* =========================================
   v3.0 Game Enhancements
   ========================================= */

/* Energy Match v3.0 - Game Mode Selector */
.gutsybites-monster-world .energy-match__mode-selector {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: 1rem 0;
}

.gutsybites-monster-world .energy-match__mode-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    min-width: 80px;
    background: rgba(255, 255, 255, 0.7);
    border: 2px solid #fbbf24;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gutsybites-monster-world .energy-match__mode-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
}

.gutsybites-monster-world .energy-match__mode-btn.active {
    background: #fbbf24;
    color: #78350f;
}

.gutsybites-monster-world .energy-match__mode-btn span:first-child {
    font-size: 1.25rem;
}

.gutsybites-monster-world .energy-match__mode-btn span:last-child {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* Energy Match celebration overlay animation */
.gutsybites-monster-world .energy-match__celebration {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 200;
}

/* Sugar Invaders v3.0 - Boss Battle Enhancements */
.gutsybites-monster-world .sugar-invaders--boss-active {
    animation: bossWarning 0.5s ease-in-out infinite alternate;
}

@keyframes bossWarning {
    0% { box-shadow: inset 0 0 30px rgba(239, 68, 68, 0.2); }
    100% { box-shadow: inset 0 0 50px rgba(239, 68, 68, 0.4); }
}

.gutsybites-monster-world .sugar-invaders__power-up-indicator {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 30;
    animation: powerUpPulse 0.5s ease-in-out infinite alternate;
}

@keyframes powerUpPulse {
    0% { transform: translateX(-50%) scale(1); }
    100% { transform: translateX(-50%) scale(1.05); }
}

/* Gut Rush v3.0 - Multi-lane System */
.gutsybites-monster-world .gut-rush--multi-lane {
    /* Canvas handles all lane rendering */
}

.gutsybites-monster-world .gut-rush__biome-indicator {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    z-index: 20;
}

.gutsybites-monster-world .gut-rush__streak-indicator {
    position: absolute;
    top: 50px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #78350f;
    padding: 0.5rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 700;
    z-index: 20;
    animation: streakBounce 0.3s ease-out;
}

@keyframes streakBounce {
    0% { transform: scale(0.8); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Stompy's Dance v3.0 - Rhythm Game Enhancements */
.gutsybites-monster-world .stompy-dance--rhythm {
    /* Canvas handles all rhythm game rendering */
}

.gutsybites-monster-world .stompy-dance__song-select {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    max-width: 400px;
    margin: 1rem 0;
}

.gutsybites-monster-world .stompy-dance__song-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.8);
    border: 2px solid #a29bfe;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gutsybites-monster-world .stompy-dance__song-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(162, 155, 254, 0.3);
}

.gutsybites-monster-world .stompy-dance__song-btn.active {
    background: #a29bfe;
    border-color: #6c5ce7;
    color: white;
}

.gutsybites-monster-world .stompy-dance__song-btn.locked {
    opacity: 0.5;
    cursor: not-allowed;
}

.gutsybites-monster-world .stompy-dance__song-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.gutsybites-monster-world .stompy-dance__song-name {
    font-weight: 700;
    font-size: 1rem;
}

.gutsybites-monster-world .stompy-dance__song-difficulty {
    font-size: 0.75rem;
    color: #fdcb6e;
}

.gutsybites-monster-world .stompy-dance__rating-popup {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-weight: 800;
    text-transform: uppercase;
    z-index: 100;
    pointer-events: none;
    animation: ratingPop 0.5s ease-out forwards;
}

.gutsybites-monster-world .stompy-dance__rating-popup--perfect {
    color: #00b894;
    text-shadow: 0 0 20px rgba(0, 184, 148, 0.5);
}

.gutsybites-monster-world .stompy-dance__rating-popup--great {
    color: #0984e3;
    text-shadow: 0 0 20px rgba(9, 132, 227, 0.5);
}

.gutsybites-monster-world .stompy-dance__rating-popup--good {
    color: #fdcb6e;
    text-shadow: 0 0 20px rgba(253, 203, 110, 0.5);
}

.gutsybites-monster-world .stompy-dance__rating-popup--miss {
    color: #d63031;
    text-shadow: 0 0 20px rgba(214, 48, 49, 0.5);
}

@keyframes ratingPop {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    30% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
    100% { opacity: 0; transform: translate(-50%, -70%) scale(1); }
}

/* All Games v3.0 - Enhanced Combo Display */
.gutsybites-monster-world .game-combo-display {
    position: absolute;
    top: 80px;
    right: 15px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 1rem;
    font-weight: 700;
    z-index: 25;
    animation: comboFlame 0.3s ease-in-out infinite alternate;
}

@keyframes comboFlame {
    0% { transform: scale(1) rotate(-1deg); }
    100% { transform: scale(1.05) rotate(1deg); }
}

/* Screen shake effect for all games */
.gutsybites-monster-world .game-screen-shake {
    animation: screenShake 0.15s ease-in-out;
}

@keyframes screenShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-3px); }
}

/* Victory/Celebration effects */
.gutsybites-monster-world .game-victory-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.85);
    z-index: 100;
    animation: victoryFadeIn 0.5s ease-out;
}

@keyframes victoryFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.gutsybites-monster-world .game-victory-title {
    font-size: 3rem;
    font-weight: 800;
    color: #fbbf24;
    text-shadow: 0 0 30px rgba(251, 191, 36, 0.5);
    animation: victoryBounce 0.6s ease-out;
}

@keyframes victoryBounce {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Grade display for rhythm games */
.gutsybites-monster-world .game-grade-display {
    font-size: 4rem;
    font-weight: 800;
    animation: gradeReveal 0.8s ease-out;
}

.gutsybites-monster-world .game-grade-display--s { color: #fbbf24; }
.gutsybites-monster-world .game-grade-display--a { color: #00b894; }
.gutsybites-monster-world .game-grade-display--b { color: #0984e3; }
.gutsybites-monster-world .game-grade-display--c { color: #fdcb6e; }
.gutsybites-monster-world .game-grade-display--d { color: #e17055; }
.gutsybites-monster-world .game-grade-display--f { color: #d63031; }

@keyframes gradeReveal {
    0% { transform: scale(3) rotate(-10deg); opacity: 0; }
    60% { transform: scale(0.9) rotate(5deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Health bar animations */
.gutsybites-monster-world .game-health-bar {
    transition: width 0.3s ease-out;
}

.gutsybites-monster-world .game-health-bar--critical {
    animation: healthCritical 0.5s ease-in-out infinite;
}

@keyframes healthCritical {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Power-up pickup flash */
.gutsybites-monster-world .game-powerup-flash {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.3);
    pointer-events: none;
    z-index: 50;
    animation: powerupFlash 0.2s ease-out forwards;
}

@keyframes powerupFlash {
    0% { opacity: 1; }
    100% { opacity: 0; }
}