/* Colección de stickers y sus diálogos. */
/* Album: stars from challenges unlock accessories to wear and a sticker per topic. */
/* Missions uses the game blue; gold stays for stars and rewards. */
#album-dialog {
  width: min(720px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0 0 4px;
  border: 1px solid #c6dced;
  border-radius: 26px;
  background: #f8fcff;
  color: var(--color-ink-control);
  box-shadow: 0 18px 70px #24415b35;
  overflow: auto;
}

.album-heading {
  position: sticky;
  top: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 4px 12px;
  padding: 16px 20px 8px;
  background: #f8fcff;
}
.album-heading-text {
  min-width: 0;
}
/* On the narrowest phones the title drops below the back pill instead of running into the hero. */
.album-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.album-intro {
  margin-top: 8px;
  font-size: calc(14px * var(--text-scale, 1));
  line-height: 1.35;
}
.album-intro p {
  margin: 0;
}
.album-today-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 12px;
  border-radius: 999px;
  background: var(--ad-soft);
  color: var(--ad-ink-soft);
  font-weight: 700;
}
.album-today-chip strong {
  color: var(--ad-ink-deep);
  font-size: calc(16px * var(--text-scale, 1));
}
#album-dialog .album-info {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #285e8c;
  color: var(--ad-on-accent);
  font:
    italic 800 17px/1 Georgia,
    serif;
  box-shadow: none;
}
#album-dialog .album-info[aria-expanded="true"] {
  background: #183f60;
}
.album-info-text {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 14px;
  background: var(--ad-soft);
  font-size: calc(13px * var(--text-scale, 1));
}
.album-info-text[hidden] {
  display: none;
}
html[data-appearance="dark"] .album-today-chip {
  background: var(--ad-soft);
  color: var(--ad-ink-soft);
}
html[data-appearance="dark"] .album-today-chip strong {
  color: var(--ad-ink-deep);
}
html[data-appearance="dark"] #album-dialog .album-info {
  background: #5f8fbb;
}
html[data-appearance="dark"] .album-info-text {
  background: var(--ad-soft);
  color: #e0edf6;
}
/* The back action stays beside the title, leaving the right column for the hero. */
.album-tools {
  display: flex;
  align-self: stretch;
}
.album-preview {
  position: static;
  display: block;
  width: 180px;
  height: 210px;
  align-self: center;
  object-fit: contain;
  border: 1px solid var(--color-line-practice);
  border-radius: 20px;
  background: radial-gradient(ellipse at center, #fff, #e3f0fd);
}
.album-heading h2 {
  margin: 0;
  font-size: calc(22px * var(--text-scale, 1));
}
.album-heading h2 small {
  font-size: calc(14px * var(--text-scale, 1));
  font-weight: 500;
  color: var(--ad-ink-muted);
}
.album-total-row {
  margin: 4px 0 0;
  color: var(--ad-ink-muted);
  font-size: calc(13px * var(--text-scale, 1));
}
.album-total {
  font-size: calc(20px * var(--text-scale, 1));
}
.album-meter {
  display: flex;
  flex: 1;
  min-width: 0;
}
/* One piece per star: it fills with gold as the star is earned. */
.album-piece {
  flex: 1;
  min-width: 0;
  border: 2px solid #e5b84a;
  background: linear-gradient(
    90deg,
    #ffc93c calc(var(--fill, 0) * 100%),
    #f6ead0 calc(var(--fill, 0) * 100%)
  );
}
.album-goal {
  margin: 6px 20px 0;
  font-size: calc(13px * var(--text-scale, 1));
  font-weight: 700;
  color: #527594;
}
#album-dialog section {
  padding: 6px 20px 8px;
}
/* Compact Missions by 5% without shrinking its labels or pictures. */
#album-dialog #profile-panel-missions > section {
  padding-block: 4.7px 6.7px;
}
#album-dialog h3 {
  margin: 12px 0 8px;
  font-size: calc(16px * var(--text-scale, 1));
}
#album-dialog h3 small {
  display: block;
  font-size: calc(12px * var(--text-scale, 1));
  font-weight: 400;
  color: var(--ad-ink-muted);
}
.album-sticker-count,
.album-wearable-count {
  font-size: calc(13px * var(--text-scale, 1));
  color: var(--ad-ink-muted);
}
.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
}
#album-dialog .album-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 86px;
  padding: 8px 4px;
  border: 1px solid var(--color-line-practice);
  border-radius: 16px;
  background: var(--color-surface);
  color: inherit;
  box-shadow: 0 3px 0 #dce9f2;
  transition: transform 0.12s ease;
}
#album-dialog .album-tile:active {
  transform: translateY(2px) scale(0.97);
  box-shadow: 0 1px 0 #dce9f2;
}
.album-tile-icon {
  font-size: 34px;
  line-height: 1.1;
}
.album-tile small {
  max-width: 100%;
  font-size: calc(11px * var(--text-scale, 1));
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
}
#album-dialog .album-tile[data-unlocked="false"] {
  border-style: dashed;
  background: var(--ad-surface-tint);
  color: var(--ad-ink-muted);
  box-shadow: none;
}
.album-wearables .album-tile[data-unlocked="false"] .album-tile-icon {
  filter: grayscale(1);
  opacity: 0.35;
}
.album-stickers .album-tile[data-unlocked="false"] .album-tile-icon {
  filter: grayscale(1);
  opacity: 0.4;
}
#album-dialog .album-tile[aria-pressed="true"] {
  border: 2px solid #8ebfa7;
  background: var(--ad-tint-mint);
  box-shadow: 0 3px 0 #c6e4cf;
}
.album-footer[hidden] {
  display: none;
}
.album-footer {
  display: flex;
  justify-content: flex-end;
  padding: 8px 20px 14px;
}
#album-dialog :is(button):focus-visible {
  outline: 3px solid #8ab5ee;
  outline-offset: 3px;
}
html[data-appearance="dark"] #album-dialog,
html[data-appearance="dark"] .album-heading {
  background: #21394f;
  color: #e0edf6;
  border-color: #526e88;
}
html[data-appearance="dark"] :is(.album-heading h2, #album-dialog h3, .album-goal, .album-total) {
  color: #e0edf6;
}
html[data-appearance="dark"]
  :is(
    .album-heading h2 small,
    #album-dialog h3 small,
    .album-total-row,
    .album-sticker-count,
    .album-wearable-count
  ) {
  color: #b2c8d9;
}
html[data-appearance="dark"] .album-preview {
  border-color: #526e88;
  background: radial-gradient(ellipse at center, #2f4c66, #21394f);
}
html[data-appearance="dark"] #album-dialog .album-tile {
  background: #2b455c;
  border-color: #526e88;
  color: #e0edf6;
  box-shadow: 0 3px 0 #162c40;
}
html[data-appearance="dark"] #album-dialog .album-tile[data-unlocked="false"] {
  background: var(--ad-surface-tint);
  color: var(--ad-ink-muted);
  box-shadow: none;
}
html[data-appearance="dark"] #album-dialog .album-tile[aria-pressed="true"] {
  background: var(--ad-tint-mint);
  border-color: #76ae92;
}
@media (max-width: 520px) {
  .album-preview {
    width: 120px;
    height: 140px;
    border-radius: 16px;
  }

  .album-intro {
    font-size: calc(13px * var(--text-scale, 1));
  }

  .album-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  #album-dialog .album-tile {
    min-height: 72px;
    border-radius: 13px;
  }

  .album-tile-icon {
    font-size: 28px;
  }

  .album-heading,
  #album-dialog section {
    padding-inline: 14px;
  }

  .album-goal {
    margin-inline: 14px;
  }
}

/* The whole pending mission plays; its small blue badge follows the app's soft button style. */
.album-stickers .album-tile[data-unlocked="false"] {
  position: relative;
}
.album-stickers .album-tile[data-unlocked="false"]::after {
  content: "▶\FE0E";
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  padding-left: 1px;
  border: 1.5px solid var(--ad-blue-edge);
  border-radius: 8px;
  background: linear-gradient(var(--ad-blue-top), var(--ad-blue-face));
  color: var(--ad-blue-ink);
  font-size: 12px;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 #ffffffc0,
    0 2px 0 var(--ad-blue-base);
}
/* Compact screens: Spanish glosses go and the mission grid tightens to three columns. */
@media (max-width: 599px), (max-width: 850px) and (max-height: 500px) {
  #album-dialog [lang="es"]:not(.trophy-guide *) {
    display: none;
  }

  #album-dialog .album-stickers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  #album-dialog .album-stickers .album-tile {
    min-height: 64px;
    padding: 6px 4px;
    gap: 3px;
    border-radius: 12px;
  }

  #album-dialog .album-stickers .album-tile-icon {
    font-size: 22px;
  }

  #album-dialog .album-stickers .album-tile[data-unlocked="false"]::after {
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    font-size: 11px;
  }
}

/* Give the hero the space previously occupied by the right-hand close button. */
@media (max-width: 599px), (max-width: 850px) and (max-height: 500px) {
  .album-heading {
    gap: 8px;
  }
  .album-title-row {
    gap: 6px;
  }
  .album-heading h2 {
    font-size: calc(18px * var(--text-scale, 1));
  }
  .album-today-chip {
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 6px;
    font-size: calc(12px * var(--text-scale, 1));
  }
  .album-today-chip strong {
    font-size: calc(14px * var(--text-scale, 1));
  }
  .album-today-chip > [aria-hidden="true"] {
    display: none;
  }
  #album-dialog .album-info {
    width: 24px;
    height: 24px;
  }
  .album-preview {
    width: 120px;
    height: 140px;
  }
}
@media (max-width: 850px) and (max-height: 500px) {
  .album-preview {
    width: 104px;
    height: 122px;
  }
}

/* Keep the collection visible on landscape phones and tablets. */
@media (orientation: landscape) and (max-height: 900px) {
  .album-preview {
    width: clamp(72px, 12vh, 108px);
    height: clamp(84px, 14vh, 126px);
    border-radius: 14px;
  }
}

/* My profile: hero, colour and name choices reuse the album tiles. */
.album-tools {
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.profile-caption {
  display: grid;
  margin: 0;
  text-align: center;
  line-height: 1.2;
}
.profile-hero-name {
  font-size: calc(16px * var(--text-scale, 1));
}
.profile-hero-species {
  font-size: calc(11px * var(--text-scale, 1));
  color: var(--ad-ink-muted);
}
.profile-heroes,
.profile-colors,
.profile-names {
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
}
#album-dialog .profile-hero,
#album-dialog .profile-color,
#album-dialog .profile-name {
  min-height: 70px;
}
.profile-color .album-tile-icon,
.profile-original .album-tile-icon {
  width: 30px;
  height: 30px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--swatch, #eef5fb);
  box-shadow: 0 0 0 1px #b9cfe0;
  font-size: 18px;
  line-height: 26px;
  color: #527594;
}
html[data-appearance="dark"] .profile-hero-species {
  color: var(--ad-ink-muted);
}
@media (max-width: 520px) {
  .profile-heroes,
  .profile-colors,
  .profile-names {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Next prize: one card above every collection, so each star visibly moves toward something. */
.album-next {
  display: grid;
  margin: 10px 20px 4px;
  border: 1px solid #f2d58a;
  border-radius: 18px;
  background: linear-gradient(135deg, #fffaf0, #fff3d6);
}
.album-next-top {
  align-items: center;
  gap: 10px;
}
.album-level-now {
  flex: none;
  padding: 4px 10px;
  border-radius: 12px;
  background: #365d80;
  color: var(--ad-on-accent);
  font-size: calc(16px * var(--text-scale, 1));
  font-weight: 800;
}
.album-next-target {
  display: grid;
  flex: none;
  justify-items: center;
}
.album-next-level {
  font-size: calc(11px * var(--text-scale, 1));
  font-weight: 800;
  color: var(--ad-ink-gold);
}
.album-next-icon {
  display: grid;
  place-items: center;
  border: 2px dashed #e5b84a;
  border-radius: 50%;
  background: #fff;
}
.album-next .album-goal {
  margin: 0;
  color: var(--ad-ink-gold);
  text-align: center;
}
.profile-count {
  font-size: calc(13px * var(--text-scale, 1));
  color: var(--ad-ink-muted);
}
.profile-hero .album-tile-icon,
.profile-color .album-tile-icon {
  transition: filter 0.2s ease;
}
.profile-names .album-tile[data-unlocked="false"] .album-tile-icon {
  filter: grayscale(1);
  opacity: 0.35;
}
/* A locked color keeps its real swatch, softened and badged with a lock, and shows its price as a chip. */
.profile-colors .album-tile[data-unlocked="false"] .album-tile-icon {
  position: relative;
  opacity: 1;
  filter: saturate(0.6) brightness(1.05);
}
.profile-colors .album-tile[data-unlocked="false"] .album-tile-level {
  padding: 1px 8px;
  border-radius: 999px;
  background: #fff1c7;
  color: var(--ad-ink-gold);
  font-weight: 800;
}
html[data-appearance="dark"] .profile-colors .album-tile[data-unlocked="false"] .album-tile-level {
  background: #4a422b;
  color: var(--ad-ink-gold);
}
html[data-appearance="dark"] .album-next {
  border-color: #6b5a2c;
  background: #2d2818;
}
html[data-appearance="dark"] .album-next .album-goal {
  color: #e8d49b;
}
@media (max-width: 520px) {
  .album-next-icon {
    width: 42px;
    height: 42px;
    font-size: 24px;
  }
}

/* A new sticker announces itself above whatever game just ended. */
.sticker-toast {
  position: fixed;
  top: 16px;
  left: 50%;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 32px);
  padding: 10px 16px;
  border: 2px solid #e5b84a;
  border-radius: 18px;
  background: var(--ad-tint-cream);
  color: #5c4310;
  box-shadow: 0 6px 18px rgb(60 40 0 / 25%);
  transform: translateX(-50%);
  pointer-events: none;
  animation: sticker-toast-in 0.35s ease-out;
}
.sticker-toast > span:first-child {
  font-size: 30px;
}
.sticker-toast small {
  display: block;
  font-size: calc(11px * var(--text-scale, 1));
  color: #8a6d2c;
}
@keyframes sticker-toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, -12px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sticker-toast {
    animation: none;
  }
}

/* Shop: a price in gold means you can buy it now; the offer bar confirms the purchase. */
#album-dialog .album-tile[data-affordable="true"] .album-tile-label {
  font-weight: 800;
  color: #8a6212;
}
.album-offer .album-offer-name {
  display: block;
  color: var(--ad-ink-blue);
}
.album-offer .album-offer-price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  color: var(--ad-ink-gold);
}
.album-offer-money {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 2px 0.5em;
  border: 1px solid var(--ad-line-gold);
  border-radius: 999px;
  background: var(--ad-tint-gold);
  white-space: nowrap;
}
.album-offer .album-offer-price .album-offer-amount {
  font-size: 1.15em;
  font-variant-numeric: tabular-nums;
}
.album-offer-coin {
  display: inline-grid;
  place-items: center;
  inline-size: 1.35em;
  block-size: 1.35em;
  border: 1px solid var(--ad-gold-ink);
  border-radius: 50%;
  background: linear-gradient(var(--ad-gold-top), var(--ad-gold-face));
  color: var(--ad-gold-ink);
  line-height: 1;
}
.album-offer-cart {
  inline-size: 1.6em;
  block-size: 1.6em;
  padding: 0.18em;
  border-radius: 50%;
  background: var(--refresh-white);
  object-fit: contain;
  flex: none;
}
html[data-appearance="dark"] #album-dialog .album-tile[data-affordable="true"] .album-tile-label {
  color: #f0cf7a;
}

