.hud{position:absolute;top:max(10px,env(safe-area-inset-top));right:10px;left:10px;display:flex;align-items:center;gap:8px;z-index:20}
.lv{position:relative;width:54px;height:54px;border-radius:50%;background:linear-gradient(180deg,#FFD866,#FF9A1F);border:3px solid #fff;display:grid;place-items:center;color:#fff;font:800 20px var(--font);box-shadow:var(--shadow);text-shadow:0 1px 2px rgba(0,0,0,.3)}
.xpbar{width:110px}.xpbar .bar{height:12px}.xpbar small{color:#fff;font-weight:800;font-size:11px;text-shadow:0 1px 2px #000}
.map{position:absolute;inset:0}
.bld{position:absolute;width:34%;transform:translate(50%,-50%);cursor:pointer;transition:transform .15s}
.bld:active{transform:translate(50%,-50%) scale(.95)}
.bld img{width:100%;filter:drop-shadow(0 6px 6px rgba(0,0,0,.35))}
.bld.locked img{filter:grayscale(1) brightness(.75) drop-shadow(0 6px 6px rgba(0,0,0,.35))}
.bld .tagb{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);white-space:nowrap}
.bld .bub{position:absolute;top:-6px;left:50%;transform:translateX(-50%);background:#3FB53C;color:#fff;border:2px solid #fff;border-radius:16px;padding:0 10px;font-weight:800;animation:bob 1s infinite ease-in-out}
@keyframes bob{50%{transform:translate(-50%,-5px)}}
.tray{position:absolute;bottom:0;right:0;left:0;z-index:25;display:flex;justify-content:space-around;padding:10px 8px max(14px,env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(20,12,5,0),rgba(20,12,5,.65))}
.tool{display:flex;flex-direction:column;align-items:center;gap:2px;color:#fff;font:800 12px var(--font);text-shadow:0 1px 2px #000;background:none;border:0;cursor:pointer;position:relative}
.tool .ic{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;border:3px solid #fff;box-shadow:var(--shadow)}
.tool .ic img{width:42px;height:42px;object-fit:contain}
.tool .dot{position:absolute;top:-4px;left:2px;background:#D7263D;color:#fff;border-radius:10px;padding:0 6px;font-size:11px}
.rec{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--line);border-radius:16px;padding:8px}
.rec img.it{width:52px;height:52px;object-fit:contain}
.ins{display:flex;gap:6px;flex-wrap:wrap}.ins span{display:flex;align-items:center;gap:2px;font-weight:800;font-size:13px}.ins img{width:22px;height:22px}
.ins .no{color:#D7263D}
.slots{display:flex;gap:8px;justify-content:center;margin:8px 0}
.slot{width:64px;height:76px;border-radius:14px;background:#fff;border:2px dashed var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;font:800 11px var(--font)}
.slot img{width:40px;height:40px}.slot.done{border:3px solid #3FB53C}
.region{position:relative}.region img{width:100%;aspect-ratio:1;object-fit:contain}
.region .chip{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);white-space:nowrap}
.order{background:#fff;border:2px solid var(--line);border-radius:18px;padding:8px;text-align:center}
.order .its{display:flex;justify-content:center;gap:4px}.order .its div{position:relative}.order .its img{width:44px;height:44px}
.order .its b{position:absolute;bottom:-2px;left:-2px;background:rgba(59,38,20,.85);color:#fff;border-radius:8px;padding:0 5px;font-size:11px}
.order.ok{border-color:#3FB53C;border-width:3px}