/* OnePager_B01_opti1.psb: visual skin only. Account and reward behavior stays in account.js. */
:root{--bg:#34124f;--ink:#fff;--muted:#d3c6db;--cyan:#00e3ff;--pink:#ed23c7;--line:#ffffff4a;--u:min(1px,.0520833333vw)}
body{background:#34124f url('assets/onepager/page-background.webp') center 650px/1920px 1080px repeat-y}
main{overflow:clip}
.language-switcher{background:#351547dc;backdrop-filter:blur(10px);border-color:#ffffff70}
.language-switcher select{background:#351547}
.hero{height:calc(959 * var(--u));min-height:0;padding:0;max-width:none;margin:0 auto;isolation:auto;background:transparent}
/* Full-viewport artwork, independently of the content: proportional cover, anchored at the top.
   Fade into our existing page artwork instead of adding Empulse's dark overlay. */
.hero-background{inset:0 auto auto 0;width:100%;height:100vh;height:100lvh;object-fit:cover;object-position:center top;pointer-events:none;mask-image:linear-gradient(#000 65%,transparent 100%);z-index:0}
.hero:after{display:none}
.hero-content{position:absolute;top:calc(650 * var(--u));left:0;right:0;max-width:none;height:calc(309 * var(--u));z-index:1}
.hero .hero-logo{position:absolute;top:calc(-122 * var(--u));width:calc(419 * var(--u));height:auto;margin:0;filter:none}
.hero h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0;padding:0;border:0;white-space:nowrap}
.hero-description{margin:calc(4 * var(--u)) auto 0;max-width:calc(850 * var(--u));font-family:var(--display);text-transform:uppercase;line-height:1.35;color:#fff;text-shadow:0 1px 7px #3b133b;letter-spacing:.03em}
.hero-description strong{display:block;font-size:calc(24 * var(--u));line-height:1.25}
.hero-description span{display:block;font-size:calc(16 * var(--u));line-height:1.4}
.hero-content>.button{position:absolute;top:calc(102 * var(--u));width:calc(330 * var(--u));min-height:calc(52 * var(--u));padding:calc(12 * var(--u));font-size:calc(16 * var(--u));letter-spacing:.065em;background:none;border:0;border-radius:10px;color:#fff;box-shadow:none;text-transform:uppercase;--frame-image:url('assets/onepager/button-pink-ps-3x.png')}
.hero-content>.button:hover{background:none;filter:none;transform:none;box-shadow:none}
.platforms{position:absolute;top:calc(201 * var(--u));gap:calc(30 * var(--u));margin:0;flex-wrap:nowrap}
.platforms .button,.platform-link{position:relative;width:calc(230 * var(--u));min-width:0;min-height:calc(52 * var(--u));height:calc(52 * var(--u));padding:calc(8 * var(--u));border:0;border-radius:10px;background:none;color:#fff;box-shadow:none;backdrop-filter:none;font:700 calc(16 * var(--u))/1.2 var(--display);letter-spacing:.025em;--frame-image:url('assets/onepager/button-discord-ps-3x.png')}
.hero-content>.button,.platforms .button,.platform-link{isolation:isolate}
/* Photoshop native x3 exports: 16px transparent/effect margin + 18px corner.
   Slice in source pixels (102); paint at CSS size (34px), with effects outside (16px). */
.hero-content>.button::before,.platforms .button::before,.platform-link::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border:18px solid transparent;border-image:var(--frame-image) 102 fill / 34px / 16px stretch}
.platforms .skin-link{align-self:auto;background:linear-gradient(110deg,#1548ce,#087aa8);color:#fff;box-shadow:0 0 14px #00bfff66;animation:skin-blue-glow 2.8s ease-in-out infinite;--frame-image:url('assets/onepager/button-skin-ps-3x.png')}
.platforms .skin-link::before{filter:sepia(1) saturate(5) hue-rotate(155deg)}
.platforms .skin-link:after{content:'';position:absolute;inset:-2px;border:2px solid #20d9ff;border-radius:inherit;pointer-events:none;opacity:0;animation:skin-ring 2.8s ease-out infinite}
.platform-link:hover{background:none;filter:none;transform:none;box-shadow:none}
.platforms .skin-link:hover,.platforms .skin-link:focus-visible{background:linear-gradient(110deg,#215aef,#099ac2);filter:none;transform:none;color:#fff}
.platforms .skin-link:focus-visible{outline:2px solid #b9f5ff;outline-offset:5px}
@keyframes skin-blue-glow{0%,100%{box-shadow:0 0 10px #00bfff66,0 0 24px #164dff33}45%{box-shadow:0 0 22px 5px #00c8ffaa,0 0 48px 10px #125dff66}}
/* Logos keep their original visible size; the extra 16px per side contains Photoshop effects. */
.platform-link img{width:calc(156 * var(--u));height:auto;margin:calc(-16 * var(--u));object-fit:contain;flex-shrink:0}
.steam-platform{gap:calc(8 * var(--u))}
.platforms .steam-platform{--frame-image:url('assets/onepager/button-steam-ps-3x.png')}
.steam-platform img{width:calc(154 * var(--u))}
.gallery{max-width:1120px;width:calc(1120 * var(--u));grid-template-columns:minmax(0,1fr) calc(172 * var(--u));gap:calc(20 * var(--u));margin:0 auto}
.media-stage{border:2px solid #d849c2;border-radius:18px;background:#311343}
.thumbnail-rail{padding:0 2px;gap:10px;scrollbar-color:#bc47bb55 transparent}
.thumbnail{border:2px solid #c03aad;border-radius:13px;opacity:.85;background:#4c1454}
.thumbnail[aria-selected=true]{border:2px solid #f182e6;box-shadow:0 0 12px #e137c877}
.thumbnail>span{color:#ff82e3;background:linear-gradient(transparent,#3a124bee);text-shadow:0 1px 4px #26072b}
.thumbnail-character img{height:100%;object-fit:cover;object-position:center}
.thumbnail-video svg{width:30px;height:30px}
.video-panel video{object-fit:cover}
.character-panel{background:radial-gradient(ellipse at 70% 30%,#c62baf,#482056 60%,#321144)}
.team-panel{background:linear-gradient(115deg,#382058,#6d1d69 65%,#46205d)}
.swap-panel{background:radial-gradient(ellipse at 10% 10%,#6e347b,#301446)}
.player-space{max-width:1120px;width:calc(100% - 48px);margin:48px auto 64px;scroll-margin-top:28px}
.player-heading{margin-bottom:30px}
.player-heading h2{font-size:44px;letter-spacing:.005em;line-height:1.2;margin-bottom:14px}
.player-heading>div>p:last-child{font-size:13px;color:#c2a7cf}
.eyebrow{font-size:11px;letter-spacing:.16em;margin-bottom:10px}
.journey{gap:20px}
.journey-card{min-height:400px;padding:22px;border:1px solid transparent;border-radius:9px;background:none;box-shadow:none;isolation:isolate;--frame-image:url('assets/onepager/card-glass-ps-3x.png')}
/* Share content rows: translated text can grow without moving one CTA alone. */
.journey-card{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0}
.journey-card>.step-heading{grid-row:1}
.journey-card>h3{grid-row:2}
.journey-card>p:not(.step-note){grid-row:3}
.journey-card>.button{grid-row:4;margin-top:0;align-self:stretch}
.journey-card>.step-note,.journey-card>.text-button{grid-row:5;align-self:start}
.journey-card>.connected-actions{grid-row:4 / 6;margin-top:0;align-self:start}
.journey-card>.text-button{justify-self:center}
@media(min-width:1051px){.journey{min-height:400px}}
/* Cover the existing transparent layout border once, without repeating the background. */
.journey-card::before{content:'';position:absolute;inset:-1px;z-index:-1;pointer-events:none;border:12px solid transparent;border-image:var(--frame-image) 84 fill / 28px / 16px stretch}
.journey-card.completed{border-color:transparent;--frame-image:url('assets/onepager/card-active-ps-3x.png')}
#account-step{--frame-image:url('assets/onepager/card-active-ps-3x.png')}
#account-step .step-number,#account-step .step-state{color:var(--cyan)}
.step-heading{margin-bottom:23px;align-items:center}
.step-number{font-size:27px;color:#fff}
.step-state{font-size:10px;letter-spacing:0;color:#ddcfe4;text-align:right}
.journey-card h3{font-size:24px;line-height:1.16;min-height:56px;margin-bottom:15px;color:#fff}
.journey-card>p:not(.step-note){font-size:13px;line-height:1.35;min-height:68px;margin-bottom:24px;color:#fff}
.journey-card>.button{min-height:47px;border-radius:9px;font-size:14px;letter-spacing:.035em;padding:10px 8px;color:#fff;box-shadow:none}
.button-primary{background:linear-gradient(100deg,#57eafa,#00d9f1);border-color:#6cf2ff;color:#fff}
.button-primary:hover{background:#50ecff;color:#fff;box-shadow:0 0 18px #00e3ff55}
.button-secondary,.button:disabled{background:linear-gradient(125deg,#ffffff3d,#ffffff12);border-color:#d8b7e0;color:#eee3f2}
.button:disabled{opacity:.65}
.journey-card>.text-button{font-size:13px;margin-top:17px;line-height:1.25}
.step-note,.journey-card .wishlist-privacy{font-size:11px;line-height:1.5;color:#e0d0e8;margin-top:15px;min-height:33px}
.reward-card .step-number{color:#fff}
.completed .step-number,.completed .step-state{color:var(--cyan)}
.text-button{color:var(--cyan)}
.player-notice{border:1px solid #02dfffa8;background:#006c8580;color:#fff;border-radius:9px;font-size:14px;min-height:52px;padding:14px 22px;margin-bottom:20px}
.player-notice[data-type=error],.auth-message[data-type=error]{border-color:#d02c9c;background:#a61c8bc9;color:#fff}
.inventory-panel{background:linear-gradient(125deg,#ffffff35,#ffffff16);border:1px solid #c1a5c6;border-radius:9px;margin-top:33px;padding:23px;min-height:178px}
.inventory-heading h3{font-size:24px}
.inventory-panel>p{font-size:13px;color:#fff}
.inventory-panel li{background:#29133f65;border-color:#c1a5c63d}
.footer{max-width:1120px;padding-bottom:36px}
.studio-mark{font-size:32px}.footer>p{color:#c8acd4}
#account-dialog{background:linear-gradient(145deg,#582560,#301446);border-color:#d78add}
#account-form input{background:#251034b0}
.newsletter-field{background:#ffffff08}
.auth-message{background:#075d6c80}
.video-error{background:#331442f5}
/* On wide screens, follow the artwork's scale vertically while keeping the UI at its readable size. */
@media(min-width:1921px){
  body{background-size:100% auto}
  .hero{--hero-shift:calc(27.5vw - 528px);height:calc(959px + var(--hero-shift))}
  .hero-content{top:calc(650px + var(--hero-shift))}
}
@media(min-width:761px) and (max-width:1300px){.gallery{width:calc(100% - 64px);grid-template-columns:minmax(0,1fr) 150px;gap:18px}.hero-description{max-width:80%}.hero-description strong{font-size:clamp(16px,1.25vw,24px)}.hero-description span{font-size:clamp(12px,.84vw,16px)}.hero-content>.button,.platforms .button,.platform-link{font-size:12px;min-height:36px}.platforms .button,.platform-link{width:160px}.platforms{gap:16px}.platform-link img{width:calc(85px * 156 / 124);margin:calc(-85px * 16 / 124)}.steam-platform img{width:calc(80px * 154 / 122);margin:calc(-80px * 16 / 122)}.journey-card h3{font-size:21px}}
@media(max-width:1050px){.journey{grid-template-columns:repeat(2,minmax(0,1fr))}.player-heading h2{font-size:36px}.journey-card{min-height:330px}.journey-card h3{min-height:0}.hero{height:calc(959 * var(--u) + 40px)}}
@media(max-width:760px){
  body{background-size:1200px auto;background-position:center 180px}
  .language-switcher{position:relative;top:auto;right:auto;width:fit-content;margin:10px 12px 8px auto;padding:5px 8px}
  .hero{height:auto;min-height:0;padding:0 20px 34px}
  .hero-background{position:relative;width:calc(100% + 40px);max-width:none;margin-left:-20px;left:auto;height:auto;transform:none;mask-image:none}
  .hero-content{position:relative;top:auto;left:auto;right:auto;height:auto;max-width:540px;padding-top:6px}
  .hero .hero-logo{position:static;clip-path:none;overflow:visible;width:220px;height:auto;margin:-55px auto 18px;filter:drop-shadow(0 2px 8px #431848)}
  .hero-description{margin:0 auto;max-width:100%;line-height:1.4}
  .hero-description strong{font-size:17px;line-height:1.35}
  .hero-description span{font-size:12px;line-height:1.5;margin-top:5px}
  .hero-content>.button{position:relative;top:auto;width:100%;max-width:330px;min-height:52px;margin-top:25px;font-size:14px;padding:12px}
  .platforms{position:static;display:grid;grid-template-columns:minmax(0,330px);justify-content:center;gap:12px;width:100%;margin-top:20px}
  .platforms .button,.platform-link{width:100%;height:48px;min-height:48px;padding:8px;font-size:13px;border-radius:16px}
  .platforms .skin-link{grid-column:1/-1;max-width:330px;justify-self:center}
  .platform-link img{width:calc(105px * 156 / 124);max-width:none;margin:calc(-105px * 16 / 124)}.steam-platform{gap:6px}.steam-platform img{width:calc(88px * 154 / 122);margin:calc(-88px * 16 / 122)}
  .gallery{width:calc(100% - 32px);display:flex;gap:12px}.media-stage{border-radius:12px}
  .thumbnail-rail{padding:3px 2px 9px;gap:9px}.thumbnail{width:113px;border-radius:10px}
  .player-space{width:calc(100% - 32px);margin-top:38px;margin-bottom:44px}
  .player-heading h2{font-size:30px}.player-heading{margin-bottom:24px}
  .journey{grid-template-columns:1fr;gap:16px}.journey-card{min-height:0;padding:23px}
  .journey-card h3{font-size:24px;min-height:0}.journey-card>p:not(.step-note){min-height:0;line-height:1.6}
  .step-note,.journey-card .wishlist-privacy{font-size:12px;min-height:0}.step-state{font-size:10px}
  .footer{padding-bottom:30px}.inventory-panel{padding:20px}
}
@media(prefers-reduced-motion:reduce){.platforms .skin-link{animation:none}.skin-link:after{animation:none}}