/* Shop offer bar: same strip as the sticker goal, with its own classes so the two never collide. */
.album-offer {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 14px;
  padding: 10px 12px;
  border: 2px solid #9cc3ea;
  border-radius: 18px;
  background: var(--ad-soft);
  color: inherit;
  box-shadow: 0 3px 0 var(--ad-edge);
}
.album-offer[hidden] {
  display: none;
}
.album-offer-icon {
  font-size: 36px;
  line-height: 1;
}
.album-offer-text {
  flex: 1;
  min-width: 0;
}
.album-offer-text strong,
.album-offer-text small {
  display: block;
  overflow-wrap: anywhere;
}
.album-offer-text strong {
  font-size: calc(15px * var(--text-scale, 1));
}
.album-offer-text small {
  font-size: calc(12px * var(--text-scale, 1));
}
#album-dialog .album-offer-buy {
  min-height: 52px;
  padding: 8px 18px;
  border: 1px solid #28664f;
  border-radius: 14px;
  background: var(--color-action-confirm);
  color: var(--color-surface);
  font-size: calc(17px * var(--text-scale, 1));
  font-weight: 800;
  box-shadow: 0 3px 0 #20553f;
}
/* The second, full-width action: not now. */
#album-dialog .album-offer-cancel {
  flex-basis: 100%;
  min-height: 44px;
  padding: 6px 12px;
  border: 2px solid var(--ad-blue-edge);
  border-radius: 14px;
  background: var(--ad-blue-top);
  color: var(--ad-blue-ink);
  font-size: calc(15px * var(--text-scale, 1));
  text-align: start;
}
#album-dialog .album-offer-cancel[hidden] {
  display: none;
}
html[data-appearance="dark"] .album-offer {
  background: var(--ad-soft);
  border-color: #5f8fbb;
  color: #d3e7fa;
  box-shadow: 0 3px 0 var(--ad-edge);
}
@media (max-width: 520px) {
  .album-offer {
    margin-inline: 8px;
    gap: 8px;
  }
  .album-offer-icon {
    font-size: 28px;
  }
}
@media (max-width: 599px), (max-width: 850px) and (max-height: 500px) {
  #album-dialog .album-offer {
    gap: 6px;
    margin: 0 8px 4px;
    padding: 8px;
    border: 1px solid #9cc3ea;
    border-radius: 12px;
    box-shadow: 0 2px 0 #cfe2f5;
  }

  #album-dialog .album-offer-icon {
    flex: 0 0 24px;
    font-size: 22px;
  }

  #album-dialog .album-offer-buy {
    flex: none;
    min-height: 36px;
    padding: 6px 10px;
    border-radius: 10px;
    font-size: calc(13px * var(--text-scale, 1));
    box-shadow: 0 2px 0 #20553f;
  }

  #album-dialog .album-offer-cancel {
    min-height: 36px;
    font-size: calc(13px * var(--text-scale, 1));
  }
}

/* The level that opened a hero, under its name. */
.album-tile-level {
  font-size: calc(10px * var(--text-scale, 1));
  font-weight: 700;
  line-height: 1;
  color: var(--ad-ink-muted);
}
html[data-appearance="dark"] .album-tile-level {
  color: var(--ad-ink-muted);
}

/* Shop offer: the prize and its price on top, then two equal buttons side by side (Not now, Buy). */
#album-dialog .album-offer .album-offer-text {
  flex: 1;
  min-width: 0;
}
#album-dialog .album-offer .album-offer-actions {
  display: grid;
  flex: 1 0 100%;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
#album-dialog .album-offer .album-offer-actions > button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 150px;
  min-height: 48px;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: calc(16px * var(--text-scale, 1));
  font-weight: 800;
  text-align: center;
}
#album-dialog .album-offer .album-offer-actions > button[hidden] {
  display: none;
}
/* With no Buy button (not enough stars) the remaining one takes the whole row. */
#album-dialog .album-offer .album-offer-actions:has(> [hidden]) {
  grid-template-columns: 1fr;
}
/* The app's own action pills: Buy is the green primary of the results card, Not now its light secondary. */
#album-dialog .album-offer .album-offer-cancel {
  border: 3px solid var(--refresh-line-strong);
  background: linear-gradient(var(--refresh-white), var(--refresh-sky-soft));
  color: var(--refresh-ink);
  box-shadow: inset 0 0 0 2px var(--refresh-white), 0 4px 0 var(--refresh-line-strong);
}
#album-dialog .album-offer .album-offer-buy {
  border: 2px solid var(--refresh-26803a);
  background: linear-gradient(var(--refresh-4cbf5a), var(--refresh-1f6a30));
  color: var(--refresh-white);
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.3), 0 4px 0 var(--refresh-1f6a30);
}
#album-dialog .album-offer .album-offer-actions > button:active {
  transform: translateY(3px);
  box-shadow: none;
}
/* Tablet and responsive: a smaller hero and a tighter heading so the collections start higher. */
@media (max-width: 1100px) and (min-height: 501px) {
  .album-heading {
    gap: 2px 10px;
    padding: 10px 16px 4px;
  }
  .album-preview {
    width: 104px;
    height: 122px;
    border-radius: 14px;
  }
  .album-intro {
    margin-top: 4px;
  }
  .album-today-chip {
    padding-block: 2px;
  }
  .album-tools {
    gap: 2px;
  }
  .profile-hero-name {
    font-size: calc(14px * var(--text-scale, 1));
  }
  .profile-hero-species {
    font-size: calc(10px * var(--text-scale, 1));
  }
  #album-dialog .profile-hero,
  #album-dialog .profile-color,
  #album-dialog .profile-name {
    min-height: 60px;
  }
}

/* Three tabs: Missions, the stickers that keep a child learning; My hero, where their stars are spent; and Trophies. */
.profile-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 20px 2px;
  padding: 4px;
  border-radius: 18px;
  background: var(--ad-soft);
}
#album-dialog .profile-tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 8px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--ad-ink-soft);
  font-size: calc(16px * var(--text-scale, 1));
  font-weight: 800;
  box-shadow: none;
}
#album-dialog .profile-tabs button[aria-selected="true"] {
  background: var(--color-surface);
  color: var(--ad-ink-steel);
  box-shadow: 0 2px 0 var(--ad-edge);
}
.profile-tabs small {
  font-size: calc(12px * var(--text-scale, 1));
  font-weight: 500;
}
#album-dialog [role="tabpanel"][hidden],
#album-dialog section[hidden],
.album-stickers[hidden] {
  display: none;
}
/* The next three missions are the biggest thing on the page: one tap and the child is playing. */
.mission-next {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
#album-dialog .mission-card {
  display: grid;
  align-content: center;
  min-width: 0;
  border: 2px solid #e5b84a;
  background: linear-gradient(#fffaf0, #fff3d6);
  color: #6b4e10;
  box-shadow: 0 4px 0 #e8cd8a;
}
#album-dialog .mission-card:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #e8cd8a;
}
.mission-card strong {
  max-width: 100%;
  font-size: calc(14px * var(--text-scale, 1));
  line-height: 1.2;
  overflow-wrap: break-word;
}
.mission-prize {
  padding: 2px 10px;
  border-radius: 999px;
  background: #28664f;
  color: var(--ad-on-accent);
  font-size: calc(13px * var(--text-scale, 1));
  font-weight: 800;
  white-space: nowrap;
}
.mission-total {
  height: 10px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: #dce9f4;
  overflow: hidden;
}
.mission-total span,
.mission-group-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffc93c, #ffb01f);
}
.mission-groups {
  display: grid;
  gap: 8px;
}
.mission-group {
  border: 1px solid var(--color-line-practice);
  border-radius: 18px;
  background: var(--color-surface);
  overflow: hidden;
}
.mission-group[data-complete="true"] {
  border-color: #e5b84a;
}
#album-dialog .mission-group-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "icon name count chevron"
    "icon bar bar chevron";
  align-items: center;
  gap: 4px 10px;
  width: 100%;
  min-height: 60px;
  padding: 8px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ad-ink-steel);
  text-align: left;
  box-shadow: none;
}
.mission-group-head .album-tile-icon {
  grid-area: icon;
  font-size: 30px;
}
.mission-group-name {
  grid-area: name;
  font-size: calc(15px * var(--text-scale, 1));
  font-weight: 800;
}
.mission-group-name small {
  font-size: calc(12px * var(--text-scale, 1));
  font-weight: 500;
  color: var(--ad-ink-muted);
}
.mission-group-count {
  grid-area: count;
  font-size: calc(14px * var(--text-scale, 1));
  font-weight: 800;
  color: var(--ad-ink-muted);
}
.mission-group-bar {
  grid-area: bar;
  display: block;
  height: 8px;
  border-radius: 999px;
  background: #dce9f4;
  overflow: hidden;
}
.mission-group-chevron {
  grid-area: chevron;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid #66849c;
  border-bottom: 2.5px solid #66849c;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
[aria-expanded="true"] > .mission-group-chevron {
  transform: rotate(-135deg);
}
/* Standard accordion: the row animates 0fr → 1fr, so the browser measures the content and the open state is never stale. */
.mission-group-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
[aria-expanded="true"] + .mission-group-panel {
  grid-template-rows: 1fr;
}
.mission-group-panel-body {
  min-height: 0;
  overflow: hidden;
}
.mission-group-panel > .album-stickers {
  padding: 2px 10px 12px;
}
@media (prefers-reduced-motion: reduce) {
  .mission-group-panel {
    transition: none;
  }
}
html[data-appearance="dark"] .profile-tabs {
  background: var(--ad-soft);
}
html[data-appearance="dark"] #album-dialog .profile-tabs button {
  color: var(--ad-ink-soft);
}
html[data-appearance="dark"] #album-dialog .profile-tabs button[aria-selected="true"] {
  background: #35506a;
  color: var(--ad-ink-steel);
  box-shadow: 0 2px 0 var(--ad-edge);
}
html[data-appearance="dark"] #album-dialog .mission-card {
  border-color: #c9a14a;
  background: #2d2818;
  color: #e8d49b;
  box-shadow: 0 4px 0 #6b5a2c;
}
html[data-appearance="dark"] :is(.mission-total, .mission-group-bar) {
  background: #35506a;
}
html[data-appearance="dark"] .mission-group {
  border-color: #3d5b73;
  background: #223a4f;
}
html[data-appearance="dark"] #album-dialog .mission-group-head {
  color: var(--ad-ink-steel);
}
html[data-appearance="dark"] :is(.mission-group-name small, .mission-group-count) {
  color: #b2c8d9;
}
@media (max-width: 520px) {
  .profile-tabs {
    margin-inline: 14px;
  }
  .mission-next {
    gap: 6px;
  }
  #album-dialog .mission-card {
    border-radius: 16px;
  }
  .mission-card strong {
    font-size: calc(13px * var(--text-scale, 1));
  }
}

/* The goal heads the card; both level markers share the progress bar’s center line. */
.album-next {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  margin-block: 8px 0;
  padding: 6px 12px;
}
.album-next-top {
  display: contents;
}
.album-level-now,
.album-next-target {
  grid-row: 2;
}
.album-level-now {
  grid-column: 1;
}
.album-next-target {
  grid-column: 3;
  grid-auto-flow: column;
  align-items: center;
  gap: 4px;
}
.album-next-icon {
  width: 40px;
  height: 40px;
  font-size: 24px;
}
.album-meter {
  grid-area: 2 / 2;
  height: 22px;
  gap: 3px;
}
.album-piece {
  border-width: 1.5px;
  border-radius: 6px;
}
.album-next .album-goal {
  grid-area: 1 / 1 / 2 / -1;
  font-size: calc(13px * var(--text-scale, 1));
  line-height: 1.2;
}
.profile-tabs {
  margin-block: 8px 0;
}
#album-dialog .profile-tabs button {
  min-height: 40px;
  padding-block: 2px;
}
.profile-tabs .album-tile-icon {
  font-size: 20px;
}
/* Only where the Spanish is shown at all: phones hide it (see the phone rules above). */
@media (min-width: 851px), (min-width: 600px) and (min-height: 501px) {
  #album-dialog :is(#mission-next-title, #mission-areas-title, #album-sticker-title) small {
    display: inline;
    margin-inline-start: 4px;
  }
}
#album-dialog .mission-card {
  grid-template-columns: auto minmax(0, 1fr);
  justify-items: start;
  align-items: center;
  gap: 2px 10px;
  min-height: 0;
  padding: 8px 10px;
  border-radius: 16px;
}
.mission-card .album-tile-icon {
  grid-row: 1 / 3;
  font-size: 34px;
}
.mission-card strong {
  text-align: left;
}
/* Phone cards are too narrow for a side picture: the same tile stacked, with less height. */
@media (max-width: 520px) {
  #album-dialog .mission-card {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 3px;
    min-height: 0;
    padding: 6px 3px;
  }
  .mission-card .album-tile-icon {
    grid-row: auto;
    font-size: 28px;
  }
  .mission-card strong {
    text-align: center;
  }
  .album-next {
    margin-inline: 14px;
    padding-inline: 8px;
    column-gap: 8px;
  }
  .album-level-now {
    padding: 2px 7px;
    font-size: calc(14px * var(--text-scale, 1));
  }
  .album-next-level {
    display: none;
  }
}
/* The hero frame is 5% shorter than its first size at every width (see hero-preview.js). */
#album-dialog .album-preview {
  height: auto;
  aspect-ratio: 240 / 266;
}

/* Missions are an application page below the shared header, not a dialog over the game. */
#album-dialog.missions-screen {
  position: fixed;
  inset: var(--missions-top, 52px) 0 0;
  z-index: 24;
  box-sizing: border-box;
  width: auto;
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  --album-pad-top: 16px;
  --album-pad-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  padding: var(--album-pad-top) max(0px, calc((100vw - 1120px) / 2)) var(--album-pad-bottom);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#album-dialog.missions-screen[hidden] {
  display: none;
}
body[data-missions-open] {
  position: fixed;
  inset: 0;
  width: 100%;
  overflow: hidden;
}
body[data-missions-open] > .game-header {
  position: relative;
  z-index: 25;
}
body[data-missions-open] > :is(main, #activity-nav) {
  visibility: hidden;
}
#album-dialog.missions-screen .album-heading {
  background: transparent;
  border-bottom: 0;
}
#album-dialog.missions-screen .album-title-row {
  flex-direction: row;
  justify-content: flex-start;
}
#album-dialog.missions-screen #album-title {
  font-size: calc(26px * var(--text-scale, 1));
  line-height: 1.15;
}
#album-dialog.missions-screen .mission-next {
  gap: 12px;
}
#album-dialog.missions-screen .mission-card {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 8px;
}
#album-dialog.missions-screen .mission-card .album-tile-icon {
  grid-row: auto;
  font-size: 48px;
}
#album-dialog.missions-screen .mission-card strong {
  font-size: calc(17px * var(--text-scale, 1));
  line-height: 1.2;
  text-align: center;
  overflow-wrap: normal;
}
#album-dialog.missions-screen .mission-prize {
  border-radius: 999px;
  background: var(--color-surface);
}
@media (max-width: 599px) {
  #album-dialog.missions-screen {
    --album-pad-top: 8px;
    padding-top: var(--album-pad-top);
  }
  #album-dialog.missions-screen #album-title {
    font-size: calc(22px * var(--text-scale, 1));
  }
  #album-dialog.missions-screen .mission-next {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  #album-dialog.missions-screen .mission-card {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
  }
  #album-dialog.missions-screen .mission-card strong {
    font-size: calc(15px * var(--text-scale, 1));
    text-align: left;
  }
  #album-dialog.missions-screen .mission-prize {
    padding: 4px 6px;
    font-size: 14px;
    white-space: nowrap;
  }
}

