/* terms-trainer.css - flashcards and the meteor game. Interactive parts are not selectable text. */
.mt-bar{display:flex;flex-wrap:wrap;gap:12px 20px;margin:0 0 22px}
.mt-bar .segc{max-width:100%;overflow-x:auto}
.mt-stage{min-height:420px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.mt-stage dd,.mt-stage dt{user-select:text;-webkit-user-select:text}
.mt-progress{height:14px;border-radius:7px;background:var(--sunk);overflow:hidden;position:relative;max-width:640px}
.mt-progress span{position:absolute;inset:0;background:var(--study);transform-origin:left;transform:scaleX(0);transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.mt-count{color:var(--ink-3);font-weight:600;margin:8px 0 14px}
.mt-card{display:grid;place-items:center;width:100%;max-width:640px;min-height:220px;padding:28px 22px;border-radius:var(--r2,18px);border:2px solid var(--rule-2);
  background:var(--surface);color:var(--ink);cursor:pointer;text-align:center;box-shadow:inset 0 -5px 0 rgba(var(--ink-rgb),.08);touch-action:manipulation}
.mt-card .f,.mt-card .b{grid-area:1/1;display:grid;gap:8px;justify-items:center}
.mt-card .term{font:600 clamp(30px,6vw,42px)/1.15 var(--f-display);font-style:italic}
.mt-card .lang{color:var(--ink-3);font-weight:600;font-size:15px}
.mt-card .b{font:500 clamp(21px,4vw,26px)/1.35 var(--f-body);visibility:hidden}
.mt-card.turned .f{visibility:hidden}.mt-card.turned .b{visibility:visible}
.mt-card.turned{border-color:var(--study);animation:mtFlip .28s cubic-bezier(.22,1,.36,1)}
@keyframes mtFlip{from{transform:rotateX(70deg);opacity:.4}to{transform:none;opacity:1}}
.mt-keys{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:640px;margin:14px 0 0}
.mt-keys[hidden]{display:none}
.mt-key{min-height:58px;border-radius:14px;border:2px solid var(--rule-2);background:var(--surface);color:var(--ink);font:700 18px var(--f-body);cursor:pointer;box-shadow:inset 0 -4px 0 rgba(var(--ink-rgb),.1)}
.mt-key.yes{background:var(--study);border-color:var(--study);color:#fff;box-shadow:0 4px 0 #08707a}
:root[data-theme="dark"] .mt-key.yes{color:#04161c;box-shadow:0 4px 0 #075a62}
.mt-key:active{transform:translateY(3px);box-shadow:none}
.mt-end h2{margin:6px 0 8px}
.mt-big{font:700 clamp(26px,5vw,36px)/1.2 var(--f-display);margin:6px 0 14px}
.mt-acts{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0 0}
.mt-missed{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:0;max-width:640px}
.mt-missed dt{font-style:italic;font-weight:700}.mt-missed dd{margin:0;color:var(--ink-2)}
.mt-intro p{max-width:60ch;font-size:17px;color:var(--ink-2)}
/* the meteor field: the play colour, the full width */
.mt-sky{position:relative;height:min(62vh,540px);border-radius:var(--r1,14px);overflow:hidden;background:#0d1b3a;contain:strict}
:root[data-theme="dark"] .mt-sky{background:#060d1f}
.mt-ground{position:absolute;left:0;right:0;bottom:0;height:16px;background:var(--play,#7a4dd8)}
.mt-m{position:absolute;left:var(--x);top:0;width:150px;display:grid;justify-items:center;will-change:transform}
.mt-rock{width:58px;height:58px}
.mt-rock .tail3{fill:#ffb347;opacity:.45}.mt-rock .tail2{fill:#ffd36b;opacity:.8}
.mt-rock .body{fill:#8d7b6a}.mt-rock .shade{fill:#6c5c4e}.mt-rock .crater{fill:#5a4c40}
.mt-lab{margin-top:2px;padding:3px 10px;border-radius:10px;background:rgba(255,255,255,.92);color:#0d1b3a;font:700 16px/1.3 var(--f-body);font-style:italic;white-space:nowrap;max-width:46vw;overflow:hidden;text-overflow:ellipsis}
.mt-clue{margin-top:3px;color:#ffd36b;font-size:13.5px;font-weight:600}
.mt-m.hit{animation:mtHit .5s ease-out forwards}.mt-m.hit .mt-lab{font-style:normal;background:var(--study);color:#fff}
.mt-m.landed{animation:mtOut .4s ease-out forwards}
@keyframes mtHit{to{opacity:0;transform:translate3d(0,var(--yy,0),0) scale(1.25)}}
@keyframes mtOut{to{opacity:0}}
.mt-type{position:sticky;bottom:0;display:flex;gap:12px;align-items:center;padding:12px 0 max(12px,env(safe-area-inset-bottom));background:var(--paper)}
.mt-in{flex:1;min-width:0;font:500 19px var(--f-body);min-height:52px;padding:10px 14px;border-radius:14px;border:2px solid var(--rule-2);background:var(--surface);color:var(--ink);user-select:text;-webkit-user-select:text}
.mt-tally{font-weight:700;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.mt-type.nope .mt-in{animation:mtNope .3s ease-out}
@keyframes mtNope{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}}
@media (prefers-reduced-motion:reduce){.mt-card.turned,.mt-m.hit,.mt-type.nope .mt-in{animation:none}.mt-progress span{transition:none}}