.game-case {
  --game-blue: #315ab5;
  --game-blue-dark: #122b5d;
  --game-card: #f0f1f6;
  --game-card-soft: #f5f4f8;
  --game-body-size: 17px;
  --game-body-line-height: 1.68;
}

.game-case .detail-progress-bar { background: var(--game-blue); }

.game-case .game-hero-subtitle {
  max-width: 760px;
  margin: clamp(28px, 3vw, 36px) auto 0;
  color: #777b83;
  font-size: 17px;
  line-height: 1.5;
}

.game-media {
  position: relative;
  max-width: var(--detail-media);
  overflow: hidden;
  margin: clamp(34px, 5vw, 64px) auto 0;
  border-radius: clamp(18px, 2.3vw, 30px);
  background: transparent;
}

.game-media img { display: block; width: 100%; height: auto; }

.game-media figcaption {
  padding: 14px 18px 16px;
  color: #8d9097;
  font-size: 14px;
  line-height: 1.45;
}

.game-hero-media { max-width: none; }

.game-media-contained { max-width: 760px; }

#audience > .game-media-contained {
  max-width: var(--detail-copy);
  margin-top: 24px;
}

#audience > .game-media-contained + .game-copy { margin-top: 44px; }

.game-benchmark-media { max-width: 680px; }

.game-segments-media { max-width: 1040px; }

.game-metrics-media {
  max-width: calc(var(--detail-copy) + 120px);
  overflow: visible;
  border-radius: 0;
  background: transparent;
}

.game-metrics > .game-metrics-media { margin-top: clamp(20px, 2.5vw, 32px); }

.game-credit-quest-media {
  max-width: 1080px;
}

.game-credit-quest-media + .game-copy {
  margin-top: clamp(36px, 4vw, 52px);
}

.game-context { padding-top: clamp(48px, 6vw, 76px); }

.game-context .detail-context-grid { gap: clamp(36px, 4vw, 48px); }

.game-context .detail-note { min-height: 0; }

.game-context .detail-note p {
  font-size: var(--game-body-size);
  line-height: var(--game-body-line-height);
}

.game-solution {
  background: linear-gradient(145deg, #e9efff, #f5f6fa);
  box-shadow: inset 0 0 0 1px rgba(49, 90, 181, .08);
}

.game-research,
.game-metrics,
.game-mockups { padding-block: clamp(68px, 8vw, 112px); }

.game-research {
  padding-top: clamp(92px, 10vw, 140px);
  padding-bottom: clamp(44px, 5vw, 72px);
}

.game-metrics { padding-top: clamp(44px, 5vw, 72px); }

.game-case .detail-section-heading { margin-bottom: clamp(54px, 7vw, 86px); }

.game-research > .detail-section-heading { margin-bottom: clamp(32px, 4vw, 48px); }

.game-metrics > .detail-section-heading { margin-bottom: 22px; }

.game-story + .game-story,
.game-mechanic + .game-mechanic { margin-top: clamp(100px, 12vw, 168px); }

.game-subheading,
.game-copy { max-width: var(--detail-copy); margin-right: auto; margin-left: auto; }

.game-subheading h3,
.game-copy h3 {
  margin-bottom: 22px;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.12;
  letter-spacing: -.04em;
}

#audience-title,
#competitors-title,
#metrics-title {
  font-size: clamp(24px, 2.2vw, 28px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.025em;
}

#audience-title,
#competitors-title { text-align: center; }

.game-copy {
  color: #5f636b;
  font-size: var(--game-body-size);
  line-height: var(--game-body-line-height);
}

.game-result .detail-result-title > p {
  font-size: var(--game-body-size);
  line-height: var(--game-body-line-height);
}

#result-title,
.game-result-copy .game-copy h3 {
  font-size: clamp(30px, 3vw, 42px);
}

.game-result-copy .game-copy h3 { text-align: center; }

.game-copy + .game-copy { margin-top: 28px; }

.game-copy p:last-child { margin-bottom: 0; }

.game-copy a { color: var(--game-blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

.game-copy a { font-weight: 700; }

.game-copy h4 {
  margin: 36px 0 14px;
  color: var(--detail-heading);
  font-size: 19px;
  line-height: 1.35;
}

.game-copy ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }

.game-copy li { color: #5f636b; }

.game-hypotheses article {
  border-radius: 22px;
  background: linear-gradient(145deg, #ececf4, #f5f4f8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78);
}

.game-segment-copy { margin-top: 48px; }

.game-hypotheses {
  display: grid;
  max-width: var(--detail-copy);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 26px auto 34px;
}

.game-hypotheses article { display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: center; padding: 22px; }

.game-hypotheses span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  background: var(--game-blue);
  color: white;
  font-size: 15px;
  font-weight: 800;
}

.game-hypotheses p { margin: 0; color: #4f535b; font-size: 15px; font-weight: 700; line-height: 1.45; }

.game-mechanic-heading { text-align: center; }

.game-mechanic-heading h3 { font-size: clamp(30px, 3vw, 42px); }

.game-characters .game-mechanic-heading h3 { margin-bottom: 30px; }

.game-characters > .game-image-pair { margin-top: clamp(28px, 4vw, 48px); }

.game-characters > .game-image-pair + .game-copy {
  margin-top: clamp(36px, 4vw, 52px);
}

.game-characters-final-media { max-width: var(--detail-copy); }

.game-image-pair {
  display: grid;
  max-width: var(--detail-media);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: clamp(36px, 5vw, 64px) auto 0;
}

.game-image-pair .game-media { height: 100%; margin: 0; }

.game-credit-image-stack {
  max-width: 1080px;
  grid-template-columns: 1fr;
  gap: clamp(18px, 2vw, 28px);
}

.game-result {
  padding-top: clamp(12px, 2vw, 24px);
  padding-bottom: clamp(96px, 10vw, 144px);
}

.game-result-copy { max-width: var(--detail-copy); margin: clamp(42px, 6vw, 72px) auto 0; }

@media (max-width: 820px) {
  .game-case { --game-body-size: 16px; }
  .game-context .detail-note { min-height: 0; }
  .game-image-pair { grid-template-columns: 1fr; }
  .game-media-contained { max-width: 100%; }
}

@media (max-width: 560px) {
  .game-case { --detail-gutter: 18px; }
  .game-hypotheses { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .game-case * { scroll-behavior: auto !important; }
}