@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&display=swap");

/* ============================
   LuckCraft Branding Animations
   ============================ */

/* --- Icon: scale entrance + machine-glow pulse ---
   drop-shadow follows the clover's actual shape contours,
   matching the green machine glow from the game grid. */

.lc-icon {
  display: inline-block;
  line-height: 0;
  opacity: 0;
  transform: scale(0.85);
  animation:
    lcIconEnter 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards,
    lcIconGlow 2.5s ease-in-out 0.5s infinite alternate both;
}

@keyframes lcIconEnter {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes lcIconGlow {
  0% {
    filter: drop-shadow(0 0 3px rgba(64, 192, 87, 0.35));
  }
  100% {
    filter: drop-shadow(0 0 8px rgba(64, 192, 87, 0.6));
  }
}

/* --- Title: slot-machine reel per letter ---
   Each letter position is a mini vertical reel that scrolls
   through random characters and lands on the target letter.
   All reels start spinning together; each stops left-to-right. */

.lc-reel-title {
  display: flex;
  justify-content: center;
}

.lc-reel-slot {
  display: inline-block;
  position: relative;
  overflow: hidden;
  width: 1ch;
  height: 1.2em;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
}

/* Absolutely positioned strip scrolls within the slot */
.lc-reel-strip {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  opacity: 0;
  will-change: transform;
  animation: lcReelSpin var(--spin-dur, 0.8s) cubic-bezier(0.06, 0, 0.04, 1) var(--spin-delay, 0.35s) forwards;
}

.lc-reel-char {
  display: block;
  height: 1.2em;
  line-height: 1.2;
}

@keyframes lcReelSpin {
  0% {
    opacity: 1;
    transform: translateY(calc(-100% + 1.2em));
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Menu Background: scattered symbol images ---
   Symbols positioned around edges at low opacity with gentle drift.
   `translate` is separate from `transform` so JS mouse-gravity
   can update --pull-x/y without fighting the drift animation. */

.lc-splash-symbol {
  position: absolute;
  opacity: 0.08;
  pointer-events: none;
  transform: rotate(var(--rot, 0deg));
  translate: var(--pull-x, 0px) var(--pull-y, 0px);
  transition: translate 0.4s ease-out;
  animation: lcSymbolDrift var(--drift-dur, 20s) ease-in-out var(--drift-delay, 0s) infinite alternate;
  will-change: transform, translate;
}

.lc-splash-symbol--sm { width: 48px; height: 48px; }
.lc-splash-symbol--md { width: 60px; height: 60px; }
.lc-splash-symbol--lg { width: 72px; height: 72px; }

@keyframes lcSymbolDrift {
  0% {
    transform: rotate(var(--rot, 0deg)) translate(0, 0);
  }
  100% {
    transform: rotate(var(--rot, 0deg)) translate(var(--drift-x, 8px), var(--drift-y, 12px));
  }
}

/* --- Splash Overlay: circle-ring + lightning-bolt SVG decorations ---
   Uses the same visual language as inventory grid empty-slot backgrounds.
   Stroke color baked into SVGs (grey). */

.lc-splash-decor {
  position: absolute;
  pointer-events: none;
  opacity: 0.25;
  transform: rotate(var(--rot, 0deg));
  animation: lcSymbolDrift var(--drift-dur, 20s) ease-in-out var(--drift-delay, 0s) infinite alternate;
}

/* --- Splash Exit Animation ---
   Applied via className output so React controls it (survives reconciliation).
   Uses keyframes instead of transition — no "before" state needed.
   Decorations fly outward from center while overlay fades. */

.lc-splash-exit {
  animation: lcSplashExit 0.5s ease-out forwards;
  pointer-events: none;
}

.lc-splash-exit .lc-splash-decor {
  animation: lcDecorFlyOut 0.45s cubic-bezier(0.2, 0, 1, 1) forwards;
}

@keyframes lcSplashExit {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes lcDecorFlyOut {
  from {
    transform: rotate(var(--rot, 0deg));
    opacity: 0.25;
  }
  to {
    transform: rotate(var(--rot, 0deg)) translate(var(--fly-x, 0vw), var(--fly-y, 0vh));
    opacity: 0;
  }
}

/* --- Audio Splash Overlay: instant text, spin-out exit ---
   Text appears immediately (no reel spin-in). On exit, reels spin out
   before the page fades. Scoped to #audio-splash-overlay so the login
   page retains the original spin-in entrance. */

#audio-splash-overlay .lc-reel-strip {
  animation: none;
  opacity: 1;
  transform: translateY(0);
}

#audio-splash-overlay .lc-icon {
  opacity: 1;
  transform: scale(1);
  animation: lcIconGlow 2.5s ease-in-out infinite alternate both;
}

/* Exit: reels spin out to "Let's Go!", hold briefly, then page fades */
#audio-splash-overlay.lc-splash-exit {
  animation: lcSplashExit 0.5s ease-out 1.0s forwards;
  pointer-events: none;
}

#audio-splash-overlay.lc-splash-exit .lc-reel-strip {
  animation: lcReelSpinOut calc(var(--spin-dur, 0.8s) * 0.5) cubic-bezier(0.06, 0, 0.04, 1) forwards;
}

