:root{--cream: #f6efe0;--ink: #3a2a1c;--green: #2f6b28;--panel: rgba(246, 239, 224, .94);--border: #8a5a2b;font-family:Pretendard,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#2b2a26;color:var(--ink)}#app{position:relative;width:100vw;height:100vh}canvas{display:block;image-rendering:pixelated}.night{position:absolute;top:0;right:0;bottom:0;left:0;background:#101a3c;opacity:0;pointer-events:none;transition:opacity 1.2s linear}.overlay,.nameplates{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.panel{position:absolute;padding:6px 10px;background:var(--panel);border:2px solid var(--border);border-radius:8px;font-size:14px;font-variant-numeric:tabular-nums}.clock{top:12px;right:12px}.wallet{top:52px;right:12px;font-weight:600}.roster{top:12px;left:12px;display:grid;gap:2px}.roster-row.me{font-weight:700;color:var(--green)}.bottom{position:absolute;bottom:14px;left:50%;transform:translate(-50%);display:grid;gap:6px;justify-items:center}.energy{width:420px;height:10px;background:#3a2a1c59;border:2px solid var(--border);border-radius:6px;overflow:hidden}.energy-fill{height:100%;width:100%;background:var(--green);transition:width .2s linear,background-color .3s}.energy-fill[data-level=low]{background:#d08421}.energy-fill[data-level=empty]{background:#c0392b}.hotbar{display:flex;gap:4px;pointer-events:auto}.slot{position:relative;width:38px;height:38px;background:var(--panel);border:2px solid var(--border);border-radius:6px;display:grid;place-items:center;cursor:pointer;font-size:12px}.slot.selected{border-color:var(--green);box-shadow:0 0 0 2px var(--green) inset}.slot:after{content:attr(data-key);position:absolute;top:1px;left:3px;font-size:9px;opacity:.5}.slot img{width:28px;height:28px;image-rendering:pixelated}.slot .count{position:absolute;right:2px;bottom:0;font-size:11px;font-weight:700;text-shadow:0 1px 0 var(--cream)}.toasts{position:absolute;left:12px;bottom:12px;display:grid;gap:6px}.toast{padding:6px 10px;background:var(--panel);border:2px solid var(--border);border-radius:8px;font-size:13px;animation:rise .2s ease-out}@keyframes rise{0%{opacity:0;transform:translateY(6px)}}.sleeping{position:absolute;top:0;right:0;bottom:0;left:0;background:#101a3cd1;color:var(--cream);display:grid;place-items:center;font-size:20px;pointer-events:auto}.sleeping.hidden{display:none}.nameplate{position:absolute;top:0;left:0;padding:1px 5px;background:var(--panel);border:1px solid var(--border);border-radius:5px;font-size:11px;white-space:nowrap}.gate{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;display:grid;place-content:center;justify-items:center;gap:14px;background:var(--cream);color:var(--ink);pointer-events:auto}.gate h1{margin:0;font-size:28px}.gate label{display:grid;gap:6px;font-size:14px}.gate input{padding:8px 10px;font-size:16px;border:2px solid var(--border);border-radius:8px;background:#fff;color:var(--ink)}.gate button{padding:10px 22px;font-size:16px;font-weight:600;color:var(--cream);background:var(--green);border:2px solid var(--border);border-radius:8px;cursor:pointer}.gate button:hover{transform:translateY(-1px)}.top-centre{position:absolute;top:12px;left:50%;transform:translate(-50%);display:flex;gap:6px;pointer-events:auto}.chip{padding:6px 12px;font-size:13px;font-weight:600;color:var(--ink);background:var(--panel);border:2px solid var(--border);border-radius:999px;cursor:pointer}.chip:hover{transform:translateY(-1px)}.shop{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(460px,92vw);max-height:74vh;display:grid;grid-template-rows:auto 1fr;background:var(--panel);border:3px solid var(--border);border-radius:12px;pointer-events:auto;overflow:hidden}.shop.hidden{display:none}.shop-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:2px solid var(--border)}.shop-head h2{margin:0;font-size:18px}.shop-close,.dialog-buttons button,.shop-row button{padding:5px 10px;font-size:13px;font-weight:600;color:var(--cream);background:var(--green);border:2px solid var(--border);border-radius:6px;cursor:pointer}.shop-row button:disabled{background:#9a9a92;cursor:not-allowed}.shop-body{padding:8px 12px 14px;overflow-y:auto;display:grid;gap:6px}.shop-row{display:grid;grid-template-columns:28px 1fr auto auto auto;align-items:center;gap:8px;padding:4px 2px}.shop-row.blocked{opacity:.45}.shop-row.expand{margin-top:8px;padding-top:10px;border-top:2px dashed var(--border);grid-template-columns:28px 1fr auto auto}.shop-row img{width:24px;height:24px;image-rendering:pixelated}.shop-name{font-size:14px}.shop-price{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}.shop-empty{margin:4px 0 8px;font-size:13px;opacity:.75}.dialog{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:18px 22px;display:grid;gap:14px;justify-items:center;background:var(--panel);border:3px solid var(--border);border-radius:12px;pointer-events:auto}.dialog.hidden{display:none}.dialog p{margin:0;font-size:16px}.dialog-buttons{display:flex;gap:8px}