*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#080e14;color:#f8eed4;font-family:-apple-system,BlinkMacSystemFont,'Noto Sans TC',sans-serif}body{display:flex;justify-content:center}#game{position:relative;width:min(100vw,500px);height:100dvh;overflow:hidden;background:#1e2929;touch-action:none}#canvas,canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.top,.hud,.bottom,#bossbar{position:absolute;z-index:2}.top{top:max(18px,env(safe-area-inset-top));left:20px;right:18px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:9px;text-shadow:0 2px 8px #000}.sigil{color:#f6bb5a;font-size:28px}.brand small,.hud small,.spell small{display:block;letter-spacing:.16em;font-size:9px;color:#e7c696;font-weight:700}.brand h1{font-size:15px;margin:3px 0 0;letter-spacing:.08em}.brand i{color:#d5a365;font-style:normal}button{font:inherit;cursor:pointer}#quality{color:#f3ddb6;background:#101c21bb;border:1px solid #d9b67b66;border-radius:20px;padding:8px 12px;font-size:11px}.hud{top:83px;left:20px;display:flex;gap:22px;text-shadow:0 2px 6px #000}.hud strong{display:block;font-size:19px;letter-spacing:.05em;margin-top:4px;font-variant-numeric:tabular-nums}.health #hearts{font-size:14px;color:#ffd399;margin-top:8px;letter-spacing:1px}#bossbar{display:none;top:150px;left:20px;right:20px}.bosslabel{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.13em;text-shadow:0 2px 4px #000}.bossline{height:5px;background:#161019bb;margin-top:6px;border-radius:4px;overflow:hidden}.bossline div{height:100%;background:linear-gradient(90deg,#b76dea,#f6a1d9);width:100%}#tip{position:absolute;z-index:2;top:43%;left:50%;transform:translate(-50%,-50%);width:80%;text-align:center;text-shadow:0 2px 12px #000;pointer-events:none;transition:opacity 1s}#tip b,#tip span,#tip small{display:block}#tip b{font-size:11px;letter-spacing:.25em;color:#ffcf81}#tip span{font-size:17px;letter-spacing:.1em;margin-top:12px}#tip small{font-size:10px;color:#d6d1be;margin-top:8px;letter-spacing:.04em}.bottom{bottom:max(25px,env(safe-area-inset-bottom));left:22px;right:22px;display:flex;align-items:end;justify-content:space-between;pointer-events:none}.spell{display:flex;gap:10px;align-items:center;text-shadow:0 2px 7px #000}.spell>span{font-size:21px;color:#ffc878}.spell b{display:block;font-size:13px;margin-top:4px;letter-spacing:.08em}#bomb{pointer-events:auto;position:relative;width:68px;height:68px;border:1px solid #ffdc9c;border-radius:50%;background:radial-gradient(circle,#f5b350bb,#68432fd9 55%,#211b23e8);box-shadow:0 0 25px #e9984277,inset 0 0 0 4px #e3b47644;color:#fff2bf}#bomb span{font-size:37px}#bomb em{position:absolute;right:-3px;bottom:0;border-radius:50%;background:#f2c785;color:#453224;font-style:normal;font-size:12px;font-weight:bold;width:21px;height:21px;line-height:21px}#end{position:absolute;inset:0;z-index:5;background:#091019c9;display:grid;place-items:center;backdrop-filter:blur(7px)}#end[hidden]{display:none}.endcard{text-align:center;border:1px solid #caa36b;background:#101c24ed;padding:42px 35px;width:80%;box-shadow:0 0 50px #0008}.endcard small{letter-spacing:.3em;color:#e6bf83}.endcard h2{font-size:30px;letter-spacing:.2em;color:#ffe0a1}.endcard p{color:#d9d1c4}.endcard button{margin-top:15px;padding:13px 25px;background:#efc37e;color:#2d2522;border:0;border-radius:4px;font-weight:bold}#loading{position:absolute;inset:0;display:grid;place-items:center;background:#101a20;color:#e4bd82;letter-spacing:.15em;z-index:10}

.light-shafts{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;mix-blend-mode:screen}.light-shafts i{position:absolute;top:-30%;height:75%;width:14%;transform:rotate(-27deg);transform-origin:top center;background:linear-gradient(180deg,rgba(255,224,151,.20),rgba(255,219,145,.09) 52%,transparent 100%);filter:blur(8px)}.light-shafts i:nth-child(1){left:18%}.light-shafts i:nth-child(2){left:52%;width:10%;opacity:.8}.light-shafts i:nth-child(3){left:79%;width:12%;opacity:.65}

