:root{color:#f3efe2;background:#10120d;font-family:Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;font-size:16px;line-height:1.45}*{box-sizing:border-box}body{margin:0}button,input{font:inherit;color:inherit}#app{min-height:100dvh}.screen{max-width:480px;margin:0 auto;min-height:100dvh;padding:calc(16px + env(safe-area-inset-top)) 16px calc(84px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px}.title{justify-content:flex-end;padding-bottom:48px}.eyebrow{margin:0;color:#e0a45a;letter-spacing:.14em;font-size:12px}h1{margin:0;font-size:40px;font-weight:700;letter-spacing:.04em}h2{margin:8px 0 0;font-size:16px}.lead,.muted,.note,p{margin:0}.muted{color:#b7b29f}.note{background:#2a2418;border:1px solid #6d5a38;padding:10px 12px}.top,.row,.tabs,.hp{display:flex;gap:8px;align-items:center}.top{justify-content:space-between}.stack{display:flex;flex-direction:column;gap:10px}.tabs{position:fixed;left:50%;bottom:0;transform:translate(-50%);width:min(480px,100%);padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:#171a13;border-top:1px solid #34392c}.tabs button{flex:1}button{min-height:48px;padding:10px 14px;background:#2a3124;border:1px solid #46503c;border-radius:6px;touch-action:manipulation}button.primary{background:#e0a45a;color:#1a140c;border-color:#e0a45a}button.danger{background:#6e3228;border-color:#a85a4c}button.ghost,button:disabled{background:transparent;color:#b7b29f}button.on{border-color:#e0a45a;color:#e0a45a}button:disabled{opacity:.55}.panel,.item,.slot{border:1px solid #34392c;background:#1b1f17;padding:12px;border-radius:8px;display:flex;flex-direction:column;gap:6px}.item header,.slot{display:flex;justify-content:space-between;gap:8px}.item.white{border-left:4px solid #d9d3c5}.item.green{border-left:4px solid #7dba63}.item.blue{border-left:4px solid #6aa6d8}.item.purple{border-left:4px solid #b48ad4}.item.gold{border-left:4px solid #e0b15a}.item.dim{opacity:.45}.hp{min-width:92px}.hp i{flex:1;height:8px;background:#2c241f;display:block}.hp b{display:block;height:8px;background:#d4654f}.channel{height:8px;background:#2c241f}.channel div{height:8px;background:#e0a45a}.world-wrap{position:relative;height:min(62dvh,560px);min-height:280px;border-radius:8px;overflow:hidden;background:#10120d}canvas.world{width:100%;height:100%;display:block;touch-action:none}.world-caption{position:absolute;left:10px;right:10px;bottom:8px;margin:0;color:#f3efe2;font-size:13px;text-align:center;text-shadow:0 1px 2px #000;pointer-events:none}.loot-bar{position:absolute;left:8px;right:8px;bottom:32px;display:flex;gap:6px;overflow-x:auto;z-index:2}.loot-bar button{flex:0 0 auto;min-height:40px}.q{font-weight:700;letter-spacing:.04em}.q.white,.item.white{--q: #d9d3c5}.q.green,.item.green{--q: #7dba63}.q.blue,.item.blue{--q: #6aa6d8}.q.purple,.item.purple{--q: #b48ad4}.q.gold,.item.gold{--q: #e0b15a}.q.white{color:#d9d3c5}.q.green{color:#7dba63}.q.blue{color:#6aa6d8}.q.purple{color:#b48ad4}.q.gold{color:#e0b15a}.loot-bar button.white{background:#d9d3c5;color:#1a140c;border-color:#d9d3c5}.loot-bar button.green{background:#7dba63;color:#10140e;border-color:#7dba63}.loot-bar button.blue{background:#6aa6d8;color:#081018;border-color:#6aa6d8}.loot-bar button.purple{background:#b48ad4;color:#140818;border-color:#b48ad4}.loot-bar button.gold{background:#e0b15a;color:#1a140c;border-color:#e0b15a}.world-wrap:after{content:none}.reticle{position:absolute;left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%);pointer-events:none;transition:width .16s ease,height .16s ease;z-index:2}.world-wrap.steady .reticle{width:12px;height:12px}.reticle i{position:absolute;background:#f7f3e8;box-shadow:0 0 1px #000}.reticle i:nth-child(1),.reticle i:nth-child(2){left:50%;width:2px;height:6px;margin-left:-1px}.reticle i:nth-child(1){top:0}.reticle i:nth-child(2){bottom:0}.reticle i:nth-child(3),.reticle i:nth-child(4){top:50%;height:2px;width:6px;margin-top:-1px}.reticle i:nth-child(3){left:0}.reticle i:nth-child(4){right:0}.row{flex-wrap:wrap}.row button{flex:1 1 40%}
