/* Embedded ONL games — shell matches trivia hub (core.css + trivia.css) */

.page-embedded-game {
  --egame-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --egame-ink: #192333;
  --egame-ink-soft: #303b4a;
  --egame-muted: #657082;
  --egame-indigo: #4338e0;
  padding-bottom: 40px;
  font-family: var(--egame-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.page-embedded-game .egame-body {
  font-family: var(--egame-sans);
}

.page-embedded-game .egame-body input,
.page-embedded-game .egame-body button,
.page-embedded-game .egame-body select,
.page-embedded-game .egame-body textarea {
  font-family: inherit;
}

/* Card titles — match Fact Finder .fc-subj */
.page-embedded-game .satd-card__name,
.page-embedded-game .woy-card h3,
.page-embedded-game .sos-caption__name,
.page-embedded-game .pf-compare__label {
  font-family: var(--egame-sans) !important;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--egame-ink);
}

/* Card body — match Fact Finder .fact-card p */
.page-embedded-game .satd-card__desc,
.page-embedded-game .woy-card__desc,
.page-embedded-game .sos-caption__desc,
.page-embedded-game .sos-caption__compare,
.page-embedded-game .pf-thickness,
.page-embedded-game .pf-hint {
  font-family: var(--egame-sans) !important;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--egame-ink-soft);
}

.page-embedded-game .pf-milestone {
  font-family: var(--egame-sans) !important;
  font-size: 13.5px;
}

.page-embedded-game .satd-card__cat,
.page-embedded-game .satd-card__owned,
.page-embedded-game .woy-card__region,
.page-embedded-game .woy-card__time,
.page-embedded-game .woy-card__keys,
.page-embedded-game .sos-caption__scale,
.page-embedded-game .sos-hint,
.page-embedded-game .pf-fold-count {
  font-family: var(--egame-sans) !important;
}

.page-embedded-game .satd-card__price {
  font-family: var(--egame-sans) !important;
  font-weight: 700;
}

/* Fact Finder–style card chrome */
.page-embedded-game .satd-card,
.page-embedded-game .woy-card {
  border-radius: 15px;
  box-shadow: 0 3px 9px rgba(22, 31, 43, 0.06), 0 1px 2px rgba(22, 31, 43, 0.04);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}

.page-embedded-game .satd-card:hover,
.page-embedded-game .woy-card:hover {
  border-color: #c9cdfa;
  box-shadow: 0 10px 26px rgba(22, 31, 43, 0.09), 0 2px 6px rgba(22, 31, 43, 0.05);
  transform: translateY(-3px);
}

.page-embedded-game .woy-card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.page-embedded-game .satd-card__actions .satd-btn,
.page-embedded-game .woy-card {
  font-family: var(--egame-sans);
}

.page-embedded-game .satd-panel h2,
.page-embedded-game .woy-results-head,
.page-embedded-game .woy-summary {
  font-family: var(--egame-sans) !important;
  font-weight: 800;
  color: var(--egame-ink);
}

.page-embedded-game .egame-body {
  margin-top: 22px;
  min-width: 0;
}

/* Size of Space Explorer — use more of the viewport under the site hero card */
.page-embedded-game .sos-stage {
  min-height: clamp(520px, calc(100dvh - 17rem), 1240px);
  min-height: clamp(520px, calc(100svh - 17rem), 1240px);
}

.page-embedded-game .sos-viewport {
  min-height: clamp(400px, calc(100dvh - 26rem), 960px);
  min-height: clamp(400px, calc(100svh - 26rem), 960px);
}

@media (min-width: 900px) {
  .page-embedded-game .sos-stage {
    min-height: clamp(600px, calc(100dvh - 14rem), 1320px);
    min-height: clamp(600px, calc(100svh - 14rem), 1320px);
  }

  .page-embedded-game .sos-viewport {
    min-height: clamp(480px, calc(100dvh - 24rem), 1040px);
    min-height: clamp(480px, calc(100svh - 24rem), 1040px);
  }
}

