@import url("styles-v217.css?v=405");

/* Responsive sentence matching: use the available canvas and keep both
   sentence length and viewing distance readable on tablets and desktops. */
@media (min-width: 581px) {
  .choice-grid.matching-board.sentence-word-board {
    width: min(100%, 1240px);
    grid-template-columns: minmax(0, 1.28fr) minmax(230px, .82fr);
    gap: clamp(12px, 1.4vw, 20px);
  }

  .sentence-word-board .matching-left .matching-button {
    padding-inline: clamp(8px, 1.2vw, 16px);
    font-size: clamp(1.2rem, 2.05vw, 1.65rem);
    line-height: 1.18;
  }

  .sentence-word-board .matching-right .matching-button {
    font-size: clamp(1.45rem, 2.5vw, 2rem);
  }
}

@media (min-width: 900px) and (orientation: landscape) {
  .practice-card {
    --practice-inline: clamp(10px, 2vw, 28px);
  }

  .choice-grid.matching-board.sentence-word-board {
    width: calc(100% - clamp(0px, 1vw, 14px));
  }
}

@media (max-height: 700px) and (orientation: landscape) and (min-width: 581px) {
  .sentence-word-board .matching-left .matching-button {
    font-size: clamp(1.2rem, 2.05vw, 1.58rem);
  }
}

/* Device-specific keyboard composition refinements. */
@media (max-width: 580px) and (orientation: portrait) {
  .practice-view.embedded-keyboard-mode.direct-prompt-input .practice-prompt {
    bottom: calc(
      var(--practice-keyboard-height, 190px)
      + var(--practice-keyboard-offset)
      + clamp(42px, 5vh, 54px)
      + clamp(28px, 4vh, 38px)
    );
  }

  .practice-keyboard.phone-keyboard .key-submit,
  .progress-fill {
    background: var(--blue-2) !important;
  }
}

