/* =============================================================
   HighlandCraft — main.css
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --sky: #C8E8F5;
  --sky-deep: #A0D2EE;
  --sun: #F9C74F;
  --sun-warm: #F4A226;
  --meadow: #7EC845;
  --meadow-dark: #5A9E2F;
  --meadow-deep: #3D7A1A;
  --parchment: #FFF8EC;
  --parchment-warm: #FFF0D0;
  --parchment-mid: #F5E4C0;
  --parchment-deep: #E8D09A;
  --ink: #3D2B1F;
  --ink-mid: #6B4C38;
  --ink-light: #9B7560;
  --rose: #F07B6A;
  --rose-light: #F9A89B;
  --lilac: #B388FF;
  --teal: #4DB6AC;
  --border-whimsy: 2.5px solid var(--ink);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Nunito', sans-serif;
  background: var(--parchment);
  color: var(--ink);
  overflow-x: hidden;
}

/* ── Fireflies ─────────────────────────────────────────── */
.firefly {
  position: fixed;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 8px 3px rgba(249,199,79,0.7);
  pointer-events: none;
  z-index: 0;
  animation: fireflyFloat linear infinite;
}

@keyframes fireflyFloat {
  0%   { transform: translate(0,0) scale(1); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translate(var(--dx), var(--dy)) scale(1.3); opacity: 0.8; }
  90%  { opacity: 1; }
  100% { transform: translate(calc(var(--dx)*2), calc(var(--dy)*1.5)) scale(0.8); opacity: 0; }
}

