/* 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}
/* the study area (19 Oct 2026): one centred column the card's width, the list beside it on a wide screen */
.mt-layout{display:grid;gap:28px}
.mt-study{width:100%;max-width:640px;margin:0 auto}
.mt-study .mt-bar{justify-content:center}
.mt-stage{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.mt-stage.is-meteor{min-height:420px}
.mt-stage dd,.mt-stage dt{user-select:text;-webkit-user-select:text}
.mt-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 10px}
.mt-progress{height:14px;border-radius:7px;background:var(--sunk);overflow:hidden;position:relative;width:100%;margin:0 0 18px}
.mt-progress span{position:absolute;inset:0;border-radius:7px;background:var(--study);transform-origin:left;transform:scaleX(0);transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
[dir="rtl"] .mt-progress span{transform-origin:right}
.mt-count{color:var(--ink-3);font-weight:700;margin:0;font-variant-numeric:tabular-nums}
.mt-card{display:grid;place-items:center;width:100%;min-height:clamp(240px,34vw,320px);padding:32px 28px;border-radius:24px;border:0;
  background:var(--surface);color:var(--ink);cursor:pointer;text-align:center;box-shadow:0 2px 0 rgba(var(--ink-rgb),.06),0 18px 40px rgba(16,34,42,.10);touch-action:manipulation;transform-style:preserve-3d;will-change:transform}
:root[data-theme="dark"] .mt-card{box-shadow:0 18px 40px rgba(0,0,0,.35)}
.mt-card:focus-visible{outline:3px solid var(--study-ink);outline-offset:4px}
.mt-card .f,.mt-card .b{grid-area:1/1;display:grid;gap:12px;justify-items:center}
.mt-card .term{font:600 clamp(40px,6vw,64px)/1.1 var(--f-display);font-style:italic;text-wrap:balance}
.mt-card .lang{color:var(--ink-3);font-weight:700;font-size:16px}
.mt-card .b{font:500 clamp(20px,3.6vw,24px)/1.35 var(--f-body);visibility:hidden;min-height:0;padding:0;border-radius:0;background:none;box-shadow:none}
.mt-card .b .term-s{font:600 22px/1.2 var(--f-display);font-style:italic;color:var(--ink-2)}
.mt-card .b .mean{font:600 clamp(26px,4vw,36px)/1.25 var(--f-display);color:var(--ink);text-wrap:balance}
.mt-card.turned .f{visibility:hidden}.mt-card.turned .b{visibility:visible}
.mt-card.turned{box-shadow:0 0 0 3px var(--study),0 18px 40px rgba(16,34,42,.10)}
:root[data-theme="dark"] .mt-card.turned{box-shadow:0 0 0 3px var(--study),0 18px 40px rgba(0,0,0,.35)}
.mt-keys{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0 0}
.mt-keys.off{visibility:hidden}   /* the answer row keeps its place: nothing moves when the card turns */
.mt-key{min-height:60px;border-radius:16px;border:2px solid var(--rule-2);background:var(--surface);color:var(--ink);font:700 18px var(--f-body);cursor:pointer;box-shadow:none;transition:transform .14s cubic-bezier(.22,1,.36,1)}
.mt-key.yes{background:var(--study);border-color:var(--study);color:#fff;box-shadow:none}
:root[data-theme="dark"] .mt-key.yes{color:#04161c;box-shadow:none}
.mt-key:active{transform:scale(.98);box-shadow:none}
/* the keyboard hint: under the card, only where there is a keyboard; one line, the keys as caps */
.mt-hint{display:none;justify-content:center;flex-wrap:wrap;gap:6px 22px;margin:14px 0 0;color:var(--ink-3);font-size:14.5px;font-weight:600}
.mt-hint span{display:inline-flex;align-items:center;gap:8px}
.mt-hint kbd{font:700 13px/1 var(--f-body);padding:6px 9px;border-radius:8px;background:var(--sunk);color:var(--ink-2);box-shadow:inset 0 -2px 0 rgba(var(--ink-rgb),.12)}
@media (hover:hover) and (pointer:fine){.mt-hint{display:flex}}
.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 cubic-bezier(.22,1,.36,1) forwards}.mt-m.hit .mt-lab{font-style:normal;background:var(--study);color:#fff}
.mt-m.landed{animation:mtOut .4s cubic-bezier(.22,1,.36,1) 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 cubic-bezier(.22,1,.36,1)}
@keyframes mtNope{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}}
@media (prefers-reduced-motion:reduce){.mt-key{transition:none}.mt-m.hit,.mt-type.nope .mt-in{animation:none}.mt-progress span{transition:none}}

/* every term up to the grade, as a list (SEO, 13 Oct 2026): a fold under the trainer, a table per grade with the "Learn
   these by heart" marker (as music-learn.css), one card a row on a phone (as g6.css bl-mt) */
.mt-list{margin:0 0 8px;min-width:0}
@media (min-width:1100px){
  .mt-layout{grid-template-columns:minmax(0,640px) minmax(340px,1fr);gap:48px;align-items:start}
  .mt-study{margin:0}
  .mt-study .mt-bar{justify-content:flex-start}
  .mt-list{position:sticky;top:88px;max-height:calc(100vh - 112px);overflow:auto;padding:4px 18px 12px;border-radius:20px;background:var(--surface);overscroll-behavior:contain}
  .mt-list .mt-tbl{font-size:15px}
}
.mt-list h3{font:700 18px/1.3 var(--f-display);margin:18px 0 8px}
.mt-tbl{width:100%;border-collapse:collapse;font-size:16px}
.mt-tbl th{text-align:start;font:650 14px/1.3 var(--f-display);color:var(--ink-2);padding:8px 10px;border-bottom:2px solid var(--rule-2)}
.mt-tbl td{padding:9px 10px;vertical-align:top}
.mt-tbl tbody tr:nth-child(even) td{background:rgba(var(--ink-rgb),.035)}
.mt-tbl td:first-child{border-radius:8px 0 0 8px}.mt-tbl td:last-child{border-radius:0 8px 8px 0}
.mt-list .bl-memorise-tag{display:inline-flex;align-items:center;gap:8px;margin:0 0 8px;padding:6px 12px;border-radius:10px;background:var(--study-tint);color:var(--study-ink);font:700 15px/1.2 var(--f-display)}
:root[data-theme="dark"] .mt-list .bl-memorise-tag{background:rgba(13,154,167,.2);color:#7fd6dd}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mt-list .bl-memorise-tag{background:rgba(13,154,167,.2);color:#7fd6dd}}
@media (max-width:599px){
  .mt-tbl,.mt-tbl tbody,.mt-tbl tr,.mt-tbl td{display:block;width:auto}
  .mt-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .mt-tbl tr{background:var(--surface);border:2px solid var(--rule-2);border-radius:12px;padding:4px 14px;margin:0 0 10px}
  .mt-tbl td{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:4px 12px;padding:9px 0;border-bottom:0}
  .mt-tbl tbody tr:nth-child(even) td{background:none}
  .mt-tbl td::before{content:attr(data-th);font:650 14px/1.3 var(--f-display);color:var(--ink-2)}
  .mt-tbl td[data-th=""]{display:block;font:650 16px/1.3 var(--f-display)}
  .mt-tbl td[data-th=""]::before{content:none}
}