#album-dialog.missions-screen #album-title:focus {
  outline: none;
}
#album-dialog.missions-screen[data-active-tab] .album-intro {
  display: none;
}
#album-dialog.missions-screen .mission-prize {
  color: var(--color-ink-control);
}
/* On narrow screens the play symbol goes, so the name keeps its two lines. */
@media (max-width: 899px) {
  #album-dialog.missions-screen .mission-play {
    display: none;
  }
}

@media (max-width: 599px) {
  #album-dialog.missions-screen .album-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  #album-dialog.missions-screen .album-title-row #album-title {
    grid-area: 1 / 1;
  }
  #album-dialog.missions-screen .profile-tabs {
    margin-block: 8px;
  }
}
@media (max-width: 599px) and (max-height: 650px) {
  #album-dialog.missions-screen .mission-card {
    min-height: 64px;
    padding-block: 6px;
  }
}

/* Missions leaves room for the collections: compact identity and horizontal suggestions. */
#album-dialog.missions-screen[data-active-tab] {
  --album-pad-top: 8px;
  padding-top: var(--album-pad-top);
}
#album-dialog.missions-screen[data-active-tab] .album-heading {
  padding-block: 6px 4px;
}
#album-dialog.missions-screen[data-active-tab] .profile-caption {
  margin-block: 2px 0;
}
#album-dialog.missions-screen[data-active-tab] .profile-hero-species {
  display: none;
}
#album-dialog.missions-screen[data-active-tab] .album-next {
  padding-block: 4px;
}
#album-dialog.missions-screen .profile-tabs {
  margin-block: 8px 4px;
}
#album-dialog.missions-screen #mission-next-title {
  margin-top: 6px;
}
@media (min-width: 600px) {
  /* Picture, name and prize sit together, centred, instead of the prize drifting to the far edge. */
  #album-dialog.missions-screen .mission-card {
    grid-template-columns: 40px minmax(0, max-content) auto;
    justify-content: center;
    align-items: center;
    min-height: 72px;
    padding: 8px 10px;
    gap: 8px 12px;
  }
  #album-dialog.missions-screen .mission-card .album-tile-icon {
    font-size: 34px;
  }
  #album-dialog.missions-screen .mission-card strong {
    font-size: calc(15px * var(--text-scale, 1));
    text-align: left;
  }
  #album-dialog.missions-screen .mission-prize {
    padding-inline: 6px;
  }
}
@media (min-width: 600px) and (max-width: 899px) {
  /* Three cards share the row: tighter padding and gaps give the name the room. */
  #album-dialog.missions-screen .mission-next .mission-card {
    grid-template-columns: 28px minmax(0, max-content) auto;
    padding: 6px 4px;
    gap: 4px 6px;
  }
  #album-dialog.missions-screen .mission-card .album-tile-icon {
    font-size: 28px;
  }
  #album-dialog.missions-screen .mission-next .mission-prize {
    padding-inline: 5px;
  }
}
@media (max-width: 599px) {
  #album-dialog.missions-screen[data-active-tab] .album-preview {
    height: 64px;
  }
  #album-dialog.missions-screen .mission-card {
    padding-block: 6px;
  }
  #album-dialog.missions-screen .mission-card .album-tile-icon {
    font-size: 28px;
  }
}

/* The missions heading keeps its title and any note on one line. */
.mission-next-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

/* Only the hero floats while scrolling; identity text follows the page content. */
#album-dialog.missions-screen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
}
#album-dialog.missions-screen > * {
  grid-column: 1 / -1;
}
#album-dialog.missions-screen .album-heading {
  display: contents;
}
#album-dialog.missions-screen .album-heading-text {
  grid-area: 1 / 1;
  padding: 6px 20px 4px;
}
#album-dialog.missions-screen .album-tools {
  display: contents;
}
#album-dialog.missions-screen .album-preview {
  grid-area: 1 / 2;
  position: sticky;
  top: 6px;
  z-index: 1;
  align-self: start;
  margin: 6px 20px 40px 0;
}
#album-dialog.missions-screen[data-active-tab] .album-preview {
  margin-bottom: 22px;
}
#album-dialog.missions-screen .profile-caption {
  grid-area: 1 / 2;
  align-self: end;
  margin: 0 20px 4px 0;
}

.album-stickers .album-tile[data-unlocked="true"]::after {
  content: "↻";
  font-size: 14px;
  color: var(--color-ink-control);
}

/* Simplified missions: the hero shares the progress card; the catalog sits beside the tabs. */
#album-dialog.missions-screen[data-active-tab] .album-total-row {
  display: none;
}
#album-dialog.missions-screen {
  --mission-line: var(--ad-line-soft);
  --mission-surface: var(--ad-surface);
  padding-inline: max(0px, calc((100vw - 1480px) / 2));
  background: var(--ad-surface-tint);
}
#album-dialog.missions-screen .profile-navigation {
  display: flex;
  align-items: center;
  gap: 17px;
  margin: 13px 20px 8px;
}
#album-dialog.missions-screen .profile-navigation .profile-tabs {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  gap: 11px;
  background: transparent;
}
#album-dialog.missions-screen .profile-tabs button {
  min-height: 49px;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--ad-ink-deep);
  /* A raised outlined button, so the tab that is not selected still reads as something to press. */
  border: 2px solid #8fb4d6;
  box-shadow: 0 3px 0 #b9d1e6;
  cursor: pointer;
}
#album-dialog.missions-screen .profile-tabs button[aria-selected="false"]:hover {
  background: var(--ad-soft-keep);
  border-color: #286fa7;
}
#album-dialog.missions-screen .profile-tabs button[aria-selected="false"]:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #b9d1e6;
}
#album-dialog.missions-screen .profile-tabs button[aria-selected="true"] {
  background: #286fa7;
  color: var(--ad-on-accent);
  border-color: #286fa7;
  box-shadow: none;
}
#album-dialog.missions-screen .mission-card {
  min-height: 68.4px;
  padding: 9.2px 17px;
  border: 1.5px solid var(--mission-line);
  border-radius: 22px;
  background: var(--mission-surface);
  color: var(--ad-ink-deep);
  box-shadow: 0 3px 0 #dce8f2;
}
#album-dialog.missions-screen .mission-prize {
  border: 1px solid var(--ad-line-faint);
  padding: 5px 8px;
}
#album-dialog.missions-screen .mission-group {
  border-color: var(--mission-line);
  border-radius: 22px;
  background: var(--mission-surface);
}
#album-dialog.missions-screen .mission-group-head {
  min-height: 57.95px;
  grid-template-areas: "icon name count chevron";
  padding: 10px 16px;
}
#album-dialog.missions-screen .mission-group-bar {
  display: none;
}
#album-dialog.missions-screen .mission-group-name {
  font-size: calc(18px * var(--text-scale, 1));
}
#album-dialog.missions-screen .mission-group .album-stickers {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8.55px 9px;
  padding: 0 15px 14.25px;
}
#album-dialog.missions-screen .album-stickers .album-tile {
  position: relative;
  min-height: 68.4px;
  gap: 2px;
  padding-block: 4.2px;
  border: 1.5px solid var(--mission-line);
  border-radius: 18px;
  background: var(--mission-surface);
  box-shadow: 0 2px 0 #dce8f2;
  color: var(--ad-ink-deep);
}
/* The play / replay mark sits in the corner so the tile is two rows tall, not three. */
#album-dialog.missions-screen .album-stickers .album-tile::after {
  position: absolute;
  top: 5px;
  right: 8px;
  line-height: 1;
}
/* My hero: choice tiles share the quieter card style of the sticker tiles. */
#album-dialog.missions-screen #profile-panel-hero .album-tile:not([data-unlocked="false"]) {
  border: 1.5px solid var(--mission-line);
  border-radius: 18px;
  background: var(--mission-surface);
  box-shadow: 0 2px 0 #dce8f2;
  color: var(--ad-ink-deep);
}
#album-dialog.missions-screen .mission-total {
  height: 10px;
  margin-bottom: 17px;
}
#album-dialog.missions-screen[data-active-tab] {
  grid-template-columns: 112px minmax(0, 1fr);
}
#album-dialog.missions-screen[data-active-tab] .album-heading-text {
  grid-area: 1 / 1 / 2 / -1;
  padding-bottom: 14px;
}
#album-dialog.missions-screen[data-active-tab] .album-preview {
  grid-area: 2 / 1;
  background: transparent;
  border-color: transparent;
  width: 76px;
  height: auto;
  margin: 12px 0 30px 32px;
}
#album-dialog.missions-screen[data-active-tab] .profile-caption {
  grid-area: 2 / 1;
  z-index: 1;
  margin: 0 0 12px 24px;
  justify-self: center;
}
#album-dialog.missions-screen[data-active-tab] .profile-hero-name {
  font-size: calc(15px * var(--text-scale, 1));
}
#album-dialog.missions-screen[data-active-tab] .album-next {
  grid-area: 2 / 1 / 3 / -1;
  align-self: stretch;
  min-height: 106px;
  margin: 0 20px;
  padding: 12px 18px 16px 110px;
  border-color: #dae8f5;
  border-radius: 24px;
}
#album-dialog.missions-screen[data-active-tab] .album-goal {
  margin: 0;
  text-align: center;
  color: #6a4a13;
  font-size: calc(16px * var(--text-scale, 1));
}
#album-dialog.missions-screen[data-active-tab] .album-meter {
  height: 25px;
}
#album-dialog.missions-screen[data-active-tab] .album-piece {
  background: linear-gradient(
    90deg,
    #ffc02c calc(var(--fill, 0) * 100%),
    #fff1c7 calc(var(--fill, 0) * 100%)
  );
}
#album-dialog.missions-screen[data-active-tab] .album-next-icon {
  width: 72px;
  height: 72px;
  font-size: 44px;
  border-style: dashed;
}
@media (max-width: 850px) {
  #album-dialog.missions-screen .mission-group .album-stickers {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 599px) {
  #album-dialog.missions-screen .profile-navigation {
    gap: 8px;
    margin: 8px 14px 4px;
  }
  #album-dialog.missions-screen .profile-navigation .profile-tabs {
    gap: 6px;
    min-width: 0;
  }
  #album-dialog.missions-screen .profile-tabs button {
    min-height: 44px;
    padding-inline: 6px;
    font-size: calc(14px * var(--text-scale, 1));
    gap: 4px;
  }
  #album-dialog.missions-screen[data-active-tab] {
    grid-template-columns: 80px minmax(0, 1fr);
  }
  #album-dialog.missions-screen[data-active-tab] .album-heading-text {
    padding: 4px 14px 6px;
  }
  #album-dialog.missions-screen[data-active-tab] .album-preview {
    width: 60px;
    margin: 8px 0 24px 18px;
  }
  #album-dialog.missions-screen[data-active-tab] .profile-caption {
    margin: 0 0 6px 12px;
  }
  #album-dialog.missions-screen[data-active-tab] .profile-hero-name {
    font-size: calc(12px * var(--text-scale, 1));
  }
  #album-dialog.missions-screen[data-active-tab] .album-next {
    min-height: 90px;
    margin-inline: 14px;
    padding: 6px 8px 8px 72px;
    gap: 4px;
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  #album-dialog.missions-screen[data-active-tab] .album-goal {
    font-size: calc(12px * var(--text-scale, 1));
  }
  #album-dialog.missions-screen[data-active-tab] .album-level-now {
    font-size: calc(12px * var(--text-scale, 1));
    padding: 4px 6px;
  }
  #album-dialog.missions-screen[data-active-tab] .album-meter {
    height: 18px;
    gap: 2px;
  }
  #album-dialog.missions-screen[data-active-tab] .album-next-icon {
    width: 52px;
    height: 52px;
    font-size: 32px;
  }
  #album-dialog.missions-screen .mission-card {
    min-height: 50.35px;
    padding: 4.675px 10px;
    border-radius: 16px;
  }
  #album-dialog.missions-screen .mission-group .album-stickers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5.7px 6px;
    padding: 0 8px 9.5px;
  }
  #album-dialog.missions-screen .album-stickers .album-tile {
    min-height: 72.2px;
    border-radius: 14px;
  }
  #album-dialog.missions-screen .mission-group-name {
    font-size: calc(16px * var(--text-scale, 1));
  }
}
html[data-appearance="dark"] #album-dialog.missions-screen {
  --mission-line: var(--ad-line-soft);
  --mission-surface: var(--ad-surface);
  background: var(--ad-surface-tint);
}
html[data-appearance="dark"]
  #album-dialog.missions-screen
  :is(.mission-card, .album-stickers .album-tile) {
  color: #e0edf6;
  box-shadow: 0 2px 0 #162c3e;
}
html[data-appearance="dark"] #album-dialog.missions-screen[data-active-tab] .album-goal {
  color: #ffe4a0;
}
html[data-appearance="dark"]
  #album-dialog.missions-screen
  .profile-navigation
  .profile-tabs
  button {
  background: #2c465f;
  color: #d7e8f6;
}
html[data-appearance="dark"]
  #album-dialog.missions-screen
  .profile-navigation
  .profile-tabs
  button[aria-selected="true"] {
  background: #286fa7;
  color: #fff;
}
html[data-appearance="dark"] #album-dialog.missions-screen .mission-card {
  background: var(--mission-surface);
  border-color: var(--mission-line);
}
html[data-appearance="dark"] #album-dialog.missions-screen .mission-prize {
  background: #2c465f;
  color: #e0edf6;
  border-color: #607f9d;
}
html[data-appearance="dark"]
  #album-dialog.missions-screen
  .profile-tabs
  button[aria-selected="false"] {
  background: #2c465f;
  color: #e0edf6;
  border-color: #607f9d;
  box-shadow: 0 3px 0 #162c40;
}
html[data-appearance="dark"]
  #album-dialog.missions-screen
  .profile-tabs
  button[aria-selected="false"]:hover {
  background: #35506a;
  border-color: #8fb4d6;
}
html[data-appearance="dark"] #album-dialog.missions-screen[data-active-tab] .album-piece {
  background: linear-gradient(
    90deg,
    #ffc02c calc(var(--fill, 0) * 100%),
    #4a422b calc(var(--fill, 0) * 100%)
  );
}
html[data-appearance="dark"] #album-dialog.missions-screen[data-active-tab] .album-next-level {
  color: #ffe4a0;
}

