/*
 * Homepage reference V2 — visual polish pass 2.1
 * Authority: user-supplied 864×1536 reference, normalized to 432×768.
 * This file changes presentation only. API calls, points, inventory, draws,
 * invitation codes, navigation and all business behavior remain in home.js.
 */

#yr-homepage-reference-v2 {
  --page: #f4f1e7;
  --paper: #fbf8ef;
  --paper-strong: #fffdf7;
  --pine: #3f705f;
  --pine-deep: #1e4a3e;
  --muted: #747d75;
  --sage: #9bb291;
  --gold: #b7a169;
  --line: rgba(112, 122, 100, .13);
  --gold-line: rgba(181, 156, 103, .30);
  background: #ecefe8;
}

.hr2-app {
  background:
    linear-gradient(180deg, rgba(255,255,255,.32), rgba(248,246,237,.20)),
    url('/homepage-v280-production/assets/paper-v21.svg?v=2.8.0-ded9e4f9e1c3e6dccde450ab9b15570d7946bff4') center / 190px 190px repeat,
    var(--page);
  box-shadow: 0 0 52px rgba(44, 64, 52, .09);
}

.hr2-app::before {
  opacity: 1;
  background:
    radial-gradient(ellipse at 11% 25%, rgba(216,225,211,.42), transparent 31%),
    radial-gradient(ellipse at 91% 14%, rgba(207,220,211,.38), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.53), rgba(255,255,255,.04) 31%, transparent 58%);
}

.hr2-app::after {
  content: "";
  position: absolute;
  top: calc(var(--page-w) * -.105);
  right: calc(var(--page-w) * -.265);
  z-index: 1;
  width: calc(var(--page-w) * 1.08);
  height: calc(var(--page-w) * .47);
  pointer-events: none;
  background: url('/homepage-v280-production/assets/mountains-v21.svg?v=2.8.0-ded9e4f9e1c3e6dccde450ab9b15570d7946bff4') center / contain no-repeat;
  opacity: .52;
}

.hr2-page-wash {
  left: -10%;
  right: -10%;
  height: calc(var(--page-w) * .42);
  background:
    radial-gradient(ellipse at 48% 31%, rgba(255,255,255,.97), rgba(255,255,255,.14) 56%, transparent 76%);
}

.hr2-mountains,
.hr2-hero-mountains,
.hr2-hero-foliage,
.hr2-hero-swirls,
.hr2-store > img {
  display: none !important;
}

.hr2-topbar {
  padding-left: calc(var(--page-w) * .0787);
  padding-right: calc(var(--page-w) * .066);
  border-bottom-color: rgba(88, 107, 91, .075);
}

.hr2-brand {
  gap: calc(var(--page-w) * .0255);
}

.hr2-topbar .hr2-round-mark {
  width: calc(var(--page-w) * .058);
  height: calc(var(--page-w) * .058);
  font-size: clamp(14px, 3.7vw, 16px);
  box-shadow: 0 4px 12px rgba(55, 79, 60, .11), inset 0 1px rgba(255,255,255,.72);
}

.hr2-brand b {
  max-width: calc(var(--page-w) * .352);
  color: #263f36;
  font-size: clamp(11.8px, 3.03vw, 13.1px);
  font-weight: 500;
  letter-spacing: .025em;
}

.hr2-top-actions {
  gap: calc(var(--page-w) * .041);
}

.hr2-top-actions button {
  width: calc(var(--page-w) * .054);
  height: calc(var(--page-w) * .054);
  color: #274c40;
}

.hr2-top-actions svg {
  stroke-width: 1.45;
}

