*{box-sizing:border-box}
:root{
  --gold:#ffd75d;
  --deep:#061209;
  --green:#153a20;
  --panel:rgba(7,16,10,.86);
  --stone:#171b14;
}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;color:#fff;background:#051008}
body{
  background:
    radial-gradient(circle at 50% 0%,rgba(255,214,94,.2),transparent 22%),
    linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.20) 30%,rgba(0,0,0,.20) 70%,rgba(0,0,0,.72)),
    url("../assets/regular_scatter.jpeg");
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
}
.loader{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:#061209;
  transition:opacity .45s ease,visibility .45s ease;
}
.loader.hidden{opacity:0;visibility:hidden}
.loaderLogo{text-align:center;color:var(--gold);font-weight:1000;font-size:clamp(32px,7vw,80px);line-height:.85;text-shadow:0 6px 0 #3d2100,0 0 28px #000}
.loaderLogo span{font-size:.48em;color:#a8ff73}
.site{min-height:100vh;background:rgba(4,14,7,.78);backdrop-filter:blur(5px)}
button{font-family:inherit;cursor:pointer}
.desktopTop{
  height:82px;display:grid;grid-template-columns:260px 1fr 280px;gap:14px;align-items:center;
  padding:8px 34px;background:rgba(0,0,0,.82);border-bottom:1px solid rgba(255,215,93,.35);box-shadow:0 8px 25px #000;position:sticky;top:0;z-index:20
}
.logoBlock{line-height:.88;text-transform:uppercase;text-shadow:0 4px #3b2200}
.logoText{font-size:31px;font-weight:1000;color:var(--gold)}
.logoSub{font-size:17px;font-weight:1000;color:#b7ff73}
.desktopTop nav{display:flex;justify-content:center;gap:22px}
.desktopTop nav button{border:0;background:transparent;color:white;font-weight:900;padding:10px}
.desktopTop nav button.active{color:#98ee61;border-bottom:3px solid #98ee61}
.wallet{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.coinIcon{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#fff7a8,#9b6100);color:#3b2100}
.wallet span:nth-child(2){font-size:19px;font-weight:900;background:rgba(0,0,0,.38);border:1px solid rgba(255,215,93,.28);border-radius:12px;padding:8px 12px}
.wallet button{border:0;border-radius:10px;color:#fff;background:linear-gradient(#55cf3d,#126813);font-size:20px;font-weight:900;padding:8px 12px}
.desktopGame{max-width:1520px;margin:18px auto 0;padding:0 18px;display:grid;grid-template-columns:350px minmax(540px,820px) 230px;gap:22px;align-items:start}
.leftShowcase,.machineShell,.rightStats .statCard,.infoFooter div,.modalCard{
  background:linear-gradient(145deg,rgba(23,38,21,.92),rgba(0,0,0,.76));
  border:1px solid rgba(255,215,93,.48);border-radius:20px;box-shadow:0 0 28px rgba(0,0,0,.75),inset 0 0 26px rgba(255,215,93,.06)
}
.leftShowcase{text-align:center;padding:18px;overflow:hidden;position:relative}
.leftShowcase:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 14%,rgba(255,215,93,.22),transparent 35%);pointer-events:none}
.heroMonkey{width:88%;height:270px;object-fit:cover;border-radius:26px;border:4px solid var(--gold);box-shadow:0 0 30px rgba(255,215,93,.5);position:relative}
.leftShowcase h1{margin:16px 0 12px;font-size:47px;line-height:.85;text-transform:uppercase;color:var(--gold);text-shadow:0 5px #4b2500,0 0 18px #000;position:relative}
.leftShowcase h1 span{font-size:28px;color:#b7ff73}
.payoutCard{background:rgba(0,0,0,.6);border:1px solid var(--gold);border-radius:14px;padding:10px;text-align:left}
.payoutCard h3{text-align:center;color:var(--gold);margin:0 0 8px}
.payoutCard p{display:flex;justify-content:space-between;gap:8px;margin:8px 0;padding-bottom:7px;border-bottom:1px solid rgba(255,255,255,.12);font-size:13px}
.payoutCard b{color:var(--gold);font-size:17px;white-space:nowrap}
.machineShell{position:relative;padding:16px 16px 128px;background:linear-gradient(145deg,rgba(42,52,30,.96),rgba(0,0,0,.82))}
.stoneTop{text-align:center;font-size:30px;font-weight:1000;color:var(--gold);text-shadow:0 4px #000;margin-bottom:8px}
.machineFrame{position:relative;padding:10px;background:linear-gradient(135deg,#fff1a3,#765100 13%,#edbd38 34%,#392000 65%,#ffdf6e);border-radius:15px;box-shadow:0 0 24px rgba(255,215,93,.45)}
.reelGrid{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;background:#0e120c;border:2px solid #080805}
.cell{
  aspect-ratio:1/1;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:linear-gradient(145deg,#23271d,#0c100a);border:1px solid rgba(255,215,93,.22);border-radius:5px;
  font-size:37px;font-weight:1000;text-shadow:0 3px 2px #000;box-shadow:inset 0 0 15px rgba(0,0,0,.4)
}
.cell img{width:100%;height:100%;object-fit:cover}
.cell.drop{animation:drop .28s ease}
.cell.winCell{animation:winPulse .55s ease-in-out 2;z-index:3}
.cell.letter{font-family:Georgia,serif;font-size:45px;-webkit-text-stroke:1px #f4d16e}
.cell.red{color:#d72525}.cell.gold{color:#dfa93a}.cell.green{color:#1e9e36}.cell.blue{color:#1b81d7}.cell.purple{color:#a94dff}
.cell.gem{font-size:44px;filter:drop-shadow(0 0 8px rgba(255,255,255,.35))}
.cell.scatterTile,.cell.superTile{border:2px solid #ffdf63;box-shadow:0 0 18px #ffdf63,inset 0 0 20px rgba(255,215,93,.24)}
.cell.scatterTile:after,.cell.superTile:after{
  position:absolute;left:2px;right:2px;bottom:2px;text-align:center;font-size:10px;font-weight:1000;background:linear-gradient(#fff39d,#d99000);color:#190f00;border-radius:4px;text-shadow:none;padding:2px
}
.cell.scatterTile:after{content:"SCATTER"}.cell.superTile:after{content:"SUPER SCATTER"}
@keyframes drop{from{transform:translateY(-90px) scale(.92);opacity:.25}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes winPulse{50%{transform:scale(1.1);filter:brightness(1.85)}}
.particles{position:absolute;inset:0;pointer-events:none;width:100%;height:100%}
.ticker{text-align:center;margin:10px auto 0;min-height:54px;font-weight:1000;font-size:22px;text-shadow:0 3px #000}.ticker small{font-size:12px;color:#e8ffd9}
.bonusMeter{max-width:440px;margin:8px auto 0;background:rgba(0,0,0,.45);border:1px solid rgba(255,215,93,.45);border-radius:12px;padding:8px;text-align:center}.bonusMeter span{color:var(--gold);font-weight:1000}
.meterTrack{height:14px;margin-top:5px;background:#06110a;border:1px solid #ffe680;border-radius:99px;overflow:hidden}
#meterFill{height:100%;width:0%;background:linear-gradient(90deg,#65ff49,#ffdf5f);transition:width .45s}
.machineControls{position:absolute;left:16px;right:16px;bottom:14px;display:grid;grid-template-columns:54px 54px 1fr 112px 96px 96px 88px;gap:10px;align-items:center}
.iconBtn,.controlBtn,.betPanel,.spinBtn{border:1px solid rgba(255,215,93,.48);border-radius:12px;background:linear-gradient(#2b2415,#070706);color:white;box-shadow:0 4px #000;font-weight:1000}
.iconBtn{height:54px;font-size:25px}.controlBtn{height:60px;color:var(--gold)}.controlBtn.active{box-shadow:0 0 15px #fff,0 4px #000}
.betPanel{height:60px;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--gold)}.betPanel span{font-size:12px}.betPanel button{border:0;background:#252417;color:white;border-radius:8px;width:27px;height:27px;font-size:19px}.betPanel strong{color:white}
.spinBtn{width:104px;height:104px;border-radius:50%;font-size:58px;justify-self:center;background:radial-gradient(circle,#69c930 0,#1d8b1b 44%,#083709 60%,#e4b83f 63%,#5b3500 100%);color:#ffe57c;text-shadow:0 3px #062000;box-shadow:0 0 28px rgba(255,215,93,.65),0 8px #000}
.statCard{text-align:center;padding:16px;margin-bottom:18px}.statCard h3{margin:0 0 12px;color:var(--gold)}.statCard div{font-size:30px;font-weight:1000;color:#ffe37c}.statCard.small p{margin:4px 0 0;color:#dfffcd}.off{color:#83ff65!important}
.multiplierCard div{width:116px;height:116px;border-radius:50%;margin:auto;display:grid;place-items:center;background:radial-gradient(circle,#75b839,#245414 55%,#d8aa2c 58%,#5a3500 100%);font-size:36px!important}
.infoFooter{max-width:1520px;margin:18px auto 0;padding:0 18px 22px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.infoFooter div{padding:16px}.infoFooter b{color:var(--gold);display:block}.infoFooter span{display:block;color:#d7e7cf;margin-top:5px}
.modal,.winOverlay,.bonusCutscene{position:fixed;z-index:50}.modal{inset:0;background:rgba(0,0,0,.68);display:grid;place-items:center;padding:18px}.hidden{display:none!important}.modalCard{max-width:700px;padding:24px}.modalCard button{float:right;background:transparent;border:0;color:white;font-size:34px}
.winOverlay{inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(0,0,0,.38);pointer-events:none;text-align:center;text-shadow:0 5px #000}.winOverlay #winTitle{font-size:clamp(46px,9vw,120px);font-weight:1000;color:var(--gold)}.winOverlay #winAmount{font-size:clamp(36px,8vw,90px);font-weight:1000;color:white}
.bonusCutscene{inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:radial-gradient(circle,#fff68b 0,#e58a13 36%,#331300 75%,#000);animation:shake .08s infinite alternate}.bonusCutscene img{width:min(360px,72vw);height:min(360px,72vw);object-fit:cover;border-radius:50%;border:7px solid white;box-shadow:0 0 40px white;animation:monkeyRun .65s infinite alternate}.bonusCutscene h2{font-size:clamp(34px,8vw,80px);margin:18px 0 0;text-shadow:0 5px #000}.bonusCutscene p{font-size:20px;font-weight:900}.bonusCutscene strong{font-size:clamp(30px,7vw,62px);color:#fff47b;text-shadow:0 4px #000}.bonusCutscene button{border:2px solid #fff;border-radius:12px;background:#2d1700;color:#fff;padding:12px 18px;font-weight:1000}
.bananaLayer:before,.bananaLayer:after{content:"🍌 🍌 🍌 🍌 🍌 🍌 🍌 🍌 🍌 🍌 🍌";position:absolute;left:-15%;right:-15%;top:-80px;font-size:48px;animation:rain .8s linear infinite}.bananaLayer:after{animation-duration:1.12s;animation-delay:.17s;transform:translateX(60px)}
@keyframes rain{to{transform:translateY(115vh) rotate(30deg)}}@keyframes shake{from{transform:translateX(-3px)}to{transform:translateX(3px)}}@keyframes monkeyRun{from{transform:translateX(-34px) rotate(-6deg) scale(1)}to{transform:translateX(34px) rotate(6deg) scale(1.08)}}
@media(max-width:1120px){.desktopTop{grid-template-columns:1fr;height:auto;text-align:center;padding:8px}.desktopTop nav{display:none}.wallet{justify-content:center}.desktopGame{grid-template-columns:1fr;padding:0 8px}.leftShowcase{display:none}.rightStats{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;order:3}.statCard{margin:0;padding:8px}.statCard h3{font-size:11px}.statCard div{font-size:16px}.multiplierCard div{width:54px;height:54px;font-size:18px!important}.machineShell{padding:10px 8px 154px}.stoneTop{font-size:21px}.machineControls{grid-template-columns:44px 44px 1fr 88px 78px;grid-auto-rows:auto;bottom:8px}.spinBtn{grid-column:2/4;width:88px;height:88px;font-size:48px}.controlBtn{height:48px;font-size:12px}.infoFooter{display:none}.cell{font-size:25px}.cell.letter{font-size:29px}.cell.scatterTile:after,.cell.superTile:after{font-size:8px}}
@media(max-width:520px){body{background-attachment:scroll}.desktopGame{margin-top:8px}.logoText{font-size:28px}.machineShell{border-radius:14px}.machineFrame{padding:6px}.reelGrid{min-height:315px}.rightStats{grid-template-columns:repeat(5,1fr)}.statCard.small{display:none}.ticker{font-size:20px}.wallet span:nth-child(2){font-size:16px;padding:7px 9px}}