:root{--paper: #f4efe4;--ink: #1e2a36;--red: #d8453b;--gold: #e2b659;--sea: #4fc3c9;--moss: #86c06c;--u: min(1vh, .62vw);--kai: "STKaiti", "KaiTi", "Kaiti SC", "AR PL UKai CN", "Songti SC", "SimSun", serif;--hei: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Hiragino Sans GB", system-ui, sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#0e1820;font-family:var(--hei);color:var(--paper);user-select:none;-webkit-user-select:none}#game{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}.hidden{display:none!important}b{font-weight:600;font-variant-numeric:tabular-nums}.screen{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:30}.screen.dim{background:radial-gradient(ellipse at center,#0e182073,#0e1820d1);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}#loading{background:linear-gradient(180deg,#17303f,#0e1820);z-index:50}.load-inner{width:min(420px,70vw);text-align:center}.logo-small{font-family:var(--kai);font-size:44px;letter-spacing:.3em;margin-left:.3em}.load-bar{height:3px;background:#f4efe42e;margin:26px 0 12px}.load-bar i{display:block;height:100%;width:0;background:var(--gold);transition:width .2s}#load-text{font-size:13px;color:#f4efe4b3;letter-spacing:.12em}#title{justify-content:flex-start;background:linear-gradient(90deg,#0c1822b8,#0c182259 38%,#0c182200 62%)}.title-block{margin-left:9vw;max-width:460px}.title-sub{font-family:var(--kai);color:var(--gold);letter-spacing:.5em;font-size:18px}.title-block h1{font-family:var(--kai);font-weight:400;font-size:clamp(64px,11vh,120px);margin:6px 0 0;letter-spacing:.14em;text-shadow:0 4px 24px rgba(0,0,0,.45)}.title-line{width:180px;height:2px;margin:14px 0 18px;background:linear-gradient(90deg,var(--gold),transparent)}.title-desc{font-size:16px;line-height:1.9;color:#f4efe4e6;margin:0 0 30px;text-shadow:0 1px 8px rgba(0,0,0,.6)}.title-keys{margin-top:26px;font-size:12.5px;color:#f4efe4b8;letter-spacing:.04em;text-shadow:0 1px 6px rgba(0,0,0,.7)}.btn-main,.btn-ghost{font-family:var(--kai);font-size:22px;letter-spacing:.4em;padding:10px 36px 10px 44px;cursor:pointer;border:none;display:block;transition:transform .12s,filter .12s}.btn-main{color:var(--ink);background:linear-gradient(180deg,#f0cb7a,var(--gold));clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}.btn-ghost{color:var(--paper);background:transparent;border:1px solid rgba(244,239,228,.45);font-size:17px;margin-top:12px}.btn-main:hover,.btn-ghost:hover{transform:translate(4px);filter:brightness(1.08)}.panel{background:#1e2a36e6;border-top:2px solid var(--gold);padding:30px 40px 34px;min-width:380px;clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%)}.panel.wide{min-width:460px}.panel h2{font-family:var(--kai);font-weight:400;font-size:36px;letter-spacing:.2em;margin:0 0 14px}.panel h2.red{color:var(--red)}.panel h2.gold{color:var(--gold);font-size:46px}.panel p{font-size:15px;line-height:1.8;color:#f4efe4d9;margin:0 0 22px;max-width:420px}.keys-grid{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:8px 14px;font-size:13.5px;margin-bottom:20px;align-items:center}.keys-grid span{color:var(--gold);font-weight:600;white-space:nowrap}.keys-grid em{font-style:normal;color:#f4efe4d9}.row{display:flex;gap:22px;margin-bottom:20px;font-size:14px}.opt{cursor:pointer}.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px 26px;margin-bottom:26px;font-size:14px}.stats div{display:flex;justify-content:space-between;border-bottom:1px solid rgba(244,239,228,.16);padding-bottom:6px}.stats b{color:var(--gold)}#hud{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;pointer-events:none}#minimap-wrap{position:absolute;left:calc(var(--u) * 3);top:calc(var(--u) * 3);width:184px;height:184px}#minimap{width:184px;height:184px;border-radius:50%;display:block}.mm-ring{position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;border-radius:50%;border:2px solid rgba(226,182,89,.9);box-shadow:0 0 0 1px #1e2a36cc,0 4px 16px #00000059}.mm-n{position:absolute;top:-9px;left:50%;transform:translate(-50%);font-family:var(--kai);font-size:13px;color:var(--ink);background:var(--gold);padding:0 5px;line-height:16px}#region-name{position:absolute;left:50%;top:16vh;transform:translate(-50%);font-family:var(--kai);font-size:40px;letter-spacing:.4em;text-shadow:0 2px 14px rgba(0,0,0,.55);opacity:0;transition:opacity .8s;white-space:nowrap}#region-name.show{opacity:1}#region-name:after{content:"";display:block;height:2px;margin-top:8px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}.tag{background:#f4efe4f0;color:var(--ink);border-left:3px solid var(--gold);clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);box-shadow:0 6px 18px #00000040}#quest{position:absolute;left:calc(var(--u) * 3);top:calc(var(--u) * 3 + 208px);width:236px;padding:10px 14px 16px;transform-origin:20px -14px;animation:sway 5s ease-in-out infinite}#quest.pulse{animation:unfold .5s ease-out,sway 5s ease-in-out .5s infinite}.tag-string{position:absolute;left:18px;top:-14px;width:2px;height:14px;background:var(--red)}.tag-title{font-family:var(--kai);font-size:18px;letter-spacing:.14em;color:var(--red);margin-bottom:6px}#quest-body{font-size:13.5px;line-height:1.7}#quest-body .done{color:#5d9a48}#quest-body .done:before{content:"✓ "}#quest-body .todo:before{content:"◇ ";color:var(--gold)}@keyframes sway{0%,to{transform:rotate(-.5deg)}50%{transform:rotate(.5deg)}}@keyframes unfold{0%{transform:scaleY(.2) rotate(-3deg);opacity:.3}60%{transform:scaleY(1.04) rotate(1.5deg)}to{transform:scaleY(1) rotate(-.5deg);opacity:1}}#vitals{position:absolute;left:50%;bottom:calc(var(--u) * 4);transform:translate(-50%);display:flex;align-items:center;gap:12px}.lv{font-family:var(--kai);font-size:15px;background:#1e2a36d1;border:1px solid var(--gold);padding:3px 10px;white-space:nowrap}.lv b{font-size:20px;color:var(--gold);margin-left:3px}.bars{width:min(340px,34vw)}.hp-track{position:relative;height:13px;background:#1e2a36d1;border:1px solid rgba(244,239,228,.5);overflow:hidden;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}.hp-track i{position:absolute;left:0;top:0;bottom:0;width:100%}#hp-lag{background:#f1e2b0;transition:width .6s .25s}#hp-fill{background:linear-gradient(180deg,#a6dc86,var(--moss));transition:width .12s}#hp-fill.low{background:linear-gradient(180deg,#ef7a6c,var(--red))}#hp-text{position:absolute;top:0;right:0;bottom:0;left:0;text-align:center;font-size:10.5px;line-height:12px;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}.st-track,.xp-track{height:3px;margin-top:3px;background:#1e2a36b3}.st-track i{display:block;height:100%;background:#ffd95e}.xp-track i{display:block;height:100%;background:var(--sea);transition:width .3s}.coin{display:flex;align-items:center;gap:6px;font-size:15px;background:#1e2a36d1;padding:4px 12px 4px 8px}.coin-ico{width:13px;height:13px;background:var(--gold);transform:rotate(45deg);box-shadow:inset 0 0 0 2px #fff3c9;display:inline-block}#skills{position:absolute;right:calc(var(--u) * 4);bottom:calc(var(--u) * 4);display:flex;align-items:flex-end;gap:14px}.skill{position:relative;width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3a4d60,var(--ink));box-shadow:0 0 0 2px #b08a3e,0 0 0 4px #1e2a36d9,0 5px 14px #0006}.skill.big{width:78px;height:78px}.skill.small{width:50px;height:50px}.skill svg{position:absolute;top:0;right:0;bottom:0;left:0;transform:rotate(-90deg)}.skill circle{fill:none;stroke-width:3;stroke-dasharray:100.53}.skill .cd{stroke:#0e1820c7;stroke-width:18;stroke-dasharray:56.55;stroke-dashoffset:56.55}.skill .en{stroke:var(--sea);stroke-dashoffset:100.53}.sk-ico{position:absolute;top:18%;right:18%;bottom:18%;left:18%;background-position:center;background-repeat:no-repeat;background-size:contain}.ico-e{background:conic-gradient(from 20deg,transparent 0 25%,#ff9cc0 25% 30%,transparent 30% 58%,#ffd1e1 58% 64%,transparent 64%);border-radius:50%;mask:radial-gradient(circle,transparent 34%,#000 36% 68%,transparent 70%);-webkit-mask:radial-gradient(circle,transparent 34%,#000 36% 68%,transparent 70%)}.ico-q{top:22%;right:22%;bottom:22%;left:22%;background:#ffd1e1;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}.ico-food{top:24%;right:24%;bottom:24%;left:24%;border-radius:50% 50% 46% 46%;background:radial-gradient(circle at 50% 30%,#fff4d6 0,#fff4d6 30%,#e9a45a 32%,#e9a45a)}.sk-key{position:absolute;right:-4px;bottom:-4px;min-width:20px;height:20px;line-height:20px;text-align:center;font-size:12px;font-weight:700;color:var(--ink);background:var(--paper);border-radius:3px}.sk-count{position:absolute;left:-4px;top:-4px;min-width:18px;height:18px;line-height:18px;text-align:center;font-size:12px;color:var(--ink);background:var(--gold);border-radius:9px}.sk-cd{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:20px;text-shadow:0 1px 4px #000}.skill.ready{box-shadow:0 0 0 2px var(--gold),0 0 0 4px #1e2a36d9,0 0 18px #4fc3c9e6}.skill.ready .en{stroke:#9ff3f6}#prompt{position:absolute;left:56%;top:54%;padding:7px 18px 9px 10px;font-size:15px;display:flex;align-items:center;gap:10px;animation:unfold .18s ease-out}.key{display:inline-block;min-width:24px;height:24px;line-height:24px;text-align:center;font-weight:700;color:var(--paper);background:var(--ink);border-radius:3px}#toast-area{position:absolute;left:50%;top:22vh;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:6px}.toast{font-size:14px;padding:5px 20px;background:linear-gradient(90deg,transparent,rgba(30,42,54,.85) 18%,rgba(30,42,54,.85) 82%,transparent);animation:toast 2.4s forwards;white-space:nowrap}@keyframes toast{0%{opacity:0;transform:translateY(8px)}10%,80%{opacity:1;transform:none}to{opacity:0;transform:translateY(-8px)}}#banner{position:absolute;left:0;right:0;top:30vh;text-align:center;padding:14px 0 16px;background:linear-gradient(90deg,transparent,rgba(30,42,54,.8) 30%,rgba(30,42,54,.8) 70%,transparent);animation:banner 3s forwards}#banner .b1{font-family:var(--kai);font-size:34px;letter-spacing:.4em;color:var(--gold)}#banner .b2{font-size:14px;margin-top:4px;letter-spacing:.15em}@keyframes banner{0%{opacity:0;transform:scaleX(.6)}12%,82%{opacity:1;transform:none}to{opacity:0}}#boss-bar{position:absolute;left:50%;top:calc(var(--u) * 4);transform:translate(-50%);width:min(520px,46vw);text-align:center}.boss-name{font-family:var(--kai);font-size:22px;letter-spacing:.3em;text-shadow:0 2px 8px rgba(0,0,0,.7);margin-bottom:5px}.boss-track{height:9px;background:#1e2a36d9;border:1px solid var(--gold);clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,8px 100%,0 50%)}.boss-track i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#f0a23f,var(--red));transition:width .15s}#dmg-layer,#marker-layer{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}.dmg{position:absolute;font-weight:800;font-size:22px;color:#fff;text-shadow:0 0 3px #1e2a36,0 2px 0 #1e2a36,0 0 8px rgba(30,42,54,.8);transform:translate(-50%,-50%);animation:dmg .75s ease-out forwards;font-variant-numeric:tabular-nums}.dmg.crit{font-size:31px;color:#ffe27a}.dmg.player{color:#ff8478}@keyframes dmg{0%{opacity:0;margin-top:6px;scale:.6}15%{opacity:1;scale:1.25}30%{scale:1}to{opacity:0;margin-top:-46px}}.marker{position:absolute;transform:translate(-50%,-100%);text-align:center;font-size:12px;text-shadow:0 1px 4px #000;white-space:nowrap}.marker i{display:block;width:16px;height:16px;margin:0 auto 3px;background:var(--gold);clip-path:polygon(50% 0,100% 40%,50% 100%,0 40%);box-shadow:inset 0 0 0 3px #fff3c9}.marker.npc i{background:var(--sea)}.marker.edge i{clip-path:polygon(50% 0,100% 100%,0 100%)}#dialog{position:absolute;left:50%;bottom:calc(var(--u) * 6);transform:translate(-50%);width:min(760px,78vw);padding:18px 30px 24px;background:linear-gradient(180deg,#1e2a3666,#1e2a36eb 30%);border-bottom:2px solid var(--gold);pointer-events:auto;cursor:pointer}.dlg-name{font-family:var(--kai);font-size:24px;color:var(--gold);letter-spacing:.2em;margin-bottom:8px;text-align:center}.dlg-name:after{content:"";display:block;width:120px;height:1px;margin:6px auto 0;background:linear-gradient(90deg,transparent,var(--gold),transparent)}.dlg-text{font-size:17px;line-height:1.8;min-height:62px;text-align:center}.dlg-next{position:absolute;right:22px;bottom:6px;font-size:11.5px;color:#f4efe499}#vignette-hurt{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:9;opacity:0;background:radial-gradient(ellipse at center,transparent 52%,rgba(216,69,59,.55) 100%);transition:opacity .5s}#vignette-hurt.on{opacity:1;transition:opacity .05s}#flash{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:9;opacity:0}