/* ==========================================================
   REWARDS PAGE (loaded after style.css and leaderboard.css)
   Same look as the leaderboard: a diamond card with the code,
   one card per perk with a drawn icon, then the tier ladder.
   ========================================================== */
/* ---------- Title (same block as the home page's Rewards section) ----------
   KLEO × Stake, "Rewards" in solid white Anton on a crystal-blue edge, one line on what you get,
   a sapphire Join now and a copyable code; a crown and diamonds float round it at different depths. */
.rwh { position: relative; isolation: isolate; padding-top: 120px; padding-bottom: 10px; text-align: center; }
.rwh .brand-x { margin: 0 0 14px; }   /* the KLEO × Stake row itself is in leaderboard.css */
.rwh-title {
  margin: 0;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(56px, 9vw, 96px);
  line-height: 1.02;
  letter-spacing: 0.005em;
  color: #f2fbff;
  text-shadow: 0 3px 0 #1a5fc0, 0 6px 14px rgba(0, 0, 0, 0.55);
}
.rwh-text { max-width: 520px; margin: 18px auto 0; font-size: 16px; line-height: 1.65; color: rgba(234, 246, 255, 0.75); text-wrap: pretty; }
.rwh-gold { color: var(--gold); }
.rwh-gold [data-code-name] { text-transform: none; }
.rwh-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; margin-top: 28px; }
/* sapphire primary button (matches the home page) */
.rwh-primary {
  min-width: 230px;
  min-height: 54px;
  border-radius: 999px;
  font-size: 15px;
  background: linear-gradient(180deg, #4d8dff 0%, #2563eb 50%, #1a47c2 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -2px 0 rgba(8, 25, 90, 0.6), 0 10px 22px -10px rgba(30, 80, 220, 0.55);
}
.rwh-primary:hover { background: linear-gradient(180deg, #6aa1ff 0%, #3474f2 50%, #1f52d1 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -2px 0 rgba(8, 25, 90, 0.6), 0 14px 28px -10px rgba(30, 80, 220, 0.55); }
.rwh-primary:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.rwh-codebtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 12px 24px;
  border: 0;
  border-radius: 999px;
  background: rgba(6, 13, 26, 0.6);
  box-shadow: inset 0 0 0 1.5px rgba(234, 246, 255, 0.3);
  color: rgba(234, 246, 255, 0.6);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: box-shadow 0.2s ease, color 0.2s ease;
}
.rwh-codebtn b { color: #fff; text-transform: capitalize; }
.rwh-codebtn:hover { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(234, 246, 255, 0.8); }
.rwh-codebtn:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
/* the crown and diamonds floating round the title */
.rwh-float { position: absolute; z-index: -1; height: auto; pointer-events: none; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.6)); animation: rwh-float 7s ease-in-out infinite; }
.rwh-float.f1 { width: 120px; left: 6%; top: 130px; rotate: -16deg; animation-delay: -1s; }
.rwh-float.f2 { width: 70px; left: 22%; top: 96px; opacity: 0.55; filter: blur(1.5px); animation-delay: -3s; }
.rwh-float.f3 { width: 150px; right: 4%; top: 280px; animation-delay: -2s; }
.rwh-float.f4 { width: 64px; right: 20%; top: 110px; opacity: 0.6; filter: blur(1px); animation-delay: -4.5s; }
.rwh-float.f5 { width: 96px; left: 12%; top: 330px; animation-delay: -5.5s; }
@keyframes rwh-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
/* the title block eases in, one part after another */
.rwh > :not(.rwh-float) { animation: lb-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.rwh > .rwh-title { animation-delay: 0.08s; }
.rwh > .rwh-text { animation-delay: 0.16s; }
.rwh > .rwh-actions { animation-delay: 0.24s; }
html.arrive .rwh > :not(.rwh-float) { animation: none; }
/* ---------- Perk cards ---------- */
.rw-section { padding-top: 52px; }
.rw-perks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.rw-perk {
  --c: 76, 201, 255;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px 18px 18px;
  border-radius: 18px;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(var(--c), 0.15), transparent 70%),
    var(--lb-card);
  box-shadow: inset 0 0 0 1px rgba(var(--c), 0.35), 0 20px 40px -24px rgba(0, 0, 0, 0.9);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.rw-perk:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(var(--c), 0.7), 0 24px 44px -22px rgba(var(--c), 0.45); }
.rw-perk[data-icon="crown"] { --c: 245, 197, 66; }
.rw-perk[data-icon="gift"] { --c: 176, 140, 255; }
.rw-perk[data-icon="stars"] { --c: 201, 209, 223; }

.rw-perk-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.rw-perk-icon {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 40%, rgba(var(--c), 0.22), rgba(6, 13, 26, 0.85) 70%);
  box-shadow: inset 0 0 0 1px rgba(var(--c), 0.45), 0 0 26px -8px rgba(var(--c), 0.8);
}
.rw-perk-icon > * { width: 58px; height: auto; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 10px rgba(var(--c), 0.5)); }
.rw-perk-icon img { width: 54px; }
/* the leaderboard crown, sat in its tile instead of on an avatar */
.rw-perk-icon .lb-crown { position: static; transform: none; overflow: visible; margin-top: 6px; }
/* three tier stars: bronze and silver behind, gold in front */
.rw-perk-icon .rw-stars { position: relative; display: block; width: 60px; height: 50px; filter: none; }
.rw-stars svg { position: absolute; width: 30px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.55)); }
.rw-stars svg:nth-child(1) { left: 0; top: 14px; rotate: -12deg; }
.rw-stars svg:nth-child(2) { right: 0; top: 14px; rotate: 12deg; }
.rw-stars svg:nth-child(3) { left: 50%; top: 0; width: 36px; translate: -50% 0; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 8px rgba(245, 197, 66, 0.6)); }

