:root { color-scheme:dark; font-family:Inter,"Microsoft YaHei",system-ui,sans-serif; background:#09134f; color:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { min-width:320px; margin:0; overflow-x:hidden; background:linear-gradient(#06145d,#17106c 65%,#090d3b); }
a { color:inherit; }
.arcade-page { min-height:100svh; }
.arcade-hero { position:relative; display:grid; min-height:590px; overflow:hidden; align-content:start; isolation:isolate; background:linear-gradient(180deg,#0c72cf 0%,#0b2d92 64%,#111869 100%); }
.arcade-hero::after { content:""; position:absolute; z-index:-1; inset:auto 0 0; height:42%; background:linear-gradient(transparent,#111869 72%); }
.scene-art { position:absolute; z-index:-2; width:max(900px,130vw); height:100%; left:50%; top:0; transform:translateX(-50%); object-fit:cover; opacity:.92; }
.hero-copy { position:relative; z-index:2; width:min(680px,calc(100% - 32px)); margin:0 auto; padding-top:36px; text-align:center; text-shadow:0 5px 16px rgb(0 13 75 / 60%); }
.brand { display:inline-flex; min-height:30px; align-items:center; margin:0 0 12px; padding:0 14px; border:1px solid rgb(255 255 255 / 34%); border-radius:999px; background:rgb(8 30 105 / 40%); font-size:.72rem; font-weight:900; letter-spacing:.16em; }
.eyebrow { margin:0 0 5px; color:#85efff; font-size:.72rem; font-weight:900; letter-spacing:.28em; }
h1 { margin:0; font-size:clamp(3.2rem,15vw,7rem); line-height:.88; letter-spacing:-.065em; white-space:pre-line; transform:skew(-4deg); }
.hero-copy > p:last-child { margin:14px 0 0; color:#c9f5ff; font-weight:700; letter-spacing:.12em; }
.app-card { position:absolute; z-index:3; bottom:20px; left:50%; display:grid; justify-items:center; transform:translateX(-50%); }.app-card img { width:104px; height:104px; border:3px solid rgb(255 255 255 / 78%); border-radius:24px; box-shadow:0 0 34px #27e0ff,0 18px 30px rgb(0 7 62 / 50%); }.app-card strong { margin-top:10px; font-size:1.15rem; text-shadow:0 3px 9px #02072c; }
.download-zone { padding:36px 16px 24px; background:#111869; }
.download-buttons { display:grid; width:min(470px,100%); gap:16px; margin:0 auto; }
.download-button { position:relative; display:grid; min-height:64px; grid-template-columns:42px 1fr 24px; align-items:center; gap:8px; padding:0 18px; overflow:hidden; border:2px solid #94edff; border-radius:13px; background:linear-gradient(180deg,#287cf4,#2449ce 52%,#172d9f); box-shadow:inset 0 0 0 3px rgb(255 255 255 / 10%),0 0 24px rgb(35 187 255 / 35%); font-size:1.08rem; font-weight:800; text-decoration:none; }.download-button::before,.download-button::after { content:""; position:absolute; width:12px; height:12px; border:4px solid #ffd96c; transform:rotate(45deg); }.download-button::before { left:8px; top:8px; }.download-button::after { right:8px; bottom:8px; }.download-button svg { width:36px; height:36px; fill:#fff; stroke:#fff; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }.download-button b { color:#8ff4ff; font-size:1.4rem; }.download-button:active { transform:translateY(2px); }.download-button:focus-visible { outline:4px solid #fff36d; outline-offset:4px; }
.about-link { display:flex; width:max-content; align-items:center; gap:9px; margin:28px auto 0; color:#9aefff; font-size:.88rem; font-weight:800; text-decoration:none; }.about-link i { font-style:normal; animation:bob 1.4s infinite; }
.about { width:min(680px,calc(100% - 32px)); margin:0 auto 36px; padding:26px 22px; border:1px solid rgb(156 223 255 / 65%); border-radius:18px; background:rgb(8 14 70 / 58%); box-shadow:0 24px 70px rgb(0 5 35 / 25%); text-align:center; }.section-label { margin:0 0 4px!important; color:#58ddff!important; font-size:.68rem!important; font-weight:900; letter-spacing:.24em; }.about h2 { margin:0 0 14px; font-size:1.55rem; }.about > p:last-child { margin:0; color:#d9e1ff; font-size:.95rem; line-height:1.85; }
.site-footer { padding:0 16px max(22px,env(safe-area-inset-bottom)); color:#8690c2; font-size:.7rem; text-align:center; }
@keyframes bob { 50% { transform:translateY(4px); } }
@media (max-width:480px) { .arcade-hero { min-height:560px; } .scene-art { width:100%; object-fit:fill; } .hero-copy { padding-top:28px; } .download-zone { padding-top:30px; } }
@media (max-height:810px) and (max-width:480px) { .arcade-hero { min-height:520px; } h1 { font-size:3.3rem; } .app-card img { width:88px; height:88px; } }
@media (min-width:800px) { .arcade-page { display:grid; min-height:720px; grid-template-columns:minmax(0,1.2fr) minmax(430px,.8fr); grid-template-rows:1fr auto; }.arcade-hero { min-height:720px; grid-row:1 / 3; }.hero-copy { padding-top:86px; }.app-card { bottom:72px; }.download-zone { display:grid; align-content:center; padding:80px 44px 26px; background:linear-gradient(145deg,#121a70,#0b104c); }.about { align-self:start; width:calc(100% - 88px); margin:-200px 44px 0; position:relative; z-index:2; }.site-footer { display:none; } }