#album-dialog.missions-screen[data-active-tab][data-title-in-header] .album-heading-text {
  padding: 0;
}
html[data-appearance="dark"]
  #album-dialog.missions-screen
  #profile-panel-hero
  .album-tile:not([data-unlocked="false"]) {
  color: var(--ad-ink-deep);
  box-shadow: 0 2px 0 #162c3e;
}

/* Tablets and up: keep the goal just above the meter, within the same row. */
@media (min-width: 600px) {
  #album-dialog.missions-screen[data-active-tab] {
    grid-template-columns: 121px minmax(0, 1fr);
  }
  #album-dialog.missions-screen[data-active-tab] .album-preview {
    width: 119px;
    margin: 0 0 0 12px;
  }
  #album-dialog.missions-screen[data-active-tab] .album-next {
    min-height: 131px;
    /* Centre the goal and meter together, rather than the meter alone. */
    padding-block: calc(12px + 19.2px * var(--text-scale, 1)) 8px;
    grid-template-rows: minmax(72px, 1fr);
    row-gap: 0;
  }
  #album-dialog.missions-screen[data-active-tab] :is(.album-level-now, .album-next-target) {
    grid-row: 1;
  }
  #album-dialog.missions-screen[data-active-tab] .album-meter {
    grid-area: 1 / 2;
  }
  #album-dialog.missions-screen[data-active-tab] .album-goal {
    grid-area: 1 / 2;
    /* Half the 25px meter height, then 4px between it and the text. */
    transform: translateY(calc(-50% - 12.5px - 4px));
  }
  #album-dialog.missions-screen[data-active-tab] .profile-caption {
    /* Sticky like the egg, so the bubble is in view wherever My hero is scrolled to. */
    position: sticky;
    top: 20px;
    align-self: start;
    justify-self: start;
    width: max-content;
    max-width: 140px;
    margin: 2px 0 0 108px;
    padding: 4px 12px;
    border: 1.5px solid var(--mission-line);
    border-radius: 16px;
    background: var(--mission-surface);
    box-shadow: 0 2px 0 #dce8f2;
  }
  #album-dialog.missions-screen[data-active-tab] .profile-hero-name {
    font-size: calc(17px * var(--text-scale, 1));
  }
  #album-dialog.missions-screen[data-active-tab] .profile-caption::before,
  #album-dialog.missions-screen[data-active-tab] .profile-caption::after {
    content: "";
    position: absolute;
    border: 1.5px solid var(--mission-line);
    border-radius: 50%;
    background: var(--mission-surface);
  }
  #album-dialog.missions-screen[data-active-tab] .profile-caption::before {
    left: -10px;
    bottom: -2px;
    width: 8px;
    height: 8px;
  }
  #album-dialog.missions-screen[data-active-tab] .profile-caption::after {
    left: -17px;
    bottom: -8px;
    width: 5px;
    height: 5px;
  }
  #album-dialog.missions-screen[data-active-tab] .album-next {
    padding-left: 139px;
  }
  /* At the top of the screen the bubble stays; further down it is a temporary notice after the name changes. */
  #album-dialog.missions-screen[data-active-tab] .profile-caption {
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.3s ease,
      visibility 0s linear 0.3s;
  }
  #album-dialog.missions-screen[data-active-tab][data-at-top] .profile-caption,
  #album-dialog.missions-screen[data-active-tab] .profile-caption[data-flash] {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
  /* Scrolled, the 3 s bubble may reach over the first tiles: let taps go through to them. */
  #album-dialog.missions-screen[data-active-tab]:not([data-at-top]) .profile-caption {
    pointer-events: none;
  }
}

/* Trophies tab: the whole progress at a glance (stars, coins, prizes, level and trophies) above the shelf,
   in one gold bar with dividers; prizes and trophies, the two collections, carry their own tint.
   The chips are content-sized flex items: a long "129/129" widens its chip instead of being clipped, and
   when they cannot all share a row they wrap to the next one instead of overlapping. */
#profile-panel-trophies > section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "stats" "shelf" "guide";
}
.mission-trophies {
  grid-area: shelf;
}
#album-dialog .trophy-guide {
  grid-area: guide;
}
.trophy-stats {
  grid-area: stats;
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--ad-line-gold);
  border-radius: 22px;
  background: linear-gradient(var(--ad-gold-top), var(--ad-tint-gold));
  box-shadow: 0 3px 0 var(--ad-gold-edge);
  list-style: none;
}
.trophy-stat {
  display: grid;
  flex: 1 1 0;
  justify-items: center;
  align-content: center;
  gap: 1px;
  padding: 8px 4px;
  background: var(--stat-tint, transparent);
  color: var(--ad-ink-gold);
  line-height: 1.1;
  text-align: center;
}
.trophy-stat + .trophy-stat {
  border-left: 2px solid var(--ad-line-gold);
}
.trophy-stat-icon {
  font-size: 26px;
  line-height: 1;
}
.trophy-stat-value {
  font-size: calc(20px * var(--text-scale, 1));
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.trophy-stat small {
  font-size: calc(11px * var(--text-scale, 1));
  font-weight: 800;
}
/* English on its line, the Spanish gloss under it (compact screens already drop the gloss). */
.trophy-stat small [lang="es"] {
  display: block;
  font-weight: 600;
}
.trophy-stat-sep {
  display: none;
}
.trophy-stat[data-stat="coins"] {
  color: var(--ad-gold-ink);
}
.trophy-stat[data-stat="coins"] .trophy-stat-icon {
  filter: var(--coin-gold);
}
.trophy-stat[data-stat="prizes"] {
  --stat-tint: var(--ad-purple-top);
  color: var(--ad-purple-ink);
}
.trophy-stat[data-stat="level"] {
  color: var(--ad-blue-ink);
}
.trophy-stat[data-stat="trophies"] {
  --stat-tint: var(--ad-mint-top);
  color: var(--ad-mint-ink);
}
/* Portrait tablets and wide screens: icon beside the number, the label under it. */
@media (min-width: 700px) and (min-height: 501px) {
  .trophy-stats {
    margin-bottom: 14px;
  }
  .trophy-stat {
    grid-template-columns: auto auto;
    grid-template-areas: "icon value" "icon label";
    justify-content: center;
    justify-items: start;
    column-gap: 8px;
    padding: 8px 10px;
    text-align: left;
  }
  .trophy-stat-icon {
    grid-area: icon;
    align-self: center;
    font-size: 34px;
  }
  .trophy-stat-value {
    grid-area: value;
    align-self: end;
    font-size: calc(24px * var(--text-scale, 1));
  }
  .trophy-stat small {
    grid-area: label;
    align-self: start;
    font-size: calc(13px * var(--text-scale, 1));
  }
}
/* Landscape tablets, the main screen: icon, big number and the two-language label beside it, in one row.
   Sizes follow the screen width so the five share the row even with the longest numbers at 120 % text. */
@media (orientation: landscape) and (min-width: 768px) and (min-height: 640px) {
  .trophy-stat {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 5px;
  }
  .trophy-stat > * {
    align-self: center;
  }
  .trophy-stat-icon {
    font-size: clamp(30px, 3.6vw, 48px);
  }
  .trophy-stat-value {
    font-size: calc(clamp(20px, 2.5vw, 34px) * var(--text-scale, 1));
    line-height: 1;
  }
  .trophy-stat small {
    font-size: calc(clamp(13px, 1.25vw, 17px) * var(--text-scale, 1));
    line-height: 1.15;
  }
}
/* Phones and narrow tablets: the five share one row, number under its icon; a long number widens its own chip. */
@media (max-width: 699px) {
  .trophy-stats {
    margin-top: 6px;
  }
  .trophy-stat {
    padding: 6px 2px;
  }
  .trophy-stat-icon {
    font-size: 22px;
  }
  .trophy-stat-value {
    font-size: calc(17px * var(--text-scale, 1));
  }
  .trophy-stat small {
    font-size: calc(10px * var(--text-scale, 1));
  }
}

/* Trophies: one card per collection plus the grand one, with the collection's picture, its name in English
   and Spanish and a bar with the count inside. A pending card is frosted blue with a grey picture and a
   lock; an earned one turns gold, shows its picture in color between rays and wears a green check.
   Colors come from tokens so dark mode follows. */
.mission-trophies {
  --trophy-glow: rgb(255 255 255 / 0.7);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
/* A white glow would wash out the light text of dark mode: there it is a faint warm light. */
html[data-appearance="dark"] .mission-trophies {
  --trophy-glow: rgb(255 226 140 / 0.16);
}
#album-dialog .mission-trophy {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  min-height: 150px;
  padding: 10px 8px;
  border: 2px solid var(--ad-line-soft);
  border-radius: 24px;
  background: linear-gradient(var(--ad-surface), var(--ad-soft));
  box-shadow:
    inset 0 0 0 2px var(--ad-neutral-top),
    0 4px 10px rgb(35 62 100 / 0.12);
  color: var(--ad-ink);
  font: inherit;
}
#album-dialog .mission-trophy[data-earned="true"] {
  border-color: var(--ad-line-gold);
  background:
    radial-gradient(circle at 50% 30%, var(--trophy-glow), transparent 55%),
    linear-gradient(var(--ad-gold-top), var(--ad-gold-face));
  box-shadow:
    inset 0 0 0 2px var(--ad-gold-top),
    0 4px 0 var(--ad-gold-edge),
    0 6px 16px rgb(221 184 90 / 0.4);
}
/* Corner badge: a grey lock while it is pending, a green check once earned. */
#album-dialog .mission-trophy::after {
  content: "🔒" / "";
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ad-surface);
  box-shadow:
    0 0 0 2px var(--ad-line-soft),
    0 2px 4px rgb(35 62 100 / 0.15);
  font-size: calc(15px * var(--text-scale, 1));
  line-height: 1;
  filter: grayscale(1);
}
#album-dialog .mission-trophy[data-earned="true"]::after {
  content: "✓" / "";
  top: 6px;
  right: 6px;
  width: 34px;
  height: 34px;
  background: #2fb36b;
  box-shadow:
    0 0 0 3px var(--ad-surface),
    0 3px 6px rgb(30 120 70 / 0.35);
  color: #fff;
  font-size: calc(20px * var(--text-scale, 1));
  font-weight: 900;
  filter: none;
}
.mission-trophy-icon {
  position: relative;
  isolation: isolate;
  font-size: calc(48px * var(--text-scale, 1));
  line-height: 1;
  filter: drop-shadow(0 3px 3px rgb(0 0 0 / 0.12));
}
.mission-trophy[data-earned="false"] .mission-trophy-icon > span {
  opacity: 0.55;
  filter: grayscale(1);
}
.mission-trophy[data-earned="true"] .mission-trophy-icon {
  filter: drop-shadow(0 0 8px rgb(255 200 60 / 0.8));
}
/* Gold rays at both sides of an earned picture (wide cards only: compact cards have no room for them). */
@media (min-width: 600px) and (min-height: 501px) {
  .mission-trophy[data-earned="true"] .mission-trophy-icon::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 2.1em;
    height: 2.1em;
    translate: -50% -50%;
    background: conic-gradient(
      transparent 0 44deg,
      var(--refresh-gold) 44deg 54deg,
      transparent 54deg 78deg,
      var(--refresh-gold) 78deg 87deg,
      transparent 87deg 273deg,
      var(--refresh-gold) 273deg 282deg,
      transparent 282deg 306deg,
      var(--refresh-gold) 306deg 316deg,
      transparent 316deg
    );
    -webkit-mask: radial-gradient(closest-side, transparent 64%, black 65% 92%, transparent 93%);
    mask: radial-gradient(closest-side, transparent 64%, black 65% 92%, transparent 93%);
  }
}
#album-dialog .mission-trophy strong {
  font-size: calc(14px * var(--text-scale, 1));
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
}
.mission-trophy-gloss {
  color: var(--ad-ink-muted);
  font-size: calc(12px * var(--text-scale, 1));
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
}
/* The bar holds its own count, centered over the fill and kept readable by a halo. */
.mission-trophy-bar {
  display: grid;
  align-items: center;
  width: 86%;
  height: calc(16px * var(--text-scale, 1));
  margin-top: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ad-line-soft);
  box-shadow: inset 0 1px 2px rgb(35 62 100 / 0.18);
}
.mission-trophy-fill {
  grid-area: 1 / 1;
  justify-self: start;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(var(--ad-blue-edge), var(--ad-blue-base));
}
.mission-trophy-bar small {
  grid-area: 1 / 1;
  justify-self: center;
  color: var(--ad-ink);
  font-size: calc(12px * var(--text-scale, 1));
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow:
    0 0 2px var(--ad-surface),
    0 0 4px var(--ad-surface);
}
/* Four columns leave room for the collapsed guide below all three rows. */
@media (min-width: 600px) and (min-height: 501px) {
  .trophy-stats {
    margin-bottom: 8px;
  }
  .mission-trophies {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px 12px;
    margin-bottom: 9px;
  }
  #album-dialog .mission-trophy {
    min-height: clamp(108px, calc((100dvh - 420px) / 3), 190px);
    padding-block: 5px;
  }
  .mission-trophy-icon {
    font-size: calc(clamp(34px, 4.9dvh, 60px) * var(--text-scale, 1));
  }
  #album-dialog .mission-trophy strong {
    font-size: calc(clamp(16px, 2.2dvh, 22px) * var(--text-scale, 1));
  }
  .mission-trophy-gloss {
    font-size: calc(clamp(13px, 1.85dvh, 18px) * var(--text-scale, 1));
  }
  .mission-trophy-bar {
    height: calc(clamp(16px, 2.25dvh, 24px) * var(--text-scale, 1));
    margin-top: 2px;
  }
  .mission-trophy-bar small {
    font-size: calc(clamp(13px, 1.8dvh, 17px) * var(--text-scale, 1));
  }
}
@media (600px <= width < 700px) and (501px <= height < 800px) {
  .trophy-stat {
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    column-gap: 4px;
    padding-block: 4px;
  }
  .trophy-stat small {
    grid-column: 1 / -1;
  }
  #album-dialog .mission-trophy {
    padding-block: 3px;
    min-height: 104px;
  }
}
/* Give the trophy shelf the level card's space on every screen. */
#album-dialog.missions-screen[data-active-tab="trophies"]
  :is(.album-preview, .profile-caption, .album-next) {
  display: none;
}
/* Phones: compact cards in two columns, the picture beside the name and the bar (the Spanish gloss goes). */
@media (max-width: 599px), (max-width: 850px) and (max-height: 500px) {
  #profile-panel-trophies section {
    padding-block: 0;
  }
  .mission-trophies {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 0;
  }
  #album-dialog .mission-trophy {
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-areas: "icon name" "icon bar";
    align-content: center;
    justify-items: start;
    min-height: 64px;
    padding: 6px 8px;
    gap: 4px 6px;
    border-radius: 14px;
  }
  #album-dialog .mission-trophy::after {
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    font-size: 11px;
  }
  #album-dialog .mission-trophy[data-earned="true"]::after {
    width: 22px;
    height: 22px;
    font-size: 13px;
  }
  #album-dialog .mission-trophy-icon {
    grid-area: icon;
    align-self: center;
    font-size: 30px;
  }
  #album-dialog .mission-trophy strong {
    grid-area: name;
    padding-inline-end: 20px;
    text-align: left;
  }
  .mission-trophy-bar {
    grid-area: bar;
    width: 100%;
    height: calc(14px * var(--text-scale, 1));
    margin-top: 0;
  }
  .mission-trophy-bar small {
    font-size: calc(10px * var(--text-scale, 1));
  }
}
@media (orientation: landscape) and (max-width: 850px) and (max-height: 500px) {
  .mission-trophies {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.mission-group[data-complete="true"] .mission-group-head {
  background: var(--ad-tint-gold);
}
.mission-group-trophy {
  margin-inline-start: 6px;
}
.sticker-toast[data-kind="trophy"] {
  border-width: 3px;
  border-color: var(--ad-line-gold);
  background: var(--ad-tint-gold);
  color: var(--ad-ink-gold);
}
.sticker-toast[data-kind="trophy"] > span:first-child {
  font-size: 46px;
}
.sticker-toast[data-kind="trophy"] strong {
  font-size: calc(16px * var(--text-scale, 1));
}

/* Game areas on My missions: home lists them itself (home → area → activity). Each tile wears its
   area's colors (palettes in navigation.css). Tablets in landscape get tiles twice the desktop size. */
.mission-areas-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
#mission-areas-toggle {
  display: none;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 12px;
  border: 1.5px solid var(--ad-line-soft);
  border-radius: 999px;
  background: var(--ad-soft-keep);
  color: var(--ad-ink-deep);
  font: inherit;
  font-size: calc(13px * var(--text-scale, 1));
}
#album-dialog .mission-areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 10px;
}
#album-dialog .mission-area {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 5.7px 6px;
  min-width: 0;
  min-height: 68.4px;
  padding: 8px 8px;
  border: 2px solid var(--area-border);
  border-radius: 20px;
  background: var(--area-bg);
  color: var(--area-ink);
  box-shadow: 0 3px 0 var(--area-shadow);
  font: inherit;
  cursor: pointer;
}
#album-dialog .mission-area:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--area-shadow);
}
#album-dialog .mission-area:focus-visible {
  outline: 3px solid var(--area-border);
  outline-offset: 2px;
}
#album-dialog .mission-area .album-tile-icon {
  font-size: 30px;
  line-height: 1;
}
#album-dialog .mission-area strong {
  max-width: 100%;
  font-size: calc(14px * var(--text-scale, 1));
  line-height: 1.15;
  text-align: center;
  /* Whole words only: a name never splits mid-word; the tile shrinks the type instead. */
  overflow-wrap: normal;
  hyphens: none;
}
/* Phones suggest a single mission: three stacked cards push the game areas off the first screen. */
@media (max-width: 599px), (max-width: 850px) and (max-height: 500px) {
  #album-dialog .mission-next > .mission-card:nth-child(n + 2) {
    display: none;
  }
}
/* From 600 px, outside compact phones, the areas share one row (the count may be six without Adventures); the type scales
   with the width so each name keeps its words whole. */
