/* Pinyin match (canvas board "Match"). Loads after practice.css (pr-btn, pr-msg, pr-select, pr-sr). */
.mt{display:flex;flex-direction:column;gap:28px}
.mt [hidden]{display:none!important}
.mt-head{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between}
.mt-titles{display:flex;flex-direction:column;gap:4px}
.mt-titles h1{margin:0;font-size:26px;font-weight:700}
.mt-titles h1 span{font-family:var(--font-zh);font-weight:500;color:var(--muted)}
.mt-titles p{margin:0;font-size:15px;color:var(--text-2)}
.mt-score{display:flex;gap:8px;align-items:center;font-size:15px;font-weight:600}
.mt-slots{background:var(--card-2);border:1px solid var(--line);border-radius:22px;padding:24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(120px,100%),1fr));gap:10px}
.mt-slot{min-height:112px;border-radius:14px;border:2px dashed var(--stroke-out);background:var(--card);font:inherit;color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer}
.mt-slot.is-done{border-color:var(--green);background:var(--green-t);cursor:default}
.mt-slot.is-bad{border-color:var(--red);background:var(--red-t)}
.mt-slot-c{font-family:var(--font-zh);font-size:36px;min-height:44px;line-height:44px}
.mt-slot-p{font-size:16px;font-weight:600}
.mt-tray-wrap{display:flex;flex-direction:column;gap:8px}
.mt-l,.mt-from-l{font-size:13px;font-weight:600;color:var(--text-2)}
.mt-from-l{font-weight:400;align-self:center}
.mt-tray{display:flex;flex-wrap:wrap;gap:8px}
.mt-sticker{height:64px;flex:0 0 auto;min-width:64px;padding:0 10px;white-space:nowrap;border-radius:14px;border:2px solid var(--line);background:var(--card);font-family:var(--font-zh);font-size:30px;color:var(--ink);box-shadow:0 2px 6px rgba(var(--shadow),.08);cursor:pointer}
.mt-sticker.is-sel{border-color:var(--red);background:var(--sel)}
.mt-status{margin:0;min-height:20px;font-size:14px;color:var(--text-2)}
.mt-status.is-bad{color:var(--red-d)}
.mt-from{display:flex;flex-wrap:wrap;gap:8px}
.mt-lists{display:contents}
.mt-src{min-height:44px;padding:0 14px;border:1.5px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font-size:13px;display:flex;align-items:center;text-decoration:none}
.mt-src[aria-pressed=true]{background:var(--red);border-color:var(--red);color:var(--on-red);font-weight:600}
.mt-more{flex:1 1 200px;max-width:280px}
.mt :is(button,a,select):focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media (max-width:760px){.mt-slots{grid-template-columns:repeat(4,minmax(0,1fr));padding:10px;gap:6px}.mt-slot{min-height:80px;border-radius:10px}.mt-slot-c{font-size:26px;min-height:34px;line-height:34px}.mt-slot-p{font-size:13px}}