@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: #060807;
}

body {
  min-height: 100%;
  margin: 0;
  background:
    linear-gradient(180deg, rgba(21, 33, 31, 0.72), rgba(6, 8, 7, 0.96) 42%),
    #060807;
  color: #edf4f1;
  letter-spacing: 0;
}

button,
input,
select,
textarea {
  font: inherit;
}

::selection {
  background: rgba(15, 191, 143, 0.35);
}

.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}

.surface {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(16, 24, 23, 0.88);
}

.odds-grid {
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
}

@keyframes mineReveal {
  0% {
    opacity: 0.76;
    transform: rotateY(0deg) scale(0.96);
  }

  48% {
    opacity: 0.88;
    transform: rotateY(86deg) scale(1.02);
  }

  100% {
    opacity: 1;
    transform: rotateY(0deg) scale(1);
  }
}

@keyframes mineShake {
  0%,
  100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-3px);
  }

  40% {
    transform: translateX(3px);
  }

  60% {
    transform: translateX(-2px);
  }

  80% {
    transform: translateX(2px);
  }
}

@keyframes minePop {
  0% {
    opacity: 0.18;
    transform: scale(0.65) rotate(-8deg);
  }

  60% {
    opacity: 1;
    transform: scale(1.08) rotate(4deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes minesResultToast {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.9);
  }

  14% {
    opacity: 1;
    transform: translateY(0) scale(1.03);
  }

  82% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
  }
}

@keyframes blackjackDeal {
  0% {
    opacity: 0.9;
    transform: translate3d(var(--deal-x, 178px), var(--deal-y, -88px), 0) rotate(var(--deal-rot, 8deg)) scale3d(0.92, 0.92, 1);
  }

  62% {
    opacity: 1;
    transform: translate3d(var(--deal-mid-x, 64px), var(--deal-mid-y, -32px), 0) rotate(var(--deal-mid-rot, 3deg)) scale3d(0.985, 0.985, 1);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale3d(1, 1, 1);
  }
}

@keyframes blackjackDeckPulse {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
    box-shadow: 0 18px 38px rgba(138, 99, 255, 0.28);
  }

  50% {
    transform: translateY(-2px) rotate(1deg);
    box-shadow: 0 22px 44px rgba(15, 191, 143, 0.26);
  }
}

@keyframes blackjackResultToast {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.9);
  }

  14% {
    opacity: 1;
    transform: translateY(0) scale(1.03);
  }

  82% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
  }
}

@keyframes plinkoBallGlow {
  0%,
  100% {
    box-shadow: 0 0 18px rgba(15, 191, 143, 0.35);
  }

  50% {
    box-shadow: 0 0 30px rgba(15, 191, 143, 0.62);
  }
}

@keyframes plinkoResultToast {
  0% {
    opacity: 0;
    transform: translate(-50%, -42%) scale(0.92);
  }

  14% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.03);
  }

  82% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -58%) scale(0.96);
  }
}

.animate-mine-reveal {
  animation: mineReveal 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  transform-style: preserve-3d;
}

.animate-mine-shake {
  animation: mineShake 0.34s ease both;
}

.animate-mine-pop {
  animation: minePop 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.animate-mines-result-toast {
  animation: minesResultToast 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.animate-blackjack-deal,
.animate-blackjack-deal-player,
.animate-blackjack-deal-dealer {
  animation: blackjackDeal 1.36s cubic-bezier(0.2, 0.76, 0.18, 1) both;
  backface-visibility: hidden;
  contain: paint;
  transform: translateZ(0);
  transform-style: preserve-3d;
  transform-origin: center;
  will-change: opacity, transform;
}

.animate-blackjack-deck-pulse {
  animation: blackjackDeckPulse 1.35s ease-in-out infinite;
}

.animate-blackjack-result-toast {
  animation: blackjackResultToast 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.animate-plinko-ball-glow {
  animation: plinkoBallGlow 1.05s ease-in-out infinite;
}

.animate-plinko-result-toast {
  animation: plinkoResultToast 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}