/* Resultado final, premios y desbloqueos de los ejercicios. */
/* Every challenge ends with the same centered action, including Watch and daily review. */
#practice-bar.is-practicing[data-result="complete"] {
  /* The result covers the stage below the header (its height is measured in practice.js), centred, and scrolls when a screen is too short. */
  position: fixed;
  inset: var(--game-header-h, 52px) 0 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 200px));
  /* Two flexible spacer rows centre the content; when it is taller than the screen they collapse and the result scrolls from the top. */
  grid-template-rows: minmax(0, 1fr) max-content max-content max-content max-content minmax(0, 1fr);
  align-content: start;
  justify-content: center;
  justify-items: center;
  gap: 16px 8px;
  width: auto;
  height: auto;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 16px;
  border: 0;
  border-radius: 0;
  background: #fbfff9;
  overflow-y: auto;
  pointer-events: none;
}
#practice-bar.is-practicing[data-result="complete"] > * {
  pointer-events: auto;
}
#practice-bar.is-practicing[data-result="complete"]::before,
#practice-bar.is-practicing[data-result="complete"]::after {
  content: "";
  grid-column: 1 / -1;
}
#practice-bar.is-practicing[data-result="complete"]::before {
  grid-row: 1;
}
#practice-bar.is-practicing[data-result="complete"]::after {
  grid-row: 5;
}
#practice-bar.is-practicing[data-result="complete"]
  > :is(#practice-title, #practice-progress, .number-tools) {
  display: none;
}
#practice-bar.is-practicing[data-result="complete"] #practice-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
/* The end card has its own back (#finale-album, under the next challenge): no second one on top. */
#practice-bar.is-practicing[data-result="complete"] #practice-toggle {
  display: none;
}
#practice-bar.is-practicing[data-result="complete"] #practice-finale {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: end;
  width: min(520px, calc(100vw - 32px));
  min-height: 0;
}
/* The primary action is the next challenge: children want more stars, not the same game again. */
#practice-bar.is-practicing[data-result="complete"] #finale-next {
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: min(520px, calc(100vw - 32px));
  justify-self: center;
  min-height: 88px;
  padding: 14px 24px;
  border: 2px solid #28664f;
  border-radius: 22px;
  color: var(--color-surface);
  font-size: calc(26px * var(--text-scale, 1));
  font-weight: 800;
  line-height: 1.2;
}
#practice-bar.is-practicing[data-result="complete"] #finale-next[hidden] {
  display: none;
}
#practice-bar.is-practicing[data-result="complete"] #finale-next:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #20553f;
}
#practice-bar.is-practicing[data-result="complete"] #finale-next small {
  display: block;
  font-size: calc(14px * var(--text-scale, 1));
  font-weight: 600;
  color: inherit;
}
#practice-bar.is-practicing[data-result="complete"] .finale-next-icon {
  font-size: 1.5em;
  line-height: 1;
}
#practice-bar.is-practicing[data-result="complete"] #watch-collection {
  grid-column: 1 / -1;
  grid-row: auto;
}
/* Two clear exits: the next challenge above and back to where the challenge was opened below it;
   Play again stays as a small quiet link at the bottom. */
