/* Phase 6 uses the existing shell palette; native links work without JS. */
.phase6-family {
  display: block;
  height: auto;
  min-height: 0;
  color: var(--chrome-surface);
  background: var(--chrome-ink);
  padding: clamp(1rem, 3vw, 1.75rem);
  border: 1px solid currentColor;
  border-radius: 12px;
  margin-block: 1rem;
  text-align: start;
  line-height: 1.6;
}
.phase6-family > * { max-width: none; margin-inline: 0; }
.phase6-family h1 { font-size: clamp(1.5rem, 4vw, 2.2rem); line-height: 1.25; margin: 0 0 .75rem; color: inherit; }
.phase6-family h2 { font-size: 1.2rem; margin-block: 1rem .75rem; color: inherit; }
.phase6-family h3 { font-size: 1rem; margin: .75rem 0 .4rem; color: inherit; }
.phase6-family p { color: inherit; margin: .5rem 0; }
.phase6-family ul { list-style: none; margin: 0; padding: 0; }
.phase6-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 1rem; }
.phase6-cards li { display: flex; flex-direction: column; min-width: 0; }
.phase6-cards img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 8px; background: var(--chrome-surface); }
.phase6-cards p { font-size: .9rem; flex: 1; }
.phase6-family a { color: var(--chrome-bar); text-decoration: underline; text-underline-offset: .2em; }
.phase6-cards a, .phase6-links a, .phase6-links [aria-current] {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: .5rem .75rem; border: 1px solid currentColor; border-radius: 8px; box-sizing: border-box;
}
.phase6-cards a { background: var(--chrome-surface); color: var(--chrome-ink); margin-top: .5rem; }
.phase6-family a:focus-visible { outline: 3px solid var(--chrome-bar); outline-offset: 3px; }
.phase6-family a:hover { text-decoration-thickness: 2px; }
.phase6-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.phase6-links li { min-width: 0; max-width: 100%; }
.phase6-links [aria-current] { background: var(--chrome-accent); color: var(--chrome-bar); font-weight: 700; flex-wrap: wrap; gap: .25rem; }
.phase6-all { display: inline-flex; align-items: center; min-height: 44px; margin-top: .5rem; }
.phase6-player-label { font-weight: 700; }
.phase6-notice { border-inline-start: 3px solid currentColor; padding-inline-start: .75rem; }
.phase6-player-title { font-weight: 700; }
.phase6-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.phase6-page .main-content { max-width: 1100px; margin-inline: auto; min-width: 0; }
.phase6-page .custom-game-container { width: 100%; aspect-ratio: 4 / 3; position: relative; background: var(--chrome-surface); }
.phase6-page .custom-iframe-container { position: absolute; inset: 0; }
.phase6-page .custom-iframe-container iframe { width: 100%; height: 100%; border: 0; }
.phase6-page .about-left { width: 100%; box-sizing: border-box; }
@media (max-width: 480px) { .phase6-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } .phase6-cards h3 { overflow-wrap: anywhere; } }
@media (forced-colors: active) { .phase6-links [aria-current] { border-width: 3px; } }