.platforms {
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px;
  padding: 0;
  margin: 15px 0 0;
}
.platforms li { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; }
.platform-icon { width: 25px; height: 25px; flex: 0 0 auto; }
.platforms li:last-child .platform-icon { width: 28px; height: 28px; }
.button .platform-icon { width: 20px; height: 20px; }
.credit-link { text-decoration: underline; text-underline-offset: 3px; }
.hero-with-box { min-height: 730px; }
.hero-with-box .hero-content {
  width: min(1240px, calc(100% - 96px));
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 3%;
  padding-block: 15px 76px;
}
.hero-with-box h1 { font-size: clamp(70px, 6.6vw, 102px); }
.hero-with-box .hero-promise { font-family: var(--serif); font-size: clamp(31px, 3vw, 43px); line-height: 1.08; letter-spacing: -.035em; margin-top: 31px; max-width: 500px; }
.hero-detail { max-width: 430px; margin-top: 15px; color: #e0e6d8; font-size: 14px; line-height: 1.6; }
.hero-with-box .actions { margin-top: 25px; }
.hero-with-box .hero-shade {
  background: linear-gradient(90deg, #0c231bdd, #0c231bab 38%, #0c231b55), linear-gradient(0deg, #0c231bcc, transparent 45%);
}
.hero-with-box .hero-content > .game-box { animation: none; }
.game-box { margin: 0; min-width: 0; position: relative; align-self: center; }
.box-stage { height: clamp(390px, 36vw, 545px); position: relative; }
.box-stage canvas {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  border-radius: 10px;
  touch-action: none;
  transition: opacity .3s;
}
.game-box[data-state="ready"] canvas { opacity: 1; pointer-events: auto; }
.box-stage canvas:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.box-pointer .box-stage canvas:focus { outline: none; }
.game-box[data-state="ready"] .box-fallback { opacity: 0; visibility: hidden; }
.box-fallback { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .3s; pointer-events: none; }
.fallback-cover, .fallback-render {
  height: 77%;
  aspect-ratio: 3/4;
  width: auto;
  max-width: 80%;
  border: 0;
  border-radius: 3px;
  box-shadow: 17px 22px 34px #001b23a0, 4px 0 0 #102d24;
  transform: perspective(900px) rotateY(-12deg) rotateZ(-2deg);
}
.fallback-cover { position: relative; overflow: hidden; background: #102d27; text-align: center; color: #fffaf0; }
.fallback-cover::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(#071b19db, transparent 42%), linear-gradient(transparent 68%, #09251ff0); }
.fallback-landscape { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fallback-brand, .fallback-kicker { position: absolute; z-index: 2; top: 4%; font: 700 8px var(--sans); letter-spacing: .04em; }
.fallback-brand { left: 7%; }
.fallback-kicker { right: 7%; }
.fallback-cover strong { position: absolute; z-index: 2; top: 11%; left: 0; width: 100%; font: 46px var(--serif); letter-spacing: -.055em; line-height: 1; text-shadow: 0 3px 12px #071b19b5; }
.fallback-art { position: absolute; z-index: 2; width: 76%; height: 67%; object-fit: contain; left: 12%; bottom: 3%; }
.fallback-tagline { position: absolute; z-index: 3; bottom: 4%; left: 0; width: 100%; font: 600 9px var(--sans); }
.game-box figcaption { text-align: center; margin-top: 0; }
.box-hint { display: block; font-size: 11px; color: #f4edda; min-height: 18px; }
.box-concept { display: block; font-size: 9px; letter-spacing: .04em; color: #d2d6bc; margin-top: 3px; }
@media(max-width:1000px) and (min-width:701px) {
  .hero-with-box .hero-content { width: calc(100% - 48px); gap: 0; }
  .hero-with-box h1 { font-size: clamp(55px, 8vw, 74px); }
  .hero-with-box .hero-promise { font-size: 32px; }
  .hero-detail { font-size: 13px; max-width: 390px; }
  .hero-with-box .hero-promise br { display: none; }
  .hero-with-box .eyebrow { font-size: 9px; }
  .box-stage { height: 425px; }
  .box-hint { font-size: 10px; padding-inline: 12px; }
  .platforms { gap: 20px; }
}
@media(max-width:700px) {
  .hero-with-box { height: auto; min-height: 0; max-height: none; }
  .hero-with-box .hero-content { width: calc(100% - 40px); display: block; padding-top: 48px; padding-bottom: 106px; }
  .hero-with-box .hero-copy { max-width: 530px; }
  .hero-with-box h1 { font-size: clamp(55px, 15vw, 83px); }
  .hero-with-box .hero-promise { font-size: clamp(32px, 9vw, 43px); margin-top: 25px; }
  .hero-detail { font-size: 13px; margin-top: 12px; }
  .hero-with-box .hero-caption { font-size: 9px; }
  .hero-with-box .hero-art { object-position: 63% center; }
  .game-box { margin: 15px auto 0; max-width: 475px; }
  .box-stage { height: min(116vw, 485px); }
  .platforms { gap: 27px; margin-top: 13px; }
  .platforms li { font-size: 12px; gap: 8px; }
  .platform-icon { width: 23px; height: 23px; }
  .box-hint { font-size: 10px; }
}
@media(max-width:360px) {
  .platforms { gap: 19px; }
  .platforms li { font-size: 11px; gap: 7px; }
  .platform-icon { width: 21px; height: 21px; }
  .game-box { margin-inline: -10px; }
  .box-hint { font-size: 9px; }
}