#practice-bar.is-practicing[data-result="complete"] #finale-album {
  grid-column: 1 / -1;
  grid-row: 4;
}
#practice-bar.is-practicing[data-result="complete"] #practice-next {
  grid-column: 1 / -1;
  grid-row: 5;
}
#practice-bar.is-practicing[data-result="complete"] :is(#practice-next, #finale-album) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  align-self: stretch;
  gap: 2px 6px;
  /* The exits share the result card's width. */
  width: min(520px, calc(100vw - 32px));
  justify-self: center;
  min-height: 52px;
  margin: 0;
  padding: 6px 10px;
  border: 2px solid var(--ad-line-soft);
  border-radius: 16px;
  background: var(--color-surface);
  color: var(--color-ink-dialog);
  box-shadow: 0 3px 0 var(--ad-edge);
  font-size: calc(15px * var(--text-scale, 1));
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
#practice-bar.is-practicing[data-result="complete"] :is(#practice-next, #finale-album)[hidden] {
  display: none;
}
#practice-bar.is-practicing[data-result="complete"] #finale-album {
  gap: 8px;
  min-height: 64px;
  border-color: #9cc3ea;
  color: var(--ad-ink-blue);
  font-size: calc(20px * var(--text-scale, 1));
  font-weight: 800;
}
#practice-bar.is-practicing[data-result="complete"] #practice-next {
  justify-self: center;
  width: auto;
  min-height: 44px;
  padding: 4px 16px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--color-ink-description);
  text-decoration: underline;
  text-underline-offset: 3px;
}
#practice-bar.is-practicing[data-result="complete"] :is(#practice-next, #finale-album) small {
  font-weight: 500;
  color: var(--color-ink-description);
  font-size: calc(12px * var(--text-scale, 1));
}
html[data-appearance="dark"]
  #practice-bar.is-practicing[data-result="complete"]
  :is(#practice-next, #finale-album) {
  border-color: #3d5b73;
  background: #2b455c;
  box-shadow: 0 3px 0 var(--ad-edge);
}
@media (max-width: 480px), (max-height: 560px) {
  #practice-bar.is-practicing[data-result="complete"] :is(#practice-next, #finale-album) small {
    display: none;
  }
}
@media (max-height: 560px) {
  #practice-bar.is-practicing[data-result="complete"] :is(#practice-next, #finale-album) {
    min-height: 44px;
  }
}
@media (max-width: 360px) {
  #practice-bar.is-practicing[data-result="complete"] :is(#practice-next, #finale-album) {
    flex-wrap: nowrap;
    gap: 4px;
    padding-inline: 4px;
    font-size: calc(14px * var(--text-scale, 1));
  }
}
html[data-appearance="dark"] #practice-bar.is-practicing[data-result="complete"] {
  background: #243d43;
}
.practice-active:not([data-practice-mode="watch"]) .practice-bar.is-practicing #practice-finale {
  grid-row: 5;
}
#practice-finale[hidden] {
  display: none;
}
#practice-finale {
  grid-column: 1/4;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 20px 16px 18px;
  border: 1px solid #9fd2bd;
  border-radius: 22px;
  background: linear-gradient(#e1f6ec, #f6fffb);
  text-align: center;
}
.finale-trophy {
  font-size: 52px;
  line-height: 1.1;
  animation: trophy-bounce 0.8s cubic-bezier(0.3, 1.6, 0.5, 1);
}
#practice-finale > strong {
  color: #23594a;
  font-size: calc(24px * var(--text-scale, 1));
  line-height: 1.2;
}
#practice-finale > strong small {
  display: block;
  font-size: calc(12px * var(--text-scale, 1));
  font-weight: 500;
  color: #4a7a6c;
}
.finale-stars {
  display: flex;
  gap: 14px;
  margin-top: 2px;
}
.finale-stars span {
  display: inline-block;
  font-size: 40px;
  line-height: 1.1;
  animation: star-in 0.5s calc(0.25s + var(--i) * 0.18s) both cubic-bezier(0.3, 1.6, 0.5, 1);
}
.finale-stars [data-earned="false"] {
  opacity: 0.22;
  filter: grayscale(1) brightness(1.1);
  transform: scale(0.85);
}
.finale-note {
  color: #23594a;
  font-size: calc(15px * var(--text-scale, 1));
  font-weight: 700;
  line-height: 1.3;
}
@keyframes trophy-bounce {
  0% {
    transform: scale(0.3) translateY(10px);
  }
  70% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes star-in {
  from {
    transform: scale(0) rotate(-40deg);
    opacity: 0;
  }
  to {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(
    #practice-trail li,
    #practice-streak,
    .practice-active #practice-choices button,
    #practice-next,
    .finale-trophy,
    .finale-stars span
  ) {
    animation: none !important;
  }
}
html[data-calm="true"]
  :is(
    #practice-trail li,
    #practice-streak,
    .practice-active #practice-choices button,
    #practice-next,
    .finale-trophy,
    .finale-stars span
  ) {
  animation: none !important;
}
html[data-appearance="dark"] #practice-finale {
  background: linear-gradient(#2f4f47, #2b3a40);
  border-color: #5b8f80;
}
html[data-appearance="dark"] .finale-rewards {
  border-top-color: #4a7a6c;
}
html[data-appearance="dark"] #practice-finale > strong {
  color: #d6f2e6;
}
html[data-appearance="dark"] #practice-finale > strong small,
html[data-appearance="dark"] .finale-note {
  color: #b6d8cc;
}
@media (max-width: 850px), (pointer: coarse) and (max-width: 1100px) {
  .finale-trophy {
    font-size: 44px;
  }

  .finale-stars span {
    font-size: 36px;
  }
}
@media (orientation: landscape) and (max-height: 500px) {
  #practice-finale {
    grid-template-columns: auto auto auto;
    align-items: center;
    gap: 8px;
  }


  .finale-note,
  #practice-finale > strong small {
    display: none;
  }
}
.finale-rewards {
  display: grid;
  justify-items: center;
  width: 100%;
  margin: 6px 0 0;
}
/* One row of the balanced layout (see balancedRows): its tiles share the width evenly. */
.finale-reward-row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  max-width: 100%;
}
.finale-rewards[hidden] {
  display: none;
}
.finale-unlock {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  min-width: 84px;
  padding: 10px 12px 8px;
  border: 2px solid #9fd2bd;
  border-radius: 18px;
  background: var(--color-surface);
  color: var(--color-ink-album);
  animation: streak-pop 0.5s calc(0.5s + var(--i, 0) * 0.15s) both cubic-bezier(0.3, 1.6, 0.5, 1);
}
.finale-unlock-icon {
  font-size: calc(34px * var(--text-scale, 1));
  line-height: 1.1;
}
.finale-unlock-name {
  font-size: calc(13px * var(--text-scale, 1));
  font-weight: 700;
}
.finale-unlock[data-kind="new"] {
  border-color: var(--ad-mint-edge);
  background: #d4f2e4;
}
/* The chip says what the tile paid: +1 ⭐ for a new achievement, the level for a new hero. */
.finale-unlock[data-kind="new"]::after {
  content: attr(data-chip);
  order: -1;
  padding: 1px 8px;
  border: 1px solid var(--ad-line-gold);
  border-radius: 999px;
  background: var(--ad-tint-gold);
  color: var(--ad-ink-gold);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.finale-unlock[data-kind="level"] {
  border-color: #7fb3dc;
  background: var(--ad-soft-keep);
  color: var(--ad-ink-deep);
}
.finale-unlock[data-kind="level"]::after {
  content: attr(data-chip);
  order: -1;
  padding: 1px 8px;
  border-radius: 999px;
  background: #3b86c6;
  color: var(--color-surface);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
#finale-album {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
  min-height: 44px;
  padding: 6px 18px;
  border: 2px solid #9fd2bd;
  border-radius: 14px;
  background: var(--color-surface);
  color: var(--color-ink-reward);
  font-size: calc(15px * var(--text-scale, 1));
  font-weight: 700;
  box-shadow: 0 3px 0 #bfe3d3;
}
#finale-album small {
  font-weight: 500;
  color: #4a7a6c;
}
html[data-calm="true"] .finale-unlock {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .finale-unlock {
    animation: none;
  }
}
html[data-appearance="dark"] .finale-unlock {
  background: #3b4a52;
  border-color: #5b8f80;
  color: #e0f5ec;
}
html[data-appearance="dark"] .finale-unlock[data-kind="new"] {
  background: #2f5f50;
}
html[data-appearance="dark"] .finale-unlock[data-kind="level"] {
  background: #2f5574;
  color: var(--ad-ink-deep);
}
html[data-appearance="dark"] #finale-album small {
  color: #b6d8cc;
}
html[data-appearance="dark"] #finale-album {
  background: var(--ad-soft);
  border-color: #5b8f80;
  color: #d6f2e6;
}
@media (orientation: landscape) and (max-height: 500px) {
  #finale-album {
    grid-column: 1/-1;
  }

  .finale-rewards {
    grid-column: 1/-1;
  }
}
/* Phones and short portrait screens: the same card with a little less air; the result scrolls if it still does not fit. */
@media (max-height: 860px) and (orientation: portrait) {
  .finale-trophy {
    font-size: 40px !important;
  }

  #practice-finale {
    gap: 8px;
    padding: 16px 12px 14px;
  }

  #practice-finale > strong {
    font-size: calc(21px * var(--text-scale, 1));
  }

  #practice-finale > strong small {
    display: none;
  }

  .finale-stars {
    gap: 12px;
  }

  .finale-stars span {
    font-size: 32px !important;
  }

  .finale-rewards,
  .finale-reward-row {
    gap: 10px;
  }

  .finale-rewards {
    margin-top: 4px;
    padding-top: 12px;
  }

  .finale-unlock {
    min-width: 72px;
    padding: 8px 8px 6px;
    border-radius: 16px;
  }

  .finale-unlock-name {
    font-size: calc(12px * var(--text-scale, 1));
    line-height: 1.2;
  }

  .finale-unlock-icon {
    font-size: calc(30px * var(--text-scale, 1));
  }
}
@media (orientation: landscape) and (max-height: 500px) {
  .finale-rewards,
  .finale-reward-row {
    gap: 4px;
  }

  .finale-rewards {
    margin: 0;
  }

  .finale-unlock {
    min-width: 0;
    padding: 3px 6px 2px;
    border-radius: 10px;
    grid-template-columns: auto;
    gap: 0;
  }

  .finale-unlock-icon {
    font-size: 20px;
  }

  .finale-unlock-name {
    font-size: 10px;
    white-space: nowrap;
  }

  .finale-unlock::after {
    top: -7px !important;
    font-size: 8px !important;
    padding: 0 5px !important;
  }

  #finale-album {
    min-height: 30px;
    margin: 0;
    padding: 2px 12px;
    font-size: 13px;
  }

  #finale-album small {
    display: none;
  }

  .finale-trophy {
    font-size: 22px !important;
  }

  .finale-stars span {
    font-size: 24px !important;
  }

  #practice-finale {
    padding: 4px 8px;
    row-gap: 2px;
  }

  #practice-finale > strong {
    font-size: 16px;
    white-space: nowrap;
  }
}

