:root {
    color-scheme: light;
    --navy: #0d2038;
    --paper: #f3efe7;
    --cyan: #23d8ec;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body.pg-page { margin: 0; background: #091627; color: #f9fbff; font: 18px/1.45 'Source Sans 3', Arial, sans-serif; }
a { color: inherit; text-underline-offset: 4px; }
button, input { font: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid #ffdf8c; outline-offset: 5px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.08; }
.pg-site { max-width: 1440px; margin: auto; box-shadow: 0 0 60px #0005; }
.pg-header { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 10px 4%; background: #122139; border-bottom: 1px solid #4a9ac2; min-height: 90px; }
.pg-brand { width: 200px; flex-shrink: 0; }
.pg-brand img { display: block; width: 100%; height: auto; }
.pg-header nav { display: flex; justify-content: center; flex: 1; gap: clamp(20px, 4vw, 65px); }
.pg-header nav a { text-decoration: none; font-weight: 600; }
.pg-header nav a:hover { color: var(--cyan); }
.pg-button { display: inline-flex; align-items: center; justify-content: center; border: 1px solid #c0faff; border-radius: 5px; padding: 10px 30px; min-height: 46px; background: linear-gradient(#35edee, #0bb5cf); box-shadow: inset 0 0 0 2px #b8ffff45; color: #052332; font-weight: 700; text-decoration: none; text-align: center; cursor: pointer; }
.pg-button:hover { background: #80f6fa; }
.pg-secondary { color: white; background: #11253db5; border-color: #dce8f1; box-shadow: inset 0 0 0 2px #ffffff24; }
.pg-secondary:hover { background: #25415b; }
.pg-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 24px; }
.pg-hero { min-height: 420px; position: relative; overflow: hidden; background: #18334f; }
.pg-hero-art { position: absolute; inset: 0 0 0 35%; background: url('../img/preregister-artwork.png') 100% 4.53% / 177.16% auto no-repeat; }
.pg-hero:after { position: absolute; content: ''; inset: 0; background: linear-gradient(90deg,#11263f 0%,#11263fee 28%,#11263f35 53%,transparent 70%); pointer-events: none; }
.pg-hero-copy { position: relative; z-index: 1; padding: 42px 4% 30px; max-width: 720px; }
.pg-eyebrow { text-transform: uppercase; letter-spacing: 2px; font-size: 13px; font-weight: 700; }
.pg-hero h1 { font-size: clamp(36px,4.3vw,62px); margin: 14px 0; letter-spacing: -.8px; }
.pg-hero em { color: var(--cyan); font-family: Spectral, Georgia, serif; }
.pg-launch { font-size: 14px; margin-top: 18px; }
.pg-paper { background: radial-gradient(ellipse at top,#fffaf2,var(--paper)); color: var(--navy); border-block: 4px double #adb4b5; border-radius: 18px 18px 0 0; }
.pg-section-heading { text-align: center; margin-bottom: 25px; }
.pg-section-heading h2 { font: 700 clamp(27px,3vw,39px)/1.15 Spectral, Georgia, serif; }
.pg-section-heading p { margin-top: 7px; }
.pg-rewards { padding: 26px 4% 18px; }
.pg-reward-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.pg-reward { display: flex; align-items: center; gap: 12px; padding: 12px; border: 3px double #c5c3bd; border-radius: 12px 4px; background: #fffcf450; }
.pg-reward h3 { font-size: 25px; margin-bottom: 7px; }
.pg-reward p { font-size: 16px; line-height: 1.3; }
.pg-reward-art { display: block; flex: 0 0 110px; width: 110px; height: 95px; background-image: url('../img/preregister-artwork.png'); background-repeat: no-repeat; mix-blend-mode: multiply; }
.pg-title-art { background-size: 930.91% auto; background-position: 7.11% 30.44%; }
.pg-cosmetic-art { background-size: 930.91% auto; background-position: 41.36% 30.44%; }
.pg-supplies-art { background-size: 930.91% auto; background-position: 75.71% 30.44%; }
.pg-note { text-align: center; font-size: 13px; margin-top: 18px; opacity: .85; }
.pg-milestones { padding: 26px 8% 22px; background: radial-gradient(ellipse at top,#284765,#102139 70%); }
.pg-count { text-align: center; color: #9beaf4; font-weight: 600; margin: -9px 0 18px; }
.pg-milestone-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 30px; }
.pg-milestone { display: grid; justify-items: center; gap: 4px; }
.pg-milestone strong { font-size: 31px; border: 1px solid #9bb3c8; border-radius: 8px 3px; padding: 8px; width: 100%; max-width: 180px; text-align: center; }
.pg-milestone>span:last-child { font-size: 13px; color: #bac9d7; }
.pg-milestone.is-reached strong { border-color: var(--cyan); color: var(--cyan); }
.pg-chest { display: block; width: 100px; height: 70px; background-image: url('../img/preregister-artwork.png'); background-repeat: no-repeat; background-size: 1024% auto; border-radius: 10px; }
.pg-chest-0 { background-position: 13.2% 43.45%; }
.pg-chest-1 { background-position: 37.7% 43.45%; }
.pg-chest-2 { background-position: 62.5% 43.45%; }
.pg-chest-3 { background-position: 87.3% 43.45%; }
progress { display: block; width: 100%; height: 8px; margin-top: 22px; border: 1px solid #acc2d4; border-radius: 8px; background: #294058; accent-color: var(--cyan); overflow: hidden; }
progress::-webkit-progress-bar { background: #294058; }
progress::-webkit-progress-value { background: var(--cyan); }
.pg-discover { padding: 28px 2.5% 24px; }
.pg-feature-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.pg-feature { overflow: hidden; position: relative; border: 3px double #718294; border-radius: 9px; background: #14283e; color: white; }
.pg-feature-art { width: 100%; aspect-ratio: 475/190; background-image: url('../img/preregister-artwork.png'); background-size: 215.579% auto; background-repeat: no-repeat; }
.pg-hud-art { background-position: 4.55% 65.08%; }
.pg-fate-art { background-position: 95.99% 65.08%; }
.pg-market-art { background-position: 4.55% 84.92%; }
.pg-faction-art { background-position: 95.99% 84.92%; }
.pg-feature-label, .pg-preview { position: absolute; top: 10px; padding: 4px 10px; background: #15324dea; border: 1px solid #8fbdce; border-radius: 4px; font-size: 12px; line-height: 1.2; }
.pg-feature-label { left: 9px; text-transform: uppercase; font-weight: 700; }
.pg-preview { right: 9px; }
.pg-feature-copy { padding: 19px 20px 23px; background: linear-gradient(#19364b,#12243a); }
.pg-feature-copy h3 { font-size: clamp(23px,2.5vw,30px); margin-bottom: 8px; }
.pg-feature-copy p { font-size: 17px; line-height: 1.4; }
.pg-paths { display: flex; justify-content: space-around; gap: 10px; padding: 8px 14px; background: #142c42; }
.pg-paths span { padding: 4px 12px; border: 1px solid #7caebc; border-radius: 18px; font-size: 14px; }
.pg-join { text-align: center; color: white; margin-top: 26px; padding: 30px 18px 20px; border: 4px double #b6c5d4; border-radius: 14px 3px; background: linear-gradient(90deg,#143556d9,#142940ed,#143556d9),url('../img/hero.png') center 35%/cover; }
.pg-join h2 { font: 700 clamp(28px,3vw,40px)/1.1 Spectral,Georgia,serif; margin-bottom: 10px; }
.pg-join .pg-actions { justify-content: center; }
.pg-join a:not(.pg-button) { color: #83eef6; }
.pg-footer { background: radial-gradient(ellipse at top,#182f4b,#0b192b); padding: 24px 4% 30px; border-top: 2px solid #4d96b2; }
.pg-footer-nav { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.pg-footer-brand { width: 230px; }
.pg-footer-brand img { display: block; width: 100%; height: auto; }
.pg-footer-nav nav { display: flex; flex-wrap: wrap; gap: 30px; }
.pg-footer-nav a { text-decoration: none; }
.pg-credits { text-align: center; max-width: 1040px; margin: 20px auto 0; }
.pg-developed { text-transform: uppercase; letter-spacing: 5px; font-weight: 600; margin-bottom: 16px; }
.pg-gameguyz { position: relative; overflow: hidden; width: 280px; aspect-ratio: 790/500; margin: auto auto 20px; mix-blend-mode: screen; }
.pg-gameguyz img { position: absolute; width: 129.62%; max-width: none; height: auto; left: -15.19%; top: -50%; }
.pg-credits p { margin-bottom: 12px; }
.pg-credits p:not(.pg-developed):not(.pg-copyright) { font-size: 15px; color: #c9d3df; }
.pg-copyright { font-size: 19px; }
.pg-powered { margin-top: 18px; }
.pg-register-panel { max-width: 820px; margin: 50px auto; padding: 50px 35px; text-align: center; background: #f6f1e8; color: var(--navy); border: 4px double #99b9c9; border-radius: 12px; }
.pg-register-panel h1 { font: 700 38px/1.15 Spectral,Georgia,serif; margin: 14px 0 20px; }
.pg-register-panel p { margin-bottom: 20px; }
.pg-register-panel .pg-actions { justify-content: center; }
.pg-register-panel .pg-secondary { background: #17334d; }
.pg-confirmation { color: #176047; font-weight: 700; }
.pg-alert { padding: 15px; background: #fff1d4; border: 1px solid #9b6c23; }
.pg-back { display: block; margin-top: 28px; }
.pg-skip { position: absolute; top: -100px; z-index: 10; background: white; color: #12243a; padding: 12px; }
.pg-skip:focus { top: 0; }
@media(max-width: 1000px) {
    .pg-header { gap: 15px; }
    .pg-brand { width: 155px; }
    .pg-header nav { gap: 22px; }
    .pg-header .pg-button { padding-inline: 18px; }
    .pg-reward { flex-direction: column; text-align: center; }
    .pg-reward-art { flex-basis: 95px; }
    .pg-hero-art { inset-inline-start: 25%; }
    .pg-hero-copy { padding-top: 50px; }
}
@media(max-width: 650px) {
    body.pg-page { font-size: 16px; }
    .pg-header { flex-wrap: wrap; padding: 8px 18px 16px; }
    .pg-brand { width: 140px; }
    .pg-header nav { order: 3; flex-basis: 100%; gap: 35px; }
    .pg-header .pg-button { font-size: 14px; min-height: 40px; padding: 8px 18px; }
    .pg-hero { padding-top: 190px; }
    .pg-hero-art { inset: 0 0 auto; height: 240px; background-size: 177.16% auto; }
    .pg-hero:after { background: linear-gradient(transparent 100px,#142d47 240px); }
    .pg-hero-copy { padding: 15px 22px 28px; }
    .pg-hero h1 { font-size: 38px; }
    .pg-actions { gap: 12px; }
    .pg-actions .pg-button { flex: 1; padding-inline: 14px; }
    .pg-desktop-break { display: none; }
    .pg-reward-grid { grid-template-columns: 1fr; gap: 12px; }
    .pg-reward { flex-direction: row; text-align: left; }
    .pg-reward-art { flex-basis: 110px; }
    .pg-reward h3 { font-size: 22px; }
    .pg-milestones { padding-inline: 20px; }
    .pg-milestone-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
    .pg-feature-grid { grid-template-columns: 1fr; gap: 18px; }
    .pg-discover { padding-inline: 14px; }
    .pg-feature-copy h3 { font-size: 27px; }
    .pg-preview, .pg-feature-label { font-size: 10px; padding-inline: 6px; }
    .pg-join .pg-actions { flex-direction: column; }
    .pg-footer-nav { flex-direction: column; }
    .pg-footer-nav nav { gap: 20px; justify-content: center; }
    .pg-gameguyz { width: 230px; }
    .pg-credits { margin-top: 30px; }
    .pg-register-panel { margin: 25px 14px; padding: 30px 20px; }
    .pg-register-panel h1 { font-size: 31px; }
}
@media(prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }