/* Diálogo Home, tarjetas de actividades, navegación interna y transiciones. */
#activity-hub {
  width: min(940px, calc(100% - 28px));
  max-height: calc(100svh - 28px);
  padding: 24px;
  border: 1px solid #c6dced;
  border-radius: 25px;
  color: var(--color-ink-control);
  background: var(--ad-surface);
  box-shadow: 0 18px 70px #24415b35;
  font-size: calc(15px * var(--text-scale, 1));
}
#activity-hub::backdrop {
  background: #254a6b55;
  backdrop-filter: blur(3px);
}
#activity-hub[open] {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: calc(
    100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)
  );
}
#activity-hub .hub-heading {
  flex: none;
}
#activity-hub-content {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  /* Room for the focus ring (3 px, 4 px out): the scroll box clips anything beyond its padding. */
  padding: 8px 8px 10px;
  scroll-padding-block: 6px;
}
.hub-scroll-hint {
  flex: none;
  margin: 6px 0 0;
  padding-top: 6px;
  border-top: 1px solid #c6dced;
  text-align: center;
  font-size: calc(12px * var(--text-scale, 1));
  color: var(--ad-ink-soft);
}
.hub-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.hub-heading h1 {
  margin: 0;
  font-size: calc(27px * var(--text-scale, 1));
  line-height: 1.15;
}
.hub-heading p {
  margin: 5px 0 0;
  color: var(--ad-ink-muted);
  font-size: calc(14px * var(--text-scale, 1));
}
#activity-hub button {
  color: inherit;
}
.hub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
#activity-hub .hub-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  align-content: start;
  text-align: left;
  min-height: 152px;
  padding: 17px;
  border: 1px solid var(--color-line-practice);
  border-radius: 18px;
}
#activity-hub .hub-card:hover {
  border-color: #78a8d1;
  background: var(--ad-soft-keep);
}
.hub-card-icon {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background-color: var(--ad-soft);
  font-size: 30px;
}
.hub-card-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: anywhere;
}
.hub-card-copy strong {
  font-size: calc(18px * var(--text-scale, 1));
  line-height: 1.15;
}
.hub-card-copy small {
  font-size: calc(12px * var(--text-scale, 1));
  color: var(--ad-ink-muted);
  margin-top: 3px;
}
.hub-card-description {
  font-size: calc(13px * var(--text-scale, 1));
  line-height: 1.3;
  margin-top: 9px;
}
.hub-card-copy .hub-card-hint {
  font-size: calc(12px * var(--text-scale, 1));
  line-height: 1.3;
}
.hub-practice-progress {
  justify-self: start;
  color: #687d91;
  font-weight: 700;
}
.hub-practice-progress[data-done="true"] {
  color: #247451;
}
.hub-card-example {
  grid-column: 2;
  font-size: calc(15px * var(--text-scale, 1));
  color: #547b85;
  margin-top: 3px;
}
#activity-hub .hub-review {
  min-height: 0;
  margin-bottom: 14px;
  background: #fff9e8;
  grid-template-columns: 40px 1fr;
  padding: 12px;
}
#activity-hub .hub-review .hub-card-description {
  margin-top: 4px;
}
html[data-appearance="dark"] #activity-hub {
  background: var(--ad-surface);
  color: var(--ad-ink-deep);
  border-color: #526e88;
}
html[data-appearance="dark"] #activity-hub .hub-card {
  background: var(--ad-soft);
  color: var(--ad-ink-deep);
  border-color: #526e88;
}
html[data-appearance="dark"] .hub-card-icon {
  background-color: var(--ad-soft);
}
@media (max-width: 850px), (pointer: coarse) and (max-width: 1100px) {
  #activity-hub {
    width: calc(100% - 16px);
    max-height: calc(100svh - 16px);
    padding: 16px;
    border-radius: 21px;
  }

  .hub-heading h1 {
    font-size: calc(23px * var(--text-scale, 1));
  }

  .hub-heading p {
    font-size: calc(12px * var(--text-scale, 1));
  }

  .hub-grid {
    gap: 10px;
  }

  #activity-hub .hub-card {
    grid-template-columns: 1fr;
    gap: 6px;
    min-height: 0;
    padding: 12px;
  }

  .hub-card-icon {
    width: 40px;
    height: 40px;
    font-size: 27px;
  }

  .hub-card-copy strong {
    font-size: calc(15px * var(--text-scale, 1));
  }

  .hub-card-description {
    font-size: calc(12px * var(--text-scale, 1));
    margin-top: 6px;
  }

  .hub-card-copy small,
  .hub-card-copy .hub-card-hint {
    font-size: calc(11px * var(--text-scale, 1));
  }

  .hub-card-example {
    grid-column: 1;
    font-size: calc(13px * var(--text-scale, 1));
  }

  #activity-hub .hub-review {
    grid-template-columns: 40px 1fr;
  }

  #activity-hub[data-section="play"] .hub-grid {
    grid-template-columns: 1fr;
  }

  #activity-hub[data-section="play"] .hub-card {
    grid-template-columns: 40px 1fr;
  }

  #activity-hub[data-section="play"] .hub-card-example {
    display: none;
  }
}
@media (max-height: 600px) {
  #activity-hub {
    padding: 12px;
  }

  .hub-heading {
    margin-bottom: 10px;
  }

  #activity-hub .hub-card {
    padding: 10px;
    gap: 6px;
  }

  .hub-card-description {
    margin-top: 4px;
  }

  .hub-card-copy .hub-card-hint {
    display: none;
  }

  .hub-card-example {
    margin-top: 0;
  }
}
@media (orientation: landscape) and (max-height: 500px) {
  #activity-hub .hub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #activity-hub[data-section="play"] .hub-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #activity-hub .hub-card {
    grid-template-columns: 32px 1fr;
  }

  .hub-card-icon {
    width: 30px;
    height: 30px;
    font-size: 24px;
  }

  .hub-card-example {
    display: none;
  }
}
@media (max-width: 850px), (pointer: coarse) and (max-width: 1100px) {
  #activity-hub[data-section="challenges"] .hub-card {
    grid-template-columns: 30px minmax(0, 1fr);
    padding: 10px;
    gap: 6px;
  }

  #activity-hub[data-section="challenges"] .hub-card-icon {
    width: 30px;
    height: 30px;
    font-size: 23px;
    border-radius: 10px;
  }

  #activity-hub[data-section="challenges"] .hub-card-copy strong {
    font-size: calc(14px * var(--text-scale, 1));
  }

  #activity-hub[data-section="challenges"] .hub-card-description {
    display: none;
  }


  #activity-hub[data-section="challenges"] .hub-card-example {
    grid-column: 1/3;
  }

  #activity-hub[data-section="challenges"] .hub-review .hub-card-hint {
    display: none;
  }

  #activity-hub[data-section="challenges"] .hub-review {
    padding: 9px;
  }

  #activity-hub[data-section="challenges"] .hub-card-hint {
    display: none;
  }
}
#activity-hub .hub-review {
  width: 100%;
}
html[data-appearance="dark"] #activity-hub .hub-card {
  box-shadow: 0 3px 0 var(--ad-edge);
}
html[data-appearance="dark"] .hub-card-example {
  color: #bbd9cf;
}
.hub-topic-group {
  margin-top: 14px;
}
.hub-topic-group h2 {
  margin: 0 0 9px;
  font-size: calc(17px * var(--text-scale, 1));
  color: var(--ad-ink-soft);
}
#activity-hub .hub-topic-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}
#activity-hub .hub-topic-card {
  position: relative;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  gap: 4px;
  min-height: 100px;
  padding: 10px 6px;
  text-align: center;
  box-shadow: none;
}
.hub-topic-card .hub-card-icon {
  width: 34px;
  height: 34px;
  font-size: 24px;
  border-radius: 11px;
}
.hub-topic-card .hub-card-copy strong {
  font-size: calc(14px * var(--text-scale, 1));
}
.hub-topic-card .hub-card-copy small {
  font-size: calc(11px * var(--text-scale, 1));
}
#activity-hub .hub-topic-card :is(.hub-card-description, .hub-card-hint) {
  display: none;
}
#activity-hub .hub-topic-card[aria-current="page"] {
  background: var(--ad-tint-mint);
  border-color: #8ebfa7;
}
.hub-topic-card[aria-current="page"]::after {
  content: "✓";
  position: absolute;
  right: 7px;
  top: 5px;
  color: #43846a;
  font-size: 13px;
}
html[data-appearance="dark"] #activity-hub .hub-topic-card[aria-current="page"] {
  background: var(--ad-tint-mint);
  border-color: #76ae92;
}
@media (max-width: 850px), (pointer: coarse) and (max-width: 1100px) {
  #activity-hub .hub-topic-grid {
    gap: 6px;
  }

  #activity-hub .hub-topic-card {
    min-height: 82px;
    padding: 8px 3px;
  }

  .hub-topic-card .hub-card-copy strong {
    font-size: calc(12px * var(--text-scale, 1));
  }

  .hub-topic-card .hub-card-copy small {
    font-size: calc(10px * var(--text-scale, 1));
  }
}
@media (orientation: landscape) and (max-height: 500px) {
  #activity-hub .hub-topic-card {
    min-height: 70px;
  }
}
html[data-appearance="dark"] .hub-topic-group h2 {
  color: var(--ad-ink-soft);
}
@media (max-width: 360px) {
  #activity-hub[data-section="challenges"] .hub-grid {
    grid-template-columns: 1fr;
  }

  #activity-hub[data-section="challenges"] .hub-card-example {
    grid-column: 2;
  }
}
.hub-topic-card .hub-card-copy small {
  color: var(--ad-ink-muted);
}
html[data-appearance="dark"] .hub-scroll-hint {
  color: var(--ad-ink-soft);
  border-color: #526e88;
}
/* Navigation map: Home → area → activity. Each area keeps one color everywhere it appears,
   so children recognise the room they entered from the card they tapped. */