#audio-splash-overlay.lc-splash-exit .lc-splash-decor {
  animation: lcDecorFlyOut 0.45s cubic-bezier(0.2, 0, 1, 1) 1.0s forwards;
}

#audio-splash-overlay.lc-splash-exit .lc-icon {
  animation: lcIconExit 0.5s ease-in 0.15s forwards;
}

@keyframes lcReelSpinOut {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(calc(-100% + 1.2em));
  }
}

@keyframes lcIconExit {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.7);
  }
}

/* --- Splash Preload Progress --- */

#splash-progress-container {
  width: clamp(180px, 50vw, 280px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

#splash-progress-bar .mantine-Progress-section {
  transition: width 200ms ease-out;
}

/* --- Reduced Motion --- */

@media (prefers-reduced-motion: reduce) {
  .lc-icon {
    animation: none;
    opacity: 1;
    transform: scale(1);
    filter: drop-shadow(0 0 5px rgba(64, 192, 87, 0.45));
  }

  .lc-reel-strip {
    animation: none;
    opacity: 1;
    top: 0;
    transform: none;
  }

  .lc-splash-symbol {
    animation: none;
  }

  .lc-splash-decor {
    animation: none;
  }

  .lc-splash-exit,
  .lc-splash-exit .lc-splash-decor {
    animation: none;
    opacity: 0;
  }

  #audio-splash-overlay .lc-icon {
    animation: none;
  }

  #audio-splash-overlay.lc-splash-exit,
  #audio-splash-overlay.lc-splash-exit .lc-reel-strip,
  #audio-splash-overlay.lc-splash-exit .lc-splash-decor,
  #audio-splash-overlay.lc-splash-exit .lc-icon {
    animation: none;
    opacity: 0;
  }

  #slot-spin-btn.lc-spin-btn {
    animation: none;
    transition: none;
    will-change: auto;
  }

  #slot-spin-btn.lc-spin-btn:hover:where(:not([data-loading], :disabled, [data-disabled])) {
    transform: none;
  }

  #slot-spin-btn.lc-spin-btn:active:where(:not([data-loading], :disabled, [data-disabled])) {
    transform: none;
  }

  #slot-spin-btn.lc-spin-btn:where([data-loading]) {
    animation: none;
  }

  #slot-spin-btn.lc-spin-btn:where([data-loading])::after {
    animation: none;
    opacity: 0;
  }
}

/* --- Light mode: deeper green for contrast --- */

html[data-mantine-color-scheme="light"] .lc-splash-symbol {
  opacity: 0.12;
}

html[data-mantine-color-scheme="light"] .lc-splash-decor {
  opacity: 0.3;
}