.factory-back{position:fixed;z-index:20;top:max(58px,env(safe-area-inset-top));left:calc(50% - min(50vw,250px) + 20px);font-size:10px;color:#ffe0a6;text-shadow:0 2px 6px #000;text-decoration:none}
#bossbar{display:block;top:145px}#bossstate{font-size:10px;color:#aee3ff;letter-spacing:.08em;margin-top:5px;text-shadow:0 2px 5px #000}#effects{position:absolute;z-index:3;bottom:max(20px,env(safe-area-inset-bottom));left:18px;right:18px;display:flex;gap:6px;flex-wrap:wrap;pointer-events:none}.effect-badge{background:#122436dd;color:#ffe2a4;border:1px solid #e5c58888;border-radius:20px;padding:5px 9px;font-size:10px}.factory-back{position:absolute;z-index:3;top:68px;right:20px;font-size:10px;color:#ffe0a6;text-shadow:0 2px 6px #000;text-decoration:none}#tip{top:51%}.hud{top:85px}

.top-actions{display:flex;gap:6px;align-items:center}#pause,#musicbtn{width:38px;height:38px;border-radius:50%;border:1px solid #e4c38c99;background:#101c21dd;color:#ffe2ae;font-weight:bold;font-size:16px}.overlay{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:#0a111bdc;backdrop-filter:blur(7px)}.overlay[hidden]{display:none}.menu-panel{width:min(90%,410px);max-height:84dvh;overflow:auto;padding:25px;background:#101d29f5;border:1px solid #c7a46f;text-align:center;box-shadow:0 12px 70px #0008}.menu-panel small{font-size:9px;letter-spacing:.25em;color:#edc58e}.menu-panel h2{font-size:23px;letter-spacing:.14em;color:#ffe1a4;margin:12px 0}.menu-panel p{font-size:12px;line-height:1.6;color:#c6c7c5}.menu-panel button{background:#243544;color:#fbe5bd;border:1px solid #a78a68;padding:11px;border-radius:6px}.compact button{display:block;width:100%;margin:9px 0}.compact button:first-of-type{background:#e5bd7e;color:#251e20;font-weight:bold}#stagegrid{display:grid;grid-template-columns:1fr 1fr;gap:7px;text-align:left}#stagegrid button{min-height:53px;text-align:left;font-size:12px;line-height:1.4}#stagegrid button:disabled{opacity:.4}#stagegrid button small{display:block;letter-spacing:.05em}.menu-link{display:inline-block;color:#eed29a;margin-top:18px;font-size:12px}#confirmleave{padding:8px;border:1px solid #cf9b69;margin-top:8px}.factory-back{display:none}.hazard-legend{position:absolute;left:18px;bottom:50px;font-size:10px;color:#ffb8a3}.hud{gap:16px}#bossstate{font-weight:bold}body.contrast #bossstate{color:#d7f9ff;text-shadow:0 1px 3px #000,0 0 7px #000;font-size:11px}body.contrast #hearts{color:#fff0bd;text-shadow:0 0 4px #222}body.contrast .bossline{height:7px}

#canvas{background:#293747 url('ruins-v1.webp') center center / cover no-repeat}

#musicbtn.off{opacity:.45;text-decoration:line-through}
.menu-music{display:block;margin:14px auto 0;min-width:140px}

body.compact-hud .brand div{display:none}body.compact-hud .brand{min-width:0}body.compact-hud .hud{top:65px}body.compact-hud #bossbar{top:120px}body.compact-hud #bossstate{font-size:9px}#perftip,#perfdebug{position:absolute;z-index:30;background:#101b28df;color:#fff2c8;padding:6px 9px;border-radius:6px;font:11px sans-serif;pointer-events:none}#perftip{left:50%;top:195px;transform:translateX(-50%);white-space:nowrap}#perfdebug{right:8px;bottom:8px;color:#c8ffca}#perftip[hidden]{display:none}

/* Compact safe-area HUD */
.top{top:max(10px,env(safe-area-inset-top));left:auto;right:12px;z-index:5}.top-actions{gap:6px}#bossbar,body.compact-hud #bossbar{display:block;position:absolute;top:max(11px,env(safe-area-inset-top));left:14px;right:106px;z-index:4}.bosslabel{font-size:12px;letter-spacing:0}.bossline,body.contrast .bossline{height:8px;margin-top:4px}#bossstate,body.contrast #bossstate{position:fixed;left:50%;top:max(55px,calc(env(safe-area-inset-top) + 48px));transform:translateX(-50%);white-space:nowrap;font-size:11px;transition:opacity .6s;pointer-events:none}.hud,body.compact-hud .hud{top:auto;bottom:max(10px,env(safe-area-inset-bottom));left:10px;right:10px;display:flex;justify-content:space-between;gap:8px;padding:7px 10px;background:#0b1421c9;border-radius:8px}.hud strong{font-size:15px;margin-top:2px}.hud small{font-size:9px}.health #hearts{font-size:13px;margin-top:4px;letter-spacing:0}#effects{bottom:max(65px,calc(env(safe-area-inset-bottom) + 58px))}#perftip{top:80px}#perfdebug{bottom:max(65px,calc(env(safe-area-inset-bottom) + 58px))}#sprites-debug{position:fixed;z-index:100;inset:0;overflow:auto;background:#162232;color:#fff;padding:12px}#sprites-debug h2{font-size:18px}#sprites-debug>div{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}#sprites-debug figure{margin:0;background:#e8e1d6;color:#202830;text-align:center;border-radius:5px;overflow:hidden}#sprites-debug i{display:block;aspect-ratio:1;background-image:url('assets/sprites-atlas-v1.webp');background-size:300% 400%;background-repeat:no-repeat}#sprites-debug figcaption{font-size:9px;overflow-wrap:anywhere;padding:3px}

[hidden]{display:none!important}
#title,#stagemenu{backdrop-filter:none;background:linear-gradient(180deg,#2a1b5ad0 0%,#3b2a7a2e 42%,#2a1b5aa8 100%),url(assets/ui-bg-v1.webp) center/cover}
#stagemenu{background:linear-gradient(180deg,#ffffff55 0%,#ffffff00 38%,#ffffff44 100%),url(assets/ui-bg-v1.webp) center/cover;display:block}
.title-ui{display:block;overflow:hidden}
.title-box{position:absolute;top:max(15%,96px);left:0;right:0;text-align:center;color:#fff3d6}
.title-box small{letter-spacing:.38em;color:#ffe3a6;font-size:11px;font-weight:700}
.title-box h1{margin:6px 0 0;font-size:60px;letter-spacing:.08em;color:#fff3d6;text-shadow:0 0 24px #ffb94d,0 4px 14px #3b2670}
.title-box h2{margin:0;font-size:24px;letter-spacing:.5em;padding-left:.5em;color:#ffe3a6;font-weight:600;text-shadow:0 2px 10px #3b2670}
#titleprogress{margin:14px 0 0;font-size:13px;color:#fff;opacity:.9;text-shadow:0 1px 6px #2a1a5a}
.title-mascot{position:absolute;left:50%;bottom:27%;width:min(62%,280px);transform:translateX(-50%);animation:floaty 4.2s ease-in-out infinite}
.title-mascot img{width:100%;display:block;filter:drop-shadow(0 12px 18px #2a1a5088)}
@keyframes floaty{50%{transform:translateX(-50%) translateY(-9px)}}
.title-actions{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 30px);display:flex;flex-direction:column;align-items:center;gap:12px}
.title-actions button{width:min(76%,290px);padding:13px;font-size:16px;border-radius:14px;border:1px solid #f2d79a;background:#2a1f4cd0;color:#ffeccb}
.title-actions .primary{background:linear-gradient(180deg,#ffd27a,#e59a3a);color:#3a2208;font-weight:800;font-size:19px;border:0;box-shadow:0 6px 24px #e59a3a88}
#stagemenu .menu-panel{position:absolute;inset:0;width:auto;max-height:none;border:0;background:none;box-shadow:none;padding:max(52px,env(safe-area-inset-top)) 16px 28px;overflow:auto}
#stagemenu .menu-panel small{color:#7a5fb0;letter-spacing:.3em;font-weight:700}
#stagemenu h2{margin:4px 0 6px;font-size:34px;letter-spacing:.12em;color:#4a3282;text-shadow:0 0 14px #fff,0 2px 10px #fff}
#stagemenu .menu-panel>p{margin:0 0 6px;font-size:12px;color:#5a4a86}
#stagegrid{grid-template-columns:1fr 1fr;gap:4px 10px;margin-top:8px;padding-bottom:6px}
#stagegrid .node{display:grid;justify-items:center;text-align:center;background:none;border:0;box-shadow:none;padding:0 0 4px;color:#3a2866}
#stagegrid .node:nth-child(even){margin-top:30px}
.bubble{width:82px;height:82px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fffffff0,#e8ddffa0 58%,#b9a3ff66);border:2px solid #ffffffcc;box-shadow:0 6px 20px #6a4fb766,inset 0 0 16px #fff9;display:grid;place-items:center;overflow:hidden}
.bubble img{width:80%;height:80%;object-fit:contain}
#stagegrid .node small{margin-top:4px;font-size:9px;color:#7a5fb0}
#stagegrid .node b{font-size:14px;color:#3a2866;text-shadow:0 1px 6px #fff}
#stagegrid .node i{font-style:normal;font-size:11px;color:#8a5a12}
#stagegrid .node.locked .bubble{filter:grayscale(1) brightness(.8);opacity:.65}
#stagegrid .node:not(:disabled):active .bubble{transform:scale(.94)}
#stagemenu .menu-music{background:#ffffffaa;color:#4a3282;border:1px solid #b9a3ff}
#stagemenu .menu-link{color:#4a3282}
#stageback{position:absolute;z-index:3;top:max(12px,env(safe-area-inset-top));right:16px;width:42px;height:42px;border-radius:50%;border:1px solid #ffffffcc;background:#ffffffaa;color:#4a3282;font-size:26px;line-height:1;padding:0 0 3px}
#stagegrid .node .label{display:grid;justify-items:center;margin-top:6px;padding:3px 10px;border-radius:12px;background:#ffffffb8;backdrop-filter:blur(4px)}
#stagegrid .node small{margin-top:0}