/* Keep end actions visible on phones and short windows; only the rewards scroll. */
@media (max-width: 599px), (max-height: 900px) {
  #practice-bar.is-practicing[data-result="complete"] {
    grid-template-rows: minmax(0, 1fr) auto auto auto;
    gap: 10px 8px;
    padding: 12px;
    overflow: hidden;
  }
  #practice-bar.is-practicing[data-result="complete"]::before,
  #practice-bar.is-practicing[data-result="complete"]::after {
    display: none;
  }
  #practice-bar.is-practicing[data-result="complete"] #practice-finale {
    grid-row: 1;
    /* The card is as tall as its content and centred above the buttons; it scrolls only when it must. */
    align-self: center;
    max-height: 100%;
    box-sizing: border-box;
    width: 100%;
    min-height: 0;
    overflow-y: auto;
    align-content: start;
    padding: 12px 8px;
    gap: 6px;
  }
  #practice-bar.is-practicing[data-result="complete"] #finale-next {
    grid-row: 2;
    min-height: 72px;
    padding: 10px 16px;
    font-size: calc(22px * var(--text-scale, 1));
  }
  #practice-bar.is-practicing[data-result="complete"] #finale-album {
    grid-row: 3;
    min-height: 52px;
  }
  #practice-bar.is-practicing[data-result="complete"] #practice-next {
    grid-row: 4;
    min-height: 44px;
  }
  #practice-bar.is-practicing[data-result="complete"] .finale-rewards {
    gap: 8px;
    padding-top: 8px;
  }
  #practice-bar.is-practicing[data-result="complete"] .finale-trophy {
    font-size: 40px;
  }
  #practice-bar.is-practicing[data-result="complete"] .finale-stars span {
    font-size: 32px;
  }
  #practice-bar.is-practicing[data-result="complete"] .finale-unlock {
    padding: 6px 4px;
  }
}
/* A trophy tile is the big prize of the card: gold, with a larger picture. */
.finale-unlock[data-kind="trophy"] {
  border-color: var(--ad-line-gold);
  background: var(--ad-tint-gold);
  color: var(--ad-ink-gold);
}
.finale-unlock[data-kind="trophy"] .finale-unlock-icon {
  font-size: calc(46px * var(--text-scale, 1));
}