@media (min-width: 600px) {
  #album-dialog .mission-areas {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
  #album-dialog .mission-area {
    padding-inline: 4px;
  }
  #album-dialog .mission-area strong {
    font-size: calc(clamp(11px, 1.8vw, 16px) * var(--text-scale, 1));
  }
}
@media (orientation: landscape) and (min-width: 768px) and (min-height: 640px) {
  #album-dialog .mission-areas {
    gap: 14px;
  }
  #album-dialog .mission-area {
    min-height: 122.74px;
    border-radius: 24px;
  }
  #album-dialog .mission-area .album-tile-icon {
    font-size: 60px;
  }
  #album-dialog .mission-area {
    padding-inline: 4px;
  }
  #album-dialog .mission-area strong {
    font-size: calc(clamp(14px, 1.7vw, 18px) * var(--text-scale, 1));
  }
}
@media (max-width: 599px), (max-width: 850px) and (max-height: 500px) {
  #mission-areas-toggle {
    position: relative;
    z-index: 2;
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    min-width: 104px;
    min-height: 52px;
    padding-inline: 16px;
    border-color: var(--ad-line-blue);
    font-weight: 700;
    touch-action: manipulation;
  }
  #album-dialog .mission-areas:not([data-expanded="true"]) .mission-area:nth-child(n + 4) {
    display: none;
  }
  #album-dialog .mission-areas {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5.7px 6px;
  }
  #album-dialog .mission-area {
    min-height: 60.8px;
    padding: 4.4px 2px;
    border-radius: 16px;
  }
  #album-dialog .mission-area .album-tile-icon {
    font-size: 26px;
  }
  #album-dialog .mission-area strong {
    font-size: calc(11px * var(--text-scale, 1));
  }
}

/* The foot of My missions: the intro and the privacy notice, two quiet pills of the same size. */
#album-dialog .missions-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}
#album-dialog .missions-foot :is(#intro-home, .hub-privacy) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  padding: 6px 18px;
  border: 1.5px solid #c9dbe9;
  border-radius: 999px;
  background: var(--ad-surface);
  box-shadow: none;
  color: var(--ad-ink-steel);
  font-size: calc(14px * var(--text-scale, 1));
  font-weight: 700;
  text-decoration: none;
}
@media (min-width: 600px) {
  #album-dialog .missions-foot :is(#intro-home, .hub-privacy) {
    min-width: 210px;
  }
}
#album-dialog .missions-foot :is(#intro-home, .hub-privacy):hover {
  background: var(--ad-soft-keep);
  border-color: #8fb4d6;
}
#album-dialog .missions-foot .hub-privacy span {
  font-weight: 500;
}
#album-dialog .missions-foot .intro-home-icon {
  width: 26px;
  height: 26px;
  font-size: 13px;
  padding-left: 2px;
  background: #5b8fbd;
  box-shadow: none;
}
#album-dialog .missions-foot .intro-home-copy strong {
  font-size: calc(14px * var(--text-scale, 1));
}
#album-dialog .missions-foot .intro-home-copy small {
  display: none;
}
html[data-appearance="dark"] #album-dialog .missions-foot :is(#intro-home, .hub-privacy) {
  background: var(--ad-surface);
  border-color: #47637b;
  color: var(--ad-ink-steel);
}

/* Once the page scrolls, the sticky hero follows the reader 20% bigger than at the top, so it stays
   easy to see and to tap while the collections move underneath it. */
#album-dialog.missions-screen[data-active-tab] .album-preview {
  transform-origin: top left;
  transition: transform 0.25s ease;
}
#album-dialog.missions-screen[data-active-tab]:not([data-at-top]) .album-preview {
  transform: scale(1.2);
}
/* The floating hero accepts a long press while allowing vertical gestures. */
#album-dialog.missions-screen[data-active-tab] .album-preview {
  pointer-events: auto;
  touch-action: pan-y;
  -webkit-touch-callout: none;
}
#album-dialog.missions-screen[data-active-tab][data-hero-hidden] :is(.album-preview, .profile-caption) {
  visibility: hidden;
  pointer-events: none;
}
/* Hide the hero: a game card with the app's action pills, Hide light and Stay green (the safe choice). */
.album-hero-menu {
  width: min(420px, calc(100% - 32px));
  padding: 20px;
  border: 3px solid var(--refresh-white);
  border-radius: 28px;
  background: linear-gradient(var(--refresh-white), var(--refresh-sky-soft));
  box-shadow:
    0 0 0 2px var(--refresh-line-strong),
    0 8px 0 var(--refresh-line-strong);
  color: var(--refresh-ink);
  text-align: center;
}
.album-hero-menu-icon {
  display: block;
  font-size: 48px;
  line-height: 1;
}
/* Above "#album-dialog h3", which sizes the section titles of Missions. */
#album-dialog .album-hero-menu h3 {
  margin: 8px 0 16px;
  font-size: calc(22px * var(--text-scale, 1));
  font-weight: 800;
}
.album-hero-menu small {
  display: block;
  font-size: calc(14px * var(--text-scale, 1));
  font-weight: 600;
  opacity: 0.85;
}
.album-hero-menu-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.album-hero-menu button {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-content: center;
  align-items: center;
  column-gap: 8px;
  min-height: 64px;
  padding: 8px 14px;
  border-radius: 20px;
  font: inherit;
  font-size: calc(19px * var(--text-scale, 1));
  font-weight: 800;
  cursor: pointer;
}
.album-hero-menu button > span {
  grid-row: span 2;
  font-size: 28px;
}
.album-hero-menu button small {
  grid-column: 2;
  text-align: start;
}
.album-hero-menu .album-hero-hide {
  border: 3px solid var(--refresh-line-strong);
  background: linear-gradient(var(--refresh-white), var(--refresh-sky-soft));
  color: var(--refresh-ink);
  box-shadow: 0 4px 0 var(--refresh-line-strong);
}
.album-hero-menu .album-hero-stay {
  border: 2px solid var(--refresh-26803a);
  background: linear-gradient(var(--refresh-4cbf5a), var(--refresh-2f9e46));
  color: var(--refresh-white);
  box-shadow: 0 5px 0 var(--refresh-1f6a30);
}
.album-hero-menu button:active {
  transform: translateY(3px);
  box-shadow: none;
}
@media (orientation: landscape) and (min-width: 768px) and (min-height: 640px) {
  .album-hero-menu {
    width: min(560px, calc(100% - 32px));
  }
  .album-hero-menu button {
    min-height: 88px;
    font-size: calc(24px * var(--text-scale, 1));
  }
}
.album-hero-menu::backdrop {
  background: rgb(22 44 62 / 0.45);
}
/* At the top of Missions the hero answers to a double tap and grows (a floating hero stays out of the way). */
#album-dialog.missions-screen[data-active-tab][data-at-top] .album-preview {
  pointer-events: auto;
  touch-action: manipulation;
  cursor: zoom-in;
}
#album-dialog.missions-screen[data-active-tab] .album-preview[data-big="true"] {
  z-index: 40;
  pointer-events: auto;
  transform: scale(2.4);
  cursor: zoom-out;
  filter: drop-shadow(0 8px 14px rgb(40 70 110 / 0.25));
}
@media (prefers-reduced-motion: reduce) {
  #album-dialog.missions-screen[data-active-tab] .album-preview {
    transition: none;
  }
}

/* The achievements bar sits beside the title instead of taking a row of its own; phones drop it, the count says it. */
#album-dialog.missions-screen .mission-achievements {
  display: grid;
  grid-template-columns: auto minmax(60px, 1fr);
  align-items: center;
  column-gap: 14px;
}
#album-dialog.missions-screen .mission-achievements > h3 {
  grid-column: 1;
}
#album-dialog.missions-screen .mission-achievements > .mission-total {
  grid-column: 2;
  margin-bottom: 0;
}
#album-dialog.missions-screen .mission-achievements > .mission-groups {
  grid-column: 1 / -1;
  margin-top: 10px;
}
@media (max-width: 599px) {
  #album-dialog.missions-screen .mission-achievements > .mission-total {
    display: none;
  }
}

/* Backgrounds show the actual scenery, including the two choices available from the start. */
.profile-backgrounds {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#album-dialog .profile-background .profile-background-art {
  display: block;
  width: 100%;
  height: 56px;
  min-height: 56px;
  border-radius: 10px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
@media (orientation: landscape) and (min-width: 768px) and (min-height: 640px) {
  #album-dialog .profile-background .profile-background-art {
    height: 112px;
    min-height: 112px;
  }
  #album-dialog .profile-background {
    min-height: 148px;
  }
}

.profile-jumpbar {
  position: sticky;
  /* The dialog's own top padding would let the scrolling content show above a bar stuck at 0: once stuck,
     the bar reaches up through that padding, and the extra top padding it carries (the same height) keeps
     its buttons where they are. At rest it takes that height below the tabs: no negative margin, so it never
     covers the tab row above it. */
  top: calc(-1 * var(--album-pad-top, 0px));
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
  gap: 6px;
  padding: calc(8px + var(--album-pad-top, 0px)) 20px 8px;
  background: var(--ad-surface-tint);
  border-bottom: 1px solid var(--ad-line-soft);
}
.profile-jumpbar button {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 48px;
  padding: 5px 2px;
  border: 2px solid var(--ad-blue-edge);
  border-radius: 14px;
  background: var(--ad-blue-top);
  color: var(--ad-blue-ink);
  font: inherit;
  font-size: calc(12px * var(--text-scale, 1));
  cursor: pointer;
}
.profile-jumpbar button span {
  font-size: 24px;
}
.profile-jumpbar button[aria-current="location"] {
  border-color: var(--ad-blue-ink);
  background: var(--ad-blue-face);
}
.profile-jumpbar button:focus-visible {
  outline: 3px solid var(--ad-blue-ink);
  outline-offset: 2px;
}
/* The coins to spend ride in the sticky bar, so they stay in sight beside every price while the child scrolls. */
.profile-wallet {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-content: center;
  align-items: center;
  column-gap: 6px;
  min-height: 48px;
  margin: 0;
  padding: 4px 16px;
  border: 2px solid var(--ad-gold-edge);
  border-radius: 999px;
  background: linear-gradient(var(--ad-gold-top), var(--ad-gold-face));
  box-shadow: 0 4px 0 var(--ad-gold-base);
  color: var(--ad-gold-ink);
  line-height: 1;
}
/* Apple draws 🪙 in silver; tinted gold it reads as money beside the gold star. */
#album-dialog {
  --coin-gold: sepia(1) saturate(3.5) hue-rotate(-6deg) brightness(1.05);
}
.profile-wallet-coin {
  font-size: 26px;
  filter: var(--coin-gold);
}
.profile-wallet-count {
  font-size: calc(24px * var(--text-scale, 1));
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.profile-wallet small {
  grid-column: 1 / -1;
  margin-top: 3px;
  font-size: calc(11px * var(--text-scale, 1));
  font-weight: 800;
  text-align: center;
}
#profile-panel-hero h3:focus {
  outline: none;
}
@media (max-width: 599px) {
  .profile-jumpbar {
    padding-inline: 8px;
    gap: 4px;
  }
  .profile-jumpbar button {
    font-size: calc(10px * var(--text-scale, 1));
  }
  .profile-wallet {
    column-gap: 3px;
    padding-inline: 8px;
  }
  .profile-wallet-coin {
    font-size: 18px;
  }
  .profile-wallet-count {
    font-size: calc(18px * var(--text-scale, 1));
  }
  .profile-wallet small {
    font-size: calc(10px * var(--text-scale, 1));
  }
}
@media (orientation: landscape) and (min-width: 768px) and (min-height: 640px) {
  .profile-jumpbar button {
    min-height: 88px;
    font-size: calc(18px * var(--text-scale, 1));
  }
  .profile-jumpbar button span {
    font-size: 40px;
  }
  .profile-wallet {
    column-gap: 8px;
    padding-inline: 24px;
  }
  .profile-wallet-coin {
    font-size: 44px;
  }
  .profile-wallet-count {
    font-size: calc(40px * var(--text-scale, 1));
  }
  .profile-wallet small {
    margin-top: 4px;
    font-size: calc(17px * var(--text-scale, 1));
  }
}

