/* Reading aids shared by reviewed articles; game tutorials use their own CSS. */
.seo-editorial-meta { color: #8d99b7; font-size: .875rem; margin-block: 18px; line-height: 1.6; }
.seo-contents { display: block; margin-block: 28px; padding: 20px 24px; border: 1px solid #23403f; border-radius: 12px; background: #0b1b29; }
.seo-contents strong { display: block; color: #e8f0ff; margin-bottom: 10px; }
.seo-contents ol { margin: 0; padding-inline-start: 22px; columns: 2; column-gap: 24px; }
.seo-contents li { break-inside: avoid; margin-block: 6px; font-size: .9rem; }
.seo-contents a, .seo-access-note a { color: #53e0ff; text-underline-offset: 3px; }
.seo-article-figure { margin: 32px 0; }
.seo-article-figure img { display: block; width: 100%; height: auto; border: 1px solid #25434d; border-radius: 12px; background: #0a1628; }
.seo-article-figure figcaption { color: #a9b7d0; font-size: .88rem; line-height: 1.7; margin-top: 12px; }
.seo-play-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin-block: 24px; }
.seo-play-card { overflow: hidden; border: 1px solid #294051; border-radius: 12px; background: #0a1628; }
.seo-play-card img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
.seo-play-card > div { padding: 18px; }
.seo-play-card h3 { margin: 0 0 12px !important; color: #e8f0ff !important; font-size: 1.12rem !important; }
.seo-play-card p { font-size: .92rem !important; line-height: 1.65 !important; }
.seo-play-card a { display: inline-block; padding-block: 8px; color: #53e0ff; font-weight: 700; }
.seo-access { color: #d7c5ff !important; font-size: .82rem !important; }
.seo-access-note { font-size: .88rem; line-height: 1.7; }
.seo-reference-list { font-size: .9rem; }
.seo-article-body h2[id], .v3-article-body h2[id] { scroll-margin-top: 110px; }
.seo-article-body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.seo-article-body th, .seo-article-body td, .v3-article-body th, .v3-article-body td { padding: 12px 14px; border: 1px solid #294051; text-align: start; vertical-align: top; min-width: 130px; line-height: 1.7; }
.seo-article-body th, .v3-article-body th { color: #e8f0ff; background: #102539; }
@media(max-width:620px) { .seo-play-grid { grid-template-columns: 1fr; } .seo-contents ol { columns: 1; } }

.seo-reader-aids { max-width: 850px; margin: 36px auto; padding-inline: 16px; }
.v3-article .seo-reader-aids { padding-inline: 0; }
.seo-reader-aids > h2 { margin-bottom: 20px; color: #e8f0ff; }
.seo-reader-aids p { color: #a9b7d0; }
.seo-reader-aids .seo-article-figure { margin-inline: 0; }
.seo-card-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.seo-game-controls, .seo-game-challenge { color: #c7d1e5 !important; }
.seo-game-next { padding-top: 12px; border-top: 1px solid #294051; }
.seo-play-card[id], .seo-discovery-group[id] { scroll-margin-top: 110px; }
.seo-discovery-links { display: flex; flex-wrap: wrap; gap: 10px; margin-block: 24px; }
.seo-discovery-links a { display: block; border: 1px solid #294051; border-radius: 8px; padding: 10px 14px; color: #53e0ff; text-decoration: none; }
.seo-discovery-links a:focus-visible, .seo-card-actions a:focus-visible { outline: 2px solid #53e0ff; outline-offset: 4px; }
.seo-discovery-group { margin-block: 48px; }
.seo-discovery-start { padding: 20px; border: 1px solid #23403f; border-radius: 12px; background: #0b1b29; }
.seo-discovery-start .seo-play-grid { grid-template-columns: 1fr; }
.seo-discovery-start .seo-play-card { display: grid; grid-template-columns: 220px minmax(0,1fr); }
.seo-discovery-start .seo-play-card img { align-self: start; }
.seo-game-spotlight { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 18px; padding: 20px; margin-block: 28px; border: 1px solid #294051; border-radius: 12px; background: #0a1628; }
.seo-game-spotlight img { display: block; width: 100%; height: auto; border-radius: 8px; }
.seo-game-spotlight h3 { margin-top: 0; }
.seo-game-spotlight p { font-size: .92rem; }
@media(max-width:620px) { .seo-game-spotlight, .seo-discovery-start .seo-play-card { grid-template-columns: 1fr; } }
.seo-contents { color: #c7d1e5; }
.v3-article-body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }

@media print {
  .v3-content-page .mp-site-header, .v3-content-page .mp-site-footer, .v3-content-page .seo-contents { display: none; }
  .v3-content-page .v3-article-main, .v3-content-page .v3-article { width: auto; max-width: none; margin: 0; padding: 0; }
  .v3-content-page, .v3-content-page .v3-article, .v3-content-page .v3-article :is(p,li,h1,h2,h3,th,td,a) { color: #111; background: #fff; }
  .v3-content-page table { overflow: visible; width: 100%; font-size: 10pt; }
  .v3-content-page :is(th,td) { min-width: 0; }
  .v3-content-page .seo-play-grid, .v3-content-page .seo-game-spotlight { display: none; }
}

/* Keep the research planning diagrams readable on phones without dominating desktop prose. */
.seo-article-figure.seo-evidence-figure { max-width: 520px; margin-inline: auto; }

/* Keep component order stable; only the Arabic text runs right to left. */
.v3-content-page [dir="rtl"] .seo-play-grid,
.v3-content-page [dir="rtl"] .seo-card-actions,
.v3-content-page [dir="rtl"] .seo-discovery-links,
.v3-content-page [dir="rtl"] .seo-contents ol { direction: ltr; }
.v3-content-page [dir="rtl"] .seo-play-card > div,
.v3-content-page [dir="rtl"] .seo-card-actions a,
.v3-content-page [dir="rtl"] .seo-discovery-links a,
.v3-content-page [dir="rtl"] .seo-contents li { direction: rtl; text-align: start; }
.v3-content-page [dir="rtl"] .seo-contents ol { padding-inline: 0 22px; }
.seo-reference-list a[lang="en"] { unicode-bidi: isolate; direction: ltr; }
.seo-legacy-directory { margin-block: 20px; padding: 18px; border: 1px solid #294051; border-radius: 12px; }
.seo-legacy-directory summary { color: #53e0ff; font-weight: 700; cursor: pointer; }
.seo-legacy-directory ul { columns: 2; column-gap: 28px; padding-inline-start: 22px; }
.seo-legacy-directory li { break-inside: avoid; margin-block: 10px; }
@media(max-width:620px) { .seo-legacy-directory ul { columns: 1; } }
.v3-content-page [dir="rtl"] .seo-legacy-directory ul { direction: ltr; padding-inline: 0 22px; }
.v3-content-page [dir="rtl"] .seo-legacy-directory li { direction: rtl; text-align: start; }