:root{--panel: rgba(28, 22, 16, .88);--panel-solid: #2a2118;--slot: rgba(0, 0, 0, .28);--border: #8a6d3b;--border-dim: #5a4626;--text: #f1e4c4;--muted: #b9a57d;--accent: #ffd23f;--ok: #8fd36a;--warn: #e8c547;--bad: #e86a4a;--panel-w: 228px}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#1a2418;font:13px/1.4 ui-monospace,SF Mono,Menlo,monospace;color:var(--text);-webkit-user-select:none;user-select:none}#game,#game canvas{display:block;width:100%;height:100%}.hidden{display:none!important}button{font:inherit;color:var(--text);background:#4a3a24;border:1px solid var(--border);border-radius:4px;padding:3px 9px;cursor:pointer}button:hover:not(:disabled){background:#5d4a2e}button:disabled{opacity:.4;cursor:default}#hud{position:fixed;top:12px;left:12px;min-width:200px;padding:10px 12px;background:var(--panel);border:1px solid var(--border);border-radius:6px;pointer-events:none}.title{font-weight:700;font-size:15px;letter-spacing:.04em}.title span{font-weight:400;font-size:11px;color:var(--muted);margin-left:4px}.status{margin:6px 0 4px}.status:before{content:"●";margin-right:6px}.status.online:before{color:var(--ok)}.status.connecting:before{color:var(--warn)}.status.offline:before{color:var(--bad)}#stats{color:var(--muted);white-space:pre}#hp{margin:4px 0 6px}#hp-text{font-weight:700}#hp .bar{height:8px;margin-top:2px}#hp-fill{height:100%;width:100%;background:linear-gradient(90deg,#c4231a,#e8553e);transition:width .3s}#hp.low #hp-text{color:var(--bad)}.gear-slots{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}.gear-slot{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);font-size:11px}.gear-slot .slot{width:56px}.gear-stats{display:grid;grid-template-columns:1fr auto;gap:1px 8px;padding:6px 0;border-top:1px solid var(--border-dim);border-bottom:1px solid var(--border-dim);margin-bottom:8px}.gear-stats b{color:var(--accent);text-align:right}.style-label{color:var(--muted);margin-bottom:4px}.styles{display:flex;flex-direction:column;gap:4px}.styles button{text-align:left;background:transparent;border-color:var(--border-dim)}.styles button.active{background:#4a3a24;border-color:var(--border);color:var(--accent)}.styles small{color:var(--muted)}#hover-text{position:fixed;top:12px;left:50%;transform:translate(-50%);max-width:calc(100% - 2 * var(--panel-w));font-weight:700;text-shadow:0 1px 2px #000,0 0 4px #000;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#hover-text span{color:var(--accent)}#hover-text small{color:var(--muted);font-weight:400}#panel{position:fixed;right:12px;bottom:12px;width:var(--panel-w);background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:8px}.tabs{display:flex;gap:4px;margin-bottom:8px}.tabs button{flex:1;background:transparent;border-color:var(--border-dim)}.tabs button.active{background:#4a3a24;border-color:var(--border)}#pack{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.slot{position:relative;aspect-ratio:1;background:var(--slot);border:1px solid rgba(255,255,255,.04);border-radius:4px;display:grid;place-items:center}.slot img{width:36px;height:36px;image-rendering:auto;pointer-events:none}.slot:has(img){cursor:pointer}.slot:has(img):hover{border-color:var(--border)}.slot .qty{position:absolute;top:1px;left:3px;font-size:11px;font-weight:700;color:var(--accent);text-shadow:0 1px 1px #000;pointer-events:none}#skills,#gear{position:absolute;top:46px;right:8px;bottom:8px;left:8px;overflow-y:auto}#pack.covered{visibility:hidden}.skill{margin-bottom:10px}.skill-head{display:flex;justify-content:space-between}.skill-head b{color:var(--accent)}.bar{height:6px;margin:3px 0;background:var(--slot);border-radius:3px;overflow:hidden}.bar div{height:100%;background:linear-gradient(90deg,#6fae4a,#a9dd6a)}.skill-xp{font-size:11px;color:var(--muted)}.skill-total{border-top:1px solid var(--border-dim);padding-top:6px;color:var(--muted)}#chat{position:fixed;left:12px;bottom:12px;width:min(420px,calc(100% - var(--panel-w) - 36px));height:180px;background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:6px 8px}#chat{display:flex;flex-direction:column;gap:4px}#chat-log{flex:1;min-height:0;overflow-y:auto;-webkit-user-select:text;user-select:text}#chat-input{font:inherit;color:var(--text);background:var(--slot);border:1px solid var(--border-dim);border-radius:4px;padding:3px 6px;-webkit-user-select:text;user-select:text}#chat-input:focus{outline:none;border-color:var(--border)}#chat-input::placeholder{color:var(--muted);opacity:.7}.line .who{color:#9fd3ff;font-weight:700}.line.trade-req{color:#e59bf0;cursor:pointer;text-decoration:underline dotted}.line{padding:1px 0}.line.examine{color:#cfe3ff}.line.level{color:var(--accent);font-weight:700}.line.system{color:var(--muted)}#drops{position:fixed;right:calc(var(--panel-w) + 28px);bottom:200px;display:flex;flex-direction:column;align-items:flex-end;gap:2px;pointer-events:none}.drop{font-weight:700;color:#fff;text-shadow:0 1px 2px #000;animation:rise 1.8s ease-out forwards}.drop.up{color:var(--accent);font-size:16px;animation-duration:3s}@keyframes rise{0%{opacity:1;transform:translateY(0)}70%{opacity:1}to{opacity:0;transform:translateY(-40px)}}#menu{position:fixed;z-index:20;min-width:150px;background:var(--panel-solid);border:1px solid var(--border);border-radius:4px;padding:2px 0;box-shadow:0 4px 14px #00000080}.menu-title{padding:2px 8px 4px;color:var(--muted);border-bottom:1px solid var(--border-dim)}.menu-item{padding:3px 8px;cursor:pointer;white-space:nowrap}.menu-item span{color:var(--accent)}.menu-item:hover{background:#4a3a24}.modal{position:fixed;z-index:10;left:50%;top:46%;transform:translate(-50%,-50%);width:min(460px,calc(100% - 32px));max-height:70vh;display:flex;flex-direction:column;background:var(--panel-solid);border:1px solid var(--border);border-radius:6px;box-shadow:0 8px 30px #0000008c}.modal-head{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--border-dim);font-weight:700}.modal-head span{flex:1}#bank-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:4px;padding:10px;overflow-y:auto}#bank-grid .empty{grid-column:1 / -1;color:var(--muted);padding:12px 0;text-align:center}#carve-list{overflow-y:auto;padding:6px}.recipe{display:flex;align-items:center;gap:10px;padding:6px;border-radius:4px}.recipe:hover{background:#ffffff0a}.recipe.off{opacity:.55}.recipe img{width:36px;height:36px;flex:none}.recipe-info{flex:1;display:flex;flex-direction:column;min-width:0}.recipe-info small{color:var(--muted)}.recipe-info small.bad{color:var(--bad)}.recipe-btns{display:flex;gap:4px}.recipe-btns button{padding:3px 7px}@media (max-width: 720px){:root{--panel-w: 180px}.slot img{width:28px;height:28px}#chat{height:110px}#hud{display:none}}#trade-body{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px}.trade-label{color:var(--muted);margin-bottom:6px}.trade-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;min-height:108px;align-content:start;padding:4px;border:1px solid var(--border-dim);border-radius:4px}#trade.confirm .trade-grid{border-color:var(--accent)}#trade-status{padding:0 10px;min-height:1.4em;color:var(--muted)}#trade-status.ok{color:var(--ok)}.trade-buttons{display:flex;gap:8px;justify-content:center;padding:10px}#trade-accept{background:#3f5a2a;border-color:#6fae4a}#trade-accept:hover:not(:disabled){background:#4d6e33}#login{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;display:grid;place-items:center;padding:16px;background:radial-gradient(ellipse at center,#1a2418bf,#0a0e09f2)}#login-form{width:min(340px,100%);display:flex;flex-direction:column;gap:10px;padding:22px;background:var(--panel-solid);border:1px solid var(--border);border-radius:8px;box-shadow:0 10px 40px #0009;-webkit-user-select:text;user-select:text}#login-form h1{margin:0;font-size:24px;letter-spacing:.06em;color:var(--accent)}#login-form .tagline,#login-form .hint{margin:0;color:var(--muted);font-size:12px}#login-form label{display:flex;flex-direction:column;gap:4px}#login-form input{font:inherit;color:var(--text);background:var(--slot);border:1px solid var(--border-dim);border-radius:4px;padding:6px 8px}#login-form input:focus{outline:none;border-color:var(--border)}#login-error{min-height:1.2em;color:var(--bad)}.login-buttons{display:flex;gap:8px}.login-buttons button{flex:1;padding:6px}#login-btn{background:#3f5a2a;border-color:#6fae4a}#login-error.pending{color:var(--muted)}