*{box-sizing:border-box;margin:0;padding:0}html,body,#root,.app{width:100%;height:100%;overflow:hidden}body{color:#fff;-webkit-user-select:none;user-select:none;background:#000;font-family:system-ui,-apple-system,sans-serif}.app{position:relative}canvas{display:block}.hud{pointer-events:none;z-index:10;position:absolute;inset:0}.fps{color:#9ff7d8;background:#00000073;border-radius:4px;padding:4px 7px;font:12px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;position:absolute;top:8px;left:8px}.controls-hint{color:#ffffffbf;letter-spacing:.02em;background:#0006;border-radius:6px;padding:6px 12px;font:12px/1.2 system-ui,sans-serif;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}.player-frame,.target-frame{background:#0c0e169e;border:1px solid #ffffff1f;border-radius:8px;align-items:stretch;gap:8px;width:232px;padding:8px;display:flex;position:absolute}.player-frame{bottom:16px;left:16px}.target-frame{width:210px;top:16px;left:50%;transform:translate(-50%)}.level-badge{color:#ffe9b0;background:#00000073;border:1px solid #ffdc9666;border-radius:6px;flex:none;justify-content:center;align-items:center;width:34px;font:700 16px/1 system-ui,sans-serif;display:flex}.level-badge.small{width:28px;font-size:14px}.bars{flex-direction:column;flex:auto;gap:3px;min-width:0;display:flex}.name-row{color:#eef1f6;margin-bottom:1px;font:600 12px/1.2 system-ui,sans-serif}.bar{background:#00000080;border-radius:3px;height:15px;position:relative;overflow:hidden}.bar .fill{height:100%;transition:width .12s linear;position:absolute;inset:0 auto 0 0}.bar.hp .fill{background:linear-gradient(#6fd16f,#3fa83f)}.bar.mana .fill{background:linear-gradient(#5aa6e2,#3f78c8)}.bar.xp{height:9px}.bar.xp .fill{background:linear-gradient(#e2c45a,#c89a3f)}.bar-text{color:#ffffffeb;text-shadow:0 1px 1px #000000b3;justify-content:center;align-items:center;font:600 10px/1 ui-monospace,Menlo,monospace;display:flex;position:absolute;inset:0}.hotbar{gap:8px;display:flex;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.slot{background:#080a10bf;border:1px solid #ffffff29;border-radius:8px;width:56px;height:56px;position:relative;overflow:hidden}.slot.dim{opacity:.45}.slot.casting{border-color:#ffe27a;box-shadow:0 0 10px #ffe27ab3}.slot-icon{border-radius:5px;justify-content:center;align-items:center;display:flex;position:absolute;inset:4px}.slot-glyph{color:#0000008c;font:800 22px/1 system-ui,sans-serif}.slot-key{color:#fff;text-shadow:0 1px 2px #000;font:700 11px/1 ui-monospace,Menlo,monospace;position:absolute;top:2px;left:4px}.slot-cd{pointer-events:none;background:#0000009e;width:100%;position:absolute;top:0;left:0}.slot-cd-num{color:#fff;text-shadow:0 1px 3px #000;justify-content:center;align-items:center;font:700 18px/1 system-ui,sans-serif;display:flex;position:absolute;inset:0}.slot-name{text-align:center;color:#ffffffe6;text-shadow:0 1px 1px #000;width:100%;font:600 8.5px/1 system-ui,sans-serif;position:absolute;bottom:2px}.cast-bar{background:#0009;border:1px solid #fff3;border-radius:5px;width:240px;height:20px;position:absolute;bottom:84px;left:50%;overflow:hidden;transform:translate(-50%)}.cast-fill{background:linear-gradient(#ffd27a,#e2872a);height:100%;position:absolute;inset:0 auto 0 0}.cast-text{color:#fff;text-shadow:0 1px 2px #000;justify-content:center;align-items:center;font:600 11px/1 system-ui,sans-serif;display:flex;position:absolute;inset:0}.nameplate{pointer-events:none;width:64px;position:absolute;transform:translate(-50%,-100%)}.nameplate.targeted{width:80px}.np-name{text-align:center;color:#ffe9b0;text-shadow:0 1px 2px #000;margin-bottom:2px;font:600 11px/1.1 system-ui,sans-serif}.np-bar{background:#000000b3;border:1px solid #0009;border-radius:2px;height:5px;overflow:hidden}.np-fill{background:#d6503f;height:100%}.nameplate.targeted .np-bar{height:7px}.floater{pointer-events:none;text-shadow:0 2px 3px #000000d9;white-space:nowrap;font:800 18px/1 system-ui,sans-serif;position:absolute;transform:translate(-50%,-50%)}.quest-marker{pointer-events:none;text-shadow:0 2px 4px #000000e6;font:900 26px/1 system-ui,sans-serif;position:absolute;transform:translate(-50%,-100%)}.quest-marker.available{color:#ffd23c}.quest-marker.ready{color:#ffd23c;animation:.8s ease-in-out infinite alternate bob}.quest-marker.active{color:#c8ccd2}@keyframes bob{0%{transform:translate(-50%,-100%)}to{transform:translate(-50%,-130%)}}.quest-tracker{background:#0c0e168c;border:1px solid #ffffff1f;border-radius:8px;width:230px;padding:8px 10px;position:absolute;top:48px;right:16px}.qt-title{color:#ffe9b0;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;font:700 12px/1 system-ui,sans-serif}.qt-quest{margin-bottom:6px}.qt-name{color:#eef1f6;font:600 13px/1.2 system-ui,sans-serif}.qt-obj{color:#c2c8d2;font:500 12px/1.3 system-ui,sans-serif}.qt-quest.done .qt-name,.qt-ready{color:#ffd23c}.dialog{pointer-events:auto;background:#0e1018f0;border:1px solid #ffdc9659;border-radius:10px;width:460px;max-width:calc(100vw - 32px);padding:14px 16px;position:absolute;bottom:110px;left:50%;transform:translate(-50%);box-shadow:0 10px 40px #00000080}.dialog-head{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.dialog-name{color:#ffe9b0;font:700 16px/1 system-ui,sans-serif}.dialog-x{color:#cdd2da;cursor:pointer;background:0 0;border:1px solid #fff3;border-radius:5px;width:24px;height:24px;font:600 13px/1 system-ui,sans-serif}.dialog-quest{color:#ffd23c;margin-bottom:4px;font:600 14px/1.2 system-ui,sans-serif}.dialog-text{color:#e7ebf1;margin-bottom:10px;font:400 14px/1.5 system-ui,sans-serif}.dialog-objective{color:#aeb6c2;margin-bottom:12px;font:500 12px/1.3 system-ui,sans-serif}.dialog-actions{justify-content:flex-end;gap:8px;display:flex}.dialog-btn{color:#eef1f6;cursor:pointer;background:#ffffff14;border:1px solid #ffffff2e;border-radius:6px;padding:7px 16px;font:600 13px/1 system-ui,sans-serif}.dialog-btn:hover{background:#ffffff29}.dialog-btn.accept,.dialog-btn.turnin{color:#1a1206;background:#caa23a;border-color:#e2c45a}.dialog-btn.accept:hover,.dialog-btn.turnin:hover{background:#e2c45a}.menu,.victory{pointer-events:auto;background:radial-gradient(circle at 50% 40%,#0a0c1466,#06080ed1);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.menu-card,.victory-card{text-align:center;background:#0e1018c7;border:1px solid #ffdc9647;border-radius:14px;max-width:520px;padding:36px 44px;box-shadow:0 20px 70px #0000008c}.menu-title{letter-spacing:.08em;color:#ffe9b0;text-shadow:0 4px 20px #ffc8784d;margin-bottom:10px;font:800 56px/1 system-ui,sans-serif}.menu-sub,.victory-sub{color:#c8cdd6;margin-bottom:22px;font:400 15px/1.5 system-ui,sans-serif}.menu-actions{justify-content:center;gap:12px;margin-bottom:18px;display:flex}.menu-btn{color:#eef1f6;cursor:pointer;background:#ffffff14;border:1px solid #fff3;border-radius:8px;padding:12px 28px;font:700 15px/1 system-ui,sans-serif}.menu-btn:hover{background:#ffffff29}.menu-btn.primary{color:#1a1206;background:#caa23a;border-color:#e2c45a}.menu-btn.primary:hover{background:#e2c45a}.menu-hint{color:#8a909c;font:500 12px/1.4 system-ui,sans-serif}.victory-title{color:#ffe9b0;margin-bottom:12px;font:800 32px/1.2 system-ui,sans-serif}.death-screen{pointer-events:none;background:radial-gradient(circle,#5a0a0a40,#0a0000b3);flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.death-title{color:#e8c0c0;letter-spacing:.06em;text-shadow:0 3px 16px #000c;margin-bottom:10px;font:800 40px/1 system-ui,sans-serif}.death-sub{color:#c8a0a0;font:500 16px/1 system-ui,sans-serif}.menu-settings{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-bottom:16px;display:flex}.set-label{color:#9aa0ac;text-transform:uppercase;letter-spacing:.05em;font:600 12px/1 system-ui,sans-serif}.set-btn{color:#cdd2da;cursor:pointer;background:#ffffff0f;border:1px solid #ffffff2e;border-radius:6px;padding:6px 12px;font:600 12px/1 system-ui,sans-serif}.set-btn.on{color:#1a1206;background:#caa23ad9;border-color:#e2c45a}.set-sep{background:#ffffff26;width:1px;height:18px;margin:0 4px}.sound-toggle{color:#fff;cursor:pointer;pointer-events:auto;z-index:20;background:#00000073;border:1px solid #ffffff26;border-radius:6px;width:34px;height:30px;font-size:15px;position:absolute;top:8px;right:16px}.loading{z-index:100;background:#0c0e16;flex-direction:column;justify-content:center;align-items:center;gap:18px;transition:opacity .5s;display:flex;position:absolute;inset:0}.loading.done{opacity:0;pointer-events:none}.loading-title{letter-spacing:.1em;color:#ffe9b0;font:800 44px/1 system-ui,sans-serif}.loading-bar{background:#ffffff1f;border-radius:3px;width:180px;height:6px;overflow:hidden}.loading-fill{background:linear-gradient(90deg,#caa23a,#ffe9b0);border-radius:3px;width:40%;height:100%;animation:1s ease-in-out infinite loadslide}@keyframes loadslide{0%{margin-left:-40%}to{margin-left:100%}}.pframe{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:linear-gradient(135deg,#141824d1,#0c0e16d1);border:1px solid #ffffff24;border-radius:16px;align-items:center;gap:14px;width:360px;padding:14px 18px 14px 14px;display:flex;position:absolute;bottom:20px;left:20px;box-shadow:0 10px 30px #00000073}.pframe-disc{background:radial-gradient(circle at 50% 35%,#3a4a6e,#161b2a);border:2px solid #ffd27a;border-radius:50%;flex-direction:column;flex:none;justify-content:center;align-items:center;width:64px;height:64px;display:flex;position:relative;box-shadow:0 0 16px #ffd27a59,inset 0 0 10px #00000080}.pframe-lvl{color:#ffe9b0;font:800 26px/1 system-ui,sans-serif}.pframe-lvl-label{letter-spacing:.12em;color:#ffe9b0b3;margin-top:2px;font:700 9px/1 system-ui,sans-serif}.pframe-bars{flex-direction:column;flex:auto;gap:6px;min-width:0;display:flex}.pframe-name{color:#f2f5fa;letter-spacing:.02em;font:700 15px/1 system-ui,sans-serif}.pbar{background:#0000008c;border:1px solid #00000080;border-radius:11px;height:22px;position:relative;overflow:hidden}.pbar.xp{border-radius:6px;height:12px}.pbar-fill{border-radius:11px;height:100%;transition:width .14s ease-out;position:absolute;inset:0 auto 0 0}.pbar.hp .pbar-fill{background:linear-gradient(90deg,#2fae54,#6ef08a);box-shadow:0 0 10px #6ef08a66}.pbar.mana .pbar-fill{background:linear-gradient(90deg,#2f6fd0,#5ec2ff)}.pbar.xp .pbar-fill{background:linear-gradient(90deg,#c89a3f,#ffd676)}.pbar-label{color:#fff;text-shadow:0 1px 2px #000000e6;justify-content:center;align-items:center;font:700 12px/1 ui-monospace,Menlo,monospace;display:flex;position:absolute;inset:0}.pbar-label.small{font-size:9px;font-weight:600}.reticle{pointer-events:none;background:#ffffffd9;border-radius:50%;width:8px;height:8px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 2px #00000080,0 0 8px #0009}.lock-hint{color:#ffffffd9;pointer-events:none;background:#00000080;border-radius:8px;padding:8px 14px;font:600 14px/1 system-ui,sans-serif;position:absolute;top:54%;left:50%;transform:translate(-50%)}.notice{color:#ffd27a;pointer-events:none;background:#0000008c;border-radius:8px;padding:8px 16px;font:700 18px/1 system-ui,sans-serif;animation:.18s ease-out noticepop;position:absolute;top:38%;left:50%;transform:translate(-50%)}@keyframes noticepop{0%{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translate(-50%)}}.slot.active{border-color:#9ff7d8;box-shadow:0 0 0 2px #9ff7d899,0 0 14px #9ff7d880}.instructions{z-index:30;pointer-events:auto;background:#06080edb;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.instructions-card{text-align:center;background:#10131cf5;border:1px solid #ffdc964d;border-radius:14px;width:780px;max-width:calc(100vw - 32px);padding:24px 28px}.instructions-title{color:#ffe9b0;margin-bottom:18px;font:800 28px/1 system-ui,sans-serif}.instr-grid{text-align:left;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:22px;display:grid}.instr-col h3{color:#9ff7d8;text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px;font:700 14px/1 system-ui,sans-serif}.instr-col ul{flex-direction:column;gap:7px;list-style:none;display:flex}.instr-col li{color:#d2d7e0;font:400 13px/1.4 system-ui,sans-serif}.instr-col li b{color:#fff}@media (width<=680px){.instr-grid{grid-template-columns:1fr}}.tutorial{background:#0e121ec7;border:1px solid #9ff7d859;border-radius:999px;align-items:center;gap:10px;max-width:620px;padding:9px 16px;display:flex;position:absolute;top:14px;left:50%;transform:translate(-50%);box-shadow:0 6px 24px #0006}.tut-label{letter-spacing:.1em;text-transform:uppercase;color:#0b1018;background:#9ff7d8;border-radius:999px;flex:none;padding:4px 8px;font:800 10px/1 system-ui,sans-serif}.tut-msg{color:#eef3f8;font:600 13px/1.3 system-ui,sans-serif}.interact-prompt{color:#fff;pointer-events:none;background:#0000008c;border-radius:10px;align-items:center;gap:8px;padding:9px 16px;font:600 15px/1 system-ui,sans-serif;display:flex;position:absolute;top:60%;left:50%;transform:translate(-50%)}.ikey{color:#1a1206;background:#ffd27a;border-radius:6px;justify-content:center;align-items:center;min-width:24px;height:24px;padding:0 6px;font:800 13px/1 ui-monospace,Menlo,monospace;display:inline-flex}.inventory{z-index:25;pointer-events:auto;background:#06080eb8;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.inv-card{background:#10131cf5;border:1px solid #ffdc964d;border-radius:14px;width:640px;max-width:calc(100vw - 32px);max-height:calc(100vh - 64px);padding:20px 24px;overflow-y:auto}.inv-head{justify-content:space-between;align-items:center;margin-bottom:14px;display:flex}.inv-title{color:#ffe9b0;font:800 22px/1 system-ui,sans-serif}.inv-x{color:#cdd2da;cursor:pointer;background:0 0;border:1px solid #fff3;border-radius:6px;width:28px;height:28px;font:600 14px/1 system-ui,sans-serif}.inv-empty{color:#aeb6c2;text-align:center;padding:30px 0;font:500 15px/1.4 system-ui,sans-serif}.inv-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;display:grid}.inv-slot{text-align:center;background:#141824eb;border:1px solid #ffffff1f;border-radius:10px;flex-direction:column;align-items:center;gap:4px;padding:12px 10px;display:flex}.inv-glyph{font-size:30px;line-height:1.1}.inv-count{color:#ffe9b0;font:700 12px/1 ui-monospace,Menlo,monospace}.inv-name{color:#f2f5fa;font:700 13px/1.2 system-ui,sans-serif}.inv-desc{color:#aeb6c2;font:400 11px/1.3 system-ui,sans-serif}.inv-use{color:#cfeecf;cursor:pointer;background:#6ed16e2e;border:1px solid #6ed16e;border-radius:6px;margin-top:4px;padding:5px 14px;font:700 12px/1 system-ui,sans-serif}.inv-use:hover{background:#6ed16e57}