/* Guided adventure: the Home card and the sheets that open, continue and close its steps. */
.journey-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px 12px;
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 14px;
  padding: 14px 18px;
  border: 3px solid var(--ad-blue-edge);
  border-bottom-width: 6px;
  border-radius: 22px;
  background: linear-gradient(var(--ad-blue-top), var(--ad-blue-face));
  color: var(--ad-blue-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.journey-card:active {
  transform: translateY(2px);
  border-bottom-width: 4px;
}
.journey-card:focus-visible,
.journey-button:focus-visible,
.journey-pick:focus-visible {
  outline: 4px solid var(--ad-blue-ink);
  outline-offset: 3px;
}
.journey-icon {
  font-size: calc(44px * var(--text-scale, 1));
  line-height: 1;
}
.journey-card-copy {
  display: grid;
  gap: 1px;
}
.journey-card-copy > small {
  font-size: calc(12px * var(--text-scale, 1));
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.journey-copy {
  display: grid;
}
.journey-copy strong {
  font-size: calc(19px * var(--text-scale, 1));
}
.journey-copy small {
  font-size: calc(13px * var(--text-scale, 1));
  opacity: 0.85;
}
.journey-eggs {
  grid-column: 1 / -1;
  display: flex;
  gap: 4px;
  font-size: calc(26px * var(--text-scale, 1));
}
.journey-go {
  grid-column: 1 / -1;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--ad-blue-ink);
  color: var(--ad-blue-top);
  font-size: calc(17px * var(--text-scale, 1));
  font-weight: 800;
}
@media (min-width: 560px) {
  .journey-card {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .journey-eggs {
    grid-column: auto;
  }
}
:is(.journey-sheet, .topic-finish) {
  position: fixed;
  inset: auto 0 0 0;
  max-width: min(520px, calc(100vw - 32px));
  margin: 0 auto 16px;
  padding: 18px;
  border: 3px solid var(--ad-blue-edge);
  border-radius: 24px;
  background: var(--ad-blue-top);
  color: var(--ad-blue-ink);
  box-shadow: 0 10px 30px rgb(35 62 100 / 0.3);
}
:is(.journey-sheet, .topic-finish)[open] {
  display: grid;
  gap: 12px;
}
:is(.journey-sheet, .topic-finish)::backdrop {
  background:
    radial-gradient(120% 80% at 50% 15%, rgb(140 195 250 / 0.42), transparent 70%),
    linear-gradient(rgb(60 100 160 / 0.5), rgb(28 50 90 / 0.78));
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  backdrop-filter: blur(10px) saturate(1.15);
}
.journey-sheet[data-kind="next"],
.journey-sheet[data-kind="finish"],
.topic-finish {
  inset: 0;
  margin: auto;
  text-align: center;
}
.topic-finish .ce-choices {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
}
.journey-button {
  min-height: 56px;
  padding: 10px 18px;
  border: 3px solid var(--ad-blue-edge);
  border-bottom-width: 6px;
  border-radius: 999px;
  background: var(--ad-blue-face);
  color: var(--ad-blue-ink);
  font: inherit;
  cursor: pointer;
}
.journey-button.is-primary {
  min-height: 72px;
  border-color: var(--ad-mint-edge);
  background: var(--ad-mint-face);
  color: var(--ad-mint-ink);
}
.journey-button.is-primary strong {
  font-size: calc(22px * var(--text-scale, 1));
}
.journey-button.is-quiet {
  background: transparent;
  border-bottom-width: 3px;
}
/* The way out is smaller than the actions that keep going, but still a 44 px target. */
.journey-button.is-exit {
  min-height: 44px;
  padding: 6px 14px;
  font-size: calc(15px * var(--text-scale, 1));
  font-weight: 700;
}
html[data-calm="true"] .journey-card:active {
  transform: none;
}
@media (forced-colors: active) {
  .journey-card,
  .journey-sheet,
  .journey-button {
    border-color: CanvasText;
  }
}

/* After a guided step the sheet is the only "what next": the activity's own end buttons would be unreachable. */
body[data-journey-final] #practice-bar[data-result="complete"] :is(#practice-next, #finale-album),
body[data-journey-final] .play-world .world-primary[data-phase="done"] {
  visibility: hidden;
}

/* Meet: the three concepts glow in the real color grid, everything else steps back. */
.journey-meet {
  position: relative;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  box-sizing: border-box;
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 6px 12px;
  border: 3px solid var(--ad-blue-edge);
  border-radius: 20px;
  background: var(--ad-blue-top);
  color: var(--ad-blue-ink);
  box-shadow: 0 6px 18px rgb(35 62 100 / 0.25);
}
.stage-toolbar:has(> .journey-meet) {
  flex-wrap: wrap;
}
.journey-meet-text {
  display: grid;
}
.journey-meet-text strong {
  font-size: calc(17px * var(--text-scale, 1));
}
.journey-meet-text small {
  font-size: calc(12px * var(--text-scale, 1));
}
.journey-meet-dots {
  display: flex;
  gap: 4px;
  font-size: calc(22px * var(--text-scale, 1));
}
.journey-meet .journey-button {
  min-height: 44px;
  padding: 4px 14px;
}
body[data-journey-meet] #vocabulary-buttons button:not(.journey-pick) {
  opacity: 0.28;
  pointer-events: none;
}
.journey-pick {
  outline: 4px solid var(--ad-blue-ink);
  outline-offset: 2px;
  animation: journey-glow 1.2s ease-in-out infinite;
}
.journey-pick.journey-picked {
  outline-color: var(--ad-mint-edge);
  animation: none;
}
@keyframes journey-glow {
  50% {
    outline-offset: 5px;
    box-shadow: 0 0 14px var(--ad-blue-edge);
  }
}
html[data-calm="true"] .journey-pick {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .journey-pick {
    animation: none;
  }
}
@media (max-width: 480px), (orientation: landscape) and (max-height: 500px) {
  .journey-meet {
    flex-wrap: nowrap;
    gap: 8px;
    padding: 4px 8px;
  }
  .journey-meet-text small,
  .journey-meet .journey-button small {
    display: none;
  }
  .journey-meet-text strong {
    font-size: calc(14px * var(--text-scale, 1));
  }
  .journey-meet-dots {
    font-size: calc(16px * var(--text-scale, 1));
  }
  .journey-meet .journey-button {
    padding: 2px 10px;
    white-space: nowrap;
  }
  .journey-meet .journey-button strong {
    font-size: calc(14px * var(--text-scale, 1));
  }
}

/* The phone Home keeps the adventure and suggestions compact above the four doors. */

/* The Adventures area: compact three-per-row tiles below 760 px (see the end of this file), three full routes per row above. */
#activity-hub[data-section="adventures"] .hub-grid {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 600px) {
  #activity-hub[data-section="adventures"] .hub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  /* In half a row the eggs go under the title instead of squeezing it. */
  #activity-hub[data-section="adventures"] .journey-card {
    grid-template-columns: auto minmax(0, 1fr);
  }
  #activity-hub[data-section="adventures"] .journey-card .journey-eggs {
    grid-column: 1 / -1;
    justify-self: start;
  }
  /* An odd last route takes the whole row. */
  #activity-hub[data-section="adventures"] .hub-grid > .hub-choice:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