html[data-mantine-color-scheme="light"] .lc-icon {
  animation:
    lcIconEnter 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards,
    lcIconGlowLight 2.5s ease-in-out 0.5s infinite alternate both;
}

@keyframes lcIconGlowLight {
  0% {
    filter: drop-shadow(0 0 3px rgba(43, 138, 62, 0.4));
  }
  100% {
    filter: drop-shadow(0 0 8px rgba(43, 138, 62, 0.65));
  }
}

/* --- Frosted Glass Panel (menu button container) --- */

.lc-glass-panel {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 24px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.06);
}

html[data-mantine-color-scheme="light"] .lc-glass-panel {
  background: rgba(200, 200, 200, 0.08);
  border-color: rgba(0, 0, 0, 0.05);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.03);
}

/* Compact variant for inline panels (stats bar, etc.) */
.lc-glass-panel--compact {
  padding: 2px 10px 6px;
  border-radius: 12px;
}

/* Glass backdrop layer — separated from parent to avoid stacking context
   trapping tooltip z-indices. Use as a child div inside a position:relative wrapper. */
.lc-glass-backdrop {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(0, 0, 0, 0.08);
  border-radius: inherit;
  pointer-events: none;
}

html[data-mantine-color-scheme="light"] .lc-glass-backdrop {
  background: rgba(200, 200, 200, 0.05);
}

/* --- Game Background Phase System ---
   data-game-phase is set by JS during animation state transitions.
   Opacity is driven by JS inline style (reliable cross-browser).
   CSS only defines which gradient to show per phase. */

.lc-game-bg {
  background:
    linear-gradient(to right, transparent, rgba(255,255,255,0.03) 30%, rgba(255,255,255,0.03) 70%, transparent),
    linear-gradient(to bottom, transparent, rgba(255,255,255,0.03) 30%, rgba(255,255,255,0.03) 70%, transparent);
}

.lc-game-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E") repeat;
  pointer-events: none;
}

.lc-game-phase-overlay {
  opacity: 0;
}

/* Noise dither layer — breaks up 8-bit gradient banding on dark backgrounds.
   SVG feTurbulence generates a repeating grain tile composited over the gradient. */
.lc-game-phase-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E") repeat;
  pointer-events: none;
  border-radius: inherit;
}

.lc-game-phase-overlay[data-game-phase="spinning"] {
  background:
    linear-gradient(to right, transparent, rgba(64,192,87,0.025) 20%, rgba(64,192,87,0.025) 80%, transparent),
    linear-gradient(to bottom, transparent, rgba(64,192,87,0.025) 20%, rgba(64,192,87,0.025) 80%, transparent);
}

.lc-game-phase-overlay[data-game-phase="effects"] {
  background:
    linear-gradient(to right, transparent, rgba(190,75,219,0.025) 20%, rgba(190,75,219,0.025) 80%, transparent),
    linear-gradient(to bottom, transparent, rgba(190,75,219,0.025) 20%, rgba(190,75,219,0.025) 80%, transparent);
}

.lc-game-phase-overlay[data-game-phase="coins"] {
  background:
    linear-gradient(to right, transparent, rgba(255,200,50,0.025) 20%, rgba(255,200,50,0.025) 80%, transparent),
    linear-gradient(to bottom, transparent, rgba(255,200,50,0.025) 20%, rgba(255,200,50,0.025) 80%, transparent);
}

html[data-mantine-color-scheme="light"] .lc-game-bg {
  background:
    linear-gradient(to right, transparent, rgba(0,0,0,0.015) 30%, rgba(0,0,0,0.015) 70%, transparent),
    linear-gradient(to bottom, transparent, rgba(0,0,0,0.015) 30%, rgba(0,0,0,0.015) 70%, transparent);
}

html[data-mantine-color-scheme="light"] .lc-game-phase-overlay[data-game-phase="spinning"] {
  background:
    linear-gradient(to right, transparent, rgba(34,139,34,0.15) 25%, rgba(34,139,34,0.15) 75%, transparent),
    linear-gradient(to bottom, transparent, rgba(34,139,34,0.15) 25%, rgba(34,139,34,0.15) 75%, transparent);
}