/* ---------- Little icon effects ---------- */
/* twinkles: two tiny four-point stars that fade in and out on the tile (the crown has its own sparks) */
.rw-perk-icon { position: relative; transition: box-shadow 0.3s ease; }
.rw-perk:not([data-icon="crown"]) .rw-perk-icon::before,
.rw-perk:not([data-icon="crown"]) .rw-perk-icon::after {
  content: "";
  position: absolute;
  top: 9px;
  right: 9px;
  width: 10px;
  height: 10px;
  background: #fff;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  opacity: 0;
  pointer-events: none;
  animation: rw-twinkle 3.2s ease-in-out infinite;
}
.rw-perk:not([data-icon="crown"]) .rw-perk-icon::after { top: auto; right: auto; bottom: 11px; left: 9px; width: 7px; height: 7px; animation-delay: 1.6s; }
@keyframes rw-twinkle { 0%, 100% { opacity: 0; scale: 0.3; } 45%, 55% { opacity: 1; scale: 1; } }
.rw-perk:hover .rw-perk-icon { box-shadow: inset 0 0 0 1px rgba(var(--c), 0.7), 0 0 34px -6px rgba(var(--c), 0.95); }

/* diamond: floats and catches the light */
.rw-perk[data-icon="gem"] .rw-perk-icon img { animation: rw-gem 4.2s ease-in-out infinite; }
@keyframes rw-gem {
  0%, 100% { translate: 0 2px; rotate: -4deg; }
  50% { translate: 0 -3px; rotate: 4deg; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 14px rgba(var(--c), 0.9)) brightness(1.15); }
}

/* stars: shine one after another; on hover they fan out */
.rw-stars svg { animation: rw-star 3.6s ease-in-out infinite; transition: rotate 0.35s ease, translate 0.35s ease, scale 0.35s ease; }
.rw-stars svg:nth-child(2) { animation-delay: 0.6s; }
.rw-stars svg:nth-child(3) { animation-delay: 1.2s; }
@keyframes rw-star { 0%, 30%, 100% { scale: 1; } 15% { scale: 1.12; } }
.rw-perk:hover .rw-stars svg:nth-child(1) { rotate: -24deg; translate: -4px 1px; }
.rw-perk:hover .rw-stars svg:nth-child(2) { rotate: 24deg; translate: 4px 1px; }
.rw-perk:hover .rw-stars svg:nth-child(3) { translate: -50% -3px; }

/* gift: the lid lifts on hover */
.gift-lid { transform-origin: 10px 34px; transition: transform 0.35s ease; }
.rw-perk:hover .gift-lid { transform: translate(1px, -6px) rotate(-8deg); }
.rw-perk:hover .lb-glint { animation: lb-glint 1.6s cubic-bezier(0.5, 0, 0.3, 1) infinite; }

