*{margin:0;padding:0;box-sizing:border-box}body{font-family:Courier New,monospace;background-color:#000;overflow:hidden;color:#fff}#game-container{width:100vw;height:100vh;position:relative}#game-canvas{width:100%;height:100%;display:block;cursor:crosshair}#game-canvas.hidden{display:none}#ui-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}#ui-overlay>*{pointer-events:auto}#top-bar{position:absolute;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;background:#000000d9;padding:10px;border:2px solid #333;border-radius:4px}#player-stats{display:flex;gap:20px;font-size:14px;color:#fff}#connection-status{display:flex;align-items:center;gap:8px;font-size:12px;color:#888}.status-indicator{width:10px;height:10px;border-radius:50%;background-color:#f44}#connection-status.connected .status-indicator{background-color:#4f4}#connection-status.connecting .status-indicator{background-color:#ffb84d;animation:pulse 1s infinite}#connection-status.disconnected .status-indicator{background-color:#f44}#connection-status.error .status-indicator{background-color:#f44;animation:pulse .5s infinite}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}#chat-box{position:absolute;bottom:10px;left:10px;width:400px;background:#000000d9;border:2px solid #333;border-radius:4px}#chat-messages{height:150px;overflow-y:auto;padding:10px;font-size:12px;line-height:1.4;color:#fff}#chat-input{width:100%;padding:8px;background:#000000e6;border:none;border-top:1px solid #333;color:#fff;font-family:Courier New,monospace;font-size:12px;outline:none}#chat-input::placeholder{color:#888}#chat-input:disabled{opacity:.5}.chat-message{margin-bottom:4px}.chat-message.system{color:#ffb84d;font-weight:700}.chat-message.player{color:#fff}.chat-message.local{color:#888}.panel{position:absolute;width:300px;background:#000000d9;border:2px solid #333;border-radius:4px;transition:opacity .2s;z-index:20}.panel.hidden{display:none}#skills-panel,#inventory-panel{bottom:70px;right:10px;height:400px}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:10px;background:#00000080;border-bottom:2px solid #333}.panel-header h3{font-size:16px;color:#ffb84d;text-transform:uppercase;font-weight:700}.close-btn{background:none;border:none;color:#ffb84d;font-size:24px;cursor:pointer;padding:0;width:24px;height:24px;line-height:20px}.close-btn:hover{color:#f44}.panel-content{padding:10px;height:calc(100% - 50px);overflow-y:auto;color:#fff}#inventory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.inventory-slot{aspect-ratio:1;background:#0009;border:1px solid #333;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer}.inventory-slot:hover{background:#32323299;border-color:#ffb84d}.inventory-slot.has-item{background:#1e1e1e99;border-color:#888}.item-quantity{position:absolute;bottom:2px;right:2px;font-size:10px;color:#ffb84d;text-shadow:1px 1px 2px #000;font-weight:700}.skill-row{display:flex;justify-content:space-between;padding:8px;margin-bottom:4px;background:#00000080;border:1px solid #333;font-size:12px}.skill-name{color:#fff}.skill-level{color:#ffb84d;font-weight:700}#action-buttons{position:absolute;bottom:10px;right:10px;display:flex;flex-direction:row;gap:10px;z-index:10}.action-btn{padding:10px 20px;background:#000000d9;border:2px solid #333;color:#fff;font-family:Courier New,monospace;font-size:12px;cursor:pointer;border-radius:4px;transition:all .2s;text-transform:uppercase;font-weight:700}.action-btn:hover{background:#000000f2;border-color:#ffb84d;box-shadow:0 0 10px #ffb84d4d}.action-btn:active{transform:scale(.95)}.run-btn.running{background:#322800d9;border-color:#ffb84d;color:#ffb84d;box-shadow:0 0 10px #ffb84d80}.run-btn.running:hover{background:#463700f2}#username-screen{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;display:flex;align-items:center;justify-content:center;z-index:1001;transition:opacity .5s}#username-screen.hidden{opacity:0;pointer-events:none;display:none}.username-content{text-align:center;max-width:400px;width:90%}.username-content h1{font-size:48px;margin-bottom:40px;color:#ffb84d;text-shadow:0 0 20px #FFB84D,2px 2px 4px #000;text-transform:uppercase;letter-spacing:4px;font-weight:700}.username-form{background:#000000e6;border:2px solid #FFB84D;border-radius:8px;padding:30px}.username-form label{display:block;font-size:18px;color:#ffb84d;margin-bottom:15px;text-transform:uppercase;font-weight:700}#username-input{width:100%;padding:15px;font-size:18px;background:#000c;border:2px solid #333;color:#fff;font-family:Courier New,monospace;border-radius:4px;margin-bottom:10px;text-align:center;outline:none;transition:border-color .3s}#username-input:focus{border-color:#ffb84d}.username-error{min-height:20px;color:#f44;font-size:14px;margin-bottom:15px}.username-btn{width:100%;padding:15px;font-size:18px;background:#000000e6;border:2px solid #FFB84D;color:#ffb84d;font-family:Courier New,monospace;font-weight:700;text-transform:uppercase;border-radius:4px;cursor:pointer;transition:all .3s;margin-bottom:20px}.username-btn:hover{background:#ffb84d1a;box-shadow:0 0 20px #ffb84d80}.username-btn:active{transform:scale(.98)}.username-btn:disabled{opacity:.5;cursor:not-allowed}.username-rules{font-size:12px;color:#888;line-height:1.8;text-align:left}#loading-screen{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;display:flex;align-items:center;justify-content:center;z-index:1000;transition:opacity .5s}#loading-screen.hidden{opacity:0;pointer-events:none}.loading-content{text-align:center}.loading-content h1{font-size:48px;margin-bottom:30px;color:#ffb84d;text-shadow:0 0 20px #FFB84D,2px 2px 4px #000;text-transform:uppercase;letter-spacing:4px;font-weight:700}.loading-spinner{width:50px;height:50px;border:4px solid rgba(255,184,77,.2);border-top:4px solid #FFB84D;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 20px;box-shadow:0 0 20px #ffb84d80}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#loading-text{font-size:14px;color:#fff}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#00000080}::-webkit-scrollbar-thumb{background:#333;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#ffb84d}#debug-overlay{position:absolute;top:70px;right:10px;background:#000000d9;border:2px solid #333;border-radius:4px;padding:10px;font-family:Courier New,monospace;font-size:11px;color:#0f0;min-width:220px;pointer-events:none;-webkit-user-select:none;user-select:none}#debug-overlay.hidden{display:none}.debug-section{margin-bottom:12px}.debug-section:last-child{margin-bottom:0}.debug-title{font-size:12px;font-weight:700;color:#ff0;margin-bottom:4px;text-transform:uppercase;border-bottom:1px solid #333;padding-bottom:2px}.debug-stat{display:flex;justify-content:space-between;margin-bottom:2px;line-height:1.4}.debug-stat .label{color:#888}.debug-stat span:last-child{color:#0f0;font-weight:700}