@font-face {
    font-family: "PandaDisplay";
    src: url("../font/lilita.woff2") format("woff2");
    font-display: swap;
}
.slot-band { --u: calc(min(100vw, 640px) / 100); }
.slot-stage {
    position: relative;
    width: 100%;
    height: calc(var(--u) * 104);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.slot-stage img { -webkit-user-drag: none; pointer-events: none; }
.stage-rays {
    position: absolute;
    left: 50%;
    top: calc(var(--u) * 55);
    width: calc(var(--u) * 150);
    height: calc(var(--u) * 150);
    margin: calc(var(--u) * -75) 0 0 calc(var(--u) * -75);
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, rgba(255, 214, 120, .16) 0deg 6deg, rgba(255, 214, 120, 0) 6deg 18deg);
    -webkit-mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .55) 32%, transparent 62%);
    mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .55) 32%, transparent 62%);
    animation: spinAround 40s linear infinite;
    pointer-events: none;
}
@keyframes spinAround { to { transform: rotate(360deg); } }

.slot-group { position: absolute; inset: 0; transform-origin: 50% 55%; }
.slot-group[hidden] { display: none; }
.slot-stage.is-pre .slot-group { opacity: 0; transform: scale(.5); }
.slot-stage.is-enter .slot-group { animation: groupIn .75s cubic-bezier(.2, 1.35, .4, 1) both; }
.slot-stage.is-exit .slot-group { animation: groupOut .45s cubic-bezier(.55, 0, .9, .45) forwards; pointer-events: none; }
@keyframes groupIn {
    0% { opacity: 0; transform: scale(.45) translateY(8%); }
    60% { opacity: 1; transform: scale(1.04); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes groupOut {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(.55); }
}

.gold-bevel,
.cab-body,
.cab-crest,
.cab-window,
.lever-mount {
    background: linear-gradient(150deg, #fff6c4 0%, #f6c948 16%, #b07812 36%, #ffe58e 54%, #c48914 74%, #fff0a8 92%, #d8a02a 100%);
}
.cab {
    position: absolute;
    left: calc(var(--u) * 10);
    top: calc(var(--u) * 12);
    width: calc(var(--u) * 76);
    height: calc(var(--u) * 88);
    cursor: pointer;
    outline: none;
}
.cab-body {
    position: absolute;
    inset: 0;
    border-radius: calc(var(--u) * 7);
    box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 5) rgba(0, 0, 0, .55), 0 0 calc(var(--u) * 7) rgba(255, 186, 60, .32);
}
.cab-body::before {
    content: "";
    position: absolute;
    inset: calc(var(--u) * 1.5);
    border-radius: calc(var(--u) * 5.6);
    background:
        radial-gradient(ellipse 80% 55% at 50% 30%, rgba(150, 70, 230, .55) 0, rgba(150, 70, 230, 0) 70%),
        linear-gradient(180deg, #3a0b72 0%, #24064c 55%, #16032f 100%);
    box-shadow: inset 0 0 calc(var(--u) * 3) rgba(0, 0, 0, .65);
}

.cab-bulbs { position: absolute; inset: 0; pointer-events: none; }
.cab-bulbs i {
    position: absolute;
    width: calc(var(--u) * 2.3);
    height: calc(var(--u) * 2.3);
    margin: calc(var(--u) * -1.15) 0 0 calc(var(--u) * -1.15);
    border-radius: 50%;
    background: radial-gradient(circle at 36% 34%, #fff 0, #fff5c0 22%, #ffbe1a 58%, #9a5800 100%);
    box-shadow: 0 0 calc(var(--u) * 1.3) rgba(255, 206, 70, .95);
    animation: bulbChase .9s linear infinite;
}
.cab-bulbs i:nth-child(3n + 2) { animation-delay: -.3s; }
.cab-bulbs i:nth-child(3n) { animation-delay: -.6s; }
.slot-stage.is-spinning .cab-bulbs i { animation-duration: .36s; }
.slot-stage.is-tease .cab-bulbs i { animation-duration: .18s; }
.slot-stage.is-hit .cab-bulbs i { animation: bulbFlash .28s steps(1) infinite; }
@keyframes bulbChase {
    0%, 32% { opacity: 1; filter: none; }
    33%, 100% { opacity: .3; filter: saturate(.4); }
}
@keyframes bulbFlash {
    0% { opacity: 1; }
    50% { opacity: .25; }
}

.cab-crest {
    position: absolute;
    left: calc(var(--u) * 11);
    top: calc(var(--u) * -8);
    width: calc(var(--u) * 54);
    height: calc(var(--u) * 13.5);
    border-radius: calc(var(--u) * 7) calc(var(--u) * 7) calc(var(--u) * 3) calc(var(--u) * 3);
    box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 2.4) rgba(0, 0, 0, .5), 0 0 calc(var(--u) * 4) rgba(255, 190, 60, .35);
    z-index: 2;
}
.cab-crest::before {
    content: "";
    position: absolute;
    inset: calc(var(--u) * 1);
    border-radius: calc(var(--u) * 6) calc(var(--u) * 6) calc(var(--u) * 2.2) calc(var(--u) * 2.2);
    background:
        radial-gradient(ellipse 70% 60% at 50% 20%, rgba(255, 120, 120, .5) 0, rgba(255, 120, 120, 0) 70%),
        linear-gradient(180deg, #d8182c 0%, #99061a 60%, #6a0010 100%);
    box-shadow: inset 0 0 calc(var(--u) * 1.6) rgba(0, 0, 0, .55);
}
.cab-title {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 calc(var(--u) * 3);
    white-space: nowrap;
    overflow: hidden;
    font-family: "PandaDisplay", "Arial Black", Arial, sans-serif;
    font-size: calc(var(--u) * 7.2);
    line-height: 1;
    letter-spacing: calc(var(--u) * .35);
    color: #ffe070;
    background: linear-gradient(180deg, #fffbe2 0%, #ffe271 42%, #f2a900 58%, #ffd650 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 calc(var(--u) * .4) 0 #4d0008) drop-shadow(0 0 calc(var(--u) * 1) rgba(255, 210, 80, .55));
}

.cab-window {
    position: absolute;
    left: calc(var(--u) * 6);
    top: calc(var(--u) * 8.5);
    width: calc(var(--u) * 64);
    height: calc(var(--u) * 45);
    border-radius: calc(var(--u) * 3.2);
    box-shadow: 0 calc(var(--u) * .8) calc(var(--u) * 1.6) rgba(0, 0, 0, .55);
}
.reels {
    position: absolute;
    inset: calc(var(--u) * 1.3);
    display: flex;
    gap: calc(var(--u) * .9);
    border-radius: calc(var(--u) * 2.2);
    overflow: hidden;
    background: linear-gradient(90deg, #8a5a00, #ffe28a 50%, #8a5a00);
}
.reel {
    position: relative;
    flex: 1;
    overflow: hidden;
    background: linear-gradient(90deg, #c9c6da 0%, #f4f2fb 18%, #fff 50%, #f4f2fb 82%, #c9c6da 100%);
}
.reel.is-tease { animation: reelTease .35s ease-in-out infinite alternate; }
@keyframes reelTease {
    from { box-shadow: inset 0 0 0 calc(var(--u) * .5) rgba(255, 214, 64, .5); }
    to { box-shadow: inset 0 0 0 calc(var(--u) * .9) #ffd640, inset 0 0 calc(var(--u) * 4) rgba(255, 200, 40, .75); }
}
.cell {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 33.34%;
    mix-blend-mode: multiply;
}
.cell .sym,
.cell .sym-blur {
    position: absolute;
    inset: 5% 7%;
    background: var(--img) center / contain no-repeat;
}
.cell .sym { opacity: calc(1 - var(--g, 0) * .9); }
.cell .sym-blur { background-image: var(--blur); opacity: var(--g, 0); }
.cell.is-land .sym { animation: symLand .32s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes symLand {
    0% { transform: scale(1); }
    45% { transform: scale(1.14); }
    100% { transform: scale(1); }
}
.cell.is-win .sym { animation: symWin .5s ease-in-out infinite alternate; }
.cell.is-win::after {
    content: "";
    position: absolute;
    inset: 4% 5%;
    border-radius: calc(var(--u) * 1.6);
    box-shadow: inset 0 0 0 calc(var(--u) * .55) #ffcf2e, inset 0 0 calc(var(--u) * 2.4) rgba(255, 196, 30, .8);
    animation: winFrame .5s ease-in-out infinite alternate;
}
@keyframes symWin {
    from { transform: scale(1); }
    to { transform: scale(1.14); }
}
@keyframes winFrame {
    from { opacity: .55; }
    to { opacity: 1; }
}
.reel-shade {
    position: absolute;
    inset: calc(var(--u) * 1.3);
    border-radius: calc(var(--u) * 2.2);
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(24, 0, 50, .7) 0%,
        rgba(24, 0, 50, .16) 20%,
        rgba(24, 0, 50, 0) 34%,
        rgba(24, 0, 50, 0) 66%,
        rgba(24, 0, 50, .16) 80%,
        rgba(24, 0, 50, .7) 100%);
}
.payline {
    position: absolute;
    left: calc(var(--u) * 1.3);
    right: calc(var(--u) * 1.3);
    top: 50%;
    height: calc(var(--u) * .45);
    margin-top: calc(var(--u) * -.225);
    background: linear-gradient(90deg, rgba(255, 50, 60, 0), rgba(255, 50, 60, .75) 6%, rgba(255, 50, 60, .75) 94%, rgba(255, 50, 60, 0));
    opacity: 0;
    pointer-events: none;
}
.slot-stage.is-hit .payline {
    background: linear-gradient(90deg, rgba(255, 220, 80, 0), #fff2a0 6%, #ffd23a 50%, #fff2a0 94%, rgba(255, 220, 80, 0));
    box-shadow: 0 0 calc(var(--u) * 2) #ffcc33;
    animation: paylineBlink .3s steps(1) infinite;
}
@keyframes paylineBlink {
    0% { opacity: 1; }
    50% { opacity: .35; }
}
.reel-glass {
    position: absolute;
    inset: calc(var(--u) * 1.3);
    border-radius: calc(var(--u) * 2.2);
    overflow: hidden;
    pointer-events: none;
    background:
        linear-gradient(168deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .1) 24%, rgba(255, 255, 255, 0) 36%),
        linear-gradient(0deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 18%);
}
.reel-glass::after {
    content: "";
    position: absolute;
    top: -20%;
    left: -40%;
    width: 22%;
    height: 140%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
    transform: skewX(-18deg);
    animation: glassSweep 3.6s ease-in-out 1.5s infinite;
}
@keyframes glassSweep {
    0% { left: -40%; }
    40%, 100% { left: 130%; }
}
.pay-arrow {
    position: absolute;
    top: calc(var(--u) * 28.5);
    width: 0;
    height: 0;
    border-top: calc(var(--u) * 2.2) solid transparent;
    border-bottom: calc(var(--u) * 2.2) solid transparent;
    filter: drop-shadow(0 0 calc(var(--u) * .8) rgba(255, 200, 50, .9));
}
.pay-l { left: calc(var(--u) * 2.2); border-left: calc(var(--u) * 3) solid #ffd84a; }
.pay-r { right: calc(var(--u) * 2.2); border-right: calc(var(--u) * 3) solid #ffd84a; }
.slot-stage.is-hit .pay-arrow { animation: paylineBlink .3s steps(1) infinite; }

.cab-meter {
    position: absolute;
    left: calc(var(--u) * 11);
    top: calc(var(--u) * 56.5);
    width: calc(var(--u) * 54);
    height: calc(var(--u) * 10.5);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 calc(var(--u) * 3);
    border: calc(var(--u) * .5) solid #e8b43a;
    border-radius: calc(var(--u) * 2.6);
    background: linear-gradient(180deg, #2e0404 0%, #120000 100%);
    box-shadow: inset 0 0 calc(var(--u) * 1.8) rgba(0, 0, 0, .9), 0 0 calc(var(--u) * 1.4) rgba(255, 190, 60, .35);
    font-family: "PandaDisplay", "Arial Black", Arial, sans-serif;
}
.meter-label { font-size: calc(var(--u) * 4.2); letter-spacing: calc(var(--u) * .3); color: #ffcf4a; }
.meter-val {
    font-size: calc(var(--u) * 6.6);
    line-height: 1;
    color: #ffe066;
    text-shadow: 0 0 calc(var(--u) * 1.4) rgba(255, 176, 0, .9);
    transform-origin: 100% 50%;
}
.slot-stage.is-hit .meter-val { animation: meterPop .5s ease-in-out infinite alternate; color: #fff6b0; }
@keyframes meterPop {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
}

.cab-spin {
    position: absolute;
    left: calc(var(--u) * 20);
    top: calc(var(--u) * 70.5);
    width: calc(var(--u) * 36);
    height: calc(var(--u) * 12);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: calc(var(--u) * .6) solid #ffd54a;
    border-radius: calc(var(--u) * 6);
    background: linear-gradient(180deg, #ff7564 0%, #e3161f 46%, #9a0008 100%);
    box-shadow: 0 calc(var(--u) * 1) 0 #650006, 0 calc(var(--u) * 1.8) calc(var(--u) * 2.6) rgba(0, 0, 0, .5), inset 0 calc(var(--u) * .6) 0 rgba(255, 255, 255, .45);
    animation: spinPulse 1.3s ease-in-out infinite;
    transition: transform .12s, filter .12s;
}
.cab-spin span {
    font-family: "PandaDisplay", "Arial Black", Arial, sans-serif;
    font-size: calc(var(--u) * 6.4);
    letter-spacing: calc(var(--u) * .5);
    color: #fff;
    text-shadow: 0 calc(var(--u) * .45) 0 #7a0008;
    white-space: nowrap;
}
.cab-spin::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 36%;
    height: 100%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .6), rgba(255, 255, 255, 0));
    transform: skewX(-20deg);
    animation: sweep 2.4s ease-in-out 1s infinite;
}
.slot-stage.is-spinning .cab-spin,
.slot-stage.is-hit .cab-spin {
    animation: none;
    transform: translateY(calc(var(--u) * .7)) scale(.97);
    filter: brightness(.75) saturate(.8);
    box-shadow: 0 calc(var(--u) * .3) 0 #650006, inset 0 calc(var(--u) * .4) calc(var(--u) * 1) rgba(0, 0, 0, .35);
}
@keyframes spinPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}
@keyframes sweep {
    0% { left: -60%; }
    55%, 100% { left: 130%; }
}

.cab-lever {
    position: absolute;
    left: calc(var(--u) * 75);
    top: calc(var(--u) * 16);
    width: calc(var(--u) * 8);
    height: calc(var(--u) * 38);
    z-index: 1;
}
.lever-mount {
    position: absolute;
    left: calc(var(--u) * -.5);
    bottom: 0;
    width: calc(var(--u) * 5.4);
    height: calc(var(--u) * 10);
    border-radius: calc(var(--u) * 1.6);
    box-shadow: 0 calc(var(--u) * .6) calc(var(--u) * 1.2) rgba(0, 0, 0, .5);
}
.lever-mount::before {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(var(--u) * 1.4);
    width: calc(var(--u) * 2.6);
    height: calc(var(--u) * 2.6);
    margin-left: calc(var(--u) * -1.3);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, #2a1600 0, #6b4300 70%, #a47000 100%);
    box-shadow: inset 0 calc(var(--u) * .2) calc(var(--u) * .5) rgba(0, 0, 0, .75);
}
.lever-arm {
    position: absolute;
    left: 0;
    bottom: calc(var(--u) * 5);
    width: calc(var(--u) * 8);
    height: calc(var(--u) * 33);
    transform-origin: 50% 100%;
    animation: leverHint 3s ease-in-out 1.5s infinite;
}
.lever-rod {
    position: absolute;
    left: calc(var(--u) * 1.8);
    bottom: 0;
    width: calc(var(--u) * 1.8);
    height: calc(var(--u) * 27);
    border-radius: calc(var(--u) * 1);
    background: linear-gradient(90deg, #7f7f8e, #ffffff 42%, #bdbdcb 62%, #6a6a78);
    transform-origin: 50% 100%;
}
.lever-ball {
    position: absolute;
    left: calc(var(--u) * -1.8);
    top: 0;
    width: calc(var(--u) * 9);
    height: calc(var(--u) * 9);
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #fff 0, #ff9a9a 10%, #e3121e 46%, #7a0008 100%);
    box-shadow: 0 calc(var(--u) * .8) calc(var(--u) * 1.6) rgba(0, 0, 0, .5);
}
.cab-lever.is-pull .lever-arm { animation: none; }
.cab-lever.is-pull .lever-rod { animation: rodPull .8s cubic-bezier(.45, 0, .3, 1); }
.cab-lever.is-pull .lever-ball { animation: ballPull .8s cubic-bezier(.45, 0, .3, 1); }
@keyframes rodPull {
    0%, 100% { transform: scaleY(1); }
    45%, 60% { transform: scaleY(-.72); }
}
@keyframes ballPull {
    0%, 100% { transform: translateY(0) scale(1); }
    45%, 60% { transform: translateY(calc(var(--u) * 46.5)) scale(1.18); }
}
@keyframes leverHint {
    0%, 76%, 100% { transform: rotate(0); }
    82% { transform: rotate(-8deg); }
    89% { transform: rotate(6deg); }
    95% { transform: rotate(-2deg); }
}

.slot-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 9; pointer-events: none; }

.win { position: absolute; inset: 0; z-index: 8; cursor: pointer; }
.win[hidden] { display: none; }
.win-dim {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 52% 48% at 50% 52%, rgba(12, 0, 30, .62) 0, rgba(12, 0, 30, .38) 55%, rgba(12, 0, 30, 0) 100%);
    animation: fadeIn .5s ease-out both;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.win-rays-wrap {
    position: absolute;
    left: calc(var(--u) * 4);
    top: calc(var(--u) * 9);
    width: calc(var(--u) * 92);
    height: calc(var(--u) * 92);
    opacity: 0;
}
.win-rays { display: block; width: 100%; height: 100%; mix-blend-mode: screen; animation: spinAround 14s linear infinite; }
.win.is-in .win-rays-wrap { animation: raysIn 1.2s ease-out both; }
@keyframes raysIn {
    0% { opacity: 0; transform: scale(.4); }
    30% { opacity: 1; transform: scale(1.2); }
    100% { opacity: .85; transform: scale(1); }
}
.win-flash {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: screen;
    background: radial-gradient(circle at 50% 54%, rgba(255, 252, 230, .98) 0, rgba(255, 228, 140, .62) 20%, rgba(255, 200, 90, 0) 50%);
}
.win.is-in .win-flash { animation: winFlash .95s ease-out; }
@keyframes winFlash {
    0% { opacity: 0; }
    16% { opacity: 1; }
    100% { opacity: 0; }
}
.win-coins-wrap { position: absolute; left: calc(var(--u) * 3); top: calc(var(--u) * 38); width: calc(var(--u) * 94); opacity: 0; }
.win-coins { display: block; width: 100%; height: auto; animation: coinsFloat 2.6s ease-in-out 1.1s infinite; }
.win.is-in .win-coins-wrap { animation: coinsIn .9s cubic-bezier(.15, 1.25, .4, 1) .1s both; }
@keyframes coinsIn {
    0% { opacity: 0; transform: scale(.25); }
    60% { opacity: 1; transform: scale(1.1); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes coinsFloat { 50% { transform: translateY(-3%) scale(1.02); } }
.win-box {
    position: absolute;
    left: calc(var(--u) * 18);
    top: calc(var(--u) * 35.7);
    width: calc(var(--u) * 64);
    height: calc(var(--u) * 39.5);
    opacity: 0;
}
.win.is-in .win-box { animation: winPop .72s cubic-bezier(.18, 1.5, .4, 1) .05s both; }
@keyframes winPop {
    0% { opacity: 0; transform: scale(.3); }
    55% { opacity: 1; transform: scale(1.12); }
    100% { opacity: 1; transform: scale(1); }
}
.win-inner { position: absolute; inset: 0; animation: winBreath 1.8s ease-in-out .9s infinite; }
@keyframes winBreath { 50% { transform: scale(1.035); } }
.win-crown { position: absolute; left: 30.7%; top: -31%; width: 38.6%; height: auto; z-index: 1; transform-origin: 50% 100%; }
.win.is-in .win-crown { animation: crownDrop .6s cubic-bezier(.2, 1.5, .4, 1) .25s both, crownSwing 2.4s ease-in-out 1.1s infinite; }
@keyframes crownDrop {
    0% { opacity: 0; transform: translateY(-70%); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes crownSwing {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}
.win-base { position: absolute; left: 0; top: 0; width: 100%; height: auto; z-index: 2; }
.win-shine {
    position: absolute;
    left: 28%;
    top: 4%;
    width: 44%;
    aspect-ratio: 1 / 1;
    z-index: 3;
    border-radius: 50%;
    mix-blend-mode: screen;
    background: radial-gradient(circle, rgba(255, 255, 255, .8) 0, rgba(170, 255, 255, .28) 38%, rgba(255, 255, 255, 0) 68%);
    animation: shinePulse 1.6s ease-in-out infinite;
}
@keyframes shinePulse {
    0%, 100% { opacity: .45; transform: scale(.9); }
    50% { opacity: 1; transform: scale(1.08); }
}
.win-super { position: absolute; left: 4%; top: 17%; width: 92%; height: auto; z-index: 4; }
.win-word { position: absolute; left: 22.5%; top: 53.5%; width: 55%; height: auto; z-index: 5; }
.win.is-in .win-super { animation: textPop .5s cubic-bezier(.2, 1.6, .4, 1) .14s both; }
.win.is-in .win-word { animation: textPop .5s cubic-bezier(.2, 1.6, .4, 1) .26s both; }
@keyframes textPop {
    0% { opacity: 0; transform: scale(1.7); }
    100% { opacity: 1; transform: scale(1); }
}
.win-num { position: absolute; left: 19%; top: 91.5%; width: 62%; z-index: 6; }
.win.is-in .win-num { animation: numUp .45s ease-out .38s both; }
@keyframes numUp {
    0% { opacity: 0; transform: translateY(40%); }
    100% { opacity: 1; transform: translateY(0); }
}
.win-num-bg { display: block; width: 100%; height: auto; }
.win-num-val {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-family: "PandaDisplay", "Arial Black", Arial, sans-serif;
    font-size: calc(var(--u) * 5.4);
    line-height: 1;
    color: #ffe874;
    -webkit-text-stroke: calc(var(--u) * .5) #6a1a00;
    paint-order: stroke fill;
    text-shadow: 0 0 calc(var(--u) * 1.2) rgba(255, 200, 40, .8);
}
.win-spark {
    position: absolute;
    width: calc(var(--u) * 7);
    height: calc(var(--u) * 7);
    margin: calc(var(--u) * -3.5) 0 0 calc(var(--u) * -3.5);
    opacity: 0;
    background:
        radial-gradient(circle, #fff 0, #fff 9%, rgba(255, 255, 255, 0) 16%),
        linear-gradient(0deg, rgba(255, 250, 220, 0) 46%, rgba(255, 250, 220, .95) 50%, rgba(255, 250, 220, 0) 54%),
        linear-gradient(90deg, rgba(255, 250, 220, 0) 46%, rgba(255, 250, 220, .95) 50%, rgba(255, 250, 220, 0) 54%);
    -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%);
    mask: radial-gradient(circle, #000 18%, transparent 68%);
    filter: drop-shadow(0 0 calc(var(--u) * .8) #ffe28a);
}
.win.is-in .win-spark { animation: spark 1.8s ease-in-out infinite; }
@keyframes spark {
    0%, 100% { opacity: 0; transform: scale(.2) rotate(0); }
    45% { opacity: 1; transform: scale(1.25) rotate(45deg); }
}
.win-box-custom { left: calc(var(--u) * 6); top: calc(var(--u) * 6); width: calc(var(--u) * 88); height: calc(var(--u) * 92); display: flex; align-items: center; justify-content: center; }
.win-custom { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }

.slot-go {
    position: relative;
    display: block;
    width: min(280px, 66%);
    margin: 0 auto;
    padding: 13px 18px 12px;
    overflow: hidden;
    border: 3px solid #ffe27a;
    border-radius: 999px;
    font-family: "PandaDisplay", "Arial Black", Arial, sans-serif;
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: .04em;
    color: #fff;
    text-shadow: 0 2px 0 #0b5a14;
    background: linear-gradient(180deg, #8bff5a 0%, #2dc73a 48%, #129a24 100%);
    box-shadow: 0 5px 0 #0b6a17, 0 10px 22px rgba(0, 0, 0, .4), inset 0 2px 0 rgba(255, 255, 255, .55);
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
}
.slot-go::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 36%;
    height: 100%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .65), rgba(255, 255, 255, 0));
    transform: skewX(-20deg);
    animation: sweep 2.2s ease-in-out 1s infinite;
}
.slot-go.is-show { visibility: visible; animation: goIn .45s cubic-bezier(.2, 1.5, .4, 1) forwards, spinPulse 1.4s ease-in-out .7s infinite; }
@keyframes goIn {
    0% { opacity: 0; transform: translateY(20px) scale(.7); }
    100% { opacity: 1; transform: none; }
}