/* Reflow long matching content instead of shrinking it below readability. */
.practice-view.context-mode .practice-card { overflow-y: auto; }
.matching-button {
  min-width: 0;
  height: auto;
  min-height: 76px;
  font-size: clamp(1rem, 2.2vmin, 1.25rem);
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.sentence-word-board .matching-left .matching-button {
  min-height: 76px;
  padding: 9px clamp(10px, 1.5vw, 18px);
  font-size: clamp(1rem, 2.05vw, 1.65rem);
  line-height: 1.22;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}
.sentence-word-board .matching-left .matching-button.text-long {
  font-size: clamp(.95rem, 1.75vw, 1.35rem);
}
.sentence-word-board .matching-left .matching-button.text-very-long {
  min-height: 92px;
  font-size: clamp(.9rem, 1.5vw, 1.15rem);
}
.word-meaning-board .matching-right .matching-button {
  min-height: 76px;
  font-size: clamp(1rem, 2.5vmin, 1.45rem);
}
@media (max-width: 580px) {
  .choice-grid.matching-board { width: 100%; }
  .sentence-word-board .matching-left .matching-button {
    min-height: 52px;
    padding: 7px 8px;
    font-size: clamp(1rem, 4.4vw, 1.28rem);
  }
  .sentence-word-board .matching-left .matching-button.text-long,
  .sentence-word-board .matching-left .matching-button.text-very-long {
    min-height: 60px;
    font-size: clamp(.9rem, 3.8vw, 1.08rem);
  }
  .word-meaning-board .matching-button { min-height: 58px; }
}

.import-choice-row[hidden],
.account-detail-row[hidden],
.account-meter[hidden],
.account-add-button[hidden],
.account-upgrade-button[hidden] {
  display: none !important;
}

.import-choice-row button:disabled,
.account-panel button:disabled {
  opacity: .42;
  cursor: not-allowed;
}

/* Child-friendly 44px touch targets; icon artwork keeps its visual size. */
.top-settings,
.nav-list-current,
.nav-list-button,
.card-menu-label,
.day-menu-label,
.mode-button,
.mobile-mode-menu {
  min-height: 44px;
  height: 44px;
}
.nav-select-option,
.nav-list-option-row,
.nav-list-delete,
.word-list-select,
.word-list-delete,
.import-mode-button,
.import-template-button,
.settings-text-button,
.settings-select-button,
.plan-control select,
.accent-segment button,
.sound-toggle-button,
.progress-reset-button,
.inline-reset-confirm button,
.account-entry-button,
.account-upgrade-button,
.account-menu-button,
.account-add-button,
.account-protection-button,
.main-account-button,
.practice-speak-mark,
.mobile-mode-popover button,
.practice-key,
.import-review-item summary,
.import-review-item input,
.import-preview > .settings-text-button,
.reset-dialog .dialog-actions button,
.protection-form input,
.card-arrow {
  min-height: 44px;
}
.progress-reset-button,
.account-upgrade-button,
.account-add-button,
.main-account-button {
  min-width: 44px;
  width: 44px;
}
.account-details .account-detail-row {
  grid-template-columns: 78px 50px minmax(42px, 1fr) 44px;
}
.account-detail-row.account-resource-unavailable .account-detail-label,
.account-detail-row.account-resource-unavailable strong {
  color: rgba(175, 187, 202, .58);
}
.account-statistics-detail-row.account-resource-unavailable .statistics-copy,
.account-statistics-detail-row.account-resource-unavailable .account-stat-item b {
  color: rgba(175, 187, 202, .58);
}
.account-detail-row.account-resource-unavailable .account-detail-label svg {
  stroke: rgba(175, 187, 202, .5);
}
.account-meter.is-inactive {
  background: rgba(175, 187, 202, .16);
  opacity: .72;
}
.account-meter.is-inactive i { background: rgba(175, 187, 202, .28); }
.practice-view.summary-mode .practice-complete-actions .practice-next:focus,
.practice-view.summary-mode .practice-complete-actions .practice-next:focus-visible {
  outline: 0;
}
.account-panel-head .account-entry-button {
  max-width: calc(100% - 128px);
}
.account-protection-button {
  width: 84px;
  margin-right: 0;
}
@media (max-width: 580px) {
  .account-details .account-detail-row {
    grid-template-columns: 74px 50px minmax(36px, 1fr) 44px;
  }
  .account-protection-button { margin-right: 0; }
}

/* Selected card tab: blue front card, white label and white rear outline. */
.group-picker.active .card-menu-label,
.group-picker.active .card-menu-label:hover,
.group-picker.active .card-menu-label:focus,
.group-picker.active .card-menu-label:focus-visible {
  color: #fff !important;
  background: transparent !important;
}

.card-menu-label > span:first-child {
  width: min(calc(100% - 7px), 62px);
}

.group-picker.active .card-menu-label > span:first-child,
.group-picker.active .card-menu-label:hover > span:first-child,
.group-picker.active .card-menu-label:focus > span:first-child,
.group-picker.active .card-menu-label:focus-visible > span:first-child {
  color: #fff !important;
  background: var(--blue-2) !important;
  border-color: var(--blue-2) !important;
  box-shadow:
    4px -4px 0 -2px var(--navy),
    4px -4px 0 -1px rgba(255,255,255,.9) !important;
}

/* Word-bank plans and progress live directly in the first selector layer. */
.nav-list-popover {
  width: min(500px, calc(100vw - 24px));
  min-width: min(500px, calc(100vw - 24px));
}
.nav-list-options { max-height: min(58vh, 360px); }
.nav-list-option-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1ch;
  min-height: 48px;
  padding: 2px 6px;
  border-radius: 8px;
}
.nav-list-option-row .nav-select-option { min-width: 0; padding-inline: 10px 0; white-space: nowrap; }
.nav-list-option-row .nav-select-option .nav-list-option-copy {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}
.nav-list-option-row .nav-select-option .nav-list-option-name {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
}
.nav-list-option-row .nav-select-option small {
  margin-left: 4px;
  font-size: .7rem;
}
.nav-bank-tools {
  width: 216px;
  min-width: 216px;
  display: grid;
  grid-template-columns: 60px 68px 34px 44px;
  align-items: center;
  justify-content: end;
  column-gap: 0;
}
.nav-bank-plan { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 3px; color: var(--muted); font-size: .74rem; white-space: nowrap; }
.nav-bank-plan select {
  appearance: none;
  -webkit-appearance: none;
  width: 34px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  color: #fff;
  background: rgba(255,255,255,.055);
  font: inherit;
  font-size: .8rem;
  font-weight: 620;
  text-align: center;
  text-align-last: center;
  cursor: pointer;
}
.nav-bank-plan select::-ms-expand { display: none; }
.nav-bank-progress { min-width: 0; width: 100%; padding-right: 1ch; box-sizing: border-box; display: flex; align-items: center; }
.nav-bank-progress .settings-progress-track { flex: 1 1 auto; min-width: 0; }
.nav-bank-actions { display: contents; }
.nav-bank-reset, .nav-list-delete { position: relative; overflow: visible; color: var(--muted); }
.nav-bank-reset { min-width: 34px; width: 34px; }
.nav-list-delete { min-width: 44px; width: 44px; }
.nav-bank-reset[data-confirm="true"], .nav-list-delete[data-confirm="true"] { color: var(--blue); }
.nav-bank-reset::before, .nav-list-delete::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%);
  transition: background .12s ease;
  pointer-events: none;
}
.nav-bank-reset::before { transform: translate(-50%, -50%) translateX(7px); }
.nav-list-delete::before { transform: translate(-50%, -50%) translateX(-6px); }
.nav-bank-reset svg, .nav-list-delete svg { position: relative; z-index: 1; }
.nav-bank-reset svg { transform: translateX(7px); }
.nav-list-delete svg { transform: translateX(-6px); }
.nav-bank-reset[data-confirm="true"]::after,
.nav-list-delete[data-confirm="true"]::after {
  content: attr(data-confirm-label);
  position: absolute;
  top: 50%;
  right: calc(100% - 7px);
  transform: translateY(-50%);
  z-index: 20;
  height: 30px;
  min-height: 30px;
  padding: 0 8px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: 7px;
  color: #ffb5bc;
  background: var(--blue-2);
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  font-size: .7rem;
  font-weight: 450;
  line-height: 1;
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
}
.nav-bank-reset[data-confirm="true"]::after { right: calc(100% - 9px); }
.nav-list-delete[data-confirm="true"]::after { right: calc(100% - 1px); }
@media (hover: hover) and (pointer: fine) {
  .nav-bank-reset:hover,
  .nav-list-delete:hover { background: transparent; }
  .nav-bank-reset:hover::before,
  .nav-list-delete:hover::before { background: rgba(255,255,255,.065); }
}

