/* ============================================================
   GLOBAL UI POLISH
   ============================================================ */

body {
  font-family: system-ui, sans-serif;
  color: #f3e7d2;
}

button {
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid #7b4f3c;
  background: #3a2a24;
  color: #f3e7d2;
  font-size: 0.8rem;
  cursor: pointer;
}

button:hover {
  background: #4a3328;
}

.dxl-deck-label {
  font-weight: 600;
}


/* ============================================================
   FLOATING LEFT-SIDE BUTTON CLUSTER
   ============================================================ */

#dxl-floating-left-buttons {
  position: fixed;
  top: 120px;
  left: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
}


/* ============================================================
   FLOATING MENU (COLLAPSIBLE)
   ============================================================ */

#dxl-floating-menu {
  position: fixed;
  top: 140px;
  left: 18px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#dxlFloatItems {
  display: none;
  flex-direction: column;
  gap: 12px;
}


/* ============================================================
   FLOATING BUTTONS (UNIFIED FINAL VERSION)
   ============================================================ */

.dxl-float-btn {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #3a2a24;       /* warm analog */
  border: 2px solid #7b4f3c; /* gold-brown hardware edge */
  color: #f3e7d2;            /* parchment gold text */
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
  transition: 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px;              /* prevents text clipping */
}

/* Hover glow */
.dxl-float-btn:hover {
  background: #4a3328;
  box-shadow: 0 0 12px rgba(243, 231, 210, 0.55);
  transform: scale(1.08);
}


/* ============================================================
   FLOATING ICONS
   ============================================================ */

.dxl-float-icon {
  font-size: 1.4rem;
}


/* ============================================================
   SLIDE-IN ANIMATION
   ============================================================ */

.dxl-float-slide-in {
  animation: dxlFloatSlideIn 0.6s ease forwards;
  transform: translateX(-80px);
}

@keyframes dxlFloatSlideIn {
  from { transform: translateX(-80px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}



/* ============================================================
   DONATION PAGE BUTTON
   ============================================================ */

.donate-button {
  display: inline-block;
  padding: 16px 34px;
  background: #7b4f3c;
  color: #f3e7d2;
  font-weight: bold;
  font-size: 1.15rem;
  border-radius: 50px;
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: 0.25s ease;
  border: 2px solid #c9a37a;
  min-width: 260px;
  text-align: center;
}

.donate-button:hover {
  background: #8f5c45;
  box-shadow: 0 0 12px rgba(243, 231, 210, 0.55);
  transform: scale(1.06);
}
#dxl-copyright {
  position: fixed;
  bottom: 6px;
  right: 10px;
  font-size: 10px;
  color: #c8b89a;
  opacity: 0.65;
  pointer-events: none;
  user-select: none;
  font-family: sans-serif;
}
/* Base button */
.dxl-float-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 120px;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: #2d251d;
  color: #e8d8b8;
  border-radius: 6px;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.05em;
  transition: all 0.25s ease;
  box-shadow: inset 0 0 4px rgba(0,0,0,0.6);
}

/* Icons */
.dxl-btn-icon {
  font-size: 13px;
  opacity: 0.85;
}

/* Hover glow */
.dxl-float-btn:hover {
  background: #3a2f24;
  box-shadow:
    0 0 6px rgba(215, 201, 103, 0.4),
    inset 0 0 6px rgba(0,0,0,0.7);
  transform: translateY(-1px);
}

/* Cosmic pulse */
.dxl-float-btn {
  animation: dxlCosmicPulse 4s infinite ease-in-out;
}

@keyframes dxlCosmicPulse {
  0%   { opacity: 0.95; }
  50%  { opacity: 1.0; }
  100% { opacity: 0.95; }
}

/* Divider line */
.dxl-float-divider {
  width: 120px;
  height: 1px;
  background: #4a3e32;
  margin: 10px 0 6px 0;
}

/* Gates header */
.dxl-float-header {
  width: 120px;
  text-align: left;
  font-size: 11px;
  color: #d7c967;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  opacity: 0.85;
}