/* Tarjetas compartidas de vocabulario, acciones y efectos, con etiquetas e iconos. */
.english-buttons {
  display: grid;
  gap: 6px;
}
.command {
  border: 1px solid #dce8f3;
  border-radius: 11px;
  padding: 8px 4px;
  background: var(--color-surface);
  color: #3d658b;
  min-height: 46px;
}
.command strong {
  display: block;
}
.command small {
  display: block;

  margin-top: 4px;
  color: #8c9daf;
}
.command[aria-pressed="true"] {
  background: var(--ad-soft-keep);
  border-color: #8ab2e7;
}
.buttons {
  display: grid;
  gap: 6px;
}
.effect {
  border: 1px solid #dce8f3;
  border-radius: 11px;
  background: white;
  color: #3f607f;
  padding: 7px 3px;
  transition: transform 0.15s;
  min-height: 60px;
}
.effect:hover,
.command:hover {
  background: var(--ad-soft-keep);
}
.effect:active,
.effect.active {
  transform: scale(0.95);
  background: var(--ad-soft-keep);
}
.icon {
  display: block;
  font-size: calc(22px * var(--text-scale, 1));
  margin-bottom: 3px;
}
.label {
  display: block;
  font-size: calc(9px * var(--text-scale, 1));
  font-weight: bold;
}
@media (max-height: 640px) and (min-width: 851px) {
  .command {
    min-height: 35px;
    padding: 5px 3px;
  }

  .command strong {
    font-size: calc(11px * var(--text-scale, 1));
  }

  .command small {
    margin-top: 2px;
    font-size: calc(9px * var(--text-scale, 1));
  }

  .effect {
    min-height: 43px;
    padding: 4px 2px;
  }

  .icon {
    display: inline;
    font-size: calc(16px * var(--text-scale, 1));
    margin: 0;
  }

  .label {
    display: block;
    font-size: calc(9px * var(--text-scale, 1));
  }
}
.pace-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}
.pace-buttons .command {
  border-color: #c8dcef;
  background: var(--ad-soft-keep);
}
.pace-buttons .command[aria-pressed="true"] {
  border-color: #8ab2e7;
  background: #deecff;
}
.english-buttons {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.command strong {
  font-size: calc(11px * var(--text-scale, 1));
}
.command small {
  font-size: calc(9px * var(--text-scale, 1));
}
.buttons {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* A press should register visually at once; only the release eases back. */
.command {
  transition: transform 70ms ease-out;
}
.effect:active,
.effect.active {
  transition: none;
}
@media (min-width: 851px) and (pointer: fine), (min-width: 1101px) {
  .pace-buttons {
    gap: 4px;
    margin-bottom: 5px;
  }

  .english-buttons {
    gap: 4px;
    grid-auto-rows: 44px;
  }

  .panel .command {
    min-height: 40px;
    padding: 3px 4px;
  }

  .panel .command strong {
    font-size: calc(11px * var(--text-scale, 1));
    line-height: 1.12;
  }

  .panel .command small {
    font-size: calc(9px * var(--text-scale, 1));
    line-height: 1.1;
    margin-top: 2px;
  }

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

  .effect {
    min-height: 48px;
    padding: 4px 2px;
  }

  .effect .icon {
    font-size: calc(20px * var(--text-scale, 1));
    margin-bottom: 2px;
    line-height: 1.1;
  }

  .effect .label {
    font-size: calc(9px * var(--text-scale, 1));
    line-height: 1.1;
  }
}
@media (min-width: 851px) and (pointer: fine) and (max-height: 680px),
  (min-width: 1101px) and (max-height: 680px) {
  .panel .command {
    padding: 2px 3px;
  }

  .panel .command strong {
    font-size: calc(10.5px * var(--text-scale, 1));
  }

  .panel .command small {
    font-size: calc(8.5px * var(--text-scale, 1));
  }

  .effect {
    padding: 3px 2px;
  }
}
@media (min-width: 851px) and (pointer: fine) and (max-height: 680px),
  (min-width: 1101px) and (max-height: 680px) {
  .english-buttons {
    grid-auto-rows: 36px;
    gap: 3px;
  }

  .panel .command {
    min-height: 32px;
  }

  .panel .command small {
    display: none;
  }

  .effect {
    min-height: 40px;
  }
}
.choice-icon {
  font-size: calc(28px * var(--text-scale, 1));
  line-height: 1.1;
}
.choice-label {
  font-size: calc(11px * var(--text-scale, 1));
  line-height: 1.15;
  text-align: center;
}
.vocabulary-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
body[data-learning-category="phonics"] #vocabulary-buttons {
  max-height: min(42vh, 420px);
  overflow-y: auto;
  overscroll-behavior-y: contain;
  align-content: start;
  scrollbar-gutter: stable;
}
.vocabulary-buttons button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--color-line-menu);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-ink-control);
  padding: 8px 4px;
  min-height: 62px;
}
/* Activity panels share the vocabulary card layout. Main touch controls stay compact. */
.english-buttons,
.buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 7px;
}
.english-buttons .command,
.buttons .effect,
.control-section > .pace-buttons .command {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: auto;
  min-height: 62px;
  padding: 8px 4px;
  border: 1px solid var(--color-line-menu);
  border-radius: 12px;
  background: var(--color-surface);
  box-shadow: none;
}
.english-buttons .command strong {
  font-size: calc(11px * var(--text-scale, 1));
  line-height: 1.15;
}
.english-buttons .command strong:before,
.english-buttons .command strong:after {
  content: none;
  display: none;
}
.english-buttons .command small {
  display: none;
}
.activity-icon,
.buttons .effect .icon {
  display: block;
  font-size: calc(28px * var(--text-scale, 1));
  line-height: 1.1;
}
.buttons .effect .label {
  font-size: calc(11px * var(--text-scale, 1));
  line-height: 1.15;
}
.control-section > .pace-buttons {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
body[data-learning-category="movement"] .english-buttons [data-activity="actions"],
body[data-learning-category="actions"] .english-buttons [data-activity="movement"],
body[data-learning-category="actions"] .control-section > .pace-buttons {
  display: none;
}
body[data-learning-category="actions"] .english-buttons [data-command="center"] {
  display: flex;
}
.english-buttons .command[aria-pressed="true"],
.buttons .effect.active {
  background: var(--ad-soft-keep);
  border-color: #8ab9df;
}
html[data-appearance="dark"]
  :is(.english-buttons .command, .buttons .effect, .control-section > .pace-buttons .command) {
  background: #2b455c;
  color: #e0edf6;
  border-color: #526e88;
}
.control-section > .pace-buttons .command small {
  display: none;
}
.control-section > .pace-buttons .command strong {
  font-size: calc(11px * var(--text-scale, 1));
  line-height: 1.15;
}
html[data-appearance="dark"] .english-buttons .command[aria-pressed="true"],
html[data-appearance="dark"] .control-section > .pace-buttons .command[aria-pressed="true"],
html[data-appearance="dark"] .buttons .effect.active {
  background: #365e76;
  border-color: #94bfdb;
  color: #f2fbff;
}
.control-section > .pace-buttons {
  display: none;
}
.english-buttons [data-speed-card] small {
  display: none;
}
/* Shared gallery language: equal emphasis for actions, magic and vocabulary. */
:is(
  .english-buttons .command strong,
  .buttons .effect .label,
  .vocabulary-buttons .choice-label,
  .practice-choices .choice-label
) {
  font-weight: 600;
  text-align: center;
}
.vocabulary-buttons button[aria-pressed="true"] {
  background: var(--ad-soft-keep);
  border-color: #8ab9df;
}
html[data-appearance="dark"] .vocabulary-buttons button[aria-pressed="true"] {
  background: #365e76;
  border-color: #94bfdb;
  color: #f2fbff;
}
.panel :is(.english-buttons, .buttons, .vocabulary-buttons) {
  grid-auto-rows: var(--lesson-card-height);
}
.panel :is(.english-buttons .command, .buttons .effect, .vocabulary-buttons button) {
  height: var(--lesson-card-height);
  min-height: var(--lesson-card-height);
  padding: 4px 2px;
  gap: 3px;
}
.panel :is(.english-buttons strong, .effect .label, .vocabulary-buttons .choice-label) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 2.3em;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
@media (max-width: 850px), (pointer: coarse) and (max-width: 1100px) {
  .command {
    height: 33px;
    min-height: 33px;
    padding: 2px 1px;
    border: 1px solid #ccdfef;
    border-radius: 10px;
    background: var(--color-surface);
    color: #3d658b;
    box-shadow: 0 2px 0 #dae7f1;
  }

  .command strong {
    display: block;
    font-size: 0;
    line-height: 1.1;
  }

  .command strong:after {
    content: attr(data-mobile-label);
    line-height: 1.15;
  }

  .command small {
    display: none;
  }

  .command[aria-pressed="true"] {
    background: var(--color-surface-control-active);
    border-color: #79afe4;
    color: #245c8d;
    box-shadow: inset 0 0 0 1px #a8ccec;
  }

  .command:active,
  .effect:active {
    background: #c9e4fc;
    border-color: #76aada;
    box-shadow: none;
    transform: translateY(1px);
  }

  .english-buttons {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 33px;
    gap: 5px;
  }

  .english-buttons [data-command="left"],
  .english-buttons [data-command="right"],
  .english-buttons [data-command="forward"],
  .english-buttons [data-command="back"],
  .english-buttons [data-command="jump"],
  .english-buttons [data-command="stop"] {
    display: none;
  }

  .buttons {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, 52px);
    gap: 6px;
  }

  .effect {
    min-height: 52px;
    height: 52px;
    border-radius: 10px;
    border: 1px solid #ccdfef;
    background: var(--color-surface);
    box-shadow: 0 2px 0 #dae7f1;
  }

  .effect .icon {
    display: block;
    font-size: calc(23px * var(--text-scale, 1));
  }

  .effect .label {
    font-size: calc(11px * var(--text-scale, 1));
  }
}
@media (max-width: 850px) and (orientation: portrait) and (max-height: 650px) {
  .english-buttons {
    grid-auto-rows: 31px;
    gap: 4px;
  }

  .english-buttons .command {
    height: 31px;
    min-height: 31px;
  }
}
@media (max-width: 850px), (pointer: coarse) and (max-width: 1100px) {
  .english-buttons strong:before {
    content: attr(data-icon);
    font-size: calc(11px * var(--text-scale, 1));
    margin-right: 3px;
  }

  .command strong:after {
    font-size: calc(12px * var(--text-scale, 1));
  }

  .choice-icon {
    font-size: calc(20px * var(--text-scale, 1));
  }

  .choice-label {
    font-size: calc(10px * var(--text-scale, 1));
  }

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

  .vocabulary-buttons button {
    min-height: 48px;
    padding: 4px 2px;
  }

  .english-buttons,
  .buttons {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: auto;
    gap: 5px;
  }

  .english-buttons .command,
  .buttons .effect {
    min-height: 48px;
    height: auto;
    padding: 4px 2px;
  }

  .english-buttons .command strong,
  .buttons .effect .label {
    font-size: calc(10px * var(--text-scale, 1));
  }

  .activity-icon,
  .buttons .effect .icon {
    font-size: calc(26px * var(--text-scale, 1));
  }

  body[data-learning-category="movement"]
    .english-buttons
    :is(
      [data-command="left"],
      [data-command="right"],
      [data-command="forward"],
      [data-command="back"],
      [data-command="jump"],
      [data-command="fly"],
      [data-command="tiptoe"]
    ) {
    display: flex;
  }

  body[data-learning-category="actions"] .english-buttons [data-command="stop"] {
    display: flex;
  }
}
@media (max-width: 850px) and (orientation: landscape) and (max-height: 500px),
  (pointer: coarse) and (max-width: 1100px) and (orientation: landscape) and (max-height: 500px) {
  .panel :is(.english-buttons, .buttons, .vocabulary-buttons) {
    gap: 4px;
  }

  .panel :is(.english-buttons .command, .buttons .effect, .vocabulary-buttons button) {
    padding: 2px;
  }

  .panel :is(.activity-icon, .effect .icon, .choice-icon) {
    font-size: calc(22px * var(--text-scale, 1));
  }
}
@media (max-width: 850px), (pointer: coarse) and (max-width: 1100px) {
  .panel :is(.english-buttons .command, .buttons .effect, .vocabulary-buttons button) {
    padding: 2px;
  }
}
@media (max-width: 850px) and (orientation: landscape) and (max-height: 500px),
  (pointer: coarse) and (max-width: 1100px) and (orientation: landscape) and (max-height: 500px) {
  .panel :is(.english-buttons .command, .buttons .effect, .vocabulary-buttons button) {
    gap: 2px;
  }
}
@media (orientation: landscape) and (max-height: 400px) and (max-width: 1100px) {
  .panel :is(.activity-icon, .effect .icon, .choice-icon) {
    font-size: calc(20px * var(--text-scale, 1));
  }

  .panel :is(.english-buttons .command, .buttons .effect, .vocabulary-buttons button) {
    gap: 0;
    padding: 2px 1px;
  }
}
/* Vocabulary pictures match the 26px action icons; short landscape screens keep their compact cards. */
@media (max-width: 850px) and (orientation: portrait),
  (pointer: coarse) and (max-width: 1100px) and (orientation: portrait) {
  .panel .choice-icon {
    font-size: calc(26px * var(--text-scale, 1));
  }
}
.panel :is(.vocabulary-buttons, .english-buttons, .buttons) {
  gap: 8px;
  grid-auto-rows: minmax(68px, auto);
  grid-template-rows: none;
}
.panel :is(.vocabulary-buttons button, .english-buttons .command, .buttons .effect) {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 68px;
  height: auto;
  padding: 8px 10px;
  text-align: left;
  border-radius: 16px;
}
.panel :is(.choice-icon, .activity-icon, .effect .icon) {
  display: block;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  overflow: hidden;
  font-size: 38px;
  filter: drop-shadow(0 2px 1px #315d8014);
}
.panel :is(.choice-label, .english-buttons .command strong, .buttons .effect .label) {
  min-width: 0;
  font-size: calc(14px * var(--text-scale, 1));
  line-height: 1.22;
  text-align: left;
  overflow-wrap: normal;
  hyphens: none;
}
.panel :is(.vocabulary-buttons button, .english-buttons .command, .buttons .effect):focus-visible {
  outline: 3px solid #e6af32;
  outline-offset: 2px;
}
.panel
  :is(
    .vocabulary-buttons button,
    .english-buttons .command,
    .buttons .effect
  )[aria-pressed="true"] {
  border-color: #6da7df;
  background: var(--ad-soft-keep);
  box-shadow: inset 0 0 0 1px #6da7df;
}
@container (max-width:460px) {
  .panel :is(.vocabulary-buttons, .english-buttons, .buttons) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .panel :is(.vocabulary-buttons button, .english-buttons .command, .buttons .effect) {
    gap: 8px;
    padding: 8px;
    min-height: 68px;
  }

  .panel :is(.choice-icon, .activity-icon, .effect .icon) {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
    font-size: 36px;
    line-height: 44px;
  }

  .panel :is(.choice-label, .english-buttons .command strong, .buttons .effect .label) {
    font-size: calc(13px * var(--text-scale, 1));
    text-align: left;
    overflow-wrap: anywhere;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  .panel :is(.vocabulary-buttons, .english-buttons, .buttons) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(58px, auto);
    gap: 5px;
  }

  .panel :is(.vocabulary-buttons button, .english-buttons .command, .buttons .effect) {
    flex-direction: column;
    justify-content: center;
    min-height: 58px;
    gap: 1px;
    padding: 2px 4px;
    text-align: center;
  }

  .panel :is(.choice-icon, .activity-icon, .effect .icon) {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
    font-size: 27px;
    line-height: 32px;
  }

  .panel :is(.choice-label, .english-buttons .command strong, .buttons .effect .label) {
    font-size: calc(12px * var(--text-scale, 1));
    text-align: center;
  }
}
/* Small portrait phones (iPhone SE): four rows of cards plus the footer must fit under the stage. */
@media (max-width: 600px) and (max-height: 620px) and (orientation: portrait) {
  .panel :is(.vocabulary-buttons, .english-buttons, .buttons) {
    grid-auto-rows: minmax(48px, auto);
    gap: 4px;
  }

  .panel :is(.vocabulary-buttons button, .english-buttons .command, .buttons .effect) {
    min-height: 48px;
    gap: 0;
    padding: 2px 3px;
  }

  .panel :is(.choice-icon, .activity-icon, .effect .icon) {
    flex-basis: 24px;
    width: 24px;
    height: 24px;
    font-size: 21px;
    line-height: 24px;
  }

  .panel :is(.choice-label, .english-buttons .command strong, .buttons .effect .label) {
    font-size: calc(11px * var(--text-scale, 1));
    line-height: 1;
  }
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1100px) {
  .panel :is(.vocabulary-buttons, .english-buttons, .buttons) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(44px, auto);
  }

  .panel :is(.vocabulary-buttons button, .english-buttons .command, .buttons .effect) {
    flex-direction: column;
    gap: 0;
    min-height: 44px;
    padding: 0 2px;
  }

  .panel :is(.vocabulary-buttons, .english-buttons, .buttons) {
    gap: 3px;
  }

  .panel :is(.choice-icon, .activity-icon, .effect .icon) {
    flex-basis: 20px;
    width: 20px;
    height: 20px;
    font-size: 18px;
    line-height: 20px;
  }

  .panel :is(.choice-label, .english-buttons .command strong, .buttons .effect .label) {
    font-size: min(12px, calc(11px * var(--text-scale, 1)));
    line-height: 1;
  }
}
html[data-appearance="dark"]
  .panel
  :is(
    .vocabulary-buttons button,
    .english-buttons .command,
    .buttons .effect
  )[aria-pressed="true"] {
  background: #365e76;
  border-color: #94bfdb;
}
:is(.panel .vocabulary-buttons button, .panel .english-buttons .command, .panel .buttons .effect) {
  border-radius: 15px;
}
.panel :is(.choice-label, .english-buttons .command strong, .buttons .effect .label) {
  color: inherit;
  font-weight: 750;
}
:is(
    .panel .vocabulary-buttons button,
    .panel .english-buttons .command,
    .panel .buttons .effect
  )[aria-pressed="true"]:not([data-speed-card]) {
  --tile-top: var(--ad-purple-top);
  --tile-face: var(--ad-purple-face);
  --tile-ink: var(--ad-purple-ink);
}
/* Dark ink in illustrations needs a pale backing on dark cards. */
html[data-appearance="dark"]
  .panel
  :is(.activity-icon, .choice-icon, .effect .icon).illustrated-icon {
  background-color: #eaf0fa;
  border-radius: 10px;
}
/* Tablets: touch cards are big enough to hit and read at arm's length, three or four across. */
@media (min-width: 601px) and (max-width: 1100px) and (min-height: 501px) {
  .panel :is(.vocabulary-buttons, .english-buttons, .buttons) {
    gap: 8px;
    grid-auto-rows: minmax(76px, auto);
  }

  .panel :is(.vocabulary-buttons button, .english-buttons .command, .buttons .effect) {
    min-height: 76px;
    padding: 6px 10px;
    gap: 10px;
  }

  .panel :is(.choice-icon, .activity-icon, .effect .icon) {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 32px;
  }

  .panel
    :is(.vocabulary-buttons, .english-buttons, .buttons)
    :is(.choice-icon, .activity-icon, .effect .icon) {
    flex-basis: 52px;
    width: 52px;
    height: 52px;
    line-height: 52px;
    font-size: 42px;
  }

  .panel
    :is(
      .vocabulary-buttons .choice-label,
      .english-buttons .command strong,
      .buttons .effect .label
    ) {
    font-size: calc(18px * var(--text-scale, 1));
  }
}
/* Challenge answers are a single row of pictures on tablets: about 30% bigger so they are easy to hit and read. */
@media (min-width: 601px) and (max-width: 1100px) and (min-height: 501px) {
  .panel #practice-choices button {
    min-height: 64px;
  }

  .panel #practice-choices .choice-icon {
    flex-basis: 52px;
    width: 52px;
    height: 52px;
    line-height: 52px;
    font-size: 42px;
  }
}
/* Wide tablets in landscape (iPad Air and Pro) get the same touch size instead of the dense desktop one. */
@media (pointer: coarse) and (min-width: 1101px) and (min-height: 501px) {
  .panel :is(.vocabulary-buttons, .english-buttons, .buttons) {
    grid-auto-rows: minmax(80px, auto);
  }

  .panel :is(.vocabulary-buttons button, .english-buttons .command, .buttons .effect) {
    min-height: 80px;
  }

  .panel
    :is(.vocabulary-buttons, .english-buttons, .buttons)
    :is(.choice-icon, .activity-icon, .effect .icon) {
    flex-basis: 56px;
    width: 56px;
    height: 56px;
    line-height: 56px;
    font-size: 46px;
  }

  .panel
    :is(
      .vocabulary-buttons .choice-label,
      .english-buttons .command strong,
      .buttons .effect .label
    ) {
    font-size: calc(19px * var(--text-scale, 1));
  }
}
/* Leave complete words readable beside the permanent tablet controller. */
main[data-movement-docked="true"] .panel :is(.english-buttons, .vocabulary-buttons, .buttons) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
main[data-movement-docked="true"] .panel :is(.command, .effect, .vocabulary-buttons button) {
  flex-direction: column;
  justify-content: center;
  min-height: 112px;
  gap: 6px;
}
main[data-movement-docked="true"] .panel :is(.command strong, .choice-label, .effect .label) {
  text-align: center;
  overflow-wrap: normal;
  font-size: calc(18px * var(--text-scale, 1));
}

#word-progress-hint {
  margin: 0 0 8px;
  color: var(--color-ink-control);
  font-size: calc(0.85rem * var(--text-scale, 1));
  font-weight: 700;
}
body[data-journey-meet] #word-progress-hint {
  display: none;
}
body:not([data-journey-meet]) #vocabulary-buttons [data-word-progress="pending"] {
  --tile-top: var(--ad-gold-top);
  --tile-face: var(--ad-gold-face);
  --tile-edge: var(--ad-gold-edge);
  --tile-base: var(--ad-gold-base);
  --tile-ink: var(--ad-gold-ink);
}
body:not([data-journey-meet]) #vocabulary-buttons [data-word-progress="done"] {
  --tile-top: var(--ad-tint-mint);
  --tile-face: var(--ad-tint-mint);
  --tile-edge: var(--ad-mint-edge);
  --tile-base: var(--ad-mint-edge);
}
body:not([data-journey-meet]) #vocabulary-buttons [data-word-progress="done"]::after {
  content: "✓" / "";
  position: absolute;
  top: 3px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  background: #216647;
  color: white;
  font: 800 clamp(13px, 1.6vw, 22px)/1 sans-serif;
  pointer-events: none;
}