/* ===== Explore ===== */
.xs-rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:4px calc(var(--pad) * -1) 6px;padding:2px var(--pad) 8px;scroll-padding:0 var(--pad);scrollbar-width:none}
.xs-rail::-webkit-scrollbar{display:none}
.xs-card{position:relative;flex:none;width:78%;max-width:330px;height:184px;scroll-snap-align:start;border-radius:24px;overflow:hidden;text-align:left;isolation:isolate;
  background:radial-gradient(90% 120% at 100% 0%,color-mix(in srgb,var(--c) 65%,transparent),transparent 65%),linear-gradient(160deg,color-mix(in srgb,var(--c) 30%,#14121f),#0d0c15 75%);
  border:1px solid color-mix(in srgb,var(--c) 30%,rgba(255,255,255,.06));box-shadow:0 18px 34px -22px color-mix(in srgb,var(--c) 80%,#000)}
.xs-card:active{transform:scale(.98)}
.xs-tx{position:absolute;left:16px;right:16px;bottom:14px;display:flex;flex-direction:column;gap:2px;z-index:2}
.xs-tx small{font-size:10.5px;font-weight:800;letter-spacing:.12em;color:color-mix(in srgb,var(--c) 45%,#fff)}
.xs-tx b{font-size:22px;font-weight:850;letter-spacing:-.02em;color:#fff}
.xs-tx span{font-size:13px;color:rgba(255,255,255,.72);max-width:85%}
.xs-card:after{content:"";position:absolute;inset:auto 0 0;height:60%;background:linear-gradient(180deg,transparent,rgba(8,8,13,.75));z-index:1}
.xs-art{position:absolute;inset:0;z-index:0}
.xs-fan{position:absolute;right:14px;top:14px;width:150px;height:120px}
.xs-fan img{position:absolute;right:calc(var(--k) * 34px);top:calc(var(--k) * 6px);width:72px;border-radius:6px;box-shadow:0 10px 20px -8px #000;transform:rotate(calc(8deg - var(--k) * 8deg));transform-origin:50% 100%}
.xs-glyph{position:absolute;right:20px;top:20px;width:64px;height:64px;color:rgba(255,255,255,.5)}
.xs-glyph svg{width:100%;height:100%}
.xs-cz{position:absolute;right:-6px;top:4px;width:170px;height:120px;transform:scale(.9);transform-origin:100% 0}
.xs-cz>span{position:absolute}
.xs-cz .pa1{right:84px;top:18px;width:62px;transform:rotate(-12deg)}.xs-cz .pa2{right:22px;top:4px;width:78px;transform:rotate(8deg)}.xs-cz .pa3{right:60px;top:66px;width:48px}
.xs-cz svg{width:100%;height:auto;display:block}
.xs-vi{position:absolute;right:18px;top:6px;font-size:92px;line-height:1;font-weight:900;font-style:italic;letter-spacing:-.04em;background:linear-gradient(170deg,#ffd1e0,#ff5e8a 45%,#8b3dff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 8px 20px rgba(255,94,138,.45))}
.xs-kit{position:absolute;right:16px;top:16px;width:140px;height:80px;border-radius:12px;padding:12px 12px;display:flex;flex-direction:column;justify-content:center;background:radial-gradient(80% 100% at 0 0,rgba(143,130,236,.75),transparent 70%),radial-gradient(70% 90% at 100% 100%,rgba(244,114,182,.6),transparent 70%),#0b0a14;border:1px solid rgba(255,255,255,.14);box-shadow:0 12px 26px -12px #000;transform:rotate(4deg)}
.xs-kit i{font-style:normal;font-size:7.5px;font-weight:800;letter-spacing:.2em;color:#d8ceff}
.xs-kit b{font-size:24px;font-weight:850;color:#fff;font-variant-numeric:tabular-nums;line-height:1.1}
.xs-kit em{display:block;height:3px;width:60%;margin-top:6px;border-radius:3px;background:linear-gradient(90deg,#8f82ec,#f472b6)}
.xs-sp{position:absolute;right:16px;top:18px;display:flex}
.xs-sp i{width:52px;height:52px;border-radius:17px;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:16px;color:#fff;box-shadow:0 0 0 3px #11101b}
.xs-sp i+i{margin-left:-12px}
.xs-sp i:nth-child(1){background:linear-gradient(145deg,#ff5e8a,#8b3dff);transform:rotate(-6deg)}.xs-sp i:nth-child(2){background:linear-gradient(145deg,#fbbf24,#d97706);transform:translateY(10px)}.xs-sp i:nth-child(3){background:linear-gradient(145deg,#8f82ec,#4c3fb3);transform:rotate(6deg)}

/* casino games: two-row swipeable grid */
.xg{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:76%;gap:8px 10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--pad) * -1);padding:0 var(--pad) 4px;scroll-padding:0 var(--pad);scrollbar-width:none}
.xg::-webkit-scrollbar{display:none}
.xg-i{display:flex;align-items:center;gap:12px;padding:8px 10px 8px 8px;border-radius:18px;background:var(--cell);scroll-snap-align:start;text-align:left;min-width:0}
.xg-i:active{background:var(--cell2)}
.xg-i .lg-tile{flex:none}
.xg-t{display:flex;flex-direction:column;min-width:0}
.xg-t b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xg-t small{font-size:12px;color:var(--m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* make it yours tiles */
.xt-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.xt{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px;border-radius:20px;text-align:left;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 14%,var(--cell)),var(--cell) 70%);border:1px solid color-mix(in srgb,var(--c) 18%,transparent);min-height:128px}
.xt:active{transform:scale(.98)}
.xt .isq{margin-bottom:auto}
.xt b{font-size:15.5px;margin-top:10px}
.xt small{font-size:12.5px;line-height:1.3;color:var(--m)}