#activity-hub[data-section="explore"] {
  --area-bg: var(--ad-soft-keep);
  --area-border: #9cc3ea;
  --area-ink: #285e8c;
  --area-shadow: #cfe2f5;
  --area-tile: #d4e8fd;
}
#activity-hub[data-section="adventures"] {
  --area-bg: #ffece0;
  --area-border: #eba97c;
  --area-ink: #8a4a1c;
  --area-shadow: #f3d3bb;
  --area-tile: #ffd9bd;
}
#activity-hub[data-section="challenges"] {
  --area-bg: #fff6dc;
  --area-border: #e3c46c;
  --area-ink: #76560f;
  --area-shadow: #f0dfae;
  --area-tile: #ffe9ad;
}
#activity-hub[data-section="play"] {
  --area-bg: #e6f5ea;
  --area-border: #8fc8a0;
  --area-ink: #2b6843;
  --area-shadow: #c6e4cf;
  --area-tile: #cbead4;
}
#activity-hub[data-section="listen"] {
  --area-bg: #f1ecfc;
  --area-border: #b8a9e4;
  --area-ink: #56448f;
  --area-shadow: #ddd4f3;
  --area-tile: #e1d8f8;
}
#activity-hub[data-section="movers"] {
  --area-bg: #e2f6f4;
  --area-border: #8fd0c9;
  --area-ink: #1f6a63;
  --area-shadow: #c3e8e4;
  --area-tile: #cfeeea;
}
/* Header: the one back pill sits top left, where children look first, beside the menu's title.
   There is no close ×: back (and Escape or a tap outside) is the only way out. */
#activity-hub .hub-heading {
  display: grid;
  align-items: center;
  gap: 12px;
}
.hub-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.hub-title h1 {
  overflow-wrap: anywhere;
}
.hub-title-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 2px solid var(--area-border);
  border-radius: 17px;
  background-color: var(--area-tile);
  font-size: 32px;
  box-shadow: 0 3px 0 var(--area-shadow);
}
.hub-title-icon[hidden] {
  display: none;
}
#activity-hub .hub-back {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 46px;
  padding: 6px 14px 6px 10px;
  border: 2px solid var(--area-border);
  border-radius: 15px;
  background: var(--color-surface);
  color: var(--area-ink);
  font-size: calc(15px * var(--text-scale, 1));
  font-weight: 700;
  box-shadow: 0 3px 0 var(--area-shadow);
}
#activity-hub .hub-back[hidden] {
  display: none;
}
.hub-back-arrow {
  font-size: 26px;
  line-height: 0.8;
  margin-top: -2px;
}
#activity-hub .hub-back:hover {
  transform: translateY(-1px);
}
#activity-hub .hub-back:focus-visible {
  outline: 3px solid var(--area-border);
  outline-offset: 2px;
}
html[data-appearance="dark"] #activity-hub .hub-back {
  background: var(--ad-soft);
}
/* Inside an area the whole panel takes its color; the choices stay white so they read as buttons. */
#activity-hub:not([data-section="home"]) {
  background: var(--area-bg);
  border-color: var(--area-border);
}
#activity-hub:not([data-section="home"]) .hub-card {
  border: 2px solid var(--area-border);
  box-shadow: 0 4px 0 var(--area-shadow);
}
#activity-hub:not([data-section="home"]) .hub-card-icon {
  background-color: var(--area-tile);
}
#activity-hub:not([data-section="home"]) .hub-card:hover {
  background: var(--color-surface);
  border-color: var(--area-ink);
}
#activity-hub:not([data-section="home"]) .hub-topic-card[aria-current="page"] {
  background: var(--ad-tint-mint);
  border-color: #8ebfa7;
}
#activity-hub:not([data-section="home"]) .hub-topic-group h2 {
  color: var(--area-ink);
}
#activity-hub:not([data-section="home"]) .hub-scroll-hint {
  border-color: var(--area-border);
  color: var(--area-ink);
}
html[data-appearance="dark"] #activity-hub:not([data-section="home"]) {
  background: var(--area-bg);
  border-color: var(--area-border);
}
html[data-appearance="dark"]
  #activity-hub:not([data-section="home"])
  #activity-hub-content
  .hub-card {
  border-color: var(--area-border);
  box-shadow: 0 4px 0 var(--area-shadow);
}
html[data-appearance="dark"]
  #activity-hub
  #activity-hub-content
  .hub-topic-card[aria-current="page"] {
  background: #305449;
  border-color: #76ae92;
}
html[data-appearance="dark"]
  #activity-hub:not([data-section="home"])
  #activity-hub-content
  .hub-card:hover {
  background: #34506a;
}

.hub-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  align-self: end;
  min-width: 0;
}
.hub-card-footer .hub-card-example {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.hub-card-go {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 12px;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--area-ink);
  font-size: calc(13px * var(--text-scale, 1));
  font-weight: 700;
  border: 1px solid var(--area-border);
}
.hub-card-go > span {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.15;
}
@media (max-width: 400px) {
  .hub-card-go {
    border-radius: 14px;
  }
}
.hub-card-go b {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--area-ink);
  color: var(--color-surface);
  font-size: 18px;
  line-height: 1;
}
html[data-appearance="dark"] .hub-card-go {
  background: #21394f;
}
html[data-appearance="dark"] .hub-card-go b {
  color: #21394f;
}

/* Challenge topic: a labelled control with a visible "Change" action. */
#activity-hub .hub-topic {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  width: 100%;
  min-height: 48px;
  padding: 8px 8px 8px 14px;
  margin-bottom: 12px;
  text-align: left;
  border: 2px dashed var(--area-border);
  border-radius: 14px;
  background: var(--ad-tint-cream);
  font-size: calc(14px * var(--text-scale, 1));
}
#activity-hub .hub-review {
  border-style: solid;
}
html[data-appearance="dark"] #activity-hub #activity-hub-content .hub-topic {
  background: var(--ad-soft);
  border-color: var(--area-border);
}
/* Drill-down motion: the tapped card grows into the area (.hub-zoom), then the choices arrive one by one
   from the right. Returning to Home reverses the direction and shrinks the area back into its card. */