.rw-perk-tag {
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(var(--c), 0.12);
  box-shadow: inset 0 0 0 1px rgba(var(--c), 0.4);
  color: rgb(var(--c));
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.rw-perk h3 { margin: 0 0 6px; font-size: 20px; font-weight: 800; color: #fff; }
.rw-perk p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--lb-soft); }
.rw-perk p strong { color: #fff; font-weight: 800; text-shadow: 0 0 14px rgba(var(--c), 0.6); }
.rw-perk-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 18px;
  color: rgb(var(--c));
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.rw-perk-link span {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(var(--c), 0.16);
  font-size: 14px;
  line-height: 1;
  transition: transform 0.2s ease;
}
.rw-perk-link:hover span { transform: translateX(3px); }
.rw-perk-link:focus-visible { outline: 2px solid rgb(var(--c)); outline-offset: 4px; border-radius: 6px; }

/* ---------- Reward tiers ---------- */
#tiers { scroll-margin-top: 70px; }
#tiers .lb-h2 { margin-bottom: 6px; }
.rw-sub { margin: 0 0 18px; font-size: 15px; color: var(--lb-soft); }
.rw-sub strong { color: var(--brand); }
/* A ladder: one row per tier on a rail that runs bronze, silver, gold, crystal, then violet. */
.rw-tiers { position: relative; display: grid; gap: 10px; margin: 0; padding: 0 0 0 46px; list-style: none; }
.rw-tiers::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 28px;
  bottom: 28px;
  width: 3px;
  border-radius: 3px;
  /* bronze → silver → gold → platinum (6 rows) → diamond (5 rows) → obsidian, matching the 15 tiers */
  background: linear-gradient(180deg, #d58a52 0%, #c9d1df 7%, #f5c542 14%, #6fe0ee 22%, #6fe0ee 58%, #c8e8ff 65%, #c8e8ff 92%, #b08cff 100%);
  box-shadow: 0 0 12px rgba(76, 201, 255, 0.5);
}
.rw-tier {
  --c: 76, 201, 255;
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  padding: 10px 18px 10px 12px;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(var(--c), 0.12), transparent 45%), rgba(6, 13, 26, 0.72);
  box-shadow: inset 0 0 0 1px rgba(var(--c), 0.25);
  transition: box-shadow 0.2s ease;
}
.rw-tier:hover { box-shadow: inset 0 0 0 1px rgba(var(--c), 0.65), 0 0 22px -10px rgba(var(--c), 0.7); }
/* the step marker on the rail */
.rw-tier::before {
  content: "";
  position: absolute;
  left: -31px;
  top: 50%;
  width: 14px;
  height: 14px;
  translate: 0 -50%;
  rotate: 45deg;
  border-radius: 3px;
  background: rgb(var(--c));
  box-shadow: 0 0 0 3px #071226, 0 0 12px rgba(var(--c), 0.9);
}
.rw-tier-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: radial-gradient(circle at 50% 40%, rgba(var(--c), 0.2), rgba(6, 13, 26, 0.85) 72%);
  box-shadow: inset 0 0 0 1px rgba(var(--c), 0.4);
}
.rw-tier-icon > * { width: 38px; height: auto; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 8px rgba(var(--c), 0.45)); }
.rw-tier-icon img { width: 36px; }
.rw-tier-icon { position: relative; }
/* Platinum I / II / III */
.rw-tier-lvl {
  position: absolute;
  left: 50%;
  bottom: -7px;
  translate: -50% 0;
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 6px;
  background: linear-gradient(180deg, #effdff, rgb(var(--c)));
  box-shadow: 0 0 0 2px #071226, 0 0 10px rgba(var(--c), 0.6);
  color: #06303d;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}
.rw-tier-n { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--c)); }
.rw-tier h3 { margin: 0; font-size: 18px; font-weight: 800; color: #fff; }
.rw-tier-need { text-align: right; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lb-soft); }
.rw-tier-need b { display: block; font-size: 17px; letter-spacing: 0; color: #fff; font-variant-numeric: tabular-nums; }
.rw-tier .lb-prize { margin: 0; min-width: 92px; justify-content: center; font-size: 16px; }
.rw-tier-note { margin: 14px 0 0; font-size: 13px; color: var(--lb-soft); }
/* ---------- Tier calculator (built on the leaderboard's .lb-calc card) ---------- */
/* crystal instead of the leaderboard calculator's gold; overflow visible so the tier dropdown can hang below */
.rw-calc {
  margin-top: 18px;
  overflow: visible;
  background: radial-gradient(60% 120% at 100% 0%, rgba(76, 201, 255, 0.1), transparent 60%), var(--lb-card);
  box-shadow: inset 0 0 0 1px rgba(76, 201, 255, 0.3);
}
.rw-calc-head { padding: 16px; cursor: pointer; }
.rw-calc-head:hover .rw-calc-toggle { background: rgba(76, 201, 255, 0.12); box-shadow: inset 0 0 0 1px var(--brand); }
.rw-calc-toggle {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(6, 13, 26, 0.85);
  box-shadow: inset 0 0 0 1px rgba(76, 201, 255, 0.45);
  color: var(--brand);
  cursor: pointer;
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}
.rw-calc-toggle svg { transition: transform 0.25s ease; }
.rw-calc-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.rw-calc-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.rw-calc-body { padding: 4px 16px 18px; border-top-color: rgba(76, 201, 255, 0.16); }
.rw-calc-tools { display: flex; justify-content: flex-end; margin-top: 14px; }
.rw-how-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 9px 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(6, 13, 26, 0.85);
  box-shadow: inset 0 0 0 1px rgba(76, 201, 255, 0.4);
  color: var(--brand);
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: box-shadow 0.18s ease, background-color 0.18s ease;
}
.rw-how-btn:hover, .rw-how-btn[aria-expanded="true"] { background: rgba(76, 201, 255, 0.1); box-shadow: inset 0 0 0 1px var(--brand); }
.rw-how-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.rw-how {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(4, 9, 19, 0.6);
  box-shadow: inset 0 0 0 1px var(--lb-line);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--lb-soft);
}
.rw-how strong { color: #fff; }

.rw-calc-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.rw-calc-field { display: block; }
.rw-calc-lbl { display: block; margin-bottom: 7px; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lb-soft); }
.rw-calc-field .lb-field { min-height: 50px; box-shadow: inset 0 0 0 1px rgba(76, 201, 255, 0.22); color: var(--brand); }
.rw-calc-field .lb-field:focus-within { box-shadow: inset 0 0 0 1.5px rgba(76, 201, 255, 0.7), 0 0 18px -8px rgba(76, 201, 255, 0.8); }
/* VIP tier dropdown: gem, name, the wager the level starts at */
.rw-gem { display: grid; place-items: center; flex: none; width: 22px; height: 22px; }
.rw-gem > svg { width: 22px; height: 22px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)); }
.rw-dd { position: relative; }
.rw-dd-trigger {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border: 0;
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.rw-dd-trigger:focus-visible, .rw-dd-trigger[aria-expanded="true"] { outline: none; box-shadow: inset 0 0 0 1.5px rgba(76, 201, 255, 0.7), 0 0 18px -8px rgba(76, 201, 255, 0.8); }
.rw-dd-name { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rw-dd-at { flex: none; font-size: 13px; font-weight: 600; color: var(--lb-soft); font-variant-numeric: tabular-nums; }
.rw-dd-chev { flex: none; color: var(--brand); transition: transform 0.2s ease; }
.rw-dd-trigger[aria-expanded="true"] .rw-dd-chev { transform: rotate(180deg); }
.rw-dd-list {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  max-height: 330px;
  overflow-y: auto;
  padding: 6px;
  border-radius: 14px;
  background: #0a1426;
  box-shadow: inset 0 0 0 1px rgba(76, 201, 255, 0.28), 0 24px 50px -12px rgba(0, 0, 0, 0.85);
  scrollbar-width: thin;
  scrollbar-color: rgba(76, 201, 255, 0.35) transparent;
}
.rw-dd-list:not([hidden]) { animation: lb-open 0.18s ease; }
.rw-dd-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.rw-dd-opt b { flex: 1; font-size: 15px; font-weight: 700; }
.rw-dd-opt:hover, .rw-dd-opt:focus-visible { outline: none; background: rgba(76, 201, 255, 0.08); }
.rw-dd-opt[aria-selected="true"] { background: rgba(76, 201, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(76, 201, 255, 0.35); }
.rw-dd-opt[aria-selected="true"] .rw-dd-at { color: var(--brand); }

.rw-calc-prog { margin-top: 20px; }
.rw-calc-prog-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rw-calc-prog-top b { font-size: 15px; font-weight: 800; color: #fff; }
.rw-calc-prog-top span { font-size: 15px; font-weight: 800; color: var(--lb-gold); font-variant-numeric: tabular-nums; }
.rw-calc-prog-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--lb-soft); }
.rw-range {
  --p: 0%;
  display: block;
  width: 100%;
  height: 24px;
  margin: 8px 0 2px;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.rw-range:disabled { cursor: default; }
.rw-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--brand-deep), var(--brand)) 0 0 / var(--p) 100% no-repeat, rgba(234, 246, 255, 0.12);
}
.rw-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px var(--brand), 0 0 14px rgba(76, 201, 255, 0.9);
}
.rw-range::-moz-range-track { height: 6px; border-radius: 6px; background: rgba(234, 246, 255, 0.12); }
.rw-range::-moz-range-progress { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--brand-deep), var(--brand)); }
.rw-range::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--brand), 0 0 14px rgba(76, 201, 255, 0.9); }
.rw-range:focus-visible { outline: none; }
.rw-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--brand), 0 0 0 7px rgba(76, 201, 255, 0.35); }