.hr2-frame {
  grid-template-rows:
    calc(var(--page-w) * .083333)
    auto
    minmax(calc(var(--page-w) * 1.090278), 1fr)
    auto;
  width: calc(var(--page-w) * .87963);
  height: max(calc(var(--page-w) * 1.520833), calc(100dvh - var(--topbar-h) - var(--nav-h) - 5px));
  min-height: calc(var(--page-w) * 1.520833);
  margin-top: calc(var(--page-w) * .006944);
  margin-bottom: calc(var(--page-w) * .006944);
  padding: calc(var(--page-w) * .013889) calc(var(--page-w) * .025463) 0;
  border-color: rgba(114, 125, 101, .13);
  border-radius: calc(var(--page-w) * .047);
  background:
    linear-gradient(180deg, rgba(253,251,244,.67), rgba(249,247,239,.91)),
    url('/homepage-v280-production/assets/paper-v21.svg?v=2.8.0-ded9e4f9e1c3e6dccde450ab9b15570d7946bff4') center / 190px 190px repeat;
  box-shadow: 0 14px 34px rgba(57, 74, 59, .055), inset 0 1px rgba(255,255,255,.86);
}

.hr2-frame::before {
  z-index: 0;
  background:
    radial-gradient(ellipse at 4% 18%, rgba(219,228,211,.37), transparent 27%),
    radial-gradient(ellipse at 96% 34%, rgba(218,228,219,.23), transparent 31%),
    linear-gradient(105deg, rgba(255,255,255,.28), transparent 36%, rgba(209,221,213,.12));
}

.hr2-frame::after {
  content: "";
  position: absolute;
  top: calc(var(--page-w) * -.16);
  right: calc(var(--page-w) * -.34);
  z-index: 1;
  width: calc(var(--page-w) * 1.08);
  height: calc(var(--page-w) * .46);
  pointer-events: none;
  background: url('/homepage-v280-production/assets/mountains-v21.svg?v=2.8.0-ded9e4f9e1c3e6dccde450ab9b15570d7946bff4') center / contain no-repeat;
  opacity: .36;
}

.hr2-account-row,
.hr2-announcement,
.hr2-hero,
.hr2-store {
  z-index: 3;
}

.hr2-mini-mark {
  width: calc(var(--page-w) * .067);
  height: calc(var(--page-w) * .067);
  border-color: rgba(151, 152, 111, .17);
  background:
    radial-gradient(circle at 31% 24%, rgba(255,255,255,.85), transparent 36%),
    linear-gradient(145deg, #eee9d3, #d9e1bd);
  box-shadow: 0 5px 14px rgba(53, 72, 55, .10), inset 0 1px rgba(255,255,255,.75);
  font-size: clamp(16px, 4.05vw, 17.5px);
}

.hr2-points {
  min-width: calc(var(--page-w) * .211);
  height: calc(var(--page-w) * .074);
  gap: calc(var(--page-w) * .0139);
  padding: calc(var(--page-w) * .0069) calc(var(--page-w) * .0255) calc(var(--page-w) * .0069) calc(var(--page-w) * .0069);
  border-color: rgba(159, 141, 102, .16);
  background: rgba(255,253,247,.89);
  box-shadow: 0 6px 15px rgba(72, 80, 61, .055);
}

.hr2-points > span {
  width: calc(var(--page-w) * .0602);
  height: calc(var(--page-w) * .0602);
  padding: calc(var(--page-w) * .015);
  background: #c8d5ab;
}

.hr2-points b {
  font-size: clamp(14px, 3.55vw, 15.3px);
  font-weight: 600;
}

.hr2-points i {
  font-size: clamp(9px, 2.35vw, 10.2px);
}

.hr2-announcement {
  height: calc(var(--page-w) * .0648);
  margin: calc(var(--page-w) * .0185) 0 calc(var(--page-w) * .0278);
  padding: 0 calc(var(--page-w) * .0231) 0 calc(var(--page-w) * .0185);
  border-radius: calc(var(--page-w) * .026);
  background: rgba(255,254,249,.78);
  box-shadow: 0 6px 14px rgba(70, 80, 64, .04);
}

.hr2-announcement > span {
  padding: calc(var(--page-w) * .0065) calc(var(--page-w) * .0162);
  background: linear-gradient(180deg, #749b80, #507964);
  font-size: clamp(8px, 2.08vw, 9px);
  font-weight: 400;
}

.hr2-announcement p {
  margin-inline: calc(var(--page-w) * .017);
  color: #707870;
  font-size: clamp(8.6px, 2.25vw, 9.7px);
  letter-spacing: .01em;
}

.hr2-announcement p b {
  margin-right: calc(var(--page-w) * .0162);
  color: #5b6a61;
  font-weight: 400;
}

.hr2-announcement > i {
  font-size: clamp(15px, 3.8vw, 16.5px);
}

.hr2-hero {
  min-height: calc(var(--page-w) * 1.090278);
  padding: calc(var(--page-w) * .0324) calc(var(--page-w) * .0231) calc(var(--page-w) * .0162);
  border-color: rgba(181, 154, 99, .29);
  border-radius: calc(var(--page-w) * .036);
  background:
    linear-gradient(180deg, rgba(255,253,247,.82), rgba(251,249,242,.89)),
    url('/homepage-v280-production/assets/paper-v21.svg?v=2.8.0-ded9e4f9e1c3e6dccde450ab9b15570d7946bff4') center / 190px 190px repeat;
  box-shadow: inset 0 1px rgba(255,255,255,.92), 0 8px 23px rgba(54, 72, 58, .035);
}

.hr2-hero::before {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(255,253,247,.54), transparent 24%, transparent 74%, rgba(255,253,247,.34)),
    radial-gradient(ellipse at 78% 11%, rgba(222,229,219,.20), transparent 31%),
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 27%);
}

