/* Match Up — polished connection board; isolated from other activities. */
.match-page { --match-ink:#173e42; --match-mint:#15745b; --match-blue:#3e6d8c; }
.match-page .match-round-controls { margin-bottom:15px; }
.match-page .match-try-count {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:35px; padding:6px 11px; background:#f1f7f4;
  border:1px solid #c2d9cd; border-radius:10px;
  color:#46695c; font-size:.79rem; font-weight:760; white-space:nowrap;
}
.match-page .practice-guide { margin-bottom:17px; }
.match-page .match-settings{display:flex;align-items:flex-end;gap:10px 20px;flex-wrap:wrap}
.match-page .match-settings .setting-group{min-width:155px;max-width:260px;flex:0 1 auto}
.match-page .match-settings .settings-hint{flex:1 1 260px;margin:0;line-height:1.45}
.match-page .match-board {
  position:relative; padding:clamp(17px,3vw,29px);
  background:linear-gradient(158deg,#fff 0%,#f7fbf8 100%);
  border:1px solid #bacfc3; border-radius:23px;
  box-shadow:0 10px 36px rgba(17,58,47,.075);
}
.match-page .match-board-intro.question-preamble {
  margin:0 0 16px;
  display:flex; justify-content:space-between;
  align-items:center; gap:15px;
}
.match-page .match-board-kicker {
  display:block; font-size:.7rem; font-weight:850;
  letter-spacing:.14em; line-height:1.5; color:#286c57;
}
.match-page .match-board-title {
  margin:4px 0 0; font-size:clamp(1.26rem,2.4vw,1.62rem);
  font-weight:830; letter-spacing:-.045em; line-height:1.25;
  color:var(--match-ink);
}
.match-page .match-progress-markers {
  display:flex; flex-wrap:nowrap; gap:7px; align-items:center;
}
.match-page .match-progress-pip {
  display:grid; place-items:center;
  width:29px; height:29px; flex:0 0 29px;
  border-radius:10px; border:1px solid #ccddd2;
  background:#eff5f0; color:#577567;
  font-size:.72rem; font-weight:850; font-variant-numeric:tabular-nums;
}
.match-page .match-progress-pip.is-complete {
  background:#207861; color:#fff; border-color:#207861;
  box-shadow:0 2px 9px rgba(21,99,69,.15);
}
.match-page .match-instruction-bar {
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;
  gap:9px 14px; padding:12px 15px; margin-bottom:20px;
  background:#e8f3ed; color:#1f5946;
  border:1px solid #bcd9c8; border-radius:13px;
}
.match-page .match-instruction-main {
  display:flex; align-items:flex-start; flex:1 1 220px; gap:10px; min-width:0;
}
.match-page .match-instruction-icon {
  flex:0 0 29px; display:grid; place-items:center;
  width:29px; height:29px; border-radius:50%; background:#cbe6d6;
  color:#126449; font-size:1.02rem; font-weight:800;
}
.match-page .match-instruction-copy { min-width:0; }
.match-page .match-instruction-text {
  font-size:.86rem; line-height:1.55; font-weight:740; margin:2px 0 0;
  overflow-wrap:anywhere;
}
.match-page .match-selected-name {
  display:block; max-width:650px; margin-top:4px; font-size:.79rem;
  font-weight:650; line-height:1.43; color:#366958;
  overflow-wrap:anywhere;
}
.match-page .match-pairs-remaining {
  display:inline-flex; flex:0 0 auto; align-items:center;
  background:#fff; padding:7px 10px; border:1px solid #d0e4d8;
  border-radius:9px; color:#2c6450;
  font-size:.75rem; font-weight:820; white-space:nowrap;
}
.match-page .match-columns {
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  align-items:stretch; gap:15px; min-width:0;
}
.match-page .match-column {
  display:flex; flex-direction:column;
  gap:10px; min-width:0;
  padding:16px; border-radius:18px;
  border:1px solid #d5e4da; background:#f2f8f3;
}
.match-page .match-definitions { background:#f2f6fa; border-color:#d4e0ed; }
.match-page .match-column-label {
  display:flex; align-items:center; justify-content:space-between;
  font-size:.78rem; text-transform:uppercase; font-weight:850;
  letter-spacing:.105em; line-height:1.4; margin:1px 0 7px;
  color:#326753;
}
.match-page .match-definitions .match-column-label { color:#45688c; }
.match-page .match-tile,
.match-page .match-tile:hover {
  position:relative; display:flex; align-items:center; gap:12px;
  width:100%; min-width:0; min-height:74px;
  padding:15px 15px; text-align:left;
  border:1px solid #bad0c2; border-radius:13px;
  background:#fff; color:#25483b; cursor:pointer;
  font-size:.88rem; line-height:1.55;
  box-shadow:0 3px 0 rgba(32,73,55,.07),0 6px 14px rgba(35,72,58,.04);
  transition:transform .16s ease,background-color .16s ease,
    box-shadow .16s ease,border-color .16s ease,opacity .16s ease;
  overflow-wrap:anywhere; touch-action:manipulation;
}
.match-page .term-tile { font-weight:770; border-left:4px solid #5aa989; }
.match-page .definition-tile {
  font-weight:630; border-color:#c4d5e5; border-left:4px solid #7198c1; color:#2e4d66;
}
.match-page .match-tile-initial {
  flex:0 0 27px; display:grid; place-items:center;
  width:27px; height:27px; border-radius:8px;
  background:#e4f3e9; color:#277259;
  font-weight:850; font-size:.72rem; line-height:1;
}
.match-page .definition-tile .match-tile-initial {
  background:#e6eef8; color:#47719a;
}
.match-page .match-tile-text {display:block; flex:1 1 auto; min-width:0; overflow-wrap:anywhere;}
.match-page .match-tile-check {
  align-self:center; display:grid; place-items:center; flex:0 0 24px;
  height:24px; border-radius:50%; font-size:1rem;
  color:#8aa79a; font-weight:850;
}
.match-page .definition-tile .match-tile-check { color:#8ca9c4; }
@media(hover:hover) and (pointer:fine){
  .match-page .match-tile:not([aria-disabled="true"]):not(.is-selected):hover {
    transform:translateY(-2px);
    border-color:#5c9a80; background:#fcfffd;
    box-shadow:0 5px 0 rgba(32,73,55,.06),0 12px 22px rgba(30,74,53,.09);
  }
  .match-page .definition-tile:not([aria-disabled="true"]):not(.is-selected):hover {
    border-color:#6085b0; background:#fafcff;
  }
}
.match-page .match-tile:focus-visible {
  outline:3px solid #b77820; outline-offset:3px; z-index:2;
}
.match-page .match-tile.is-selected,
.match-page .match-tile.is-selected:hover {
  color:#f7fffa; background:#146e58; border-color:#146e58;
  box-shadow:0 0 0 3px #a7d5bd,0 8px 21px rgba(15,94,64,.19);
  transform:translateY(-1px);
}
.match-page .definition-tile.is-selected,
.match-page .definition-tile.is-selected:hover {
  background:#335f84; border-color:#335f84; color:#fff;
  box-shadow:0 0 0 3px #bdcee7,0 8px 21px rgba(48,86,126,.19);
}
.match-page .match-tile.is-selected .match-tile-initial {
  background:rgba(255,255,255,.17); color:#fff;
}
.match-page .match-tile.is-selected .match-tile-check { color:#fff; }
.match-page .match-board.is-resolving .match-tile {
  pointer-events:none;
}
.match-page .match-board.is-resolving .match-tile:not(.is-match-success):not(.is-match-error){
  opacity:.55;
}
.match-page .match-tile.is-match-success,
.match-page .match-tile.is-match-success:hover {
  background:#216c55; border-color:#216c55; color:#fff;
  box-shadow:0 0 0 3px #97daba,0 10px 24px rgba(24,105,74,.2);
  animation:match-pair-celebrate 420ms cubic-bezier(.2,.72,.22,1) both;
}
.match-page .match-tile.is-match-error,
.match-page .match-tile.is-match-error:hover {
  background:#fff1e4; color:#754923; border-color:#cf986f;
  box-shadow:0 0 0 3px #f4d6b8;
  animation:match-pair-retry 310ms ease-out both;
}
.match-page .match-tile.is-match-error .match-tile-initial,
.match-page .match-tile.is-match-error .match-tile-check {
  color:#78461e; background:#f9ddbe;
}
.match-page .match-feedback.ui-feedback { margin:0 0 18px; padding:12px 16px; }
.match-page .match-feedback .feedback-heading {font-size:.91rem;}
.match-page .match-feedback .ui-feedback-badge {font-size:.63rem;}
@keyframes match-pair-celebrate{
  0% {opacity:1;transform:translateY(-1px) scale(1);}
  34% {opacity:1;transform:translateY(-6px) scale(1.027);}
  62% {opacity:1;transform:translateY(-2px) scale(1.025);}
  100% {opacity:0;transform:translateY(-9px) scale(.94);}
}
@keyframes match-pair-retry{
  0%,100% {transform:translateX(0);}
  22% {transform:translateX(-5px);}
  45% {transform:translateX(5px);}
  68% {transform:translateX(-3px);}
  84% {transform:translateX(2px);}
}
@media(max-width:760px){
  .match-page .match-board {padding:18px 15px;}
  .match-page .match-columns {grid-template-columns:1fr; gap:13px;}
  .match-page .match-column {padding:12px;gap:8px;}
  .match-page .match-instruction-bar {
    position:sticky; top:8px; z-index:6; margin-bottom:16px;
    border-color:#acd0b9; box-shadow:0 8px 16px rgba(28,71,49,.10);
  }
  .match-page .match-tile {min-height:60px; padding:12px 13px;}
}
@media(max-width:480px){
  .match-page .match-board {border-radius:17px; padding:14px 11px;}
  .match-page .match-board-intro.question-preamble {flex-direction:column;align-items:stretch;gap:9px;min-width:0;}
  .match-page .match-progress-markers {flex-wrap:wrap;max-width:100%;justify-content:flex-start;}
  .match-page .match-progress-markers {gap:4px;}
  .match-page .match-progress-pip {width:23px; height:23px; flex-basis:23px; border-radius:8px;font-size:.65rem;}
  .match-page .match-board-title {font-size:1.18rem;}
  .match-page .match-instruction-bar {padding:11px 12px;gap:8px;top:5px;}
  .match-page .match-instruction-main {flex-basis:100%;gap:8px;}
  .match-page .match-instruction-text {font-size:.8rem;}
  .match-page .match-selected-name {font-size:.74rem; max-height:3em; overflow:hidden;}
  .match-page .match-pairs-remaining {padding:5px 8px;font-size:.71rem;margin-left:38px;}
  .match-page .match-tile {gap:9px;font-size:.82rem;min-height:58px;}
  .match-page .match-tile-initial {flex-basis:25px;width:25px;height:25px;}
  .match-page .match-tile-check {flex-basis:20px;}
}
@media(max-height:500px) and (max-width:760px){
  .match-page .match-instruction-bar {position:static;box-shadow:none;}
}
@media(prefers-reduced-motion:reduce){
  .match-page .match-tile,
  .match-page .match-tile.is-match-success,
  .match-page .match-tile.is-match-error {
    animation:none!important;transition:none!important;transform:none!important;
  }
}
@media print{
  .match-page .match-board {box-shadow:none;}
  .match-page .match-instruction-bar{position:static;box-shadow:none;}
  .match-page .match-tile{box-shadow:none!important;break-inside:avoid;}
}