#album-dialog.missions-screen #profile-panel-hero .profile-background[aria-pressed="true"] {
  border-color: var(--ad-blue-ink);
  box-shadow: inset 0 0 0 1px var(--ad-blue-ink);
}

/* The hero glides above section controls while crossing them, then rests close below the bar. */
#album-dialog.missions-screen[data-active-tab="hero"] .album-preview {
  top: var(--profile-float-top, 6px);
  z-index: 4;
  transition:
    top 0.18s ease-out,
    transform 0.25s ease;
}
@media (prefers-reduced-motion: reduce) {
  #album-dialog.missions-screen[data-active-tab="hero"] .album-preview {
    transition: none;
  }
}

/* A single purchase dock: prize details and its two actions share the footer instead of stacking bars.
   My missions is not part of buying, so it steps aside until the offer is bought or dismissed. */
#album-dialog .album-footer:has(.album-offer:not([hidden])) {
  position: sticky;
  /* Reach down through the dialog's bottom padding (keeping the home-indicator inset), and back the strip
     under the dock with the dialog's own colour so scrolling content cannot show through it. */
  bottom: calc(12px - var(--album-pad-bottom, 0px) + env(safe-area-inset-bottom, 0px));
  box-shadow: inset 0 0 0 2px var(--ad-surface), 0 60px 0 0 var(--color-surface);
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  margin: 6px 14px 12px;
  padding: 10px;
  border: 2px solid var(--ad-blue-edge);
  border-radius: 22px;
  background: linear-gradient(115deg, var(--ad-tint-gold), var(--ad-surface) 23%, var(--ad-soft));
}
#album-dialog .album-footer .album-offer:not([hidden]),
#album-dialog .album-footer .album-offer:not([hidden]) .album-offer-actions {
  display: contents;
}
#album-dialog .album-footer:has(.album-offer:not([hidden])) .album-offer-icon {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  place-items: center;
  inline-size: 1.45em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(var(--ad-surface), var(--ad-gold-top));
}
#album-dialog .album-footer:has(.album-offer:not([hidden])) .album-offer-text {
  grid-column: 2;
  grid-row: 1;
}
#album-dialog .album-footer:has(.album-offer:not([hidden])) .album-offer-cancel {
  grid-column: 3;
  grid-row: 1;
}
#album-dialog .album-footer:has(.album-offer:not([hidden])) .album-offer-buy {
  grid-column: 4;
  grid-row: 1;
}
/* The footer only exists to hold a purchase offer. */
#album-dialog .album-footer:not(:has(.album-offer:not([hidden]))) {
  display: none;
}
#album-dialog .album-footer:has(.album-offer-buy[hidden]):has(.album-offer:not([hidden])) {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
@media (max-width: 599px) {
  #album-dialog .album-footer:has(.album-offer:not([hidden])) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-inline: 8px;
    padding: 8px;
    gap: 8px;
  }
  #album-dialog .album-footer:has(.album-offer-buy[hidden]):has(.album-offer:not([hidden])) {
    grid-template-columns: minmax(0, 1fr);
  }
  #album-dialog .album-footer:has(.album-offer:not([hidden])) .album-offer-text {
    grid-column: 1 / -1;
    padding-left: 44px;
  }
  .album-offer .album-offer-price {
    display: block;
  }
  .album-offer-money {
    padding: 0 0.35em;
  }
  .album-offer-money + .album-offer-money {
    margin-inline-start: 3px;
  }
  #album-dialog .album-footer:has(.album-offer:not([hidden])) .album-offer-icon {
    justify-self: start;
    font-size: 26px;
  }
  #album-dialog .album-footer:has(.album-offer:not([hidden])) :is(.album-offer-cancel, .album-offer-buy) {
    grid-row: 2;
    min-height: 48px;
    min-width: 0;
    padding: 6px;
    font-size: calc(14px * var(--text-scale, 1));
  }
  #album-dialog .album-footer:has(.album-offer:not([hidden])) .album-offer-cancel {
    grid-column: 1;
  }
  #album-dialog .album-footer:has(.album-offer:not([hidden])) .album-offer-buy {
    grid-column: 2;
  }
}
@media (orientation: landscape) and (min-width: 768px) and (min-height: 640px) {
  #album-dialog .album-footer:has(.album-offer:not([hidden])) :is(.album-offer-cancel, .album-offer-buy) {
    min-width: 220px;
    min-height: 88px;
    font-size: calc(22px * var(--text-scale, 1));
  }
}

.profile-jumpbar .profile-jump-label {
  font-size: inherit;
}

/* ---- Visual refresh of My missions (2026-11-08): same layout and icons, calmer and more playful surfaces.
   Sky-and-meadow level card, two-line tabs, section titles with their icon, soft gradients on the
   mission and area cards and a thicker achievements bar. Pure decoration: no element is added. ---- */
#album-dialog.missions-screen[data-active-tab] .album-next {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--refresh-b9d9f2);
  background:
    radial-gradient(55% 50% at 18% 118%, var(--refresh-a8dc8a) 99%, transparent 100%),
    radial-gradient(60% 45% at 82% 120%, var(--refresh-93cf74) 99%, transparent 100%),
    linear-gradient(var(--refresh-bfe3ff), var(--refresh-e9f6ff) 70%);
  box-shadow: 0 4px 0 var(--refresh-cfe2f2);
}
#album-dialog.missions-screen[data-active-tab] .album-level-now {
  padding: 6px 14px;
  border: 2px solid var(--refresh-white);
  border-radius: 999px;
  background: linear-gradient(var(--refresh-3f7fc0), var(--refresh-24557f));
  box-shadow: 0 2px 0 var(--refresh-1b4466);
}
#album-dialog.missions-screen[data-active-tab] .album-meter {
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.8);
}
#album-dialog.missions-screen[data-active-tab] .album-piece {
  border-radius: 999px;
  border-color: var(--refresh-e9b93f);
}
#album-dialog.missions-screen[data-active-tab] .album-next-icon {
  border: 3px solid var(--refresh-gold);
  background: radial-gradient(var(--refresh-fffbe9), var(--refresh-ffeeb5));
  box-shadow: 0 0 0 4px rgb(255 214 102 / 0.35);
}
#album-dialog.missions-screen[data-active-tab] .album-next .album-goal {
  color: var(--refresh-ink);
  font-weight: 800;
}
/* Equal side tracks center the bilingual label independently of the icon. */
#album-dialog.missions-screen[data-active-tab] .profile-tabs [role="tab"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-content: center;
  justify-content: stretch;
  min-height: 60px;
  border-width: 2px;
  box-shadow: 0 3px 0 var(--refresh-c9dced);
}
#album-dialog.missions-screen[data-active-tab] .profile-tabs [role="tab"] > span:last-child {
  grid-column: 2;
  text-align: center;
}
#album-dialog.missions-screen[data-active-tab] .profile-tabs [role="tab"] > span:last-child small {
  display: block;
  font-weight: 500;
  opacity: 0.85;
}
#album-dialog.missions-screen[data-active-tab] .profile-tabs [role="tab"][aria-selected="true"] {
  border-color: var(--refresh-blue-deep);
  background: linear-gradient(var(--refresh-blue-top), var(--refresh-blue-deep));
  box-shadow: 0 3px 0 var(--refresh-174a79);
}
/* Section titles: bigger, with the section's own icon. */
#album-dialog.missions-screen[data-active-tab]
  :is(#mission-next-title, #mission-areas-title, #album-sticker-title) {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: calc(20px * var(--text-scale, 1));
  color: var(--refresh-ink);
}
#album-dialog.missions-screen[data-active-tab]
  :is(#mission-next-title, #mission-areas-title, #album-sticker-title)::before {
  align-self: center;
  font-size: 1.1em;
}
#album-dialog.missions-screen[data-active-tab] #mission-next-title::before {
  content: "🎯";
}
#album-dialog.missions-screen[data-active-tab] #mission-areas-title::before {
  content: "🎮";
}
#album-dialog.missions-screen[data-active-tab] #album-sticker-title::before {
  content: "🏅";
}
/* Mission cards sit on a small meadow; the +1 ⭐ pill is gold. */
#album-dialog.missions-screen[data-active-tab] .mission-card {
  border: 2px solid var(--refresh-c4dcef);
  background:
    radial-gradient(70% 38% at 30% 118%, var(--refresh-cdeeb6) 99%, transparent 100%),
    radial-gradient(60% 34% at 85% 120%, var(--refresh-bfe7a5) 99%, transparent 100%),
    linear-gradient(var(--refresh-white), var(--refresh-f2f9ff));
  box-shadow: 0 3px 0 var(--refresh-d3e3f0);
}
#album-dialog.missions-screen[data-active-tab] .mission-card .mission-prize {
  border: 2px solid var(--refresh-gold);
  background: var(--refresh-fff8dc);
  color: var(--refresh-7a5200);
}
/* Area cards keep their colour, now as a soft vertical gradient with a light rim. */
#album-dialog.missions-screen[data-active-tab] .mission-area {
  background: linear-gradient(var(--refresh-white) -40%, var(--area-bg) 60%);
  box-shadow:
    0 4px 0 var(--area-shadow),
    inset 0 2px 0 rgb(255 255 255 / 0.8);
}
#album-dialog.missions-screen[data-active-tab] .mission-area .album-tile-icon {
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.12));
}
/* Achievements: a thicker gold bar. */
#album-dialog.missions-screen[data-active-tab] .mission-achievements > .mission-total {
  height: 14px;
  border: 2px solid var(--refresh-white);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.08);
}
#album-dialog.missions-screen[data-active-tab] .mission-achievements > .mission-total span {
  background: linear-gradient(var(--refresh-ffd35c), var(--refresh-f2a91c));
}
html[data-appearance="dark"]
  #album-dialog.missions-screen[data-active-tab]
  :is(.album-next, .mission-card) {
  background: var(--refresh-dark-card);
  border-color: var(--refresh-dark-line);
}
html[data-appearance="dark"] #album-dialog.missions-screen[data-active-tab] #mission-next-title,
html[data-appearance="dark"] #album-dialog.missions-screen[data-active-tab] #mission-areas-title,
html[data-appearance="dark"] #album-dialog.missions-screen[data-active-tab] #album-sticker-title {
  color: inherit;
}
#album-dialog.missions-screen[data-active-tab] .profile-tabs [role="tab"] .album-tile-icon {
  grid-column: 1;
  justify-self: end;
  font-size: 28px;
}
@media (max-width: 599px) {
  #album-dialog.missions-screen[data-active-tab] .profile-tabs [role="tab"] {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 1px;
  }
  #album-dialog.missions-screen[data-active-tab] .profile-tabs [role="tab"] > span:last-child {
    grid-column: 1;
    justify-self: center;
  }
  #album-dialog.missions-screen[data-active-tab] .profile-tabs [role="tab"] .album-tile-icon {
    justify-self: center;
    font-size: 18px;
  }
}

/* Collection bars: each collection has its own soft colour; big icon, name over its translation,
   a count pill above a thick bar in that colour, and the chevron in a white circle. */
#album-dialog.missions-screen[data-active-tab] .mission-group {
  --tint: var(--refresh-e6f2ff);
  --edge: var(--refresh-b6d3ee);
  --fill: var(--refresh-3b86c6);
  border: 2px solid var(--edge);
  background: linear-gradient(100deg, var(--refresh-white) 0%, var(--tint) 70%);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--edge) 70%, var(--refresh-white));
}
#album-dialog.missions-screen[data-active-tab] .mission-group[data-group="challenges"] {
  --tint: var(--refresh-fbe3f1);
  --edge: var(--refresh-ebb6d4);
  --fill: var(--refresh-e2508f);
}
#album-dialog.missions-screen[data-active-tab] .mission-group[data-group="play"] {
  --tint: var(--refresh-ddf6ea);
  --edge: var(--refresh-a9dcc3);
  --fill: var(--refresh-2f9e6e);
}
#album-dialog.missions-screen[data-active-tab] .mission-group[data-group="listen"] {
  --tint: var(--refresh-dff0ff);
  --edge: var(--refresh-a9cdef);
  --fill: var(--refresh-2f7fd1);
}
#album-dialog.missions-screen[data-active-tab] .mission-group[data-group="adventures"] {
  --tint: var(--refresh-fff1cf);
  --edge: var(--refresh-ecd28d);
  --fill: var(--refresh-e39a1b);
}
#album-dialog.missions-screen[data-active-tab] .mission-group[data-group="club"] {
  --tint: var(--refresh-ece5fb);
  --edge: var(--refresh-c9bbee);
  --fill: var(--refresh-7d5cd6);
}
#album-dialog.missions-screen[data-active-tab] .mission-group[data-group="special"] {
  --tint: var(--refresh-dcf6fb);
  --edge: var(--refresh-a3dbe7);
  --fill: var(--refresh-1aa0bf);
}
#album-dialog.missions-screen[data-active-tab] .mission-group[data-complete="true"] {
  --edge: var(--refresh-e5b84a);
}
#album-dialog.missions-screen[data-active-tab] .mission-group-head {
  grid-template-columns: auto minmax(160px, 0.8fr) minmax(120px, 1fr) auto;
  grid-template-areas:
    "icon name count chevron"
    "icon name bar chevron";
  gap: 4px 14px;
  min-height: 76px;
  padding: 10px 14px;
}
#album-dialog.missions-screen[data-active-tab] .mission-group-head .album-tile-icon {
  padding-right: 14px;
  border-right: 3px solid var(--edge);
  font-size: 46px;
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.12));
}
#album-dialog.missions-screen[data-active-tab] .mission-group-name {
  color: var(--refresh-ink);
  font-size: calc(22px * var(--text-scale, 1));
  line-height: 1.15;
}
#album-dialog.missions-screen[data-active-tab] .mission-group-name small {
  display: block;
  font-size: calc(14px * var(--text-scale, 1));
}
#album-dialog.missions-screen[data-active-tab] .mission-group-count {
  justify-self: start;
  padding: 1px 10px;
  border: 2px solid var(--edge);
  border-radius: 999px;
  background: var(--refresh-white);
  color: var(--refresh-ink);
}
#album-dialog.missions-screen[data-active-tab] .mission-group-bar {
  display: block;
  height: 12px;
  border: 2px solid var(--refresh-white);
  background: color-mix(in srgb, var(--edge) 55%, var(--refresh-white));
}
#album-dialog.missions-screen[data-active-tab] .mission-group-bar span {
  background: var(--fill);
}
#album-dialog.missions-screen[data-active-tab] .mission-group-chevron {
  box-sizing: border-box;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--refresh-white);
  box-shadow: 0 2px 4px rgb(31 79 120 / 0.2);
  transform: none;
}
#album-dialog.missions-screen[data-active-tab] .mission-group-chevron::after {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  margin: 10px auto 0;
  border-right: 3px solid var(--refresh-ink);
  border-bottom: 3px solid var(--refresh-ink);
  transform: rotate(45deg);
  transition:
    transform 220ms cubic-bezier(0.2, 0.75, 0.25, 1),
    margin-top 220ms cubic-bezier(0.2, 0.75, 0.25, 1);
}
#album-dialog.missions-screen[data-active-tab]
  [aria-expanded="true"]
  > .mission-group-chevron::after {
  margin-top: 14px;
  transform: rotate(-135deg);
}
@media (prefers-reduced-motion: reduce) {
  #album-dialog.missions-screen[data-active-tab] .mission-group-chevron::after {
    transition: none;
  }
}
html[data-appearance="dark"] #album-dialog.missions-screen[data-active-tab] .mission-group {
  background: var(--refresh-dark-card);
}
@media (max-width: 599px) {
  #album-dialog.missions-screen[data-active-tab] .mission-group-head {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "icon name count chevron"
      "icon bar bar chevron";
    gap: 6px 10px;
    min-height: 64px;
  }
  #album-dialog.missions-screen[data-active-tab] .mission-group-name {
    font-size: calc(18px * var(--text-scale, 1));
  }
  #album-dialog.missions-screen[data-active-tab] .mission-group-name small {
    display: none;
  }
  #album-dialog.missions-screen[data-active-tab] .mission-group-head .album-tile-icon {
    padding-right: 10px;
    font-size: 32px;
  }
}

