@font-face{font-family:"Dela Gothic One";src:url(fonts/DelaGothicOne-sub.woff2) format("woff2");font-display:swap}
@font-face{font-family:"M PLUS Rounded 1c";font-weight:500;src:url(fonts/m-plus-rounded-1c-latin-500-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"M PLUS Rounded 1c";font-weight:800;src:url(fonts/m-plus-rounded-1c-latin-800-normal.woff2) format("woff2");font-display:swap}

/* Colours are the game's HUD. Daylight, not a dark gamer page. */
:root{
  --ink:#141a33;--ink2:#232d57;--paper:#f4f7ff;--white:#fff;
  --sky:#1569e8;--cyan:#36e8ff;--yellow:#ffd23a;--pink:#ff3d8e;--lime:#9dff3c;
  --hero:#1569e8;--hero2:#36e8ff;
  --title:"Dela Gothic One","M PLUS Rounded 1c",sans-serif;
  --body:"M PLUS Rounded 1c",system-ui,sans-serif;
  --line:3px solid var(--ink);--shadow:6px 6px 0 var(--ink);
  --pad:clamp(16px,4vw,56px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sky);color:var(--ink);font:500 clamp(16px,1.15vw,19px)/1.55 var(--body);overflow-x:clip}
img,video,canvas{display:block;max-width:100%}
[hidden]{display:none!important}
a{color:inherit}
h1,h2,h3,p,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.skip{position:fixed;left:12px;top:-60px;z-index:50;background:var(--white);border:var(--line);padding:8px 14px;font-weight:800}
.skip:focus{top:12px}

/* The one button. It presses like the game's HUD cards. */
.play{display:inline-block;background:var(--yellow);color:var(--ink);border:var(--line);box-shadow:var(--shadow);padding:.62em 1.5em .7em;font:400 clamp(20px,2vw,30px)/1 var(--title);text-decoration:none;transform:skewX(-8deg);transition:transform .09s,box-shadow .09s,background .12s}
.play:hover{background:var(--lime)}
.play:active{transform:skewX(-8deg) translate(4px,4px);box-shadow:2px 2px 0 var(--ink)}
.play-small{font-size:16px;box-shadow:3px 3px 0 var(--ink);padding:.5em 1em .58em}
.play-big{font-size:clamp(28px,4vw,56px)}
.ghost{appearance:none;background:var(--white);color:var(--ink);border:var(--line);padding:.55em 1em;font:800 15px/1.2 var(--body);cursor:pointer;transform:skewX(-8deg)}
.ghost:hover{background:var(--cyan)}

.bar{position:fixed;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:10px var(--pad);pointer-events:none;opacity:0;transform:translateY(-100%);transition:opacity .2s,transform .2s}
.bar.on{opacity:1;transform:none}
.bar a{pointer-events:auto}
.bar img{width:clamp(120px,12vw,180px);height:auto;filter:drop-shadow(0 2px 0 rgba(20,26,51,.5))}

/* ---- opening ---- */
.open{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--ink);isolation:isolate}
.open-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:scale(1.2)}
.open-shade{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 62% 75% at 0% 100%,rgba(20,26,51,.8),rgba(20,26,51,.4) 58%,rgba(20,26,51,0))}
.open-copy{position:absolute;left:var(--pad);bottom:clamp(64px,12vh,120px);width:min(760px,calc(100% - 2*var(--pad)));color:var(--white)}
.open-logo img{width:100%;height:auto;animation:slam .55s cubic-bezier(.2,1.5,.4,1) .15s both}
.open-line{margin-top:clamp(10px,1.6vh,18px);font:400 clamp(20px,2.7vw,40px)/1.18 var(--title);text-shadow:3px 3px 0 var(--ink);animation:rise .4s ease-out .55s both}
.open-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:clamp(16px,2.6vh,28px);animation:rise .4s ease-out .7s both}
.open-note{margin-top:14px;font-weight:800;font-size:15px;text-shadow:0 1px 3px var(--ink);animation:rise .4s ease-out .8s both}
.open-scroll{position:absolute;right:var(--pad);bottom:24px;background:var(--ink);color:var(--white);padding:7px 12px;font:400 15px/1 var(--title);animation:nudge 1.5s ease-in-out infinite}

