/* admin.client HUD v2 (DESIGN; spec reviews/design/07-hud-v2.md). After the Dota 2 HUD: beveled dark panels with a
   gold hairline trim, a portrait top bar, a bottom-centre unit panel with square abilities and a 3×2 inventory, a
   minimap-corner atlas and a shop-style armory. The world keeps its red/black dither; the HUD adds one metal (gold)
   for chrome and the hazard yellow only for NO ASSET. */
:root { --trim: #c8a45a; --trim-dim: #5a4626; --panel-hi: #1d1310; --panel-lo: #060303; --bevel: #2c1d16; --hazard: #ffd400;
        --hp: #ff3b1f; --hp-hi: #ffb199; --ok: #8fe3ff; }

/* ---------- shared chrome ---------- */
.hud2 .hx, .armory .hx, .seatcard .hx, .accpanel .hx, .settings .hx { display: flex; align-items: center; gap: 8px; padding: 7px 10px; margin: 0;
  background: linear-gradient(180deg, #2a1a13 0%, #120a07 100%); border-bottom: 1px solid var(--trim-dim); box-shadow: inset 0 1px 0 rgba(255,220,170,.08);
  font-family: var(--label); font-size: 12px; letter-spacing: .14em; color: var(--hot); text-shadow: 0 1px 0 #000; }
.hx b { font-family: var(--font); font-weight: 400; font-size: 14px; letter-spacing: .08em; color: var(--trim); }
.hx span { font-family: var(--mono); font-size: 10px; letter-spacing: 0; opacity: .6; text-shadow: none; }
.hx .ic { color: var(--trim); flex: none; }
.hx .x { margin-left: auto; background: none; border: 1px solid var(--trim-dim); color: var(--hot); width: 22px; height: 22px; display: grid; place-items: center; cursor: pointer; padding: 0; }
.hx .x:hover { border-color: var(--trim); color: var(--trim); }
.dpanel, .hud2 .atlas, .unit, .armory, .seatcard, .accpanel, .settings, .buffs .buff {
  background: linear-gradient(180deg, var(--panel-hi), var(--panel-lo)); border: 1px solid var(--bevel);
  box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255,220,170,.06), 0 6px 18px rgba(0,0,0,.6); }
.ic { display: block; }
kbd { font-family: var(--mono); font-size: 10px; background: #000; border: 1px solid var(--trim-dim); color: var(--trim); padding: 0 4px; }
.no-asset-tile { display: grid; place-items: center; text-align: center; width: 100%; height: 100%; font-family: var(--label); font-size: 9px; line-height: 1.1; letter-spacing: .06em;
  color: #000; background: repeating-conic-gradient(var(--hazard) 0 25%, #000 0 50%) 0 0 / 12px 12px; text-shadow: 0 0 2px var(--hazard), 0 0 4px var(--hazard); }
.no-asset-tile.big { font-size: 15px; }
.no-asset-tile.mini { width: 26px; height: 26px; font-size: 7px; }
.gold { background: linear-gradient(180deg, #e6c47a, #9c7a3c) !important; color: #140c05 !important; border-color: #f2d898 !important; }

/* ---------- top bar ---------- */
.hud2 .tabs { height: 56px; background: linear-gradient(180deg, #1c120e 0%, #070404 100%); border-bottom: 1px solid var(--trim-dim); box-shadow: 0 2px 0 #000, 0 4px 16px rgba(0,0,0,.6); padding: 0 12px; gap: 6px; }
.hud2 .surfaces { inset: 56px 0 0 0; }
.hud2 .tabs > button[data-tab], .hud2 .tabs > button[data-act] { font-family: var(--label); font-size: 11px; letter-spacing: .14em; padding: 8px 12px; opacity: .7;
  border: 1px solid transparent; border-bottom: 2px solid transparent; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.hud2 .tabs > button.on { opacity: 1; color: var(--trim); background: linear-gradient(180deg, #2c1c14, #0e0806); border-bottom-color: var(--me, var(--red)); }
.topcentre { flex: 1; display: flex; justify-content: center; min-width: 0; }
.adminbox { display: flex; align-items: flex-start; gap: 4px; padding: 3px 6px 0; background: linear-gradient(180deg, #0d0806, #000); border: 1px solid var(--trim-dim); border-top: 0;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 10px 100%); height: 52px; padding-left: 16px; padding-right: 16px; }
.seat { position: relative; width: 62px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--hot); display: flex; flex-direction: column; align-items: stretch; }
.seat .pf { position: relative; height: 34px; overflow: hidden; border: 1px solid #000; box-shadow: 0 0 0 1px var(--sc), inset 0 0 8px #000; background: #0a0605; }
.seat .pf img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transform: scale(1.5) translateY(8%); }
.seat .bar { height: 3px; background: var(--sc); box-shadow: 0 0 6px var(--sc); }
.seat .nm { font-family: var(--label); font-size: 9px; letter-spacing: .08em; text-align: center; padding-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat.me .nm { color: var(--trim); }
.seat:hover .pf, .seat.open .pf { box-shadow: 0 0 0 2px var(--sc), 0 0 10px var(--sc); }
.seat.sleeping .pf > img, .seat.sleeping .pf > .no-asset-tile { filter: grayscale(1) brightness(.45); }
.seat.sleeping .bar { background: #3a3a3a; box-shadow: none; }
.seat.sleeping .nm { opacity: .6; }
.seat .zz { position: absolute; inset: auto 0 0 0; display: flex; align-items: center; justify-content: center; gap: 2px; background: rgba(0,0,0,.75); color: var(--sc);
  font-family: var(--mono); font-size: 9px; padding: 1px 0; }
.seat.empty .pf { box-shadow: 0 0 0 1px #3a2a1c; background: repeating-linear-gradient(135deg, #0b0705 0 4px, #140c09 4px 8px); }
.seat.empty .bar { background: transparent; box-shadow: none; border-top: 1px dashed #3a2a1c; }
.seat.empty .nm { opacity: .45; }
.open-slot { display: grid; place-items: center; width: 100%; height: 100%; color: #5a4626; font-family: var(--label); }
.open-slot.big { font-size: 14px; letter-spacing: .14em; height: 96px; }
.seat .insp { position: absolute; right: 1px; top: 1px; color: var(--esp-hot); background: rgba(0,0,0,.7); padding: 1px; }
.clock { width: 96px; height: 44px; margin: 0 6px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 0%, #3a2416, #0a0605 70%); border: 1px solid var(--trim-dim); box-shadow: inset 0 0 10px #000; }
.clock b { font-family: var(--font); font-weight: 400; font-size: 20px; line-height: 1; color: var(--hot); letter-spacing: .04em; }
.clock span { font-family: var(--mono); font-size: 9px; color: var(--trim); margin-top: 2px; }
.tabs .account { display: flex; align-items: center; gap: 7px; background: linear-gradient(180deg, #24170f, #0b0705); border: 1px solid var(--trim-dim); color: var(--hot); padding: 4px 9px 4px 4px; cursor: pointer; text-align: left; }
.tabs .account:hover { border-color: var(--trim); }
.tabs .account img.mini { width: 26px; height: 26px; object-fit: cover; }
.tabs .account b { display: block; font-family: var(--label); font-size: 10px; letter-spacing: .1em; }
.tabs .account small { display: block; font-family: var(--mono); font-size: 9px; opacity: .6; }
.tabs .armorybtn { background: linear-gradient(180deg, #e6c47a, #9c7a3c); border: 1px solid #f2d898; color: #140c05; font-family: var(--label); font-size: 11px; letter-spacing: .14em; padding: 7px 12px; cursor: pointer; }
.tabs .account[hidden], .tabs .armorybtn[hidden] { display: none; }
.hud2 .tabs .chip.cam, .hud2 .tabs .chip.seat { display: none; }

/* seat card + account panel (drop-downs from the top bar) */
.seatcard, .accpanel { position: fixed; z-index: 25; width: 280px; color: var(--hot); }
.seatcard[hidden], .accpanel[hidden] { display: none; }
.seatcard { border-top: 2px solid var(--sc, var(--trim)); }
.seatcard .hx .ic { color: var(--sc); }
.sc-body { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 10px; }
.sc-pf { height: 96px; border: 1px solid #000; box-shadow: 0 0 0 1px var(--sc); overflow: hidden; background: #0a0605; }
.sc-pf img { width: 100%; height: 100%; object-fit: cover; }
.seatcard dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 8px; font-size: 10px; align-content: start; }
.seatcard dt { letter-spacing: .12em; color: var(--trim); opacity: .8; }
.seatcard dd { margin: 0; font-family: var(--mono); font-size: 11px; }
.seatcard dd .hz { background: var(--hazard); color: #000; padding: 0 3px; }
.st-online { color: var(--esp-hot); } .st-sleeping { color: #9a8f8a; } .st-empty { opacity: .5; }
.sc-note { margin: 0 10px 10px; font-family: var(--mono); font-size: 11px; line-height: 1.5; opacity: .75; }
.sc-acts { padding: 0 10px 10px; }
.sc-acts button, .acc-acts button { display: inline-flex; align-items: center; gap: 6px; font-family: var(--label); font-size: 10px; letter-spacing: .12em; padding: 6px 10px; cursor: pointer;
  background: #120a07; color: var(--hot); border: 1px solid var(--trim-dim); }
.accpanel { right: 12px; top: 60px; width: 360px; }
.accpanel section { padding: 10px 12px; border-bottom: 1px solid #1d130e; }
.accpanel h5 { margin: 0 0 6px; font-size: 10px; letter-spacing: .14em; color: var(--trim); font-weight: 400; }
.accpanel p { margin: 0 0 6px; font-family: var(--mono); font-size: 11px; line-height: 1.5; }
.accpanel p.warn { color: var(--warn); }
.acc-acts { display: flex; gap: 6px; }
.acc-prov { display: flex; gap: 6px; margin-bottom: 8px; }
.acc-prov button { flex: 1; padding: 8px; font-family: var(--label); font-size: 11px; letter-spacing: .1em; background: #0a0605; color: #6a5a4a; border: 1px dashed #3a2a1c; cursor: not-allowed; }

/* ---------- atlas: bottom-left, Dota's minimap corner ---------- */
.hud2 .atlas { top: auto; bottom: 12px; left: 12px; width: 270px; max-height: 38vh; display: flex; flex-direction: column; overflow: hidden; border-color: var(--bevel); }
.hud2 .atlas > header { border-bottom: 1px solid var(--trim-dim); }
.atlas-list { overflow: auto; }
.hud2 .atlas h5 { font-size: 10px; padding: 6px 10px; }
.hud2 .atlas h5 b { color: var(--red); }
.hud2 .atlas h5 .lv { font-family: var(--label); letter-spacing: .1em; opacity: .85; }
.hud2 .atlas h5 .kn, .hud2 .atlas h5 .st { font-family: var(--mono); opacity: .7; }
.hud2 .atlas h5 .st { color: var(--warn); }
.hud2 .atlas .ent { font-size: 11.5px; padding: 4px 10px 4px 18px; }
.hud2 .atlas .ent .n { text-transform: uppercase; font-family: var(--label); font-size: 10px; letter-spacing: .08em; }
.hud2 .atlas .ent .hp { height: 3px; }
.hud2 .atlas section.on { box-shadow: inset 3px 0 0 var(--trim); background: rgba(200,164,90,.04); }

/* ---------- tracker, projection, help ---------- */
.hud2 .tracker { left: 50%; transform: translateX(-50%); top: 10px; border-color: var(--trim-dim); }
.hud2 .proj { top: 10px; right: 12px; }
.hud2 .help { bottom: auto; top: 10px; right: auto; left: 12px; text-align: left; font-size: 10.5px; opacity: .55; }
.hud2 .help kbd { margin-right: 2px; }
.hud2 .toasts { bottom: 200px; }

/* ---------- in-world inspector: bigger pods with icons ---------- */
.hud2 .pod { padding: 4px 9px 4px 6px; gap: 6px; border-color: #1c4a6a; background: rgba(2,10,16,.88); box-shadow: 0 0 0 1px #000; }
.hud2 .pod b { color: var(--esp); }
.hud2 .pod small { font-family: var(--label); font-size: 8px; letter-spacing: .12em; color: var(--esp); opacity: .8; }
.hud2 .pod span { font-size: 13px; color: #e6f6ff; }
.hud2 .insp-lines line { stroke: #2a7fb4; stroke-dasharray: 3 2; }
.hud2 .insp-tag { font-size: 12px; padding: 5px 10px; border-color: #1c4a6a; background: rgba(2,10,16,.9); }
.hud2 .insp-tag strong { font-family: var(--font); font-weight: 400; font-size: 14px; letter-spacing: .04em; color: #e6f6ff; }
.hud2 .insp-tag .hp { height: 4px; }
.plate.cam { display: flex; flex-direction: column; align-items: center; background: rgba(0,0,0,.85); font-size: 10px; }
.plate.cam .ic { display: inline-block; vertical-align: -2px; }

/* ---------- unit panel: bottom centre ---------- */
.buffs { position: absolute; left: 50%; bottom: 184px; transform: translateX(-50%); display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; max-width: min(900px, calc(100% - 600px)); pointer-events: auto; }
.buffs[hidden], .unit[hidden] { display: none; }
.buff { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px 3px 4px; font-family: var(--mono); font-size: 10.5px; color: var(--hot); }
.buff .ic { padding: 2px; background: #000; }
.buff.met .ic { color: var(--esp); box-shadow: 0 0 0 1px var(--esp); }
.buff.unmet { opacity: .7; } .buff.unmet .ic { color: #7a6a62; box-shadow: 0 0 0 1px #3a2a1c; }
.buff.trial .ic { color: var(--esp-hot); box-shadow: 0 0 0 1px var(--esp-hot); } .buff.trial i { color: var(--esp-hot); }
.buff.proven .ic { color: var(--trim); box-shadow: 0 0 0 1px var(--trim); } .buff.proven i { color: var(--trim); }
.buff.void { text-decoration: line-through; color: var(--warn); }
.buff.age { opacity: .5; }
.buff i { font-style: normal; }
.unit { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(940px, calc(100% - 600px)); min-width: 690px; height: 176px; pointer-events: auto;
  display: grid; grid-template-columns: 150px 150px minmax(0, 1fr) 168px; border-bottom: 0; border-top: 1px solid var(--trim-dim);
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%, 0 14px); color: var(--hot); }
.unit::before { content: ""; position: absolute; inset: 0 14px auto; height: 1px; background: linear-gradient(90deg, transparent, var(--trim), transparent); }
.u-pf { position: relative; margin: 10px; border: 1px solid #000; box-shadow: 0 0 0 1px var(--trim-dim), inset 0 0 16px #000; background: radial-gradient(ellipse at 50% 30%, #2a140e, #050202); overflow: hidden; }
.u-pf img { width: 100%; height: 100%; object-fit: contain; }
.u-pf .lvl { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); min-width: 54px; text-align: center; font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: #e6f6ff; background: #000; border: 1px solid var(--esp); border-radius: 9px; padding: 1px 6px; }
.u-attrs { display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 10px 6px; border-right: 1px solid #1d130e; }
.attr { display: grid; grid-template-columns: 18px 1fr; grid-template-rows: auto auto; column-gap: 7px; align-items: center; }
.attr .ic { grid-row: span 2; color: var(--trim); }
.attr span { font-size: 8.5px; letter-spacing: .14em; color: var(--trim); opacity: .8; }
.attr b { font-family: var(--mono); font-size: 13px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-main { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 8px; min-width: 0; }
.u-main header { display: flex; align-items: center; gap: 10px; min-width: 0; }
.u-main header b { font-family: var(--font); font-weight: 400; font-size: 20px; letter-spacing: .04em; color: var(--hot); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-main header span { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 11px; color: var(--esp-hot); }
.u-main header .room { color: var(--trim); }
.u-main header .gone { color: var(--warn); border: 1px solid var(--warn); padding: 0 4px; font-size: 9px; }
.u-bar { position: relative; height: 18px; background: #0a0303; border: 1px solid #000; box-shadow: 0 0 0 1px #2a1a12; overflow: hidden; }
.u-bar i { position: absolute; inset: 0 auto 0 0; transition: width .25s; }
.u-bar.hp i { background: linear-gradient(180deg, var(--hp-hi) 0%, var(--hp) 35%, #8a1408 100%); }
.u-bar.hp::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(0,0,0,.5) 9px 10px); pointer-events: none; }
.u-bar.cast { height: 12px; } .u-bar.cast i { background: linear-gradient(180deg, #b8e8ff, var(--esp) 50%, #0c3550); }
.u-bar span { position: relative; z-index: 1; display: block; text-align: center; font-family: var(--mono); font-size: 11px; font-weight: 600; line-height: 16px; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.u-bar.cast span { font-size: 9.5px; line-height: 10px; letter-spacing: .06em; }
.abilities { display: flex; gap: 6px; margin-top: auto; }
.ab { position: relative; width: 58px; height: 58px; padding: 0; display: grid; place-items: center; cursor: pointer; color: #e6f6ff;
  background: radial-gradient(ellipse at 50% 35%, #1f3a4c, #070d12 75%); border: 1px solid #000; box-shadow: 0 0 0 1px #2a4a5e, inset 0 0 12px rgba(0,0,0,.8); }
.ab:hover:not(:disabled) { box-shadow: 0 0 0 1px var(--esp), 0 0 12px rgba(54,182,255,.5), inset 0 0 12px rgba(0,0,0,.6); }
.ab.active { box-shadow: 0 0 0 2px var(--esp-hot), 0 0 14px rgba(184,232,255,.6); }
.ab.ult { background: radial-gradient(ellipse at 50% 35%, #4a3418, #120a04 75%); box-shadow: 0 0 0 1px var(--trim), inset 0 0 12px rgba(0,0,0,.8); color: #ffe7b0; }
.ab.ult:hover:not(:disabled) { box-shadow: 0 0 0 1px #f2d898, 0 0 16px rgba(200,164,90,.6); }
.ab:disabled { cursor: not-allowed; filter: grayscale(.85) brightness(.5); }
.ab kbd { position: absolute; left: 2px; top: 2px; font-size: 9px; padding: 0 3px; line-height: 12px; }
.ab small { position: absolute; left: 0; right: 0; bottom: -13px; text-align: center; font-family: var(--label); font-size: 7.5px; letter-spacing: .08em; color: var(--hot); opacity: .8; white-space: nowrap; filter: none; }
.ab em { position: absolute; right: 2px; bottom: 2px; font-style: normal; font-family: var(--mono); font-size: 10px; color: #fff; background: #000; padding: 0 3px; }
.ab .lockic { position: absolute; right: 2px; top: 2px; color: var(--warn); }
.abilities { padding-bottom: 12px; }
.u-inv { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 5px; padding: 12px 12px 12px 6px; }
.slot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 2px; cursor: pointer; color: var(--hot);
  background: linear-gradient(180deg, #1a100c, #070404); border: 1px solid #000; box-shadow: 0 0 0 1px #3a2a1c, inset 0 0 10px #000; }
.slot .ic { color: var(--trim); }
.slot span { font-family: var(--label); font-size: 7.5px; letter-spacing: .1em; }
.slot code { font-family: var(--mono); font-size: 9px; opacity: .6; }
.slot:hover { box-shadow: 0 0 0 1px var(--trim), inset 0 0 10px #000; }
.slot.draft { box-shadow: 0 0 0 1px var(--esp-hot), 0 0 8px rgba(184,232,255,.4); }
.slot.draft::after { content: "EDIT"; position: absolute; right: 1px; top: 1px; font-family: var(--mono); font-size: 7px; background: var(--esp); color: #000; padding: 0 2px; }

/* ---------- settings drawer ---------- */
.settings { position: absolute; left: 50%; bottom: 212px; transform: translateX(-50%); width: min(760px, calc(100% - 40px)); pointer-events: auto; color: var(--hot); z-index: 3; }
.settings[hidden] { display: none; }
.st-body { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 12px; padding: 10px 12px; max-height: 34vh; overflow: auto; }
.st-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
.fld { display: grid; grid-template-columns: 70px minmax(0, 1fr) 70px; gap: 6px; align-items: center; font-size: 10px; letter-spacing: .1em; }
.fld > span { color: var(--trim); text-transform: uppercase; }
.fld small { grid-column: 2 / 4; font-family: var(--mono); font-size: 9.5px; color: var(--esp-hot); min-height: 0; }
.fld.diff > span { color: var(--esp-hot); }
.fld input[type=range] { width: 100%; accent-color: var(--esp); }
.fld input[type=number], .fld input[type=text], .fld select { width: 100%; background: #000; color: #fff; border: 1px solid #3a2a1c; font-family: var(--mono); font-size: 12px; padding: 3px 5px; }
.fld.diff input[type=number] { border-color: var(--esp); }
.st-side { display: flex; flex-direction: column; gap: 8px; }
.st-side .fld { grid-template-columns: 70px 1fr; }
.st-prop { margin: 0; display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; color: var(--esp-hot); }
.ghost { background: none; border: 1px solid #3a2a1c; color: var(--hot); font-family: var(--label); font-size: 10px; letter-spacing: .12em; padding: 6px; cursor: pointer; }
.ghost:disabled { opacity: .35; cursor: default; }
.scopes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px 12px 12px; border-top: 1px solid #1d130e; }
.scope { position: relative; display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto auto; column-gap: 8px; text-align: left; padding: 10px 10px 10px 8px; cursor: pointer;
  background: radial-gradient(ellipse at 20% 30%, #1f3a4c, #070d12 80%); border: 1px solid #000; box-shadow: 0 0 0 1px #2a4a5e; color: #e6f6ff; }
.scope .ic { grid-row: span 3; color: var(--esp); align-self: center; }
.scope b { font-family: var(--label); font-weight: 400; font-size: 11px; letter-spacing: .1em; }
.scope span { font-family: var(--mono); font-size: 10.5px; line-height: 1.35; opacity: .8; }
.scope em { font-style: normal; font-family: var(--mono); font-size: 9px; color: var(--warn); display: inline-flex; gap: 3px; align-items: center; margin-top: 3px; }
.scope kbd { position: absolute; right: 4px; top: 4px; }
.scope:hover:not(:disabled) { box-shadow: 0 0 0 1px var(--esp), 0 0 12px rgba(54,182,255,.4); }
.scope.ult { background: radial-gradient(ellipse at 20% 30%, #4a3418, #120a04 80%); box-shadow: 0 0 0 1px var(--trim); color: #ffe7b0; }
.scope.ult .ic { color: var(--trim); }
.scope:disabled { cursor: not-allowed; filter: grayscale(.7) brightness(.6); }
.scope.locked { filter: grayscale(.9) brightness(.55); }

/* ---------- armory: right side, Dota's shop ---------- */
.armory { position: absolute; right: 0; top: 0; bottom: 0; width: 400px; max-width: 100%; display: flex; flex-direction: column; pointer-events: auto; color: var(--hot); z-index: 4; border-right: 0; }
.armory[hidden] { display: none; }
.arm-tabs { display: flex; gap: 2px; padding: 6px 8px 0; }
.arm-tabs button { flex: 1; background: #0a0605; color: var(--hot); opacity: .6; border: 1px solid #2a1c14; border-bottom: 0; font-family: var(--label); font-size: 9px; letter-spacing: .12em; padding: 6px 2px; cursor: pointer; }
.arm-tabs button.on { opacity: 1; color: var(--trim); background: linear-gradient(180deg, #2a1a13, #0e0806); }
.arm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px; border-top: 1px solid var(--trim-dim); }
.arm-card { position: relative; aspect-ratio: 1 / 1.15; display: flex; flex-direction: column; padding: 0; cursor: pointer; overflow: hidden; color: var(--hot);
  background: radial-gradient(ellipse at 50% 35%, #2a140e, #050202); border: 1px solid #000; box-shadow: 0 0 0 1px #3a2a1c; }
.arm-card img { flex: 1; min-height: 0; width: 100%; object-fit: contain; }
.arm-card span { font-family: var(--label); font-size: 8px; letter-spacing: .06em; padding: 3px 2px; background: rgba(0,0,0,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arm-card em { position: absolute; left: 2px; top: 2px; font-style: normal; font-family: var(--mono); font-size: 8px; background: var(--trim); color: #000; padding: 0 3px; }
.arm-card.on { box-shadow: 0 0 0 2px var(--trim), 0 0 12px rgba(200,164,90,.4); }
.arm-card:hover { box-shadow: 0 0 0 1px var(--trim); }
.arm-detail { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; padding: 10px; border-top: 1px solid #1d130e; }
.arm-big { height: 170px; background: radial-gradient(ellipse at 50% 35%, #2a140e, #050202); border: 1px solid #000; box-shadow: 0 0 0 1px var(--trim-dim); }
.arm-big img { width: 100%; height: 100%; object-fit: contain; }
.arm-info h4 { margin: 0 0 4px; font-family: var(--font); font-weight: 400; font-size: 18px; color: var(--hot); }
.arm-info p { margin: 0 0 3px; font-family: var(--mono); font-size: 10.5px; opacity: .8; word-break: break-all; }
.arm-acts { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.arm-acts button { display: flex; align-items: center; gap: 6px; background: #120a07; color: var(--hot); border: 1px solid var(--trim-dim); font-family: var(--label); font-size: 9.5px; letter-spacing: .1em; padding: 5px 8px; cursor: pointer; text-align: left; }
.arm-acts button:hover { border-color: var(--trim); }
.arm-libs { margin-top: auto; padding: 10px; border-top: 1px solid var(--trim-dim); overflow: auto; }
.arm-libs h5 { margin: 0 0 6px; font-weight: 400; font-size: 10px; letter-spacing: .14em; color: var(--trim); }
.arm-libs a { display: grid; grid-template-columns: 14px auto 1fr; gap: 6px; align-items: center; padding: 4px 0; color: var(--hot); text-decoration: none; font-size: 10px; }
.arm-libs a b { font-family: var(--label); font-weight: 400; letter-spacing: .08em; }
.arm-libs a span { font-family: var(--mono); font-size: 10px; opacity: .6; }
.arm-libs a:hover b { color: var(--trim); }
.arm-libs p { margin: 6px 0 0; font-family: var(--mono); font-size: 10px; line-height: 1.5; opacity: .6; }

/* creator-pane attachment chip with a screenshot */
.pane .attach { display: flex; gap: 8px; align-items: center; max-width: calc(100% - 36px); }
.pane .attach img { width: 64px; height: 64px; object-fit: contain; background: #0a0605; border: 1px solid var(--esp-dim); flex: none; }
.gate-oauth { font-size: 11px !important; color: var(--warn); opacity: .9 !important; }
.u-main header b { font-size: 18px; flex: 0 1 auto; min-width: 0; }
.u-attrs { gap: 4px; }
.hud2 .tabs .chip.sel { display: none; }

/* ---------- HUD scale (live.js sets --hud from the window width; [ and ] adjust). Screen-anchored panels zoom;
   world-anchored labels (tag, stat ring, camera plates) scale around their anchor so they stay on their target. ---------- */
.hud2 .tabs, .hud2 .atlas, .hud2 .unit, .hud2 .buffs, .hud2 .settings, .hud2 .armory, .hud2 .seatcard, .hud2 .accpanel,
.hud2 .proj, .hud2 .tracker, .hud2 .help, .hud2 .toasts, .hud2 .gate, .hud2 .insp-l3 { zoom: var(--hud, 1); }
.hud2 .surfaces { inset: calc(56px * var(--hud, 1)) 0 0 0; }
.hud2 .unit { width: min(940px, calc(100% - 340px)); min-width: 600px; }
.hud2 .buffs { max-width: min(900px, calc(100% - 360px)); }
.hud2 .insp-tag { transform: translate(-50%, -100%) scale(var(--hudw, 1)); transform-origin: 50% 100%; }
.hud2 .pod { transform: translate(-50%, -50%) scale(var(--hudw, 1)); }
.hud2 .plate { transform: translate(-50%, -100%) scale(var(--hudw, 1)); transform-origin: 50% 100%; }
.hud2 .help { pointer-events: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 3px; max-width: 60%; opacity: .7; }
.hud2 .help button { background: #120a07; border: 1px solid var(--trim-dim); color: var(--trim); font-family: var(--mono); font-size: 11px; width: 18px; height: 16px; line-height: 12px; padding: 0; cursor: pointer; }
.hud2 .help .hudpct { font-family: var(--mono); font-weight: 600; color: var(--trim); min-width: 52px; text-align: center; }
/* Like Dota, the unit panel sits in the space right of the minimap corner instead of dead centre. */
.hud2 .unit, .hud2 .buffs, .hud2 .settings { left: calc(50% + 145px); }
.hud2 .buffs { width: max-content; }
/* Compact top bar so all of it fits at large HUD scales. */
.hud2 .tabs > button[data-tab], .hud2 .tabs > button[data-act] { padding: 8px 8px; letter-spacing: .1em; }
.hud2 .tabs .account small { display: none; }
.hud2 .tabs .account { padding-right: 8px; }
.hud2 .tabs .armorybtn { padding: 7px 9px; letter-spacing: .1em; }
.seat { width: 56px; }
.adminbox { padding-left: 12px; padding-right: 12px; gap: 3px; }
.clock { width: 88px; margin: 0 4px; }
.topcentre { min-width: 0; overflow: visible; }

/* ---------- multi-platform world + camera modes + forks (spec 07 §8) ---------- */
.hud2 .tabs .chip.cam { display: inline-block; cursor: pointer; font-family: var(--label); font-size: 10px; letter-spacing: .1em; padding: 6px 8px;
  background: linear-gradient(180deg, #1f3a4c, #070d12); border: 1px solid #2a4a5e; color: var(--esp-hot); white-space: nowrap; }
.hud2 .tabs .chip.cam:hover { border-color: var(--esp); }
.plate.room { font-family: var(--font); font-weight: 400; font-size: 18px; letter-spacing: .06em; color: var(--red); padding: 4px 12px; border-color: var(--trim-dim);
  background: linear-gradient(180deg, #1d1310, #060303); pointer-events: none; text-align: center; }
.plate.room small { font-family: var(--mono); font-size: 10px; color: var(--hot); opacity: .75; }
.plate.room.on { border-color: var(--trim); box-shadow: 0 0 12px rgba(200,164,90,.35); }
.arm-fork, .arm-hist { padding: 8px 10px; border-top: 1px solid #1d130e; }
.arm-fork h5, .arm-hist h5 { margin: 0 0 6px; display: flex; align-items: center; gap: 6px; font-weight: 400; font-size: 10px; letter-spacing: .14em; color: var(--trim); }
.arm-fork h5 code { font-family: var(--mono); color: var(--hot); opacity: .7; letter-spacing: 0; }
.fk-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 8px; align-items: center; margin-bottom: 6px; font-size: 9px; letter-spacing: .12em; color: var(--trim); }
.fk-row input[type=range] { width: 100%; accent-color: var(--trim); }
.fk-row b { font-family: var(--mono); color: #fff; font-size: 11px; }
.fk-tints { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; grid-column: 2 / 4; }
.fk-tints button { width: 18px; height: 18px; padding: 0; background: var(--t); border: 1px solid #000; box-shadow: 0 0 0 1px #3a2a1c; cursor: pointer; }
.fk-tints button.on { box-shadow: 0 0 0 2px #fff; }
.fk-tints input[type=color] { width: 24px; height: 20px; padding: 0; border: 1px solid #3a2a1c; background: #000; }
.fk-acts { display: flex; gap: 8px; align-items: center; }
.fk-acts button { font-family: var(--label); font-size: 10px; letter-spacing: .12em; padding: 6px 10px; cursor: pointer; border: 1px solid; }
.fk-acts button:disabled { opacity: .45; cursor: default; }
.fk-acts span { font-family: var(--mono); font-size: 10px; opacity: .6; }
.arm-hist > div { display: flex; gap: 5px; flex-wrap: wrap; }
.arm-hist button { position: relative; width: 44px; height: 44px; padding: 0; cursor: pointer; background: radial-gradient(ellipse at 50% 35%, #2a140e, #050202); border: 1px solid #000; box-shadow: 0 0 0 1px #3a2a1c; overflow: hidden; }
.arm-hist button img { width: 100%; height: 100%; object-fit: contain; }
.arm-hist button i { position: absolute; right: 2px; bottom: 2px; width: 8px; height: 8px; border: 1px solid #000; }
.arm-hist button.on { box-shadow: 0 0 0 2px var(--trim); }
.arm-hist .no-asset-tile { font-size: 7px; }

/* ---------- possession bar (spec 07 §9) ---------- */
.possess { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); width: min(760px, calc(100% - 40px)); pointer-events: auto; z-index: 4; color: var(--hot); zoom: var(--hud, 1);
  background: linear-gradient(180deg, #2a1208, #0a0402); border: 1px solid var(--trim); box-shadow: 0 0 0 1px #000, 0 0 18px rgba(255,90,42,.35); }
.possess[hidden] { display: none; }
.ps-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.ps-head > .ic { color: var(--red); flex: none; }
.ps-head > div { flex: 1; min-width: 0; }
.ps-head b { display: block; font-family: var(--font); font-weight: 400; font-size: 16px; letter-spacing: .05em; color: var(--red); }
.ps-head small { display: block; font-family: var(--mono); font-size: 10px; color: var(--warn); }
.ps-head button, .ps-anims button { display: inline-flex; align-items: center; gap: 5px; background: #120a07; color: var(--hot); border: 1px solid var(--trim-dim); font-family: var(--label); font-size: 10px; letter-spacing: .1em; padding: 6px 9px; cursor: pointer; white-space: nowrap; }
.ps-head button:hover, .ps-anims button:hover { border-color: var(--trim); }
.ps-head button.on, .ps-anims button.on { border-color: var(--esp); color: var(--esp-hot); }
.ps-anims { border-top: 1px solid var(--trim-dim); padding: 8px 10px; }
.ps-anims input { width: 100%; margin-bottom: 6px; background: #000; color: #fff; border: 1px solid #3a2a1c; font-family: var(--mono); font-size: 12px; padding: 4px 6px; }
.ps-anims > div { display: flex; flex-wrap: wrap; gap: 4px; max-height: 26vh; overflow: auto; }
.ps-anims > div button { font-family: var(--mono); letter-spacing: 0; font-size: 10.5px; padding: 3px 6px; }
.hud2:has(.possess:not([hidden])) .tracker { top: 92px; }
.buff[title^="awake"] { cursor: pointer; }
.buff[title^="awake"]:hover { box-shadow: 0 0 0 1px var(--trim); }
.ps-anims > div { max-height: calc(20vh / var(--hud, 1)); }
.hud2:has(.possess:not([hidden])) .proj { display: none; }

/* ---------- ACT button + menu, fullscreen button ---------- */
.tabs .actbtn { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(180deg, #3a160a, #120604); border: 1px solid var(--red); color: var(--hot);
  font-family: var(--label); font-size: 11px; letter-spacing: .12em; padding: 7px 10px; cursor: pointer; }
.tabs .actbtn:hover { box-shadow: 0 0 10px rgba(255,42,18,.5); }
.actmenu { position: fixed; z-index: 25; width: 340px; color: var(--hot); zoom: var(--hud, 1);
  background: linear-gradient(180deg, var(--panel-hi), var(--panel-lo)); border: 1px solid var(--bevel); border-top: 2px solid var(--red); box-shadow: 0 0 0 1px #000, 0 6px 18px rgba(0,0,0,.6); }
.actmenu[hidden] { display: none; }
.actmenu section { padding: 8px 10px; border-bottom: 1px solid #1d130e; }
.actmenu h5 { margin: 0 0 6px; font-weight: 400; font-size: 10px; letter-spacing: .14em; color: var(--trim); }
.actmenu p, .actmenu small { margin: 4px 0 0; display: block; font-family: var(--mono); font-size: 10.5px; line-height: 1.45; opacity: .75; }
.actmenu section > button { display: flex; width: 100%; align-items: center; gap: 6px; font-family: var(--label); font-size: 11px; letter-spacing: .1em; padding: 8px; cursor: pointer; border: 1px solid; }
.actmenu .emotes { display: flex; flex-wrap: wrap; gap: 4px; max-height: 30vh; overflow: auto; }
.actmenu .emotes button { background: #120a07; color: var(--hot); border: 1px solid var(--trim-dim); font-family: var(--mono); font-size: 10.5px; padding: 3px 7px; cursor: pointer; }
.actmenu .emotes button:hover { border-color: var(--trim); color: var(--trim); }
.hud2 .help .fs { width: auto; padding: 0 6px; font-family: var(--label); font-size: 9px; letter-spacing: .1em; }

/* ---------- HOME, TIMELINE, EDIT WORLD, MOVE (spec 08) ---------- */
.tabs .homebtn, .tabs .timebtn, .tabs .buildbtn { display: inline-flex; align-items: center; gap: 5px; background: linear-gradient(180deg, #24170f, #0b0705); border: 1px solid var(--trim-dim);
  color: var(--hot); font-family: var(--label); font-size: 10px; letter-spacing: .1em; padding: 7px 8px; cursor: pointer; white-space: nowrap; }
.tabs .homebtn { border-color: #f2d898; color: #ffe7b0; }
.tabs .homebtn:hover, .tabs .timebtn:hover, .tabs .buildbtn:hover, .tabs .buildbtn.on { border-color: var(--trim); color: var(--trim); }
.plate.coffin { font-family: var(--font); font-weight: 400; font-size: 14px; letter-spacing: .05em; color: var(--hot); text-align: center; background: linear-gradient(180deg, #1d1310, #060303); }
.plate.coffin small { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0; }
.plate.coffin.online small { color: var(--esp-hot); } .plate.coffin.sleeping { opacity: .8; } .plate.coffin.empty { opacity: .5; }
.hud2 .atlas section.home h5 b { color: #ffe7b0; }
.timeline, .worldedit { position: absolute; right: 12px; top: 10px; width: 380px; max-height: calc(100% - 230px); display: flex; flex-direction: column; overflow: hidden;
  pointer-events: auto; color: var(--hot); zoom: var(--hud, 1); z-index: 3;
  background: linear-gradient(180deg, var(--panel-hi), var(--panel-lo)); border: 1px solid var(--bevel); box-shadow: 0 0 0 1px #000, 0 6px 18px rgba(0,0,0,.6); }
.timeline[hidden], .worldedit[hidden] { display: none; }
.tl-now { display: flex; align-items: baseline; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #1d130e; }
.tl-now span { font-family: var(--label); font-size: 10px; letter-spacing: .14em; color: #000; background: var(--trim); padding: 1px 5px; }
.tl-now code, .tl-list code, .tl-past code, .we-set code { font-family: var(--mono); color: var(--esp-hot); }
.tl-now small, .tl-list small { font-family: var(--mono); font-size: 10px; opacity: .65; }
.tl-list { list-style: none; margin: 0; padding: 4px 0; overflow: auto; flex: 1; min-height: 80px; }
.tl-list li { display: grid; grid-template-columns: 62px 70px 1fr; grid-template-rows: auto auto; column-gap: 6px; padding: 5px 10px; cursor: pointer; border-left: 2px solid transparent; }
.tl-list li:hover { background: #160604; } .tl-list li.on { border-left-color: var(--trim); background: rgba(200,164,90,.06); } .tl-list li.now code { color: var(--trim); }
.tl-list li .k { grid-row: span 2; align-self: center; font-family: var(--label); font-size: 8.5px; letter-spacing: .1em; text-align: center; padding: 2px 0; border: 1px solid var(--trim-dim); }
.tl-list li .k.rollback { color: var(--warn); border-color: var(--warn); } .tl-list li .k.release { color: var(--esp-hot); border-color: var(--esp); }
.tl-list li b { font-family: var(--mono); font-weight: 600; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-list li small { grid-column: 2 / 4; }
.tl-past, .we-sel, .we-set { padding: 8px 10px; border-top: 1px solid var(--trim-dim); }
.tl-past h5, .we-sel h5, .we-set h5 { margin: 0 0 6px; display: flex; gap: 6px; align-items: center; font-weight: 400; font-size: 10px; letter-spacing: .14em; color: var(--trim); }
.tl-past p, .tl-past li, .tl-hint, .we-hint, .we-sel p, .we-set p { font-family: var(--mono); font-size: 10.5px; margin: 0 0 4px; }
.tl-hint, .we-hint { padding: 8px 10px; opacity: .65; }
.tl-past ul { margin: 0 0 6px; padding-left: 16px; }
.tl-acts, .we-scopes { display: flex; flex-direction: column; gap: 4px; }
.tl-acts button, .we-scopes button, .we-modes button, .we-props button, .we-sel > button, .we-set > button { display: flex; align-items: center; gap: 6px; background: #120a07; color: var(--hot);
  border: 1px solid var(--trim-dim); font-family: var(--label); font-size: 9.5px; letter-spacing: .1em; padding: 5px 8px; cursor: pointer; }
.tl-acts button em, .we-scopes button em { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: 9px; color: var(--warn); display: inline-flex; gap: 3px; letter-spacing: 0; }
.tl-acts button:disabled, .we-scopes button:disabled, .we-set > button:disabled { opacity: .5; cursor: not-allowed; }
.tl-acts button.gold:not(:disabled), .we-scopes .ult:not(:disabled) { border-color: #f2d898; }
.we-modes { display: flex; gap: 4px; padding: 8px 10px 4px; }
.we-modes button.on, .we-props button.on { border-color: var(--esp); color: var(--esp-hot); }
.we-props { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 10px 8px; max-height: 120px; overflow: auto; }
.we-props button { font-family: var(--mono); letter-spacing: 0; font-size: 10px; padding: 3px 6px; text-transform: uppercase; }
.we-props button.edited { border-color: var(--trim); color: var(--trim); } .we-props button.bad { border-color: var(--red); color: var(--red); }
.we-sel ul.bad { margin: 0 0 6px; padding-left: 16px; color: var(--red); font-family: var(--mono); font-size: 10.5px; }
.we-sel p.ok { color: var(--esp-hot); }
.we-set > button { margin-top: 6px; }
.actmenu .mv-row { display: grid; grid-template-columns: 1fr 120px 40px; gap: 6px; align-items: center; margin-bottom: 5px; }
.actmenu .mv-row label { font-family: var(--label); font-size: 10px; letter-spacing: .1em; }
.actmenu .mv-row label small { display: block; margin: 0; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0; opacity: .6; }
.actmenu .mv-row select { background: #000; color: #fff; border: 1px solid #3a2a1c; font-family: var(--mono); font-size: 11px; padding: 3px; min-width: 0; }
.actmenu .mv-row button { background: #120a07; color: var(--hot); border: 1px solid var(--trim-dim); font-family: var(--label); font-size: 10px; padding: 4px 0; cursor: pointer; display: grid; place-items: center; }
.actmenu .mv-row button:disabled { color: var(--warn); cursor: not-allowed; }
.actmenu .mv-stop { margin: 4px 0; width: 100%; background: #120a07; color: var(--esp-hot); border: 1px solid var(--esp); font-family: var(--label); font-size: 10px; padding: 6px; cursor: pointer; }
.actmenu { max-height: calc(100vh / var(--hud, 1) - 80px); overflow: auto; }
/* Command bar (HOME · TIMELINE · EDIT WORLD · ACT · camera) under the top bar, left; the key help sits below it. */
.cmdbar { position: absolute; left: 12px; top: 10px; display: flex; gap: 5px; align-items: center; pointer-events: auto; zoom: var(--hud, 1); z-index: 3; }
.cmdbar > button, .cmdbar .chip.cam { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; font-family: var(--label); font-size: 10px; letter-spacing: .1em; cursor: pointer; white-space: nowrap;
  background: linear-gradient(180deg, #24170f, #0b0705); border: 1px solid var(--trim-dim); color: var(--hot); box-shadow: 0 0 0 1px #000; }
.cmdbar .homebtn { border-color: #f2d898; color: #ffe7b0; }
.cmdbar .actbtn { background: linear-gradient(180deg, #3a160a, #120604); border-color: var(--red); }
.cmdbar .chip.cam { background: linear-gradient(180deg, #1f3a4c, #070d12); border-color: #2a4a5e; color: var(--esp-hot); display: inline-flex !important; }
.cmdbar > button:hover, .cmdbar .buildbtn.on { border-color: var(--trim); color: var(--trim); }
.hud2 .help { top: 50px; }
.worldedit { overflow: auto; }
.worldedit > *, .timeline > header, .timeline > .tl-now, .timeline > .tl-past { flex-shrink: 0; }
/* ---------- room pins (HERE FOREVER) ---------- */
.buff.pinned .ic { color: #ffe7b0; box-shadow: 0 0 0 1px var(--trim); } .buff.pinned i { color: #ffe7b0; }
.scope em.pinned { color: #ffe7b0; }
.st-pin { margin: 0; display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; color: #ffe7b0; }
.st-pin code { color: #fff; }
.hud2 .atlas .ent em.pin { border-style: solid; border-color: var(--trim); color: #ffe7b0; }
.tracker .rs.pinned { color: #ffe7b0; }

/* ---------- unit panel tabs, live portrait, ANIMATIONS sequencer (spec 09) ---------- */
.u-pf { display: flex; flex-direction: column; }
.u-pf .pf-slot, .u-pf .live-pf { flex: 1; min-height: 0; position: relative; }
.live-pf canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.u-tabs { position: absolute; left: 0; right: 0; top: 0; display: flex; }
.u-tabs button { flex: 1; background: rgba(0,0,0,.75); border: 0; border-bottom: 1px solid #3a2a1c; color: var(--hot); opacity: .6; font-family: var(--label); font-size: 7.5px; letter-spacing: .08em; padding: 3px 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 3px; }
.u-tabs button.on { opacity: 1; color: var(--trim); border-bottom-color: var(--trim); }
.unit.seq { height: 300px; grid-template-columns: 150px minmax(0, 1fr); }
.hud2:has(.unit.seq) .buffs { bottom: 308px; }
.seq-wrap { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 8px 10px 8px 2px; }
.transport { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.transport button, .transport select { background: #120a07; color: var(--hot); border: 1px solid var(--trim-dim); font-family: var(--label); font-size: 9.5px; letter-spacing: .08em; padding: 4px 7px; cursor: pointer; height: 24px; }
.transport button.big { width: 34px; font-size: 12px; color: var(--esp-hot); border-color: var(--esp); }
.transport button.on { border-color: var(--esp); color: var(--esp-hot); }
.transport button:disabled { opacity: .4; cursor: default; }
.transport label { display: inline-flex; align-items: center; gap: 4px; font-size: 8.5px; letter-spacing: .12em; color: var(--trim); }
.transport select { font-family: var(--mono); padding: 0 4px; }
.transport .tc { font-family: var(--mono); font-size: 11px; margin-left: 6px; }
.transport .tc b { color: #fff; }
.transport .sp { flex: 1; }
.seq-note { margin: 4px 0; font-family: var(--mono); font-size: 10px; color: var(--warn); }
.tracks { flex: 1; min-height: 0; overflow: auto; padding-right: 4px; }
.tracks h6 { margin: 6px 0 3px; font-weight: 400; font-size: 9px; letter-spacing: .14em; color: var(--trim); display: flex; align-items: center; gap: 8px; }
.tracks h6 input { margin-left: auto; width: 140px; background: #000; color: #fff; border: 1px solid #3a2a1c; font-family: var(--mono); font-size: 10.5px; padding: 1px 5px; }
.trk { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 6px; align-items: center; height: 22px; cursor: pointer; }
.trk-name { display: flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trk-name kbd { font-size: 8.5px; padding: 0 3px; }
.trk-name small { margin-left: auto; opacity: .5; font-size: 9.5px; }
.trk.atk .trk-name { color: #e6f6ff; font-family: var(--label); font-size: 9.5px; letter-spacing: .06em; }
.trk-bar { position: relative; height: 16px; background: linear-gradient(180deg, #160d0a, #0a0505); box-shadow: 0 0 0 1px #2a1a12; overflow: hidden; cursor: ew-resize; }
.trk-bar::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(255,216,204,.08) calc(10% - 1px) 10%); pointer-events: none; }
.trk-bar .fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(180deg, #b8e8ff, var(--esp) 50%, #0c3550); opacity: .85; }
.trk.atk .trk-bar .fill { background: linear-gradient(180deg, #ffb199, var(--hp) 50%, #5a0e05); }
.trk-bar .head { position: absolute; top: -2px; bottom: -2px; width: 2px; left: 0; background: #fff; box-shadow: 0 0 6px #fff; display: none; }
.trk.on .trk-bar .head { display: block; }
.trk.on .trk-bar { box-shadow: 0 0 0 1px var(--esp); }
.trk-bar .hit { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--trim); box-shadow: 0 0 4px var(--trim); z-index: 1; }
.trk:hover .trk-name { color: var(--trim); }
.cmdbar .visbtn { border-color: #2a4a5e; color: var(--esp-hot); }
.cmdbar .visbtn.hidden-mode { border-color: #6a5a4a; color: #9a8f8a; background: repeating-linear-gradient(135deg, #0b0705 0 4px, #140c09 4px 8px); }
.u-pf .pf-slot { position: relative; flex: 1; } .u-pf .live-pf { position: absolute; inset: 0; }
/* Not signed in: only the gate exists on screen. No world canvas, no portraits, no rooms, no panels. */
.hud2.locked .surfaces, .hud2.locked .tabs, .hud2.locked .seatcard, .hud2.locked .accpanel, .hud2.locked .actmenu { visibility: hidden !important; }
.hud2.locked { background: #000; }

/* ---------- ACT mode (survival): builder tools hidden, EXIT shown ---------- */
.cmdbar .exitbtn { background: linear-gradient(180deg, #ff4a2a, #8a1408); border-color: #ffb199; color: #fff; }
.cmdbar .exitbtn:hover { box-shadow: 0 0 12px rgba(255,74,42,.6); color: #fff; }
.cmdbar .movesbtn { background: linear-gradient(180deg, #3a160a, #120604); border-color: var(--red); }
.cmdbar > button[hidden] { display: none; }
.hud2 .help b.mode { font-family: var(--label); font-weight: 400; color: #000; background: var(--red); padding: 1px 6px; margin-right: 4px; letter-spacing: .12em; }
.actmode .tabs .armorybtn { display: none; }