/* A hero tile is a button: it must not inherit the compact toolbar-button height or the picture is squeezed out. */
#practice-bar button.finale-unlock {
  height: auto;
  min-height: 0;
  font: inherit;
  cursor: pointer;
}
button.finale-unlock[aria-pressed="true"] {
  box-shadow: 0 0 0 4px var(--refresh-3b86c6);
}

/* Tablets and desktops in landscape: the results use the room. Bigger card, stars, prizes and exits
   (tablet-first premise, see docs/css-components.md). */
@media (orientation: landscape) and (min-width: 768px) and (min-height: 500px) {
  #practice-bar.is-practicing[data-result="complete"] {
    grid-template-columns: repeat(2, minmax(0, 480px));
  }
  #practice-bar.is-practicing[data-result="complete"] #practice-finale {
    width: min(960px, calc(100vw - 64px));
  }
  /* With prizes: the result on the left, the prizes on the right, so the card stays short and nothing scrolls. */
  #practice-bar.is-practicing[data-result="complete"]
    #practice-finale:has(.finale-rewards:not([hidden])) {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    grid-template-rows: 1fr repeat(4, max-content) 1fr;
    column-gap: 28px;
  }
  #practice-finale:has(.finale-rewards:not([hidden])) > :not(.finale-rewards) {
    grid-column: 1;
  }
  #practice-finale:has(.finale-rewards:not([hidden])) > .finale-trophy {
    grid-row: 2;
  }
  #practice-finale:has(.finale-rewards:not([hidden])) > strong {
    grid-row: 3;
  }
  #practice-finale:has(.finale-rewards:not([hidden])) > .finale-stars {
    grid-row: 4;
  }
  #practice-finale:has(.finale-rewards:not([hidden])) > .finale-note {
    grid-row: 5;
  }
  #practice-finale:has(.finale-rewards:not([hidden])) > .finale-rewards {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: start;
    margin-block: auto;
    padding: 0 0 0 28px;
    border-top: 0;
    border-left: 2px dashed var(--refresh-b7dccd);
  }
  .finale-trophy {
    font-size: 60px;
  }
  .finale-stars span {
    font-size: 52px !important;
  }
  .finale-rewards,
  .finale-reward-row {
    gap: 16px;
  }
  .finale-unlock {
    min-width: 120px;
    padding: 8px 14px 8px;
    border-radius: 20px;
  }
  .finale-unlock-icon {
    font-size: calc(40px * var(--text-scale, 1));
  }
  .finale-unlock-name {
    font-size: calc(18px * var(--text-scale, 1));
  }
  .finale-unlock[data-kind="level"]::after,
  .finale-unlock[data-kind="new"]::after {
    font-size: 15px;
  }
  #practice-bar.is-practicing[data-result="complete"] #finale-next {
    font-size: calc(30px * var(--text-scale, 1));
  }
  #practice-bar.is-practicing[data-result="complete"] #finale-album {
    font-size: calc(24px * var(--text-scale, 1));
  }
  #practice-bar.is-practicing[data-result="complete"] #practice-next {
    font-size: calc(20px * var(--text-scale, 1));
  }
  /* Beat the short-window rules above (they keep the card compact on phones) with the same specificity. */
  #practice-bar.is-practicing[data-result="complete"] #practice-finale {
    padding: 16px 28px;
  }
  #practice-bar.is-practicing[data-result="complete"] .finale-trophy {
    font-size: 72px;
  }
  #practice-bar.is-practicing[data-result="complete"] .finale-stars span {
    font-size: 60px;
  }
  #practice-bar.is-practicing[data-result="complete"] #practice-finale > strong {
    font-size: calc(32px * var(--text-scale, 1));
  }
  #practice-bar.is-practicing[data-result="complete"] .finale-unlock {
    padding: 6px 14px;
  }
  #practice-bar.is-practicing[data-result="complete"] .finale-rewards {
    gap: 10px;
    padding-top: 0;
  }
  #practice-bar.is-practicing[data-result="complete"] #finale-next {
    min-height: 76px;
  }
  #practice-bar.is-practicing[data-result="complete"] #finale-album {
    min-height: 56px;
  }
  .finale-unlock:is([data-kind="stars"], [data-kind="bonus"]) .finale-unlock-icon {
    font-size: calc(32px * var(--text-scale, 1));
  }
}

/* Simplified results card: pictures, not sentences. A sky card, a ribbon title and one panel per kind of prize
   (stars, hero, achievements) with a small badge in its corner; nothing is meant to be read, nothing scrolls. */
