#lotoStage{height:320px;min-height:320px;isolation:isolate;background:radial-gradient(ellipse at 50% 32%,#fff7df 0,#f8dfad 54%,#dfb765 100%);border-color:#cfaa5e;color:#432d19;box-shadow:inset 0 0 35px #bd8d2822}
#lotoStage::before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-conic-gradient(from -30deg at 50% -20%,#fff9d640 0deg 14deg,transparent 14deg 32deg);opacity:.6}
#lotoStage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:35%;background:linear-gradient(transparent,#b78a4544);z-index:-1}
#lotoStage .bubble{left:12px;right:12px;top:10px;min-height:48px;max-height:76px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:13px;line-height:1.45;padding:8px 12px;border:1px solid #dec28e;box-shadow:0 3px 8px #5c361515;background:#fffdf5;color:#432d19;overflow:hidden}
.loto-actor{position:absolute;left:1%;bottom:55px;width:clamp(126px,43%,166px);height:194px;z-index:3;transform-origin:50% 95%;overflow:visible}
#lotoStage .lxu{position:static;display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 4px 3px #432d1930)}
#lotoStage .lcage{right:0;bottom:47px;width:clamp(160px,57%,210px);height:190px;overflow:visible}
.lotto-cage-svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 4px 3px #432d1938)}
.lotto-drum,.lotto-crank{transform-box:fill-box;transform-origin:center;will-change:transform}.lotto-balls circle{transform-box:fill-box;transform-origin:center}
#lotoStage[data-phase=spinning] .lotto-drum{animation:lotto-drum-turn 1.2s linear infinite}#lotoStage[data-phase=spinning] .lotto-crank{animation:lotto-crank-turn .7s linear infinite}
#lotoStage[data-phase=spinning] .lotto-balls circle{animation:lotto-bounce .35s ease-in-out infinite alternate}#lotoStage[data-phase=spinning] .lotto-balls circle:nth-child(2n){animation-delay:-.17s;animation-direction:alternate-reverse}
#lotoStage[data-phase=spinning] .loto-actor{animation:lotto-cranking .7s ease-in-out infinite}
#lotoStage[data-phase=reveal] .loto-actor{animation:lotto-present .45s ease-out both}#lotoStage[data-phase=done] .loto-actor{animation:lotto-finish .5s ease-out both}
#lotoStage .lflyball{right:calc(9% + 51px);bottom:106px;width:42px;height:42px;font-size:18px;z-index:5;display:none}
#lotoStage .lflyball.on{display:grid;animation:lotto-ball-flight .6s cubic-bezier(.2,.7,.3,1) both}
.loto-slots{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);display:flex;gap:7px;z-index:4;padding:5px 10px;background:#fffdf5c9;border:1px solid #debc79;border-radius:24px}
.loto-slot{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:#ead5a9;color:#92784c;font-size:17px;font-weight:800;border:1px dashed #b89a62;font-variant-numeric:tabular-nums}
.loto-slot.filled{color:#4b3218;background:radial-gradient(circle at 30% 25%,#fff4b5,#edb444);border:1px solid #ca9027;box-shadow:0 2px 3px #5d3a1825;animation:lotto-slot-pop .28s ease-out}.loto-slot.power.filled{background:radial-gradient(circle at 30% 25%,#ffa78d,#c72e2a);color:white;border-color:#ad2827}
.loto-progress{position:absolute;bottom:47px;left:12px;right:12px;text-align:center;font-size:10px;line-height:1.25;font-weight:700;color:#69461d;z-index:4;pointer-events:none}
@keyframes lotto-drum-turn{to{transform:rotate(360deg)}}@keyframes lotto-crank-turn{to{transform:rotate(360deg)}}@keyframes lotto-bounce{to{transform:translate(4px,-11px)}}@keyframes lotto-cranking{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(2deg)}}@keyframes lotto-present{0%{transform:rotate(1deg) scale(.98)}65%{transform:rotate(-2deg) scale(1.025)}100%{transform:rotate(0) scale(1)}}@keyframes lotto-finish{0%,100%{transform:translateY(0)}45%{transform:translateY(-8px)}}
@keyframes lotto-ball-flight{0%{transform:translate(0,0) scale(.5);opacity:0}25%{opacity:1}65%{transform:translate(-45px,-47px) scale(1.15);opacity:1}100%{transform:translate(-96px,-25px) scale(1);opacity:0}}@keyframes lotto-slot-pop{0%{transform:scale(.6)}65%{transform:scale(1.13)}100%{transform:scale(1)}}
@media(min-width:600px){.loto-actor{left:18%;width:170px;height:194px}#lotoStage .lcage{right:16%;width:210px}}
@media(max-width:360px){#lotoStage{height:310px;min-height:310px}.loto-actor{left:0;width:43%;height:184px}#lotoStage .lcage{right:0;width:60%;height:180px}#lotoStage .bubble{font-size:12px}.loto-slots{gap:5px;padding:4px 8px}.loto-slot{width:27px;height:27px}.loto-progress{font-size:9px}}
@media(prefers-reduced-motion:reduce){#lotoStage *,#lotoStage *::before{animation:none!important;transition:none!important}}.rm #lotoStage *{animation:none!important;transition:none!important}
.lotto-detail{margin-top:10px}.lotto-detail>summary{cursor:pointer;font-weight:800;font-size:13px;line-height:1.5;padding:7px 0;color:var(--ink)}
.lotto-tip{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:11px;margin:8px 0}.lotto-tip>b{font-size:12px}.lotto-tip-balls{display:flex;gap:5px;margin:10px 0;flex-wrap:wrap}.lotto-tip-balls .ball{width:34px;height:34px;font-size:14px;animation:none;flex:none}.lotto-tip-actions{display:flex;gap:7px;flex-wrap:wrap}.lotto-tip-actions .btn{min-height:38px;padding:7px 10px;font-size:12px;flex:1}.lotto-tip-actions .btn:last-child{background:var(--soft);color:var(--ink)}#lottoTipBody>.note{font-size:12px;line-height:1.5;margin:8px 0}#lottoAdvice{margin-top:16px}#lottoAdvice>summary{padding:0}