/* Alapstílus – korábban a ../math-round.css-ből jött, most csak az, amit Breki használ */
.math-round { width: 100%; max-width: 740px; margin: auto; text-align: center; }
.math-round .game-controls { display: flex; gap: .6rem; justify-content: center; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.math-equation { font-size: clamp(1.1rem, 3vw, 1.6rem); margin: .8rem 0; overflow-wrap: anywhere; }
.math-numberline { width: 100%; overflow: auto; padding: .5rem 0; }
.math-numberline svg { display: block; width: 100%; height: auto; }
.math-round button:focus-visible { outline: 3px solid #7051d5; outline-offset: 3px; }
.math-round button:disabled { cursor: default; }
@media (max-width: 480px) { .math-round .button { padding: .45rem .7rem; } }
.math-numberline .frog-number { color: #7051a1; }
.math-numberline .frog-number circle:not(.frog-number-bg) { fill: currentColor; stroke: #fff; stroke-width: 2; }
.math-numberline .frog-number text { fill: currentColor; font-weight: 600; }
.math-numberline .frog-number[aria-disabled="false"] { cursor: pointer; }
.math-numberline .frog-number[aria-disabled="false"]:hover circle:not(.frog-number-bg),
.math-numberline .frog-number:focus-visible circle:not(.frog-number-bg),
.math-numberline .frog-number.is-selected circle:not(.frog-number-bg) { fill: #ffe082; stroke: #7051a1; stroke-width: 3; r: 10; }
.math-numberline .frog-number[aria-disabled="false"]:hover text,
.math-numberline .frog-number:focus-visible text { fill: #452376; }
.math-numberline .math-frog { transition: none; }

.frog-task, .frog-question { font: inherit; font-size: 1.25rem; line-height: 1.5; text-align: center; }
.math-numberline .frog-number.is-selected.is-wrong circle:not(.frog-number-bg) { fill: #f8cccc; stroke: #b42318; }
.math-numberline .frog-number.is-selected.is-correct circle:not(.frog-number-bg) { fill: #c5edc7; stroke: #287530; }

.math-round:has(.frog-checking) > .game-instructions { visibility: hidden; }
.math-numberline .frog-number.is-landing circle:not(.frog-number-bg) { animation: frog-landing 450ms ease-out; }
.math-numberline .frog-number.is-landing text { fill: #287530; }
@keyframes frog-landing { 0%, 45% { fill: #ffe082; r: 12; } 100% { r: 7; } }
@media (prefers-reduced-motion: reduce) { .math-numberline .frog-number.is-landing circle:not(.frog-number-bg) { animation: none; } }

.game-engine-root[data-level^="number-frog-"] .math-round { max-width: none; }

@media (max-width: 600px) {
    .math-numberline .math-frog foreignObject { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(0.6666667); }
}

.math-numberline .frog-number:focus { outline: none; }
.math-numberline .frog-number .frog-number-bg { fill: transparent; stroke: none; }
.math-numberline .frog-number:focus-visible .frog-number-bg { stroke: #452376; stroke-width: 3; }
.math-numberline .frog-number.is-answer .frog-number-bg { fill: #59a743; }
.math-numberline .frog-number.is-answer text,
.math-numberline .frog-number.is-answer:hover text,
.math-numberline .frog-number.is-answer:focus-visible text { fill: #fff; }
@media (max-width: 600px) {
    .math-numberline .frog-leaf image { transform-box: fill-box; transform-origin: center; transform: scale(0.6666667); }
}

.math-round .frog-task,
.math-round .frog-equations { width: fit-content; margin: .8rem auto; padding: .45rem 1.1rem; border-radius: 1rem; background: #fff; box-shadow: 0 3px 10px rgba(35, 22, 67, .12); }
.math-round .frog-equations { font-weight: 700; }

.game-engine-root[data-level^="number-frog-"] .math-round > button.green { display: block; margin: .6rem auto 0; }

.game-engine-root[data-level^="number-frog-"] .game-controls { justify-content: flex-end; }
.math-numberline .frog-number.is-minor text { visibility: hidden; }
.math-numberline .frog-number.is-minor.is-selected text,
.math-numberline .frog-number.is-minor.is-answer text,
.math-numberline .frog-number.is-minor.is-landing text,
.math-numberline .frog-number.is-minor:hover text,
.math-numberline .frog-number.is-minor:focus-visible text { visibility: visible; }