/* ── Nav ───────────────────────────────────────────────── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2.5rem;
  height: 66px;
  background: var(--parchment-warm);
  border-bottom: 3px solid var(--ink);
  box-shadow: 0 4px 0 rgba(61,43,31,0.08);
}

.nav-logo {
  font-family: 'Fredoka One', cursive;
  font-size: 1.6rem;
  color: var(--ink);
  letter-spacing: 1px;
  text-decoration: none;
}

.nav-logo span { color: var(--sun-warm); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
}

.nav-links a {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--ink-mid);
  text-decoration: none;
  transition: color 0.2s;
}

.nav-links a:hover { color: var(--sun-warm); }

.nav-store {
  background: var(--sun-warm) !important;
  color: var(--ink) !important;
  padding: 8px 20px;
  border-radius: 50px;
  border: var(--border-whimsy) !important;
  font-weight: 800 !important;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.2s, box-shadow 0.2s !important;
}

.nav-store:hover {
  transform: translate(-2px,-2px) !important;
  box-shadow: 5px 5px 0 var(--ink) !important;
}

.nav-hamburger {
  display: none;
  background: none;
  border: var(--border-whimsy);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--ink);
}

/* ── Hero / Sky ────────────────────────────────────────── */
.hero-sky {
  margin-top: 66px;
  background: linear-gradient(180deg, var(--sky-deep) 0%, var(--sky) 60%, #D4EEC8 100%);
  padding: 4rem 2rem 0;
  position: relative;
  overflow: hidden;
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cloud-wrap { position: absolute; inset: 0; pointer-events: none; }

.cloud {
  position: absolute;
  background: white;
  border-radius: 50px;
  opacity: 0.9;
}
.cloud::before, .cloud::after {
  content: '';
  position: absolute;
  background: white;
  border-radius: 50%;
}

.c1 { width:120px;height:40px;top:12%;left:5%;animation:cloudDrift 28s linear infinite; }
.c1::before { width:60px;height:60px;top:-30px;left:15px; }
.c1::after  { width:40px;height:40px;top:-18px;left:55px; }

.c2 { width:180px;height:55px;top:22%;right:8%;animation:cloudDrift 40s linear infinite reverse; }
.c2::before { width:80px;height:80px;top:-42px;left:25px; }
.c2::after  { width:60px;height:60px;top:-30px;left:90px; }

.c3 { width:90px;height:30px;top:8%;left:40%;animation:cloudDrift 34s linear infinite;animation-delay:-12s; }
.c3::before { width:50px;height:50px;top:-25px;left:10px; }
.c3::after  { width:35px;height:35px;top:-15px;left:45px; }

.c4 { width:140px;height:45px;top:35%;left:60%;animation:cloudDrift 50s linear infinite reverse;animation-delay:-8s; }
.c4::before { width:70px;height:70px;top:-38px;left:20px; }
.c4::after  { width:45px;height:45px;top:-22px;left:75px; }

@keyframes cloudDrift {
  from { transform: translateX(-20px); }
  to   { transform: translateX(calc(100vw + 200px)); }
}

.birds { position:absolute;top:18%;left:20%;animation:birdFly 22s linear infinite; }
.bird  { display:inline-block;border-top:3px solid var(--ink);width:14px;border-radius:50% 50% 0 0;transform:rotate(-10deg);margin:0 3px; }
.bird:nth-child(2) { transform:rotate(-10deg) translateY(5px);width:10px; }
.bird:nth-child(3) { transform:rotate(-10deg) translateY(-3px);width:12px; }

@keyframes birdFly {
  from { transform: translateX(-100px); }
  to   { transform: translateX(calc(100vw + 100px)); }
}

.sun-orb {
  position: absolute;
  top: 8%; right: 12%;
  width: 90px; height: 90px;
  background: radial-gradient(circle at 40% 40%, #FFE66D, var(--sun-warm));
  border-radius: 50%;
  border: 3px solid rgba(61,43,31,0.15);
  box-shadow: 0 0 40px rgba(249,199,79,0.5), 0 0 80px rgba(249,199,79,0.2);
  animation: sunPulse 6s ease-in-out infinite;
}

@keyframes sunPulse {
  0%,100% { box-shadow:0 0 40px rgba(249,199,79,0.5),0 0 80px rgba(249,199,79,0.2); }
  50%     { box-shadow:0 0 55px rgba(249,199,79,0.7),0 0 100px rgba(249,199,79,0.35); }
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-bottom: 3rem;
}

.hero-tag {
  display: inline-block;
  background: var(--sun);
  border: var(--border-whimsy);
  border-radius: 50px;
  padding: 5px 18px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  box-shadow: 3px 3px 0 var(--ink);
}

.hero-title {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(4rem, 13vw, 9rem);
  line-height: 0.95;
  color: var(--ink);
  letter-spacing: 2px;
  margin-bottom: 0.1em;
  text-shadow: 4px 4px 0 rgba(61,43,31,0.12);
  animation: titleBounce 3s ease-in-out infinite;
}

@keyframes titleBounce {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}

.hero-title span { color: var(--sun-warm); }

.hero-sub {
  font-family: 'Pacifico', cursive;
  font-size: clamp(1.1rem, 3.5vw, 2rem);
  color: var(--meadow-dark);
  margin-bottom: 1.25rem;
  letter-spacing: 1px;
}

.hero-desc {
  font-size: 1.1rem;
  color: var(--ink-mid);
  max-width: 500px;
  margin: 0 auto 2.5rem;
  line-height: 1.75;
}

.hero-btns {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.hills { position: relative; width: 100%; margin-top: -2px; line-height: 0; }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.9rem;
  text-decoration: none;
  padding: 12px 28px;
  border-radius: 50px;
  border: var(--border-whimsy);
  cursor: pointer;
  display: inline-block;
  transition: transform 0.15s, box-shadow 0.15s;
}

.btn:hover { transform: translate(-2px,-2px); }

.btn-sun    { background:var(--sun-warm);color:var(--ink);box-shadow:4px 4px 0 var(--ink); }
.btn-sun:hover { box-shadow:6px 6px 0 var(--ink); }
.btn-meadow { background:var(--meadow);color:white;box-shadow:4px 4px 0 var(--ink); }
.btn-meadow:hover { box-shadow:6px 6px 0 var(--ink); }
.btn-rose   { background:var(--rose);color:white;box-shadow:4px 4px 0 var(--ink); }
.btn-rose:hover { box-shadow:6px 6px 0 var(--ink); }
.btn-lilac  { background:var(--lilac);color:white;box-shadow:4px 4px 0 var(--ink); }
.btn-lilac:hover { box-shadow:6px 6px 0 var(--ink); }
.btn-teal   { background:var(--teal);color:white;box-shadow:4px 4px 0 var(--ink); }
.btn-teal:hover { box-shadow:6px 6px 0 var(--ink); }
.btn-outline { background:white;color:var(--ink);box-shadow:4px 4px 0 var(--ink); }
.btn-outline:hover { box-shadow:6px 6px 0 var(--ink); }

/* IP Widget */
.ip-widget {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: white;
  border: var(--border-whimsy);
  border-radius: 50px;
  padding: 8px 8px 8px 20px;
  box-shadow: 4px 4px 0 var(--ink);
}

.ip-label { font-size:0.72rem;font-weight:800;color:var(--ink-light);text-transform:uppercase;letter-spacing:1px; }
.ip-addr  { font-family:'Courier New',monospace;font-size:0.9rem;font-weight:700;color:var(--ink); }
.ip-copy  {
  background: var(--sun);
  border: 2px solid var(--ink);
  border-radius: 50px;
  padding: 5px 14px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s;
}
.ip-copy:hover { background: var(--sun-warm); }

/* ── Status Strip ───────────────────────────────────────── */
.status-strip {
  background: var(--meadow);
  border-top: 3px solid var(--meadow-dark);
  border-bottom: 3px solid var(--meadow-dark);
  padding: 10px 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}

.status-item {
  font-size: 0.8rem;
  font-weight: 800;
  color: white;
  display: flex;
  align-items: center;
  gap: 6px;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
}

.status-item strong { color: var(--sun); }

/* ── Stats ──────────────────────────────────────────────── */
.stats-row {
  background: var(--parchment-warm);
  border-top: 3px solid var(--parchment-deep);
  border-bottom: 3px solid var(--parchment-deep);
  padding: 3rem 2rem;
}

.stats-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 2rem;
}

.stat-block { text-align: center; }

.stat-num {
  font-family: 'Fredoka One', cursive;
  font-size: 3rem;
  color: var(--sun-warm);
  display: block;
  line-height: 1;
  text-shadow: 2px 2px 0 rgba(61,43,31,0.1);
}

.stat-lbl {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--ink-light);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 4px;
  display: block;
}

/* ── Sections ───────────────────────────────────────────── */
.section {
  padding: 5rem 2rem;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.section-kicker {
  display: inline-block;
  background: var(--parchment-deep);
  border: 2px solid var(--ink);
  border-radius: 50px;
  padding: 4px 16px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-bottom: 1rem;
  box-shadow: 2px 2px 0 var(--ink);
}

.section-title {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  color: var(--ink);
  letter-spacing: 1px;
  line-height: 1.05;
  margin-bottom: 0.75rem;
}

.section-title span { color: var(--sun-warm); }

.section-desc {
  font-size: 1.05rem;
  color: var(--ink-mid);
  max-width: 540px;
  line-height: 1.75;
  margin-bottom: 3rem;
}

/* ── Features ───────────────────────────────────────────── */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px,1fr));
  gap: 1.25rem;
}

