/* Duolingo-reference lesson treatment. The existing engine owns all answers,
   rewards, recovery and accessibility; these rules only change presentation. */
body[data-experience='duo'] {
  --duo-green: #58cc02;
  --duo-green-depth: #46a302;
  --duo-blue: #1cb0f6;
  --duo-blue-soft: #ddf4ff;
  --duo-ink: #3c3c3c;
  --duo-line: #e5e5e5;
  --duo-muted: #afafaf;
}

body[data-experience='duo'] .button.primary {
  color: #fff;
  background: var(--duo-green);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--duo-green-depth);
  text-transform: uppercase;
  letter-spacing: .025em;
  font-weight: 900;
}
body[data-experience='duo'] .button.primary:hover:not(:disabled) {
  background: #61d807;
  box-shadow: 0 4px 0 var(--duo-green-depth);
  transform: none;
}
body[data-experience='duo'] .button.primary:active:not(:disabled) {
  background: var(--duo-green);
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--duo-green-depth);
}
body[data-experience='duo'] .button.primary:disabled {
  color: var(--duo-muted);
  background: var(--duo-line);
  border-color: var(--duo-line);
  box-shadow: none;
  opacity: 1;
  transform: none;
}
body[data-experience='duo'] .button.secondary {
  color: #777;
  background: #fff;
  border: 2px solid var(--duo-line);
  border-radius: 14px;
  box-shadow: 0 2px 0 var(--duo-line);
}

body[data-experience='duo'] .play-main {
  max-width: 600px;
  padding: max(36px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  color: var(--duo-ink);
  background: #fff;
}
body[data-experience='duo'] .lesson-progress {
  height: 64px;
  min-height: 64px;
  gap: 8px;
  padding: 0;
  margin: 0;
  background: #fff;
}
body[data-experience='duo'] .lesson-progress .lesson-back,
body[data-experience='duo'] .lesson-menu-wrap > .lesson-menu-button {
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 10px;
  margin: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #777;
  box-shadow: none;
  transform: none;
}
body[data-experience='duo'] .lesson-menu-wrap {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
}
body[data-experience='duo'] .lesson-progress .lesson-back:hover,
body[data-experience='duo'] .lesson-menu-wrap > .lesson-menu-button:hover {
  background: #f7f7f7;
  color: #555;
  box-shadow: none;
  transform: none;
}
body[data-experience='duo'] .lesson-menu-wrap .menu-glyph {
  width: 24px;
  height: 22px;
}
body[data-experience='duo'] .lesson-menu-wrap .menu-glyph i { width: 24px; }
body[data-experience='duo'] .lesson-status-button {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 8px 0;
  margin: 0 4px;
  background: transparent;
  border-radius: 8px;
}
body[data-experience='duo'] .lesson-status-button:hover,
body[data-experience='duo'] .lesson-status-button[aria-expanded='true'] { background: transparent; }
body[data-experience='duo'] .lesson-status-button .progress-ring { display: none; }
body[data-experience='duo'] .duo-progress-track {
  display: block;
  width: 100%;
  height: 17px;
  overflow: hidden;
  border-radius: 20px;
  background: #e9e9eb;
}
body[data-experience='duo'] .duo-progress-value {
  position: relative;
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: #ff9600;
  transition: width .25s ease;
}
body[data-experience='duo'] .duo-progress-value::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 7px;
  right: 7px;
  height: 5px;
  border-radius: inherit;
  background: #ffb531;
}
body[data-experience='duo'] .lesson-progress .learning-stats {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  gap: 0;
}
body[data-experience='duo'] .lesson-progress .learning-stat {
  min-width: 0;
  min-height: 44px;
  height: 44px;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  gap: 6px;
}
body[data-experience='duo'] .lesson-progress .learning-stat strong {
  font-size: 18px;
  line-height: 1;
  color: var(--duo-ink);
}
body[data-experience='duo'] .lesson-progress .learning-stat small { display: none; }
body[data-experience='duo'] .lesson-progress .learning-stat .game-coin {
  width: 29px;
  height: 29px;
}
body[data-experience='duo'] .question-head { padding: 16px 0 24px; }
body[data-experience='duo'] .question-head h1 {
  font-size: 27px;
  line-height: 1.2;
  font-weight: 950;
  letter-spacing: -.018em;
  color: #3c3744;
}
body[data-experience='duo'] .game-stage > .fit-content { padding: 12px 0; }
body[data-experience='duo'] .game-stage .lesson-scene {
  margin: 0 0 16px;
  max-height: 210px;
}
body[data-experience='duo'] .play-main[data-step-kind='match'] .lesson-scene { display: none; }
body[data-experience='duo'] .play-main[data-step-kind='match'] .game-stage > .fit-content { padding-top: 24px; }