.hr2-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    url('/homepage-v280-production/assets/foliage-v21.svg?v=2.8.0-ded9e4f9e1c3e6dccde450ab9b15570d7946bff4'),
    url('/homepage-v280-production/assets/gold-v21.svg?v=2.8.0-ded9e4f9e1c3e6dccde450ab9b15570d7946bff4'),
    url('/homepage-v280-production/assets/mountains-v21.svg?v=2.8.0-ded9e4f9e1c3e6dccde450ab9b15570d7946bff4');
  background-repeat: no-repeat;
  background-position:
    left calc(var(--page-w) * -.058) top calc(var(--page-w) * .17),
    right calc(var(--page-w) * -.069) top calc(var(--page-w) * .235),
    right calc(var(--page-w) * -.255) top calc(var(--page-w) * .015);
  background-size:
    calc(var(--page-w) * .29) calc(var(--page-w) * .735),
    calc(var(--page-w) * .43) calc(var(--page-w) * .285),
    calc(var(--page-w) * .99) calc(var(--page-w) * .43);
  opacity: .76;
}

.hr2-hero-copy {
  z-index: 5;
}

.hr2-hero-copy > small {
  color: #77867f;
  font-size: clamp(7.1px, 1.88vw, 8.1px);
  font-weight: 400;
  letter-spacing: .285em;
}

.hr2-hero-copy h1 {
  margin-top: calc(var(--page-w) * .0185);
  color: #3f715f;
  font-size: clamp(31.5px, 8.22vw, 35.5px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: .135em;
  text-indent: .135em;
  text-shadow: 0 3px 18px rgba(255,255,255,.84);
}

.hr2-hero-copy > p {
  margin-top: calc(var(--page-w) * .0162);
  color: #707771;
  font-size: clamp(10.2px, 2.68vw, 11.6px);
  line-height: calc(var(--page-w) * .035);
  letter-spacing: .012em;
}

.hr2-hero-copy > div {
  gap: calc(var(--page-w) * .0185);
  margin-top: calc(var(--page-w) * .0208);
}

.hr2-hero-copy > div span {
  min-width: 0;
  height: calc(var(--page-w) * .0417);
  padding-inline: calc(var(--page-w) * .0278);
  border-color: rgba(112, 129, 113, .14);
  background: rgba(255,254,249,.62);
  box-shadow: 0 1px rgba(255,255,255,.65), 0 3px 9px rgba(61, 76, 62, .025);
  color: #747b75;
  font-size: clamp(7.2px, 1.88vw, 8.1px);
}

.hr2-carousel {
  min-height: calc(var(--page-w) * .625);
  margin-top: calc(var(--page-w) * .0278);
}

.hr2-card-main {
  width: calc(var(--page-w) * .532407);
  max-width: 70%;
  aspect-ratio: 460 / 532;
  border-color: rgba(177, 153, 105, .50);
  border-radius: calc(var(--page-w) * .0509);
  box-shadow:
    0 15px 28px rgba(29, 47, 38, .19),
    0 0 0 2.5px rgba(255,251,239,.67);
}

.hr2-card-main img {
  transform: translateY(calc(var(--page-w) * -.0162)) scale(1.018);
  transform-origin: center top;
  filter: brightness(1.075) saturate(.72) sepia(.055) hue-rotate(-4deg) contrast(.97);
}

.hr2-card-main::after {
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 58%, rgba(6,15,13,.03) 68%, rgba(4,12,11,.74) 100%);
}