/* Footer buttons: two big pills with an icon disc, a thin divider and English over Spanish.
   The intro is the blue one; Privacy is cream with a gold rim. */
#album-dialog.missions-screen[data-active-tab] .missions-foot {
  gap: 16px;
}
#album-dialog.missions-screen[data-active-tab] .missions-foot :is(#intro-home, .hub-privacy) {
  gap: 12px;
  min-height: 60px;
  padding: 8px 26px 8px 10px;
  border: 3px solid var(--refresh-white);
  border-radius: 999px;
  text-align: left;
}
#album-dialog.missions-screen[data-active-tab] .missions-foot #intro-home {
  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);
}
#album-dialog.missions-screen[data-active-tab]
  .missions-foot
  :is(#intro-home, .hub-privacy).hub-privacy {
  background: linear-gradient(var(--refresh-fffdf4), var(--refresh-fff3d3));
  color: var(--refresh-ink);
  box-shadow:
    0 0 0 2px var(--refresh-gold),
    0 4px 0 var(--refresh-d9ad3c);
}
#album-dialog.missions-screen[data-active-tab] .missions-foot .intro-home-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding-right: 0;
  border-radius: 50%;
  font-size: 18px;
}
#album-dialog.missions-screen[data-active-tab] .missions-foot #intro-home .intro-home-icon {
  background: var(--refresh-white);
  color: var(--refresh-blue-low);
}
#album-dialog.missions-screen[data-active-tab]
  .missions-foot
  :is(#intro-home, .hub-privacy).hub-privacy
  .intro-home-icon {
  background: transparent;
  font-size: 26px;
}
#album-dialog.missions-screen[data-active-tab] .missions-foot .intro-home-copy {
  display: grid;
  padding-left: 12px;
  border-left: 2px solid currentColor;
  border-left-color: rgb(255 255 255 / 0.6);
  line-height: 1.15;
}
#album-dialog.missions-screen[data-active-tab]
  .missions-foot
  :is(#intro-home, .hub-privacy).hub-privacy
  .intro-home-copy {
  border-left-color: var(--refresh-c9d6e2);
}
#album-dialog.missions-screen[data-active-tab] .missions-foot .intro-home-copy strong {
  font-size: calc(17px * var(--text-scale, 1));
  font-weight: 800;
}
#album-dialog.missions-screen[data-active-tab] .missions-foot .intro-home-copy small {
  display: block;
  margin: 0;
  font-size: calc(13px * var(--text-scale, 1));
  font-weight: 600;
  opacity: 0.85;
}
#album-dialog.missions-screen[data-active-tab]
  .missions-foot
  :is(#intro-home, .hub-privacy):active {
  transform: translateY(2px);
}
#album-dialog.missions-screen[data-active-tab] .missions-foot #intro-home:hover {
  background: linear-gradient(var(--refresh-5aa8ee), var(--refresh-2a70c0));
}
#album-dialog.missions-screen[data-active-tab]
  .missions-foot
  :is(#intro-home, .hub-privacy).hub-privacy:hover {
  background: linear-gradient(var(--refresh-white), var(--refresh-fff6dc));
}

/* The title gets the full card width below the picture, with play / replay in the top corner. */
#album-dialog.missions-screen[data-active-tab] .album-stickers .album-tile {
  --tile-tint: var(--refresh-e3f0ff);
  --tile-rim: var(--refresh-line);
  border: 2px solid var(--tile-rim);
  background:
    radial-gradient(
      90% 40% at 70% 125%,
      color-mix(in srgb, var(--tile-rim) 70%, var(--refresh-white)) 99%,
      transparent 100%
    ),
    linear-gradient(var(--refresh-white), var(--tile-tint));
  box-shadow:
    0 3px 0 color-mix(in srgb, var(--tile-rim) 80%, var(--refresh-white)),
    inset 0 2px 0 rgb(255 255 255 / 0.9);
}
#album-dialog.missions-screen[data-active-tab] .album-stickers > :nth-child(5n + 2) {
  --tile-tint: var(--refresh-fff4d6);
  --tile-rim: var(--refresh-f0d58f);
}
#album-dialog.missions-screen[data-active-tab] .album-stickers > :nth-child(5n + 3) {
  --tile-tint: var(--refresh-efe8fd);
  --tile-rim: var(--refresh-cfc0f2);
}
#album-dialog.missions-screen[data-active-tab] .album-stickers > :nth-child(5n + 4) {
  --tile-tint: var(--refresh-e2f6e6);
  --tile-rim: var(--refresh-b2dfbd);
}
#album-dialog.missions-screen[data-active-tab] .album-stickers > :nth-child(5n + 5) {
  --tile-tint: var(--refresh-fde6f1);
  --tile-rim: var(--refresh-f0bcd5);
}
#album-dialog.missions-screen[data-active-tab] .album-stickers .album-tile small {
  color: var(--refresh-ink);
  font-weight: 800;
  overflow-wrap: normal;
  text-wrap: balance;
}
.mission-sticker-stamp {
  display: grid;
  flex: none;
  place-items: center;
  position: relative;
  isolation: isolate;
}
.mission-sticker-stamp::before {
  position: absolute;
  z-index: -1;
  inset: -3px;
  border: 2px solid var(--refresh-white);
  border-radius: 34% 42% 36% 44%;
  background: var(--tile-tint);
  box-shadow: 0 2px 0 var(--tile-rim);
  transform: rotate(-9deg);
  content: "";
}
.album-stickers [data-unlocked="true"] .mission-sticker-stamp::after {
  position: absolute;
  top: -3px;
  right: -4px;
  width: 10px;
  height: 10px;
  background: var(--refresh-f2a91c);
  clip-path: polygon(50% 0, 64% 36%, 100% 50%, 64% 64%, 50% 100%, 36% 64%, 0 50%, 36% 36%);
  content: "";
}
@media (min-width: 760px) {
  #album-dialog.missions-screen[data-active-tab] .mission-group .album-stickers {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }
  #album-dialog.missions-screen[data-active-tab] .album-stickers .album-tile {
    gap: 8px;
    min-height: 96px;
    padding: 10px 8px;
  }
  #album-dialog.missions-screen[data-active-tab] .album-stickers .album-tile .album-tile-icon {
    flex: none;
    width: 46px;
    height: 46px;
    font-size: 40px;
  }
  #album-dialog.missions-screen[data-active-tab] .album-stickers .album-tile small {
    font-size: calc(17px * var(--text-scale, 1));
    line-height: 1.15;
  }
}
html[data-appearance="dark"]
  #album-dialog.missions-screen[data-active-tab]
  .album-stickers
  .album-tile {
  background: var(--refresh-dark-card);
}
html[data-appearance="dark"]
  #album-dialog.missions-screen[data-active-tab]
  .album-stickers
  .album-tile
  small {
  color: inherit;
}

/* "How to win": a wide white pill with a blue arrow that turns when it opens and a chevron at the end. */
#album-dialog .trophy-guide {
  margin-bottom: 8px;
  border: 2px solid var(--ad-line-soft);
  border-radius: 28px;
  background: var(--ad-surface);
  box-shadow:
    inset 0 0 0 2px var(--ad-neutral-top),
    0 4px 10px rgb(35 62 100 / 0.12);
}
#album-dialog .trophy-guide summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding-inline: 18px;
  border-radius: 26px;
  color: var(--ad-ink);
  font-size: calc(17px * var(--text-scale, 1));
  font-weight: 900;
  list-style: none;
  cursor: pointer;
}
#album-dialog .trophy-guide summary::-webkit-details-marker {
  display: none;
}
#album-dialog .trophy-guide summary::before {
  content: "";
  flex: none;
  width: 0.7em;
  height: 0.8em;
  background: var(--ad-ink-blue);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
#album-dialog .trophy-guide summary::after {
  content: "";
  flex: none;
  width: 0.5em;
  height: 0.5em;
  margin-inline: auto 6px;
  border: solid var(--ad-ink-blue);
  border-width: 0.16em 0.16em 0 0;
  border-radius: 2px;
  rotate: 45deg;
}
#album-dialog .trophy-guide[open] summary::before {
  rotate: 90deg;
}
#album-dialog .trophy-guide[open] summary::after {
  rotate: 135deg;
}
.trophy-guide-medal {
  font-size: 1.4em;
  line-height: 1;
}
.trophy-guide summary small {
  margin-inline-start: 4px;
  color: var(--ad-ink-muted);
  font-weight: 700;
}
@media (orientation: landscape) and (min-width: 768px) and (min-height: 640px) {
  #album-dialog .trophy-guide summary {
    min-height: 60px;
    font-size: calc(20px * var(--text-scale, 1));
  }
}
/* The stars chip is a button: a clear one stretched over the chip, with a small "?" in its corner. */
.trophy-stat[data-stat="stars"] {
  position: relative;
}
#album-dialog .trophy-stat-more {
  position: absolute;
  top: 0;
  left: 0;
  /* Sized outright: the chip's centering (align-self, justify-items) would shrink it to its empty content. */
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
#album-dialog .trophy-stat-more:active {
  background: rgb(122 90 20 / 0.08);
}
#album-dialog .trophy-stat-more::after {
  content: "?" / "";
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ad-ink-blue);
  color: var(--ad-surface);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}
@media (orientation: landscape) and (min-width: 768px) and (min-height: 640px) {
  #album-dialog .trophy-stat-more::after {
    top: 5px;
    right: 6px;
    width: 22px;
    height: 22px;
    font-size: 14px;
  }
}

/* Stars guide: a gold card over Trophies with the ways to win stars and, below, every level with the
   total stars it asks for and the hero it opens. Only the level list scrolls, centered on the next one. */
.stars-guide {
  width: min(660px, calc(100% - 32px));
  max-height: min(780px, calc(100dvh - 32px));
  padding: 0;
  overflow: hidden;
  border: 3px solid var(--ad-line-gold);
  border-radius: 28px;
  background: linear-gradient(var(--ad-gold-top), var(--ad-surface) 160px);
  box-shadow:
    0 8px 0 var(--ad-gold-edge),
    0 18px 40px rgb(0 0 0 / 0.25);
  color: var(--ad-ink);
}
.stars-guide[open] {
  display: flex;
}
.stars-guide::backdrop {
  background: rgb(20 40 70 / 0.45);
}
.stars-guide-sheet {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 12px 20px 0;
}
.stars-guide-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.stars-guide-icon {
  font-size: 34px;
  line-height: 1;
}
/* Above "#album-dialog h3", which sizes the section titles of Missions. */
#album-dialog .stars-guide h3 {
  flex: 1;
  margin: 0;
  font-size: calc(24px * var(--text-scale, 1));
  font-weight: 900;
  line-height: 1.15;
  text-align: start;
}
#album-dialog .stars-guide h4 {
  margin: 2px 0 0;
  font-size: calc(19px * var(--text-scale, 1));
  font-weight: 900;
}
.stars-guide :is(h3, h4) small {
  display: block;
  color: var(--ad-ink-muted);
  font-size: 0.7em;
  font-weight: 700;
}
#album-dialog .stars-guide-close {
  flex: none;
  width: 44px;
  height: 44px;
  border: 2px solid var(--ad-line-soft);
  border-radius: 50%;
  background: var(--ad-surface);
  box-shadow: 0 3px 0 var(--ad-line-soft);
  color: var(--ad-ink);
  font: inherit;
  font-size: 24px;
  font-weight: 900;
  cursor: pointer;
}
.stars-guide-ways {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.stars-guide-ways li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "icon value" "icon label";
  align-items: center;
  justify-items: start;
  column-gap: 8px;
  padding: 6px 10px;
  border: 2px solid var(--ad-line-soft);
  border-radius: 16px;
  background: var(--ad-surface);
}
.stars-guide-ways li > span {
  grid-area: icon;
  font-size: 30px;
  line-height: 1;
}
.stars-guide-ways strong {
  grid-area: value;
  color: var(--ad-ink-gold);
  font-size: calc(18px * var(--text-scale, 1));
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}
.stars-guide-ways small {
  grid-area: label;
  font-size: calc(13px * var(--text-scale, 1));
  font-weight: 800;
  line-height: 1.1;
}
.stars-guide-ways small [lang="es"] {
  display: block;
  color: var(--ad-ink-muted);
  font-weight: 600;
}
.stars-guide-tip {
  margin: 0;
  font-size: calc(15px * var(--text-scale, 1));
  font-weight: 800;
  text-align: center;
}
/* Coins: what a star pays and how the daily streak multiplies it, kept to three short rows: title with the
   child's streak, one sentence, and the steps side by side (the current one lit, past ones plain). */
.stars-guide-coins {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px 12px;
  padding: 6px 12px;
  border: 2px solid var(--ad-line-gold);
  border-radius: 16px;
  background: var(--ad-tint-gold);
}
#album-dialog .stars-guide-coins h4 {
  margin: 0;
  font-size: calc(17px * var(--text-scale, 1));
}
.stars-guide-coins p {
  margin: 0;
  font-size: calc(14px * var(--text-scale, 1));
  font-weight: 700;
}
.stars-guide-coins p:not(.stars-guide-streak-now) {
  grid-column: 1 / -1;
}
.stars-guide :is(.stars-guide-coins :is(h4, p), .stars-guide-tip) small {
  display: inline;
  margin-inline-start: 4px;
  color: var(--ad-ink-muted);
  font-size: 0.85em;
  font-weight: 600;
}
.stars-guide-streak-now {
  grid-row: 1;
  grid-column: 2;
  color: var(--ad-ink-gold);
  text-align: end;
}
.stars-guide-streak {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}
.stars-guide-streak li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 6px;
  padding: 3px 4px;
  border: 2px solid var(--ad-line-soft);
  border-radius: 12px;
  background: var(--ad-surface);
  text-align: center;
}
.stars-guide-streak strong {
  font-size: calc(16px * var(--text-scale, 1));
  font-weight: 900;
}
.stars-guide-streak small {
  color: var(--ad-ink-muted);
  font-size: calc(12px * var(--text-scale, 1));
  font-weight: 700;
}
.stars-guide-streak li[data-state="now"] {
  border-color: var(--ad-line-gold);
  background: linear-gradient(var(--ad-gold-top), var(--ad-gold-face));
  box-shadow: 0 2px 0 var(--ad-gold-edge);
  color: var(--ad-ink-gold);
}
.stars-guide-streak li[data-state="later"] {
  opacity: 0.7;
}
/* Phones: the Spanish glosses of this block go, as everywhere in Missions. */
@media (max-width: 599px), (max-height: 500px) {
  .stars-guide-coins [lang="es"] {
    display: none;
  }
}
/* A plain block list: as grid tracks, the rows stayed at their minimum height and clipped the note. */
.stars-guide-levels {
  position: relative;
  flex: 1;
  min-height: 120px;
  margin: 0 -20px;
  padding: 2px 20px 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}