#activity-hub .hub-heading {
  position: relative;
  z-index: 2;
}

#activity-hub {
  transition:
    background-color 0.16s ease,
    border-color 0.16s ease;
}
@keyframes hub-in-right {
  from {
    opacity: 0.75;
    transform: translateX(14px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes hub-in-left {
  from {
    opacity: 0.75;
    transform: translateX(-14px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes hub-pop {
  from {
    opacity: 0.8;
    transform: scale(0.92) rotate(-3deg);
  }
  70% {
    transform: scale(1.04) rotate(1deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
#activity-hub[data-transition]
  #activity-hub-content
  :is(.hub-topic, .hub-topic-group > h2, .hub-card) {
  animation: hub-in-right 0.18s cubic-bezier(0.2, 0.8, 0.3, 1) both;
  animation-delay: calc(min(var(--i, 0), 3) * 12ms);
}
#activity-hub[data-transition] .hub-title > div {
  animation: hub-in-right 0.16s ease-out both;
}
#activity-hub[data-transition="forward"] .hub-title-icon {
  animation: hub-pop 0.18s ease-out both;
}
#activity-hub[data-transition="forward"] .hub-back {
  animation: hub-in-left 0.16s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  #activity-hub,
  #activity-hub * {
    animation: none !important;
    transition: none !important;
  }
}
html[data-calm="true"] #activity-hub,
html[data-calm="true"] #activity-hub * {
  animation: none !important;
}

@media (max-width: 850px), (pointer: coarse) and (max-width: 1100px) {
  #activity-hub .hub-heading {
    gap: 8px;
  }

  .hub-title {
    gap: 8px;
  }

  .hub-title-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    font-size: 25px;
  }

  #activity-hub .hub-back {
    min-height: 44px;
    padding: 4px 10px 4px 7px;
    gap: 4px;
    border-radius: 13px;
  }

  .hub-card-footer {
    flex-wrap: wrap;
    gap: 6px;
  }

  .hub-card-go {
    padding: 3px 4px 3px 10px;
    font-size: calc(12px * var(--text-scale, 1));
  }

  .hub-card-go b {
    width: 22px;
    height: 22px;
    font-size: 16px;
  }

  #activity-hub .hub-topic {
    min-height: 44px;
    padding: 6px 6px 6px 10px;
    margin-bottom: 10px;
  }
}
@media (max-width: 600px) {
  #activity-hub .hub-topic {
    flex-wrap: nowrap;
  }

  #activity-hub[data-section="challenges"] #activity-hub-content .hub-card {
    box-shadow: 0 3px 0 var(--area-shadow);
  }

  #activity-hub:not([data-section="home"]) .hub-heading {
    margin-bottom: 10px;
  }

  .hub-back-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .hub-card-footer .hub-card-example {
    display: none;
  }
}
@media (max-width: 360px) {
  .hub-title-icon {
    display: none;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .hub-title-icon {
    width: 34px;
    height: 34px;
    font-size: 21px;
  }
}
/* Challenges and games share toy cards: a large picture, a name and a playful clue. */
#activity-hub:is(
    [data-section="challenges"],
    [data-section="play"],
    [data-section="listen"],
    [data-section="movers"],
    [data-section="favorites"]
  )
  .hub-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
#activity-hub:is(
    [data-section="challenges"],
    [data-section="play"],
    [data-section="listen"],
    [data-section="movers"],
    [data-section="favorites"]
  )
  .hub-card:is([data-challenge], [data-game], [data-listening]) {
  --challenge-tile: var(--color-surface-control-active);
  --challenge-edge: #9fc7eb;
  --challenge-paper: #f5faff;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: start;
  min-height: 0;
  padding: 18px 14px 16px;
  border: 2px solid var(--challenge-edge);
  border-radius: 26px;
  background: var(--challenge-paper);
  box-shadow: 0 5px 0 var(--challenge-edge);
  text-align: center;
}
#activity-hub[data-section="challenges"] .hub-card[data-challenge="listen"],
#activity-hub[data-section="challenges"] .hub-card[data-challenge="sequence"] {
  --challenge-tile: #d7f2df;
  --challenge-edge: #9acdb0;
  --challenge-paper: #f4fcf6;
}
#activity-hub[data-section="challenges"] .hub-card[data-challenge="speak"],
#activity-hub[data-section="challenges"] .hub-card[data-challenge="sentences"] {
  --challenge-tile: #ece0ff;
  --challenge-edge: #c3afe5;
  --challenge-paper: #faf7ff;
}
#activity-hub[data-section="challenges"] .hub-card[data-challenge="watch"],
#activity-hub[data-section="challenges"] .hub-card[data-challenge="missions"] {
  --challenge-tile: #ffe4cd;
  --challenge-edge: #edbe98;
  --challenge-paper: var(--ad-tint-cream);
}
#activity-hub[data-section="challenges"] .hub-card[data-challenge="review"] {
  --challenge-tile: #ffe79d;
  --challenge-edge: #e8c567;
  --challenge-paper: #fff9df;
  align-items: center;
  margin-bottom: 18px;
}
#activity-hub:is(
    [data-section="challenges"],
    [data-section="play"],
    [data-section="listen"],
    [data-section="movers"],
    [data-section="favorites"]
  )
  :is([data-challenge], [data-game], [data-listening])
  .hub-card-icon {
  background-color: var(--challenge-tile);
  box-shadow: 0 3px 0 var(--challenge-edge);
}
#activity-hub:is(
    [data-section="challenges"],
    [data-section="play"],
    [data-section="listen"],
    [data-section="movers"],
    [data-section="favorites"]
  )
  :is([data-challenge], [data-game], [data-listening])
  .hub-card-description {
  font-size: calc(12px * var(--text-scale, 1));
  margin-top: 7px;
}
#activity-hub:is(
    [data-section="challenges"],
    [data-section="play"],
    [data-section="listen"],
    [data-section="movers"],
    [data-section="favorites"]
  )
  :is([data-challenge], [data-game], [data-listening])
  .hub-card-hint {
  max-width: 34ch;
  align-self: center;
}
#activity-hub:is(
    [data-section="challenges"],
    [data-section="play"],
    [data-section="listen"],
    [data-section="movers"],
    [data-section="favorites"]
  )
  :is([data-challenge], [data-game], [data-listening])
  .hub-card-example {
  grid-column: 1;
  border-radius: 16px;
  background: var(--challenge-tile);
  color: #365b78;
  font-weight: 700;
}
#activity-hub:is(
    [data-section="challenges"],
    [data-section="play"],
    [data-section="listen"],
    [data-section="movers"],
    [data-section="favorites"]
  )
  .hub-card:is([data-challenge], [data-game], [data-listening]):hover {
  border-color: var(--challenge-edge);
  background: var(--challenge-tile);
}
#activity-hub:is(
    [data-section="challenges"],
    [data-section="play"],
    [data-section="listen"],
    [data-section="movers"],
    [data-section="favorites"]
  )
  .hub-card:is([data-challenge], [data-game], [data-listening]):active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--challenge-edge);
}
#activity-hub:is(
    [data-section="challenges"],
    [data-section="play"],
    [data-section="listen"],
    [data-section="movers"],
    [data-section="favorites"]
  )
  .hub-card:is([data-challenge], [data-game], [data-listening]):focus-visible {
  outline: 3px solid #588cbd;
  outline-offset: 4px;
}
html[data-appearance="dark"]
  #activity-hub:is(
    [data-section="challenges"],
    [data-section="play"],
    [data-section="listen"],
    [data-section="movers"],
    [data-section="favorites"]
  )
  #activity-hub-content
  .hub-card:is([data-challenge], [data-game], [data-listening]) {
  background: #293f55;
  border-color: var(--challenge-edge);
  box-shadow: 0 5px 0 #172c3e;
}
@media (max-width: 480px) {
  #activity-hub:is(
      [data-section="challenges"],
      [data-section="play"],
      [data-section="listen"],
      [data-section="movers"],
      [data-section="favorites"]
    )
    .hub-grid {
    gap: 10px;
  }

  #activity-hub:is(
      [data-section="challenges"],
      [data-section="play"],
      [data-section="listen"],
      [data-section="movers"],
      [data-section="favorites"]
    )
    .hub-card:is([data-challenge], [data-game], [data-listening]) {
    padding: 12px 8px;
    border-radius: 21px;
  }

  #activity-hub:is(
      [data-section="challenges"],
      [data-section="play"],
      [data-section="listen"],
      [data-section="movers"],
      [data-section="favorites"]
    )
    :is([data-challenge], [data-game], [data-listening])
    .hub-card-icon {
    width: 54px;
    height: 54px;
    font-size: 36px;
  }

  #activity-hub:is(
      [data-section="challenges"],
      [data-section="play"],
      [data-section="listen"],
      [data-section="movers"],
      [data-section="favorites"]
    )
    :is([data-challenge], [data-game], [data-listening])
    .hub-card-copy
    strong {
    font-size: calc(16px * var(--text-scale, 1));
  }

  #activity-hub[data-section="challenges"] .hub-review[data-challenge] {
    grid-template-columns: 54px minmax(0, 1fr);
  }
}
@media (max-width: 360px) {
  #activity-hub:is(
      [data-section="challenges"],
      [data-section="play"],
      [data-section="listen"],
      [data-section="movers"],
      [data-section="favorites"]
    )
    .hub-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Explanations are optional; the card itself stays a short, visual choice. */
