/* Final QA pass: match the user's second 864×1536 reference at 432×768 CSS pixels. */

#yr-homepage-reference-v2 {
  --ref-w: var(--page-w);
}

/* Page + outer paper frame */
.hr2-app {
  background:
    linear-gradient(180deg, rgba(255,255,255,.52), rgba(249,247,238,.16)),
    url('/homepage-v280-production/assets/paper-v21.svg?v=2.8.0-ded9e4f9e1c3e6dccde450ab9b15570d7946bff4') center/190px 190px repeat,
    #f5f2e8;
}

.hr2-app::after {
  top: calc(var(--ref-w) * -.035);
  right: calc(var(--ref-w) * -.16);
  width: calc(var(--ref-w) * .83);
  height: calc(var(--ref-w) * .34);
  opacity: .34;
}

.hr2-topbar {
  height: var(--topbar-h);
  padding-left: calc(var(--ref-w) * .0787);
  padding-right: calc(var(--ref-w) * .066);
}

.hr2-topbar .hr2-round-mark {
  width: calc(var(--ref-w) * .058);
  height: calc(var(--ref-w) * .058);
}

.hr2-brand b {
  max-width: calc(var(--ref-w) * .325);
  font-size: clamp(11.4px, 2.9vw, 12.6px);
  letter-spacing: .02em;
}

.hr2-frame {
  width: calc(var(--ref-w) * .87963);
  min-height: calc(var(--ref-w) * 1.50926);
  height: max(calc(var(--ref-w) * 1.50926), calc(100dvh - var(--topbar-h) - var(--nav-h) - 7px));
  margin-top: calc(var(--ref-w) * .00694);
  margin-bottom: calc(var(--ref-w) * .00694);
  padding: calc(var(--ref-w) * .01389) calc(var(--ref-w) * .02778) 0;
  border-radius: calc(var(--ref-w) * .0463);
  border-color: rgba(116,127,103,.12);
  box-shadow: 0 12px 34px rgba(53,71,57,.045), inset 0 1px rgba(255,255,255,.86);
}

.hr2-frame::after {
  top: calc(var(--ref-w) * -.145);
  right: calc(var(--ref-w) * -.24);
  width: calc(var(--ref-w) * .82);
  height: calc(var(--ref-w) * .35);
  opacity: .28;
}

/* Account row */
.hr2-account-row {
  height: calc(var(--ref-w) * .08333);
}

.hr2-mini-mark {
  width: calc(var(--ref-w) * .06713);
  height: calc(var(--ref-w) * .06713);
  font-size: clamp(15.5px, 3.9vw, 17px);
  box-shadow: 0 4px 12px rgba(55,72,55,.08), inset 0 1px rgba(255,255,255,.76);
}

.hr2-points {
  min-width: calc(var(--ref-w) * .205);
  height: calc(var(--ref-w) * .0695);
  padding: calc(var(--ref-w) * .0058) calc(var(--ref-w) * .0231) calc(var(--ref-w) * .0058) calc(var(--ref-w) * .0069);
  gap: calc(var(--ref-w) * .0127);
}

.hr2-points > span {
  width: calc(var(--ref-w) * .0579);
  height: calc(var(--ref-w) * .0579);
  padding: calc(var(--ref-w) * .014);
}

.hr2-points b { font-size: clamp(13.2px, 3.35vw, 14.5px); }
.hr2-points i { font-size: clamp(8.7px, 2.2vw, 9.5px); }

/* Announcement */
.hr2-announcement {
  height: calc(var(--ref-w) * .06713);
  margin: calc(var(--ref-w) * .01852) 0 calc(var(--ref-w) * .02778);
  border-radius: calc(var(--ref-w) * .02778);
  background: rgba(255,254,249,.82);
}

.hr2-announcement > span {
  padding: calc(var(--ref-w) * .0074) calc(var(--ref-w) * .0174);
  font-size: clamp(7.8px, 2vw, 8.6px);
}

.hr2-announcement p {
  font-size: clamp(8.2px, 2.12vw, 9.15px);
}

/* Hero panel: compact like the target, not edge-to-edge */
.hr2-hero {
  min-height: calc(var(--ref-w) * 1.09028);
  padding: calc(var(--ref-w) * .03125) calc(var(--ref-w) * .02315) calc(var(--ref-w) * .014);
  border-radius: calc(var(--ref-w) * .03704);
}

