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

body{
  font-family:'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  position:relative;
  overflow-x:hidden;
}
body::before{
  content:'';
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 900px 550px at 15% -10%, rgba(0,255,157,.09), transparent 60%),
    radial-gradient(ellipse 900px 550px at 85% 110%, rgba(185,139,255,.09), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 0%, rgba(255,204,77,.05), transparent 55%);
  animation: bgDrift 16s ease-in-out infinite alternate;
}
@keyframes bgDrift{ 0%{ filter:hue-rotate(0deg) brightness(1);} 100%{ filter:hue-rotate(20deg) brightness(1.15);} }

.balance, .mult-display, .result-display, #balanceVal, .logo, .wallet-eth, .wallet-crash{
  font-family:'Orbitron', 'Space Grotesk', sans-serif;
}

.panel{ box-shadow:0 10px 34px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.03); }

button, .chip, .cell, .out-cell{ transition: transform .12s ease, filter .12s ease, box-shadow .12s ease; }
button:active, .chip:active, .cell:active, .out-cell:active{ transform: scale(.94); }
.main-btn:hover, .spin-btn:hover, .wallet-connect-btn:hover{ transform: translateY(-2px); }
.chip:hover, .cell:hover, .out-cell:hover{ transform: translateY(-2px) scale(1.03); }
.spin-btn, .main-btn, .btn-bet, .btn-cashout{ box-shadow:0 6px 18px rgba(0,0,0,.35); }

@keyframes shakeX{
  0%,100%{transform:translateX(0);} 20%{transform:translateX(-9px);}
  40%{transform:translateX(8px);} 60%{transform:translateX(-6px);} 80%{transform:translateX(3px);}
}
.shake{ animation: shakeX .4s ease; }

@keyframes popIn{ 0%{ transform:scale(0); opacity:0;} 60%{ transform:scale(1.18); opacity:1;} 100%{ transform:scale(1);} }
.pop-in{ animation: popIn .35s cubic-bezier(.2,1.4,.4,1); }

@keyframes winnerPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,204,77,.75); }
  50%{ box-shadow:0 0 0 12px rgba(255,204,77,0); }
}
.winner-pulse{ animation: winnerPulse .9s ease-out 2; position:relative; z-index:1; }

.fx-flash{ position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0; }
.fx-flash.on{ animation: flashPulse .5s ease-out; }
@keyframes flashPulse{ 0%{opacity:.5;} 100%{opacity:0;} }

.fx-canvas{ position:fixed; inset:0; pointer-events:none; z-index:9999; }