html[data-mantine-color-scheme="light"] .lc-game-phase-overlay[data-game-phase="effects"] {
  background:
    linear-gradient(to right, transparent, rgba(174,62,201,0.12) 25%, rgba(174,62,201,0.12) 75%, transparent),
    linear-gradient(to bottom, transparent, rgba(174,62,201,0.12) 25%, rgba(174,62,201,0.12) 75%, transparent);
}

html[data-mantine-color-scheme="light"] .lc-game-phase-overlay[data-game-phase="coins"] {
  background:
    linear-gradient(to right, transparent, rgba(200,140,0,0.18) 25%, rgba(200,140,0,0.18) 75%, transparent),
    linear-gradient(to bottom, transparent, rgba(200,140,0,0.18) 25%, rgba(200,140,0,0.18) 75%, transparent);
}

/* --- Registered Custom Properties: Spin Button Glow ---
   @property enables smooth interpolation of the glow independently from
   box-shadow elevation layers.  box-shadow renders consistently across
   browsers (unlike filter:drop-shadow which is far more vibrant in Safari). */

@property --_glow-blur {
  syntax: '<length>';
  initial-value: 0px;
  inherits: false;
}

@property --_glow-color {
  syntax: '<color>';
  initial-value: transparent;
  inherits: false;
}

/* --- Frosted Glass Spin Button --- */
/* Green-tinted glass matching lc-glass-panel foundation, with glow pulse
   and micro-interactions for a satisfying slot machine feel. */

#slot-spin-btn.lc-spin-btn {
  --_glow: rgba(64, 192, 87, 0.45);
  --_glow-intense: rgba(64, 192, 87, 0.7);
  --_glass-bg: rgba(64, 192, 87, 0.10);
  --_glass-bg-hover: rgba(64, 192, 87, 0.18);
  --_glass-border: rgba(255, 255, 255, 0.1);
  --_shimmer: rgba(255, 255, 255, 0.08);
  --_text: var(--mantine-color-white);
  --_inset: rgba(255, 255, 255, 0.08);
  --_inset-hover: rgba(255, 255, 255, 0.15);

  background: var(--_glass-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--_glass-border);
  color: var(--_text);
  letter-spacing: 0.05em;
  /* Glow (animated via @property) + static elevation + inner highlight */
  --_glow-blur: 12px;
  --_glow-color: var(--_glow);
  box-shadow:
    0 0 var(--_glow-blur) var(--_glow-color),
    0 4px 12px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 var(--_inset);
  animation: lcSpinGlow 2.5s ease-in-out infinite alternate;
  transition:
    transform 120ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 200ms ease,
    background 200ms ease;
  position: relative;
  overflow: hidden;
}

/* Ambient glow pulse — matches lcIconGlow timing */
@keyframes lcSpinGlow {
  0% { --_glow-blur: 12px; --_glow-color: var(--_glow); }
  100% { --_glow-blur: 28px; --_glow-color: var(--_glow-intense); }
}

/* Hover: scale up, brighter glass, deeper elevation */
#slot-spin-btn.lc-spin-btn:hover:where(:not([data-loading], :disabled, [data-disabled])) {
  background: var(--_glass-bg-hover);
  transform: scale(1.02);
  box-shadow:
    0 0 var(--_glow-blur) var(--_glow-color),
    0 6px 20px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 var(--_inset-hover);
}

/* Active/pressed: snap scale-down, green flash */
#slot-spin-btn.lc-spin-btn:active:where(:not([data-loading], :disabled, [data-disabled])) {
  transform: scale(0.97);
  background: rgba(64, 192, 87, 0.4);
  --_glow-blur: 24px;
  --_glow-color: rgba(64, 192, 87, 0.6);
  animation: none;
  box-shadow:
    0 0 var(--_glow-blur) var(--_glow-color),
    0 2px 8px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition:
    transform 60ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 60ms ease,
    background 60ms ease;
}

