/* Compact utility HUD — Happy Hour · Inventory · Piggy
   Stable layout (no hover translate / no absolute overflow timers). */

#hud-utility-rail {
  position: fixed;
  top: 8px;
  right: 152px;
  z-index: 2147483644;
  display: none;
  flex-direction: row;
  align-items: stretch;
  gap: 6px;
  padding: 6px;
  margin: 0;
  pointer-events: auto !important;
  border: 1px solid rgba(140, 210, 255, 0.5);
  border-radius: 10px;
  background:
    linear-gradient(168deg, rgba(18, 44, 74, 0.94) 0%, rgba(8, 18, 34, 0.97) 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 8px 20px rgba(0, 0, 0, 0.5);
  contain: layout style;
  transform: translateZ(0);
  backface-visibility: hidden;
}

#hud-utility-rail.is-map-on {
  display: flex !important;
}

#game.is-on #hud-utility-rail {
  position: fixed;
  top: 8px;
  right: 152px;
  z-index: 2147483644;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 6px;
  pointer-events: auto !important;
}

#hud-utility-rail > button,
#hud-utility-rail > .hud-util {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 1;
  overflow: hidden;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  width: 72px !important;
  height: 64px !important;
  min-width: 72px !important;
  min-height: 64px !important;
  max-width: 72px !important;
  padding: 4px 4px 3px !important;
  margin: 0 !important;
  border-radius: 8px !important;
  border: 1px solid rgba(120, 190, 255, 0.28) !important;
  background: rgba(4, 14, 28, 0.78) !important;
  box-shadow: 0 0 0 1px rgba(120, 190, 255, 0.1) inset !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 2px !important;
  cursor: pointer;
  color: #e8f0ff;
  font-family: "Segoe UI", Tahoma, sans-serif;
  transition: border-color 0.12s ease, background 0.12s ease;
  transform: none !important;
  animation: none !important;
}

#hud-utility-rail > button.hidden,
#hud-utility-rail > .hud-util.hidden {
  display: none !important;
}

#hud-utility-rail > button:hover,
#hud-utility-rail > .hud-util:hover {
  border-color: rgba(170, 220, 255, 0.65) !important;
  background: rgba(12, 36, 64, 0.92) !important;
  filter: none !important;
  transform: none !important;
}

#hud-utility-rail > button:active,
#hud-utility-rail > .hud-util:active {
  background: rgba(8, 28, 52, 0.95) !important;
  filter: none !important;
  transform: none !important;
}

/* Kill legacy pulse shake on piggy */
#hud-utility-rail #piggy-hud-btn.pulse,
#hud-utility-rail .piggy-hud-btn.pulse {
  animation: none !important;
}

#hud-utility-rail img,
#hud-utility-rail .hud-util-ico,
#hud-utility-rail .piggy-hud-icon-img,
#hud-utility-rail .gt-hud-bag {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain;
  display: block;
  pointer-events: none;
  flex: 0 0 auto;
  margin: 2px 0 0 !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}

#hud-utility-rail .piggy-hud-meta,
#hud-utility-rail .piggy-hud-icon {
  display: none !important;
}

/* Caption + timer live inside the tile (no absolute hang = no shake) */
#hud-utility-rail > button .hud-util-caption,
#hud-utility-rail > .hud-util .hud-util-caption {
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  max-width: 100%;
  padding: 0;
  margin: 0;
  color: #9ec8ef;
  font: 700 8px/1 "Segoe UI Semibold", "Segoe UI", Tahoma, sans-serif;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  opacity: 0.9;
  text-align: center;
  width: 100%;
  flex: 0 0 auto;
}

#hud-utility-rail .hud-util-timer,
#hud-utility-rail .hh-hud-timer,
#hud-utility-rail .piggy-hud-timer {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 1;
  display: block !important;
  box-sizing: border-box;
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  height: 13px !important;
  min-height: 13px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  border-radius: 4px;
  border: 1px solid rgba(120, 180, 240, 0.28);
  background: rgba(0, 10, 22, 0.72);
  box-shadow: none;
  color: #d8ecff !important;
  font: 700 8px/13px Consolas, "Segoe UI", monospace !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-shadow: none;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
  visibility: visible;
  opacity: 1;
}

/* Keep slot size even when empty / hidden — prevents layout jump */
#hud-utility-rail .hud-util-timer.hidden,
#hud-utility-rail .piggy-hud-timer.hidden,
#hud-utility-rail .hh-hud-timer.hidden {
  display: block !important;
  visibility: hidden !important;
  opacity: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
}