@keyframes slam{from{opacity:0;transform:scale(1.5) skewX(-10deg)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes nudge{50%{transform:translateY(8px)}}

/* ---- the climb ---- */
.climb{height:520vh;position:relative;background:#0f54c8}
.climb-stage{position:sticky;top:0;height:100svh;overflow:hidden;contain:paint}
.climb-sky{position:absolute;left:0;right:0;top:0;height:max(200svh,200vw);background:url(img/sky.webp) center/cover no-repeat;will-change:transform}
.climb-gl{position:absolute;inset:0;width:100%!important;height:100%!important}
.climb-dust{position:absolute;left:-5%;right:-5%;bottom:0;height:46vh;background:url(img/dust.webp) center bottom/100% 100% no-repeat;will-change:transform;pointer-events:none}
.climb-lines{position:absolute;inset:-20%;opacity:0;pointer-events:none;background:repeating-conic-gradient(from 0deg at 50% 62%,rgba(255,255,255,.95) 0 .35deg,transparent .35deg 4.2deg);-webkit-mask:radial-gradient(ellipse at 50% 62%,transparent 34%,#000 66%);mask:radial-gradient(ellipse at 50% 62%,transparent 34%,#000 66%)}
.climb-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.meter{position:absolute;left:var(--pad);top:12%;bottom:12%;width:clamp(70px,9vw,140px);display:flex;align-items:stretch;gap:12px;pointer-events:none}
.meter-rail{position:relative;width:12px;background:var(--white);border:var(--line);box-shadow:3px 3px 0 var(--ink)}
.meter-rail i{position:absolute;left:0;right:0;bottom:0;height:0;background:repeating-linear-gradient(-45deg,var(--yellow) 0 8px,var(--ink) 8px 14px)}
.meter-num{align-self:flex-end;color:var(--white);font:400 clamp(16px,1.6vw,22px)/1 var(--title);text-shadow:3px 3px 0 var(--ink);white-space:nowrap}
.meter-num b{font-weight:400;font-size:clamp(38px,5.2vw,84px);font-variant-numeric:tabular-nums}

.beats{position:absolute;left:calc(var(--pad) + clamp(84px,10vw,160px));top:18%;width:min(440px,calc(100% - 2*var(--pad) - 90px))}
.beat{position:absolute;left:0;top:0;background:var(--white);border:var(--line);box-shadow:var(--shadow);padding:.65em 1em;font:800 clamp(17px,1.6vw,24px)/1.28 var(--body);opacity:0;transform:translateX(-24px) skewX(-6deg);transition:opacity .16s,transform .2s}
.beat b{display:block;font:400 clamp(26px,3vw,46px)/1.1 var(--title);color:var(--sky)}
.beat.on{opacity:1;transform:skewX(-6deg)}

.inbound{position:absolute;left:0;right:0;bottom:6%;background:var(--ink);color:var(--white);border-block:5px solid var(--lime);padding:clamp(14px,2.4vh,26px) var(--pad);text-align:center;transform:scaleY(0);transition:transform .16s cubic-bezier(.2,1.5,.4,1);pointer-events:none}
.inbound.on{transform:scaleY(1)}
.inbound strong{display:block;font:400 clamp(40px,8vw,130px)/1 var(--title);letter-spacing:.01em;color:var(--white);text-shadow:4px 4px 0 var(--pink)}
.inbound-jp{display:block;font:400 clamp(14px,1.5vw,22px)/1.3 var(--title);color:var(--cyan)}
.inbound-sub{display:block;margin-top:6px;font-weight:800;font-size:clamp(16px,1.6vw,24px)}

/* ---- the hangar ---- */
.hangar{position:relative;background:var(--hero);overflow:hidden;isolation:isolate;padding:clamp(28px,5vh,56px) var(--pad) clamp(40px,7vh,72px);min-height:100svh;display:flex;transition:background 0s .18s}
.hangar[data-hero=warden]{--hero:#1569e8;--hero2:#36e8ff}
.hangar[data-hero=skylancer]{--hero:#2b1e5e;--hero2:#ff3d8e}
.hangar[data-hero=blaze]{--hero:#e9601c;--hero2:#ffd23a}
.hangar[data-hero=volt]{--hero:#f2cf1e;--hero2:#141a33}
.hangar[data-hero=aegis]{--hero:#0d7f83;--hero2:#b8fff4}
.hangar-wipe{position:absolute;inset:0;z-index:-1;background:var(--hero2);clip-path:polygon(0 0,0 0,0 100%,0 100%)}
.hangar-wipe.go{animation:wipe .42s cubic-bezier(.7,0,.2,1)}
@keyframes wipe{0%{clip-path:polygon(0 0,0 0,-20% 100%,-20% 100%)}50%{clip-path:polygon(0 0,120% 0,100% 100%,-20% 100%)}100%{clip-path:polygon(120% 0,120% 0,100% 100%,100% 100%)}}
.hangar-jp{position:absolute;z-index:-1;left:50%;top:52%;transform:translate(-50%,-50%);white-space:nowrap;font:400 clamp(90px,21vw,420px)/1 var(--title);color:var(--hero2);opacity:.2;user-select:none}
.hangar-inner{width:100%;max-width:1680px;margin:auto;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr);grid-template-rows:auto 1fr;gap:clamp(12px,2vw,28px) clamp(16px,3vw,48px)}
.hangar-tabs{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px}
.tab{appearance:none;display:flex;align-items:center;gap:10px;background:var(--white);color:var(--ink);border:var(--line);box-shadow:4px 4px 0 var(--ink);padding:5px 16px 5px 5px;font:400 clamp(14px,1.25vw,20px)/1 var(--title);cursor:pointer;transform:skewX(-6deg);transition:transform .09s,box-shadow .09s}
.tab img{width:44px;height:44px;object-fit:cover;border:2px solid var(--ink);background:var(--ink2)}
.tab[aria-selected=true]{background:var(--ink);color:var(--white);transform:skewX(-6deg) translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.hangar-model{position:relative;min-height:clamp(380px,68vh,820px);touch-action:pan-y;cursor:grab}
.hangar-model:active{cursor:grabbing}
.hangar-model canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
.hangar-hint{position:absolute;left:0;bottom:0;background:var(--ink);color:var(--white);padding:4px 10px;font-weight:800;font-size:13px;line-height:1.3;max-width:100%}
.spec{align-self:center;background:var(--white);border:var(--line);box-shadow:8px 8px 0 var(--ink);padding:clamp(16px,1.7vw,26px)}
.spec h3{font:400 clamp(34px,3.6vw,62px)/1 var(--title)}
.spec>p{margin-top:10px;max-width:46ch}
.kit{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin-top:14px}
.kit li{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px;line-height:1.2}
.kit img{width:40px;height:40px;object-fit:contain;flex:none;background:var(--ink);border-radius:2px;padding:3px}
.spec video{width:100%;aspect-ratio:16/9;object-fit:cover;margin-top:16px;border:var(--line);background:var(--ink)}

/* ---- the wave ---- */
.wave{background:var(--paper);padding:clamp(40px,8vh,88px) var(--pad);border-block:var(--line)}
.wave-title{font:400 clamp(34px,6vw,104px)/1.04 var(--title);max-width:15ch}
.wave-grid{max-width:1680px;margin:clamp(20px,4vh,40px) auto 0;display:grid;grid-template-columns:minmax(0,2.3fr) minmax(240px,1fr);gap:clamp(14px,2vw,28px);align-items:start}
.screen{position:relative;border:var(--line);box-shadow:10px 10px 0 var(--ink);background:var(--ink);aspect-ratio:16/9;overflow:hidden}
.screen video{width:100%;height:100%;object-fit:cover}
.screen-card{position:absolute;left:0;right:0;bottom:6%;background:var(--ink);color:var(--white);border-block:4px solid var(--lime);padding:clamp(4px,.7vw,10px) clamp(10px,2vw,28px);text-align:center}
.screen-card.go{animation:card .24s cubic-bezier(.2,1.5,.4,1)}
@keyframes card{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.screen-card span{display:block;margin-top:4px;font-weight:800;font-size:clamp(13px,1.2vw,19px);line-height:1.3}
.roster{display:grid;gap:7px}
.roster button{appearance:none;width:100%;text-align:left;background:var(--white);color:var(--ink);border:var(--line);padding:.42em .8em;font:400 clamp(15px,1.45vw,23px)/1.15 var(--title);cursor:pointer;transform:skewX(-6deg);transition:transform .09s,background .09s}
.roster button:hover{background:var(--cyan)}
.roster button[aria-current=true]{background:repeating-linear-gradient(-45deg,var(--pink) 0 14px,var(--yellow) 14px 28px);transform:skewX(-6deg) translateX(-8px)}
.roster button[aria-current=true] span{background:var(--ink);color:var(--white);padding:0 .3em}

/* ---- the end ---- */
.last{position:relative;min-height:min(92svh,56vw + 220px);display:flex;align-items:flex-end;background:url(img/finale.webp) center/cover no-repeat}
.last-copy{padding:var(--pad);width:100%;background:linear-gradient(0deg,rgba(20,26,51,.88),rgba(20,26,51,.5) 62%,rgba(20,26,51,0));color:var(--white)}
.last h2{font:400 clamp(38px,7.4vw,130px)/1.02 var(--title);text-shadow:4px 4px 0 var(--ink)}
.last p{margin:8px 0 22px;font-weight:800;font-size:clamp(17px,1.6vw,24px)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 28px;background:var(--ink);color:var(--white);padding:18px var(--pad);font-size:15px}
.foot a{color:var(--cyan);margin-right:16px}
.foot p a:last-child{margin-right:0}

@media (max-width:900px){
  .open-shade{background:linear-gradient(0deg,rgba(20,26,51,.9) 0,rgba(20,26,51,.55) 46%,rgba(20,26,51,0) 78%)}
  .open-copy{bottom:64px}
  .open-scroll{right:16px;bottom:10px;font-size:13px}
  .open-scroll::after{display:none}
  .meter{top:auto;bottom:18px;height:34vh}
  .beats{left:16px;right:16px;top:calc(env(safe-area-inset-top) + 66px);width:auto}
  .hangar{padding-inline:16px}
  .hangar-inner{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .hangar-tabs{flex-wrap:nowrap;overflow-x:auto;padding:4px 6px 8px;margin-inline:-6px;scrollbar-width:none}
  .tab{flex:none}
  .tab img{width:34px;height:34px}
  .hangar-model{min-height:56svh}
  .wave-grid{grid-template-columns:minmax(0,1fr)}
  .screen{box-shadow:5px 5px 0 var(--ink);aspect-ratio:4/3}
  .roster{grid-template-columns:1fr 1fr}
  .roster button[aria-current=true]{transform:skewX(-6deg)}
  .kit{gap:6px 8px}
  .kit li{font-size:14px}
  .last{min-height:82svh;background-position:42% center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .climb-lines{display:none}
}

.soon{cursor:default}
.soon:hover{background:var(--yellow)}
.soon:active{transform:skewX(-8deg);box-shadow:var(--shadow)}
.soon.play-small:active{box-shadow:3px 3px 0 var(--ink)}
a.ghost{display:inline-block;text-decoration:none}