:root {
  color-scheme: dark;
  --bg: #03070c;
  --panel: rgba(7, 15, 23, .92);
  --line: rgba(114, 231, 255, .22);
  --text: #effcff;
  --muted: #708992;
  --cyan: #66ecff;
  --violet: #a875ff;
  --pink: #ff4e9b;
  --amber: #ffc65b;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 15% 12%, rgba(48, 137, 169, .15), transparent 28%),
    radial-gradient(circle at 86% 78%, rgba(112, 54, 170, .12), transparent 32%),
    linear-gradient(145deg, #03070c, #060c12 52%, #03070b);
}
button, a { font: inherit; }
button { color: inherit; }
.ambient-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background-image:
    linear-gradient(rgba(87, 198, 224, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(87, 198, 224, .10) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 88%);
}
.scanline {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .08;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #aef7ff 4px);
}
.site-head {
  position: relative;
  z-index: 2;
  width: min(1440px, calc(100% - 48px));
  margin: 0 auto;
  min-height: 84px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(116, 224, 248, .13);
}
.wordmark { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.wordmark > span:last-child { display: flex; flex-direction: column; line-height: .92; }
.wordmark b { font-size: 18px; letter-spacing: .14em; }
.wordmark em { color: var(--cyan); font-size: 8px; font-style: normal; font-weight: 900; letter-spacing: .34em; }
.mark { position: relative; width: 31px; height: 31px; border: 1px solid var(--cyan); transform: rotate(45deg); }
.mark::after { content: ""; position: absolute; inset: 7px; background: var(--cyan); box-shadow: 0 0 18px var(--cyan); }
.mark i { position: absolute; left: -5px; right: -5px; height: 1px; top: 8px; background: rgba(102,236,255,.42); }
.mark i:last-child { top: 20px; }
.rankings-button, footer button {
  border: 1px solid rgba(102, 236, 255, .34);
  background: rgba(6, 18, 27, .72);
  padding: 12px 18px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
  transition: .2s ease;
}
.rankings-button span { color: var(--cyan); margin-right: 6px; }
.rankings-button:hover, footer button:hover { border-color: var(--cyan); box-shadow: 0 0 24px rgba(102,236,255,.12); transform: translateY(-1px); }
main { position: relative; z-index: 1; width: min(1440px, calc(100% - 48px)); margin: 0 auto; }
.hero { padding: clamp(58px, 7vw, 102px) 0 48px; max-width: 880px; }
.eyebrow { color: var(--cyan); font-size: 9px; font-weight: 950; letter-spacing: .31em; }
.hero h1 { margin: 14px 0 20px; font-size: clamp(56px, 8vw, 118px); line-height: .80; letter-spacing: -.065em; font-weight: 950; }
.hero h1 span { color: transparent; -webkit-text-stroke: 1px rgba(230,251,255,.66); }
.hero-copy { max-width: 610px; color: #88a0a9; line-height: 1.7; font-size: 13px; letter-spacing: .04em; }
.game-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; padding-bottom: 72px; }
.game-card { min-width: 0; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 26px 90px rgba(0,0,0,.32); overflow: hidden; }
.card-visual { height: 260px; position: relative; overflow: hidden; background: #06101a; border-bottom: 1px solid var(--line); }
.visual-tag { position: absolute; left: 20px; top: 18px; z-index: 4; color: rgba(220,249,255,.74); font-size: 8px; font-weight: 900; letter-spacing: .20em; }
.adapt-visual { perspective: 700px; background: radial-gradient(circle at 53% 48%, rgba(90,59,174,.35), transparent 22%), linear-gradient(160deg,#071421,#090a19); }
.adapt-ground { position: absolute; width: 160%; height: 145%; left: -30%; top: 54%; transform: rotateX(71deg); background-image: linear-gradient(rgba(81,223,255,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(81,223,255,.25) 1px,transparent 1px); background-size: 35px 35px; }
.adapt-core { position: absolute; left: 50%; top: 53%; width: 68px; height: 105px; transform: translate(-50%,-50%); clip-path: polygon(50% 0,88% 20%,100% 72%,72% 100%,28% 100%,0 72%,12% 20%); background: linear-gradient(135deg,#243d56,#0c1724 48%,#413365); box-shadow: 0 0 45px rgba(102,236,255,.38); z-index: 3; }
.adapt-core::before { content:""; position:absolute; width:22px; height:22px; border-radius:50%; left:23px; top:31px; background:#d6fbff; box-shadow:0 0 28px var(--cyan); }
.adapt-core i { position:absolute; width:46px; height:6px; left:11px; bottom:21px; background:var(--violet); box-shadow:0 0 16px var(--violet); }
.adapt-orbit { position:absolute; left:50%; top:49%; border:1px solid rgba(148,105,255,.58); border-radius:50%; transform:translate(-50%,-50%) rotateX(65deg); z-index:2; }
.orbit-one { width:270px; height:135px; animation:orbitPulse 3s ease-in-out infinite; }
.orbit-two { width:420px; height:210px; border-color:rgba(102,236,255,.25); animation:orbitPulse 3s 1.2s ease-in-out infinite; }
@keyframes orbitPulse { 50% { opacity:.45; transform:translate(-50%,-50%) rotateX(65deg) scale(1.07); } }
.grid-visual { background: radial-gradient(circle at 50% 65%, rgba(11,99,119,.38), transparent 36%),linear-gradient(#030812,#060712); perspective: 700px; }
.grid-horizon { position:absolute; left:-20%; right:-20%; top:52%; height:110%; transform:rotateX(67deg); transform-origin:top; background-image:linear-gradient(rgba(54,244,255,.21) 1px,transparent 1px),linear-gradient(90deg,rgba(54,244,255,.21) 1px,transparent 1px); background-size:42px 42px; }
.trail { position:absolute; height:5px; transform-origin:left; z-index:2; }
.trail::after { content:""; position:absolute; left:0; right:0; bottom:4px; height:44px; opacity:.22; background:currentColor; clip-path:polygon(0 100%,100% 18%,100% 100%); }
.trail-cyan { color:var(--cyan); background:var(--cyan); box-shadow:0 0 16px var(--cyan); width:62%; left:18%; top:70%; transform:rotate(-18deg); }
.trail-pink { color:var(--pink); background:var(--pink); box-shadow:0 0 16px var(--pink); width:54%; left:43%; top:53%; transform:rotate(16deg); }
.rider { position:absolute; left:48%; top:52%; width:42px; height:58px; z-index:3; background:linear-gradient(90deg,#17343d,var(--cyan),#13232c); clip-path:polygon(50% 0,75% 28%,100% 100%,58% 78%,42% 78%,0 100%,25% 28%); filter:drop-shadow(0 0 10px var(--cyan)); }
.wing-visual { background:radial-gradient(circle at 72% 30%,rgba(255,151,61,.18),transparent 27%),linear-gradient(155deg,#040a18,#090618);perspective:700px }
.wing-visual::before{content:"";position:absolute;inset:0;opacity:.55;background-image:radial-gradient(circle,#d9f8ff 0 1px,transparent 1.5px);background-size:37px 41px}
.wing-planet{position:absolute;right:-72px;bottom:-110px;width:275px;height:275px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#ffbf65,#8a271b 27%,#170713 68%);box-shadow:-18px -12px 60px rgba(255,117,55,.25)}
.wing-tunnel{position:absolute;left:-120px;top:40px;width:330px;height:210px;border:7px solid rgba(169,110,255,.34);border-radius:18%;transform:rotateY(58deg) rotate(45deg);box-shadow:inset 0 0 25px rgba(66,239,255,.28),0 0 28px rgba(169,110,255,.2)}
.wing-tunnel::before,.wing-tunnel::after{content:"";position:absolute;border:4px solid rgba(102,236,255,.26);border-radius:18%;inset:28px}.wing-tunnel::after{inset:64px;border-color:rgba(255,71,125,.34)}
.wing-ship{position:absolute;left:48%;top:48%;z-index:3;width:125px;height:82px;transform:rotate(-18deg);clip-path:polygon(50% 0,59% 37%,100% 79%,61% 67%,50% 100%,39% 67%,0 79%,41% 37%);background:linear-gradient(90deg,#17242f,var(--cyan) 47%,#17242f 55%);filter:drop-shadow(0 0 14px rgba(102,236,255,.8))}.wing-ship i{position:absolute;width:7px;height:25px;bottom:4px;background:#ffb84b;box-shadow:0 8px 15px #ff7d3a}.wing-ship i:first-child{left:38px}.wing-ship i:last-child{right:38px}
.card-copy { padding: 28px; }
.card-meta { display:flex; justify-content:space-between; color:var(--muted); font-size:8px; font-weight:900; letter-spacing:.18em; }
.card-meta b { color: var(--cyan); }
.grid-card .card-meta b { color: var(--pink); }
.wing-card .card-meta b { color: var(--amber); }
.riftline-card .card-meta b { color: var(--pink); }
.card-copy h2 { margin:12px 0 14px; font-size:clamp(30px,3.2vw,48px); letter-spacing:-.045em; }
.card-copy h2 span { color:var(--violet); }
.grid-card .card-copy h2 span { color:var(--pink); }
.wing-card .card-copy h2 span { color:var(--amber); }
.riftline-card .card-copy h2 span { color:var(--pink); }
.card-copy p { min-height: 63px; margin:0; color:#8299a2; font-size:12px; line-height:1.7; }
.card-copy ul { display:flex; flex-wrap:wrap; gap:7px; list-style:none; padding:0; margin:20px 0 24px; }
.card-copy li { padding:7px 9px; border:1px solid rgba(123,215,236,.16); color:#88a8b0; font-size:8px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.play-button { display:flex; justify-content:space-between; padding:15px 17px; color:#031016; background:var(--cyan); text-decoration:none; font-size:10px; font-weight:950; letter-spacing:.16em; transition:.2s ease; }
.grid-card .play-button { background:var(--pink); color:white; }
.wing-card .play-button { background:var(--amber); color:#160b02; }
.riftline-card .play-button { background:linear-gradient(90deg,var(--pink),var(--violet));color:white }
.play-button:hover { filter:brightness(1.15); transform:translateY(-2px); box-shadow:0 8px 28px rgba(102,236,255,.18); }
footer { position:relative; z-index:1; width:min(1440px,calc(100% - 48px)); margin:0 auto; padding:22px 0 32px; border-top:1px solid rgba(116,224,248,.13); display:flex; align-items:center; justify-content:space-between; color:#526a73; font-size:8px; font-weight:850; letter-spacing:.18em; }
footer button { color:#91aab2; padding:9px 12px; }
.rankings-dialog { width:min(980px,calc(100vw - 32px)); max-height:min(820px,calc(100vh - 32px)); padding:0; color:var(--text); border:1px solid rgba(102,236,255,.34); background:#050c13; box-shadow:0 35px 130px rgba(0,0,0,.76); }
.rankings-dialog::backdrop { background:rgba(0,3,7,.84); }
.dialog-shell { padding:28px; }
.dialog-head { display:flex; justify-content:space-between; align-items:start; }
.dialog-head h2 { margin:7px 0 0; font-size:34px; letter-spacing:-.035em; }
.close-button { width:40px; height:40px; border:1px solid rgba(121,216,238,.22); background:#08131c; color:#8dadb5; font-size:24px; cursor:pointer; }
.close-button:hover { color:white; border-color:var(--cyan); }
.leaderboard-select { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:27px 0 18px; }
.leaderboard-tab { padding:15px 17px; border:1px solid rgba(114,231,255,.17); background:#07111a; color:#68828b; text-align:left; cursor:pointer; font-size:10px; font-weight:950; letter-spacing:.13em; }
.leaderboard-tab span { margin-right:9px; color:#425d67; }
.leaderboard-tab.active { color:white; border-color:var(--cyan); box-shadow:inset 3px 0 var(--cyan); }
.leaderboard-tab.active span { color:var(--cyan); }
.leaderboard-summary { display:flex; gap:34px; margin-bottom:13px; }
.leaderboard-summary div { display:flex; flex-direction:column; gap:3px; }
.leaderboard-summary span { color:#526b74; font-size:7px; font-weight:900; letter-spacing:.17em; }
.leaderboard-summary b { color:#ccecf1; font-size:10px; }
.leaderboard-status { padding:10px 12px; color:var(--cyan); background:rgba(59,179,207,.07); border-left:2px solid var(--cyan); font-size:8px; font-weight:900; letter-spacing:.16em; }
.leaderboard-status.error { color:#ff718c; border-color:#ff718c; }
.leaderboard-wrap { max-height:430px; overflow:auto; margin-top:9px; border:1px solid rgba(114,231,255,.12); }
table { width:100%; border-collapse:collapse; font-size:10px; }
th { position:sticky; top:0; z-index:1; padding:11px 13px; color:#5d7881; background:#071019; text-align:left; font-size:7px; letter-spacing:.17em; }
td { padding:13px; border-top:1px solid rgba(114,231,255,.09); color:#91a7af; }
tbody tr:hover { background:rgba(102,236,255,.035); }
.rank-cell { width:50px; color:var(--cyan); font-weight:900; }
.player-cell { color:white; font-weight:850; }
.empty-board { padding:54px 20px; text-align:center; color:#58717a; letter-spacing:.12em; }
@media (max-width: 820px) {
  .game-grid { grid-template-columns:1fr; }
  .hero { padding-top:52px; }
  .card-copy p { min-height:0; }
}
@media (max-width: 560px) {
  .site-head, main, footer { width:calc(100% - 28px); }
  .site-head { min-height:70px; }
  .rankings-button { padding:10px; }
  .rankings-button span { display:none; }
  .hero h1 { font-size:49px; }
  .card-visual { height:210px; }
  .card-copy { padding:21px; }
  .leaderboard-select { grid-template-columns:1fr; }
  .dialog-shell { padding:18px; }
  .leaderboard-wrap { overflow-x:auto; }
  table { min-width:650px; }
  footer span { display:none; }
  footer { justify-content:flex-end; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
}