:root {
  --space: #02050d;
  --panel: rgba(5, 13, 31, .84);
  --panel-solid: #071126;
  --line: rgba(77, 203, 255, .34);
  --cyan: #33d8ff;
  --blue: #1477ff;
  --gold: #ffe33d;
  --orange: #ffb52a;
  --green: #7cf45a;
  --text: #f5fbff;
  --muted: #a8bdd0;
  --max: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 0%, rgba(9, 86, 170, .24), transparent 34rem),
    #02050d;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: var(--cyan); }
a:hover { color: white; }
img { max-width: 100%; }

.space-layers, .space-layers::before, .space-layers::after {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -3;
  background-repeat: repeat;
  background-position: center top;
  opacity: .42;
}
.space-layers { background-image: url("assets/bg_stars_3_1080.png"); background-size: 810px auto; }
.space-layers::before { content: ""; background-image: url("assets/bg_stars_2_1080.png"); background-size: 920px auto; opacity: .32; animation: drift 90s linear infinite; }
.space-layers::after { content: ""; background-image: url("assets/bg_stars_1_1080.png"); background-size: 1080px auto; opacity: .24; animation: drift 150s linear infinite reverse; }
@keyframes drift { to { transform: translate3d(-120px, 160px, 0); } }

.wrap { width: min(calc(100% - 36px), var(--max)); margin-inline: auto; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid rgba(71, 200, 255, .18);
  background: rgba(2, 7, 18, .82);
  backdrop-filter: blur(14px);
}
.nav {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: white;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.brand img { width: 38px; height: 38px; border-radius: 9px; box-shadow: 0 0 22px rgba(38, 189, 255, .35); }
.nav-links { display: flex; gap: 22px; align-items: center; }
.nav-links a { color: #d8eaff; text-decoration: none; font-size: .92rem; font-weight: 700; }
.nav-links a:hover { color: white; text-shadow: 0 0 14px rgba(51,216,255,.8); }

.hero { min-height: 690px; display: grid; place-items: center; padding: 82px 0 60px; position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.03fr .97fr; gap: 56px; align-items: center; }
.hero-copy { position: relative; z-index: 4; }
.logo { width: min(620px, 100%); filter: drop-shadow(0 18px 28px rgba(0, 92, 255, .22)); margin-bottom: 16px; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px;
  border: 1px solid rgba(78, 205, 255, .32);
  border-radius: 999px;
  background: rgba(6, 22, 45, .7);
  color: #c8f4ff;
  font-size: .77rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.eyebrow::before { content:""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
.hero h1 { font-size: clamp(2.1rem, 4vw, 4.15rem); line-height: 1.02; margin: 18px 0; letter-spacing: -.04em; }
.hero h1 strong { color: var(--gold); text-shadow: 0 0 26px rgba(255, 220, 38, .24); }
.hero p { color: #c3d2e0; font-size: clamp(1.02rem, 1.5vw, 1.19rem); max-width: 650px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 21px;
  border: 1px solid rgba(83, 214, 255, .38);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(13, 63, 112, .98), rgba(4, 24, 55, .98));
  color: white;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .015em;
  box-shadow: inset 0 1px rgba(255,255,255,.13), 0 10px 30px rgba(0, 94, 255, .14);
}
.button:hover { transform: translateY(-1px); border-color: var(--cyan); color: white; box-shadow: 0 0 28px rgba(35, 192, 255, .19); }
.button.primary { color: #03121a; border-color: #fff15a; background: linear-gradient(180deg, #fff46b, #ffba24); box-shadow: 0 12px 34px rgba(255, 183, 24, .19); }
.button.ghost { background: rgba(4, 12, 27, .62); }
.small-note { margin-top: 12px; color: #7f9aaf; font-size: .85rem; }

.arcade-window {
  position: relative;
  min-height: 470px;
  border-radius: 24px;
  border: 1px solid rgba(70, 207, 255, .32);
  overflow: hidden;
  background: #01040a;
  box-shadow: 0 28px 90px rgba(0,0,0,.52), inset 0 0 70px rgba(0, 116, 255, .07);
  isolation: isolate;
}
.arcade-window::before, .arcade-window::after { content:""; position:absolute; inset:0; background-repeat:repeat; background-size:620px auto; opacity:.5; z-index:-2; }
.arcade-window::before { background-image:url("assets/bg_stars_2_1080.png"); animation: game-stars 26s linear infinite; }
.arcade-window::after { background-image:url("assets/bg_stars_1_1080.png"); opacity:.24; background-size:760px auto; animation: game-stars 48s linear infinite reverse; }
@keyframes game-stars { to { background-position: 0 760px; } }
.scanline { position:absolute; inset:0; pointer-events:none; background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(120,200,255,.022) 4px); z-index:10; }
.hud { position:absolute; top:14px; left:16px; right:16px; display:flex; justify-content:space-between; color:#dff7ff; font: 800 .72rem/1.15 "Courier New", monospace; letter-spacing:.08em; text-transform:uppercase; z-index:5; }
.hud b { display:block; color:var(--green); font-size:1.05rem; margin-top:2px; }
.life-icons { display:flex; justify-content:flex-end; align-items:center; gap:7px; min-height:22px; }
.life-icons img { width:18px; height:18px; image-rendering:auto; filter: drop-shadow(0 0 8px rgba(255, 222, 120, .18)); }
.sprite { position:absolute; image-rendering:auto; filter: drop-shadow(0 0 13px rgba(23, 156, 255, .16)); }
.player { width: 180px; left:50%; bottom:34px; transform:translateX(-50%); animation: hover 2.6s ease-in-out infinite; }
.enemy-a { width:112px; left:9%; top:102px; animation: enemy-a 7s ease-in-out infinite; }
.enemy-b { width:98px; right:9%; top:142px; animation: enemy-b 8.5s ease-in-out infinite; }
.enemy-c { width:72px; left:51%; top:80px; transform:translateX(-50%); animation: hover 3.4s ease-in-out infinite reverse; }
.asteroid { width:64px; left:14%; bottom:88px; opacity:.86; animation: spin 21s linear infinite; }
.astronaut { width:48px; right:17%; bottom:86px; animation: floatspin 7s ease-in-out infinite; }
.shot { position:absolute; width:3px; height:34px; left:50%; bottom:178px; border-radius:4px; background:linear-gradient(0deg, transparent, #fff, #44dfff); box-shadow:0 0 10px #39dfff; animation: shot 1.55s linear infinite; }
@keyframes hover { 50% { transform:translateX(-50%) translateY(-7px); } }
@keyframes enemy-a { 50% { transform:translate(60px, 18px); } }
@keyframes enemy-b { 50% { transform:translate(-52px, 25px); } }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes floatspin { 50% { transform:translateY(-20px) rotate(8deg); } }
@keyframes shot { from { opacity:0; transform:translateY(0); } 12%{opacity:1} to { opacity:0; transform:translateY(-270px); } }

.section { padding: 86px 0; }
.section-title { margin: 0 0 10px; font-size: clamp(1.85rem, 3vw, 2.8rem); line-height:1.08; letter-spacing:-.025em; }
.section-lead { color:var(--muted); max-width:760px; margin:0 0 36px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { border:1px solid rgba(75, 199, 255, .22); border-radius:16px; background:linear-gradient(180deg, rgba(8,24,52,.83), rgba(3,10,24,.86)); padding:24px; box-shadow:inset 0 1px rgba(255,255,255,.035); }
.card h3 { margin:8px 0 8px; font-size:1.08rem; }
.card p { margin:0; color:#9eb6c9; font-size:.94rem; }
.icon-row { height:66px; display:flex; align-items:center; gap:12px; }
.icon-row img { max-height:58px; width:auto; filter:drop-shadow(0 0 12px rgba(23,178,255,.16)); }

.feature-band { border-block:1px solid rgba(68,194,255,.14); background:rgba(4,12,27,.56); }
.showcase { display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center; }
.showcase-art { min-height:320px; display:grid; place-items:center; position:relative; overflow:hidden; border-radius:20px; border:1px solid rgba(74,202,255,.2); background:radial-gradient(circle at 50% 48%, rgba(18,92,179,.26), transparent 45%), rgba(1,5,14,.75); }
.showcase-art .hero-ship { width:min(76%, 420px); animation:shipGlow 3s ease-in-out infinite; }
.showcase-art .power { position:absolute; width:46px; }
.p1 { left:12%; top:19%; } .p2{right:14%; top:20%;} .p3{left:19%; bottom:17%;}
@keyframes shipGlow { 50% { filter:drop-shadow(0 0 24px rgba(32,194,255,.42)); transform:translateY(-5px); } }
.checks { display:grid; gap:12px; margin-top:22px; }
.check { display:flex; gap:12px; align-items:flex-start; color:#c7d9e8; }
.check::before { content:"✦"; color:var(--gold); text-shadow:0 0 12px rgba(255,220,50,.45); }

.leaderboard-panel { border:1px solid rgba(78, 207, 255, .25); border-radius:20px; background:rgba(3, 10, 24, .83); padding:26px; }
.lb-buttons { display:flex; flex-wrap:wrap; gap:9px; }
.lb-button { border:1px solid rgba(71,198,255,.26); border-radius:8px; padding:10px 14px; background:#07182c; color:#dff7ff; text-decoration:none; font-weight:800; font-size:.88rem; cursor:pointer; }
.lb-button:hover, .lb-button.active { color:#08121a; background:linear-gradient(180deg,#fff35a,#ffbd27); border-color:#fff369; }
.lb-frame { display:block; width:100%; min-height:620px; margin-top:18px; border:0; border-radius:12px; background:#040b17; }
.lb-status { margin-top:18px; min-height:52px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(71,198,255,.16); border-radius:12px; background:#040b17; color:#91a9bd; font-size:.92rem; }
.lb-status[hidden] { display:none; }
.lb-status.error { color:#ffd7d7; border-color:rgba(255,90,90,.28); background:rgba(55,8,14,.5); }
.lb-results { margin-top:18px; }
.lb-board { border:1px solid rgba(64,199,255,.22); border-radius:12px; overflow:hidden; background:#040b17; }
.lb-row { display:grid; grid-template-columns:52px minmax(80px,1fr) minmax(110px,.75fr) minmax(150px,1fr); gap:12px; align-items:center; padding:13px 16px; border-bottom:1px solid rgba(77,201,255,.11); }
.lb-row:last-child { border-bottom:0; }
.lb-head { color:#8db3c9; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; background:#081a31; }
.lb-rank { color:#6f91a8; }
.lb-pilot { color:var(--gold); font-weight:900; letter-spacing:.12em; }
.lb-head .lb-pilot { color:#8db3c9; letter-spacing:.08em; }
.lb-score { text-align:right; color:#fff; font-weight:900; }
.lb-head .lb-score { color:#8db3c9; }
.lb-time { text-align:right; color:#8ea7ba; font-size:.78rem; }
.lb-empty { padding:34px 20px; text-align:center; border:1px solid rgba(64,199,255,.22); border-radius:12px; background:#040b17; color:#91a9bd; }

.legal { max-width:900px; }
.legal h1 { font-size:clamp(2rem,4vw,3.7rem); line-height:1.05; margin:20px 0 12px; }
.legal h2 { margin-top:34px; color:#eaf8ff; font-size:1.35rem; }
.legal p, .legal li { color:#b5c8d8; }
.legal li+li { margin-top:8px; }
.notice { border:1px solid rgba(255, 221, 57, .3); background:rgba(79,61,2,.19); color:#f8edac; border-radius:12px; padding:14px 16px; }

.footer { border-top:1px solid rgba(76,198,255,.15); padding:32px 0 48px; color:#718ba1; font-size:.88rem; }
.footer-inner { display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.footer a { color:#9ecae1; text-decoration:none; margin-left:16px; }

@media (max-width: 900px) {
  .hero { padding-top:54px; }
  .hero-grid, .showcase { grid-template-columns:1fr; }
  .hero-copy { text-align:center; }
  .hero-copy p { margin-inline:auto; }
  .actions { justify-content:center; }
  .small-note { text-align:center; }
  .arcade-window { min-height:420px; }
  .grid-3 { grid-template-columns:1fr; }
}
@media (max-width: 650px) {
  .nav { min-height:58px; }
  .brand span { display:none; }
  .nav-links { gap:12px; }
  .nav-links a { font-size:.8rem; }
  .nav-links a:nth-child(2) { display:none; }
  .hero { min-height:auto; }
  .hero-grid { gap:34px; }
  .arcade-window { min-height:355px; }
  .player { width:142px; }
  .enemy-a { width:88px; }
  .enemy-b { width:78px; }
  .enemy-c { width:58px; }
  .shot { bottom:147px; }
  .section { padding:64px 0; }
  .card { padding:20px; }
  .lb-row { grid-template-columns:38px 1fr 1fr; }
  .lb-time { grid-column:2/4; text-align:left; font-size:.7rem; }
  .lb-head .lb-time { display:none; }
  .lb-head { grid-template-columns:38px 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
}