/* Happy Hour — map HUD + offer modal (separate from donate) */
/* Legacy absolute placement — suppressed when utility rail is present */
#game #hh-hud-btn {
  position: absolute;
  top: 10px;
  right: 450px;
  z-index: 2147483644;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 11px;
  border: 1.5px solid rgba(255, 120, 200, 0.55);
  background: linear-gradient(160deg, rgba(40, 20, 50, 0.95), rgba(12, 10, 28, 0.98));
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(255, 80, 180, 0.22);
  pointer-events: auto;
  overflow: hidden;
}
#game.is-on #hud-utility-rail #hh-hud-btn {
  top: auto !important;
  right: auto !important;
  left: auto !important;
  position: relative !important;
}
#game.is-on #hh-hud-btn:not(.hidden) {
  display: inline-flex;
}
#game.is-on #hud-utility-rail #hh-hud-btn:not(.hidden) {
  display: inline-flex !important;
}
#game #hh-hud-btn:hover {
  filter: brightness(1.12);
  border-color: #ff9ad8;
}
#game #hh-hud-btn img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  pointer-events: none;
}
#game #hh-hud-btn .hh-hud-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff3d8a;
  box-shadow: 0 0 6px #ff3d8a;
}

.hh-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}
.hh-modal.hidden {
  display: none !important;
}
.hh-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
}
.hh-panel {
  position: relative;
  width: min(560px, 94vw);
  max-height: min(90vh, 720px);
  overflow: auto;
  border-radius: 16px;
  border: 2px solid rgba(220, 80, 200, 0.55);
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255, 80, 180, 0.22), transparent 55%),
    linear-gradient(165deg, #2a1840 0%, #120c22 50%, #0a0814 100%);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.75), 0 0 40px rgba(255, 60, 160, 0.2);
  color: #f4e8ff;
  padding: 22px 22px 20px;
}
.hh-x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #e8d0ff;
  font-size: 20px;
  cursor: pointer;
}
.hh-x:hover {
  background: rgba(220, 60, 80, 0.45);
  color: #fff;
}
.hh-timer {
  text-align: center;
  font: 800 1.35rem/1 "Rajdhani", Tahoma, sans-serif;
  letter-spacing: 0.12em;
  color: #ffe08a;
  margin: 4px 0 8px;
}
.hh-title {
  text-align: center;
  margin: 0 0 6px;
  font: 900 1.55rem/1.1 "Rajdhani", Tahoma, sans-serif;
  letter-spacing: 0.06em;
  color: #ff7ad8;
  text-shadow: 0 0 18px rgba(255, 80, 180, 0.45);
}
.hh-sub {
  text-align: center;
  margin: 0 0 16px;
  color: #c8b0e0;
  font-size: 0.9rem;
}
.hh-rewards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(200, 80, 220, 0.35);
  background: rgba(0, 0, 0, 0.28);
  margin-bottom: 14px;
}
.hh-reward {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}
.hh-reward img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}
.hh-reward-meta {
  min-width: 0;
}
.hh-reward-meta strong {
  display: block;
  font-size: 0.95rem;
  color: #fff;
}
.hh-reward-meta span {
  font-size: 0.78rem;
  color: #c9a0e8;
}
.hh-mult {
  margin-left: auto;
  font: 900 1.25rem/1 "Rajdhani", Tahoma, sans-serif;
  color: #ffe066;
  text-shadow: 0 0 10px rgba(255, 200, 60, 0.35);
}
.hh-win {
  text-align: center;
  font: 900 1.1rem/1.2 "Rajdhani", Tahoma, sans-serif;
  letter-spacing: 0.08em;
  color: #ffd76a;
  margin: 0 0 14px;
}
.hh-packs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 0 10px;
  flex-wrap: wrap;
}
.hh-packs.hidden {
  display: none;
}
.hh-pack {
  border: 1px solid rgba(180, 120, 255, 0.45);
  background: rgba(40, 20, 70, 0.65);
  color: #e8d7ff;
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  font: 800 0.78rem/1.1 "Rajdhani", Tahoma, sans-serif;
  letter-spacing: 0.08em;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 110px;
}
.hh-pack span {
  font-size: 0.95rem;
  color: #7dffb0;
}
.hh-pack.is-active {
  border-color: #b57cff;
  background: linear-gradient(180deg, rgba(120, 60, 200, 0.55), rgba(50, 20, 90, 0.75));
  box-shadow: 0 0 14px rgba(160, 80, 255, 0.35);
  color: #fff;
}
.hh-buy-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 4px;
}
.hh-buy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex: 1 1 auto;
  max-width: 320px;
  padding: 14px 18px;
  border: 1px solid #6dffb0;
  border-radius: 999px;
  cursor: pointer;
  font: 900 1.35rem/1 "Rajdhani", Tahoma, sans-serif;
  letter-spacing: 0.04em;
  color: #fff;
  background: linear-gradient(180deg, #7dffb0, #1fbf6a 55%, #0e7a42);
  box-shadow: 0 0 22px rgba(60, 220, 140, 0.3);
}
.hh-buy:hover {
  filter: brightness(1.08);
}
.hh-buy:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.hh-list {
  font-size: 1.05rem;
  color: #7a1a1a;
  text-decoration: line-through;
  opacity: 0.95;
  font-weight: 800;
}
.hh-now {
  font-size: 1.45rem;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.hh-ap {
  position: relative;
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}
.hh-ap.hidden {
  display: none;
}
.hh-ap-star {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
  line-height: 1;
  color: #ffd24a;
  text-shadow:
    0 0 8px rgba(255, 200, 40, 0.55),
    0 2px 0 #b8860b;
}
.hh-ap-num {
  position: relative;
  z-index: 1;
  font: 900 0.95rem/1 "Rajdhani", Tahoma, sans-serif;
  color: #3a2200;
  margin-top: 2px;
}
.hh-bonus {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 0;
  color: #5eb8ff;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}
.hh-bonus.hidden {
  display: none;
}
.hh-bonus-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.hh-bonus-text {
  color: #5eb8ff;
}
.hh-pay {
  margin-top: 14px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(120, 200, 255, 0.35);
  background: rgba(10, 30, 50, 0.55);
  display: none;
}
.hh-pay.show {
  display: block;
}
.hh-pay p {
  margin: 0 0 8px;
  font-size: 0.88rem;
  color: #c8dff5;
}
.hh-pay a {
  color: #7ec8ff;
  font-weight: 800;
  word-break: break-all;
}
.hh-auth {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.85rem;
  color: #ffe08a;
  background: rgba(0, 0, 0, 0.35);
  padding: 8px 10px;
  border-radius: 6px;
  user-select: all;
}
.hh-msg {
  margin-top: 10px;
  text-align: center;
  font-size: 0.85rem;
  color: #9ad8ff;
  min-height: 1.2em;
}
.hh-msg.is-error {
  color: #ff8a8a;
}

@media (max-width: 560px) {
  .hh-rewards {
    grid-template-columns: 1fr;
  }
  #game #hh-hud-btn {
    right: 320px;
    width: 48px;
    height: 48px;
  }
}