@charset "UTF-8";

@font-face {
  font-family: "Menu Heading";
  src: url("assets/Eurostile-Bol.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Menu Body";
  src: url("assets/MyriadPro-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
:root {
  color-scheme: dark;
  font-family: "Menu Body", "Segoe UI", sans-serif;
  color: #e3effb;
  background: #020b14;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  background:
    radial-gradient(ellipse at 32% 54%, #06324b65, transparent 45%),
    radial-gradient(ellipse at 73% 57%, #77371220, transparent 38%),
    linear-gradient(160deg, #091422, #020a12 70%);
}
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid #d6f8ff; outline-offset: 8px; }
.landing {
  position: relative;
  isolation: isolate;
  width: 100%;
  display: grid;
  place-items: center;
  padding: 36px 24px;
}
.menu {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  text-align: center;
  padding-bottom: 5vh;
}
h1 { margin: 0; }
h1 img { display: block; width: min(390px, 84%); height: auto; margin-inline: auto; }
h1 > span {
  display: block;
  margin-top: 12px;
  padding-left: 4px;
  color: #9ebfd2;
  font: 700 14px "Menu Heading", Arial, sans-serif;
  letter-spacing: 5px;
}
.playtest {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 34px 0 23px;
  padding: 8px 13px;
  color: #a3d9ef;
  border: 1px solid #1a465a;
  border-radius: 3px;
  background: #061827c9;
  font: 700 11px "Menu Heading", Arial, sans-serif;
  letter-spacing: 2px;
}
.playtest > span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #51ddff;
  box-shadow: 0 0 9px #21c4ff;
}
.trailer {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 0 0 28px;
  border: 1px solid #285269;
  border-radius: 4px;
  background: #020b14;
  box-shadow: 0 12px 36px #0007, 0 0 24px #009dff12;
}
.download-frame {
  position: relative;
  filter: drop-shadow(-10px 7px 28px #009dff35) drop-shadow(14px 3px 22px #ff840021);
  transition: filter .2s, transform .2s;
}
.download-frame::before {
  content: "";
  position: absolute;
  inset: -13px -14px;
  border: 0;
  border-radius: 4px;
  pointer-events: none;
}
.download {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 85px;
  align-items: stretch;
  min-height: 86px;
  overflow: hidden;
  color: #022339;
  background: linear-gradient(110deg, #b5f4ff 0%, #39cfff 45%, #2eb5ef 80%);
  clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
  box-shadow: inset 0 2px 0 #edfcff, inset 0 -3px 0 #1285b5;
  text-transform: uppercase;
  font: 700 27px/1.1 "Menu Heading", Arial, sans-serif;
}
.download-label { display: grid; place-items: center; padding: 22px 14px 22px 24px; }
.download-icon {
  display: grid;
  place-items: center;
  color: #402304;
  background: linear-gradient(130deg, #ffd38e, #ff9b36 65%, #ef751e);
  border-left: 1px solid #ffe0ae;
  box-shadow: inset 0 2px 0 #fff0c9, inset 0 -3px 0 #b54c12;
}
.download-icon svg { width: 29px; height: 29px; }
.download::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, #ffffff7a 50%, transparent 70%);
  transform: translateX(-110%);
  pointer-events: none;
}
.download-frame:hover {
  transform: translateY(-3px);
  filter: drop-shadow(-10px 9px 35px #00b7ff65) drop-shadow(14px 5px 28px #ff84003d);
}
.download:hover::after { animation: shine .65s ease-out; }
.download-frame:active { transform: translateY(1px); }
.download:focus-visible { outline: none; box-shadow: inset 0 0 0 3px #dcf9ff; }
.platform { color: #7fa6bd; font-size: 13px; margin: 29px 0 0; letter-spacing: 1px; }
.versions { color: #7fa6bd; font-size: 13px; margin: 9px 0 0; line-height: 1.4; }
.version-divider { color: #405c70; padding-inline: 8px; }
.alpha-corner { position: fixed; z-index: 5; top: 0; right: 0; width: 148px; height: 148px; overflow: hidden; pointer-events: none; }
.alpha-corner span { position: absolute; top: 30px; right: -45px; width: 210px; padding: 9px 0; transform: rotate(45deg); text-align: center; color: #fff5e8; font: 700 15px/1 "Menu Heading", sans-serif; letter-spacing: 4px; background: linear-gradient(90deg, #a63212, #ed6a1c 48%, #a63212); border-block: 1px solid #ffb15b; box-shadow: 0 4px 18px #0009, 0 0 20px #ff6b182b; text-shadow: 0 2px 2px #4c160f; }
@media (max-width: 480px), (max-height: 430px) {
  .alpha-corner { width: 108px; height: 108px; }
  .alpha-corner span { top: 22px; right: -56px; padding-block: 7px; font-size: 12px; }
  .versions { font-size: 11px; }
  .version-divider { padding-inline: 3px; }
}
.artwork {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: min(1000px, 92%);
  left: 50%;
  top: 59%;
  transform: translateX(-50%);
  opacity: .28;
  mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent);
}
.puck { display: block; width: 100%; height: auto; }
footer { position: relative; z-index: 1; text-align: center; padding: 0 24px 24px; color: #627f92; font-size: 13px; }
footer a { display: inline-block; margin: 5px 14px; }
footer a:hover { color: #64dfff; }
footer span { margin-left: 8px; }
@keyframes shine { to { transform: translateX(110%); } }

@media (max-width: 700px) {
  .landing { padding-inline: 34px; }
  .menu { max-width: 440px; padding-bottom: 4vh; }
  h1 img { width: 92%; }
  h1 > span { font-size: 12px; letter-spacing: 3px; }
  .playtest { margin-block: 30px 23px; font-size: 10px; }
  .download { grid-template-columns: 1fr 62px; min-height: 76px; font-size: clamp(17px, 4.8vw, 23px); }
  .download-label { padding: 20px 10px 20px 14px; }
  .download-icon svg { width: 25px; height: 25px; }
  .download-frame::before { inset: -10px; }
  .platform { margin-top: 25px; font-size: 12px; }
  .artwork { top: 64%; width: 100%; opacity: .32; }
  footer { padding-bottom: 20px; }
}
@media (max-height: 600px) {
  .landing { padding-block: 24px 18px; }
  .menu { padding-bottom: 0; }
  h1 img { width: min(260px, 80%); }
  h1 > span { font-size: 11px; margin-top: 8px; letter-spacing: 3px; }
  .playtest { margin-block: 20px 20px; padding-block: 6px; }
  .download { min-height: 65px; font-size: 22px; }
  .download-label { padding-block: 16px; }
  .platform { margin-top: 24px; }
  .artwork { top: 62%; width: min(650px, 90%); }
  footer { padding-bottom: 14px; }
}
@media (max-width: 360px) {
  .landing { padding-inline: 26px; }
  .download { font-size: 17px; grid-template-columns: 1fr 52px; }
}
@media (max-height: 430px) and (orientation: landscape) {
  .landing { padding-block: 14px 8px; }
  h1 img { width: 210px; }
  h1 > span { margin-top: 6px; font-size: 10px; }
  .playtest { margin-block: 15px 18px; font-size: 10px; }
  .download { min-height: 60px; }
  .menu { max-width: 440px; }
  .platform { margin-top: 22px; font-size: 12px; }
  .artwork { top: 42%; width: 650px; max-width: 95%; opacity: .18; }
}
@media (prefers-reduced-motion: reduce) {
  .download-frame { transition: none; }
  .download:hover::after { animation: none; }
}