html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #0b0f14;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

body {
  background-image: url("/bg-iran.png");
  background-size: cover; /* slight zoom, fills page */ /* show full image, no crop */ /* uniform scale, no stretch */
  background-position: center center;
  background-repeat: no-repeat;
}

#overlay {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1200px 700px at 50% 45%, rgba(0,0,0,0.10), rgba(0,0,0,0.55)),
    radial-gradient(900px 500px at 50% 60%, rgba(0,0,0,0.05), rgba(0,0,0,0.35));
  pointer-events: none;
}

canvas#three {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

#ui {
  position: fixed;
  left: 16px;
  bottom: 16px;
  display: grid;
  gap: 10px;
  color: rgba(255,255,255,0.92);
  user-select: none;
  pointer-events: none;
  z-index: 6;
}

.badge {
  width: fit-content;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(6px);
  font-size: 13px;
  letter-spacing: 0.2px;
}

.hint {
  width: fit-content;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(6px);
  font-size: 12px;
  opacity: 0.9;
}

/* Bottom Action Bar */
#actionBar{
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.15);
  z-index: 50;
}

.iconBtn{
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.15s ease;
}
.iconBtn:hover{ transform: translateY(-2px); }

.iconBtn img{
  width: 70%;
  height: 70%;
  object-fit: contain;
  display: block;
}

.caBtn{
  height: 58px;
  min-width: 260px;
  padding: 0 24px;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.15);
  color: white;
  cursor: pointer;
  transition: 0.15s ease;
}
.caBtn:hover{ transform: translateY(-2px); }
.caBtn.copied{
  background: rgba(80,200,120,0.25);
  border-color: rgba(80,200,120,0.4);
}

/* Make X logo larger to match Pump.fun visually */
#xBtn img{
  width: 85%;
  height: 85%;
  object-fit: contain;
}

body.usBackground{
  background-image: url("/bg-us.png");
}


/* Hide any leftover demo overlays */
.overlay, .demoText, .instructions { display: none !important; }


/* Mobile-only button layout (does not affect desktop) */
@media (max-width: 520px){
  #actionBar{
    width: calc(100vw - 24px);
    left: 50%;
    transform: translateX(-50%);
    bottom: 12px;
    padding: 10px 10px;
    gap: 10px;

    /* Keep desktop layout intact; only mobile wraps */
    flex-wrap: wrap;
    border-radius: 22px;
  

/* Force visual order on mobile: X + Pump on top row, CA below */
#xBtn{ order: 1; }
#pumpBtn{ order: 2; }
.caBtn{ order: 3; }
}
/* X + Pump share the first row */
  .iconBtn{
    flex: 1 1 calc(50% - 5px);
    width: auto;
    height: 48px;
    border-radius: 16px;
  }

  .iconBtn img{
    width: 78%;
    height: 78%;
    object-fit: contain;
    display: block;
  }

  /* CA takes full width on second row */
  .caBtn{
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    height: 52px;
    padding: 0 14px;
    font-size: 14px;
    letter-spacing: 0.10em;
    border-radius: 16px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Keep X logo slightly larger to match Pump visually */
  #xBtn img{
    width: 88%;
    height: 88%;
  }
}



/* Mobile-specific portrait backgrounds */
@media (max-width: 520px){
  body{
    background-image: url("/bg-iran-mobile.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }

  body.usBackground{
    background-image: url("/bg-us-mobile.png");
  }
}