/* Shimmer layer — ::after is free (Mantine uses ::before for loading overlay) */
#slot-spin-btn.lc-spin-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent 30%,
    var(--_shimmer) 45%,
    var(--_shimmer) 55%,
    transparent 70%
  );
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

/* Loading: neutral glass while waiting. Phase selectors (spinning/effects/coins)
   override back to colored glow during active animation phases. When phases go
   idle, data-game-phase is removed and the button falls to this neutral state. */
#slot-spin-btn.lc-spin-btn:where([data-loading]) {
  --_glow: rgba(160, 160, 160, 0.2);
  --_glow-intense: rgba(160, 160, 160, 0.35);
  background: rgba(160, 160, 160, 0.06);
  border-color: rgba(255, 255, 255, 0.06);
  color: var(--_text);
  animation: lcSpinGlow 2.5s ease-in-out infinite alternate;
}

#slot-spin-btn.lc-spin-btn:where([data-loading])::after {
  opacity: 1;
  animation: lcSpinShimmer 1.5s ease-in-out infinite;
}

@keyframes lcSpinShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Phase-synced glow — button color tracks the background phase.
   Each phase overrides the neutral loading state (higher specificity via
   attribute selector vs :where). background is set directly (not via var)
   so the existing transition: background 200ms smoothly crossfades. */

#slot-spin-btn.lc-spin-btn[data-game-phase="spinning"] {
  --_glow: rgba(64, 192, 87, 0.45);
  --_glow-intense: rgba(64, 192, 87, 0.7);
  background: rgba(64, 192, 87, 0.10);
}

#slot-spin-btn.lc-spin-btn[data-game-phase="effects"] {
  --_glow: rgba(190, 75, 219, 0.45);
  --_glow-intense: rgba(190, 75, 219, 0.7);
  background: rgba(190, 75, 219, 0.10);
}

#slot-spin-btn.lc-spin-btn[data-game-phase="coins"] {
  --_glow: rgba(255, 200, 50, 0.45);
  --_glow-intense: rgba(255, 200, 50, 0.7);
  background: rgba(255, 200, 50, 0.10);
}

/* Loader spinner color syncs with phase.
   Mantine sets --loader-color inline, so !important is needed on all overrides. */
#slot-spin-btn.lc-spin-btn:where([data-loading]) .mantine-Loader-root {
  --loader-color: rgba(160, 160, 160, 0.7) !important;
}
#slot-spin-btn.lc-spin-btn[data-game-phase="spinning"] .mantine-Loader-root {
  --loader-color: rgb(64, 192, 87) !important;
}
#slot-spin-btn.lc-spin-btn[data-game-phase="effects"] .mantine-Loader-root {
  --loader-color: rgb(190, 75, 219) !important;
}
#slot-spin-btn.lc-spin-btn[data-game-phase="coins"] .mantine-Loader-root {
  --loader-color: rgb(255, 200, 50) !important;
}

/* Disabled (not loading): muted glass, no animation */
#slot-spin-btn.lc-spin-btn:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) {
  background: rgba(128, 128, 128, 0.1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-color: rgba(255, 255, 255, 0.04);
  color: var(--mantine-color-dimmed);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  animation: none;
}

/* Light mode: frosted white glass with green accents */
html[data-mantine-color-scheme="light"] #slot-spin-btn.lc-spin-btn {
  --_glow: rgba(43, 138, 62, 0.35);
  --_glow-intense: rgba(43, 138, 62, 0.6);
  --_glass-bg: rgba(255, 255, 255, 0.25);
  --_glass-bg-hover: rgba(255, 255, 255, 0.40);
  --_glass-border: rgba(43, 138, 62, 0.3);
  --_shimmer: rgba(255, 255, 255, 0.35);
  --_text: var(--mantine-color-green-9);
  --_inset: rgba(255, 255, 255, 0.5);
  --_inset-hover: rgba(255, 255, 255, 0.65);
  box-shadow:
    0 0 var(--_glow-blur) var(--_glow-color),
    0 4px 12px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 var(--_inset);
}

