*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#050705}#app,#app canvas{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;image-rendering:pixelated}#ui{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;font-family:Courier New,Courier,monospace;color:#e8dcc0;-webkit-user-select:none;user-select:none}.panel{background:#18120ce0;border:3px solid #8a6a3a;outline:2px solid #241a10;box-shadow:0 0 0 1px #d8b878 inset;padding:10px 12px;image-rendering:pixelated}.panel-title{color:#f0c860;font-weight:700;letter-spacing:1px;margin-bottom:6px;text-transform:uppercase;font-size:13px}.hidden{display:none!important}.gold{color:#f0c860;font-weight:700}#hud-top-left{position:absolute;top:14px;left:14px;min-width:190px}.hud-name{color:#fff;font-weight:700;margin-bottom:5px;letter-spacing:1px}.bar-outer{width:100%;height:14px;background:#3a1410;border:2px solid #241a10}.bar-inner{height:100%;width:100%;background:linear-gradient(#d84c3c,#a82c20);transition:width .12s linear}.hud-sub{margin-top:5px;font-size:12px;color:#b8a888}#quest-tracker{position:absolute;top:14px;right:14px;width:250px;font-size:13px;line-height:1.45}#interact-prompt{position:absolute;bottom:150px;left:50%;transform:translate(-50%);background:#18120ce6;border:2px solid #8a6a3a;padding:5px 14px;font-size:14px;color:#f0c860;font-weight:700}#dialogue{position:absolute;bottom:26px;left:50%;transform:translate(-50%);width:min(620px,90vw);font-size:15px;line-height:1.5}#toast{position:absolute;top:90px;left:50%;transform:translate(-50%);background:#18120ceb;border:3px solid #f0c860;padding:10px 22px;font-size:16px;font-weight:700;color:#f0c860;text-align:center}#hp-blocks-wrap{position:absolute;left:14px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:6px}#hp-blocks{display:flex;flex-direction:column-reverse;gap:3px}.hp-block{width:22px;height:15px;border:2px solid #241a10;background:linear-gradient(#e86a52,#a82c20);box-shadow:0 0 0 1px #f0a08a inset;image-rendering:pixelated}.hp-block.empty{background:#251210;box-shadow:none}#hp-blocks-wrap .hud-sub{margin-top:0;text-shadow:1px 1px 0 #000}@media (max-height: 720px),(max-width: 700px){.hp-block{width:16px;height:11px}}#damage-numbers{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none}.dmg-num{position:absolute;transform:translate(-50%,-100%);font-size:17px;font-weight:700;text-shadow:1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000;animation:dmg-float .9s ease-out forwards}@keyframes dmg-float{0%{opacity:1;margin-top:0}70%{opacity:1}to{opacity:0;margin-top:-44px}}#death-msg{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);text-align:center;background:#140604eb;border:3px solid #a82c20;outline:2px solid #241a10;box-shadow:0 0 0 1px #d84c3c inset;padding:18px 34px}.death-title{font-size:34px;font-weight:700;letter-spacing:8px;color:#d84c3c;text-shadow:2px 2px 0 #241a10}.death-body{margin-top:8px;font-size:14px;color:#e8dcc0}#controls-card{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;font-size:16px;padding:18px 30px}.controls-line{margin:4px 0}#mini-hint{position:absolute;bottom:10px;left:14px;font-size:11px;color:#e6dcbe8c}.xp-outer{margin-top:7px;height:8px;background:#241a30}.xp-inner{background:linear-gradient(#b078e8,#7a3ac8);width:0%}#chat-box{position:absolute;left:14px;bottom:34px;width:min(430px,80vw);font-size:13px;pointer-events:none}#chat-messages{max-height:176px;overflow-y:auto;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding:4px 6px;background:#0a080680;scrollbar-width:thin}.chat-line{line-height:1.35;text-shadow:1px 1px 0 #000;word-wrap:break-word}.chat-line .chat-from{color:#8ad8ff;font-weight:700}.chat-line.chat-self .chat-from{color:#f0c860}.chat-line.chat-system{color:#b0e8a0;font-style:italic}#chat-input{pointer-events:auto;display:block;width:100%;margin-top:4px;padding:6px 8px;font-family:inherit;font-size:13px;color:#e8dcc0;background:#18120ceb;border:2px solid #8a6a3a;outline:none}#chat-input:focus{border-color:#f0c860}#inventory{position:absolute;bottom:14px;right:14px;width:250px;pointer-events:auto}#inv-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;min-height:43px}.inv-slot{position:relative;aspect-ratio:1;background:#0a0806bf;border:2px solid #5a4626;cursor:pointer;display:flex;align-items:center;justify-content:center}.inv-slot:hover{border-color:#f0c860}.inv-slot img{width:70%;height:70%;image-rendering:pixelated}.inv-slot .inv-qty{position:absolute;right:2px;bottom:0;font-size:11px;font-weight:700;color:#fff;text-shadow:1px 1px 0 #000}.inv-slot.selected{border-color:#f0c860;background:#463214bf}.inv-empty{grid-column:1 / -1;color:#b8a888;font-size:12px;align-self:center;text-align:center;padding:8px 0}#hotbar{position:absolute;bottom:10px;left:50%;transform:translate(-50%);display:flex;gap:4px;padding:5px;background:#18120ce0;border:3px solid #8a6a3a;outline:2px solid #241a10;box-shadow:0 0 0 1px #d8b878 inset;pointer-events:auto;image-rendering:pixelated}.hb-slot{position:relative;width:46px;height:46px;background:#0a0806d9;border:2px solid #5a4626;box-shadow:1px 1px #241a10 inset;cursor:pointer;display:flex;align-items:center;justify-content:center}.hb-slot:hover{border-color:#d8b878}.hb-slot.active{border-color:#f0c860;box-shadow:0 0 0 2px #f0c860,1px 1px #241a10 inset;background:#463214cc}.hb-slot img{width:72%;height:72%;image-rendering:pixelated}.hb-slot.unavailable img{filter:grayscale(1) brightness(.5)}.hb-slot .hb-num{position:absolute;top:0;left:2px;font-size:9px;color:#b8a888;text-shadow:1px 1px 0 #000}.hb-slot.active .hb-num{color:#f0c860}.hb-slot .hb-qty{position:absolute;right:2px;bottom:0;font-size:12px;font-weight:700;color:#fff;text-shadow:1px 1px 0 #000}.hb-slot.unavailable .hb-qty{color:#ff9a8a}@media (max-width: 700px){.hb-slot{width:32px;height:32px}.hb-slot .hb-qty{font-size:10px}}.inv-menu-slots{display:flex;gap:3px}.inv-slot-btn{font-family:inherit;font-size:11px;font-weight:700;width:22px;height:22px;padding:0;cursor:pointer;color:#e8dcc0;background:#0a0806cc;border:2px solid #5a4626}.inv-slot-btn:hover{border-color:#f0c860;color:#f0c860}.inv-menu{margin-top:6px;border-top:2px solid #5a4626;padding-top:6px;display:flex;align-items:center;gap:6px}.inv-menu-name{flex:1;font-size:12px;font-weight:700;color:#f0c860;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inv-menu-btn{font-family:inherit;font-size:12px;font-weight:700;padding:4px 10px;cursor:pointer;color:#e8dcc0;background:#0a0806cc;border:2px solid #5a4626}.inv-menu-btn:hover{border-color:#f0c860}.inv-menu-eat{color:#8ae88a;border-color:#2a5a2a}.inv-menu-eat:hover{border-color:#8ae88a}#trade-window{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(660px,94vw);max-height:78vh;display:flex;flex-direction:column;pointer-events:auto;font-size:13px}.trade-head{display:flex;align-items:center;gap:12px}.trade-head .panel-title{margin-bottom:0;flex:1}.trade-gold{font-size:13px;color:#b8a888}.trade-close{font-family:inherit;font-size:14px;font-weight:700;padding:2px 8px;cursor:pointer;color:#e8dcc0;background:#0a0806cc;border:2px solid #5a4626}.trade-close:hover{border-color:#ff9a8a;color:#ff9a8a}.trade-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px;min-height:120px}@media (max-width: 700px){.trade-cols{grid-template-columns:1fr}}.trade-col-title{font-size:12px;font-weight:700;color:#f0c860;text-transform:uppercase;letter-spacing:1px;margin-bottom:5px}.trade-list{display:flex;flex-direction:column;gap:4px;overflow-y:auto;max-height:46vh;scrollbar-width:thin}.trade-row{display:flex;align-items:center;gap:8px;padding:4px 6px;background:#0a0806a6;border:2px solid #5a4626}.trade-row img{width:24px;height:24px;image-rendering:pixelated;flex:none}.trade-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.trade-stock{color:#b8a888;font-size:11px}.trade-price{color:#f0c860;font-weight:700;flex:none}.trade-price.trade-poor{color:#ff9a8a}.trade-btn{font-family:inherit;font-size:12px;font-weight:700;padding:3px 10px;cursor:pointer;color:#241a10;background:linear-gradient(#f0c860,#c89838);border:2px solid #241a10;flex:none}.trade-btn:hover:not(:disabled){filter:brightness(1.1)}.trade-btn:disabled{filter:grayscale(.7) brightness(.7);cursor:not-allowed}.trade-empty{color:#b8a888;font-size:12px;padding:8px 4px}#login-screen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;font-family:Courier New,Courier,monospace;color:#e8dcc0;background:radial-gradient(ellipse at 50% 120%,rgba(120,70,20,.5),transparent 60%),radial-gradient(ellipse at 50% -20%,rgba(30,50,90,.6),transparent 55%),#060806;transition:opacity .6s ease;-webkit-user-select:none;user-select:none}#login-screen.login-fade{opacity:0}.login-stars{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background-image:radial-gradient(1px 1px at 12% 22%,#fff 100%,transparent),radial-gradient(1px 1px at 28% 8%,#c8d8ff 100%,transparent),radial-gradient(2px 2px at 41% 31%,#fff 100%,transparent),radial-gradient(1px 1px at 57% 12%,#ffe8c0 100%,transparent),radial-gradient(1px 1px at 66% 27%,#fff 100%,transparent),radial-gradient(2px 2px at 78% 9%,#c8d8ff 100%,transparent),radial-gradient(1px 1px at 89% 24%,#fff 100%,transparent),radial-gradient(1px 1px at 8% 44%,#ffe8c0 100%,transparent),radial-gradient(1px 1px at 93% 41%,#fff 100%,transparent);animation:star-twinkle 3.2s ease-in-out infinite alternate}@keyframes star-twinkle{0%{opacity:.5}to{opacity:1}}.login-title{text-align:center;z-index:1}.login-logo{font-size:clamp(38px,7vw,64px);font-weight:700;letter-spacing:10px;color:#f0c860;text-shadow:3px 3px 0 #241a10,-1px -1px 0 #241a10,0 0 24px rgba(240,200,96,.45)}.login-sub{margin-top:6px;letter-spacing:6px;font-size:14px;color:#b8a888}.login-panel{z-index:1;width:min(360px,88vw);display:flex;flex-direction:column;gap:6px;padding:16px 18px 14px}.login-label{font-size:12px;color:#b8a888;margin-top:6px}.login-panel input{font-family:inherit;font-size:15px;padding:8px 9px;color:#e8dcc0;background:#0a0806cc;border:2px solid #5a4626;outline:none}.login-panel input:focus{border-color:#f0c860}.login-panel button{margin-top:12px;font-family:inherit;font-size:15px;font-weight:700;letter-spacing:2px;padding:10px;cursor:pointer;color:#241a10;background:linear-gradient(#f0c860,#c89838);border:2px solid #241a10;box-shadow:0 0 0 1px #d8b878 inset}.login-panel button:hover:not(:disabled){filter:brightness(1.1)}.login-panel button:disabled{filter:grayscale(.4) brightness(.8);cursor:wait}.login-error{margin-top:6px;font-size:12px;color:#ff9a8a}.login-note{margin-top:10px;font-size:11px;color:#b8a888;text-align:center}.login-version{position:absolute;bottom:12px;right:16px;font-size:11px;color:#e6dcbe73;z-index:1}.server-panel{width:min(420px,90vw)}.server-row{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;padding:9px 10px;border:2px solid #5a4626;background:#0a080699;cursor:pointer;margin-bottom:6px}.server-row:hover{border-color:#d8b878}.server-row.selected{border-color:#f0c860;background:#4632148c}.server-name{grid-column:1;font-size:16px;font-weight:700;color:#fff}.server-status{grid-column:2;grid-row:1 / 3;align-self:center;font-weight:700;color:#ff9a8a}.server-status.online{color:#8ae88a}.server-meta{grid-column:1;font-size:11px;color:#b8a888}#map-fade{position:fixed;top:0;right:0;bottom:0;left:0;background:#000;opacity:0;pointer-events:none;transition:opacity .18s ease-in-out;z-index:60}#map-fade.active{opacity:1}#map-banner{position:absolute;top:46px;left:50%;transform:translate(-50%);font-size:20px;font-weight:700;letter-spacing:2px;color:#f0c860;text-shadow:2px 2px 0 #241a10;pointer-events:none;z-index:61}