.hub-choice {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
#activity-hub .hub-choice > .hub-card {
  width: 100%;
  flex: 1;
  margin-bottom: 0;
}
#activity-hub .hub-choice .hub-card :is(.hub-card-description, .hub-card-hint) {
  display: none;
}
#activity-hub .hub-choice .hub-card-copy {
  width: 100%;
}
#activity-hub .hub-choice .hub-card-copy strong {
  padding-inline: 0;
}
#activity-hub .hub-choice:has(.hub-review) {
  margin-bottom: 18px;
}
.hub-card-info {
  color: #365b78;
}
.hub-card-info > summary {
  position: absolute;
  top: 7px;
  right: 7px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  list-style: none;
  border-radius: 50%;
  background: #ffffffd9;
  border: 1px solid #a8bfd1;
  color: #365b78;
  font-size: 24px;
  cursor: pointer;
}
.hub-card-info > summary::-webkit-details-marker {
  display: none;
}
.hub-card-info > summary:hover,
.hub-card-info[open] > summary {
  background: var(--color-surface-control-active);
}
.hub-card-info > summary:focus-visible {
  outline: 3px solid #588cbd;
  outline-offset: 2px;
}
.hub-info-copy {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid #b9cfdf;
  border-radius: 16px;
  background: var(--color-surface);
  text-align: left;
  font-size: calc(13px * var(--text-scale, 1));
  line-height: 1.45;
}
.hub-info-copy p {
  margin: 0;
}
.hub-info-copy p + p {
  margin-top: 6px;
}
#activity-hub:is([data-section="listen"], [data-section="movers"]) [data-listening] {
  --challenge-tile: #ece0ff;
  --challenge-edge: #c3afe5;
  --challenge-paper: #faf7ff;
}
#activity-hub:is([data-section="listen"], [data-section="movers"]) [data-listening="stories"] {
  --challenge-tile: #d7f2df;
  --challenge-edge: #9acdb0;
  --challenge-paper: #f4fcf6;
}
#activity-hub:is([data-section="listen"], [data-section="movers"])
  [data-listening="conversations"] {
  --challenge-tile: var(--color-surface-control-active);
  --challenge-edge: #9fc7eb;
  --challenge-paper: #f5faff;
}
#activity-hub:is([data-section="listen"], [data-section="movers"]) [data-listening="riddles"] {
  --challenge-tile: #ffe4cd;
  --challenge-edge: #edbe98;
  --challenge-paper: var(--ad-tint-cream);
}
html[data-appearance="dark"] .hub-info-copy {
  background: #293f55;
  color: var(--ad-ink-deep);
  border-color: #6b889f;
}
/* Use Play's card scale across topic and challenge menus. */
#activity-hub:is(
    [data-section="explore"],
    [data-section="challenges"],
    [data-section="play"],
    [data-section="listen"],
    [data-section="movers"],
    [data-section="favorites"]
  )
  .hub-card:is(.hub-topic-card, [data-challenge], [data-game], [data-listening]) {
  min-height: 160px;
  align-content: center;
  gap: 6px;
  padding: 14px 10px;
}
#activity-hub:is([data-section="explore"], [data-section="favorites"])
  .hub-topic-card
  .hub-card-icon {
  width: 64px;
  height: 64px;
  font-size: 42px;
  border-radius: 22px;
}
#activity-hub:is([data-section="explore"], [data-section="favorites"])
  .hub-topic-card
  .hub-card-copy
  strong {
  font-size: calc(20px * var(--text-scale, 1));
}
#activity-hub:is([data-section="explore"], [data-section="favorites"])
  .hub-topic-card
  .hub-card-copy
  small {
  font-size: calc(12px * var(--text-scale, 1));
}
#activity-hub[data-section="challenges"] .hub-card[data-challenge="review"] {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}
@media (max-width: 480px) {
  #activity-hub:is(
      [data-section="explore"],
      [data-section="challenges"],
      [data-section="play"],
      [data-section="listen"],
      [data-section="movers"],
      [data-section="favorites"]
    )
    .hub-card:is(.hub-topic-card, [data-challenge], [data-game], [data-listening]) {
    min-height: 144px;
    padding: 12px 8px;
  }

  #activity-hub:is([data-section="explore"], [data-section="favorites"])
    .hub-topic-card
    .hub-card-icon {
    width: 54px;
    height: 54px;
    font-size: 36px;
  }

  #activity-hub:is([data-section="explore"], [data-section="favorites"])
    .hub-topic-card
    .hub-card-copy
    strong {
    font-size: calc(17px * var(--text-scale, 1));
  }

  #activity-hub:is([data-section="explore"], [data-section="favorites"])
    .hub-topic-card
    .hub-card-copy
    small {
    font-size: calc(11px * var(--text-scale, 1));
  }

  #activity-hub:is([data-section="explore"], [data-section="favorites"]) .hub-topic-card {
    padding-inline: 3px;
  }
}
/* Tablet and narrow responsive menus: shorter tiles (smaller icon, tighter padding) so more choices fit without scrolling; names keep their size. */
@media (min-width: 520px) and (max-width: 859px) and (min-height: 501px) {
  #activity-hub:is(
      [data-section="explore"],
      [data-section="challenges"],
      [data-section="play"],
      [data-section="listen"],
      [data-section="movers"],
      [data-section="favorites"]
    )
    .hub-card:is(.hub-topic-card, [data-challenge], [data-game], [data-listening]):not(
      [data-challenge="review"]
    ) {
    min-height: 118px;
    gap: 3px;
    padding: 8px 10px;
  }

  #activity-hub:is(
      [data-section="explore"],
      [data-section="challenges"],
      [data-section="play"],
      [data-section="listen"],
      [data-section="movers"],
      [data-section="favorites"]
    )
    .hub-card:is(.hub-topic-card, [data-challenge], [data-game], [data-listening]):not(
      [data-challenge="review"]
    )
    .hub-card-icon {
    width: 48px;
    height: 48px;
    font-size: 32px;
    border-radius: 16px;
  }
}
/* Review is a quick shortcut, rather than a full activity tile. */
#activity-hub[data-section="challenges"] .hub-choice > .hub-card[data-challenge="review"] {
  min-height: 76px;
  grid-template-columns: 48px minmax(0, 1fr);
  justify-items: start;
  align-content: center;
  align-items: center;
  gap: 12px;
  padding: 12px 64px 12px 16px;
  text-align: left;
  border-radius: 20px;
}
#activity-hub[data-section="challenges"] [data-challenge="review"] .hub-card-icon {
  width: 48px;
  height: 48px;
  font-size: 32px;
  border-radius: 16px;
}
#activity-hub[data-section="challenges"] [data-challenge="review"] .hub-card-copy strong {
  padding: 0;
  font-size: calc(17px * var(--text-scale, 1));
}
#activity-hub[data-section="challenges"]
  .hub-choice:has([data-challenge="review"])
  > .hub-card-info
  > summary {
  top: 16px;
  right: 10px;
}
@media (max-width: 480px) {
  #activity-hub[data-section="challenges"] .hub-choice > .hub-card[data-challenge="review"] {
    min-height: 68px;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 9px;
    padding: 10px 58px 10px 12px;
  }

  #activity-hub[data-section="challenges"] [data-challenge="review"] .hub-card-icon {
    width: 40px;
    height: 40px;
    font-size: 28px;
    border-radius: 13px;
  }

  #activity-hub[data-section="challenges"]
    .hub-choice:has([data-challenge="review"])
    > .hub-card-info
    > summary {
    top: 12px;
    right: 7px;
  }
}
/* Compact choices keep the picture prominent without turning shortcuts into panels. */
#activity-hub:is(
    [data-section="challenges"],
    [data-section="play"],
    [data-section="listen"],
    [data-section="movers"],
    [data-section="favorites"]
  )
  .hub-card:is([data-challenge], [data-game], [data-listening]) {
  gap: 6px;
}
#activity-hub:is(
    [data-section="challenges"],
    [data-section="play"],
    [data-section="listen"],
    [data-section="movers"],
    [data-section="favorites"]
  )
  :is([data-challenge], [data-game], [data-listening])
  .hub-card-icon {
  width: 52px;
  height: 52px;
  font-size: 36px;
  border-radius: 18px;
}
#activity-hub:is(
    [data-section="challenges"],
    [data-section="play"],
    [data-section="listen"],
    [data-section="movers"],
    [data-section="favorites"]
  )
  :is([data-challenge], [data-game], [data-listening])
  .hub-card-copy
  strong {
  font-size: calc(17px * var(--text-scale, 1));
  overflow-wrap: normal;
}
#activity-hub:is(
    [data-section="challenges"],
    [data-section="play"],
    [data-section="listen"],
    [data-section="movers"],
    [data-section="favorites"]
  )
  :is([data-challenge], [data-game], [data-listening])
  .hub-card-example {
  margin: 0;
  padding: 4px 10px;
  font-size: calc(13px * var(--text-scale, 1));
}
#activity-hub .hub-choice > .hub-card {
  padding-top: 14px;
}

