/* ================================
   SAVAGE CONFLICTS — STORE STYLES
================================ */

/* Prevent weird horizontal offset on mobile */
html, body {
  overflow-x: hidden;
}

.store-section {
  /* visual styling */
  padding: 4rem 1.2rem;
  background: radial-gradient(circle at top, #2b1e12 0%, #050302 70%);
  color: #e6d3a3;
  font-family: "Cinzel", serif;

  /* layout containment */
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ---- Store Title ---- */
.store-title {
  text-align: center;
  font-size: 3rem;
  color: #f6d27b;
  text-shadow: 0 0 12px rgba(255,200,120,.35);
  margin-bottom: .5rem;
}

.store-note {
  text-align: center;
  opacity: .8;
  margin-bottom: 2.5rem;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

/* ================================
   SUPPORT (DONATE / SUBSCRIBE)
================================ */

.store-support {
  display: flex;
  justify-content: center;
  margin-bottom: 3rem;
}

.image-support {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  margin: 3rem 0 4rem;
  flex-wrap: wrap;
}

.store-support-row {
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

.store-support-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.support-image {
  max-width: 260px;
  cursor: pointer;
  transition: transform .2s ease, filter .2s ease;
  filter: drop-shadow(0 0 14px rgba(255,200,120,.45));
}

.support-image:hover {
  transform: scale(1.08);
  filter:
    drop-shadow(0 0 22px rgba(255,200,120,.85))
    drop-shadow(0 0 35px rgba(255,160,60,.45));
}

.donation-box {
  text-align: center;
  transform: translateY(-40px);
}

#donationAmount {
  width: 220px;
}

#donationNumber {
  width: 100px;
  text-align: center;
}

/* ================================
   RANKS SECTION
================================ */

.ranks-section {
  margin-top: 4rem;
  text-align: center;
}

.ranks-heading {
  text-align: center;
  font-size: 2.5rem;
  color: #f6d27b;
  margin-bottom: .5rem;
  text-shadow: 0 0 12px rgba(255,200,120,.35);
}

.ranks-note {
  text-align: center;
  opacity: .75;
  margin-bottom: 3.5rem;
  font-size: .95rem;
}

/* ---- Grid Layout (DESKTOP) ---- */
.ranks-grid.row-top {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 360px));
  gap: 3.5rem;
  justify-content: center;
  max-width: 1150px;
  margin: 3rem auto 4rem auto;
  width: 100%;
  box-sizing: border-box;
}

.ranks-grid.row-bottom {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* ---- Rank Card ---- */
.rank-card {
  width: 360px;
  max-width: 100%;
  padding: 2.6rem 2.2rem;
  border-radius: 22px;
  text-align: center;
  background: radial-gradient(circle at top, #2a1d12 0%, #060402 80%);
  box-shadow:
    0 0 0 1px rgba(255,200,120,.18),
    0 28px 60px rgba(0,0,0,.9);
  transition: all .25s ease;
  margin: 0 auto;
  box-sizing: border-box;
}

.rank-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 0 0 1px rgba(255,200,120,.45),
    0 38px 85px rgba(0,0,0,.95);
}

/* ---- Rank Title ---- */
.rank-title {
  font-size: 1.9rem;
  margin-bottom: .6rem;
  text-shadow: 0 0 10px rgba(255,200,120,.4);
}

/* ---- Price ---- */
.rank-price {
  font-size: 1.8rem;
  font-weight: bold;
  color: #ffd98a;
  margin-bottom: 1.6rem;
}

/* ---- Perks ---- */
.rank-perks {
  list-style: disc;
  padding-left: 1.2rem;
  margin: 0 auto 2.4rem;
  max-width: 260px;
  text-align: left;
}

.rank-perks li {
  margin: .55rem 0;
  font-size: .95rem;
  opacity: .9;
}

.rank-perks li::marker {
  color: #ffd98a;
}

/* ---- Purchase Button ---- */
.rank-button {
  padding: .75rem 1.8rem;
  border-radius: 999px;
  border: none;
  background: linear-gradient(145deg, #ffd98a, #b8872f);
  color: #241507;
  font-weight: bold;
  letter-spacing: .6px;
  cursor: pointer;
  box-shadow:
    0 4px 14px rgba(0,0,0,.7),
    inset 0 0 0 1px rgba(255,255,255,.25);
  transition: all .2s ease;
}

.rank-button:hover {
  transform: scale(1.07);
}

/* ================================
   RANK COLORS
================================ */

/* Hero */
.hero-rank {
  box-shadow:
    0 0 35px rgba(255,215,0,.55),
    0 0 0 2px rgba(255,215,0,.6);
}

.hero-rank .rank-title {
  color: #ffd700;
}

/* Exile */
.exile-rank {
  box-shadow:
    0 0 35px rgba(255,255,255,.6),
    0 0 0 2px rgba(255,255,255,.5);
}

.exile-rank .rank-title {
  color: #ffffff;
}

/* Emperor */
.emperor-rank {
  box-shadow:
    0 0 35px rgba(120,0,0,.85),
    0 0 0 2px rgba(140,0,0,.9);
}

.emperor-rank .rank-title {
  color: #8b0609;
}

/* ================================
   SAVAGE RANK — FULL RESTORE
================================ */

.savage-rank {
  background: radial-gradient(circle at top, #3b1a00 0%, #080300 80%);
  box-shadow:
    0 0 25px red,
    0 0 45px orange,
    0 0 65px yellow,
    0 0 85px green,
    0 0 105px cyan,
    0 0 125px blue,
    0 0 145px violet;
}

/* Per-letter rainbow title */
.savage-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-size: 2.3rem;
  margin-bottom: .8rem;
}

.savage-title span {
  font-weight: 700;
  line-height: 1;
  animation: savageGlow 2.5s infinite linear;
}

/* Tight brackets */
.bracket-left { margin-right: -2px; }
.bracket-right { margin-left: -2px; }

/* Rainbow letters */
.r-letter { color: #ff4040; }
.a1-letter { color: #ff9f40; }
.v-letter { color: #fff040; }
.a2-letter { color: #40ff7f; }
.g-letter { color: #40bfff; }
.e-letter { color: #b040ff; }

@keyframes savageGlow {
  0% { text-shadow: 0 0 6px rgba(255,255,255,.45); }
  50% { text-shadow: 0 0 16px rgba(255,255,255,.95); }
  100% { text-shadow: 0 0 6px rgba(255,255,255,.45); }
}

/* Savage Button */
.savage-button {
  background: linear-gradient(135deg, #ffcc00, #ff5f00);
  color: black;
  box-shadow:
    0 0 14px rgba(255,140,0,.8),
    inset 0 0 0 2px rgba(255,255,255,.3);
}

/* ================================
   MOBILE
================================ */

@media (max-width: 768px) {

  .store-section {
    padding: 3rem 1rem;
    max-width: 100%;
  }

  /* Stack Donate & Subscribe vertically */
  .store-support-row {
    flex-direction: column;
    gap: 1.6rem;
    align-items: center;
  }

  .support-image {
    max-width: 220px;
  }

  /* Tighten slider under Donate */
  .donation-box {
    transform: translateY(-18px);
  }

  /* Make slider narrower on mobile */
  #donationAmount {
    width: 200px;
  }

  /* Smaller number input */
  #donationNumber {
    width: 90px;
  }

  /* Ranks stack perfectly centered */
  .ranks-grid.row-top {
    grid-template-columns: 1fr;
    gap: 2.2rem;
    max-width: 520px;
    margin: 2.2rem auto 3rem auto;
    padding: 0;
  }

  .rank-card {
    width: 92%;
  }
}