:root{--panel: rgba(20, 16, 12, .92);--border: #7a5a2a;--gold: #e3c27a;--text: #f1e6cf;--muted: #a8977a;--danger: #ff7a6b;--ok: #8fd48a}*{box-sizing:border-box}html,body{margin:0;height:100%;background:#000;color:var(--text);font:14px/1.4 Segoe UI,Arial,sans-serif;overflow:hidden}#game{position:fixed;inset:0}#game canvas{display:block;width:100%;height:100%}#ui{position:fixed;inset:0;pointer-events:none}#ui>*{pointer-events:auto}.panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:20px 24px;min-width:320px;max-width:92vw;box-shadow:0 10px 40px #000000b3}.panel h1{margin:0 0 12px;font-size:20px;color:var(--gold);letter-spacing:.5px}.panel label{display:block;font-size:12px;color:var(--muted);margin:10px 0 4px}.panel input,.panel select{width:100%;padding:8px 10px;background:#0d0b09;color:var(--text);border:1px solid #3d2f1b;border-radius:4px;font-size:14px}.panel button,.btn{margin-top:14px;padding:9px 16px;width:100%;border:1px solid var(--border);background:linear-gradient(#5a3d1a,#3a2510);color:var(--gold);font-weight:600;border-radius:4px;cursor:pointer}.panel button:hover,.btn:hover{filter:brightness(1.15)}.panel button:disabled{opacity:.5;cursor:default}.status{margin-top:10px;font-size:12px;color:var(--muted);min-height:1.4em;white-space:pre-wrap}.status.err{color:var(--danger)}.status.ok{color:var(--ok)}.roles{display:flex;flex-direction:column;gap:8px;margin-top:6px}.role{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border:1px solid #3d2f1b;border-radius:4px;background:#15110c;cursor:pointer}.role:hover{border-color:var(--border)}.role .name{font-weight:600;color:var(--gold)}.role .meta{font-size:12px;color:var(--muted)}.row{display:flex;gap:8px}.row>*{flex:1}#uitip{position:absolute;z-index:50;pointer-events:none;background:#000000d9;color:#ffe9a8;border:1px solid #6b5a2e;padding:2px 6px;font-size:12px;white-space:pre}#chat.native{gap:0}#chat.native #chatlog{background:transparent;border:0;padding:0}#chat.native #chatinput{background:#191f0bb3;border:0;color:#feffa0;padding:0 2px;font-size:12px;line-height:1}#hud{position:absolute;left:8px;top:8px;font-size:12px;color:var(--muted);text-shadow:0 1px 2px #000;pointer-events:none}#hud b{color:var(--gold)}#chat{position:absolute;left:8px;bottom:8px;width:min(460px,95vw);display:flex;flex-direction:column;gap:4px}#chatlog{max-height:32vh;overflow-y:auto;padding:6px 8px;background:#00000073;border-radius:4px;font-size:13px;text-shadow:0 1px 1px #000}#chatlog div{padding:1px 0}#chatlog .sys{color:#ffd27a}#chatlog .me{color:#bfe3ff}#chatlog .name{color:var(--gold);font-weight:600}#chatinput{padding:7px 10px;background:#0009;color:var(--text);border:1px solid #3d2f1b;border-radius:4px;font-size:14px}#dialog{position:absolute;right:12px;top:12px;width:min(420px,92vw);background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:12px 14px;display:none}#dialog .text{white-space:pre-wrap;margin-bottom:8px}#dialog .opt{display:block;width:100%;text-align:left;margin-top:6px}.inv-window{position:absolute;background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:8px;box-shadow:0 8px 30px #000000b3;user-select:none}#inv-bag{right:12px;top:60px}#inv-equip{right:230px;top:60px}.inv-title{color:var(--gold);font-weight:600;text-align:center;margin-bottom:6px;position:relative}.inv-close{position:absolute;right:-4px;top:-6px;width:22px;height:22px;margin:0;padding:0;border:1px solid var(--border);background:#2a1c0c;color:var(--gold);border-radius:3px;cursor:pointer}.inv-grid{position:relative;background-color:#0d0b09;background-image:linear-gradient(#2a2218 1px,transparent 1px),linear-gradient(90deg,#2a2218 1px,transparent 1px);background-size:28px 28px;border:1px solid #3d2f1b}.inv-item{position:absolute;box-sizing:border-box;border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:9px;color:var(--muted)}.inv-item.blue{border-color:#4a7fd6}.inv-item.purple{border-color:#b36bff}.inv-item.gold{border-color:#f0c04a}.inv-item.red{border-color:#e05a4a}.inv-icon{image-rendering:pixelated;pointer-events:none}.inv-count{position:absolute;right:2px;bottom:0;font-size:10px;color:#fff;text-shadow:0 0 2px #000}.inv-money{margin-top:6px;font-size:12px;color:var(--gold)}.inv-equip-area{position:relative;width:200px;height:272px}.inv-slot{position:absolute;box-sizing:border-box;border:1px solid #3d2f1b;background:#0d0b09;display:flex;align-items:center;justify-content:center;overflow:hidden}.inv-slot.filled{border-color:#7a5a2a}.inv-slot.blue{border-color:#4a7fd6}.inv-slot.purple{border-color:#b36bff}.inv-slot.gold{border-color:#f0c04a}.item-hand{position:fixed;pointer-events:none;z-index:50;opacity:.9}.item-tip{position:fixed;z-index:60;pointer-events:none;max-width:320px;background:#0c0906f2;border:1px solid var(--border);border-radius:4px;padding:6px 10px;font-size:12px;line-height:1.35;white-space:pre-wrap}.item-tip .tl.name{font-weight:700;margin-bottom:2px}.item-tip .white{color:#f1e6cf}.item-tip .blue{color:#7fb0ff}.item-tip .purple{color:#d08cff}.item-tip .gold{color:#ffd45a}.item-tip .red{color:#ff7a6b}.item-tip .dim{opacity:.55}.item-tip .muted{color:var(--muted)}.item-tip .intro{color:#c9b891;font-style:italic}.item-tip .base{color:#e8e1d2}.item-tip .req{color:#b7c9a6}.item-tip .series0{color:#ffe08a}.item-tip .series1{color:#8ee08a}.item-tip .series2{color:#8ab8ff}.item-tip .series3{color:#ff8a7a}.item-tip .series4{color:#d2a86a}#status-win{left:12px;top:60px;min-width:260px}.status-body{font-size:13px}.status-row{display:flex;align-items:center;gap:8px;padding:2px 0;border-bottom:1px solid #2a2218}.status-row .k{color:var(--muted);flex:1}.status-row .v{color:var(--text)}.status-row .plus,.skill-cell .plus{width:18px;height:18px;margin:0;padding:0;line-height:14px;font-size:13px;border:1px solid var(--border);background:#4a3010;color:var(--gold);border-radius:3px;cursor:pointer}#skills-win{left:290px;top:60px}.skill-grid{display:grid;grid-template-columns:repeat(5,39px);grid-auto-rows:39px;gap:0;width:195px;min-height:117px}.skill-cell{position:relative;width:36px;height:36px;margin:1px;box-sizing:border-box;border:1px solid #3d2f1b;background:#0d0b09;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer}.skill-cell.sel{border-color:var(--gold);box-shadow:0 0 6px var(--gold)}.skill-cell .lvl{position:absolute;left:2px;bottom:0;font-size:10px;color:#fff;text-shadow:0 0 2px #000}.skill-cell .lvl.bonus{color:#7fb0ff}.skill-cell .plus{position:absolute;right:0;bottom:0}#skillbar{position:absolute;left:50%;bottom:8px;transform:translate(-50%);display:flex;gap:3px}.skill-slot{position:relative;width:38px;height:38px;box-sizing:border-box;border:1px solid var(--border);background:#0a0805d9;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer}.skill-slot.sel{border-color:var(--gold)}.skill-slot .key{position:absolute;left:2px;top:0;font-size:10px;color:var(--muted)}.skill-slot .cd{position:absolute;inset:0;background:#0009;color:#fff;font-size:14px;display:flex;align-items:center;justify-content:center}.hint{max-width:200px}#hudbar{position:absolute;right:8px;bottom:8px;display:flex;gap:4px}#hudbar button{margin:0;width:auto;padding:4px 8px;font-size:12px}#target{position:absolute;left:50%;top:8px;transform:translate(-50%);min-width:200px;padding:4px 10px;background:#0000008c;border:1px solid #553;border-radius:4px;text-align:center;pointer-events:none}#target .tname{color:var(--gold);font-size:13px;text-shadow:0 1px 2px #000}#target .lv{color:var(--muted);font-size:11px}#target .tbar{position:relative;height:12px;margin-top:3px;background:#300;border:1px solid #000}#target .tfill{height:100%;background:linear-gradient(#f55,#a00)}#target .tbar span{position:absolute;inset:0;font-size:10px;line-height:12px;color:#fff;text-shadow:0 1px 1px #000}#death{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#28000073}#death .title{font-size:28px;color:#f66;text-shadow:0 2px 4px #000}#buffs{position:absolute;left:8px;top:64px;display:flex;flex-wrap:wrap;gap:4px;max-width:320px;pointer-events:none}#buffs .buff{padding:2px 6px;font-size:11px;color:#cfe;background:#00283c99;border:1px solid #286;border-radius:3px}#shop-win{right:auto;left:16px;top:72px}#shop-win .shop-bar{display:flex;align-items:center;gap:8px;margin-top:6px}#shop-win .shop-bar .btn.on{background:#8a3;color:#fff}#inv-store{left:230px;top:72px}body.sell-cursor #inv-bag .inv-grid{cursor:copy;outline:1px solid #8a3}#team-win{left:16px;top:120px;min-width:240px}#team-win .team-row{display:flex;align-items:center;gap:6px;padding:3px 0}#team-win .team-row .name{flex:1}#team-win .team-actions{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}.btn.small{padding:1px 6px;font-size:11px}.gold{color:var(--gold)}#team-bars{position:absolute;left:8px;top:200px;display:flex;flex-direction:column;gap:4px;pointer-events:none}#team-bars .team-bar{width:120px;padding:2px 4px;background:#00000080;border:1px solid #443;border-radius:3px;font-size:11px}#team-bars .hp{height:4px;background:#300;margin-top:2px}#team-bars .hp .fill{height:100%;background:#e33}#team-prompts,#trade-prompts{position:absolute;left:50%;top:90px;transform:translate(-50%);display:flex;flex-direction:column;gap:6px}.team-prompt{padding:6px 10px;background:#140e06eb;border:1px solid #7a5b22;border-radius:4px;display:flex;gap:8px;align-items:center;font-size:13px}#player-menu{position:fixed;z-index:50;min-width:140px;background:#140e06f2;border:1px solid #7a5b22;border-radius:4px;padding:4px 0}#player-menu .title{padding:2px 10px 4px;color:var(--gold);border-bottom:1px solid #443;margin-bottom:2px;font-size:12px}#player-menu .item{display:block;width:100%;text-align:left;background:none;border:0;color:#eee;padding:4px 10px;cursor:pointer;font-size:13px}#player-menu .item:hover{background:#4a3a1a}#trade-win{left:50%;top:80px;transform:translate(-50%)}#trade-win .trade-sub{margin:4px 0;color:var(--gold);font-size:12px}#trade-win .trade-money{display:flex;align-items:center;gap:6px;margin:4px 0;font-size:12px}#trade-win .trade-money input{width:110px}#trade-win .trade-state{color:#8f8}#trade-win .trade-actions{display:flex;gap:6px;margin-top:6px}#skillbar{display:none}.ui3-edit{position:absolute;z-index:40;background:transparent;border:0;outline:none;padding:0 2px;font-family:Segoe UI,Arial,sans-serif}.ui3-edit:-webkit-autofill,.ui3-edit:-webkit-autofill:focus{-webkit-text-fill-color:#feffa0;-webkit-box-shadow:0 0 0 1000px #000 inset;caret-color:#feffa0}.ui3-textarea{resize:none;overflow-y:auto;white-space:pre-wrap;line-height:1.1}.touch-stick{position:fixed;left:16px;bottom:190px;width:110px;height:110px;border-radius:50%;background:#00000040;border:2px solid rgba(255,217,78,.45);z-index:45;touch-action:none}.touch-knob{position:absolute;left:32px;top:32px;width:46px;height:46px;border-radius:50%;background:#ffd94e8c;pointer-events:none}.touch-skill{position:fixed;right:16px;bottom:190px;width:72px;height:72px;border-radius:50%;background:#00000059;border:2px solid rgba(255,217,78,.6);color:#ffd94e;font:14px Segoe UI,Arial,sans-serif;display:flex;align-items:center;justify-content:center;z-index:45;touch-action:none;user-select:none}canvas{touch-action:none}