/* Digi Idle — D-TERMINAL layout v2
   Hierarquia: header → parceiro → vitais → status → link → comandos (fixos)
*/

.unit-hud{
  --dv-bg:#0a101c;
  --dv-panel:#101828;
  --dv-elev:#162033;
  --dv-line:rgba(79,214,255,.16);
  --dv-line-soft:rgba(255,255,255,.06);
  --dv-orange:#ff9a2e;
  --dv-orange-2:#ff6b1a;
  --dv-cyan:#4fd6ff;
  --dv-green:#3dffa0;
  --dv-text:#eaf2ff;
  --dv-muted:#8b9bb3;
  --dv-danger:#ff5d6c;
  --dv-radius:14px;
  --dv-font:"Rajdhani","Segoe UI",system-ui,sans-serif;
  --dv-display:"Orbitron","Rajdhani",system-ui,sans-serif;
  --dv-pad:10px;
  --dv-gap:8px;
  --dv-portrait:clamp(64px,24cqi,96px);
  container-type:size;
  container-name:dterminal;
  min-width:300px;
  max-width:min(720px,calc(100vw - 16px));
  box-sizing:border-box;
}

.unit-hud .digivice-card,
.unit-card.digivice-card{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
  overflow:hidden;
  color:var(--dv-text);
  font-family:var(--dv-font);
  background:
    radial-gradient(90% 60% at 50% -8%,rgba(255,154,46,.18),transparent 55%),
    linear-gradient(180deg,#141e30 0%,var(--dv-bg) 100%);
  border:1px solid var(--dv-line);
  border-radius:var(--dv-radius);
  box-shadow:0 0 0 1px rgba(255,154,46,.07) inset,0 18px 44px #0000008f;
}
.unit-hud.unit-hud-docked .digivice-card,
.unit-hud.unit-hud-float .digivice-card{
  /* body/panes continuam com overflow hidden; card libera o grip na borda */
  overflow:visible;
}

/* ========== HEADER ========== */
.unit-hud .unit-drag-bar{
  display:flex !important;
  align-items:center;
  gap:8px;
  flex-shrink:0;
  height:32px;
  padding:0 62px 0 12px;
  background:linear-gradient(90deg,rgba(255,154,46,.12),rgba(79,214,255,.06));
  border-bottom:1px solid var(--dv-line);
  cursor:grab;
}
.unit-hud .unit-drag-bar::before{display:none !important}
.unit-hud-docked .unit-drag-bar{
  display:flex !important;
  cursor:grab;
  padding-right:62px;
  touch-action:none;
}
.unit-hud-docked .unit-drag-bar:active{
  cursor:grabbing;
}
.unit-hud-docked .unit-brand-dots{
  display:block;
  opacity:.55;
}
.unit-brand-mark{
  font-family:var(--dv-display);
  font-size:10px;
  font-weight:700;
  letter-spacing:.2em;
  color:var(--dv-orange);
  text-shadow:0 0 10px rgba(255,154,46,.35);
}
.unit-brand-dots{
  width:26px;
  height:3px;
  margin-left:auto;
  border-radius:99px;
  background:rgba(255,255,255,.18);
  box-shadow:9px 0 0 rgba(255,255,255,.18),-9px 0 0 rgba(255,255,255,.18);
  opacity:.65;
}

.unit-hud .unit-dock-btn,
.unit-hud .unit-collapse-btn{
  top:4px;
  width:24px;
  height:24px;
  border-radius:7px;
  border:1px solid var(--dv-line);
  background:rgba(8,14,26,.8);
  color:var(--dv-cyan);
}
.unit-hud .unit-dock-btn{right:34px}
.unit-hud .unit-collapse-btn{right:6px}
.unit-hud .unit-dock-btn:hover,
.unit-hud .unit-collapse-btn:hover{
  background:rgba(79,214,255,.14);
  color:#fff;
}

/* ========== SCROLL BODY ========== */
.unit-hud .digivice-body,
.unit-hud .unit-body{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:var(--dv-gap);
  padding:var(--dv-pad);
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
}

/* Esconde labels ruidosos — hierarquia visual basta */
.unit-partner::before,
.unit-vitals::before,
.unit-mission::before,
.unit-resources::before,
.unit-link:not(.unit-offline)::before,
.unit-commands .unit-section-lbl{
  display:none !important;
}

/* ========== 1. PLAYER (hero) ========== */
.unit-hud .unit-top.unit-partner{
  display:grid;
  grid-template-columns:var(--dv-portrait) 1fr;
  grid-template-rows:auto auto auto auto;
  gap:6px 8px;
  padding:8px 8px 0;
  border-radius:12px;
  background:var(--dv-elev);
  border:1px solid var(--dv-line-soft);
  align-items:start;
  overflow:visible;
}
.unit-hud .unit-top.unit-partner::before{display:none !important}
.unit-hud .unit-top.unit-partner,
.unit-hud.unit-hud-float .unit-top.unit-partner,
.unit-hud .unit-pane-top .unit-top.unit-partner{
  padding-bottom:0 !important;
}

/* Missão + Offline dentro do partner — faixa compacta */
.unit-hud .unit-top.unit-partner > .unit-status-bar.unit-partner-status,
.unit-hud .unit-partner-status{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:4px;
  flex:0 0 auto;
  min-width:0;
  max-width:100%;
  width:100%;
  margin:0;
  padding:0;
  box-sizing:border-box;
  overflow:visible;
}
.unit-hud .unit-partner-status .unit-target.unit-mission,
.unit-hud .unit-partner-status .unit-target{
  flex:1 1 0;
  min-width:0;
  margin:0;
  padding:3px 6px;
  gap:4px;
  border-radius:8px;
  grid-template-columns:auto minmax(0,1fr);
}
.unit-hud .unit-partner-status .unit-target-lbl{
  font-size:7px;
  letter-spacing:.1em;
}
.unit-hud .unit-partner-status .unit-target-name{
  font-size:10px;
  line-height:1.1;
}
.unit-hud .unit-partner-status .unit-target-balls{
  display:none;
}
.unit-hud .unit-partner-status .unit-offline.unit-link,
.unit-hud .unit-partner-status .unit-offline{
  flex:0 1 42%;
  min-width:0;
  max-width:44%;
  margin:0;
  padding:2px 4px;
  gap:4px;
  border-radius:8px;
}
.unit-hud .unit-partner-status:not(:has(.unit-target)) .unit-offline.unit-link,
.unit-hud .unit-partner-status:not(:has(.unit-target)) .unit-offline{
  flex:1 1 auto;
  max-width:100%;
}
.unit-hud .unit-partner-status .unit-stam{
  gap:4px;
}
.unit-hud .unit-partner-status .unit-stam-track{
  height:3px;
  min-width:28px;
}
.unit-hud .unit-partner-status .unit-stam-txt{
  font-size:8px;
}
.unit-hud .unit-partner-status .offline-toggle-btn{
  min-height:22px;
  padding:0 7px;
  font-size:8px;
  border-radius:6px;
  letter-spacing:.04em;
}

.unit-hud .unit-portrait{
  grid-row:1 / 2;
  width:var(--dv-portrait);
  height:var(--dv-portrait);
  border-radius:50%;
  padding:3px;
  background:conic-gradient(from 200deg,var(--dv-orange),var(--dv-cyan),var(--dv-orange-2),var(--dv-orange));
  box-shadow:0 0 0 2px #0a101c,0 0 18px rgba(255,154,46,.28);
  display:grid;
  place-items:center;
  position:relative;
}
.unit-hud .unit-portrait.unit-player-portrait{
  grid-row:1 / 2;
}
.unit-hud .unit-portrait.unit-player-portrait img{
  object-fit:cover;
  image-rendering:auto;
}
.unit-hud .unit-portrait img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:50%;
  background:#070d16;
  image-rendering:pixelated;
}
.unit-hud .unit-portrait.shiny{
  box-shadow:0 0 0 2px #0a101c,0 0 22px rgba(255,220,90,.45);
}

.unit-hud .unit-head{
  grid-column:2;
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.unit-hud .unit-name-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 8px;
  padding-right:0 !important;
}
.unit-hud .unit-name{
  font-family:var(--dv-display);
  font-size:clamp(16px,5cqi,19px);
  font-weight:700;
  letter-spacing:.03em;
  color:#fff;
  line-height:1.15;
}
.unit-hud .unit-lvl-inline{
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  padding:3px 8px;
  border-radius:99px;
  color:#1a1006;
  background:linear-gradient(180deg,var(--dv-orange),var(--dv-orange-2));
}
.unit-hud .unit-dexnum{
  font-size:12px;
  color:var(--dv-muted);
  font-variant-numeric:tabular-nums;
  margin-left:auto;
}

.unit-hud .unit-player-bars{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-top:2px;
}
.unit-hud .unit-player-bars .ubar-track{height:5px}
.unit-hud .unit-player-bars .ubar-tag{color:var(--dv-orange)}

.unit-hud .unit-type-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px;
  min-width:0;
  max-width:100%;
}
.unit-hud .unit-types{display:flex;flex-wrap:wrap;gap:4px;min-width:0}
.unit-hud .unit-type{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:1px 6px;
  border-radius:99px;
  font-size:10px;
  background:rgba(79,214,255,.08);
  border:1px solid var(--dv-line);
}

/* Raridade / potencial — badge compacta que não estoura a HUD */
.unit-hud .unit-rarity{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0;
  flex:0 0 auto;
  max-width:100%;
  min-width:0;
  white-space:nowrap;
  font-family:var(--dv-display, Orbitron, sans-serif);
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:3px 8px;
  border-radius:8px;
  border:1px solid;
  line-height:1.2;
  font-variant-numeric:tabular-nums;
  box-sizing:border-box;
  overflow:hidden;
  text-overflow:ellipsis;
}
.unit-hud .unit-rarity-pot{
  opacity:.78;
  font-weight:700;
  letter-spacing:.02em;
  margin-left:2px;
}
.unit-hud .unit-type-row > .unit-rarity{
  margin-left:auto;
}
.unit-hud .unit-pane-bottom .unit-type-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:6px;
  width:100%;
}
.unit-hud .unit-pane-bottom .unit-type-row .unit-types{
  min-width:0;
}
.unit-hud .unit-pane-bottom .unit-type-row > .unit-rarity{
  margin-left:0;
  grid-column:2;
  justify-self:end;
}
.unit-hud .unit-stats{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}
.unit-hud .unit-stat{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 6px;
  border-radius:6px;
  font-size:11px;
  font-weight:700;
  background:rgba(255,154,46,.08);
  border:1px solid rgba(255,154,46,.2);
}
.unit-hud .unit-stat-lbl{
  font-size:8px;
  letter-spacing:.1em;
  color:var(--dv-orange);
  font-weight:800;
}

