@import url("games-v108-r2.css");

/* Franchise content extends the existing Games styling. */
.franchise-page .hero-panel h1,
.franchise-page .game-title,
.franchise-page .section-heading h2 { overflow-wrap: anywhere; }
.franchise-page .hero-panel h1 { line-height: 1.04; }
.franchise-page .eyebrow { margin-right: 9rem; letter-spacing: 0.2em; }
.franchise-page .game-top { flex-wrap: wrap; justify-content: flex-start; }
.franchise-page .game-title { flex: 1 1 14rem; min-width: 0; }
.franchise-page .game-note { max-width: 62rem; }
.franchise-page .chip { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.franchise-page .archive-intro {
  max-width: 52rem;
  margin: 0.9rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
}
.franchise-page .archive-notes { margin: 0; padding-left: 1.2rem; }
.franchise-page .archive-notes li { color: var(--muted); line-height: 1.6; }
.franchise-page .archive-notes li + li { margin-top: 0.4rem; }
.franchise-page .source-details { color: var(--muted); font-size: 0.84rem; }
.franchise-page .source-details summary {
  width: fit-content;
  min-height: 2.2rem;
  padding: 0.45rem 0;
  cursor: pointer;
  color: #a9c9e0;
  line-height: 1.4;
}
.franchise-page .source-details ul { margin: 0.2rem 0 0; padding-left: 1.2rem; }
.franchise-page .source-details li { padding: 0.2rem 0; line-height: 1.5; }
.franchise-page .source-details a {
  color: #b6eaff;
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
}
.franchise-page .source-details summary:focus-visible,
.franchise-page .source-details a:focus-visible,
.franchise-page .back-link:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 0.2rem;
}
.franchise-page .chip.is-announced {
  border-color: rgba(255, 202, 115, 0.36);
  color: #ffe0aa;
  background: rgba(255, 202, 115, 0.055);
}
@media (max-width: 420px) {
  .franchise-page .eyebrow { font-size: 0.66rem; letter-spacing: 0.13em; }
  .franchise-page .back-link { font-size: 0.65rem; letter-spacing: 0.1em; }
  .franchise-page .game-top { gap: 0.45rem; }
  .franchise-page .year { min-width: 0; }
}