.feat-card {
  background: white;
  border: var(--border-whimsy);
  border-radius: 20px;
  padding: 1.75rem;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}

.feat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  border-radius: 20px 20px 0 0;
}

.feat-card:nth-child(1)::before { background: var(--rose); }
.feat-card:nth-child(2)::before { background: var(--lilac); }
.feat-card:nth-child(3)::before { background: var(--teal); }
.feat-card:nth-child(4)::before { background: var(--sun-warm); }
.feat-card:nth-child(5)::before { background: var(--meadow); }
.feat-card:nth-child(6)::before { background: var(--rose-light); }

.feat-card:hover {
  transform: translate(-3px,-3px);
  box-shadow: 8px 8px 0 var(--ink);
}

.feat-icon { font-size:2.5rem;display:block;margin-bottom:0.75rem; }
.feat-card h3 { font-family:'Fredoka One',cursive;font-size:1.3rem;color:var(--ink);margin-bottom:0.5rem; }
.feat-card p  { font-size:0.95rem;color:var(--ink-mid);line-height:1.7; }

/* ── Ranks ──────────────────────────────────────────────── */
.ranks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px,1fr));
  gap: 1.25rem;
}

.rank-card {
  background: white;
  border: var(--border-whimsy);
  border-radius: 20px;
  padding: 1.75rem 1.25rem;
  text-align: center;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}

.rank-card:hover {
  transform: translate(-3px,-3px);
  box-shadow: 8px 8px 0 var(--ink);
}