#activity-hub[data-section="challenges"]
  .hub-choice
  > .hub-card[data-challenge="review"]
  .hub-card-icon {
  width: 48px;
  height: 48px;
  font-size: 32px;
}
@media (max-width: 600px) {
  #activity-hub:is([data-section="explore"], [data-section="favorites"]) .hub-topic-card {
    min-height: 116px;
    gap: 5px;
    padding: 10px 3px;
  }

  #activity-hub:is([data-section="explore"], [data-section="favorites"])
    .hub-topic-card
    .hub-card-icon {
    width: 40px;
    height: 40px;
    font-size: 32px;
    border-radius: 14px;
  }

  #activity-hub:is([data-section="explore"], [data-section="favorites"])
    .hub-topic-card
    .hub-card-copy
    strong {
    font-size: calc(13px * var(--text-scale, 1));
    overflow-wrap: normal;
  }

  #activity-hub:is([data-section="explore"], [data-section="favorites"])
    .hub-topic-card
    .hub-card-copy
    small {
    font-size: calc(10px * var(--text-scale, 1));
    overflow-wrap: normal;
  }

  #activity-hub[data-section="challenges"]
    .hub-choice
    > .hub-card[data-challenge="review"]
    .hub-card-icon {
    width: 40px;
    height: 40px;
    font-size: 28px;
  }
}
/* Narrow phones need room for whole words, including enlarged text. */
@media (max-width: 420px) {
  #activity-hub[data-section="explore"] .hub-topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (orientation: landscape) and (max-height: 500px) {
  #activity-hub:is(
      [data-section="explore"],
      [data-section="challenges"],
      [data-section="play"],
      [data-section="listen"],
      [data-section="movers"],
      [data-section="favorites"]
    )
    .hub-card:is(.hub-topic-card, [data-challenge], [data-game], [data-listening]) {
    min-height: 96px;
    padding: 10px 8px;
    gap: 4px;
  }

  #activity-hub:is(
      [data-section="explore"],
      [data-section="challenges"],
      [data-section="play"],
      [data-section="listen"],
      [data-section="movers"],
      [data-section="favorites"]
    )
    .hub-card
    .hub-card-icon {
    width: 40px;
    height: 40px;
    font-size: 30px;
    border-radius: 14px;
  }

  #activity-hub:is(
      [data-section="explore"],
      [data-section="challenges"],
      [data-section="play"],
      [data-section="listen"],
      [data-section="movers"],
      [data-section="favorites"]
    )
    .hub-card
    .hub-card-copy
    strong {
    font-size: calc(14px * var(--text-scale, 1));
  }

  #activity-hub[data-section="challenges"] .hub-choice > .hub-card[data-challenge="review"] {
    min-height: 64px;
    grid-template-columns: 40px minmax(0, 1fr);
    padding-right: 64px;
  }
}
/* Menus echo the controller's short bevel; their content and hierarchy are unchanged. */
#activity-hub .hub-card {
  border-color: var(--area-border, #abc7e5);
  background: linear-gradient(
    180deg,
    var(--area-bg, var(--color-surface)),
    var(--area-tile, #edf5ff)
  );
  box-shadow:
    inset 0 2px 0 #ffffffa0,
    0 4px 0 var(--area-shadow, #d2dfee);
}
#activity-hub .hub-card-copy strong {
  color: var(--area-ink, #294d76);
  font-weight: 800;
}

/* Portrait tablets have room for readable activity names and translations. */
@media (orientation: portrait) and (min-width: 600px) and (min-height: 800px) {
  #activity-hub .hub-topic-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
  #activity-hub[data-section]
    .hub-card:is([data-home-area], .hub-topic-card, [data-challenge], [data-game], [data-listening])
    .hub-card-copy
    strong {
    font-size: calc(21px * var(--text-scale, 1));
  }
  #activity-hub[data-section] .hub-card .hub-card-copy small,
  #activity-hub[data-section] .hub-card .hub-card-example {
    font-size: calc(14px * var(--text-scale, 1));
  }
  #activity-hub .hub-card-go {
    min-height: 40px;
    font-size: calc(14px * var(--text-scale, 1));
  }
}

/* Phone Home brings the four activity doors into view before the extra shortcuts. */
@media (max-width: 599px), (max-width: 850px) and (max-height: 500px) {
  #activity-hub[data-section] {
    inset: max(8px, env(safe-area-inset-top, 0px)) 0 auto;
    margin: 0 auto;
    padding: 12px;
  }

  #activity-hub[data-section] [lang="es"] {
    display: none;
  }

  #activity-hub[data-section] .hub-heading {
    align-items: center;
    margin-bottom: 8px;
  }

  #activity-hub[data-section] .hub-heading h1 {
    font-size: calc(21px * var(--text-scale, 1));
  }

  #activity-hub[data-section] .hub-grid {
    gap: 8px;
  }

  #activity-hub[data-section] :is(.hub-card-info, .hub-card-footer) {
    display: none;
  }
}