/* Party legacy — oculto (substituído por unit-commands no partner) */
.unit-hud .unit-party{
  display:none !important;
}
.unit-hud .party-ball{display:none !important}

/* Comandos migrados para a toolbar */
.unit-hud .unit-top.unit-partner > .unit-commands.unit-partner-commands,
.unit-hud .unit-section.unit-commands.unit-partner-commands,
.unit-hud .unit-partner-commands{
  display:none !important;
}

/* ========== 2. DIGIMON / VITAIS ========== */
.unit-hud .unit-bars.unit-vitals,
.unit-hud .unit-bars{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:8px 10px;
  border-radius:12px;
  background:rgba(8,14,24,.55);
  border:1px solid var(--dv-line-soft);
}
/* unit-mon-head: visual principal em vitals-digi.css — aqui só fallback seguro */
.unit-hud .unit-mon-head{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:10px 12px;
  align-items:start;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}
.unit-hud .unit-portrait.unit-mon-portrait{
  width:64px;
  height:64px;
  max-width:64px;
  max-height:64px;
  min-width:64px;
  min-height:64px;
  flex:none;
  grid-row:auto;
  padding:0;
  border-radius:16px;
  box-sizing:border-box;
  overflow:hidden;
}
.unit-hud .unit-portrait.unit-mon-portrait img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.unit-hud .unit-mon-info{
  grid-column:auto;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  max-width:100%;
}
.unit-hud .unit-mon-info .unit-name{
  font-size:clamp(15px,4.8cqi,18px);
}
.unit-hud .ubar-group{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.unit-hud .ubar-group.trainer-group{display:none}
.unit-hud .ubar-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:8px;
}
.unit-hud .ubar-tag{
  font-size:8px;
  letter-spacing:.12em;
  font-weight:800;
  color:var(--dv-cyan);
}
.unit-hud .ubar-num{
  font-size:10px;
  font-variant-numeric:tabular-nums;
  color:var(--dv-text);
}
.unit-hud .ubar-track{
  height:6px;
  border-radius:99px;
  background:rgba(255,255,255,.05);
  overflow:hidden;
}
.unit-hud .ubar.hp .ubar-fill{
  background:linear-gradient(90deg,#1f9d5a,var(--dv-green));
  box-shadow:0 0 8px rgba(61,255,160,.3);
}
.unit-hud .ubar.xp .ubar-fill{
  background:linear-gradient(90deg,#1e7fa8,var(--dv-cyan));
}
/* player trainer-xp bar */
.unit-hud .ubar.trainer-xp .ubar-tag{color:var(--dv-cyan)}
.unit-hud .ubar.trainer-xp .ubar-fill{
  background:linear-gradient(90deg,#2a5fd4,var(--dv-cyan));
  box-shadow:0 0 8px rgba(90,147,224,.35);
}

.unit-hud .ubar.trainer .ubar-fill{
  background:linear-gradient(90deg,#c45a1a,var(--dv-orange));
}
.unit-hud .ubar-fill.crit{
  background:linear-gradient(90deg,#a81e2e,var(--dv-danger)) !important;
}

/* ========== 3. STATUS BAR (missão + offline na mesma faixa) ========== */
.unit-hud .unit-status-bar{
  display:flex;
  align-items:stretch;
  gap:6px;
  flex:0 0 auto;
  min-width:0;
  max-width:100%;
  width:100%;
  box-sizing:border-box;
}
.unit-hud .unit-status-bar .unit-target.unit-mission,
.unit-hud .unit-status-bar .unit-target{
  flex:1 1 0;
  min-width:0;
  margin:0;
}
.unit-hud .unit-status-bar .unit-offline.unit-link,
.unit-hud .unit-status-bar .unit-offline{
  flex:0 1 auto;
  min-width:0;
  max-width:48%;
  margin:0;
}
.unit-hud .unit-status-bar:not(:has(.unit-target)) .unit-offline.unit-link,
.unit-hud .unit-status-bar:not(:has(.unit-target)) .unit-offline{
  flex:1 1 auto;
  max-width:100%;
}
.unit-hud .unit-target.unit-mission,
.unit-hud .unit-target{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:6px;
  padding:7px 9px;
  border-radius:10px;
  background:linear-gradient(90deg,rgba(255,154,46,.1),rgba(79,214,255,.04));
  border:1px solid rgba(255,154,46,.22);
}
.unit-hud .unit-target-lbl{
  font-size:8px;
  letter-spacing:.14em;
  font-weight:800;
  color:var(--dv-orange);
}
.unit-hud .unit-target-name{
  font-size:12px;
  font-weight:700;
  color:#fff;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.unit-hud .unit-target-balls{
  font-size:10px;
  color:var(--dv-muted);
  white-space:nowrap;
}

/* ========== RESOURCES / SPLIT RAIL (removido) ========== */
.unit-hud .unit-foot.unit-resources,
.unit-hud .unit-foot.unit-split-handle,
.unit-hud .unit-foot.unit-section.unit-resources,
.unit-hud .unit-foot{
  display:none !important;
}
.unit-hud .unit-split-grip{
  position:relative;
  flex:0 0 14px;
  width:100%;
  height:14px;
  z-index:6;
  cursor:row-resize;
  touch-action:none;
}
.unit-hud .unit-split-grip::before{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  top:50%;
  height:1px;
  transform:translateY(-50%);
  background:linear-gradient(90deg, transparent, rgba(79,214,255,.28), transparent);
}
.unit-hud .unit-split-grip::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:40px;
  height:4px;
  border-radius:99px;
  background:rgba(232,241,255,.22);
  border:1px solid rgba(79,214,255,.28);
  opacity:.75;
  box-shadow:0 1px 6px #00000066;
  transition:opacity .15s ease,width .15s ease,background .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.unit-hud .unit-foot.unit-split-handle:hover .unit-split-grip::after,
.unit-hud .unit-split-grip:hover::after,
.unit-hud .unit-foot.unit-split-handle:active .unit-split-grip::after{
  opacity:1;
  width:52px;
  height:5px;
  background:linear-gradient(90deg,#ffb04a,#ff7a22);
  border-color:rgba(255,154,46,.55);
  box-shadow:0 0 12px rgba(255,154,46,.35);
}
.unit-hud .unit-foot.unit-split-handle::before,
.unit-hud .unit-foot.unit-split-handle::after{
  display:none !important;
}

/* Width grip (sidebar) — centralizado no limite direito (ou esquerdo se dock-right) */
.unit-hud .unit-resize-handle.dock-left,
.unit-hud .unit-resize-handle.dock-right,
.unit-hud .unit-resize-handle.edge-e{
  display:flex !important;
  align-items:center;
  justify-content:center;
  z-index:80 !important;
  pointer-events:auto;
}
.unit-hud .unit-resize-handle.dock-left,
.unit-hud .unit-resize-handle.edge-e{
  top:0;
  bottom:0;
  width:20px;
  height:auto;
  right:0;
  left:auto;
  /* centro da alça = limite direito do unit-hud */
  transform:translateX(50%);
}
.unit-hud .unit-resize-handle.dock-right{
  top:0;
  bottom:0;
  width:20px;
  height:auto;
  left:0;
  right:auto;
  /* centro da alça = limite esquerdo (borda de resize) */
  transform:translateX(-50%);
}
.unit-hud .unit-split-grip.unit-width-grip{
  position:relative;
  flex:0 0 14px;
  width:14px;
  height:56px;
  z-index:81;
  pointer-events:none;
  cursor:ew-resize;
}
.unit-hud .unit-split-grip.unit-width-grip::before{
  left:50%;
  right:auto;
  top:8px;
  bottom:8px;
  width:1px;
  height:auto;
  transform:translateX(-50%);
  background:linear-gradient(180deg, transparent, rgba(79,214,255,.45), transparent);
}
.unit-hud .unit-split-grip.unit-width-grip::after{
  width:5px;
  height:40px;
  background:rgba(232,241,255,.38);
  border:1px solid rgba(79,214,255,.42);
  opacity:.95;
  box-shadow:0 1px 8px #00000088;
}
.unit-hud .unit-resize-handle:hover .unit-split-grip.unit-width-grip::after,
.unit-hud .unit-resize-handle:active .unit-split-grip.unit-width-grip::after,
.unit-hud .unit-split-grip.unit-width-grip:hover::after{
  opacity:1;
  width:6px;
  height:52px;
  background:linear-gradient(180deg,#ffb04a,#ff7a22);
  border-color:rgba(255,154,46,.55);
  box-shadow:0 0 12px rgba(255,154,46,.35);
}

.unit-hud .unit-foot-rail{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:stretch;
  gap:0;
  margin:0;
  padding:2px;
  border-radius:12px;
  background:
    linear-gradient(180deg, rgba(79,214,255,.06), transparent 40%),
    rgba(8,14,24,.62);
  border:1px solid var(--dv-line-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.unit-hud .unit-foot-sep{
  width:1px;
  align-self:stretch;
  margin:6px 0;
  background:linear-gradient(180deg, transparent, rgba(79,214,255,.28), transparent);
}
.unit-hud .unit-foot-item{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  padding:8px 10px;
  border:0;
  border-radius:10px;
  background:transparent;
  cursor:default;
  position:relative;
  z-index:1;
  transition:background .12s ease;
}
.unit-hud .unit-foot-item:hover{
  background:rgba(255,255,255,.03);
}
.unit-hud .unit-foot-ico{
  display:grid;
  place-items:center;
  flex:0 0 28px;
  width:28px;
  height:28px;
  border-radius:50%;
  font-size:13px;
  line-height:1;
  background:rgba(10,16,28,.85);
  border:1px solid var(--dv-line-soft);
}
.unit-hud .unit-foot-item.unit-foot-gold .unit-foot-ico{
  border-color:rgba(255,154,46,.35);
  background:radial-gradient(circle at 40% 35%, rgba(255,154,46,.22), rgba(10,16,28,.9));
  box-shadow:0 0 10px rgba(255,154,46,.12);
}
.unit-hud .unit-foot-item.unit-foot-dex .unit-foot-ico{
  border-color:rgba(79,214,255,.32);
  background:radial-gradient(circle at 40% 35%, rgba(79,214,255,.18), rgba(10,16,28,.9));
  box-shadow:0 0 10px rgba(79,214,255,.1);
}
.unit-hud .unit-foot-meta{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
  flex:1;
}
.unit-hud .unit-foot-lbl{
  font-size:8px;
  letter-spacing:.14em;
  font-weight:800;
  text-transform:uppercase;
  color:var(--dv-muted);
  line-height:1;
}
.unit-hud .unit-foot-val{
  font-family:var(--dv-display);
  font-size:14px;
  font-weight:700;
  line-height:1.15;
  color:var(--dv-text);
  font-variant-numeric:tabular-nums;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.unit-hud .unit-foot-val.gold{color:var(--dv-orange)}

/* Foot: colapsa só por largura (altura não esconde Gold/Dex) */
@container dterminal (max-width: 300px){
  .unit-hud .unit-foot-rail{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:0;
    padding:2px;
  }
  .unit-hud .unit-foot-sep{display:block}
  .unit-hud .unit-foot-item{
    width:auto;
    height:auto;
    min-width:0;
    padding:6px 8px;
    gap:6px;
    border-radius:10px;
    border:0;
    background:transparent;
    justify-content:flex-start;
  }
  .unit-hud .unit-foot-ico{
    display:grid;
    width:26px;
    height:26px;
    flex:0 0 26px;
    font-size:12px;
    border-radius:50%;
  }
  .unit-hud .unit-foot-meta{display:flex}
  .unit-hud .unit-foot-lbl{display:none}
  .unit-hud .unit-foot-val{font-size:13px}
}

/* Ultra-estreito: só ícones redondos (rail legado; métricas do bottom têm regra própria) */
@container dterminal (max-width: 240px){
  .unit-hud .unit-foot-rail{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    padding:6px 8px;
    background:transparent;
    border:0;
    box-shadow:none;
  }
  .unit-hud .unit-foot-sep{display:none}
  .unit-hud .unit-foot-rail .unit-foot-item{
    width:36px;
    height:36px;
    min-width:36px;
    padding:0;
    gap:0;
    border-radius:50%;
    justify-content:center;
    background:rgba(8,14,24,.7);
    border:1px solid var(--dv-line-soft);
  }
  .unit-hud .unit-foot-rail .unit-foot-item.unit-foot-gold{
    border-color:rgba(255,154,46,.4);
    background:radial-gradient(circle at 50% 40%,rgba(255,154,46,.22),rgba(8,14,24,.75));
  }
  .unit-hud .unit-foot-rail .unit-foot-item.unit-foot-dex{
    border-color:rgba(79,214,255,.35);
    background:radial-gradient(circle at 50% 40%,rgba(79,214,255,.18),rgba(8,14,24,.75));
  }
  .unit-hud .unit-foot-rail .unit-foot-ico{
    width:100%;
    height:100%;
    flex:none;
    border:0;
    background:transparent;
    box-shadow:none;
    font-size:15px;
  }
  .unit-hud .unit-foot-rail .unit-foot-meta{display:none}
}

@container dterminal (max-height: 400px){
  .unit-hud .unit-split-grip{flex-basis:12px;height:12px}
}

/* ========== 4. LINK OFFLINE (faixa minimalista sob comandos) ========== */
.unit-hud .unit-offline.unit-link,
.unit-hud .unit-offline{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  min-width:0;
  max-width:100%;
  margin:0;
  padding:4px 6px;
  border-radius:10px;
  background:rgba(8,14,24,.4);
  border:1px solid var(--dv-line-soft);
  box-sizing:border-box;
  overflow:visible;
  position:relative;
  cursor:help;
  outline:none;
}
/* Tooltip stamina offline (mesmo padrão de dvl-stat) */
.unit-hud .unit-offline.unit-link::after,
.unit-hud .unit-offline::after{
  content:attr(data-tip);
  position:absolute;
  left:50%;
  bottom:calc(100% + 8px);
  top:auto;
  padding:6px 9px;
  border-radius:8px;
  border:1px solid rgba(79,214,255,.28);
  background:linear-gradient(180deg,rgba(18,26,42,.98),rgba(8,12,22,.98));
  box-shadow:0 8px 20px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.25);
  color:var(--dv-text,#e9eaec);
  font-family:var(--dv-font,inherit);
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  white-space:nowrap;
  opacity:0;
  transform:translate(-50%,4px);
  pointer-events:none;
  transition:opacity .14s ease,transform .14s ease;
  z-index:30;
}
.unit-hud .unit-offline.unit-link::before,
.unit-hud .unit-offline::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:calc(100% + 2px);
  top:auto;
  border:5px solid transparent;
  border-top-color:rgba(18,26,42,.98);
  border-bottom-color:transparent;
  opacity:0;
  transform:translateX(-50%);
  pointer-events:none;
  transition:opacity .14s ease;
  z-index:31;
}
.unit-hud .unit-offline.unit-link:hover::after,
.unit-hud .unit-offline:hover::after,
.unit-hud .unit-offline.unit-link:focus-visible::after,
.unit-hud .unit-offline:focus-visible::after{
  opacity:1;
  transform:translate(-50%,0);
}
.unit-hud .unit-offline.unit-link:hover::before,
.unit-hud .unit-offline:hover::before,
.unit-hud .unit-offline.unit-link:focus-visible::before,
.unit-hud .unit-offline:focus-visible::before{
  opacity:1;
}
.unit-hud .unit-stam{
  flex:1 1 auto;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:8px;
  min-width:0;
}
.unit-hud .unit-stam-lbl{display:none}
.unit-hud .unit-stam-track{
  flex:1 1 auto;
  min-width:40px;
  height:4px;
  border-radius:99px;
  background:rgba(255,255,255,.06);
  overflow:hidden;
  position:relative;
  isolation:isolate;
}
.unit-hud .unit-stam-fill{
  height:100%;
  max-height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#1e7fa8,var(--dv-cyan,#4fd6ff));
  transition:width .3s ease;
  position:relative;
  box-sizing:border-box;
}
.unit-hud .unit-stam-fill.full{
  background:linear-gradient(90deg,#2a9a6a,var(--dv-green,#3dff9f));
  box-shadow:0 0 6px rgba(61,255,160,.35);
  animation:uhStamFullPulse 2.2s ease-in-out infinite;
}
/* Marcador visual de tempo (faixas em movimento) — não altera altura/layout */
.unit-hud .unit-stam-fill.filling{
  background:repeating-linear-gradient(
    115deg,
    #176a8c 0 6px,
    #4fd6ff 6px 12px
  );
  background-size:24px 100%;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 0 8px rgba(79,214,255,.28);
  animation:uhStamFilling 0.85s linear infinite;
}
.unit-hud .unit-stam-fill.filling::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:2px;
  border-radius:0 99px 99px 0;
  background:rgba(255,255,255,.75);
  box-shadow:0 0 6px rgba(79,214,255,.7);
  pointer-events:none;
}
@keyframes uhStamFilling{
  from{background-position:0 0}
  to{background-position:24px 0}
}
@keyframes uhStamFullPulse{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.22)}
}
@media (prefers-reduced-motion: reduce){
  .unit-hud .unit-stam-fill.filling,
  .unit-hud .unit-stam-fill.full{
    animation:none;
  }
  .unit-hud .unit-stam-fill.filling{
    background:linear-gradient(90deg,#176a8c,#4fd6ff);
  }
}
.unit-hud .unit-stam-txt{
  flex:0 0 auto;
  font-size:9px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--dv-muted);
  white-space:nowrap;
}
.unit-hud .offline-toggle-btn{
  flex:0 0 auto;
  min-height:26px;
  padding:0 10px;
  border-radius:8px;
  border:1px solid rgba(255,154,46,.35);
  background:rgba(255,154,46,.1);
  color:#ffe2bd;
  font-size:9px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
  transition:background .12s ease,border-color .12s ease,color .12s ease;
}
.unit-hud .offline-toggle-btn:hover:not(:disabled){
  background:rgba(255,154,46,.2);
  border-color:rgba(255,154,46,.55);
}
.unit-hud .offline-toggle-btn.on{
  color:#0a101c;
  border-color:rgba(61,255,160,.45);
  background:linear-gradient(180deg,#7dffa8,#3dffa0);
}
.unit-hud .offline-toggle-btn.warn:not(.on){
  border-color:rgba(255,154,46,.55);
  box-shadow:0 0 0 1px rgba(255,154,46,.12) inset;
}
.unit-hud .offline-toggle-btn:disabled{opacity:.4;cursor:default}
.unit-hud .offline-supply-warn{display:none}

@container dterminal (max-width: 280px){
  .unit-hud .unit-stam-txt{display:none}
  .unit-hud .offline-toggle-btn{padding:0 8px;font-size:8px}
}

/* ========== 5. COMANDOS (logo abaixo do parceiro) ========== */
.unit-hud .unit-commands{
  position:relative;
  z-index:2;
  margin-top:0;
  flex-shrink:0;
  padding:8px;
  border:1px solid var(--dv-line);
  border-radius:12px;
  background:
    linear-gradient(180deg,rgba(255,154,46,.1),rgba(10,16,28,.92));
  box-shadow:0 6px 16px #00000055;
}
.unit-hud .unit-cmd-grid,
.unit-hud .unit-actions.unit-cmd-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:5px;
  margin:0;
  align-items:stretch;
  justify-items:stretch;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  transition:gap .15s ease;
}
.unit-hud .unit-action-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  min-width:0;
  width:100%;
  max-width:100%;
  min-height:44px;
  padding:6px 2px;
  border-radius:10px;
  border:1px solid var(--dv-line);
  background:linear-gradient(180deg,rgba(79,214,255,.1),rgba(255,255,255,.02));
  color:var(--dv-text);
  font-size:9px;
  font-weight:700;
  letter-spacing:.02em;
  line-height:1.1;
  box-sizing:border-box;
  overflow:hidden;
  box-shadow:0 3px 8px #00000040;
  transition:transform .12s ease,border-color .12s ease,background .12s ease,border-radius .15s ease,width .15s ease,height .15s ease,min-height .15s ease,padding .15s ease,gap .12s ease;
}
.unit-hud .unit-action-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(79,214,255,.45);
}
.unit-hud .unit-action-btn.on{
  border-color:rgba(255,154,46,.55);
  background:linear-gradient(180deg,rgba(255,154,46,.24),rgba(255,154,46,.06));
}
.unit-hud .unit-action-btn.recall{
  grid-column:auto;
  flex-direction:row;
  gap:4px;
  min-height:34px;
  border-color:rgba(79,214,255,.35);
}
.unit-hud .unit-action-ico{
  font-size:14px;
  line-height:1;
  flex-shrink:0;
}
.unit-hud .unit-action-btn > span:not(.unit-action-ico){
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  transition:opacity .12s ease,max-height .15s ease,margin .15s ease;
}

/* Commands: colapsa só por largura (altura não esconde labels) */
@container dterminal (max-width: 300px){
  .unit-hud .unit-cmd-grid,
  .unit-hud .unit-actions.unit-cmd-grid{
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:4px;
    justify-items:stretch;
  }
  .unit-hud .unit-action-btn{
    flex-direction:column;
    width:100%;
    height:auto;
    max-width:100%;
    min-height:38px;
    padding:4px 1px;
    gap:2px;
    border-radius:10px;
    font-size:7px;
    line-height:1.05;
  }
  .unit-hud .unit-action-btn.recall{
    grid-column:auto;
    flex-direction:column;
    min-height:38px;
    gap:2px;
    font-size:7px;
  }
  .unit-hud .unit-action-btn > span:not(.unit-action-ico){
    display:block;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:inherit;
    line-height:inherit;
  }
  .unit-hud .unit-action-ico{font-size:12px;line-height:1}
  .unit-hud .unit-commands{padding:6px}
}

/* Ultra-estreito: só ícones redondos */
@container dterminal (max-width: 240px){
  .unit-hud .unit-cmd-grid,
  .unit-hud .unit-actions.unit-cmd-grid{
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:5px;
    justify-items:center;
  }
  .unit-hud .unit-action-btn,
  .unit-hud .unit-action-btn.recall{
    grid-column:auto;
    flex-direction:row;
    width:34px;
    height:34px;
    min-height:34px;
    max-width:34px;
    padding:0;
    gap:0;
    border-radius:50%;
    font-size:0;
    line-height:0;
  }
  .unit-hud .unit-action-btn > span:not(.unit-action-ico){
    display:none;
  }
  .unit-hud .unit-action-ico{
    font-size:14px;
    line-height:1;
  }
  .unit-hud .unit-action-btn.on{
    box-shadow:0 0 0 2px rgba(255,154,46,.45),0 3px 10px #00000055;
  }
  .unit-hud .unit-commands{padding:6px}
}

@container dterminal (max-height: 400px){
  .unit-hud .unit-commands{
    padding:6px;
    margin-top:0;
  }
  .unit-hud .unit-offline.unit-link,
  .unit-hud .unit-offline{
    padding:6px 8px;
  }
  .unit-hud .offline-toggle-btn{
    font-size:9px;
    padding:5px 8px;
    white-space:nowrap;
  }
}

/* ========== Docked / wide ========== */
.unit-hud.unit-hud-docked .digivice-card{
  border-radius:0;
  border-top:0;
  border-bottom:0;
}
.unit-hud.unit-hud-docked{
  max-width:min(62vw,720px);
  min-width:300px;
}

@container dterminal (min-width: 360px){
  .unit-hud .unit-cmd-grid,
  .unit-hud .unit-actions.unit-cmd-grid{
    grid-template-columns:repeat(5,minmax(0,1fr));
    justify-items:stretch;
  }
  .unit-hud .unit-action-btn{
    flex-direction:row;
    width:100%;
    height:auto;
    max-width:100%;
    min-width:0;
    gap:4px;
    font-size:10px;
    line-height:1.1;
    min-height:36px;
    padding:6px 4px;
    border-radius:10px;
  }
  .unit-hud .unit-action-btn.recall{
    grid-column:auto;
    width:100%;
    height:auto;
    max-width:100%;
    min-height:36px;
    border-radius:10px;
  }
  .unit-hud .unit-action-btn > span:not(.unit-action-ico){
    display:inline;
    position:static;
    width:auto;
    max-width:100%;
    height:auto;
    margin:0;
    padding:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:inherit;
    line-height:inherit;
  }
  .unit-hud .unit-foot.unit-resources,
  .unit-hud .unit-foot.unit-split-handle{
    display:flex;
    flex-direction:column;
    padding:0;
  }
  .unit-hud .unit-foot-rail{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    justify-content:stretch;
    align-items:stretch;
    padding:2px;
    background:
      linear-gradient(180deg, rgba(79,214,255,.06), transparent 40%),
      rgba(8,14,24,.62);
    border:1px solid var(--dv-line-soft);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  }
  .unit-hud .unit-foot-sep{display:block}
  .unit-hud .unit-foot-item{
    width:auto;
    height:auto;
    min-width:0;
    max-width:none;
    padding:8px 10px;
    gap:8px;
    border-radius:10px;
    border:0;
    background:transparent;
    justify-content:flex-start;
  }
  .unit-hud .unit-foot-ico{
    display:grid;
    width:28px;
    height:28px;
    flex:0 0 28px;
    font-size:13px;
    border:1px solid var(--dv-line-soft);
  }
  .unit-hud .unit-foot-meta{display:flex}
}

@container dterminal (max-width: 300px){
  .unit-hud .unit-top.unit-partner{
    grid-template-columns:var(--dv-portrait) 1fr;
    justify-items:stretch;
    text-align:left;
  }
  .unit-hud .unit-portrait{grid-row:auto}
  .unit-hud .unit-head{grid-column:auto;align-items:stretch}
  .unit-hud .unit-name-row{justify-content:flex-start}
  .unit-hud .unit-party{justify-content:flex-start}
}

/* Collapsed chip: portrait circular laranja (como na referência) */
.unit-hud .unit-collapsed{
  position:relative;
  width:52px;
  height:52px;
  padding:0;
  margin:0;
  border-radius:50%;
  border:2px solid var(--dv-orange,#ff9a2e);
  background:radial-gradient(circle at 50% 40%,#182338,#0a101c 72%);
  box-shadow:0 0 14px rgba(255,154,46,.45),0 6px 18px rgba(0,0,0,.45);
  display:grid;
  place-items:center;
  overflow:hidden;
  cursor:grab;
  touch-action:none;
  box-sizing:border-box;
  -webkit-appearance:none;
  appearance:none;
}
.unit-hud .unit-collapsed::before{display:none}
.unit-hud .unit-collapsed img{
  position:relative;
  z-index:1;
  width:40px;
  height:40px;
  object-fit:contain;
  image-rendering:pixelated;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));
  pointer-events:none;
}
.unit-hud .unit-collapsed-arrow{
  display:none !important;
}
.unit-hud .unit-collapsed.shiny{
  border-color:#ffd95a;
  box-shadow:0 0 0 1px rgba(255,217,90,.35),0 0 16px rgba(255,217,90,.45),0 6px 18px rgba(0,0,0,.45);
}
.unit-hud .unit-collapsed:active{
  cursor:grabbing;
}
.unit-hud:has(.unit-collapsed){
  cursor:grab;
  min-width:0 !important;
  max-width:none !important;
  width:auto !important;
  height:auto !important;
  padding:0 !important;
  gap:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}

/* ========== Split vertical (topo / base) ========== */
.unit-hud{
  --uh-min-top:72px;
  --uh-min-bottom:160px;
  --uh-min-vitals:56px;
  --uh-min-inv:120px;
  --uh-min-w:300px;
  --uh-max-w:720px;
}
.unit-hud.is-resizing{
  transition:none !important;
}

.unit-hud .digivice-body,
.unit-hud .unit-body{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  min-width:0 !important;
  max-width:100% !important;
  width:100% !important;
  height:100% !important;
  overflow:hidden !important;
  gap:6px !important;
  box-sizing:border-box !important;
}

/* Docked (reancorado nos cantos): sem folga; topo acompanha o conteúdo */
.unit-hud.unit-hud-docked .digivice-body,
.unit-hud.unit-hud-docked .unit-body{
  padding:0 !important;
  gap:0 !important;
}
.unit-hud.unit-hud-docked .unit-pane.unit-pane-top,
.unit-hud.unit-hud-docked .unit-pane-top{
  --uh-top-gap:0px;
  flex:0 0 auto !important;
  flex-basis:auto !important;
  height:auto !important;
  max-height:none !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  gap:0 !important;
  overflow:visible !important;
}
.unit-hud.unit-hud-docked .unit-pane-top .unit-top.unit-partner{
  margin:0 !important;
  border-radius:0 !important;
  border-left:0 !important;
  border-right:0 !important;
  border-top:0 !important;
}
.unit-hud.unit-hud-docked .unit-pane-bottom{
  padding-top:0 !important;
  margin-top:0 !important;
}
.unit-hud .unit-pane{
  min-height:0;
  min-width:0;
  max-width:100%;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:6px;
  box-sizing:border-box;
  overflow:hidden;
}
/* Base SEMPRE ativa — split JS só sobrescreve height/flexBasis/maxHeight inline */
.unit-hud .unit-pane-top{
  --uh-top-gap:4px;
  flex:0 1 auto;
  min-height:max(56px, var(--uh-partner-min, var(--uh-min-top, 72px)));
  min-width:0;
  max-width:100%;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  box-sizing:border-box;
  gap:var(--uh-top-gap);
}
/* Fallback CSS só antes do JS marcar o split (evita briga com inline) */
.unit-hud .unit-pane-top:not([data-uh-split-on="1"]){
  max-height:min(42%, calc(100% - var(--uh-min-bottom, 160px)));
}
@supports (height:1cqh){
  .unit-hud .unit-pane-top:not([data-uh-split-on="1"]){
    min-height:min(56px, max(40px, 11cqh));
    max-height:min(42cqh, 42%, calc(100% - min(160px, 36cqh)));
  }
}
.unit-hud .unit-pane-top[data-uh-split-on="1"]{
  flex:0 0 auto;
  min-height:var(--uh-partner-min, 72px); /* trava no fundo do unit-partner */
  max-height:none;
}

.unit-hud .unit-pane-bottom{
  flex:1 1 0;
  min-height:0;
  min-width:0;
  max-width:100%;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:4px;
  overflow:hidden;
  overscroll-behavior:contain;
  box-sizing:border-box;
  padding:2px 0 0;
}

/* Aba flutuante: bottom pane precisa encolher; filhos rolam */
.unit-hud.unit-hud-float .unit-pane-bottom{
  min-height:0;
  flex:1 1 auto;
  overflow:hidden;
}
.unit-hud.unit-hud-float .unit-bottom-panel{
  min-height:var(--uh-min-inv, 120px);
  overflow:auto;
}
.unit-hud.unit-hud-float .unit-pane-top:not([data-uh-split-on="1"]){
  max-height:min(38%, calc(100% - 120px));
  min-height:0;
}
@supports (height:1cqh){
  .unit-hud.unit-hud-float .unit-pane-top:not([data-uh-split-on="1"]){
    max-height:min(38cqh, 38%, calc(100% - min(120px, 32cqh)));
    min-height:min(48px, 10cqh);
  }
}

/* Seções do topo não devem ser esmagadas pelo resize — scroll no pane */
.unit-hud .unit-pane-top .unit-top.unit-partner,
.unit-hud .unit-pane-top .unit-section.unit-commands,
.unit-hud .unit-pane-top .unit-partner-commands,
.unit-hud .unit-pane-top .unit-status-bar,
.unit-hud .unit-pane-top .unit-partner-status{
  flex-shrink:0;
}

/* Vitals: encolhe e rola; abas + painel ficam acessíveis */
.unit-hud .unit-pane-bottom > .unit-bars.unit-vitals{
  flex:0 1 auto;
  min-height:0;
  max-height:none;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  margin-bottom:0;
}
.unit-hud .unit-pane-bottom > .unit-bottom-head{
  flex:0 0 auto;
  position:relative;
  z-index:1;
  background:rgba(8,14,24,.92);
}
.unit-hud .unit-pane-bottom > .unit-bottom-panel{
  flex:1 1 0;
  min-height:var(--uh-min-inv, 120px);
  overflow:auto;
  position:relative;
  z-index:1;
  background:rgba(8,14,24,.92);
}
.unit-hud .unit-pane-bottom > .unit-split-grip.unit-bot-split{
  flex:0 0 14px;
  width:100%;
  height:14px;
  margin:0;
  position:relative;
  z-index:2;
  cursor:row-resize;
  touch-action:none;
  background:rgba(8,14,24,.85);
}
.unit-hud .unit-pane-bottom > .unit-split-grip.unit-bot-split.is-dragging::after,
.unit-hud .unit-pane-bottom > .unit-split-grip.unit-bot-split:hover::after{
  opacity:1;
  width:52px;
  height:5px;
  background:linear-gradient(90deg,#ffb04a,#ff7a22);
  border-color:rgba(255,154,46,.55);
  box-shadow:0 0 12px rgba(255,154,46,.35);
}
.unit-hud .unit-pane-bottom .unit-split-grip{
  flex-shrink:0;
}
/* DigiVitals: altura travada pelo split — sem sangrar sob abas */
.unit-hud.unit-hud-float .unit-pane-bottom > .unit-bars.unit-vitals.is-digimon-vitals,
.unit-hud .unit-pane-bottom > .unit-bars.unit-vitals.is-digimon-vitals{
  flex:0 0 auto;
  flex-grow:0;
  flex-shrink:0;
  min-height:0;
  height:var(--uh-bot-split, auto);
  max-height:var(--uh-bot-split, 50%);
  overflow:hidden !important;
  position:relative;
  z-index:0;
  margin:0 !important;
}

/* ========== BOTTOM: tabs Loot / Inventário ========== */
.unit-hud .unit-bottom-head{
  flex:0 0 auto;
  display:flex;
  align-items:stretch;
  gap:4px;
  padding:0;
  margin:0;
  min-width:0;
  max-width:100%;
  overflow:hidden;
  background:rgba(8,14,24,.97);
}
.unit-hud .unit-bottom-tabs{
  display:flex;
  align-items:center;
  gap:3px;
  flex:1 1 auto;
  min-width:0;
  max-width:100%;
  width:100%;
  padding:3px;
  border-radius:10px;
  background:
    linear-gradient(180deg, rgba(79,214,255,.06), transparent 70%),
    rgba(8,14,24,.92);
  border:1px solid var(--dv-line-soft);
  overflow:hidden;
  box-sizing:border-box;
}
.unit-hud .unit-bottom-tabs .unit-bottom-metrics{
  margin-left:auto;
  flex:0 0 auto;
  max-width:none;
  min-width:0;
  padding:0 2px 0 2px;
  overflow:visible;
  display:flex;
  align-items:center;
  gap:4px;
}
.unit-hud .unit-bottom-tab{
  appearance:none;
  border:0;
  cursor:pointer;
  flex:1 1 0;
  min-width:0;
  max-width:100%;
  padding:5px 6px;
  border-radius:8px;
  font-family:var(--dv-display);
  font-size:9px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--dv-muted);
  background:transparent;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:background .12s ease,color .12s ease,box-shadow .12s ease;
}
.unit-hud .unit-bottom-tab:hover{
  color:var(--dv-text);
  background:rgba(255,255,255,.04);
}
.unit-hud .unit-bottom-tab.on{
  color:#0a101c;
  background:linear-gradient(180deg,#ffb04a,#ff7a22);
  box-shadow:0 0 12px rgba(255,154,46,.28);
}
.unit-hud .unit-bottom-metrics{
  display:flex;
  align-items:center;
  gap:4px;
  flex:0 0 auto;
  max-width:none;
  min-width:0;
  justify-content:flex-end;
  overflow:visible;
}
.unit-hud .unit-bottom-metrics .unit-foot-item{
  position:relative;
  width:24px;
  height:24px;
  min-width:24px;
  max-width:none;
  flex:0 0 24px;
  padding:0;
  gap:0;
  border-radius:50%;
  overflow:visible;
  justify-content:center;
  align-items:center;
  cursor:help;
  background:rgba(8,14,24,.85);
  border:1px solid var(--dv-line-soft);
  z-index:2;
}
.unit-hud .unit-bottom-metrics .unit-foot-item.unit-foot-gold{
  border-color:rgba(255,154,46,.4);
  background:radial-gradient(circle at 50% 40%,rgba(255,154,46,.22),rgba(8,14,24,.75));
}
.unit-hud .unit-bottom-metrics .unit-foot-item.unit-foot-dex{
  border-color:rgba(79,214,255,.35);
  background:radial-gradient(circle at 50% 40%,rgba(79,214,255,.18),rgba(8,14,24,.75));
}
.unit-hud .unit-bottom-metrics .unit-foot-item:hover{
  background:rgba(8,14,24,.85);
  z-index:6;
}
.unit-hud .unit-bottom-metrics .unit-foot-meta{
  display:none;
}
.unit-hud .unit-bottom-metrics .unit-foot-ico{
  width:100%;
  height:100%;
  flex:none;
  border:0;
  background:transparent;
  box-shadow:none;
  font-size:13px;
}
/* Balão com Gold/Dex ao hover */
.unit-hud .unit-bottom-metrics .unit-foot-item::after{
  content:attr(data-tip);
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  bottom:auto;
  padding:6px 9px;
  border-radius:8px;
  border:1px solid rgba(79,214,255,.28);
  background:linear-gradient(180deg,rgba(18,26,42,.98),rgba(8,12,22,.98));
  box-shadow:0 8px 20px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.25);
  color:var(--dv-text,#e9eaec);
  font-family:var(--dv-font,inherit);
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  white-space:nowrap;
  opacity:0;
  transform:translateY(-4px);
  pointer-events:none;
  transition:opacity .14s ease,transform .14s ease;
  z-index:20;
}
.unit-hud .unit-bottom-metrics .unit-foot-item::before{
  content:"";
  position:absolute;
  right:10px;
  top:calc(100% + 2px);
  bottom:auto;
  border:5px solid transparent;
  border-bottom-color:rgba(18,26,42,.98);
  border-top-color:transparent;
  opacity:0;
  pointer-events:none;
  transition:opacity .14s ease;
  z-index:21;
}
.unit-hud .unit-bottom-metrics .unit-foot-item:hover::after,
.unit-hud .unit-bottom-metrics .unit-foot-item:focus-visible::after,
.unit-hud .unit-bottom-metrics .unit-foot-item:hover::before,
.unit-hud .unit-bottom-metrics .unit-foot-item:focus-visible::before{
  opacity:1;
  transform:translateY(0);
}

.unit-hud .unit-bottom-panel{
  flex:1 1 0;
  min-height:80px;
  min-width:0;
  max-width:100%;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow:auto;
  padding:8px;
  border-radius:14px;
  border:1px solid var(--dv-line-soft);
  background:
    linear-gradient(180deg,rgba(79,214,255,.07),transparent 32%),
    rgba(8,14,24,.58);
  box-sizing:border-box;
}
.unit-hud .unit-bottom-toolbar{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:0;
  max-width:100%;
  overflow:hidden;
}
.unit-hud .unit-bottom-summary{
  flex:1 1 auto;
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--dv-muted);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.unit-hud .unit-bottom-action{
  appearance:none;
  flex:0 0 auto;
  border:1px solid rgba(255,154,46,.4);
  border-radius:8px;
  padding:5px 10px;
  font-family:var(--dv-font);
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--dv-orange);
  background:rgba(255,154,46,.1);
  cursor:pointer;
  transition:background .12s ease,border-color .12s ease,opacity .12s ease;
}
.unit-hud .unit-bottom-action:hover:not(:disabled){
  background:rgba(255,154,46,.2);
  border-color:rgba(255,154,46,.65);
}
.unit-hud .unit-bottom-action:disabled{
  opacity:.4;
  cursor:default;
}
.unit-hud .unit-bottom-pager{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:4px;
  min-width:0;
}
.unit-hud .unit-bottom-page-btn{
  appearance:none;
  flex:0 0 auto;
  width:22px;
  height:22px;
  padding:0;
  border-radius:6px;
  border:1px solid var(--dv-line-soft);
  background:rgba(10,16,28,.85);
  color:var(--dv-text);
  font-size:14px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:border-color .12s ease,background .12s ease,opacity .12s ease;
}
.unit-hud .unit-bottom-page-btn:hover:not(:disabled){
  border-color:rgba(79,214,255,.45);
  background:rgba(79,214,255,.1);
}
.unit-hud .unit-bottom-page-btn:disabled{
  opacity:.35;
  cursor:default;
}
.unit-hud .unit-bottom-page-num{
  font-size:10px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  color:var(--dv-cyan);
  letter-spacing:.04em;
  min-width:2.4em;
  text-align:center;
}
.unit-hud .unit-bottom-empty{
  flex:1 1 auto;
  min-height:48px;
  display:grid;
  place-items:center;
  text-align:center;
  padding:12px 8px;
  font-size:11px;
  color:var(--dv-muted);
  overflow:visible;
}

.unit-hud .unit-loot-list{
  list-style:none;
  margin:0;
  padding:0;
  flex:1 1 0;
  min-height:0;
  min-width:0;
  max-width:100%;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.unit-hud .unit-loot-list::-webkit-scrollbar{width:1px;height:1px}
.unit-hud .unit-loot-list::-webkit-scrollbar-thumb{background:transparent;border-radius:99px}
.unit-hud .unit-loot-list:hover::-webkit-scrollbar-thumb,
.unit-hud .unit-loot-list.is-scrolling::-webkit-scrollbar-thumb{background:rgba(255,255,255,.36)}

.unit-hud .unit-loot-row{
  display:grid;
  grid-template-columns:28px minmax(0,1fr) auto auto;
  align-items:center;
  gap:6px;
  padding:4px 6px;
  border-radius:8px;
  background:rgba(255,255,255,.02);
  border:1px solid transparent;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}
.unit-hud .unit-loot-row:hover{
  background:rgba(79,214,255,.06);
  border-color:var(--dv-line-soft);
}
.unit-hud .unit-loot-row .anz-item-ico,
.unit-hud .unit-loot-row .anz-item-ico img,
.unit-hud .unit-loot-row .bag-slot-img{
  width:24px;
  height:24px;
  object-fit:contain;
  image-rendering:pixelated;
}
.unit-hud .unit-loot-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  font-weight:600;
  color:var(--dv-text);
}
.unit-hud .unit-loot-qty{
  font-size:10px;
  font-weight:700;
  color:var(--dv-cyan);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.unit-hud .unit-loot-worth{
  font-family:var(--dv-display);
  font-size:10px;
  font-weight:700;
  color:var(--dv-orange);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.unit-hud .unit-bag-grid{
  flex:1 1 auto;
  min-height:88px;
  min-width:0;
  max-width:100%;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(44px,1fr));
  grid-auto-rows:44px;
  gap:5px;
  align-content:start;
  align-items:stretch;
  box-sizing:border-box;
}
.unit-hud .unit-bag-grid::-webkit-scrollbar{width:1px;height:1px}
.unit-hud .unit-bag-grid::-webkit-scrollbar-thumb{background:transparent;border-radius:99px}
.unit-hud .unit-bag-grid:hover::-webkit-scrollbar-thumb,
.unit-hud .unit-bag-grid.is-scrolling::-webkit-scrollbar-thumb{background:rgba(255,255,255,.36)}

.unit-hud .unit-bag-slot{
  position:relative;
  appearance:none;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  aspect-ratio:auto;
  padding:4px;
  border-radius:10px;
  border:1px solid var(--dv-line-soft);
  background:rgba(10,16,28,.85);
  cursor:pointer;
  display:grid;
  place-items:center;
  overflow:hidden;
  box-sizing:border-box;
  transition:border-color .12s ease,transform .12s ease;
}
.unit-hud .unit-bag-slot:hover{
  border-color:rgba(79,214,255,.45);
  transform:translateY(-1px);
}
.unit-hud .unit-bag-slot .bag-slot-img,
.unit-hud .unit-bag-slot img{
  width:28px;
  height:28px;
  max-width:100%;
  object-fit:contain;
  image-rendering:pixelated;
}
.unit-hud .unit-bag-qty{
  position:absolute;
  right:3px;
  bottom:2px;
  font-size:9px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  color:#fff;
  text-shadow:0 1px 2px #000;
  line-height:1;
}

.unit-hud .unit-box-grid{
  --uh-box-cell:52px;
  --uh-box-gap:5px;
  --uh-box-img:36px;
  --uh-box-pad:3px;
  --uh-box-lv:8px;
  flex:1 1 auto;
  min-height:96px;
  min-width:0;
  max-width:100%;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(var(--uh-box-cell),1fr));
  grid-auto-rows:var(--uh-box-cell);
  gap:var(--uh-box-gap);
  align-content:start;
  align-items:stretch;
  box-sizing:border-box;
}
.unit-hud .unit-box-grid::-webkit-scrollbar{width:1px;height:1px}
.unit-hud .unit-box-grid::-webkit-scrollbar-thumb{background:transparent;border-radius:99px}
.unit-hud .unit-box-grid:hover::-webkit-scrollbar-thumb,
.unit-hud .unit-box-grid.is-scrolling::-webkit-scrollbar-thumb{background:rgba(255,255,255,.36)}

.unit-hud .unit-box-slot{
  position:relative;
  appearance:none;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  aspect-ratio:auto;
  padding:var(--uh-box-pad,3px);
  border-radius:clamp(6px,calc(var(--uh-box-cell,52px) * .2),10px);
  border:1px solid var(--dv-line-soft);
  background:rgba(10,16,28,.85);
  cursor:pointer;
  display:grid;
  place-items:center;
  overflow:hidden;
  box-sizing:border-box;
  transition:border-color .12s ease,transform .12s ease,box-shadow .12s ease;
}
.unit-hud .unit-box-slot:hover{
  border-color:rgba(79,214,255,.45);
  transform:translateY(-1px);
}
.unit-hud .unit-box-slot.shiny{
  background:
    radial-gradient(circle at 30% 25%,rgba(255,214,90,.18),transparent 55%),
    rgba(10,16,28,.85);
}
.unit-hud .unit-box-slot.egg{
  border-color:rgba(255,154,46,.4);
  background:
    radial-gradient(circle at 50% 40%,rgba(255,154,46,.16),transparent 60%),
    rgba(10,16,28,.85);
}
.unit-hud .unit-box-img{
  width:min(var(--uh-box-img,36px),85%);
  height:min(var(--uh-box-img,36px),85%);
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  image-rendering:pixelated;
  pointer-events:none;
}
.unit-hud .unit-box-slot.egg .unit-box-img{
  width:min(calc(var(--uh-box-img,36px) * .86),80%);
  height:min(calc(var(--uh-box-img,36px) * .86),80%);
}
.unit-hud .unit-box-lv{
  position:absolute;
  right:clamp(1px,calc(var(--uh-box-cell,52px) * .06),3px);
  bottom:clamp(1px,calc(var(--uh-box-cell,52px) * .04),2px);
  font-size:var(--uh-box-lv,8px);
  font-weight:800;
  font-variant-numeric:tabular-nums;
  color:#fff;
  text-shadow:0 1px 2px #000;
  line-height:1;
}
.unit-hud .unit-box-lv.egg-tag{
  left:clamp(1px,calc(var(--uh-box-cell,52px) * .06),3px);
  right:auto;
  font-size:max(6px,calc(var(--uh-box-lv,8px) - 1px));
  letter-spacing:.04em;
  color:#ffd59a;
}

/* Digitamas na Mochila de Digimon (float box-win) */
.bag-win.box-win .mon-slot.egg{
  border-color:rgba(255,154,46,.45);
  background:
    radial-gradient(circle at 50% 40%,rgba(255,154,46,.18),transparent 60%),
    rgba(10,16,28,.9);
}
.bag-win.box-win .mon-slot-img.egg{
  width:70%;
  height:70%;
  object-fit:contain;
  image-rendering:pixelated;
}

.unit-hud .unit-pane-top .unit-commands,
.unit-hud .unit-pane-top .unit-partner-commands{
  order:unset;
  margin-bottom:0;
}
.unit-hud .unit-pane-top .unit-status-bar,
.unit-hud .unit-pane-top .unit-partner-status{
  order:unset;
  margin-top:0;
}
.unit-hud .unit-pane-bottom .unit-bars.unit-vitals{
  margin-bottom:0;
}

@container dterminal (max-width: 300px){
  .unit-hud .unit-status-bar,
  .unit-hud .unit-partner-status{
    flex-direction:row;
    align-items:center;
    flex-wrap:nowrap;
  }
  .unit-hud .unit-status-bar .unit-offline.unit-link,
  .unit-hud .unit-status-bar .unit-offline,
  .unit-hud .unit-partner-status .unit-offline.unit-link,
  .unit-hud .unit-partner-status .unit-offline{
    max-width:40%;
    flex:0 1 40%;
  }
  .unit-hud .unit-partner-status .unit-target-name{
    font-size:9px;
  }
  .unit-hud .unit-partner-status .unit-stam-txt{
    display:none;
  }
}

@container dterminal (max-width: 340px){
  .unit-hud .unit-bottom-tabs{
    flex-wrap:nowrap;
    overflow:hidden;
    gap:2px;
  }
  .unit-hud .unit-bottom-tabs .unit-bottom-metrics{
    width:auto;
    margin-left:auto;
    justify-content:flex-end;
    order:0;
    flex:0 0 auto;
  }
  .unit-hud .unit-bottom-metrics{
    max-width:none;
    flex:0 0 auto;
    gap:3px;
    overflow:visible;
  }
  .unit-hud .unit-bottom-metrics .unit-foot-item{
    flex:0 0 22px;
    width:22px;
    height:22px;
    min-width:22px;
  }
  .unit-hud .unit-bottom-tab{
    padding:4px 4px;
    font-size:8px;
    letter-spacing:.03em;
  }
  .unit-hud .unit-box-grid{
    --uh-box-cell:44px;
    --uh-box-gap:4px;
    --uh-box-img:30px;
    --uh-box-lv:7px;
  }
  .unit-hud .unit-bag-grid{
    grid-template-columns:repeat(auto-fill,minmax(36px,1fr));
    grid-auto-rows:36px;
  }
  .unit-hud .unit-loot-row{
    grid-template-columns:24px minmax(0,1fr) auto;
  }
  .unit-hud .unit-loot-worth{display:none}
}

/* Métricas Gold/Dex: ícones compactos */
@container dterminal (max-width: 280px){
  .unit-hud .unit-bottom-head{
    overflow:hidden;
  }
  .unit-hud .unit-bottom-metrics{
    gap:3px;
  }
  .unit-hud .unit-bottom-tab{
    padding:4px 3px;
    font-size:7px;
  }
}

@container dterminal (max-height: 420px){
  .unit-hud .unit-pane-bottom{gap:4px}
  .unit-hud .unit-bottom-panel{padding:4px;gap:4px}
  .unit-hud .unit-offline{padding:3px 5px;gap:6px}
  .unit-hud .offline-toggle-btn{min-height:24px;padding:0 8px}
}

/* ========== unit-pane-top scrollbar 1px (webkit only; last wins) ========== */
/* Importante: NÃO definir scrollbar-width/color no Chromium — isso anula ::-webkit-scrollbar */
.unit-hud .unit-pane.unit-pane-top::-webkit-scrollbar,
.unit-hud .unit-pane-top::-webkit-scrollbar{
  width: 1px !important;
  height: 1px !important;
  background: transparent !important;
}
.unit-hud .unit-pane.unit-pane-top::-webkit-scrollbar-button,
.unit-hud .unit-pane-top::-webkit-scrollbar-button{
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}
.unit-hud .unit-pane.unit-pane-top::-webkit-scrollbar-track,
.unit-hud .unit-pane-top::-webkit-scrollbar-track,
.unit-hud .unit-pane.unit-pane-top::-webkit-scrollbar-track-piece,
.unit-hud .unit-pane-top::-webkit-scrollbar-track-piece,
.unit-hud .unit-pane.unit-pane-top::-webkit-scrollbar-corner,
.unit-hud .unit-pane-top::-webkit-scrollbar-corner{
  background: transparent !important;
  border: 0 !important;
}
.unit-hud .unit-pane.unit-pane-top::-webkit-scrollbar-thumb,
.unit-hud .unit-pane-top::-webkit-scrollbar-thumb{
  background-color: transparent !important;
  background-clip: padding-box !important;
  border: 0 !important;
  border-radius: 0 !important;
  min-height: 20px;
  box-shadow: none !important;
}
.unit-hud .unit-pane.unit-pane-top:hover::-webkit-scrollbar-thumb,
.unit-hud .unit-pane-top:hover::-webkit-scrollbar-thumb,
.unit-hud .unit-pane.unit-pane-top.is-scrolling::-webkit-scrollbar-thumb,
.unit-hud .unit-pane-top.is-scrolling::-webkit-scrollbar-thumb{
  background-color: rgba(255, 255, 255, 0.42) !important;
}
.unit-hud .unit-pane.unit-pane-bottom::-webkit-scrollbar,
.unit-hud .unit-pane-bottom::-webkit-scrollbar{
  width: 1px !important;
  height: 1px !important;
  background: transparent !important;
}
.unit-hud .unit-pane.unit-pane-bottom::-webkit-scrollbar-button,
.unit-hud .unit-pane-bottom::-webkit-scrollbar-button{
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}
.unit-hud .unit-pane.unit-pane-bottom::-webkit-scrollbar-track,
.unit-hud .unit-pane-bottom::-webkit-scrollbar-track,
.unit-hud .unit-pane.unit-pane-bottom::-webkit-scrollbar-track-piece,
.unit-hud .unit-pane-bottom::-webkit-scrollbar-track-piece,
.unit-hud .unit-pane.unit-pane-bottom::-webkit-scrollbar-corner,
.unit-hud .unit-pane-bottom::-webkit-scrollbar-corner{
  background: transparent !important;
  border: 0 !important;
}
.unit-hud .unit-pane.unit-pane-bottom::-webkit-scrollbar-thumb,
.unit-hud .unit-pane-bottom::-webkit-scrollbar-thumb{
  background-color: transparent !important;
  background-clip: padding-box !important;
  border: 0 !important;
  border-radius: 0 !important;
  min-height: 20px;
  box-shadow: none !important;
}
.unit-hud .unit-pane.unit-pane-bottom:hover::-webkit-scrollbar-thumb,
.unit-hud .unit-pane-bottom:hover::-webkit-scrollbar-thumb,
.unit-hud .unit-pane.unit-pane-bottom.is-scrolling::-webkit-scrollbar-thumb,
.unit-hud .unit-pane-bottom.is-scrolling::-webkit-scrollbar-thumb{
  background-color: rgba(255, 255, 255, 0.42) !important;
}
@supports (-moz-appearance: none){
  .unit-hud .unit-pane.unit-pane-top,
  .unit-hud .unit-pane-top,
  .unit-hud .unit-pane.unit-pane-bottom,
  .unit-hud .unit-pane-bottom{
    scrollbar-width: thin !important;
    scrollbar-color: transparent transparent !important;
  }
  .unit-hud .unit-pane.unit-pane-top:hover,
  .unit-hud .unit-pane-top:hover,
  .unit-hud .unit-pane.unit-pane-bottom:hover,
  .unit-hud .unit-pane-bottom:hover,
  .unit-hud .unit-pane.unit-pane-top.is-scrolling,
  .unit-hud .unit-pane-top.is-scrolling,
  .unit-hud .unit-pane.unit-pane-bottom.is-scrolling,
  .unit-hud .unit-pane-bottom.is-scrolling{
    scrollbar-color: rgba(255, 255, 255, 0.42) transparent !important;
  }
}

/* ========== Float tab: compact + responsive ========== */
.unit-hud.unit-hud-float{
  --dv-pad:8px;
  --dv-gap:6px;
  --dv-portrait:clamp(48px,22cqi,80px);
  min-width:min(280px,calc(100vw - 16px));
}
.unit-hud.unit-hud-float .unit-drag-bar{
  height:28px;
  padding:0 58px 0 10px;
}
.unit-hud.unit-hud-float .unit-brand-mark{
  font-size:9px;
  letter-spacing:.16em;
}
.unit-hud.unit-hud-float .digivice-body,
.unit-hud.unit-hud-float .unit-body{
  gap:6px !important;
  padding:8px !important;
}
.unit-hud.unit-hud-float .unit-top.unit-partner{
  gap:6px 8px;
  padding:8px 8px 0;
}
.unit-hud.unit-hud-float .unit-bottom-tab{
  font-size:9px;
  padding:5px 7px;
  letter-spacing:.04em;
}
.unit-hud.unit-hud-float .unit-bottom-panel{
  padding:5px;
  gap:5px;
}
.unit-hud.unit-hud-float .unit-bag-grid{
  grid-template-columns:repeat(auto-fill,minmax(36px,1fr));
  grid-auto-rows:36px;
  gap:4px;
  min-height:72px;
}
.unit-hud.unit-hud-float .unit-bag-slot{
  padding:3px;
  border-radius:8px;
}
.unit-hud.unit-hud-float .unit-bag-slot .bag-slot-img,
.unit-hud.unit-hud-float .unit-bag-slot img{
  width:22px;
  height:22px;
}
.unit-hud.unit-hud-float .unit-box-grid{
  /* Fluido com a largura da aba (cqi) — acompanha resize */
  --uh-box-cell:clamp(28px,13.5cqi,56px);
  --uh-box-gap:clamp(2px,.9cqi,5px);
  --uh-box-img:clamp(18px,calc(var(--uh-box-cell) * .72),40px);
  --uh-box-pad:clamp(2px,calc(var(--uh-box-cell) * .07),4px);
  --uh-box-lv:clamp(6px,calc(var(--uh-box-cell) * .16),9px);
  min-height:clamp(64px,calc(var(--uh-box-cell) * 2 + var(--uh-box-gap)),120px);
}
.unit-hud.unit-hud-float .unit-box-slot{
  border-radius:clamp(5px,calc(var(--uh-box-cell) * .18),10px);
}

/* Caixa em aba — degraus conforme resize da janela */
@container dterminal (min-width: 420px){
  .unit-hud.unit-hud-float .unit-box-grid{
    --uh-box-cell:clamp(40px,12cqi,56px);
  }
}
@container dterminal (max-width: 300px){
  .unit-hud.unit-hud-float .unit-box-grid{
    --uh-box-cell:clamp(24px,14cqi,34px);
    --uh-box-gap:2px;
    --uh-box-pad:2px;
  }
}

.unit-hud.unit-hud-float .unit-loot-row{
  grid-template-columns:24px minmax(0,1fr) auto auto;
  gap:4px;
  padding:3px 5px;
}
.unit-hud.unit-hud-float .unit-loot-name{font-size:10px}
.unit-hud.unit-hud-float .unit-action-btn{
  min-height:32px;
  font-size:9px;
  padding:4px;
}
.unit-hud.unit-hud-float .unit-bottom-metrics .unit-foot-ico{
  width:18px;
  height:18px;
  flex-basis:18px;
  font-size:10px;
}

@container dterminal (max-width: 340px){
  .unit-hud.unit-hud-float{
    --dv-pad:6px;
    --dv-gap:4px;
    --dv-portrait:clamp(40px,28cqi,64px);
  }
  .unit-hud.unit-hud-float .unit-bottom-tab{
    font-size:8px;
    padding:4px 5px;
  }
  .unit-hud.unit-hud-float .unit-bottom-metrics .unit-foot-meta{display:none}
  .unit-hud.unit-hud-float .unit-bag-grid{
    grid-template-columns:repeat(auto-fill,minmax(30px,1fr));
    gap:3px;
  }
  .unit-hud.unit-hud-float .unit-box-grid{
    --uh-box-cell:clamp(26px,12.5cqi,40px);
    --uh-box-gap:3px;
  }
  .unit-hud.unit-hud-float .unit-cmd-grid,
  .unit-hud.unit-hud-float .unit-actions.unit-cmd-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:4px;
  }
  .unit-hud.unit-hud-float .unit-action-btn{
    min-height:28px;
    font-size:8px;
  }
  .unit-hud.unit-hud-float .unit-action-btn > span:not(.unit-action-ico){
    display:none;
  }
}

@container dterminal (max-height: 480px){
  .unit-hud.unit-hud-float .unit-pane-top:not([data-uh-split-on="1"]){
    max-height:min(34%, calc(100% - 100px));
  }
  .unit-hud.unit-hud-float .unit-pane-bottom{
    min-height:0;
  }
  .unit-hud.unit-hud-float .unit-top.unit-partner{
    padding:6px 6px 0;
  }
  .unit-hud.unit-hud-float .unit-commands{padding:4px}
  .unit-hud.unit-hud-float .unit-offline,
  .unit-hud.unit-hud-float .unit-offline.unit-link{
    padding:3px 5px;
  }
  .unit-hud.unit-hud-float .unit-box-grid{
    --uh-box-cell:clamp(26px,12cqi,44px);
    --uh-box-gap:3px;
    min-height:clamp(56px,calc(var(--uh-box-cell) * 1.8),96px);
  }
}

@container dterminal (max-height: 380px){
  .unit-hud.unit-hud-float .unit-pane-top:not([data-uh-split-on="1"]){
    max-height:min(30%, 32%);
  }
  /* não esconder missão/offline agora que vivem no partner */
  .unit-hud.unit-hud-float .unit-pane-top > .unit-status-bar:not(.unit-partner-status){display:none}
  .unit-hud.unit-hud-float .unit-partner-status{
    flex-direction:row;
    flex-wrap:nowrap;
    max-height:32px;
  }
  .unit-hud.unit-hud-float .unit-partner-status .unit-offline{
    max-width:42%;
  }
  .unit-hud.unit-hud-float .unit-box-grid{
    --uh-box-cell:clamp(24px,11cqi,38px);
    --uh-box-gap:2px;
    min-height:calc(var(--uh-box-cell) * 1.6);
  }
  .unit-hud.unit-hud-float .unit-brand-mark{letter-spacing:.1em}
}

/* ========== unit-pane-top — responsividade vertical completa ========== */
.unit-hud .unit-pane-top .unit-top.unit-partner,
.unit-hud .unit-pane-top .unit-section.unit-commands,
.unit-hud .unit-pane-top .unit-status-bar{
  transition:
    padding .15s ease,
    gap .15s ease,
    margin .15s ease,
    min-height .15s ease,
    opacity .12s ease;
}

@container dterminal (max-height: 640px){
  .unit-hud .digivice-body,
  .unit-hud .unit-body{
    gap:6px !important;
  }
  .unit-hud .unit-pane-top:not([data-uh-split-on="1"]){
    --uh-top-gap:6px;
    max-height:min(40%, calc(100% - 150px));
  }
  .unit-hud .unit-pane-top .unit-top.unit-partner{
    padding:8px 8px 0;
    gap:6px 8px;
  }
  .unit-hud .unit-pane-top .unit-commands{
    padding:6px;
  }
  .unit-hud .unit-pane-top .unit-action-btn{
    min-height:40px;
    padding:5px 2px;
  }
}

@container dterminal (max-height: 560px){
  .unit-hud{
    --dv-portrait:clamp(52px,18cqi,78px);
    --dv-pad:8px;
    --dv-gap:6px;
  }
  .unit-hud .unit-pane-top:not([data-uh-split-on="1"]){
    --uh-top-gap:5px;
    max-height:min(38%, calc(100% - 130px));
  }
  .unit-hud .unit-pane-top .unit-name{
    font-size:clamp(12px,4cqi,15px);
  }
  .unit-hud .unit-pane-top .unit-party{
    padding-top:4px;
    gap:4px;
  }
  .unit-hud .unit-pane-top .party-ball{
    width:20px;
    height:20px;
  }
  .unit-hud .unit-pane-top .unit-status-bar,
  .unit-hud .unit-pane-top .unit-partner-status{
    gap:4px;
  }
  .unit-hud .unit-pane-top .unit-partner-status .unit-target.unit-mission,
  .unit-hud .unit-pane-top .unit-partner-status .unit-target,
  .unit-hud .unit-pane-top .unit-partner-status .unit-offline.unit-link,
  .unit-hud .unit-pane-top .unit-partner-status .unit-offline{
    padding:3px 5px !important;
  }
}

@container dterminal (max-height: 480px){
  .unit-hud .digivice-body,
  .unit-hud .unit-body{
    gap:4px !important;
    padding-block:clamp(4px,1.2%,8px) !important;
  }
  .unit-hud .unit-pane-top:not([data-uh-split-on="1"]){
    --uh-top-gap:4px;
    min-height:max(40px, var(--uh-partner-min, 48px));
    max-height:min(36%, calc(100% - 110px));
  }
  .unit-hud .unit-pane-top .unit-top.unit-partner{
    padding:6px 6px 0;
    gap:5px 6px;
    border-radius:10px;
  }
  .unit-hud .unit-pane-top .unit-player-bars{
    gap:3px;
    margin-top:0;
  }
  .unit-hud .unit-pane-top .unit-player-bars .ubar-track{height:4px}
  .unit-hud .unit-pane-top .unit-stat{
    padding:1px 5px;
    font-size:10px;
  }
  .unit-hud .unit-pane-top .unit-commands{
    padding:5px;
    border-radius:10px;
  }
  .unit-hud .unit-pane-top .unit-cmd-grid,
  .unit-hud .unit-pane-top .unit-actions.unit-cmd-grid{
    gap:3px;
  }
  .unit-hud .unit-pane-top .unit-action-btn{
    min-height:34px;
    padding:3px 1px;
    gap:1px;
    border-radius:8px;
    font-size:8px;
  }
  .unit-hud .unit-pane-top .unit-action-btn.recall{min-height:30px}
  .unit-hud .unit-pane-top .unit-action-ico{font-size:12px}
  .unit-hud .unit-pane-top .unit-target-lbl{
    font-size:7px;
  }
  .unit-hud .unit-pane-top .unit-target-name{
    font-size:11px;
  }
}

@container dterminal (max-height: 420px){
  .unit-hud{
    --dv-portrait:clamp(40px,14cqi,58px);
  }
  .unit-hud .unit-pane-top:not([data-uh-split-on="1"]){
    max-height:min(34%, calc(100% - 96px));
  }
  .unit-hud .unit-pane-top .unit-party{
    display:none;
  }
  .unit-hud .unit-pane-top .unit-type-row{
    gap:3px;
  }
  .unit-hud .unit-pane-top .unit-type{
    padding:0 5px;
    font-size:9px;
  }
  .unit-hud .unit-pane-top .unit-dexnum{font-size:9px}
  .unit-hud .unit-pane-top .unit-lvl-inline{
    font-size:8px;
    padding:1px 5px;
  }
  /* Comandos: só ícone para caber na altura */
  .unit-hud .unit-pane-top .unit-action-btn{
    min-height:30px;
    flex-direction:column;
  }
  .unit-hud .unit-pane-top .unit-action-btn > span:not(.unit-action-ico){
    display:none;
  }
  .unit-hud .unit-pane-top .unit-action-btn.recall{
    flex-direction:row;
    min-height:28px;
  }
  .unit-hud .unit-pane-top .unit-action-btn.recall > span:not(.unit-action-ico){
    display:inline;
    font-size:8px;
  }
  .unit-hud .unit-pane-top .unit-status-bar .unit-target-balls{
    display:none;
  }
}

@container dterminal (max-height: 360px){
  .unit-hud .unit-drag-bar{
    height:26px;
    padding-left:8px;
  }
  .unit-hud .unit-brand-mark{
    font-size:9px;
    letter-spacing:.12em;
  }
  .unit-hud .unit-pane-top:not([data-uh-split-on="1"]){
    --uh-top-gap:3px;
    min-height:0;
    max-height:min(42%, calc(100% - 80px));
  }
  .unit-hud .unit-pane-top .unit-top.unit-partner{
    padding:5px 5px 0;
    gap:4px;
  }
  .unit-hud .unit-pane-top .unit-stats{
    display:none;
  }
  .unit-hud .unit-pane-top .unit-status-bar{
    display:none;
  }
  .unit-hud .unit-pane-top .unit-commands{
    padding:4px;
    margin-bottom:0;
  }
  .unit-hud .unit-pane-top .unit-action-btn{
    min-height:28px;
    border-radius:7px;
  }
  .unit-hud .unit-pane-top .unit-action-ico{font-size:11px}
  .unit-hud .unit-pane-top .unit-action-btn.recall > span:not(.unit-action-ico){
    display:none;
  }
}

@container dterminal (max-height: 300px){
  .unit-hud .digivice-body,
  .unit-hud .unit-body{
    gap:3px !important;
    padding:4px !important;
  }
  .unit-hud .unit-pane-top:not([data-uh-split-on="1"]){
    max-height:min(38%, calc(100% - 68px));
  }
  .unit-hud .unit-pane-top .unit-top.unit-partner{
    grid-template-columns:36px 1fr;
    padding:4px 4px 0;
  }
  .unit-hud .unit-pane-top .unit-portrait,
  .unit-hud .unit-pane-top .unit-portrait.unit-player-portrait{
    width:36px;
    height:36px;
    padding:2px;
  }
  .unit-hud .unit-pane-top .unit-name{
    font-size:12px;
  }
  .unit-hud .unit-pane-top .unit-player-bars{display:none}
  .unit-hud .unit-pane-top .unit-type-row{display:none}
  .unit-hud .unit-pane-top .unit-cmd-grid,
  .unit-hud .unit-pane-top .unit-actions.unit-cmd-grid{
    gap:2px;
  }
  .unit-hud .unit-pane-top .unit-action-btn{
    min-height:24px;
    padding:2px 0;
    border-radius:6px;
  }
}

@container dterminal (max-height: 240px){
  .unit-hud .unit-pane-top:not([data-uh-split-on="1"]){
    max-height:min(34%, 40%);
  }
  .unit-hud .unit-pane-top .unit-commands{
    display:none;
  }
  .unit-hud .unit-pane-top .unit-top.unit-partner{
    grid-template-columns:28px 1fr;
  }
  .unit-hud .unit-pane-top .unit-portrait,
  .unit-hud .unit-pane-top .unit-portrait.unit-player-portrait{
    width:28px;
    height:28px;
  }
  .unit-hud .unit-pane-top .unit-head{
    gap:0;
  }
  .unit-hud .unit-pane-top .unit-name-row{
    gap:4px;
  }
}

/* Preferência: menos movimento — sem transitions densas */
@media (prefers-reduced-motion: reduce){
  .unit-hud .unit-pane-top .unit-top.unit-partner,
  .unit-hud .unit-pane-top .unit-section.unit-commands,
  .unit-hud .unit-pane-top .unit-status-bar{
    transition:none;
  }
}

/* ========== Sidebar Digimon — compactação final (wins) ========== */
.unit-hud .unit-partner-status{
  max-height:36px;
}
.unit-hud .unit-partner-status .unit-target,
.unit-hud .unit-partner-status .unit-offline{
  min-height:0;
}
.unit-hud .unit-pane-bottom > .unit-bars.unit-vitals.is-digimon-vitals,
.unit-hud .unit-pane-bottom > .unit-split-grip.unit-bot-split,
.unit-hud .unit-pane-bottom > .unit-bottom-head,
.unit-hud .unit-pane-bottom > .unit-bottom-panel{
  transform:none;
}
.unit-hud .unit-pane-bottom > .unit-bottom-head,
.unit-hud .unit-pane-bottom > .unit-bottom-panel{
  margin-top:0 !important;
  top:auto !important;
}

@container dterminal (max-width: 380px){
  .unit-hud .unit-vitals .unit-mon-head .dvl-stats{
    gap:1px;
  }
  .unit-hud .unit-vitals .unit-mon-head .dvl-stat{
    padding:2px 0;
  }
  .unit-hud .unit-vitals .unit-mon-head .dvl-stat b{
    display:none;
  }
  .unit-hud .unit-vitals .unit-mon-head .dvl-stat i{
    font-size:8px;
  }
  .unit-hud .unit-bottom-tab{
    padding:4px 3px;
    font-size:8px;
  }
  .unit-hud .unit-bottom-metrics .unit-foot-item{
    width:22px;
    height:22px;
    min-width:22px;
    flex-basis:22px;
  }
}

@container dterminal (max-height: 700px){
  .unit-hud .unit-partner-status{
    max-height:32px;
  }
  .unit-hud .unit-partner-commands .unit-action-btn{
    min-height:30px;
  }
  .unit-hud .unit-partner-commands .unit-action-btn > span:not(.unit-action-ico){
    font-size:7px;
  }
}