#activity-hub[data-section="adventures"] .journey-card {
  margin-bottom: 0;
}
/* On an adventure card the heart goes to the right, away from the route icon. */
#activity-hub .hub-choice:has(> .journey-card) > .hub-fav {
  left: auto;
  right: 12px;
  top: 12px;
}
/* The title wraps before the heart instead of running underneath it. */
#activity-hub .hub-choice:has(> .hub-fav) > .journey-card .journey-card-copy {
  padding-right: 44px;
}
#activity-hub .hub-choice > .journey-card {
  flex: 1;
}
/* Phone Meet: the glowing outlines of neighbouring cards no longer overlap, and "Go to the game" reads as a quiet exit instead of competing with the cards. */
@media (max-width: 480px) {
  .journey-pick {
    outline-width: 3px;
    outline-offset: 0;
    animation-name: journey-glow-tight;
  }
  .journey-meet .journey-button {
    min-height: 44px;
    border-style: dashed;
    background: transparent;
    box-shadow: none;
  }
}
@keyframes journey-glow-tight {
  50% {
    outline-offset: 2px;
    box-shadow: 0 0 10px var(--ad-blue-edge);
  }
}
/* Adventure routes: three per row from 760 px (nine routes fill three full rows; at 600–759 px the cards are too narrow for three, so they stay two per row). */
@media (min-width: 760px) {
  #activity-hub[data-section="adventures"] .hub-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #activity-hub[data-section="adventures"] .hub-grid > .hub-choice:last-child:nth-child(odd) {
    grid-column: auto;
  }
}
/* Phones and small tablets: an adventure is a compact tile like every other submenu tile, three per row. It shows its
   picture, name, eggs and the icon of the next step; tapping it continues the route. */