.hr2-card-side {
  top: calc(var(--page-w) * .1042);
  width: calc(var(--page-w) * .2662);
  aspect-ratio: .64;
  border-color: rgba(168, 151, 111, .31);
  border-radius: calc(var(--page-w) * .037);
  opacity: .68;
  filter: grayscale(.37) saturate(.50) sepia(.09) contrast(.90) brightness(.96);
  box-shadow: 0 11px 21px rgba(38, 55, 47, .11);
}

.hr2-card-side::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(239,237,221,.12), rgba(32,45,39,.14));
  pointer-events: none;
}

.hr2-card-side.is-left {
  left: calc(var(--page-w) * -.0463);
  transform: perspective(720px) rotateY(7deg);
}

.hr2-card-side.is-right {
  right: calc(var(--page-w) * -.0463);
  transform: perspective(720px) rotateY(-7deg);
}

.hr2-rarity {
  top: calc(var(--page-w) * .021);
  left: calc(var(--page-w) * .0394);
  height: calc(var(--page-w) * .066);
  gap: calc(var(--page-w) * .0139);
  padding-inline: calc(var(--page-w) * .0255);
  border-radius: calc(var(--page-w) * .026);
  background: rgba(154, 185, 143, .92);
  box-shadow: inset 0 1px rgba(255,255,255,.50), 0 4px 11px rgba(26,44,34,.11);
}

.hr2-rarity b {
  font-size: clamp(9.8px, 2.66vw, 11.5px);
  font-weight: 500;
}

.hr2-rarity small {
  font-size: clamp(7.2px, 1.88vw, 8.1px);
}

.hr2-card-shade {
  inset: 60% 0 0;
  background: linear-gradient(180deg, transparent, rgba(5,12,11,.72));
}

.hr2-card-caption {
  left: calc(var(--page-w) * .0394);
  right: calc(var(--page-w) * .0301);
  bottom: calc(var(--page-w) * .0347);
  gap: calc(var(--page-w) * .0231);
}

.hr2-card-caption > span {
  gap: calc(var(--page-w) * .0093);
}

.hr2-card-caption small {
  font-size: clamp(7.4px, 1.95vw, 8.4px);
  font-weight: 400;
}

.hr2-card-caption strong {
  font-size: clamp(16.5px, 4.28vw, 18.5px);
  font-weight: 400;
  letter-spacing: .075em;
}

.hr2-card-caption > b {
  padding-bottom: calc(var(--page-w) * .0023);
  font-size: clamp(7.7px, 2.02vw, 8.7px);
  font-weight: 400;
}

.hr2-arrow {
  top: 52.2%;
  width: calc(var(--page-w) * .0741);
  height: calc(var(--page-w) * .0741);
  padding: calc(var(--page-w) * .0174);
  border-color: rgba(255,255,255,.88);
  background: rgba(247,248,231,.88);
  box-shadow: 0 6px 15px rgba(41, 63, 51, .14), inset 0 0 0 1px rgba(105, 135, 105, .13);
  color: #507b68;
}

.hr2-arrow.is-left {
  left: calc(var(--page-w) * .0069);
}

.hr2-arrow.is-right {
  right: calc(var(--page-w) * .0069);
}

.hr2-arrow svg {
  stroke-width: 1.35;
}

