html { scroll-behavior:smooth; scroll-padding-top:100px; color-scheme:dark; }
.cs-page { margin:0; background:#05070a; color:#e6edf3; font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; }
.cs-page *, .cs-page *::before, .cs-page *::after { box-sizing:border-box; }
.cs-page a { color:inherit; }
.cs-page button { font:inherit; }
.cs-page a:focus-visible, .cs-page button:focus-visible, .cs-page summary:focus-visible { outline:2px solid #00e5ff; outline-offset:5px; }
.cs-main { width:min(1120px,calc(100% - 48px)); margin:auto; }
.cs-skip { position:fixed; left:16px; top:-80px; z-index:200; background:#00e5ff; color:#041015!important; padding:12px 20px; border-radius:8px; }
.cs-skip:focus { top:10px; }
.cs-nav { display:flex; align-items:center; gap:28px; min-height:86px; }
.cs-wordmark { display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:750; font-size:12px; letter-spacing:.8px; }
.cs-wordmark img,.cs-footer-brand img { border-radius:8px; }
.cs-nav-links { display:flex; gap:25px; margin-left:auto; }
.cs-nav-links a { text-decoration:none; color:#94a3b8; font-size:12px; }
.cs-nav-links a:hover { color:#fff; }
.cs-nav-download { display:flex; align-items:center; gap:10px; padding-left:25px; border-left:1px solid #263143; text-decoration:none; font-size:12px; font-weight:650; }
.cs-nav-download svg,.cs-contact svg,.cs-actions svg { width:17px; height:17px; }
.cs-announcement { display:flex; align-items:center; gap:15px; padding:17px 22px; margin:0 0 18px; border:1px solid #227785; border-radius:10px; background:linear-gradient(100deg,#103944,#0b202a 75%); box-shadow:inset 3px 0 #00e5ff; }
.cs-announcement-icon { display:grid; place-items:center; width:35px; height:35px; border-radius:8px; flex:none; background:#0ce6ff14; color:#3bebff; font-size:24px; }
.cs-announcement strong { display:block; font-size:19px; line-height:1.4; letter-spacing:1px; color:#e7fbff; }
.cs-announcement div>span { display:block; font-size:10px; color:#9abdc6; margin-top:2px; }
.cs-announcement>a { display:flex; align-items:center; gap:10px; margin-left:auto; text-decoration:none; color:#a5e7ee; font-size:11px; }
.cs-announcement>a svg { width:16px; height:16px; }
.cs-hero { position:relative; isolation:isolate; min-height:580px; display:flex; align-items:center; overflow:hidden; border:1px solid #263143; border-radius:18px; background:#101b23; }
.cs-hero-art { position:absolute; inset:0 0 0 auto; z-index:-2; width:83%; height:100%; object-fit:cover; object-position:61% 48%; }
.cs-hero::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#080e16 0%,#080e16fa 23%,#080e16c2 38%,#080e1640 57%,transparent 72%); }
.cs-hero::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg,#07101880,transparent 28%); pointer-events:none; }
.cs-hero-copy { width:58%; padding:55px 0 55px 44px; }
.cs-eyebrow { display:block; color:#7e93a7; font-size:10px; letter-spacing:1.9px; font-weight:650; }
.cs-hero .cs-eyebrow { display:flex; align-items:center; gap:8px; color:#b5d5dc; letter-spacing:2px; margin-bottom:31px; }
.cs-hero .cs-eyebrow span { width:6px; height:6px; background:#00e5ff; box-shadow:0 0 14px #00e5ff80; border-radius:50%; }
.cs-game-name { font-size:12px; font-weight:750; letter-spacing:3.4px; margin:0 0 13px; color:#c6d4db; }
.cs-hero h1 { margin:0; font-size:clamp(36px,4.7vw,61px); line-height:1.03; letter-spacing:-2.5px; font-weight:800; }
.cs-hero h1 em { color:#00e5ff; font-style:normal; }
.cs-lead { color:#b6c1cd; font-size:14px; line-height:1.8; margin:24px 0 27px; max-width:300px; }
.cs-actions { display:flex; gap:10px; flex-wrap:wrap; }
.cs-button { display:inline-flex; align-items:center; justify-content:center; gap:13px; padding:12px 18px; min-height:46px; border-radius:7px; text-decoration:none; font-weight:650; font-size:12px; transition:transform .2s,background .2s; }
.cs-button:hover { transform:translateY(-2px); }
.cs-button-primary { background:#00e5ff; color:#041015!important; }
.cs-button-primary:hover { background:#70f0ff; }
.cs-button-secondary { background:#101923b3; border:1px solid #48606a; color:#e5eef2; }
.cs-hero-note { color:#8495a7; font-size:10px; margin:20px 0 0; }
.cs-hero-note span { margin:0 8px; }
.cs-art-caption { position:absolute; right:20px; bottom:18px; color:#cbebebbb; letter-spacing:1.5px; font-size:8px; }
.cs-intro { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; padding:62px 0 36px; }
.cs-page h2 { font-size:34px; line-height:1.2; letter-spacing:-1.1px; margin:13px 0 0; font-weight:700; }
.cs-intro-body p { color:#a4b2c2; margin:0 0 20px; max-width:460px; font-size:14px; }
.cs-tags { display:flex; gap:8px; flex-wrap:wrap; }
.cs-tags span { color:#adbdcc; font-size:10px; padding:5px 10px; border-radius:4px; background:#111923; border:1px solid #23303d; }
.cs-modes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.cs-modes article { position:relative; padding:26px 25px 24px; border:1px solid #23303d; background:linear-gradient(135deg,#111b25,#0b1018); border-radius:10px; }
.cs-mode-number { display:block; font-size:9px; letter-spacing:1.3px; color:#708397; margin-bottom:22px; }
.cs-modes article>svg { display:block; width:27px; height:27px; color:#00d8ef; margin-bottom:19px; }
.cs-modes h3 { font-size:19px; line-height:1.35; margin:0 0 10px; letter-spacing:-.4px; }
.cs-modes p { font-size:12px; line-height:1.8; color:#94a3b8; margin:0 0 24px; max-width:260px; }
.cs-mode-label { font-size:10px; color:#b6c5d3; }
.cs-section { margin-top:68px; }
.cs-section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:27px; }
.cs-section-heading h2 { font-size:29px; }
.cs-section-heading>p { margin:0 0 3px; max-width:210px; font-size:11px; color:#8799ac; }
.cs-gallery { display:grid; grid-template-columns:1.22fr 1fr; gap:22px; }
.cs-gallery figure { margin:0; min-width:0; }
.cs-shot { display:block; position:relative; width:100%; border:1px solid #293747; border-radius:10px; padding:0; background:#111923; overflow:hidden; cursor:zoom-in; }
.cs-shot img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; transition:transform .3s; }
.cs-shot:hover img { transform:scale(1.025); }
.cs-shot-expand { position:absolute; right:12px; bottom:12px; display:grid; place-items:center; width:30px; height:30px; background:#091119dc; border:1px solid #506571; border-radius:5px; color:#fff; }
.cs-gallery figcaption { display:flex; align-items:center; justify-content:space-between; padding-top:14px; }
.cs-gallery figcaption small { display:block; font-size:8px; letter-spacing:1.5px; color:#6f849b; margin-bottom:5px; }
.cs-gallery figcaption strong { font-size:15px; letter-spacing:-.2px; font-weight:600; }
.cs-gallery figcaption>span:last-child { color:#62778b; }
.cs-download { border:1px solid #29404c; padding:43px 42px 27px; border-radius:14px; background:radial-gradient(ellipse at 95% 0%,#08324085,transparent 62%),#0e151e; display:grid; grid-template-columns:1.1fr 1fr; gap:0 55px; }
.cs-download-heading { grid-row:span 2; }
.cs-download h2 { margin-top:14px; font-size:34px; }
.cs-download-heading>p { font-size:12px; color:#9caebf; margin:20px 0 0; }
.cs-download-grid { display:grid; gap:11px; align-content:center; }
.cs-store { display:flex; gap:16px; align-items:center; padding:16px 18px; border:1px solid #364956; border-radius:8px; background:#141f2a; text-decoration:none; transition:background .2s,border-color .2s; }
.cs-store:hover { border-color:#00c2d9; background:#192c37; }
.cs-store>svg:first-child { width:25px; height:25px; color:#00d4ed; flex:none; }
.cs-store>svg:last-child { width:17px; height:17px; margin-left:auto; color:#92a5b9; flex:none; }
.cs-store strong { display:block; font-size:14px; font-weight:600; line-height:1.4; }
.cs-store small { display:block; color:#8297ac; font-size:10px; margin-top:3px; }
.cs-store-note { grid-column:1/-1; margin:27px 0 0; border-top:1px solid #24323f; padding-top:17px; font-size:9px; color:#6e8498; }
.cs-help { display:grid; grid-template-columns:1fr 1.2fr; gap:65px; }
.cs-help h2 { max-width:310px; font-size:29px; }
.cs-contact { display:inline-flex; gap:8px; align-items:center; color:#00d4ed!important; text-decoration:none; font-size:11px; margin-top:24px; }
.cs-faq details { border-bottom:1px solid #23303e; padding:0 0 17px; margin:0 0 17px; }
.cs-faq summary { display:flex; align-items:center; justify-content:space-between; gap:18px; list-style:none; cursor:pointer; font-size:13px; font-weight:550; }
.cs-faq summary::-webkit-details-marker { display:none; }
.cs-faq summary svg { flex:none; width:15px; height:15px; color:#7f93a8; transition:transform .2s; }
.cs-faq details[open] summary svg { transform:rotate(45deg); }
.cs-faq p { color:#8fa2b6; font-size:12px; line-height:1.8; margin:14px 30px 0 0; }
.cs-faq p a { color:#00d4ed; text-underline-offset:3px; }
.cs-footer { display:flex; align-items:center; gap:30px; border-top:1px solid #23303d; margin-top:70px; padding:27px 0 35px; }
.cs-footer-brand { display:flex; align-items:center; gap:10px; font-size:12px; font-weight:650; text-decoration:none; }
.cs-footer-brand small { display:block; color:#71869a; font-size:9px; font-weight:400; margin-top:1px; }
.cs-footer nav { display:flex; gap:22px; margin-left:auto; }
.cs-footer nav a { text-decoration:none; color:#8b9db0; font-size:10px; }
.cs-footer nav a:hover { color:#fff; }
.cs-copyright { color:#536b81; font-size:9px; }
.cs-lightbox { width:min(1120px,calc(100% - 32px)); max-height:calc(100dvh - 32px); padding:44px 16px 12px; margin:auto; overflow:auto; border:1px solid #344b5f; border-radius:12px; color:#d6e5ef; background:#0b121a; }
.cs-lightbox::backdrop { background:#02070de8; backdrop-filter:blur(10px); }
.cs-lightbox img { display:block; width:100%; height:auto; }
.cs-lightbox p { margin:12px 0 0; font-size:12px; text-align:center; }
.cs-lightbox-close { position:absolute; right:8px; top:4px; width:36px; height:36px; font-size:25px!important; color:#afbdcb; background:transparent; border:0; cursor:pointer; }
@media (min-width:1300px) { .cs-hero { min-height:600px; } }
@media (max-width:900px) { .cs-hero-copy { padding-left:30px; width:62%; }.cs-hero { min-height:530px; }.cs-hero h1 { font-size:46px; }.cs-hero-art { object-position:62% center; width:94%; }.cs-intro { gap:35px; }.cs-modes article { padding:22px 19px; }.cs-modes h3 { font-size:17px; }.cs-download { gap:0 25px; padding:32px; }.cs-download h2 { font-size:30px; }.cs-help { gap:32px; }.cs-copyright { display:none; } }
@media (max-width:640px) {
  .cs-announcement { padding:15px 16px; gap:12px; margin-bottom:14px; }.cs-announcement strong { font-size:18px; }.cs-announcement>a { display:none; }
  html { scroll-padding-top:85px; }.cs-main { width:calc(100% - 32px); }.cs-nav { min-height:77px; gap:12px; flex-wrap:wrap; padding:15px 0; }.cs-wordmark { font-size:10px; letter-spacing:.5px; }.cs-wordmark img { width:29px; height:29px; }.cs-nav-links { display:none; }.cs-nav-download { margin-left:auto; padding-left:12px; font-size:10px; gap:6px; }.cs-nav-download svg { width:14px; }
  .cs-hero { min-height:740px; align-items:start; border-radius:12px; }.cs-hero-art { width:100%; height:60%; top:auto; object-position:60% 22%; }.cs-hero::before { background:linear-gradient(180deg,#080e16 0%,#080e16 36%,#080e16df 42%,#080e1600 61%); }.cs-hero-copy { width:100%; padding:29px 25px 0; }.cs-hero .cs-eyebrow { margin-bottom:27px; font-size:9px; }.cs-game-name { font-size:10px; letter-spacing:2.8px; margin-bottom:12px; }.cs-hero h1 { font-size:clamp(37px,8.5vw,52px); letter-spacing:-1.8px; }.cs-lead { margin:20px 0; font-size:12px; max-width:300px; line-height:1.7; }.cs-button { padding:11px 14px; font-size:11px; gap:8px; min-height:44px; }.cs-hero-note { margin-top:17px; font-size:9px; }.cs-art-caption { font-size:7px; bottom:13px; right:14px; }
  .cs-intro { grid-template-columns:1fr; gap:23px; padding:42px 0 27px; }.cs-page h2 { font-size:29px; }.cs-intro-body p { font-size:13px; }.cs-eyebrow { font-size:9px; letter-spacing:1.5px; }.cs-modes { grid-template-columns:1fr; gap:10px; }.cs-modes article { display:grid; grid-template-columns:34px 1fr; column-gap:15px; padding:22px 20px; }.cs-mode-number { grid-column:1/-1; font-size:8px; margin-bottom:17px; }.cs-modes article>svg { grid-column:1; grid-row:2/5; width:25px; margin:1px 0 0; }.cs-modes h3 { grid-column:2; font-size:18px; margin-bottom:7px; }.cs-modes p { grid-column:2; max-width:none; margin-bottom:12px; }.cs-mode-label { grid-column:2; font-size:9px; }
  .cs-section { margin-top:44px; }.cs-section-heading { display:block; margin-bottom:20px; }.cs-section-heading h2 { font-size:27px; }.cs-section-heading>p { max-width:none; margin:14px 0 0; font-size:11px; }.cs-gallery { grid-template-columns:1fr; gap:24px; }.cs-gallery figcaption strong { font-size:14px; }
  .cs-download { display:block; padding:27px 22px 19px; }.cs-download h2 { font-size:31px; }.cs-download-grid { margin-top:26px; }.cs-store { min-height:77px; }.cs-download-heading>p { margin-top:15px; }.cs-store-note { margin-top:21px; line-height:1.8; }
  .cs-help { display:block; }.cs-help h2 { max-width:none; font-size:28px; }.cs-contact { margin:17px 0 25px; }.cs-faq details { padding-bottom:17px; margin-bottom:17px; }.cs-faq summary { font-size:12px; min-height:27px; }.cs-footer { margin-top:38px; gap:24px; flex-wrap:wrap; padding:23px 0 30px; }.cs-footer nav { gap:20px; width:100%; margin-left:0; }.cs-footer nav a { font-size:10px; }
}
@media (max-width:370px) { .cs-main { width:calc(100% - 24px); }.cs-hero-copy { padding-left:20px; padding-right:18px; }.cs-hero { min-height:720px; }.cs-hero h1 { font-size:36px; }.cs-button { padding:10px 11px; font-size:10px; }.cs-nav-download { border:0; padding-left:0; }.cs-wordmark { font-size:9px; }.cs-download { padding:25px 18px 17px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.cs-page * { transition:none!important; } }

.cs-coming-platforms { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.cs-coming-platform { display:flex; align-items:center; gap:10px; padding:12px; border:1px solid #253540; border-radius:7px; background:#111b23; color:#8295a8; }
.cs-coming-platform>svg { width:20px; height:20px; flex:none; }
.cs-coming-platform strong { display:block; font-size:11px; font-weight:550; }
.cs-coming-platform small { display:block; font-size:9px; color:#657f92; margin-top:2px; }

@media (max-width:640px) {
  .cs-hero { min-height:0; flex-direction:column; align-items:stretch; }
  .cs-hero-copy { order:1; padding-bottom:28px; }
  .cs-hero-art { order:2; position:relative; inset:auto; width:100%; height:340px; object-position:62% center; z-index:0; }
  .cs-hero::before { display:none; }
  .cs-hero::after { display:none; }
  .cs-art-caption { z-index:1; }
}
@media (max-width:370px) { .cs-hero-art { height:295px; } }