@media (max-width: 759px), (orientation: landscape) and (min-width: 768px) and (min-height: 640px) {
  #activity-hub:is([data-section="adventures"], [data-section="favorites"]) .hub-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  #activity-hub:is([data-section="adventures"], [data-section="favorites"])
    .hub-grid
    > .hub-choice:last-child:nth-child(odd) {
    grid-column: auto;
  }
  #activity-hub:is([data-section="adventures"], [data-section="favorites"])
    .hub-choice
    .journey-card {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-content: start;
    gap: 4px;
    min-height: 0;
    height: 100%;
    padding: 26px 4px 8px;
    text-align: center;
    border-radius: 18px;
  }
  #activity-hub:is([data-section="adventures"], [data-section="favorites"]) .journey-icon {
    font-size: calc(36px * var(--text-scale, 1));
  }
  #activity-hub:is([data-section="adventures"], [data-section="favorites"]) .journey-card-copy {
    justify-items: center;
    padding: 0;
  }
  /* The one-word state stays for screen readers; the eggs already show progress. */
  #activity-hub:is([data-section="adventures"], [data-section="favorites"])
    .journey-card-copy
    > small {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  #activity-hub:is([data-section="adventures"], [data-section="favorites"]) .journey-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="adventures"], [data-section="favorites"]) .journey-copy small {
    display: none;
  }
  #activity-hub:is([data-section="adventures"], [data-section="favorites"])
    .journey-card
    .journey-eggs {
    justify-self: center;
    gap: 2px;
    font-size: calc(14px * var(--text-scale, 1));
  }
  #activity-hub:is([data-section="adventures"], [data-section="favorites"]) .journey-go {
    justify-content: center;
    width: 40px;
    min-height: 28px;
    margin-top: auto;
    padding: 2px 0;
  }
  #activity-hub:is([data-section="adventures"], [data-section="favorites"]) .journey-go-text,
  #activity-hub:is([data-section="adventures"], [data-section="favorites"]) .journey-go > b {
    display: none;
  }
  #activity-hub:is([data-section="adventures"], [data-section="favorites"])
    .hub-choice:has(> .journey-card)
    > .hub-fav {
    left: 4px;
    right: auto;
    top: 4px;
    width: 28px;
    height: 28px;
    font-size: calc(12.96px * var(--text-scale, 1));
  }
  /* The heart is drawn at 28 px; the invisible margin brings its touch target to 44 px. */
  #activity-hub:is([data-section="adventures"], [data-section="favorites"])
    .hub-choice:has(> .journey-card)
    > .hub-fav::after {
    inset: -8px;
  }
  #activity-hub:is([data-section="adventures"], [data-section="favorites"])
    .hub-choice:has(> .journey-card)
    > .journey-card
    .journey-card-copy {
    padding-right: 0;
  }
}
/* Small tablets (600–759 px) have the room for a larger picture and name in the same three-per-row tile. */
@media (min-width: 600px) and (max-width: 759px) {
  #activity-hub:is([data-section="adventures"], [data-section="favorites"]) .journey-icon {
    font-size: calc(48px * var(--text-scale, 1));
  }
  #activity-hub:is([data-section="adventures"], [data-section="favorites"]) .journey-copy strong {
    font-size: calc(15px * var(--text-scale, 1));
  }
  #activity-hub:is([data-section="adventures"], [data-section="favorites"])
    .journey-card
    .journey-eggs {
    font-size: calc(18px * var(--text-scale, 1));
  }
  #activity-hub:is([data-section="adventures"], [data-section="favorites"]) .journey-go {
    width: 52px;
    min-height: 34px;
  }
}
/* Favorites mixes topic tiles and adventure routes in one grid: every tile fills its whole cell, so a row is never lopsided. */
#activity-hub[data-section="favorites"] .hub-choice > :is(.journey-card, .hub-card) {
  margin-bottom: 0;
  height: 100%;
  box-sizing: border-box;
}
/* Phones only: the next-step icon is dropped from the compact tiles so they are not tall and narrow. It stays for
   screen readers; from 600 px up the tile keeps it. */
