/* The game launch: two available stores, one clearly marked future platform. */
.hero__actions .button--game {
  border: 1px solid #ffffff83;
  color: var(--bone);
  background: #0b0b0d55;
  transition: background .2s, border-color .2s, transform .2s;
}
.hero__actions .button--game:hover { background: #ffffff18; border-color: var(--bone); transform: translateY(-3px); }
.hero__actions .button--game span { color: var(--orange); }
.game {
  padding: clamp(4.5rem, 9vw, 8rem) var(--pad);
  background: radial-gradient(75% 100% at 70% 15%, #48201c55, transparent 72%), #101014;
  border-block: 1px solid var(--rule);
}
.game__intro {
  display: grid;
  grid-template-columns: minmax(270px, .83fr) minmax(0, 1.17fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.game__copy { position: relative; z-index: 1; }
.game h2 {
  margin: .4rem 0 1.4rem;
  font: clamp(3.8rem, 7.5vw, 8.3rem)/.9 var(--display);
  letter-spacing: -.035em;
  text-transform: uppercase;
}
.game h2 em { color: var(--orange); font-style: normal; }
.game__lead { max-width: 37ch; color: var(--bone-2); font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.6; }
.game__stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.7rem; }
.game__primary {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-height: 78px;
  padding: .85rem 1.2rem;
  color: var(--ink);
  background: var(--orange);
  transition: background .2s, transform .2s;
}
.game__primary:hover { background: var(--bone); transform: translateY(-3px); }
.game__primary img { width: 26px; height: 26px; filter: brightness(0); }
.game__primary span:not(.game__arrow) { display: grid; font: 1.6rem/1 var(--display); text-transform: uppercase; white-space: nowrap; }
.game__primary small { font: 700 .63rem/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.game__arrow { align-self: stretch; display: grid; place-items: center; margin-left: 1rem; padding-left: 1rem; border-left: 1px solid #17171955; font: 1.5rem var(--mono); }
.game__art { position: relative; min-width: 0; padding: 10px; background: #050507; border: 1px solid #ffffff35; box-shadow: 0 25px 75px #0008; }
.game__art::before { content: ''; position: absolute; inset: -1px; z-index: -1; background: linear-gradient(130deg, #ff461244, transparent 45%, #6a3e9b33); }
.game__art img { width: 100%; height: auto; aspect-ratio: 1024 / 500; object-fit: cover; }
.game__art figcaption { position: absolute; right: 10px; bottom: 10px; padding: .45rem .65rem; background: #08080bdc; color: #ded5ca; font: .6rem var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.game__platforms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: clamp(2.5rem, 5vw, 4rem); }
.game__platform { display: flex; align-items: center; gap: 1.2rem; min-height: 100px; padding: 1.25rem; border: 1px solid #ffffff2d; background: #ffffff07; }
.game__platform img { flex: none; width: 32px; height: 32px; }
.game__platform > span:not(.game__platform-arrow) { display: grid; gap: .15rem; }
.game__platform strong { font: clamp(1.4rem, 2.2vw, 2rem)/1 var(--display); text-transform: uppercase; letter-spacing: .015em; }
.game__platform small { color: var(--mist); font: .7rem var(--mono); text-transform: uppercase; letter-spacing: .09em; }
.game__platform--live { border-color: var(--orange); background: #ff461214; transition: background .2s, border-color .2s; }
.game__platform--live:hover { background: #ff46122c; border-color: #ff845c; }
.game__platform--live small, .game__platform-arrow { color: #ff936e; }
.game__platform-arrow { margin-left: auto; font: 1.4rem var(--mono); }
.game__platform--soon { color: #d8d2ce; }
.game__platform--soon img { opacity: .7; }
@media (max-width: 900px) {
  .game__intro { grid-template-columns: 1fr; }
  .game h2 { font-size: clamp(4rem, 11vw, 7rem); }
}
@media (max-width: 650px) {
  .game__platforms { grid-template-columns: 1fr; }
  .game__platform { min-height: 80px; }
  .game__art { padding: 5px; }
  .game__art figcaption { display: none; }
  .game__stores, .game__primary { width: 100%; }
  .game__arrow { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__actions .button--game, .game__primary, .game__platform--live { transition: none; }
  .hero__actions .button--game:hover, .game__primary:hover { transform: none; }
}