:root{color-scheme:dark;font-family:system-ui,-apple-system,"PingFang SC",sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#05020a}
button{font:inherit;touch-action:manipulation}
.game{position:relative;width:min(100vw,56.25vh);height:min(100vh,177.78vw);margin:auto;overflow:hidden;background:#06020b;isolation:isolate;user-select:none}
.background,.frame{position:absolute;pointer-events:none}
.background{inset:0;width:100%;height:100%;z-index:0;object-fit:fill}
.frame{z-index:2;left:var(--frame-left);top:var(--frame-top);width:var(--frame-width);height:var(--frame-height);object-fit:contain;object-position:center;clip-path:inset(.7% 1.1% .7% 1.1% round 1.5%)}
.topbar{position:absolute;z-index:12;left:3%;right:3%;top:max(1.2%,env(safe-area-inset-top));height:5%;display:flex;align-items:center;justify-content:space-between;gap:2%}
.title{font-weight:900;font-size:clamp(16px,4vw,28px);color:#ffe998;text-shadow:0 2px 3px #000,0 0 12px #ff9d00;letter-spacing:.12em}
.text-button{border:1px solid #ffe07a;color:#fff4bd;background:linear-gradient(#7e3511,#2f0b08);box-shadow:inset 0 0 10px #ffbe4d88,0 2px 8px #000;border-radius:999px;font-weight:900;text-shadow:0 2px 2px #000}
.text-button:active{transform:translateY(1px) scale(.97)}
.text-button:disabled{filter:grayscale(.7);opacity:.55}
.image-button{position:relative;border:0!important;border-radius:10%!important;background-color:transparent!important;background-position:center!important;background-repeat:no-repeat!important;background-size:108% auto!important;box-shadow:none!important;color:transparent!important;text-shadow:none!important;overflow:visible!important}
.image-meter{border:0!important;background-color:transparent!important;background-position:center!important;background-repeat:no-repeat!important;background-size:contain!important;box-shadow:none!important;padding:8px 9px 3px}
.image-meter small{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.mini{height:100%;min-width:16%;font-size:clamp(11px,2.7vw,17px)}
.reels{position:absolute;z-index:4;left:var(--reel-left);top:var(--reel-top);width:var(--reel-width);height:var(--reel-height);display:grid;grid-template-columns:repeat(5,1fr);overflow:hidden;background:#09091088;contain:layout paint;transform:translateZ(0)}
.reel{position:relative;overflow:hidden;min-width:0;contain:strict;border-right:1px solid #e9ac3566;transform:translateZ(0);backface-visibility:hidden}
.reel:last-child{border-right:0}
.track{position:absolute;inset:0 0 auto;will-change:transform;transform:translate3d(0,0,0);backface-visibility:hidden;contain:paint}
.symbol{display:flex;align-items:center;justify-content:center;width:100%;overflow:hidden;transform:translateZ(0);backface-visibility:hidden}
.symbol img{display:block;width:92%;height:92%;object-fit:contain;transform:translateZ(0);backface-visibility:hidden;filter:none}
.symbol.winner img{animation:winner .55s ease-in-out infinite alternate;filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 16px #ffcc39)}
@keyframes winner{to{transform:scale(1.09);filter:brightness(1.35) drop-shadow(0 0 14px #fff) drop-shadow(0 0 24px #ffd139)}}
.free-hud{position:absolute;z-index:9;left:8%;right:8%;top:69%;height:4%;display:flex;align-items:center;justify-content:space-around;color:#fff3b0;background:#150b28cc;border:1px solid #f5c551;border-radius:999px;font-size:clamp(10px,2.6vw,16px)}
.meters{position:absolute;z-index:9;left:4%;right:4%;bottom:16.8%;height:6%;display:grid;grid-template-columns:1.25fr 1fr 1.25fr;gap:2%}
.meters>div{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;border:1px solid #e9bd62;border-radius:10px;background:linear-gradient(#241021dd,#09040cdd);box-shadow:inset 0 0 12px #e99b3144}
.meters small{font-size:clamp(9px,2.1vw,13px);color:#e7c788}.meters strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:clamp(12px,3.3vw,21px);color:#fff7c2}
.controls{position:absolute;z-index:10;left:6%;right:6%;bottom:7.4%;height:9.6%;display:grid;grid-template-columns:.74fr 1fr 1.65fr 1fr .74fr;gap:2%;align-items:center}
.control,.spin{position:relative;width:100%;height:82%;font-size:clamp(11px,2.7vw,17px)}
.spin{height:100%;font-size:clamp(15px,4vw,24px);background-size:112% auto!important;border-radius:50%!important;transform-origin:center center}
.control::after,.spin::after{position:absolute;left:50%;top:100%;transform:translate(-50%,2px);color:rgba(255,255,255,.92);font:700 clamp(8px,2vw,11px)/1.05 -apple-system,"PingFang SC",sans-serif;text-shadow:0 1px 3px #000;white-space:nowrap;pointer-events:none}
#minusButton::after{content:'减注'}
#autoButton::after{content:'自动'}
#spinButton::after{content:'开始'}
#turboButton::after{content:'极速'}
#plusButton::after{content:'加注'}
.control.active{filter:brightness(1.15) saturate(1.08)}
.collect,.help{position:absolute;z-index:10;bottom:1.5%;height:3.4%;min-width:20%;font-size:clamp(9px,2.2vw,14px)}
.collect{left:5%}.help{right:5%}
.message{position:absolute;z-index:8;left:8%;right:8%;bottom:23.8%;min-height:3.4%;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff0b2;font-size:clamp(10px,2.5vw,15px);text-shadow:0 2px 3px #000}
.effect-layer{position:absolute;z-index:20;inset:0;pointer-events:none;overflow:hidden;display:flex;align-items:center;justify-content:center}
.win-effect{max-width:76%;max-height:35%;object-fit:contain;animation:pop 2.2s ease both;filter:drop-shadow(0 0 24px #ffd34b)}
.transition-effect{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:transitionFlash 1s ease both}
@keyframes pop{0%{opacity:0;transform:scale(.2) rotate(-8deg)}20%,80%{opacity:1;transform:scale(1.05)}100%{opacity:0;transform:scale(1.25)}}
@keyframes transitionFlash{0%{opacity:0;transform:scale(.7)}35%,65%{opacity:1;transform:scale(1.08)}100%{opacity:0;transform:scale(1.25)}}
.loading{position:absolute;z-index:50;inset:0;background:#05020df2;display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;color:#ffe48f}
.loader{width:52px;height:52px;border:5px solid #6a351b;border-top-color:#ffe25d;border-radius:50%;animation:rotate .8s linear infinite}@keyframes rotate{to{transform:rotate(360deg)}}
.dialog{border:0;padding:0;background:transparent;color:#fff;width:min(92%,600px);max-height:82%;overflow:visible}.dialog::backdrop{background:#000b}
.dialog-card{position:relative;max-height:80vh;overflow:auto;padding:24px 18px;border:2px solid #d9a63b;border-radius:18px;background:linear-gradient(#28142a,#09050d);box-shadow:0 0 35px #ffb52f66;line-height:1.65}
.dialog-card h2{margin:0 0 12px;color:#ffe297}.dialog-card table{width:100%;border-collapse:collapse;font-size:12px}.dialog-card td,.dialog-card th{border:1px solid #785928;padding:5px;text-align:center}
.close{position:absolute;right:8px;top:6px;border:0;background:transparent;color:#fff;font-size:30px}
@media (prefers-reduced-motion:reduce){.symbol.winner img{animation:none}}