@media (max-width: 599px) {
  #activity-hub:is([data-section="adventures"], [data-section="favorites"]) .journey-go {
    position: absolute;
    width: 1px;
    min-height: 0;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  #activity-hub:is([data-section="adventures"], [data-section="favorites"])
    .hub-choice
    .journey-card {
    padding-bottom: 12px;
  }
}

.journey-copy .journey-title-short {
  display: none;
}
@media (max-width: 599px) {
  #activity-hub .journey-copy .journey-title-full {
    display: none;
  }
  #activity-hub .journey-copy .journey-title-short {
    display: block;
  }
  #activity-hub:is([data-section="adventures"], [data-section="favorites"]) .journey-copy strong {
    overflow-wrap: normal;
    hyphens: manual;
  }
}

/* Colors sticker pilot: the hero demonstrates the three colors before the same-word round. */
.color-learning {
  box-sizing: border-box;
  width: min(620px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow: auto;
  padding: 20px;
  border-radius: 24px;
  color: var(--ad-blue-ink);
}
.color-learning[open] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.color-learning::backdrop {
  background:
    radial-gradient(120% 80% at 50% 15%, rgb(140 195 250 / 0.42), transparent 70%),
    linear-gradient(rgb(60 100 160 / 0.5), rgb(28 50 90 / 0.78));
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  backdrop-filter: blur(10px) saturate(1.15);
}
.color-learning h2,
.color-learning p,
.color-learning-cards {
  grid-column: 1 / -1;
  margin: 0;
  text-align: center;
}
.color-learning small {
  display: block;
  font-size: 0.75em;
}
.color-learning-hero {
  position: static;
  inset: auto;
  grid-column: 1 / -1;
  justify-self: center;
  width: 120px;
  height: 132px;
}
.color-learning-picture {
  grid-column: 1 / -1;
  justify-self: center;
  width: 1.5em;
  font-size: 88px;
  line-height: 132px;
  height: 132px;
}
.color-learning-picture[hidden] {
  display: none;
}
.color-learning-hero[hidden] {
  display: none;
}
.color-learning-cards {
  display: grid;
  grid-template-columns: repeat(var(--cards, 3), minmax(0, 1fr));
  gap: 10px;
}
.color-learning-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  border-radius: 18px;
  color: var(--ad-blue-ink);
  font: inherit;
  cursor: pointer;
}
.color-learning-swatch {
  /* A square box, so an illustrated picture never stretches to the width of a joined emoji sequence. */
  display: block;
  width: 1.2em;
  height: 1.2em;
  font-size: 48px;
  line-height: 1.2;
}
.color-learning-card:focus-visible {
  outline: 4px solid var(--ad-blue-ink);
  outline-offset: 3px;
}
.color-learning-label {
  display: grid;
  align-self: end;
  width: 100%;
  text-align: center;
}
.color-learning-card .color-learning-translation {
  padding: 2px 4px 6px;
  background: var(--refresh-white);
  color: var(--refresh-ink);
  font-size: clamp(14px, 0.62em, 20px);
  line-height: 1.1;
}
.color-learning-card[aria-pressed="true"] .color-learning-translation {
  background: linear-gradient(var(--refresh-blue-top), var(--refresh-blue-deep));
  color: var(--refresh-white);
}
/* A small way out, top corner, for every size; the heading leaves it room. */
.color-learning-close {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-height: 0;
  padding: 0;
  border: 2px solid var(--ad-blue-edge);
  border-radius: 50%;
  background: var(--ad-blue-face);
  color: var(--ad-blue-ink);
  font: inherit;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
.color-learning-close::after {
  content: "";
  position: absolute;
  inset: -4px;
}
.color-learning-close:focus-visible {
  outline: 4px solid var(--ad-blue-ink);
  outline-offset: 2px;
}
.color-learning h2 {
  padding-inline: 48px;
}
/* Phones: the sheet takes the whole width, with a lighter frame and less padding. */
@media (max-width: 599px) {
  .color-learning {
    width: 100vw;
    max-width: 100vw;
    padding: 14px 12px 16px;
    border-radius: 0;
    border-inline-width: 0;
  }
  .color-learning[open] {
    gap: 10px;
  }
  .color-learning .journey-button {
    min-height: 56px;
    padding: 6px 10px;
    font-size: 20px;
  }
}
#practice-learn {
  flex-shrink: 0;
  width: 100%;
  min-height: 44px;
  padding: 6px 14px;
  border: 2px solid var(--ad-blue-edge);
  border-radius: 14px;
  background: var(--ad-blue-face);
  color: var(--ad-blue-ink);
  font: inherit;
}
body[data-practice-done] #practice-learn {
  display: none;
}
@media (orientation: landscape) and (min-width: 768px) and (min-height: 640px) {
  .color-learning {
    width: min(920px, calc(100vw - 40px));
    padding: 24px;
    font-size: 24px;
  }
  .color-learning-hero {
    width: 160px;
    height: 176px;
  }
  .color-learning-swatch {
    font-size: 96px;
  }
  .color-learning-card {
    padding: 16px 8px;
    font-size: 28px;
  }
  .color-learning .journey-button {
    min-height: 80px;
    font-size: 24px;
  }
  #practice-learn {
    min-height: 56px;
    font-size: 20px;
  }
}
@media (max-height: 500px) {
  .color-learning[open] {
    grid-template-columns: 100px 1fr 1fr;
  }
  .color-learning-hero {
    grid-area: 2 / 1 / 4 / 2;
    width: 90px;
    height: 99px;
  }
  .color-learning-cards {
    grid-area: 2 / 2 / 3 / 4;
  }
  .color-learning p {
    display: none;
  }
  .color-learning-card {
    padding: 4px;
    gap: 2px;
  }
  .color-learning-swatch {
    font-size: 32px;
  }
}