#practice-bar.is-practicing[data-result="complete"] #practice-finale {
  border: 3px solid var(--refresh-9cc3ea);
  background: linear-gradient(
    var(--refresh-cfe8ff),
    var(--refresh-f1faff) 55%,
    var(--refresh-f7fff9)
  );
}
#practice-bar.is-practicing[data-result="complete"] #practice-finale > strong {
  padding: 4px 30px;
  background: linear-gradient(var(--refresh-3f8fdc), var(--refresh-2c6fb0));
  color: var(--refresh-white);
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%, 14px 50%);
  text-shadow: 0 2px 0 rgb(20 60 110 / 0.35);
}
#practice-bar.is-practicing[data-result="complete"] #practice-finale > strong small {
  display: none;
}
#practice-bar.is-practicing[data-result="complete"] .finale-note {
  color: var(--refresh-23594a);
  font-weight: 800;
}
.finale-rewards {
  gap: 16px;
  padding-top: 8px;
  border-top: 0;
}
.finale-panel {
  position: relative;
  display: grid;
  justify-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 18px 10px 8px;
  border: 2px solid var(--refresh-b9d9c9);
  border-radius: 20px;
  background: rgb(255 255 255 / 0.72);
}
/* Each panel wears a small tab with its icon and name, in the panel's own colour so it reads as part of it. */
.finale-panel {
  --tab-face: var(--ad-tint-mint);
  --tab-edge: var(--refresh-b9d9c9);
}
.finale-panel::before {
  content: attr(data-badge) " " attr(data-title);
  position: absolute;
  top: -17px;
  left: 16px;
  padding: 1px 14px 1px 10px;
  border: 2px solid var(--tab-edge);
  border-radius: 999px;
  background: var(--tab-face);
  color: var(--color-ink-album);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;
}
.finale-panel[data-badge="⭐"] {
  --tab-face: var(--ad-tint-gold);
  --tab-edge: var(--refresh-efd28a);
}
.finale-panel[data-badge="🦸"],
.finale-panel[data-badge="🏅"]:has(.finale-unlock[data-kind="level"]) {
  --tab-face: var(--ad-soft-keep);
  --tab-edge: var(--refresh-9cc3ea);
}
.finale-panel[data-badge="⭐"] {
  border-color: var(--refresh-efd28a);
  background: rgb(255 249 226 / 0.85);
}
.finale-panel[data-badge="🦸"],
.finale-panel[data-badge="🏅"]:has(.finale-unlock[data-kind="level"]) {
  border-color: var(--refresh-9cc3ea);
  background: rgb(232 243 255 / 0.9);
}
html[data-appearance="dark"] .finale-panel {
  --tab-face: color-mix(in srgb, var(--refresh-dark-line) 45%, #000);
  --tab-edge: var(--refresh-dark-line);
}
.finale-panel .finale-reward-row + .finale-reward-row {
  margin-top: 8px;
}
/* A scene behind the card, a glowing trophy and gold star tiles, like the reference art. Light mode only. */
html:not([data-appearance="dark"]) #practice-bar.is-practicing[data-result="complete"] {
  background:
    radial-gradient(90% 34% at 12% 104%, var(--ad-mint-top) 0 62%, transparent 63%),
    radial-gradient(80% 30% at 92% 108%, var(--ad-mint-face) 0 62%, transparent 63%),
    linear-gradient(var(--refresh-cfe8ff), var(--refresh-f1faff) 52%, var(--refresh-f7fff9));
}
.finale-trophy {
  filter: drop-shadow(0 0 16px rgb(255 205 70 / 0.85)) drop-shadow(0 4px 0 rgb(160 100 10 / 0.25));
}
.finale-unlock:is([data-kind="stars"], [data-kind="bonus"]) {
  border-color: var(--refresh-efd28a);
  background: linear-gradient(var(--ad-gold-top), var(--ad-gold-face));
  box-shadow: 0 3px 0 rgb(214 170 70 / 0.35);
}
.finale-unlock[data-kind="new"],
.finale-unlock[data-kind="level"] {
  box-shadow: 0 3px 0 rgb(40 90 70 / 0.18);
}
@media (orientation: landscape) and (min-width: 768px) and (min-height: 500px) {
  /* The buttons share the card's width so every edge lines up. */
  #practice-bar.is-practicing[data-result="complete"] #finale-next {
    width: min(960px, calc(100vw - 64px));
  }
  #practice-bar.is-practicing[data-result="complete"] #finale-album {
    justify-self: center;
    width: min(620px, 100%);
  }
}
/* The hero prize asks to be tapped: it breathes until chosen, then shows a check. */
@keyframes finale-hero-pulse {
  50% {
    transform: scale(1.07);
  }
}
#practice-bar button.finale-unlock[aria-pressed="false"] {
  animation:
    streak-pop 0.5s calc(0.5s + var(--i, 0) * 0.15s) both cubic-bezier(0.3, 1.6, 0.5, 1),
    finale-hero-pulse 1.4s 1.6s ease-in-out infinite;
}
html[data-calm="true"] #practice-bar button.finale-unlock[aria-pressed="false"] {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  #practice-bar button.finale-unlock[aria-pressed="false"] {
    animation: none;
  }
}
#practice-bar button.finale-unlock[aria-pressed="true"]::before {
  content: "✓";
  position: absolute;
  top: -9px;
  right: -9px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--refresh-2f9e6e);
  color: var(--refresh-white);
  font-size: 18px;
  font-weight: 800;
}
#practice-bar.is-practicing[data-result="complete"] #finale-next {
  background: linear-gradient(var(--refresh-4cbf5a), var(--refresh-2f9e46));
  border-color: var(--refresh-26803a);
  box-shadow: 0 5px 0 var(--refresh-1f6a30);
}
html[data-appearance="dark"] .finale-panel {
  background: rgb(30 50 70 / 0.8);
  border-color: var(--refresh-dark-line);
}
/* Short phones: drop the trophy and the caption and shrink the prize tiles so the card still fits without scrolling. */
@media (max-height: 700px) and (max-width: 599px) {
  #practice-bar.is-practicing[data-result="complete"] .finale-trophy,
  #practice-bar.is-practicing[data-result="complete"] .finale-note {
    display: none;
  }
  #practice-bar.is-practicing[data-result="complete"] #practice-finale {
    gap: 6px;
    padding: 8px;
  }
  #practice-bar.is-practicing[data-result="complete"] #practice-finale > strong {
    font-size: 20px;
  }
  #practice-bar.is-practicing[data-result="complete"] .finale-stars span {
    font-size: 26px;
  }
  .finale-rewards {
    gap: 12px;
  }
  .finale-panel {
    padding: 10px 6px 4px;
  }
  #practice-bar.is-practicing[data-result="complete"] .finale-unlock {
    min-width: 64px;
    padding: 2px 4px;
  }
  #practice-bar.is-practicing[data-result="complete"] .finale-unlock-icon {
    font-size: 24px;
  }
  #practice-bar.is-practicing[data-result="complete"] .finale-unlock-name {
    font-size: 11px;
  }
  #practice-bar.is-practicing[data-result="complete"] #finale-next {
    min-height: 60px;
    padding: 6px 12px;
  }
  #practice-bar.is-practicing[data-result="complete"] #finale-album {
    min-height: 44px;
  }
  #practice-bar.is-practicing[data-result="complete"] #practice-next {
    min-height: 44px;
  }
}