.hr2-dots {
  top: calc(var(--page-w) * .566);
  bottom: auto;
  left: calc(50% - var(--page-w) * .225);
  max-width: calc(var(--page-w) * .39);
  gap: calc(var(--page-w) * .0127);
  transform: none;
}

.hr2-dots button {
  width: calc(var(--page-w) * .0104);
  height: calc(var(--page-w) * .0104);
  flex-basis: calc(var(--page-w) * .0104);
  background: rgba(231,235,220,.30);
}

.hr2-dots button.is-active {
  width: calc(var(--page-w) * .047);
  flex-basis: calc(var(--page-w) * .047);
  background: #93b995;
}

.hr2-draw-meta {
  flex-basis: calc(var(--page-w) * .0394);
  height: calc(var(--page-w) * .0394);
  padding-inline: calc(var(--page-w) * .0093);
  color: #747a74;
}

.hr2-draw-meta button {
  font-size: clamp(8.7px, 2.25vw, 9.7px);
}

.hr2-draw-meta button span {
  font-size: clamp(11px, 2.9vw, 12.5px);
}

.hr2-draw-meta p {
  gap: calc(var(--page-w) * .0347);
  font-size: clamp(8.3px, 2.15vw, 9.3px);
}

.hr2-draw-grid {
  grid-template-columns: 1fr 1fr;
  flex-basis: calc(var(--page-w) * .0972);
  height: calc(var(--page-w) * .0972);
  gap: calc(var(--page-w) * .0417);
  margin-top: calc(var(--page-w) * .0093);
}

.hr2-draw-btn {
  padding-inline: calc(var(--page-w) * .0255);
  border-color: rgba(255,255,255,.54);
  border-radius: calc(var(--page-w) * .0394);
  box-shadow: 0 7px 15px rgba(51, 70, 56, .105), inset 0 1px rgba(255,255,255,.27);
  color: rgba(255,255,255,.96);
}

.hr2-draw-btn.is-single {
  background:
    linear-gradient(102deg, rgba(173,195,166,.93), rgba(92,139,112,.97)),
    url('/homepage-v280-production/assets/paper-v21.svg?v=2.8.0-ded9e4f9e1c3e6dccde450ab9b15570d7946bff4') center / 130px repeat;
}

.hr2-draw-btn.is-ten {
  background:
    linear-gradient(102deg, rgba(194,180,125,.95), rgba(111,137,101,.96)),
    url('/homepage-v280-production/assets/paper-v21.svg?v=2.8.0-ded9e4f9e1c3e6dccde450ab9b15570d7946bff4') center / 130px repeat;
}

.hr2-draw-btn > span {
  width: calc(var(--page-w) * .073);
  height: calc(var(--page-w) * .073);
  flex-basis: calc(var(--page-w) * .073);
  padding: calc(var(--page-w) * .019);
  background: rgba(255,255,255,.13);
  font-size: clamp(14.5px, 3.82vw, 16.5px);
}

.hr2-draw-btn i {
  gap: calc(var(--page-w) * .0023);
  margin-left: calc(var(--page-w) * .0185);
}

.hr2-draw-btn b {
  font-size: clamp(12.4px, 3.24vw, 14px);
  font-weight: 400;
  letter-spacing: .025em;
}

.hr2-draw-btn small {
  font-size: clamp(7.3px, 1.9vw, 8.2px);
  opacity: .84;
}

.hr2-store {
  grid-template-columns: calc(var(--page-w) * .1157) minmax(0, 1fr) calc(var(--page-w) * .286);
  height: calc(var(--page-w) * .1852);
  min-height: calc(var(--page-w) * .1852);
  margin-top: calc(var(--page-w) * .0231);
  padding: calc(var(--page-w) * .0185) calc(var(--page-w) * .0255);
  border-color: rgba(181, 154, 99, .29);
  border-radius: calc(var(--page-w) * .033);
  background:
    linear-gradient(180deg, rgba(254,252,245,.90), rgba(250,247,237,.94)),
    url('/homepage-v280-production/assets/paper-v21.svg?v=2.8.0-ded9e4f9e1c3e6dccde450ab9b15570d7946bff4') center / 190px repeat;
  box-shadow: inset 0 1px rgba(255,255,255,.84), 0 5px 15px rgba(58, 72, 58, .025);
}