.page-embedded-game .tri-hicon--emoji {
  font-size: 28px;
  line-height: 1;
  background: linear-gradient(150deg, #7b35f0, #5a1fd0);
  box-shadow: 0 10px 22px rgba(123, 53, 240, 0.28);
}

.page-embedded-game .egame-herocard {
  margin-top: 4px;
}

/* Let game modules inherit the trivia page canvas */
.page-embedded-game.satd-page,
.page-embedded-game.sos-page,
.page-embedded-game.paper-fold-page,
.page-embedded-game.woy-page {
  background: transparent;
  color: var(--ink, #161f2b);
}

.page-embedded-game .satd-shell,
.page-embedded-game .sos-shell,
.page-embedded-game .paper-fold-shell,
.page-embedded-game .woy-shell {
  max-width: none;
  margin: 0;
  padding: 0;
}

.page-embedded-game .satd-breadcrumb,
.page-embedded-game .sos-breadcrumb,
.page-embedded-game .paper-fold-breadcrumb,
.page-embedded-game .woy-breadcrumb,
.page-embedded-game .paper-fold-hero,
.page-embedded-game .sos-hero,
.page-embedded-game .woy-hero {
  display: none !important;
}

.page-embedded-game .satd-header h1,
.page-embedded-game .satd-header__subtitle,
.page-embedded-game .pf-header .pf-title,
.page-embedded-game .paper-fold-hero {
  display: none !important;
}

.page-embedded-game .satd-balance-bar {
  top: 84px;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  background: rgba(244, 245, 248, 0.96);
  border-bottom: 1px solid var(--border, #e8eaef);
}

.page-embedded-game .satd-header {
  justify-content: flex-end;
  margin-bottom: 0.5rem;
}

.page-embedded-game .satd-breadcrumb a,
.page-embedded-game .sos-breadcrumb a,
.page-embedded-game .paper-fold-breadcrumb a,
.page-embedded-game .woy-breadcrumb a,
.page-embedded-game .related-link {
  color: var(--lg-indigo, #4338e0);
}

.page-embedded-game .satd-info-btn,
.page-embedded-game .sos-info-btn,
.page-embedded-game .woy-info-btn,
.page-embedded-game .info-btn {
  border-color: var(--border, #e8eaef);
  background: #fff;
  color: var(--lg-indigo, #4338e0);
}

.page-embedded-game .satd-btn--primary,
.page-embedded-game .sos-btn--primary,
.page-embedded-game .woy-btn--primary,
.page-embedded-game .btn--primary {
  background: var(--lg-indigo, #4338e0);
  border-color: var(--lg-indigo, #4338e0);
}

.page-embedded-game .satd-btn--primary:hover,
.page-embedded-game .sos-btn--primary:hover,
.page-embedded-game .woy-btn--primary:hover,
.page-embedded-game .btn--primary:hover {
  background: #372cc9;
  border-color: #372cc9;
}

.page-embedded-game .satd-cat-filters .satd-cat-btn.is-active,
.page-embedded-game .woy-chip.is-active {
  background: var(--lg-indigo, #4338e0);
  border-color: var(--lg-indigo, #4338e0);
}

.page-embedded-game .related-links-section {
  margin-top: 28px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--border, #e8eaef);
  border-radius: 16px;
  box-shadow: 0 3px 9px rgba(22, 31, 43, 0.06);
}

.page-embedded-game .related-links-title {
  font-family: var(--serif, Georgia, serif);
  font-size: 16px;
  font-weight: 800;
  color: var(--ink, #161f2b);
  margin: 0 0 10px;
}

.page-embedded-game .related-links-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-embedded-game .related-links-list li + li {
  margin-top: 6px;
}

.page-embedded-game .related-link {
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.page-embedded-game .related-link:hover {
  text-decoration: underline;
}

.page-embedded-game .woy-info-btn {
  position: absolute;
  top: 0;
  right: 0;
}

.page-embedded-game .egame-body--woy {
  position: relative;
}

.page-embedded-game .sos-nav__icon {
  display: inline-block;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  font-style: normal;
}

.page-embedded-game .app {
  margin-top: 0;
}

@media (max-width: 720px) {
  .page-embedded-game .satd-balance-bar {
    top: 84px;
  }

  .page-embedded-game .tri-herocard h1 {
    font-size: 30px;
  }
}

/* The World in One Year — detail page (Fact Finder layout tweaks) */
.page-woy-detail .fd-lay {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 312px);
  gap: 24px;
  align-items: start;
}

.page-woy-detail .fd-lay > .fd-article {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.page-woy-detail .fd-lay > .ad-wrapper {
  display: none !important;
}

.page-woy-detail .woy-detail-side {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: start;
  min-width: 0;
}

.page-woy-detail .woy-qf-card,
.page-woy-detail .woy-qf-card.qf-card {
  position: static !important;
  top: auto !important;
  overflow: hidden;
}

.page-woy-detail .woy-detail-img-panel {
  margin: -20px -22px 18px;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
  background: #f8fafc;
  line-height: 0;
}

.page-woy-detail .woy-detail-img-panel__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}

.page-woy-detail .woy-detail-img-panel + h3 {
  margin-top: 0;
}

.page-woy-detail .fd-article .fd-body > :first-child {
  margin-top: 0;
}

.page-woy-detail .fd-article .fd-body h2:first-child {
  margin-top: 0;
}

.page-woy-detail .share-card {
  margin-top: 0;
}

@media (max-width: 860px) {
  .page-woy-detail .fd-lay {
    display: block !important;
  }

  .page-woy-detail .woy-detail-side {
    grid-column: auto;
    grid-row: auto;
    margin-top: 20px;
  }

  .page-woy-detail .woy-detail-img-panel {
    margin: -20px -22px 16px;
  }
}