#hud-utility-rail #hh-hud-btn {
  border-color: rgba(220, 120, 190, 0.4) !important;
}
#hud-utility-rail #hh-hud-btn:hover {
  border-color: rgba(255, 160, 220, 0.7) !important;
  background: rgba(40, 16, 40, 0.85) !important;
}
#hud-utility-rail #hh-hud-btn .hh-hud-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff4d9a;
  box-shadow: 0 0 5px #ff4d9a;
  z-index: 3;
  border: 1px solid rgba(255, 220, 240, 0.65);
}
#hud-utility-rail #hh-hud-btn .hh-hud-timer,
#hud-utility-rail #hh-hud-btn .hud-util-timer {
  border-color: rgba(220, 120, 180, 0.35);
  color: #ffd0ea !important;
}

#hud-utility-rail #gt-hud-btn,
#hud-utility-rail .gt-hud {
  border-color: rgba(110, 180, 255, 0.4) !important;
}
#hud-utility-rail .gt-hud-badge,
#hud-utility-rail #gt-hud-count {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 16px;
  width: auto;
  height: 14px;
  padding: 0 4px;
  border-radius: 7px;
  background: linear-gradient(180deg, #ff6a6a, #b01828);
  color: #fff;
  font: 800 8px/14px "Segoe UI", Tahoma, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 200, 200, 0.7);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  z-index: 3;
}

#hud-utility-rail #piggy-hud-btn {
  border-color: rgba(230, 180, 80, 0.42) !important;
}
#hud-utility-rail #piggy-hud-btn:hover {
  border-color: rgba(255, 210, 120, 0.75) !important;
  background: rgba(40, 28, 10, 0.85) !important;
}
#hud-utility-rail #piggy-hud-btn.is-mult-2,
#hud-utility-rail #piggy-hud-btn.is-full {
  border-color: rgba(255, 210, 110, 0.7) !important;
}
#hud-utility-rail #piggy-hud-btn.is-mult-3 {
  border-color: rgba(170, 140, 255, 0.65) !important;
}

#hud-utility-rail #piggy-hud-btn .piggy-hud-badge {
  position: absolute;
  top: 3px;
  left: 3px;
  transform: none;
  min-width: 28px;
  width: auto;
  height: 13px;
  padding: 0 4px;
  border-radius: 5px;
  background: rgba(0, 12, 24, 0.85);
  border: 1px solid rgba(150, 200, 255, 0.35);
  color: #cfe4ff;
  font: 700 7px/13px Tahoma, sans-serif;
  text-align: center;
  z-index: 3;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: none;
}

#hud-utility-rail #piggy-hud-btn .piggy-hud-mult {
  position: absolute;
  top: 3px;
  right: 3px;
  left: auto;
  min-width: 20px;
  height: 14px;
  padding: 0 3px;
  border-radius: 5px;
  font: 800 8px/14px Tahoma, sans-serif;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(180deg, #ffe08a, #c98810);
  color: #1a1204;
  border: 1px solid #fff3c0;
  box-shadow: none;
  text-align: center;
}
#hud-utility-rail #piggy-hud-btn .piggy-hud-mult.x3 {
  background: linear-gradient(180deg, #c8b8ff, #6a58c0);
  color: #120c28;
  border-color: #e8e0ff;
}
#hud-utility-rail #piggy-hud-btn .piggy-hud-timer,
#hud-utility-rail #piggy-hud-btn .hud-util-timer {
  border-color: rgba(230, 180, 80, 0.35);
  color: #ffe4a8 !important;
}
#hud-utility-rail #piggy-hud-btn .piggy-hud-timer.x3 {
  border-color: rgba(170, 140, 255, 0.4);
  color: #e4dcff !important;
}

/* Inventory has no timer — reserve empty slot for equal tile height */
#hud-utility-rail #gt-hud-btn::after {
  content: "";
  display: block;
  width: 64px;
  height: 13px;
  flex: 0 0 auto;
  margin: 0 auto;
  visibility: hidden;
}

@media (max-width: 1100px) {
  #hud-utility-rail,
  #game.is-on #hud-utility-rail {
    right: 108px;
    gap: 4px;
    padding: 5px;
  }
  #hud-utility-rail > button,
  #hud-utility-rail > .hud-util {
    width: 64px !important;
    height: 60px !important;
    min-width: 64px !important;
    min-height: 60px !important;
    max-width: 64px !important;
  }
  #hud-utility-rail img,
  #hud-utility-rail .hud-util-ico,
  #hud-utility-rail .piggy-hud-icon-img,
  #hud-utility-rail .gt-hud-bag {
    width: 24px !important;
    height: 24px !important;
  }
}