@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--cream:#fff1d6;--muted:#a99fbd;--orange:#ffaf54;--purple:#9f77ed}*{box-sizing:border-box}body{margin:0;background:#120d20;color:var(--cream);font-family:'Space Grotesk','Noto Sans TC',sans-serif;background-image:radial-gradient(ellipse at 50% 35%,#2b193c88,transparent 65%)}main{max-width:1440px;padding:0 52px;margin:auto}header{height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff13}.brand{font-weight:700;font-size:25px;letter-spacing:-1px;color:inherit;text-decoration:none;display:flex;align-items:center;gap:12px}.brand-icon{background:var(--orange);color:#21122a;border-radius:11px;padding:3px 9px}.edition{font-size:10px;letter-spacing:2px;font-weight:500;margin-left:12px;color:var(--muted)}button{font:inherit;cursor:pointer;color:inherit;border:1px solid #ffffff26;background:#ffffff07;border-radius:10px;padding:10px 15px}button:hover{background:#ffffff16}button:focus-visible{outline:3px solid var(--orange);outline-offset:4px}.header-actions{display:flex;align-items:center;gap:24px;font-size:12px}.live{color:#c4a3ef}.heading{display:flex;justify-content:space-between;align-items:center;padding:34px 0 28px}.eyebrow{font-size:10px;letter-spacing:3px;color:var(--orange);font-weight:700}h1{font-size:34px;letter-spacing:1px;margin:12px 0 0}h1 span{font-size:12px;font-weight:400;letter-spacing:1px;color:var(--muted);margin-left:22px}.intro{font-size:12px;line-height:1.9;color:var(--muted)}.arcade{position:relative;border:1px solid #76618b66;border-radius:20px;overflow:hidden;box-shadow:0 20px 80px #0005;background:#221637}canvas{display:block;width:100%;aspect-ratio:2/1}.hud{position:absolute;z-index:5;top:22px;left:28px;right:24px;display:flex;align-items:center;gap:30px;pointer-events:none}.hud button{pointer-events:auto;font-size:18px;padding:6px 12px}.zone{margin-right:auto;width:200px;font-size:12px;font-weight:700;letter-spacing:1px}.track{height:3px;background:#ffffff24;margin-top:10px}.track i{display:block;background:var(--orange);height:100%;width:0}.stat{display:flex;flex-direction:column;gap:3px}.stat small{font-size:8px;letter-spacing:2px;color:#c8b6dc}.stat strong{font-size:24px}.life strong{font-size:17px;color:#ffb172;letter-spacing:4px}.overlay{position:absolute;inset:0;display:flex;align-items:center;padding:70px 7%;gap:30px;background:linear-gradient(90deg,#1a102cec,#20152a30);z-index:3}.overlay.hidden{display:none}.start-card{z-index:1;min-width:48%}h2{font-size:clamp(24px,3.2vw,46px);line-height:1.3;letter-spacing:1px;margin:22px 0}.start-card>p:not(.eyebrow){color:#c5b9d2;font-size:13px;line-height:2}.primary{margin-top:17px;min-width:220px;padding:17px 23px;font-weight:700;background:var(--orange);color:#21132d;border:0;box-shadow:0 5px 0 #a65229}.primary:hover{background:#ffc47d;transform:translateY(-1px)}.primary span{float:right}.best{margin-top:25px;color:#998ba8;font-size:11px}.best b{color:#e2cde9;margin:0 7px}.hero-art{position:relative;flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column}.hero-art img{width:95%;max-width:380px;filter:drop-shadow(0 20px 28px #100718);animation:hover 4s ease-in-out infinite}.orbit{position:absolute;width:95%;aspect-ratio:1;border:1px solid #e7b58b30;border-radius:50%;box-shadow:0 0 100px #ac6a3725,inset 0 0 80px #be6b3720}.art-caption{font-size:9px;letter-spacing:2px;margin-top:15px;color:#c6afcc}.bottom-hud{position:absolute;bottom:20px;left:28px;right:28px;display:flex;justify-content:space-between;font-size:10px;color:#d0bddd;pointer-events:none}.dash-meter{display:flex;align-items:center;gap:10px}.dash-meter>div{width:75px;height:4px;background:#ffffff24}.dash-meter i{height:100%;width:100%;display:block;background:#bf9fff}kbd{border:1px solid #ffffff22;padding:2px 5px;border-radius:4px;font-size:9px;font-family:inherit}.guide{display:grid;grid-template-columns:repeat(3,1fr);margin:25px 0 30px;border:1px solid #ffffff12;border-radius:12px;background:#ffffff02}.guide>div{display:flex;align-items:center;gap:17px;padding:10px 25px}.guide>div+div{border-left:1px solid #ffffff12}.guide-number{font-size:12px;color:#a987cb;border:1px solid #ffffff17;border-radius:50%;padding:8px}.guide p{display:flex;flex-direction:column;gap:8px;font-size:12px}.guide p span{font-size:10px;color:var(--muted)}footer{display:flex;justify-content:space-between;color:#70637e;font-size:9px;letter-spacing:1px;padding-bottom:28px}.touch-controls{display:none}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@keyframes hover{50%{transform:translateY(-14px) rotate(-3deg)}}@media(prefers-reduced-motion:reduce){.hero-art img{animation:none}}
.mobile-action,.mobile-tip{display:none}
#fullscreen[hidden]{display:none}
.arcade:fullscreen{width:100vw;height:100dvh;border:0;border-radius:0}
.arcade:fullscreen canvas{height:100%;width:100%;aspect-ratio:auto;min-height:0}
@media(max-width:900px),(pointer:coarse){
 html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
 main{max-width:none;margin:0;padding:0;width:100%;height:100%}
 header,.heading,.guide,footer{display:none}
 .arcade{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;border:0;border-radius:0;box-shadow:none;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
 canvas{width:100%;height:100%;aspect-ratio:auto;min-height:0}
 .hud{top:max(12px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));gap:12px;z-index:5}
 .zone{width:auto;flex:1;font-size:10px;min-width:70px;letter-spacing:0}
 .stat strong{font-size:20px}.stat small{font-size:8px}.life strong{font-size:13px;letter-spacing:1px;white-space:nowrap}
 .hud button{width:40px;height:44px;padding:0;flex-shrink:0;background:#21162cc9;font-size:20px}
 .mobile-action{display:block}
 .overlay{padding:100px max(25px,env(safe-area-inset-right)) 180px max(25px,env(safe-area-inset-left));align-items:center;background:linear-gradient(100deg,#1a102cef,#20152a65)}
 .start-card{width:100%;min-width:0}.eyebrow{font-size:9px;letter-spacing:2px}h2{font-size:clamp(25px,7vw,40px);margin:18px 0}
 .start-card>p:not(.eyebrow){font-size:12px;line-height:1.8}.primary{margin-top:10px;min-width:210px;padding:16px 22px}.best{margin-top:12px}.mobile-tip{display:block;color:#cbb5e2!important;font-size:10px!important;margin:18px 0 0}
 .hero-art{position:absolute;right:10px;bottom:185px;width:40%;max-width:260px;opacity:.5;pointer-events:none}.art-caption{display:none}
 .bottom-hud{bottom:calc(max(18px,env(safe-area-inset-bottom)) + 152px);left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right));font-size:10px}
 .bottom-hud>span{max-width:150px}.dash-meter kbd{display:none}.dash-meter>div{width:52px}
 .touch-controls{display:flex;position:absolute;bottom:max(18px,env(safe-area-inset-bottom));left:max(24px,env(safe-area-inset-left));right:max(24px,env(safe-area-inset-right));align-items:center;justify-content:space-between;z-index:4;pointer-events:none}
 #joystick{position:relative;width:128px;height:128px;border:1px solid #d5b7ff66;border-radius:50%;background:radial-gradient(circle,#9562b326,#241730b8);box-shadow:inset 0 0 24px #c48eff16;touch-action:none;pointer-events:auto}
 .joystick-guide{position:absolute;inset:0;display:grid;place-items:center;font-size:90px;font-weight:400;color:#d4b8f230;line-height:1}
 #joystick-knob{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px;border:1px solid #e7cbffb0;border-radius:50%;background:linear-gradient(140deg,#b497d8,#684b87);box-shadow:0 4px 16px #0006;pointer-events:none}
 .control-label{position:absolute;bottom:5px;width:100%;text-align:center;font-size:9px;color:#cfb7df;pointer-events:none}
 #touch-dash{pointer-events:auto;touch-action:none;width:92px;height:92px;border-radius:50%;border:2px solid #e5c6ff9c;background:linear-gradient(145deg,#c3a0ec,#835fae);box-shadow:0 5px 20px #12081c66;color:#261337;font-weight:700;font-size:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
 #touch-dash span{font-size:31px;line-height:1.1}#touch-dash:active{transform:scale(.94);background:#d3b6f3}
 .arcade:has(.overlay:not(.hidden)) .touch-controls{opacity:.35;pointer-events:none}.arcade:has(.overlay:not(.hidden)) .touch-controls>*{pointer-events:none}
}
@media(max-width:380px){.hud{gap:7px;left:12px;right:12px}.hud button{width:34px}.stat strong{font-size:17px}.life strong{font-size:11px}}
@media(orientation:landscape) and (max-height:600px){
 .overlay{padding:70px max(40px,env(safe-area-inset-right)) 75px max(40px,env(safe-area-inset-left));align-items:center}
 .start-card{max-width:70%}h2{font-size:28px;margin:10px 0}.start-card>.eyebrow{margin:0}.start-card>p:not(.eyebrow){font-size:11px;margin:8px 0;line-height:1.6}.primary{padding:12px 20px;margin:3px 0;min-width:190px}.best{display:none}.mobile-tip{font-size:9px!important;margin:9px 0 0!important}
 .hero-art{width:27%;right:9%;bottom:65px;opacity:.8}.bottom-hud{bottom:20px;left:calc(max(24px,env(safe-area-inset-left)) + 144px);right:calc(max(24px,env(safe-area-inset-right)) + 106px)}
 #joystick{width:112px;height:112px}#touch-dash{width:84px;height:84px}.touch-controls{bottom:max(14px,env(safe-area-inset-bottom))}
}
/* v1.2.0 — six-stage shooting adventure */
[hidden]{display:none!important}.rotate-overlay{display:none}
.boss-hud{position:absolute;z-index:2;top:86px;left:28%;right:13%;display:flex;align-items:center;gap:12px;font-size:11px;color:#ffb7c5;pointer-events:none}.boss-track{height:8px;flex:1;border:1px solid #ff779f66;border-radius:6px;background:#241129;overflow:hidden}.boss-track i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#c965b6,#ff9c78)}.boss-hud small{font-size:9px;min-width:44px}
.level-map{display:flex;gap:7px;margin-top:17px}.level-map span{display:grid;place-items:center;width:28px;height:27px;border:1px solid #c6a5e030;border-radius:7px;color:#907b9c;font-size:10px}.level-map .current{border-color:#ffba72;color:#ffba72;background:#ffb76813}.level-map .done{color:#b5dc9c;border-color:#b5dc9c80}.restart{display:block;margin-top:12px;padding:4px 0;background:none!important;border:0;font-size:10px;color:#b7a4c5;text-decoration:underline}
.combat-controls{display:flex;align-items:flex-end;gap:14px;pointer-events:none}#touch-fire{pointer-events:auto;touch-action:none;width:100px;height:100px;border-radius:50%;border:2px solid #ffe1a9b8;background:linear-gradient(140deg,#ffd48b,#ec9953);color:#3a2133;box-shadow:0 5px 24px #15091970;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px}#touch-fire span{font-size:32px;line-height:1.1}#touch-fire:active{transform:scale(.95);background:#ffe2a8}
@media(max-width:900px),(pointer:coarse){
 .arcade:has(.overlay:not(.hidden)) .combat-controls button{pointer-events:none}
 .life strong{font-size:17px}.zone{min-width:135px}.boss-hud{top:68px;left:25%;right:20%;font-size:10px;gap:8px}
 .combat-controls{gap:12px}#touch-dash{width:66px;height:66px;font-size:11px;margin-bottom:9px}#touch-dash span{font-size:24px}
 .bottom-hud{right:calc(max(24px,env(safe-area-inset-right)) + 206px)}
 .level-map{margin-top:10px;gap:5px}.level-map span{width:24px;height:23px;font-size:9px}.restart{position:absolute;right:max(24px,env(safe-area-inset-right));bottom:16px;font-size:10px}
 .hero-art{bottom:90px}.mobile-tip{margin-top:8px!important}.overlay{padding-bottom:65px}
}
@media(orientation:landscape) and (max-height:600px){.overlay{padding-top:66px;padding-bottom:60px}.start-card{max-width:68%}.level-map{position:absolute;right:12%;bottom:43px}.mobile-tip{font-size:9px!important}.hero-art{width:24%;bottom:96px}.bottom-hud{bottom:20px}.boss-hud{top:65px}#touch-fire{width:90px;height:90px}.boss-hud>span{max-width:150px}.boss-hud small{min-width:40px}}
@media(max-width:900px) and (orientation:portrait),(pointer:coarse) and (orientation:portrait){
 .rotate-overlay{display:flex;position:absolute;inset:0;z-index:30;background:radial-gradient(ellipse at 50% 35%,#342040,#120d20 75%);padding:32px;text-align:center;align-items:center;justify-content:center;flex-direction:column;gap:10px;touch-action:none}
 .rotate-overlay h2{font-size:27px;margin:14px 0}.rotate-overlay p{color:#c9b5d8;font-size:13px;line-height:2}.rotate-overlay .eyebrow{font-size:10px;color:#ffb868;letter-spacing:2px}.rotate-overlay small{color:#9984ad;font-size:10px;line-height:1.7}.rotate-phone{border:3px solid #cba8ee;border-radius:18px;width:120px;height:68px;color:#ffbf73;font-size:42px;display:grid;place-items:center;margin-bottom:20px;box-shadow:0 0 70px #be80ff20}
 .hud,.touch-controls,.bottom-hud,.boss-hud,.overlay{visibility:hidden}
}

.arcade:has(.overlay:not(.hidden)) .touch-controls{visibility:hidden}
.install-link{display:none;font-size:10px;padding:5px 0;border:0;background:none!important;color:#eccfa0;text-decoration:underline;margin-top:6px}
.install-help{position:absolute;inset:0;z-index:40;background:#140e22f7;display:grid;place-items:center;padding:24px;overflow:auto;touch-action:pan-y}.install-help>div{width:min(620px,100%)}.install-help h2{font-size:25px;margin:12px 0}.install-help p,.install-help li{font-size:12px;line-height:1.8;color:#d3c0e0}.install-help ol{padding-left:22px}.install-help .primary{margin-top:5px;min-width:130px;padding:12px 22px}.install-help .android-tip{font-size:10px;color:#ad98bd}
@media(max-width:900px),(pointer:coarse){.install-link{display:block}.start-card>.mobile-tip{font-size:9px!important}.overlay h2{margin:8px 0}.hero-art{pointer-events:none}}
@media(orientation:landscape) and (max-height:420px){.install-help{padding:14px 32px}.install-help h2{font-size:22px}.install-help p,.install-help li{font-size:11px;line-height:1.6}.install-help ol{margin:8px 0}.install-help .eyebrow{margin:0}.install-help .primary{padding:10px 20px}.overlay{padding-top:65px;padding-bottom:50px}}
@media(display-mode:standalone),(display-mode:fullscreen){.install-link{display:none!important}}

.boss-hud{background:#1c102bd9;border:1px solid #a3618938;padding:7px 10px;border-radius:8px}

/* Touch controls own their gestures, including nested button labels. */
.arcade canvas,.arcade button,.arcade button span,.touch-controls,.touch-controls *{touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

.arcade-home{pointer-events:auto;color:inherit;text-decoration:none;font-size:22px;display:grid;place-items:center;min-width:34px;height:40px;border:1px solid #ffffff26;border-radius:9px;background:#20162bc9;touch-action:manipulation}
#touch-fire.held{background:#ffe2a8;box-shadow:0 0 26px #ffbc6370,inset 0 0 15px #fff6}#touch-dash.held{background:#d3b6f3;box-shadow:0 0 26px #caa2ff70}