body[data-experience='duo'] .game-stage .answer-grid:not(.picture-choices) { grid-template-columns: minmax(0, 1fr); }
body[data-experience='duo'] .game-stage .answer-grid { gap: 12px; }
body[data-experience='duo'] .game-stage .answer-choice {
  min-height: 58px;
  padding: 13px 16px;
  border: 2px solid var(--duo-line);
  border-radius: 14px;
  color: #3c3744;
  background: #fff;
  box-shadow: 0 2px 0 var(--duo-line);
  justify-content: center;
  align-items: center;
  text-align: center;
  transform: none;
}
body[data-experience='duo'] .game-stage .answer-choice:hover:not(:disabled) {
  background: #f7f7f7;
  border-color: #dadada;
  box-shadow: 0 2px 0 #dadada;
  transform: none;
}
body[data-experience='duo'] .game-stage .answer-choice.selected,
body[data-experience='duo'] .game-stage .answer-choice.is-correct {
  background: var(--duo-blue-soft);
  border-color: var(--duo-blue);
  color: #0068a8;
  box-shadow: 0 2px 0 var(--duo-blue);
}
body[data-experience='duo'] .game-stage .choice-mark { display: none; }
body[data-experience='duo'] .game-stage .choice-title {
  color: inherit;
  font-size: 19px;
  line-height: 1.28;
  font-weight: 850;
}
body[data-experience='duo'] .game-stage .choice-sub { color: #777; font-size: 13px; }
body[data-experience='duo'] .game-stage .picture-choices .answer-choice {
  min-height: 144px;
  padding: 12px;
}
body[data-experience='duo'] .game-stage .picture-choices .choice-image { height: clamp(70px, 12dvh, 110px); }

body[data-experience='duo'] .game-stage .matching-grid { gap: 28px; }
body[data-experience='duo'] .game-stage .matching-column { gap: 22px; }
body[data-experience='duo'] .game-stage .match-tile {
  min-height: 76px;
  padding: 12px 10px;
  border: 2px solid var(--duo-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
  color: #3c3744;
  font-size: 20px;
  font-weight: 750;
  line-height: 1.25;
  justify-content: center;
  text-align: center;
  transform: none;
}
body[data-experience='duo'] .game-stage .match-tile .icon { display: none; }
body[data-experience='duo'] .game-stage .match-tile:hover:not(:disabled) { background: #f7f7f7; transform: none; }
body[data-experience='duo'] .game-stage .match-tile.selected {
  background: var(--duo-blue-soft);
  border-color: var(--duo-blue);
  color: #0068a8;
  box-shadow: none;
}
body[data-experience='duo'] .game-stage .match-tile.matched {
  color: #234e1d;
  border-color: #8fce57;
  background: #e5ffc9;
  box-shadow: none;
}

body[data-experience='duo'] .game-stage .dialogue-card,
body[data-experience='duo'] .game-stage .phrase-card {
  border: 2px solid var(--duo-line);
  background: #fff;
  box-shadow: none;
  border-radius: 16px;
  color: var(--duo-ink);
}
body[data-experience='duo'] .game-stage .dialogue-card { margin-bottom: 14px; }
body[data-experience='duo'] .game-stage .dialogue-phrase,
body[data-experience='duo'] .game-stage .phrase-text strong { color: #3c3744; }
body[data-experience='duo'] .game-stage .dialogue-meaning,
body[data-experience='duo'] .game-stage .phrase-text p { color: #777; }
body[data-experience='duo'] .game-stage .audio-button {
  min-height: 44px;
  background: #fff;
  border: 2px solid var(--duo-line);
  color: #0099e5;
  border-radius: 12px;
  box-shadow: 0 2px 0 var(--duo-line);
}
body[data-experience='duo'] .game-stage .audio-button.playing { background: var(--duo-blue-soft); border-color: var(--duo-blue); }
body[data-experience='duo'] .game-stage .name-input,
body[data-experience='duo'] .game-stage .typed-input {
  min-height: 56px;
  border: 2px solid var(--duo-line);
  background: #f7f7f7;
  border-radius: 14px;
  color: var(--duo-ink);
  font-size: 18px;
  box-shadow: none;
}
body[data-experience='duo'] .game-stage .name-input:focus,
body[data-experience='duo'] .game-stage .typed-input:focus { border-color: var(--duo-blue); background: #fff; outline-color: var(--duo-blue); }
body[data-experience='duo'] .game-stage .word-token,
body[data-experience='duo'] .game-stage .sentence-token,
body[data-experience='duo'] .game-stage .letter-key {
  min-height: 44px;
  border: 2px solid var(--duo-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 0 var(--duo-line);
  color: var(--duo-ink);
  font-size: 17px;
}
body[data-experience='duo'] .game-stage .word-token.used,
body[data-experience='duo'] .game-stage .word-token:disabled { background: #e5e5e5; color: transparent; }
body[data-experience='duo'] .game-stage .sentence-token { border-color: #b6dff0; background: var(--duo-blue-soft); }
body[data-experience='duo'] .game-stage .record-button {
  min-height: 48px;
  background: var(--duo-blue-soft);
  border: 2px solid var(--duo-blue);
  color: #0068a8;
  box-shadow: 0 2px 0 #1598d5;
  border-radius: 14px;
}
body[data-experience='duo'] .game-stage .record-button.recording { color: #d33131; background: #ffdfdf; border-color: #ff4b4b; box-shadow: 0 2px 0 #db3535; }
body[data-experience='duo'] .game-stage .memory-card {
  min-height: 58px;
  border: 2px solid var(--duo-line);
  border-radius: 14px;
  color: #777;
  background: #f7f7f7;
  box-shadow: 0 2px 0 var(--duo-line);
  transform: none;
}
body[data-experience='duo'] .game-stage .memory-card.flipped {
  color: #0068a8;
  background: var(--duo-blue-soft);
  border-color: var(--duo-blue);
  box-shadow: 0 2px 0 var(--duo-blue);
}
body[data-experience='duo'] .game-stage .memory-card.matched {
  color: #234e1d;
  background: #e5ffc9;
  border-color: #8fce57;
  box-shadow: 0 2px 0 #8fce57;
}
body[data-experience='duo'] .game-stage .trace-surface {
  border: 2px solid var(--duo-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 0 var(--duo-line);
}
body[data-experience='duo'] .game-stage .trace-controls button {
  min-height: 44px;
  border: 2px solid var(--duo-line);
  border-radius: 12px;
  color: #777;
  background: #fff;
}
body[data-experience='duo'] .game-stage .trace-status,
body[data-experience='duo'] .game-stage .memory-count { color: #777; }

body[data-experience='duo'] .lesson-controls {
  padding: 16px 0 0;
  background: #fff;
  box-shadow: none;
}
body[data-experience='duo'] .lesson-controls .bottom-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  min-height: 124px;
  height: auto;
}
body[data-experience='duo'] .lesson-controls .hint-button {
  min-height: 44px;
  padding: 10px 14px;
  border: 2px solid var(--duo-line);
  border-radius: 12px;
  background: #fff;
  color: #555;
  font-size: 16px;
  font-weight: 800;
}
body[data-experience='duo'] .lesson-controls .hint-button .icon { width: 20px; height: 20px; color: #e9ab00; }
body[data-experience='duo'] .lesson-controls .bottom-actions > .check-button {
  width: 100%;
  min-height: 56px;
  max-width: none;
  margin: 0;
  padding: 14px 18px;
  font-size: 18px;
  line-height: 1.2;
}
body[data-experience='duo'] .lesson-controls .check-button > .icon { display: none; }
body[data-experience='duo'] .lesson-controls.is-correct,
body[data-experience='duo'] .lesson-controls.is-retry {
  width: calc(100% + 32px);
  margin-left: -16px;
  margin-right: -16px;
  margin-bottom: calc(-1 * max(16px, env(safe-area-inset-bottom)));
  padding: 20px 20px max(26px, env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0;
  background: #e1ffc6;
}
body[data-experience='duo'] .lesson-controls.is-retry { background: #ffdfdf; }
body[data-experience='duo'] .lesson-controls:is(.is-correct, .is-retry) .bottom-actions { gap: 16px; min-height: 130px; }
body[data-experience='duo'] .lesson-controls .feedback-copy {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #397c0b;
}
body[data-experience='duo'] .lesson-controls .feedback-copy strong {
  gap: 12px;
  color: #285c0c;
  font-size: 25px;
  line-height: 1.25;
  font-weight: 950;
}
body[data-experience='duo'] .lesson-controls .feedback-copy strong .icon { width: 30px; height: 30px; color: #58a700; }
body[data-experience='duo'] .lesson-controls .feedback-copy p { color: inherit; font-size: 15px; line-height: 1.35; margin-top: 5px; }
body[data-experience='duo'] .lesson-controls .feedback-copy.retry,
body[data-experience='duo'] .lesson-controls .feedback-copy.retry strong,
body[data-experience='duo'] .lesson-controls .feedback-copy.retry strong .icon { color: #d33131; }
body[data-experience='duo'] .lesson-controls.is-retry .button.primary { background: #ff4b4b; box-shadow: 0 4px 0 #dc3535; }
body[data-experience='duo'] .lesson-controls .answer-coins { color: inherit; font-size: 15px; }

@media (min-width: 700px) {
  body[data-experience='duo'] .play-main { padding-top: 36px; }
  body[data-experience='duo'] .question-head { padding-top: 22px; }
  body[data-experience='duo'] .question-head h1 { font-size: 30px; }
  body[data-experience='duo'] .lesson-controls:is(.is-correct, .is-retry) { border-radius: 22px; margin-bottom: 0; }
}
@media (max-height: 720px) {
  body[data-experience='duo'] .play-main { padding-top: max(12px, env(safe-area-inset-top)); }
  body[data-experience='duo'] .lesson-progress { min-height: 52px; height: 52px; }
  body[data-experience='duo'] .question-head { padding: 10px 0 16px; }
  body[data-experience='duo'] .question-head h1 { font-size: 24px; }
  body[data-experience='duo'] .game-stage .matching-grid { gap: 18px; }
  body[data-experience='duo'] .game-stage .matching-column { gap: 14px; }
  body[data-experience='duo'] .game-stage .match-tile { min-height: 58px; font-size: 18px; }
  body[data-experience='duo'] .lesson-controls .bottom-actions { gap: 12px; min-height: 108px; }
  body[data-experience='duo'] .lesson-controls .bottom-actions > .check-button { min-height: 50px; font-size: 16px; }
  body[data-experience='duo'] .lesson-controls:is(.is-correct, .is-retry) .bottom-actions { min-height: 108px; gap: 12px; }
}
@media (max-width: 360px) {
  body[data-experience='duo'] .play-main { padding-left: 12px; padding-right: 12px; }
  body[data-experience='duo'] .lesson-progress { gap: 3px; }
  body[data-experience='duo'] .game-stage .matching-grid { gap: 14px; }
  body[data-experience='duo'] .game-stage .match-tile { font-size: 17px; }
  body[data-experience='duo'] .lesson-controls:is(.is-correct, .is-retry) { width: calc(100% + 24px); margin-left: -12px; margin-right: -12px; }
}
.keyboard-open body[data-experience='duo'] .play-main { padding-top: 0; padding-bottom: 8px; }
.keyboard-open body[data-experience='duo'] .question-head { padding: 5px 0 10px; }
.keyboard-open body[data-experience='duo'] .question-head h1 { font-size: 22px; }
.keyboard-open body[data-experience='duo'] .lesson-progress { min-height: 44px; height: 44px; }
.keyboard-open body[data-experience='duo'] .lesson-controls { padding-top: 8px; }
.keyboard-open body[data-experience='duo'] .lesson-controls .bottom-actions { grid-template-columns: auto minmax(0, 1fr); min-height: 56px; gap: 12px; }
.keyboard-open body[data-experience='duo'] .lesson-controls:is(.is-correct, .is-retry) .bottom-actions { grid-template-columns: minmax(0, 1fr); min-height: 96px; gap: 10px; }
@media (prefers-reduced-motion: reduce) {
  body[data-experience='duo'] .duo-progress-value,
  body[data-experience='duo'] .button.primary { transition: none; }
}

body[data-experience="duo"] .lesson-progress .streak-stat,body[data-experience="duo"] .lesson-progress .xp-stat{display:none}
body[data-experience="duo"] .lesson-progress>.learning-stats{display:flex;flex:0 0 50px;width:50px;min-width:50px;max-width:50px;margin:0}
body[data-experience="duo"] .lesson-progress .lesson-status-button{flex:1 1 0;width:auto;max-width:none}

/* The existing viewport fitter applies these classes in order as space
   tightens. Keep the board usable without shrinking its touch targets. */
body[data-experience='duo'] .play-main[data-step-kind='match'] .game-stage.fit-compact > .fit-content { padding-top: 12px; padding-bottom: 8px; }
body[data-experience='duo'] .game-stage.fit-compact .matching-grid { gap: 20px; }
body[data-experience='duo'] .game-stage.fit-compact .matching-column { gap: 14px; }
body[data-experience='duo'] .game-stage.fit-compact .match-tile { min-height: 62px; padding: 10px; font-size: 18px; }
body[data-experience='duo'] .play-main[data-step-kind='match'] .game-stage.fit-tight > .fit-content { padding-top: 8px; padding-bottom: 6px; }
body[data-experience='duo'] .game-stage.fit-tight .matching-grid,
body[data-experience='duo'] .game-stage.fit-tight .matching-column { gap: 10px; }
body[data-experience='duo'] .game-stage.fit-tight .match-tile { min-height: 50px; padding: 8px; font-size: 16px; }
body[data-experience='duo'] .play-main[data-step-kind='match'] .game-stage.fit-minimal > .fit-content { padding-top: 4px; padding-bottom: 4px; }
body[data-experience='duo'] .game-stage.fit-minimal .matching-grid,
body[data-experience='duo'] .game-stage.fit-minimal .matching-column { gap: 8px; }
body[data-experience='duo'] .game-stage.fit-minimal .match-tile { min-height: 44px; padding: 7px; font-size: 16px; }

/* Keep the coin artwork inside its slot, including on narrow phones. */
body[data-experience="duo"] .lesson-progress>.learning-stats{flex:0 0 auto;width:auto;min-width:58px;max-width:92px}
body[data-experience="duo"] .lesson-progress .coin-stat{display:flex;gap:6px;min-width:0;padding:0}
body[data-experience="duo"] .lesson-progress .coin-stat .progress-art{flex:0 0 26px;width:26px;height:26px}
body[data-experience="duo"] .lesson-progress .coin-stat .game-coin{width:26px;height:26px}
body[data-experience="duo"] .game-stage .record-privacy{font-size:12px;line-height:1.4}