*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#101c19;color:#e6dfc7;font:14px 'Segoe UI',sans-serif}button,input{font:inherit}button{cursor:pointer;color:inherit;border:1px solid #655b42;background:#182721;padding:7px 11px}button:hover{background:#324536;border-color:#c3b17f}button:focus-visible,canvas:focus-visible{outline:2px solid #e8ca7c;outline-offset:2px}[hidden]{display:none!important}#world{display:block;width:100vw;height:100vh;image-rendering:pixelated;outline:none}.panel{background:rgba(13,26,23,.95);border:1px solid #7f7150;box-shadow:0 5px 20px #0005,inset 0 0 0 4px #25362b}.status{position:absolute;left:22px;top:22px;width:290px;padding:16px;pointer-events:none}.name{display:flex;align-items:center;gap:10px;margin-bottom:12px;letter-spacing:1px}.name small{margin-left:auto;color:#8eaa91;font-size:10px}.gem{color:#d9b264}.bar{position:relative;height:17px;background:#172023;margin-top:7px;border:1px solid #4c5141;font-size:10px}.bar span{display:block;height:100%;width:100%}.health span{background:linear-gradient(90deg,#843f38,#bf6750)}.mana span{background:linear-gradient(90deg,#315969,#4e8d9b)}.bar b,.bar em{position:absolute;top:1px;font-style:normal;font-weight:500}.bar b{left:6px}.bar em{right:6px}.location{position:absolute;top:28px;left:50%;transform:translateX(-50%);text-align:center;text-shadow:0 2px 5px #000;pointer-events:none}.location small{font-size:9px;letter-spacing:3px;color:#becb9e}.location h1{font:28px Georgia,serif;margin:5px 0;color:#f1dfac}.location span{color:#c0cbb7;font-size:12px}.navigation{position:absolute;right:22px;top:22px;padding:10px;width:190px}.navigation canvas{width:168px;height:126px;image-rendering:pixelated}.navigation>div{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:11px}.navigation button{font-size:11px;padding:5px}.bottom{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;max-width:95vw}.hotbar{display:flex;padding:10px 16px;align-items:center;gap:8px}.hotbar>small{font-size:9px;letter-spacing:1px;writing-mode:vertical-rl;transform:rotate(180deg);color:#a6ae92}.hotbar button,.hotbar .empty{height:48px;width:48px;position:relative;padding:0;background:#101e19;border:1px solid #6a6246}.hotbar img{width:46px;height:46px;object-fit:contain;image-rendering:pixelated}.hotbar kbd,.hotbar .empty{color:#a5ad93;font-size:10px}.hotbar kbd{position:absolute;top:2px;left:4px;z-index:1}.hotbar .empty{padding:3px 5px;border-color:#3c4938}.divider{width:10px}.help{display:flex;gap:14px;align-items:center;background:#101d18dc;padding:8px 12px;border:1px solid #314837;font-size:11px;color:#bdc9af;white-space:nowrap}.help label{display:flex;gap:6px;align-items:center}.help input{width:70px;accent-color:#b5bf7e}.help button{font-size:10px;padding:3px 7px}kbd{font:inherit;color:#f1dca5}#toast{position:absolute;left:50%;bottom:154px;transform:translateX(-50%);background:#102218ec;padding:10px 18px;border:1px solid #6d7951;font-size:12px;transition:opacity .4s;max-width:80vw;text-align:center;pointer-events:none}#inventory{position:absolute;right:22px;top:205px;width:350px;padding:18px;max-height:calc(100vh - 220px);overflow:auto}.invtitle{display:flex;align-items:center;justify-content:space-between}h2{font:18px Georgia,serif;color:#e8d5a5;margin:0 0 12px}h3{font-size:11px;text-transform:uppercase;letter-spacing:2px;color:#a8b496;margin:15px 0 8px}h3 small{float:right}#gear{display:grid;grid-template-columns:repeat(4,1fr);gap:11px 8px}.slot{position:relative;text-align:center;background:#0b1914;border:1px solid #566144;min-width:0;aspect-ratio:1}.slot img{width:100%;height:100%;image-rendering:pixelated}.slot span{position:absolute;bottom:0;left:0;width:100%;font-size:8px;background:#08130ccf;color:#c3cbb6}.slot.empty:before{content:'+';position:absolute;inset:0;display:grid;place-items:center;color:#3d5943}.slot.disabled{opacity:.5}.slot.disabled:before{content:'×'}.slot b{position:absolute;bottom:2px;right:4px;font-size:11px}#rings{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}#bag{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}#inventory p{font-size:10px;color:#899b84}#loading{position:absolute;inset:0;display:grid;place-items:center;background:#102218;font:25px Georgia,serif}@media(max-width:800px){.status{left:10px;top:10px;width:210px;padding:10px}.location{top:110px}.location h1{font-size:21px}.location small{display:none}.navigation{right:10px;top:10px;width:122px;padding:7px}.navigation canvas{width:106px;height:80px}.navigation>div{font-size:8px}.navigation button{font-size:9px}.help{gap:7px;flex-wrap:wrap;justify-content:center;white-space:normal}.hotbar{padding:8px}.hotbar button,.hotbar .empty{height:38px;width:38px}.hotbar img{width:36px;height:36px}#inventory{right:10px;top:150px;max-height:calc(100vh - 165px);width:320px}#toast{bottom:160px}}