/* tinted to the selected VIP tier (--tc is set from app.js) */
.rw-calc-left {
  --tc: 245, 197, 66;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding: 16px 20px;
  border-radius: 14px;
  background: radial-gradient(60% 160% at 100% 50%, rgba(var(--tc), 0.15), transparent 70%), rgba(4, 9, 19, 0.6);
  box-shadow: inset 3px 0 0 rgb(var(--tc)), inset 0 0 0 1px rgba(var(--tc), 0.32);
  transition: box-shadow 0.25s ease, background 0.25s ease;
}
.rw-calc-left span { display: block; font-size: 15px; font-weight: 700; color: #fff; }
.rw-calc-left small { display: block; margin-top: 2px; font-size: 13px; color: var(--lb-soft); }
.rw-calc-left strong {
  font-size: clamp(30px, 4.4vw, 40px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  color: rgb(var(--tc));
  text-shadow: 0 0 22px rgba(var(--tc), 0.4);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: color 0.25s ease;
}
.rw-edges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.rw-edges:empty { display: none; }
.rw-edge {
  padding: 12px 14px;
  border-radius: 12px;
  background: radial-gradient(100% 80% at 0% 0%, rgba(var(--c), 0.1), transparent 70%), rgba(4, 9, 19, 0.6);
  box-shadow: inset 0 0 0 1px rgba(var(--c), 0.4);
}
.rw-edge span { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lb-soft); }
.rw-edge strong { display: block; margin: 4px 0 2px; font-size: 24px; font-weight: 800; color: rgb(var(--c)); font-variant-numeric: tabular-nums; }
.rw-edge small { font-size: 12.5px; color: var(--lb-soft); }


/* ---------- Entrances ---------- */
.rw-perk { animation: lb-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.rw-perk:nth-child(1) { animation-delay: 0.4s; }
.rw-perk:nth-child(2) { animation-delay: 0.48s; }
.rw-perk:nth-child(3) { animation-delay: 0.56s; }
.rw-perk:nth-child(4) { animation-delay: 0.64s; }
@media (prefers-reduced-motion: reduce) {
  .rwh > *, .rwh-float, .rw-perk, .rw-perk:hover .lb-glint, .rw-perk-icon img, .rw-stars svg,
  .rw-perk-icon::before, .rw-perk-icon::after { animation: none; }
  .gift-lid, .rw-stars svg { transition: none; }
  .rw-perk:hover, .rw-perk-link:hover span { transform: none; }
}

/* ---------- Narrower screens ---------- */
@media (max-width: 960px) {
  .rw-perks { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .rwh { padding-top: 96px; }
  .rwh-actions { flex-direction: column; align-items: stretch; }
  .rwh-codebtn { justify-content: center; }
  .rwh-float.f1 { width: 58px; left: 1%; top: 172px; }
  .rwh-float.f3 { width: 64px; right: 1%; top: 168px; }
  .rwh-float.f2, .rwh-float.f4, .rwh-float.f5 { display: none; }
  .rw-perks { grid-template-columns: 1fr; }
  .rw-tiers { padding-left: 34px; }
  .rw-tiers::before { left: 14px; }
  .rw-tier { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; padding: 10px 12px 10px 10px; }
  .rw-tier::before { left: -26px; width: 11px; height: 11px; }
  .rw-tier-icon { grid-row: 1 / 3; width: 46px; height: 46px; }
  .rw-tier-icon > * { width: 32px; }
  .rw-tier-need { grid-column: 2; grid-row: 2; text-align: left; margin-top: -8px; }
  .rw-tier-need b { display: inline; font-size: 14px; margin-left: 6px; }
  .rw-tier .lb-prize { grid-column: 3; grid-row: 1 / 3; min-width: 0; }
  /* keep the arrow beside the title on phones */
  .rw-calc .lb-calc-head { flex-wrap: nowrap; align-items: flex-start; }
  .rw-calc .lb-calc-head > div { flex-basis: auto; }
  .rw-calc-inputs { grid-template-columns: 1fr; }
  .rw-calc-left { padding: 14px 16px; }
  .rw-calc-left strong { font-size: 26px; }
  .rw-edges { grid-template-columns: 1fr; }
  .rw-edge { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; }
  .rw-edge strong { grid-column: 2; grid-row: 1 / 3; margin: 0; font-size: 20px; }
}