@font-face{font-family:Remissis;src:url("../assets/fonts/RemissisRg-Bold.sub.woff2") format("woff2"),url("../assets/fonts/RemissisRg-Bold.otf");font-display:swap}
@font-face{font-family:LibSans;src:url("../assets/fonts/LiberationSans.sub.woff2") format("woff2"),url("../assets/fonts/LiberationSans.ttf");font-display:swap}
html,body{margin:0;height:100%;background:#0c0820;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;font-family:Remissis,LibSans,sans-serif}
#stage{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(var(--u)*1080px);height:calc(var(--u)*2400px);overflow:hidden}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block}
#ui{position:absolute;inset:0;pointer-events:none}
.screen{position:absolute;inset:0;display:none}
.screen.on{display:block}
.screen.overlay{background:rgba(0,0,0,.7)}
#scr-win.overlay,#scr-lose.overlay{background:rgba(0,0,0,.75)}
/* 结算屏：台面/场景几乎全遮（参照件 22-l1-result3 卡外亮度≈4.5/255，仅留极淡残影），避免与奖励层叠影 */
#scr-win.overlay{background:rgba(0,0,0,.9)}
#win-shade{position:absolute;inset:0;background:rgba(6,2,20,.82)}
#scr-hud{pointer-events:none}
/* 弹窗/结算叠在 HUD 上时隐藏教程条/提示条/booster 锁，避免与按钮重叠（judge 评审项） */
#scr-settings.on~#scr-hud .capsule,#scr-lose.on~#scr-hud .booster,body:has(#scr-settings.on) #scr-hud .capsule,body:has(#scr-lose.on) #scr-hud .booster,body:has(#scr-lose.on) #scr-hud #tut-hand{display:none!important}
.screen *{pointer-events:auto}
.fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hidden{display:none!important}
button{border:0;background:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:active{transform:scale(.94)}
.title{position:absolute;left:0;right:0;text-align:center;margin:0;font-weight:700;color:#ffcc2e;-webkit-text-stroke:calc(var(--u)*6px) #4b1a7a;paint-order:stroke fill;text-shadow:0 calc(var(--u)*8px) 0 #4b1a7a}
/* pixel helpers: everything in design px via --u */
#home-logo{position:absolute;left:calc(var(--u)*130px);top:calc(var(--u)*290px);width:calc(var(--u)*820px)}
.coinbox{position:absolute;left:calc(var(--u)*50px);top:calc(var(--u)*90px);height:calc(var(--u)*110px);display:flex;align-items:center;gap:calc(var(--u)*14px);background:rgba(60,20,90,.75);border-radius:calc(var(--u)*60px);padding:0 calc(var(--u)*34px) 0 calc(var(--u)*10px);border:calc(var(--u)*5px) solid #f7b928}
.coinbox img{height:calc(var(--u)*90px)}
.coinbox span{color:#fff;font-size:calc(var(--u)*64px);-webkit-text-stroke:calc(var(--u)*3px) #3a1050;paint-order:stroke fill}
.gearbtn{position:absolute;left:calc(var(--u)*900px);top:calc(var(--u)*90px);width:calc(var(--u)*150px);height:calc(var(--u)*150px)}
.gearbtn img{position:absolute;inset:0;width:100%;height:100%}
.gearbtn .gear-icon{inset:22%;width:56%;height:56%}
.bigbtn{position:absolute;left:calc(var(--u)*200px);width:calc(var(--u)*680px);height:calc(var(--u)*180px);border-radius:calc(var(--u)*46px);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;-webkit-text-stroke:calc(var(--u)*4px) #1f5a12;paint-order:stroke fill;box-shadow:0 calc(var(--u)*12px) 0 #1d6a10,inset 0 calc(var(--u)*10px) 0 rgba(255,255,255,.35)}
.bigbtn.green{background:linear-gradient(#8ae83c,#3fbf1a);border:calc(var(--u)*6px) solid #f7b928}
.bigbtn .l1{font-size:calc(var(--u)*84px);line-height:1}
.bigbtn .l2{font-size:calc(var(--u)*40px);line-height:1.2}
#btn-play{left:calc(var(--u)*260px);width:calc(var(--u)*560px);height:calc(var(--u)*170px);top:calc(var(--u)*1865px)}
.smallbtn{position:absolute;left:calc(var(--u)*340px);width:calc(var(--u)*400px);height:calc(var(--u)*120px);border-radius:calc(var(--u)*40px);background:linear-gradient(#fff,#d9d4e6);color:#4b1a7a;font-size:calc(var(--u)*56px);box-shadow:0 calc(var(--u)*8px) 0 #8d84a8}
/* HUD */
#balls-panel{position:absolute;left:calc(var(--u)*50px);top:calc(var(--u)*80px);width:calc(var(--u)*210px);height:calc(var(--u)*170px);border-radius:calc(var(--u)*30px);background:#fff;border:calc(var(--u)*8px) solid #d9263b;box-sizing:border-box;overflow:hidden;text-align:center}
#balls-panel.hard{border-color:#f28a1c}#balls-panel.superhard{border-color:#7a3fd3}
#balls-panel.low{animation:pulse .8s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(217,38,59,0)}50%{box-shadow:0 0 0 calc(var(--u)*12px) rgba(217,38,59,.8)}}
#balls-panel .tag{background:#d9263b;color:#fff;font-size:calc(var(--u)*34px);line-height:calc(var(--u)*46px)}
#balls-panel .num-wrap{position:relative;height:calc(var(--u)*110px);overflow:hidden}
#balls-num{position:absolute;inset:0;color:#d9263b;font-size:calc(var(--u)*96px);line-height:calc(var(--u)*110px)}
#balls-num.bump{animation:bump .25s cubic-bezier(.34,1.56,.64,1)}
@keyframes bump{0%{transform:translateY(-100%) scale(1.15)}100%{transform:none}}
.capsule{position:absolute;left:calc(var(--u)*140px);width:calc(var(--u)*800px);top:calc(var(--u)*540px);padding:calc(var(--u)*26px) calc(var(--u)*30px);border-radius:calc(var(--u)*40px);background:#7a3fd3;border:calc(var(--u)*6px) solid #fff;color:#fff;font-size:calc(var(--u)*46px);text-align:center;box-sizing:border-box;-webkit-text-stroke:calc(var(--u)*2px) #3a1050;paint-order:stroke fill}
#tut-hand{position:absolute;width:calc(var(--u)*200px);left:calc(var(--u)*560px);top:calc(var(--u)*900px);animation:tap .6s ease-in-out infinite;pointer-events:none}
@keyframes tap{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(var(--u)*40px)) scale(.92)}}
.booster{position:absolute;top:calc(var(--u)*1820px);width:calc(var(--u)*140px);height:calc(var(--u)*140px);border-radius:50%;background:radial-gradient(#9a5ee8,#5a23a8);border:calc(var(--u)*6px) solid #f7b928;display:flex;align-items:center;justify-content:center}
.booster.left{left:calc(var(--u)*20px)}.booster.right{left:calc(var(--u)*908px)}/* 含 6px 边框外沿 152px：908+152=1060 ≤ 1080 安全区（uigate 真读数修） */
.booster .lock{height:60%}
/* SETTINGS */
#settings-panel{position:absolute;left:calc(var(--u)*220px);top:calc(var(--u)*850px);width:calc(var(--u)*640px);height:calc(var(--u)*700px)}
#settings-bg{display:none}
#settings-panel{background:linear-gradient(#8a3fd9,#5a2d8a);border:calc(var(--u)*10px) solid #f7b928;border-radius:calc(var(--u)*60px);box-shadow:0 calc(var(--u)*16px) 0 #3a1050,0 calc(var(--u)*30px) calc(var(--u)*40px) rgba(0,0,0,.5)}
.closebtn{position:absolute;right:calc(var(--u)*-30px);top:calc(var(--u)*-30px);width:calc(var(--u)*140px);height:calc(var(--u)*140px)}
.closebtn img{position:absolute;inset:0;width:100%;height:100%}.closebtn .cl-inner{inset:12%;width:76%;height:76%}
.toggles{position:absolute;left:calc(var(--u)*70px);right:calc(var(--u)*70px);top:calc(var(--u)*120px);display:flex;flex-direction:column;gap:calc(var(--u)*30px)}
.toggle{display:flex;align-items:center;gap:calc(var(--u)*24px);color:#fff;font-size:calc(var(--u)*48px);cursor:pointer;-webkit-text-stroke:calc(var(--u)*2px) #3a1050;paint-order:stroke fill}
.toggle img{width:calc(var(--u)*100px);height:calc(var(--u)*100px)}
.toggle b{margin-left:auto;width:calc(var(--u)*120px);height:calc(var(--u)*60px);border-radius:calc(var(--u)*30px);background:#5a2d8a;position:relative}
.toggle b::after{content:"";position:absolute;top:calc(var(--u)*6px);left:calc(var(--u)*6px);width:calc(var(--u)*48px);height:calc(var(--u)*48px);border-radius:50%;background:#ddd;transition:left .15s}
.toggle.on b{background:#3fbf1a}.toggle.on b::after{left:calc(var(--u)*66px);background:#fff}
#settings-home{left:calc(var(--u)*120px);top:calc(var(--u)*540px)}
/* WIN */
#win-title{top:calc(var(--u)*240px);left:calc(var(--u)*40px);right:calc(var(--u)*40px);font-size:calc(var(--u)*170px);transform-origin:center;-webkit-text-stroke:calc(var(--u)*10px) #7a1c5a;text-shadow:0 calc(var(--u)*12px) 0 #7a1c5a,0 calc(var(--u)*20px) calc(var(--u)*24px) rgba(0,0,0,.5);transform:rotate(-4deg)}
#win-glow{position:absolute;left:calc(var(--u)*140px);top:calc(var(--u)*580px);width:calc(var(--u)*800px);animation:spin 6s linear infinite;opacity:1;filter:brightness(1.4) saturate(1.3)}
@keyframes spin{to{transform:rotate(360deg)}}
#win-coin{position:absolute;left:calc(var(--u)*410px);top:calc(var(--u)*850px);width:calc(var(--u)*260px)}
#win-coin.pop{animation:pop .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes pop{0%{transform:scale(0)}100%{transform:scale(1)}}
#win-coin-num{position:absolute;left:calc(var(--u)*640px);top:calc(var(--u)*1030px);color:#fff;font-size:calc(var(--u)*90px);-webkit-text-stroke:calc(var(--u)*4px) #3a1050;paint-order:stroke fill}
#win-bar{position:absolute;left:calc(var(--u)*60px);top:calc(var(--u)*1560px);width:calc(var(--u)*960px);height:calc(var(--u)*340px)}
#win-bar-bg{position:absolute;inset:0;width:100%;height:100%}
/* spr_well_done_bar_bg 545×381：上 40% 为右侧凸起的标签区（x 从 ~45% 起），下 60% 为满宽卡体 → 文案居右上标签区，进度条居卡体 */
.bar-text{position:absolute;left:calc(var(--u)*450px);right:calc(var(--u)*50px);top:calc(var(--u)*24px);text-align:center;color:#fff;font-size:calc(var(--u)*40px);line-height:1.15;-webkit-text-stroke:calc(var(--u)*2px) #3a1050;paint-order:stroke fill}
.bar-track{position:absolute;left:calc(var(--u)*50px);top:calc(var(--u)*196px);width:calc(var(--u)*700px);height:calc(var(--u)*82px);border-radius:calc(var(--u)*41px);background:#4b1a7a;border:calc(var(--u)*5px) solid #f7b928;overflow:hidden}
#win-bar-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(#a8f05a,#3fbf1a);transition:width .5s cubic-bezier(.65,0,.35,1)}
#win-bar-label{position:absolute;inset:0;text-align:center;color:#fff;font-size:calc(var(--u)*44px);line-height:calc(var(--u)*80px);-webkit-text-stroke:calc(var(--u)*2px) #3a1050;paint-order:stroke fill}
#win-chest{position:absolute;right:calc(var(--u)*46px);top:calc(var(--u)*170px);width:calc(var(--u)*150px);filter:drop-shadow(0 0 calc(var(--u)*6px) #ffd54a)}
#btn-continue{top:calc(var(--u)*2080px)}
.bigbtn.cta{animation:cta 1.1s ease-in-out infinite;box-shadow:0 calc(var(--u)*12px) 0 #1d6a10,0 0 calc(var(--u)*40px) rgba(247,185,40,.75),inset 0 calc(var(--u)*10px) 0 rgba(255,255,255,.35)}
@keyframes cta{0%,100%{box-shadow:0 calc(var(--u)*12px) 0 #1d6a10,0 0 calc(var(--u)*24px) rgba(247,185,40,.45),inset 0 calc(var(--u)*10px) 0 rgba(255,255,255,.35)}50%{box-shadow:0 calc(var(--u)*12px) 0 #1d6a10,0 0 calc(var(--u)*56px) rgba(247,185,40,.95),inset 0 calc(var(--u)*10px) 0 rgba(255,255,255,.35)}}
/* 彩纸只在上 62% 落，不进 Continue（top 2080px）区域 */
#confetti{position:absolute;left:0;right:0;top:0;height:62%;overflow:hidden;pointer-events:none}
.cf{position:absolute;width:calc(var(--u)*22px);height:calc(var(--u)*36px);top:-5%;animation:fall 1.2s ease-out forwards}
@keyframes fall{to{transform:translateY(calc(var(--u)*2600px)) rotate(720deg)}}
/* LOSE */
#lose-title{top:calc(var(--u)*420px);font-size:calc(var(--u)*130px);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-stroke:calc(var(--u)*6px) #4b1a7a;text-shadow:none}
#lose-piggy{position:absolute;left:calc(var(--u)*340px);top:calc(var(--u)*850px);width:calc(var(--u)*400px)}
#btn-retry{top:calc(var(--u)*1800px)}
#btn-lose-home{top:calc(var(--u)*2050px)}
#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:calc(var(--u)*60px);background:#0c0820}
/* STORY §6.6 */
#scr-story{background:#032c60}
#story-from{position:absolute;left:0;right:0;top:calc(var(--u)*1700px);text-align:center;color:#fff;font-size:calc(var(--u)*40px);opacity:.85;-webkit-text-stroke:calc(var(--u)*2px) #2a1a7a;paint-order:stroke fill}
#scr-story.brief #story-text{display:none}
#scr-story.brief #story-from{top:calc(var(--u)*1880px)}#scr-story.brief #story-level{top:calc(var(--u)*1960px);font-size:calc(var(--u)*96px)}
#story-level{position:absolute;left:0;right:0;top:calc(var(--u)*1780px);text-align:center;color:#f7b928;font-size:calc(var(--u)*72px);letter-spacing:.06em;-webkit-text-stroke:calc(var(--u)*2px) #2a1a7a;paint-order:stroke fill}
#story-text{position:absolute;left:calc(var(--u)*100px);right:calc(var(--u)*100px);top:calc(var(--u)*1900px);margin:0;text-align:center;color:#fff;font-size:calc(var(--u)*50px);line-height:1.25;-webkit-text-stroke:calc(var(--u)*3px) #2a1a7a;paint-order:stroke fill}
#story-loading{position:absolute;left:0;right:0;top:calc(var(--u)*2200px);text-align:center;color:#fff;font-size:calc(var(--u)*56px);-webkit-text-stroke:calc(var(--u)*3px) #2a1a7a;paint-order:stroke fill;animation:blink 1s ease-in-out infinite}
@keyframes blink{50%{opacity:.5}}
#loading.hidden{display:none}
.fx-flash{position:absolute;border-radius:50%;background:radial-gradient(#fff,#ffe36b 40%,rgba(255,150,0,0));pointer-events:none;animation:flash .12s ease-out forwards}
@keyframes flash{from{transform:scale(1);opacity:1}to{transform:scale(2.2);opacity:0}}
.fx-star{position:absolute;width:calc(var(--u)*40px);pointer-events:none;animation:star .3s ease-out forwards}
@keyframes star{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
#stage.shake{animation:shake .3s}
@keyframes shake{0%,100%{margin-top:0}25%{margin-top:calc(var(--u)*2px)}75%{margin-top:calc(var(--u)*-2px)}}
/* 命中分级震屏：重击 4px / 塌层 6px + 横向抖 */
#stage.shake-hard{animation:shake-hard .35s}
@keyframes shake-hard{0%,100%{margin-top:0;margin-left:0}20%{margin-top:calc(var(--u)*4px);margin-left:calc(var(--u)*2px)}50%{margin-top:calc(var(--u)*-4px)}80%{margin-top:calc(var(--u)*2px);margin-left:calc(var(--u)*-2px)}}
#stage.shake-heavy{animation:shake-heavy .45s}
@keyframes shake-heavy{0%,100%{margin-top:0;margin-left:0}15%{margin-top:calc(var(--u)*6px);margin-left:calc(var(--u)*4px)}35%{margin-top:calc(var(--u)*-6px);margin-left:calc(var(--u)*-3px)}55%{margin-top:calc(var(--u)*4px)}75%{margin-top:calc(var(--u)*-2px)}}
/* 命中冲击环（重击/塌层） */
.fx-ring{position:absolute;width:calc(var(--u)*120px);height:calc(var(--u)*120px);border:calc(var(--u)*6px) solid rgba(255,240,180,.9);border-radius:50%;transform:translate(-50%,-50%) scale(.3);pointer-events:none;animation:ring .4s ease-out forwards}
.fx-ring.heavy{width:calc(var(--u)*220px);height:calc(var(--u)*220px);border-width:calc(var(--u)*10px);border-color:rgba(255,200,120,.95);animation-duration:.45s}
@keyframes ring{0%{transform:translate(-50%,-50%) scale(.3);opacity:1}100%{transform:translate(-50%,-50%) scale(1.4);opacity:0}}
/* 落地着地：土色小尘 + 扁平弹跳圈（与命中星星拉开轻重） */
.fx-dust{position:absolute;transform:translate(-50%,-70%);pointer-events:none;opacity:.85;animation:dust .5s ease-out forwards}
@keyframes dust{0%{transform:translate(-50%,-70%) scale(.4);opacity:.85}100%{transform:translate(calc(-50% + var(--dx)),-110%) scale(1.1);opacity:0}}
.fx-land{position:absolute;aspect-ratio:2.4/1;border:calc(var(--u)*4px) solid rgba(120,80,40,.55);border-radius:50%;transform:translate(-50%,-50%) scaleX(.5);pointer-events:none;animation:land .4s ease-out forwards}
@keyframes land{0%{transform:translate(-50%,-50%) scale(.5,.5);opacity:.9}100%{transform:translate(-50%,-50%) scale(1.3,1);opacity:0}}
#celebrate{position:absolute;inset:0;pointer-events:none;z-index:5}
#celebrate-confetti{position:absolute;left:0;right:0;top:0;height:62%;overflow:hidden}
#celebrate-logo{position:absolute;left:calc(var(--u)*300px);top:calc(var(--u)*300px);width:calc(var(--u)*480px);filter:drop-shadow(0 calc(var(--u)*10px) calc(var(--u)*18px) rgba(0,0,0,.6))}
#celebrate-logo.smash{animation:smash 1.2s cubic-bezier(.34,1.56,.64,1) both}
@keyframes smash{0%{transform:scale(.6) rotate(-6deg);opacity:0}30%{opacity:1}100%{transform:scale(1) rotate(-4deg);opacity:1}}
/* R3 清台瞬间：闪白 + Cleared! 标记（台面中心 ≈ y1250） */
#celebrate-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
#celebrate-flash.go{animation:whiteout .15s ease-out both}
@keyframes whiteout{0%{opacity:.95}100%{opacity:0}}
#celebrate-mark{top:calc(var(--u)*1120px);font-size:calc(var(--u)*190px);color:#fff;-webkit-text-stroke:calc(var(--u)*10px) #d9263b;text-shadow:0 calc(var(--u)*12px) 0 #7a1c5a,0 0 calc(var(--u)*40px) rgba(255,255,255,.8);transform:scale(0);opacity:0;transform-origin:center}
#celebrate-mark.go{animation:markpop 2s cubic-bezier(.34,1.56,.64,1) both}
@keyframes markpop{0%{transform:scale(0) rotate(-8deg);opacity:0}18%{transform:scale(1.15) rotate(-4deg);opacity:1}30%{transform:scale(1) rotate(-4deg)}85%{transform:scale(1) rotate(-4deg);opacity:1}100%{transform:scale(1.1) rotate(-4deg);opacity:0}}
/* R3 结算屏分层进场 */
#win-coin,#win-glow,#win-coin-num{transition:opacity .25s}
#win-bar{opacity:0;transform:translateY(calc(var(--u)*80px));transition:opacity .35s ease-out,transform .35s cubic-bezier(.34,1.56,.64,1)}
#win-bar.in{opacity:1;transform:none}
#win-chest.bump{animation:chestbump .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes chestbump{0%{transform:scale(1)}40%{transform:scale(1.3) rotate(-8deg)}100%{transform:scale(1)}}
#win-bar-fill.full{animation:barflash .3s steps(1) 2}
@keyframes barflash{50%{background:#fff}}