/* Teisendaja — Harjutaja ühine palett, aktsent roheline (mõõdulint). Aluseks kell.css. */
:root{
  --accent:#7fd0a8;
  --accent-edge:#49a982;
  --accent-ink:#10331f;
  --warm:#2f7a5e;
  --warm-soft:#e3f3ea;
}

/* mõõdulint. Siin oli 15. septembrini Kellast kopeeritud käo CSS (.kk-*),
   mis lindile ei kehtinud: lint seisis paigal ja klikk andis ainult heli.
   .kl-body transformi ei animeerita, sest sellel on SVG-s oma kalle. */
.klint{width:100%;height:auto}
.mascot .klint{animation:kl-bob 3.6s ease-in-out infinite}
/* transform-box/origin on vajalik, muidu lendab nägu pilgutades paigast. */
.klint .kl-face{transform-box:fill-box;transform-origin:center;animation:kl-blink 5.5s infinite}
.mascot .klint.hop{animation:kl-hop .5s ease}
@keyframes kl-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes kl-blink{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.15)}}
@keyframes kl-hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-14px)}}
@media (prefers-reduced-motion:reduce){.mascot .klint,.klint .kl-face,.mascot .klint.hop{animation:none}}

/* ---------- Teisendaja oma osad ---------- */

/* Küsimus on siin lause, mitte pilt: „3 km = ___ m". Suur ja tabelnumbritega,
   et arv ja ühik oleksid selgesti loetavad. */
.ask{font-family:var(--display);font-weight:600;font-size:30px;line-height:1.25;margin:6px 0 2px;text-align:center;font-variant-numeric:tabular-nums}
.opts{grid-template-columns:1fr 1fr}
.opt{font-variant-numeric:tabular-nums}

/* Sisestusväljad ja klahvistik. Väli on päris input, aga inputmode="none"
   hoiab telefoni süsteemiklaviatuuri kinni — mängul on oma klahvistik. */
.padhost{width:100%;display:flex;flex-direction:column;gap:12px;align-items:center}
.kl-valjad{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.kl-vali{display:flex;align-items:center;gap:8px;background:var(--card);border:2px solid var(--edge);border-radius:16px;padding:8px 12px}
.kl-vali:focus-within{border-color:var(--accent-edge);box-shadow:0 0 0 3px var(--warm-soft)}
.kl-vali input{
  font:inherit;font-family:var(--display);font-weight:600;font-size:30px;color:var(--ink);
  background:none;border:0;outline:none;width:4.5ch;max-width:60vw;text-align:right;font-variant-numeric:tabular-nums;
}
.kl-vali input:disabled{color:var(--ink-soft)}
.kl-silt{font-family:var(--display);font-weight:600;font-size:22px;color:var(--ink-soft);min-width:2.2ch}
.kl-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;max-width:330px}
.kl-nupp{
  font:inherit;font-family:var(--display);font-weight:600;font-size:26px;color:var(--ink);
  background:var(--card);border:1.5px solid var(--edge);border-radius:14px;
  padding:12px 0;cursor:pointer;min-height:52px;
}
.kl-nupp:active{background:var(--warm-soft)}
.kl-tyhi{visibility:hidden;cursor:default}
.kl-kustuta,.kl-koma{font-size:22px;color:var(--ink-soft)}
.kl-vastan{
  font:inherit;font-family:var(--display);font-weight:600;font-size:22px;
  color:var(--accent-ink);background:var(--accent);border:1.5px solid var(--accent-edge);
  border-radius:16px;padding:13px 26px;cursor:pointer;width:100%;max-width:330px;
}
.klahvistik.lukus .kl-pad,.klahvistik.lukus .kl-vastan{opacity:.45;pointer-events:none}

/* Ühikuredel: vihjekaardil ja avalehel. Kitsal ekraanil kerib külgsuunas. */
.redelbox{width:100%;overflow-x:auto;padding:2px 0}
.redelbox svg.redel{display:block;min-width:280px;max-width:100%;height:auto}

/* Oskuste kaart: paar ja tegur. */
.mcell b{font-family:var(--display);font-weight:600;font-size:15px;display:block}
.mcell{gap:2px}

/* Vihjekaardi diagnoos on kõige tähtsam lause — see ütleb, MILLISE vea laps tegi. */
.hinttext .diag{margin:0 0 6px;font-weight:800;color:var(--ink)}
.hinttext p{margin:0 0 6px}
.hinttext .redelbox{margin-top:8px}

/* Tulemuse vealoend: küsimus ja õige vastus. */
.vaeg b{font-family:var(--display);font-weight:600;font-size:16px;display:block;font-variant-numeric:tabular-nums}