.games {
  position: relative;
  min-height: 100vh;
  padding: var(--section-top) var(--gutter) 16vh;
}

.games__grid {
  display: flex;
  gap: 6vw;
  align-items: flex-start;
  width: 84vw;
  max-width: calc(100% - 56px);
}

.games__col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16vh;
}

.games__head { margin-bottom: -7vh; }

.tile {
  display: flex;
  flex-direction: column;
  cursor: default;
  transition: transform var(--dur-micro) var(--ease-glide);
}
.tile:focus-visible { outline-offset: 6px; }

.tile__media {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 20px;
  background: var(--surface-1);
}

/* The icon fills the panel and scales inside the clip. */
.tile__art {
  position: absolute;
  inset: 0;
  transition: transform var(--dur-state) var(--ease-glide);
}

.tile__icon {
  position: absolute;
  inset: 0;
  background: var(--icon);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: min(8vw, 13vh);
  letter-spacing: -.02em;
  color: var(--canvas);
}

.tile__dim {
  position: absolute;
  inset: 0;
  background: var(--canvas);
  opacity: .25;
  pointer-events: none;
  transition: opacity var(--dur-state) var(--ease-glide);
}

.tile__asset {
  position: absolute;
  left: 16px;
  bottom: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--text-muted);
}

/* A real icon. */
.has-art .tile__icon { background: var(--art) center / cover; color: transparent; }
.has-art .tile__asset { display: none; }

.tile__meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-top: 24px;
}
.tile__text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.tile__title {
  margin: 0;
  font-size: clamp(20px, 1.6vw, 28px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--text-rest);
  transition: color var(--dur-state) var(--ease-glide);
}
.tile__services { margin: 0; font-size: 14px; line-height: 1.4; color: var(--text-muted); }

/* Tiles turn over to a gameplay clip or a few words about the game. The tile around them stays still for hit testing. */
.tile__turn {
  display: grid;
  transform: perspective(1500px) rotateY(0deg);
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.45, 0, .55, 1);
  will-change: transform;
}
.tile__turn > * {
  grid-area: 1 / 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.tile__turn > .tile__media { transform: translateZ(.1px); }
.tile__turn > * { box-shadow: 0 0 0 1px var(--hairline), 0 26px 60px -30px rgba(5, 5, 7, .6); }

.tile__back {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 20px;
  background: var(--surface-1);
  transform: rotateY(180deg) translateZ(.1px);
}
.tile__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* The icon's own colours, blurred and dimmed, behind the text. Light type on either page tone. */
.tile__back--text::before {
  content: '';
  position: absolute;
  inset: -12%;
  background: var(--art, var(--icon)) center / cover;
  filter: blur(34px) brightness(.36) saturate(1.2);
}
.tile__about {
  position: relative;
  margin: 0;
  padding: 2.8vw;
  font-family: var(--font-heading);
  font-size: 2.9vw;
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -.01em;
  color: #F5F5F2;
}

/* A sheet of glass over each face: a lit rim, a crisp-edged reflection, and light that crosses it as the tile turns. */
.tile__glass {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .09) 31.8%, rgba(255, 255, 255, 0) 32%),
    linear-gradient(118deg, rgba(255, 255, 255, 0) 36.8%, rgba(255, 255, 255, .06) 37%, rgba(255, 255, 255, .06) 41.8%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(315deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 24%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .2),
    inset 0 1.5px 0 rgba(255, 255, 255, .42),
    inset 0 -8px 16px -10px rgba(0, 0, 0, .5);
}
/* Over a video only the rim, so the picture stays clear. */
.tile__glass--clear { background: none; }
.tile__glass--clear::before { display: none; }
.tile__glass::before {
  content: '';
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 40%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, 0));
  transform: translateX(-160%) skewX(-18deg);
}
.tile[data-state="hover"] .tile__glass::before, .tile[data-state="pressed"] .tile__glass::before {
  transform: translateX(360%) skewX(-18deg);
  transition: transform 1.1s cubic-bezier(.3, 0, .3, 1) .3s;
}
/* The soft light under the mouse, moved by js/games.js. */
.tile__glare {
  position: absolute;
  left: -70%;
  top: -70%;
  width: 140%;
  height: 140%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0));
  opacity: 0;
  transition: opacity var(--dur-state) var(--ease-glide);
  will-change: transform;
}
.tile[data-state="hover"] .tile__glare, .tile[data-state="pressed"] .tile__glare { opacity: 1; }
@media (hover: none) {
  .tile__glare { display: none; }
}

.tile[data-state="hover"] .tile__turn, .tile[data-state="pressed"] .tile__turn { transform: perspective(1500px) rotateY(180deg); }

.tile[data-state="hover"] .tile__art, .tile[data-state="pressed"] .tile__art { transform: scale(1.045); }
.tile[data-state="hover"] .tile__dim, .tile[data-state="pressed"] .tile__dim, .is-light .tile__dim { opacity: 0; }
.tile[data-state="hover"] .tile__title, .tile[data-state="pressed"] .tile__title { color: var(--text-primary); }
.tile[data-state="pressed"] { transform: translateY(2px); }

/* No rotation: the clip's still fades in over the icon. */
@media (prefers-reduced-motion: reduce) {
  .tile__turn, .tile[data-state="hover"] .tile__turn, .tile[data-state="pressed"] .tile__turn { transform: none; transition: none; }
  .tile__turn > * { backface-visibility: visible; -webkit-backface-visibility: visible; }
  .tile__turn > .tile__media { transform: none; }
  .tile[data-state="hover"] .tile__glass::before, .tile[data-state="pressed"] .tile__glass::before { transition: none; }
  .tile__back { transform: none; opacity: 0; transition: opacity var(--dur-micro) var(--ease-glide); }
  .tile[data-state="hover"] .tile__back, .tile[data-state="pressed"] .tile__back { opacity: 1; }
}