.hr2-hero::after {
  background-position:
    left calc(var(--ref-w) * -.018) top calc(var(--ref-w) * .235),
    right calc(var(--ref-w) * -.055) top calc(var(--ref-w) * .245),
    right calc(var(--ref-w) * -.17) top calc(var(--ref-w) * .02);
  background-size:
    calc(var(--ref-w) * .205) calc(var(--ref-w) * .56),
    calc(var(--ref-w) * .31) calc(var(--ref-w) * .22),
    calc(var(--ref-w) * .67) calc(var(--ref-w) * .31);
  opacity: .52;
}

.hr2-hero-copy > small {
  font-size: clamp(6.8px, 1.72vw, 7.45px);
  letter-spacing: .27em;
}

.hr2-hero-copy h1 {
  margin-top: calc(var(--ref-w) * .0174);
  font-size: clamp(28.5px, 7.55vw, 32.6px);
  line-height: 1.02;
  letter-spacing: .13em;
  text-indent: .13em;
}

.hr2-hero-copy > p {
  margin-top: calc(var(--ref-w) * .014);
  font-size: clamp(9.2px, 2.4vw, 10.4px);
  line-height: calc(var(--ref-w) * .033);
}

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

.hr2-hero-copy > div span {
  height: calc(var(--ref-w) * .0394);
  padding-inline: calc(var(--ref-w) * .0231);
  font-size: clamp(6.7px, 1.73vw, 7.45px);
}

/* Carousel geometry from the target: main 230×264 at 432px viewport. */
.hr2-carousel {
  min-height: calc(var(--ref-w) * .625);
  margin-top: calc(var(--ref-w) * .02778);
}

.hr2-card-main {
  width: calc(var(--ref-w) * .53241);
  aspect-ratio: 230 / 264;
  max-width: none;
  border-radius: calc(var(--ref-w) * .0405);
  box-shadow: 0 11px 23px rgba(29,47,38,.15), 0 0 0 2px rgba(255,251,239,.64);
}

.hr2-card-main img {
  transform: translateY(calc(var(--ref-w) * -.007)) scale(1.004);
  filter: brightness(1.055) saturate(.80) sepia(.035) contrast(.985);
}

.hr2-card-main::after {
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(5,13,11,.02) 72%, rgba(4,12,11,.62) 100%);
}

.hr2-card-side {
  top: calc(var(--ref-w) * .1042);
  width: calc(var(--ref-w) * .2454);
  aspect-ratio: .64;
  border-radius: calc(var(--ref-w) * .0313);
  opacity: .56;
  filter: grayscale(.42) saturate(.48) sepia(.08) brightness(.98) contrast(.92);
  box-shadow: 0 8px 17px rgba(38,55,47,.08);
}

.hr2-card-side.is-left { left: calc(var(--ref-w) * -.028); transform: perspective(760px) rotateY(5deg); }
.hr2-card-side.is-right { right: calc(var(--ref-w) * -.028); transform: perspective(760px) rotateY(-5deg); }

.hr2-arrow {
  top: 52.4%;
  width: calc(var(--ref-w) * .0718);
  height: calc(var(--ref-w) * .0718);
  padding: calc(var(--ref-w) * .017);
  box-shadow: 0 5px 12px rgba(41,63,51,.11), inset 0 0 0 1px rgba(105,135,105,.12);
}

.hr2-arrow.is-left { left: calc(var(--ref-w) * .008); }
.hr2-arrow.is-right { right: calc(var(--ref-w) * .008); }

.hr2-rarity {
  top: calc(var(--ref-w) * .021);
  left: calc(var(--ref-w) * .024);
  height: calc(var(--ref-w) * .058);
  padding-inline: calc(var(--ref-w) * .022);
}

.hr2-rarity b { font-size: clamp(9px, 2.35vw, 10.2px); }
.hr2-rarity small { font-size: clamp(6.7px, 1.75vw, 7.6px); }

.hr2-card-caption {
  left: calc(var(--ref-w) * .0301);
  right: calc(var(--ref-w) * .0255);
  bottom: calc(var(--ref-w) * .0278);
}

.hr2-card-caption small { font-size: clamp(7px, 1.82vw, 7.85px); }
.hr2-card-caption strong { font-size: clamp(15.3px, 4.0vw, 17.3px); }
.hr2-card-caption > b { font-size: clamp(7.2px, 1.88vw, 8.1px); }

