*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:#080f13;color:#e9e0cb;font-family:'Microsoft YaHei','PingFang SC',sans-serif;display:flex;align-items:center;justify-content:center;gap:64px;background-image:radial-gradient(ellipse at 60% 45%,#20383488,transparent 65%)}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:2px solid #edc980;outline-offset:3px}#stage{height:min(100dvh,940px);aspect-ratio:480/854;position:relative;overflow:hidden;isolation:isolate;background:#162b2a;box-shadow:0 0 0 1px #66736655,0 24px 100px #0009;user-select:none;touch-action:none}canvas{width:100%;height:100%;display:block}#hud{position:absolute;inset:0 0 auto;padding:20px 20px 8px;background:linear-gradient(#081818f5,#081818b0,transparent);pointer-events:none}header{display:flex;justify-content:space-between;align-items:center}.location{display:flex;align-items:center;gap:8px}.diamond{font-size:34px;color:#b7d6be}.location small{display:block;color:#b9c6b6;font-size:10px;letter-spacing:3px;margin-bottom:4px}.location b{font-size:17px;letter-spacing:2px}.buttons{display:flex;gap:6px;pointer-events:auto}.buttons button{border:1px solid #a6b19e55;background:#0c2321a8;border-radius:7px;height:32px;min-width:35px;font-size:11px}.health{display:flex;align-items:center;gap:9px;margin-top:16px;font-size:10px}.health b{min-width:62px;text-align:right;font-variant-numeric:tabular-nums}.hp-track{height:7px;flex:1;background:#061412;border:1px solid #8da09255;transform:skew(-12deg)}.hp-track i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#3f8873,#b0e3a9);box-shadow:0 0 9px #78dea755;transition:width .15s}.status{display:flex;justify-content:space-between;color:#b6c4b6;font-size:9px;margin-top:8px;font-variant-numeric:tabular-nums}#bossbar{position:absolute;top:145px;left:21%;right:21%;text-align:center;color:#f0bb98;font-size:10px;letter-spacing:2px}#bossbar div{height:5px;background:#160d0c;border:1px solid #aa7550;margin-top:7px}#bosshp{display:block;height:100%;background:linear-gradient(90deg,#a13a29,#ffb06a)}#toast{position:absolute;top:23%;left:8%;right:8%;text-align:center;font-size:15px;letter-spacing:2px;color:#ffdfa1;text-shadow:0 2px 6px #000,0 0 15px #d5a358;opacity:0;transition:opacity .25s;pointer-events:none}#bottom{position:absolute;inset:auto 0 0;height:140px;background:linear-gradient(transparent,#081614e8);pointer-events:none}#joy{pointer-events:auto;position:absolute;left:28px;bottom:37px;width:88px;height:88px;border:1px solid #cecea055;border-radius:50%;background:radial-gradient(#a5c6b518,#0c201344);box-shadow:inset 0 0 0 10px #a7b5a309;touch-action:none}#stick{position:absolute;left:25px;top:25px;width:36px;height:36px;border-radius:50%;border:1px solid #d5d8b88a;background:radial-gradient(at 35% 30%,#9ea993bb,#37584caa);box-shadow:0 4px 14px #0006}.joy-north{position:absolute;top:2px;left:39px;color:#b7c8b077;font-size:10px}.equipment{position:absolute;right:23px;bottom:50px;display:flex;gap:10px;align-items:center}.eq-icon{height:47px;width:43px;display:grid;place-items:center;font-size:33px;color:#e9c983;border:1px solid #af8e5488;border-radius:6px;background:linear-gradient(145deg,#8a683155,#152722)}.equipment small,.equipment b,.equipment div>span{display:block}.equipment small{font-size:9px;color:#a8b3a2;letter-spacing:2px}.equipment b{font-size:13px;color:#eed49a;margin:4px 0}.equipment div>span{font-size:9px;color:#c1cbb8}.control-tip{position:absolute;bottom:16px;left:0;width:100%;text-align:center;color:#b3bda8;font-size:9px;letter-spacing:1px}#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(#05141375,#051513e6);backdrop-filter:blur(3px);z-index:5}#overlay[hidden]{display:none}.modal{width:86%;text-align:center;padding:25px 22px 22px;border:1px solid #b8a77b66;background:linear-gradient(160deg,#1a3630eb,#0c1b1aee);box-shadow:0 20px 70px #0009,inset 0 0 40px #7499840c;border-radius:5px;position:relative}.modal:before,.modal:after{content:'◇';position:absolute;top:-12px;font-size:19px;color:#d7ba78;background:#142b25;padding:0 9px}.modal:before{left:20px}.modal:after{right:20px}#eyebrow{font-size:9px;letter-spacing:3px;color:#bac6b1}h2{font-family:'STKaiti','KaiTi','Microsoft YaHei',serif;font-size:44px;letter-spacing:7px;font-weight:700;color:#efdfb6;margin:13px 0 0;text-shadow:0 3px 8px #000}#subtitle{font-size:10px;letter-spacing:5px;color:#aabda5;margin:8px 0 0}#portrait{height:188px;background:url('assets/hero.png') center 8px/auto 210px no-repeat;margin:8px auto 0;filter:drop-shadow(0 5px 12px #0007);mask-image:linear-gradient(#000 70%,transparent)}#description{font-size:12px;line-height:1.9;color:#c4cfbb;margin:8px 0 16px}#guide{display:flex;flex-direction:column;gap:8px;font-size:10px;text-align:left;width:max-content;max-width:100%;margin:0 auto 22px;color:#b1bfa9}#start{width:100%;height:47px;border:1px solid #ffe0a8;background:linear-gradient(#d9b979,#ad8746);box-shadow:inset 0 0 0 3px #bb9b61,0 5px 24px #0005;border-radius:4px;color:#263629;font-size:16px;font-weight:bold;letter-spacing:3px}#start:disabled{opacity:.5}#footnote{display:block;font-size:8px;color:#a3b39d;margin-top:13px}.desktop-note{width:270px}.smallcaps{color:#88aa99;font-size:10px;letter-spacing:3px}.desktop-note h1{font-family:'KaiTi',serif;font-weight:normal;font-size:40px;letter-spacing:6px;margin:18px 0}.line{height:1px;width:50px;background:#c3ad77;margin:24px 0}.desktop-note p{font-size:12px;color:#a9b8aa;line-height:2.2}.desktop-note dl{margin:36px 0;font-size:11px;line-height:2}.desktop-note dt{color:#c6b989;float:left;width:45px}.desktop-note dd{margin-left:45px;color:#99b1a4}.desktop-note .muted{font-size:10px;color:#6f897d}@media(max-width:850px){.desktop-note{display:none}body{gap:0}#stage{height:min(100dvh,177.9167vw);max-width:100vw}}@media(max-height:600px){.location{gap:4px}.diamond{font-size:20px}.location small{font-size:7px;letter-spacing:1px}.location b{font-size:11px;letter-spacing:1px;white-space:nowrap}.buttons{gap:4px}.buttons button{height:24px;min-width:25px;font-size:8px;padding:0 4px;white-space:nowrap}.health{font-size:7px;gap:4px}.health b{min-width:41px}.status #objective{display:none}#toast{font-size:9px;letter-spacing:1px;top:22%}#bossbar{top:73px;font-size:7px;letter-spacing:0}#stage{height:100dvh}.modal{padding:12px}#portrait{height:85px;background-size:auto 110px}h2{font-size:26px}#guide{gap:4px;margin-bottom:10px}#description{margin:6px;font-size:10px}#hud{padding:9px}.health{margin-top:7px}#bottom{transform:scale(.75);transform-origin:bottom left;width:133.33%}.status{font-size:7px}#eyebrow{font-size:7px}}