.color-learning-check {
  position: absolute;
  top: 4px;
  right: 8px;
  color: var(--ad-mint-ink);
  font-size: 1.2em;
  font-weight: 900;
}
.color-learning-play:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Learn sheet redesign (same icons): a sky-and-meadow sheet, the title on a golden sign with its hint on a
   tab below, the picture beside a speech bubble with the word, cards with a name band (blue when chosen)
   and big blue Listen / green Play pills. */
.color-learning {
  border: 3px solid var(--refresh-line-strong);
  background:
    radial-gradient(60% 22% at 15% 104%, var(--refresh-a8dc8a) 99%, transparent 100%),
    radial-gradient(60% 20% at 88% 106%, var(--refresh-93cf74) 99%, transparent 100%),
    linear-gradient(var(--refresh-bfe3ff), var(--refresh-eaf6ff) 55%, var(--refresh-f4fbf2));
}
.color-learning h2 {
  justify-self: center;
  width: fit-content;
  margin-top: 4px;
  padding: 6px 26px;
  border: 3px solid var(--refresh-e09b2d);
  border-radius: 18px;
  background: linear-gradient(var(--refresh-ffe1a0), var(--refresh-f5b94e));
  box-shadow: 0 4px 0 var(--refresh-c98420);
  color: var(--refresh-ink);
}
/* The hint is a whole pill under the sign (not a tab tucked behind it), so neither looks cut off. */
.color-learning > p#color-learning-hint {
  justify-self: center;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: -2px;
  padding: 5px 18px;
  border: 2px solid var(--refresh-line);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.92);
  box-shadow: 0 3px 0 var(--refresh-cfe2f2);
  font-weight: 700;
}
/* The way out matches the Listen pill: glossy blue disc, white rim, ring and base shadow. */
.color-learning .color-learning-close {
  top: 12px;
  inset-inline-end: 12px;
  width: 44px;
  height: 44px;
  border: 3px solid var(--refresh-white);
  background: linear-gradient(var(--refresh-blue-high), var(--refresh-blue-low));
  box-shadow:
    0 0 0 2px var(--refresh-line-strong),
    0 3px 0 var(--refresh-blue-base);
  color: var(--refresh-white);
  font-size: 20px;
  text-shadow: 0 1px 0 rgb(20 70 120 / 0.4);
}
.color-learning .color-learning-close:active {
  transform: translateY(2px);
  box-shadow:
    0 0 0 2px var(--refresh-line-strong),
    0 1px 0 var(--refresh-blue-base);
}
.color-learning-word {
  display: none;
}
@media (min-height: 501px) {
  .color-learning-hero,
  .color-learning-picture {
    grid-column: 1;
    justify-self: end;
  }
  .color-learning > .color-learning-word {
    display: flex;
    grid-column: 2;
    align-self: center;
    justify-self: start;
    align-items: center;
    gap: 12px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px 18px;
    border: 3px solid var(--refresh-line-strong);
    border-radius: 24px 24px 24px 6px;
    background: var(--refresh-white);
    box-shadow: 0 4px 0 var(--refresh-cfe2f2);
    color: var(--refresh-ink);
    text-align: left;
    cursor: pointer;
  }
  .color-learning-word strong {
    font-size: calc(34px * var(--text-scale, 1));
    line-height: 1.1;
    overflow-wrap: break-word;
    white-space: nowrap;
  }
  .color-learning-word .color-learning-translation {
    font-size: clamp(18px, 0.7em, 24px);
    font-style: normal;
    line-height: 1.1;
  }
  .color-learning-word-speaker {
    display: grid;
    place-items: center;
    width: 40px;
    height: 32px;
    border: 2px solid var(--refresh-line-strong);
    border-radius: 999px;
    background: var(--refresh-sky-soft);
    font-size: 18px;
  }
}
.color-learning-card {
  overflow: hidden;
  padding: 10px 0 0;
  border: 3px solid var(--refresh-line);
  background: linear-gradient(var(--refresh-white), var(--refresh-sky-soft));
  box-shadow: 0 4px 0 var(--refresh-cfe2f2);
}
.color-learning-card strong {
  align-self: end;
  width: 100%;
  padding: 6px 4px;
  background: var(--refresh-white);
  color: var(--refresh-ink);
}
.color-learning-card[aria-pressed="true"] {
  border-color: var(--refresh-ffd34d);
  box-shadow:
    0 0 0 4px rgb(255 211 77 / 0.55),
    0 4px 0 var(--refresh-e0b23a);
}
.color-learning-card[aria-pressed="true"] strong {
  background: linear-gradient(var(--refresh-blue-top), var(--refresh-blue-deep));
  color: var(--refresh-white);
}
.color-learning-check:not(:empty) {
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--refresh-2f9e6e);
  color: var(--refresh-white);
  font-size: 16px;
}
.color-learning .color-learning-repeat {
  border: 3px solid var(--refresh-white);
  border-radius: 999px;
  background: linear-gradient(var(--refresh-blue-high), var(--refresh-blue-low));
  color: var(--refresh-white);
  box-shadow:
    0 0 0 2px var(--refresh-line-strong),
    0 4px 0 var(--refresh-blue-base);
}
.color-learning .color-learning-play {
  border: 3px solid var(--refresh-white);
  border-radius: 999px;
  background: linear-gradient(var(--refresh-green-high), var(--refresh-green-low));
  color: var(--refresh-white);
  box-shadow:
    0 0 0 2px var(--refresh-green-rim),
    0 4px 0 var(--refresh-green-base);
}
.color-learning .color-learning-all {
  grid-column: 1 / -1;
  min-height: 48px;
  border: 3px solid var(--ad-blue-edge);
  border-radius: 999px;
  background: var(--refresh-white);
  color: var(--ad-blue-ink);
}
.color-learning .color-learning-play:disabled {
  opacity: 0.55;
}
@media (max-width: 599px) {
  .color-learning[open] {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 10px;
    padding-top: 60px;
  }
  .color-learning-close {
    top: 10px;
  }
  .color-learning h2 {
    max-width: 100%;
    padding-inline: 18px;
    box-sizing: border-box;
  }
  .color-learning-word strong {
    font-size: calc(24px * var(--text-scale, 1));
  }
  .color-learning > .color-learning-word {
    justify-self: stretch;
    gap: 8px;
    padding: 8px 10px 8px 14px;
  }
  .color-learning-word-speaker {
    flex: none;
    width: 34px;
    margin-inline-start: auto;
  }
}
html[data-appearance="dark"] .color-learning {
  background: var(--refresh-1f3446);
}

