/**
 * Digi Idle — ícones flutuantes de Boost XP / Digiscan
 * Logo abaixo da toolbar, centralizados na área útil da tela.
 */
.dboost-hud {
  --dboost-x: calc(
    var(--bar-left, 0px) + (100vw - var(--bar-left, 0px) - var(--bar-right, 0px)) / 2
  );
  position: fixed;
  z-index: 42;
  top: calc(var(--bar-top, 70px) + 6px);
  left: var(--dboost-x);
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - var(--bar-left, 0px) - var(--bar-right, 0px) - 16px);
  pointer-events: none;
  display: none;
}
.dboost-hud.is-on {
  display: block;
}

body[data-toolbar-pos="bottom"] .dboost-hud {
  top: auto;
  bottom: calc(var(--bar-bottom, 70px) + 6px);
}
body[data-toolbar-pos="left"] .dboost-hud,
body[data-toolbar-pos="right"] .dboost-hud {
  top: 12px;
}
body[data-toolbar-pos="float"] .dboost-hud {
  top: 12px;
}

.dboost-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55));
}

.dboost-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  min-width: 44px;
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.dboost-chip.is-off {
  opacity: 0.42;
  filter: grayscale(0.35) brightness(0.85);
}
.dboost-chip.is-on {
  opacity: 1;
}
.dboost-chip.is-on .dboost-ico {
  animation: dboostPulse 2.4s ease-in-out infinite;
}

.dboost-ico {
  width: 44px;
  height: 44px;
  object-fit: contain;
  image-rendering: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.dboost-pct {
  margin-top: -3px;
  font: 800 9px/1 "Orbitron", system-ui, sans-serif;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, 0.85);
}
.dboost-chip--xp .dboost-pct {
  color: #ffe27a;
}
.dboost-chip--digiscan .dboost-pct {
  color: #9ef0ff;
}
.dboost-time {
  margin-top: 2px;
  padding: 1px 5px;
  border-radius: 999px;
  font: 700 9px/1.2 "Rajdhani", system-ui, sans-serif;
  color: #e8f6ff;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  white-space: nowrap;
}

@keyframes dboostPulse {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

@media (max-width: 640px) {
  .dboost-ico {
    width: 36px;
    height: 36px;
  }
  .dboost-row {
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dboost-chip.is-on .dboost-ico {
    animation: none;
  }
}