:root{--muc:#0a1012d1;--muc-2:#121e1ee6;--kim:#e8c070;--kim-2:#a8813a;--son:#c0392b;--son-2:#7a1712;--ngoc:#4fd1b0;--ngoc-2:#1f6f5f;--giay:#f1e4c4;--text:#f6efe0;--muted:#c9bfa8;--serif:"Cormorant Garamond", Georgia, serif;--brush:"Ma Shan Zheng", "KaiTi", "STKaiti", serif;--cloud:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23e8c070' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M3 45V20C3 10 10 3 20 3h25'/%3E%3Cpath d='M9 39V22c0-7 6-13 13-13h17'/%3E%3Cpath d='M15 28c0-7 9-9 11-3 2 5-4 8-6 5'/%3E%3C/g%3E%3C/svg%3E")}*{box-sizing:border-box}html,body{height:100%;color:var(--text);-webkit-user-select:none;user-select:none;background:#070b0d;margin:0;font:14px/1.4 Be Vietnam Pro,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;overflow:hidden}#world{cursor:grab;outline:none;width:100%;height:100%;display:block;position:fixed;top:0;bottom:0;left:0;right:0}#world:active{cursor:grabbing}#hud{pointer-events:none;position:fixed;top:0;bottom:0;left:0;right:0}#hud button,#hud .hud-dialog,#hud .hud-skills{pointer-events:auto}kbd{min-width:1.5em;color:var(--kim);text-align:center;background:#00000059;border:1px solid #e8c07080;border-radius:3px;padding:0 4px;font:700 .7rem/1.45 system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;display:inline-block}.hud-player,.hud-target,.hud-quest,.hud-skills,.hud-help,.hud-dialog,.create-card{background:radial-gradient(120% 90% at 0% 0%, #4fd1b01a, transparent 55%), linear-gradient(160deg, var(--muc-2), var(--muc));border:1px solid var(--kim-2);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);border-radius:6px;position:relative;box-shadow:inset 0 0 0 3px #00000073,inset 0 0 0 4px #e8c07047,0 8px 28px #00000073}.hud-player:before,.hud-player:after,.hud-quest:before,.hud-dialog:before,.hud-dialog:after,.create-card:before,.create-card:after{content:"";background:var(--cloud) center / contain no-repeat;pointer-events:none;width:26px;height:26px;position:absolute}.hud-player:before,.hud-dialog:before,.create-card:before,.hud-quest:before{top:-4px;left:-4px}.hud-player:after,.hud-dialog:after,.create-card:after{bottom:-4px;right:-4px;transform:rotate(180deg)}.seal{background:linear-gradient(145deg, #d8473a, var(--son-2));color:#fff4e6;min-width:30px;height:30px;font:400 1.1rem/1 var(--brush);letter-spacing:.05em;text-shadow:0 1px 1px #0006;border-radius:4px;place-items:center;padding:0 4px;font-style:normal;display:inline-grid;box-shadow:inset 0 0 0 2px #ffdcbe8c,0 2px 6px #00000080}.seal.big{writing-mode:vertical-rl;border-radius:8px;min-width:84px;height:84px;font-size:2.6rem}.bar{background:#0009;border:1px solid #e8c07066;border-radius:2px;height:15px;margin-top:5px;position:relative;overflow:hidden}.bar:before,.bar:after{content:"";background:var(--kim);z-index:2;width:7px;height:7px;position:absolute;top:50%;transform:translateY(-50%)rotate(45deg)}.bar:before{left:-4px}.bar:after{right:-4px}.bar i{transition:width .18s;position:absolute;top:0;bottom:0;left:0;right:auto}.bar span{z-index:1;text-align:center;text-shadow:0 1px 2px #000;font-size:.68rem;font-weight:700;line-height:15px;display:block;position:relative}.bar.hp i{background:linear-gradient(180deg, #ef6a4f, var(--son) 60%, var(--son-2))}.bar.mp i{background:linear-gradient(#7fe3d0,#2fa5a0 60%,#1b5f66)}.bar.xp{height:11px}.bar.xp i{background:linear-gradient(90deg,#a8813a,#ffe7a8,#e8c070,#ffe7a8,#a8813a) 0 0/200% 100%;animation:3s linear infinite shimmer}.bar.xp span{color:#fff6dc;text-shadow:0 0 3px #000,0 1px 2px #000;font-size:.62rem;line-height:11px}@keyframes shimmer{to{background-position:-200% 0}}.hud-player{width:300px;padding:10px 14px 10px 54px;position:absolute;top:14px;left:14px}.hud-player>.seal{writing-mode:vertical-rl;width:32px;height:64px;font-size:1.25rem;position:absolute;top:12px;left:12px}.hp-name{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.hp-name b{font-family:var(--serif);color:var(--kim);text-shadow:0 0 10px #e8c07059;font-size:1.4rem}.hp-name span{font-size:.76rem;font-weight:700}.hp-row{align-items:center;gap:12px;margin-top:7px;font-size:.82rem;display:flex}.hp-row button{margin-left:auto}.hud-btn{border:1px solid var(--kim-2);color:var(--giay);cursor:pointer;background:linear-gradient(#283836f2,#0e1618f2);border-radius:3px;padding:5px 12px;font:600 .8rem/1.3 inherit;transition:border-color .15s,box-shadow .15s}.hud-btn:hover{border-color:var(--kim);box-shadow:0 0 10px #e8c07059}.hud-btn.primary{background:linear-gradient(180deg, #d8473a, var(--son-2));color:#fff4e6;border-color:#f0a58f}#h-break{opacity:.55}#h-break.ready{opacity:1;background:linear-gradient(180deg, #ffe7a8, var(--kim) 50%, var(--kim-2));color:#2a1c05;border-color:#fff2c8;animation:1.2s ease-in-out infinite glow}@keyframes glow{50%{box-shadow:0 0 20px #ffdc8ce6}}.hud-target{text-align:center;border-color:#b4483a;width:320px;padding:8px 14px;position:absolute;top:14px;left:50%;transform:translate(-50%)}.hud-target[hidden]{display:none}.hud-target b{font-family:var(--serif);margin-right:8px;font-size:1.15rem}.hud-target span{font-size:.76rem;font-weight:700}.hud-map{text-align:center;width:200px;position:absolute;top:12px;right:12px}.hud-map canvas{border:2px solid var(--kim);box-shadow:0 0 0 4px #0a1012d9, 0 0 0 5px var(--kim-2), 0 8px 24px #00000080;background:#222;border-radius:50%;margin:6px auto 0;display:block}.map-zone{background:linear-gradient(90deg, transparent, var(--muc) 15%, var(--muc) 85%, transparent);font-family:var(--serif);border-radius:2px;align-items:center;gap:6px;padding:3px 14px;font-size:1.1rem;font-weight:700;display:inline-flex}.map-xy{color:var(--muted);text-shadow:0 1px 2px #000;margin-top:4px;font-size:.7rem}.hud-quest{gap:3px;width:250px;padding:10px 12px 10px 14px;display:grid;position:absolute;top:276px;right:14px}.hud-quest small{color:var(--kim);letter-spacing:.14em;text-transform:uppercase;align-items:center;gap:8px;font-size:.66rem;display:flex}.hud-quest small .seal{letter-spacing:0;min-width:0;height:22px;padding:0 5px;font-size:.9rem}.hud-quest b{font-family:var(--serif);font-size:1.1rem}.hud-quest span{color:var(--muted);font-size:.8rem}.hud-quest em{color:var(--text);font-style:normal;font-weight:700}.hud-quest .ok{color:var(--ngoc)}.hud-skills{border-radius:40px;gap:10px;padding:10px 16px;display:flex;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.slot{border:2px solid var(--kim);width:58px;height:58px;color:var(--text);cursor:pointer;background:radial-gradient(circle at 40% 30%,#4b8f7f,#183e38 55%,#0b1c1a);border-radius:50%;transition:transform .12s;position:relative;overflow:hidden;box-shadow:inset 0 0 0 3px #00000073,inset 0 0 12px #4fd1b059,0 3px 8px #00000080}.slot:hover{transform:translateY(-2px)}.slot .ic{filter:drop-shadow(0 0 6px #fff0c873);font-size:1.55rem}.slot kbd{background:var(--son-2);color:#fff4e6;border-color:#f0a58f;min-width:0;padding:0 4px;font-size:.56rem;position:absolute;bottom:2px;left:50%;transform:translate(-50%)}.slot .cd{background:conic-gradient(#000000bf var(--cd,0deg), transparent 0);pointer-events:none;border-radius:50%;position:absolute;top:0;bottom:0;left:0;right:0}.slot .lock{background:#000000b3;place-items:center;font-style:normal;display:none;position:absolute;top:0;bottom:0;left:0;right:0}.slot.locked .lock{display:grid}.slot.nomp .ic,.slot.empty .ic{filter:grayscale()brightness(.55)}.hud-dialog{border-color:var(--kim);width:min(700px,100% - 32px);padding:20px 24px 16px;animation:.3s both unroll;position:absolute;bottom:104px;left:50%;transform:translate(-50%)}.hud-dialog[hidden]{display:none}.dlg-name{font-family:var(--serif);color:var(--kim);align-items:center;gap:10px;font-size:1.35rem;display:inline-flex}.dlg-name:before{content:"道";background:linear-gradient(145deg, #d8473a, var(--son-2));color:#fff4e6;width:28px;height:28px;font:400 1.1rem/1 var(--brush);border-radius:4px;place-items:center;display:inline-grid;box-shadow:inset 0 0 0 2px #ffdcbe8c}.hud-dialog p{color:var(--giay);margin:8px 0 14px;font-size:1.02rem;line-height:1.65}.dlg-btns{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}@keyframes unroll{0%{opacity:0;clip-path:inset(0 50%)}to{opacity:1;clip-path:inset(0)}}.hud-banner{text-align:center;opacity:0;pointer-events:none;justify-items:center;display:grid;position:absolute;top:18%;left:50%;transform:translate(-50%)}.hud-banner.show{animation:3.4s both banner}.hud-banner .glyph{font:400 6.5rem/1 var(--brush);color:var(--c,var(--kim));opacity:.9;text-shadow:0 0 30px #000000b3, 0 0 16px color-mix(in srgb, var(--c,#e8c070) 60%, transparent)}.hud-banner .glyph:empty{display:none}.hud-banner b{font-family:var(--serif);letter-spacing:.08em;color:var(--c,var(--kim));text-shadow:0 2px 4px #000;background:linear-gradient(90deg,#0000,#0a1012bf 20% 80%,#0000);margin-top:-6px;padding:4px 40px;font-size:2.6rem}.hud-banner small{color:var(--giay);text-shadow:0 1px 3px #000;font-size:1rem}@keyframes banner{0%{opacity:0;filter:blur(6px);transform:translate(-50%)scale(1.35)}14%,76%{opacity:1;filter:blur();transform:translate(-50%)scale(1)}to{opacity:0}}.hud-toast{border-top:1px solid var(--kim-2);border-bottom:1px solid var(--kim-2);color:var(--giay);opacity:0;background:linear-gradient(90deg,#0000,#0a1012e6 12% 88%,#0000);padding:7px 22px;font-weight:600;transition:opacity .2s,transform .2s;position:absolute;top:100px;left:50%;transform:translate(-50%,-8px)}.hud-toast.show{opacity:1;transform:translate(-50%)}.hud-toast.warn{border-color:var(--son);color:#ffd0c4}.hud-toast.good{border-color:var(--ngoc);color:#d8fff3}.hud-dead{text-align:center;filter:saturate(.6);background:radial-gradient(circle,#46000040,#0f0000cc);place-content:center;justify-items:center;gap:6px;display:grid;position:absolute;top:0;bottom:0;left:0;right:0}.hud-dead[hidden]{display:none}.hud-dead b{font-family:var(--serif);color:#ff7a6a;font-size:3rem}body.hurt-flash #hud:after{content:"";animation:.4s forwards flash;position:absolute;top:0;bottom:0;left:0;right:0;box-shadow:inset 0 0 140px #c0392b99}@keyframes flash{to{opacity:0}}.hud-help{max-width:370px;color:var(--muted);gap:3px;padding:10px 12px;font-size:.74rem;display:grid;position:absolute;bottom:16px;left:14px}.hud-help b{color:var(--kim);font-family:var(--serif);font-size:1rem}.hud-help.hidden{display:none}.fx-layer{position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden}.float{font-family:var(--serif);white-space:nowrap;text-shadow:0 2px 3px #000,0 0 2px #000;will-change:transform;font-size:1.25rem;font-weight:700;position:absolute;top:0;left:0}.float.dmg{color:#fff8e8}.float.crit{color:#ffd27a;text-shadow:0 0 12px #ff8c28e6,0 2px 3px #000;font-size:2rem}.float.hurt{color:#ff6a52}.float.heal{color:var(--ngoc)}.float.xp{color:#bfe9ff;font-size:1rem}.float.loot{color:var(--kim);font-size:1rem}.plate{pointer-events:none;text-shadow:0 1px 2px #000,0 0 3px #000;will-change:transform;justify-items:center;gap:1px;display:grid;position:absolute;top:0;left:0}.plate b{font-family:var(--serif);font-size:.95rem}.plate small{color:#e9dfc8;font-size:.64rem}.plate i{background:#000000a6;border:1px solid #e8c07080;width:66px;height:5px;display:block;overflow:hidden}.plate u{background:linear-gradient(180deg, #ef6a4f, var(--son));height:100%;display:block}.plate.target b{color:#ffd27a!important}.plate.target b:before,.plate.target b:after{content:"◆";color:var(--son);margin:0 4px;font-size:.6rem}.loading{text-align:center;z-index:10;background:radial-gradient(circle at 50% 40%,#16302c,#070b0d 70%);place-content:center;justify-items:center;gap:10px;transition:opacity .6s;display:grid;position:fixed;top:0;bottom:0;left:0;right:0}.loading b{font-family:var(--serif);color:var(--kim);font-size:3.2rem}.loading span{color:var(--muted)}.loading.done{opacity:0;pointer-events:none}.create{z-index:20;background:radial-gradient(circle at 50% 30%,#16302c,#070b0d 70%);place-items:center;display:grid;position:fixed;top:0;bottom:0;left:0;right:0}.create-card{text-align:center;justify-items:center;gap:12px;width:min(430px,100% - 32px);padding:28px;display:grid}.create-card>*{width:100%}.create-card .seal.big{width:84px}.create-logo{font-family:var(--serif);color:var(--kim);font-size:3rem}.create-card p{color:var(--muted);margin:0}.create-card label{text-align:left;color:var(--kim);gap:6px;font-size:.8rem;display:grid}.create-card input{border:1px solid var(--kim-2);color:var(--text);-webkit-user-select:text;user-select:text;background:#0006;border-radius:3px;padding:10px 12px;font:600 1rem inherit}.create-row{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.create-go{padding:10px;font-size:1rem}@media (max-width:900px){.hud-help,.hud-quest{display:none}.hud-player{width:230px}.hud-map{transform-origin:100% 0;transform:scale(.7)}.slot{width:46px;height:46px}.hud-banner .glyph{font-size:4rem}.hud-banner b{font-size:1.8rem}}.hud-mapbtn{position:absolute;top:236px;right:60px}.hud-credits{color:#f6efe0bf;text-shadow:0 1px 2px #000;font-size:.62rem;position:absolute;bottom:4px;right:10px}.picker{z-index:15;background:radial-gradient(circle at 40% 40%,#16302cf5,#070b0df7);grid-template-columns:minmax(0,1fr) 340px;gap:16px;padding:24px;display:grid;position:fixed;top:0;bottom:0;left:0;right:0}.picker svg{width:100%;height:calc(100vh - 48px)}.picker .land{fill:#2f5b4a;stroke:#e8c070;stroke-width:1.4px}.picker .isl{fill:#e8c070}.picker .isl-label{fill:#ffe7a8;font:600 13px Be Vietnam Pro,sans-serif}.picker .pin{cursor:pointer}.picker .pin circle{fill:#c0392b;stroke:#fff4e6;stroke-width:2px;transition:r .15s}.picker .pin:hover circle,.picker .pin.on circle{r:9;fill:#e8c070}.picker .pin text{fill:#fff4e6;paint-order:stroke;stroke:#0a1012;stroke-width:4px;font:700 15px Be Vietnam Pro,sans-serif}.picker-list{align-content:center;gap:10px;display:grid}.picker-list h2{font-family:var(--serif);color:var(--kim);margin:0;font-size:2rem}.picker-list p{color:var(--muted);margin:0 0 6px}.picker-list .hud-btn{text-align:left;gap:2px;padding:10px 14px;font-size:1rem;display:grid}.picker-list .hud-btn small{color:var(--muted);font-weight:400}.picker-list .hud-btn.cur{border-color:var(--kim);box-shadow:0 0 12px #e8c07066}@media (max-width:900px){.picker{grid-template-columns:1fr;overflow:auto}.picker svg{height:55vh}}