:root{
  --ink:#2a1c5e;
  --muted:#6f66a0;
  --violet:#7c3aed;
  --pink:#ff3d81;
  --orange:#ff8a3d;
  --gold:#ffc531;
  --green:#2fbf71;
  --card:rgba(255,255,255,.74);
  --card-brd:rgba(255,255,255,.9);
  --shadow:0 24px 50px -24px rgba(84,40,160,.45);
  --grad:linear-gradient(135deg,#ff3d81,#a855f7 55%,#ff8a3d);
  --grad2:linear-gradient(135deg,#7c3aed,#ff3d81);
  --rh:116px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Manrope,system-ui,"Segoe UI",sans-serif;
  color:var(--ink);
  background:#fdf3f9;
  background-image:linear-gradient(150deg,#ffeaf5 0%,#eef1ff 45%,#fff7e8 100%);
  background-attachment:fixed;
  min-height:100vh;
  overflow-x:hidden;
}
h1,h2,h3,.brand,.foot-brand{font-family:Unbounded,Manrope,sans-serif;letter-spacing:-.02em}
h1{font-size:clamp(30px,5vw,54px);line-height:1.08;margin:14px 0 16px}
h2{font-size:clamp(20px,3vw,28px);margin:0}
h3{font-size:16px;margin:10px 0 6px}
p{margin:0}
button{font-family:inherit}
.blob{position:fixed;border-radius:50%;filter:blur(70px);opacity:.6;pointer-events:none;z-index:0;animation:float 16s ease-in-out infinite alternate}
.b1{width:46vmax;height:46vmax;left:-14vmax;top:-12vmax;background:radial-gradient(circle,#ff9ad5,#ffd0e6 70%)}
.b2{width:40vmax;height:40vmax;right:-12vmax;top:26vh;background:radial-gradient(circle,#a5b9ff,#dbe4ff 70%);animation-delay:-5s}
.b3{width:44vmax;height:44vmax;left:16vmax;bottom:-18vmax;background:radial-gradient(circle,#ffd58a,#fff0cf 70%);animation-delay:-9s}
@keyframes float{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(3vmax,-4vmax,0) scale(1.12)}}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60}
.topbar{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:14px;
  padding:12px clamp(14px,4vw,36px);
  background:rgba(255,255,255,.72);backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.9);
}
.brand{font-weight:800;font-size:20px;text-decoration:none;color:var(--ink)}
.brand span,.foot-brand span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.wallet{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}
.wallet-bal{font-family:Unbounded;font-weight:800;font-size:clamp(18px,3.4vw,24px);background:var(--grad2);-webkit-background-clip:text;background-clip:text;color:transparent}
.wallet-rate{font-size:12px;color:var(--muted);font-weight:700}
.icon-btn{width:42px;height:42px;border-radius:14px;border:1px solid var(--card-brd);background:rgba(255,255,255,.8);font-size:18px;cursor:pointer;transition:.2s;box-shadow:0 8px 18px -10px rgba(84,40,160,.5)}
.icon-btn:hover{transform:translateY(-2px)}
.icon-btn.off{filter:grayscale(1);opacity:.65}
main{position:relative;z-index:1;max-width:1160px;margin:0 auto;padding:0 clamp(14px,4vw,36px) 40px}
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,4vw,50px);align-items:center;padding:clamp(26px,5vw,58px) 0 clamp(18px,3vw,32px)}
.pill{display:inline-block;font-size:13px;font-weight:700;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.8);border:1px solid var(--card-brd);color:var(--violet);box-shadow:0 8px 20px -14px rgba(84,40,160,.7)}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--muted);font-size:clamp(15px,1.7vw,18px);max-width:52ch;font-weight:500}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:none;cursor:pointer;text-decoration:none;
  padding:14px 24px;border-radius:16px;font-weight:800;font-size:15px;
  transition:transform .18s,box-shadow .18s,filter .18s;
}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 16px 30px -14px rgba(255,61,129,.85)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 22px 36px -14px rgba(255,61,129,.9)}
.btn-primary:active{transform:scale(.97)}
.btn-primary:disabled{filter:grayscale(.55) brightness(.9);cursor:not-allowed;transform:none}
.btn-ghost{background:rgba(255,255,255,.85);color:var(--ink);border:1px solid var(--card-brd);box-shadow:0 12px 26px -20px rgba(84,40,160,.8)}
.btn-ghost:hover{transform:translateY(-3px)}
.btn-ghost:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn.big{padding:16px 30px;font-size:17px}
.btn.sm{padding:10px 16px;font-size:14px}
.hero-stats{list-style:none;display:flex;gap:clamp(14px,3vw,34px);padding:0;margin:28px 0 0}
.hero-stats li{display:flex;flex-direction:column}
.hero-stats b{font-family:Unbounded;font-size:22px;font-weight:700}
.hero-stats span{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.hero-right{display:flex;flex-direction:column;align-items:center;gap:14px}
.tapcoin{
  position:relative;border:none;background:none;cursor:pointer;
  width:clamp(190px,26vw,250px);height:clamp(190px,26vw,250px);
  display:grid;place-items:center;padding:0;
}
.tapcoin-face{
  font-size:clamp(84px,13vw,120px);line-height:1;
  filter:drop-shadow(0 18px 26px rgba(180,110,10,.45));
  transition:transform .12s cubic-bezier(.34,1.56,.64,1);
  animation:coinHover 3.4s ease-in-out infinite;
}
.tapcoin:active .tapcoin-face{transform:scale(.86) rotate(-8deg)}
@keyframes coinHover{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(3deg)}}
.tapcoin-ring{position:absolute;inset:0;border-radius:50%;border:3px dashed rgba(168,85,247,.55);animation:spinRing 14s linear infinite}
@keyframes spinRing{to{transform:rotate(360deg)}}
.tapcoin-label{
  position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);
  white-space:nowrap;background:rgba(255,255,255,.9);border:1px solid var(--card-brd);
  padding:7px 14px;border-radius:999px;font-size:13px;font-weight:700;
  box-shadow:0 12px 24px -16px rgba(84,40,160,.9);
}
.tapcoin-label b{color:var(--pink)}
.idle-note{font-size:13px;font-weight:700;color:var(--muted);text-align:center}
.idle-bar{width:min(280px,70%);height:8px;border-radius:99px;background:rgba(124,58,237,.16);overflow:hidden}
.idle-bar i{display:block;height:100%;width:0;background:var(--grad2);border-radius:99px}
.ticker{overflow:hidden;border-radius:18px;background:rgba(255,255,255,.6);border:1px solid var(--card-brd);padding:11px 0;margin-bottom:8px}
.ticker-track{display:flex;gap:36px;white-space:nowrap;width:max-content;animation:marquee 34s linear infinite;font-weight:700;font-size:14px;color:var(--muted)}
.ticker-track span b{color:var(--violet)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.section{margin-top:clamp(20px,3vw,32px)}
.card{
  background:var(--card);backdrop-filter:blur(18px);
  border:1px solid var(--card-brd);border-radius:26px;
  box-shadow:var(--shadow);padding:clamp(18px,3vw,30px);
}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.badge{font-size:12px;font-weight:800;padding:7px 13px;border-radius:99px;background:var(--grad2);color:#fff;letter-spacing:.02em}
.reels{
  display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:12px;
  border-radius:22px;background:var(--grad2);
  box-shadow:inset 0 6px 22px rgba(40,10,90,.35);
}
.reel{height:var(--rh);border-radius:14px;overflow:hidden;background:linear-gradient(180deg,#ffffff,#f4efff);box-shadow:inset 0 8px 14px rgba(70,30,140,.16);position:relative}
.strip{display:flex;flex-direction:column;will-change:transform}
.strip .cell{height:var(--rh);display:grid;place-items:center;font-size:calc(var(--rh)*.56);user-select:none}
.reel.spinning .strip{animation:reelScroll .14s linear infinite}
@keyframes reelScroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.reel.stop{animation:reelStop .32s cubic-bezier(.36,1.56,.64,1)}
@keyframes reelStop{0%{transform:translateY(-9px)}100%{transform:translateY(0)}}
.strip .cell.win{background:rgba(255,197,49,.45);border-radius:12px;animation:winPulse .55s ease-in-out infinite alternate}
@keyframes winPulse{from{box-shadow:inset 0 0 0 rgba(255,197,49,0)}to{box-shadow:inset 0 0 24px rgba(255,140,20,.85)}}
.slot-result{margin-top:14px;text-align:center;font-weight:800;min-height:26px;font-size:clamp(15px,2vw,18px);color:var(--muted)}
.slot-result.win{color:#e0651b}
.slot-controls{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:12px}
.bet-group,.chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.bet-chip{
  min-width:56px;height:44px;padding:0 14px;border-radius:14px;cursor:pointer;
  border:2px solid rgba(124,58,237,.25);background:rgba(255,255,255,.85);
  font-weight:800;font-size:15px;color:var(--ink);transition:.16s;
}
.bet-chip:hover{transform:translateY(-2px)}
.bet-chip.active{background:var(--grad2);color:#fff;border-color:transparent;box-shadow:0 12px 24px -14px rgba(168,85,247,.9)}
.auto{display:flex;align-items:center;gap:7px;font-weight:700;font-size:14px;cursor:pointer;color:var(--muted)}
.auto input{width:18px;height:18px;accent-color:var(--violet);cursor:pointer}
.paytable{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;justify-content:center}
.pay-item{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.75);border:1px solid var(--card-brd);border-radius:12px;padding:7px 11px;font-size:13px;font-weight:700}
.pay-item i{font-style:normal;font-size:17px}
.pay-item b{color:var(--pink)}
.roulette-wrap{display:grid;grid-template-columns:minmax(280px,440px) 1fr;gap:clamp(18px,3vw,30px);align-items:start}
.wheel-box{display:flex;flex-direction:column;gap:14px;align-items:center}
#wheel{width:100%;max-width:440px;aspect-ratio:1;display:block;border-radius:50%;filter:drop-shadow(0 24px 34px rgba(90,40,150,.4))}
.wheel-result{
  text-align:center;font-weight:800;padding:11px 18px;border-radius:14px;
  background:rgba(255,255,255,.85);border:1px solid var(--card-brd);width:100%;
  box-shadow:0 14px 28px -22px rgba(84,40,160,.9);min-height:46px;
}
.chips{margin-bottom:14px;gap:10px}
.chip{
  width:54px;height:54px;border-radius:50%;cursor:pointer;font-weight:800;font-size:14px;
  border:4px dashed rgba(255,255,255,.85);color:#fff;transition:.16s;box-shadow:0 10px 20px -12px rgba(40,10,90,.9);
}
.chip:hover{transform:translateY(-3px) scale(1.05)}
.chip.active{outline:3px solid var(--ink);outline-offset:2px}
.c10{background:linear-gradient(135deg,#ff8a3d,#ff6b3d)}
.c50{background:linear-gradient(135deg,#7c3aed,#a855f7)}
.c100{background:linear-gradient(135deg,#ff3d81,#ff6ba6)}
.c500{background:linear-gradient(135deg,#2fbf71,#61d98f)}
.chip-total{margin-left:auto;font-weight:800;font-size:14px;color:var(--muted)}
.chip-total b{color:var(--violet);font-size:17px}
.num-board{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.num{
  position:relative;aspect-ratio:1;border-radius:10px;border:none;cursor:pointer;
  font-weight:800;font-size:15px;color:#fff;transition:.14s;padding:0;
}
.num:hover{transform:translateY(-2px);filter:brightness(1.12)}
.num.zero{grid-column:1/-1;aspect-ratio:auto;height:46px;background:var(--green)}
.num.red{background:#e8324a}
.num.black{background:#4b3aa8}
.num .bet-amt,.out .bet-amt{
  position:absolute;left:50%;bottom:3px;transform:translateX(-50%);
  background:var(--gold);color:#4a2c00;font-size:10px;font-weight:800;
  padding:1px 6px;border-radius:99px;pointer-events:none;
}
.num .bet-amt:empty,.out .bet-amt:empty{display:none}
.outside{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:6px}
.out{
  position:relative;height:46px;border-radius:10px;border:none;cursor:pointer;
  font-weight:800;font-size:13px;background:rgba(255,255,255,.9);color:var(--ink);transition:.14s;
}
.out[data-key="red"]{background:#e8324a;color:#fff}
.out[data-key="black"]{background:#4b3aa8;color:#fff}
.out:hover{transform:translateY(-2px);filter:brightness(1.06)}
.out.on{outline:3px solid var(--gold);outline-offset:1px}
.roulette-controls{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.roulette-controls .btn{flex:1;min-width:120px}
.upgrades{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.up{background:rgba(255,255,255,.72);border:1px solid var(--card-brd);border-radius:20px;padding:18px;box-shadow:0 18px 34px -26px rgba(84,40,160,.9);transition:.2s}
.up:hover{transform:translateY(-4px);box-shadow:0 26px 44px -26px rgba(84,40,160,.95)}
.up-icon{font-size:34px}
.up p{color:var(--muted);font-size:13.5px;font-weight:600;min-height:38px}
.up-foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:8px}
.lvl{font-size:13px;font-weight:800;color:var(--muted)}
.up.poor button{filter:grayscale(.7);opacity:.75}
.up.max{border-color:rgba(47,191,113,.55);background:rgba(240,255,247,.8)}
.up.max .btn{background:var(--green)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,26px)}
.history{list-style:none;margin:0;padding:0;max-height:250px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.history li{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.7);border:1px solid var(--card-brd);border-radius:14px;padding:10px 12px;font-size:14px;font-weight:700;animation:popIn .3s ease}
.history li b{margin-left:auto;color:var(--green)}
.history li.loss b{color:var(--muted)}
@keyframes popIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.steps{display:flex;flex-direction:column;gap:14px}
.step{display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.7);border:1px solid var(--card-brd);border-radius:16px;padding:14px}
.step span{flex:none;width:34px;height:34px;border-radius:12px;background:var(--grad2);color:#fff;font-weight:800;display:grid;place-items:center}
.step p{font-size:14.5px;font-weight:600;color:var(--muted)}
.footer{text-align:center;margin-top:40px;color:var(--muted);font-size:13.5px}
.foot-brand{font-weight:800;font-size:22px;color:var(--ink);margin-bottom:8px}
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,26px);
  background:rgba(42,28,94,.94);color:#fff;font-weight:700;font-size:14.5px;
  padding:13px 22px;border-radius:99px;opacity:0;pointer-events:none;
  transition:.3s cubic-bezier(.34,1.56,.64,1);z-index:70;
  box-shadow:0 20px 40px -18px rgba(42,28,94,.9);max-width:90vw;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.floater{
  position:fixed;transform:translate(-50%,-50%);z-index:65;pointer-events:none;
  font-family:Unbounded;font-weight:800;font-size:22px;color:#e0651b;
  text-shadow:0 2px 10px rgba(255,255,255,.9);animation:rise 1.1s ease forwards;
}
.floater.violet{color:var(--violet)}
@keyframes rise{0%{opacity:0;transform:translate(-50%,-30%) scale(.7)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-160%) scale(1.15)}}
@media (max-width:960px){
  .hero{grid-template-columns:1fr;text-align:center}
  .lead{margin-inline:auto}
  .hero-actions,.hero-stats{justify-content:center}
  .roulette-wrap{grid-template-columns:1fr}
  .upgrades{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
}
@media (max-width:640px){
  :root{--rh:84px}
  .reels{gap:6px;padding:8px}
  .strip .cell{font-size:calc(var(--rh)*.55)}
  .num-board{grid-template-columns:repeat(6,1fr)}
  .btn.big{width:100%}
  .slot-controls{flex-direction:column;align-items:stretch}
  .bet-group{justify-content:center}
  .auto{justify-content:center}
  .paytable{gap:6px}
  .pay-item{padding:6px 9px;font-size:12px}
  .chip-total{width:100%;margin:4px 0 0;text-align:center}
}
@media (min-width:641px){
  .num-board{grid-template-columns:repeat(9,1fr)}
  .num.zero{grid-column:1/-1}
  .outside{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important}
  html{scroll-behavior:auto}
}