.hr2-dots {
  top: calc(var(--ref-w) * .553);
  left: calc(50% - var(--ref-w) * .212);
  max-width: calc(var(--ref-w) * .36);
  gap: calc(var(--ref-w) * .0116);
}

.hr2-dots button {
  width: calc(var(--ref-w) * .0093);
  height: calc(var(--ref-w) * .0093);
  flex-basis: calc(var(--ref-w) * .0093);
}

.hr2-dots button.is-active {
  width: calc(var(--ref-w) * .0417);
  flex-basis: calc(var(--ref-w) * .0417);
}

/* Probability row and draw buttons */
.hr2-draw-meta {
  flex-basis: calc(var(--ref-w) * .03704);
  height: calc(var(--ref-w) * .03704);
}

.hr2-draw-meta button { font-size: clamp(8.2px, 2.13vw, 9.2px); }
.hr2-draw-meta p { gap: calc(var(--ref-w) * .0324); font-size: clamp(7.9px, 2.05vw, 8.85px); }

.hr2-draw-grid {
  flex-basis: calc(var(--ref-w) * .09722);
  height: calc(var(--ref-w) * .09722);
  gap: calc(var(--ref-w) * .04167);
  margin-top: calc(var(--ref-w) * .0081);
}

.hr2-draw-btn {
  border-radius: calc(var(--ref-w) * .036);
  box-shadow: 0 5px 12px rgba(51,70,56,.08), inset 0 1px rgba(255,255,255,.27);
}

.hr2-draw-btn.is-single {
  background: linear-gradient(102deg, rgba(162,190,157,.93), rgba(88,133,108,.95));
}

.hr2-draw-btn.is-ten {
  background: linear-gradient(102deg, rgba(190,175,121,.94), rgba(107,132,98,.95));
}

.hr2-draw-btn > span {
  width: calc(var(--ref-w) * .0683);
  height: calc(var(--ref-w) * .0683);
  flex-basis: calc(var(--ref-w) * .0683);
}

.hr2-draw-btn b { font-size: clamp(11.5px, 3vw, 13px); }
.hr2-draw-btn small { font-size: clamp(6.9px, 1.8vw, 7.8px); }

/* Store exactly as a compact 356×83 panel */
.hr2-store {
  grid-template-columns: calc(var(--ref-w) * .1065) minmax(0,1fr) calc(var(--ref-w) * .25);
  height: calc(var(--ref-w) * .19213);
  min-height: calc(var(--ref-w) * .19213);
  margin-top: calc(var(--ref-w) * .0162);
  padding: calc(var(--ref-w) * .0162) calc(var(--ref-w) * .02315);
  border-radius: calc(var(--ref-w) * .0313);
}

.hr2-store::after {
  top: calc(var(--ref-w) * -.0046);
  right: calc(var(--ref-w) * -.0023);
  width: calc(var(--ref-w) * .35);
  height: calc(var(--ref-w) * .176);
  opacity: .84;
}

.hr2-store-mark {
  width: calc(var(--ref-w) * .0926);
  height: calc(var(--ref-w) * .0995);
  border-radius: calc(var(--ref-w) * .0255);
  font-size: clamp(18px, 4.7vw, 20.3px);
}

.hr2-store-copy { padding-left: calc(var(--ref-w) * .014); }
.hr2-store-copy > small { font-size: clamp(6.1px, 1.58vw, 6.85px); }
.hr2-store-copy h2 { font-size: clamp(15px, 3.95vw, 17px); }
.hr2-store-copy p { font-size: clamp(6.9px, 1.8vw, 7.8px); }
.hr2-store-copy > div b { font-size: clamp(6.2px, 1.62vw, 7px); }
.hr2-store > em { right: calc(var(--ref-w) * .0208); bottom: calc(var(--ref-w) * .0116); font-size: clamp(8.1px, 2.1vw, 9.1px); }

/* Bottom navigation */
.hr2-bottom-nav {
  padding-top: calc(var(--ref-w) * .0139);
  padding-inline: calc(var(--ref-w) * .037);
  background: rgba(250,248,241,.92);
  box-shadow: 0 -4px 14px rgba(47,65,53,.035);
}

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

.hr2-nav-btn > i { font-size: clamp(7.6px, 1.98vw, 8.55px); }

@media (max-width: 374px) {
  .hr2-brand b { max-width: calc(var(--ref-w) * .30); font-size: 10.8px; }
  .hr2-hero-copy h1 { font-size: 27.5px; }
}