:root{font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:#ffe5a5;background:#050b1d;touch-action:manipulation}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
button,input{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{opacity:.45}
.game{position:fixed;inset:0;overflow:hidden;background:#060d22 url('./assets/00_arcade_portrait.webp') center top/100% 100% no-repeat;display:flex;flex-direction:column;padding:max(5dvh,env(safe-area-inset-top)) max(env(safe-area-inset-right),7px) max(env(safe-area-inset-bottom),5px) max(env(safe-area-inset-left),7px);user-select:none;-webkit-user-select:none}
.game:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0,rgba(238,192,83,.08) 48%,transparent 100%);pointer-events:none}
.top{height:clamp(46px,8dvh,65px);min-height:46px;display:flex;align-items:center;gap:8px;z-index:4;padding:3px 5px;background:linear-gradient(90deg,#09152f,#182f56 48%,#09142f);border:1px solid #ca9144;border-radius:10px;box-shadow:0 3px 12px #0009}
.back{text-decoration:none;color:#ffe3a5;font-size:38px;line-height:1;width:36px;text-align:center}.identity{display:flex;align-items:center;gap:5px;min-width:0;flex:1}
.portrait{position:relative;width:39px;height:39px;flex:none;border-radius:8px;overflow:hidden;background:#122645}.portrait img{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);object-fit:cover;border-radius:6px}.portrait:after{content:"";position:absolute;inset:0;background:url('./assets/03_player_ui_01_avatar_frame.webp') center/100% 100% no-repeat;pointer-events:none}
.identity strong,.wallet strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:29vw;font-size:clamp(12px,3.5vw,17px);color:#fff0bf}
.identity small,.wallet small{display:block;font-size:clamp(9px,2.5vw,11px);white-space:nowrap;color:#c1d5ec}.wallet{min-width:80px;text-align:right}.wallet strong{max-width:30vw;color:#ffe064;font-variant-numeric:tabular-nums}
.identity small{display:flex;align-items:center;gap:3px;min-width:0}.identity #vip{display:inline-flex;align-items:center;justify-content:center;flex:none;width:clamp(40px,10vw,48px);height:21px;padding-left:11px;background:url('./assets/03_player_ui_03_vip_badge.webp') center/100% 100% no-repeat;color:#fff1c8;font-weight:900;font-size:9px;text-shadow:0 1px 3px #000}.identity #playerId{min-width:0;overflow:hidden;text-overflow:ellipsis}
.body{flex:1;min-height:0;display:flex;flex-direction:column;gap:5px;padding-top:3px;padding-bottom:9dvh}
.machine{position:relative;flex:7;min-height:0;border:3px solid #b77828;border-radius:18px;overflow:hidden;background:radial-gradient(ellipse at 50% 37%,#04112c77 0,#04112cbb 80%),url('./assets/00_arcade_portrait.webp') center top/100% 100% no-repeat;box-shadow:inset 0 0 0 3px #eac779,inset 0 0 36px #000a,0 5px 20px #000a}
.machine:before{content:"";position:absolute;inset:1%;border-radius:13px;border:1px solid #8dc8ff88;pointer-events:none}
.machine:after{content:"";position:absolute;z-index:6;inset:6px;border:1px solid #ffda7270;border-radius:12px;box-shadow:inset 0 0 11px #47a1e269;pointer-events:none}
.machine-title{position:absolute;top:0;left:20%;right:20%;z-index:3;text-align:center;padding:2px;font-size:clamp(15px,4vw,22px);font-weight:900;letter-spacing:.2em;color:#ffe49b;text-shadow:0 2px 8px #000,0 0 15px #ff9c16}
.machine-title span{color:#fff4d5}.machine-top{position:absolute;z-index:3;top:3%;left:9%;right:9%;height:20%;text-align:center}
.drop-caption{position:absolute;top:0;left:0;right:0;font-size:clamp(10px,2vw,14px);text-shadow:0 1px 4px #000}
.drop-marker{position:absolute;left:50%;top:42%;width:24px;height:24px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,#fff9ca,#ffaa19 45%,#7c2909 80%);box-shadow:0 0 18px #fff68b;z-index:3;pointer-events:none}
.entry{position:absolute;top:38%;left:50%;width:22%;max-height:55%;object-fit:contain;transform:translateX(-50%);pointer-events:none}
.aim-rail{position:absolute;top:67%;left:50%;width:25%;max-height:30%;object-fit:contain;transform:translateX(-50%);pointer-events:none;filter:drop-shadow(0 2px 5px #ffba45)}
.machine-ornament{position:absolute;z-index:2;width:12%;max-width:72px;max-height:12%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 0 10px #eab75099)}.ornament-gem{left:2%;top:11%}.ornament-chest{right:2%;top:11%}
.bed{position:absolute;left:13%;right:13%;top:18%;bottom:12%;transform-origin:50% 50%}
.bed img{position:absolute;display:block;object-fit:fill;pointer-events:none}.upper{left:6%;width:88%;height:29%;top:0}
.coin-bed{left:3%;width:94%;height:68%;top:21%}.pusher{left:7%;width:86%;height:39%;top:30%;transform:translateY(0);will-change:transform}
#coinCanvas{position:absolute;inset:18% 5% 10%;width:90%;height:72%;z-index:2}
.front{left:3%;width:94%;height:28%;bottom:2%;z-index:3;opacity:.83}.left-loss{left:-2%;width:25%;height:25%;bottom:0;z-index:4}.right-loss{right:-2%;width:25%;height:25%;bottom:0;z-index:4}.collect{left:30%;width:40%;height:23%;bottom:-2%;z-index:4}
.side{position:absolute;z-index:4;top:25%;width:13%;display:grid;gap:3px;text-align:center;padding:5px 2px;border:1px solid #e7b55a9c;border-radius:10px;background:linear-gradient(160deg,#103869e0,#06142dcf 70%,#4b170ac4);box-shadow:inset 0 0 8px #5596ee70,0 3px 12px #000a;font-size:clamp(9px,1.7vw,12px);color:#fbdfab;text-shadow:0 1px 4px #000}
.side-symbol{display:block;width:90%;height:clamp(22px,5dvh,40px);margin:auto;object-fit:contain;pointer-events:none}
.side b{display:block;padding:2px 0;border:1px solid #ca8b40;border-radius:5px;background:#061633d9;font-size:clamp(10px,2.4vw,15px);overflow:hidden;text-overflow:ellipsis}
.left-side{left:1%}.right-side{right:1%}.energy{height:9px;border:1px solid #ebbd62;border-radius:8px;background:#10132d}.energy i{height:100%;display:block;width:0;background:linear-gradient(90deg,#6ac5ff,#fff2a4);border-radius:7px}
.side button{color:#ffe58e;border:1px solid #ca8b40;border-radius:5px;background:#061633d9;font-weight:bold;font-size:clamp(9px,2vw,14px);min-height:32px;padding:2px;overflow:hidden}.side button.ready{box-shadow:0 0 15px #ffdb61;animation:wheel-pulse 1s infinite alternate}.side button.spinning{animation:wheel-spin .9s ease-out}@keyframes wheel-pulse{to{filter:brightness(1.6)}}@keyframes wheel-spin{to{transform:rotate(720deg)}}
.scene-plaque{position:absolute;z-index:4;top:58%;width:13%;height:17%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2px;border:1px solid #88baff9c;border-radius:8px;background:linear-gradient(#102d53e8,#24101fd9);box-shadow:inset 0 0 8px #4aa9fa8c,0 0 9px #0008;pointer-events:none}.scene-left{left:1%}.scene-right{right:1%}.scene-plaque img{display:block;max-width:100%;height:72%;object-fit:contain}.scene-plaque span{text-align:center;font-size:clamp(8px,1.8vw,11px);font-weight:bold;white-space:nowrap;text-shadow:0 1px 3px #000}
.reward-shelf{position:absolute;z-index:5;bottom:.8%;left:4%;right:4%;height:9%;display:flex;align-items:center;justify-content:space-around;gap:2px;padding:2px 5px;border:1px solid #e9a44c;border-radius:11px;background:linear-gradient(180deg,#164574e8,#081637ef 58%,#4e1710e8);box-shadow:inset 0 1px 7px #ffe39c99,0 0 14px #f4a32955}.reward-shelf>img{height:100%;min-width:0;max-width:10%;object-fit:contain;filter:drop-shadow(0 0 4px #ffca6d88);pointer-events:none}.jackpot{min-width:0;flex:1;text-align:center;font-size:clamp(10px,2vw,16px);font-weight:bold;text-shadow:0 2px 4px #000}.jackpot b{display:block;font-size:1.2em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#ffe963}
.win-toast{position:absolute;top:27%;left:16%;right:16%;z-index:8;text-align:center;font-weight:900;font-size:clamp(20px,5vw,36px);color:#fff1ab;text-shadow:0 2px 8px #9f3600,0 0 20px #ffe522;pointer-events:none;opacity:0;transition:opacity .3s}.win-toast.show{opacity:1}
.controls{position:relative;flex:3;min-height:0;border-radius:14px;border:2px solid #bb803c;background:linear-gradient(180deg,#173b67f0,#0b1832ee 62%,#321322ee);box-shadow:inset 0 0 0 2px #3981c1,inset 0 0 20px #f4ad4650,0 0 14px #000b;display:flex;flex-direction:column;justify-content:space-evenly;gap:2px;padding:5px max(5px,2vw)}
.stats{display:flex;justify-content:space-around;gap:4px;text-align:center;font-size:clamp(10px,2.5vw,13px)}.stats>div{min-width:0;flex:1;border-radius:5px;background:#09152bce;border:1px solid #9a703d;padding:3px;white-space:nowrap}.stats b{display:block;overflow:hidden;text-overflow:ellipsis;color:#ffda61;font-variant-numeric:tabular-nums}
.buttons,.utility{display:flex;align-items:center;justify-content:center;gap:clamp(3px,1.5vw,15px);min-height:0}
.buttons{flex:1;min-height:0;display:grid;grid-template-rows:minmax(34px,35%) minmax(0,65%);gap:4px;width:100%}.aim-row,.action-row{display:grid;align-items:center;justify-items:center;width:100%;min-height:0}.aim-row{grid-template-columns:minmax(42px,17%) minmax(0,1fr) minmax(42px,17%);gap:5px}.action-row{grid-template-columns:1fr 1.3fr 1fr;gap:4px}.utility{height:24%}.buttons button,.utility button{position:relative;border:0;background:transparent;color:#fff5cf;padding:0;min-width:0;height:100%;max-width:80px;aspect-ratio:1;filter:drop-shadow(0 2px 3px #000b)}
.buttons button img,.utility button img{display:block;width:100%;height:100%;object-fit:contain}.buttons button span,.utility button span{position:absolute;bottom:-1px;left:0;right:0;font-size:clamp(9px,2.2vw,13px);font-weight:bold;text-shadow:0 2px 4px #000,0 0 5px #000}.aim-row button{width:clamp(38px,9vw,48px);height:100%;max-height:48px}.aim-row button span{font-size:clamp(9px,2vw,11px)}.drop-control{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;min-height:30px;padding:0 7px;border:1px solid #d7a95b;border-radius:9px;background:linear-gradient(#294c7b,#122747);box-shadow:inset 0 1px 3px #ffdc7755;color:#ffe8b0;font-size:clamp(10px,2.3vw,13px);font-weight:bold}.drop-control span{line-height:1.1}.drop-control input{display:block;width:100%;height:24px;margin:0;touch-action:none;accent-color:#ffe063;cursor:ew-resize}.action-row button{width:clamp(42px,12vw,58px);height:clamp(42px,12vw,58px);max-height:100%;justify-self:start}.action-row #stop{justify-self:end}.action-row .coin-button{width:clamp(64px,20vw,90px);height:clamp(64px,20vw,90px);max-width:90px;max-height:100%;justify-self:center}.action-row .coin-button span{font-size:clamp(10px,2.5vw,14px);white-space:nowrap}
.buttons button.active,.utility button.active{filter:drop-shadow(0 0 11px #ffe257)}.utility button{height:100%;max-width:44px}.utility #history,.utility #rebate,.utility #support{width:44px;aspect-ratio:auto;height:70%;border:1px solid #d9ad5a;border-radius:8px;background:#19355b}
.utility #history{width:auto;height:100%;max-width:44px;aspect-ratio:1;border:0;background:transparent}
dialog{border:2px solid #d3a35e;border-radius:14px;color:#f8e2b5;background:#102447;max-width:min(92vw,600px);max-height:75dvh;box-shadow:0 10px 40px #000}
dialog::backdrop{background:#000b}dialog article{overflow:auto;max-height:65dvh;line-height:1.65;padding:8px 14px}dialog h2{margin:0 35px 10px 0}.close{position:absolute;right:12px;top:8px;border:0;background:none;color:#fff;font-size:30px}dialog table{border-collapse:collapse;width:100%}dialog td,dialog th{border-bottom:1px solid #6679a0;padding:5px;font-size:12px}
.rules-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.rules-steps figure{min-width:0;margin:0;padding:6px;text-align:center;border:1px solid #b98a4e;border-radius:8px;background:#102d53}.rules-steps img{display:block;width:100%;height:88px;object-fit:contain}.rules-steps figcaption{font-weight:bold;color:#ffe09c}
@media(orientation:landscape){.game{background-image:url('./assets/00_arcade_landscape.webp')}.top{height:42px;min-height:42px}.body{flex-direction:row;padding-bottom:6dvh}.machine{flex:7;background-image:radial-gradient(ellipse at 50% 37%,#04112c77 0,#04112cbb 80%),url('./assets/00_arcade_landscape.webp')}.controls{flex:3}.stats{flex-direction:column;max-height:29%;font-size:11px}.stats b{display:inline;margin-left:3px}.aim-row{grid-template-columns:42px minmax(0,1fr) 42px;gap:2px}.aim-row button{width:37px;max-height:40px}.action-row button{width:42px;height:42px}.action-row .coin-button{width:68px;height:68px}.drop-control{min-height:30px;padding:0 3px}.utility{height:20%;gap:2px}.utility button{max-width:32px}.machine-top{top:2%}.bed{top:15%;bottom:11%}.reward-shelf{height:10%}.side-symbol{height:24px}}
@media(max-height:580px) and (orientation:portrait){.body{padding-bottom:4dvh}.stats{font-size:10px}.utility{height:20%}}

/* Scale the machine and its controls as one fixed design canvas. The background and player bar stay in viewport space. */
.game{touch-action:none}
.body{position:absolute;z-index:2;top:var(--scene-top,110px);left:var(--scene-left,0px);width:390px;height:660px;padding:0;flex:none;gap:5px;transform:scale(var(--scene-scale,1));transform-origin:top left;touch-action:none}
.machine-title{font-size:20px}.drop-caption{font-size:12px}.side{font-size:11px}.side-symbol{height:35px}.side b{font-size:14px}.side button{font-size:12px}.scene-plaque span{font-size:10px}.jackpot{font-size:14px}.win-toast{font-size:28px}
.controls{padding:5px 8px}.stats{font-size:12px}.buttons,.utility{gap:5px}.buttons{grid-template-rows:minmax(34px,35%) minmax(0,65%)}.aim-row{grid-template-columns:56px minmax(0,1fr) 56px;gap:5px}.aim-row button{width:44px}.aim-row button span{font-size:10px}.drop-control{font-size:12px}.action-row{gap:4px}.action-row button{width:52px;height:52px}.action-row .coin-button{width:82px;height:82px}.action-row .coin-button span{font-size:12px}.buttons button span,.utility button span{font-size:11px}.utility button{max-width:44px}
@media(orientation:landscape){.body{width:844px;height:300px;flex-direction:row;padding:0}.machine-title{font-size:20px}.side{font-size:11px}.side-symbol{height:24px}.scene-plaque span{font-size:10px}.stats{font-size:11px}.aim-row{grid-template-columns:42px minmax(0,1fr) 42px;gap:2px}.aim-row button{width:37px}.action-row button{width:42px;height:42px}.action-row .coin-button{width:68px;height:68px}.utility button{max-width:32px}}