/* Phone area menus use the same compact icon-and-name choices as Home. */
@media (max-width: 599px), (max-width: 850px) and (max-height: 500px) {
  #activity-hub .hub-title-icon,
  #activity-hub .hub-card-example {
    display: none;
  }

  #activity-hub:not([data-section="home"]) .hub-heading {
    gap: 8px;
    margin-bottom: 8px;
  }

  #activity-hub .hub-filter-select {
    flex: 1;
    min-height: 44px;
    padding-left: 12px;
    padding-right: 32px;
  }

  #activity-hub .hub-filter::after {
    right: 12px;
  }

  #activity-hub:not([data-section="home"]) .hub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #activity-hub:not([data-section="home"])
    .hub-card:is(.hub-topic-card, [data-challenge], [data-game], [data-listening]) {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-content: center;
    justify-items: center;
    min-height: 76px;
    padding: 8px;
    gap: 4px;
    border-radius: 16px;
    text-align: center;
  }

  #activity-hub:not([data-section="home"])
    .hub-card:is(.hub-topic-card, [data-challenge], [data-game], [data-listening])
    .hub-card-icon {
    width: 28px;
    height: 28px;
    font-size: 24px;
    border-radius: 10px;
  }

  #activity-hub:not([data-section="home"])
    .hub-card:is(.hub-topic-card, [data-challenge], [data-game], [data-listening])
    .hub-card-copy
    strong {
    padding: 0;
    font-size: calc(14px * var(--text-scale, 1));
    overflow-wrap: anywhere;
    /* A word wider than its tile (Conversations at 390 px) breaks with a hyphen, not before its last letter. */
    hyphens: auto;
  }

  #activity-hub .hub-topic-group h2 {
    margin-bottom: 6px;
    font-size: calc(15px * var(--text-scale, 1));
  }

  #activity-hub .hub-topic-group {
    margin-bottom: 10px;
  }

  #activity-hub[data-section="challenges"] .hub-choice > .hub-card[data-challenge="review"] {
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-rows: auto;
    min-height: 52px;
    padding: 8px;
    gap: 8px;
    text-align: left;
  }

  #activity-hub[data-section="challenges"]
    .hub-choice
    > .hub-card[data-challenge="review"]
    .hub-card-icon {
    width: 28px;
    height: 28px;
    font-size: 24px;
  }

  #activity-hub[data-section="challenges"] .hub-choice:has([data-challenge="review"]) {
    margin-bottom: 8px;
  }
}

/* The challenge type is chosen within a visible topic; global modes declare their scope. */
#activity-hub .hub-card-copy .hub-card-scope {
  font-size: calc(11px * var(--text-scale, 1));
  font-weight: 600;
}
@media (max-width: 599px), (max-width: 850px) and (max-height: 500px) {
  #activity-hub .hub-topic {
    min-height: 40px;
    margin-bottom: 8px;
    padding: 6px 8px;
    gap: 6px;
  }
}

#activity-hub[data-section="topics"] .hub-back svg {
  display: none;
}
#activity-hub[data-section="topics"] .hub-back {
  min-width: 44px;
}

/* Wide Home: each area is one slim row (icon, name, go) instead of a tall door. Narrower tablets keep the stacked card, whose name needs the full width. */

/* Tablet and narrow responsive Home: each tile is a short two-row card (icon, then name and arrow) so Home needs far less scrolling; the name keeps its large size. */

/* Inside an area every choice is the same size: a card with a longer note no longer makes its row taller than the rest. */
#activity-hub:is(
    [data-section="challenges"],
    [data-section="play"],
    [data-section="listen"],
    [data-section="movers"],
    [data-section="adventures"]
  )
  .hub-grid {
  grid-auto-rows: 1fr;
}
#activity-hub:is(
    [data-section="challenges"],
    [data-section="play"],
    [data-section="listen"],
    [data-section="movers"],
    [data-section="favorites"]
  )
  .hub-choice
  > .hub-card {
  height: 100%;
  box-sizing: border-box;
}

/* Wide screens give both pills the same width; phones keep them side by side at their natural size. */

/* Practice Club: one section per school subject (English, Science, Math), the color of each card and the
   category drop-down at the right of the title. */
#activity-hub[data-section="movers"] .hub-section-heading {
  margin: 14px 4px 8px;
  color: var(--area-ink);
  font-size: calc(18px * var(--text-scale, 1));
}
#activity-hub .hub-subject-icon {
  margin-right: 6px;
}
#activity-hub .hub-filter {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--area-ink);
  font-weight: 800;
}
#activity-hub .hub-filter[hidden] {
  display: none;
}
/* The caption reads on two lines, English over Spanish, on every screen. */
#activity-hub .hub-filter-label {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
#activity-hub .hub-filter-label small {
  font-size: 0.85em;
  font-weight: 500;
  opacity: 0.8;
}
/* Phones hide the Spanish lines of the area menus to save room; this caption keeps its two. */
#activity-hub[data-section] .hub-filter-label [lang="es"] {
  display: block;
}
/* A pill with its own arrow (the native one is tiny on a tablet); the whole pill opens the list. */
#activity-hub .hub-filter::after {
  content: "▾";
  position: absolute;
  right: 16px;
  pointer-events: none;
  font-size: 18px;
}
#activity-hub .hub-filter-select {
  min-height: 48px;
  padding: 6px 40px 6px 16px;
  border: 2px solid var(--area-border);
  border-radius: 999px;
  background: var(--ad-surface);
  color: var(--ad-ink-deep);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  appearance: none;
}
#activity-hub .hub-filter-select:focus-visible {
  outline: 3px solid var(--area-border);
  outline-offset: 3px;
}
/* Narrow window (a tablet held upright, a phone, a small desktop window): beside the title the drop-down
   left it 120 px and "Practice Club" broke letter by letter, so it takes its own row under the header. */