.rank-card.featured { background: linear-gradient(145deg,#FFFDE7,#FFF8C5); }

.rank-ribbon {
  position: absolute;
  top: 14px; right: -22px;
  background: var(--sun-warm);
  color: var(--ink);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 28px;
  transform: rotate(35deg);
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

.rank-icon  { font-size:2.8rem;display:block;margin-bottom:0.75rem; }

.rank-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 50px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: 2px solid currentColor;
  margin-bottom: 0.6rem;
}

.rank-card.free   .rank-badge { color: var(--ink-light); }
.rank-card.scout  .rank-badge { color: var(--teal); }
.rank-card.knight .rank-badge { color: var(--sun-warm); }
.rank-card.lord   .rank-badge { color: var(--rose); }

.rank-name  { font-family:'Fredoka One',cursive;font-size:1.4rem;color:var(--ink);margin-bottom:0.35rem; }
.rank-price { font-family:'Fredoka One',cursive;font-size:2rem;margin-bottom:1rem; }

.rank-card.free   .rank-price { color:var(--ink-light); }
.rank-card.scout  .rank-price { color:var(--teal); }
.rank-card.knight .rank-price { color:var(--sun-warm); }
.rank-card.lord   .rank-price { color:var(--rose); }

.rank-perks { list-style:none;font-size:0.88rem;color:var(--ink-mid);text-align:left;line-height:2; }
.rank-perks li::before { content:'✿ ';color:var(--meadow); }

.eula-note {
  background: var(--parchment-warm);
  border: 2px dashed var(--parchment-deep);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  font-size: 0.88rem;
  color: var(--ink-light);
  margin-bottom: 2rem;
  font-style: italic;
}

/* ── Gallery ────────────────────────────────────────────── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: 200px 200px;
  gap: 12px;
}

.gal-item {
  background: var(--parchment-mid);
  border: var(--border-whimsy);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  position: relative;
  overflow: hidden;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.gal-item:hover {
  transform: translate(-3px,-3px);
  box-shadow: 7px 7px 0 var(--ink);
}

.gal-item.tall { grid-row: span 2; }
.gal-item.wide { grid-column: span 2; }

.gal-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(255,248,236,0.92));
  padding: 1.5rem 0.75rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ink);
}

.gal-item:nth-child(1) { background:linear-gradient(145deg,#D4EEC8,#B8DDA0); }
.gal-item:nth-child(2) { background:linear-gradient(145deg,#C8E8F5,#A0D2EE); }
.gal-item:nth-child(3) { background:linear-gradient(145deg,#F9E8C8,#F5D490); }
.gal-item:nth-child(4) { background:linear-gradient(145deg,#F4D4E4,#EAACCC); }
.gal-item:nth-child(5) { background:linear-gradient(145deg,#D4C8F0,#B8A8E4); }

/* ── Action cards ───────────────────────────────────────── */
.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap: 1.25rem;
}

.action-card {
  background: white;
  border: var(--border-whimsy);
  border-radius: 20px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform 0.2s, box-shadow 0.2s;
}

.action-card:hover {
  transform: translate(-3px,-3px);
  box-shadow: 8px 8px 0 var(--ink);
}

.action-card-top {
  height: 6px;
  margin: -1.75rem -1.75rem 0.75rem;
  border-radius: 20px 20px 0 0;
}

.action-card.store   .action-card-top { background: var(--sun-warm); }
.action-card.vote    .action-card-top { background: var(--teal); }
.action-card.discord .action-card-top { background: var(--lilac); }
.action-card.rules   .action-card-top { background: var(--meadow); }

.action-icon { font-size:2.2rem; }
.action-card h3 { font-family:'Fredoka One',cursive;font-size:1.3rem;color:var(--ink); }
.action-card p  { font-size:0.95rem;color:var(--ink-mid);line-height:1.65;flex:1; }

/* ── Background helpers ─────────────────────────────────── */
.bg-parchment { background: var(--parchment); }
.bg-warm      { background: var(--parchment-warm); }
.bg-sky-tint  { background: #EBF6FA; }

/* ── Wave dividers ──────────────────────────────────────── */
.wave-divider { position:relative;z-index:1;line-height:0;overflow:hidden; }

/* ── Footer ─────────────────────────────────────────────── */
footer {
  background: var(--ink);
  padding: 4rem 2rem 2rem;
  position: relative;
}

footer::before {
  content: '';
  display: block;
  width: 100%;
  height: 16px;
  background: repeating-linear-gradient(
    90deg,
    var(--sun-warm) 0px, var(--sun-warm) 16px,
    var(--meadow) 16px, var(--meadow) 32px,
    var(--teal) 32px, var(--teal) 48px,
    var(--lilac) 48px, var(--lilac) 64px,
    var(--rose) 64px, var(--rose) 80px
  );
  position: absolute;
  top: 0; left: 0; right: 0;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}

.foot-brand h4 { font-family:'Fredoka One',cursive;font-size:1.8rem;color:var(--sun);letter-spacing:1px;margin-bottom:0.75rem; }
.foot-brand p  { font-size:0.95rem;color:rgba(255,248,236,0.65);line-height:1.7;margin-bottom:1rem; }
.foot-ip       { font-family:'Courier New',monospace;font-size:0.8rem;color:var(--sun);background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);padding:6px 14px;border-radius:50px;display:inline-block; }
.foot-col h5   { font-family:'Fredoka One',cursive;font-size:1rem;color:var(--sun-warm);margin-bottom:1rem; }
.foot-col ul   { list-style:none; }
.foot-col li   { margin-bottom:0.55rem; }
.foot-col a    { font-size:0.9rem;color:rgba(255,248,236,0.6);text-decoration:none;transition:color 0.2s; }
.foot-col a:hover { color:var(--sun); }

.footer-bottom {
  max-width: 1100px;
  margin: 0 auto;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: rgba(255,248,236,0.35);
}

/* ── Scroll reveal ──────────────────────────────────────── */
.reveal { opacity:0;transform:translateY(24px);transition:opacity 0.6s ease,transform 0.6s ease; }
.reveal.visible { opacity:1;transform:none; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
  nav { padding: 0 1.25rem; }
  .nav-links { display: none; }
  .nav-links.open { display:flex;flex-direction:column;position:fixed;top:66px;left:0;right:0;background:var(--parchment-warm);border-bottom:3px solid var(--ink);padding:1.5rem 2rem;gap:1rem;z-index:199; }
  .nav-hamburger { display: block; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .gal-item.tall, .gal-item.wide { grid-row:span 1;grid-column:span 1; }
  .footer-bottom { flex-direction:column;gap:0.5rem;text-align:center; }
}

/* ── Platform badges (hero) ─────────────────────────────── */
.hero-platform-badges {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.platform-badge {
  font-size: 0.78rem;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: 50px;
  border: var(--border-whimsy);
  box-shadow: 2px 2px 0 var(--ink);
}

.platform-badge.java    { background: #FFF3CD; color: var(--ink); }
.platform-badge.bedrock { background: #D4EEC8; color: var(--ink); }

/* ── Feature badge (COMING SOON) ────────────────────────── */
.feat-card { position: relative; }

.feat-card--soon { opacity: 0.85; }

.feat-badge {
  position: absolute;
  top: 1rem; right: 1rem;
  background: var(--rose);
  color: white;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 50px;
  border: 2px solid var(--ink);
}

/* ── Two-column rank grid ────────────────────────────────── */
.ranks-grid--two {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  max-width: 760px;
  margin: 0 auto;
}

/* VIP / MVP rank colour overrides */
.rank-card.vip .rank-badge  { color: var(--teal); }
.rank-card.vip .rank-price  { color: var(--teal); }
.rank-card.vip::after       { background: var(--teal); }

.rank-card.mvp .rank-badge  { color: var(--rose); }
.rank-card.mvp .rank-price  { color: var(--rose); }
.rank-card.mvp::after       { background: linear-gradient(90deg, var(--rose), var(--lilac)); }

.rank-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  border-radius: 0 0 20px 20px;
}

.rank-price-note {
  font-size: 0.72rem;
  color: var(--ink-light);
  margin-bottom: 1rem;
  font-style: italic;
}

/* ── Shard packages ─────────────────────────────────────── */
.shards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.shard-card {
  background: white;
  border: var(--border-whimsy);
  border-radius: 20px;
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}

.shard-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 var(--ink);
}

.shard-card.shard-popular { background: linear-gradient(145deg, #F3EEFF, #EAD8FF); }

.shard-ribbon {
  position: absolute;
  top: 14px; right: -22px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 28px;
  transform: rotate(35deg);
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  background: var(--lilac);
  color: white;
}

.shard-gem-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 0.25rem;
}

.shard-gem { font-size: 3rem; display: block; }

.shard-amount {
  position: absolute;
  bottom: -4px; right: -10px;
  font-family: 'Fredoka One', cursive;
  font-size: 1.4rem;
  line-height: 1;
}

.shard-card.shard-teal  .shard-amount { color: var(--teal); }
.shard-card.shard-lilac .shard-amount { color: var(--lilac); }
.shard-card.shard-sun   .shard-amount { color: var(--sun-warm); }

.shard-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-light);
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
}

.shard-name {
  font-family: 'Fredoka One', cursive;
  font-size: 1.2rem;
  color: var(--ink);
  margin-bottom: 0.25rem;
}

.shard-price {
  font-family: 'Fredoka One', cursive;
  font-size: 2rem;
  margin-bottom: 1.25rem;
}

.shard-card.shard-teal  .shard-price { color: var(--teal); }
.shard-card.shard-lilac .shard-price { color: var(--lilac); }
.shard-card.shard-sun   .shard-price { color: var(--sun-warm); }

.shard-btn { font-size: 0.8rem; padding: 9px 22px; }

.shards-note {
  text-align: center;
  font-size: 0.9rem;
  color: var(--ink-light);
  font-style: italic;
}