*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-dark: #0d0d14;--bg-panel: #14141e;--border: #3a3a55;--gold: #c8a840;--red: #cc3333;--blue: #3366cc;--text: #cccccc;--font: "Courier New", Courier, monospace}html,body{width:100%;height:100%;overflow:hidden;background:var(--bg-dark);font-family:var(--font);color:var(--text);-webkit-user-select:none;user-select:none}#game-container{position:relative;width:100vw;height:100vh;width:100dvw;height:100dvh}#game-canvas{position:absolute;top:0;left:0;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}#ui-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}#ui-layer>*{pointer-events:auto}#ui-layer .floating-text,#ui-layer .item-label,#ui-layer #zone-msg,#ui-layer #portal-hint,#ui-layer #target-hud{pointer-events:none}.globe-container{position:absolute;bottom:16px;display:flex;flex-direction:column;align-items:center;gap:4px}#globe-left{left:24px}#globe-right{right:24px}.globe-label{font-size:11px;color:var(--gold);letter-spacing:2px;text-transform:uppercase}.globe-ring{width:72px;height:72px;border-radius:50%;border:3px solid #555570;background:#0a0a0f;overflow:hidden;display:flex;align-items:flex-end}.globe-fill{width:100%;transition:height .15s ease;border-radius:0 0 50% 50%}.globe-fill.red{background:linear-gradient(180deg,#f44,#c11)}.globe-fill.purple{background:linear-gradient(180deg,#84f,#42a)}#bottom-xp-bar{position:absolute;bottom:16px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;width:280px}.xp-label{font-size:12px;color:var(--gold);letter-spacing:2px}.progress-container{width:100%;height:10px;background:#1a1a2a;border:1px solid #333355;border-radius:2px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#45e,#89f);transition:width .2s ease;border-radius:2px}#hud-gold-wrap{position:absolute;bottom:100px;left:50%;transform:translate(-50%);font-size:13px;color:var(--gold);text-shadow:0 0 8px rgba(200,168,64,.6)}#target-hud{position:absolute;top:16px;left:50%;transform:translate(-50%);width:220px;background:#0a0a14d9;border:1px solid #555577;border-radius:4px;padding:8px 12px;text-align:center;display:none}#target-name{font-size:13px;color:#f64;letter-spacing:2px;margin-bottom:6px}#target-hp-fill{background:linear-gradient(90deg,#c33,#f44);height:100%;transition:width .1s ease}#zone-msg{position:absolute;top:80px;left:50%;transform:translate(-50%);background:#000000bf;border:1px solid var(--gold);padding:10px 24px;font-size:15px;color:var(--gold);letter-spacing:2px;text-transform:uppercase;border-radius:4px;transition:opacity 1s ease;pointer-events:none;text-align:center;max-width:80vw}#portal-hint{position:absolute;bottom:120px;left:50%;transform:translate(-50%);background:#500096cc;border:1px solid #9944ff;padding:8px 20px;font-size:13px;color:#c8f;border-radius:4px;pointer-events:none;display:none;letter-spacing:1px}#skill-bar{position:absolute;bottom:16px;left:50%;transform:translate(-50%);display:flex;gap:8px;margin-bottom:36px}.skill-btn{width:56px;height:56px;background:#0e0e18eb;border:2px solid #444466;border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden;transition:all .15s ease-out;pointer-events:auto}.skill-btn:hover{border-color:#88c;background:#141428f2}.skill-btn.active{border-color:#fff!important;border-width:3px;box-shadow:0 0 20px #c8a84080,inset 0 0 12px #fff3;background:#282846;transform:translateY(-4px);z-index:5}.sk-key{font-size:10px;color:#888;position:absolute;top:3px;left:4px}.sk-name{font-size:9px;color:#ccc;text-align:center}.sk-cd{position:absolute;bottom:0;left:0;width:100%;background:#000000b3;height:0%;transition:height .05s}.floating-text{position:absolute;font-size:16px;font-weight:700;text-shadow:1px 1px 3px rgba(0,0,0,.8),-1px -1px 3px rgba(0,0,0,.8);pointer-events:none;letter-spacing:1px;white-space:nowrap}.item-label{position:absolute;font-size:11px;text-shadow:1px 1px 2px #000,-1px -1px 2px #000;pointer-events:none;white-space:nowrap;transform:translate(-50%,-50%);letter-spacing:1px}.ui-panel{position:absolute;background:#0a0a14f2;border:2px solid var(--border);border-radius:4px;pointer-events:auto;overflow:hidden}.ui-panel.hidden{display:none!important}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#1e1e32e6;border-bottom:1px solid var(--border);color:var(--gold);font-size:13px;letter-spacing:3px;text-transform:uppercase;cursor:grab}.panel-header:active{cursor:grabbing}.inv-cell.drag-over{border-color:#fff!important;background:#ffffff1a}.item-icon{pointer-events:none}.item-icon.dragging{opacity:.4}#drag-proxy{position:fixed;pointer-events:none;z-index:1000;width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:24px;background:#28283ccc;border:1px solid #ffffff;border-radius:2px;transform:translate(-50%,-50%)}.close-btn{background:none;border:none;color:#888;cursor:pointer;font-size:16px;padding:0 4px;pointer-events:auto}.close-btn:hover{color:#fff}#inventory-panel{top:50%;left:50%;transform:translate(-50%,-50%);width:420px;max-height:calc(100svh - 20px);overflow-y:auto}.inv-grid{display:grid;grid-template-columns:repeat(10,36px);gap:3px;padding:12px}.inv-cell{width:36px;height:36px;background:#141423cc;border:1px solid #333344;border-radius:2px;cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;font-size:18px}.inv-cell:hover{border-color:#77a;background:#28283ce6}.inv-cell.has-item{border-color:#557}.inv-cell.has-item:hover{border-color:#aac}.inv-cell.rarity-magic{border-color:#36c}.inv-cell.rarity-rare{border-color:#c90}.inv-cell.rarity-unique{border-color:#c50}.inv-footer{padding:8px 12px;border-top:1px solid var(--border);font-size:12px;color:var(--gold);text-align:right}#char-panel{top:50%;left:max(20px,50vw - 150px);transform:translateY(-50%);width:min(300px,calc(100vw - 16px));max-height:calc(100svh - 20px);overflow-y:auto}#char-content{padding:10px}.char-name{text-align:center;color:var(--gold);font-size:14px;letter-spacing:2px;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border)}.char-section-title{color:var(--gold);font-size:10px;letter-spacing:3px;text-transform:uppercase;margin:10px 0 6px;padding-bottom:3px;border-bottom:1px solid #2a2a40}.equip-slots{display:flex;flex-direction:column;gap:4px}.equip-slot{display:flex;align-items:center;gap:8px;padding:4px 6px;border:1px solid #222233;border-radius:3px;cursor:pointer;font-size:11px}.equip-slot:hover{background:#28283c99;border-color:#446}.equip-label{color:#888;width:70px;flex-shrink:0}.equip-name{color:#ccc;font-size:10px}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px}.stat-row{display:flex;justify-content:space-between;font-size:11px;padding:2px 4px;border:1px solid transparent;border-radius:2px}.stat-row:nth-child(odd){background:#ffffff08}.stat-alloc{display:flex;gap:6px;padding:6px 0}.stat-alloc button{flex:1;background:#1e1e3ce6;border:1px solid var(--gold);color:var(--gold);padding:4px;font-size:11px;cursor:pointer;border-radius:3px;font-family:var(--font);pointer-events:auto}.stat-alloc button:hover{background:#503c14cc}#item-tooltip{position:absolute;background:#080810f7;border:1px solid #555577;border-radius:4px;padding:10px 14px;min-width:180px;max-width:240px;pointer-events:none;z-index:100;font-size:12px}.tt-name{font-size:14px;font-weight:700;margin-bottom:3px}.tt-rarity{font-size:11px;letter-spacing:1px;margin-bottom:6px;opacity:.85}.tt-stat{color:#ccc;margin:2px 0}.tt-affix{color:#8af;margin:2px 0}.tt-flavor{color:#986;font-style:italic;margin-top:8px;font-size:11px;padding-top:6px;border-top:1px solid #333}.tt-hint{color:#666;font-size:10px;margin-top:8px;text-align:center}#hud-strip{position:absolute;top:178px;right:10px;display:flex;flex-direction:column;gap:4px;text-align:right;pointer-events:none}#hud-level{color:var(--gold);font-size:13px;letter-spacing:1px}#hud-gold{color:#da3;font-size:12px}#hud-zone{color:#88a;font-size:11px;letter-spacing:1px}#controls-hint{position:absolute;top:10px;left:12px;font-size:10px;color:#556;pointer-events:none;line-height:1.6}#minimap{position:absolute;top:10px;right:10px;width:160px;height:160px;border:1px solid #3a3a55;border-radius:3px;background:#06060e;image-rendering:pixelated;image-rendering:crisp-edges;pointer-events:none}#minimap-overlay{position:absolute;top:80px;left:80px;image-rendering:pixelated;image-rendering:crisp-edges;border:1px solid #3a3a55;border-radius:4px;pointer-events:none;opacity:.82}#minimap-label{position:absolute;top:174px;right:10px;font-size:9px;color:#445;pointer-events:none;text-align:right;letter-spacing:1px}#quest-overlay{position:absolute;top:16px;left:50%;transform:translate(-50%);font-size:12px;color:#c44;letter-spacing:2px;text-transform:uppercase;pointer-events:none;text-shadow:0 0 6px rgba(200,60,60,.6);display:none}#shop-panel{top:50%;left:50%;transform:translate(-50%,-50%);width:860px;max-width:calc(100vw - 12px);max-height:calc(100svh - 20px);overflow:hidden}#shop-content{padding:16px;display:flex;flex-direction:column;gap:16px;overflow-y:auto;max-height:calc(100svh - 80px)}.shop-grid-container{display:flex;gap:20px;justify-content:center}.shop-section{display:flex;flex-direction:column;gap:8px}.shop-section-header{font-size:11px;color:var(--gold);letter-spacing:2px;text-align:center;border-bottom:1px solid #2a2a40;padding-bottom:4px}#shop-trade-panel{display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:2px solid var(--border)}.trade-info{display:flex;flex-direction:column;gap:4px;min-width:180px}.trade-row{display:flex;justify-content:space-between;font-size:12px;color:#888}.balance-row{margin-top:4px;padding-top:4px;border-top:1px solid #333;font-weight:700;color:#ccc}.gold-text{color:var(--gold)}.gold-text.negative{color:var(--red)}#shop-trade-btn{background:#1c2c1c;border:1px solid #2a4a2a;color:#4c6;font-family:var(--font);font-size:16px;letter-spacing:4px;padding:12px 40px;cursor:pointer;transition:all .2s}#shop-trade-btn:hover:not(:disabled){background:#243c24;box-shadow:0 0 15px #44cc664d}#shop-trade-btn:disabled{background:#1a1a1a;border-color:#333;color:#555;cursor:default}#shop-trade-btn.error{background:#2c1c1c;border-color:#4a2a2a;color:#c44}.inv-cell.selected{border-color:#4f8!important;background:#44ff8826!important;box-shadow:inset 0 0 8px #4f86}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#111}::-webkit-scrollbar-thumb{background:#444;border-radius:3px}html{height:-webkit-fill-available}body{min-height:100vh;min-height:-webkit-fill-available}#touch-controls{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}#joy-zone{position:absolute;bottom:calc(124px + env(safe-area-inset-bottom,0px));left:calc(14px + env(safe-area-inset-left,0px));width:110px;height:110px;border-radius:50%;background:#ffffff0a;border:2px solid rgba(200,168,64,.18);pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none}#joy-stick{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#f0d87080,#a080204d);border:2px solid rgba(200,168,64,.55);pointer-events:none}.touch-btn{position:absolute;width:52px;height:52px;border-radius:50%;background:#0a0814d1;border:2px solid rgba(80,70,130,.6);display:flex;align-items:center;justify-content:center;font-size:22px;pointer-events:auto;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:background .08s,border-color .08s,transform .08s}.touch-btn-pressed,.touch-btn:active{background:#282046f2;border-color:#c8a840cc;transform:scale(.92)}#touch-btn-skill{bottom:calc(232px + env(safe-area-inset-bottom,0px));right:calc(14px + env(safe-area-inset-right,0px));border-color:#88ccff80}#touch-btn-interact{bottom:calc(168px + env(safe-area-inset-bottom,0px));right:calc(14px + env(safe-area-inset-right,0px));border-color:#c8a84080}#touch-btn-hppot{bottom:calc(104px + env(safe-area-inset-bottom,0px));right:calc(14px + env(safe-area-inset-right,0px));border-color:#c83c3c80}#touch-btn-mppot{bottom:calc(40px + env(safe-area-inset-bottom,0px));right:calc(14px + env(safe-area-inset-right,0px));border-color:#3c50dc80}#touch-btn-pause{top:calc(12px + env(safe-area-inset-top,0px));right:calc(14px + env(safe-area-inset-right,0px));font-size:18px}#touch-btn-inv{top:calc(12px + env(safe-area-inset-top,0px));right:calc(76px + env(safe-area-inset-right,0px));font-size:20px}.touch-mode #controls-hint{display:none}.touch-mode .skill-btn:nth-child(5),.touch-mode .skill-btn:nth-child(6){display:none}.touch-mode #skill-bar{left:50%;transform:translate(-50%);gap:6px}.touch-mode .skill-btn{width:42px;height:42px}.touch-mode #minimap{left:10px;right:auto;width:110px;height:110px}.touch-mode #minimap-label{left:10px;right:auto;top:124px}.touch-mode #hud-strip{right:10px;top:70px}#touch-btn-mppot{bottom:calc(108px + env(safe-area-inset-bottom,0px))}#touch-btn-hppot{bottom:calc(170px + env(safe-area-inset-bottom,0px))}#touch-btn-interact{bottom:calc(232px + env(safe-area-inset-bottom,0px))}#touch-btn-skill{bottom:calc(294px + env(safe-area-inset-bottom,0px))}@media(max-width:600px){.globe-ring{width:58px;height:58px}#bottom-xp-bar{width:180px}.skill-btn{width:44px;height:44px}#skill-bar{gap:6px}.inv-cell{width:30px;height:30px;font-size:14px}.inv-grid{grid-template-columns:repeat(10,30px);gap:2px;padding:8px}.touch-mode #minimap{width:100px;height:100px}.touch-mode #minimap-label{top:114px}#inventory-panel{width:calc(100vw - 12px);top:6px;left:6px;transform:none;max-height:calc(100svh - 80px);overflow-y:auto}#char-panel{max-height:calc(100svh - 80px);overflow-y:auto}#shop-panel{width:calc(100vw - 12px);top:6px;left:6px;transform:none;max-height:calc(100svh - 80px)}#shop-content{overflow-y:auto;max-height:calc(100svh - 140px)}.shop-grid-container{flex-wrap:wrap;gap:12px}#pause-panel{min-width:min(360px,92vw);padding:20px 18px 24px}}@media(max-height:480px){#minimap{width:90px;height:90px}#minimap-label{top:104px;font-size:8px}#hud-strip{top:104px;font-size:10px}.globe-ring{width:48px;height:48px}#bottom-xp-bar{width:140px;bottom:8px}#bottom-xp-bar .xp-label{font-size:10px}.skill-btn{width:42px;height:42px}#skill-bar{gap:5px;margin-bottom:24px}#joy-zone{bottom:auto;top:50%;transform:translateY(-50%);left:calc(10px + env(safe-area-inset-left,0px))}.touch-mode #minimap{width:80px;height:80px}.touch-mode #minimap-label{top:94px}.touch-mode #hud-strip{top:70px}#touch-btn-mppot{bottom:calc(72px + env(safe-area-inset-bottom,0px))}#touch-btn-hppot{bottom:calc(124px + env(safe-area-inset-bottom,0px))}#touch-btn-interact{bottom:calc(176px + env(safe-area-inset-bottom,0px))}#touch-btn-skill{bottom:calc(228px + env(safe-area-inset-bottom,0px))}.touch-btn{width:44px;height:44px;font-size:18px}#inventory-panel{max-height:96svh;overflow-y:auto;top:2vh;left:50%;transform:translate(-50%)}#char-panel{max-height:96svh;overflow-y:auto}#shop-panel{max-height:96svh;top:2vh}#shop-content{overflow-y:auto;max-height:calc(96svh - 60px)}#pause-panel{min-width:min(340px,88vw)}}body.touch-mode:has(#inventory-panel:not(.hidden)) #minimap,body.touch-mode:has(#inventory-panel:not(.hidden)) #minimap-label,body.touch-mode:has(#inventory-panel:not(.hidden)) #minimap-overlay,body.touch-mode:has(#char-panel:not(.hidden)) #minimap,body.touch-mode:has(#char-panel:not(.hidden)) #minimap-label,body.touch-mode:has(#char-panel:not(.hidden)) #minimap-overlay,body.touch-mode:has(#shop-panel:not(.hidden)) #minimap,body.touch-mode:has(#shop-panel:not(.hidden)) #minimap-label{display:none}body.touch-mode:has(.ui-panel:not(.hidden)) #touch-controls{display:none}.ui-panel{touch-action:pan-y;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}body:has(#inventory-panel:not(.hidden)):has(#char-panel:not(.hidden)) #inventory-panel,body:has(#inventory-panel:not(.hidden)):has(#char-panel:not(.hidden)) #char-panel{display:flex;flex-direction:column;transform:none;border-radius:0;overflow:hidden;max-height:none;z-index:20}body:has(#inventory-panel:not(.hidden)):has(#char-panel:not(.hidden)) .panel-header{flex-shrink:0;cursor:default}body:has(#inventory-panel:not(.hidden)):has(#char-panel:not(.hidden)) #char-content,body:has(#inventory-panel:not(.hidden)):has(#char-panel:not(.hidden)) #inv-grid,body:has(#inventory-panel:not(.hidden)):has(#char-panel:not(.hidden)) .inv-footer{touch-action:pan-y;-webkit-overflow-scrolling:touch}body:has(#inventory-panel:not(.hidden)):has(#char-panel:not(.hidden)) #inventory-panel{overflow-y:auto}body:has(#inventory-panel:not(.hidden)):has(#char-panel:not(.hidden)) #char-content{flex:1;overflow-y:auto;min-height:0}@media(orientation:portrait){body:has(#inventory-panel:not(.hidden)):has(#char-panel:not(.hidden)) #inventory-panel{inset:0 0 50%;width:auto;border-bottom:2px solid var(--gold)}body:has(#inventory-panel:not(.hidden)):has(#char-panel:not(.hidden)) #char-panel{width:auto;inset:50% 0 0}}@media(orientation:landscape){body:has(#inventory-panel:not(.hidden)):has(#char-panel:not(.hidden)) #inventory-panel{inset:0 50% 0 0;width:auto;border-right:2px solid var(--gold)}body:has(#inventory-panel:not(.hidden)):has(#char-panel:not(.hidden)) #char-panel{width:auto;inset:0 0 0 auto;transform:none}}@media(orientation:portrait)and (max-width:420px){body:has(#inventory-panel:not(.hidden)):has(#char-panel:not(.hidden)) .inv-cell{width:28px;height:28px;font-size:13px}body:has(#inventory-panel:not(.hidden)):has(#char-panel:not(.hidden)) .inv-grid{grid-template-columns:repeat(10,28px);gap:2px;padding:6px}}@media(orientation:landscape)and (max-width:800px){body:has(#inventory-panel:not(.hidden)):has(#char-panel:not(.hidden)) .inv-cell{width:28px;height:28px;font-size:13px}body:has(#inventory-panel:not(.hidden)):has(#char-panel:not(.hidden)) .inv-grid{grid-template-columns:repeat(10,28px);gap:2px;padding:6px}}@media(orientation:landscape)and (max-width:600px){body:has(#inventory-panel:not(.hidden)):has(#char-panel:not(.hidden)) .inv-cell{width:24px;height:24px;font-size:11px}body:has(#inventory-panel:not(.hidden)):has(#char-panel:not(.hidden)) .inv-grid{grid-template-columns:repeat(10,24px);gap:1px;padding:4px}}#pause-overlay{display:none;position:fixed;inset:0;background:#000000c7;z-index:2000;align-items:center;justify-content:center}#pause-panel{background:var(--bg-panel);border:1px solid var(--border);border-top:2px solid var(--gold);padding:28px 36px 32px;min-width:360px;display:flex;flex-direction:column;gap:18px;box-shadow:0 0 40px #000c,inset 0 1px #c8a8401f}.pause-title{color:var(--gold);font-size:22px;letter-spacing:8px;text-align:center;text-shadow:0 0 12px rgba(200,168,64,.5);margin-bottom:4px}.pause-section-title{color:var(--gold);font-size:10px;letter-spacing:4px;border-bottom:1px solid var(--border);padding-bottom:6px;opacity:.8}.pause-row{display:flex;align-items:center;gap:12px}.pause-label{font-size:11px;letter-spacing:2px;color:#aaa;width:46px;flex-shrink:0}.pause-slider{flex:1;height:4px;accent-color:var(--gold);cursor:pointer}.pause-pct{font-size:11px;color:#888;width:36px;text-align:right;flex-shrink:0}.pause-toggle{background:#1c2c1c;border:1px solid #2a4a2a;color:#4c6;font-family:var(--font);font-size:10px;letter-spacing:2px;padding:4px 10px;cursor:pointer;transition:background .15s,color .15s;flex-shrink:0}.pause-toggle:hover{background:#243c24}.pause-toggle.muted{background:#2c1c1c;border-color:#4a2a2a;color:#c44}.pause-resume-btn{margin-top:8px;padding:11px;background:transparent;border:1px solid var(--gold);color:var(--gold);font-family:var(--font);font-size:13px;letter-spacing:5px;cursor:pointer;transition:background .15s}.pause-resume-btn:hover{background:#c8a8401f}#audio-loader{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;background:#000000d1;pointer-events:all}#audio-loader-panel{background:#0d0a08;border:1px solid #3a2a14;border-top:3px solid #c8a840;padding:28px 36px;min-width:280px;text-align:center;box-shadow:0 0 40px #c8a84026}#audio-loader-title{font-family:serif;font-size:20px;color:#c8a840;letter-spacing:2px;margin-bottom:14px}#audio-loader-bar-wrap{background:#1a1208;border:1px solid #3a2a14;height:6px;border-radius:3px;overflow:hidden;margin-bottom:10px}#audio-loader-bar{height:100%;width:0%;background:linear-gradient(90deg,#8a6820,#c8a840,#e8c860);border-radius:3px;transition:width .15s ease}#audio-loader-sub{font-size:11px;color:#6a5a3a;letter-spacing:1px}