/* Content-page layouts use the landing page's typography, panels and CTA classes. */
.game-story { display: block; padding-top: 110px; color: #fff; font-family: Jura, sans-serif; }
.story-wrap, .story-header, .story-related, .story-sources { width: calc(100% - 80px); margin-inline: auto; }
.story-header { text-align: center; margin-bottom: 32px; }
.story-header .title { margin-block: 12px 20px; }
.story-header .game-intro-text { margin-inline: auto; }
.story-hero { margin-bottom: 40px; }
.game-story .cta-buttons-row { flex-wrap: wrap; gap: 12px; }
.game-story .btn-corner { margin: 0; }
.game-story .section-subhead { text-align: left; margin: 0 0 12px; }
.story-header .section-subhead, .game-story .sectionback-gradient > .section-subhead { text-align: center; }
.game-story .h3-3 { margin-bottom: 16px; }
.game-story a:not(.btn-corner) { color: #3ec7f4; text-underline-offset: 4px; }
.game-story a:not(.btn-corner):hover { color: #fff; }
.game-story :is(a, summary):focus-visible { outline: 2px solid #57d5ff; outline-offset: 4px; }
.story-text-link { font-size: 14px; }
.gameplay-image { min-width: 0; margin: 0; }
.gameplay-image a { display: block; }
.gameplay-image img { display: block; width: 100%; height: auto; border: 1px solid #1c5063; }
.gameplay-image figcaption { font-family: Jura, sans-serif; font-size: 12px; color: #fff; margin-top: 10px; text-align: center; }
.story-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; border-block: 1px solid #1c5063; padding-block: 20px; font-size: 14px; }
.story-facts p { margin: 0; }
.story-facts strong, .story-facts span { display: block; }
.story-facts strong { font-family: Rajdhani, sans-serif; text-transform: uppercase; color: #3ec7f4; font-size: 18px; font-weight: 500; }
.story-intro { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; padding-block: 48px; }
.story-chapter { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 32px; padding-bottom: 48px; }
.story-chapter-reverse .gameplay-image { order: 2; }
.story-economy { padding: 28px; margin-bottom: 48px; }
.story-columns, .story-fit, .story-start { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.story-fit, .story-start { margin-bottom: 48px; }
.story-note { padding-top: 16px; border-top: 1px solid #1c5063; }
.story-start { border-top: 1px solid #1c5063; padding-top: 40px; scroll-margin-top: 80px; }
.story-cost { align-self: start; border: 1px solid #1c5063; }
.story-faq { padding-bottom: 40px; }
.story-faq details { border-bottom: 1px solid #1c5063; }
.story-faq summary { display: list-item; list-style: disclosure-closed inside; padding: 18px 0; color: #3ec7f4; cursor: pointer; font: 500 20px/1.4 Rajdhani, sans-serif; }
.story-faq details[open] > summary { list-style-type: disclosure-open; }
.story-faq details p { padding-bottom: 10px; }
.story-related, .story-sources { border-top: 1px solid #1c5063; padding-block: 28px; font-size: 14px; line-height: 1.7; }
.story-related ul { display: flex; flex-wrap: wrap; gap: 16px 32px; list-style: none; padding: 0; margin: 0; }
.story-sources ul { padding-left: 20px; }
.comparison-section { margin-bottom: 40px; }
.comparison-table-wrap { overflow-x: auto; margin-block: 24px 40px; }
.comparison-table { width: 100%; border-collapse: collapse; font: 14px/1.6 Jura, sans-serif; }
.comparison-table caption { text-align: left; margin-bottom: 16px; }
.comparison-table :is(th, td) { padding: 16px; border: 1px solid #1c5063; text-align: left; vertical-align: top; }
.comparison-table thead th { background: #0e2730; color: #3ec7f4; font: 500 20px/1.3 Rajdhani, sans-serif; }
.comparison-table tbody th { width: 20%; font-weight: 600; }
.comparison-table td { width: 40%; }
.game-story > .section_last { padding-bottom: 20px; }
@media (max-width: 767px) {
  .game-story { padding-top: 90px; }
  .story-wrap, .story-header, .story-related, .story-sources { width: calc(100% - 40px); }
  .story-header .title { font-size: 32px; line-height: 1.2; }
  .story-intro, .story-chapter, .story-columns, .story-fit, .story-start { grid-template-columns: 1fr; gap: 20px; }
  .story-facts { grid-template-columns: 1fr; gap: 16px; }
  .story-intro { padding-block: 32px; gap: 4px; }
  .story-chapter { padding-bottom: 32px; }
  .story-chapter .gameplay-image { order: 2; }
  .story-economy { padding: 20px; }
  .story-economy, .story-fit, .story-start { margin-bottom: 32px; }
  .comparison-table { min-width: 620px; }
}