/* Tablet landscape: four route tiles per row use the room the compact phone tile leaves free, so a child can see and tap them. */
@media (orientation: landscape) and (min-width: 768px) and (min-height: 640px) {
  #activity-hub[data-section="adventures"] .hub-choice .journey-card {
    min-height: 150px;
    padding-top: 30px;
    gap: 6px;
  }
  #activity-hub[data-section="adventures"] .journey-icon {
    font-size: calc(52px * var(--text-scale, 1));
  }
  #activity-hub[data-section="adventures"] .journey-copy strong {
    font-size: calc(17px * var(--text-scale, 1));
  }
  #activity-hub[data-section="adventures"] .journey-card .journey-eggs {
    font-size: calc(20px * var(--text-scale, 1));
  }
  #activity-hub[data-section="adventures"] .journey-go {
    width: 64px;
    min-height: 40px;
  }
}

.journey-study {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 20px;
}
.journey-practice {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  color: #687d91;
  font-weight: 800;
}
.journey-practice[data-done="false"] {
  filter: grayscale(1);
  opacity: 0.65;
}
.journey-practice[data-done="true"] {
  color: #216647;
}
.journey-study[data-done="false"] {
  filter: grayscale(1);
  opacity: 0.65;
}
.journey-study[data-done="true"]::after {
  content: "✓" / "";
  position: absolute;
  inset: auto -3px 0 auto;
  border-radius: 50%;
  padding: 1px 3px;
  background: #216647;
  color: white;
  font: 800 0.55em/1.1 sans-serif;
}
@media (orientation: landscape) and (min-width: 768px) and (min-height: 640px) {
  .journey-study,
  .journey-practice {
    min-width: 40px;
    min-height: 40px;
  }
}

/* Leave room for both rows and the lesson actions when there are more than four cards. */
.color-learning[open]:has(.color-learning-card:nth-child(5)) {
  gap: 8px;
  padding-block: 12px;
}
.color-learning:has(.color-learning-card:nth-child(5)) h2 {
  font-size: clamp(18px, 1.15em, 28px);
  line-height: 1.12;
}
.color-learning:has(.color-learning-card:nth-child(5)) .color-learning-picture {
  height: clamp(48px, 9dvh, 76px);
  font-size: clamp(36px, 7dvh, 60px);
  line-height: clamp(48px, 9dvh, 76px);
}
.color-learning:has(.color-learning-card:nth-child(5)) .color-learning-card {
  gap: 2px;
  padding-block-start: 4px;
  font-size: clamp(13px, 0.85em, 20px);
}
.color-learning:has(.color-learning-card:nth-child(5)) .color-learning-swatch {
  font-size: clamp(24px, 7dvh, 56px);
}
.color-learning:has(.color-learning-card:nth-child(5)) .color-learning-card strong {
  padding-block: 3px;
}
.color-learning:has(.color-learning-card:nth-child(5)) .journey-button {
  min-height: 44px;
}