.hr2-store::after {
  content: "";
  position: absolute;
  top: calc(var(--page-w) * -.015);
  right: calc(var(--page-w) * -.0185);
  z-index: 1;
  width: calc(var(--page-w) * .405);
  height: calc(var(--page-w) * .19);
  pointer-events: none;
  background: url('/homepage-v280-production/assets/cottage-v21.svg?v=2.8.0-ded9e4f9e1c3e6dccde450ab9b15570d7946bff4') right center / contain no-repeat;
  opacity: .90;
}

.hr2-store-mark {
  width: calc(var(--page-w) * .0995);
  height: calc(var(--page-w) * .1065);
  border-radius: calc(var(--page-w) * .028);
  background: linear-gradient(145deg, #71927a, #3d705b);
  box-shadow: 0 6px 13px rgba(55, 86, 68, .14), inset 0 1px rgba(255,255,255,.24);
  font-size: clamp(19px, 5.1vw, 22px);
}

.hr2-store-copy {
  padding-left: calc(var(--page-w) * .0162);
}

.hr2-store-copy > small {
  font-size: clamp(6.5px, 1.72vw, 7.4px);
  letter-spacing: .24em;
}

.hr2-store-copy h2 {
  margin-top: 0;
  font-size: clamp(16.2px, 4.28vw, 18.5px);
  font-weight: 400;
  letter-spacing: .07em;
}

.hr2-store-copy p {
  margin: calc(var(--page-w) * .0023) 0 calc(var(--page-w) * .0069);
  color: #6f756f;
  font-size: clamp(7.4px, 1.95vw, 8.4px);
  line-height: 1.22;
}

.hr2-store-copy > div {
  gap: calc(var(--page-w) * .0093);
}

.hr2-store-copy > div b {
  padding: calc(var(--page-w) * .0035) calc(var(--page-w) * .0116);
  border-color: rgba(159,145,111,.17);
  color: #806e4c;
  font-size: clamp(6.6px, 1.72vw, 7.4px);
  font-weight: 400;
}

.hr2-store > em {
  right: calc(var(--page-w) * .0231);
  bottom: calc(var(--page-w) * .0139);
  color: #426a59;
  font-size: clamp(8.7px, 2.26vw, 9.8px);
  font-weight: 500;
}

.hr2-bottom-nav {
  padding: calc(var(--page-w) * .015) calc(var(--page-w) * .037) calc(var(--safe-bottom) + var(--page-w) * .0046);
  border-top-color: rgba(96, 111, 91, .10);
  background: rgba(250,248,241,.90);
  box-shadow: 0 -6px 19px rgba(47, 65, 53, .045);
  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
}

.hr2-nav-btn {
  gap: calc(var(--page-w) * .0046);
  color: #7b8a81;
}

.hr2-nav-btn > span {
  width: calc(var(--page-w) * .0486);
  height: calc(var(--page-w) * .0486);
}

.hr2-nav-btn > i {
  font-size: clamp(8px, 2.08vw, 9px);
}

.hr2-nav-btn > b {
  top: calc(var(--page-w) * -.0023);
  min-width: calc(var(--page-w) * .0417);
  height: calc(var(--page-w) * .0347);
  background: #c5a25f;
  font-size: clamp(6.4px, 1.67vw, 7.2px);
}

.hr2-nav-btn.is-active {
  color: #487a63;
}

.hr2-bottom-nav svg {
  stroke-width: 1.38;
}

@media (max-width: 374px) {
  .hr2-brand b {
    max-width: calc(var(--page-w) * .335);
    font-size: 11.3px;
  }

  .hr2-hero-copy h1 {
    font-size: 30.5px;
  }

  .hr2-hero-copy > div span {
    padding-inline: 7px;
    font-size: 6.8px;
  }

  .hr2-draw-btn {
    padding-inline: 8px;
  }

  .hr2-draw-btn b {
    font-size: 12px;
  }

  .hr2-draw-btn small {
    font-size: 7px;
  }
}