@media (max-width: 900px) {
  #activity-hub .hub-filter {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 560px;
  }
  #activity-hub .hub-filter-select {
    flex: 1;
  }
}
#activity-hub[data-section="movers"] .hub-section-heading small {
  font-size: 0.75em;
  font-weight: 500;
  opacity: 0.8;
}
#activity-hub[data-section="movers"] [data-listening="lines"] {
  --challenge-tile: #d5f0ee;
  --challenge-edge: #8fcac4;
  --challenge-paper: #f2fbfa;
}
#activity-hub[data-section="movers"] [data-listening="write"] {
  --challenge-tile: #fff0c9;
  --challenge-edge: #e5c26e;
  --challenge-paper: var(--ad-tint-cream);
}
#activity-hub[data-section="movers"] [data-listening="tick"] {
  --challenge-tile: #ffe1e1;
  --challenge-edge: #e9a0a0;
  --challenge-paper: #fff6f6;
}
#activity-hub[data-section="movers"] [data-listening="water"] {
  --challenge-tile: #d5ecfb;
  --challenge-edge: #8fc4e6;
  --challenge-paper: #f2f9ff;
}
#activity-hub[data-section="movers"] [data-listening="cycle"] {
  --challenge-tile: #d8f0e6;
  --challenge-edge: #93cdb4;
  --challenge-paper: #f3fbf7;
}
#activity-hub[data-section="movers"] [data-listening="movers-park"] {
  --challenge-tile: #d7f2df;
  --challenge-edge: #9acdb0;
  --challenge-paper: #f4fcf6;
}
#activity-hub[data-section="movers"] [data-listening="movers-party"] {
  --challenge-tile: #ffe4cd;
  --challenge-edge: #edbe98;
  --challenge-paper: var(--ad-tint-cream);
}
#activity-hub[data-section="movers"] [data-listening="movers-school"] {
  --challenge-tile: #fff0c9;
  --challenge-edge: #e5c26a;
  --challenge-paper: var(--ad-tint-cream);
}
#activity-hub[data-section="movers"] [data-listening="movers-hospital"] {
  --challenge-tile: #dcebfb;
  --challenge-edge: #9fc7eb;
  --challenge-paper: #f5faff;
}
html[data-appearance="dark"] #activity-hub[data-section="movers"] .hub-section-heading {
  color: #bfeae5;
}
/* An open info panel floats over the tiles below its own card instead of growing the row, so no other tile stretches. */
.hub-choice {
  z-index: 0;
}
.hub-choice:has(.hub-card-info[open]) {
  z-index: 6;
}
.hub-card-info[open] > .hub-info-copy {
  position: absolute;
  top: calc(100% - 4px);
  left: 0;
  right: 0;
  margin: 0;
  box-shadow: 0 8px 20px #1d3a5a38;
}
/* Favorites: a heart beside each topic card and the empty state of the Favorites area. */
#activity-hub .hub-fav {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  min-height: 0;
  padding: 0;
  font-size: calc(16.2px * var(--text-scale, 1));
}
/* Draw the ring inside the button so the heart and its touch target keep their size. */
:is(#activity-hub .hub-fav, #album-dialog .mission-topic-favorite) {
  isolation: isolate;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #a92d62;
  line-height: 1;
  box-shadow: none;
  cursor: pointer;
}
:is(#activity-hub .hub-fav, #album-dialog .mission-topic-favorite)::before {
  content: "";
  position: absolute;
  inset: 4px;
  transform: scale(0.9);
  z-index: -1;
  pointer-events: none;
  border: 1px solid #e9a0be;
  border-radius: inherit;
  background: radial-gradient(circle at 35% 24%, var(--ad-on-accent) 8%, #fff0f7 72%);
  box-shadow: 0 2px 0 #92305226;
}
/* The invisible margin brings the 36 px button to a 44 px touch target. */
#activity-hub .hub-fav::after {
  content: "";
  position: absolute;
  inset: -4px;
}
:is(#activity-hub .hub-fav, #album-dialog .mission-topic-favorite)[aria-pressed="true"]::before {
  background: radial-gradient(circle at 35% 24%, #ffe5f2 8%, var(--color-favorite-pink) 72%);
  border-color: #c04b82;
}
html[data-appearance="dark"] :is(#activity-hub .hub-fav, #album-dialog .mission-topic-favorite) {
  color: var(--color-favorite-pink);
}
html[data-appearance="dark"] :is(#activity-hub .hub-fav, #album-dialog .mission-topic-favorite)::before {
  background: #48263c;
}
html[data-appearance="dark"] :is(#activity-hub .hub-fav, #album-dialog .mission-topic-favorite)[aria-pressed="true"]::before {
  background: #713758;
}
#activity-hub[data-section="favorites"] .hub-recent {
  margin-block-start: 16px;
  padding-block-start: 10px;
  border-block-start: 1px solid var(--ad-line-soft);
}
.hub-recent .hub-section-heading {
  margin: 0 0 8px;
  font-size: calc(19px * var(--text-scale, 1));
}
.hub-empty {
  margin: 0 0 12px;
  padding: 14px 16px;
  border: 2px dashed var(--area-border);
  border-radius: 18px;
  background: var(--area-bg);
  color: var(--area-ink);
  font-size: calc(16px * var(--text-scale, 1));
  font-weight: 700;
}
.hub-empty small {
  display: block;
  margin-top: 4px;
  font-weight: 500;
}
.hub-empty-go {
  min-height: 48px;
  padding: 8px 18px;
  border: 2px solid var(--area-border);
  border-radius: 16px;
  background: var(--color-surface);
  color: var(--area-ink);
  font-weight: 800;
}
/* Challenges: grouped tiles as compact as the Explore topics (icon, name, Spanish name); the example and hint stay in the info panel. */
#activity-hub[data-section="challenges"] .hub-topic-group .hub-topic-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
#activity-hub[data-section="challenges"] .hub-topic-group .hub-card[data-challenge] {
  min-height: 112px;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  gap: 3px;
  padding: 8px 6px;
  text-align: center;
}
#activity-hub[data-section="challenges"] .hub-topic-group .hub-card[data-challenge] .hub-card-icon {
  width: 44px;
  height: 44px;
  font-size: 30px;
  border-radius: 15px;
}
#activity-hub[data-section="challenges"] .hub-topic-group .hub-card[data-challenge] .hub-card-copy {
  align-items: center;
}
#activity-hub[data-section="challenges"]
  .hub-topic-group
  .hub-card[data-challenge]
  .hub-card-copy
  strong {
  font-size: calc(21px * var(--text-scale, 1));
}
#activity-hub[data-section="challenges"]
  .hub-topic-group
  .hub-card[data-challenge]
  .hub-card-example {
  display: none;
}
#activity-hub[data-section="challenges"] .hub-topic-group {
  margin-top: 6px;
}
@media (max-width: 520px) {
  #activity-hub[data-section="challenges"] .hub-topic-group .hub-topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Submenus always show three tiles per row, on every screen.
   Placed last so it wins over the older two-column rules above. */
#activity-hub[data-section="explore"] .hub-topic-grid,
#activity-hub[data-section="challenges"] .hub-topic-group .hub-topic-grid,
#activity-hub:is(
    [data-section="play"],
    [data-section="listen"],
    [data-section="movers"],
    [data-section="favorites"]
  )
  .hub-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
/* Three narrow tiles: a smaller picture and name, and the Spanish line and heart tucked in. */
@media (max-width: 599px) {
  #activity-hub:is(
      [data-section="play"],
      [data-section="listen"],
      [data-section="movers"],
      [data-section="favorites"]
    )
    .hub-card:is([data-game], [data-listening], [data-challenge], [data-journey-id]):not(
      .journey-card
    ) {
    padding: 14px 4px 8px;
    gap: 4px;
    border-radius: 18px;
  }
  #activity-hub:is(
      [data-section="play"],
      [data-section="listen"],
      [data-section="movers"],
      [data-section="challenges"]
    )
    .hub-card-icon {
    width: 40px;
    height: 40px;
    font-size: 26px;
  }
  #activity-hub:is(
      [data-section="play"],
      [data-section="listen"],
      [data-section="movers"],
      [data-section="challenges"]
    )
    .hub-card-copy
    strong {
    font-size: calc(12px * var(--text-scale, 1));
    line-height: 1.15;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  #activity-hub:is(
      [data-section="play"],
      [data-section="listen"],
      [data-section="movers"],
      [data-section="challenges"]
    )
    .hub-card-copy
    small {
    display: none;
  }
}
/* In three narrow columns the heart is smaller (its touch area still reaches 44 px) and the picture sits below it. */
@media (max-width: 599px) {
  #activity-hub:is(
      [data-section="play"],
      [data-section="listen"],
      [data-section="movers"],
      [data-section="favorites"],
      [data-section="challenges"],
      [data-section="explore"]
    )
    .hub-choice:not(:has(> .journey-card))
    > .hub-fav {
    width: 28px;
    height: 28px;
    top: 4px;
    left: 4px;
    font-size: calc(12.96px * var(--text-scale, 1));
  }
  #activity-hub:is(
      [data-section="play"],
      [data-section="listen"],
      [data-section="movers"],
      [data-section="favorites"],
      [data-section="challenges"],
      [data-section="explore"]
    )
    .hub-choice:not(:has(> .journey-card))
    > .hub-fav::after {
    inset: -8px;
  }
  #activity-hub:is(
      [data-section="play"],
      [data-section="listen"],
      [data-section="movers"],
      [data-section="favorites"]
    )
    .hub-card:is([data-game], [data-listening], [data-challenge]) {
    padding-top: 26px;
  }
}
/* Portrait tablets keep their large names; with three columns a long word (Conversations) breaks instead of overflowing its tile. */
@media (orientation: portrait) and (min-width: 600px) and (min-height: 800px) {
  #activity-hub[data-section] .hub-card .hub-card-copy strong {
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}
/* Challenges in three phone columns: names at the size of the other submenus so "Understand a sentence" breaks between words, not inside them. */
@media (max-width: 599px) {
  #activity-hub[data-section="challenges"] .hub-topic-group .hub-card[data-challenge] {
    min-height: 96px;
    padding-top: 24px;
  }
  #activity-hub[data-section="challenges"]
    .hub-topic-group
    .hub-card[data-challenge]
    .hub-card-copy
    strong {
    font-size: calc(13px * var(--text-scale, 1));
    line-height: 1.15;
    overflow-wrap: normal;
    hyphens: manual;
  }
}
/* Phones: three tiles per row, so names scale with the screen and the longest word (Conversations) stays whole. */
@media (max-width: 599px) {
  #activity-hub:is(
      [data-section="listen"],
      [data-section="play"],
      [data-section="movers"],
      [data-section="favorites"]
    )
    .hub-card
    .hub-card-copy
    strong {
    font-size: calc(min(13px, 3.2vw) * var(--text-scale, 1));
    overflow-wrap: break-word;
    hyphens: manual;
  }
}

