/* Project details follow the approved FnS hero metadata treatment. */
.snakes-case-study .snakes-project-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 56px;
  padding: 38px 2% 46px;
}
.snakes-case-study .snakes-project-meta {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px 28px;
  margin: 0;
  padding: 0;
}
.snakes-case-study .snakes-project-meta > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.snakes-case-study .snakes-project-meta dt,
.snakes-case-study .snakes-project-meta dd {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  text-transform: none;
}
.snakes-case-study .snakes-project-meta dt {
  color: #626977;
  font-weight: 400;
  letter-spacing: normal;
}
.snakes-case-study .snakes-project-meta dd {
  color: #101216;
  font-weight: 600;
  letter-spacing: -.012em;
}
@media (max-width: 767px) {
  .snakes-case-study .snakes-project-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
    padding: 26px 0 34px;
  }
  .snakes-case-study .snakes-project-meta {
    flex-direction: column;
    gap: 16px;
  }
}

/* Snakes & Ladders only. Presentation gutters are trimmed in the video files,
   so native playback/fullscreen controls stay inside the visible frame. */
.snakes-case-study .game-video[data-snakes-clip] {
  border-radius: 9% / 4%;
  overflow: hidden;
  background: transparent;
}
.snakes-case-study .game-video[data-snakes-clip] video {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: var(--video-ratio);
  object-fit: contain;
  /* Clip only once. A second rounded video over a dark wrapper produces
     a hairline at the antialiased edge, especially at fractional sizes. */
  border-radius: 0;
  background: transparent;
}
.snakes-case-study .game-video[data-snakes-clip="loading-hints"] {
  border-radius: 16px;
}
.snakes-case-study .game-video[data-snakes-clip="network"] {
  border-radius: 12px;
}

/* Keep all 35 frames visible, with equal breathing room around the grid. */
.snakes-case-study .game-sprite-art {
  width: 100%;
  margin: 0;
  mask-image: none;
  -webkit-mask-image: none;
  mix-blend-mode: normal;
}
.snakes-case-study .game-sprite-art .game-crop,
.snakes-case-study .game-gallery-content .game-crop {
  border-radius: 12px;
}
.snakes-case-study .game-gallery-dialog {
  padding: 16px;
}
.snakes-case-study .game-gallery-close {
  position: static;
  margin: 0 0 12px auto;
}
.snakes-case-study .game-gallery-content {
  max-width: min(680px, calc((92dvh - 100px) * 1660 / 1740));
  margin-inline: auto;
}

.snakes-case-study .game-film .film-poster {
  object-fit: contain;
}

/* Keep the hero annotation in the copy column, clear of both video screens. */
.snakes-case-study .game-hero-copy .game-doodle {
  display: block;
  width: max-content;
  margin: 24px 12% 0 auto;
  text-align: center;
  rotate: -5deg;
}
.snakes-case-study .game-hero-copy .game-doodle svg {
  width: 64px;
  height: 48px;
  margin: 5px 0 0 auto;
  transform: scaleX(-1);
}

@media (max-width: 700px) {
  .snakes-case-study .game-hero-copy .game-doodle {
    margin-right: 6%;
  }
}

/* The native full-screen player must show the full original video. */
.snakes-case-study .game-video[data-snakes-clip] video:fullscreen {
  width: 100%;
  height: 100%;
  object-fit: contain;
}