.word-practice-shell { padding-bottom: 34px; }

.wp-view { padding: 10px 0 24px; }

.wp-summary-stat span {
  color: var(--text-muted);
  font-size: 16px;
  font-weight: 600;
}

.wp-summary-stat .stat-v {
  display: block;
  color: var(--text-main);
  font-size: 30px;
  font-weight: 750;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* The filter card and chips are the same structure and stylesheet as resource pages. */
.wp-filter-section { margin-bottom: 24px; }
.wp-filter-section .res-filters { margin-bottom: 0; }
.wp-filter-section .resource-search-wrap { min-width: 0; }
.wp-filter-section .resource-search-wrap .input { width: 100%; }
.wp-filter-section .res-chips { min-width: 0; }
.wp-filter-section .res-chip {
  font-size: 13px;
  font-weight: 600;
}

/* Kept in the DOM for the existing tab state hook; visible controls use .res-chip. */
.wp-mode-tabs { align-items: center; }
.wp-mode-slider { display: none; }
.wp-mode-tab { font-size: 13px; font-weight: 600; }
.wp-mode-tab.is-active { background: #edf2f7; color: #1f2937; }

:root[data-theme="dark"] .wp-mode-tab.is-active {
  background: #223757;
  color: #e6edf7;
}

.wp-category-fallback { display: none !important; }

/* Keep the history page's rolling-number hooks available to the main JS. */
.wp-summary-stats .stat-v { font-feature-settings: "tnum"; }
.wp-summary-stats .stat-roller { display: inline-flex; align-items: baseline; min-height: 1em; line-height: 1; font-variant-numeric: tabular-nums; }
.wp-summary-stats .stat-roller-digit { display: inline-block; height: 1em; overflow: hidden; line-height: 1; vertical-align: bottom; }
.wp-summary-stats .stat-roller-strip { display: flex; flex-direction: column; will-change: transform; transform: translateY(0); }
.wp-summary-stats .stat-roller-step { display: block; flex: 0 0 1em; height: 1em; line-height: 1; }
.wp-summary-stats .stat-roller-separator { display: inline-block; line-height: 1; }

.wp-practice-timer {
  color: var(--text-main);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.wp-practice-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.wp-list-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  min-height: 120px;
}

.wp-list-card {
  display: flex;
  flex-direction: column;
  gap: 13px;
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  animation: wp-card-enter 360ms cubic-bezier(.2, .8, .2, 1) forwards;
  animation-delay: calc(var(--wp-card-index, 0) * 32ms);
}

.wp-list-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wp-list-card h3 { margin: 0; font-size: 17px; overflow-wrap: anywhere; }
.wp-list-card p { margin: 3px 0 0; color: var(--text-muted); font-size: 13px; }
.wp-list-count { flex: 0 0 auto; color: var(--primary-dark); font-size: 13px; font-weight: 700; }
.wp-list-meta { display: flex; gap: 12px; color: var(--text-muted); font-size: 13px; }
.wp-list-meta .has-review { color: var(--warning); }

@keyframes wp-card-enter {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .wp-list-card {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* Modal skeleton; hidden=false remains supported for the current card-selection hook. */
.wp-settings {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(18, 31, 48, .42);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.wp-settings.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.wp-settings.is-open { display: flex !important; }

.wp-settings[hidden] { display: none !important; }

.wp-settings-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  cursor: default;
}

.wp-settings-dialog {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  max-height: calc(100dvh - 48px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 18px 42px rgba(15, 35, 62, .2);
  opacity: 0;
  transform: translateY(8px) scale(.985);
  transition: opacity 220ms ease, transform 220ms cubic-bezier(.22, 1, .36, 1);
}

.wp-settings.is-open .wp-settings-dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.wp-settings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 16px;
}

.wp-settings-kicker {
  margin: 0 0 4px;
  color: var(--text-muted);
  font-size: 12px;
}

.wp-settings-head h2 { margin: 0; font-size: 20px; }

.wp-settings-close {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.wp-settings-close:hover { background: var(--neutral-control-hover); color: var(--primary-dark); }
.wp-settings-close .fluent-icon { width: 20px; height: 20px; }

.wp-settings-body { display: grid; gap: 20px; padding: 20px 22px; }
.wp-selected-copy { display: grid; gap: 4px; min-width: 0; }
.wp-selected-copy span { color: var(--text-muted); font-size: 13px; }
.wp-selected-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wp-settings-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px;
}

.wp-settings-fields label { display: grid; gap: 7px; min-width: 0; color: var(--text-muted); font-size: 13px; }
.wp-settings-fields label:not(.wp-check) .select { width: 100%; min-width: 0; }
.wp-settings .select { min-width: 112px; }
.wp-check { display: flex !important; align-items: center; min-height: 44px; gap: 8px !important; color: var(--text-main) !important; white-space: nowrap; }
.wp-check input { width: 17px; height: 17px; accent-color: var(--primary); }
.wp-check.is-disabled { color: var(--text-muted) !important; cursor: default; }

.wp-settings-actions {
  display: flex;
  justify-content: flex-end;
  padding: 15px 22px 18px;
}

.wp-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 2px 0 14px; }
.wp-section-head h3 { margin: 0; font-size: 20px; }
.wp-section-head p { margin: 3px 0 0; color: var(--text-muted); font-size: 13px; }

.wp-wrong-toolbar {
  display: flex;
  justify-content: flex-end;
  min-height: 34px;
  margin-bottom: 4px;
}

.wp-clear-wrong-btn { min-height: 34px; padding-inline: 9px; }
.wp-wrong-list { display: grid; gap: 0; }
.wp-wrong-row { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(180px, 1.4fr) auto; align-items: center; gap: 14px; padding: 10px 4px; border-bottom: 1px solid var(--border); }
.wp-wrong-row strong { overflow-wrap: anywhere; }
.wp-wrong-row p { margin: 2px 0 0; color: var(--text-muted); font-size: 12.5px; }
.wp-wrong-row .wp-answer { color: var(--primary-dark); font-weight: 650; }
.wp-empty { display: grid; place-items: center; min-height: 220px; color: var(--text-muted); text-align: center; }
.wp-empty i { width: 34px; height: 34px; margin-bottom: 10px; opacity: .65; }

/* Shared game surface for the matching and tile-clear modes. */
.wp-game-view { max-width: 900px; margin: 0 auto; padding-top: 18px; }
.wp-game-view.is-tile-clear { max-width: 1120px; }
.wp-game-view.is-tile-clear .wp-game-head { margin-bottom: 42px; }
.wp-game-view[hidden], .wp-game-panel[hidden] { display: none !important; }
.wp-game-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wp-game-head { margin-bottom: 24px; }
.wp-game-head .wp-practice-toolbar { margin-bottom: 16px; }
.wp-game-back {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.wp-game-back:hover { background: rgb(237, 237, 237); color: var(--text-main); }
.wp-game-back .fluent-icon { width: 22px; height: 22px; }
.wp-game-intro {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--surface);
  text-align: center;
  transition: opacity 260ms ease, visibility 260ms ease;
}
.wp-game-intro[hidden] { display: none; }
.wp-game-intro.is-leaving { opacity: 0; visibility: hidden; }
.wp-game-intro-copy { animation: wp-game-intro-in 360ms cubic-bezier(.22, 1, .36, 1) both; }
.wp-game-intro h2 { margin: 0; font-size: clamp(34px, 7vw, 64px); }
.wp-game-intro p { margin: 16px 0 0; color: var(--text-muted); font-size: clamp(15px, 2vw, 20px); }
.wp-game-celebration { position: fixed; z-index: 1100; inset: 0; overflow: hidden; pointer-events: none; }
.wp-game-confetti { position: absolute; top: -24px; left: var(--x); width: var(--w); height: var(--h); border-radius: 2px; background: var(--color); opacity: 0; animation: wp-game-confetti-drop var(--duration) linear var(--delay) forwards; }
.wp-game-progress-copy { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 9px; color: var(--text-muted); }
.wp-game-progress-copy strong { color: var(--text-main); }
.wp-game-progress-track { height: 8px; overflow: hidden; border-radius: 999px; background: var(--surface-alt); }
.wp-game-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--primary); transition: width 260ms cubic-bezier(.22, 1, .36, 1); }

.wp-game-panel {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.wp-matching-playfield { position: relative; isolation: isolate; padding: 4px 0; }
.wp-matching-lines { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.wp-match-line { fill: none; stroke: #4b5563; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 2.4 1.8; filter: drop-shadow(0 2px 1px rgba(15, 23, 42, .22)); }
.wp-match-line-preview { stroke: #b9c2ce; stroke-width: 2.2; stroke-dasharray: 7 7; opacity: 0; filter: none; transition: opacity 120ms ease, stroke 120ms ease; }
.wp-match-line-preview.is-visible { opacity: .55; animation: wp-link-dash 720ms linear infinite; }
.wp-match-line-preview.is-error { stroke: var(--danger); }
.wp-matching-columns { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(96px, 15vw, 168px); }
.wp-matching-column-wrap { min-width: 0; }
.wp-matching-column-wrap h3 { margin: 0 0 10px; color: var(--text-muted); font-size: 12px; font-weight: 650; letter-spacing: .08em; text-align: center; }
.wp-matching-column, .wp-tile-clear-board { display: grid; gap: 16px; }
.wp-match-card,
.wp-tile-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative;
  border: 1px solid #d9dee7;
  color: var(--text-main);
  font: inherit;
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wp-match-card {
  min-height: 104px;
  padding: 22px 28px;
  border-radius: 17px;
  background: var(--surface);
  box-shadow: -1px 1px 0 #d7dce5, -5px 8px 10px -8px rgba(24, 55, 92, .5);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 700;
  transform: translateY(0) scale(1);
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms cubic-bezier(.2, .8, .2, 1);
}
.wp-match-card-label { display: block; max-width: 100%; overflow-wrap: anywhere; }
.wp-match-card-corner { position: absolute; top: 10px; left: 11px; color: var(--primary-dark); font-family: var(--font-ui, inherit); font-size: 9px; font-weight: 750; letter-spacing: .08em; opacity: .72; }
.wp-match-card::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border: 2px solid #f8fafc;
  border-radius: 50%;
  background: #d7dce4;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .16), 0 0 0 1px #c9cfd8;
  opacity: .74;
  transform: translateY(-50%);
  transition: opacity 160ms ease, transform 160ms ease;
}
.wp-match-card[data-side="en"]::before { right: -6px; }
.wp-match-card[data-side="cn"]::before { left: -6px; }
.wp-matching-pin-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: visible;
  pointer-events: none;
}
.wp-match-pin {
  position: absolute;
  width: 32px;
  height: 64px;
  background: url("/static/assets/generated/matching-pins-v2.png") no-repeat;
  background-size: 600% 100%;
  background-position: var(--pin-position, 0%) center;
  transform-origin: 50% 77.5%;
  transform: rotate(var(--pin-angle, -90deg)) scale(.92);
  pointer-events: none;
}
.wp-match-pin[data-pin="0"] { --pin-position: 0%; }
.wp-match-pin[data-pin="1"] { --pin-position: 20%; }
.wp-match-pin[data-pin="2"] { --pin-position: 40%; }
.wp-match-pin[data-pin="3"] { --pin-position: 60%; }
.wp-match-pin[data-pin="4"] { --pin-position: 80%; }
.wp-match-pin[data-pin="5"] { --pin-position: 100%; }
.wp-match-pin.is-cursor { opacity: .82; }
.wp-match-card:hover {
  border-color: #cfd5df;
  color: var(--text-main);
  box-shadow: -1px 1px 0 #d0d6e0, -6px 10px 12px -8px rgba(24, 55, 92, .54);
  transform: translateY(-4px) scale(1.018);
}
.wp-match-card:hover::before { opacity: 1; transform: translateY(-50%) scale(1.12); }
.wp-match-card.is-selected {
  z-index: 3;
  border-color: #c7ced9;
  background: var(--surface);
  color: var(--text-main);
  box-shadow: -1px 1px 0 #cbd2dd, -5px 8px 9px -7px rgba(24, 55, 92, .56);
  transform: translateY(-5px) scale(1.03);
}
.wp-match-card.is-matched {
  border-color: #d9dee7;
  background: var(--surface);
  color: var(--text-main);
  box-shadow: -1px 1px 0 #dde1e8, -4px 6px 8px -7px rgba(24, 55, 92, .4);
  opacity: .72;
}
.wp-match-card.is-matched::before { opacity: .25; }
.wp-match-card.is-error { animation: wp-card-shake 320ms ease; }
.wp-tile-card {
  min-height: 126px;
  padding: 24px 20px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: -1px 1px 0 #d7dce5, -5px 8px 10px -8px rgba(24, 55, 92, .5);
  font-size: 17px;
  font-weight: 650;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, opacity 240ms ease, transform 160ms ease;
}
.wp-tile-card:hover { border-color: #cfd5df; color: var(--text-main); box-shadow: -1px 1px 0 #d0d6e0, -6px 10px 12px -8px rgba(24, 55, 92, .54); transform: translateY(-3px) scale(1.018); }
.wp-match-card:focus-visible, .wp-tile-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.wp-tile-card.is-selected { border-color: #c7ced9; background: var(--surface); color: var(--text-main); box-shadow: -1px 1px 0 #cbd2dd, -5px 8px 9px -7px rgba(24, 55, 92, .56); transform: translateY(-4px) scale(1.03); }
.wp-match-card.is-correct-flash,
.wp-tile-card.is-correct-flash { border-color: #67b684; box-shadow: -1px 1px 0 #b7d9c2, -5px 8px 10px -8px rgba(38, 116, 70, .5); }
.wp-tile-card.is-cleared { border-color: var(--success); background: var(--surface-soft); color: var(--success); cursor: default; }
.wp-tile-card.is-error { border-color: var(--danger); background: var(--surface-soft); color: var(--danger); animation: wp-card-shake 320ms ease; }
.wp-match-card:disabled, .wp-tile-card:disabled { opacity: .72; cursor: default; }
.wp-tile-card.is-cleared:disabled { opacity: 0; transform: scale(.92); pointer-events: none; }
.wp-tile-clear-board {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 18px;
  row-gap: 42px;
}
.wp-game-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wp-game-status.is-success { color: var(--success); }
.wp-game-status.is-error { color: var(--danger); }
.wp-game-panel.is-batch-entering .wp-match-card,
.wp-game-panel.is-batch-entering .wp-tile-card {
  animation: wp-game-card-slide-in 440ms cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--game-card-index, 0) * 45ms);
  pointer-events: none;
}

@keyframes wp-link-dash { to { stroke-dashoffset: -28; } }
@keyframes wp-card-shake { 25% { transform: translateX(-5px); } 55% { transform: translateX(4px); } 80% { transform: translateX(-2px); } }
@keyframes wp-game-card-slide-in {
  from { opacity: 0; transform: translateX(42px) scale(.98); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes wp-game-intro-in {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes wp-game-confetti-drop {
  0% { opacity: 0; transform: translate3d(0, -3vh, 0) rotate(0); }
  8% { opacity: .9; }
  100% { opacity: 0; transform: translate3d(var(--drift), 78vh, 0) rotate(var(--spin)); }
}

.wp-session { max-width: 900px; margin: 0 auto; padding-top: 18px; }
.wp-session-head { margin-bottom: 28px; }
.wp-session-head > .btn { margin-bottom: 14px; }
.wp-progress-copy { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 9px; color: var(--text-muted); }
.wp-progress-copy strong { color: var(--text-main); }
.wp-progress-track { height: 8px; overflow: hidden; border-radius: 999px; background: var(--surface-alt); }
.wp-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--primary); transition: width 260ms cubic-bezier(.22,1,.36,1); }

/* The prompt is part of the reading flow, not a second card surface. */
.wp-question { padding: 8px 0 32px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.wp-question-meta { display: none; }
.wp-question h2 { margin: 28px 0 34px; font-size: clamp(25px, 4.5vw, 42px); line-height: 1.35; text-align: center; }
.wp-answer-form { display: grid; gap: 9px; }
.wp-answer-form > label { color: var(--text-muted); font-size: 13px; }
.wp-answer-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.wp-answer-row .input { min-height: 48px; font-size: 18px; }
.wp-answer-row .input.is-answer-correct { border-color: var(--success); }

.wp-feedback { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--border); }
.wp-feedback.is-correct #feedbackLabel { color: var(--success); }
.wp-feedback.is-wrong #feedbackLabel { color: var(--danger); }
.wp-feedback-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.wp-feedback-head > div { display: grid; gap: 4px; }
.wp-feedback-head span { font-size: 13px; font-weight: 650; }
.wp-feedback-head strong { font-size: 25px; color: var(--text-main); }
.wp-feedback-head .btn { display: inline-flex; align-items: center; gap: 7px; }
.wp-feedback-head .fluent-icon { width: 20px; height: 20px; }
.wp-explanation { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 20px 0; }
.wp-explanation div { min-width: 0; padding: 11px 12px; background: var(--surface-soft); border-radius: 10px; }
.wp-explanation dt { color: var(--text-muted); font-size: 12px; }
.wp-explanation dd { margin: 4px 0 0; overflow-wrap: anywhere; }
.wp-feedback > .btn { margin-left: auto; }

.wp-summary-head { text-align: center; padding: 28px 0 20px; }
.wp-summary-icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--primary); color: #fff; }
.wp-summary-icon i { width: 28px; height: 28px; filter: brightness(0) invert(1); }
.wp-summary-head p { margin: 13px 0 2px; color: var(--text-muted); }
.wp-summary-head h2 { margin: 0; font-size: 32px; }

.wp-summary-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: 720px;
  margin: 0 auto 28px;
}
.wp-summary-time { font-variant-numeric: tabular-nums; }

.wp-summary-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 84px;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.wp-summary-detail { max-width: 880px; margin: 0 auto; padding-top: 18px; border-top: 1px solid var(--border); }
.wp-summary-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

@media (max-width: 900px) {
  .wp-list-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .wp-view { padding-top: 4px; }
  .wp-list-grid { grid-template-columns: 1fr; }
  .wp-list-card { padding: 14px; }
  .wp-settings { align-items: flex-end; padding: 12px; }
  .wp-settings-dialog { width: 100%; max-height: calc(100dvh - 24px); border-radius: 14px; }
  .wp-settings-head { padding: 17px 16px 14px; }
  .wp-settings-body { padding: 17px 16px; }
  .wp-settings-fields { grid-template-columns: 1fr 1fr; gap: 10px; }
  .wp-settings-fields .wp-check { grid-column: 1 / -1; }
  .wp-settings-actions { padding: 13px 16px 15px; }
  .wp-settings-actions .btn { width: 100%; }
  .wp-game-view { padding-top: 8px; }
  .wp-matching-columns { gap: 44px; }
  .wp-matching-column, .wp-tile-clear-board { gap: 12px; }
  .wp-match-card { min-height: 90px; padding: 18px 12px; border-radius: 14px; font-size: 15px; }
  .wp-match-card-corner { top: 8px; left: 8px; font-size: 8px; }
  .wp-match-pin { width: 24px; height: 48px; }
  .wp-game-view.is-tile-clear .wp-game-head { margin-bottom: 30px; }
  .wp-tile-card { min-height: 90px; padding: 14px 10px; font-size: 14px; }
  .wp-tile-clear-board { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 30px; }
  .wp-question { padding: 0 0 24px; }
  .wp-question h2 { margin: 24px 0 28px; font-size: 28px; }
  .wp-answer-row { grid-template-columns: 1fr; }
  .wp-answer-row .btn { width: 100%; }
  .wp-explanation { grid-template-columns: 1fr; }
  .wp-feedback-head { align-items: flex-start; }
  .wp-feedback > .btn { width: 100%; }
  .wp-wrong-row { grid-template-columns: 1fr auto; gap: 6px 10px; padding-inline: 0; }
  .wp-wrong-row .wp-answer { grid-column: 1 / -1; }
  .wp-summary-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .wp-summary-stat { padding: 10px 9px; }
  .wp-summary-actions { display: grid; grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .wp-match-card,
  .wp-tile-card { transition-duration: 0ms; }
  .wp-match-line-preview.is-visible { animation: none; }
  .wp-game-panel.is-batch-entering .wp-match-card,
  .wp-game-panel.is-batch-entering .wp-tile-card,
  .wp-game-intro-copy,
  .wp-game-confetti { animation: none; }
  .wp-match-card.is-error,
  .wp-tile-card.is-error { animation: none; }
}