/* Presentation for the account's companion pages; cabinet styles stay separate. */
.xp-page{background:#07120f;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#f2f8f3}
.xp-page .xp-brand img{width:180px;height:auto}
.xp-page .xp-nav{gap:16px}
.xp-page .xp-nav .xp-button{padding:10px 16px;text-decoration:none}
.xp-page .xp-hero{padding-top:28px}
.xp-page .xp-hero h1{font-size:clamp(36px,5vw,56px);line-height:1.1}
.xp-page .xp-hero-pack{width:150px;height:200px;top:14px}
.xp-page .xp-hero .xp-lead,.xp-page .xp-message{max-width:calc(100% - 170px)}
.xp-page .xp-note{font-size:14px;line-height:1.6}
.xp-page .xp-tabs a{border-radius:12px;min-height:44px;font-size:14px;font-weight:700}
.xp-page .xp-card strong{font-size:15px}
.xp-page .xp-card small{font-size:12px;line-height:1.5}
.xp-page .xp-stamp span{font-size:12px;letter-spacing:0}
.xp-page .xp-section h2{font-size:28px}
.xp-page .xp-hero .xp-kicker{max-width:70%}
@media(max-width:650px){
 .xp-page .xp-hero-pack{width:82px;height:110px;top:26px;right:0}
 .xp-page .xp-hero h1{max-width:calc(100% - 90px);font-size:36px}
 .xp-page .xp-hero .xp-lead{max-width:calc(100% - 90px);font-size:15px}
 .xp-page .xp-message{max-width:100%;margin-top:24px}
 .xp-page .xp-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .xp-page .xp-tabs a{text-align:center;padding:10px}
 .xp-page .xp-brand img{width:150px}
}

/* The counter has its own embedded cabinet-era stylesheet. These scoped
   selectors reduce its banner and keep actual stock and receipts foremost. */
body:has(#catalog){background:#07120f;color:#f2f8f3}
body:has(#catalog) .scene{background:radial-gradient(ellipse at 100% 0,#183023,#07120f 65%)}
.shell:has(#catalog) .hero{min-height:0;border-color:#29473a;border-radius:16px;margin:20px 0;background:linear-gradient(110deg,#11231b,#0d1b16);box-shadow:none}
.shell:has(#catalog) .hero-copy{min-height:0;padding:30px;width:calc(100% - 210px)}
.shell:has(#catalog) .hero h1{font:850 clamp(32px,4vw,48px)/1.1 system-ui,sans-serif;text-transform:none;letter-spacing:-.04em;margin:0 0 10px}
.shell:has(#catalog) .hero p{font-size:16px;line-height:1.5}
.shell:has(#catalog) .hero-ticket{width:150px;right:36px;border-radius:12px;box-shadow:0 0 0 4px #ffb4d6,0 10px 25px #0005}
.shell:has(#catalog) .hero-ticket strong{font-size:36px}
.shell:has(#catalog) .hero-ticket span{font-size:7px;letter-spacing:.1em}
.shell:has(#catalog) .server-note{font-size:12px;letter-spacing:0;line-height:1.5}
.shell:has(#catalog) .server-note i{background:#adc3b7;box-shadow:none}
.shell:has(#catalog) .counter-tools .heading h2{font-size:28px;text-transform:none;line-height:1.2}
.shell:has(#catalog) .counter-tools .heading span{font-size:14px}
.shell:has(#catalog) .counter-empty{min-height:160px;padding:28px;border-radius:16px}
.shell:has(#catalog) .counter-empty h3{font-size:26px;text-transform:none}
.shell:has(#catalog) .counter-empty:after{display:none}
.shell:has(#catalog) .counter-empty p,.shell:has(#catalog) .body p{font-size:15px}
.shell:has(#catalog) .prize-filter{min-height:44px;font-size:14px;text-transform:none;border-radius:12px}
.shell:has(#catalog) .redeem{font-size:13px;letter-spacing:0;border-radius:12px}
.shell:has(#catalog) .history-list{flex-wrap:wrap}
.shell:has(#catalog) .history-item{font-size:14px;max-width:100%;overflow-wrap:anywhere}
.counter-guide{border:1px solid #29473a;border-radius:16px;background:#0d1b16;margin:20px 0;padding:0 20px}
.counter-guide>summary{cursor:pointer;min-height:56px;display:flex;align-items:center;gap:12px;color:#f2f8f3;font-weight:750}
.counter-guide>summary::before{content:"+";color:#b4ff22;font-size:20px}
.counter-guide[open]>summary::before{content:"−"}
.counter-footer{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:28px 0 0;color:#adc3b7;font-size:13px}
.counter-footer a{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border:1px solid #29473a;border-radius:12px;color:#f2f8f3;text-decoration:none;font-weight:700}
.counter-footer span{margin-left:auto}
@media(max-width:650px){
 .shell:has(#catalog) .hero-copy{width:calc(100% - 90px);padding:22px}
 .shell:has(#catalog) .hero h1{font-size:32px}
 .shell:has(#catalog) .hero-ticket{width:90px;right:16px;opacity:1}
 .shell:has(#catalog) .hero-ticket strong{font-size:24px}
 .shell:has(#catalog) .hero-ticket span{font-size:5px}
 .shell:has(#catalog) .hero p{font-size:15px}
 .shell:has(#catalog) .counter-empty{padding:22px}
 .counter-footer span{width:100%;margin:4px 0 0}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}