/* ===== One results card for every game (2026-11-08) =====
   The challenge screen (#practice-bar), the Play games (.results-dialog) and the word games (.wg-dialog)
   show the same pieces: trophy, ribbon, stars, prize panels, a big green "next", a white way back and a
   small "Play again". The dialogs are built from #results-card-template (js/ui/results-card.js). */
.results-dialog {
  box-sizing: border-box;
  width: min(520px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 14px;
  overflow: auto;
  border: 0;
  border-radius: 26px;
  background: var(--refresh-f1faff);
  box-shadow: 0 18px 60px rgb(36 65 91 / 0.25);
}
.results-dialog[open] {
  display: grid;
}
.results-dialog::backdrop {
  background:
    radial-gradient(120% 80% at 50% 15%, rgb(140 195 250 / 0.42), transparent 70%),
    linear-gradient(rgb(60 100 160 / 0.5), rgb(28 50 90 / 0.78));
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  backdrop-filter: blur(10px) saturate(1.15);
}
.results-card {
  display: grid;
  gap: 12px;
}
.results-summary {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 16px 14px;
  border: 3px solid var(--refresh-9cc3ea);
  border-radius: 22px;
  background: linear-gradient(var(--refresh-cfe8ff), var(--refresh-f1faff) 55%, var(--refresh-f7fff9));
  text-align: center;
}
.results-summary > strong {
  padding: 4px 30px;
  background: linear-gradient(var(--refresh-3f8fdc), var(--refresh-2c6fb0));
  color: var(--refresh-white);
  font-size: calc(24px * var(--text-scale, 1));
  line-height: 1.2;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%, 14px 50%);
  text-shadow: 0 2px 0 rgb(20 60 110 / 0.35);
}
.results-summary > strong small {
  display: none;
}
.results-summary .finale-note {
  color: var(--refresh-23594a);
  font-size: calc(15px * var(--text-scale, 1));
  font-weight: 800;
}
.results-summary .finale-rewards {
  display: grid;
  width: 100%;
}
.results-summary .finale-rewards[hidden] {
  display: none;
}
.results-next {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 76px;
  padding: 12px 22px;
  border: 2px solid var(--refresh-26803a);
  border-radius: 22px;
  background: linear-gradient(var(--refresh-4cbf5a), var(--refresh-2f9e46));
  color: var(--refresh-white);
  box-shadow: 0 5px 0 var(--refresh-1f6a30);
  font-size: calc(24px * var(--text-scale, 1));
  font-weight: 800;
  line-height: 1.2;
}
.results-next[hidden] {
  display: none;
}
.results-next small {
  display: block;
  font-size: calc(13px * var(--text-scale, 1));
  font-weight: 600;
  color: inherit;
}
.results-next .finale-next-icon {
  font-size: 1.5em;
  line-height: 1;
}
.results-next:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--refresh-1f6a30);
}
.results-back {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  padding: 8px 18px;
  border: 2px solid var(--color-line-practice);
  border-radius: 18px;
  background: var(--color-surface);
  color: var(--color-ink-dialog);
  box-shadow: 0 3px 0 var(--color-bevel-practice);
  font-size: calc(20px * var(--text-scale, 1));
  font-weight: 800;
}
.results-again {
  justify-self: center;
  min-height: 44px;
  padding: 6px 14px;
  border: 0;
  background: none;
  color: var(--color-ink-dialog);
  font-size: calc(16px * var(--text-scale, 1));
  font-weight: 700;
  text-decoration: underline;
}
.results-card button:focus-visible {
  outline: 3px solid var(--color-ink-dialog);
  outline-offset: 3px;
}
html[data-appearance="dark"] .results-dialog {
  background: var(--refresh-dark-card);
}
html[data-appearance="dark"] .results-summary {
  border-color: var(--refresh-dark-line);
  background: var(--refresh-dark-card);
}
html[data-appearance="dark"] .results-summary .finale-note,
html[data-appearance="dark"] .results-again {
  color: var(--refresh-white);
}
html[data-appearance="dark"] .results-back {
  border-color: var(--refresh-dark-line);
  background: var(--refresh-dark-card);
  color: var(--refresh-white);
  box-shadow: none;
}
/* Tablets and desktops in landscape: the result on the left, the prizes on the right, like the challenge card. */
@media (orientation: landscape) and (min-width: 768px) and (min-height: 500px) {
  .results-dialog {
    width: min(880px, calc(100vw - 48px));
  }
  .results-summary:has(.finale-rewards:not([hidden])) {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
    column-gap: 24px;
  }
  .results-summary:has(.finale-rewards:not([hidden])) > :not(.finale-rewards) {
    grid-column: 1;
  }
  .results-summary:has(.finale-rewards:not([hidden])) > .finale-rewards {
    grid-column: 2;
    grid-row: 1 / span 4;
    padding-left: 24px;
    border-left: 2px dashed var(--refresh-b7dccd);
  }
}

