:root { color-scheme: dark; --bg:#050b18; --text:#f4f7ff; --muted:#9aabc2; --cyan:#55e8f5; --gold:#ffbe55; --line:#849cbd2e; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:20px; }
body { margin:0; background:radial-gradient(ellipse at 75% 2%,#1d385538,transparent 43%),var(--bg); color:var(--text); }
a { color:inherit; text-decoration:none; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
a:focus-visible { outline:2px solid var(--cyan); outline-offset:5px; }
img { display:block; max-width:100%; }
.masthead,main,footer { max-width:1160px; margin:auto; }
.masthead { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px 34px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:12px; min-height:44px; font-size:23px; font-weight:450; letter-spacing:3.5px; white-space:nowrap; }
.brand>svg { width:28px; height:28px; color:var(--cyan); filter:drop-shadow(0 0 6px #55e8f580); }
.brand small { font-size:9px; letter-spacing:2.5px; color:var(--muted); margin-left:7px; font-weight:650; }
.masthead nav { display:flex; gap:26px; color:#b4c5db; font-size:12px; }
.masthead nav a { display:flex; align-items:center; min-height:44px; }
.masthead nav a:hover { color:var(--cyan); }
.intro { padding:45px 34px 32px; position:relative; }
.eyebrow { font-size:9px; font-weight:600; letter-spacing:2.2px; color:#91bfce; margin:0 0 16px; }
h1 { font-size:clamp(48px,6.1vw,78px); line-height:1.05; font-weight:550; letter-spacing:-3.8px; margin:0; }
h1 span { color:var(--cyan); }
.intro-copy { color:#a6b6cb; font-size:15px; line-height:1.8; margin:20px 0 0; }
.quick-games { position:absolute; right:36px; bottom:36px; display:flex; gap:8px; }
.quick-games a { min-height:44px; display:flex; align-items:center; gap:22px; padding:10px 14px; border:1px solid #6b8ba54f; border-radius:8px; color:#c6d7e8; background:#13243a66; font-size:11px; }
.quick-games span { color:var(--cyan); }
.games { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; padding:0 34px; }
.game { min-width:0; border:1px solid #6b8ba54f; border-radius:19px; overflow:hidden; background:linear-gradient(145deg,#182940c9,#081222); box-shadow:inset 0 1px #cee9ff0f,0 12px 32px #0003; }
.game-art { display:block; position:relative; height:280px; overflow:hidden; border-bottom:1px solid var(--line); isolation:isolate; }
.game-art:after { content:''; position:absolute; inset:0; background:linear-gradient(#050b1840,transparent 35%,#050b1800 65%,#050b18b3); pointer-events:none; z-index:1; }
.game-index { position:absolute; z-index:2; top:22px; left:24px; color:#bfd2e5; font-size:8px; letter-spacing:1.8px; }
.alien-art { background:#050b18 url('/alien/art/deep-space.webp') center 60%/cover; }
.alien-art:before { content:''; position:absolute; width:60%; height:70%; left:20%; bottom:-10%; background:radial-gradient(ellipse,#3ba9c81a,transparent 65%); }
.fleet { position:absolute; top:61px; left:12%; right:12%; display:flex; align-items:center; justify-content:space-between; gap:2px; }
.fleet img { width:18%; height:auto; filter:drop-shadow(0 3px 7px #060a17); }
.fleet img:nth-child(even) { transform:translateY(29px); }
.player-ship { position:absolute; width:94px; height:94px; bottom:38px; left:calc(50% - 47px); filter:drop-shadow(0 5px 16px #55e8f533); transition:transform .3s ease; }
.flight-path { position:absolute; top:148px; bottom:120px; left:50%; width:3px; display:flex; flex-direction:column; justify-content:space-between; }
.flight-path i { display:block; height:16px; width:3px; border-radius:3px; background:#d5ffff; box-shadow:0 0 8px 2px #38dcff99; }
.art-caption { position:absolute; bottom:19px; left:0; right:0; z-index:2; text-align:center; font-size:8px; letter-spacing:2px; color:#a6c8db; }
.block-art { background:radial-gradient(ellipse at 15% 65%,#17425655,transparent 60%),radial-gradient(ellipse at 90% 20%,#66389f30,transparent 65%),#050c19; }
.block-art>img { height:100%; width:100%; object-fit:contain; padding:22px 20px 16px; transition:transform .3s ease; }
.game-art:hover .player-ship { transform:translateY(-7px); }.game-art:hover>img:not(.player-ship) { transform:scale(1.025); }
.game-copy { padding:24px; }
.game-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; }
h2 { font-size:23px; font-weight:550; letter-spacing:-.4px; margin:0; }
.mode { color:#8bc9d4; font-size:8px; letter-spacing:.7px; }
.block-game .mode { color:#c6a5ee; }
.game-copy>p { font-size:13px; line-height:1.8; color:#a6b8cf; min-height:70px; margin:15px 0 19px; max-width:420px; }
.game-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:19px; border-top:1px solid var(--line); }
.game-footer>span { font-size:8px; color:#91a5be; letter-spacing:.7px; }
.play-button { display:inline-flex; align-items:center; justify-content:center; gap:13px; min-height:44px; padding:10px 14px; border-radius:9px; border:1px solid #ffdfa48f; background:linear-gradient(145deg,#ffe2a2,#f2b34d); color:#35230a; box-shadow:inset 0 1px #fff6d9,0 3px 10px #0004; font-size:12px; font-weight:650; white-space:nowrap; transition:transform .1s,filter .1s; }
.play-button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.play-button:active { transform:translateY(2px); filter:brightness(.93); }
.block-game .play-button { color:#b9f4fc; border-color:#70b4cc88; background:linear-gradient(145deg,#24475c,#11283d); box-shadow:inset 0 1px #a6e6f638,0 3px 10px #0004; }
.play-your-way { display:grid; grid-template-columns:1.1fr repeat(3,1fr); gap:28px; padding:53px 34px 50px; }
.section-intro .eyebrow { font-size:8px; line-height:1.6; margin-bottom:10px; }
.section-intro h2 { font-size:27px; letter-spacing:-.7px; }
.detail-number { display:block; color:#6d8eac; font-size:9px; margin:0 0 10px; }
h3 { font-size:13px; font-weight:550; margin:0 0 10px; color:#cfdfec; }
.play-your-way p:not(.eyebrow) { font-size:11px; line-height:1.8; color:#94a9c1; margin:0; }
footer { display:flex; align-items:center; gap:20px; padding:15px 34px 28px; border-top:1px solid var(--line); color:#8c9fb8; font-size:10px; }
.footer-brand { display:flex; align-items:center; min-height:44px; font-size:13px; letter-spacing:2px; color:#c2d0e0; }.footer-brand span { font-size:7px; letter-spacing:1.5px; margin-left:5px; color:#8c9fb8; }
footer>a:last-child { margin-left:auto; min-height:44px; display:flex; align-items:center; }
@media(max-width:850px) { .game-heading { align-items:flex-start; flex-direction:column; gap:7px; }.game-copy { padding:20px; }.game-footer { flex-direction:column; align-items:stretch; gap:12px; }.game-footer>span { text-align:center; }.game-art { height:280px; }.play-your-way { grid-template-columns:repeat(3,1fr); gap:23px; }.section-intro { grid-column:1/-1; }.quick-games { position:static; margin-top:18px; } }
@media(max-width:600px) {
  html,body { scrollbar-width:none; }html::-webkit-scrollbar,body::-webkit-scrollbar { display:none; }
  .masthead { padding:12px 18px; }.brand { font-size:20px; gap:9px; letter-spacing:3px; }.brand small { font-size:8px; margin-left:4px; letter-spacing:1.5px; }.brand>svg { width:25px; height:25px; }.masthead nav { gap:0; font-size:11px; }.masthead nav a:last-child { display:none; }
  .intro { padding:40px 20px 28px; }.eyebrow { font-size:8px; letter-spacing:1.5px; margin-bottom:14px; }h1 { font-size:clamp(42px,11.8vw,66px); letter-spacing:-2px; }.intro-copy { font-size:12px; line-height:1.8; margin-top:14px; }
  .games { grid-template-columns:1fr; padding:0 14px; gap:20px; }.game { border-radius:16px; }.game-art { height:265px; }.game-index { top:18px; left:20px; font-size:7px; letter-spacing:1.5px; }.fleet { top:52px; }.player-ship { width:80px; height:80px; left:calc(50% - 40px); bottom:32px; }.flight-path { top:129px; bottom:111px; }.flight-path i { height:13px; }.art-caption { font-size:7px; bottom:15px; letter-spacing:1.7px; }.block-art>img { padding:13px 6px 15px; }
  .game-copy { padding:20px; }.game-heading { flex-direction:row; align-items:center; gap:5px; }h2 { font-size:21px; }.mode { font-size:7px; letter-spacing:.3px; }.game-copy>p { min-height:0; font-size:12px; margin:13px 0 16px; }.game-footer { flex-direction:row; align-items:center; padding-top:16px; }.game-footer>span { font-size:7px; text-align:left; letter-spacing:.3px; }.play-button { font-size:11px; padding:10px 12px; gap:9px; }
  .play-your-way { padding:35px 21px; grid-template-columns:1fr; gap:23px; }.section-intro { grid-column:auto; }.section-intro h2 { font-size:28px; }.play-your-way>div:not(.section-intro) { display:grid; grid-template-columns:23px 1fr; gap:0 9px; }.detail-number { grid-row:1/3; padding-top:2px; }.play-your-way p:not(.eyebrow) { grid-column:2; max-width:300px; font-size:12px; }h3 { font-size:14px; margin-bottom:6px; }
  footer { margin:0 18px; padding:16px 0 24px; gap:10px; flex-wrap:wrap; font-size:9px; }footer p { margin-left:auto; }footer>a:last-child { width:100%; margin:0; min-height:44px; }
}
@media(max-width:350px) { .brand { font-size:17px; gap:7px; }.brand small { font-size:7px; }.masthead { padding-inline:14px; }.masthead nav { font-size:10px; }.game-heading { flex-direction:column; align-items:flex-start; }.game-footer { flex-direction:column; align-items:stretch; }.game-footer>span { text-align:center; }.game-art { height:240px; }.flight-path { top:118px; bottom:107px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }*,*::before,*::after { animation:none!important; transition:none!important; } }