/* Account identity and settings use separate rows. */
.main-account-panel {
  --account-preferences-gap: 8px;
  --account-controls-width: 336px;
  bottom: 48px;
  width: min(448px, calc(100% - 24px));
}
.account-panel-head {
  min-height: 80px;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 5px;
  padding: 5px 0 7px;
}
.account-identity { min-width: 0; width: 100%; flex: 1 1 auto; display: flex; align-items: center; }
.account-panel-head .account-entry-button { flex: 0 1 auto; max-width: calc(100% - 30px); }
.account-identity .account-upgrade-button { flex: 0 0 30px; margin-left: 0; }
.account-inline-statistics {
  min-width: 0;
  grid-column: 2 / 4;
  margin-left: 0;
  display: flex;
  align-items: baseline;
  color: rgba(198,213,231,.68);
  font-size: .7rem;
  font-weight: 420;
  letter-spacing: 0;
  text-align: left;
  flex-wrap: wrap;
  column-gap: 8px;
}
.account-stat-summary, .account-stat-breakdown { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.account-stat-summary { font-size: .82rem; }
.account-stat-item { display: inline-flex; align-items: baseline; gap: 4px; }
.account-stat-item + .account-stat-item {
  margin-left: 7px;
}
.account-inline-statistics b {
  color: rgba(244,249,255,.94);
  font-size: .78rem;
  font-weight: 560;
  font-variant-numeric: tabular-nums;
}
.account-inline-statistics small { color: inherit; font: inherit; }
.account-statistics-detail-row { grid-template-columns: 78px 50px minmax(0, 1fr) 44px !important; }
.account-usage-reset-button { position: relative; overflow: visible; }
.account-usage-reset-button[data-confirm="true"] { color: var(--blue); }
.account-usage-reset-button[data-confirm="true"]::after {
  content: attr(data-confirm-label);
  position: absolute;
  top: 50%;
  right: calc(100% - 2px);
  transform: translateY(-50%);
  z-index: 20;
  height: 30px;
  padding: 0 8px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  border-radius: 7px;
  color: #ffb5bc;
  background: var(--blue-2);
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  font-size: .7rem;
  font-weight: 450;
  line-height: 1;
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
}
.account-preferences-row {
  display: flex;
  align-items: center;
  width: var(--account-controls-width);
  gap: var(--account-preferences-gap);
  padding-left: 14px;
}
.memory-mode-segment,
.account-sound-controls { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
.memory-mode-segment {
  display: grid;
  grid-template-columns: auto auto;
  padding: 2px;
  border-radius: 9px;
  background: rgba(255,255,255,.035);
}
.account-sound-controls .accent-segment { width: auto; grid-template-columns: auto auto; padding: 2px; border-radius: 9px; background: rgba(255,255,255,.035); }
.memory-mode-segment button,
.account-sound-controls .accent-segment button,
.account-panel-head .account-protection-button {
  flex: 0 0 43px;
  width: 43px;
  min-width: 43px;
  max-width: 43px;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  padding: 0 7px;
  border: 0;
  border-radius: 7px;
  font-size: .78rem;
  line-height: 32px;
}
.memory-mode-segment button {
  flex-basis: 72px;
  width: 72px;
  min-width: 72px;
  max-width: 72px;
  padding-inline: 9px;
  border: 0;
  color: var(--muted);
  background: transparent;
  font: inherit;
  white-space: nowrap;
}
.memory-mode-segment button[aria-pressed="true"],
.account-sound-controls .accent-segment button[aria-pressed="true"] {
  color: #eef7ff;
  background: rgba(77,147,218,.28);
  box-shadow: none;
}
.account-sound-controls .sound-toggle-button { width: 43px; min-height: 32px; height: 32px; }
.account-panel-head .account-protection-button {
  flex-basis: 68px;
  width: 68px;
  min-width: 68px;
  max-width: 68px;
  margin: 0;
  color: var(--muted);
  background: rgba(255,255,255,.035);
}
.account-panel-head .account-protection-button[aria-pressed="true"] { color: #eef7ff; background: rgba(77,147,218,.28); box-shadow: none; }
.main-account-panel,
.settings-inline { font-family: var(--font-ui); font-size: .82rem; }
.protection-form {
  width: var(--account-controls-width);
  grid-template-columns: minmax(0, 1fr) 134px;
  column-gap: 5px;
  row-gap: 5px;
}
.protection-form label { justify-self: end; margin-right: 0; }
.protection-form input {
  grid-column: 2;
  width: 134px;
  height: 32px;
  min-height: 32px;
  padding-block: 0;
  border-radius: 5px;
  font-size: 16px;
}
.protection-form span { grid-column: 1 / -1; }
.main-account-button svg { width: 22px; height: 22px; }

/* The book menu uses the same visual system as the word-bank selector. */
.settings-inline {
  position: fixed;
  width: min(500px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: min(54vh, 360px);
  padding: 6px;
  border: 1px solid rgba(226,234,242,.14);
  border-radius: 11px;
  background: rgba(25,43,66,.97);
  box-shadow: 0 14px 34px rgba(3,10,18,.38);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.nav-select-popover,
.settings-inline,
.main-account-panel,
.mobile-mode-popover {
  border-color: rgba(226,234,242,.14);
  border-radius: 11px;
  background: rgba(25,43,66,.97);
  box-shadow: 0 14px 34px rgba(3,10,18,.38);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.nav-select-option,
.create-controls .settings-text-button,
.import-choice-row,
.download-flyout .word-list-item {
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: .82rem;
}
.settings-line.create-only-line { min-height: 0; }
.create-controls { gap: 2px; }
.create-controls .settings-text-button {
  min-height: 44px;
  padding: 0 10px;
  border-radius: 9px;
  background: transparent;
  font-size: .82rem;
}
.create-controls .settings-text-button[aria-expanded="true"] {
  color: #fff;
  background: rgba(77,147,218,.22);
  border-radius: 9px;
}
.create-controls > #importChooser:not([hidden]),
.create-controls > #importPreview:not([hidden]),
.create-controls > #downloadPanel:not([hidden]) {
  margin: 2px 0 4px;
  padding: 4px;
  border-top: 1px solid rgba(226,234,242,.09);
  border-radius: 0;
  background: transparent;
}
.import-chooser, .download-flyout .word-lists { gap: 2px; }
.import-choice-row,
.download-flyout .word-list-item {
  min-height: 44px;
  border-radius: 9px;
  background: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .create-controls .settings-text-button:hover,
  .import-choice-row:hover,
  .download-flyout .word-list-item:hover { color: #fff; background: rgba(255,255,255,.08); }
  .create-controls .settings-text-button[aria-expanded="true"]:hover { background: rgba(77,147,218,.28); }
}

/* Selected word-card navigation keeps its chosen styling but still responds to a pointer. */
.card-menu-label > span:first-child { transition: transform .15s ease, filter .15s ease, background .15s ease; }
@media (hover: hover) and (pointer: fine) {
  .group-picker.active .card-menu-label:hover > span:first-child {
    transform: translateY(-1px);
    filter: brightness(1.1);
  }
}

@media (max-width: 580px) {
  .main-account-panel {
    --account-preferences-gap: 4px;
    --account-controls-width: 328px;
  }
  .account-statistics-detail-row { grid-template-columns: 74px 50px minmax(0, 1fr) 44px !important; }
  .nav-list-popover {
    left: max(6px, env(safe-area-inset-left));
    right: max(6px, env(safe-area-inset-right));
    width: auto;
    min-width: 0;
    max-width: none;
  }
  .nav-list-option-row {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1ch;
    padding-inline: 2px;
  }
  .nav-list-option-row .nav-select-option { padding-inline: 8px 0; gap: 2px; font-size: .76rem; }
  .nav-list-option-name { padding-left: 9px; }
  .nav-list-option-name::before { left: 0; width: 3px; height: 3px; }
  .nav-list-option-row .nav-select-option small { font-size: .68rem; }
  .nav-bank-plan { gap: 1px; font-size: .72rem; }
  .nav-bank-plan select { width: 30px; font-size: .74rem; }
  .nav-bank-tools { width: 163px; min-width: 163px; grid-template-columns: 30px 61px 26px 36px; column-gap: 0; }
  .nav-bank-reset { min-width: 26px; width: 26px; }
  .nav-list-delete { min-width: 36px; width: 36px; }
  .nav-bank-reset::before { transform: translate(-50%, -50%) translateX(2px); }
  .nav-bank-reset svg { transform: translateX(2px); }
  .main-account-panel {
    left: max(4px, env(safe-area-inset-left));
    right: max(4px, env(safe-area-inset-right));
    width: auto;
    max-width: none;
  }
  .main-account-button,
  .card-footer-meta { bottom: max(12px, env(safe-area-inset-bottom)); }
  .card-hint { bottom: max(84px, calc(env(safe-area-inset-bottom) + 76px)); }
  .settings-inline { width: calc(100vw - 12px); max-width: calc(100vw - 12px); }
  .account-panel-head { padding-bottom: 7px; }
  .account-identity { flex-basis: auto; }
  .account-panel-head .account-entry-button { max-width: calc(100% - 30px); }
  .account-inline-statistics { font-size: .68rem; }
  .account-inline-statistics b { font-size: .76rem; }
  .account-stat-breakdown { flex-basis: 100%; }
  .account-stat-item + .account-stat-item { margin-left: 5px; }
}

@media (max-width: 360px) {
  .main-account-panel {
    --account-preferences-gap: 2px;
    --account-controls-width: 324px;
  }
  .account-panel-head { min-height: 80px; }
  .account-preferences-row { padding-left: 14px; }
  .account-panel-head .account-protection-button { margin-left: 0; }
  .account-stat-item + .account-stat-item { margin-left: 2px; }
}

@media (max-width: 580px) and (orientation: portrait) {
  .account-inline-statistics { flex-wrap: nowrap; column-gap: 4px; font-size: .64rem; }
  .account-stat-summary,
  .account-stat-summary b { font-size: .82rem; }
  .account-stat-breakdown b { font-size: .72rem; }
  .account-stat-breakdown { flex-basis: auto; }
  .account-stat-item + .account-stat-item { margin-left: 3px; }
  .wrong-word-row:has(.wrong-word-modes) { padding-top: 8px; padding-bottom: 8px; align-items: center; }
  .wrong-word-row:has(.wrong-word-modes) .wrong-word-copy { transform: none; align-self: center; }
  .wrong-meta { width: 112px; min-width: 112px; }
  .wrong-meta-headline {
    grid-template-columns: auto auto auto;
    grid-template-rows: auto;
    align-items: center;
    column-gap: 4px;
  }
  .wrong-status-label,
  .wrong-meta-separator,
  .wrong-error-count { grid-row: 1; align-self: center; }
  .wrong-status-label { grid-column: 1; }
  .wrong-meta-separator { grid-column: 2; }
  .wrong-error-count { grid-column: 3; justify-self: end; }
  .wrong-review-count { display: none; }
  .wrong-word-row .wrong-meta .wrong-word-modes {
    position: static;
    width: 100%;
    justify-content: space-between;
    gap: 0;
    margin: 0;
    padding-top: 4px;
  }
  .wrong-word-row.is-flipped { min-height: 68px; }
  .wrong-word-row.is-flipped > .wrong-word-back {
    min-height: 50px;
    align-content: center;
  }
}

@media (min-width: 581px) and (max-width: 1366px) and (pointer: coarse) {
  .nav-list-popover {
    width: min(440px, calc(100vw - 32px));
    min-width: min(440px, calc(100vw - 32px));
  }
  .nav-list-option-row {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1ch;
  }
  .nav-bank-tools { width: 198px; min-width: 198px; grid-template-columns: 44px 66px 34px 44px; column-gap: 0; }
  .settings-inline { width: min(440px, calc(100vw - 32px)); }
  .main-account-button,
  .card-footer-meta { bottom: max(16px, env(safe-area-inset-bottom)); }
}

@media (min-width: 581px) and (pointer: fine) {
  .nav-select-popover.nav-list-popover {
    width: min(500px, calc(100vw - 24px));
    min-width: min(500px, calc(100vw - 24px));
  }
}

@media (min-width: 581px) and (max-width: 1366px) and (orientation: portrait) {
  .choice-grid.matching-board.word-meaning-board,
  .choice-grid.matching-board.sentence-word-board {
    width: 100%;
    max-width: none;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: clamp(12px, 2vw, 18px);
  }
  .choice-grid.matching-board > .matching-column,
  .choice-grid.matching-board .matching-button {
    width: 100% !important;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
    justify-self: stretch;
  }
}

.card-autoplay-button:disabled {
  opacity: .28;
  cursor: default;
  pointer-events: none;
}

@media (max-height: 580px) and (max-width: 1000px) and (orientation: landscape) {
  .practice-view.embedded-keyboard-mode {
    --practice-keyboard-offset: max(42px, calc(env(safe-area-inset-bottom) + 34px));
  }

  .practice-keyboard.phone-keyboard .key-submit,
  .progress-fill {
    background: var(--blue-2) !important;
  }

  .practice-view.embedded-keyboard-mode.direct-prompt-input .practice-prompt {
    bottom: calc(var(--practice-keyboard-height, 138px) + var(--practice-keyboard-offset) + 2px);
  }
}

@media (min-width: 581px) and (max-width: 1366px) and (pointer: coarse) and (orientation: portrait) {
  .practice-view.embedded-keyboard-mode.direct-prompt-input .practice-prompt {
    bottom: calc(
      var(--practice-keyboard-height, 190px)
      + var(--practice-keyboard-offset)
      + clamp(22px, 3vh, 34px)
      + clamp(16px, 2vh, 24px)
      + clamp(16px, 2vh, 22px)
    );
  }
}

/* Navigation must remain the highest interactive layer on tablet and phone.
   This is unconditional so landscape viewport and pointer detection cannot
   let a fixed prompt or keyboard intercept navigation taps. */
@media (max-width: 1366px) {
  .mode-bar {
    z-index: 130;
  }

  .mode-bar .nav-select-popover,
  .mode-bar .mobile-mode-popover {
    z-index: 135;
  }

  .nav-list-current:has(.nav-list-button[aria-expanded="true"]),
  .day-current:has(.day-menu-label[aria-expanded="true"]),
  .group-current:has(.card-menu-label[aria-expanded="true"]),
  .mobile-mode-menu[open] {
    z-index: 134;
  }
}

.account-login-dialog {
  width: min(420px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 0;
  border: 1px solid rgba(155, 177, 201, .32);
  border-radius: 20px;
  background: #17283c;
  color: var(--text);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .45);
}

.account-login-dialog::backdrop {
  background: rgba(7, 15, 25, .78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.account-login-dialog form { position: relative; padding: 28px; }
.account-login-brand { margin: 0 0 8px; color: var(--muted); font-size: .88rem; }
.account-login-dialog h2 { margin: 0 0 8px; font-size: 1.45rem; }
.account-login-dialog form > p:not(.account-login-brand):not(.account-login-message):not(.account-login-safety) { margin: 0 0 22px; color: var(--muted); line-height: 1.55; }
.account-login-dialog label { display: block; margin: 14px 0 7px; color: var(--muted); font-size: .92rem; }
.account-login-dialog input {
  width: 100%; min-height: 46px; box-sizing: border-box; padding: 10px 12px;
  border: 1px solid rgba(155, 177, 201, .35); border-radius: 11px;
  background: #0f1e2f; color: var(--text); font: inherit;
}
.account-login-dialog input:focus { outline: 2px solid var(--blue-2); outline-offset: 1px; }
.account-login-dialog .primary-button { width: 100%; min-height: 46px; margin-top: 12px; }
.account-login-close { position: absolute; top: 13px; right: 15px; border: 0; background: none; color: var(--muted); font-size: 1.8rem; cursor: pointer; }
.account-login-message { min-height: 1.5em; margin: 12px 0 0; color: #ffc36b; font-size: .92rem; line-height: 1.5; }
.account-login-back { display: block; margin: 12px auto 0; border: 0; background: none; color: #9bc7ff; font: inherit; cursor: pointer; }
.account-login-safety { margin: 18px 0 0; color: var(--muted); font-size: .82rem; line-height: 1.5; text-align: center; }

.data-safety-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(7, 15, 25, .76);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.data-safety-overlay[hidden] { display: none; }

.data-safety-card {
  width: min(420px, calc(100vw - 48px));
  box-sizing: border-box;
  padding: 24px;
  border: 1px solid rgba(155, 177, 201, .3);
  border-radius: 18px;
  background: #17283c;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
  color: var(--text);
}

.data-safety-card h2 {
  margin: 0 0 10px;
  font-size: 1.2rem;
}

.data-safety-card p {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
}

.data-safety-card .primary-button {
  width: 100%;
  min-height: 44px;
}

@media (max-width: 580px) and (orientation: portrait) {
  .practice-view.spell-mode .spelling-prompt {
    font-size: clamp(3rem, 14vw, 4rem);
  }

  .practice-view.spell-mode .spelling-prompt.word-medium,
  .practice-view.spell-mode .spelling-prompt.word-mobile-medium {
    font-size: clamp(2.65rem, 12vw, 3.35rem);
  }

  .practice-view.spell-mode .spelling-prompt.word-long,
  .practice-view.spell-mode .spelling-prompt.word-mobile-long {
    font-size: clamp(2.2rem, 10vw, 2.85rem);
  }
}

@media (max-width: 1366px) {
  /* The book-icon panel begins below the navigation instead of underneath it. */
  .settings-inline {
    top: calc(max(12px, env(safe-area-inset-top)) + 46px);
    z-index: 125;
  }

  /* Direct keyboard input does not require pointer handling on the visual
     prompt; allowing taps through guarantees the navigation remains usable. */
  .practice-view.embedded-keyboard-mode.direct-prompt-input .practice-prompt {
    pointer-events: none;
  }
}