/* Fit to the window: fitResults() raises data-fit (0 to 3) until nothing is cut, on a short tablet in
   landscape for example. 1: no trophy or caption, smaller stars; 2: smaller prize tiles, ribbon and
   buttons; 3: no ribbon either. */
#practice-bar.is-practicing[data-result="complete"][data-fit="1"] .finale-trophy,
#practice-bar.is-practicing[data-result="complete"][data-fit="1"] .finale-note,
#practice-bar.is-practicing[data-result="complete"][data-fit="2"] .finale-trophy,
#practice-bar.is-practicing[data-result="complete"][data-fit="2"] .finale-note,
#practice-bar.is-practicing[data-result="complete"][data-fit="3"] .finale-trophy,
#practice-bar.is-practicing[data-result="complete"][data-fit="3"] .finale-note,
.results-dialog[data-fit="1"] .finale-trophy,
.results-dialog[data-fit="1"] .finale-note,
.results-dialog[data-fit="2"] .finale-trophy,
.results-dialog[data-fit="2"] .finale-note,
.results-dialog[data-fit="3"] .finale-trophy,
.results-dialog[data-fit="3"] .finale-note,
.wg-dialog[data-result="complete"][data-fit="1"] .finale-trophy,
.wg-dialog[data-result="complete"][data-fit="1"] .finale-note,
.wg-dialog[data-result="complete"][data-fit="2"] .finale-trophy,
.wg-dialog[data-result="complete"][data-fit="2"] .finale-note,
.wg-dialog[data-result="complete"][data-fit="3"] .finale-trophy,
.wg-dialog[data-result="complete"][data-fit="3"] .finale-note {
  display: none;
}
#practice-bar.is-practicing[data-result="complete"][data-fit="1"] .finale-stars span,
#practice-bar.is-practicing[data-result="complete"][data-fit="2"] .finale-stars span,
#practice-bar.is-practicing[data-result="complete"][data-fit="3"] .finale-stars span,
.results-dialog[data-fit="1"] .finale-stars span,
.results-dialog[data-fit="2"] .finale-stars span,
.results-dialog[data-fit="3"] .finale-stars span,
.wg-dialog[data-result="complete"][data-fit="1"] .finale-stars span,
.wg-dialog[data-result="complete"][data-fit="2"] .finale-stars span,
.wg-dialog[data-result="complete"][data-fit="3"] .finale-stars span {
  font-size: 40px !important;
}
#practice-bar.is-practicing[data-result="complete"][data-fit="1"] .finale-panel,
#practice-bar.is-practicing[data-result="complete"][data-fit="2"] .finale-panel,
#practice-bar.is-practicing[data-result="complete"][data-fit="3"] .finale-panel,
.results-dialog[data-fit="1"] .finale-panel,
.results-dialog[data-fit="2"] .finale-panel,
.results-dialog[data-fit="3"] .finale-panel,
.wg-dialog[data-result="complete"][data-fit="1"] .finale-panel,
.wg-dialog[data-result="complete"][data-fit="2"] .finale-panel,
.wg-dialog[data-result="complete"][data-fit="3"] .finale-panel {
  padding: 10px 8px 6px;
}
#practice-bar.is-practicing[data-result="complete"][data-fit="1"] .finale-rewards,
#practice-bar.is-practicing[data-result="complete"][data-fit="2"] .finale-rewards,
#practice-bar.is-practicing[data-result="complete"][data-fit="3"] .finale-rewards,
.results-dialog[data-fit="1"] .finale-rewards,
.results-dialog[data-fit="2"] .finale-rewards,
.results-dialog[data-fit="3"] .finale-rewards,
.wg-dialog[data-result="complete"][data-fit="1"] .finale-rewards,
.wg-dialog[data-result="complete"][data-fit="2"] .finale-rewards,
.wg-dialog[data-result="complete"][data-fit="3"] .finale-rewards {
  gap: 12px;
}
#practice-bar.is-practicing[data-result="complete"][data-fit="2"] .finale-stars span,
#practice-bar.is-practicing[data-result="complete"][data-fit="3"] .finale-stars span,
.results-dialog[data-fit="2"] .finale-stars span,
.results-dialog[data-fit="3"] .finale-stars span,
.wg-dialog[data-result="complete"][data-fit="2"] .finale-stars span,
.wg-dialog[data-result="complete"][data-fit="3"] .finale-stars span {
  font-size: 30px !important;
}
#practice-bar.is-practicing[data-result="complete"][data-fit="2"] .finale-unlock,
#practice-bar.is-practicing[data-result="complete"][data-fit="3"] .finale-unlock,
.results-dialog[data-fit="2"] .finale-unlock,
.results-dialog[data-fit="3"] .finale-unlock,
.wg-dialog[data-result="complete"][data-fit="2"] .finale-unlock,
.wg-dialog[data-result="complete"][data-fit="3"] .finale-unlock {
  min-width: 72px;
  padding: 4px 8px;
}
#practice-bar.is-practicing[data-result="complete"][data-fit="2"] .finale-unlock-icon,
#practice-bar.is-practicing[data-result="complete"][data-fit="3"] .finale-unlock-icon,
.results-dialog[data-fit="2"] .finale-unlock-icon,
.results-dialog[data-fit="3"] .finale-unlock-icon,
.wg-dialog[data-result="complete"][data-fit="2"] .finale-unlock-icon,
.wg-dialog[data-result="complete"][data-fit="3"] .finale-unlock-icon {
  font-size: calc(22px * var(--text-scale, 1)) !important;
}
#practice-bar.is-practicing[data-result="complete"][data-fit="2"] .finale-unlock-name,
#practice-bar.is-practicing[data-result="complete"][data-fit="3"] .finale-unlock-name,
.results-dialog[data-fit="2"] .finale-unlock-name,
.results-dialog[data-fit="3"] .finale-unlock-name,
.wg-dialog[data-result="complete"][data-fit="2"] .finale-unlock-name,
.wg-dialog[data-result="complete"][data-fit="3"] .finale-unlock-name {
  font-size: calc(12px * var(--text-scale, 1));
}
#practice-bar.is-practicing[data-result="complete"][data-fit="2"] #practice-finale > strong,
#practice-bar.is-practicing[data-result="complete"][data-fit="2"] .results-summary > strong,
#practice-bar.is-practicing[data-result="complete"][data-fit="3"] #practice-finale > strong,
#practice-bar.is-practicing[data-result="complete"][data-fit="3"] .results-summary > strong,
.results-dialog[data-fit="2"] #practice-finale > strong,
.results-dialog[data-fit="2"] .results-summary > strong,
.results-dialog[data-fit="3"] #practice-finale > strong,
.results-dialog[data-fit="3"] .results-summary > strong,
.wg-dialog[data-result="complete"][data-fit="2"] #practice-finale > strong,
.wg-dialog[data-result="complete"][data-fit="2"] .results-summary > strong,
.wg-dialog[data-result="complete"][data-fit="3"] #practice-finale > strong,
.wg-dialog[data-result="complete"][data-fit="3"] .results-summary > strong {
  padding: 2px 22px;
  font-size: calc(20px * var(--text-scale, 1));
}
#practice-bar.is-practicing[data-result="complete"][data-fit="2"] #finale-next,
#practice-bar.is-practicing[data-result="complete"][data-fit="2"] .results-next,
#practice-bar.is-practicing[data-result="complete"][data-fit="3"] #finale-next,
#practice-bar.is-practicing[data-result="complete"][data-fit="3"] .results-next,
.results-dialog[data-fit="2"] #finale-next,
.results-dialog[data-fit="2"] .results-next,
.results-dialog[data-fit="3"] #finale-next,
.results-dialog[data-fit="3"] .results-next,
.wg-dialog[data-result="complete"][data-fit="2"] #finale-next,
.wg-dialog[data-result="complete"][data-fit="2"] .results-next,
.wg-dialog[data-result="complete"][data-fit="3"] #finale-next,
.wg-dialog[data-result="complete"][data-fit="3"] .results-next {
  min-height: 56px;
  padding-block: 8px;
}
#practice-bar.is-practicing[data-result="complete"][data-fit="2"] #finale-album,
#practice-bar.is-practicing[data-result="complete"][data-fit="2"] .results-back,
#practice-bar.is-practicing[data-result="complete"][data-fit="3"] #finale-album,
#practice-bar.is-practicing[data-result="complete"][data-fit="3"] .results-back,
.results-dialog[data-fit="2"] #finale-album,
.results-dialog[data-fit="2"] .results-back,
.results-dialog[data-fit="3"] #finale-album,
.results-dialog[data-fit="3"] .results-back,
.wg-dialog[data-result="complete"][data-fit="2"] #finale-album,
.wg-dialog[data-result="complete"][data-fit="2"] .results-back,
.wg-dialog[data-result="complete"][data-fit="3"] #finale-album,
.wg-dialog[data-result="complete"][data-fit="3"] .results-back {
  min-height: 44px;
}
#practice-bar.is-practicing[data-result="complete"][data-fit="3"] #practice-finale > strong,
#practice-bar.is-practicing[data-result="complete"][data-fit="3"] .results-summary > strong,
.results-dialog[data-fit="3"] #practice-finale > strong,
.results-dialog[data-fit="3"] .results-summary > strong,
.wg-dialog[data-result="complete"][data-fit="3"] #practice-finale > strong,
.wg-dialog[data-result="complete"][data-fit="3"] .results-summary > strong {
  display: none;
}
#practice-bar.is-practicing[data-result="complete"][data-fit="3"] .finale-panel .finale-reward-row + .finale-reward-row,
.results-dialog[data-fit="3"] .finale-panel .finale-reward-row + .finale-reward-row,
.wg-dialog[data-result="complete"][data-fit="3"] .finale-panel .finale-reward-row + .finale-reward-row {
  margin-top: 4px;
}

/* Level bar of the results card: fills from where the child was to where the new stars put them. */
.finale-level {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto;
  align-items: center;
  gap: 4px 10px;
  width: min(100%, 420px);
  padding: 8px 14px;
  border: 2px solid var(--ad-line-gold);
  border-radius: 18px;
  background: var(--ad-tint-gold);
  color: var(--ad-ink-gold);
  font-weight: 800;
}
.finale-level small {
  grid-column: 1 / -1;
  text-align: center;
  font-size: calc(14px * var(--text-scale, 1));
}
.finale-level-track {
  height: 16px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--ad-line-gold);
}
.finale-level-track > span {
  display: block;
  width: var(--to);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffc93c, #ff9f1c);
  animation: level-fill 1.1s 0.5s both ease-out;
}
.finale-level-goal {
  font-size: calc(28px * var(--text-scale, 1));
  line-height: 1;
}
@keyframes level-fill {
  from {
    width: var(--from);
  }
}
html[data-calm="true"] .finale-level-track > span {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .finale-level-track > span {
    animation: none;
  }
}