*{box-sizing:border-box;margin:0;padding:0}
:root{color-scheme:dark;--bg:#10100e;--panel:#191915;--gold:#e8c677;--muted:#b5b0a3;--line:#6d593440}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{background:#070908;color:#f6f2e8;font-family:Arial,Helvetica,sans-serif;line-height:1.5;padding-bottom:calc(112px + env(safe-area-inset-bottom));min-width:280px}
a{color:inherit}img{display:block;max-width:100%}
.page{width:100%;max-width:620px;margin:auto;background:var(--bg);box-shadow:0 0 100px #000}
.header{display:flex;align-items:center;gap:12px;padding:20px 24px;border-bottom:1px solid var(--line);background:linear-gradient(120deg,#1c1c17,#0e1210)}
.logo{width:56px;height:56px;border-radius:22%;flex:none}
.brand{display:flex;flex-direction:column}.brand strong{font-size:29px;letter-spacing:3px;line-height:1.15}.brand span{font-size:9px;letter-spacing:2px;color:var(--gold);margin-top:5px}
.header-tag{margin-left:auto;border:1px solid #806333;border-radius:5px;padding:5px 8px;font-size:10px;letter-spacing:1px;color:var(--gold);white-space:nowrap}
.hero{background:radial-gradient(ellipse at 50% 25%,#2c2819,transparent 65%),#10100e;overflow:hidden}
.hero-copy{text-align:center;padding:28px 16px 4px;position:relative;z-index:1}
.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--gold);margin-bottom:10px}
h1{font-size:clamp(29px,7.3vw,44px);line-height:1.13;letter-spacing:-1.4px}h1 em{font-style:normal;color:var(--gold)}
.hero-copy>p:last-child{font-size:13px;color:#c9c3b3;margin-top:12px}
.hero-art{width:100%;aspect-ratio:1080/1570;background-image:linear-gradient(to bottom,#10100e 0%,transparent 15%,transparent 75%,#10100e 100%),url('assets/xa7-hero-v2-20261111-r3.webp');background-size:100% 100%,100% auto;background-position:center top;background-repeat:no-repeat;filter:saturate(.72)}
.hero-note{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 24px 24px;margin-top:-12px;position:relative}.hero-note>span{font-size:9px;letter-spacing:1.2px;color:var(--muted)}.hero-note a{font-size:11px;color:var(--gold);text-decoration:none}.hero-note a span{margin-left:7px}
.section{margin:0 20px 24px;padding:22px 18px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(135deg,#202019,#141512)}
h2{font-size:22px;line-height:1.25;letter-spacing:-.5px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}.count{font-size:29px;font-weight:700;color:var(--gold)}
.game-grid{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}.game-grid li{min-width:0;text-align:center;background:#0d100e;border:1px solid #765e354d;border-radius:10px;padding:7px 7px 9px}.game-grid img{width:100%;height:auto;aspect-ratio:150/128;object-fit:contain}.game-grid span{display:block;font-size:11px;color:#e6d7b6;margin-top:6px}
.benefit-grid{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px;margin-top:24px}.benefit-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid #887040;border-radius:10px;color:var(--gold);font-size:23px;background:#b3903412;margin-bottom:10px}.benefit-grid strong{font-size:13px;display:block}.benefit-grid p{font-size:11px;color:var(--muted);margin-top:4px}
.footer{text-align:center;padding:6px 20px 28px}.footer>span{font-size:23px;letter-spacing:5px;color:var(--gold);font-weight:bold}.footer p{font-size:10px;letter-spacing:2px;color:var(--muted);margin-top:4px}
.download-bar{position:fixed;z-index:10;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:620px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 20px calc(15px + env(safe-area-inset-bottom));background:#151611f5;border-top:1px solid #c8a45180;box-shadow:0 -8px 28px #0005;backdrop-filter:blur(14px)}
.bonus{flex:1;min-width:0}.bonus>span{display:block;font-size:8px;letter-spacing:1.3px;color:#c9b67f}.bonus strong{display:block;font-size:17px;white-space:nowrap;margin-top:3px}.bonus em{font-style:normal;color:var(--gold)}
.download-button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:10px 14px;border:1px solid #f4d98e;border-radius:9px;color:#201908;background:linear-gradient(115deg,#fff0b5,#dfb65d 65%,#edcf8a);box-shadow:0 3px 15px #d7ad4720;text-decoration:none;font-size:11px;font-weight:800;white-space:nowrap}.download-button>span:first-child{font-size:24px;line-height:1}.download-button small{display:block;font-size:9px;font-weight:400;opacity:.78;margin-top:1px}.download-button:hover{background:#f7dfa2}.download-button:focus-visible,a:focus-visible{outline:3px solid #fff;outline-offset:4px}
@media(min-width:500px){.game-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.section{padding:26px 22px}.game-grid span{font-size:10px}.benefit-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.download-bar{padding-left:28px;padding-right:28px}.download-button{min-width:220px}.bonus strong{font-size:22px}}
@media(max-width:350px){.header{padding:16px;gap:9px}.logo{width:46px;height:46px}.header-tag{font-size:8px;padding:4px}.brand strong{font-size:25px}.brand span{font-size:7px}.section{margin-left:12px;margin-right:12px;padding:18px 12px}h2{font-size:20px}.download-bar{padding-left:12px;padding-right:12px;gap:8px}.bonus strong{font-size:15px}.download-button{font-size:10px;padding:10px}.hero-note{padding-left:16px;padding-right:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}