/* Light mode loader spinner: phase-synced */
html[data-mantine-color-scheme="light"] #slot-spin-btn.lc-spin-btn .mantine-Loader-root {
  --loader-color: var(--mantine-color-green-9) !important;
}
html[data-mantine-color-scheme="light"] #slot-spin-btn.lc-spin-btn:where([data-loading]) .mantine-Loader-root {
  --loader-color: rgba(140, 140, 140, 0.7) !important;
}
html[data-mantine-color-scheme="light"] #slot-spin-btn.lc-spin-btn[data-game-phase="spinning"] .mantine-Loader-root {
  --loader-color: var(--mantine-color-green-9) !important;
}
html[data-mantine-color-scheme="light"] #slot-spin-btn.lc-spin-btn[data-game-phase="effects"] .mantine-Loader-root {
  --loader-color: rgb(174, 62, 201) !important;
}
html[data-mantine-color-scheme="light"] #slot-spin-btn.lc-spin-btn[data-game-phase="coins"] .mantine-Loader-root {
  --loader-color: rgb(200, 140, 0) !important;
}

html[data-mantine-color-scheme="light"] #slot-spin-btn.lc-spin-btn:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) {
  --_text: var(--mantine-color-dimmed);
  background: rgba(128, 128, 128, 0.08);
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Light mode loading: neutral */
html[data-mantine-color-scheme="light"] #slot-spin-btn.lc-spin-btn:where([data-loading]) {
  --_glow: rgba(140, 140, 140, 0.2);
  --_glow-intense: rgba(140, 140, 140, 0.35);
  --_glass-border: rgba(0, 0, 0, 0.08);
  background: rgba(200, 200, 200, 0.10);
}

/* Light mode phase-synced glow */
html[data-mantine-color-scheme="light"] #slot-spin-btn.lc-spin-btn[data-game-phase="spinning"] {
  --_glow: rgba(43, 138, 62, 0.35);
  --_glow-intense: rgba(43, 138, 62, 0.6);
  --_glass-border: rgba(43, 138, 62, 0.3);
  background: rgba(255, 255, 255, 0.25);
}

html[data-mantine-color-scheme="light"] #slot-spin-btn.lc-spin-btn[data-game-phase="effects"] {
  --_glow: rgba(174, 62, 201, 0.35);
  --_glow-intense: rgba(174, 62, 201, 0.6);
  --_glass-border: rgba(174, 62, 201, 0.3);
  background: rgba(174, 62, 201, 0.10);
}

html[data-mantine-color-scheme="light"] #slot-spin-btn.lc-spin-btn[data-game-phase="coins"] {
  --_glow: rgba(200, 140, 0, 0.35);
  --_glow-intense: rgba(200, 140, 0, 0.6);
  --_glass-border: rgba(200, 140, 0, 0.3);
  background: rgba(200, 140, 0, 0.10);
}

/* --- Game Grid Glass Panel --- */
/* Disable backdrop-filter/background on parent — the .lc-glass-backdrop child
   handles both, preventing a stacking context trap on hover cards/tooltips. */
#grids-glass-panel,
#sb-grids-glass-panel {
  padding: 0 0 6px 0;
  overflow: visible;   /* overlay canvases extend beyond grid bounds */
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;        /* border + border-box causes 2px/frame feedback loop with responsive sync */
  outline: 2px solid var(--mantine-color-default-border);  /* uses outline to avoid layout feedback loop */
  outline-offset: -1px;
}

#item-grid-responsive-container,
#sb-item-grid-responsive-container {
  margin-top: 6px;
}

