* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: #f0f8ff; color: #1c3542; font-family: Arial, sans-serif; }
button, input, select { font: inherit; }
button, a, select { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .65; }
:focus-visible { outline: 3px solid #173b77; outline-offset: 3px; }
.game-nav { width: 100%; margin: 0; padding: 14px 16px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.menu-button { justify-self: start; background: white; text-decoration: none; color: #368e3d; border: 2px solid #4caf50; border-radius: 4px; padding: 12px 20px; }
.menu-button::before { content: '← '; }
.levels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; min-width: 360px; }
.levels button { border: 3px solid transparent; border-radius: 8px; color: #fff; padding: 12px 8px; font-weight: bold; }
.easy { background: #4caf50; }.normal { background: #2196f3; }.hard { background: #ff9800; }.crazy { background: #f44336; }
.levels [aria-pressed="true"] { border-color: #233944; box-shadow: 0 0 9px #94adb9; transform: scale(1.04); }
.language { display: flex; align-items: center; gap: 7px; max-width: 100%; }
.language img { width: 30px; height: 20px; object-fit: cover; }
.language select { width: 135px; max-width: 100%; padding: 9px 4px; border: 1px solid #aabec9; border-radius: 6px; background: white; }
.flag-picker { justify-self: end; position: relative; }
#language-button { display: flex; align-items: center; gap: 14px; border: 2px solid #4caf50; border-radius: 4px; background: white; padding: 10px 14px; color: #368e3d; }
#language-button img { width: 40px; height: 27px; object-fit: cover; }
.flag-dropdown { position: absolute; right: 0; top: calc(100% + 8px); width: 240px; max-width: calc(100vw - 32px); max-height: min(650px, 75vh); overflow-y: auto; background: white; border: 1px solid #bacad3; border-radius: 8px; padding: 8px 0; box-shadow: 0 8px 22px #0003; z-index: 10; }
.flag-dropdown button { width: 100%; border: 0; background: white; display: flex; align-items: center; gap: 16px; padding: 12px 18px; text-align: left; color: #172f3c; font-size: 19px; }
.flag-dropdown button:hover, .flag-dropdown button[aria-current="true"] { background: #e9f5ff; }
.flag-dropdown img { width: 32px; height: 22px; object-fit: cover; }
main { width: min(760px, 100%); margin: 10px auto; padding: 0 16px 120px; text-align: center; }
h1 { font-size: clamp(25px, 4vw, 36px); margin: 18px 0 10px; }
#mode-help { min-height: 2.5em; color: #526774; line-height: 1.5; }
.question-card { background: #fff; border: 1px solid #d7e5ed; border-radius: 18px; padding: 24px; box-shadow: 0 8px 25px #244b6510; }
h2 { font-size: 24px; margin: 0 0 20px; }
.equation { font-size: clamp(29px, 6vw, 56px); font-weight: 600; margin: 15px 0 30px; overflow-wrap: anywhere; }
.choices { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.choice { border: 2px solid #2196f3; color: #1b5483; background: #e9f5ff; border-radius: 12px; min-width: 100px; padding: 18px 12px; font-size: 32px; }
.choice:hover:not(:disabled) { background: #d0eaff; }
.choice.right { background: #e1f5e2; border-color: #4caf50; }
.choice.wrong { background: #ffe9e6; border-color: #f44336; }
#answer-form { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; max-width: 370px; margin: auto; }
#answer-form label { font-size: 30px; }
#answer { width: 100%; min-width: 0; padding: 10px; font-size: 28px; text-align: center; border: 2px solid #b8d0df; border-radius: 8px; }
.submit { background: #2196f3; color: white; border: 0; border-radius: 8px; padding: 14px; }
.keypad { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.keypad button { background: #edf6fc; color: #1c3542; border: 1px solid #b8d0df; border-radius: 8px; min-height: 48px; font-size: 25px; }
.result { margin: 20px 0 0; min-height: 24px; font-weight: bold; font-size: 19px; }
.result.right { color: #237d2c; }.result.wrong { color: #b1261d; }
.correction { min-height: 24px; margin: 10px 0 0; font-size: 18px; }
#stats { position: fixed; bottom: 0; left: 0; right: 0; display: grid; grid-template-columns: repeat(3, 1fr); background: #4caf50; color: white; padding: 13px 8px max(13px, env(safe-area-inset-bottom)); text-align: center; z-index: 2; }
#stats div { display: grid; gap: 5px; padding: 0 6px; font-size: 16px; }
#stats strong { font-size: 24px; }
.feedback-icon { display: none; position: fixed; z-index: 5; top: 45%; left: calc(50% - 72px); width: 144px; height: 144px; border: 4px solid #333; border-radius: 50%; color: white; font-size: 110px; line-height: 136px; text-align: center; box-shadow: 0 5px 15px #0004; pointer-events: none; animation: fadeInOut 2s ease-in-out forwards; }
.feedback-icon.right { display: block; background: #4caf50; }.feedback-icon.wrong { display: block; background: #f44336; }
/* Same correct/wrong animation as Practice-AddSub. */
@keyframes fadeInOut {
    0% { opacity: 0; transform: scale(.5); }
    15% { opacity: 1; transform: scale(1.2); }
    25%, 50% { opacity: 1; transform: scale(1); }
    60% { opacity: .8; transform: scale(1); }
    70% { opacity: .6; transform: scale(.9); }
    80% { opacity: .4; transform: scale(.8); }
    90% { opacity: .2; transform: scale(.7); }
    100% { opacity: 0; transform: scale(.5); }
}
@media (max-width: 600px) {
    .game-nav { grid-template-columns: 1fr 1fr; }.levels { grid-column: 1 / -1; grid-row: 2; min-width: 0; gap: 5px; }.language { margin-left: auto; }
    .levels button { font-size: 14px; padding: 12px 2px; }
    .question-card { padding: 20px 12px; }.choice { min-width: 70px; font-size: 27px; }
    .choices { gap: 8px; }#answer-form { gap: 7px; }.submit { padding: 12px 7px; }
    #stats div { font-size: 13px; }#stats strong { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) { .feedback-icon { animation: none; } }