/* Shared row sizes, with Kingdomino at lower left and Sushi at lower right. */
.player-page .hero {
  --hero-stack-width: min(400px, calc(100vw - 2 * var(--gutter)));
  --hero-logo-height: calc(var(--hero-stack-width) * .28);
  --hero-stack-gap: 14px;
  --hero-copy-height: 4.5em;
  --hero-platform-height: 104px;
  --hero-bottom-inset: clamp(24px, 4vw, 56px);
  --hero-peek-width: clamp(80px, 8vw, 128px);
}
/* Film and copy share a single clipped scene, so neither can cross onto the other film. */
.player-page .hero-scene {
  position: absolute;
  inset: 0;
  isolation: isolate;
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  clip-path: inset(0);
}
.player-page .hero-scene.is-active,
.player-page .hero-scene.is-leaving,
.player-page .hero-scene.is-entering,
.player-page .hero-scene.is-peek { opacity: 1; visibility: visible; }
.player-page .hero-scene.is-active { pointer-events: auto; }
.player-page .hero-scene.is-entering { z-index: 1; will-change: clip-path; }
.player-page .hero-scene.is-peek { z-index: 1; }
/* The diagonal seam meets the screen edge one third down, leaving the top clear. */
.player-page .hero-scene.is-peek[data-index="1"] {
  clip-path: polygon(calc(100% + var(--hero-peek-width) / 2) 0,
    calc(100% + var(--hero-peek-width)) 0, calc(100% + var(--hero-peek-width)) 100%,
    calc(100% - var(--hero-peek-width)) 100%);
}
.player-page .hero-scene.is-peek[data-index="0"] {
  clip-path: polygon(calc(-1 * var(--hero-peek-width)) 0, calc(var(--hero-peek-width) / -2) 0,
    var(--hero-peek-width) 100%, calc(-1 * var(--hero-peek-width)) 100%);
}
.player-page .hero-scene.is-peek .hero-slide { opacity: 0; visibility: hidden; }
/* The resting wedge is solid coffee, above the film's shading. */
.player-page .hero-peek-tint {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--cocoa); opacity: 0;
}
.player-page .hero-scene.is-peek .hero-peek-tint { opacity: 1; }
.player-page .hero-scene:is(.is-entering, .is-leaving) .hero-peek-tint { will-change: opacity; }

