@font-face { font-family: 'Oxanium'; src: url('../fonts/oxanium-regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Oxanium'; src: url('../fonts/oxanium-semibold.ttf') format('truetype'); font-weight: 600 800; font-display: swap; }

:root {
  --ink: #04070c;
  --panel: #08111b;
  --white: #f3f7f9;
  --muted: #91a3ad;
  --blue: #29c5f6;
  --orange: #ff9e2c;
  --orange-hot: #ff6a20;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; overflow-x: hidden; background: var(--ink); color: var(--white); font-family: 'Oxanium', system-ui, sans-serif; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { border-radius: 0; }
[hidden] { display: none !important; }
.shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }

.hero { min-height: 760px; height: 100svh; position: relative; isolation: isolate; display: flex; flex-direction: column; overflow: hidden; background: #050912; }
.hero-video { position: absolute; inset: 0; z-index: -4; width: 100%; height: 100%; object-fit: cover; object-position: center; scale: 1.025; }
.hero-shade { position: absolute; inset: 0; z-index: -3; background: linear-gradient(90deg, rgba(2,5,11,.98) 0%, rgba(3,7,14,.86) 37%, rgba(3,7,14,.2) 72%, rgba(3,7,14,.42) 100%), linear-gradient(0deg, #04070c 0%, transparent 33%, rgba(2,5,10,.35) 100%); }
.scanlines { position: absolute; inset: 0; z-index: -2; pointer-events: none; opacity: .1; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.09) 4px); mask-image: linear-gradient(to right, black, transparent 76%); }
.nav { height: 96px; display: flex; align-items: center; gap: 34px; border-bottom: 1px solid rgba(92,209,244,.16); }
.nav-logo img { display: block; width: 188px; }
.nav-links { display: flex; gap: 36px; margin-left: auto; }
.nav-links a { color: #b4c1c9; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.nav-links a:hover { color: white; }
.hero-content { margin-block: auto; padding: 50px 0 90px; }
.kicker { display: flex; align-items: center; gap: 11px; color: var(--blue); font-size: 10px; font-weight: 600; letter-spacing: .19em; text-transform: uppercase; }
.kicker > span { width: 30px; height: 1px; background: currentColor; box-shadow: 0 0 12px currentColor; }
h1 { max-width: 880px; margin: 22px 0; font-size: clamp(62px, 7.2vw, 108px); line-height: .89; letter-spacing: -.055em; text-transform: uppercase; }
h1 em, h2 em { color: var(--orange); font-style: normal; text-shadow: 0 0 42px rgba(255,107,32,.2); }
.hero-content > p { margin: 0; color: #c5d0d6; font-family: system-ui, sans-serif; font-size: 18px; }
.hero-actions { display: flex; gap: 14px; margin-top: 35px; }
.button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 11px; padding: 0 22px; border: 1px solid transparent; clip-path: polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px); font-size: 12px; font-weight: 600; letter-spacing: .05em; transition: translate .2s ease, border-color .2s ease; }
.button:hover { translate: 0 -2px; }
.button-primary { background: linear-gradient(135deg,var(--orange),var(--orange-hot)); color: #110a03; box-shadow: 0 12px 44px rgba(255,114,32,.2); }
.button-ghost, .button-outline { border-color: rgba(61,194,233,.36); background: rgba(4,12,20,.58); backdrop-filter: blur(12px); }
.button-small { min-height: 42px; padding-inline: 17px; font-size: 10px; }
.hero-bar { height: 80px; display: grid; grid-template-columns: repeat(3,auto) 1fr; align-items: center; gap: 38px; border-top: 1px solid rgba(113,198,224,.18); color: #d0d9de; font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }
.hero-bar div { display: flex; gap: 8px; }
.hero-bar span { color: var(--blue); }
.hero-bar p { justify-self: end; margin: 0; color: #8497a2; }

.section { position: relative; padding: 120px 0; }
.tech-grid { position: absolute; inset: 0; pointer-events: none; opacity: .17; background-image: linear-gradient(rgba(31,165,208,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(31,165,208,.2) 1px,transparent 1px); background-size: 68px 68px; mask-image: linear-gradient(to bottom,transparent,black 18%,transparent 95%); }
.section-head { position: relative; display: grid; grid-template-columns: 1fr 370px; gap: 80px; align-items: end; margin-bottom: 56px; }
.section-head-compact { grid-template-columns: 1fr; }
h2 { margin: 18px 0 0; color: #f3f7f9; font-size: clamp(48px,5.6vw,76px); line-height: .97; letter-spacing: -.045em; text-transform: uppercase; }
.section-head > p, .leaderboard-intro > p { margin: 0; color: #a7b5bd; font-family: system-ui,sans-serif; font-size: 17px; line-height: 1.6; }

.gameplay { overflow: hidden; background: radial-gradient(circle at 76% 22%,rgba(31,157,205,.1),transparent 31%),linear-gradient(180deg,#04070c,#07101a 58%,#04070c); }
.loop-grid { position: relative; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(72,185,220,.24); }
.loop-grid article { position: relative; padding: 34px 30px 36px 0; }
.loop-grid article:not(:last-child) { margin-right: 30px; border-right: 1px solid rgba(72,185,220,.12); }
.loop-grid article > span { position: absolute; top: -10px; left: 0; padding-right: 10px; background: #07101a; color: var(--blue); font-size: 9px; letter-spacing: .14em; }
.loop-grid h3 { margin: 0; font-size: 25px; text-transform: uppercase; }
.loop-grid p { margin: 11px 0 0; color: #8fa1ac; font-family: system-ui,sans-serif; font-size: 14px; }
.gameplay-frame { position: relative; margin: 40px 0 0; aspect-ratio: 2/1; overflow: hidden; border: 1px solid rgba(66,193,231,.32); background: #06101a; clip-path: polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px); }
.gameplay-frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(2,6,10,.72),transparent 30%); pointer-events: none; }
.gameplay-frame img { width: 100%; height: 100%; display: block; object-fit: cover; }
.gameplay-frame figcaption { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 21px; display: flex; justify-content: space-between; align-items: end; text-transform: uppercase; }
.gameplay-frame figcaption span { color: var(--blue); font-size: 9px; letter-spacing: .16em; }
.gameplay-frame figcaption strong { font-size: 14px; letter-spacing: .08em; }

.systems { background: radial-gradient(circle at 12% 15%,rgba(255,113,28,.07),transparent 28%),#04070c; }
.system-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.system-card { min-height: 460px; position: relative; isolation: isolate; overflow: hidden; border: 1px solid rgba(76,177,208,.21); background: #08111b; clip-path: polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px); }
.system-card-wide { grid-column: 1/-1; min-height: 520px; }
.system-card > img { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale .6s ease; }
.system-card:hover > img { scale: 1.025; }
.card-shade { position: absolute; z-index: -2; inset: 0; background: linear-gradient(0deg,rgba(3,7,12,.98),rgba(3,7,12,.65) 42%,rgba(3,7,12,.04) 84%); }
.card-copy { position: absolute; z-index: 2; left: 32px; right: 32px; bottom: 31px; }
.card-copy > span { display: block; margin-bottom: 11px; color: var(--blue); font-size: 8px; letter-spacing: .18em; }
.card-copy h3 { max-width: 680px; margin: 0; font-size: clamp(28px,3.5vw,45px); line-height: 1; letter-spacing: -.035em; text-transform: uppercase; }
.card-copy p { max-width: 580px; margin: 14px 0 0; color: #aab8c0; font-family: system-ui,sans-serif; font-size: 14px; line-height: 1.55; }
.system-card-coop { background: radial-gradient(circle at 68% 40%,rgba(23,182,231,.17),transparent 33%),linear-gradient(135deg,#09131e,#050a11); }
.system-card-coop .card-copy { max-width: 58%; }
.coop-orbit { width: 300px; aspect-ratio: 1; position: absolute; top: 50%; right: 18px; translate: 0 -50%; border: 1px solid rgba(41,197,246,.18); border-radius: 50%; background: repeating-radial-gradient(circle,transparent 0 47px,rgba(41,197,246,.1) 48px 49px); }
.coop-orbit::before,.coop-orbit::after { content: ''; position: absolute; left: 50%; top: 50%; translate: -50% -50%; background: rgba(41,197,246,.11); }
.coop-orbit::before { width: 1px; height: 100%; }.coop-orbit::after { width: 100%; height: 1px; }
.coop-orbit i { width: 9px; height: 9px; position: absolute; rotate: 45deg; background: var(--blue); box-shadow: 0 0 14px var(--blue); }
.coop-orbit i:nth-child(1){left:20%;top:37%}.coop-orbit i:nth-child(2){left:62%;top:21%}.coop-orbit i:nth-child(3){left:72%;top:63%}.coop-orbit i:nth-child(4){left:40%;top:72%}
.coop-orbit b { position: absolute; left: 50%; top: 50%; translate: -50% -50%; font-size: 64px; text-shadow: 0 0 28px var(--blue); }
.online { display: flex; align-items: center; gap: 8px; margin-top: 20px; color: #89d5e8; font-size: 8px; letter-spacing: .14em; text-transform: uppercase; }
.online i,.board-status i { width: 7px; height: 7px; border-radius: 50%; background: #55e69f; box-shadow: 0 0 11px #55e69f; }

.media { overflow: hidden; background: #020509; }
.media::before { content: 'MINERAL // ZONE'; position: absolute; top: 80px; right: -20px; color: rgba(43,176,218,.035); font-size: clamp(80px,13vw,205px); font-weight: 600; letter-spacing: -.06em; white-space: nowrap; }
.media-head { position: relative; display: flex; justify-content: space-between; align-items: end; gap: 50px; margin-bottom: 42px; }
.shot-tabs { display: flex; gap: 6px; }
.shot-tabs button,.board-tabs button,.difficulty button { border: 1px solid rgba(70,164,193,.2); background: #071019; color: #8da1ac; font-family: 'Oxanium',sans-serif; font-size: 8px; letter-spacing: .09em; text-transform: uppercase; cursor: pointer; }
.shot-tabs button { min-height: 46px; padding: 0 14px; }
.shot-tabs button span { margin-right: 7px; color: #4b7582; }
.shot-tabs button:hover,.shot-tabs button.active,.board-tabs button.active,.difficulty button.active { color: white; border-color: var(--orange); background: rgba(255,140,36,.08); }
.shot-frame { position: relative; aspect-ratio: 1.92/1; padding: 11px; border: 1px solid rgba(60,185,224,.24); background: #071019; clip-path: polygon(19px 0,100% 0,100% calc(100% - 19px),calc(100% - 19px) 100%,0 100%,0 19px); }
.shot-frame > img { width: 100%; height: 100%; display: block; object-fit: cover; animation: shot-in .35s ease both; }
.shot-frame::after { content: ''; position: absolute; inset: 11px; background: linear-gradient(0deg,rgba(2,5,9,.86),transparent 28%); pointer-events: none; }
.shot-caption { position: absolute; z-index: 2; left: 32px; right: 32px; bottom: 27px; display: flex; gap: 22px; align-items: center; }
.shot-caption span { color: var(--orange); font-size: 9px; letter-spacing: .14em; }.shot-caption p { margin: 0; font-family: system-ui,sans-serif; font-size: 14px; }

.leaderboards { background: radial-gradient(circle at 75% 22%,rgba(29,178,224,.09),transparent 30%),linear-gradient(180deg,#04070c,#07101a); }
.leaderboard-intro { display: grid; grid-template-columns: 1fr 360px; gap: 70px; align-items: end; margin-bottom: 50px; }
.leaderboard-panel { border: 1px solid rgba(59,186,224,.28); background: rgba(4,10,17,.9); clip-path: polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px); }
.board-controls { min-height: 80px; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 17px 20px; border-bottom: 1px solid rgba(59,186,224,.16); }
.board-tabs,.difficulty { display: flex; gap: 7px; }
.board-tabs button,.difficulty button { min-height: 42px; padding: 0 15px; }
.board-table { min-height: 430px; position: relative; padding: 17px 20px 20px; }
.board-row { display: grid; grid-template-columns: 90px 1fr 180px; align-items: center; min-height: 54px; padding: 0 18px; border-bottom: 1px solid rgba(65,155,183,.1); color: #778a95; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.board-header { min-height: 42px; color: #74cce5; font-size: 8px; letter-spacing: .15em; }
.board-row span:last-child { text-align: right; }
.board-placeholder span:nth-child(2) i { display: block; width: 34%; height: 5px; background: rgba(101,142,157,.13); }
.board-placeholder span:nth-child(2) i { animation: board-pulse 1.25s ease-in-out infinite alternate; }
.board-entry { color: #d6e0e5; font-size: 12px; text-transform: none; }
.board-rank { color: var(--orange); font-weight: 600; }
.board-player > a,.board-player > span { width: max-content; max-width: 100%; display: inline-flex; align-items: center; gap: 11px; transition: color .2s ease; }
.board-player a:hover { color: var(--blue); }
.board-player img { width: 30px; height: 30px; display: block; border: 1px solid rgba(64,190,227,.34); object-fit: cover; }
.board-player a > span,.board-player > span > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-score { color: #f5f8fa; font-variant-numeric: tabular-nums; }
.board-empty { position: absolute; left: 50%; top: 58%; translate: -50% -50%; display: grid; gap: 10px; width: min(400px,80%); padding: 24px; border: 1px solid rgba(58,185,222,.2); background: rgba(3,8,14,.94); text-align: center; }
.board-empty span { color: var(--orange); font-size: 8px; letter-spacing: .18em; }.board-empty strong { font-size: 15px; letter-spacing: .02em; }
.board-status { min-height: 54px; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 0 21px; border-top: 1px solid rgba(59,186,224,.16); color: #71858f; font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.board-status span:first-child { display: flex; align-items: center; gap: 8px; color: #8bd3e7; }
.board-status[data-state='loading'] i { background: var(--orange); box-shadow: 0 0 11px var(--orange); animation: board-pulse .7s ease-in-out infinite alternate; }
.board-status[data-state='stale'] i { background: var(--orange); box-shadow: 0 0 11px var(--orange); }
.board-status[data-state='error'] i { background: #ff5d52; box-shadow: 0 0 11px #ff5d52; }

.closing { min-height: 610px; position: relative; isolation: isolate; display: grid; place-items: center; overflow: hidden; text-align: center; }
.closing-image { position: absolute; z-index: -3; inset: 0; background: url('../media/combat.webp') center/cover; }
.closing-shade { position: absolute; z-index: -2; inset: 0; background: linear-gradient(180deg,#07101a 0%,rgba(3,7,12,.68) 31%,rgba(3,7,12,.84) 80%,#03060a 100%); }
.closing-copy { display: flex; flex-direction: column; align-items: center; padding: 90px 0; }.closing-copy > img { width: min(480px,76vw); }.closing-copy h2 { margin-top: 26px; }.button-large { min-height: 60px; margin-top: 30px; padding-inline: 30px; }
footer { padding: 48px 0 38px; border-top: 1px solid rgba(79,178,207,.15); background: #020509; }
.footer-inner { display: grid; grid-template-columns: 180px 1fr auto; align-items: center; gap: 30px; }.footer-inner > a img { width: 150px; }.footer-inner > p { margin: 0; color: #60737d; font-size: 8px; letter-spacing: .16em; text-transform: uppercase; }.footer-inner > div { display: flex; gap: 22px; color: #9eafb8; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }.footer-inner small { grid-column: 1/-1; padding-top: 22px; border-top: 1px solid rgba(91,160,182,.1); color: #465760; font-family: system-ui,sans-serif; font-size: 10px; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
@keyframes shot-in { from { opacity: .3; scale: .996; } to { opacity: 1; scale: 1; } }
@keyframes board-pulse { from { opacity: .28; } to { opacity: 1; } }

@media (max-width: 980px) {
  .section { padding: 96px 0; }
  .section-head,.leaderboard-intro { grid-template-columns: 1fr 320px; gap: 45px; }
  .system-card-coop .card-copy { max-width: 75%; }.coop-orbit { width: 240px; right: -65px; opacity: .65; }
  .media-head { align-items: start; flex-direction: column; }.shot-tabs { width: 100%; overflow-x: auto; padding-bottom: 4px; }.shot-tabs button { flex: 0 0 auto; }
  .board-controls { align-items: flex-start; flex-direction: column; }.board-tabs,.difficulty { flex-wrap: wrap; }
}

@media (max-width: 760px) {
  .shell { width: min(100% - 32px,1180px); }.nav { height: 76px; }.nav-logo img { width: 148px; }.nav-links,.nav > .button { display: none; }
  .hero { min-height: 700px; }.hero-video { object-position: 61% center; }.hero-shade { background: linear-gradient(90deg,rgba(2,5,11,.98),rgba(3,7,14,.55)),linear-gradient(0deg,#04070c,transparent 47%); }.hero-content { padding-bottom: 38px; }
  h1 { font-size: clamp(49px,14vw,72px); }.hero-content > p { max-width: 420px; font-size: 16px; }.hero-actions { max-width: 350px; align-items: stretch; flex-direction: column; }.hero-bar { grid-template-columns: repeat(3,1fr); gap: 8px; }.hero-bar p { display: none; }
  .section { padding: 78px 0; }.section-head,.leaderboard-intro { grid-template-columns: 1fr; gap: 28px; }.section-head { margin-bottom: 44px; }h2 { font-size: 42px; }
  .loop-grid { grid-template-columns: 1fr; gap: 28px; border-top: 0; }.loop-grid article { border-top: 1px solid rgba(72,185,220,.24); }.loop-grid article:not(:last-child) { margin-right: 0; border-right: 0; }
  .gameplay-frame { aspect-ratio: 1.25/1; }.gameplay-frame figcaption span { display: none; }
  .system-grid { display: block; }.system-card,.system-card-wide { min-height: 430px; margin-bottom: 14px; }.card-copy { left: 23px; right: 23px; bottom: 24px; }.card-copy h3 { font-size: 30px; }.system-card-coop .card-copy { max-width: none; }.coop-orbit { top: 35%; opacity: .34; }
  .shot-frame { aspect-ratio: 1.18/1; padding: 7px; }.shot-frame::after { inset: 7px; }.shot-caption { left: 20px; right: 20px; bottom: 20px; align-items: flex-start; flex-direction: column; gap: 6px; }.shot-caption p { font-size: 12px; }
  .board-tabs button,.difficulty button { padding-inline: 10px; }.board-row { grid-template-columns: 52px 1fr 86px; padding-inline: 10px; }.board-table { padding-inline: 10px; }.board-status { align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 13px; }.board-status span:last-child { display: none; }
  .closing { min-height: 530px; }.footer-inner { grid-template-columns: 1fr; gap: 20px; }.footer-inner > div { flex-wrap: wrap; }.footer-inner small { grid-column: auto; }
}

@media (max-width: 460px) {
  h1 { font-size: 46px; }.kicker { font-size: 8px; }.gameplay-frame figcaption { left: 14px; right: 14px; bottom: 13px; }.gameplay-frame figcaption strong { font-size: 10px; }
  .shot-tabs button { min-height: 42px; padding-inline: 11px; }.board-controls { padding-inline: 12px; }.board-tabs button,.difficulty button { min-height: 38px; font-size: 7px; }.board-empty strong { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }*,*::before,*::after { transition-duration: .01ms!important; animation-duration: .01ms!important; } }