/* Matematické hry (Magický čtverec, Váha, Číselná osa) – společný styl */
.mt { width: 100%; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.mt-msg { font-weight: 600; color: var(--muted); text-align: center; min-height: 1.4em; }
.mt-rule { text-align: center; color: var(--muted); font-weight: 600; }
.mt-rule b { color: var(--accent); font-size: 1.3em; }

/* číselník – stejné rozměry jako u pyramidy (66 % a 9,5 % strany čtverce, který se vejde na obrazovku) */
.mt-pad { --side: min(100vw - 32px, 640px, 100dvh - 190px); display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--side) * .012); width: calc(var(--side) * .66); }
.mt-key {
  height: calc(var(--side) * .095); font: 700 calc(var(--side) * .06) / 1 var(--font-print); color: var(--ink);
  background: var(--card); border: calc(var(--side) * .005) solid var(--line); border-bottom-width: calc(var(--side) * .008); border-radius: calc(var(--side) * .02);
}
.mt-key:active:not(:disabled) { transform: translateY(2px); }
.mt-key.del { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }
.mt-key.okk { background: var(--good-bg); border-color: var(--good); color: var(--good); }
.mt-key:disabled { opacity: .4; }
.mt-big { width: min(100%, 380px); height: 60px; font: 700 1.3rem / 1 var(--font-ui); color: var(--accent-ink); background: var(--accent); border: 0; border-radius: 18px; }
.mt-big.submit { background: var(--good); color: #fff; }
.mt-big:disabled { opacity: .45; }

/* výsledek */
.mt-result { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px 0; width: 100%; }
.mt-rmsg { font-size: 1.8rem; font-weight: 700; }
.mt-result.good .mt-rmsg { color: var(--good); }
.mt-score { font-size: 1.3rem; font-weight: 700; }

/* přepínač obtížnosti */
.mt-levels { display: flex; gap: 10px; justify-content: center; margin: 4px 0 12px; }
.mt-levels button { flex: 1; max-width: 240px; padding: 10px 14px; font: inherit; font-weight: 700; background: var(--card); border: 3px solid var(--line); border-radius: 16px; color: var(--ink); }
.mt-levels button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.mt-levels small { display: block; font-weight: 400; opacity: .85; }

/* tečky postupu */
.mt-dots { display: flex; gap: 8px; }
.mt-dots span { width: 14px; height: 14px; border-radius: 50%; background: var(--line); }
.mt-dots .cur { background: var(--accent); transform: scale(1.25); }
.mt-dots .ok { background: var(--good); }
.mt-dots .bad { background: var(--bad); }

/* magický čtverec */
.ms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(100%, 250px); }
.ms-cell {
  aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative;
  font: 700 2rem / 1 var(--font-print); color: var(--ink); background: var(--card);
  border: 3px solid var(--ink); border-radius: 14px; padding: 0; transition: background .12s, transform .12s;
}
button.ms-cell { cursor: pointer; }
.ms-cell.given { background: var(--vowel); }
.ms-cell.empty { border-style: dashed; border-color: var(--muted); }
.ms-cell.sel { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 28%, transparent); transform: scale(1.05); z-index: 1; }
.ms-cell .old { opacity: .35; }
.ms-cell.ok { background: var(--good-bg); border-color: var(--good); }
.ms-cell.bad { background: var(--bad-bg); border-color: var(--bad); }
.ms-cell small { position: absolute; bottom: 4px; font: 700 .85rem / 1 var(--font-ui); color: var(--bad); }

/* váha */
.vh-svg { width: 100%; max-width: 400px; height: auto; overflow: visible; }
.vh-stand { fill: var(--line); }
.vh-bar { fill: var(--accent); }
.vh-pivot { fill: var(--ink); }
.vh-rope { stroke: var(--muted); stroke-width: 3; }
.vh-plate { fill: var(--ink); }
.vh-chip { fill: var(--card); stroke: var(--ink); stroke-width: 3; }
.vh-chip.q { fill: var(--vowel); stroke-dasharray: 7 5; }
.vh-chip.good { fill: var(--good-bg); stroke: var(--good); stroke-dasharray: none; }
.vh-chip.bad { fill: var(--bad-bg); stroke: var(--bad); stroke-dasharray: none; }
.vh-chip.shake { animation: vh-shake .35s; }
.vh-num { font: 700 26px / 1 var(--font-print); fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.vh-beam, .vh-pan { transition: transform .6s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes vh-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* číselná osa */
.nl-ask { font-size: 1.6rem; font-weight: 700; text-align: center; }
.nl-ask b { color: var(--accent); font-size: 1.3em; }
.nl-wrap { width: 100%; padding: 0 20px; box-sizing: border-box; }
.nl-line { position: relative; height: 130px; touch-action: none; cursor: pointer; user-select: none; outline-offset: 6px; }
.nl-axis { position: absolute; left: 0; right: 0; top: 70px; height: 6px; margin-top: -3px; background: var(--ink); border-radius: 3px; }
.nl-tick { position: absolute; top: 62px; width: 3px; height: 16px; margin-left: -1.5px; background: var(--ink); }
.nl-tick.major { top: 54px; height: 32px; width: 4px; margin-left: -2px; }
.nl-lab { position: absolute; top: 90px; transform: translateX(-50%); font: 700 1rem / 1 var(--font-print); color: var(--muted); }
.nl-mark { position: absolute; top: 70px; width: 0; transition: left .12s; }
.nl-mark::after { content: ""; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 3px solid var(--card); box-shadow: 0 0 0 2px var(--accent); }
.nl-bubble {
  position: absolute; bottom: 14px; left: 0; transform: translateX(-50%); min-width: 2.2em; text-align: center; padding: 4px 8px;
  font: 700 1.2rem / 1 var(--font-print); color: var(--accent-ink); background: var(--accent); border-radius: 10px;
}
.nl-mark.ok::after { background: var(--good); box-shadow: 0 0 0 2px var(--good); }
.nl-mark.ok .nl-bubble { background: var(--good); }
.nl-mark.bad::after { background: var(--bad); box-shadow: 0 0 0 2px var(--bad); }
.nl-mark.bad .nl-bubble { background: var(--bad); }
.nl-mark.target { transition: none; }
.nl-mark.target::after { background: var(--good); box-shadow: 0 0 0 2px var(--good); }
.nl-mark.target .nl-bubble { background: var(--good); bottom: auto; top: 18px; }

@media (prefers-reduced-motion: reduce) { .vh-beam, .vh-pan, .ms-cell, .nl-mark { transition: none; } .vh-chip.shake { animation: none; } }