/* The handle sits on the film seam; its position shares the wipe's timeline. */
.player-page .hero-pull {
  position: absolute; z-index: 4; top: 66.666667%; left: calc(100% - var(--hero-peek-width) / 2);
  width: 80px; height: 64px; padding: 18px 24px;
  display: grid; place-items: center; isolation: isolate;
  transform: translate(-50%, -50%); border: 0; border-radius: 0;
  background: url('assets/button-outline.svg') center / 100% 100% no-repeat;
  color: var(--white); cursor: grab; touch-action: pan-y; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.player-page .hero-pull[data-side="left"] { left: calc(var(--hero-peek-width) / 2); }
.player-page .hero-pull::before {
  content: ''; position: absolute; inset: 4px; z-index: -1;
  clip-path: var(--button-clip); background: var(--orange);
  transition: inset .3s var(--ease);
}
.player-page .hero-pull:is(:hover, :focus-visible, :active)::before { inset: 0; }
.player-page .hero-pull:focus-visible { outline: 2px solid var(--white); outline-offset: 6px; }
.player-page .hero-pull svg { width: 32px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; transform: scaleX(1); }
.player-page .hero-pull-grip { opacity: .55; }
.player-page .hero-pull[data-side="left"] svg { transform: scaleX(-1); }
.player-page .hero.is-pulling, .player-page .hero.is-pulling .hero-pull { cursor: grabbing; }
.player-page .hero-media {
  inset: 0;
  z-index: -1;
  opacity: 1;
  visibility: inherit;
  transition: none;
}
/* Each film carries the shading for its own copy, including during the wipe. */
.player-page .hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  --shade-direction: 90deg;
  background: linear-gradient(var(--shade-direction), #2A1A12E0 0%, #2A1A12A6 33%, #2A1A1217 75%),
    linear-gradient(0deg, #2A1A12E6 0%, transparent 27%, #2A1A121A 100%);
}
.player-page .hero-media[data-index="1"]::after { --shade-direction: 270deg; }
.player-page .hero-slide,
.player-page .hero-slide.is-active {
  display: grid;
  grid-template-rows: calc(var(--hero-stack-width) * .45) auto minmax(var(--hero-platform-height), 1fr) 54px;
  height: calc(var(--hero-stack-width) * .45 + var(--hero-copy-height) + var(--hero-platform-height) + 54px + 3 * var(--hero-stack-gap));
  gap: var(--hero-stack-gap);
  left: var(--gutter);
  right: auto;
  top: auto;
  bottom: var(--hero-bottom-inset);
  width: var(--hero-stack-width);
  text-align: center;
  z-index: 1;
  font-size: clamp(17px, 1.4vw, 21px);
  transform: none;
  transition: none;
}
.player-page .hero-slide[data-index="1"] { left: auto; right: var(--gutter); }
.player-page .hero-scene:is(.is-entering, .is-leaving) .hero-slide {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  will-change: transform, opacity;
}
.player-page .hero-slide .hero-game-logo {
  display: grid;
  place-items: center;
  grid-row: 1;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  margin: 0;
}
.player-page .hero-game-logo img {
  /* Match artwork height, rather than stretching two different logo ratios
     across the same width. Keep the shared row so the copy never moves. */
  width: auto;
  max-width: 100%;
  height: var(--hero-logo-height);
  object-fit: contain;
  object-position: center;
}
/* Enlarge Sushi within the same centred row, retaining its optical offset. */
.player-page .sushi-logo img {
  height: calc(var(--hero-logo-height) * 1.25);
  transform: translateY(2%);
}
.player-page .hero-blurb {
  grid-row: 2;
  margin: 0;
  height: auto;
  min-height: 0;
  font-size: inherit;
  line-height: 1.5;
  align-self: start;
}
.player-page .hero-slide > .hero-platforms {
  grid-row: 3;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  align-self: center;
  justify-content: center;
  font-size: 11px;
}
.player-page .hero-slide > .button-sweep {
  grid-row: 4;
  width: min(280px, 100%);
  max-width: none;
  min-width: 0;
  height: 54px;
  min-height: 0;
  margin: 0;
  justify-self: center;
  align-self: end;
}

/* The outline and inset face share the same subtly widening silhouette. */
.player-page .hero-slide > .button-sweep {
  --button-depth: perspective(700px) translate3d(var(--button-x, 0px), var(--button-y, 0px), 0) rotateX(var(--button-rx, 0deg)) rotateY(var(--button-ry, 0deg));
  isolation: isolate;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: url('assets/button-outline.svg') center / 100% 100% no-repeat;
  color: var(--white);
  box-shadow: none;
  transform: var(--button-depth);
  transform-origin: center;
  transition: color .4s ease, transform .3s var(--ease);
}
.player-page .hero-slide > .button-sweep::before {
  inset: 4px;
  z-index: -1;
  border-radius: 0;
  background: var(--orange);
  transform: none;
  box-shadow: inset 0 0 0 1px #FFFFFF33;
  transition: inset .5s var(--ease), background .45s ease, box-shadow .45s ease;
}
.player-page .hero-slide > .button-sweep::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: var(--orange);
  filter: blur(22px);
  opacity: 0;
  transform: scale(.94, .65);
  transition: opacity .5s ease, transform .6s var(--ease);
}
.player-page .button-sweep .button-content {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  transform: none;
}
.player-page .button-sweep .button-cue {
  width: 0;
  height: 15px;
  margin-right: 0;
  flex: none;
  fill: currentColor;
  stroke: none;
  opacity: 0;
  transform: translateX(-8px) scale(.65);
  transition: width .45s var(--ease), margin-right .45s var(--ease),
    opacity .3s ease, transform .5s var(--ease);
}
.player-page .hero-slide > .button-sweep:is(:hover, :focus-visible, :active) {
  background: url('assets/button-outline.svg') center / 100% 100% no-repeat;
  color: var(--white);
  box-shadow: none;
  transform: var(--button-depth);
}
.player-page .hero-slide > .button-sweep:is(:hover, :focus-visible, :active)::before {
  inset: 0;
  background: var(--orange);
  box-shadow: inset 0 0 0 1px #FFFFFF12;
  transform: none;
}
.player-page .hero-slide > .button-sweep:is(:hover, :focus-visible, :active)::after {
  opacity: .46;
  transform: scale(1.02, .85);
}
.player-page .button-sweep:is(:hover, :focus-visible, :active) .button-cue {
  width: 13px;
  margin-right: 12px;
  opacity: 1;
  transform: none;
}
.player-page .hero-slide > .button-sweep:active {
  transform: var(--button-depth) scale(.985);
  transition-duration: .12s;
}
/* Keep the play cue visible on touch screens. */
@media (hover: none) {
  .player-page .button-sweep .button-cue { width: 13px; margin-right: 12px; opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .player-page .hero-slide > .button-sweep,
  .player-page .hero-slide > .button-sweep::before,
  .player-page .hero-slide > .button-sweep::after,
  .player-page .button-sweep .button-cue { transition: none; }
  .player-page .hero-slide > .button-sweep,
  .player-page .hero-slide > .button-sweep:is(:hover, :focus-visible, :active) { transform: none; }
}
.motion-paused.player-page .hero-slide > .button-sweep,
.motion-paused.player-page .hero-slide > .button-sweep::before,
.motion-paused.player-page .hero-slide > .button-sweep::after,
.motion-paused.player-page .button-sweep .button-cue { transition: none; }
.motion-paused.player-page .hero-slide > .button-sweep,
.motion-paused.player-page .hero-slide > .button-sweep:is(:hover, :focus-visible, :active) { transform: none; }
@media (forced-colors: active) {
  .player-page .hero-slide > .button-sweep { border: 1px solid ButtonText; color: ButtonText; background: ButtonFace; }
  .player-page .hero-slide > .button-sweep::before,
  .player-page .hero-slide > .button-sweep::after { display: none; }
  .player-page .hero-slide > .button-sweep:is(:hover, :focus-visible, :active) { background: Highlight; color: HighlightText; }
}
@media (max-width: 650px) {
  .player-page .hero { --hero-peek-width: clamp(64px, 8vw, 128px); --hero-stack-gap: 12px; --hero-copy-height: 6em; --hero-bottom-inset: 24px; --hero-stack-width: min(400px, calc(100vw - 2 * var(--gutter) - var(--hero-peek-width))); }
  .player-page .hero-pull { width: 60px; height: 54px; padding: 15px 14px; }
  /* Preserve the existing mobile film crop inside a viewport-wide wipe layer. */
  .player-page .hero-media .hero-poster,
  .player-page .hero-media .hero-video { width: 198%; max-width: none; left: -48%; }
  .player-page .hero-media::after {
    background: linear-gradient(0deg, #2A1A12 0%, #2A1A12EF 14%, #2A1A1290 47%, #2A1A1233 80%, #2A1A1220),
      linear-gradient(var(--shade-direction), #2A1A1265, transparent 90%);
  }
  .player-page .hero-slide,
  .player-page .hero-slide.is-active {
    font-size: 16px;
  }
  .player-page .hero-slide > .button-sweep { width: min(280px, 100%); padding-inline: 6px; font-size: 19px; letter-spacing: .01em; }
}
@media (prefers-reduced-motion: reduce) {
  .player-page .hero-pull::before { transition: none; }
}
.motion-paused.player-page .hero-pull::before { transition: none; }
@media (forced-colors: active) {
  .player-page .hero-pull { background: ButtonFace; color: ButtonText; border: 2px solid ButtonText; }
  .player-page .hero-pull::before { display: none; }
}

/* Store badges retain their official artwork and a 44px keyboard/touch target. */
.player-page .hero-slide > .hero-platform-badges {
  --store-badge-gap: 8px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.12431fr);
  grid-template-rows: repeat(2, 44px);
  width: min(520px, calc(100% + 2 * (var(--gutter) - 12px)));
  gap: 8px var(--store-badge-gap); justify-self: center;
  align-items: center; align-content: center; letter-spacing: normal; text-transform: none;
}
/* Intrinsic artwork ratios give Steam, App Store and Google Play equal heights. */
.hero-platform-badges > .hero-platform-luna {
  grid-column: 2; justify-self: center;
  width: 100%;
}
.hero-platform-badge {
  display: grid; place-items: center; min-width: 0; min-height: 44px;
  border-radius: 7px; transition: transform .2s var(--ease), filter .2s;
}
.hero-platform-badge > img { display: block; width: 100%; height: auto; max-height: 44px; object-fit: contain; }
.hero-platform-badge:is(:hover, :focus-visible) { transform: translateY(-2px); filter: brightness(1.12); }
.hero-platform-badge:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; }
.hero-luna-badge { display: block; width: 100%; height: auto; max-height: 44px; overflow: visible; }
.motion-paused .hero-platform-badge { transition: none; transform: none; }
@media (prefers-reduced-motion: reduce) { .hero-platform-badge { transition: none; transform: none!important; } }
@media (forced-colors: active) { .hero-platform-badge { outline: 1px solid LinkText; } }

@media (max-width: 650px) {
  .player-page .hero-slide > .hero-platform-badges { --store-badge-gap: 6px; }
}

/* Stack the release status below the supplied wishlist badge in the shared slot. */
.player-page .hero-slide > .hero-wishlist-platform {
  flex-direction: column; flex-wrap: nowrap; gap: 8px;
}
.hero-wishlist-platform > span { flex: none; white-space: nowrap; line-height: 16px; }
.hero-wishlist-badge { flex: none; width: 132px; max-width: 100%; }
.hero-steam-badge-art { display: block; position: relative; width: 100%; aspect-ratio: 1024 / 342; overflow: hidden; }
.hero-steam-badge-art img { position: absolute; width: 139.0625%; max-width: none; height: auto; left: -19.53125%; top: -29.239766%; }