/* Give whole topic words room while retaining the three-column menus. */
@media (max-width: 599px) {
  #activity-hub:is([data-section="explore"], [data-section="favorites"]) {
    box-sizing: border-box;
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    padding-inline: 8px;
  }
  #activity-hub[data-section]:is([data-section="explore"], [data-section="favorites"])
    .hub-card.hub-topic-card {
    padding-inline: 2px;
  }
  #activity-hub[data-section]:is([data-section="explore"], [data-section="favorites"])
    .hub-card.hub-topic-card
    .hub-card-copy
    strong {
    font-size: calc(min(14px, 3.6vw) * var(--text-scale, 1));
    overflow-wrap: normal;
    hyphens: manual;
  }
}

/* The catalog root also has a back destination: Missions. */
#activity-hub .hub-heading {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.hub-back-icon {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  font-size: 20px;
  line-height: 1;
}

/* Tablet landscape: the info button and the challenge tiles follow the tablet premise (docs/css-components.md). */
@media (orientation: landscape) and (min-width: 768px) and (min-height: 640px) {
  #activity-hub[data-section="challenges"] .hub-card-info > summary {
    top: 4px;
    right: 4px;
    width: 48px;
    height: 48px;
    font-size: 28px;
  }
  #activity-hub[data-section="challenges"]
    .hub-topic-group
    .hub-card[data-challenge]
    .hub-card-copy
    strong {
    font-size: calc(19px * var(--text-scale, 1));
  }

  #activity-hub[data-section="challenges"] .hub-topic-group .hub-card[data-challenge] {
    min-height: 132px;
  }

  #activity-hub[data-section="challenges"] .hub-topic-grid {
    align-items: stretch;
  }

  /* The picture example is the clearest hint for a child who cannot read yet. */
  #activity-hub[data-section="challenges"]
    .hub-topic-group
    .hub-card[data-challenge]
    .hub-card-example {
    display: block;
    margin: 2px 0 0;
    font-size: calc(18px * var(--text-scale, 1));
  }

  /* A star marks the three easiest ways to start. */
  #activity-hub[data-section="challenges"] .hub-topic-card.hub-start {
    position: relative;
  }
  #activity-hub[data-section="challenges"] .hub-topic-card.hub-start::after {
    content: "⭐";
    position: absolute;
    top: 8px;
    left: 10px;
    font-size: 24px;
  }
}

/* Challenge group headings carry a picture; larger on tablet landscape. */
#activity-hub[data-section="challenges"] .hub-group-icon {
  margin-right: 6px;
}
@media (orientation: landscape) and (min-width: 768px) and (min-height: 640px) {
  #activity-hub[data-section="challenges"] .hub-group-icon {
    font-size: 30px;
    vertical-align: middle;
  }
}

/* Tablet landscape: area menus use the width instead of scrolling (docs/css-components.md). Four tiles per row, Practice Club six,
   and a tighter dialog frame so Play, Listen, Practice Club and Adventures fit at 1024 x 768 without a scroll. */
@media (orientation: landscape) and (min-width: 768px) and (min-height: 640px) {
  #activity-hub:not([data-section="home"]) {
    padding: 14px 18px;
  }
  #activity-hub:not([data-section="home"]) .hub-heading {
    margin-bottom: 8px;
  }
  #activity-hub:is([data-section="play"], [data-section="listen"], [data-section="adventures"])
    #activity-hub-content
    .hub-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }
  /* Challenges: the twelve modes flow into one four-column grid (the three group headings are dropped here) so they fit without a scroll. */
  #activity-hub[data-section="challenges"] #activity-hub-content {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-content: start;
    gap: 10px;
  }
  #activity-hub[data-section="challenges"] #activity-hub-content :is(.hub-topic-group, .hub-topic-grid) {
    display: contents;
  }
  #activity-hub[data-section="challenges"] #activity-hub-content .hub-topic-group > h2 {
    display: none;
  }
  #activity-hub[data-section="challenges"] #activity-hub-content > .hub-choice:has(.hub-review) {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }
  /* Practice Club has 16 tiles in three categories: six per row (a 15 px name keeps every title on one line
     at 1024 px) so English, Science and Math take four rows and the "All" view needs no scroll. */
  #activity-hub[data-section="movers"] #activity-hub-content .hub-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
  }
  #activity-hub[data-section="movers"] #activity-hub-content .hub-grid .hub-card {
    padding-right: 6px;
    padding-left: 6px;
  }
  #activity-hub[data-section="movers"] #activity-hub-content .hub-grid .hub-card-copy strong {
    font-size: calc(15px * var(--text-scale, 1));
  }
  #activity-hub:is([data-section="play"], [data-section="listen"], [data-section="movers"])
    #activity-hub-content
    .hub-grid
    .hub-card {
    min-height: 136px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  /* Practice Club: four rows under three subject headings still fit at 1024 x 768. Its tiles hold a
     52 px picture and two lines (111 px), so they drop from 136 to 116 px; the drop-down matches the
     54 px title picture so the header does not grow. */
  #activity-hub[data-section="movers"] #activity-hub-content .hub-grid .hub-card {
    min-height: 116px;
  }
  #activity-hub[data-section="movers"] .hub-section-heading {
    margin: 4px 4px 6px;
  }
  #activity-hub .hub-subject-icon {
    font-size: 22px;
    vertical-align: middle;
  }
  #activity-hub .hub-filter-select {
    min-height: 54px;
    font-size: calc(18px * var(--text-scale, 1));
  }
}

#activity-hub [data-explore-topic][aria-current="page"]::after {
  content: none;
}
#activity-hub .hub-word-progress {
  display: block;
  width: max-content;
  margin: 3px auto 0;
  padding: 1px 7px;
  border: 1px solid var(--ad-gold-edge);
  border-radius: 999px;
  background: var(--ad-gold-face);
  color: var(--ad-gold-ink);
  font-weight: 800;
}
#activity-hub .hub-word-progress[data-done="true"] {
  border-color: var(--ad-mint-edge);
  background: #216647;
  color: white;
}
#activity-hub[data-section="play"] .hub-play-choice {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}
#activity-hub[data-section="play"] .hub-play-study-action {
  min-height: 52px;
  padding: 8px 10px;
  border: 2px solid var(--ad-blue-edge);
  border-radius: 14px;
  background: linear-gradient(var(--ad-blue-top), var(--ad-blue-face));
  color: var(--ad-blue-ink);
  font: inherit;
  font-size: 0.78em;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
}
#activity-hub[data-section="play"] .hub-play-study-action:focus-visible {
  outline: 4px solid var(--ad-blue-ink);
  outline-offset: 3px;
}
@media (orientation: landscape) and (min-width: 768px) and (min-height: 640px) {
  #activity-hub[data-section="play"] .hub-play-study-action {
    min-height: 88px;
    padding: 14px 18px;
    font-size: calc(18px * var(--text-scale, 1));
  }
}
@media (orientation: landscape) and (max-height: 500px) {
  #activity-hub[data-section="play"] .hub-play-study-action {
    min-height: 42px;
    padding: 5px 8px;
    font-size: calc(13px * var(--text-scale, 1));
  }
}

#activity-hub[data-section="favorites"] .hub-heading {
  grid-template-columns: minmax(0, 1fr) auto;
}
#activity-hub #activity-hub-close {
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  font-size: calc(22px * var(--text-scale, 1));
}