/* ============================================================
   Dialog (reusable for confirm x10 & confirm spray)
   ============================================================ */
.dialog {
  position: absolute;
  z-index: 110;
}

.dialog-header {
  position: relative;
  width: 871px;
  height: 86px;
}
.dialog-header .dh-bg {
  position: absolute;
  inset: 0;
  width: 871px;
  height: 86px;
}
.dialog-header .dh-title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--font-heading);
  z-index: 2;
}

.dialog-body {
  position: relative;
  width: 871px;
  margin-top: -1px;
}
.dialog-body .db-bg {
  position: absolute;
  inset: 0;
  width: 871px;
  height: 100%;
  object-fit: fill;
}
.dialog-body .db-content {
  position: relative;
  z-index: 2;
  text-align: center;
}

.dialog-buttons {
  display: flex;
  margin-top: -1px;
}

.dialog-btn {
  position: relative;
  width: 436px;
  height: 94px;
  transform: translateY(-40px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dialog-btn img {
  position: absolute;
  left: 50%;
  top: 0px;
  transform: translateX(-50%);
  width: 372px;
  height: 94px;
}
.dialog-btn span {
  position: relative;
  z-index: 2;
  font: var(--font-btn-lg);
}
.dialog-btn:active img {
  filter: brightness(1.15);
}

/* --- Confirm x10 dialog --- */
.confirm-x10-dialog {
  left: 451px;
  top: 227px;
}

.confirm-x10-dialog .db-content {
  padding: 28px 40px 20px;
}
.confirm-x10-dialog .confirm-text {
  font: var(--font-body);
  margin-bottom: 10px;
}
.confirm-x10-dialog .confirm-case {
  font: var(--font-body);
  margin-bottom: 28px;
}
.confirm-x10-dialog .confirm-hint {
  font: var(--font-body-sm);
  color: var(--color-text-hint);
  margin-bottom: 28px;
}
.confirm-x10-dialog .confirm-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  cursor: pointer;
}
.confirm-x10-dialog .confirm-checkbox img {
  width: 33px;
  height: 33px;
}
.confirm-x10-dialog .confirm-checkbox span {
  font: var(--font-label);
  color: var(--color-text-check);
}

/* --- Confirm spray dialog --- */
.confirm-spray-dialog {
  left: 451px;
  top: 298px;
}
.confirm-spray-dialog .db-content {
  padding: 28px 40px 20px;
}
.confirm-spray-dialog .spray-question {
  font: var(--font-body);
  margin-bottom: 14px;
}
.confirm-spray-dialog .spray-amount {
  font: var(--font-body);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.confirm-spray-dialog .spray-amount .dust-mini {
  width: 24px;
  height: 24px;
}

/* ============================================================
   Dust bar (compact, used in reward screens)
   ============================================================ */
.dust-bar-compact {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dust-bar-compact .dust-bar-bg { width: 349px; height: 28px; }
.dust-bar-compact .dust-text {
  position: absolute;
  left: 120px;
  font: var(--font-dust);
}