section.mathInvaders {  }
section.mathInvaders * { color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; }
section.mathInvaders > .wrap {  }

section.mathInvaders .section-welcome {  }

section.mathInvaders .section-game { display: none; width: 100%; flex: 1 1 auto; }
section.mathInvaders .section-game > .wrap { position: relative; display: flex; flex-direction: column; justify-content: center; width: 100%; min-height: 100%; overflow: hidden; /*background-color: #0A1B48; background-size: 3560px auto; background-position: center bottom; background-repeat: no-repeat;*/ }
/*section.mathInvaders .section-game.bg-loaded > .wrap, section.mathInvaders .section-game.bg-loaded { background-image: url(/media/math-invaders/background.svg); }*/
section.mathInvaders #game-container { position: relative; width: 100%; overflow: hidden; }
section.mathInvaders #hud { position: absolute; top: 15px; left: 15px; right: 15px; display: flex; justify-content: space-between; z-index: 2; font-size: 10px; pointer-events: none; color: var(--rududu-white); }
section.mathInvaders #hud .stat-box { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 12px; border: 1px solid #8566FE; border-radius: 999px; background: rgba(10, 27, 72, 0.75); backdrop-filter: blur(4px); }
section.mathInvaders #hud .score-label, section.mathInvaders #hud .ammo-label { color: var(--rududu-white); font-size: 12px; line-height: 1; font-weight: 400; }
section.mathInvaders #player { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 40px; height: 80px; background-image: url(/media/math-invaders/player.svg); background-size: contain; background-repeat: no-repeat; z-index: 1; }
section.mathInvaders #player.is-hit { animation: math-invaders-player-hit 0.25s ease-in-out 8 alternate; }
@keyframes math-invaders-player-hit {
    from { opacity: 1; }
    to { opacity: 0.45; }
}
section.mathInvaders .section-game .actions { position: absolute; right: 20px; bottom: 20px; z-index: 4; display: none; min-height: 0; }
section.mathInvaders .section-game .actions button { margin: 0; }
section.mathInvaders .demon { position: absolute; width: 40px; height: 80px; background-size: contain; background-repeat: no-repeat; z-index: 4; cursor: pointer; }
section.mathInvaders .demon-1 { background-image: url(/media/math-invaders/demon-1.svg); }
section.mathInvaders .demon-2 { background-image: url(/media/math-invaders/demon-2.svg); }
section.mathInvaders .bullet { position: absolute; width: 8px; height: 8px; background: var(--rududu-text); z-index: 1; }
section.mathInvaders .explosion { position: absolute; width: 40px; height: 80px; background-image: url(/media/math-invaders/explosion.svg); background-size: contain; background-repeat: no-repeat; z-index: 1; pointer-events: none; }
section.mathInvaders #math-overlay { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #8566FE; z-index: 8; flex-direction: column; justify-content: center; align-items: center; padding: 24px; text-align: center; }
section.mathInvaders #math-question { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
section.mathInvaders #math-overlay span { color: var(--rududu-white); font-size: 24px; line-height: 24px; font-weight: 400; }
section.mathInvaders #math-overlay input { width: 40px; font-size: 24px; line-height: 24px; font-weight: 400; outline: none; background: #8566FE; border: none; border-bottom: 1px solid var(--rududu-white); color: var(--rududu-white); vertical-align: baseline; }
section.mathInvaders #math-feedback { margin-top: 12px; min-height: 20px; color: var(--rududu-white); font-size: 16px; line-height: 1.2; }
section.mathInvaders .btn-ui { margin: 3px 8px 3px 0px; line-height: 24px; display: inline-block; border-radius: 16px; min-width: 38px; padding: 4px 8px; text-align: center; font-size: 16px; font-weight: 300; vertical-align: bottom; border: 1px solid #00EF9F; background: #00EF9F; color: var(--rududu-black); text-align: left; }
section.mathInvaders .aside-tools-mathInvaders { display: block; position: absolute; right: 24px; bottom: 24px; z-index: 999; pointer-events: auto; margin: 0; padding: 0; }
section.mathInvaders .tools-mathInvaders { display: block; margin: 0; padding: 0; list-style: none; }
section.mathInvaders .tools-mathInvaders button { display: none; appearance: none; -webkit-appearance: none; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; margin: 0; padding: 8px 14px; border: 1px solid var(--rududu-black); border-radius: 999px; background: rgba(255, 255, 255, 0.88); color: var(--rududu-black); font-size: 16px; line-height: 1; font-weight: 400; text-align: center; cursor: pointer; pointer-events: auto; }
section.mathInvaders .tools-mathInvaders button:hover { background: var(--rududu-black) !important; border-color: var(--rududu-black) !important; color: var(--rududu-white) !important; }
section.mathInvaders.is-playing .section-welcome { display: none; }
section.mathInvaders.is-playing .section-game { display: block; }
/*section.mathInvaders .section-game > .wrap { background-color: var(--rududu-black); color: var(--rududu-yellow); }
section.mathInvaders .section-welcome .title, section.mathInvaders .section-welcome .options, section.mathInvaders .section-welcome .options button { border-color: var(--rududu-yellow); color: var(--rududu-yellow); }
section.mathInvaders .section-welcome .options button.active, section.mathInvaders .section-welcome .actions button { border-color: var(--rududu-lime); background: var(--rududu-lime); color: var(--rududu-black); }*/