@font-face{font-family:Bungee;src:url(bungee-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Figtree;src:url(figtree-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Figtree;src:url(figtree-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Figtree;src:url(figtree-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}

:root{
  --plum:#170614;--plum2:#260b22;--plum3:#3a1234;
  --mag:#ff1f8f;--org:#ff7a1a;--lamp:#ffc531;
  --ink:#1c0618;--txt:#fff3f8;--mut:#e5c7da;
  --hot:linear-gradient(115deg,#ff1f8f 0%,#ff4d55 52%,#ff8a14 100%);
  --disp:Bungee,Impact,"Arial Black",sans-serif;
  --gap:8px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--plum);color:var(--txt);font:400 17px/1.62 Figtree,"Trebuchet MS",sans-serif;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:#ffb35c}
a:focus-visible,summary:focus-visible{outline:3px solid var(--lamp);outline-offset:2px}
h1,h2,.sign{font-family:var(--disp);font-weight:400;line-height:1.08;margin:0}
.wrap{width:min(1180px,100%);margin-inline:auto;padding-inline:16px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:10px 24px;border-radius:10px;background:var(--lamp);color:var(--ink);font:400 17px/1.1 var(--disp);text-align:center;text-decoration:none;box-shadow:0 4px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--ink)}
.btn-s{min-height:42px;padding:8px 15px;font-size:14px;box-shadow:none;flex:none}
.btn-s:hover{transform:none;box-shadow:none;background:#ffd862}
.btn-xl{min-height:68px;padding:14px 32px;font-size:clamp(19px,1.9vw,26px);flex:1 1 auto}
.btn-dark{background:var(--ink);color:var(--lamp);box-shadow:0 4px 0 rgba(28,6,24,.4)}
.tc{margin:0;font-size:14px;font-weight:700;line-height:1.3}

/* header */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:20px;height:64px;padding-inline:max(16px,calc((100vw - 1408px)/2));background:rgba(23,6,20,.96);border-bottom:1px solid var(--plum3)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--mut);font-size:13px;font-weight:700;flex:none}
.brand img{width:104px}
.brand span{padding-left:10px;border-left:1px solid var(--plum3)}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{padding:9px 13px;border-radius:8px;color:var(--txt);font-weight:700;font-size:16px;text-decoration:none}
.nav a:hover,.nav a[aria-current]{background:var(--plum3);color:var(--lamp)}
.menu{display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;padding:9px 11px;border:1px solid var(--plum3);border-radius:8px;font-weight:700;font-size:15px}
.menu summary::-webkit-details-marker{display:none}
.menu nav{position:absolute;right:0;top:50px;width:220px;padding:8px;background:var(--plum2);border:1px solid var(--mag);border-radius:12px;display:grid}
.menu nav a{padding:10px 12px;color:var(--txt);font-weight:700;text-decoration:none}

/* hero mosaic */
.wall{padding:10px 16px;background:radial-gradient(900px 500px at 50% 0,#4a0f3e 0,transparent 70%)}
.mosaic{--w:min(1408px,calc((100svh - 104px)*2));width:max(940px,var(--w));max-width:100%;margin-inline:auto;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--gap)}
.tile{display:block;position:relative;border-radius:10px;overflow:hidden;background:var(--plum2);box-shadow:0 0 0 1px rgba(255,31,143,.45);transition:transform .15s,box-shadow .15s}
.tile img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4}
.tile:hover{transform:scale(1.03);box-shadow:0 0 0 2px var(--org),0 0 26px rgba(255,31,143,.75);z-index:2}
.panel{grid-column:3/7;grid-row:1/3;display:flex;flex-direction:column;justify-content:center;gap:clamp(6px,1.2vh,11px);padding:clamp(14px,1.7vw,24px) clamp(18px,2.2vw,32px);border-radius:14px;background:var(--hot);color:var(--ink);box-shadow:0 0 44px rgba(255,31,143,.55)}
.panel h1{font-size:clamp(26px,2.75vw,40px)}
.numlink{display:flex;flex-direction:column;gap:inherit;color:inherit;text-decoration:none}
.nums{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px clamp(16px,2vw,30px)}
.nums p{margin:0;font-weight:800;font-size:16px;line-height:1.1}
.nums b{display:block;font:400 1em/1 var(--disp);color:#fff;text-shadow:3px 3px 0 var(--ink)}
.n1 b{font-size:clamp(62px,6.1vw,88px)}
.n2 b{font-size:clamp(40px,3.9vw,56px)}
.n1 small{display:block;font-size:16px;font-weight:800}
.sum{margin:0;font-size:clamp(17px,1.6vw,22px);font-weight:700;line-height:1.2}
.sum b{font:400 1.15em var(--disp)}
.act{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.t-gates{grid-column:1/3;grid-row:1/3}
.t-cash{grid-column:5/7;display:flex;align-items:center;gap:6px;padding:0 12px;background:linear-gradient(115deg,#44103c,#7a1450);color:var(--txt);text-decoration:none;font-weight:700;font-size:15px;line-height:1.2}
.t-cash img{width:48%;height:auto;aspect-ratio:auto;object-fit:contain;flex:none}
.t-cash b{display:block;font:400 clamp(42px,4.4vw,64px)/1 var(--disp);color:var(--lamp)}

/* sections */
main>section,main>.wrap{margin-top:56px}
main>.wall,main>.ghero,main>.shead{margin-top:0}
.sign{font-size:clamp(28px,3.6vw,46px);color:#fff;text-shadow:0 0 18px var(--mag),0 0 2px var(--mag);margin-bottom:20px}
.doorgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.door{display:flex;align-items:stretch;gap:0;min-height:230px;border-radius:14px;overflow:hidden;text-decoration:none;color:var(--ink);font-weight:700;line-height:1.35;font-size:16px;transition:transform .15s}
.door:hover{transform:translateY(-4px)}
.door img{width:44%;object-fit:cover}
.door span{padding:18px 16px}
.door strong{display:block;font:400 30px/1.1 var(--disp);margin-bottom:8px}
.d-slots{background:#ff5ab0}.d-crash{background:#ff8a2a}.d-bonus{background:#ffc531}

.reels{padding:48px 0;background:linear-gradient(180deg,#3d0c35,#260b22)}
.reels .sign{text-align:center}
.lead{text-align:center;margin:0 0 22px;color:var(--mut);font-size:18px}
.machine{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:880px;margin:0 auto;padding:12px;border-radius:18px;background:var(--hot)}
.reel{display:flex;flex-direction:column;align-items:center;padding:24px 8px;border-radius:10px;text-align:center;background:linear-gradient(180deg,#0d030b 0,#2c0d28 22%,#3a1234 50%,#2c0d28 78%,#0d030b 100%)}
.reel .k{font-weight:700;font-size:16px;color:var(--mut)}
.reel b{font:400 clamp(38px,6.6vw,74px)/1.15 var(--disp);color:#fff}
.reel i{font:400 clamp(16px,2.4vw,26px)/1.1 var(--disp);color:var(--org)}
.reel.hot b{color:var(--lamp);text-shadow:0 0 22px var(--mag)}
.payline{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:center;margin:22px 0 10px}
.payline p{margin:0;font-size:21px;font-weight:700}
.payline b{font:400 1.2em var(--disp);color:var(--lamp)}
.reels .tc{text-align:center}

.queen{display:grid;grid-template-columns:238px 1fr;gap:34px;align-items:center}
.queenart{border-radius:14px;overflow:hidden;box-shadow:0 0 0 2px var(--mag),0 0 34px rgba(255,31,143,.5)}
.queenart img{width:100%}
.queentext p{margin:0 0 16px}
.tiers{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:0;margin:0 0 16px}
.tiers li{padding:14px 6px;text-align:center;border-radius:10px;background:var(--plum2);border:1px solid var(--plum3);font-size:14px;font-weight:700;color:var(--mut)}
.tiers b{display:block;font:400 clamp(21px,2.4vw,32px)/1.1 var(--disp);color:var(--org)}
.tiers li:last-child{background:var(--hot);color:var(--ink);border:0}.tiers li:last-child b{color:#fff}
.more{font-weight:800;color:var(--lamp)}

.tilerow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(112px,100%),1fr));gap:var(--gap)}
.prose .tilerow{margin:26px 0;grid-template-columns:repeat(4,1fr)}

.faq{margin-top:36px}
.faq h2{font-size:clamp(25px,3vw,36px);margin-bottom:14px}
.faq details{border-bottom:1px solid var(--plum3);padding:13px 0}
.faq summary{cursor:pointer;font-weight:800;font-size:18px}
.faq details p{margin:9px 0 2px;color:var(--mut)}
.band{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;margin-top:36px;padding:24px;border-radius:14px;background:var(--hot);color:var(--ink);font-weight:800;font-size:20px}
.band p{margin:0}.band .tc{font-size:14px;flex-basis:100%}

/* guides */
.ghero{background:var(--hot);color:var(--ink);overflow:hidden}
.ghi{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:30px;align-items:center;padding-block:30px}
.ghero h1{font-size:clamp(29px,3.7vw,50px)}
.gintro{margin:10px 0 16px;font-size:18px;font-weight:700;line-height:1.35}
.strip{list-style:none;display:grid;grid-template-columns:repeat(4,auto);gap:8px;margin:0 0 16px;padding:0}
.strip li{padding:9px 11px;background:var(--ink);border-radius:9px;color:var(--mut);font-size:13px;line-height:1.2;font-weight:700}
.strip b{display:block;font:400 clamp(19px,1.8vw,24px)/1.15 var(--disp);color:var(--lamp);white-space:nowrap}
.fan{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.fan img{border-radius:10px;box-shadow:0 8px 0 rgba(28,6,24,.35)}
.fan img:nth-child(1){transform:rotate(-4deg) translateY(8px)}.fan img:nth-child(3){transform:rotate(4deg) translateY(8px)}
.gbody{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:44px;align-items:start}
.rail{order:2;position:sticky;top:80px;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
.prose{min-width:0}
.prose h2{font-size:clamp(23px,2.5vw,31px);margin:34px 0 12px;color:#fff}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 15px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px}.prose li{margin-bottom:7px}
.prose li::marker{color:var(--org);font-weight:800}
.tbl{overflow-x:auto;margin:0 0 16px}
table{width:100%;border-collapse:collapse;font-weight:700}
th{font:400 14px var(--disp);text-align:left;padding:11px 14px;background:var(--mag);color:var(--ink)}
td{padding:11px 14px;background:var(--plum2);border-bottom:1px solid var(--plum3)}
.band-in{font-size:18px}

/* service */
.shead{background:var(--hot);color:var(--ink);padding:34px 0}
.shead h1{font-size:clamp(32px,4.5vw,56px)}
.solo{max-width:780px}
.lead2{font-size:19px;font-weight:700}
.prose .notice{margin-bottom:24px}
.notice{padding:15px 18px;background:var(--plum2);box-shadow:inset 0 0 0 1px var(--org);border-radius:10px;font-size:15.5px;line-height:1.5;color:var(--txt)}
.notice strong{color:var(--lamp)}

/* footer */
.foot{margin-top:56px;padding:32px 0;background:#0e030c;border-top:2px solid var(--mag);font-size:15px}
.footnav{display:flex;flex-wrap:wrap;gap:8px 20px;margin:18px 0}
.footnav a{color:var(--txt);font-weight:700}
.fine{margin:0;color:var(--mut)}
.age{display:inline-block;padding:0 7px;margin-right:6px;border:2px solid var(--org);border-radius:6px;font-weight:800;color:var(--org)}

/* sticky */
.sticky{display:none}

@media (max-width:1000px){
  .mosaic{width:100%;grid-template-columns:repeat(4,minmax(0,1fr))}
  .panel{grid-column:1/-1;grid-row:auto;order:1}
  .t-gates{grid-column:1/3;grid-row:1/3;order:0}
  .t-aviator,.t-sugar-rush,.t-sweet-bonanza,.t-big-bass{order:0}
  .t-low{order:2}
  .t-cash{grid-column:1/-1;order:3;min-height:96px}
  .t-cash img{width:34%}
  .nav,.brand span{display:none}
  .menu{display:block}
  .top{gap:10px;height:58px}
  .top .btn-s{margin-left:auto}
  .doorgrid{grid-template-columns:1fr}
  .door{min-height:170px}
  .door img{width:128px}
  .queen{grid-template-columns:1fr}
  .queenart{max-width:210px;margin-inline:auto}
  .ghi{grid-template-columns:1fr;padding-block:18px;gap:12px}
  .fan{display:none}
  .strip{grid-template-columns:1fr 1fr}
  .gbody{grid-template-columns:1fr;gap:24px}
  .rail{order:0;position:static;grid-template-columns:repeat(6,1fr)}
  .sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;flex-direction:column;gap:3px;align-items:stretch;padding:7px 12px 6px;background:#0e030c;border-top:2px solid var(--mag)}
  .sticky .btn{min-height:44px;box-shadow:none;font-size:15px;padding:6px}
  .sticky span{text-align:center;font-size:13px;font-weight:700;color:var(--mut);line-height:1.2}
  body{padding-bottom:84px}
}
@media (max-width:640px){
  body{font-size:16.5px}
  main>section,main>.wrap{margin-top:40px}
  .wall{padding:8px 10px}
  :root{--gap:6px}
  .panel{padding:13px 14px;gap:7px}
  .panel h1{font-size:clamp(21px,6.3vw,26px)}
  .n1 b{font-size:clamp(46px,14.6vw,60px)}
  .n2 b{font-size:clamp(27px,8.4vw,34px)}
  .nums{gap:4px 12px}
  .nums p,.n1 small{font-size:14px}
  .sum{font-size:15px}
  .btn-xl{width:100%;min-height:58px;font-size:20px}
  .act{gap:7px}
  .machine{gap:5px;padding:7px}
  .machine{grid-template-columns:repeat(3,minmax(0,1fr))}
  .reel{padding:16px 2px}
  .reel b{font-size:8vw}
  .reel i{font-size:4.2vw}
  .brand img{width:84px}
  .top{gap:6px;padding-inline:10px}
  .top .btn-s{font-size:12px;padding:8px 9px}
  .menu summary{padding:8px 8px;font-size:14px}
  .reel .k{font-size:13px}
  .tiers{grid-template-columns:repeat(3,1fr)}
  .tilerow{grid-template-columns:repeat(3,1fr)}
  .prose .tilerow{grid-template-columns:repeat(4,1fr)}
  .rail{grid-template-columns:repeat(6,1fr)}
  .band{padding:18px}
  .band .btn{width:100%}
  .payline .btn{width:100%}
  .btn-dark{width:100%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
