*{box-sizing:border-box}body{margin:0;background:linear-gradient(135deg,#0d1117 0%,#1a2332 100%);display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;color:#eee;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;overflow:visible}.game-wrapper{display:flex;justify-content:center;align-items:center;width:100vw;height:100vh;position:relative;overflow:visible}.hud-top{position:absolute;top:0;left:50%;transform:translate(-50%);display:flex;align-items:center;justify-content:space-between;width:100%;max-width:800px;background:rgba(0,0,0,.7);border:1px solid rgba(167,139,250,.2);border-top:none;border-radius:0 0 10px 10px;padding:8px 14px;gap:10px;flex-wrap:wrap;z-index:10}.hud-left{display:flex;align-items:center;gap:10px}.hud-title{font-weight:800;font-size:15px;color:gold;white-space:nowrap}.hud-status{font-size:12px;font-weight:700}.hud-center{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;min-width:160px}.hud-level{display:flex;align-items:center;gap:0px;width:100%;justify-content:center}.level-badge{font-size:13px;font-weight:800;color:gold;white-space:nowrap}.exp-bar-container{flex:1;max-width:130px;height:8px;background:rgba(255,255,255,.15);border-radius:4px;overflow:visible;border:1px solid rgba(255,255,255,.2)}.exp-bar-fill{height:100%;background:linear-gradient(90deg,#7c3aed,#a78bfa);border-radius:4px;transition:width .4s ease}.exp-text{font-size:10px;color:#aaa;white-space:nowrap}.hud-hp{font-size:12px;color:#f88;font-weight:700}.hud-right{display:flex;align-items:center;gap:0px;flex-wrap:wrap;justify-content:flex-end}.gold-display{font-size:14px;font-weight:800;color:gold;white-space:nowrap}.hud-btn{padding:5px 12px;font-size:12px;font-weight:700;border:none;border-radius:20px;cursor:pointer;transition:all .2s ease;white-space:nowrap}.hud-btn:hover{transform:scale(1.06);filter:brightness(1.15)}.shop-btn{background:linear-gradient(135deg,#f59e0b,#d97706);color:#1a1a1a}.inv-btn{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff}canvas{background-color:#0d2c4c;cursor:crosshair;width:100vw;height:100vh;display:block}.instructions{position:absolute;bottom:10px;left:50%;transform:translate(-50%);text-align:center;background:rgba(0,0,0,.5);padding:6px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.08);pointer-events:none;z-index:10}.instructions p{margin:0;color:#aaa;font-size:12px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.75);display:flex;justify-content:center;align-items:center;z-index:100;padding:2px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.modal-box{background:#1a1f2e;border:1px solid rgba(255,255,255,.12);border-radius:14px;width:100%;max-width:600px;max-height:85vh;display:flex;flex-direction:column;overflow:visible;box-shadow:0 20px 60px #000000b3}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.modal-header h2{margin:0;font-size:18px;color:#fff}.modal-close{background:rgba(255,255,255,.1);border:none;color:#fff;font-size:18px;cursor:pointer;border-radius:0;padding:2px 8px;transition:background .2s}.modal-close:hover{background:rgba(255,80,80,.4)}.modal-body{padding:14px 18px;overflow:visible;flex:1}.shop-section{margin-bottom:20px}.shop-section h3{margin:0 0 10px;font-size:14px;color:#a78bfa;border-bottom:1px solid rgba(167,139,250,.3);padding-bottom:5px}.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}.shop-item{background:rgba(255,255,255,.05);border:1px solid rgba(167,139,250,.2);border-radius:10px;padding:2px;display:flex;flex-direction:column;gap:6px;transition:border-color .2s,background .2s}.shop-item:hover{border-color:#a78bfa80;background:rgba(167,139,250,.07)}.shop-item.equipped{border-color:#4ade80;background:rgba(74,222,128,.08)}.shop-item.cant-afford{opacity:.55}.shop-item-name{font-size:13px;font-weight:700;color:#e2e8f0}.shop-item-stats{display:flex;flex-wrap:wrap;gap:4px}.stat-badge{background:rgba(124,58,237,.25);color:#c4b5fd;font-size:10px;padding:2px 5px;border-radius:4px;border:1px solid rgba(124,58,237,.4)}.shop-item-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto}.item-price{font-size:12px;font-weight:700;color:gold}.buy-btn{background:linear-gradient(135deg,#f59e0b,#d97706);color:#1a1a1a;border:none;border-radius:0;padding:4px 9px;font-size:11px;font-weight:700;cursor:pointer;transition:transform .15s,filter .15s}.buy-btn:hover:not(:disabled){transform:scale(1.05);filter:brightness(1.1)}.buy-btn:disabled{opacity:.45;cursor:not-allowed}.equipped-tag{font-size:11px;color:#4ade80;font-weight:700}.stats-panel{background:rgba(255,255,255,.04);border:1px solid rgba(255,215,0,.2);border-radius:10px;padding:12px 16px;margin-bottom:6px;position:relative;z-index:1}.stats-panel h3{margin:0 0 10px;font-size:13px;color:gold;border-bottom:1px solid rgba(255,215,0,.2);padding-bottom:6px}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px}.stat-row{display:flex;justify-content:space-between;align-items:center;font-size:13px}.stat-label{color:#aaa}.stat-value{font-weight:800;color:#e2e8f0}.stats-exp-section{margin-top:10px;border-top:1px solid rgba(255,215,0,.15);padding-top:8px}.stats-exp-label{display:flex;justify-content:space-between;font-size:12px;color:#aaa;margin-bottom:5px}.stats-exp-bar-bg{width:100%;height:10px;background:rgba(255,255,255,.1);border-radius:5px;overflow:visible;border:1px solid rgba(167,139,250,.3)}.stats-exp-bar-fill{height:100%;background:linear-gradient(90deg,#7c3aed,#a78bfa,#c4b5fd);border-radius:5px;transition:width .4s ease}.equipment-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.crafting-container{display:flex;flex-direction:column;align-items:center;gap:10px}.crafting-grid{display:grid;grid-template-columns:repeat(2,45px);grid-template-rows:repeat(2,45px);gap:5px}.backpack-grid{display:grid;grid-template-columns:repeat(5,45px);grid-auto-rows:45px;gap:5px;justify-content:center}.inv-grid-slot{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);border-radius:0;display:flex;justify-content:center;align-items:center;position:relative;transition:border-color .2s}.inv-grid-slot:hover{border-color:#fff}.inv-grid-slot.empty{opacity:.6}.inv-grid-slot.has-item{border-color:#a78bfa80;background:rgba(167,139,250,.1)}.eq-slot{min-height:50px;flex-direction:column;padding:5px}.slot-label{font-size:10px;color:#a78bfa;position:absolute;top:2px;left:4px}.grid-item{width:100%;height:100%;display:flex;justify-content:center;align-items:center;cursor:grab;font-size:11px;color:#fff;font-weight:700;text-shadow:1px 1px 2px #000;-webkit-user-select:none;user-select:none;overflow:visible}.grid-item:active{cursor:grabbing}.craft-btn{background:linear-gradient(135deg,#fb923c,#ea580c);color:#fff;border:none;border-radius:0;padding:6px 16px;font-size:12px;font-weight:700;cursor:pointer;transition:transform .15s}.craft-btn:hover{transform:scale(1.05);filter:brightness(1.1)}.sell-drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:8px;width:100%;min-height:52px;border:2px dashed rgba(150,150,150,.3);border-radius:8px;background:rgba(100,100,100,.05);cursor:not-allowed;transition:all .2s ease;gap:2px;opacity:.45}.sell-drop-zone.sell-ready,.sell-drop-zone.sell-drag-over{border-color:#fbbf24e6;background:rgba(251,191,36,.12);box-shadow:0 0 14px #fbbf2459;cursor:pointer;opacity:1}.item-tooltip{position:fixed;z-index:9999;pointer-events:none;background:linear-gradient(135deg,rgba(15,15,35,.98),rgba(30,20,60,.98));border:1px solid rgba(167,139,250,.5);border-radius:10px;padding:10px 14px;min-width:170px;max-width:230px;box-shadow:0 8px 30px #000000b3,0 0 12px #7c3aed4d;animation:tooltip-in .12s ease}@keyframes tooltip-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.item-tooltip-name{font-size:13px;font-weight:800;color:#e2e8f0;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid rgba(167,139,250,.3)}.item-tooltip-stats{display:flex;flex-direction:column;gap:4px}.item-tooltip-stat{display:flex;justify-content:space-between;align-items:center;font-size:12px}.tip-label{color:#94a3b8}.tip-val{color:#4ade80;font-weight:700;font-size:13px}.item-tooltip-price{margin-top:8px;padding-top:6px;border-top:1px solid rgba(255,215,0,.2);font-size:11px;color:#fbbf24;font-weight:600}.toast-container{position:absolute;top:100%;right:0;margin-top:8px;padding-right:14px;display:flex;flex-direction:column;gap:6px;z-index:200;pointer-events:none;max-width:300px}.toast{padding:8px 14px;border-radius:10px;font-size:12px;font-weight:600;animation:toast-in .3s ease;box-shadow:0 4px 20px #0006}@keyframes toast-in{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}.toast-info{background:rgba(59,130,246,.9);color:#fff;border:1px solid #3b82f6}.toast-success{background:rgba(16,185,129,.9);color:#fff;border:1px solid #10b981}.toast-error{background:rgba(239,68,68,.9);color:#fff;border:1px solid #ef4444}.toast-levelup{background:linear-gradient(135deg,rgba(124,58,237,.95),rgba(217,119,6,.95));color:#fff;border:1px solid #ffd700;font-size:14px;box-shadow:0 0 20px #ffd7004d}.help-panel{position:fixed;top:56px;left:50%;transform:translate(-50%);background:rgba(10,15,30,.92);border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:10px 16px 10px 14px;z-index:201;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 8px 30px #00000080;min-width:220px;max-width:340px;animation:help-in .2s ease}@keyframes help-in{0%{opacity:0;transform:translate(-50%) translateY(-8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.help-panel h4{margin:0 0 8px;font-size:13px;color:#a78bfa;display:flex;justify-content:space-between;align-items:center}.help-panel p{margin:3px 0;font-size:12px;color:#cbd5e1;line-height:1.6}.help-close-btn{background:rgba(255,255,255,.1);border:none;color:#fff;cursor:pointer;border-radius:5px;padding:2px 7px;font-size:14px;transition:background .2s}.help-close-btn:hover{background:rgba(239,68,68,.5)}@media (max-width: 600px){.hud-top{padding:6px 10px;gap:6px}.hud-title{font-size:13px}.hud-btn{padding:4px 9px;font-size:11px}.gold-display{font-size:12px}.exp-text{display:none}.modal-box{max-height:90vh}.shop-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.inventory-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}.toast-container{max-width:180px;gap:4px;padding-right:10px;margin-top:4px}.toast{font-size:10px;padding:5px 9px}.toast-levelup{font-size:11px}.help-panel{max-width:90vw;font-size:11px}}.essence-glow{text-shadow:0 0 10px #c084fc,0 0 20px #c084fc;animation:pulse-glow 2s infinite alternate}@keyframes pulse-glow{0%{text-shadow:0 0 5px #c084fc,0 0 10px #c084fc;transform:scale(1)}to{text-shadow:0 0 15px #c084fc,0 0 30px #a855f7;transform:scale(1.1)}}.item-amount-badge{position:absolute;bottom:1px;right:1px;background:rgba(0,0,0,.8);color:#fff;font-size:9px;font-weight:700;padding:0 2px;border-radius:3px;border:1px solid #fb923c;pointer-events:none;line-height:1.4}.inventory-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0px}.backpack-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0px}.inv-slot{background:rgba(20,20,30,.85);box-shadow:inset 0 0 5px #00000080;border:1px solid rgba(167,139,250,.2);border-radius:0;padding:1px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:38px;min-width:38px;width:38px;height:38px;box-sizing:border-box;cursor:pointer;transition:all .2s ease}.inv-slot:hover{border-color:#ffffff4d;background:rgba(255,255,255,.05)}.inv-slot.selected-slot{border-color:#34d399;box-shadow:0 0 10px #34d3994d}.inv-slot.dragging-slot{opacity:.5;border-style:dashed}.inv-slot.has-item.rarity-normal{border:2px solid rgba(255,255,255,.4);box-shadow:inset 0 0 8px #ffffff1a}.inv-slot.has-item.rarity-magic{border:2px solid rgba(96,165,250,.8);box-shadow:0 0 8px #60a5fa66,inset 0 0 12px #60a5fa4d;background:linear-gradient(135deg,rgba(96,165,250,.15) 0%,rgba(20,20,30,.9) 100%)}.inv-slot.has-item.rarity-rare{border:2px solid rgba(192,132,252,.9);box-shadow:0 0 12px #c084fc80,inset 0 0 15px #c084fc66;background:linear-gradient(135deg,rgba(192,132,252,.2) 0%,rgba(20,20,30,.9) 100%)}.inv-slot.has-item.rarity-legendary{border:2px solid rgba(251,191,36,1);box-shadow:0 0 15px #fbbf2499,inset 0 0 20px #fbbf2480;background:linear-gradient(135deg,rgba(251,191,36,.25) 0%,rgba(20,20,30,.9) 100%)}.inv-slot-label{position:absolute;top:4px;left:4px;font-size:10px;color:#888;pointer-events:none}.inv-item-icon{font-size:24px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));-webkit-user-select:none;user-select:none;pointer-events:none;-webkit-user-drag:none}.inv-empty-text{display:none}.item-amount-badge{position:absolute;bottom:1px;right:1px;background:rgba(0,0,0,.8);color:#fff;font-weight:700;font-size:9px;padding:0 2px;border-radius:3px;pointer-events:none;line-height:1.4;border:1px solid #fb923c;box-shadow:0 1px 2px #00000080}.inv-item-tooltip{position:absolute;bottom:100%;left:50%;transform:translate(-50%);background:rgba(15,23,42,.95);border:1px solid rgba(255,255,255,.2);padding:8px;border-radius:6px;white-space:nowrap;z-index:1000;pointer-events:auto;box-shadow:0 4px 15px #00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);margin-bottom:8px;display:none}.inv-slot-wrapper:hover,.inv-slot-wrapper.is-selected{z-index:9999}.inv-slot-wrapper:hover .inv-item-tooltip,.inv-slot-wrapper.is-selected .inv-item-tooltip{display:block}body.is-dragging-global .inv-item-tooltip{display:none!important}.inv-item-tooltip:after{content:"";position:absolute;bottom:-6px;left:50%;transform:translate(-50%);border-width:6px 6px 0;border-style:solid;border-color:#475569 transparent transparent transparent}.inv-item-name{font-weight:700;color:#fff;font-size:13px;text-align:center;margin-bottom:2px}.inv-item-stats{display:flex;flex-direction:column;gap:4px}.item-desc{font-size:10px;max-width:160px;white-space:pre-wrap;line-height:1.3;text-align:center;margin-top:6px;opacity:.95}.inv-item-tooltip .sell-btn{pointer-events:auto;width:100%;margin-top:4px}.inventory-content-wrapper{max-height:70vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(167,139,250,.5) transparent;padding-right:4px}.inventory-content-wrapper::-webkit-scrollbar{width:6px}.inventory-content-wrapper::-webkit-scrollbar-track{background:transparent}.inventory-content-wrapper::-webkit-scrollbar-thumb{background-color:#a78bfa80;border-radius:10px}.inventory-panels-container{display:flex;gap:20px;justify-content:center;align-items:flex-start;overflow:visible;position:relative;z-index:10}@media (max-width: 768px){.inventory-panels-container{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;gap:6px 10px;align-items:start;justify-content:center;max-height:none;overflow:visible}.inventory-left-panel{grid-column:1;grid-row:1}.inventory-crafting-panel{grid-column:1;grid-row:2;margin-top:-5px}.inventory-right-panel{grid-column:2;grid-row:1 / span 2}.stats-panel{padding:6px 10px;margin-bottom:4px}.stats-panel h3{font-size:11px;margin:0 0 5px;padding-bottom:3px}.stats-grid{gap:4px 10px}.stat-label,.stat-value{font-size:11px}.stats-exp-section{margin-top:5px;padding-top:4px}.inventory-panels-container h3{font-size:11px!important;margin-top:5px!important;padding-bottom:2px!important}.modal-box{padding:10px}.modal-header h2{font-size:16px}}.equipment-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;justify-content:center;max-width:120px;margin:0 auto}.crafting-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;justify-content:center;max-width:100px;margin:0 auto}.eq-helmet{grid-column:1}.eq-amulet{grid-column:2}.eq-weapon{grid-column:1}.eq-chestplate{grid-column:2}.eq-ring1{grid-column:1}.eq-ring2{grid-column:2}.rarity-normal{color:#cbd5e1}.rarity-magic{color:#60a5fa;text-shadow:0 0 5px rgba(96,165,250,.5)}.rarity-rare{color:#c084fc;text-shadow:0 0 6px rgba(192,132,252,.6)}.rarity-legendary{color:#fbbf24;text-shadow:0 0 8px rgba(251,191,36,.7)}