#item-grid-container,
#sb-item-grid-container {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Hide native scrollbars on GlideGrid's internal scroll container.
 * macOS "Show scroll bars: Always" forces 15px native scrollbars on any
 * overflow:auto element. GlideGrid grids either fit exactly (game, shop)
 * or delegate scrolling to an outer wrapper (inventory). The internal
 * dvn-scroller scrollbar is never needed. */
.dvn-scroller {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.dvn-scroller::-webkit-scrollbar {
  display: none;
}
html[data-mantine-color-scheme="light"] #item-grid-container,
html[data-mantine-color-scheme="light"] #sb-item-grid-container {
  border-top-color: rgba(0, 0, 0, 0.12);
}

/* --- Tutorial Modal + Carousel --- */

/* Modal body: flex column layout with fixed desktop height */
.tutorial-modal .mantine-Modal-body {
  display: flex;
  flex-direction: column;
  height: 560px;
}

/* Carousel fills remaining modal height; viewport stretches to match */
.tutorial-carousel {
  flex: 1;
  min-height: 0;
  overflow: visible;
}

.tutorial-carousel .mantine-Carousel-viewport {
  height: 100%;
}

/* Slide inner: scrollable content with horizontal padding for arrow clearance */
.tutorial-slide-inner {
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
  padding: 0px 35px;
}

/* Indicators */
.tutorial-carousel .mantine-Carousel-indicator {
  width: 8px;
  height: 8px;
  background-color: var(--mantine-color-gray-6);
  transition: background-color 0.2s, width 0.2s;
}

.tutorial-carousel .mantine-Carousel-indicator[data-active] {
  width: 20px;
  border-radius: 4px;
  background-color: var(--mantine-color-blue-6);
}

/* Controls: push into modal padding so slides get full width */
.tutorial-carousel .mantine-Carousel-control {
  border: none;
  background: var(--mantine-color-default-hover);
  color: var(--mantine-color-text);
  box-shadow: none;
  opacity: 0.7;
  transition: opacity 0.15s;
}

.tutorial-carousel .mantine-Carousel-control[data-position="prev"] {
  left: -24px;
}

.tutorial-carousel .mantine-Carousel-control[data-position="next"] {
  right: -24px;
}

.tutorial-carousel .mantine-Carousel-control:hover {
  opacity: 1;
}

/* Mobile: shrink to fit viewport without scrolling */
@media (max-width: 600px) {
  .tutorial-modal .mantine-Modal-body {
    height: auto;
    max-height: 78dvh;
  }

  .tutorial-carousel .mantine-Carousel-viewport {
    height: clamp(200px, 52dvh, 360px);
  }

  /* Hide arrows on mobile — swipe to navigate */
  .tutorial-carousel {
    padding: 0;
  }

  .tutorial-carousel .mantine-Carousel-control {
    display: none;
  }

  /* No arrow clearance needed; add bottom padding for indicator dots */
  .tutorial-slide-inner {
    padding: 0 8px 28px;
    /* Override Mantine font-size tokens so all components shrink */
    --mantine-font-size-xs: 0.6rem;
    --mantine-font-size-sm: 0.65rem;
    --mantine-font-size-md: 0.7rem;
    --mantine-font-size-lg: 0.8rem;
    --mantine-h3-font-size: 0.95rem;
  }

  /* Shrink icons */
  .tutorial-slide-inner .iconify {
    transform: scale(0.6);
  }

  /* Tighten gaps */
  .tutorial-slide-inner > .mantine-Stack-root {
    gap: 6px;
  }

  .tutorial-slide-inner .mantine-Stack-root .mantine-Stack-root {
    gap: 2px;
  }

  /* Override inline fontSize on resource badges */
  .tutorial-slide-inner .mantine-Badge-root {
    font-size: 0.7rem !important;
    height: 20px !important;
  }

  /* Tighten stats legend grid */
  .tutorial-slide-inner .mantine-SimpleGrid-root {
    gap: 2px;
  }

  /* Scale down tutorial symbol card */
  .tutorial-card-wrapper .mantine-Card-root {
    zoom: 0.75;
  }
}