@charset "UTF-8";
:root{color-scheme:dark;font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;color:#fff9de;background:#071015;--yellow:#f3ff00;--pink:#ff008d;--teal:#43dfd5}*{box-sizing:border-box}body{margin:0;overflow:hidden;min-height:100dvh;background:radial-gradient(ellipse at 50% 45%,#1a333a,#070e14 67%);display:grid;place-items:center}body:before{content:"";position:fixed;inset:0;opacity:.045;pointer-events:none;background:repeating-linear-gradient(120deg,transparent 0 25px,#83eee0 26px,transparent 27px)}#stage{width:390px;height:844px;position:absolute;left:50%;top:50%;overflow:hidden;transform:translate(-50%,-50%) scale(var(--scale,1));background:#0a171c;box-shadow:0 24px 100px #000b;isolation:isolate}button,input{font:inherit}button{cursor:pointer;color:inherit;border:0;touch-action:manipulation;transition:filter .12s,transform .12s}button:focus-visible,input:focus-visible{outline:3px solid #fff;outline-offset:3px}button:active{transform:translateY(2px) scale(.98)}button:disabled{opacity:.4;cursor:not-allowed}button:hover{filter:brightness(1.12)}[hidden]{display:none!important}.screen{position:absolute;inset:0}.scene-plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.button{height:68px;width:100%;background-color:transparent;background-repeat:no-repeat;background-size:contain;background-position:center;padding:6px 20px 12px;display:flex;align-items:center;justify-content:center;gap:9px;font-size:23px;font-weight:1000;letter-spacing:1px;line-height:1.2;text-shadow:1px 1px #0004}.primary{color:#070d0b;background-image:url('./assets/optimized-v18/ui-v3/button-primary.webp');font-style:italic;text-shadow:none}.primary span{font-size:28px}.secondary{background-image:url('./assets/optimized-v18/ui-v3/button-secondary.webp');font-size:17px;color:#fff5d6}.secondary img{width:31px;height:29px;object-fit:contain;mix-blend-mode:lighten}.home-actions{position:absolute;left:22px;right:22px;bottom:29px}.home-actions>.primary{height:99px;font-size:35px}.button-row{display:flex;gap:12px;margin-top:0}.button-row>.button{height:67px;padding:3px 10px 12px;font-size:18px}.progress{text-align:center;font-size:14px;font-weight:900;margin:8px 0 0;line-height:24px;text-shadow:2px 2px #071015}.progress strong{color:var(--yellow);font-size:25px}.map-back{position:absolute;left:10px;top:13px;width:47px;height:47px;background:none;padding:0}.map-back img{width:100%;height:100%;object-fit:contain}.map-count{position:absolute;left:143px;top:97px;min-width:102px;text-align:center;font-size:22px;font-weight:1000;color:var(--yellow);background:url('./assets/optimized-v18/ui-v3/pink-plaque.webp') center/contain no-repeat;padding:8px 19px 15px}.level-node{position:absolute;background:none;padding:0;min-height:44px;display:flex;align-items:center;gap:8px;text-align:left;font-weight:900}.level-number{display:grid;place-items:center;width:29px;height:29px;flex:none;border-radius:50%;color:#fff9df;font-size:16px;line-height:1;text-shadow:1px 2px #000}.level-node.done .level-number{background:#16b9a7;color:#061d1d}.level-node.current .level-number{color:#101816;background:var(--yellow);box-shadow:0 0 16px #feff0022}.level-node .node-copy{flex:1;text-align:center;min-width:0}.level-node h3{font-size:14px;margin:0;white-space:nowrap;line-height:19px}.level-node p{font-size:10px;line-height:14px;margin:0;white-space:nowrap;color:#fff3cd}.level-node p strong{color:var(--yellow)}.level-node.locked{color:#aaa9a6}.level-node.locked .level-number{font-size:12px;color:#aaa9a6}.level-node.locked p{color:#a9b6b3}.level-node.current h3{color:var(--yellow)}#canvas{position:absolute;inset:0;width:390px;height:844px;touch-action:none}.hud{position:absolute;left:18px;right:18px;top:37px;pointer-events:none}.hud-top{display:flex;align-items:center;justify-content:space-between;height:58px}.label{font:bold italic 12px/1.2 Arial,sans-serif;color:#fff7df}.hud-top h2{font-size:30px;line-height:1.1;margin:3px 0 0;letter-spacing:1px;text-shadow:3px 3px #000,-1px -1px #000}.hud-top>div{padding:0 9px;background:url('./assets/optimized-v18/ui-v3/pink-plaque.webp') left center/contain no-repeat}.icon-button{width:43px;height:43px;background:none;padding:0;pointer-events:auto}.icon-button img{width:100%;height:100%;object-fit:contain}.hud-stats{height:48px;margin-top:6px;background:url('./assets/optimized-v18/ui-v3/stats-frame.webp') center/contain no-repeat;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;font-size:12px;font-weight:900;padding:0 10px 5px;white-space:nowrap;text-shadow:2px 2px #000}.hud-stats span{text-align:center}.hud-stats b{font:1000 24px/1 Arial,sans-serif;color:#fff5d2}.hud-stats .ammo b,.hud-stats span:last-child b{color:var(--yellow)}.play-footer{position:absolute;bottom:44px;left:18px;right:18px;display:flex;align-items:center;justify-content:space-between;color:#fff5dc;font-weight:1000;font-size:19px;pointer-events:none;text-shadow:2px 2px #000}.play-footer span:first-child{padding:11px 9px 13px;background:url('./assets/optimized-v18/ui-v3/pink-plaque.webp') center/contain no-repeat}.play-footer span:last-child{font-size:25px;color:var(--yellow);padding:12px 9px 14px;background:url('./assets/optimized-v18/ui-v3/pink-plaque.webp') center/contain no-repeat}.tutorial{position:absolute;bottom:21px;left:16px;right:16px;padding:8px 7px 12px;text-align:center;pointer-events:none;font-size:12px;font-weight:900;line-height:1.5;color:#fff9df;background:url('./assets/optimized-v18/ui-v3/button-secondary.webp') center/contain no-repeat}.tutorial:empty{display:none}.phase-label{position:absolute;top:645px;left:55px;right:55px;text-align:center;pointer-events:none;font-size:13px;font-weight:900;color:var(--yellow);letter-spacing:1px;line-height:28px;text-shadow:2px 2px #000}.phase-label:not(:empty){background:url('./assets/optimized-v18/ui-v3/pink-plaque.webp') center/contain no-repeat;padding:5px 8px 9px}.beat-word{position:absolute;top:420px;left:50px;right:50px;text-align:center;padding:12px 0 20px;pointer-events:none;font-size:43px;line-height:1.1;font-weight:1000;font-style:italic;letter-spacing:3px;color:var(--yellow);text-shadow:3px 3px #090e13,-1px -1px #090e13;background:url('./assets/optimized-v18/ui-v3/pink-plaque.webp') center/contain no-repeat;opacity:0;transform:rotate(-6deg);transition:opacity .12s}.beat-word.visible{opacity:1;animation:pop .22s ease-out}#tutorial-hand{position:absolute;left:42px;top:500px;width:57px;height:60px;object-fit:contain;pointer-events:none;animation:drag-hint 1.6s infinite;mix-blend-mode:lighten}.modal{position:absolute;inset:0;z-index:10}.modal-card{position:absolute;inset:0}.modal-card.settings{background:url('./assets/optimized-v18/ui-v2/settings-plate.webp') center/cover no-repeat}.modal-card.pause{background:#030b11a6}.pause-panel-art{position:absolute;left:12px;top:185px;width:366px;height:549px;object-fit:contain;pointer-events:none}.modal-card .art-control{position:absolute;background:none;text-align:center;display:flex;align-items:center;justify-content:center;padding:0;font-weight:1000;line-height:1;letter-spacing:2px;color:#fff6d8;text-shadow:2px 2px #000;font-size:27px}.modal-card .art-control.primary{color:#0a100b;text-shadow:none;font-style:italic}.modal-card.pause .pause-continue{left:57px;top:397px;width:276px;height:52px;font-size:34px}.modal-card.pause .pause-restart{left:57px;top:460px;width:276px;height:48px}.modal-card.pause .pause-map{left:57px;top:510px;width:276px;height:48px}.switch{position:absolute;display:flex;justify-content:flex-start;align-items:center;border:0;color:#fff6da;background:transparent url('./assets/optimized-v18/ui-v3/button-secondary.webp') center/contain no-repeat;font-size:17px;font-weight:1000;line-height:1;padding:0 0 5px 14px;text-shadow:1px 1px #000}.switch:after{content:"";position:absolute;width:24px;height:24px;left:7px;top:7px;border-radius:50%;background:#f8efd9;border:2px solid #101714;box-shadow:1px 1px 0 #000}.switch.on{background-image:url('./assets/optimized-v18/ui-v3/button-primary.webp');color:#0c120b;text-shadow:none}.switch.on:after{left:auto;right:8px}.switch:not(.on){justify-content:flex-end;padding:0 15px 5px 0}.settings .switch{left:230px;width:100px;height:42px}.settings .setting-music{top:315px}.settings .setting-sfx{top:379px}.settings .setting-vibration{top:443px}.pause .switch{left:236px;width:69px;height:30px;padding-left:10px;font-size:12px}.pause .switch:after{width:18px;height:18px;top:4px;left:5px}.pause .switch.on:after{left:auto;right:5px}.pause .setting-music{top:569px}.pause .setting-sfx{top:605px}.pause .setting-vibration{top:642px}.offset-value{position:absolute;left:233px;top:516px;width:90px;height:32px;display:grid;place-items:center;color:var(--yellow);font-size:22px;font-weight:1000}.offset-slider{position:absolute;left:57px;top:582px;width:275px;height:32px;margin:0;accent-color:var(--yellow);cursor:pointer}.calibration{position:absolute;left:58px;top:641px;width:274px;height:24px;border-bottom:2px solid var(--pink);display:flex;justify-content:center;align-items:center}.calibration:before{content:"";position:absolute;inset:9px 10px -6px;background:repeating-linear-gradient(90deg,transparent 0 32px,#ff008d 33px 35px,transparent 36px)}.cal-dot{width:22px;height:22px;border-radius:50%;border:2px solid #fff0db;background:var(--pink);box-shadow:0 0 17px var(--pink);position:relative}.settings .close-settings{left:54px;top:711px;width:280px;height:64px;font-size:35px}.result-plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.result-caption{position:absolute;left:115px;top:49px;width:166px;height:25px;font-size:17px;font-weight:1000;text-align:center;transform:rotate(-4deg);margin:0;line-height:25px}.result-numbers{position:absolute;left:33px;top:603px;width:324px;display:grid;grid-template-columns:1fr 1fr 1fr;text-align:center;font:1000 italic 48px/1 Arial,sans-serif;color:#fff7d8;text-shadow:2px 2px #000}.result-win .next-level{left:42px;top:676px;width:307px;height:65px;font-size:37px}.result-win .result-restart{left:40px;top:764px;width:144px;height:43px}.result-win .result-map{left:209px;top:764px;width:143px;height:43px}.result-lose .loss-reason{position:absolute;left:40px;right:40px;top:223px;font-size:19px;line-height:1.55;text-align:center;font-weight:900;margin:0;text-shadow:2px 2px #000}.loss-reason strong{font-size:27px;color:var(--yellow)}.loss-stats{position:absolute;left:26px;right:25px;top:314px;display:grid;grid-template-columns:1fr 1fr 1fr;text-align:center;gap:4px}.loss-stats span{font-size:14px;font-weight:900;line-height:24px}.loss-stats strong{font-size:24px;line-height:25px;color:var(--yellow);display:block}.result-lose .result-restart{left:48px;top:649px;width:286px;height:60px;font-size:39px}.result-lose .result-map{left:92px;top:736px;width:211px;height:47px;font-size:30px}.result-final .result-numbers{top:640px;color:var(--yellow);font-size:43px}.result-final .result-restart{left:27px;top:728px;width:158px;height:58px;font-size:35px}.result-final .result-map{left:208px;top:728px;width:151px;height:58px;font-size:25px}.toast{position:absolute;z-index:35;left:36px;right:36px;bottom:140px;color:#fff5d8;background:url('./assets/optimized-v18/ui-v3/pink-plaque.webp') center/contain no-repeat;font-size:14px;line-height:1.6;font-weight:900;text-align:center;padding:18px 20px 23px;text-shadow:2px 2px #000;pointer-events:none;animation:pop .2s ease-out}.rotate{position:fixed;inset:0;background:#071015;z-index:50;display:grid;place-items:center}.rotate>img{width:100%;height:100%;object-fit:contain}.load-content{position:absolute;left:30px;right:30px;top:449px;text-align:center}.load-track{position:relative;width:100%;height:45px;padding:13px 29px 18px 14px;background:url('./assets/optimized-v18/ui-v3/loading-frame.webp') center/contain no-repeat}.load-track i{display:block;width:0;height:100%;background:#ff008d;box-shadow:0 0 10px #ff008d;transition:width .15s}.load-content>strong{font-size:15px;font-weight:1000;color:var(--yellow)}.load-content h2{font-size:23px;line-height:1.45;text-shadow:3px 3px #000;margin:18px 0}.load-content>.button{margin:20px auto;width:260px;height:77px;font-size:30px}.critical{color:var(--pink)!important}@keyframes pop{from{transform:scale(.65) rotate(-8deg)}to{transform:scale(1) rotate(-6deg)}}@keyframes drag-hint{0%,100%{transform:translateY(0);opacity:.2}30%{opacity:1}75%{transform:translateY(36px);opacity:1}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Every bitmap uses one uniform scale. Control hit regions may be larger than the image. */
.button{padding:0 23px 5px;background-position:center;background-size:contain}
.home-actions>.primary{height:107px;font-size:34px}
.button-row>.button{height:60px;padding:0 14px 4px;font-size:17px;gap:5px}
.secondary img{width:24px;height:24px}
.map-count{top:99px;left:131px;width:128px;height:32px;min-width:0;padding:0;font-size:20px;display:grid;place-items:center}
.hud{top:20px}
.hud-top{height:58px}
.hud-top>div{width:265px;height:61px;padding:6px 21px 8px;background-position:center;background-size:contain}
.label{font-size:10px}
.hud-top h2{font-size:26px;margin-top:2px;line-height:1.1}
.hud-stats{height:62px;margin-top:3px;padding:0 14px 6px;font-size:11px}
.hud-stats b{font-size:23px}
.play-footer{bottom:57px;font-size:13px}
.play-footer span:first-child,.play-footer span:last-child{display:grid;place-items:center;width:125px;height:30px;padding:0;font-size:13px}
.play-footer span:last-child{width:96px;height:25px;font-size:18px}
.tutorial{bottom:15px;height:40px;padding:9px 15px;background-image:url('./assets/optimized-v18/ui-v3/loading-frame.webp');background-size:contain}
.phase-label{top:642px;left:54px;right:54px;height:65px;font-size:13px;line-height:65px}
.phase-label:not(:empty){padding:0}
.beat-word{height:67px;padding:10px 0;font-size:35px;line-height:47px}
.toast{bottom:127px;min-height:73px;padding:18px 20px;font-size:13px;line-height:1.5}
.switch,.switch.on{background-image:url('./assets/optimized-v18/ui-v3/switch-track.webp');background-size:contain;background-position:center;justify-content:flex-start;padding:0 0 1px 17px;color:#fff8da;text-shadow:1px 1px #000}
.switch:not(.on){justify-content:flex-end;padding:0 17px 1px 0;color:#b8c3bd}
.switch:after,.pause .switch:after{top:50%;transform:translateY(-50%);width:18px;height:18px;left:7px}
.switch.on:after{left:auto;right:7px;background:var(--yellow)}
.pause .switch{height:36px;font-size:11px;padding-left:10px}
.pause .switch:not(.on){padding-right:10px}
.pause .switch:after{width:14px;height:14px;left:5px}
.pause .switch.on:after{left:auto;right:5px}
.pause .setting-music{top:566px}.pause .setting-sfx{top:602px}.pause .setting-vibration{top:639px}
.load-track{height:36px;padding:10px 16px 13px}
.load-content>.button{height:81px;margin:10px auto}
#exit-load{font-size:23px}

/* v13: source artwork keeps its shape; safe-area fitting uses one CSS transform. */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}
#stage{left:var(--stage-x,50%);top:var(--stage-y,50%)}
.hud-stats>.stat-with-icon{display:flex;align-items:center;justify-content:center;gap:4px;min-width:0}
.hud-stat-icon{display:block;width:28px;height:28px;object-fit:contain;flex:none;filter:drop-shadow(0 1px 1px #000)}
.hud-stats .stat-unit{font-size:11px}
/* Isolated targets grow inward; bitmap size/position stays at the mother anchors. */
#pause{width:max(43px,var(--touch-logical,44px));height:max(43px,var(--touch-logical,44px));position:relative;flex:none}
#pause img{position:absolute;width:43px;height:43px;right:0;top:50%;transform:translateY(-50%);object-fit:contain}
#map-back{width:max(47px,var(--touch-logical,44px));height:max(47px,var(--touch-logical,44px))}
#map-back img{position:absolute;left:0;top:0;width:47px;height:47px;object-fit:contain}

/* v13 pause mother has four generous slots. Text is live; the bitmap remains 2:3. */
.pause-panel-art{top:145px}
.modal-card.pause .art-control{left:57px;width:276px;height:max(54px,var(--touch-logical,44px));font-size:29px}
.modal-card.pause .pause-continue{top:calc(389px - max(54px,var(--touch-logical,44px))/2);font-size:34px}
.modal-card.pause .pause-restart{top:calc(453px - max(54px,var(--touch-logical,44px))/2)}
.modal-card.pause .pause-map{top:calc(511px - max(54px,var(--touch-logical,44px))/2)}
.modal-card.pause .pause-settings{top:calc(570px - max(54px,var(--touch-logical,44px))/2)}
/* Expanded input boxes keep each original visual center and contain the same bitmap. */
.settings .switch{height:max(42px,var(--touch-logical,44px))}
.settings .setting-music{top:calc(336px - max(42px,var(--touch-logical,44px))/2)}
.settings .setting-sfx{top:calc(400px - max(42px,var(--touch-logical,44px))/2)}
.settings .setting-vibration{top:calc(464px - max(42px,var(--touch-logical,44px))/2)}
.offset-slider{height:max(32px,var(--touch-logical,44px));top:calc(598px - max(32px,var(--touch-logical,44px))/2)}
.level-node{min-height:max(44px,var(--touch-logical,44px))}
.level-node[data-level="5"]{width:78px!important}
.level-node[data-level="7"]{height:max(44px,var(--touch-logical,44px))!important}
.result-win .result-restart,.result-win .result-map{height:max(43px,var(--touch-logical,44px));top:calc(785.5px - max(43px,var(--touch-logical,44px))/2)}
.result-lose .result-map{height:max(47px,var(--touch-logical,44px));top:calc(759.5px - max(47px,var(--touch-logical,44px))/2)}

/* v14 desktop ambience follows the actual painted street; stage stays uniform. */
#ambience{position:fixed;inset:-6%;width:112%;height:112%;object-fit:cover;filter:blur(18px) saturate(.65) brightness(.37);opacity:.58;pointer-events:none;z-index:-1}
body{isolation:isolate}
body:after{content:"";position:fixed;inset:0;background:radial-gradient(ellipse at center,transparent 0,#05101955 38%,#030a11db 100%);pointer-events:none;z-index:-1}
@media(max-width:600px){#ambience{display:none}}

/* v16: the painted ambience sits above the body background, below the intact stage. */
#ambience{z-index:0;opacity:.72;filter:blur(20px) saturate(.60) brightness(.38)}
body:before{z-index:1;opacity:.025}
body:after{z-index:1;background:radial-gradient(ellipse at center,#03101900 0,#03101945 40%,#02070be6 100%)}
#stage{z-index:2}
.rotate{z-index:50}

/* Stage-2 count stays inside the existing HUD column, with no bitmap stretching. */
.hud-stats .ammo{position:relative}.hud-stats #ammo-pending{position:absolute;right:0;top:-3px;font:900 10px/1 Arial,sans-serif;color:#e5ff49;text-shadow:1px 1px #07131c}.hud-stats .ammo b{font-size:21px}

/* v20: live targets and the hero keep clear silhouettes above the painted scene. */
.hud .label{font-size:9px;letter-spacing:.1px;white-space:nowrap}
.phase-label{top:auto;bottom:15px;left:16px;right:16px;height:40px;line-height:40px;font-size:12px}
.phase-label:not(:empty){background-image:url('./assets/optimized-v18/ui-v3/loading-frame.webp');background-size:contain}
.beat-word{top:624px;left:115px;right:115px;height:37px;font-size:22px;line-height:25px;padding:6px 0;letter-spacing:1px}
.challenge-result{position:absolute;left:30px;right:30px;top:651px;height:22px;margin:0;text-align:center;font-size:12px;font-weight:900;line-height:22px;color:#f1e9cd;text-shadow:1px 1px #071018}
.challenge-result.earned{color:#edff61}.result-final .challenge-result{top:692px}