/* One shared vertical layout: the artwork retains its scale below added fog. */
:root {
 --hero-image-height:648px;
 --hero-fog-height:88px;
 --hero-total-height:calc(var(--hero-image-height) + var(--hero-fog-height));
 --hero-copy-top:132px;
 --hero-heading-space:272px;
 --hero-description-space:66px;
 --shared-headline-size:clamp(43px,5.05vw,73px);
 --shared-headline-line:calc(var(--shared-headline-size) * 1.04);
}
body[data-world] .hero,
body[data-world] .hero-inner {
 height:var(--hero-total-height);
 min-height:var(--hero-total-height);
}
body[data-world] .hero {background:#0c1011;}
body[data-world] .hero-inner {
 padding-block:var(--hero-copy-top) 0;
 align-items:flex-start;
}
body[data-world] .hero-copy {width:45.5%;max-width:530px;}
.hero-heading {height:var(--hero-heading-space);}
body[data-world=runeverse] .hero-heading h1 {line-height:var(--shared-headline-line);}
body[data-world=bulleth] .hero-heading h1 {line-height:calc(var(--shared-headline-line) * 1.5);}
body[data-world] .hero-copy .eyebrow {margin:0 0 24px;}
body[data-world] .hero-description {
 height:var(--hero-description-space);
 max-width:365px;
 margin-top:26px;
}
body[data-world] .hero-actions {
 height:54px;
 margin-top:26px;
 gap:28px;
 flex-wrap:nowrap;
}
body[data-world] .hero-actions>.button {
 height:54px;
 width:192px;
 min-width:192px;
 justify-content:space-between;
}
body[data-world] .hero-footnote {height:22px;margin-top:20px;}
body[data-world] .hero-art {
 inset:var(--hero-fog-height) 0 auto;
 height:var(--hero-image-height);
}
body[data-world] .hero-art>img {
 width:100%;
 height:100%;
 transform:none;
 mask-image:linear-gradient(to bottom,transparent 0,#000 64px,#000 100%);
}
.hero::before {
 content:"";
 position:absolute;
 inset:0 0 auto;
 height:calc(var(--hero-fog-height) + 160px);
 z-index:-2;
 pointer-events:none;
 background:
  linear-gradient(180deg,#0c1011 0%,#171d20a0 23%,#22292d45 53%,transparent 100%),
  url('network-assets/header-smoke.svg') center top/cover no-repeat;
}
/* Native logos occupy equal rows, with their game labels on one baseline. */
.game-switch {gap:15px;}
.game-switch .brand-choice {
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:center;
 gap:5px;
 width:106px;
 min-width:106px;
 height:54px;
 padding:0;
 text-align:center;
}
.game-switch .brand-logo {
 display:grid;
 place-items:center;
 height:40px;
 width:100%;
}
.game-switch .brand-logo img {height:36px;width:auto;max-width:100%;object-fit:contain;}
.game-switch .brand-logo img[src*="runeverse-icon"] {width:40px;height:40px;}
.game-switch .brand-choice .brand-subtitle {
 display:block;
 font:6px/8px Gontserrat,Arial,sans-serif;
 color:#a8b0a4;
 letter-spacing:.2em;
 height:8px;
 margin:0;
}
.game-switch .brand-choice[aria-pressed=true]::after {bottom:-16px;}

@media(min-width:1600px) {
 :root {--hero-image-height:740px;--hero-fog-height:96px;--hero-copy-top:164px;--hero-heading-space:310px;--shared-headline-size:79px;}
}
@media(max-width:1000px) and (min-width:761px) {
 :root {--hero-image-height:630px;--hero-fog-height:72px;--hero-copy-top:80px;--hero-heading-space:270px;--shared-headline-size:53px;}
 .game-switch .brand-choice {width:82px;min-width:82px;}
 .game-switch .brand-logo img {max-width:80px;}
}
@media(max-width:760px) {
 :root {
  --hero-image-height:455px;
  --hero-fog-height:56px;
  --hero-total-height:881px;
  --hero-copy-top:466px;
  --hero-heading-space:186px;
  --hero-description-space:76px;
  --shared-headline-size:51px;
  --shared-headline-line:calc(var(--shared-headline-size) * 1.02);
 }
 body[data-world] .hero-copy {width:100%;max-width:470px;}
 body[data-world] .hero-copy .eyebrow {margin-bottom:18px;}
 body[data-world] .hero-description {margin-top:21px;}
 body[data-world] .hero-actions {height:48px;margin-top:23px;gap:22px;}
 body[data-world] .hero-actions>.button {width:164px;min-width:164px;height:48px;}
 body[data-world] .hero-footnote {height:16px;margin-top:16px;}
 body[data-world] .hero-coordinate {bottom:15px;}
 .game-switch {gap:10px;}
 .game-switch .brand-choice {width:69px;min-width:69px;height:48px;gap:4px;}
 .game-switch .brand-logo {height:35px;}
 .game-switch .brand-logo img {height:26px;max-width:69px;}
 .game-switch .brand-logo img[src*="runeverse-icon"] {width:34px;height:34px;}
 .game-switch .brand-choice .brand-subtitle {font-size:5px;line-height:7px;height:7px;}
 .game-switch .brand-choice[aria-pressed=true]::after {bottom:-13px;}
}
@media(max-width:390px) {
 :root {--hero-total-height:856px;--hero-copy-top:446px;--hero-heading-space:174px;--shared-headline-size:45px;}
 .game-switch {gap:8px;}
 .game-switch .brand-choice {width:62px;min-width:62px;}
 .game-switch .brand-logo img {max-width:62px;}
}

/* The bag sits directly before the account name and shared RV balance. */
.account-cluster>.cart-button {flex-shrink:0;}
.site-header .header-actions {margin-left:auto;gap:24px;}
.account-cluster {display:flex;align-items:center;gap:13px;}
.header-actions .wallet-button {
 display:flex;
 align-items:center;
 padding-left:13px;
 border-left:1px solid #34402f;
 min-height:24px;
}
@media(max-width:1000px) {
 .site-header {gap:20px;}
 .site-header .header-actions {gap:16px;}
}
@media(max-width:760px) {
 .site-header {gap:12px;}
 .account-cluster>.cart-button {width:22px;}
 .account-cluster {gap:8px;}
 .header-actions .wallet-button {padding-left:8px;gap:4px;font-size:8px;}
 .header-actions .wallet-button img {width:14px;height:14px;}
 .game-switch {gap:6px;}
 .switch-divider {font-size:16px;}
}

/* The smoke edges meet: Runeverse on the left, BullETH on the right. */
body[data-world] .hero-panorama{position:absolute;inset:var(--hero-fog-height) auto auto 0;width:200%;height:var(--hero-image-height);z-index:-3;transform:translate3d(0,0,0)}
body[data-world=bulleth] .hero-panorama{transform:translate3d(-50%,0,0)}
body[data-world].world-motion-ready .hero-panorama{transition:transform 850ms cubic-bezier(.65,0,.25,1)}
body[data-world] .hero-panorama>.hero-art{display:block;inset:0 auto 0 0;width:50%;height:100%;z-index:auto}
body[data-world] .hero-panorama>.rune-art{mask-image:linear-gradient(to right,#000 92%,transparent)}
body[data-world] .hero-panorama>.beth-art{left:50%;mask-image:linear-gradient(to right,transparent,#000 8%)}
@media(prefers-reduced-motion:reduce){body[data-world].world-motion-ready .hero-panorama{transition:none}}
/* Currency is its own mark; game branding retains the Runeverse R. */
.wallet-button img[src*="rv-currency"]{width:31px;height:18px;object-fit:contain}
.store-wallet>strong>img[src*="rv-currency"]{width:48px;height:28px;object-fit:contain}
.product-image .product-currency{width:min(74%,215px);height:126px;object-fit:contain;filter:drop-shadow(0 9px 16px #0008);z-index:2}
.store-back.button{display:inline-flex;align-items:center;gap:12px;min-height:36px;padding:10px 15px;margin:0 0 26px;font-size:10px}
.store-back.button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media(max-width:760px){.header-actions .wallet-button img[src*="rv-currency"]{width:25px;height:15px}.store-back.button{margin-bottom:20px}}