.stars-level {
  display: grid;
  grid-template-columns: 64px 48px minmax(0, 1fr) auto 32px;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 6px 12px;
  border: 2px solid var(--ad-line-soft);
  border-radius: 18px;
  background: var(--ad-surface);
}
.stars-level + .stars-level {
  margin-top: 6px;
}
.stars-level-number {
  justify-self: start;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--ad-blue-top);
  color: var(--ad-blue-ink);
  font-size: calc(15px * var(--text-scale, 1));
  font-weight: 900;
  white-space: nowrap;
}
/* The hero's portrait (or its emoji); level 1 shows its four free heroes in a 2×2 grid. */
.stars-level-hero {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  font-size: 34px;
  line-height: 1;
}
.stars-level-hero > span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: center / contain no-repeat;
}
.stars-level-hero[data-count="4"] {
  grid-template-columns: 1fr 1fr;
  font-size: 19px;
}
.stars-level-name strong {
  display: block;
  font-size: calc(17px * var(--text-scale, 1));
  font-weight: 900;
  line-height: 1.15;
}
.stars-level-name small {
  display: block;
  color: var(--ad-ink-muted);
  font-size: calc(14px * var(--text-scale, 1));
  font-weight: 700;
}
.stars-level-note {
  display: inline-block;
  margin-top: 3px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--ad-gold-face);
  color: var(--ad-gold-ink);
  font-size: calc(14px * var(--text-scale, 1));
  font-weight: 900;
}
.stars-level-stars {
  color: var(--ad-ink-gold);
  font-size: calc(19px * var(--text-scale, 1));
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stars-level-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 900;
}
.stars-level[data-state="done"] .stars-level-mark {
  background: var(--refresh-2f9e46);
  color: var(--refresh-white);
}
.stars-level[data-state="now"] {
  border-color: var(--ad-line-gold);
  background: linear-gradient(var(--ad-gold-top), var(--ad-gold-face));
  box-shadow: 0 3px 0 var(--ad-gold-edge);
}
.stars-level[data-state="now"] .stars-level-number {
  background: var(--ad-ink-gold);
  color: var(--ad-gold-top);
}
.stars-level[data-state="next"] {
  border-color: var(--ad-blue-edge);
}
.stars-level[data-state="later"] :is(.stars-level-hero, .stars-level-mark) {
  opacity: 0.55;
  filter: grayscale(1);
}
/* Phones: the four ways in a 2×2 grid and tighter level rows (the Spanish gloss goes, as in Missions). */
@media (max-width: 599px), (max-height: 500px) {
  .stars-guide-sheet {
    gap: 8px;
    padding: 12px 12px 0;
  }
  .stars-guide-icon {
    font-size: 32px;
  }
  #album-dialog .stars-guide h3 {
    font-size: calc(19px * var(--text-scale, 1));
  }
  #album-dialog .stars-guide-close {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
  .stars-guide-ways {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .stars-guide-ways li {
    padding: 4px 8px;
  }
  .stars-guide-ways li > span {
    font-size: 26px;
  }
  .stars-guide-levels {
    margin-inline: -12px;
    padding-inline: 12px;
  }
  .stars-level {
    grid-template-columns: 48px 36px minmax(0, 1fr) auto 26px;
    gap: 6px;
    min-height: 52px;
    padding: 4px 8px;
  }
  .stars-level-number {
    padding-inline: 6px;
    font-size: calc(13px * var(--text-scale, 1));
  }
  .stars-level-hero {
    width: 36px;
    height: 36px;
    font-size: 26px;
  }
  .stars-level-hero[data-count="4"] {
    font-size: 15px;
  }
  .stars-level-stars {
    font-size: calc(16px * var(--text-scale, 1));
  }
  .stars-level-mark {
    width: 24px;
    height: 24px;
    font-size: 13px;
  }
}

.trophy-guide-languages {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 10px 10px;
  padding: 4px 0 0;
  border: 0;
}
.trophy-guide-languages label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding-inline: 8px;
  border: 1px solid var(--color-line-practice);
  border-radius: 999px;
  background: var(--ad-surface-tint);
  cursor: pointer;
}
.trophy-guide-languages label:has(:checked) {
  background: var(--ad-soft);
  font-weight: 800;
}
#album-dialog .trophy-guide ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 8px;
  margin: 0;
  padding: 0 10px 10px;
  list-style: none;
}
.trophy-guide li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--color-line-practice);
  border-radius: 12px;
  background: var(--ad-surface-tint);
}
.trophy-guide li:first-child {
  grid-column: 1 / -1;
  background: var(--ad-tint-cream);
}
.trophy-guide-icon {
  font-size: 26px;
  line-height: 1.15;
}
#album-dialog .trophy-guide .trophy-guide-copy {
  display: block;
}
.trophy-guide-copy + .trophy-guide-copy {
  margin-top: 6px;
}
.trophy-guide-copy p {
  margin: 2px 0 0;
}
#album-dialog .trophy-guide:has([value="es"]:checked) :is(.trophy-guide-copy, .trophy-guide-next > span)[lang="en"],
#album-dialog .trophy-guide:has([value="en"]:checked) :is(.trophy-guide-copy, .trophy-guide-next > span)[lang="es"] {
  display: none;
}
/* My hero: section jump bar as raised pills (the current one blue), the prizes line as a pill bar,
   bigger section titles and hero cards with a coloured level chip. */
#album-dialog.missions-screen[data-active-tab] .profile-jumpbar button {
  border: 2px solid var(--refresh-line);
  border-radius: 999px;
  background: linear-gradient(var(--refresh-white), var(--refresh-sky-soft));
  box-shadow:
    0 4px 0 var(--refresh-c9dced),
    inset 0 2px 0 var(--refresh-white);
  color: var(--refresh-ink);
  font-weight: 800;
}
#album-dialog.missions-screen[data-active-tab] .profile-jumpbar button[aria-current="location"] {
  border-color: var(--refresh-blue-deep);
  background: linear-gradient(var(--refresh-blue-top), var(--refresh-blue-deep));
  box-shadow: 0 4px 0 var(--refresh-174a79);
  color: var(--refresh-white);
}
#album-dialog.missions-screen[data-active-tab] #profile-panel-hero h3 {
  color: var(--refresh-ink);
  font-size: calc(22px * var(--text-scale, 1));
}
#album-dialog.missions-screen[data-active-tab]
  #profile-panel-hero
  .album-tile:not([data-unlocked="false"]) {
  border: 2px solid var(--refresh-c4dcef);
  background: linear-gradient(var(--refresh-white), var(--refresh-eef6ff));
  box-shadow:
    0 3px 0 var(--refresh-d3e3f0),
    inset 0 2px 0 var(--refresh-white);
}
#album-dialog.missions-screen[data-active-tab] #profile-panel-hero .album-tile small {
  color: var(--refresh-ink);
  font-weight: 800;
}
/* What a bought item cost, under its name: a gold outline, since the filled gold pill is a price still to pay. */
#album-dialog.missions-screen[data-active-tab] #profile-panel-hero .album-tile .album-tile-paid {
  padding: 1px 8px;
  border: 1.5px solid var(--ad-line-gold);
  border-radius: 999px;
  color: var(--ad-ink-gold);
  white-space: nowrap;
}
#album-dialog.missions-screen[data-active-tab] .profile-heroes .album-tile-level {
  padding: 1px 10px;
  border: 2px solid var(--refresh-line);
  border-radius: 999px;
  background: var(--refresh-sky-soft);
  color: var(--refresh-blue-deep);
  font-weight: 800;
}
#album-dialog.missions-screen[data-active-tab]
  .profile-heroes
  .album-tile:nth-child(5n + 2)
  .album-tile-level {
  border-color: var(--refresh-b2dfbd);
  background: var(--refresh-e2f6e6);
  color: var(--refresh-23744a);
}
#album-dialog.missions-screen[data-active-tab]
  .profile-heroes
  .album-tile:nth-child(5n + 3)
  .album-tile-level {
  border-color: var(--refresh-cfc0f2);
  background: var(--refresh-efe8fd);
  color: var(--refresh-5b3fae);
}
#album-dialog.missions-screen[data-active-tab]
  .profile-heroes
  .album-tile:nth-child(5n + 4)
  .album-tile-level {
  border-color: var(--refresh-f0d58f);
  background: var(--refresh-fff4d6);
  color: var(--refresh-7a5200);
}
#album-dialog.missions-screen[data-active-tab]
  .profile-heroes
  .album-tile:nth-child(5n + 5)
  .album-tile-level {
  border-color: var(--refresh-f0bcd5);
  background: var(--refresh-fde6f1);
  color: var(--refresh-a2346b);
}
/* Phones: both footer pills share one row; smaller disc and type, and only the English label. */
@media (max-width: 599px) {
  #album-dialog.missions-screen[data-active-tab] .missions-foot {
    flex-wrap: nowrap;
    gap: 8px;
  }
  #album-dialog.missions-screen[data-active-tab] .missions-foot :is(#intro-home, .hub-privacy) {
    flex: 1 1 0;
    min-width: 0;
    min-height: 52px;
    gap: 8px;
    padding: 6px 12px 6px 6px;
  }
  #album-dialog.missions-screen[data-active-tab] .missions-foot .intro-home-icon {
    flex: none;
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
  #album-dialog.missions-screen[data-active-tab]
    .missions-foot
    :is(#intro-home, .hub-privacy).hub-privacy
    .intro-home-icon {
    font-size: 20px;
  }
  #album-dialog.missions-screen[data-active-tab] .missions-foot .intro-home-copy {
    min-width: 0;
    padding-left: 8px;
  }
  #album-dialog.missions-screen[data-active-tab] .missions-foot .intro-home-copy strong {
    font-size: calc(14px * var(--text-scale, 1));
    white-space: nowrap;
  }
  #album-dialog.missions-screen[data-active-tab] .missions-foot .intro-home-copy small {
    display: none;
  }
}
/* The narrowest phones drop the divider and tighten the type so "Watch the intro" still fits on its pill. */
@media (max-width: 360px) {
  #album-dialog.missions-screen[data-active-tab] .missions-foot :is(#intro-home, .hub-privacy) {
    gap: 6px;
    padding-right: 8px;
  }
  #album-dialog.missions-screen[data-active-tab] .missions-foot .intro-home-copy {
    padding-left: 0;
    border-left: 0;
  }
  #album-dialog.missions-screen[data-active-tab] .missions-foot .intro-home-copy strong {
    font-size: calc(13px * var(--text-scale, 1));
  }
}

#album-dialog.missions-screen[data-active-tab] .profile-hero-portrait {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.profile-hero-image {
  width: 40px;
  height: 40px;
  max-width: 100%;
  object-fit: contain;
}

#album-dialog.missions-screen[data-active-tab] .profile-heroes [data-next="true"] .album-tile-level {
  border-color: var(--refresh-gold);
  background: var(--refresh-fff4d6);
  color: var(--refresh-7a5200);
}

/* The corner marker stays in the same place across all five prize grids. */
#album-dialog.missions-screen[data-active-tab] #profile-panel-hero .album-tile {
  position: relative;
}
#album-dialog.missions-screen[data-active-tab] #profile-panel-hero .album-tile::before {
  content: "✓" / "";
  position: absolute;
  inset-block-start: 4px;
  inset-inline-end: 4px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ad-tint-mint);
  color: var(--ad-ink-green);
  font: 800 12px/1 system-ui;
  pointer-events: none;
}
#album-dialog.missions-screen[data-active-tab] #profile-panel-hero .album-tile[data-unlocked="false"] {
  border: 2px dashed var(--ad-line-soft);
  background: var(--ad-surface-tint);
  box-shadow: none;
}
#album-dialog.missions-screen[data-active-tab] #profile-panel-hero .album-tile[data-unlocked="false"]::before {
  content: "🔒" / "";
  background: var(--ad-soft);
}
#album-dialog.missions-screen[data-active-tab] #profile-panel-hero .album-tile[data-unlocked="false"]
  :is(.album-tile-icon, .profile-background-art) {
  filter: saturate(0.45);
  opacity: 0.7;
}
#album-dialog.missions-screen[data-active-tab] #profile-panel-hero .album-tile[aria-pressed="true"] {
  border-color: var(--ad-ink-green);
  box-shadow: inset 0 0 0 1px var(--ad-ink-green);
}
#album-dialog.missions-screen[data-active-tab] #profile-panel-hero .album-tile[aria-pressed="true"]::before {
  background: var(--ad-ink-green);
  color: var(--ad-tint-mint);
}

.mission-group-study {
  white-space: nowrap;
}
.study-marks {
  display: flex;
  justify-content: center;
  gap: 6px;
}
.study-marks [data-step] {
  position: relative;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 16px;
}
.study-marks [data-done="false"] {
  background: var(--ad-soft);
  filter: grayscale(1);
  opacity: 0.65;
}
.study-marks [data-done="true"] {
  background: var(--ad-mint-face);
}
.study-marks [data-done="true"]::after {
  content: "✓" / "";
  position: absolute;
  inset: auto -3px -2px auto;
  border-radius: 50%;
  padding: 1px 3px;
  background: #216647;
  color: white;
  font: 800 0.65em/1.1 sans-serif;
}
@media (orientation: landscape) and (min-width: 768px) and (min-height: 640px) {
  .study-marks [data-step] {
    width: 40px;
    height: 40px;
    font-size: 30px;
  }
}

.mission-trophy[data-studied="true"] .mission-trophy-icon::after {
  content: "📖" / "";
  position: absolute;
  inset: auto -0.6em -0.1em auto;
  padding: 0.2em 0.25em;
  border: 2px solid var(--ad-mint-edge);
  border-radius: 0.4em 0.4em 0.4em 0;
  background: var(--ad-mint-face);
  font-size: 0.45em;
}
.trophy-guide-next {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  min-height: 44px;
  margin-top: 8px;
  padding: 4px 10px;
  border: 1px solid var(--ad-blue-edge);
  border-radius: 12px;
  background: var(--ad-blue-face);
  color: var(--ad-blue-ink);
  font: inherit;
  font-weight: 700;
}
@media (orientation: landscape) and (min-width: 768px) and (min-height: 640px) {
  .trophy-guide-next {
    min-height: 56px;
  }
}

.mission-topic-choice {
  position: relative;
  display: grid;
  min-width: 0;
}
#album-dialog .mission-topic-favorite {
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 3px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: calc(18.63px * var(--text-scale, 1));
}